/* ============================================================
   Sitegatex marketing site - shared stylesheet
   Ground: light paper, single theme, one dark band per page.
   Radius rule: 6px-equivalent on every surface, pills for chips.
   Accent rule: one amber family, site-wide.

   FLUID SCALE: the root font-size tracks the viewport, and every
   component dimension is in rem, so the whole page scales
   proportionally from a phone to a 4K monitor. At 1440px the root
   is ~17px (the design size); larger screens grow the entire
   composition instead of stranding it in whitespace.
   Breakpoint ladder (viewport px): 1000 page-hero fold, 960
   two-col fold, 640 single col, 520 nav CTA fold.

   Type: the brand stack from the main site, self-hosted.
   General Sans 500/600 for display, Satoshi 400/500/700 for body
   and UI, Chillax 400 for the small uppercase labels.
   ============================================================ */
@font-face{
  font-family:"General Sans";font-weight:500;font-style:normal;font-display:swap;
  src:url("fonts/GeneralSans-Medium.woff2") format("woff2");
}
@font-face{
  font-family:"General Sans";font-weight:600;font-style:normal;font-display:swap;
  src:url("fonts/GeneralSans-Semibold.woff2") format("woff2");
}
@font-face{
  font-family:"Satoshi";font-weight:400;font-style:normal;font-display:swap;
  src:url("fonts/Satoshi-Regular.woff2") format("woff2");
}
@font-face{
  font-family:"Satoshi";font-weight:500;font-style:normal;font-display:swap;
  src:url("fonts/Satoshi-Medium.woff2") format("woff2");
}
@font-face{
  font-family:"Satoshi";font-weight:700;font-style:normal;font-display:swap;
  src:url("fonts/Satoshi-Bold.woff2") format("woff2");
}
@font-face{
  font-family:"Chillax";font-weight:400;font-style:normal;font-display:swap;
  src:url("fonts/Chillax-Regular.woff2") format("woff2");
}
:root{
  --font-display:"General Sans",ui-sans-serif,system-ui,sans-serif;
  --font-body:"Satoshi",ui-sans-serif,system-ui,sans-serif;
  --font-label:"Chillax",ui-sans-serif,system-ui,sans-serif;
  --paper:#FAFAF7;
  --paper-deep:#F1F0EA;
  --card:#FDFDFB;
  --ink:#1B1E22;
  --body:#40454B;
  --muted:#686E74;
  --line:#E4E2D9;
  --line-strong:#C9C7BC;
  --amber:#F5A524;
  --amber-hot:#E8940F;
  --amber-deep:#B4550F;
  --dark:#15171A;
  --dark-2:#1C1F23;
  --dark-text:#EDEDE8;
  --dark-muted:#9BA0A6;
  --error:#B02A1D;
  --r:0.35rem;
  --ease:cubic-bezier(.16,1,.3,1);
  --container:70.5rem;
}
*{margin:0;padding:0;box-sizing:border-box}
html{
  scroll-behavior:smooth;
  scroll-padding-top:5.5rem;
  /* ~17px at 1440, 15px floor on small screens, 21px on 4K */
  font-size:clamp(15px, 11px + 0.42vw, 21px);
}
body{
  font-family:var(--font-body);
  font-size:1rem;line-height:1.6;color:var(--body);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:var(--amber-deep)}
::selection{background:var(--amber);color:var(--ink)}

.wrap{max-width:var(--container);margin:0 auto;padding:0 clamp(1.2rem,3.4vw,2.8rem)}

h1,h2{
  font-family:var(--font-display);
  font-weight:500;text-transform:uppercase;
  letter-spacing:-.033em;line-height:.95;color:var(--ink);
  text-wrap:balance;
}
h1{font-size:clamp(1.9rem,5.6vw,4.3rem)}
h1 span{display:block}
h2{font-size:clamp(1.7rem,3.3vw,2.7rem)}
h2 span{display:block}
h3{font-size:1.1rem;font-weight:700;color:var(--ink);line-height:1.35}
.lead{font-size:clamp(1.05rem,1.5vw,1.2rem);max-width:60ch}
.measure{max-width:65ch}

.mono{
  font-family:var(--font-label);
  font-size:.78rem;font-weight:400;letter-spacing:.085em;text-transform:uppercase;
}

/* ---- buttons: one primary treatment site-wide ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  height:2.82rem;padding:0 1.4rem;border-radius:var(--r);
  font:inherit;font-size:.95rem;font-weight:500;text-decoration:none;
  cursor:pointer;white-space:nowrap;border:1px solid transparent;
  transition:transform .18s var(--ease),background .18s var(--ease),
             border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.btn:active{transform:scale(.98)}
.btn:focus-visible{outline:2px solid var(--amber-deep);outline-offset:2px}
.btn-primary{
  background:var(--amber);color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),
             0 1px 2px rgba(46,38,20,.18),
             0 8px 20px -10px rgba(212,125,10,.5);
}
.btn-primary:hover{
  background:var(--amber-hot);transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),
             0 2px 4px rgba(46,38,20,.16),
             0 12px 26px -10px rgba(212,125,10,.55);
}
a.btn-primary::after{
  content:"\2192";font-weight:500;
  transition:transform .18s var(--ease);
}
a.btn-primary:hover::after{transform:translateX(3px)}
.btn-ghost{background:var(--card);color:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-1px);box-shadow:0 6px 16px -10px rgba(46,38,20,.3)}
.btn-sm{height:2.35rem;padding:0 1.05rem;font-size:.9rem}

/* Arrow text link used at the foot of selling sections. */
.more{
  display:inline-block;margin-top:1.3rem;font-weight:500;font-size:.97rem;
  color:var(--amber-deep);text-decoration:none;border-bottom:1px solid transparent;
  transition:border-color .18s var(--ease);
}
.more:hover{border-bottom-color:var(--amber-deep)}
.more:focus-visible{outline:2px solid var(--amber-deep);outline-offset:3px}
.more::after{content:" \2192"}

/* ---- nav ---- */
#nav{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--paper) 86%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease);
}
#nav.scrolled{border-bottom-color:var(--line)}
/* The ribbon spans the full viewport: brand pinned to the left edge,
   actions to the right, only the page content stays in the container. */
