/* ==========================================================================
   site.css — sections. Body order follows adsinc.com:
   hero → integration (light, centred) → category strip → 60/40 photo+panel
   → dark band → 60/40 panel+photo → testimonial → footer
   ========================================================================== */

/* ---------- nav (no utility bar above it) ---------- */
/* One nav, one colour, at every width: solid black, sticky, always.
   It used to fade transparent -> white on scroll, but the pine palette makes the
   nav text light, so that white state was light-on-white. */
.nav{position:sticky;top:0;z-index:80;background:var(--white);border-bottom:1px solid var(--line)}
.nav .wm__n{color:var(--ink)}
.nav .wm__s{color:var(--ink-3)}
.nav__l a{color:var(--ink)}
.nav__l a:hover{color:#fff}
.nav__tel{color:var(--ink)}
.nav .tbd{color:var(--ink-3);font-style:italic}
.burger{border-color:var(--line-2)}
.burger i{background:var(--ink)}
.drw{background:var(--white)}
.drw a:not(.btn){color:var(--ink);border-bottom-color:var(--line)}
.nav__in{display:flex;align-items:center;gap:clamp(24px,3vw,52px);min-height:var(--navh)}
.wm{flex:none;line-height:1}
.wm__n{display:block;font-family:var(--f-d);font-weight:700;font-size:clamp(1.05rem,1rem + .28vw,1.25rem);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.wm__s{display:block;margin-top:5px;font-family:var(--f);font-weight:500;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.nav__l{display:flex;gap:clamp(20px,2.2vw,36px);margin-left:auto;white-space:nowrap}
.nav__l a{font-family:var(--f-d);font-weight:600;font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;position:relative;padding-block:6px}
.nav__l a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--brass);transform:scaleX(0);transform-origin:0;transition:transform .3s var(--e)}
.nav__l a:hover::after{transform:scaleX(1)}
.nav__r{display:flex;align-items:center;gap:var(--s5);flex:none}
.nav__tel{font-weight:600;font-size:var(--t-sm)}
.burger{display:none;width:46px;height:46px;background:none;border:1px solid;cursor:pointer;padding:0}
.burger i{display:block;width:18px;height:2px;margin:4px auto;transition:transform .3s var(--e),opacity .2s var(--e)}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:1080px){.nav__l,.nav__tel{display:none}.burger{display:block;margin-left:auto}.nav__r .btn{display:none}}
.drw{display:none;border-top:1px solid rgba(255,255,255,.16);padding-bottom:var(--s6)}
.drw.open{display:block}
.drw a:not(.btn){display:block;padding:var(--s4) 0;border-bottom:1px solid;font-family:var(--f-d);font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.drw .btn{width:100%;margin-top:var(--s5)}

/* ---------- HERO — full-bleed reveal ---------- */
.hero{position:relative;isolation:isolate;display:flex;align-items:flex-end;overflow:hidden;background:#0A0E10;
  min-height:calc(100vh - var(--navh));min-height:calc(100svh - var(--navh))}
.hero__bg{position:absolute;inset:-5%;z-index:-2;will-change:transform}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:56% 44%}
.js .hero.go .hero__bg{animation:heroZoom 2.6s var(--e) forwards}
@keyframes heroZoom{from{transform:scale(1.24)}to{transform:scale(1)}}

/* the wipe that pulls back off the image */
.hero__wipe{position:absolute;inset:0;z-index:6;background:#0A0E10;transform-origin:100% 50%;pointer-events:none}
.js .hero.go .hero__wipe{animation:heroWipe 1.2s var(--e) .12s forwards}
@keyframes heroWipe{to{transform:scaleX(0)}}
.hero__wipe{transform:scaleX(0)}          /* no-JS: never covers the image */
.js .hero__wipe{transform:scaleX(1)}

.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to top,rgba(8,12,14,.92) 2%,rgba(8,12,14,.42) 48%,transparent),
             linear-gradient(96deg,rgba(8,12,14,.8),transparent 60%)}
.hero__in{position:relative;z-index:20;width:100%;max-width:var(--maxw);margin:0 auto;
  padding:0 var(--gutter) clamp(72px,11vh,132px)}
