/*--------------------------------------------------------------
  Skroll design layer (loaded after the Arino template styles).

  The site is DARK, period. Section-level `cs-light` classes left in
  page markup are inert (kept only to avoid touching every template).
----------------------------------------------------------------*/

:root {
  --sk-light: #f6f4f1;
  --sk-card: #ffffff;
  --sk-ink: #17130f;
  --sk-ink-soft: rgba(23, 19, 15, 0.72);
  --sk-ink-faint: rgba(23, 19, 15, 0.5);
  --sk-line: rgba(23, 19, 15, 0.14);
  --sk-accent: #ff4a17;
  --sk-accent-hi: #ff6a1a;
  --sk-accent-deep: #d63a0e;
}

/* ==========================================================================
   DARK-NATIVE COMPONENT DEFAULTS (shared pieces that live in this sheet)
   ========================================================================== */

/* Editorial page header (replaces the template's bg-image page headings) */
.cs-pagehead {
  padding: 190px 0 90px;
}
.cs-pagehead_eyebrow {
  display: inline-block;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sk-accent-hi);
  margin: 0 0 1.1rem;
}
.cs-pagehead_title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(2.8rem, 6.2vw, 5.4rem);
  line-height: 1.04;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0;
  max-width: 20ch;
  color: #fefefe;
}

/* ===== Editorial display headings: Instrument Serif on the big titles,
   Instrument Sans stays the body + UI/label face ===== */
.cs-section_title,
.cs-statement_title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.cs-pagehead_sub {
  margin: 1.6rem 0 0;
  max-width: 620px;
  font-size: 1.15rem;
  line-height: 1.7;
  color: rgba(254, 254, 254, 0.72);
}
@media (max-width: 767px) {
  .cs-pagehead { padding: 140px 0 60px; }
}

/* Long article/case titles: slightly smaller ceiling than section pageheads */
.cs-pagehead_title_article {
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
  max-width: 26ch;
}

/* Solid dark bar behind the fixed header on pages without a dark hero */
.sk-solid-header .cs-site_header.cs-style1 {
  background-color: #141110;
}

/* Global type-scale lift */
.cs-section_title {
  font-size: clamp(2.1rem, 3.6vw, 3.2rem);
  line-height: 1.12;
}

/* One link affordance: arrows stay orange everywhere */
.cs-work_card_arrow, .cs-num_item_arrow { color: var(--sk-accent); }

/* Case-study tag chip */
.cs-work_tag_case {
  border-color: rgba(255, 74, 23, 0.55);
  color: var(--sk-accent-hi);
  font-weight: 600;
}

/* ===== Header toolbar: language button ===== */
.sk-toolbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-right: 12px;
  border: 1px solid rgba(254, 254, 254, 0.28);
  border-radius: 999px;
  background: transparent;
  color: #fefefe;
  font-size: 0.95rem;
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
  vertical-align: middle;
}
.sk-toolbtn:hover {
  border-color: var(--sk-accent);
  color: var(--sk-accent-hi);
  background: rgba(255, 74, 23, 0.08);
}
.sk-lang {
  width: auto;
  padding: 0 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
}
.cs-toolbox { display: flex; align-items: center; }
@media (max-width: 575px) {
  .sk-toolbtn { width: 38px; height: 38px; margin-right: 8px; }
  .sk-lang { padding: 0 12px; }
}
/* Keep the toolbar compact while the desktop nav is visible */
@media (min-width: 992px) and (max-width: 1400px) {
  .sk-toolbtn { width: 36px; height: 36px; margin-right: 8px; font-size: 0.85rem; }
  .sk-lang { padding: 0 11px; font-size: 0.78rem; }
}
/* ===== Mobile header: one menu only =====
   Below 1200px the template collapses the primary nav into .cs-munu_toggle
   (the working hamburger) and hides the desktop toolbox. We re-show the
   toolbox above (line ~114) so the language switch stays reachable — but that
   also drags back the circular .cs-icon_btn, whose slide-out panel
   (.cs-side_header) is display:none on mobile, so it opens nothing. That was
   the "double hamburger that brings up no items". Drop the dead button on
   mobile and give the absolute nav toggle room so the language pill clears it. */