#nav>.wrap{max-width:none}
.nav-in{display:flex;align-items:center;gap:1.6rem;height:4rem}
.brand{display:flex;align-items:center;text-decoration:none;color:var(--ink);margin-right:auto}
.brand b{
  font-family:var(--font-display);font-weight:600;letter-spacing:-.022em;
  font-size:1.5rem;text-transform:lowercase;line-height:1;
}
.brand b span{font-size:.42em;vertical-align:.72em;margin-left:.1em}
.nav-links{display:flex;gap:.4rem;align-items:center}
.nav-links>a,.nav-drop>button{
  color:var(--body);text-decoration:none;font-size:.93rem;font-weight:500;
  padding:.45rem .65rem;border-radius:var(--r);
  background:none;border:0;font-family:inherit;cursor:pointer;
  display:inline-flex;align-items:center;gap:.35em;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.nav-links>a:hover,.nav-drop>button:hover{color:var(--ink);background:var(--paper-deep)}
.nav-links>a[aria-current="page"],.nav-drop>button.active{color:var(--ink);box-shadow:inset 0 -2px 0 var(--amber)}
.nav-links>a:focus-visible,.nav-drop>button:focus-visible{outline:2px solid var(--amber-deep);outline-offset:2px}

/* Platform dropdown */
.nav-drop{position:relative}
.nav-drop .chev{transition:transform .22s var(--ease)}
.nav-drop>button[aria-expanded="true"] .chev{transform:rotate(180deg)}
.drop-panel{
  position:absolute;top:calc(100% + .55rem);left:-.4rem;
  min-width:21rem;padding:.45rem;
  background:var(--card);border:1px solid var(--line);border-radius:.55rem;
  box-shadow:0 1px 2px rgba(46,38,20,.06),0 20px 48px -18px rgba(46,38,20,.3);
  opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .22s var(--ease),transform .22s var(--ease);
}
.nav-drop.open .drop-panel{opacity:1;transform:none;pointer-events:auto}
.drop-panel a{
  display:block;padding:.6rem .75rem;border-radius:var(--r);text-decoration:none;
  transition:background .15s var(--ease);
}
.drop-panel a:hover,.drop-panel a:focus-visible{background:var(--paper-deep);outline:none}
.drop-panel a b{display:block;color:var(--ink);font-weight:600;font-size:.95rem}
.drop-panel a b::after{
  content:"\2192";opacity:0;margin-left:.4em;color:var(--amber-deep);
  display:inline-block;transition:opacity .15s var(--ease),transform .15s var(--ease);
  transform:translateX(-3px);
}
.drop-panel a:hover b::after{opacity:1;transform:none}
.drop-panel a span{display:block;color:var(--muted);font-size:.83rem;line-height:1.45;margin-top:.1rem}
.drop-panel a[aria-current="page"]{background:var(--paper-deep)}
.drop-panel a[aria-current="page"] b{color:var(--amber-deep)}

/* Sign in: the way back into the app, quieter than the booking CTA so the
   conversion path stays dominant. The divider marks it as a different kind
   of action from the nav's content links. */
.nav-signin{
  display:inline-flex;align-items:center;flex:none;
  padding:.45rem 0 .45rem 1.05rem;margin-left:.3rem;
  border-left:1px solid var(--line-strong);
  color:var(--ink);text-decoration:none;font-size:.93rem;font-weight:500;
  transition:color .18s var(--ease);
}
.nav-signin:hover{color:var(--amber-deep)}
.nav-signin:focus-visible{outline:2px solid var(--amber-deep);outline-offset:2px;border-radius:4px}
@media (max-width:960px){.nav-signin{display:none}}

#menu-btn{display:none;background:none;border:1px solid var(--line-strong);border-radius:var(--r);width:2.5rem;height:2.35rem;cursor:pointer;position:relative;flex:none}
#menu-btn span{position:absolute;left:.65rem;right:.65rem;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s var(--ease),opacity .2s}
#menu-btn span:nth-child(1){top:.8rem}
#menu-btn span:nth-child(2){top:1.12rem}
#menu-btn span:nth-child(3){top:1.44rem}
#menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(.32rem) rotate(45deg)}
#menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
#menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-.32rem) rotate(-45deg)}
/* hero-section-9's floating menu card */
#mobile-menu{
  position:absolute;left:clamp(.8rem,3vw,1.6rem);right:clamp(.8rem,3vw,1.6rem);
  top:calc(100% + .5rem);z-index:39;
  background:var(--card);border:1px solid var(--line);border-radius:1rem;
  padding:.55rem;
  box-shadow:0 2px 4px rgba(46,38,20,.06),0 28px 56px -20px rgba(46,38,20,.3);
  opacity:0;transform:translateY(-8px);pointer-events:none;
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
#mobile-menu.open{opacity:1;transform:none;pointer-events:auto}
#mobile-menu a{
  display:block;padding:.72rem .85rem;border-radius:.55rem;
  text-decoration:none;color:var(--ink);font-weight:500;
}
#mobile-menu a:hover{background:var(--paper-deep)}
#mobile-menu a[aria-current="page"]{color:var(--amber-deep)}
#mobile-menu .menu-cta{
  display:flex;margin-top:.45rem;border-top:1px solid var(--line);
  padding-top:.75rem;
}
#mobile-menu .menu-cta .btn{width:100%}
/* ---- sign in: the password wall's form, in a dialog ---- */
button.nav-signin{background:none;border:0;border-left:1px solid var(--line-strong);border-radius:0;cursor:pointer;font:inherit;font-size:.93rem;font-weight:500}
#mobile-menu .menu-signin{
  display:block;width:100%;background:none;border:0;border-top:1px solid var(--line);border-radius:0;
  margin-top:.45rem;padding:.95rem .85rem .6rem;font:inherit;font-weight:600;color:var(--ink);
  text-align:left;cursor:pointer;
}
#signin{
  border:0;padding:0;background:transparent;margin:auto;
  max-width:min(26rem,calc(100vw - 2rem));width:100%;color:var(--body);
}
#signin::backdrop{background:rgba(21,23,26,.62);backdrop-filter:blur(3px)}
#signin[open]{animation:bookin .3s var(--ease)}
.signin-card{
  position:relative;background:var(--card);border:1px solid var(--line);border-radius:.7rem;
  box-shadow:0 2px 6px rgba(46,38,20,.08),0 40px 80px -30px rgba(46,38,20,.5);
  padding:1.7rem 1.6rem 1.5rem;max-height:calc(100dvh - 2.5rem);overflow:auto;
}
.signin-x{position:absolute;top:.9rem;right:.9rem}
.signin-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem;margin-bottom:1.4rem}
.signin-mark{
  width:2.9rem;height:2.9rem;border-radius:999px;border:1px solid var(--line-strong);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:600;font-size:1.55rem;line-height:1;color:var(--amber-deep);
}
.signin-head h2{font-size:1.35rem;letter-spacing:-.01em;line-height:1.2;text-transform:none;margin:.25rem 0 0}
.signin-head p{font-size:.9rem;color:var(--muted);margin:0}
.signin .field{margin-bottom:.95rem}
.signin .field input::placeholder{color:var(--muted);opacity:.75}
.signin-row{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin:-.1rem 0 1.15rem;font-size:.88rem}
.signin-remember{display:inline-flex;align-items:center;gap:.5rem;color:var(--muted);cursor:pointer}
.signin-remember input{width:1rem;height:1rem;margin:0;accent-color:var(--amber-deep);cursor:pointer}
.signin-forgot{color:var(--ink);text-decoration:underline;text-underline-offset:.15em}
.signin-forgot:hover{text-decoration:none}
.signin .btn{width:100%}
.signin-note{font-size:.85rem;line-height:1.45;color:var(--ink);margin:0 0 .9rem;padding:.55rem .7rem;border:1px solid var(--line);border-radius:var(--r);background:var(--paper-deep)}
.signin-err{font-size:.85rem;line-height:1.45;color:var(--error);margin:-.3rem 0 .8rem}
.signin-note[hidden],.signin-err[hidden]{display:none}
.signin.busy .btn{opacity:.65;pointer-events:none}
@media (min-width:961px){#mobile-menu{display:none}}

/* ---- home hero: hero-1 (21st.dev) ported to the static stack ----
   Same anatomy as the React component: blueprint-grid backdrop with a
   radial mask, eyebrow pill with a sliding chevron, centred balanced
   title with the component's ink fade, staggered fade-ins, a radial
   horizon arc, and the perspective screenshot showcase where the
   component's bottom fade sits. shadcn tokens map to brand tokens. */
.hero{
  position:relative;overflow:hidden;text-align:left;
  padding:clamp(2.2rem,4.4vw,3.4rem) 0 0;
  background:linear-gradient(to bottom, var(--paper), var(--paper) 55%, #EFEEE7 92%);
  border-radius:0 0 .8rem .8rem;
}
/* hero-section-9's corner light rays, ink-tinted for the light ground */
.hero::before,.phero::before{
  content:"";position:absolute;top:-22rem;left:-7rem;width:24rem;height:72rem;z-index:1;
  transform:rotate(-45deg);pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, rgba(27,30,34,.06) 0, rgba(27,30,34,.02) 60%, transparent 100%);
}
.hero::after,.phero::after{
  content:"";position:absolute;top:-24rem;left:6rem;width:11rem;height:72rem;z-index:1;
  transform:rotate(-45deg);pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, rgba(27,30,34,.05) 0, rgba(27,30,34,.015) 70%, transparent 100%);
}
@media (max-width:1024px){
  .hero::before,.hero::after,.phero::before,.phero::after{display:none}
}
/* Home hero photograph: powerline construction on a WA mine site, laid in
   behind the type with a paper scrim so the headline keeps AA contrast. */
.hero-photo{
  position:absolute;inset:0 0 auto 0;height:calc(100svh - 4rem);
  z-index:0;pointer-events:none;overflow:hidden;
}
/* Subpage heroes are shorter than the home statement, so their photo
   layer fills the section rather than a viewport. */
.phero .hero-photo{inset:0;height:100%}
.hero-photo img{
  width:100%;height:100%;object-fit:cover;object-position:58% 62%;
  filter:contrast(1.05) saturate(.92);
}
.hero-photo::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg, rgba(250,250,247,.97) 8%, rgba(250,250,247,.9) 26%, rgba(250,250,247,.5) 50%, rgba(250,250,247,.12) 78%),
    linear-gradient(to bottom, rgba(250,250,247,.34) 0%, transparent 30%, rgba(250,250,247,.5) 82%, var(--paper) 100%);
}
.hero-stack{position:relative;z-index:2}
/* home: minimalist statement that owns the first viewport; the showcase
   waits below the fold and reveals on scroll */
.hero .hero-stack{
  min-height:calc(100svh - 4rem);
  display:flex;flex-direction:column;justify-content:center;
  padding-bottom:10vh;
}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:.5em;width:fit-content;
  padding:.55rem 1.15rem;border:2px solid rgba(201,199,188,.45);border-radius:999px;
  background:linear-gradient(to top right, rgba(27,30,34,.04), transparent);
  font-family:var(--font-label);font-size:.8rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--body);text-decoration:none;
}
.hero-eyebrow svg{transition:transform .3s var(--ease)}
.hero-eyebrow:hover svg{transform:translateX(3px)}
.hero-eyebrow:hover{color:var(--ink);border-color:var(--line-strong)}
.hero-eyebrow:focus-visible{outline:2px solid var(--amber-deep);outline-offset:3px}
.hero h1{
  margin:1.35rem 0 .4rem;font-size:clamp(2.2rem,5.2vw,3.9rem);
  background:linear-gradient(to bottom right, var(--ink) 30%, rgba(27,30,34,.44));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding-bottom:.35rem;
}
.hero-sub{
  max-width:44rem;margin:0;text-wrap:pretty;
  font-size:clamp(1.02rem,1.5vw,1.25rem);letter-spacing:-.01em;
}
.hero .hero-sub{margin-bottom:.9rem}
.hero-cta{margin-top:1.6rem;display:flex;justify-content:flex-start}
.btn-lg{height:3.1rem;padding:0 2rem;font-size:1.02rem}
.hero-arc{
  position:relative;z-index:0;margin-top:clamp(2.4rem,5vw,4rem);height:clamp(9rem,16vw,14rem);
  pointer-events:none;
}
.hero-arc::before{
  content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:max(160vw,72rem);height:clamp(24rem,44vw,40rem);border-radius:100%;
  background:radial-gradient(closest-side, var(--paper) 85%, rgba(245,165,36,.42) 96%, rgba(27,30,34,.26));
}
.hero-show{
  position:relative;z-index:2;max-width:62rem;
  margin:clamp(-7rem,-11vw,-10rem) auto 0;padding:0 clamp(1.2rem,3.4vw,2.8rem) clamp(2.2rem,4vw,3.4rem);
  perspective:1600px;
}
.hero-show .frame{
  transform:rotateX(17deg) scale(.98);transform-origin:top center;
  box-shadow:0 1px 2px rgba(46,38,20,.1),0 44px 88px -40px rgba(46,38,20,.5);
}
.hero-show::after{
  content:"";position:absolute;inset:auto 0 0 0;height:38%;z-index:3;pointer-events:none;
  background:linear-gradient(to top, var(--paper) 10%, transparent);
}
.hero-show.flat .frame{transform:none}
.hero-show.flat .frame img{width:100%;height:clamp(19rem,34vw,28rem);object-fit:cover}

