@import url("../fonts/fonts.css");

/* ============================================================
   Digital Zone — the funnel
   English (LTR) and Arabic (RTL) share this file.

   The page is not eight stacked sections. It is one descent through five
   pressure stages. Three things narrow together as the visitor goes down:
   the content column, the ambient light, and the distance anything moves.
   By the final call to action the column is half its hero width and the
   button is the brightest object on screen.

        stage   width   light
        1 hero   100%   brightest, slow ambient drift
        2 svc     92%   directional, lateral motion
        3 how     78%   dimming, forward-only
        4 cal     68%   lowest, tight
        5 ask     56%   gold rises          <- the narrowest point, the one ask
          faq     78%   settling
          end     86%   motion settles and stops

   The funnel narrows to the ask and then opens again. Everything after stage 5
   is reference material, not persuasion: squeezing fourteen questions and three
   contact cards into a 548px column made them unreadable, and an unreadable
   contact card costs more than a tidy silhouette earns.

   Painting order, back to front:
     section::before  z -1   ambient gradient for that stage
     .keylight        z  0   the one moving light, fixed, travels with scroll
     body::after      z  0   grain, fixed, 2.8%
     .wrap            z  1   content
   Sections must not create a stacking context or the key light is trapped
   behind them: no transform, no isolation and no z-index on <section>.
   ============================================================ */

