/* ==========================================================================
   Orca Tech design system. Palette sampled from the logo artwork.
   ========================================================================== */
:root{
  color-scheme:light;
  --red:#9E171C; --red-deep:#6E1014; --red-wash:#FBF0F0;
  --charcoal:#41434A; --ink:#1B1E26;
  --paper:#FFFFFF; --mist:#F7F8FA; --mist-deep:#ECEFF3;
  --line:#E3E7EC; --steel:#6E7783;
  --green:#146B4A; --amber:#A9700B;
  --wrap:1180px; --gut:clamp(1.25rem,4vw,2.5rem);
  --f-display:'Roboto Condensed','Roboto',Arial,sans-serif;
  --f-body:'Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --f-mono:'Roboto Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --step-0:1rem; --step-1:1.125rem;
  --step-2:clamp(1.3rem,1.1rem + .8vw,1.6rem);
  --step-3:clamp(1.6rem,1.3rem + 1.4vw,2.15rem);
  --step-4:clamp(2rem,1.5rem + 2.4vw,3rem);
  --step-5:clamp(2.55rem,1.8rem + 3.6vw,4.15rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--f-body);font-size:var(--step-1);line-height:1.62;color:var(--charcoal);background:var(--paper);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--f-display);color:var(--ink);font-weight:700;letter-spacing:-.012em;line-height:1.1;margin:0 0 .5em;text-wrap:balance}