/* hero-section-9 showcase: tilted and skewed, bleeding off the right
   edge, faded out by right and bottom masks instead of an overlay */
.show9{
  position:relative;z-index:2;margin-top:clamp(1.2rem,2.4vw,1.9rem);
  -webkit-mask-image:linear-gradient(to bottom,#000 48%,transparent 96%);
  mask-image:linear-gradient(to bottom,#000 48%,transparent 96%);
}
.show9 .tilt{
  perspective:1200px;
  -webkit-mask-image:linear-gradient(to right,#000 55%,transparent 99%);
  mask-image:linear-gradient(to right,#000 55%,transparent 99%);
  margin-right:clamp(-10rem,-8vw,-4rem);
  padding-left:clamp(1.2rem,6vw,6rem);
}
.show9 .frame{
  transform:rotateX(20deg) skewX(.36rad);transform-origin:top left;
  box-shadow:0 1px 2px rgba(46,38,20,.08),0 40px 80px -44px rgba(46,38,20,.42);
}
.show9 .frame img{
  width:100%;height:auto;max-height:clamp(21rem,36vw,32rem);
  object-fit:cover;object-position:top left;
}
.showcap{padding:0 0 clamp(1.6rem,3vw,2.6rem)}
.showcap .caption{max-width:44rem}

/* ---- subpage hero: the same hero-1 family, scaled to page rank ----
   Platform pages run the full anatomy with their module screenshot in
   the showcase; photo pages use the flat variant; index-style pages
   drop the arc entirely. */
.phero{
  position:relative;overflow:hidden;text-align:center;
  padding:clamp(2.4rem,5vw,3.8rem) 0 0;
  background:linear-gradient(to bottom, var(--paper), var(--paper) 55%, #EFEEE7 92%);
  border-radius:0 0 .8rem .8rem;
}
.phero.no-arc{
  padding-bottom:clamp(2.4rem,4.5vw,3.6rem);
  background:linear-gradient(to bottom, var(--paper), #F4F3ED);
}
.phero{text-align:left}
.phero .hero-stack{padding-bottom:clamp(1.6rem,3vw,2.6rem)}
.phero h1{
  margin:1.35rem 0 .35rem;font-size:clamp(2.15rem,4.9vw,3.75rem);
  background:linear-gradient(to bottom right, var(--ink) 30%, rgba(27,30,34,.44));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding-bottom:.3rem;
}
/* sentence-case variant for article titles */
.phero h1.sc{
  text-transform:none;letter-spacing:-.022em;line-height:1.05;
  font-size:clamp(1.9rem,4.2vw,3.3rem);max-width:52rem;
}
.pillrow{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.pillrow .meta{letter-spacing:.07em}
span.hero-eyebrow{cursor:default}
span.hero-eyebrow:hover{color:var(--body);border-color:rgba(201,199,188,.45)}
.hero-arc.slim{height:clamp(7rem,12vw,10.5rem);margin-top:clamp(2rem,4vw,3rem)}

@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.rise{animation:rise .7s var(--ease) both}
.rise.d1{animation-delay:.05s}.rise.d2{animation-delay:.12s}
.rise.d3{animation-delay:.19s}.rise.d4{animation-delay:.28s}

/* hero-1's entrance pair, verbatim from the component's keyframes */
@keyframes fade-in{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}
@keyframes fade-up{0%{opacity:0;transform:translateY(40px)}100%{opacity:1;transform:translateY(0)}}
.fade-in{animation:fade-in .8s var(--ease) both}
.fade-up{animation:fade-up .9s var(--ease) both}
.fade-in.d1,.fade-up.d1{animation-delay:.08s}
.fade-in.d2,.fade-up.d2{animation-delay:.16s}
.fade-in.d3,.fade-up.d3{animation-delay:.24s}
.fade-in.d4,.fade-up.d4{animation-delay:.34s}

[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:var(--d,0s)}
[data-reveal].on{opacity:1;transform:none}

/* ---- wide photo (the articles) ---- */
.photo-wide{border-radius:var(--r);overflow:hidden;border:1px solid rgba(27,30,34,.1)}
.photo-wide img{width:100%;height:clamp(17.5rem,42vw,31.75rem);object-fit:cover}
.caption{font-size:.85rem;color:var(--muted);margin-top:.7rem}


/* ---- the whole mobilisation + what Sitegatex runs: one feature bento, the
   gatehouse photograph as the hero card, the product cells around it ---- */
.runs{padding:clamp(4.2rem,9vw,7rem) 0}
.fb-kicker{display:block;margin-bottom:.7rem;font-family:var(--font-label);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.fb-swings{display:flex;flex-direction:column;gap:2px}
.fb-swings b{font-family:var(--font-display);font-weight:500;font-size:clamp(1.7rem,2.6vw,2.3rem);line-height:1.1;letter-spacing:-.02em;color:var(--amber)}
.fb-swings b small{font-size:.42em;color:var(--dark-muted);letter-spacing:.08em;margin-left:.6em;vertical-align:middle}
.fb-hero h2 br{display:inline}
/* The same logo slider inside the platform pages' outcomes, where the
   integrations line used to be. */
.partners-inline{margin-top:1.8rem}
.partners-inline .partners-h{margin-bottom:1.1rem}

/* ---- home how-it-works ---- */
.how{padding:clamp(4.2rem,9vw,7rem) 0;border-top:1px solid var(--line)}
.how h2{margin-bottom:clamp(1.6rem,4vw,2.8rem);max-width:14ch}
.how-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.9rem,5vw,4.2rem);align-items:start}
.how-shot{position:sticky;top:5.6rem}
.frame{
  border-radius:var(--r);overflow:hidden;border:1px solid rgba(27,30,34,.14);
  box-shadow:0 1px 2px rgba(46,38,20,.08),0 28px 56px -30px rgba(46,38,20,.45);
}
.frame img{width:100%;height:auto}

/* ---- home swing bento: 21st.dev's feature-bento in the house palette, the
   airstrip photograph as the hero card's ground ---- */
.rosters{padding:clamp(4.2rem,9vw,7rem) 0;border-top:1px solid var(--line)}
.feature-bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(15rem,auto);gap:.9rem}
.fb{position:relative;overflow:hidden;min-width:0;display:flex;flex-direction:column;justify-content:space-between;border-radius:.9rem;padding:1.6rem;text-decoration:none;color:inherit}
.fb-hero{grid-column:span 2;grid-row:span 2;justify-content:flex-end;padding:clamp(1.6rem,3vw,2.4rem);background:var(--dark);color:var(--paper)}
.fb-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .7s var(--ease)}
.fb-hero:hover .fb-photo{transform:scale(1.05)}
.fb-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(21,23,26,.84) 0%,rgba(21,23,26,.38) 50%,rgba(21,23,26,.08) 100%)}
.fb-body{position:relative;z-index:1;max-width:34rem}
.fb-live{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .9rem;border-radius:999px;background:rgba(255,255,255,.14);backdrop-filter:blur(6px);font-family:var(--font-label);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--paper)}
.fb-live i{width:.5rem;height:.5rem;border-radius:999px;background:var(--amber);animation:fbpulse 1.8s ease-in-out infinite}
@keyframes fbpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
.fb-hero h2{color:var(--paper);font-size:clamp(1.9rem,3.2vw,2.9rem);margin:.9rem 0 .7rem}
.fb-hero p{color:rgba(244,244,239,.86);font-size:1rem;line-height:1.55;max-width:42ch}
.fb-stat-dark{background:linear-gradient(180deg,var(--dark-2),var(--dark));border:1px solid rgba(255,255,255,.09);color:var(--dark-text);justify-content:flex-end}
.fb-stat-amber{background:var(--amber);color:var(--ink);justify-content:flex-end}
.fb-glow{position:absolute;right:-2rem;top:-2rem;width:9rem;height:9rem;border-radius:999px;background:rgba(245,165,36,.22);filter:blur(32px);pointer-events:none}
.fb-glow-soft{right:-3rem;top:auto;bottom:-3rem;width:11rem;height:11rem;background:rgba(255,255,255,.3);filter:blur(40px)}
.fb-stat>div,.fb-feature>*,.fb-cta>*{position:relative;z-index:1}
.fb-icon{width:3rem;height:3rem;border-radius:.7rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);display:inline-flex;align-items:center;justify-content:center;color:var(--amber);margin-bottom:1rem}
.fb-icon-amber{background:var(--amber);border:0;color:var(--ink)}
.fb-num{display:block;font-family:var(--font-display);font-weight:600;font-size:clamp(2.4rem,4vw,3.4rem);letter-spacing:-.04em;line-height:1;color:inherit}
.fb-num-amber{color:var(--amber)}
.fb-label{display:block;margin-top:.55rem;font-size:.9rem;line-height:1.4;opacity:.78}
.fb-stat-ping .fb-label{font-family:var(--font-label);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;opacity:.65}
.fb-feature{background:var(--card);border:1px solid var(--line);transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
.fb-feature:hover{border-color:var(--amber-deep);transform:translateY(-2px);box-shadow:0 18px 40px -28px rgba(46,38,20,.45)}
.fb-feature h3{font-family:var(--font-display);font-weight:600;font-size:1.35rem;letter-spacing:-.015em;line-height:1.15;color:var(--ink);text-transform:none}
.fb-feature p{font-size:.92rem;line-height:1.5;color:var(--body);margin-top:.5rem}
.fb-feature:focus-visible,.fb-cta:focus-visible{outline:2px solid var(--amber-deep);outline-offset:3px}
.fb-cta{background:linear-gradient(135deg,var(--dark),var(--dark-2));border:1px solid rgba(255,255,255,.09);color:var(--paper);cursor:pointer}
.fb-cta-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.fb-tag{font-family:var(--font-label);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;padding:.5rem .8rem;border-radius:999px;background:rgba(255,255,255,.14);line-height:1}
.fb-arrow{width:2.6rem;height:2.6rem;border-radius:999px;background:rgba(255,255,255,.14);display:inline-flex;align-items:center;justify-content:center;font-size:1.2rem;line-height:1;transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.fb-cta:hover .fb-arrow{background:var(--amber);color:var(--ink);transform:rotate(45deg)}
.fb-cta h3{font-family:var(--font-display);font-weight:600;font-size:clamp(1.35rem,2vw,1.7rem);letter-spacing:-.02em;line-height:1.12;color:var(--paper);text-transform:none}
.fb-ping{position:absolute;top:1.15rem;right:1.15rem;width:.7rem;height:.7rem;z-index:1}
.fb-ping::before{content:"";position:absolute;inset:0;border-radius:999px;background:var(--amber);opacity:.7;animation:fbping 1.6s cubic-bezier(0,0,.2,1) infinite}
.fb-ping i{position:absolute;inset:0;border-radius:999px;background:var(--amber);display:block}
@keyframes fbping{75%,100%{transform:scale(2.2);opacity:0}}

/* ---- feature grid: 21st.dev's features-grid in the house palette, for the
   pains, the outcomes, the walkthrough points and the link tiles ---- */
.fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem}
.fgrid.four{grid-template-columns:repeat(2,minmax(0,1fr))}
.fcard{display:block;background:var(--card);border:1px solid var(--line);border-radius:.8rem;padding:1.5rem;text-decoration:none;color:inherit;transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}
.fcard:hover{background:var(--paper-deep)}
a.fcard:hover{border-color:var(--amber-deep);transform:translateY(-2px)}
a.fcard:focus-visible{outline:2px solid var(--amber-deep);outline-offset:3px}
.ficon{width:3rem;height:3rem;border-radius:.6rem;background:rgba(245,165,36,.16);color:var(--amber-deep);display:inline-flex;align-items:center;justify-content:center;margin-bottom:1rem}
.ficon svg{width:1.5rem;height:1.5rem}
.fcard h3{font-family:var(--font-display);font-weight:600;font-size:1.08rem;letter-spacing:-.01em;line-height:1.25;color:var(--ink);text-transform:none;margin-bottom:.45rem}
a.fcard h3::after{content:"\2192";color:var(--amber-deep);opacity:0;margin-left:.4em;display:inline-block;transform:translateX(-4px);transition:opacity .2s var(--ease),transform .2s var(--ease)}
a.fcard:hover h3::after{opacity:1;transform:none}
.fcard p{font-size:.92rem;line-height:1.55;color:var(--body)}
.outcomes .fgrid{margin-bottom:1.3rem}
.walk .fgrid{margin-top:1.7rem;margin-bottom:1.7rem}
@media (max-width:900px){.fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.fgrid,.fgrid.four{grid-template-columns:1fr}}

/* ---- partner logos: 21st.dev's logo cloud, for the four systems Sitegatex
   exchanges data with. Full-bleed hairlines, alternating cells, crosshair
   pluses at the joins, wordmarks inlined in ink. ---- */
.partners{padding:0 0 clamp(4.2rem,9vw,7rem);overflow:hidden}
.partners-h{font-family:var(--font-body);font-weight:500;text-transform:none;letter-spacing:0;line-height:1.3;font-size:clamp(1.05rem,1.6vw,1.35rem);color:var(--muted);margin-bottom:1.5rem}
.partners-h span{display:inline;color:var(--ink);font-weight:700}
.logoslider{position:relative;overflow:hidden;padding:2rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.logoslider-track{display:flex;align-items:center;gap:4.5rem;width:max-content;will-change:transform}
.logoslider.go .logoslider-track{animation:logoslide var(--dur,25s) linear infinite;animation-direction:reverse}
@keyframes logoslide{to{transform:translateX(calc(-1 * var(--set,50%)))}}
.logoslide{flex:none;display:inline-flex;align-items:center}
.logoslide .logo{height:1.6rem;width:auto}
.logoslide .logo-pc{height:1.45rem}
.logoslide .logo-li{height:1.7rem}
.logoslide.lockup{gap:.55rem}
.logoslide .glyph{height:1.7rem;width:auto}
.logoslide b{font-family:var(--font-display);font-weight:700;font-size:1.15rem;letter-spacing:-.01em;line-height:1}
.logoslide .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.logoslide .logo-ct{height:3rem}

/* ---- how it works: the numbered steps as cards, 21st.dev's how-it-works
   block in the house palette. Number badge top right, a square icon tile,
   title and copy. Six across two rows on the platform pages, four on the
   home page. ---- */
.hiw-eyebrow{display:block;font-family:var(--font-label);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.7rem}
/* ---- step gallery: 21st.dev's gallery4 in the house palette. Each numbered
   step is a photographed card in colour with its text over a dark foot
   gradient; a snap-scrolling track, arrows in the header that disable at the
   ends, dots beneath that track and set the current card. ---- */
.gallery-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:clamp(1.4rem,3.5vw,2.4rem)}
.gallery-head h2{margin:0}
.gallery-nav{display:flex;gap:.5rem;flex:none;padding-bottom:.3rem}
.gallery-btn{width:2.75rem;height:2.75rem;border-radius:999px;border:1px solid var(--line-strong);background:var(--card);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s var(--ease),border-color .2s var(--ease),opacity .2s var(--ease)}
.gallery-btn:hover:not(:disabled){background:var(--paper-deep);border-color:var(--ink)}
.gallery-btn:disabled{opacity:.35;cursor:default}
.gallery-btn:focus-visible{outline:2px solid var(--amber-deep);outline-offset:2px}
.gallery-btn svg{width:1.25rem;height:1.25rem}
.gallery-track{display:flex;gap:1.25rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.25rem .25rem 1rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.gallery-track::-webkit-scrollbar{display:none}
.gallery-track:focus-visible{outline:2px solid var(--amber-deep);outline-offset:2px;border-radius:.5rem}
.gcard{position:relative;flex:0 0 min(22.5rem,80vw);height:27rem;scroll-snap-align:start;border-radius:.9rem;overflow:hidden;background:var(--dark);color:var(--paper);isolation:isolate}
.gcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .4s var(--ease)}
.gcard:hover img{transform:scale(1.05)}
.gcard::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(21,23,26,0) 32%,rgba(21,23,26,.45) 60%,rgba(21,23,26,.9) 100%)}
.gnum{position:absolute;top:1.1rem;left:1.1rem;z-index:2;font-family:var(--font-label);font-size:.68rem;letter-spacing:.12em;padding:.4rem .65rem;border-radius:999px;background:rgba(21,23,26,.55);color:var(--amber);backdrop-filter:blur(4px)}
.gbody{position:absolute;inset:auto 0 0 0;z-index:2;padding:1.5rem 1.5rem 1.6rem}
.gbody h3{font-family:var(--font-display);font-weight:600;font-size:1.25rem;letter-spacing:-.015em;line-height:1.2;color:var(--paper);text-transform:none;margin-bottom:.55rem}
.gbody p{font-size:.92rem;line-height:1.5;color:rgba(244,244,239,.85);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.gallery-dots{display:flex;justify-content:center;gap:.55rem;margin-top:1.1rem}
.gallery-dots button{width:.55rem;height:.55rem;border-radius:999px;border:0;padding:0;background:rgba(245,165,36,.28);cursor:pointer;transition:background .2s var(--ease),transform .2s var(--ease)}
.gallery-dots button[aria-current="true"]{background:var(--amber-deep);transform:scale(1.25)}
.gallery-dots button:focus-visible{outline:2px solid var(--amber-deep);outline-offset:3px}
.gallery[data-reveal].on .gcard{animation:rise .5s var(--ease) both;animation-delay:calc(var(--i,0) * .08s)}
.how .gallery{margin-bottom:1.6rem}
@media (max-width:700px){.gallery-nav{display:none}.gallery-head{align-items:flex-start}}
/* pattern chips, still used on the planning page */
.chiprow{display:flex;gap:.6rem;flex-wrap:wrap}
.chip{font-family:var(--font-label);font-size:.88rem;font-weight:400;color:var(--ink);background:var(--card);border:1px solid var(--line-strong);border-radius:999px;padding:.4rem .95rem}
@media (max-width:900px){
  .feature-bento{grid-template-columns:1fr 1fr}
  .fb-hero{grid-column:span 2;grid-row:auto;min-height:22rem}
}
@media (max-width:560px){
  .feature-bento{grid-template-columns:1fr}
  .fb-hero{grid-column:auto;min-height:20rem}
}

/* ---- home compliance panel ---- */
.compliance{padding:clamp(4.2rem,9vw,7rem) 0;border-top:1px solid var(--line)}
.compliance h2{margin-bottom:1.05rem}
.compliance .measure{margin-bottom:clamp(1.9rem,4vw,2.8rem)}

/* ---- walkthrough form ---- */
.walk{padding:clamp(4.2rem,9vw,7rem) 0;border-top:1px solid var(--line)}
.walk h2{margin-bottom:1.05rem}
/* The booking card, on its own strip after the steps. */
.bookstrip{padding:0 0 clamp(4.2rem,9vw,7rem)}
.bookstrip-card{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.5rem 1.7rem;background:var(--card);border:1px solid var(--line);border-radius:.8rem}
.bookstrip-card h3{font-family:var(--font-display);font-weight:600;font-size:1.25rem;letter-spacing:-.015em;line-height:1.15;text-transform:none}
.bookstrip-card p{font-size:.95rem;color:var(--body);margin-top:.35rem}
.bookstrip-card .btn{flex:none}
@media (max-width:700px){.bookstrip-card{flex-direction:column;align-items:stretch}.bookstrip-card .btn{width:100%}}
.form-card{
  background:var(--card);border:1px solid var(--line);border-radius:.55rem;
  padding:clamp(1.4rem,3vw,2rem);
  box-shadow:0 1px 2px rgba(46,38,20,.05),0 24px 48px -32px rgba(46,38,20,.25);
}
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.2rem}
.field label{font-size:.88rem;font-weight:500;color:var(--ink)}
.field input,.field select{
  height:2.76rem;border:1px solid var(--line-strong);border-radius:var(--r);
  background:var(--card);padding:0 .8rem;font:inherit;font-size:.95rem;color:var(--ink);
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
  appearance:none;
}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2340454B' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center;
}
.field input:hover,.field select:hover{border-color:var(--muted)}
.field input:focus-visible,.field select:focus-visible{outline:2px solid var(--amber-deep);outline-offset:1px;border-color:var(--amber-deep)}
.field .help{font-size:.82rem;color:var(--muted)}
.field .err{font-size:.82rem;color:var(--error);display:none}
.field.bad input{border-color:var(--error)}
.field.bad .err{display:block}
.form-card .btn{width:100%}
.form-done{display:none;text-align:left;padding:.5rem 0}
.form-done h3{margin-bottom:.5rem}
.form-card.sent form{display:none}
.form-card.sent .form-done{display:block}
.field textarea{
  border:1px solid var(--line-strong);border-radius:var(--r);background:var(--card);
  padding:.7rem .8rem;font:inherit;font-size:.95rem;color:var(--ink);resize:vertical;
  min-height:7rem;transition:border-color .18s var(--ease);
}
.field textarea:hover{border-color:var(--muted)}
.field textarea:focus-visible{outline:2px solid var(--amber-deep);outline-offset:1px;border-color:var(--amber-deep)}
.field.bad textarea{border-color:var(--error)}
.form-error,.book-error{color:var(--error);font-size:.88rem;display:block}
.form-error:empty,.book-error:empty{display:none}
.book-error{padding:0 1.3rem .9rem}