:root{
  --deep:#03162C; --navy:#09325C; --lead:#0B3D6E;
  --gold:#D4AF6A; --gold-soft:#F2DDA8; --gold-deep:#9D7534; --gold-ink:#8A6629; --earth:#5CB8E8;
  --on-1:#EDF3FA; --on-2:#A8BBD1; --on-3:#7E93AC;
  --white:#fff; --ink:#0F1B2D; --slate:#5B6B80; --mist:#C9D3DF;
  --display:'Montserrat',system-ui,sans-serif;
  --body:'DM Sans',system-ui,sans-serif;
  --arabic:'Tajawal',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --wrap:1140px;
  --r:16px;
  --ease:cubic-bezier(.16,1,.3,1);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
[dir="rtl"]{ --display:'Tajawal',system-ui,sans-serif; --body:'Tajawal',system-ui,sans-serif }

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{-webkit-text-size-adjust:100%;scroll-padding-top:92px;scroll-behavior:smooth}
body{font-family:var(--body);font-size:17px;line-height:1.62;color:var(--on-1);
  background:#02101F;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
::selection{background:var(--gold-soft);color:var(--deep)}

/* ---------- The funnel: one variable, five values ---------- */
section{position:relative;--stage:1;padding:clamp(64px,8vw,120px) 0}
.wrap{position:relative;z-index:1;margin-inline:auto;
  width:min(calc(var(--wrap) * var(--stage)), 100% - 32px)}
@media(min-width:760px){.wrap{width:min(calc(var(--wrap) * var(--stage)), 100% - 64px)}}
.stage-1{--stage:1}
.stage-2{--stage:.92}
.stage-3{--stage:.78}
.stage-4{--stage:.68}
.stage-5{--stage:.56}
.stage-6{--stage:.78}
.stage-7{--stage:.86}
/* Below the two-column breakpoint the funnel is vertical only. Narrowing a
   375px screen to 48% would make the final ask unreadable. */
@media(max-width:899px){section{--stage:1}}

/* ---------- Ambient light, dimming stage by stage ---------- */
section::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.stage-1::before{background:linear-gradient(165deg,#0E4679 0%,#08305A 42%,#03162C 100%)}
.stage-2::before{background:linear-gradient(180deg,#03162C 0%,#061F3A 38%,#04182E 100%)}
.stage-3::before{background:linear-gradient(180deg,#04182E 0%,#031526 55%,#02111F 100%)}
.stage-4::before{background:linear-gradient(180deg,#02111F 0%,#010B14 50%,#010A13 100%)}
.stage-5::before{background:
  radial-gradient(70% 90% at 50% 112%, rgba(212,175,106,.20), rgba(212,175,106,.05) 46%, transparent 72%),
  linear-gradient(180deg,#010A13 0%,#041A31 70%,#06243F 100%)}
.stage-6::before{background:linear-gradient(180deg,#06243F 0%,#05203A 100%)}
.stage-7::before,.stage-end::before{background:
  radial-gradient(60% 80% at 50% 40%, rgba(212,175,106,.13), transparent 68%),
  linear-gradient(180deg,#05203A 0%,#03162C 100%)}

/* ---------- Background video ----------
   Decorative, muted, looping, and never in the way: the container owns the
   aspect ratio so nothing shifts while the file arrives, and the video fades
   in only once it can actually play. site.js decides whether to load it at
   all — it does not on a reduced-motion or data-saver device, and it pauses
   anything that scrolls out of view so no clip ever plays unseen. */
.vid{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.vid video{width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity 1.1s var(--ease)}
.vid video.ready{opacity:var(--vid-op,.3)}
.vid::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(2,14,28,.55),rgba(2,14,28,.82))}

/* ---------- The one moving light ----------
   A single key light travels with the visitor. JS writes --kx / --ky from
   scroll progress; nothing else moves it. Transform only. It is switched on
   after first paint so it cannot cost anything against LCP. */
.keylight{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;
  background:radial-gradient(42vmax 42vmax at 50% 50%,
    rgba(212,175,106,.17) 0%, rgba(212,175,106,.07) 34%, rgba(92,184,232,.03) 58%, transparent 74%);
  transform:translate3d(var(--kx,0px),var(--ky,0px),0);
  transition:opacity 1.4s ease}
.lit .keylight{opacity:1}

/* Grain. One fixed layer for the whole page — this is what stops the dark
   gradients reading as flat generated fill. */
body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:.028;background-image:var(--grain)}

/* Volumetric shafts. Hero and the final ask only, 2–4%. */
.shafts{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.shafts::before,.shafts::after{content:"";position:absolute;top:-40%;height:180%;
  background:linear-gradient(90deg,transparent,rgba(242,221,168,.035),transparent)}
.shafts::before{inset-inline-start:8%;width:26%;transform:rotate(13deg)}
.shafts::after{inset-inline-start:46%;width:14%;transform:rotate(9deg);
  background:linear-gradient(90deg,transparent,rgba(242,221,168,.022),transparent)}

/* ---------- Type ---------- */
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.1;color:#fff}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{letter-spacing:0;line-height:1.38}
h2{font-size:clamp(27px,3.5vw,40px)}
h3{font-size:19px;font-weight:700;line-height:1.3}
p{max-width:64ch}
.lede{font-size:clamp(16.5px,1.4vw,18.5px);color:var(--on-2);margin-top:14px}
.head{text-align:center;max-width:640px;margin:0 auto clamp(34px,4vw,52px)}
.head p{margin-inline:auto}
.eyebrow{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);display:block;margin-bottom:13px}
[dir="rtl"] .eyebrow,[dir="rtl"] .kicker,[dir="rtl"] .foot h3{font-family:var(--arabic);letter-spacing:0;font-weight:800;font-size:14px}
.hair{display:block;width:64px;height:2px;margin:16px auto 0;background:var(--gold);
  transform:scaleX(0);transform-origin:left center}
[dir="rtl"] .hair{transform-origin:right center}
.js .head.in .hair{transform:scaleX(1);transition:transform .6s var(--ease)}
.skip{position:absolute;inset-inline-start:-9999px;top:0;background:var(--gold);color:var(--deep);
  padding:12px 18px;font-weight:700;z-index:100}
.skip:focus{inset-inline-start:12px;top:12px}

/* ---------- Motion system ----------
   Everything: transform and opacity. 400–700ms. 60–80ms stagger.
   cubic-bezier(.16,1,.3,1). Nothing linear, nothing animating layout. */
.js .reveal{opacity:0;transform:translateY(22px)}
.js .reveal.in{opacity:1;transform:none;transition:opacity .62s var(--ease),transform .62s var(--ease)}

/* ---------- Buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--display);font-weight:700;font-size:15.5px;text-decoration:none;
  padding:16px 28px;min-height:54px;border-radius:999px;overflow:hidden;
  transition:transform .18s var(--ease),background .18s,color .18s,border-color .18s}
.btn svg{width:19px;height:19px;flex:none}
.btn .arrow{transition:transform .2s var(--ease)}
[dir="rtl"] .btn .arrow{transform:scaleX(-1)}
.btn:hover .arrow{transform:translateX(4px)}
[dir="rtl"] .btn:hover .arrow{transform:scaleX(-1) translateX(4px)}
/* Specular streak: catches the key light as it passes. */
.btn::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 34%)}
.btn-gold{background:var(--gold);color:var(--deep)}
.btn-gold:hover{transform:translateY(-1px)}
.btn-line{border:1.5px solid rgba(255,255,255,.4);color:#fff}
.btn-line:hover{background:rgba(255,255,255,.08);border-color:#fff}
.btn-ghost{border:1.5px solid rgba(212,175,106,.42);color:var(--gold-soft);font-size:14px;
  padding:11px 18px;min-height:44px}
.btn-ghost:hover{background:rgba(212,175,106,.12);border-color:var(--gold)}

/* The one breathing object on the page. A scaling ring, not a box-shadow
   keyframe, so it stays on transform and opacity. */
.btn-breathe::after{content:"";position:absolute;inset:-2px;border-radius:999px;
  border:2px solid var(--gold);opacity:0;pointer-events:none;
  animation:dz-breathe 3.8s var(--ease) infinite}
@keyframes dz-breathe{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(1.22);opacity:0}}
/* overflow:hidden on .btn would clip the ring, so the breathing button opts out. */
.btn-breathe{overflow:visible}

/* ---------- Header ---------- */
.top{position:fixed;inset:0 0 auto;z-index:60;transition:background .3s,box-shadow .3s}
.top.solid{background:rgba(2,14,28,.93);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.top .wrap{--stage:1;display:flex;align-items:center;justify-content:space-between;gap:14px;height:80px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff}
.brand img{width:46px;height:46px;border-radius:50%;background:#fff}
.brand b{font-family:var(--display);font-weight:800;font-size:15.5px;letter-spacing:.05em;line-height:1.1;display:block}
.brand small{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.58);font-family:var(--mono)}
.nav{display:flex;align-items:center;gap:22px}
.nav a.link{color:rgba(255,255,255,.84);text-decoration:none;font-size:15px;font-weight:500}
.nav a.link:hover{color:#fff}
.lang{display:inline-flex;align-items:center;gap:7px;border:1.5px solid rgba(255,255,255,.32);
  color:#fff;text-decoration:none;border-radius:999px;padding:9px 15px;font-weight:700;font-size:14px;min-height:42px}
.lang:hover{background:rgba(255,255,255,.1)}
.lang svg{width:16px;height:16px}
.nav .btn{padding:11px 18px;min-height:44px;font-size:14px}
@media(max-width:979px){.nav a.link{display:none}}
@media(max-width:460px){.brand small{display:none}.nav .btn .txt{display:none}.nav .btn{padding:11px 15px}.lang{padding:9px 12px}}

/* ============================================================
   STAGE 1 — HERO. Full bleed, brightest, slow ambient drift.
   The h1 is the LCP element and is never animated.
   ============================================================ */
.hero{padding:132px 0 clamp(56px,7vw,92px);overflow:hidden}
.hero .bg{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;opacity:.3}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,rgba(3,22,44,.92) 0%,rgba(3,22,44,.8) 42%,rgba(11,61,110,.5) 100%)}
.hero-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(28px,4vw,56px);align-items:center}
@media(max-width:959px){.hero-grid{grid-template-columns:1fr}}
.kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:20px}
.kicker::before{content:"";width:24px;height:2px;background:currentColor}

/* 1.2 — the h1 carries both jobs. Two real lines, both in the DOM, both
   visible, neither hidden. The brand line is the display size; the service
   and location line sits under it at sub-head size. No cloaking anywhere. */
.hero h1{max-width:17ch;margin-bottom:4px}
.h1-brand{display:block;font-size:clamp(34px,5vw,58px);line-height:1.04;color:#fff}
.h1-seo{display:block;margin-top:14px;font-size:clamp(16px,1.7vw,20px);font-weight:700;
  line-height:1.3;letter-spacing:-.005em;color:var(--gold-soft)}
[dir="rtl"] .h1-seo{letter-spacing:0}
.hero .lede{color:rgba(255,255,255,.84);font-size:clamp(17px,1.6vw,19.5px);max-width:50ch;margin-top:18px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.facts{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:28px;font-size:14.5px;color:rgba(255,255,255,.76);max-width:none}
.facts span{display:flex;align-items:center;gap:8px}
.facts span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold-soft);flex:none}

/* The hero mark: a route, not a curve. SVG/SMIL, no script. */
.flow{position:relative}
.flow svg{display:block;width:100%;height:auto;max-width:660px;margin-inline:auto;overflow:visible}
.flow text{font-family:var(--mono);font-size:15px;font-weight:600;letter-spacing:.14em;fill:var(--on-1);
  paint-order:stroke;stroke:#03162C;stroke-width:3.5;stroke-opacity:.55;stroke-linejoin:round}
[dir="rtl"] .flow text{font-family:var(--arabic);font-size:18px;font-weight:800;letter-spacing:0}
.flow .still{display:none}
@media(max-width:959px){.flow svg{max-width:480px;margin-top:-4px}}
@media(prefers-reduced-motion:reduce){.flow .anim{display:none}.flow .still{display:inline}}
.js .hero-float{animation:dz-float 11s ease-in-out infinite}
@keyframes dz-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-10px,0)}}

/* ============================================================
   STAGE 2 — SERVICES. Four digital windows on a horizontal track.
   Vertical scroll drives horizontal translation. Not a carousel: there is
   nothing to click to advance, and the mapping to document scroll is 1:1,
   so the scroll is never trapped and the visitor can always leave.

   All four panels' text is in the DOM at load and is never display:none.
   Inactive panels are opacity, transform and blur only. This is the site's
   primary keyword surface; hiding it would undo the whole rebuild.
   ============================================================ */
/* One panel at a time. Each panel is nearly the full column, so there is never
   a moment where two of them compete for the same attention, and the pan
   distance per panel is short enough that the section does not feel like a
   corridor you have to walk down. 190vh of scroll buys three transitions. */
.svc-scroll{position:relative;height:310vh}
.svc-stage{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
/* stretch, not center: every panel takes the height of the tallest one, so the
   four read as one set of cards rather than four different objects. Their
   actions are already pinned to the bottom with margin-top:auto, so the extra
   height lands as breathing room rather than a gap in the middle. */
.svc-track{display:flex;align-items:stretch;gap:clamp(24px,3vw,44px);
  padding-inline:calc(50vw - min(430px, 43vw));
  will-change:transform;transform:translate3d(var(--pan,0px),0,0)}

/* No blur on the neighbours. Blurring the first and last card made them read
   as broken rather than as out of focus, which is the opposite of the point —
   they are still real, readable panels, just not the one being looked at. */
.panel{--a:0;--px:0px;position:relative;flex:0 0 min(860px,86vw);
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  padding:clamp(32px,3.4vw,46px) clamp(28px,3.4vw,48px) clamp(28px,3vw,40px);
  border-radius:24px;text-decoration:none;color:var(--on-1);
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
  transform:scale(calc(.94 + .06 * var(--a)));
  opacity:calc(.32 + .68 * var(--a));
  overflow:hidden}
/* Bezel: 1px gold-to-transparent gradient border, 2px dark inner inset. */
.panel::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(145deg,rgba(212,175,106,.42),rgba(212,175,106,.06) 38%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  box-shadow:inset 0 0 0 2px rgba(2,12,24,.55)}
/* Fixed diagonal specular highlight, 4–6% white. It does not move with the
   panel, so the panels read as glass passing under a static light. */
.panel::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(126deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,0) 30%,
    rgba(255,255,255,0) 72%,rgba(255,255,255,.028) 100%)}
.p-glow{position:absolute;inset:-30% -20%;z-index:0;pointer-events:none;
  background:radial-gradient(45% 45% at 30% 24%,rgba(92,184,232,.18),transparent 70%);
  transform:translate3d(calc(var(--px) * -.7),0,0)}
.p-dust{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(circle at 18% 72%,rgba(242,221,168,.5) 1px,transparent 1.6px),
    radial-gradient(circle at 74% 28%,rgba(242,221,168,.35) 1px,transparent 1.6px),
    radial-gradient(circle at 56% 86%,rgba(92,184,232,.4) 1px,transparent 1.6px);
  transform:translate3d(calc(var(--px) * .4),0,0)}
.panel > *:not(.p-glow):not(.p-dust){position:relative;z-index:1}
.panel .ico{width:62px;height:62px;border-radius:16px;background:rgba(212,175,106,.14);
  display:grid;place-items:center;margin-bottom:6px}
.panel .ico svg{width:32px;height:32px}
.panel h3{color:#fff;font-size:clamp(24px,2.5vw,32px)}
.panel p{color:var(--on-2);font-size:clamp(16px,1.3vw,18px);line-height:1.55;max-width:52ch}
.panel ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.panel li{font-size:13.5px;font-weight:600;color:var(--gold-soft);background:rgba(212,175,106,.1);
  border:1px solid rgba(212,175,106,.18);border-radius:999px;padding:7px 14px;line-height:1.3}
.panel .go{margin-top:auto;padding-top:22px;font-family:var(--display);font-weight:700;font-size:15px;
  color:var(--gold);display:flex;align-items:center;gap:8px}
/* The actions sit side by side once there is room for them. */
.panel .acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:auto;padding-top:24px}
.panel .acts .go{margin-top:0;padding-top:0}
.panel .wa{margin-top:0;align-self:auto}
.panel:hover .go .arrow{transform:translateX(4px)}
[dir="rtl"] .panel:hover .go .arrow{transform:scaleX(-1) translateX(4px)}
.p-num{position:absolute;top:22px;inset-inline-end:26px;z-index:1;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.12em;color:rgba(255,255,255,.3)}

/* Children rise 24px and fade in, 70ms apart, once the panel passes 40%. */
.js .panel > *:not(.p-glow):not(.p-dust){opacity:0;transform:translateY(24px)}
.js .panel.on > *:not(.p-glow):not(.p-dust){opacity:1;transform:none;
  transition:opacity .52s var(--ease),transform .52s var(--ease);
  transition-delay:calc(var(--i,0) * 70ms)}

/* The beam follows the active panel and sweeps out on exit. */
.svc-beam{position:absolute;top:0;bottom:0;inset-inline-start:0;width:52vw;z-index:0;pointer-events:none;
  background:radial-gradient(40% 50% at 50% 50%,rgba(212,175,106,.16),transparent 72%);
  transform:translate3d(var(--beam,0px),0,0)}
.svc-hint{position:absolute;inset-block-end:28px;inset-inline:0;z-index:1;
  display:flex;align-items:center;justify-content:center;gap:14px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.34);max-width:none}
[dir="rtl"] .svc-hint{font-family:var(--arabic);letter-spacing:0;font-size:13px}
/* Which of the four you are on, so the section has a visible end. */
.svc-dots{display:flex;gap:8px}
.svc-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.22);
  transition:background .3s var(--ease),transform .3s var(--ease)}
.svc-dots i.on{background:var(--gold);transform:scale(1.35)}

/* ============================================================
   STAGE 3 — HOW WE WORK. Dimming. Forward only. The thread line draws
   with scroll; each message types in once, on reach, and never loops.
   ============================================================ */
.thread{list-style:none;max-width:620px;margin-inline:auto;position:relative;padding-inline-start:46px}
.thread::before{content:"";position:absolute;inset-block:10px 26px;inset-inline-start:15px;width:3px;
  border-radius:2px;background:linear-gradient(180deg,var(--gold-soft),var(--gold) 55%,var(--gold-deep));
  transform:scaleY(var(--draw,0));transform-origin:top center}
.thread-head{max-width:620px;margin:0 auto 22px;padding-inline-start:46px;display:flex;align-items:center;
  gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-3)}
.thread-head b{font-family:var(--display);font-size:14px;letter-spacing:.02em;text-transform:none;color:#fff}
[dir="rtl"] .thread-head{font-family:var(--arabic);letter-spacing:0}
.msg{position:relative;margin-bottom:14px}
.js .msg .bubble{opacity:0;transform:translateY(18px)}
.js .msg.in .bubble{opacity:1;transform:none;transition:opacity .58s var(--ease),transform .58s var(--ease)}
.js .msg::before{opacity:0;transition:opacity .3s var(--ease)}
.js .msg.in::before{opacity:1}
.msg::before{content:"";position:absolute;inset-inline-start:-38px;top:16px;width:13px;height:13px;
  border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(2,14,28,.7)}
.msg:last-child::before{background:var(--earth)}
.bubble{background:#fff;border-start-start-radius:4px;border-start-end-radius:16px;
  border-end-end-radius:16px;border-end-start-radius:16px;padding:14px 17px 11px;
  box-shadow:0 18px 38px -28px rgba(0,0,0,.9)}
.bubble .stage-name{display:block;font-family:var(--display);font-weight:800;font-size:14px;color:var(--deep);margin-bottom:4px}
[dir="rtl"] .bubble .stage-name{font-family:var(--arabic)}
.bubble p{color:var(--ink);font-size:15.5px;line-height:1.5;max-width:46ch}
.bubble .stamp{display:block;margin-top:7px;font-family:var(--mono);font-size:11.5px;color:var(--slate);
  text-align:end;direction:ltr;unicode-bidi:isolate}
[dir="rtl"] .bubble .stamp{text-align:start}
.typing{display:none;position:absolute;top:0;inset-inline-start:0;align-items:center;gap:5px;
  padding:14px 17px;width:62px;background:#fff;border-radius:16px 16px 16px 4px}
.typing.on{display:inline-flex}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--mist);animation:dz-dot 1.1s infinite}
.typing i:nth-child(2){animation-delay:.16s}
.typing i:nth-child(3){animation-delay:.32s}
@keyframes dz-dot{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.note{margin-top:24px;text-align:center;font-size:15px;color:var(--on-3);margin-inline:auto}
@media(max-width:519px){.thread,.thread-head{padding-inline-start:34px}.thread::before{inset-inline-start:9px}
  .msg::before{inset-inline-start:-31px;width:11px;height:11px}}

/* ---------- The thread, laid out left to right ----------
   Stacked vertically this was five full-width bubbles and most of a screen of
   height for what is really one idea: five updates, in order, that the client
   never asked for. Read along a row it takes a third of the space and the
   sequence is clearer, because the order is now a direction rather than a
   list. Below 900px it goes back to a column — five columns on a phone would
   be five slivers. */
@media(min-width:900px){
  .thread{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.4vw,20px);
    max-width:none;padding-inline-start:0;padding-top:42px}
  /* The rail runs across the top of the row and draws with scroll. */
  .thread::before{inset-block:6px auto;inset-inline:6% 6%;width:auto;height:3px;
    transform:scaleX(var(--draw,0));transform-origin:left center}
  [dir="rtl"] .thread::before{transform-origin:right center}
  .thread-head{max-width:none;padding-inline-start:0;margin-bottom:10px}
  .msg{margin-bottom:0;display:flex}
  /* Each dot sits on the rail, directly above its own bubble. */
  .msg::before{inset-inline-start:50%;top:-42px;margin-inline-start:-7px;
    width:14px;height:14px;box-shadow:0 0 0 5px #02111F}
  .bubble{flex:1;border-radius:4px 16px 16px 16px;padding:16px 16px 12px;
    display:flex;flex-direction:column}
  .bubble p{font-size:14.5px;line-height:1.45;max-width:none;flex:1}
  .bubble .stage-name{font-size:13px}
  .bubble .stamp{margin-top:10px}
  .typing{position:absolute;top:0;inset-inline-start:0;width:62px}
  /* They arrive one after another along the row, not all at once. */
  .js .msg .bubble{transform:translateY(14px)}
}

/* ============================================================
   STAGE 4 — CALENDAR. Lowest light, tightest motion. The dates land
   offset, like cards being dealt.
   ============================================================ */
.calendar{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);
  border-inline-start:3px solid var(--gold);border-radius:var(--r);
  padding:clamp(28px,3.6vw,44px)}
.calendar h2{margin-top:4px}
.calendar p{color:var(--on-2);margin-top:14px;font-size:16px}
.dates{list-style:none;display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.dates li{font-size:13px;font-weight:600;color:var(--gold-soft);background:rgba(212,175,106,.1);
  border:1px solid rgba(212,175,106,.2);border-radius:999px;padding:8px 14px}
.js .dates li{opacity:0;transform:translateY(16px) rotate(-3deg)}
.js .dates.in li{opacity:1;transform:none;
  transition:opacity .46s var(--ease),transform .46s var(--ease);
  transition-delay:calc(var(--i,0) * 65ms)}
.calendar .btn{margin-top:28px}

/* Documents. Parallax: the image moves slower than the scroll. Gold rim. */
.docshot{position:relative;margin-top:clamp(32px,4vw,52px);border-radius:var(--r);overflow:hidden;
  border:1px solid rgba(212,175,106,.22);
  box-shadow:0 0 0 1px rgba(2,12,24,.6),0 40px 80px -50px rgba(0,0,0,.9)}
/* The container holds the shape whether the source is a still or a clip, and
   whether or not it has loaded yet — so nothing on the page shifts when it
   arrives. object-fit means the real frame size does not have to be known. */
.docshot{aspect-ratio:16/9;background:linear-gradient(140deg,#061F3A,#02101F)}
.docshot img,.docshot video{width:100%;height:100%;display:block;object-fit:cover;
  transform:translate3d(0,var(--dy,0px),0);will-change:transform}
.docshot video{opacity:0;transition:opacity 1.1s var(--ease)}
.docshot video.ready{opacity:1}
.docshot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,rgba(212,175,106,.16) 0%,transparent 34%,rgba(2,12,24,.5) 100%)}
.docshot figcaption{position:absolute;inset-block-end:0;inset-inline:0;z-index:1;padding:20px 24px;
  font-size:13.5px;color:rgba(255,255,255,.78);background:linear-gradient(0deg,rgba(2,12,24,.84),transparent)}

/* ============================================================
   STAGE 5 — THE FREE CONSULTATION. The light floods back in, the column
   is at its tightest, and this button is the brightest object on screen.
   One ask. The page does not compete with itself.
   ============================================================ */
.ask{text-align:center;max-width:620px;margin-inline:auto}
.ask h2{font-size:clamp(32px,4.6vw,50px);margin:8px 0 20px}
.ask .lede{margin-inline:auto}
.ask p{margin-inline:auto;color:var(--on-2);font-size:16.5px;margin-top:16px}
.ask .btn{margin-top:32px}
.ask .fine{font-size:13.5px;color:var(--on-3);margin-top:18px}
.ask-list{list-style:none;display:grid;gap:10px;margin:26px auto 0;max-width:460px;text-align:start}
.ask-list li{position:relative;padding-inline-start:28px;font-size:15.5px;color:var(--on-2)}
.ask-list li::before{content:"";position:absolute;inset-inline-start:0;top:9px;width:9px;height:9px;
  border-radius:50%;background:var(--gold)}

/* ---------- FAQ ----------
   Two levels of folding. The section opens at three group bars, not fourteen
   question rows — on a phone that was 1,486px of list before the first answer.
   Open a group to see its questions, open a question to see its answer.
   Everything stays in the DOM at every level; <details> only folds it
   visually, so nothing here is hidden from a crawler. */
.faq{max-width:none;margin-inline:auto}
.faq-grid{display:grid;grid-template-columns:1fr;gap:9px;align-items:start}
@media(min-width:860px){
  .faq-grid{grid-template-columns:repeat(2,1fr);gap:10px 16px}
}

/* The group bar. Heavier than a question row so the hierarchy is obvious. */
.faq-group{border:1px solid rgba(255,255,255,.14);border-radius:16px;margin-bottom:12px;
  background:rgba(255,255,255,.05)}
.faq-group[open]{background:rgba(255,255,255,.03);border-color:rgba(212,175,106,.3)}
.faq-group > summary{padding:20px 24px;font-size:17.5px;color:#fff;gap:12px}
.faq-group > summary::after{content:"";width:11px;height:11px;flex:none;
  border-inline-end:2px solid var(--gold);border-block-end:2px solid var(--gold);
  transform:rotate(45deg);transition:transform .3s var(--ease);margin-block-end:4px}
.faq-group[open] > summary::after{transform:rotate(225deg);margin-block:4px 0}
.faq-group > .faq-grid{padding:0 16px 18px}
/* The heading is a bare text node inside a flex summary, so it needs room to
   wrap; the count must not be the thing that sets the minimum width, or a
   long group name pushes the whole card past the viewport on a phone. */
.faq-group > summary{flex-wrap:wrap}
.qn{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--on-3);margin-inline-start:auto;
  white-space:nowrap;min-width:0}
[dir="rtl"] .qn{font-family:var(--arabic);letter-spacing:0;font-size:13px}
details{border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(255,255,255,.035);
  overflow:hidden;align-self:start;transition:border-color .2s,background .2s}
details:hover{border-color:rgba(255,255,255,.2)}
details[open]{border-color:rgba(212,175,106,.34);background:rgba(212,175,106,.05)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:14px;align-items:center;
  padding:15px 18px;font-family:var(--display);font-weight:700;font-size:15.5px;line-height:1.35;color:#fff}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--mono);font-size:20px;color:var(--gold);line-height:1;flex:none}
details[open] summary::after{content:"\2013"}
details .fa{padding:0 18px 18px}
details p{color:var(--on-2);font-size:15px}
details p + p{margin-top:10px}
/* The service pages keep the single readable column. */
.prose .faq-grid{grid-template-columns:1fr}
.js details[open] .fa{animation:dz-spring .5s var(--ease) both}
@keyframes dz-spring{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

/* ---------- Contact: the funnel terminates in a single gold node ---------- */
.node{width:14px;height:14px;border-radius:50%;background:var(--gold);margin:0 auto 26px;position:relative}
.node::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--gold);opacity:0}
.js .node.in::after{animation:dz-pulse 1.5s var(--ease) 1 forwards}
@keyframes dz-pulse{0%{transform:scale(1);opacity:.75}100%{transform:scale(4.2);opacity:0}}
/* The four ways to reach us sit on one line, equal width, equal height. The
   section widens a little to afford it — the funnel has already made its ask
   by this point, so this block is reference material and legibility wins. */
#contact{--stage:.96}
.ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(265px,1fr));gap:14px;margin-top:34px}
@media(min-width:900px){
  .ways{grid-template-columns:repeat(4,1fr);gap:12px}
  .way{padding:20px 18px}
  .way .ico{width:38px;height:38px}
  .way b{font-size:14.5px}
  .way span{font-size:13.5px}
  .way .num{font-size:13.5px}
}
.way{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11);border-radius:var(--r);
  padding:24px;text-decoration:none;display:flex;gap:14px;align-items:flex-start;
  transition:background .18s,border-color .18s,transform .18s var(--ease)}
.way > span:last-child{min-width:0}
.way b{overflow-wrap:break-word}
.way:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.26);transform:translateY(-2px)}
.way .ico{width:42px;height:42px;border-radius:10px;background:rgba(255,255,255,.09);display:grid;place-items:center;flex:none}
.way .ico svg{width:21px;height:21px}
.way b{display:block;font-family:var(--display);font-size:15.5px;margin-bottom:3px;color:#fff}
.way span{font-size:14.5px;color:var(--on-2);word-break:break-word}
.way.gold{background:var(--gold);border-color:var(--gold);color:var(--deep)}
.way.gold .ico{background:rgba(3,22,44,.14)}
.way.gold b{color:var(--deep)}
.way.gold span{color:rgba(3,22,44,.8)}
.creds{display:flex;flex-wrap:wrap;gap:10px 32px;margin-top:30px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.12);font-size:14.5px;color:var(--on-3);max-width:none}
.creds b{color:var(--on-1);font-weight:700;margin-inline-end:6px}
/* Phone numbers stay LTR inside an RTL page, and never wrap mid-number. */
.way .num{font-family:var(--mono);font-size:14.5px;letter-spacing:.02em;white-space:nowrap;
  unicode-bidi:isolate}
.way.gold .num{color:rgba(3,22,44,.82)}

/* ---------- Social ---------- */
.social{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;padding:0}
.social a{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);
  border-radius:999px;padding:10px 18px;font-size:14.5px;font-weight:600;color:var(--on-1);
  transition:background .18s,border-color .18s,transform .18s var(--ease),color .18s}
