/* ============================================================================
   ORBIT STUDIO — cosmic digital-marketing studio. Deep-space + atmospheric cyan.
   Display: Space Grotesk · Body: Hanken Grotesk. Vanilla, responsive, a11y.
   ============================================================================ */
:root{
  --bg:#04060E; --bg-2:#070B16; --surface:#0B1120; --surface-2:#111A2D;
  --cyan:#56C2FF; --cyan-bright:#9BDCFF; --cyan-deep:#2C84D8; --cyan-ink:#04101F;
  --glow:rgba(86,194,255,.45); --glow-soft:rgba(86,194,255,.14);
  --text:#E9F1FB; --muted:#9FB2CD; --muted-d:#71849F; --white:#F6FAFF;
  --line:rgba(132,176,232,.13); --line-2:rgba(132,176,232,.24);
  --radius:18px; --radius-sm:13px; --maxw:1200px;
  --shadow:0 30px 80px rgba(0,0,0,.55); --shadow-cyan:0 18px 50px rgba(44,132,216,.28);
  --z-nav:90; --z-hint:60; --z-overlay:40; --z-modal:120;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.7; font-size:17px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
h1,h2,h3,h4,.display{font-family:'Space Grotesk','Hanken Grotesk',sans-serif;font-weight:600;line-height:1.05;letter-spacing:-.02em;color:var(--white)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--cyan);color:var(--cyan-ink)}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 28px}
.eyebrow{font-family:'Space Grotesk';font-weight:500;font-size:.74rem;letter-spacing:.32em;text-transform:uppercase;color:var(--cyan)}
.cyan{color:var(--cyan)}
.gradient-text{background:linear-gradient(120deg,var(--white) 25%,var(--cyan-bright) 60%,var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- cosmic background layers (fixed) ---- */
/* Fixed background layers are pinned to their own GPU compositor layers (translateZ(0)) so scrolling
   content over them is a pure composite — the gradients/vignette never re-rasterize on scroll. */
/* vignette MERGED into #space (one full-screen layer instead of two — compositor bandwidth) */
#space{position:fixed;inset:0;z-index:-3;pointer-events:none;transform:translateZ(0);background:
  radial-gradient(130% 100% at 50% 38%,transparent 58%,rgba(0,0,0,.5)),
  radial-gradient(120% 90% at 50% -8%, #0A1426 0%, var(--bg) 52%),
  radial-gradient(80% 60% at 88% 8%, rgba(44,132,216,.10), transparent 60%)}
#stars{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.9}
.vignette{display:none}
.scroll-progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:100;background:linear-gradient(90deg,var(--cyan-deep),var(--cyan-bright));box-shadow:0 0 14px var(--glow);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .1s linear}  /* scaleX = compositor-only (was width -> layout+paint every scroll tick) */

/* ---- a11y ---- */
.skip-link{position:absolute;left:50%;top:0;transform:translate(-50%,-105%);z-index:400;background:var(--cyan);color:var(--cyan-ink);padding:11px 20px;border-radius:0 0 12px 12px;font-weight:600;white-space:nowrap;transition:transform .2s}  /* hidden by its OWN height (the Greek label wrapped past the old fixed -60px and peeked out) */
.skip-link:focus{transform:translate(-50%,0)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--cyan-bright);outline-offset:3px;border-radius:8px}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:'Space Grotesk';font-weight:500;font-size:.92rem;letter-spacing:.01em;border-radius:100px;padding:14px 26px;cursor:pointer;border:1px solid transparent;white-space:nowrap;position:relative;transition:transform .2s,box-shadow .3s,background .25s,border-color .25s,color .25s}
.btn:active{transform:translateY(1px)}
.btn svg{width:17px;height:17px}
.btn-primary{background:linear-gradient(120deg,var(--cyan),var(--cyan-bright));color:var(--cyan-ink);box-shadow:0 10px 30px rgba(44,132,216,.32)}
.btn-ghost{background:rgba(132,176,232,.06);color:var(--text);border-color:var(--line-2)}

/* ---- header / nav ---- */
header{position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);transition:background .35s ease,border-color .35s ease}
/* SOLID header everywhere — backdrop-filter:blur re-blurred everything beneath it on every frame
   anything changed (and the eye's animations change something every frame at Contact). On integrated
   GPUs that blur alone was throttling the whole compositor — the "everything feels laggy" fault #1. */
header.scrolled,header.solid{background:linear-gradient(180deg,rgba(6,10,19,.97),rgba(5,8,16,.93));border-bottom:1px solid var(--line)}
header{border-bottom:1px solid transparent}
/* CINEMATIC home: the whole header stays hidden through the Earth descent, then fades in at the end */
.cinematic header{opacity:0;transform:translateY(-14px);pointer-events:none;transition:opacity .6s ease,transform .6s ease,background .35s ease,border-color .35s ease}
.cinematic.reveal-ui header{opacity:1;transform:none;pointer-events:auto}
.nav{display:flex;align-items:center;justify-content:space-between;height:80px}
.brand{display:inline-flex;align-items:center;gap:11px;color:var(--white)}
.brand .mark{width:30px;height:30px;flex:0 0 auto;filter:drop-shadow(0 0 8px var(--glow))}
.brand .bn{font-family:'Space Grotesk';font-weight:500;font-size:.96rem;letter-spacing:.34em;text-transform:uppercase;padding-left:.1em}
.nav-links{display:none;gap:36px;align-items:center}
.nav-links a{font-weight:500;font-size:.92rem;color:var(--text);opacity:.82;position:relative;transition:opacity .2s}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1.5px;background:var(--cyan);box-shadow:0 0 8px var(--glow);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .28s cubic-bezier(.22,1,.36,1)}  /* draws left->right, compositor-only */
.nav-links a:hover,.nav-links a.active{opacity:1}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-cta{display:flex;align-items:center;gap:12px}
.menu-btn{display:inline-flex;width:44px;height:44px;align-items:center;justify-content:center;background:rgba(132,176,232,.06);border:1px solid var(--line-2);border-radius:var(--radius-sm);color:var(--white);cursor:pointer}
.menu-btn svg{width:20px;height:20px}
.mobile-menu{display:none;flex-direction:column;gap:2px;padding:10px 28px 20px;background:rgba(5,8,16,.96);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.mobile-menu.open{display:flex}
.mobile-menu a{padding:14px;border-radius:12px;font-family:'Space Grotesk';font-size:1.05rem;color:var(--text)}

/* ---- HERO: scroll-scrubbed Earth descent ---- */
.hero{position:relative;height:100vh;height:100svh}  /* svh: sized to the SMALL viewport so the CTAs are never under the collapsed iOS/Android address bar */
.hero-sticky{position:relative;height:100vh;height:100svh;overflow:hidden;background:#000}   /* poster only on paths that can show it — see html.skip-intro / html:not(.js) rules */
#heroCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-scrim{position:absolute;inset:0;z-index:2;background:radial-gradient(90% 70% at 50% 42%,transparent 46%,rgba(2,4,10,.5)),linear-gradient(180deg,rgba(2,4,10,.4),transparent 20%,transparent 46%,rgba(2,4,10,.9));pointer-events:none}
/* readable text backdrop over the bright planet (focused, doesn't dim the whole globe) */
.hero-intro::before{content:"";position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:min(880px,94vw);height:230%;background:radial-gradient(58% 56% at 50% 50%,rgba(2,5,12,.82),rgba(2,5,12,.4) 56%,transparent 76%);z-index:-1;pointer-events:none;opacity:var(--hrev,0)}
/* hero copy stays HIDDEN through the whole descent, then fades IN once the animation completes */
.hero-intro{position:absolute;left:0;right:0;bottom:13vh;z-index:var(--z-overlay);text-align:center;padding:0 26px;pointer-events:none}
/* HERO headline: scroll-LINKED assembly. JS writes ONE var (--hrev 0..1) on #heroSticky; CSS derives
   the word stagger from it (word i appears as --hrev passes i/8), then the subheadline and CTAs follow.
   Desktop gets .hsplit (word spans built by JS); mobile keeps a simple container fade-up. */
.hero-intro:not(.hsplit){opacity:var(--hrev,0);transform:translate3d(0,calc((1 - var(--hrev,0))*24px),0)}
/* UNIFIED ramp — everything appears together, gradually, from the first scrolled pixel
   (--up completes at --hrev≈0.53, i.e. ~22% of a viewport of scrolling). */
.hero-intro.hsplit{--up:clamp(0, calc(var(--hrev,0)*1.9), 1)}
.hero-intro.hsplit .eyebrow{opacity:calc(var(--up)*.9);transform:translateY(calc((1 - var(--up))*10px))}  /* .hero-intro.hsplit outranks the base ".hero-intro .eyebrow{opacity:.9}" */
.hero-intro.hsplit .hw{display:inline-block;opacity:var(--up);transform:translateY(calc((1 - var(--up))*.4em))}
.hero-intro.hsplit p{opacity:var(--up);transform:translateY(calc((1 - var(--up))*16px))}
.hero-intro.hsplit .hero-cta{opacity:var(--up);transform:translateY(calc((1 - var(--up))*16px))}
.hero-intro.live{pointer-events:auto}
.hero-intro h1,.hero-intro p{text-shadow:0 2px 30px rgba(2,6,14,.6)}
.hero-intro .eyebrow{display:inline-block;margin-bottom:18px;opacity:.9;margin-right:-.32em}  /* cancel the trailing letter-space so the text is OPTICALLY centred */
.hero-intro h1{font-size:clamp(2.5rem,6.6vw,5rem);font-weight:600;letter-spacing:-.025em;margin-bottom:20px}
.hero-intro p{font-size:clamp(1.02rem,2vw,1.22rem);color:#CFDDF0;max-width:52ch;margin:0 auto 30px;line-height:1.55}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;pointer-events:auto}

/* ============================================================================
   LAUNCH screen — full-screen starfield intro shown BEFORE the descent plays.
   Tweak: --laccent (glow colour), --lglow (glow intensity 0..1), the url() image
   path below, and the button text in index.html.
   ============================================================================ */
html.locked,body.locked{overflow:hidden}     /* page scroll frozen while the LAUNCH screen is up + during the descent */
.launch{
  position:fixed; inset:0; z-index:300;
  display:grid; place-items:center;
  /* IMAGE PATH — swap the starfield background here */
  background:#000 url(../images/starfield.jpg) center/cover no-repeat;
  transition:opacity .9s ease, visibility .9s ease;
}
.launch-vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 50%,transparent 28%,rgba(2,4,10,.5) 78%,rgba(2,4,10,.82))}
.launch.gone{opacity:0;visibility:hidden;pointer-events:none}     /* faded out after LAUNCH is pressed */
.launch.gone .launch-btn::before{animation:none}                  /* stop the glow pulse once the overlay is gone */

.launch-btn{
  --laccent:#9BDCFF;          /* blue-white glow / luminance colour */
  --lglow:.5;                 /* glow intensity 0..1 — raise for a stronger glow */
  position:relative; cursor:pointer;
  font-family:'Space Grotesk',sans-serif; font-weight:500;
  font-size:clamp(.72rem,1.5vw,.84rem); letter-spacing:.4em;   /* smaller, refined */
  text-transform:uppercase; color:#EAF2FB;
  padding:14px 24px 14px 31px;     /* >=44px tap target; extra left pad balances the trailing letter-spacing */
  background:rgba(10,18,34,.14); border:1px solid rgba(155,220,255,.42);
  border-radius:100px; isolation:isolate;       /* own stacking context for the ::before glow */
  text-shadow:0 0 12px rgba(155,220,255,calc(var(--lglow)*1));
  box-shadow:0 0 22px rgba(86,194,255,calc(var(--lglow)*.42)), inset 0 0 14px rgba(86,194,255,calc(var(--lglow)*.12));
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, border-color .35s ease;
}
/* GPU-cheap pulse: a soft radial glow behind the button, animating only opacity+scale (no per-frame shadow repaint) */
.launch-btn::before{
  content:""; position:absolute; inset:-45%; z-index:-1; border-radius:inherit; pointer-events:none;
  background:radial-gradient(closest-side, rgba(86,194,255,calc(var(--lglow)*.55)), rgba(86,194,255,calc(var(--lglow)*.16)) 55%, transparent 72%);
  animation:launchPulse 3.8s ease-in-out infinite; will-change:transform,opacity;
}
.launch-btn:hover,.launch-btn:focus-visible{
  transform:scale(1.06); border-color:var(--laccent);
  box-shadow:0 0 0 1px rgba(155,220,255,.3), 0 0 46px rgba(86,194,255,calc(var(--lglow)*1.1)), inset 0 0 22px rgba(86,194,255,calc(var(--lglow)*.28));
}
.launch-btn:hover::before,.launch-btn:focus-visible::before{ animation:none; opacity:.95; transform:scale(1.18) }
.launch-btn:focus-visible{outline:2px solid var(--laccent);outline-offset:6px}
.launch-btn:active{transform:scale(.985)}
@keyframes launchPulse{
  0%,100%{ opacity:.5; transform:scale(.9) }
  50%   { opacity:.92; transform:scale(1.14) }
}

/* atmosphere divider — echoes Earth's limb where the hero meets content */
.atmo{position:relative;height:1px;background:linear-gradient(90deg,transparent,var(--cyan) 35%,var(--cyan-bright),var(--cyan) 65%,transparent);box-shadow:0 0 18px 1px var(--glow);opacity:.7}

/* ---- EYE REVEAL: FIXED full-viewport background (above #space/#stars at z-1; the opaque hero canvas
   covers it during the hero; content sits on top, kept legible by .eyebg-scrim).
   JS drives ONLY compositor props via CSS vars: --eyeo (image fade), --eyes (0.9→1 scale),
   --eyey (parallax drift), --eyeg (glow bloom). No video, no filters, no animated shadows. ---- */
/* -12px bleed gives the PARALLAX room: the whole layer drifts opposite to scroll (--psy, eye module)
   and toward the cursor (--pcx/--pcy, lerped in the cursor loop) — a deep layer behind glass.
   pointer-events:none inherits to every child; children also carry it EXPLICITLY (hardening —
   no future rule can accidentally make a decorative layer swallow the pointer). */
.eyebg{position:fixed;inset:-12px;z-index:-1;overflow:hidden;pointer-events:none;
  transform:translate3d(var(--pcx,0px),calc(var(--psy,0px) + var(--pcy,0px)),0) translateZ(0)}
.eyebg-cv,.eyebg-img,.eyebg-glow,.eyebg-lid,.eyebg-scrim{pointer-events:none}
/* the scroll-scrubbed frame-sequence canvas (desktop only; JS sizes it and drives --eyec).
   --eyepz = slow cinematic push-in (1 -> 1.06), landing exactly on the img's scale(1.06).
   --vty = scroll-velocity streak (few px, eased back in the glide loop). */
.eyebg-cv{position:absolute;inset:0;width:100%;height:100%;opacity:var(--eyec,0);
  transform:translate3d(0,var(--vty,0px),0) scale(var(--eyepz,1));transform-origin:50% 50%}
.eyebg.landed .eyebg-cv{visibility:hidden}   /* landed: opacity:0 still held the GPU layer — visibility releases it */
.eyebg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:var(--eyeo,0);
  /* --eyelx/--eyely = cursor-tracking gaze offsets (JS, desktop, only while #contact is in view) */
  transform:translate3d(var(--eyelx,0px),calc(var(--eyey,0px) + var(--eyely,0px)),0) scale(var(--eyes,1));transform-origin:50% 50%}