/* contact page */
.contact{padding:clamp(3rem,6vw,5rem) 0 clamp(3.75rem,8vw,6.5rem)}
.contact-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,5vw,4.2rem);align-items:start}
.contact-aside h3{margin-bottom:.5rem}
.contact-block{padding:1.3rem 1.4rem;background:var(--paper-deep);border-radius:.55rem;margin-bottom:.82rem}
.contact-block p{font-size:.95rem;margin-top:.4rem}
.contact-block a{font-weight:500}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}

/* 404 */
.nf{min-height:60vh;display:flex;align-items:center;padding:clamp(3rem,8vw,7rem) 0}
.nf h1{font-size:clamp(2.4rem,7vw,5rem);margin-bottom:1rem}
.nf .ctas{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.9rem}

/* ---- FAQ ---- */
.faq{padding:clamp(4.2rem,9vw,7rem) 0;border-top:1px solid var(--line)}
.faq h2{margin-bottom:clamp(1.4rem,3vw,2.35rem)}
.faq-list{max-width:46rem}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:.95rem;
  padding:1.2rem .25rem;font-size:1.08rem;font-weight:600;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:focus-visible{outline:2px solid var(--amber-deep);outline-offset:2px;border-radius:4px}
.faq .cross{flex:none;margin-left:auto;width:.82rem;height:.82rem;position:relative}
.faq .cross::before,.faq .cross::after{
  content:"";position:absolute;background:var(--amber-deep);border-radius:2px;
  transition:transform .3s var(--ease);
}
.faq .cross::before{left:0;right:0;top:calc(50% - 1px);height:2px}
.faq .cross::after{top:0;bottom:0;left:calc(50% - 1px);width:2px}
.faq details[open] .cross::after{transform:scaleY(0)}
.faq .a{overflow:hidden;font-size:.98rem;max-width:62ch}
.faq .a p{padding:0 .25rem 1.3rem}