.hero .eb{display:block;margin-bottom:22px;color:var(--brass-l)}
.hero h1{color:#fff;margin-bottom:26px}
.hero .lede{color:rgba(255,255,255,.86);margin-bottom:38px;max-width:50ch}
.hero__act{display:flex;flex-wrap:wrap;gap:12px}
.hero .btn-o{color:#fff;border-color:rgba(255,255,255,.5)}
.hero .btn-o:hover{background:#fff;color:var(--ink);border-color:#fff}

/* word-by-word build on the static line */
.hero .stag span{display:inline-block}
.js .hero .stag span{opacity:0;transform:translateY(.4em)}
.js .hero.go .stag span{animation:heroWord .7s var(--e) forwards;animation-delay:calc(1.05s + var(--i)*45ms)}
@keyframes heroWord{to{opacity:1;transform:none}}
.js .hero .eb,.js .hero .rot,.js .hero .lede,.js .hero .hero__act{opacity:0}
.js .hero.go .eb{animation:heroUp .7s var(--e) .95s forwards}
.js .hero.go .rot{animation:heroUp .1s linear 1.45s forwards}
.js .hero.go .lede{animation:heroUp .7s var(--e) 1.75s forwards}
.js .hero.go .hero__act{animation:heroUp .7s var(--e) 1.95s forwards}
@keyframes heroUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- the rotating word ---------- */
.rot{display:block;position:relative;height:1.06em;line-height:.93;overflow:hidden}
.rot b{position:absolute;left:0;top:0;width:100%;font-weight:700;white-space:nowrap;line-height:.93;
  color:var(--brass-l);transform:translateY(112%);opacity:0}
/* The visible state is a real declaration, not something only the animation
   produces — a stalled or disabled animation can never leave the word blank.
   The keyframes only describe where it comes from. */
.rot b:first-child{opacity:1;transform:none}
.rot b.in{opacity:1;transform:none;animation:wIn .6s var(--e)}
.rot b.out{opacity:0;transform:translateY(-112%);animation:wOut .48s var(--e)}
@keyframes wIn{from{transform:translateY(112%);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes wOut{from{transform:translateY(0);opacity:1}to{transform:translateY(-112%);opacity:0}}

@media(prefers-reduced-motion:reduce){
  .js .hero .stag span,.js .hero .eb,.js .hero .rot,.js .hero .lede,.js .hero .hero__act{opacity:1!important;transform:none!important;animation:none!important}
  .hero__wipe{display:none}
  .rot b{position:relative;opacity:1;transform:none;animation:none!important}
  .js .rot b:first-child{opacity:1;transform:none}
  .rot b:not(:first-child){display:none}
}

/* ---------- integration band (ads `sup`) ---------- */
.intro{max-width:70ch;margin-inline:auto}
.intro .d{margin-bottom:var(--s5)}

/* category strip — ads' OCIE / WEPO / AERO tab row */
.cats{display:flex;flex-wrap:wrap;justify-content:center;gap:14px clamp(16px,2.2vw,34px);margin-top:var(--s8);padding-block:var(--s5);border-block:1px solid var(--line)}
.cat{
  font-family:var(--f-d);font-weight:700;font-size:var(--t-xs);letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);background:none;border:0;padding:6px 2px;cursor:pointer;
  position:relative;transition:color .25s var(--e);
}
.cat::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--brass);transform:scaleX(0);transition:transform .3s var(--e)}
.cat:hover{color:var(--ink)}
.cat[aria-selected="true"]{color:var(--brass)}
.cat[aria-selected="true"]::after{transform:scaleX(1)}

.catpanel{margin-top:var(--s7);min-height:88px}
.catpanel h3{margin-bottom:var(--s3)}
.catpanel ul{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px;margin-top:var(--s4)}
.catpanel li{border:1px solid var(--line);padding:8px 16px;font-size:var(--t-sm);color:var(--ink-2);background:var(--white)}

/* ---------- 60/40 split module (ads `sixtyForty`) ---------- */
.sf{display:grid;grid-template-columns:1.15fr 1fr;align-items:stretch}
.sf--flip{grid-template-columns:1fr 1.15fr}
.sf--flip .sf__m{order:2}
@media(max-width:980px){.sf,.sf--flip{grid-template-columns:1fr}.sf--flip .sf__m{order:initial}}
.sf__m{position:relative;overflow:hidden;min-height:min(70vh,600px);background:var(--shade-2)}
.sf__m img{width:100%;height:100%;object-fit:cover}
.sf__c{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;padding:clamp(44px,5vw,80px) clamp(28px,4vw,68px)}
.sf__c > *{width:100%}
.sf__c .eb{display:block;margin-bottom:var(--s5)}
.sf__c h2{margin-bottom:var(--s5)}
.sf__c p{margin-bottom:var(--s6);max-width:46ch}
.sf__act{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s2)}
.sf__pts{margin:0 0 var(--s7)}
.sf__pts li{display:flex;gap:var(--s4);padding:13px 0;border-bottom:1px solid var(--line);font-size:var(--t-sm)}
.sf__pts li:first-child{border-top:1px solid var(--line)}
.sf__pts b{flex:none;min-width:11ch;font-family:var(--f-d);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:var(--t-xs);color:var(--brass);padding-top:3px}
.dark .sf__pts li{border-color:rgba(255,255,255,.16)}

/* ---------- how to buy: clean rows, no code styling ---------- */
.buy{display:grid;gap:1px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14)}
.buy__r{display:grid;grid-template-columns:1.1fr .7fr 2fr;gap:var(--s5);background:var(--navy);padding:var(--s5) var(--s6);align-items:baseline;transition:background-color .25s var(--e)}
.buy__r:hover{background:var(--navy-2)}
.buy__hd{background:var(--navy-2)}
.buy__hd span{font-family:var(--f-d);font-weight:600;font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62)}
@media(max-width:820px){.buy__r{grid-template-columns:1fr;gap:var(--s2)}.buy__hd{display:none}}
.buy__n{font-family:var(--f-d);font-weight:600;font-size:var(--t-md);text-transform:uppercase;letter-spacing:.02em;color:#fff}
.buy__c{font-family:var(--f-d);font-weight:700;font-size:var(--t-md);color:var(--brass-l);letter-spacing:.01em}
.buy__d{font-size:var(--t-sm);color:rgba(255,255,255,.72);max-width:52ch}

/* ---------- registrations: compact two-up rows inside the 60/40 panel ---------- */
.regs{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s6);margin:0 0 var(--s7)}
@media(max-width:520px){.regs{grid-template-columns:1fr}}
.regs > div{display:flex;flex-direction:column;gap:3px;padding:12px 0;border-bottom:1px solid var(--line)}
.regs dt{font-family:var(--f-d);font-weight:600;font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.regs dd{margin:0;font-size:var(--t-sm);font-weight:500;color:var(--ink)}

/* ---------- testimonial (ads `ql`) ---------- */
.quote{max-width:64ch;margin-inline:auto;text-align:center}
.quote .stars{color:var(--brass);letter-spacing:.32em;font-size:1.05rem;margin-bottom:var(--s5)}
.quote blockquote{font-family:var(--f-d);font-weight:600;text-transform:uppercase;font-size:var(--t-lg);line-height:1.16;color:var(--ink)}
.quote figcaption{margin-top:var(--s5);font-size:var(--t-sm);color:var(--ink-3)}

/* ---------- closing CTA ---------- */
.close{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
@media(max-width:840px){.close{grid-template-columns:1fr}}
.close__c{background:var(--white);padding:clamp(40px,5vw,80px) clamp(26px,3.6vw,64px);display:flex;flex-direction:column;gap:var(--s4)}
.close__c p{margin-bottom:var(--s4)}
.close__c .btn{align-self:flex-start;margin-top:auto}

/* ---------- footer ---------- */
.ft{background:var(--navy);color:rgba(255,255,255,.72);padding-block:var(--s9) var(--s6)}
.ft .wm__n{color:#fff}
.ft .wm__s{color:rgba(255,255,255,.55)}
.ft__g{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:var(--s8) var(--s6);padding-bottom:var(--s8);border-bottom:1px solid rgba(255,255,255,.16)}
@media(max-width:940px){.ft__g{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ft__g{grid-template-columns:1fr}}
.ft h3{font-family:var(--f-d);font-weight:600;font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:var(--s5)}
.ft li{margin-bottom:11px}
.ft li a{font-size:var(--t-sm);color:rgba(255,255,255,.82)}
.ft li a:hover{color:#fff}
.ft__reg{margin-top:var(--s6);font-size:var(--t-sm);line-height:2}
.ft__reg b{color:#fff;font-weight:600}
.ft__b{display:flex;flex-wrap:wrap;gap:var(--s5);padding-top:var(--s5);font-size:var(--t-xs);color:rgba(255,255,255,.5)}
.ft__b .sp{flex:1}

/* ==========================================================================
   MOBILE — audited at 390px and 360px
   ========================================================================== */

/* tap-to-call, phone only. Desktop keeps the written number. */
.callbtn{display:none;align-items:center;justify-content:center;width:46px;height:46px;
  border:1px solid var(--line-2);color:var(--ink);flex:none}
.callbtn svg{width:19px;height:19px}

@media(max-width:1080px){
  .callbtn{display:inline-flex}
  .nav__r{gap:10px}
}

@media(max-width:1080px){
  /* ---- mobile header: a solid black bar from load that sticks while you scroll ----
     It was a transparent overlay that only went solid on scroll, so the wordmark
     sat on the bright top of the hero photo and was hard to read. And with the
     desktop link row hidden there was nothing left pushing the controls right,
     so they floated mid-bar. */
  .nav__r{margin-left:auto}   /* flush right — the desktop link row was what pushed these over */
  .burger{margin-left:0}
}

@media(max-width:640px){
  /* the bar now takes real space, so the hero fills what's left */

  /* ---- hero: the whole point is one clear message, not a wall ---- */
  .hero__in{padding:0 var(--gutter) 56px}

  /* eyebrow fits on one line instead of wrapping to two */
  .hero .eb{font-size:10.5px;letter-spacing:.1em;margin-bottom:16px}

  .hero h1{font-size:2.5rem;margin-bottom:30px}

  /* the description is desktop-only — it crowded the hero on a phone */
  .hero .lede{display:none}
  .js .hero.go .hero__act{animation-delay:1.7s}
  .rot{height:1.1em}


  /* buttons: full width, thumb-sized, no wasted height */
  .hero__act{gap:10px;width:100%}
  .hero__act .btn{width:100%;min-height:52px}

  /* ---- section headings were running 5 lines ---- */
  .sec{padding-block:56px}
  .intro .d-2,.sh .d-2{font-size:1.85rem}
  .sh{margin-bottom:40px}

  /* ---- category tabs ----
     Two problems on a phone: 31px tall failed the 44px tap target, and a
     left-aligned wrapped grid clashed with the centred content around it.
     A single scrolling row fixes both and is the native mobile pattern. */
  .cats{
    flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    justify-content:flex-start;gap:22px;margin-top:40px;padding:14px var(--gutter);
    margin-inline:calc(var(--gutter)*-1);          /* bleed to the screen edges */
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .cats::-webkit-scrollbar{display:none}
  .cat{flex:0 0 auto;padding:13px 0;font-size:11px;scroll-snap-align:start}
  .cat::after{bottom:6px}
  .catpanel{margin-top:32px}

  /* ---- 60/40 blocks ---- */
  .sf__m{min-height:46vh}
  .sf__c{padding:48px var(--gutter)}
  .sf__pts b{min-width:9ch}

  /* ---- how-to-buy rows read as cards on a phone ---- */
  .buy__r{padding:20px var(--s5)}
  .buy__n{font-size:1.05rem}
  .buy__c{font-size:1.05rem}

  /* ---- registrations ---- */
  .regs{grid-template-columns:1fr 1fr;gap:0 20px}

  /* ---- closing CTAs ---- */
  .close__c{padding:44px var(--gutter)}
  .close__c .btn{width:100%}

  /* ---- footer: 17px links were too tight to tap ---- */
  .ft{padding-block:56px 32px}
  .ft__g{gap:40px 24px;padding-bottom:40px}
  .ft li{margin-bottom:0}
  .ft li a{display:inline-block;padding:11px 0;font-size:15px}
  .wm__s{font-size:11px}
}

@media(max-width:380px){
  .hero h1{font-size:2.05rem}
  .cat{flex:0 0 100%}
  .regs{grid-template-columns:1fr}
}

/* ==========================================================================
   WORDMARK — your logo art, knocked out to the off-white so it sits on the
   black bar. Stacked lockup, no rule.
   ========================================================================== */
.wm{flex:none;line-height:0;display:block}
.wm__i{display:block;width:auto;height:30px}
@media(max-width:1080px){.wm__i{height:27px}}

.ft .wm{margin-bottom:4px}
.ft .wm__i{height:34px}
@media(max-width:1080px){.ft .wm__i{height:30px}}