/* SCRUB mode (capable desktop): the canvas is the moving picture; the img is the eye "landing state"
   that crossfades in at full reveal so the cursor-tracking gaze can move it. Fixed 1.06 overscan
   gives the gaze room without exposing edges. */
.eyebg.scrub .eyebg-img{transition:opacity .5s ease;
  transform:translate3d(var(--eyelx,0px),var(--eyely,0px),0) scale(1.06)}
/* the glow counter-drifts against the gaze — parallax depth: the eyeball moves, the light socket stays */
.eyebg.scrub .eyebg-glow{transform:translate3d(calc(var(--eyelx,0px)*-0.35),calc(var(--eyely,0px)*-0.35),0)}
.eyebg.scrub.awake .eyebg-scrim{opacity:.84}       /* the scrim lifts a touch at Contact — the eye comes forward */
.eyebg-scrim{transition:opacity .8s ease}
/* pre-painted cyan bloom around the iris — a static radial-gradient layer whose OPACITY blooms
   at full reveal (never CSS filter/blur). Tune colours/size here. */
/* sized to the glow's actual footprint (was full-viewport — a 100% composited layer animating
   opacity forever at Contact; this box is ~2/3 the area for the identical visual) */
.eyebg-glow{position:absolute;left:11%;right:11%;top:7%;bottom:7%;opacity:var(--eyeg,0);background:
  radial-gradient(54% 42% at 50% 52%, rgba(86,194,255,.17), transparent 70%),
  radial-gradient(92% 67% at 50% 52%, rgba(44,132,216,.10), transparent 75%)}
/* dark scrim so the Contact form/text stay readable over the fully-open eye */
.eyebg-scrim{position:absolute;inset:0;background:radial-gradient(95% 80% at 50% 46%,rgba(4,6,14,.42),rgba(4,6,14,.66)),linear-gradient(180deg,rgba(4,6,14,.55),rgba(4,6,14,.5) 50%,rgba(4,6,14,.62))}
/* fully revealed: only a SMALL inner core breathes (the old whole-glow pulse forced the entire
   full-screen layer stack to re-composite every vsync, forever, at Contact — fault #2). */
.eyebg-glow::before{content:"";position:absolute;left:27%;top:23%;width:46%;height:54%;border-radius:50%;opacity:0;
  background:radial-gradient(closest-side, rgba(120,205,255,.14), rgba(86,194,255,.05) 55%, transparent 75%)}
.eyebg.awake .eyebg-glow::before{animation:eyePulse 5.5s ease-in-out infinite}
@keyframes eyePulse{0%,100%{opacity:.25}50%{opacity:1}}
@media (max-width:759px),(pointer:coarse){ .eyebg-cv{display:none} }  /* mobile: no scrub canvas; the glow + breathing core stay (cheap, and it's the signature moment) */
@media (prefers-reduced-motion: reduce){
  .eyebg-cv{display:none}
  .eyebg-img{opacity:1!important;transform:none!important}   /* static eye, no animation */
  .eyebg-glow,.eyebg-glow::before{opacity:.7!important;animation:none!important}
}

/* ---- service outcome lines / value grid / footer location ---- */
.svc-desc{display:block;margin-top:10px;color:var(--muted);font-size:.98rem;line-height:1.55;max-width:520px;margin-left:auto;margin-right:auto}
.foot-loc{margin-top:10px;color:var(--muted-d);font-size:.92rem}

/* ---- sections / reveals ---- */
section.block{padding:130px 0;position:relative}
.sec-head{max-width:62ch}.sec-head.center{margin:0 auto;text-align:center}
.sec-head h2{font-size:clamp(2.3rem,5.6vw,3.9rem);margin:16px 0 18px;font-weight:600;letter-spacing:-.025em}
.sec-head p{color:var(--muted);font-size:1.12rem;max-width:60ch}
.sec-head.center p{margin-left:auto;margin-right:auto}
.reveal{transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)}
.js .reveal{opacity:0;transform:translateY(20px)}
.js .reveal.in{opacity:1;transform:none}
.intro-line{text-align:center;max-width:24ch;margin:0 auto;font-family:'Space Grotesk';font-weight:500;font-size:clamp(1.9rem,5vw,3.3rem);line-height:1.16;letter-spacing:-.02em;color:var(--white)}
.intro-line .muted{color:var(--muted-d)}


/* ---- services: interactive list ---- */
.svc-center{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;margin-top:64px}
/* hover choreography staggers IN (lift 0ms -> glow 50ms -> arrow 100ms -> eyebrow 150ms) and reverses
   with no delays. The container transform (lift + gentle 3D tilt) is JS-driven on desktop. */
.svc-item{display:block;width:100%;max-width:1000px;padding:30px 10px;border-top:1px solid var(--line);
  transition:background .35s ease .05s,border-color .35s ease .05s,transform .45s cubic-bezier(.22,1,.36,1)}
.svc-item:last-child{border-bottom:1px solid var(--line)}
.svc-item .svc-eyebrow{display:block;font-family:'Space Grotesk';font-weight:500;font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--cyan);margin-bottom:12px;transition:color .3s}
.svc-item .svc-title{display:flex;align-items:center;justify-content:center;gap:.4em;font-family:'Space Grotesk';font-weight:600;font-size:clamp(2.1rem,6.2vw,4.1rem);line-height:1.04;letter-spacing:-.03em;color:var(--text);transition:color .3s,transform .4s cubic-bezier(.22,1,.36,1)}
.svc-item .svc-title .arr{width:.62em;height:.62em;opacity:0;transform:translateX(-14px);transition:opacity .35s,transform .35s;color:var(--cyan)}
@media(hover:hover){.svc-center:hover .svc-item:not(:hover) .svc-title{opacity:.32}.svc-center:hover .svc-item:not(:hover) .svc-eyebrow{opacity:.4}}

/* ---- process ---- */
.process{background:linear-gradient(180deg,transparent,rgba(86,194,255,.025),transparent)}

/* ---- stats ---- */
.stat-band{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;text-align:center;margin-top:54px;border:1px solid var(--line);border-radius:var(--radius);padding:46px 28px;background:linear-gradient(180deg,var(--surface),transparent)}
.stat .num{font-family:'Space Grotesk';font-weight:600;font-size:clamp(2.4rem,5vw,3.4rem);line-height:1;letter-spacing:-.03em}
.stat .lab{font-size:.9rem;color:var(--muted);margin-top:10px}