@media (max-width: 1199px) {
  .cs-site_header.cs-style1 .cs-icon_btn { display: none; }
  .cs-toolbox { margin-right: 46px; }
  /* The toolbar (.cs-main_header_right) carries z-index:12 and overlaps the
     hamburger, which the template pins to the right edge of the zero-width nav
     container — so a real tap was landing on the toolbar, not the toggle. Lift
     the toggle above the toolbar so it receives the tap, and lift the revealed
     nav list above the hero so its links are clickable. */
  .cs-munu_toggle { z-index: 1001; pointer-events: auto; }
  .cs-nav .cs-nav_list { z-index: 1000; }
}

/* The header's Start-a-project CTA (and the Contact page) replace the
   redundant slide-out panel trigger; hide it at every width so the toolbar
   stays narrow enough to clear the centered nav. */
.cs-site_header.cs-style1 .cs-icon_btn { display: none; }

/* ===== Header primary CTA (desktop) + tap-to-call (mobile) ===== */
.sk-header_cta {
  margin-right: 12px;
  padding: 11px 22px;
  font-size: 0.9rem;
  white-space: nowrap;
}
.sk-header_call { display: none; }
.sk-header_call i { font-size: 0.95rem; }
@media (min-width: 992px) and (max-width: 1400px) {
  .sk-header_cta { padding: 9px 16px; font-size: 0.82rem; margin-right: 8px; }
}
@media (max-width: 767px) {
  .sk-header_cta { display: none !important; }
  .sk-header_call { display: inline-flex !important; align-items: center; justify-content: center; }
}
/* Tighten desktop nav spacing so the centered nav clears the CTA toolbar
   at every desktop width. Graduated so all 7 items fit at narrow desktop
   widths (container is only 960-1140px there) and breathe on wide screens. */
@media (min-width: 992px) {
  .cs-nav .cs-nav_list > li { margin-right: 18px; }
}
@media (min-width: 1280px) {
  .cs-nav .cs-nav_list > li { margin-right: 26px; }
}
@media (min-width: 1500px) {
  .cs-nav .cs-nav_list > li { margin-right: 34px; }
}

/* The template's absolutely-positioned nav container spans the full header
   width and swallows clicks meant for the toolbar. Let empty areas pass
   clicks through; the nav itself stays interactive. */
.cs-main_header_center { pointer-events: none; }
.cs-main_header_center .cs-nav { pointer-events: auto; }
.cs-main_header_right { position: relative; z-index: 12; }

/* ===== Display serif utilities (Instrument Serif) ===== */
.sk-serif { font-family: 'Instrument Serif', serif; font-weight: 400; }
.sk-serif-italic { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; }