/* ---- platform module pages ---- */
.pains{padding:clamp(3.75rem,8vw,6.5rem) 0}
.pains h2{margin-bottom:clamp(1.4rem,3.5vw,2.6rem)}

.howlist{padding:clamp(3.75rem,8vw,6.5rem) 0;border-top:1px solid var(--line)}
.howlist h2{margin-bottom:clamp(1.4rem,3.5vw,2.6rem)}


.shotband{padding:clamp(2.35rem,5vw,4.2rem) 0 clamp(3.75rem,8vw,6.5rem)}

.outcomes{padding:0 0 clamp(3.75rem,8vw,6.5rem)}
.outcomes .panel{background:none;border-radius:0;padding:0}
.outcomes h2{font-size:clamp(1.45rem,2.4vw,2rem);margin-bottom:1.05rem}
.outcomes .integrations{margin-top:1.3rem;font-size:.9rem;color:var(--muted)}

.related{padding:clamp(3.3rem,7vw,5.65rem) 0;border-top:1px solid var(--line)}
.related h2{font-size:clamp(1.45rem,2.4vw,2rem);margin-bottom:1.5rem}

/* ---- insights index ---- */
.featured{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(1.65rem,4vw,2.8rem) 0}
.featured a{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(1.4rem,4vw,3.75rem);align-items:center;text-decoration:none;color:inherit}
.featured .photo{border-radius:var(--r);overflow:hidden;border:1px solid rgba(27,30,34,.1)}
.featured .photo img{width:100%;height:clamp(14.1rem,30vw,23.5rem);object-fit:cover;transition:transform .5s var(--ease)}
.featured a:hover .photo img{transform:scale(1.02)}
.featured h2{font-size:clamp(1.5rem,2.8vw,2.3rem);text-transform:none;letter-spacing:-.022em;line-height:1.08;margin:.7rem 0 .82rem}
.featured a:hover h2{color:var(--amber-deep)}
.featured p{font-size:1rem;max-width:52ch}
.meta{font-family:var(--font-label);font-size:.78rem;font-weight:400;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.meta b{color:var(--amber-deep);font-weight:500}
.postlist{padding:0 0 clamp(3.75rem,8vw,6.5rem)}
.post{border-bottom:1px solid var(--line)}
.post a{
  display:grid;grid-template-columns:minmax(0,1fr) 7.8rem;gap:clamp(1.2rem,3vw,2.8rem);
  align-items:center;padding:clamp(1.3rem,3vw,2rem) 0;text-decoration:none;color:inherit;
}
.post h3{font-size:clamp(1.1rem,1.8vw,1.45rem);font-weight:700;line-height:1.2;margin:.6rem 0 .5rem;transition:color .18s var(--ease)}
.post a:hover h3{color:var(--amber-deep)}
.post a:focus-visible{outline:2px solid var(--amber-deep);outline-offset:2px}
.post p{font-size:.95rem;max-width:64ch}
.post .thumb{border-radius:var(--r);overflow:hidden;border:1px solid rgba(27,30,34,.1)}
.post .thumb img{width:7.8rem;height:5.65rem;object-fit:cover}

/* ---- article pages ---- */
.article-hero{padding:clamp(1.9rem,4vw,3.3rem) 0}
.article-hero .photo-wide img{height:clamp(15.3rem,38vw,28.2rem)}
.article-body{padding-bottom:clamp(3.3rem,7vw,5.65rem)}
.article-body .wrap>*{max-width:41rem}
.article-body .lede{
  font-size:clamp(1.15rem,1.8vw,1.4rem);line-height:1.5;color:var(--ink);
  margin:0 0 1.65rem;text-wrap:pretty;
}
.article-body p{margin:0 0 1.3rem;line-height:1.7}
.article-body h2{
  font-size:1.2rem;letter-spacing:.01em;line-height:1.25;
  margin:2.6rem 0 1.05rem;
}
.article-body blockquote{
  background:var(--paper-deep);border-radius:var(--r);
  padding:clamp(1.2rem,3vw,1.75rem);margin:1.9rem 0;
  font-size:1.12rem;font-weight:500;color:var(--ink);line-height:1.5;text-wrap:pretty;
}
.article-foot{border-top:1px solid var(--line);padding:clamp(2.35rem,5vw,3.75rem) 0 clamp(3.3rem,7vw,5.2rem)}
.article-foot h2{font-size:clamp(1.35rem,2.2vw,1.8rem);margin-bottom:1.3rem}

/* ---- company page ---- */
/* ---- founders: the step gallery on the dark band, two portrait cards with
   the role in the badge and the summary beneath, the bios in two columns
   below, a hairline over each (amber on the first). ---- */
.founders{padding:clamp(3.75rem,8vw,6.5rem) 0;background:var(--dark);color:var(--dark-text)}
.founders .hiw-eyebrow{color:var(--dark-muted)}
.founders h2{color:var(--dark-text);margin-bottom:0}
.founders .gallery-btn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:var(--dark-text)}
.founders .gallery-btn:hover:not(:disabled){background:rgba(255,255,255,.14);border-color:var(--dark-text)}
.founders .gallery-dots button{background:rgba(245,165,36,.3)}
.founders .gallery-dots button[aria-current="true"]{background:var(--amber)}
.gcard-founder .gnum{max-width:calc(100% - 2.2rem);white-space:normal;line-height:1.3}
.founders-bios{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);margin-top:clamp(2rem,4vw,3rem)}
.founder-bio{display:grid;gap:.85rem;align-content:start;padding-top:1.1rem;border-top:1.2px solid rgba(255,255,255,.14)}
.founder-bio:first-child{border-top-color:var(--amber)}
.founder-role{font-family:var(--font-label);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dark-muted)}
.founder-body{max-width:62ch;color:var(--dark-muted);font-size:.97rem;line-height:1.6}
@media (min-width:701px){.gcard-founder{flex-basis:calc(50% - .625rem)}}
@media (max-width:860px){.founders-bios{grid-template-columns:1fr;gap:2.2rem}}
.values{padding:clamp(3.75rem,8vw,6.5rem) 0;border-top:1px solid var(--line)}
.values h2{margin-bottom:clamp(1.2rem,3vw,2.1rem)}
.office{padding:clamp(3.75rem,8vw,6.5rem) 0;border-top:1px solid var(--line)}
.office-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.9rem,5vw,4.2rem);align-items:center}
.office h2{margin-bottom:.95rem}
.office .photo{border-radius:var(--r);overflow:hidden;border:1px solid rgba(27,30,34,.1)}
.office .photo img{width:100%;height:clamp(16.5rem,32vw,24.7rem);object-fit:cover}