/* ---- contact ---- */
.contact{position:relative}
.contact-card{max-width:780px;margin:54px auto 0;background:linear-gradient(180deg,var(--surface),rgba(11,17,32,.35));border:1px solid var(--line);border-radius:var(--radius);padding:42px;box-shadow:var(--shadow)}
.field{margin-bottom:18px}.field.row{display:grid;grid-template-columns:1fr;gap:18px}
.field label{display:block;font-size:.82rem;font-weight:500;letter-spacing:.03em;color:var(--text);margin-bottom:8px}
.field input,.field textarea{width:100%;font-family:inherit;font-size:1rem;padding:15px 17px;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:rgba(132,176,232,.04);color:var(--text);transition:border-color .2s,box-shadow .2s,background .2s}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-d)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--cyan);background:rgba(86,194,255,.05);box-shadow:0 0 0 3px rgba(86,194,255,.14)}
.field input:user-invalid,.field textarea:user-invalid{border-color:#E26D6D}
.contact-card .btn{width:100%;padding:17px;font-size:1rem}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn .spin{display:none;width:16px;height:16px;border:2px solid rgba(4,16,31,.35);border-top-color:var(--cyan-ink);border-radius:50%;animation:spin360 .7s linear infinite}
@keyframes spin360{to{transform:rotate(360deg)}}
.btn[data-loading="true"]{pointer-events:none;opacity:.92}
.btn[data-loading="true"] .spin{display:inline-block}
.btn[data-loading="true"] .btn-label{opacity:.5}
.form-msg{display:none;align-items:flex-start;gap:10px;padding:15px 17px;border-radius:var(--radius-sm);font-size:.94rem;margin-top:16px;line-height:1.5}
.form-msg.show{display:flex}.form-msg svg{width:19px;height:19px;flex:0 0 auto;margin-top:1px}
.form-msg.ok{background:rgba(86,194,255,.1);color:var(--cyan-bright);border:1px solid var(--line-2)}
.form-msg.err{background:rgba(226,109,109,.1);color:#EC9090;border:1px solid rgba(226,109,109,.3)}
.form-note{font-size:.86rem;color:var(--muted);text-align:left;margin-top:18px}
.form-note a{color:var(--cyan-bright)}

/* ---- contact: two-column (info + form) ---- */
.contact-grid{display:grid;grid-template-columns:1fr;gap:44px;margin-top:56px;align-items:start}
.contact-info h2{font-size:clamp(2.2rem,5vw,3.4rem);font-weight:600;letter-spacing:-.025em;margin-bottom:16px}
.contact-info > p{color:var(--muted);font-size:1.08rem;max-width:46ch;margin-bottom:26px}
.contact-card{max-width:none;margin:0;background:linear-gradient(180deg,var(--surface),rgba(11,17,32,.35));border:1px solid var(--line);border-radius:var(--radius);padding:38px;box-shadow:var(--shadow)}
.opt{color:var(--muted-d);font-weight:400;font-size:.92em;letter-spacing:0}
/* WhatsApp */
.wa-btn{display:inline-flex;align-items:center;gap:11px;font-family:'Space Grotesk';font-weight:600;font-size:.96rem;color:#04140A;background:linear-gradient(120deg,#25D366,#1FB855);border-radius:100px;padding:14px 24px;box-shadow:0 12px 30px rgba(37,211,102,.26);transition:transform .2s,box-shadow .3s}
.wa-btn svg{width:21px;height:21px}
.wa-btn:focus-visible{outline:2px solid #7BF0A6;outline-offset:3px}
/* contact details */
.contact-details{list-style:none;margin:28px 0 0;padding:24px 0 0;border-top:1px solid var(--line);display:grid;gap:13px}
.contact-details li{display:flex;align-items:baseline;gap:16px;font-size:1rem}
.contact-details .cd-k{flex:0 0 56px;font-family:'Space Grotesk';font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-d)}
.contact-details a{color:var(--text)}.contact-details a:hover{color:var(--cyan-bright)}
html[lang="el"] .contact-details .cd-k{flex-basis:86px}   /* ΤΗΛΕΦΩΝΟ (uppercase + .16em tracking) needs ~78px; one basis keeps all three values aligned */
/* trust row */

/* ============================================================================
   CUSTOM CURSOR — dot + trailing ring (desktop-only, set up in app.js).
   Tweak sizes/colour/glow via the vars below.
   ============================================================================ */
.cursor-dot,.cursor-ring,.cursor-rocket{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;opacity:0;will-change:transform;transform:translate3d(-120px,-120px,0)}  /* JS writes style.transform DIRECTLY — var()+calc() transforms paid a custom-property style recalc on every mousemove */
html.cursor-on .cursor-dot,html.cursor-on .cursor-ring{opacity:1}
/* text fields keep the SYSTEM text cursor (custom dot/ring over an input made the caret unusable) */
html.cursor-on,html.cursor-on a,html.cursor-on button,html.cursor-on label,html.cursor-on [data-cursor]{cursor:none}
html.cursor-on input,html.cursor-on textarea,html.cursor-on select{cursor:auto}
html.cursor-text .cursor-dot,html.cursor-text .cursor-ring{opacity:0!important}
.cursor-dot{ --dot:7px; width:var(--dot);height:var(--dot);border-radius:50%;
  background:#EAF2FB;box-shadow:0 0 9px var(--glow),0 0 3px #fff;
}
.cursor-ring{ --ring:38px; width:var(--ring);height:var(--ring);border-radius:50%;
  border:1.5px solid rgba(155,220,255,.7);box-shadow:0 0 18px rgba(86,194,255,.32),inset 0 0 10px rgba(86,194,255,.12);
  transition:width .26s cubic-bezier(.22,1,.36,1),height .26s cubic-bezier(.22,1,.36,1),border-color .26s,background .26s,opacity .25s }
html.cursor-hover .cursor-ring{ --ring:64px;border-color:rgba(155,220,255,.45);background:rgba(86,194,255,.05) }
html.cursor-down .cursor-ring{ --ring:30px }

/* ROCKET cursor — only on the LAUNCH screen (#launch). Tweak size via --rk. */
.cursor-rocket{ --rk:30px; width:var(--rk);height:calc(var(--rk)*1.5);
  transition:opacity .3s, width .25s cubic-bezier(.22,1,.36,1), height .25s cubic-bezier(.22,1,.36,1) }
/* glow via a composited pseudo-element (rides the transform) instead of a per-frame drop-shadow filter */
.cursor-rocket::before{ content:""; position:absolute; inset:-35%; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(120,200,255,.5), rgba(86,194,255,.18) 45%, transparent 70%) }
html.rocket-on .cursor-rocket{opacity:1}
html.rocket-on .cursor-dot,html.rocket-on .cursor-ring{opacity:0}   /* rocket replaces dot+ring on the launch screen */
html.rocket-on #launch,html.rocket-on #launch *{cursor:none}
.cursor-rocket .flame{transform-origin:50% 0}
html.rocket-on .cursor-rocket .flame{animation:rkflame .28s ease-in-out infinite alternate}  /* flame only burns while the rocket is live — no infinite animation on a hidden element after launch */
/* rocket spark trail particle */
.rk-spark{position:fixed;left:0;top:0;z-index:9998;width:6px;height:6px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#CFF0FF,#56C2FF 55%,transparent 72%);
  transform:translate(calc(var(--sx) - 50%),calc(var(--sy) - 50%)) scale(var(--ss,1));
  opacity:var(--so,.9);transition:opacity .5s ease, transform .5s ease}
@keyframes rkflame{from{transform:scaleY(.8) scaleX(.92)}to{transform:scaleY(1.18) scaleX(1.05)}}

/* ---- footer ---- */
footer{border-top:1px solid var(--line);padding:64px 0 40px;background:linear-gradient(180deg,transparent,rgba(86,194,255,.02))}
.foot-top{display:grid;grid-template-columns:1fr;gap:40px}
.foot-brand .brand{margin-bottom:18px}
.foot-brand p{color:var(--muted);max-width:42ch;font-size:.97rem}
.foot-cols{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.foot-col h3{font-family:'Space Grotesk';font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-d);margin-bottom:16px;font-weight:600}
.foot-col a{display:block;color:var(--muted);font-size:.95rem;padding:6px 0;transition:color .2s}
.foot-col a:hover{color:var(--cyan-bright)}
.foot-bottom{display:flex;flex-direction:column;gap:18px;align-items:flex-start;margin-top:48px;padding-top:28px;border-top:1px solid var(--line)}
.foot-legal{font-size:.84rem;color:var(--muted-d)}
.foot-social{display:flex;gap:11px}
.foot-social a{width:42px;height:42px;border-radius:11px;background:rgba(132,176,232,.05);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--text);transition:transform .2s,border-color .2s,color .2s}
.foot-social a:hover{transform:translateY(-3px);border-color:var(--cyan);color:var(--cyan-bright)}
.foot-social a svg{width:19px;height:19px}

/* ---- mobile bottom bar ---- */
.mobile-bar{position:fixed;bottom:0;left:0;right:0;z-index:95;display:flex;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:rgba(7,10,18,.975);border-top:1px solid var(--line)}  /* mobile-only bar: solid bg, no scroll-time blur */
.mobile-bar .btn{flex:1;padding:14px}

/* ============================================================================
   SERVICE PAGES
   ============================================================================ */
.page-hero{position:relative;padding:190px 0 70px;text-align:center;overflow:hidden}
.page-hero::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:120%;height:300px;background:radial-gradient(60% 100% at 50% 100%,var(--glow-soft),transparent 70%);pointer-events:none}
.crumb{display:inline-flex;align-items:center;gap:9px;font-size:.84rem;color:var(--muted);margin-bottom:26px}
.crumb a{color:var(--cyan)}.crumb a:hover{color:var(--cyan-bright)}
.page-hero .eyebrow{display:block;margin-bottom:18px}
.page-hero h1{font-size:clamp(2.7rem,8vw,5.4rem);font-weight:600;margin-bottom:22px;letter-spacing:-.03em}
.page-hero p{color:var(--muted);font-size:1.18rem;max-width:60ch;margin:0 auto;line-height:1.6}
.svc-body{display:grid;grid-template-columns:1fr;gap:34px;max-width:900px;margin:0 auto}
.prose h2{font-size:clamp(1.7rem,4vw,2.5rem);margin:0 0 16px;font-weight:600;letter-spacing:-.02em}
.prose p{color:var(--muted);font-size:1.06rem;margin-bottom:16px;max-width:66ch}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media(min-width:620px){
  .field.row{grid-template-columns:1fr 1fr}
  .stat-band{grid-template-columns:repeat(4,1fr)}
}
@media(min-width:760px){
  .foot-bottom{flex-direction:row;justify-content:space-between;align-items:center}
}
@media(min-width:880px){
  .contact-grid{grid-template-columns:0.92fr 1.08fr;gap:60px}   /* info | form */
}
@media(min-width:980px){
  .nav-links{display:flex}.menu-btn{display:none}.mobile-bar{display:none}
  .foot-top{grid-template-columns:1.4fr 1fr;gap:64px}
  .foot-cols{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:979px){
  .nav-cta .btn-primary{display:none}  /* hamburger + bottom bar carry the CTA on small screens */
  .brand .bn{white-space:nowrap}
}
@media(max-width:619px){
  body{font-size:16px}
  section.block{padding:80px 0}
  .wrap{padding:0 20px}
  .nav{height:66px}
  .brand .bn{letter-spacing:.2em;font-size:.82rem}
  .brand .mark{width:26px;height:26px}
  .hero{height:100vh;height:100svh}
  .svc-center{gap:0;margin-top:40px}
  .svc-item{padding:24px 4px;text-align:left}
  .svc-item .svc-title{justify-content:flex-start;font-size:clamp(2rem,10vw,2.9rem)}
  .contact-card{padding:26px 20px}
}

/* ---- film grain + reduced motion ---- */
/* Dropped mix-blend-mode:overlay (a full-screen blend layer forces per-composite blending = scroll-paint cost).
   Plain low-opacity overlay on desktop; removed entirely on touch/small screens. */
/* film grain REMOVED — at .03 opacity it was visually imperceptible but blended a full-screen
   layer into every composited frame. Pure bandwidth cost, zero visible loss. */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001s!important;transition-duration:.001s!important;scroll-behavior:auto}
  .reveal{opacity:1!important;transform:none!important}
  #stars,body::after{display:none}   /* reduced motion: the PLAIN progress bar stays (rocket/Earth are never created) */
  .hero{height:100vh;height:100svh}
  .hero-intro{opacity:1!important;transform:none!important;pointer-events:auto}
  .hero-intro::before{opacity:1!important}
  .hero-intro .hw,.hero-intro.hsplit .eyebrow,.hero-intro.hsplit p,.hero-intro.hsplit .hero-cta{opacity:1!important;transform:none!important}
  .cinematic header{opacity:1!important;transform:none!important;pointer-events:auto}
}