h1{font-size:var(--step-5)} h2{font-size:var(--step-4)}
h3{font-size:var(--step-2);letter-spacing:-.012em} h4{font-size:var(--step-1)}
p{margin:0 0 1.15em;max-width:none}
a{color:var(--red);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--red-deep)}
strong{color:var(--ink);font-weight:600}
img,svg{max-width:100%;height:auto;display:block}
:focus-visible{outline:2.5px solid var(--red);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:.75rem 1.25rem;z-index:200}
.skip:focus{left:0}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap-narrow{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
section{padding-block:clamp(3.5rem,7vw,6rem)}
section.tight{padding-block:clamp(2.5rem,5vw,3.75rem)}
.fill-mist{background:var(--mist)}
.fill-ink{background:#20242D;color:#C8CDD4}
.fill-ink h2,.fill-ink h3,.fill-ink h4,.fill-ink strong{color:#fff}
.grid{display:grid;gap:clamp(1.5rem,3vw,2.5rem)}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(212px,1fr))}
.split{display:grid;gap:clamp(2rem,5vw,4.5rem);grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.split{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}}

.eyebrow{font-family:var(--f-mono);font-size:.735rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--steel);margin:0 0 1.15rem;padding-left:.9rem;border-left:2px solid var(--red);line-height:1.5}
.fill-ink .eyebrow{color:#8A939F}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--f-body);font-size:1rem;font-weight:600;padding:.95rem 1.6rem;border:1.5px solid transparent;border-radius:2px;text-decoration:none;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.btn-primary{background:var(--red);color:#fff;border-color:var(--red)}
.btn-primary:hover{background:var(--red-deep);border-color:var(--red-deep);color:#fff}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink)}
.fill-ink .btn-ghost{color:#fff;border-color:#3B424C}
.fill-ink .btn-ghost:hover{border-color:#fff;color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}

.hdr{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:1.5rem;width:100%;max-width:none;margin-inline:0;padding:.85rem clamp(1.25rem,3vw,2.75rem)}
.logo{flex:0 0 auto}
.logo img{height:34px;width:auto;max-width:none;object-fit:contain}
.nav{display:none;margin-left:auto;gap:1.6rem;align-items:center}
@media(min-width:1060px){.nav{display:flex}}
.nav a{font-size:.96rem;font-weight:500;color:var(--charcoal);text-decoration:none;padding-block:.4rem;border-bottom:2px solid transparent;white-space:nowrap}
.nav a:hover,.nav a[aria-current=page]{color:var(--ink);border-bottom-color:var(--red)}
.hdr-cta{display:none}
@media(min-width:1060px){.hdr-cta{display:inline-flex;padding:.7rem 1.15rem;font-size:.94rem}}
.hdr-phone{display:none;font-family:var(--f-mono);font-size:.9rem;font-weight:500;color:var(--ink);text-decoration:none;white-space:nowrap;margin-left:auto}
@media(min-width:760px){.hdr-phone{display:inline-block}}
@media(min-width:1060px){.hdr-phone{margin-left:0}}
.burger{margin-left:auto;background:none;border:1px solid var(--line);border-radius:2px;padding:.55rem .8rem;font-family:var(--f-mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);cursor:pointer}
@media(min-width:760px){.burger{margin-left:1rem}}
@media(min-width:1060px){.burger{display:none}}
.mnav{display:none;border-top:1px solid var(--line);background:var(--paper);padding:.5rem var(--gut) 1.5rem}
.mnav.open{display:block}
@media(min-width:1060px){.mnav,.mnav.open{display:none}}
.mnav a{display:block;padding:.7rem 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:500}
.mnav .btn{margin-top:1.1rem;width:100%}

.hero{padding-block:clamp(3.25rem,7vw,6rem) clamp(3rem,6vw,4.75rem);border-bottom:1px solid var(--line)}
.hero h1{max-width:none}
.hero .lede{font-size:var(--step-2);line-height:1.45;color:var(--charcoal);max-width:none;margin-bottom:0}
.hero-meta{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.06em;color:var(--steel);margin-top:2rem;padding-top:1.15rem;border-top:1px solid var(--line)}
.hero-meta span+span::before{content:"\00b7";margin:0 .6rem;color:var(--line)}

/* SIGNATURE: the report the product actually delivers, used as structure */
.evidence{border-top:1px solid var(--line);margin:0;padding:0;list-style:none}
.evidence li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.9rem;padding:.85rem .25rem;border-bottom:1px solid var(--line);font-family:var(--f-mono);font-size:.845rem;line-height:1.5}
.evidence .dot{width:8px;height:8px;border-radius:50%;display:block}
.dot-r{background:var(--red)} .dot-a{background:var(--amber)} .dot-g{background:var(--green)}
.evidence .ctrl{color:var(--ink);font-weight:500}
.evidence .stat{color:var(--steel);text-align:right;font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
@media(max-width:600px){
  .evidence li{grid-template-columns:auto 1fr;align-items:start}
  .evidence .dot{margin-top:.45rem}
  .evidence .stat{grid-column:2;text-align:left;margin-top:.15rem;white-space:normal}
}
.fill-ink .evidence,.fill-ink .evidence li{border-color:#2A303A}
.fill-ink .evidence .ctrl{color:#fff}
.fill-ink .evidence .stat{color:#8A939F}

.card{background:var(--paper);border:1px solid var(--line);border-radius:2px;padding:1.65rem 1.5rem;display:flex;flex-direction:column}
.card h3{margin-bottom:.45rem}
.card p{font-size:1rem;margin-bottom:1rem}
.card p:last-child{margin-bottom:0}
.card .more{margin-top:auto;font-family:var(--f-mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;font-weight:500;color:var(--red)}
a.card{text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s}
a.card:hover{border-color:var(--ink);box-shadow:0 2px 0 0 var(--red)}
a.card:hover h3{color:var(--red)}

.plain-list{list-style:none;padding:0;margin:0}
.plain-list li{padding:.7rem 0 .7rem 1.5rem;border-bottom:1px solid var(--line);position:relative;font-size:1.02rem;max-width:none}
.plain-list li::before{content:"";position:absolute;left:0;top:1.35rem;width:7px;height:1.5px;background:var(--red)}

.steps{counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{counter-increment:s;display:grid;grid-template-columns:auto 1fr;gap:1.35rem;padding:1.5rem 0;border-bottom:1px solid var(--line)}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--f-mono);font-size:.82rem;font-weight:500;color:var(--red);letter-spacing:.05em;padding-top:.35rem}
.steps h3{font-size:var(--step-1);margin-bottom:.3rem}
.steps p{font-size:1rem;margin:0}

.rate{border:1px solid var(--line);border-radius:2px;padding:1.75rem 1.6rem;background:var(--paper);display:flex;flex-direction:column}
.rate.feature{border-color:var(--ink);border-width:1.5px}
.rate .tag{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);margin-bottom:.85rem}
.rate.feature .tag{color:var(--red)}
.rate .num{font-family:var(--f-display);font-size:var(--step-3);font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1;margin-bottom:.2rem}
.rate .per{font-family:var(--f-mono);font-size:.78rem;color:var(--steel);margin-bottom:1.1rem}
.rate p{font-size:.98rem}
.rate ul{margin:0 0 1.35rem;padding:0;list-style:none;font-size:.98rem}
.rate ul li{padding:.45rem 0 .45rem 1.35rem;position:relative}
.rate ul li::before{content:"";position:absolute;left:0;top:1.05rem;width:6px;height:1.5px;background:var(--red)}
.rate .btn{margin-top:auto;align-self:flex-start}

.tbl{width:100%;border-collapse:collapse;font-size:1rem}
.tbl th,.tbl td{text-align:left;padding:.85rem .9rem;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);font-weight:500}
.tbl td:last-child,.tbl th:last-child{text-align:right;font-family:var(--f-mono);font-size:.92rem;color:var(--ink);white-space:nowrap}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border-block:1px solid var(--line)}
.stats > div{background:var(--paper);padding:1.5rem 1.25rem}
.fill-mist .stats > div{background:var(--paper)}
.stats .n{font-family:var(--f-display);font-size:var(--step-3);font-weight:700;color:var(--ink);line-height:1;letter-spacing:-.02em}
.stats .l{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--steel);margin-top:.6rem;line-height:1.5}

.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:1.2rem 2.5rem 1.2rem 0;position:relative;font-family:var(--f-display);font-weight:600;font-size:var(--step-1);color:var(--ink);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.3rem;top:1rem;font-family:var(--f-mono);font-size:1.35rem;color:var(--red);line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq details p{font-size:1.02rem}
.faq details p:last-child{margin-bottom:1.15rem}

/* One question per row, spanning the full box. */
@media(min-width:960px){
  .faq summary{padding-right:2.5rem}
}

.callout{border:1.5px solid var(--ink);border-radius:2px;padding:clamp(1.75rem,4vw,2.75rem)}
.callout h2{font-size:var(--step-3)}
.callout p{font-size:1.05rem}

.form{display:grid;gap:1rem}
.field label{display:block;font-family:var(--f-mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);margin-bottom:.4rem}
.field input,.field select,.field textarea{width:100%;font-family:var(--f-body);font-size:1rem;color:var(--ink);padding:.8rem .9rem;border:1px solid var(--line);border-radius:2px;background:var(--paper)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink)}
.field textarea{min-height:120px;resize:vertical}
.form-note{font-size:.86rem;color:var(--steel);margin:0}
.form .btn{justify-self:start}
@media(min-width:640px){.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}}

.ftr{background:#000000;color:#98A1AC;padding-block:clamp(3rem,6vw,4.5rem) 2rem;font-size:.95rem}
.ftr a{color:#C8CDD4;text-decoration:none}
.ftr a:hover{color:#fff;text-decoration:underline}
.ftr-grid{display:grid;gap:2.25rem;grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
.ftr h4{font-family:var(--f-mono);font-size:.73rem;letter-spacing:.13em;text-transform:uppercase;color:#fff;font-weight:500;margin-bottom:1rem}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin-bottom:.55rem}
.ftr-brand{grid-column:1/-1}
@media(min-width:900px){.ftr-brand{grid-column:span 2}}
.ftr-brand img{height:36px;width:auto;max-width:none;object-fit:contain;margin-bottom:1.15rem}
.ftr-brand p{font-size:.92rem;max-width:none;color:#98A1AC}
.ftr-legal{margin-top:2.75rem;padding-top:1.5rem;border-top:1px solid #2A303A;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;font-size:.85rem;align-items:center}
.ftr-legal .sep{margin-left:auto}

.crumb{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.06em;color:var(--steel);padding-top:1.5rem}
.crumb a{color:var(--steel);text-decoration:none}
.crumb a:hover{color:var(--ink)}
.crumb span{margin:0 .45rem;color:var(--line)}

.rv{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

.lede{font-size:var(--step-2);line-height:1.45}
.mono{font-family:var(--f-mono)}
.mb0{margin-bottom:0}
.muted{color:var(--steel)}
.small{font-size:.9rem}
hr.rule{border:0;border-top:1px solid var(--line);margin-block:clamp(2.5rem,5vw,4rem)}

/* --------------------------------------------------------------------------
   Some mobile webviews force a dark repaint regardless of color-scheme.
   Pin the surfaces explicitly so the page never renders as dark-on-dark.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark){
  :root{color-scheme:light}
  html,body{background:#FFFFFF;color:var(--charcoal)}
  h1,h2,h3,h4{color:var(--ink)}
  .hdr{background:rgba(255,255,255,.97)}
  .fill-mist{background:var(--mist)}
  .card,.rate,.field input,.field select,.field textarea{background:var(--paper)}
  .stats > div{background:var(--paper)}
  .ftr{background:#000000;color:#98A1AC}
}

/* --------------------------------------------------------------------------
   Full-bleed header and footer. The inner rails drop their max-width so the
   bars span the viewport; padding keeps content off the edges on wide screens.
   -------------------------------------------------------------------------- */
.hdr-in{max-width:none;margin-inline:0}
.ftr > .wrap{max-width:none;padding-inline:clamp(1.25rem,3vw,2.75rem)}
.ftr{background:#000000}
.ftr-legal{border-top-color:#1E1E1E}
.ftr h4{color:#fff}
.ftr a{color:#C8CDD4}
.mnav{padding-inline:clamp(1.25rem,3vw,2.75rem)}
@media (prefers-color-scheme: dark){
  .ftr{background:#000000;color:#98A1AC}
}

/* Footer columns: brand rail plus five link columns on one row at desktop.
   auto-fit was wrapping Service Area and Company onto a second row and
   leaving a dead gap to their right. */
@media(min-width:1080px){
  .ftr-grid{grid-template-columns:1.6fr repeat(4,minmax(0,1fr));gap:2.5rem 2.5rem}
  .ftr-brand{grid-column:auto}
}
@media(min-width:700px) and (max-width:1079px){
  .ftr-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ftr-brand{grid-column:1/-1}
}

/* --------------------------------------------------------------------------
   Two-column hero and CTA. The right rail was dead space at desktop widths;
   it now carries a facts panel or, on the homepage, the buying triggers.
   -------------------------------------------------------------------------- */
.hero-grid{display:grid;gap:clamp(2rem,4vw,3.5rem);grid-template-columns:minmax(0,1fr)}
@media(min-width:1000px){
  .hero-grid{grid-template-columns:minmax(0,1.28fr) minmax(0,.86fr);align-items:start}
  .hero-side{padding-top:.4rem}
}
.hero h1{max-width:none}
.hero .lede{max-width:none}

.facts{border:1px solid var(--line);border-radius:2px;background:var(--mist);padding:1.35rem 1.5rem}
.facts dl{margin:0}
.facts dt{font-family:var(--f-mono);font-size:.69rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--steel);margin-top:1rem}
.facts dt:first-child{margin-top:0}
.facts dd{margin:.25rem 0 0;padding-bottom:1rem;border-bottom:1px solid var(--line);
  font-size:1rem;line-height:1.45;color:var(--ink);font-weight:500}
.facts dd:last-of-type{border-bottom:0;padding-bottom:0}

.callout-grid{display:grid;gap:clamp(1.75rem,3.5vw,3rem);grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){
  .callout-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:center}
}
.callout-mark{display:flex;justify-content:center;align-items:center}
.callout-mark img{width:clamp(112px,13vw,190px);height:auto}
@media(max-width:899px){
  .callout-grid{grid-template-columns:minmax(0,1fr)}
  .callout-mark{justify-content:flex-start}
  .callout-mark img{width:104px}
}

/* --------------------------------------------------------------------------
   Fixed header on white. JS measures the bar and pads the body, so nothing
   sits underneath it and in-page anchors land in the right place.
   -------------------------------------------------------------------------- */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:400;
  background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);
  backdrop-filter:blur(8px);
}
.hdr-in{padding-block:.8rem}
.logo img{height:32px}
.mnav{max-height:calc(100vh - 66px);overflow-y:auto;-webkit-overflow-scrolling:touch}
.skip:focus{left:0;top:0;z-index:500}
}

/* Booking form card. Sits on the mist fill, so the form itself goes white to
   read as an input surface rather than part of the background. */
.form-card{background:var(--paper);border:1px solid var(--line);border-radius:2px;padding:1.6rem 1.5rem}
.form-card .btn{margin-top:.35rem}
#book{scroll-margin-top:5.5rem}

/* Honeypot. Hidden from sight and from assistive tech, but still submitted,
   so anything typed into it came from a bot. Not display:none, which some
   bots skip. */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* ==========================================================================
   Footer photograph. The image sits behind a two-stop overlay so the copy
   keeps AA contrast wherever the orcas happen to fall.
   ========================================================================== */
.ftr{position:relative;isolation:isolate;background:#000000}
.ftr::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:url("/assets/img/footer-orcas.jpg");
  background-size:cover;
  background-position:center 32%;
  background-repeat:no-repeat;
  opacity:1;
}
/* Single scrim, weighted toward the left where the brand block and body copy
   sit. Kept light enough that the pod still reads as a photograph. */
.ftr::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,
    rgba(0,0,0,.95) 0%,
    rgba(0,0,0,.88) 34%,
    rgba(0,0,0,.80) 68%,
    rgba(0,0,0,.76) 100%);
}
.ftr > .wrap{position:relative;z-index:1}
.ftr-brand p{color:#C2C9D2;text-shadow:0 1px 3px rgba(0,0,0,.85)}
.ftr a{color:#E2E6EB;text-shadow:0 1px 3px rgba(0,0,0,.85)}
.ftr a:hover{color:#FFFFFF}
.ftr h4{text-shadow:0 1px 3px rgba(0,0,0,.85)}
.ftr-legal{border-top-color:rgba(255,255,255,.18)}
.ftr-legal span{text-shadow:0 1px 3px rgba(0,0,0,.85)}

/* Small screens: the photo reads as noise at phone width, so weight the scrim
   heavier and let the links win. */
@media(max-width:700px){
  .ftr::after{background:linear-gradient(180deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.95) 100%)}
  .ftr::before{background-position:center 40%;opacity:.8}
}
@media (prefers-reduced-data: reduce){
  .ftr::before{display:none}
}

/* Long-form legal copy: tighter rhythm than marketing sections. */
.legal-body h2{font-size:var(--step-2);margin-top:2.5rem}
.legal-body h2:first-child{margin-top:0}
.legal-body h3{font-size:var(--step-1);margin-top:1.75rem}
.legal-body p{font-size:1.02rem}
.legal-body .plain-list{margin-bottom:1.25rem}

.hero-solo .hero-grid{grid-template-columns:minmax(0,1fr)}
.hero-solo h1{max-width:none}
.hero-solo .lede{max-width:none}
@media(min-width:1000px){
  .hero-solo h1{max-width:none}
  .hero-solo .lede{max-width:none}
}
#message{scroll-margin-top:6rem}

/* Hero form message box. Sized small enough that the form still fits the hero
   without pushing the copy column out of balance. */
/* ==========================================================================
   Hero enquiry form. One light treatment, used on every hero.
   ========================================================================== */
@media(min-width:1000px){
  .hero-grid{grid-template-columns:minmax(0,1.06fr) minmax(380px,.94fr);gap:clamp(2.5rem,4vw,4rem)}
  .hero-copy{padding-top:.35rem}
}
.hero h1{max-width:none}
.hero .lede{max-width:none}

.hero-form{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:4px;
  padding:clamp(1.4rem,2.4vw,1.85rem);
  box-shadow:0 24px 52px -30px rgba(18,20,26,.5);
  display:grid;gap:.85rem;
}
.hero-form .hf-title{
  font-family:var(--f-display);font-size:var(--step-2);font-weight:700;
  color:var(--ink);letter-spacing:-.012em;line-height:1.15;margin:0;
}
.hero-form .hf-sub{font-size:.95rem;color:var(--steel);margin:-.35rem 0 .35rem;max-width:none}
/* Split columns keep the tighter measure, since the column is already narrow. */
.card p,.rate p,.hero-form p{max-width:none}
.hero-form .hf-row{display:grid;gap:.85rem}
@media(min-width:520px){.hero-form .hf-row{grid-template-columns:1fr 1fr}}
.hero-form .field label{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--steel);margin-bottom:.35rem;display:block;
}
.hero-form .field input,.hero-form .field select{
  width:100%;font-family:var(--f-body);font-size:1rem;color:var(--ink);
  padding:.72rem .85rem;border:1px solid var(--line);border-radius:3px;
  background:var(--paper);transition:border-color .15s,box-shadow .15s;
}
.hero-form .field input:hover,.hero-form .field select:hover{border-color:#C6CCD4}
.hero-form .field input:focus,.hero-form .field select:focus{
  border-color:var(--red);box-shadow:0 0 0 3px rgba(158,23,28,.13);outline:none;
}
.hero-form .field select{
  appearance:none;padding-right:2.4rem;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%23555C66' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right .9rem center;background-size:12px 8px;
  text-overflow:ellipsis;
}
.hero-form button[type=submit]{width:100%;margin-top:.25rem;padding-block:.95rem}
.hero-form .hf-note{font-size:.85rem;color:var(--steel);margin:.1rem 0 0;line-height:1.5}
.hero-form .hf-note a{font-family:var(--f-mono);white-space:nowrap}

/* The form is the conversion point on mobile, so it follows the copy rather
   than pushing it below the fold. */
@media(max-width:999px){
  .hero-side{margin-top:.5rem}
  .hero h1,.hero .lede{max-width:none}
}

.hero-form .field textarea{
  width:100%;font-family:var(--f-body);font-size:1rem;color:var(--ink);
  padding:.72rem .85rem;border:1px solid var(--line);border-radius:3px;
  background:var(--paper);min-height:84px;line-height:1.5;resize:vertical;
  transition:border-color .15s,box-shadow .15s;
}
.hero-form .field textarea:hover{border-color:#C6CCD4}
.hero-form .field textarea:focus{
  border-color:var(--red);box-shadow:0 0 0 3px rgba(158,23,28,.13);outline:none;
}

/* ==========================================================================
   Technology logo band. Every logo ships on an identical transparent canvas,
   so a single fixed size gives uniform padding and optical weight without any
   per-logo tuning in CSS.
   ========================================================================== */
.logo-band{padding-block:clamp(3rem,5.5vw,4.5rem)}

.logo-band-sub{margin-bottom:clamp(1.75rem,3vw,2.5rem)}
/* Full bleed, no rules between cells, generous even padding on every mark. */
.logo-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0;background:transparent;
  border:0;border-radius:0;
}
.logo-grid > :last-child{grid-column:1 / -1}
@media(min-width:620px){
  .logo-grid{grid-template-columns:repeat(3,1fr)}
  .logo-grid > :last-child{grid-column:auto}
  .logo-grid > :nth-child(7){grid-column:1 / -1}
}
/* Seven logos divide evenly into seven columns, so at full width every cell
   is filled and no gap is left at the end of the row. */
@media(min-width:1000px){
  .logo-grid{grid-template-columns:repeat(7,1fr)}
  .logo-grid > :nth-child(7),
  .logo-grid > :last-child{grid-column:auto}
}
.logo-item{
  display:flex;align-items:center;justify-content:center;
  background:transparent;
  padding:25px 30px;
  transition:opacity .15s;
}
.logo-item img{
  width:100%;max-width:112px;height:auto;
  filter:grayscale(1);opacity:.62;
  transition:filter .2s,opacity .2s,transform .2s;
}
.logo-item:hover img,.logo-item:focus-visible img{filter:none;opacity:1}

.logo-item.is-active img{filter:none;opacity:1}

@media(prefers-reduced-motion:reduce){.logo-item img{transition:none}}

/* ==========================================================================
   Light mesh background on every hero except the homepage, which keeps its
   photographic treatment. The artwork is pale, so the scrim is white rather
   than dark and the copy stays in its normal ink colour.
   ========================================================================== */
.hero{
  position:relative;isolation:isolate;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:url("/assets/img/hero-mesh.jpg");
  background-size:cover;
  background-position:center 62%;
  background-repeat:no-repeat;
}
/* Heaviest on the left under the headline, clearing toward the right so the
   mesh still reads behind and around the form card. */
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.93) 0%,
      rgba(255,255,255,.80) 30%,
      rgba(255,255,255,.42) 58%,
      rgba(255,255,255,.18) 100%),
    linear-gradient(180deg,
      rgba(255,255,255,.55) 0%,
      rgba(255,255,255,.10) 45%,
      rgba(255,255,255,.62) 100%);
}
.hero > .wrap{position:relative;z-index:1}
/* The card sits on the artwork, so it needs to be opaque rather than tinted. */
.hero .hero-form{
  background:var(--paper);
  box-shadow:0 24px 52px -30px rgba(18,20,26,.5);
}
@media(max-width:900px){
  .hero::after{
    background:linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.88) 55%, rgba(255,255,255,.94) 100%);
  }
}

/* Centred hero for legal pages, which carry no form and read better as a
   single column. */
.hero-centered .hero-grid{grid-template-columns:minmax(0,1fr)}
.hero-centered .hero-copy{text-align:center;max-width:none;margin-inline:auto}
.hero-centered .eyebrow{display:inline-block;border-left:0;border-top:2px solid var(--red);padding:.65rem 0 0;margin-bottom:1rem}
.hero-centered h1{max-width:none;margin-inline:auto}
.hero-centered .lede{max-width:none;margin-inline:auto}
.hero-centered .btn-row{justify-content:center}

/* Legal copy is a single column spanning the full rail. Long documents read
   better as one continuous flow than as columns you have to track back up. */
.legal-body{max-width:none}
.legal-body p,.legal-body li{max-width:none}
@media(min-width:1000px){
  .legal-body h2{
    margin-top:2.75rem;padding-top:1.75rem;
    border-top:1px solid var(--line);
  }
  .legal-body h2:first-child{margin-top:0;padding-top:0;border-top:0}
  .legal-body > .eyebrow{margin-top:2.5rem;margin-bottom:-.2rem}
  .legal-body > .eyebrow:first-child{margin-top:0}
  /* Two column lists keep the long enumerated sections from running down the
     page, without breaking the prose into columns. */
  .legal-body .plain-list{columns:2;column-gap:clamp(2rem,4vw,3.5rem)}
  .legal-body .plain-list li{break-inside:avoid;-webkit-column-break-inside:avoid}
}

/* Homepage hero: fibre artwork in place of the mesh used elsewhere. The image
   is bright, so it inherits the light scrim and dark copy rather than the
   inverted photographic treatment. */
.hero.hero-fiber::before{
  background-image:url("/assets/img/hero-fiber.jpg");
  background-position:center 58%;
}
.hero.hero-fiber::after{
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.95) 0%,
      rgba(255,255,255,.86) 32%,
      rgba(255,255,255,.50) 60%,
      rgba(255,255,255,.22) 100%),
    linear-gradient(180deg,
      rgba(255,255,255,.60) 0%,
      rgba(255,255,255,.12) 45%,
      rgba(255,255,255,.66) 100%);
}
@media(max-width:900px){
  .hero.hero-fiber::after{
    background:linear-gradient(180deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.86) 55%, rgba(255,255,255,.93) 100%);
  }
}

/* Built in the USA hero. The flag artwork carries its own detail on the left,
   which is exactly where the headline sits, so the scrim runs heavier there
   than on the other hero backgrounds. */
.hero.hero-flag::before{
  background-image:url("/assets/img/hero-flag.jpg");
  background-position:center 55%;
}
.hero.hero-flag::after{
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.94) 0%,
      rgba(255,255,255,.86) 30%,
      rgba(255,255,255,.40) 58%,
      rgba(255,255,255,.10) 100%),
    linear-gradient(180deg,
      rgba(255,255,255,.45) 0%,
      rgba(255,255,255,.05) 45%,
      rgba(255,255,255,.55) 100%);
}
@media(max-width:900px){
  .hero.hero-flag::after{
    background:linear-gradient(180deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.87) 55%, rgba(255,255,255,.93) 100%);
  }
}

