/* ============================================================
   Halo Concepts: Apple Calm, Warm White (A1, picked 2026-10-04)
   White page, cool light-grey surfaces (#F5F5F7, picked over the warm
   stone #F2F0EB on 10-04: stone read beige and muddy across big areas),
   charcoal ink, one marble-black surface, brass only on links and arrows. No gradients on UI, no resting
   shadows, three radii, three weights.
   1920-first: 1760px shell with 80px gutters at >= 1600px.
   ============================================================ */

:root{
  --bg:#FFFFFF;
  --stone:#F5F5F7;         /* surfaces: tiles, panels, form, process band, footer */
  --stone-h:#EDEDF0;
  --ink:#2B2825;
  --soft:#6F685F;          /* secondary text: AA on white and both surface greys */
  --quiet:#86868B;         /* h1 second line only: cool grey to match the surfaces, 3.6:1 on white (large text) */
  --black:#121110;
  --brass:#A9865A;         /* fills and marks, never small text */
  --brass-ink:#806139;     /* brass for text and icons on light surfaces */
  --brass-light:#C9A86E;   /* brass for marks on black */
  --hair:rgba(43,40,37,.12);
  --ease:cubic-bezier(.2,.7,.2,1);
  --font:'Inter Tight',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --gutter:80px;
  --shell:1760px;
  --nav:72px;
  --r-s:14px;              /* images, inputs */
  --r-m:26px;              /* tiles, panels */
  --r-l:999px;             /* pills, tabs */
  interpolate-size:allow-keywords;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--nav);scrollbar-color:#D2D2D7 transparent;scrollbar-width:thin}
