/* ============================================================
   S.A.S Solutions
   Palette and contrast rules come from
   docs/superpowers/specs/2026-08-29-sas-solutions-website-design.md
   Verify any colour change with:  python3 tools/contrast-check.py
   ============================================================ */

@font-face{
  font-family:"Archivo";
  src:url("../assets/fonts/Archivo-var-latin.woff2") format("woff2-variations");
  font-weight:400 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"InterVar";
  src:url("../assets/fonts/Inter-var-latin.woff2") format("woff2-variations");
  font-weight:400 600; font-style:normal; font-display:swap;
}

:root{
  /* ground */
  --ink:#0A0B0D;
  --raised:#101216;

  /* crimson: FILL only. As small text on --ink it measures 2.85:1 and fails AA. */
  --crimson:#B01B2E;
  /* crimson for TEXT on dark: 6.32:1, passes AA */
  --crimson-tx:#FF5566;

  /* white at alpha. Anything below .45 fails AA as body text on --ink. */
  --tx:#FFFFFF;
  --tx-2:rgba(255,255,255,.72);   /* 10.0:1 */
  --tx-3:rgba(255,255,255,.62);   /*  7.7:1 */
  --tx-4:rgba(255,255,255,.50);   /*  5.2:1 — floor for real text */
  --hair:rgba(255,255,255,.10);   /* decorative only */
  --hair-2:rgba(255,255,255,.18);

  --sans:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --body:"InterVar",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --wrap:1180px;
  --gut:clamp(20px,5vw,44px);
  --sec-y:clamp(64px,9vw,116px);
  --r:4px;
}

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

html{scroll-behavior:smooth; scroll-padding-top:84px;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }

body{
  margin:0;
  background:var(--ink);
  color:var(--tx-3);
  font-family:var(--body);
  font-size:16.5px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,.eyebrow,.btn,.strip-in,.cred-k,.reach-k{font-family:var(--sans);}

h1,h2,h3{color:var(--tx); margin:0; text-wrap:balance;}
h1{font-size:clamp(38px,6.6vw,72px); font-weight:800; letter-spacing:-.035em; line-height:1.02;}
h2{font-size:clamp(27px,3.9vw,44px); font-weight:800; letter-spacing:-.03em; line-height:1.08;}
h3{font-size:clamp(19px,2vw,22px); font-weight:700; letter-spacing:-.018em; line-height:1.25;}
p{margin:0;}
a{color:inherit;}
ul{margin:0; padding:0; list-style:none;}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut);}

.eyebrow{
  font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--crimson-tx); margin:0 0 14px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--crimson); color:#fff; padding:12px 18px; font-family:var(--sans); font-weight:700;
}
.skip:focus{left:0;}

:where(a,button,input,textarea):focus-visible{
  outline:2px solid var(--crimson-tx); outline-offset:3px; border-radius:2px;
}

/* ─────────── buttons ─────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-size:13px; font-weight:700; letter-spacing:.01em;
  padding:11px 20px; border-radius:var(--r); border:1px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn-lg{font-size:14px; padding:15px 28px;}
.btn-fill{background:var(--crimson); color:#fff;}     /* white on crimson = 6.9:1 */
.btn-fill:hover{background:#C41F35;}
.btn-ghost{border-color:var(--hair-2); color:var(--tx);}
.btn-ghost:hover{border-color:rgba(255,255,255,.42); background:rgba(255,255,255,.04);}
.btn:active{transform:translateY(1px);}
.ico{width:17px; height:17px; flex:none;}

/* ─────────── header ─────────── */
.hdr{
  position:sticky; top:0; z-index:100;
  background:rgba(10,11,13,.86);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hair);
  transition:border-color .25s ease;
}
.hdr.scrolled{border-bottom-color:var(--hair-2);}
.hdr-in{
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding:14px var(--gut);
  display:flex; align-items:center; gap:clamp(16px,3vw,40px);
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--tx); flex:none;}
/* The supplied logo is a lockup — shield and wordmark in one image — so the
   header carries no separate text. Its dark ground is transparent and the
   near-black halves were lifted to silver so it reads on --ink. Width comes
   from the intrinsic ratio on the <img>, which also prevents layout shift. */
.brand-logo{height:44px; width:auto; flex:none; display:block;}

.nav{display:flex; gap:clamp(18px,2.4vw,30px); margin-left:auto;}
.nav a{
  font-family:var(--sans); font-size:13.5px; font-weight:500; color:var(--tx-3);
  text-decoration:none; padding:6px 0; position:relative; transition:color .18s ease;
}
.nav a:hover{color:var(--tx);}
.nav a.active{color:var(--tx);}
.nav a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--crimson);
}
.hdr-cta{flex:none;}