/* ================= MICRO-INTERACTIONS (v18) ================= */
/* eyelid blink layer — JS animates scaleY via WAAPI every 8–12s while the eye is landed (desktop scrub only) */
.eyebg-lid{position:absolute;left:0;right:0;top:-2%;height:104%;pointer-events:none;transform:scaleY(0);transform-origin:50% 0;
  background:linear-gradient(180deg,#02040A 0%,#03050D 55%,rgba(3,5,13,.85) 80%,transparent 100%)}
/* iris shimmer REMOVED — a second infinite compositor animation at Contact for a barely-visible
   streak; its cost outweighed it (part of the "everything feels laggy" fix). */
/* button press — fast ease-out, wins over hover/magnet transforms for the press instant */
.btn:active,.launch-btn:active,.menu-btn:active,.wa-btn:active{transform:scale(.97)!important;transition-duration:.1s!important}
/* magnetic CTAs — JS adds .mag-on while hovered; bloom + eased pull (transform set inline by JS) */
.btn-primary,.wa-btn{transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .35s ease,background .3s ease,border-color .3s ease,color .3s ease}
.mag-on{box-shadow:0 0 32px rgba(86,194,255,.35)!important}
/* form label lift on focus */
.field label{transition:color .25s ease,transform .25s ease}
.field label:has(+ input:focus),.field label:has(+ textarea:focus){color:var(--cyan-bright);transform:translateY(-2px)}
/* footer link underlines — draw left to right */
.foot-col a{position:relative;width:fit-content;max-width:100%}
.foot-col a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--cyan);opacity:.85;
  transform:scaleX(0);transform-origin:0 50%;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.foot-col a:hover::after{transform:scaleX(1)}
.h2r .w{display:inline-block;opacity:0;transform:translateY(.65em)}
.h2r.in .w{opacity:1;transform:none;
  transition:opacity .65s cubic-bezier(.22,1,.36,1) calc(var(--wi)*40ms),transform .65s cubic-bezier(.22,1,.36,1) calc(var(--wi)*40ms)}
/* eyebrow one-time light sweep on first view */
.eyebrow{position:relative;display:inline-block;overflow:hidden}
.eyebrow::after{content:"";position:absolute;inset:0;transform:translateX(-140%);pointer-events:none;
  background:linear-gradient(105deg,transparent 25%,rgba(234,242,251,.26) 50%,transparent 75%)}
.eyebrow.shine::after{animation:ebsweep 1.1s cubic-bezier(.4,0,.2,1) .2s forwards}
@keyframes ebsweep{to{transform:translateX(140%)}}
/* footer constellation — static SVG, opacity fade once */
footer{position:relative;overflow:hidden}
.constellation{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity 1.6s ease .3s}
.constellation.in{opacity:1}
.constellation line{stroke:rgba(155,220,255,.13);stroke-width:1}
.constellation circle{fill:rgba(155,220,255,.33)}
/* SECTION AWARENESS: while #services is in view the glow keeps a faint floor presence
   (JS toggles .svcnear); the Contact warm-up is the existing --eyeg ramp, now starting earlier. */
.eyebg.svcnear .eyebg-glow{opacity:max(.1, var(--eyeg,0))}
/* CURSOR LIGHT — a soft light source following the pointer over the scene (bottom region only;
   JS lerps transform + opacity). Sits above the eye layers, below all content. */
.cursor-light{position:fixed;left:-170px;top:-170px;width:340px;height:340px;z-index:-1;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(120,200,255,.10),rgba(86,194,255,.035) 45%,transparent 70%);
transform:translate3d(-999px,-999px,0)}
@media (max-width:759px),(pointer:coarse){ .eyebg-lid,.cursor-light{display:none} }
@media (prefers-reduced-motion: reduce){
  .eyebg-lid,.eyebrow::after,.cursor-light,.sp-rocket,.sp-earth,.sstar{display:none}
  .eyebg{transform:none}
  .h2r .w{opacity:1!important;transform:none!important}
  .constellation{opacity:1;transition:none}
}


/* ================= FINAL POLISH (v22) ================= */
/* #2 typography wrapping — no orphan words (ignored gracefully by older browsers) */
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
/* #4 glass edges — 1px inner top highlight + deeper bottom edge (static shadows, never animated) */
.contact-card{box-shadow:inset 0 1px 0 rgba(210,235,255,.07), inset 0 -1px 0 rgba(0,0,0,.3)}
.btn-ghost,.menu-btn{box-shadow:inset 0 1px 0 rgba(210,235,255,.08)}
.field input,.field textarea{box-shadow:inset 0 1px 0 rgba(210,235,255,.04)}
/* #9 in-page anchors land clear of the fixed header */
section[id],#contact,#services{scroll-margin-top:92px}
/* #12 themed scrollbar */
html{scrollbar-color:rgba(86,194,255,.35) #070B16;scrollbar-width:thin}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:#070B16}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(86,194,255,.4),rgba(44,132,216,.35));border-radius:8px;border:2px solid #070B16}
::-webkit-scrollbar-thumb:hover{background:rgba(86,194,255,.55)}
/* #7 primary-button arrow nudge (spring-ish) */
.btn svg{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}

/* EL/EN language toggle — quiet pill in the nav (underline suppressed) */
/* ================= LANGUAGE SWITCH (v28) ================= */
/* Minimal text pair "EL / EN" — plain <a> links between the two builds, zero JS.
   Typography mirrors .eyebrow; ACTIVE = cyan + 1px underline; inactive 40% -> 80% on hover
   with the nav's left-to-right underline-draw. No boxes, no borders, no flags. */
.lang-switch{display:none;align-items:center;gap:9px;font-family:'Space Grotesk';font-weight:500;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase}
.lang-switch .ls-sep{color:var(--muted-d);opacity:.55;pointer-events:none;user-select:none;letter-spacing:0}
.lang-switch a{position:relative;color:var(--text);opacity:.4;transition:opacity .25s ease,color .25s ease}
.lang-switch a::after{content:"";position:absolute;left:0;right:.18em;bottom:-6px;height:1px;background:var(--cyan);box-shadow:0 0 8px var(--glow);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .28s cubic-bezier(.22,1,.36,1)}  /* right:.18em cancels the trailing letter-space */
.lang-switch a:hover{opacity:.8}
.lang-switch a:hover::after{transform:scaleX(1)}
.lang-switch a[aria-current="page"]{color:var(--cyan);opacity:1}
.lang-switch a[aria-current="page"]::after{transform:scaleX(1)}
.nav-cta .lang-switch{margin-right:10px}                        /* + the nav-cta 12px gap = comfortable air before the CTA */
@media(min-width:760px){ .nav-cta .lang-switch{display:flex} }  /* header pair on tablet/desktop; phones use the menu row */
.lang-switch--menu{display:flex;padding:14px;gap:12px;font-size:.8rem}
.lang-switch--menu a::after{bottom:-4px}
.lang-switch--foot{display:flex;font-size:.7rem}
.lang-switch--foot a{color:var(--muted)}
.lang-switch--foot a[aria-current="page"]{color:var(--cyan)}

/* GRADIENT WORDS inside split headings: a transformed inline-block child does NOT receive the parent's
   background-clip:text fill (transparent glyphs = invisible words, e.g. the hero's gradient word at rest).
   Fix: paint + clip the gradient on each word span itself. */
.gradient-text .hw,.gradient-text .w{
  background:linear-gradient(120deg,var(--white) 25%,var(--cyan-bright) 60%,var(--cyan));
  -webkit-background-clip:text;background-clip:text}


/* ================= LUXE PASS (v26) ================= */
/* SCROLL CUE — minimal, fine-tracked, with a falling light; owned by the scroll (fades as --hrev rises).
   Appears only once the descent has settled (body.reveal-ui). */
.scroll-cue{position:absolute;left:50%;bottom:4vh;transform:translateX(-50%);z-index:var(--z-hint);
  display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none;
  opacity:0;transition:opacity .9s ease .4s}
.reveal-ui .scroll-cue{opacity:calc(1 - var(--hrev,0)*3)}
.scroll-cue span{font-family:'Space Grotesk';font-size:.62rem;letter-spacing:.42em;color:var(--muted);text-transform:uppercase;margin-right:-.42em}
.scroll-cue i{display:block;width:1px;height:44px;background:linear-gradient(180deg,var(--line-2),transparent);position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;left:0;top:-10px;width:1px;height:10px;background:var(--cyan-bright);box-shadow:0 0 6px var(--glow);
  animation:cuedrop 2.2s cubic-bezier(.4,0,.6,1) infinite}
@keyframes cuedrop{0%{transform:translateY(0)}70%,100%{transform:translateY(56px)}}
/* fine hairline under section headings — quiet jewellery */
.sec-head::after{content:"";display:block;width:56px;height:1px;margin:26px auto 0;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);opacity:.55}
/* primary-button light sweep on hover (desktop) — transform-only sheen */
.btn-primary{overflow:hidden}
.btn-primary::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.32) 50%,transparent 68%);
  transform:translateX(-130%)}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover::after{transition:transform .65s ease;transform:translateX(130%)}
}
/* MOBILE refinements */
@media (max-width:759px){
  .hero-intro{bottom:calc(34px + env(safe-area-inset-bottom,0px))}  /* the mobile-bar is hidden over the hero now — comfortable fixed clearance at any phone height */
  .hero-intro .eyebrow{text-shadow:0 1px 14px rgba(2,6,14,.95)}      /* lifts the eyebrow off the baked wordmark letters behind it */
  .scroll-cue{display:none}                                 /* phones: bar + touch habits make it redundant (and it collided with the stacked CTAs) */
}
@media (prefers-reduced-motion: reduce){
  .scroll-cue{display:none}
}


/* ================= AMBIENT EARTH DRIFT (v27) ================= */
/* After the descent settles the planet never fully stops: a very slow scale+drift on the hero canvas
   (compositor-only). Runs ONLY while the hero is in view (.drift-vis via IO) and after .drift is set. */