/* ===== Speed / AI-era proof band (used on EN + FR home) ===== */
.sk-speed { background: #141110; }
.sk-speed_lead { max-width: 640px; margin: 0 auto; font-size: 1.05rem; line-height: 1.7; opacity: 0.78; }
.sk-speed_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.sk-speed_card { border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 1.8rem 1.5rem; background: rgba(255,255,255,0.02); transition: border-color 0.25s ease, transform 0.25s ease; }
.sk-speed_card:hover { border-color: rgba(255,106,26,0.5); transform: translateY(-4px); }
.sk-speed_num { font-size: 1.5rem; font-weight: 600; color: #ff6a1a; margin-bottom: 0.6rem; }
.sk-speed_card p { margin: 0; opacity: 0.8; line-height: 1.55; font-size: 0.98rem; }
@media (max-width: 991px) { .sk-speed_grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .sk-speed_grid { grid-template-columns: 1fr; } }

/* ===== WhatsApp chat widget (metheqcuisine-style, Skroll-branded) ===== */
.sk-wa { position: fixed; right: 22px; bottom: 22px; z-index: 9999; }
.sk-wa__toggle { width: 60px; height: 60px; border-radius: 50%; border: 0; cursor: pointer; background: #25D366; color: #fff; font-size: 28px; box-shadow: 0 10px 26px rgba(0,0,0,.3); position: relative; display: grid; place-items: center; transition: transform .2s ease; }
.sk-wa__toggle:hover { transform: scale(1.06); color: #fff; }
.sk-wa__toggle::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #25D366; opacity: .5; animation: sk-wa-pulse 2.2s ease-out infinite; z-index: -1; }
@keyframes sk-wa-pulse { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(1.85); opacity: 0; } }
.sk-wa.is-open .sk-wa__toggle::before { animation: none; }
.sk-wa__icon-close { display: none; }
.sk-wa.is-open .sk-wa__icon-chat { display: none; }
.sk-wa.is-open .sk-wa__icon-close { display: block; }
.sk-wa__panel { position: absolute; bottom: 76px; right: 0; width: 340px; max-width: calc(100vw - 44px); background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.35); transform: translateY(16px) scale(.96); transform-origin: bottom right; opacity: 0; pointer-events: none; transition: transform .25s ease, opacity .25s ease; }
.sk-wa.is-open .sk-wa__panel { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
.sk-wa__header { background: #075E54; color: #fff; padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.sk-wa__avatar { width: 44px; height: 44px; border-radius: 50%; background: #fff; display: grid; place-items: center; overflow: hidden; flex: none; }
.sk-wa__avatar img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.sk-wa__ident { line-height: 1.35; }
.sk-wa__ident strong { display: block; font-size: 15px; color: #fff; }
.sk-wa__ident span { font-size: 12px; color: #b9d8cf; display: flex; align-items: center; gap: 6px; }
.sk-wa__dot { width: 8px; height: 8px; border-radius: 50%; background: #25D366; display: inline-block; }
.sk-wa__close { margin-left: auto; background: transparent; border: 0; color: #fff; font-size: 17px; cursor: pointer; opacity: .85; line-height: 1; }
.sk-wa__close:hover { opacity: 1; }
.sk-wa__body { padding: 20px 16px; background: #ece5dd; min-height: 120px; background-image: linear-gradient(rgba(255,255,255,.02), rgba(255,255,255,.02)); }
.sk-wa__bubble { background: #fff; border-radius: 2px 12px 12px 12px; padding: 12px 14px; font-size: 14px; color: #333; box-shadow: 0 1px 2px rgba(0,0,0,.12); max-width: 92%; line-height: 1.55; }
.sk-wa__form { display: flex; gap: 8px; padding: 10px; background: #f4f0e9; }
.sk-wa__input { flex: 1; border: 1px solid #ddd; border-radius: 22px; padding: 10px 16px; font-size: 14px; outline: none; color: #333; background: #fff; }
.sk-wa__input:focus { border-color: #25D366; }
.sk-wa__send { width: 44px; height: 44px; border-radius: 50%; border: 0; background: #25D366; color: #fff; cursor: pointer; flex: none; font-size: 16px; display: grid; place-items: center; }
.sk-wa__send:hover { background: #1eb356; color: #fff; }
@media (max-width: 480px) { .sk-wa { right: 16px; bottom: 16px; } .sk-wa__toggle { width: 56px; height: 56px; font-size: 26px; } }

/* ===== AEO direct-answer block + FAQ accordion (service pages + home) ===== */
.sk-answer {
  border-left: 3px solid #ff4a17;
  background: linear-gradient(135deg, rgba(255,74,23,0.10), rgba(255,106,26,0.03));
  border-radius: 12px;
  padding: 1.4rem 1.6rem;
  max-width: 900px;
}
.sk-answer_label { display:block; font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase; color:#ff6a1a; margin-bottom:0.5rem; }
.sk-answer p { margin:0; font-size:1.12rem; line-height:1.7; }
.sk-faq { max-width: 860px; margin: 0 auto; }
.sk-faq_item { border:1px solid rgba(255,255,255,0.12); border-radius:12px; margin-bottom:0.9rem; overflow:hidden; background:rgba(255,255,255,0.02); }
.sk-faq_item[open] { border-color: rgba(255,106,26,0.45); }
.sk-faq_item summary {
  list-style:none; cursor:pointer; padding:1.1rem 1.3rem; font-size:1.05rem; font-weight:600;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.sk-faq_item summary::-webkit-details-marker { display:none; }
.sk-faq_item summary::after { content:'+'; color:#ff6a1a; font-size:1.4rem; line-height:1; flex:none; transition: transform 0.2s ease; }
.sk-faq_item[open] summary::after { transform: rotate(45deg); }
.sk-faq_a { padding:0 1.3rem 1.2rem; }
.sk-faq_a p { margin:0; opacity:0.82; line-height:1.65; }
.sk-faq_section { background:#141110; }
.sk-faq_lead { max-width:680px; margin:0 auto; font-size:1.05rem; line-height:1.7; opacity:0.8; }

/* ===== Language switcher dropdown ===== */
.sk-langmenu { position: relative; display: inline-block; }
.sk-langmenu > summary { list-style: none; cursor: pointer; }
.sk-langmenu > summary::-webkit-details-marker { display: none; }
.sk-langmenu_list { position: absolute; top: calc(100% + 8px); right: 0; background: #1a1613; border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; padding: 6px; min-width: 168px; list-style: none; z-index: 1000; box-shadow: 0 16px 40px rgba(0,0,0,0.45); }
.sk-langmenu_list li a { display: block; padding: 0.55rem 0.85rem; border-radius: 8px; font-size: 0.95rem; color: #fefefe; }
.sk-langmenu_list li a:hover { background: rgba(255,106,26,0.14); color: #ff6a1a; }
.sk-langmenu_list li a.is-active { color: #ff6a1a; font-weight: 600; }

/* ===== Pricing: three-paths routing strip ===== */
.sk-paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.sk-path { display: block; border: 1px solid rgba(255,255,255,0.14); border-radius: 14px; padding: 1.25rem 1.4rem; transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease; }
.sk-path:hover { border-color: #ff6a1a; background: rgba(255,106,26,0.07); transform: translateY(-3px); }
.sk-path strong { display: block; color: #fff; margin-bottom: 0.3rem; font-size: 1.05rem; }
.sk-path span { display: block; opacity: 0.75; font-size: 0.95rem; line-height: 1.5; }
.sk-pgroup { scroll-margin-top: 110px; }
.sk-price_card { scroll-margin-top: 110px; }
@media (max-width: 767px) { .sk-paths { grid-template-columns: 1fr; } }
.sk-jump { display: flex; flex-wrap: wrap; gap: 0.5rem 0.6rem; justify-content: center; }
.sk-jump a { font-size: 0.85rem; padding: 0.35rem 0.85rem; border: 1px solid rgba(255,255,255,0.15); border-radius: 999px; opacity: 0.85; transition: border-color 0.2s ease, color 0.2s ease; }
.sk-jump a:hover { border-color: #ff6a1a; color: #ff6a1a; opacity: 1; }
.sk-price_teaser { margin-top: 0.9rem; font-size: 0.95rem; color: #ff6a1a; letter-spacing: 0.01em; }

/* ===== Blog comments ===== */
.sk-comments { max-width: 760px; margin: 0 auto; }
.sk-comments_title { font-size: 1.6rem; margin-bottom: 1.4rem; }
.sk-comments_empty { opacity: 0.6; }
.sk-comment { border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 1rem 1.2rem; margin-bottom: 0.9rem; background: rgba(255,255,255,0.02); }
.sk-comment_head { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.4rem; }
.sk-comment_head span { opacity: 0.55; font-size: 0.85rem; }
.sk-comment p { margin: 0; opacity: 0.85; line-height: 1.6; }
.sk-comments_form { margin-top: 1.6rem; }
.sk-comments_row { margin-bottom: 1rem; max-width: 320px; }
.sk-comments_form textarea { width: 100%; }
.sk-comments_actions { display: flex; align-items: center; gap: 1rem; margin-top: 1.1rem; }
.sk-comments_status { font-size: 0.9rem; color: #ff6a1a; }
.sk-hp { position: absolute; left: -9999px; opacity: 0; height: 0; }