.social a:hover{background:rgba(212,175,106,.14);border-color:rgba(212,175,106,.5);
  color:var(--gold-soft);transform:translateY(-2px)}
.social svg{width:19px;height:19px;flex:none}
/* The footer is the only place social appears now, and each profile is named
   rather than left as a bare glyph nobody can identify at 18px.
   `.foot ul` sets display:grid for the footer's link lists and outranks
   `.social`, which was stacking these three into a column — hence the
   explicit flex here. */
.foot .foot-social{display:flex;flex-wrap:wrap;margin-top:18px;gap:8px}
.foot-social a{padding:8px 14px;border-radius:999px;font-size:13.5px;gap:8px}
.foot-social svg{width:17px;height:17px}

/* ---------- Service / guide pages ---------- */
.prose{max-width:720px;margin-inline:auto}
.prose h2{font-size:clamp(23px,2.8vw,31px);margin:44px 0 14px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:18px;margin:28px 0 10px;color:var(--gold-soft)}
.prose p{color:var(--on-2);margin-bottom:14px;max-width:none}
.prose a{color:var(--gold-soft);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{color:var(--gold)}
.prose ul,.prose ol{margin:0 0 18px;padding-inline-start:22px;color:var(--on-2)}
.prose li{margin-bottom:8px}
.prose ol{counter-reset:step;list-style:none;padding-inline-start:0}
.prose ol > li{counter-increment:step;position:relative;padding-inline-start:46px;margin-bottom:16px}
.prose ol > li::before{content:counter(step);position:absolute;inset-inline-start:0;top:0;width:30px;height:30px;
  border-radius:50%;background:rgba(212,175,106,.14);border:1px solid rgba(212,175,106,.3);
  display:grid;place-items:center;font-family:var(--mono);font-size:13px;font-weight:600;color:var(--gold)}
.prose strong{color:var(--on-1);font-weight:700}
.crumbs{font-size:13.5px;color:var(--on-3);margin-bottom:18px;max-width:none}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--gold-soft)}
.crumbs span{margin-inline:7px;opacity:.5}
.updated{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--on-3);margin-top:16px}
[dir="rtl"] .updated{font-family:var(--arabic);letter-spacing:0;font-size:13.5px}
.updated::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--earth)}
.callout{border:1px solid rgba(212,175,106,.28);border-inline-start:3px solid var(--gold);
  border-radius:var(--r);background:rgba(212,175,106,.06);padding:22px 24px;margin:26px 0}