/* ---- rsgx story ---- */
.story-list{list-style:none;max-width:41rem}
.story-list li{padding:.95rem 0;border-top:1px solid var(--line);font-size:1rem;color:var(--ink)}
.story-list li:last-child{border-bottom:1px solid var(--line)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.2rem,3vw,2.8rem);margin:clamp(1.65rem,4vw,2.6rem) 0}
.stat{border-top:2px solid var(--amber);padding-top:1.05rem}
.stat b{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(2.2rem,4vw,3.4rem);line-height:1;color:var(--ink);display:block;margin-bottom:.7rem;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.stat p{font-size:.93rem;max-width:30ch}
.section{padding:clamp(3.3rem,7vw,5.65rem) 0;border-top:1px solid var(--line)}
.section h2{margin-bottom:1.2rem}
.section .measure p{margin-bottom:1.05rem}

/* ---- final band: each page's single dark moment ---- */
.final{
  position:relative;overflow:clip;
  background:
    radial-gradient(56% 90% at 88% 110%, rgba(245,165,36,.16), transparent 65%),
    var(--dark);
  padding:clamp(4.2rem,10vw,8.2rem) 0;text-align:left;
}
.final h2{max-width:18ch}
.final::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(237,237,232,.05) 1px, transparent 1.1px);
  background-size:1.35rem 1.35rem;
  -webkit-mask-image:linear-gradient(to top, rgba(0,0,0,.9), transparent 75%);
  mask-image:linear-gradient(to top, rgba(0,0,0,.9), transparent 75%);
}
.final .wrap{position:relative;z-index:1}
.final h2{color:var(--dark-text);font-size:clamp(1.9rem,4.2vw,3.4rem);margin-bottom:1.9rem}
.final .btn-primary:focus-visible{outline-color:var(--amber)}

/* ---- footer: the main site's footer, ported ----
   Dark canvas, wordmark brand block, link columns, legal row, then the
   giant lowercase wordmark watermark cropped by the bottom edge. */
footer{
  position:relative;overflow:hidden;
  border-top:1px solid rgba(255,255,255,.12);
  padding:clamp(2.6rem,5vw,3.75rem) 0 0;
  background:var(--dark);
}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:2.1rem 1.6rem}
.foot-wordmark{
  font-family:var(--font-display);font-weight:600;letter-spacing:-.022em;
  font-size:1.5rem;text-transform:lowercase;color:#F4F4EF;text-decoration:none;line-height:1;
  display:inline-block;
}
.foot-wordmark span{font-size:.42em;vertical-align:.72em;margin-left:.1em}
.foot-brand p{font-size:.92rem;max-width:26ch;margin-top:.6rem;color:var(--dark-muted)}
.foot-col .mono{color:var(--dark-muted);display:block;margin-bottom:.82rem}
.foot-col a{display:block;color:#C9CBC6;text-decoration:none;font-size:.93rem;padding:.3rem 0;transition:color .18s var(--ease)}
.foot-col a:hover{color:#F4F4EF}
.foot-col a:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.foot-base{
  display:flex;justify-content:space-between;gap:.95rem;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.12);margin-top:clamp(2.1rem,4vw,3.05rem);padding:1.2rem 0 0;
  font-size:.85rem;color:var(--dark-muted);
}
.foot-base a{color:var(--dark-muted)}
.foot-wm{
  margin-top:clamp(1.2rem,2.5vw,2rem);margin-bottom:-.16em;
  font-family:var(--font-display);font-weight:500;font-size:18vw;line-height:.8;
  letter-spacing:-.033em;text-align:center;text-transform:lowercase;
  color:#20232A;user-select:none;pointer-events:none;
}

/* ---- responsive ladder (viewport px, root-size independent) ---- */
@media (max-width:1080px){
  .nav-links{gap:.15rem}
  .nav-links>a,.nav-drop>button{font-size:.88rem}
}
@media (max-width:960px){
  .nav-links{display:none}
  #menu-btn{display:block}
  .hero-grid,.how-grid,.office-grid{grid-template-columns:1fr}
  .hero-shot .frame{width:100%}
  .bento{grid-template-columns:1fr 1fr;grid-template-areas:"a a" "b c" "d d" "e e"}
  .how-shot{position:static;order:-1}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
  .brand b{font-size:1.32rem}
}
@media (max-width:860px){
  .featured a{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr;gap:1.4rem}
}
@media (max-width:520px){
  .nav-in{gap:.82rem}
  .nav-in>.btn{display:none}
}
@media (max-width:640px){
  .bento{grid-template-columns:1fr;grid-template-areas:"a" "b" "c" "d" "e"}
  .cell-d{flex-direction:column}
  .cell-d .pic{flex:none;border-right:0;border-bottom:1px solid rgba(255,255,255,.09);aspect-ratio:16/8}
  .cell-d .txt{align-self:stretch}
  .post a{grid-template-columns:1fr}
  .post .thumb{display:none}
  .foot-grid{grid-template-columns:1fr}
}
/* ---- audience band: one rotating word, sourced audience list ---- */
.audience{padding:clamp(3.3rem,7vw,5.65rem) 0;border-top:1px solid var(--line)}
.audience h2{font-size:clamp(1.8rem,3.8vw,3.1rem)}
.audience .rot{color:var(--amber-deep);display:inline-block}
.audience .rot.swap{animation:rotword .45s var(--ease)}
@keyframes rotword{from{opacity:0;transform:translateY(.35em)}to{opacity:1;transform:none}}

/* ---- swing planner (interactive diagram, not a product mock) ---- */
.planner{padding:clamp(3.75rem,8vw,6.5rem) 0;border-top:1px solid var(--line)}
.planner h2{margin-bottom:1.05rem}
.planner .measure{margin-bottom:1.75rem}
.seg{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.05rem}
.seg .lbl{
  font-family:var(--font-label);font-size:.72rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  align-self:center;margin-right:.35rem;min-width:5.2rem;
}
.seg button{
  font-family:var(--font-label);font-size:.88rem;font-weight:400;
  color:var(--ink);background:var(--card);border:1px solid var(--line-strong);
  border-radius:999px;padding:.4rem .95rem;cursor:pointer;
  transition:background .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease);
}
.seg button:hover{border-color:var(--ink)}
.seg button:active{transform:scale(.97)}
.seg button[aria-pressed="true"]{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.seg button:focus-visible{outline:2px solid var(--amber-deep);outline-offset:2px}
.swingboard{
  background:linear-gradient(180deg,var(--dark-2),var(--dark));
  border:1px solid rgba(255,255,255,.09);border-radius:.55rem;
  padding:clamp(1.05rem,2.5vw,1.65rem);overflow-x:auto;
  position:relative;
}
.swingboard .board{min-width:34rem}
.swingrow{display:grid;grid-template-columns:2.4rem 1fr;gap:.6rem;align-items:center;margin-bottom:.45rem}
.swingrow .who{
  font-family:var(--font-label);font-size:.72rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--dark-muted);
}
.swingrow .days{display:grid;grid-template-columns:repeat(42,1fr);gap:2px}
.swingrow .days i{
  display:block;aspect-ratio:1/1.5;border-radius:2px;background:rgba(255,255,255,.08);
  transition:background .25s var(--ease);
}
.swingrow .days i.on-a{background:var(--amber)}
.swingrow .days i.on-b{background:var(--dark-text)}
.swingrow .days i.cov{background:rgba(245,165,36,.34);aspect-ratio:1/.6}
.swingrow.covrow{margin-top:.6rem;margin-bottom:0}
.swing-legend{display:flex;gap:1.2rem;flex-wrap:wrap;margin-top:1.05rem;font-size:.82rem;color:var(--dark-muted)}
.planner .chip{background:var(--dark-2);border-color:rgba(255,255,255,.16);color:var(--dark-text)}
.swing-legend s{
  text-decoration:none;display:inline-block;width:.7rem;height:.7rem;border-radius:2px;
  margin-right:.4rem;vertical-align:-.06em;
}
.planner .chiprow{margin-top:1.3rem}