/* ==========================================================================
   Metrics band. Red runs full bleed; the figures stay on the page rail so the
   band lines up with the content above and below it.
   ========================================================================== */
section.stats-band{background:var(--red);padding-block:0}
.stats-band .stats{background:rgba(255,255,255,.26);border-block-color:rgba(255,255,255,.26)}
.stats-band .stats > div{
  background:var(--red);
  padding-block:1.6rem;
  text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.stats-band .stats .n{color:#FFFFFF;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.stats-band .stats .l{color:rgba(255,255,255,.82);white-space:nowrap}
@media(max-width:640px){
  .stats-band .stats .l{white-space:normal}
  .stats-band .stats > div{padding-inline:1rem}
}

/* Count-up: each cell rises as its number counts. Held at the start state only
   while JS is present, so the figures are never invisible if it fails. */
.js .stats-band .stats > div{opacity:0;transform:translateY(10px)}
.js .stats-band .stats > div.in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}
@media(prefers-reduced-motion:reduce){
  .js .stats-band .stats > div,
  .js .stats-band .stats > div.in{opacity:1;transform:none;transition:none}
}

/* Footer legal row: flag badge linking to the Built in the USA page. */
.ftr-legal .usa{margin-left:.25rem}
.ftr-legal .usa a{
  display:inline-flex;align-items:center;gap:.5rem;
  color:#FFFFFF;text-decoration:none;
  padding-left:1.25rem;border-left:1px solid rgba(255,255,255,.22);
  line-height:1;
}
.ftr-legal .usa a:hover{text-decoration:none}
.ftr-legal .usa a:hover strong{text-decoration:underline}
.ftr-legal .usa strong{
  color:#FFFFFF;font-weight:600;white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.85);
}
.ftr-legal .flag{
  border-radius:1px;flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(255,255,255,.25);
}
@media(max-width:620px){
  .ftr-legal .usa{margin-left:0}
  .ftr-legal .usa a{padding-left:0;border-left:0}
  .ftr-legal .sep{margin-left:0}
}

/* Trigger list on the homepage: the last item in each column keeps its rule so
   the three columns end level. */
.triggers .plain-list li:last-child{border-bottom:1px solid var(--line)}

/* ==========================================================================
   FAQ bands. Brand red across the whole section, white type, and an expanded
   answer that spans the full width of the box rather than staying in its
   column.
   ========================================================================== */
section.faq-band{background:var(--red)}
section.faq-band .eyebrow{color:rgba(255,255,255,.72);border-left-color:#FFFFFF}
section.faq-band h2,
section.faq-band h3{color:#FFFFFF}
section.faq-band > .wrap > p,
section.faq-band > .wrap-narrow > p{color:rgba(255,255,255,.86)}
section.faq-band a{color:#FFFFFF;text-decoration:underline;text-underline-offset:3px}
section.faq-band a:hover{color:rgba(255,255,255,.82)}

.faq-band .faq{border-top-color:rgba(255,255,255,.28)}
.faq-band .faq details{border-bottom-color:rgba(255,255,255,.28)}
.faq-band .faq summary{color:#FFFFFF}
.faq-band .faq summary::after{color:#FFFFFF}
.faq-band .faq details p{color:rgba(255,255,255,.90)}
.faq-band .faq details strong{color:#FFFFFF}

@media(min-width:960px){
  .faq-band .faq details p{max-width:none}
}

/* --------------------------------------------------------------------------
   Prose runs one full width column. Line length is long at desktop, which is
   the trade for filling the box rather than leaving a dead column beside
   short paragraphs.
   -------------------------------------------------------------------------- */
.wrap-narrow > p,
.wrap-narrow > .lede,
.legal-body,
.legal-body p,
.legal-body li{max-width:none}
@media(min-width:1000px){
  /* Single column everywhere. Nothing in the body splits into columns. */
  .wrap-narrow > .plain-list,
  .legal-body .plain-list{columns:1}
}


/* --------------------------------------------------------------------------
   FAQ layout, defined last so it cannot be clobbered by earlier blocks.
   One full width column: every question and every answer spans the box, so
   there is no empty column beside a short list or an odd number of items.
   -------------------------------------------------------------------------- */
.faq{display:block}
.faq details{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin-top:-1px;
}
.faq-band .faq details{
  border-top-color:rgba(255,255,255,.28);
  border-bottom-color:rgba(255,255,255,.28);
}
.faq summary{padding-right:2.5rem}
.faq details p{max-width:none}

/* --------------------------------------------------------------------------
   Split sections stack into one full width column. The two column version
   left an empty half whenever one side was shorter than the other.
   -------------------------------------------------------------------------- */
@media(min-width:900px){
  .split{grid-template-columns:minmax(0,1fr);gap:clamp(2rem,4vw,3rem)}
}
.split > div > p,
.split > div > .lede{max-width:none}


/* --------------------------------------------------------------------------
   Measure. Nothing in the page body is capped: copy fills the box. A measure
   is kept only inside cards, the form and the hero, where the narrow column is
   the design rather than dead space.
   -------------------------------------------------------------------------- */
main p,
main li,
main dd,
main .lede,
main .steps p,
main .split p,
main .plain-list li,
main .legal-body p{max-width:none}

.card p,
.rate p,
.hero-form p,
.hero-form .hf-sub,
.ftr-brand p{max-width:none}
.hero-form .hf-sub{max-width:none}
.hero .lede{max-width:none}
.hero-centered .lede{max-width:none;margin-inline:auto}
.hero-centered .hero-copy{max-width:none;margin-inline:auto}


/* Nothing in the page body uses CSS columns. Every block runs the full box. */
main .wrap > *,
main .wrap-narrow > *,
main .plain-list,
main .legal-body,
main .legal-body > *{columns:1 !important}

/* --------------------------------------------------------------------------
   CTA callout. Two columns at desktop, copy beside the mark. On phones it
   centres and the mark is dropped, since a decorative image below the buttons
   only adds scrolling on a small screen.
   -------------------------------------------------------------------------- */
@media(max-width:899px){
  .callout{text-align:center}
  .callout h2,
  .callout p{max-width:none;margin-inline:auto}
  .callout .btn-row{justify-content:center}
  .callout-mark{display:none}
}

/* ==========================================================================
   Mobile navigation. A drawn hamburger rather than a text button, and the
   call to action rendered as a button rather than inheriting the nav link
   styling, which was overriding it on specificity.
   ========================================================================== */
.burger{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;
  border:1px solid var(--line);border-radius:2px;
  background:transparent;cursor:pointer;color:var(--ink);
}
.burger:hover{border-color:var(--ink)}
.burger-box{position:relative;display:block;width:20px;height:14px}
.burger-bar,
.burger-bar::before,
.burger-bar::after{
  position:absolute;left:0;width:20px;height:2px;
  background:currentColor;border-radius:2px;
  transition:transform .2s ease,opacity .15s ease,top .2s ease;
}
.burger-bar{top:6px}
.burger-bar::before{content:"";top:-6px}
.burger-bar::after{content:"";top:6px}
.burger.is-open .burger-bar{background:transparent}
.burger.is-open .burger-bar::before{top:0;transform:rotate(45deg)}
.burger.is-open .burger-bar::after{top:0;transform:rotate(-45deg)}
@media(prefers-reduced-motion:reduce){
  .burger-bar,.burger-bar::before,.burger-bar::after{transition:none}
}

/* The nav link rule outranks .btn on specificity, so the call to action needs
   its own declarations rather than relying on the shared button class. */
.mnav .btn{
  display:flex;align-items:center;justify-content:center;
  width:100%;margin-top:1.1rem;
  padding:1rem 1.5rem;
  border:1.5px solid var(--red);border-radius:2px;
  background:var(--red);color:#FFFFFF;
  font-weight:600;font-size:1rem;text-align:center;
}
.mnav .btn:hover{background:var(--red-deep);border-color:var(--red-deep);color:#FFFFFF}

/* The hamburger block above resets display, so the desktop hide has to be
   re-declared after it. Nav, phone and call to action take over at 1060px. */
@media(min-width:1060px){
  .burger{display:none}
  .mnav,.mnav.open{display:none}
}

/* Resources tables: internal only, so density beats elegance. */
.res-table td:last-child,.res-table th:last-child{text-align:left;font-family:var(--f-body)}
.res-table td a{white-space:nowrap}
.res-table th:not(:first-child),.res-table td:not(:first-child){width:1%;white-space:nowrap}

/* Footer social links. Inline SVG inheriting the footer colour, so there is no
   extra request and no coloured logos fighting the black background. */
.ftr-social{display:flex;gap:.5rem;margin-top:1.35rem}
.ftr-social .soc{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;
  border:1px solid rgba(255,255,255,.20);border-radius:2px;
  color:#C3CAD3;
  transition:color .15s,border-color .15s,background .15s;
}
.ftr-social .soc:hover{color:#FFFFFF;border-color:#FFFFFF;background:rgba(255,255,255,.08)}
.ftr-social .soc svg{display:block}
@media(prefers-reduced-motion:reduce){.ftr-social .soc{transition:none}}


/* --------------------------------------------------------------------------
   No measure caps anywhere. Every piece of copy runs the full width of the
   box that contains it.
   -------------------------------------------------------------------------- */
p, li, dd, dt, h1, h2, h3, h4,
.lede, .hf-sub, .hf-note, .card p, .rate p,
.hero h1, .hero .lede, .hero-copy,
.hero-centered h1, .hero-centered .lede, .hero-centered .hero-copy,
.hero-solo h1, .hero-solo .lede,
.ftr-brand p, .logo-band-sub, .legal-body, .legal-body p,
.split p, .steps p, .callout p, .callout h2,
.faq details p, .plain-list li{max-width:none}