.burger{
  display:none; flex-direction:column; gap:5px; justify-content:center;
  width:46px; height:44px; margin-left:auto; padding:0;   /* 44px: minimum comfortable tap target */
  background:none; border:1px solid var(--hair-2); border-radius:var(--r); cursor:pointer;
}
.burger span{display:block; width:18px; height:2px; background:var(--tx); margin-inline:auto; transition:transform .22s ease, opacity .22s ease;}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ─────────── hero ─────────── */
.hero{position:relative; overflow:hidden;}
/* Legibility scrim. It must live inside .hero-stage: .hero-in sets z-index:2,
   which opens a stacking context, so anything painted on .hero itself lands
   under the artwork no matter how high its z-index. Above the art, below the
   copy. Tuned so the PSIRA eyebrow clears AA — see the contrast rule.

   The earlier falloff was a lazy straight line across the whole hero: it let go
   too early to fully cover the eyebrow, and was still taking half the light out
   of the frame at 58%, which is exactly where the shield sits. So the mark was
   being dimmed to protect copy that had already ended. This holds the copy
   column hard to 40%, then drops away and is gone by 84%, clear of the artwork.
   Measured on glyph pixels at 1440: eyebrow 6.10:1, h1 18.56:1, lede 18.44:1 —
   all above the previous values as well as above AA. */
.hero-stage::after{
  content:""; position:absolute; z-index:2; inset:0; pointer-events:none;
  background:linear-gradient(90deg,
    rgba(10,11,13,.97) 0%, rgba(10,11,13,.95) 40%,
    rgba(10,11,13,.70) 52%, rgba(10,11,13,.22) 68%, rgba(10,11,13,0) 84%);
}
.hero-in{
  position:relative; z-index:2; pointer-events:none;
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding:clamp(56px,9vw,104px) var(--gut) clamp(56px,8vw,96px);
  display:grid; grid-template-columns:1.08fr .92fr; align-items:center; gap:clamp(28px,5vw,64px);
  min-height:min(84vh,760px);
}
.hero-copy{position:relative; z-index:2; pointer-events:auto;}
.hero-rule{display:block; width:44px; height:2px; background:var(--crimson); margin-bottom:22px;}
.hero-lede{
  font-size:clamp(16px,1.7vw,18.5px); color:var(--tx-3);
  margin:24px 0 0; max-width:50ch; line-height:1.65;
}
.hero-ctas{display:flex; gap:12px; margin-top:34px; flex-wrap:wrap;}

/* Audio can only be unmuted by a real click, so it needs a real control. */
.sound-toggle{
  margin-top:26px; padding:7px 14px;
  font-family:var(--sans); font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--tx-3); background:none; cursor:pointer;
  border:1px solid rgba(255,255,255,.28); border-radius:var(--r);
  transition:color .18s ease, border-color .18s ease;
}
.sound-toggle:hover{color:var(--tx); border-color:rgba(255,255,255,.4);}
.sound-toggle[aria-pressed="true"]{color:var(--tx); border-color:var(--crimson-tx);}

.hero-stage{position:absolute; z-index:0; inset:0; overflow:hidden; pointer-events:none;}
.hero-plate,.laser-video{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;}
/* The video sits over the plate and is the same shot being cut. The plate under
   it is the clip's opening frame — the finished logo, clean and lit — so this is
   a dissolve from the cut to the finished piece, not a hidden seam. The two
   framings differ (the clip zooms and pans), which is why the fade is long and
   eased: at .5s a change this size reads as a jump, at .9s as the shot settling.

   visibility has to be named in the transition or it flips the instant .etched
   lands and cuts the fade dead — it is held at its old value for the length of
   the fade, then switched. */
.laser-video{z-index:1; opacity:0; pointer-events:none; transition:opacity .3s ease;}
.hero-stage.playing .laser-video{opacity:1; visibility:visible;}
/* Once faded, take it out of the paint path entirely so a stranded last frame
   or an iOS overlay cannot sit on top of the plate. The swap happens while the
   dip below is at its darkest; visibility has to be named in the transition or
   it flips the instant .etched lands, ahead of the dip. */
.hero-stage.etched .laser-video{opacity:0; visibility:hidden;
  transition:opacity .14s linear .34s, visibility 0s linear .48s;}