.callout p{margin-bottom:0;color:var(--on-2)}
.callout b{color:var(--gold-soft)}
.srclist{font-size:14px;color:var(--on-3)}
.srclist li{margin-bottom:6px}
.sib{list-style:none;display:grid;gap:12px;margin:0;padding:0}
@media(min-width:720px){.sib{grid-template-columns:repeat(2,1fr)}}
.sib a{display:block;padding:18px 20px;border:1px solid rgba(255,255,255,.1);border-radius:14px;
  background:rgba(255,255,255,.035);text-decoration:none;transition:border-color .18s,background .18s}
.sib a:hover{border-color:rgba(212,175,106,.4);background:rgba(212,175,106,.06)}
.sib b{display:block;color:#fff;font-family:var(--display);font-size:15.5px;margin-bottom:4px}
.sib span{font-size:14px;color:var(--on-3)}

/* ---------- Footer ---------- */
footer{background:#02101F;color:var(--on-3);padding:48px 0 108px;font-size:14.5px;position:relative;z-index:1}
@media(min-width:760px){footer{padding-bottom:48px}}
footer .wrap{--stage:1}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px}
@media(max-width:759px){.foot{grid-template-columns:1fr 1fr}}
.foot h3{color:#fff;font-size:11.5px;font-family:var(--mono);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:14px}
.foot ul{list-style:none;display:grid;gap:9px}
.foot a{text-decoration:none}
.foot a:hover{color:#fff}
.foot .brandline{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.foot .brandline img{width:42px;height:42px;border-radius:50%;background:#fff}
.foot .brandline b{font-family:var(--display);color:#fff;font-size:14.5px;letter-spacing:.05em}
.legal{margin-top:32px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);display:flex;
  flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:13px}

/* ---------- Dock ---------- */
.dock{position:fixed;inset-inline:12px;inset-block-end:12px;z-index:70;display:flex;gap:10px;
  transform:translateY(180%);transition:transform .4s var(--ease);pointer-events:none;visibility:hidden}
.dock.show{transform:none;pointer-events:auto;visibility:visible}
.dock .btn-gold{flex:1;box-shadow:0 18px 36px -18px rgba(0,0,0,.8)}
.btn-wa{flex:none;width:54px;padding:0;background:var(--deep);color:var(--on-1);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 36px -18px rgba(0,0,0,.8)}
.btn-wa svg{width:22px;height:22px}
.btn-wa:hover{background:#06243F}
@media(min-width:760px){.dock{inset-inline:auto 20px;inset-block-end:20px;width:auto}.dock .btn-gold{flex:none}}

/* ---------- 404 ---------- */
.lost{min-height:76vh;display:grid;place-items:center;text-align:center}
.lost .code{font-family:var(--mono);font-size:72px;font-weight:600;color:var(--gold);line-height:1;max-width:none}
.lost h1{max-width:none;margin:14px 0 0}
.lost .lede{margin-inline:auto}
.cta-center{justify-content:center}
.sib-404{margin-top:40px;text-align:start;width:100%}

/* ============================================================
   REDUCED MOTION — required, not optional.
   No sticky. Services become a plain vertical stack. The key light is
   static. All five thread messages are visible at once. Everything sits
   in its final state.
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
  .js .reveal{opacity:1 !important;transform:none !important}
  .js .msg .bubble{opacity:1 !important;transform:none !important}
  .js .msg::before{opacity:1 !important}
  .js .dates li{opacity:1 !important;transform:none !important}
  .js .panel > *{opacity:1 !important;transform:none !important}
  .hair{transform:scaleX(1) !important}
  .thread::before{transform:scaleY(1) !important}
  .typing{display:none !important}
  .docshot img{transform:none !important}
  .keylight{transform:none !important}
}
/* ============================================================
   PHONE — the services become a real swipeable carousel.
   Scroll-hijacking a phone is miserable, and four full-height cards stacked
   vertically was 2,525px of scrolling for four items. So below 900px the
   sticky pan is dropped entirely and the track becomes an ordinary
   horizontal scroller with CSS scroll-snap: one card per swipe, native
   momentum, no JavaScript needed to move it. The dots still track position.
   ============================================================ */
@media(max-width:899px){
  .svc-scroll{height:auto}
  .svc-stage{position:static;height:auto;display:block;overflow:visible}
  .svc-track{display:flex;transform:none !important;will-change:auto;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;scroll-behavior:smooth;
    gap:14px;padding:4px 16px 20px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    overscroll-behavior-x:contain}
  .svc-track::-webkit-scrollbar{display:none}
  .panel{flex:0 0 min(420px,86vw);scroll-snap-align:center;scroll-snap-stop:always;
    --a:1;transform:none !important;opacity:1 !important;filter:none !important;
    padding:26px 22px 22px;border-radius:20px}
  .panel h3{font-size:21px}
  .panel p{font-size:15.5px;max-width:none}
  .panel li{font-size:12px;padding:5px 11px}
  .panel .ico{width:48px;height:48px;border-radius:13px}
  .panel .ico svg{width:26px;height:26px}
  .panel .acts{padding-top:18px;gap:12px}
  .panel .acts .btn{width:100%}
  .svc-beam{display:none}
  /* The hint stops being an overlay and becomes the carousel's own caption. */
  .svc-hint{position:static;margin:2px auto 0;justify-content:center}
}

/* Reduced motion: a plain stack, no snapping, nothing to swipe. */
@media(prefers-reduced-motion:reduce){
  .svc-scroll{height:auto}
  .svc-stage{position:static;height:auto;display:block;overflow:visible}
  .svc-track{display:grid;grid-template-columns:1fr;transform:none !important;
    padding-inline:16px;gap:16px;will-change:auto;overflow:visible;
    scroll-snap-type:none}
  .panel{flex:none;--a:1;transform:none !important;opacity:1 !important;filter:none !important}
  .svc-beam{display:none}
  .svc-hint{display:none}
}
/* ============================================================
   PHONE — everything else.
   The page was 9,363px on a 780px screen: twelve full swipes to reach the
   contact block. Most of that was air and oversized type rather than
   content, so the vertical rhythm tightens here rather than anything being
   taken away.
   ============================================================ */
@media(max-width:899px){
  /* One parallax layer, not three. */
  .p-dust{display:none}
  .p-glow{transform:none}
  .panel{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

  section{padding:clamp(44px,9vw,64px) 0}
  h2{font-size:clamp(25px,6.4vw,31px)}
  .head{margin-bottom:26px}

  /* Hero: the mark is decorative and was costing a third of the first
     screen. It shrinks and the type leads. */
  .hero{padding:104px 0 44px}
  .h1-brand{font-size:clamp(31px,8.4vw,40px)}
  .h1-seo{font-size:16px;margin-top:11px}
  .hero .lede{font-size:16.5px;margin-top:14px}
  .cta-row{margin-top:24px;gap:10px}
  .cta-row .btn{width:100%}
  .facts{margin-top:20px;gap:6px 18px;font-size:13.5px}
  .flow svg{max-width:300px}
  .hero-grid{gap:20px}

  /* A row of five on a narrow screen would be five slivers, so the thread
     goes back to a column — tighter than it was. Reduced motion keeps the
     row and simply shows every message at once. */
  .thread{display:block}
  .bubble{padding:12px 14px 9px}
  .bubble p{font-size:14.5px}
  .msg{margin-bottom:10px}
  .note{margin-top:18px;font-size:14px}

  .calendar{padding:24px 20px}
  .calendar p{font-size:15.5px}
  .dates{gap:7px;margin-top:16px}
  .dates li{font-size:12.5px;padding:6px 11px}

  .ask h2{font-size:clamp(27px,7.4vw,34px)}
  .ask-list{margin-top:20px}
  .ask-list li{font-size:15px}
  .ask .btn{width:100%}

  .faq-group > summary{padding:16px 18px;font-size:16px}
  .faq-group > .faq-grid{padding:0 10px 14px}
  summary{padding:14px 16px;font-size:15px}
  details .fa{padding:0 16px 16px}

  .ways{gap:10px}
  .way{padding:18px}
  .social{gap:8px;margin-top:20px}
  .social a{padding:9px 14px;font-size:13.5px}

  footer{padding:36px 0 96px}
  .foot{gap:22px}
}

/* Very narrow: the footer's three columns stop being columns. */
@media(max-width:420px){
  .foot{grid-template-columns:1fr}
  .legal{font-size:12px}
}

/* The carousel hint reads differently depending on how you move it. */
.hint-swipe{display:none}
@media(max-width:899px){
  .hint-scroll{display:none}
  .hint-swipe{display:inline}
}

/* The service panels' call to action is WhatsApp, one message per service.
   It sits full width so it reads as the panel's action rather than a footnote,
   and the "read more" link follows it as a quieter second option. */
.panel .acts{flex-direction:column;align-items:stretch;gap:12px}
.panel .acts .btn.wa{width:100%}
.panel .acts .go{justify-content:flex-start}