body{font-family:var(--font);background:var(--bg);color:var(--ink);font-size:17px;line-height:1.55;letter-spacing:.003em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;font-variant-numeric:tabular-nums}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
svg{display:block;flex:none}
::selection{background:rgba(169,134,90,.24);color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:8px}
input,select,textarea{caret-color:var(--brass-ink);accent-color:var(--ink)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#D2D2D7;border-radius:10px;border:2px solid #fff}
::-webkit-scrollbar-track{background:transparent}

.shell{width:100%;max-width:calc(var(--shell) + var(--gutter) * 2);margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:fixed;left:16px;top:-60px;z-index:200;background:var(--black);color:#fff;padding:10px 16px;border-radius:var(--r-l);font-size:15px;transition:top .2s}
.skip:focus{top:12px}

/* ---------- type: 8 sizes, 3 weights ---------- */
.h1{font-size:clamp(40px,min(4.8vw,8.6vh),92px);font-weight:600;letter-spacing:-.038em;line-height:1.03}
.h1 .soft{color:var(--quiet)}
.h2{font-size:clamp(34px,3.35vw,64px);font-weight:600;letter-spacing:-.034em;line-height:1.06}
.h3{font-size:clamp(24px,1.7vw,32px);font-weight:600;letter-spacing:-.025em;line-height:1.15}
.lede{font-size:clamp(17px,1.1vw,21px);line-height:1.5;color:var(--soft)}
.sub{font-size:clamp(17px,1.1vw,21px);line-height:1.5;color:var(--soft)}
.small{font-size:15px;line-height:1.5;color:var(--soft)}

/* ---------- links and buttons ---------- */
.link{display:inline-flex;align-items:center;gap:6px;font-weight:500;color:var(--brass-ink);background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:2px;transition:background-size .5s var(--ease)}
.link svg{width:16px;height:16px;transition:transform .4s var(--ease)}
.link:hover{background-size:100% 1px}
.link:hover svg{transform:translateX(4px)}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 20px;border-radius:var(--r-l);background:var(--black);color:#fff;font-size:15px;font-weight:500;white-space:nowrap;transition:background .3s,transform .2s var(--ease)}
.pill:hover{background:#000}
.pill:active,.btn:active{transform:scale(.98)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 30px;border-radius:var(--r-l);background:var(--black);color:#fff;font-size:17px;font-weight:500;white-space:nowrap;transition:background .3s,transform .2s var(--ease),opacity .3s}
.btn:hover{background:#000}
.btn[disabled]{opacity:.6;cursor:progress}
.inline-a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(43,40,37,.3);text-underline-offset:4px;text-decoration-thickness:1px;transition:text-decoration-color .3s}
.inline-a:hover{text-decoration-color:var(--ink)}

/* ---------- nav: solid white (a see-through blurred bar turns off ClearType for its text), hides on scroll down, returns on scroll up ---------- */
.nav{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid transparent;transition:transform .45s var(--ease),border-color .3s}
.nav.scrolled{border-bottom-color:var(--hair)}
.nav.away{transform:translateY(-100%)}
.nav-in{height:var(--nav);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:17px;font-weight:600;letter-spacing:-.01em;justify-self:start}
.brand img{width:26px;height:26px}
.brand .wm{font-family:'Plus Jakarta Sans',var(--font);font-weight:600;font-size:14px;letter-spacing:.2em;text-transform:uppercase;line-height:1;color:var(--ink)} /* the logo's own font: live text stays hinted and crisp at this size, outlines did not */
.nav-links{display:flex;gap:40px;font-size:15px}
.nav-links a{color:var(--ink);opacity:.78;transition:opacity .25s}
.nav-links a:hover{opacity:1}
.nav .pill{justify-self:end}
.nav-toggle{display:none;width:44px;height:44px;border-radius:12px;align-items:center;justify-content:center;justify-self:end}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{display:block;width:20px;height:1.5px;background:var(--ink);transition:transform .35s var(--ease),opacity .2s}
.nav-toggle span{position:relative}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0}
.nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

/* ---------- hero: one focal mass ---------- */
.hero{min-height:calc(100svh - var(--nav));display:flex;flex-direction:column;padding-bottom:clamp(20px,4.5vh,56px)}
.hero-in{text-align:center;padding-top:clamp(32px,9vh,118px)}
.hero .h1{max-width:1560px;margin-inline:auto}
.hero .lede{max-width:720px;margin:clamp(20px,2.8vh,30px) auto 0}
.hero .link{margin-top:clamp(18px,2.4vh,26px);font-size:17px}
.orb-wrap{position:relative;flex:1;min-height:120px;display:grid;place-items:center;padding-block:clamp(12px,2.6vh,32px)}
.orb-box{position:relative;width:clamp(110px,min(12.5vw,19vh),250px);aspect-ratio:1}
.orb-stage{position:absolute;inset:-12%}
.orb-img,.orb-spin{position:absolute;left:7.5%;top:7.5%;width:85%;height:85%;border-radius:50%} /* the studio photograph's orb, the same one the opener lands; orb-spin.js turns it */
.orb-spin{pointer-events:none}
.orb-stage{will-change:transform}
.orb-shadow{position:absolute;left:10%;right:10%;bottom:-14%;height:18%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(43,40,37,.22) 0%,rgba(43,40,37,.08) 40%,rgba(43,40,37,0) 70%)}
.ask-q{font-size:clamp(18px,1.1vw,21px);font-weight:600;letter-spacing:-.012em;margin-bottom:16px}
.doors{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.door{position:relative;display:block;background:var(--stone);border-radius:var(--r-m);padding:28px 30px 30px;min-height:clamp(132px,15vh,156px);transition:background .35s var(--ease)}
.door:hover{background:var(--stone-h)}
.door .t{display:block;font-size:clamp(20px,1.25vw,24px);font-weight:600;letter-spacing:-.02em;line-height:1.2;padding-right:44px}
.door .d{display:block;margin-top:8px;font-size:15px;line-height:1.45;color:var(--soft);max-width:320px;padding-right:36px}
.go{position:absolute;right:22px;bottom:22px;width:36px;height:36px;border-radius:50%;background:#fff;color:var(--brass-ink);display:grid;place-items:center;transition:background .35s var(--ease),color .35s,transform .35s var(--ease)}
.go svg{width:16px;height:16px}
.door:hover .go{background:var(--black);color:#fff;transform:translateX(3px)}
.door-dark{background:var(--black);color:#fff}
.door-dark:hover{background:#000}
.door-dark .d{color:rgba(255,255,255,.68)}
.door-dark .go{background:rgba(255,255,255,.12);color:var(--brass-light)}
.door-dark:hover .go{background:#fff;color:var(--black)}

/* ---------- sections ---------- */
.sec{padding-block:clamp(110px,10.5vw,200px)}
.sec-tight{padding-block:clamp(96px,7vw,140px)}
.head{text-align:center;max-width:1100px;margin:0 auto clamp(48px,4vw,72px)}
.head .sub{max-width:640px;margin:18px auto 0}
.band{background:var(--stone)}

/* ---------- services: segmented tabs + one panel ---------- */
.seg{position:relative;display:flex;width:max-content;max-width:100%;margin:0 auto 28px;padding:5px;border-radius:var(--r-l);background:var(--stone)}
.seg button{position:relative;z-index:1;height:46px;padding:0 24px;border-radius:var(--r-l);font-size:15px;font-weight:500;color:var(--soft);white-space:nowrap;transition:color .3s}
.seg button[aria-selected="true"]{color:var(--ink)}
.seg button:hover{color:var(--ink)}
.seg-ink{position:absolute;z-index:0;top:0;left:0;height:46px;border-radius:var(--r-l);background:#fff;box-shadow:0 1px 2px rgba(43,40,37,.08);transition:transform .5s var(--ease),width .5s var(--ease),height .5s var(--ease)}
.panel{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(40px,5vw,96px);align-items:start;background:var(--stone);border-radius:var(--r-m);padding:clamp(36px,3.6vw,68px)}
.js .panel:not(.on){display:none}
.panel .lead{font-size:clamp(20px,1.25vw,24px);line-height:1.45;letter-spacing:-.01em;font-weight:500;color:var(--ink);max-width:36em}
.panel .actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:36px}
.panel .eg{font-size:15px;color:var(--soft)}
.get{border-top:1px solid var(--hair)}
.get li{display:flex;gap:16px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--hair);font-size:17px;line-height:1.45}
.get li svg{width:16px;height:16px;color:var(--brass-ink);transform:translateY(3px)}
.panel.in{animation:panelIn .5s var(--ease)}
@keyframes panelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- work: one feature + a pair, real screens in flat frames ---------- */
.browser{border-radius:var(--r-s);overflow:hidden;background:#fff;border:1px solid var(--hair)}
.browser .bar{height:34px;display:flex;align-items:center;justify-content:center;background:#fff;border-bottom:1px solid var(--hair)}
.browser .url{height:20px;padding:0 14px;border-radius:var(--r-l);background:var(--stone);font-size:13px;line-height:1;color:var(--soft);display:flex;align-items:center}
.browser img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.phone{border-radius:34px;background:var(--black);padding:7px}
.phone img{border-radius:28px;width:100%;aspect-ratio:390/844;object-fit:cover;object-position:top}
.feat{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:72px;align-items:center;background:var(--stone);border-radius:var(--r-m);padding:64px 0 64px 64px;overflow:hidden;transition:background .35s var(--ease)}
.feat:hover,.work-tile:hover{background:var(--stone-h)}
.feat-copy p{margin-top:14px;color:var(--soft);max-width:28em}
.feat-copy .meta{display:block;margin-top:18px;font-size:15px;color:var(--soft)}
.feat-copy .link{margin-top:22px}
.stage{position:relative}
.stage .browser{border-radius:var(--r-s) 0 0 var(--r-s);border-right:0}
.stage .phone{position:absolute;left:-60px;bottom:-40px;width:clamp(120px,10vw,190px)}
.stage img,.work-tile .browser{transition:transform .8s var(--ease)}
.feat:hover .stage .browser img{transform:scale(1.015)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.works-line{text-align:center;margin-top:48px;font-size:clamp(17px,1.1vw,21px);color:var(--soft)}
.works-line b{color:var(--ink);font-weight:500}
.work-tile{display:block;background:var(--stone);border-radius:var(--r-m);padding:clamp(28px,2.5vw,48px) clamp(28px,2.5vw,48px) 0;overflow:hidden;transition:background .35s var(--ease)}
.work-tile .top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:36px}
.work-tile .top p{color:var(--soft);margin-top:8px}
.work-tile .link{flex:none}
.work-tile .browser{border-radius:var(--r-s) var(--r-s) 0 0;border-bottom:0}
.work-tile:hover .browser{transform:translateY(-6px)}

/* ---------- process ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(32px,4vw,72px);counter-reset:s}
.step .num{display:block;font-size:15px;font-weight:500;color:var(--brass-ink);margin-bottom:18px}
.step .h3{margin-bottom:12px}
.step p{color:var(--soft);max-width:30em}
/* ---------- one studio: the usual way vs halo ---------- */
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:1500px;margin:0 auto}
.cmp-col{background:var(--stone);border-radius:var(--r-m);padding:clamp(32px,3vw,60px)}
.cmp-col .cap{margin-top:8px;color:var(--soft)}
.cmp-col ul{margin-top:36px;border-top:1px solid var(--hair)}
.cmp-col li{display:flex;gap:16px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--hair);font-size:clamp(17px,1.1vw,21px);line-height:1.4;color:var(--soft)}
.cmp-col li svg{width:16px;height:16px;color:#A8A8AD;transform:translateY(2px)}
.cmp-halo{background:var(--black);color:#fff}
.cmp-halo .cap{color:rgba(255,255,255,.68)}
.cmp-halo ul{border-top-color:rgba(255,255,255,.14)}
.cmp-halo li{color:#fff;border-bottom-color:rgba(255,255,255,.14)}
.cmp-halo li svg{color:var(--brass-light)}

/* ---------- process as a stacked deck (default since 10-04; desktop only, .stack-on is added by JS only when GSAP runs) ---------- */
@media (min-width:1201px){
  .stack-on #process{padding-block:0 clamp(110px,10.5vw,200px)}
  .stack-on .proc{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:clamp(56px,5vw,96px);align-items:center;min-height:100svh;padding-block:calc(var(--nav) + 4vh) 6vh}
  .stack-on .proc .head{text-align:left;margin:0}
  .stack-on .proc .head .sub{margin:18px 0 0}
  .stack-on .proc-nav{position:relative;display:flex;flex-direction:column;margin-top:44px;border-top:1px solid var(--hair)}
  .stack-on .proc-nav::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:var(--prog,0%);background:var(--ink)} /* fills as the steps scroll */
  .stack-on .proc-nav button{display:flex;justify-content:space-between;align-items:center;text-align:left;padding:16px 0;border-bottom:1px solid var(--hair);font-size:17px;font-weight:500;color:var(--soft);transition:color .3s}
  .stack-on .proc-nav button svg{width:16px;height:16px;color:var(--brass-ink);opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .4s var(--ease)}
  .stack-on .proc-nav button:hover,.stack-on .proc-nav button[aria-current="step"]{color:var(--ink)}
  .stack-on .proc-nav button[aria-current="step"] svg{opacity:1;transform:none}
  .stack-on .steps{position:relative;display:block;height:clamp(340px,calc(100svh - var(--nav) - 40vh),440px)}
  .stack-on .step{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;background:#fff;border-radius:var(--r-m);padding:clamp(40px,3.8vw,72px);box-shadow:0 1px 0 rgba(43,40,37,.05),0 14px 28px rgba(43,40,37,.05);transform-origin:50% 0;will-change:transform}
  .stack-on .step .num{margin-bottom:auto}
  .stack-on .step .h3{font-size:clamp(34px,3.35vw,64px);letter-spacing:-.034em;line-height:1.06;margin-bottom:18px}
  .stack-on .step p{font-size:clamp(17px,1.1vw,21px);max-width:34em}
}
.proc-nav{display:none}
.step-cta{margin-top:22px;align-self:flex-start}

/* ---------- faq (lives inside the contact section) ---------- */
.faq details{border-bottom:1px solid var(--hair)}
.faq details:first-child{border-top:1px solid var(--hair)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:32px;padding:18px 0;font-size:17px;font-weight:500;letter-spacing:-.01em;transition:color .25s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:#000}
.pm{position:relative;flex:none;width:28px;height:28px;border-radius:50%;background:var(--stone);transition:background .3s}
.pm::before,.pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:var(--ink);transform:translate(-50%,-50%);transition:transform .4s var(--ease)}
.pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] .pm::after{transform:translate(-50%,-50%) rotate(0deg)}
.faq details::details-content{block-size:0;overflow:hidden;transition:block-size .45s var(--ease),content-visibility .45s allow-discrete}
.faq details[open]::details-content{block-size:auto}
.faq .ans{padding:0 0 22px;max-width:640px;font-size:15px;color:var(--soft)}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(380px,1fr) minmax(0,900px);grid-template-rows:auto 1fr;gap:0 96px;align-items:start}
.c-copy{grid-column:1;grid-row:1}
.c-form{grid-column:2;grid-row:1 / span 2}
.c-faq{grid-column:1;grid-row:2;margin-top:48px}
.c-faq .mini{font-size:15px;font-weight:600;margin-bottom:14px}
.c-copy .sub{margin-top:22px;max-width:30em}
.person{display:flex;align-items:center;gap:16px;margin-top:40px}
.person img{width:56px;height:56px;border-radius:50%;background:var(--stone)}
.person b{display:block;font-weight:600}
.person span{display:block;font-size:15px;color:var(--soft)}
.c-copy .alt{margin-top:28px}
.form{background:var(--stone);border-radius:var(--r-m);padding:clamp(28px,3vw,52px)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px 20px}
.field{display:flex;flex-direction:column;gap:8px}
.field.wide{grid-column:1/-1}
.lab{font-size:15px;font-weight:500}
.lab i{font-style:normal;font-weight:400;color:var(--soft)}
.input{height:54px;border:1px solid transparent;border-radius:var(--r-s);padding:0 16px;font:inherit;font-size:17px;color:var(--ink);background:#fff;width:100%;transition:border-color .25s,box-shadow .25s}
.input::placeholder{color:#8A837A}
.input:hover{border-color:rgba(43,40,37,.18)}
.input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(43,40,37,.08)}
.input:user-invalid{border-color:#9A3B2E}
textarea.input{height:auto;min-height:132px;padding:14px 16px;resize:vertical;line-height:1.5}
select.input{appearance:none;background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%232B2825' stroke-width='1.6'/></svg>") no-repeat right 18px center;padding-right:46px}
.more-t{grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:15px;font-weight:500;color:var(--brass-ink);padding:0}
.more-t svg{width:14px;height:14px;transition:transform .35s var(--ease)}
.more-t[aria-expanded="true"] svg{transform:rotate(45deg)}
.more-f{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:22px 20px}
.more-f[hidden]{display:none}
.gotcha{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-foot{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:30px}
.err{font-size:15px;color:#9A3B2E}
.done{background:var(--stone);border-radius:var(--r-m);padding:clamp(32px,3vw,52px)}
.done .h3{margin-bottom:10px}
.done p{color:var(--soft)}

/* ---------- footer ---------- */
.footer{background:var(--stone);padding-block:80px 40px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:48px;margin-bottom:64px}
.foot-brand p{margin-top:16px;max-width:36ch;font-size:15px;color:var(--soft)}
.foot-brand .inline-a{display:inline-block;margin-top:16px;font-size:15px}
.foot-grid h2{font-size:15px;font-weight:600;margin-bottom:14px}
.foot-grid li a{display:inline-block;padding:5px 0;font-size:15px;color:var(--soft);transition:color .25s}
.foot-grid li a:hover{color:var(--ink)}
.foot-bottom{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:13px;color:var(--soft);border-top:1px solid var(--hair);padding-top:26px}
.foot-bottom a{transition:color .25s}.foot-bottom a:hover{color:var(--ink)}

/* ---------- mobile sticky CTA ---------- */
.sticky-cta{display:none}

/* ---------- AI and automation: the hero's two-tone headline, the end of it keeps changing ---------- */
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.eyebrow{display:block;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--brass-ink);margin-bottom:18px}
.ai{text-align:center}
.ai-l2{color:var(--quiet)}
/* the changing words roll up like a departure board; the clip leaves room below for descenders */
.ai-roll{display:inline-block;position:relative;vertical-align:top;white-space:nowrap;text-align:left;clip-path:inset(-.08em -.3em -.24em -.3em)} /* top: just the font box (this line-height is tighter than the font); the old words vanish into the line above, never over it */
.ai-w{display:inline-block}
.ai-w.in{position:absolute;left:0;top:0}
.ai-sub{margin:28px auto 0;max-width:34em;text-wrap:balance}
.ai-jobs{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 32px;max-width:1180px;margin:56px auto 0;font-size:17px;line-height:2;color:var(--soft)}
.ai-jobs li{white-space:nowrap;transition:color .5s var(--ease)}
.ai-jobs li.on{color:var(--ink)}
.ai-go{margin-top:40px}
/* phones: the changing words take their own line and may wrap, so the roll grows in height, not width */
@media (max-width:720px){
  .ai-roll{display:block;min-height:2.16em;white-space:normal;text-align:center;text-wrap:balance} /* room for two lines, so nothing below moves when a long phrase wraps */
  .ai-w.in{right:0}
  .ai-jobs{gap:0 20px;margin-top:40px;font-size:15px}
  .ai-go{margin-top:28px;padding-block:10px;background-position:0 calc(100% - 10px)} /* 44px tap target, underline stays under the text */
}

/* ---------- loader: white, quiet ---------- */
body.loading{overflow:hidden}
.loader{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:#fff;will-change:clip-path}
html:not(.js) .loader{display:none}
.ld-loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:13px;letter-spacing:.02em;font-weight:500;color:var(--soft)}
.ld-loading i{font-style:normal;display:inline-block;animation:lddot 1.1s infinite;opacity:.2}
.ld-loading i:nth-child(2){animation-delay:.18s}.ld-loading i:nth-child(3){animation-delay:.36s}
@keyframes lddot{0%,60%,100%{opacity:.2}30%{opacity:1}}
.ld-in{display:flex;align-items:center;gap:.04em;font-family:'Plus Jakarta Sans',var(--font);font-size:clamp(72px,9vw,150px);font-weight:700;letter-spacing:.04em;line-height:1;color:var(--ink);opacity:0} /* brand mark: Jakarta, like the logo */
.ld-l,.ld-o{display:inline-block;opacity:0;will-change:transform,opacity}
.ld-o{width:.76em;height:.76em;margin-left:.06em;position:relative;top:.02em}
.ld-o img{width:100%;height:100%;display:block;border-radius:50%}

/* ---------- opener: the seven frames on every arrival at the home page (calm.js builds the frames) ---------- */
.opener{position:fixed;inset:0;z-index:101;overflow:hidden;visibility:hidden;opacity:0;cursor:pointer}
html:not(.js) .opener{display:none}
.op-f{position:absolute;inset:0;overflow:hidden;visibility:hidden;opacity:0}
.op-f img{position:absolute;display:block;max-width:none;pointer-events:none;user-select:none}
/* when a frame is fitted to its word (portrait screens), the same photo, blurred, fills around it */
.op-bg{left:-8%;top:-8%;width:116%;height:116%;object-fit:cover;filter:blur(26px) brightness(.7)}
.op-f.fit .op-fg{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 84%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 84%,transparent 100%)}

/* split-text line masks: widen with clip-path (never padding or margin, which change the height) */
.ln{display:block;white-space:nowrap}
.ln-mask{overflow:visible!important;clip-path:inset(-.25em -.5em -.3em -.5em)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ============================================================
   Breakpoints: laptop <= 1440, tablet <= 1200 / 1024, phone <= 720
   ============================================================ */
@media (max-width:1599px){:root{--gutter:64px}}
@media (max-width:1440px){
  .doors{gap:14px}
  .door{padding:24px 26px 26px}
  .contact-grid{column-gap:64px}
}
@media (max-width:1200px){
  :root{--gutter:48px}
  .doors{grid-template-columns:1fr 1fr}
  .hero{min-height:0}
  .panel{grid-template-columns:1fr}
  .feat{grid-template-columns:1fr;gap:40px;padding:48px 0 0 48px}
  .feat-copy{padding-right:48px}
  .stage .phone{left:auto;right:48px;bottom:-30px}
  .contact-grid{grid-template-columns:1fr;gap:48px}
  .c-copy,.c-form,.c-faq{grid-column:auto;grid-row:auto}
  .c-faq{margin-top:0}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:1024px){
  .nav-in{grid-template-columns:1fr auto auto}
  .nav-links{position:fixed;inset:var(--nav) 0 auto 0;background:#fff;flex-direction:column;gap:0;padding:8px var(--gutter) 24px;border-bottom:1px solid var(--hair);display:none}
  .nav-links.open{display:flex}
  .nav-links a{padding:16px 0;border-bottom:1px solid var(--hair);font-size:18px;opacity:1}
  .nav-toggle{display:flex}
  .steps{grid-template-columns:1fr;gap:44px}
  .pair{grid-template-columns:1fr}
  .cmp{grid-template-columns:1fr}
}
@media (max-width:720px){
  :root{--gutter:20px;--nav:64px}
  body{font-size:16px}
  .nav .pill{display:none}
  .brand img{width:22px;height:22px}
  .brand .wm{font-size:12px}
  .hero-in{padding-top:28px}
  .hero .link{display:none}
  .orb-wrap{flex:none;min-height:0;padding-block:24px 22px}
  .orb-box{width:104px}
  .doors{gap:10px}
  .door{min-height:0;padding:18px 18px 20px;border-radius:20px}
  .door .t{font-size:17px;padding-right:0}
  .door .d{display:none}
  .go{position:static;margin-top:14px;width:32px;height:32px}
  .ask-q{font-size:17px;margin-bottom:12px}
  .seg{display:grid;grid-template-columns:1fr 1fr;width:100%;border-radius:22px}
  .seg button{height:44px;padding:0 10px;white-space:normal;line-height:1.2}
  .seg-ink{border-radius:18px}
  .panel{padding:26px;border-radius:20px}
  .feat{padding:28px 0 0 24px;border-radius:20px;gap:28px}
  .feat-copy{padding-right:24px}
  .stage .phone{width:104px;right:16px;bottom:-22px}
  .work-tile{padding:24px 24px 0;border-radius:20px}
  .work-tile .top{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:24px}
  .fgrid,.more-f{grid-template-columns:1fr}
  .form-foot .btn{width:100%}
  /* phone footer: Services beside Guides, then the six cities two across */
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px 20px}
  .foot-brand{grid-column:1/-1}
  .foot-grid > div:nth-child(3){grid-column:1/-1;order:2}
  .foot-grid > div:nth-child(3) ul{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}
  .foot-grid li a{padding:11px 0}
  .foot-bottom{flex-direction:column;gap:12px}
  .foot-bottom a{display:inline-block;padding:12px 0}
  .step-cta{padding-block:10px;background-position:0 calc(100% - 10px)} /* 44px tap target, underline stays under the text */
  .sticky-cta{position:fixed;left:12px;right:12px;bottom:12px;z-index:70;display:flex;align-items:center;justify-content:center;height:52px;border-radius:var(--r-l);background:var(--black);color:#fff;font-size:16px;font-weight:500;transform:translateY(140%);transition:transform .45s var(--ease)}
  .sticky-cta.show{transform:none}
}
/* short laptop screens (1366x768 and similar): the four choices stay on the first screen */
@media (min-width:1201px) and (max-height:820px){
  .hero .link{display:none}
  .door{min-height:0}
}
/* landscape tablets: four across, titles only, so the choices stay on the first screen */
@media (min-width:721px) and (max-width:1200px) and (max-height:820px){
  .doors{grid-template-columns:repeat(4,1fr);gap:12px}
  .door{min-height:0;padding:20px 20px 22px}
  .door .t{font-size:19px;padding-right:0}
  .door .d{display:none}
  .go{position:static;margin-top:16px;width:32px;height:32px}
}