/* The dip.

   The clip ends in close-up — the mark is about twice the size it is on the
   plate, and 30% left of it, because the camera pushes in as it cuts. Crossing
   between two framings that far apart shows both at once: for half a second
   there are two wordmarks of different sizes on screen. So this dips through
   darkness instead, which is how mismatched shots have always been joined, and
   it suits the subject — the light drops as the cut finishes and comes back up
   on the finished piece. Above the video, below the scrim (equal z-index, and
   ::after paints after ::before). */
.hero-stage.etched::before{
  content:""; position:absolute; z-index:2; inset:0; pointer-events:none;
  background:var(--ink); opacity:0;
  animation:hero-dip .95s ease-in-out forwards;
}
@keyframes hero-dip{ 0%{opacity:0} 40%{opacity:1} 100%{opacity:0} }
@media (prefers-reduced-motion:reduce){
  .hero-stage.etched::before{animation:none;}
  .hero-stage.etched .laser-video{transition:none;}
}
/* The mark sits at 68% of the plate, not the middle, so wherever object-fit has
   width to throw away the crop has to be biased right or it takes the tail off
   "Solutions". It bites hardest between 900 and ~1350px, where the hero is full
   height but narrow: at 901px a centred crop discards 368px and shows only
   14.5%-85.5% of the plate. 92% holds the whole mark from 320px up, and above
   ~1400px there is no horizontal overflow left for it to act on. The video
   carries the same value or the two are framed differently at the handover. */
.hero-plate,.laser-video{object-position:92% center;}


/* ─────────── sectors strip ─────────── */
.strip{border-block:1px solid var(--hair); background:var(--raised);}
.strip-in{
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding:18px var(--gut);
  display:flex; flex-wrap:wrap; gap:12px clamp(20px,3.4vw,40px);
  font-size:10.5px; font-weight:600; letter-spacing:.17em; text-transform:uppercase;
  color:var(--tx-4);
}

/* ─────────── sections ─────────── */
.sec{padding-block:var(--sec-y);}
.sec-alt{background:var(--raised); border-block:1px solid var(--hair);}
.sec-lede{font-size:clamp(16px,1.6vw,18px); color:var(--tx-3); margin:18px 0 0; max-width:56ch;}

/* ─────────── service cards ─────────── */
.cards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:clamp(16px,2vw,24px); margin-top:clamp(34px,4.5vw,56px);
}
.card{
  display:flex; flex-direction:column;
  border:1px solid var(--hair); border-radius:6px; overflow:hidden;
  background:rgba(255,255,255,.014);
  transition:border-color .22s ease, background-color .22s ease;
}
.card:hover{border-color:var(--hair-2); background:rgba(255,255,255,.03);}
.card-body{display:flex; flex-direction:column; gap:15px; padding:clamp(24px,2.6vw,32px); flex:1;}
.card h3{padding-bottom:2px;}

/* Illustrative environments, not photographs of our own operations.
   Desaturated and darkened so three separate stock shots read as one set
   and never compete with the text sitting under them. */
.card-img{position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--raised);}
.card-img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,11,13,.18) 0%, rgba(10,11,13,.86) 100%);
}
.card-img img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.55) contrast(1.06) brightness(.82);
  transition:transform .5s cubic-bezier(.2,.6,.2,1), filter .4s ease;
}
.card:hover .card-img img{transform:scale(1.035); filter:saturate(.75) contrast(1.06) brightness(.9);}
@media (prefers-reduced-motion:reduce){
  .card-img img,.card:hover .card-img img{transition:none; transform:none;}
}

/* ─────────── atmosphere band ─────────── */
.band{position:relative; height:clamp(220px,34vw,380px); overflow:hidden; border-block:1px solid var(--hair);}
.band img{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.7) brightness(.62);}
.band::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(10,11,13,.92) 0%, rgba(10,11,13,.45) 55%, rgba(10,11,13,.75) 100%);
}
.band-line{
  position:absolute; inset:0; z-index:2; margin:0;
  display:flex; align-items:center;
  /* centres on the same grid as .wrap without a second element */
  padding-inline:max(var(--gut), calc((100% - var(--wrap)) / 2 + var(--gut)));
}
.band-line span{
  font-family:var(--sans); font-weight:700; letter-spacing:-.028em; line-height:1.14;
  font-size:clamp(21px,3.2vw,38px); color:var(--tx); max-width:19ch; text-wrap:balance;
}
.card-lede{color:var(--tx-3); font-size:15.5px; line-height:1.62;}
.card-note{
  color:var(--tx-2); font-size:15px; line-height:1.58;
  border-left:2px solid var(--crimson); padding-left:15px;
}
.list{display:flex; flex-direction:column; gap:8px; font-size:14.5px; color:var(--tx-3);}
.list li{position:relative; padding-left:19px; line-height:1.5;}
.list li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:6px; height:6px; border:1px solid var(--crimson-tx); border-radius:1px;
}
.card-foot{
  margin-top:auto; padding-top:14px; border-top:1px solid var(--hair);
  font-size:13.5px; color:var(--tx-4); line-height:1.55;
}