/* ---- slip calculator ---- */
.calc{padding:clamp(2.8rem,6vw,4.7rem) 0 clamp(3.75rem,8vw,6.5rem)}
.calc-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(1.9rem,4.5vw,4.2rem);align-items:start}
.calc-inputs .cfield{padding:1.05rem 0 1.2rem;border-top:1px solid var(--line)}
.calc-inputs .cfield:last-child{border-bottom:1px solid var(--line)}
.cfield .toprow{display:flex;justify-content:space-between;align-items:baseline;gap:.95rem;margin-bottom:.6rem}
.cfield label{font-weight:500;color:var(--ink);font-size:.98rem}
.cfield .unit{font-size:.82rem;color:var(--muted)}
.cfield .ctl{display:grid;grid-template-columns:1fr 5.4rem;gap:.95rem;align-items:center}
.cfield input[type="range"]{
  width:100%;accent-color:var(--amber-hot);height:1.2rem;cursor:pointer;background:transparent;
}
.cfield input[type="number"]{
  height:2.35rem;border:1px solid var(--line-strong);border-radius:var(--r);
  background:var(--card);padding:0 .6rem;font:inherit;font-size:.95rem;color:var(--ink);
  font-variant-numeric:tabular-nums;text-align:right;
}
.cfield input[type="number"]:focus-visible{outline:2px solid var(--amber-deep);outline-offset:1px;border-color:var(--amber-deep)}
.calc-out{
  position:sticky;top:5.6rem;
  background:linear-gradient(180deg,var(--dark-2),var(--dark));
  border:1px solid rgba(255,255,255,.09);
  border-radius:.55rem;padding:clamp(1.4rem,3vw,2rem);
  overflow:hidden;
}
.calc-out .row{padding:1.05rem 0;border-top:1px solid rgba(255,255,255,.12);position:relative;z-index:2}
.calc-out .row:first-child{border-top:0;padding-top:0}
.calc-out .k{
  font-family:var(--font-label);font-size:.82rem;font-weight:400;
  letter-spacing:.085em;text-transform:uppercase;color:var(--dark-muted);display:block;margin-bottom:.5rem;
}
.calc-out .v{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.8rem,3vw,2.6rem);line-height:1;color:var(--dark-text);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.calc-out .v.hot{color:var(--amber)}
.calc-out .note{font-size:.82rem;color:var(--dark-muted);margin-top:1.05rem;position:relative;z-index:2}

/* shared spotlight for the dark interactive panels */
.swingboard::before,.calc-out::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(24rem circle at var(--mx,50%) var(--my,0%), rgba(245,165,36,.1), transparent 62%);
  opacity:0;transition:opacity .35s var(--ease);
}
.swingboard:hover::before,.calc-out:hover::before{opacity:1}
.swingboard .board,.swingboard .swing-legend{position:relative;z-index:2}
/* ---- sparks carousel: the calculator's sources as a scrolling row of
   cards, 21st.dev's sparks-carousel in the house palette. Buttons only show
   when there is somewhere to go; the cards rise in on reveal. ---- */
.calc-method{padding:clamp(3.3rem,7vw,5.65rem) 0;border-top:1px solid var(--line)}
.spark-head{margin-bottom:1.5rem}
.spark-title{display:inline-flex;align-items:center;gap:.35rem;text-decoration:none;color:inherit}
.spark-title h2{margin:0}
.spark-title .chev{color:var(--amber-deep);flex:none;transition:transform .25s var(--ease)}
.spark-title:hover .chev{transform:translateX(.25rem)}
.spark-title:focus-visible{outline:2px solid var(--amber-deep);outline-offset:4px;border-radius:4px}
.spark-head .measure{margin-top:.8rem}
.sparks{position:relative}
.spark-track{display:flex;gap:1rem;overflow-x:auto;padding:.25rem .25rem 1rem;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.spark-track::-webkit-scrollbar{display:none}
.spark-track:focus-visible{outline:2px solid var(--amber-deep);outline-offset:2px;border-radius:.5rem}
.spark{flex:0 0 17.5rem;scroll-snap-align:start;display:block;background:var(--card);border:1px solid var(--line);border-radius:.7rem;overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .25s var(--ease),border-color .25s var(--ease)}
.spark:hover{box-shadow:0 16px 36px -26px rgba(46,38,20,.45);border-color:var(--line-strong)}
.spark:focus-visible{outline:2px solid var(--amber-deep);outline-offset:2px}
.spark-pic{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--paper-deep)}
.spark-pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.spark:hover .spark-pic img{transform:scale(1.05)}
.spark-body{display:block;padding:1rem 1.05rem 1.1rem}
.spark h3{font-family:var(--font-display);font-weight:600;font-size:.98rem;line-height:1.3;letter-spacing:-.01em;color:var(--ink);text-transform:none;min-height:2.6em}
.spark-count{display:block;margin-top:1rem}
.spark-count b{display:block;font-family:var(--font-display);font-weight:600;font-size:1.35rem;line-height:1;color:var(--ink)}
.spark-count span{display:block;margin-top:.3rem;font-family:var(--font-label);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sparks[data-reveal].on .spark{animation:rise .5s var(--ease) both;animation-delay:calc(var(--i,0) * .1s)}
.spark-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:2.6rem;height:2.6rem;border-radius:999px;border:1px solid var(--line-strong);background:rgba(250,249,245,.72);backdrop-filter:blur(4px);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 18px -10px rgba(46,38,20,.5);transition:background .2s var(--ease)}
.spark-nav:hover{background:var(--card)}
.spark-nav:focus-visible{outline:2px solid var(--amber-deep);outline-offset:2px}
.spark-nav[hidden]{display:none}
.spark-nav.prev{left:-.6rem}
.spark-nav.next{right:-.6rem}
.spark-nav svg{width:1.3rem;height:1.3rem}