.hero-sticky.drift.drift-vis #heroCanvas{animation:earthdrift 30s ease-in-out infinite alternate}
@keyframes earthdrift{
  from{transform:scale(1) translate3d(0,0,0)}
  to{transform:scale(1.055) translate3d(-1%, .5%, 0)}
}
@media (prefers-reduced-motion: reduce){ .hero-sticky.drift.drift-vis #heroCanvas{animation:none} }


/* ================= LEGAL PAGES (v29) ================= */
/* Static bilingual pages (company info / privacy) — plain, fast, no app.js. */
.legal-wrap{max-width:860px;margin:0 auto}
.legal-dl{margin:0;border-top:1px solid var(--line)}
.legal-dl>div{display:grid;grid-template-columns:290px 1fr;gap:6px 30px;padding:18px 0;border-bottom:1px solid var(--line)}
.legal-dl dt{font-family:'Space Grotesk';font-weight:500;font-size:.94rem;color:var(--white)}
.legal-dl dt .en,.legal-h2 .en,.prose h2 .en{display:block;font-family:'Hanken Grotesk';font-weight:400;font-size:.8rem;color:var(--muted-d);letter-spacing:.01em;margin-top:3px;text-transform:none}
.legal-dl dd{margin:0;color:var(--muted);font-size:.98rem;line-height:1.65}
.legal-sub{display:inline-block;margin-top:6px;font-size:.85rem;color:var(--muted-d)}
.ph{color:var(--muted-d);font-style:italic}
@media (max-width:619px){ .legal-dl>div{grid-template-columns:1fr;gap:3px} }
.legal-h2{font-family:'Space Grotesk';font-weight:600;font-size:1.35rem;letter-spacing:-.01em;color:var(--white);margin:54px 0 12px}
.legal-files{margin:0;padding:0;list-style:none}
.legal-files a{color:var(--cyan)}
.legal-note{margin-top:14px;font-size:.86rem;color:var(--muted-d);max-width:66ch}
.legal-basis{margin-top:44px;padding-top:22px;border-top:1px solid var(--line)}
.legal-prose h2{font-size:1.35rem;margin-top:44px}
.legal-prose h2:first-child{margin-top:0}
.legal-prose p[lang="en"],.legal-prose ul+p[lang="en"]{color:var(--muted-d);font-size:.92rem}
.legal-prose ul{margin:0 0 14px;padding-left:20px;color:var(--muted);font-size:1rem;line-height:1.7}
.legal-prose li{margin-bottom:8px}
.legal-prose a{color:var(--cyan)}
.legal-page .page-hero{padding-top:150px}
@media (max-width:979px){ .legal-page .nav-cta .btn-primary{display:inline-flex} }  /* legal pages have no hamburger/bottom bar -> keep the header CTA on phones */
.legal-page .nav-cta .lang-switch{display:flex}                                       /* ...and the EL/EN switch at every width (no menu row exists here) */
/* discreet legal links in every footer — same muted treatment as the legal line itself */
.foot-legal a{color:inherit;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.foot-legal a:hover{color:var(--muted);border-bottom-color:var(--line-2)}


/* ================= PRE-PAINT INTRO SKIP (v31) ================= */
/* Return visits: the synchronous <head> check puts .skip-intro on <html> BEFORE first paint, so the
   launch overlay can never flash (deferred app.js used to hide it AFTER render — that was the ~0.1s
   flash). These rules bridge the frames until app.js applies the full settled state. */
html.skip-intro .launch{display:none!important;background-image:none!important}   /* background-image:none too — Chrome still fetches a background on an element that is itself display:none */
html.skip-intro .cinematic header{opacity:1;transform:none;pointer-events:auto}   /* header visible immediately */
html.skip-intro #heroSticky{--hrev:1}                                             /* hero copy assembled immediately (JS re-writes 1.000 inline later — same value) */


/* ================= MOBILE-FIRST PASS (v32) ================= */
/* MOBILE CINEMATIC HERO: launch dissolves onto the settled Earth (f55 + ambient drift); the copy
   staggers in on a timer — eyebrow -> headline -> sub -> CTAs. Time-based (no scroll/hover dependence);
   JS never adds .m-reveal under prefers-reduced-motion. */
@media (max-width:759px), (pointer:coarse){
  body.m-reveal .hero-intro .eyebrow{animation:mrise .65s cubic-bezier(.22,1,.36,1) .25s both;animation-name:mrise-eb}
  body.m-reveal .hero-intro .hw{animation:mrise .65s cubic-bezier(.22,1,.36,1) .45s both}
  body.m-reveal .hero-intro p{animation:mrise .65s cubic-bezier(.22,1,.36,1) .70s both}
  body.m-reveal .hero-intro .hero-cta{animation:mrise .65s cubic-bezier(.22,1,.36,1) .92s both}
}
@keyframes mrise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes mrise-eb{from{opacity:0;transform:translateY(10px)}to{opacity:.9;transform:none}}  /* eyebrow settles at its .9 resting opacity — no end snap */

/* TRUST ROW: a deliberate single-column checklist on phones (was a ragged 2-1-1 wrap) */
@media (max-width:619px){
}

/* TAP TARGETS >=44px on touch layouts */
@media (max-width:759px){
  .foot-col a{padding:11px 0}                                   /* footer column links: 15px text + 22px pad ~= 45px rows */
  .foot-legal a{display:inline-block;padding:11px 3px}          /* legal links in the (c) line — >=44px tap rows */
  .legal-page .nav-cta .lang-switch a{padding:14px 5px}         /* EL/EN pair on legal-page headers (no menu there) */
}

/* MOBILE IMAGE VARIANTS: same art, ~1/3 the bytes on small screens */
@media (max-width:759px){
  .launch{background-image:url(../images/starfield-m.jpg)}
}

/* ================= PORTRAIT HERO ART (v33) ================= */
/* The 16:9 footage has the ORBIT STUDIO wordmark BAKED IN — cover-cropped on a phone it read "BIT STU".
   Phones never show the canvas: a dedicated portrait crop (no wordmark, horizon ~45%, dark left hemisphere)
   is the hero, and the ambient drift runs on it instead. The brand stays as REAL TEXT in the header. */
@media (max-width:759px){
  #heroCanvas{display:none}
  .hero-sticky{background:#000}
  .hero-sticky::before{content:"";position:absolute;inset:0;background:#000 url(../images/earth-m.jpg) center/cover no-repeat}
  .hero-sticky.drift.drift-vis::before{animation:earthdrift 30s ease-in-out infinite alternate}
  .hero-scrim{background:linear-gradient(180deg,rgba(2,4,10,.42),transparent 22%,transparent 40%,rgba(2,4,10,.55) 66%,rgba(2,4,10,.92))}  /* deeper lower scrim: copy always reads over the planet */
}
@media (prefers-reduced-motion: reduce){ .hero-sticky.drift.drift-vis::before{animation:none} }

/* mobile-bar: hidden until the hero is scrolled past (JS adds .on) — it was covering the hero's own
   subheadline + CTAs while duplicating them. Gated on html.js so a no-JS visitor still gets the bar. */
html.js .mobile-bar{opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .4s ease,transform .4s ease}
html.js .mobile-bar.on{opacity:1;transform:none;pointer-events:auto}


/* ================= ELEVATION PASS (v34) ================= */

/* ---- SIGNATURE ORBIT MOTIF: thin tilted ellipse + one glowing dot travelling along it (CSS Motion Path). ---- */
.orbit{position:relative;display:inline-block;width:38px;height:18px;vertical-align:middle;transform:rotate(-12deg);flex:0 0 auto;pointer-events:none}
.orbit::before{content:"";position:absolute;inset:0;border:1px solid rgba(155,220,255,.42);border-radius:50%}
.orbit::after{content:"";position:absolute;left:0;top:0;width:4px;height:4px;border-radius:50%;background:var(--cyan-bright);box-shadow:0 0 8px var(--glow);
  offset-path:path('M 0 9 a 19 9 0 1 0 38 0 a 19 9 0 1 0 -38 0');offset-rotate:0deg;animation:orbitdot 10s linear infinite}
@keyframes orbitdot{to{offset-distance:100%}}
@supports not (offset-path:path('M0 0')){ .orbit::after{left:auto;right:-2px;top:7px;animation:none} }   /* old engines: static dot on the ring */
.orbit--brand{width:26px;height:12px;margin-right:9px}
.orbit--brand::after{width:3px;height:3px;offset-path:path('M 0 6 a 13 6 0 1 0 26 0 a 13 6 0 1 0 -26 0');animation-duration:9s}
.orbit--accent{display:block;width:44px;height:20px;margin:10px auto 0}
.orbit--accent::after{offset-path:path('M 0 10 a 22 10 0 1 0 44 0 a 22 10 0 1 0 -44 0');animation-duration:11s}
.page-hero .orbit--accent{margin:12px auto 0}
.orbit--hero{display:block;width:220px;height:100px;margin:0 auto 34px}
.orbit--hero::before{border-color:rgba(155,220,255,.32)}
.orbit--hero::after{width:6px;height:6px;box-shadow:0 0 14px var(--glow),0 0 30px rgba(86,194,255,.35);offset-path:path('M 0 50 a 110 50 0 1 0 220 0 a 110 50 0 1 0 -220 0');animation-duration:12s}
/* form "sending…" = mini-orbit (replaces the generic spinner) */
.btn .spin{position:relative;width:22px;height:11px;border:1px solid rgba(4,16,31,.45);border-top-color:rgba(4,16,31,.45);border-radius:50%;transform:rotate(-12deg);animation:none}
.btn .spin::after{content:"";position:absolute;left:0;top:0;width:4px;height:4px;border-radius:50%;background:var(--cyan-ink);
  offset-path:path('M 0 5.5 a 11 5.5 0 1 0 22 0 a 11 5.5 0 1 0 -22 0');offset-rotate:0deg;animation:orbitdot 1.4s linear infinite}
.btn[data-loading="true"] .spin{display:inline-block}

/* ---- ANIMATED SERVICE ICONS: bespoke line art, draws itself once on scroll-into-view (pathLength="100"),
   staggered across the list; desktop hover = soft glow + micro-replay. ---- */
.svc-ico{display:block;width:38px;height:38px;margin:0 auto 14px;color:var(--cyan-bright);position:relative}
.svc-ico::before{content:"";position:absolute;inset:-16px;border-radius:50%;background:radial-gradient(circle,rgba(86,194,255,.24),transparent 64%);opacity:0;transition:opacity .45s ease}
.svc-ico svg{display:block;width:100%;height:100%;overflow:visible}
.svc-ico .s1,.svc-ico .s2,.svc-ico .s3,.svc-ico .s4{stroke-dasharray:100;stroke-dashoffset:100}
.svc-ico .dot,.svc-ico .star{opacity:0}
.svc-ico .pin{opacity:0;transform:translateY(-9px)}
.svc-ico .s2{--d:.22s}.svc-ico .s3{--d:.42s}.svc-ico .s4{--d:.58s}
.svc-center .svc-item:nth-child(2){--sd:.12s}.svc-center .svc-item:nth-child(3){--sd:.24s}.svc-center .svc-item:nth-child(4){--sd:.36s}.svc-center .svc-item:nth-child(5){--sd:.48s}
.svc-item.in .svc-ico .s1,.svc-item.in .svc-ico .s2,.svc-item.in .svc-ico .s3,.svc-item.in .svc-ico .s4{animation:icodraw 1s cubic-bezier(.4,0,.2,1) calc(var(--sd,0s) + var(--d,0s)) forwards}
.svc-item.in .svc-ico .dot{animation:icopop .5s ease-out calc(var(--sd,0s) + .95s) forwards}
.svc-item.in .svc-ico .star{animation:icopop .5s ease-out calc(var(--sd,0s) + 1.15s) forwards}
.svc-item.in .svc-ico .pin{animation:pindrop .6s cubic-bezier(.34,1.56,.64,1) calc(var(--sd,0s) + .55s) forwards}
.svc-item.in .svc-ico.ico-host::before{animation:icopulse 2.6s ease-in-out calc(var(--sd,0s) + 1.1s) 2}
@keyframes icodraw{to{stroke-dashoffset:0}}
@keyframes icodraw2{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes icopop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes pindrop{from{opacity:0;transform:translateY(-9px)}to{opacity:1;transform:none}}
@keyframes icopulse{0%,100%{opacity:0}50%{opacity:.9}}
.svc-ico .dot,.svc-ico .star,.svc-ico .pin{transform-box:fill-box;transform-origin:center}
@media (hover:hover) and (pointer:fine){
  .svc-item:hover .svc-ico::before{opacity:1}
  .svc-item.in:hover .svc-ico .s1,.svc-item.in:hover .svc-ico .s2,.svc-item.in:hover .svc-ico .s3,.svc-item.in:hover .svc-ico .s4{animation-name:icodraw2;animation-delay:var(--d,0s)}   /* micro-replay */
}
@media (prefers-reduced-motion: reduce){
  .svc-ico .s1,.svc-ico .s2,.svc-ico .s3,.svc-ico .s4{stroke-dashoffset:0;animation:none!important}
  .svc-ico .dot,.svc-ico .star,.svc-ico .pin{opacity:1;transform:none;animation:none!important}
  .orbit::after,.btn .spin::after{animation:none}
}

/* ---- ATMOSPHERE DIVIDERS (homepage): a faint curved horizon of cyan-white light at each section boundary —
   a wide flat arc (border-radius hairline) over a pre-rendered radial glow. No filters, no layout impact. ---- */
.cinematic #services,.cinematic #contact{position:relative}
.cinematic #services::before,.cinematic #contact::before,.cinematic footer::before{content:"";position:absolute;left:0;right:0;top:0;height:64px;pointer-events:none;z-index:0;
  border-top:1px solid rgba(155,220,255,.14);border-radius:50% 50% 0 0/64px 64px 0 0;
  background:radial-gradient(60% 100% at 50% 0%,rgba(155,220,255,.11),rgba(86,194,255,.045) 42%,transparent 72%)}
.cinematic footer{border-top-color:transparent}

/* ---- INTERIOR PAGES: the same design language everywhere ---- */
.legal-page #space::after,.page-404 #space::after{content:"";position:absolute;inset:0;background:url(../images/starfield-m.jpg) center/cover no-repeat;opacity:.5}  /* star texture where no canvas runs */
@media (max-width:759px),(pointer:coarse){
  body:not(.cinematic):not(.legal-page) #space::after{content:"";position:absolute;inset:0;background:url(../images/starfield-m.jpg) center/cover no-repeat;opacity:.5}
}
.page-hero .orbit--accent{margin-top:14px}

/* ---- 404 ---- */
.page-404 .page-hero{padding-bottom:40px}
.sat{position:relative;display:block;width:34px;height:14px;margin:-58px auto 44px;animation:satdrift 9s ease-in-out infinite alternate}
.sat::before{content:"";position:absolute;left:11px;top:2px;width:12px;height:10px;border-radius:3px;background:linear-gradient(180deg,#DDF1FF,#9BDCFF);box-shadow:0 0 10px var(--glow)}
.sat::after{content:"";position:absolute;left:0;right:0;top:5px;height:4px;background:linear-gradient(90deg,rgba(86,194,255,.9) 0 30%,transparent 30% 70%,rgba(86,194,255,.9) 70%)}
@keyframes satdrift{from{transform:translate3d(-26px,-6px,0) rotate(-8deg)}to{transform:translate3d(26px,8px,0) rotate(6deg)}}
@media (prefers-reduced-motion: reduce){ .sat{animation:none} }

/* ---- SHOOTING STARS: one fixed streak, background layer, driven by app.js (CSS vars per streak) ---- */
.sstar{position:fixed;left:0;top:0;width:var(--len,140px);height:1px;z-index:-1;pointer-events:none;opacity:0;transform-origin:0 50%;border-radius:1px;
  background:linear-gradient(90deg,rgba(86,194,255,0),rgba(155,220,255,.55) 62%,#fff);will-change:transform,opacity}
.sstar.bright{height:1.5px;background:linear-gradient(90deg,rgba(86,194,255,0),rgba(155,220,255,.75) 55%,#fff);box-shadow:0 0 6px rgba(155,220,255,.5)}
.sstar.go{animation:sstar var(--dur,.9s) cubic-bezier(.25,.6,.35,1) forwards}
@keyframes sstar{
  0%{opacity:0;transform:translate3d(var(--x),var(--y),0) rotate(var(--ang)) translateX(0)}
  14%{opacity:1}
  100%{opacity:0;transform:translate3d(var(--x),var(--y),0) rotate(var(--ang)) translateX(var(--dist))}
}

/* ---- ROCKET JOURNEY progress (extends #sp; both elements created by app.js, never under reduced motion) ---- */
.sp-rocket{position:fixed;top:-8px;left:0;width:18px;height:18px;z-index:101;pointer-events:none;color:#DDF1FF;will-change:transform}
.sp-rocket svg{display:block;width:100%;height:100%;overflow:visible}
.sp-rocket path{fill:currentColor}.sp-rocket circle{fill:#0B1120}
.sp-rocket::before{content:"";position:absolute;inset:-6px;border-radius:50%;background:radial-gradient(circle,rgba(155,220,255,.5),transparent 65%);z-index:-1}
.sp-rocket::after{content:"";position:absolute;right:100%;top:50%;width:12px;height:2px;margin:-1px 1px 0 0;border-radius:1px;background:linear-gradient(90deg,transparent,rgba(155,220,255,.95));
  opacity:0;transform:scaleX(.3);transform-origin:100% 50%;transition:opacity .25s,transform .25s}
.sp-rocket.moving::after{opacity:1;transform:scaleX(1);animation:exhaust .32s ease-in-out infinite alternate}   /* shimmer only while actively scrolling */
@keyframes exhaust{from{transform:scaleX(.7);opacity:.7}to{transform:scaleX(1.15);opacity:1}}
.sp-earth{position:fixed;top:-5px;right:12px;width:14px;height:14px;border-radius:50%;z-index:101;pointer-events:none;opacity:.85;
  background:radial-gradient(circle at 36% 34%,#9BDCFF,#2C84D8 52%,#0A3468 100%);box-shadow:0 0 10px rgba(86,194,255,.6),0 0 22px rgba(86,194,255,.25)}
.sp-earth.pulse{animation:earthpulse 1.1s ease-out 1 both}   /* ARRIVAL: one soft pulse */
@keyframes earthpulse{0%{transform:scale(1);opacity:.85}35%{transform:scale(1.45);opacity:1}100%{transform:scale(1);opacity:.85}}
@media (max-width:759px),(pointer:coarse){ .sp-rocket{width:12px;height:12px;top:-5px} .sp-earth{width:11px;height:11px;top:-4px;right:10px} }

/* ---- SOCIAL SHARE CARD template (images/og-card.html) — screenshot the .og-card at exactly 1200x630 ---- */
.og-body{margin:0;background:#000;display:grid;place-items:center;min-height:100vh}
.og-card{position:relative;width:1200px;height:630px;overflow:hidden;background:#04060E url(../images/starfield.jpg) center/cover no-repeat;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;text-align:center;padding-bottom:120px}
.og-card::before{content:"";position:absolute;left:-8%;right:-8%;bottom:-72%;height:100%;border-radius:50%;background:#0A1A3A;box-shadow:0 -8px 46px rgba(155,220,255,.45)}      /* Earth disc */
.og-card::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-62%;height:100%;border-radius:50%;background:radial-gradient(50% 50% at 50% 50%,rgba(155,220,255,.5),rgba(86,194,255,.16) 45%,transparent 70%)}  /* horizon glow */
.og-wm{position:relative;z-index:1;font-family:'Space Grotesk';font-weight:600;font-size:74px;letter-spacing:.2em;color:var(--white);text-transform:uppercase}
.og-tag{position:relative;z-index:1;font-family:'Hanken Grotesk';font-size:30px;color:var(--muted);letter-spacing:.01em}


/* ===== A-timeline ===== */
/* HOW WE WORK (#process) — one orbit path, not step cards. The .ptl-rail is an absolutely positioned column that
   spans the whole track: it is the SVG box, the dot's coordinate space AND the space the point rows are measured in,
   so line, dot and points share one geometry at every width (app.js rebuilds the path `d` in px on measure so the
   curve swings out to each point's row; viewBox = px box, 1 unit = 1px). Phones: the SVG hides, a 1px CSS line in
   the same rail takes over and the dot descends it (translate3d only). Motion = opacity + transform, nothing else. */
.ptl .sec-head{margin-bottom:0}
.ptl-track{position:relative;margin-top:72px}
.ptl-rail{position:absolute;top:0;bottom:0;left:50%;width:160px;margin-left:-80px;pointer-events:none}
.ptl-path{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.ptl-path path{fill:none;stroke:rgba(155,220,255,.32);stroke-width:1;vector-effect:non-scaling-stroke}
.ptl-line{display:none;position:absolute;top:0;bottom:0;left:50%;width:1px;margin-left:-.5px;
  background:linear-gradient(180deg,transparent,rgba(155,220,255,.32) 5%,rgba(155,220,255,.32) 95%,transparent)}
/* the orbit dot: same look as .orbit::after (cyan-bright core + glow), 6px, plus a faint ring so it reads as the brand orbit */
.ptl-dot{position:absolute;left:0;top:0;width:6px;height:6px;border-radius:50%;background:var(--cyan-bright);
  box-shadow:0 0 10px var(--glow),0 0 24px rgba(86,194,255,.28);will-change:transform;transform:translate3d(77px,-3px,0)}
.ptl-dot::before{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid rgba(155,220,255,.28)}
/* points: 3-col grid (text | rail | text), one row each, alternating sides — typographic, no boxes */
.ptl-list{list-style:none;display:grid;grid-template-columns:1fr 160px 1fr;row-gap:clamp(64px,9vw,120px);padding:28px 0 64px}
.ptl-pt{position:relative;max-width:380px}
.ptl-pt:nth-child(odd){grid-column:1;justify-self:end;text-align:right;padding-right:34px}
.ptl-pt:nth-child(even){grid-column:3;justify-self:start;text-align:left;padding-left:34px}
.ptl-pt:nth-child(1){grid-row:1}.ptl-pt:nth-child(2){grid-row:2}.ptl-pt:nth-child(3){grid-row:3}.ptl-pt:nth-child(4){grid-row:4}
.ptl-num{display:block;font-family:'Space Grotesk','Hanken Grotesk',sans-serif;font-weight:500;font-size:4rem;line-height:.9;letter-spacing:-.03em;color:var(--muted-d);opacity:.55}
.ptl-pt h3{font-size:1.5rem;margin:12px 0 8px;font-weight:600;letter-spacing:-.02em}
.ptl-pt p{color:var(--muted);font-size:.98rem;line-height:1.55;max-width:34ch}
.ptl-pt:nth-child(odd) p{margin-left:auto}
/* lit = the dot has reached this point (app.js); opacity + translateY only, same curve as .reveal */
.js .ptl-pt{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.js .ptl-pt.lit{opacity:1;transform:none}
/* atmosphere divider at the section boundary — same horizon as #services / #contact */
.cinematic #process{position:relative}
.cinematic #process::before{content:"";position:absolute;left:0;right:0;top:0;height:64px;pointer-events:none;z-index:0;
  border-top:1px solid rgba(155,220,255,.14);border-radius:50% 50% 0 0/64px 64px 0 0;
  background:radial-gradient(60% 100% at 50% 0%,rgba(155,220,255,.11),rgba(86,194,255,.045) 42%,transparent 72%)}
/* phones / narrow: straight line down the left, points stacked full-width */
@media (max-width:759px){
  .ptl-track{margin-top:52px}
  .ptl-rail{left:0;width:28px;margin-left:0}
  .ptl-path{display:none}
  .ptl-line{display:block}
  .ptl-dot{transform:translate3d(11px,-3px,0)}
  .ptl-list{display:block;padding:8px 0 24px}
  .ptl-pt,.ptl-pt:nth-child(odd),.ptl-pt:nth-child(even){max-width:none;justify-self:auto;text-align:left;padding:0 0 0 52px;margin:0 0 44px}   /* justify-self reset: Chrome applies it to block boxes too (fit-content + shift) */
  .ptl-pt:last-child{margin-bottom:0}
  .ptl-pt:nth-child(odd) p{margin-left:0}
  .ptl-num{font-size:2.8rem}
  .ptl-pt h3{font-size:1.32rem;margin:8px 0 6px}
}
/* reduced motion: static path, every point visible, no travelling dot */
@media (prefers-reduced-motion: reduce){
  .js .ptl-pt{opacity:1!important;transform:none!important;transition:none}
  .ptl-dot{display:none}
}


/* ===== B-faq ===== */
/* Homepage FAQ (#faq): five native <details> rows separated by hairlines — no cards, no backgrounds.
   Row = index (Space Grotesk, tabular) + question + a "+" drawn from two 1px lines that rotate into "−" (transform only).
   OPEN: the answer wrapper animates grid-template-rows 0fr→1fr (keyframes — a transition can't run on an element that
   was unrendered a frame ago) and the copy fades/slides in. CLOSE: app.js adds .closing for 300ms before removing [open],
   so the same motion plays in reverse. Reduced motion: native details, nothing animates. */
.cinematic #faq::before{content:"";position:absolute;left:0;right:0;top:0;height:64px;pointer-events:none;z-index:0;   /* same atmosphere divider as #services / #contact */
  border-top:1px solid rgba(155,220,255,.14);border-radius:50% 50% 0 0/64px 64px 0 0;
  background:radial-gradient(60% 100% at 50% 0%,rgba(155,220,255,.11),rgba(86,194,255,.045) 42%,transparent 72%)}
#faq .wrap{position:relative;z-index:1}
.faq-list{max-width:860px;margin:60px auto 0;border-bottom:1px solid var(--line)}
.faq-item{border-top:1px solid var(--line)}
.faq-item summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:3.4rem 1fr 28px;column-gap:16px;align-items:baseline;
  padding:26px 0;font-family:'Space Grotesk','Hanken Grotesk',sans-serif;font-weight:500;font-size:1.22rem;line-height:1.3;letter-spacing:-.01em;color:var(--white);
  -webkit-tap-highlight-color:transparent}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::marker{content:""}
.faq-item summary:focus-visible{outline:2px solid var(--cyan-bright);outline-offset:4px;border-radius:6px}
.faq-n{font-size:.72rem;letter-spacing:.2em;color:var(--muted-d);font-variant-numeric:tabular-nums;opacity:.85;transition:opacity .3s}
.faq-q{display:block}
.faq-x{position:relative;width:14px;height:14px;justify-self:end;align-self:center;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.faq-x::before,.faq-x::after{content:"";position:absolute;left:0;top:50%;width:14px;height:1px;margin-top:-.5px;background:var(--cyan);
  transition:transform .35s cubic-bezier(.16,1,.3,1)}
.faq-x::after{transform:rotate(90deg)}
.faq-item[open] .faq-n{color:var(--cyan);opacity:1}
.faq-item[open] .faq-x::before{transform:rotate(180deg)}
.faq-item[open] .faq-x::after{transform:rotate(180deg)}     /* vertical line lies down onto the horizontal one = "−" */
.faq-item.closing .faq-x::before{transform:none}
.faq-item.closing .faq-x::after{transform:rotate(90deg)}
/* answer */
.faq-a{display:grid;grid-template-rows:1fr}
.faq-a>p{min-height:0;overflow:hidden;margin:0;padding:0 44px 0 calc(3.4rem + 16px);color:var(--muted);font-size:1.06rem;line-height:1.7;max-width:66ch}
.faq-a>p::after{content:"";display:block;height:28px}     /* bottom breathing room as CONTENT (vertical padding would leave a residual at 0fr) */
.faq-item[open] .faq-a{animation:faqOpen .32s cubic-bezier(.16,1,.3,1) both}
.faq-item[open] .faq-a>p{animation:faqIn .4s cubic-bezier(.16,1,.3,1) .06s both}
.faq-item.closing .faq-a{animation:faqClose .3s cubic-bezier(.4,0,.6,1) both}
.faq-item.closing .faq-a>p{animation:faqOut .22s ease both}
@keyframes faqOpen{from{grid-template-rows:0fr}to{grid-template-rows:1fr}}
@keyframes faqClose{from{grid-template-rows:1fr}to{grid-template-rows:0fr}}
@keyframes faqIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes faqOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-6px)}}
@media (hover:hover) and (pointer:fine){
  .faq-item summary:hover{color:var(--cyan-bright)}
  .faq-item summary:hover .faq-n{opacity:1}
  .faq-item summary:hover .faq-x{transform:scale(1.18)}
}
@media (prefers-reduced-motion: reduce){
  .faq-item[open] .faq-a,.faq-item[open] .faq-a>p,.faq-item.closing .faq-a,.faq-item.closing .faq-a>p{animation:none}
  .faq-x,.faq-x::before,.faq-x::after,.faq-n{transition:none}
}
@media (max-width:759px){
  .faq-list{margin-top:44px}
  .faq-item summary{grid-template-columns:2.1rem 1fr 22px;column-gap:12px;padding:20px 0;min-height:64px;font-size:1.06rem}   /* >=44px tap rows */
  .faq-a>p{padding:0 6px 0 calc(2.1rem + 12px);font-size:1rem}
  .faq-a>p::after{height:22px}
}


/* ===== C1-manifest ===== */
/* Service pages "What's included" → MISSION MANIFEST: a container-free numbered editorial list.
   Left-gutter numeral (01…06), hairline rule per item, orbit-dot marker sitting on the rule that
   lights when the item reveals (.reveal IO adds .in; the sibling stagger delay is inherited by the dot). */
.manifest-block{display:block}
.manifest-block>h2.prose{font-size:clamp(1.7rem,4vw,2.5rem);margin:0 0 6px;font-weight:600;letter-spacing:-.02em}
.manifest{list-style:none;margin:0;padding:0}
.manifest-item{position:relative;display:grid;grid-template-columns:5.5rem 1fr;column-gap:18px;align-items:start;padding:30px 0;border-top:1px solid var(--line)}
/* orbit-dot marker: same look as .orbit::after (cyan-bright core + glow), parked on the rule at the left */
.manifest-item::before{content:"";position:absolute;left:0;top:-3px;width:5px;height:5px;border-radius:50%;background:var(--cyan-bright);box-shadow:0 0 8px var(--glow);
  transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);transition-delay:inherit}
.js .manifest-item::before{opacity:0;transform:scale(.4)}
.js .manifest-item.in::before{opacity:1;transform:none}
.manifest-num{font-family:'Space Grotesk','Hanken Grotesk',sans-serif;font-weight:500;font-size:3.2rem;line-height:.9;letter-spacing:-.03em;color:var(--muted-d);opacity:.5;font-variant-numeric:tabular-nums;margin-top:-2px;user-select:none}
.manifest-body{min-width:0}
.manifest-item h3{font-family:'Space Grotesk','Hanken Grotesk',sans-serif;font-size:1.18rem;font-weight:600;color:var(--white);letter-spacing:-.01em;margin:0 0 7px}
.manifest-item p{color:var(--muted);font-size:1rem;line-height:1.6;margin:0;max-width:60ch}
@media (hover:hover) and (pointer:fine){
  .manifest-num{transition:opacity .35s ease}
  .manifest-item:hover .manifest-num{opacity:.85}
}
@media (max-width:759px){
  .manifest-item{grid-template-columns:4.4rem 1fr;column-gap:14px;padding:24px 0}
  .manifest-num{font-size:2.7rem}
}
@media (max-width:619px){
  .manifest-item{grid-template-columns:1fr;row-gap:8px;padding:22px 0}
  .manifest-num{font-size:2.3rem;margin-top:0}
  .manifest-item h3{font-size:1.1rem}
  .manifest-item p{font-size:.97rem}
}
@media (prefers-reduced-motion: reduce){
  .manifest-item::before{opacity:1!important;transform:none!important;transition:none}
  .manifest-num{transition:none}
}


/* ===== C2-ledger ===== */
/* SEO page "split ledger" (services/seo.html): a sticky large-type statement on the left, plain typographic
   entries on the right. Replaces the boxed .incl grid on that page only. No boxes, no icons, no backgrounds.
   Motion = the existing .reveal (opacity/transform) + a transform/opacity-only hover; sticky is layout, not motion.
   Nav is 80px tall -> the pin sits at 110px. Lives inside .svc-body (max 900px) so the columns are ~376 | ~460px. */
.ledger{display:grid;grid-template-columns:1fr;gap:34px;align-items:start}
.ledger-pin{position:static}                                     /* single column: the statement simply leads (not pinned) */
.ledger-pin .eyebrow{display:inline-block;margin-bottom:16px}
.ledger-pin h2{font-family:'Space Grotesk','Hanken Grotesk',sans-serif;font-weight:600;font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1.12;letter-spacing:-.02em;color:var(--white);margin:0;max-width:18ch}
.ledger-list{list-style:none;margin:0;padding:0}
.ledger-row{position:relative;padding:26px 0 28px;border-top:1px solid var(--line)}
.ledger-row:last-child{border-bottom:1px solid var(--line)}      /* closes the ledger before the next prose block */
.ledger-idx{position:absolute;top:30px;right:0;font-family:'Space Grotesk';font-weight:500;font-size:.7rem;letter-spacing:.3em;line-height:1;color:var(--muted-d)}
.ledger-row h3{position:relative;font-family:'Space Grotesk';font-size:1.14rem;font-weight:600;line-height:1.25;color:var(--white);margin:0 0 8px;padding-right:56px}   /* right padding keeps the index clear of long titles */
.ledger-row p{color:var(--muted);font-size:.98rem;line-height:1.65;margin:0;max-width:56ch}

/* desktop hover only: the title eases right and the orbit dot (same look as .orbit::after) lights up in the gutter */
@media (hover:hover) and (pointer:fine){
  .ledger-row h3{transition:transform .45s cubic-bezier(.16,1,.3,1)}
@media (min-width:980px){ .ledger-row h3::before{content:"";position:absolute;left:-22px;top:.5em;width:5px;height:5px;border-radius:50%;background:var(--cyan-bright);box-shadow:0 0 8px var(--glow);opacity:0;transform:translateX(-6px);transition:opacity .4s ease,transform .45s cubic-bezier(.16,1,.3,1)} }   /* hover dot lives in the column gap — only when the ledger is two-column */
  .ledger-row:hover h3{transform:translateX(8px)}
  .ledger-row:hover h3::before{opacity:1;transform:none}
}

/* two columns + pinned statement */
@media (min-width:980px){
  .ledger{grid-template-columns:.9fr 1.1fr;gap:64px}
  .ledger-pin{position:sticky;top:110px;align-self:start;padding-top:26px}   /* padding-top lines the eyebrow up with the first row's title */
  .ledger-pin h2{max-width:none}
}
@media (min-width:980px) and (max-height:619px){
  .ledger-pin{position:static}                                   /* short viewports: never let the statement cover the rows */
}

/* mobile */
@media (max-width:759px){
  .ledger{gap:26px}
  .ledger-pin .eyebrow{margin-bottom:12px}
  .ledger-row{padding:20px 0 22px}
  .ledger-idx{top:23px}
  .ledger-row h3{font-size:1.08rem;padding-right:44px}
  .ledger-row p{font-size:.95rem}
}

/* reduced motion: rows and statement are static (the global .reveal rule already forces opacity:1); no hover travel */
@media (prefers-reduced-motion: reduce){
  .ledger-row,.ledger-pin .reveal{opacity:1;transform:none}
  .ledger-row h3,.ledger-row h3::before{transition:none}
  .ledger-row:hover h3{transform:none}
  .ledger-row h3::before{transform:none}
}


/* ===== C3-telemetry =====
   Hosting page "What's included" -> mission-control readout. One thin vertical rule (ol::before) with an
   orbit-dot per row (li::before = dim dot, li::after = lit dot + glow, cross-faded by OPACITY only), a
   tracking-spaced system label that "types on" via a stepped transform slide inside an overflow:hidden label (420ms),
   then the untouched h3 + description fading up. The <li> itself never animates: the base .reveal
   opacity/translate is cancelled on .tele-row and every motion lives on its children, delayed per row by
   --d (nth-child) so the six rows cascade when they enter together. Transform + opacity only.
   No canvas, no JS: the existing .reveal IntersectionObserver adds .in and everything keys off that. */
.telemetry-block{max-width:900px}
.tele-head{font-size:clamp(1.7rem,4vw,2.5rem);margin:0 0 30px;font-weight:600;letter-spacing:-.02em}
.telemetry{list-style:none;margin:0;padding:0;position:relative}
.telemetry::before{content:"";position:absolute;left:0;top:.35rem;bottom:.35rem;width:1px;background:var(--line);transform-origin:top;pointer-events:none}
.tele-row{--d:0ms;position:relative;margin:0;padding:0 0 0 34px;display:grid;grid-template-columns:150px minmax(0,1fr);column-gap:28px;align-items:baseline;opacity:1;transform:none}
.js .tele-row.reveal,.js .tele-row.reveal.in{opacity:1;transform:none}                         /* whole-row reveal cancelled: motion lives on the children below */
.tele-row + .tele-row{margin-top:32px}
.tele-row:nth-child(2){--d:70ms}.tele-row:nth-child(3){--d:140ms}.tele-row:nth-child(4){--d:210ms}
.tele-row:nth-child(5){--d:280ms}.tele-row:nth-child(6){--d:350ms}
/* orbit-dot on the rule: ::before = dim (muted-d at .5), ::after = lit (cyan-bright + glow). Same look as .orbit::after. */
.tele-row::before,.tele-row::after{content:"";position:absolute;left:-2.5px;top:calc(.74rem - 3px);width:6px;height:6px;border-radius:50%;pointer-events:none}
.tele-row::before{background:var(--muted-d);opacity:.5}
.tele-row::after{background:var(--cyan-bright);box-shadow:0 0 8px var(--glow),0 0 18px rgba(86,194,255,.28);opacity:0;transform:scale(.55);transition:opacity .5s cubic-bezier(.16,1,.3,1) var(--d),transform .5s cubic-bezier(.16,1,.3,1) var(--d)}
.tele-row.in::after{opacity:1;transform:none}
/* system label: .eyebrow typography at .7rem; stepped transform type-on in N steps (N = letter count, set per row below) */
.tele-label{--n:8;display:block;font-family:'Space Grotesk';font-weight:500;font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;color:var(--cyan);opacity:.85;line-height:1.5;white-space:nowrap;transition:opacity .3s}
.js .tele-label{overflow:hidden;transition:opacity .3s}
.js .tele-label-in{display:inline-block;transform:translateX(-102%);transition:transform .42s steps(var(--n),end) var(--d)}   /* type-on = stepped TRANSFORM slide inside the clipped label (no clip-path animation) */
.js .tele-row.in .tele-label-in{transform:none}
.tele-row:nth-child(1) .tele-label{--n:5}.tele-row:nth-child(2) .tele-label{--n:10}.tele-row:nth-child(3) .tele-label{--n:7}
.tele-row:nth-child(4) .tele-label{--n:8}.tele-row:nth-child(5) .tele-label{--n:5}.tele-row:nth-child(6) .tele-label{--n:11}
/* title + description (copy untouched) */
.tele-body{min-width:0}
.tele-body h3{font-family:'Space Grotesk';font-size:1.12rem;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--white);margin:0 0 7px}
.tele-body p{color:var(--muted);font-size:.98rem;line-height:1.62;margin:0;max-width:56ch}
.js .tele-body h3{opacity:0;transform:translateY(7px);transition:opacity .7s cubic-bezier(.16,1,.3,1) calc(var(--d) + 80ms),transform .7s cubic-bezier(.16,1,.3,1) calc(var(--d) + 80ms)}
.js .tele-body p{opacity:0;transform:translateY(9px);transition:opacity .8s cubic-bezier(.16,1,.3,1) calc(var(--d) + 180ms),transform .8s cubic-bezier(.16,1,.3,1) calc(var(--d) + 180ms)}
.js .tele-row.in .tele-body h3,.js .tele-row.in .tele-body p{opacity:1;transform:none}
/* the rule draws down once the first row lights (scaleY, :has-gated; engines without :has keep it static) */
@supports selector(:has(a)){
  .js .telemetry::before{transform:scaleY(0);transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
  .js .telemetry:has(.tele-row.in)::before{transform:scaleY(1)}
}
@media (hover:hover) and (pointer:fine){
  .tele-row:hover .tele-label{opacity:1}
}
@media (max-width:759px){
  .telemetry::before{top:.3rem;bottom:.3rem}
  .tele-row{display:block;padding-left:22px}
  .tele-row + .tele-row{margin-top:26px}
  .tele-row::before,.tele-row::after{top:calc(.53rem - 3px)}   /* first line is now the label (.7rem x 1.5) */
  .tele-label{margin-bottom:6px}
  .tele-body h3{font-size:1.06rem}
}
@media (prefers-reduced-motion: reduce){
  .telemetry::before{transform:none!important;transition:none}
  .tele-row::after{opacity:1!important;transform:none!important;transition:none}   /* every dot lit, static */
  .js .tele-label-in{transform:none!important;transition:none}
  .js .tele-body h3,.js .tele-body p{opacity:1!important;transform:none!important;transition:none}
}


/* ===== D1-endings ===== */
/* SERVICE PAGE ENDINGS — typographic close (no card, no box): one honest outcome line + a single CTA row,
   then "More from the studio" as hairline rows. Animations: transform + opacity only. */
.ending{margin-top:10px;padding-top:64px;border-top:1px solid var(--line);text-align:left}
.ending h2{font-family:'Space Grotesk','Hanken Grotesk',sans-serif;font-weight:600;font-size:clamp(1.7rem,3.2vw,2.6rem);line-height:1.12;letter-spacing:-.025em;max-width:22ch;margin:0;color:var(--white);text-wrap:balance}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px 34px;margin-top:34px}
.cta-row .wa-btn{margin:0}
.cta-row .wa-btn:hover svg{transform:none}                       /* the generic .btn:hover svg nudge is for arrows, not the WhatsApp glyph */
/* plain text link with the site's left-to-right underline draw (resting hairline stays so it always reads as a link) */
.cta-link{position:relative;display:inline-block;font-family:'Space Grotesk';font-weight:500;font-size:.96rem;letter-spacing:.01em;color:var(--text);padding:12px 0}
.cta-link::before,.cta-link::after{content:"";position:absolute;left:0;right:0;bottom:9px;height:1px;pointer-events:none}
.cta-link::before{background:var(--line-2)}
.cta-link::after{background:var(--cyan);opacity:.9;transform:scaleX(0);transform-origin:0 50%;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.cta-link:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;color:var(--cyan-bright)}
.cta-link:focus-visible::after{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){
  .cta-link:hover{color:var(--cyan-bright)}
  .cta-link:hover::after{transform:scaleX(1)}
}
/* MORE FROM THE STUDIO — plain rows, hairline rules, no boxes */
.more-h{font-size:clamp(1.35rem,2.4vw,1.8rem);letter-spacing:-.02em;margin:104px 0 12px;text-align:left}
.more{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.more li{border-bottom:1px solid var(--line)}
.more a{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:44px;padding:20px 0;color:var(--white)}
.more .more-t{font-family:'Space Grotesk';font-weight:500;font-size:1.2rem;letter-spacing:-.01em;line-height:1.25;transition:opacity .3s ease}
.more .more-a{flex:0 0 auto;width:18px;height:18px;color:var(--cyan);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.more a:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
.more a:focus-visible .more-t{color:var(--cyan-bright)}
.more a:focus-visible .more-a{transform:translateX(6px)}
@media (hover:hover) and (pointer:fine){
  .more a:hover .more-t{color:var(--cyan-bright)}
  .more a:hover .more-a{transform:translateX(6px)}
  .more:hover li:not(:hover) .more-t{opacity:.45}               /* siblings recede, like the homepage services list */
}
@media (max-width:759px){
  .ending{padding-top:48px}
  .ending h2{max-width:none}
  .cta-row{gap:8px 26px;margin-top:28px}
  .cta-row .wa-btn{padding:14px 22px}
  .cta-link{padding:13px 0}                                       /* ~47px tap row */
  .more-h{margin:80px 0 8px}
  .more a{padding:16px 0;min-height:48px}
  .more .more-t{font-size:1.1rem}
}
@media (prefers-reduced-motion: reduce){
  .cta-link,.cta-link::after,.more .more-t,.more .more-a{transition:none}
  .more a:hover .more-a,.more a:focus-visible .more-a{transform:none}
  .more:hover li:not(:hover) .more-t{opacity:1}
  .cta-link::after{transform:scaleX(1);opacity:.55}               /* static: cyan underline always drawn */
}


/* ===== D2-copy ===== */
/* Trust line (replaces .trust-row on both homepages): one quiet inline sentence, four items
   separated by static orbit-dot markers. No pills, no checks, no boxes. Nothing here animates,
   so the reduced-motion path is the default path. */
.trust-line{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;row-gap:8px;font-family:'Hanken Grotesk',sans-serif;font-size:.9rem;line-height:1.5;color:var(--muted)}
.trust-line li{display:flex;align-items:center;margin:0}
.trust-line li:not(:last-child)::after{content:"";flex:0 0 auto;width:4px;height:4px;margin:0 14px;border-radius:50%;background:var(--cyan-bright);opacity:.7;box-shadow:0 0 4px var(--glow)}

/* Contact rhythm: the eyebrow + accent orbit are gone, the H2 leads. Section top padding grows
   from the 130px .block default to 150px on desktop so the heading keeps its breathing room
   against the sections above it; phones keep the 80px .block rhythm. */
.contact-info h2{margin-top:0}
@media (min-width:760px){
  .contact.block{padding-top:150px}
}

@media (max-width:759px){
  .trust-line{margin-top:22px;row-gap:6px}
  .trust-line li:not(:last-child)::after{margin:0 12px}
}
@media (prefers-reduced-motion: reduce){
  .trust-line li:not(:last-child)::after{box-shadow:0 0 4px var(--glow)}   /* static glow, no motion anywhere in this block */
}


/* ---- NO-JS SAFETY (v38): the launch overlay and header reveal are JS-driven; without scripts the site must still be usable ---- */
html:not(.js) .launch{display:none;background-image:none}
html:not(.js) .cinematic header{opacity:1;transform:none;pointer-events:auto}
html:not(.js) #heroSticky{--hrev:1}
html:not(.js) .hero-intro{pointer-events:auto}


/* ================= VERIFICATION FIXES (v40) ================= */
/* hover states only where a real hover exists — touch devices no longer keep a 'lifted' button after a tap */
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{box-shadow:0 16px 44px rgba(86,194,255,.5)}
  .btn-ghost:hover{border-color:var(--cyan);color:var(--cyan-bright);background:rgba(86,194,255,.07)}
  .mobile-menu a:hover{background:rgba(86,194,255,.07);color:var(--cyan-bright)}
  .svc-item:hover{background:radial-gradient(80% 140% at 50% 50%,rgba(86,194,255,.07),transparent 70%);border-color:rgba(86,194,255,.3)}
  .svc-item:hover .svc-title{color:var(--white);transform:translateY(-2px)}
  .svc-item:hover .svc-title .arr{opacity:1;transform:translateX(4px);transition-delay:.1s,.1s}
  .svc-item:hover .svc-eyebrow{color:var(--cyan-bright);transition-delay:.15s}
  .wa-btn:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(37,211,102,.4)}
  .btn:hover svg{transform:translateX(3px)}
}
/* poster backdrop only where it can actually be seen (the descent canvas is opaque on fresh desktop visits) */
html.skip-intro .hero-sticky,html:not(.js) .hero-sticky{background-image:url(../images/poster.jpg);background-position:center;background-size:cover;background-repeat:no-repeat}
/* footer must clear the fixed mobile-bar at EVERY width the bar is shown (it is shown up to 979px) */
@media (max-width:979px){ footer{padding-bottom:calc(112px + env(safe-area-inset-bottom,0px))} }
@media (max-width:619px){ .foot-cols{grid-template-columns:1fr;gap:26px} }   /* long Greek footer links: one column on phones */
/* legal pages: brand + EL/EN only on narrow phones (the CTA overflowed the 360px header) */
@media (max-width:619px){ .legal-page .nav-cta .btn-primary{display:none} }
/* short phones: compact hero type so the bottom-anchored copy never climbs into the header */
@media (max-width:759px) and (max-height:700px){
  .hero-intro .eyebrow{font-size:.62rem;margin-bottom:10px}
  .hero-intro h1{font-size:2rem;margin-bottom:10px}
  .hero-intro p{font-size:.9rem;line-height:1.45;margin-bottom:14px}
  .hero-cta{gap:8px}
  .hero-cta .btn{padding:12px 20px}
}
/* tap targets on touch layouts */
@media (max-width:759px){
  .lang-switch--foot a{display:inline-block;padding:13px 6px}
  .contact-details a{display:inline-block;padding:9px 0;margin:-9px 0}
  .form-note a{display:inline-block;padding:11px 0;margin:-11px 0}
  .crumb a{display:inline-block;padding:11px 0;margin:-11px 0}
}
@media (pointer:coarse){ .nav-cta .lang-switch a{padding:12px 6px} }
/* orbit motif dots: run only where they can be seen (header, page heroes, revealed sections) */
.orbit::after{animation-play-state:paused}
header .orbit::after,.page-hero .orbit::after,.reveal.in .orbit::after,.legal-page .orbit::after,.page-404 .orbit::after,html:not(.js) .orbit::after{animation-play-state:running}
/* scroll cue: fully released (not just opacity 0) once the headline is assembled or on return visits */
html.skip-intro .scroll-cue{visibility:hidden}
@supports selector(:has(a)){ .hero-sticky:has(.hero-intro.live) .scroll-cue{visibility:hidden} }
/* reduced motion: the universal selector never matches pseudo-elements */
@media (prefers-reduced-motion: reduce){
  .svc-ico::before,.launch-btn::before,.eyebg-glow::before,.sp-rocket::after,.orbit::after,.btn .spin::after{animation:none!important}
}


/* B5-homepage — services list grew from 5 to 7 rows (AI Search Visibility 2nd, Email Marketing 7th): extend the icon stagger
   so the 6th/7th icons draw after the 5th (.48s), same .12s step. Icons ico-ai / ico-email reuse the generic s1..s3 + .dot rules. */
.svc-center .svc-item:nth-child(6){--sd:.60s}.svc-center .svc-item:nth-child(7){--sd:.72s}