/* ─────────── about ─────────── */
.about-grid{
  display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,.85fr);
  gap:clamp(28px,5vw,72px); align-items:start;
}
.about-grid p{margin-top:18px; max-width:60ch;}
.about-grid p:first-of-type{margin-top:26px;}
.pull{
  font-family:var(--sans); font-size:clamp(18px,2.2vw,23px); font-weight:600;
  color:var(--tx); letter-spacing:-.018em; line-height:1.35;
  border-left:2px solid var(--crimson); padding-left:20px; margin-top:30px !important;
}
.creds{display:flex; flex-direction:column; gap:1px; margin-top:clamp(24px,3vw,60px);}
.cred{display:flex; flex-direction:column; gap:3px; padding:16px 0; border-top:1px solid var(--hair);}
.cred:last-child{border-bottom:1px solid var(--hair);}
.cred-k{font-size:10.5px; font-weight:700; letter-spacing:.17em; text-transform:uppercase; color:var(--tx-4);}
.cred-v{font-family:var(--sans); font-size:19px; font-weight:700; color:var(--tx); letter-spacing:-.015em; font-variant-numeric:tabular-nums;}

/* ─────────── FAQ ───────────
   Native <details>, so it opens with JavaScript off and arrives at the right
   place in the tab order without any of it being written by hand. Content in a
   closed <details> is still in the DOM, so it is still indexed and still
   available to an assistant reading the page. */
.faq{margin-top:clamp(30px,4vw,46px); max-width:820px;}
.faq details{border-top:1px solid var(--hair);}
.faq details:last-child{border-bottom:1px solid var(--hair);}
.faq summary{
  cursor:pointer; list-style:none; position:relative;
  padding:20px 44px 20px 0;
  font-family:var(--sans); font-weight:700; font-size:clamp(15.5px,1.6vw,17.5px);
  line-height:1.4; color:var(--tx);
  transition:color .18s ease;
}
.faq summary::-webkit-details-marker{display:none;}   /* Safari's own triangle */
.faq summary:hover{color:var(--crimson-tx);}
.faq summary:focus-visible{outline:2px solid var(--crimson-tx); outline-offset:4px;}
/* A chevron drawn from two borders — no icon font, no extra request. */
.faq summary::after{
  content:""; position:absolute; right:8px; top:50%;
  width:9px; height:9px;
  border-right:2px solid var(--crimson-tx); border-bottom:2px solid var(--crimson-tx);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .22s ease;
}
.faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg);}
.faq .faq-a{
  margin:0 0 24px; max-width:68ch;
  font-size:15.5px; line-height:1.75; color:var(--tx-3);
}
@media (prefers-reduced-motion:reduce){
  .faq summary,.faq summary::after{transition:none;}
}

/* ─────────── testimonials ─────────── */
.quotes{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:clamp(20px,2.4vw,34px); margin-top:clamp(30px,4vw,46px);}
.quote{margin:0; border-left:2px solid var(--crimson); padding-left:22px;}
.quote p{font-size:16.5px; line-height:1.6; color:var(--tx-2); margin:0;}
.quote cite{
  display:block; margin-top:16px; font-style:normal;
  font-family:var(--sans); font-size:13.5px; font-weight:700; color:var(--tx); letter-spacing:-.008em;
}
.quote cite span{
  display:block; margin-top:4px;
  font-size:12px; font-weight:500; letter-spacing:.04em; color:var(--tx-4); line-height:1.45;
}

/* ─────────── contact ─────────── */
.contact-grid{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(32px,5vw,72px); align-items:start;
}
.form{display:flex; flex-direction:column; gap:17px; margin-top:30px; max-width:520px;}
.field{display:flex; flex-direction:column; gap:7px;}
.field label{font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--tx-4);}
.field input,.field textarea{
  font-family:var(--body); font-size:15.5px; color:var(--tx);
  background:rgba(255,255,255,.035); border:1px solid var(--hair-2); border-radius:var(--r);
  padding:12px 14px; width:100%; resize:vertical;
  transition:border-color .18s ease, background-color .18s ease;
}
.field input:hover,.field textarea:hover{border-color:rgba(255,255,255,.3);}
.field input:focus,.field textarea:focus{background:rgba(255,255,255,.06);}
.field.invalid input,.field.invalid textarea{border-color:var(--crimson-tx);}
.err{font-size:13px; color:var(--crimson-tx); line-height:1.4;}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.form button{align-self:flex-start; margin-top:4px;}
.form-msg{font-size:14.5px; line-height:1.55; margin-top:2px;}
.form-msg.ok{color:var(--tx);}
.form-msg.bad{color:var(--crimson-tx);}