@media (max-width:960px){
  .calc-grid{grid-template-columns:1fr}
  .calc-out{position:static}
}
/* ---- booking dialog: calendar plus time column, in the house palette ---- */
#book{
  border:0;padding:0;background:transparent;margin:auto;
  max-width:min(52rem,calc(100vw - 2rem));width:100%;
  color:var(--body);
}
#book::backdrop{background:rgba(21,23,26,.62);backdrop-filter:blur(3px)}
#book[open]{animation:bookin .3s var(--ease)}
@keyframes bookin{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}
.book-card{
  background:var(--card);border:1px solid var(--line);border-radius:.7rem;overflow:hidden;
  box-shadow:0 2px 6px rgba(46,38,20,.08),0 40px 80px -30px rgba(46,38,20,.5);
  max-height:calc(100dvh - 2.5rem);display:flex;flex-direction:column;
}
.book-body{flex:1;min-height:0}
.book-head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.1rem 1.3rem;border-bottom:1px solid var(--line);
}
.book-head h2{font-size:1.15rem;letter-spacing:.005em;line-height:1.2;text-transform:none}
.book-head p{font-size:.85rem;color:var(--muted);margin-top:.2rem}
.book-x{
  flex:none;width:2.2rem;height:2.2rem;border-radius:999px;border:1px solid var(--line-strong);
  background:var(--card);color:var(--ink);cursor:pointer;font-size:1.1rem;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.book-x:hover{border-color:var(--ink);background:var(--paper-deep)}
.book-x:focus-visible{outline:2px solid var(--amber-deep);outline-offset:2px}
.book-body{display:grid;grid-template-columns:minmax(0,1fr) 12.5rem}
.book-cal{padding:1.3rem}
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:.9rem;max-width:21rem}
.cal-nav b{font-weight:600;color:var(--ink);font-size:1rem}
.cal-nav div{display:flex;gap:.4rem}
.cal-btn{
  width:2.1rem;height:2.1rem;border-radius:.4rem;border:1px solid var(--line-strong);
  background:var(--card);color:var(--ink);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .18s var(--ease),opacity .18s var(--ease);
}
.cal-btn:hover{border-color:var(--ink)}
.cal-btn:disabled{opacity:.32;pointer-events:none}
.cal-btn:focus-visible{outline:2px solid var(--amber-deep);outline-offset:2px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.2rem;max-width:21rem}
.cal-grid .wd{
  font-family:var(--font-label);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);text-align:center;padding-bottom:.35rem;
}
.cal-grid button{
  aspect-ratio:1;border:0;border-radius:.4rem;background:transparent;
  font:inherit;font-size:.92rem;color:var(--ink);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s var(--ease),color .15s var(--ease);
}
.cal-grid button:hover{background:var(--paper-deep)}
.cal-grid button[disabled]{color:var(--line-strong);pointer-events:none;text-decoration:line-through}
.cal-grid button[aria-pressed="true"]{background:var(--amber);color:var(--ink);font-weight:600}
.cal-grid button.today{box-shadow:inset 0 0 0 1px var(--line-strong)}
.cal-grid button:focus-visible{outline:2px solid var(--amber-deep);outline-offset:1px}
.cal-grid span{aspect-ratio:1}
.book-times{border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.book-times .mono{padding:1.3rem 1rem .6rem;color:var(--muted);display:block}
.book-slots{overflow-y:auto;padding:0 1rem 1.3rem;display:flex;flex-direction:column;gap:.4rem}
.book-slots button{
  height:2.35rem;border-radius:var(--r);border:1px solid var(--line-strong);
  background:var(--card);font:inherit;font-size:.9rem;color:var(--ink);cursor:pointer;
  transition:background .15s var(--ease),border-color .15s var(--ease);
}
.book-slots button:hover{border-color:var(--ink)}
.book-slots button[aria-pressed="true"]{background:var(--amber);border-color:var(--amber);font-weight:600}
.book-slots button:focus-visible{outline:2px solid var(--amber-deep);outline-offset:2px}
.book-foot{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:1.1rem 1.3rem;border-top:1px solid var(--line);background:var(--paper-deep);
}
.book-foot .status{font-size:.9rem;color:var(--body);flex:1;min-width:14rem}
.book-foot .status b{color:var(--ink);font-weight:600}
.book-foot .btn{flex:none}
/* Booking step two: the book-a-demo layout. The pitch (points, the chosen
   slot, the product shot) beside the form; the dialog widens for it. */
#book.step2{max-width:min(66rem,calc(100vw - 2rem))}
.book-step2{display:none;padding:0;overflow:auto;min-height:0}
.demo-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.demo-pitch{padding:1.5rem 1.6rem 1.6rem;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:1.1rem}
.demo-intro{font-size:.95rem;color:var(--body)}
.demo-points{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.demo-points li{display:flex;gap:.6rem;align-items:flex-start;font-size:.92rem;color:var(--body);line-height:1.45}
.demo-points li b{color:var(--ink);font-weight:600}
.demo-points .tick{flex:none;width:1rem;height:1rem;margin-top:.2rem;color:var(--amber-deep)}
.demo-slot{display:flex;align-items:baseline;gap:.7rem;padding:.8rem .9rem;border:1px solid var(--line);border-radius:var(--r);background:var(--paper-deep)}
.demo-slot .mono{color:var(--muted)}
.demo-slot b{color:var(--ink);font-weight:600}
.demo-pitch h3{font-family:var(--font-display);font-weight:600;font-size:1.25rem;letter-spacing:-.015em;line-height:1.15;text-transform:none;margin-top:.3rem}
.demo-shot{border:1px solid var(--line);border-radius:.6rem;padding:.5rem;background:var(--card)}
.demo-shot img{display:block;width:100%;height:auto;border-radius:.35rem}
.demo-form{padding:1.5rem 1.6rem 1.6rem}
.demo-form .field{margin-bottom:.9rem}
.demo-consent{font-size:.78rem;line-height:1.5;color:var(--muted);margin-top:.4rem}
#book.step2 .book-body,#book.step2 .book-foot .status{display:none}
#book.step2 .book-step2{display:block}
#book.done .book-body,#book.done .book-step2,#book.done .book-foot{display:none}
.book-done{display:none;padding:2rem 1.3rem 2.4rem;text-align:center}
.book-done h3{font-size:1.2rem;margin-bottom:.5rem}
.book-done p{max-width:36ch;margin:0 auto}
#book.done .book-done{display:block}
@media (max-width:700px){
  .book-body{grid-template-columns:1fr}
  .book-times{border-left:0;border-top:1px solid var(--line)}
  .book-slots{max-height:11rem}
  .demo-grid{grid-template-columns:1fr}
  .demo-pitch{border-right:0;border-bottom:1px solid var(--line)}
  .demo-shot{display:none}
  .book-foot{flex-direction:column;align-items:stretch}
  .book-foot .status{min-width:0}
  .book-foot .btn{width:100%}
}

/* ---- article cards: blogs.tsx ported ----
   Square image with the category tag pinned to the corner, title, excerpt,
   a boxed arrow that hands over to a second arrow on hover, and the date
   with its short rule. The whole card is the link. */
.bloggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(18.5rem,1fr));gap:1.5rem}
.bcard{
  display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  text-decoration:none;color:inherit;
  transition:box-shadow .25s var(--ease),transform .25s var(--ease),border-color .25s var(--ease);
}
.bcard:hover{box-shadow:0 18px 40px -28px rgba(46,38,20,.45);transform:translateY(-2px);border-color:var(--line-strong)}
.bcard:focus-visible{outline:2px solid var(--amber-deep);outline-offset:2px}
.bcard .pic{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:var(--paper-deep)}
.bcard .pic img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.bcard:hover .pic img{transform:scale(1.03)}
.bcard .tag{
  position:absolute;top:0;left:0;background:var(--card);padding:.32rem .6rem;
  font-family:var(--font-label);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink);
}
.bcard .body{padding:1.1rem 1.1rem 1.2rem;display:flex;flex-direction:column;flex:1}
.bcard h3{font-weight:500;font-size:1.25rem;line-height:1.25;letter-spacing:-.01em;margin-bottom:.6rem;color:var(--ink)}
.bcard p{font-size:.9rem;color:var(--muted);line-height:1.55;margin-bottom:1.2rem;flex:1}
.bcard .foot{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap}
.bcard .read{display:inline-flex;align-items:center;gap:.6rem;font-size:.85rem;font-weight:500;color:var(--ink)}
.bcard .arrow{
  position:relative;width:2.1rem;height:2.1rem;border:1px solid var(--line-strong);
  display:inline-flex;align-items:center;justify-content:center;overflow:hidden;
  transition:background .3s ease-in,border-color .3s ease-in,color .3s ease-in;
}
.bcard .arrow svg{position:absolute;width:1rem;height:1rem;transition:transform .45s ease-in-out,opacity .45s ease-in-out}
.bcard .arrow svg.b{transform:translateX(-2.3rem)}
.bcard:hover .arrow{background:var(--ink);border-color:var(--ink);color:#F4F4EF}
.bcard:hover .arrow svg.a{transform:translateX(2.3rem);opacity:0}
.bcard:hover .arrow svg.b{transform:translateX(0)}
.bcard .date{display:inline-flex;align-items:center;gap:.6rem;font-size:.72rem;color:var(--muted);white-space:nowrap}
.bcard .date::after{content:"";width:2.6rem;border-top:1px solid var(--line-strong)}
.insights-grid{padding:0 0 clamp(3.75rem,8vw,6.5rem)}

/* ---- hover stack: connoisseur-stack-interactor ported ----
   A numbered menu on the left; the active item's image on the right, shown
   through a set of clip shapes that scale in, breathe and scale out on a
   loop. Hovering, focusing or tapping an item swaps the image and the clip
   set. The active item also reveals its one-line body, so the copy the
   list used to carry is not lost to the effect. */

/* ---- arrival sequence ----
   A black overlay holding the wordmark while a travelling lens magnifies the
   letters, then the gate splits down the middle of site|gatex and both halves
   slide off. Both panels carry the SAME full wordmark, centred identically,
   and each shows only its side via clip-path: butting two strings together
   would need pixel perfect kerning and would drift as the tracking animates.
   Home only, once a session, never under reduced motion. */
.intro{
  position:fixed;inset:0;z-index:100;
  --intro-split:50%;
}
.intro-panel{position:absolute;inset:0;background:#000;will-change:transform}
.intro-panel.l{clip-path:inset(0 calc(100% - var(--intro-split)) 0 0)}
.intro-panel.r{clip-path:inset(0 0 0 var(--intro-split))}
.intro-stage{
  position:absolute;top:50%;left:50%;translate:-50% -50%;
  display:grid;justify-items:center;
}
.intro-wm{
  display:block;opacity:0;white-space:nowrap;
  font-family:var(--font-display);font-weight:600;line-height:1.1;
  font-size:clamp(2.4rem,11vw,9rem);letter-spacing:-.033em;
  color:#F4F4EF;text-transform:lowercase;
}
.intro-ch{display:inline-block;will-change:transform}
.intro-ch.settle{transition:transform .4s var(--ease)}
.intro-reg{font-size:.3em;vertical-align:.9em}
.intro-flash{
  position:absolute;top:12%;bottom:12%;left:var(--intro-split);width:2px;
  margin-left:-1px;background:var(--amber);opacity:0;
}
.intro-skip{
  position:absolute;left:0;right:0;bottom:clamp(1.6rem,5vh,3rem);
  text-align:center;opacity:0;
  font-family:var(--font-label);font-size:.78rem;letter-spacing:.085em;
  text-transform:uppercase;color:rgba(237,237,232,.5);
}
/* Nothing moves until the display face has loaded and the script adds .go.
   That keeps the wordmark from fading in as a fallback face and snapping to
   General Sans mid-fade, and it starts every clock together: the CSS
   animations here and the script's lens timers count from the same instant.
   The gate itself is CSS, not script, so that a throttled tab still opens
   it; the lens is the only part that needs a frame loop. */
.intro.go .intro-wm{animation:introIn 1.6s var(--ease) both}
.intro.go .intro-skip{animation:introSkip 4.7s linear 1.5s both}
.intro.go .intro-flash{animation:introFlash .7s linear 5.5s both}
.intro.go .intro-panel.l{animation:introOpenL 1.8s var(--ease) 5.8s both}
.intro.go .intro-panel.r{animation:introOpenR 1.8s var(--ease) 5.8s both}
.intro.skipping .intro-panel.l{animation:introOpenL .3s ease-in both}
.intro.skipping .intro-panel.r{animation:introOpenR .3s ease-in both}
.intro.skipping .intro-skip,.intro.skipping .intro-flash{animation:none;opacity:0}
@keyframes introIn{
  from{opacity:0;letter-spacing:.017em}
  to{opacity:1;letter-spacing:-.033em}
}
@keyframes introSkip{0%{opacity:0}11%{opacity:1}91%{opacity:1}100%{opacity:0}}
@keyframes introFlash{
  0%{opacity:0;transform:scaleY(.2)}
  26%{opacity:1;transform:scaleY(1)}
  43%{opacity:1}
  100%{opacity:0}
}
@keyframes introOpenL{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@keyframes introOpenR{from{transform:translateX(0)}to{transform:translateX(100%)}}
/* Black from the very first paint. The script sets intro-cover in <head>,
   before the body exists, so the hero can never flash before the overlay
   mounts; mounting removes it, the overlay takes over, and the page stays
   pinned until the gate has opened. The gutter is reserved permanently so
   releasing the scroll lock does not shift the layout sideways. */
html{scrollbar-gutter:stable}
html.intro-cover::before{content:"";position:fixed;inset:0;background:#000;z-index:99}
html.intro-armed{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-reveal],.fade-in,.fade-up{opacity:1;transform:none}
}