.reach{margin-top:clamp(24px,3vw,64px); display:flex; flex-direction:column;}
.reach-h{font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--crimson-tx); margin-bottom:6px;}
.reach-row{
  display:flex; flex-direction:column; gap:4px; padding:15px 0;
  border-top:1px solid var(--hair); text-decoration:none; color:inherit;
  transition:padding-left .2s ease;
}
.reach-row:last-of-type{border-bottom:1px solid var(--hair);}
a.reach-row:hover{padding-left:7px;}
.reach-k{font-size:10.5px; font-weight:700; letter-spacing:.17em; text-transform:uppercase; color:var(--tx-4);}
.reach-v{font-size:16.5px; color:var(--tx); line-height:1.5; font-variant-numeric:tabular-nums;}
.reach-static{cursor:default;}

.map{margin-top:22px;}
.map-btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  width:100%; min-height:132px; padding:20px;
  background:
    repeating-linear-gradient(38deg, rgba(255,255,255,.028) 0 1px, transparent 1px 17px),
    rgba(255,255,255,.02);
  border:1px solid var(--hair-2); border-radius:6px;
  font-family:var(--sans); font-size:13.5px; font-weight:700; color:var(--tx);
  cursor:pointer; transition:border-color .2s ease, background-color .2s ease;
}
.map-btn:hover{border-color:rgba(255,255,255,.34);}
.map-pin{display:block; color:var(--crimson-tx);}
.map-pin svg{width:26px; height:26px;}
.map-hint{font-size:11.5px; font-weight:500; letter-spacing:.03em; color:var(--tx-4);}
.map iframe{width:100%; height:280px; border:1px solid var(--hair-2); border-radius:6px; display:block;}

/* ─────────── footer ─────────── */
.foot{border-top:1px solid var(--hair); padding-block:30px;}
.foot-in{
  display:flex; flex-wrap:wrap; gap:10px 30px; justify-content:space-between;
  font-family:var(--sans); font-size:12.5px; color:var(--tx-4); letter-spacing:.02em;
}

/* ─────────── floating WhatsApp ─────────── */
.wa-fab{
  position:fixed; right:16px; bottom:16px; z-index:90;
  display:flex; align-items:center; justify-content:center;
  width:54px; height:54px; border-radius:50%;
  background:#1FA855; color:#fff; box-shadow:0 6px 22px rgba(0,0,0,.45);
}
.wa-fab svg{width:29px; height:29px;}

/* ─────────── responsive ─────────── */
@media (max-width:900px){
  /* The band has to be tall enough for the logo to read as the logo. At 58vw
     the mark was complete but small, so the brushed metal dominated and the
     hero ended looking like a plate rather than a brand. */
  .hero{--hero-mobile-art-h:clamp(290px,66vw,470px); padding-top:0;}
  /* On mobile the art is a band above the copy, so the scrim only has to
     feather its bottom edge into the page rather than protect any text. */
  .hero-stage::after{background:linear-gradient(180deg,rgba(10,11,13,.04) 0%,rgba(10,11,13,.08) 42%,rgba(10,11,13,.94) 88%,var(--ink) 100%);}
  .hero-in{
    grid-template-columns:1fr; min-height:0;
    padding-top:calc(var(--hero-mobile-art-h) + clamp(40px,7vw,64px));
    padding-bottom:clamp(40px,7vw,64px);
  }
  .hero-stage{height:var(--hero-mobile-art-h); bottom:auto;}
  .about-grid,.contact-grid{grid-template-columns:1fr;}
  .creds,.reach{margin-top:26px;}
}

@media (max-width:760px){
  .burger{display:flex;}
  .hdr-cta{display:none;}
  .brand-logo{height:36px;}
  .nav{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; gap:0; margin:0;
    background:rgba(10,11,13,.98); border-bottom:1px solid var(--hair-2);
    padding:6px var(--gut) 18px;
    display:none;
  }
  .nav.open{display:flex;}
  .nav a{padding:14px 0; border-bottom:1px solid var(--hair); font-size:15px;}
  .nav a:last-child{border-bottom:none;}
  .nav a.active::after{display:none;}
  .nav a.active{color:var(--crimson-tx);}
  .foot-in{flex-direction:column;}
}