/* ==========================================================================
   DutyAuto — site styles
   Shared by index.html (consultancy) and ask.html (the Ask product page).
   Keep it one stylesheet: the two pages are meant to read as one site, and
   the fastest way to lose that is to let per-page copies drift.
   ========================================================================== */

:root{
  /* Slate ground, hi-vis amber for action, signal blue for wayfinding —
     the palette of the environments this product is actually used in. */
  --black:#0a0d12;
  --black-2:#131922;
  --amber:#e8941c;
  --amber-2:#ffb545;
  --signal:#6fb2ff;
  --paper:#dfe4ec;
  --paper-2:#f2f5fa;
  --ink:#131922;
  --muted:#a4aebd;
  --card:#141b25;
  --line:#232f3e;

  /* ---- TYPE SCALE ----
     Legibility floor for this site:
     nothing below 12px, and no running prose below 16px.
     --fs-micro is reserved for short uppercase letterspaced labels
     (credits, footnotes) — never for sentences. */
  --fs-micro:12px;   /* floor — uppercase labels only, short strings */
  --fs-label:13px;   /* eyebrows, stage tags, role tags */
  --fs-meta:15px;    /* nav, buttons, footer meta, signatures */
  --fs-body:16px;    /* floor for all body copy */
  --fs-body-lg:17px; /* section intros */
  --fs-lead:19px;    /* hero lead */

  /* Widest the full-bleed backdrops are allowed to render. Past this the
     frame stops growing and the page background carries the rest. */
  --media-max:1800px;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--black);
  color:var(--paper);
  font-family:'Newsreader', Georgia, serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit; }
.eyebrow{
  font-family:'Hanken Grotesk',sans-serif;
  font-weight:600;
  font-size:var(--fs-label);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--amber-2);
}
.wrap{ max-width:1160px; margin:0 auto; padding:0 24px; }
/* more room at the edges once the layout goes single-column — 24px reads
   tight when the text runs the full width of a phone */
@media (max-width:860px){
  .wrap{ padding:0 32px; }
}
/* but not so much that the measure collapses on the narrowest phones */
@media (max-width:360px){
  .wrap{ padding:0 24px; }
}
section{ position:relative; }
h1,h2,h3{ font-family:'Fraunces',serif; font-weight:500; color:var(--paper-2); }
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:'Hanken Grotesk',sans-serif;
  font-weight:600;
  font-size:var(--fs-meta);
  letter-spacing:.02em;
  padding:14px 26px;
  border-radius:999px;
  background:var(--amber);
  /* dark label on amber — the contrast runs the other way round from a
     red button, and paper-on-amber would fail against the ground */
  color:#0a0d12;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  white-space:nowrap;
  transition:transform .15s ease, background .2s ease;
}
.btn:hover{ background:var(--amber-2); transform:translateY(-1px); }
.btn.ghost{
  background:transparent;
  border:1px solid rgba(223,228,236,.25);
  color:var(--paper);
}
.btn.ghost:hover{ border-color:var(--amber); background:rgba(232,148,28,.1); }

/* ---------- NAV ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,13,18,.78);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(223,228,236,.08);
}
nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0;
}
.brandgroup{ display:flex; align-items:center; gap:14px; }
/* ---------- BRAND LOCKUP ----------
   Mark, then the wordmark on one line — the same lockup the brand kit builds
   its logo files from. It replaces the older stacked treatment, where "Duty"
   sat over a letterspaced amber "AUTO": that was a second, different wordmark
   living only on the site, and it had to go for the two to agree.

   Everything is sized in em off the single font-size below, at the kit's
   proportions: the mark's ink is 1.34x the wordmark's cap height, and the gap
   between them is 0.42x. Change the font-size and the lockup scales whole. */
.brand{
  display:flex; align-items:center;
  /* The kit sets .42 x cap height between the mark's ink and the wordmark's
     ink — .294em. Live text starts at its advance origin, though, and the "D"
     carries a .054em left side bearing, so the CSS gap is that much smaller
     for the rendered result to match. */
  gap:.24em;
  font-size:19px;             /* the one number that sizes the lockup */
  text-decoration:none;
}
/* The mark's viewBox is cropped to its ink rather than its 100-unit drawing
   grid, so the element's box IS the artwork. That is what lets the centring
   above land the mark on the wordmark's cap band without a magic offset. */
.brand svg{ height:.938em; width:1.346em; flex:none; }
.brand .name{
  font-family:'Fraunces',serif; font-weight:500; font-size:1em;
  line-height:1; color:var(--paper-2);
}
/* ---------- SITE SWITCH ----------
   Two properties under one mark: the consultancy and the Ask product. The
   segmented control makes crossing between them feel like changing sites
   rather than following another nav link, and always shows which one you are
   in. It replaces the nav wordmark — with "DutyAuto" sitting in the switch,
   printing it again beside the logo was saying the same thing twice. */
.siteswitch{
  display:flex; align-items:center; gap:2px;
  padding:3px; border-radius:999px;
  background:rgba(223,228,236,.05);
  border:1px solid rgba(223,228,236,.1);
}
.siteswitch a{
  font-family:'Hanken Grotesk',sans-serif; font-size:14px; font-weight:600;
  letter-spacing:.01em;
  padding:6px 15px; border-radius:999px;
  text-decoration:none; color:var(--paper); opacity:.6;
  white-space:nowrap;
  transition:opacity .15s ease, background .2s ease, color .2s ease;
}
.siteswitch a:hover{ opacity:.9; background:rgba(223,228,236,.06); }
/* the property you are in — carried by colour and ground, not weight alone */
.siteswitch a[aria-current="page"]{
  opacity:1;
  color:var(--amber-2);
  background:rgba(232,148,28,.14);
  box-shadow:inset 0 0 0 1px rgba(232,148,28,.34);
}
.siteswitch a[aria-current="page"]:hover{ background:rgba(232,148,28,.18); }

@media (max-width:420px){
  .siteswitch a{ font-size:13px; padding:6px 11px; }
}

.navlinks{
  display:flex; gap:30px; list-style:none;
  font-family:'Hanken Grotesk',sans-serif; font-size:var(--fs-meta); font-weight:500;
}
.navlinks a{ text-decoration:none; color:var(--paper); opacity:.75; transition:opacity .15s ease; }
.navlinks a:hover{ opacity:1; }
/* the page you are already on — marked, not hidden */
.navlinks a[aria-current="page"]{ opacity:1; color:var(--amber-2); }
.navcta{ display:flex; align-items:center; gap:20px; }

@media (max-width:860px){
  .navlinks{ display:none; }
  /* the nav CTA is the only button up here — it doesn't need desktop weight */
  .navcta .btn{ padding:10px 17px; font-size:14px; }
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  padding:150px 0 140px;
  min-height:min(760px, 88vh);
  display:flex; align-items:center;
  background:var(--black);
  overflow:hidden;
}
/* Backdrop. Generated rather than photographic so the site ships
   self-contained — to use a photograph instead, replace the
   background-image stack here with an image-set() and keep the scrim below. */
.hero::before{
  content:''; position:absolute; inset:0; z-index:0;
  background-image:
    repeating-linear-gradient(90deg, rgba(223,228,236,.05) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg,  rgba(223,228,236,.05) 0 1px, transparent 1px 72px),
    radial-gradient(48% 64% at 76% 42%, rgba(232,148,28,.58) 0%, rgba(232,148,28,.20) 40%, rgba(10,13,18,0) 72%),
    radial-gradient(40% 52% at 92% 82%, rgba(111,178,255,.28) 0%, rgba(10,13,18,0) 70%),
    linear-gradient(180deg,#111823 0%, var(--black) 100%);
}
/* scrim: heavy on the left where the copy sits, clearing toward the glow */
.hero::after{
  content:''; position:absolute; inset:0; z-index:2;
  background:
    linear-gradient(90deg, rgba(10,13,18,.93) 0%, rgba(10,13,18,.86) 34%, rgba(10,13,18,.44) 56%, rgba(10,13,18,.2) 78%, rgba(10,13,18,.34) 100%),
    linear-gradient(180deg, rgba(10,13,18,.7) 0%, rgba(10,13,18,.12) 28%, rgba(10,13,18,.18) 70%, rgba(10,13,18,.82) 100%);
}
.hero-inner{ position:relative; z-index:3; width:100%; }

/* ---------- HERO: FLOWING PATHS ----------
   Sits above the backdrop and below the scrim, so the strokes read at the
   edges of the frame and fall away behind the copy where they would
   otherwise fight the headline. */
.hero-paths{
  position:absolute; top:0; bottom:0; z-index:1;
  left:50%; right:auto; transform:translateX(-50%);
  width:min(100%, var(--media-max));
  pointer-events:none; overflow:hidden;
}
.hero-paths svg{ display:block; width:100%; height:100%; }
.hero-path{ fill:none; }
@media (prefers-reduced-motion:no-preference){
  /* framer-motion animates pathLength and pathOffset; the SVG-native
     equivalent is a dash pattern travelling along a path normalised to
     pathLength="1", which needs no JS frame loop. */
  .hero-path{
    animation:pathflow var(--dur) linear infinite,
              pathglow var(--gdur) ease-in-out infinite;
  }
  @keyframes pathflow{ to{ stroke-dashoffset:-1; } }
  @keyframes pathglow{
    0%,100%{ stroke-opacity:var(--o); }
    50%{ stroke-opacity:calc(var(--o) * 1.8); }
  }
}
@media (prefers-reduced-motion:reduce){
  /* a frozen dash pattern reads as broken lines, so draw them whole instead */
  .hero-path{ stroke-dasharray:none; }
}
.hero-copy{ max-width:600px; }
.hero .eyebrow{ margin-bottom:18px; }
.hero h1{
  font-size:clamp(38px, 5.4vw, 64px);
  line-height:1.04;
  letter-spacing:-.01em;
}
.hero h1 em{ font-style:italic; color:var(--amber-2); }
.hero p.lead{
  margin-top:22px; max-width:46ch;
  font-size:clamp(var(--fs-body),1.7vw,var(--fs-lead)); line-height:1.6; color:#c3cbd7;
}
.hero .cta-row{ display:flex; gap:16px; margin-top:34px; flex-wrap:wrap; }

/* Interior pages open on the same frame at a shorter height — the homepage
   hero is the one that gets to take its time. */
.hero.hero-sub{ padding:120px 0 104px; min-height:0; }

/* Centred variant, for a hero with nothing sitting beside the copy. The
   left-weighted scrim and off-centre glow exist to hold a right-hand
   subject; with none, both go symmetric or the composition leans. */
/* The block is centred on the page; the type inside it is not. Width is set
   just past the longest headline line so the centred column still reads as
   centred — much wider and the ragged right edge pulls it off axis. */
.hero-centered .hero-copy{ max-width:660px; margin:0 auto; text-align:left; }
.hero-centered p.lead{ max-width:100%; }
.hero-centered .cta-row{ justify-content:flex-start; }
.hero-centered::before{
  background-image:
    repeating-linear-gradient(90deg, rgba(223,228,236,.05) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg,  rgba(223,228,236,.05) 0 1px, transparent 1px 72px),
    radial-gradient(52% 62% at 50% 40%, rgba(232,148,28,.5) 0%, rgba(232,148,28,.17) 42%, rgba(10,13,18,0) 74%),
    radial-gradient(62% 58% at 50% 112%, rgba(111,178,255,.26) 0%, rgba(10,13,18,0) 72%),
    linear-gradient(180deg,#111823 0%, var(--black) 100%);
}
/* Thinned deliberately to let the paths through. The centre stays the darkest
   part — it is the only thing holding the headline off the strokes — but the
   mid and outer stops give way, and the sides no longer clamp to near-solid. */
.hero-centered::after{
  background:
    radial-gradient(48% 56% at 50% 46%, rgba(10,13,18,.6) 0%, rgba(10,13,18,.24) 62%, rgba(10,13,18,.04) 100%),
    linear-gradient(90deg, rgba(10,13,18,.78) 0%, rgba(10,13,18,.2) 22%, rgba(10,13,18,0) 44%, rgba(10,13,18,0) 56%, rgba(10,13,18,.2) 78%, rgba(10,13,18,.78) 100%),
    linear-gradient(180deg, rgba(10,13,18,.7) 0%, rgba(10,13,18,.06) 26%, rgba(10,13,18,.1) 70%, rgba(10,13,18,.8) 100%);
}
@media (max-width:860px){
  .hero-centered::after{
    background:linear-gradient(180deg, rgba(10,13,18,.86) 0%, rgba(10,13,18,.7) 45%, rgba(10,13,18,.92) 100%);
  }
}

@media (max-width:860px){
  .hero{ padding:110px 0 100px; min-height:0; }
  .hero.hero-sub{ padding:96px 0 84px; }
  .hero::after{
    background:linear-gradient(180deg, rgba(10,13,18,.86) 0%, rgba(10,13,18,.72) 45%, rgba(10,13,18,.92) 100%);
  }
}

/* ---------- PRODUCT MOCKUP ----------
   A synthesized view of Ask, built in CSS rather than shipped as a
   screenshot: it stays sharp at any density, retargets in a text editor when
   the product moves, and costs no image weight.

   Note on type size: everything inside .mock-* is a *depiction of an
   interface*, not the page's own prose, so it sits below the 16px body floor
   on purpose — the same way a screenshot would. Don't copy these sizes out
   into the page. */
.hero-split .hero-inner{
  display:grid; grid-template-columns:1.02fr .98fr; gap:56px; align-items:center;
}
.hero-split .hero-copy{ max-width:560px; }
.hero-split h1{ font-size:clamp(34px, 3.8vw, 52px); }

.mock-stage{
  position:relative;
  perspective:1500px;
  perspective-origin:64% 48%;
  padding:8px 0 40px;
  margin:0;
}
/* the light the whole assembly is sitting in */
.mock-stage::before{
  content:''; position:absolute; left:6%; right:-6%; top:6%; bottom:14%;
  background:radial-gradient(60% 60% at 50% 50%, rgba(232,148,28,.22) 0%, rgba(10,13,18,0) 70%);
  filter:blur(26px); z-index:0;
}

.mock-browser{
  position:relative; z-index:1;
  border-radius:14px; overflow:hidden;
  background:#0e141d;
  border:1px solid #2a3646;
  box-shadow:0 60px 100px -46px rgba(0,0,0,.95), 0 2px 0 rgba(255,255,255,.04) inset;
  transform:rotateX(6deg) rotateY(-17deg) rotate(1.2deg);
}
/* glare: one soft diagonal pass, so the panel reads as glass at an angle */
.mock-browser::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(114deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,.02) 34%, rgba(255,255,255,0) 58%);
}

.mock-bar{
  display:flex; align-items:center; gap:10px;
  padding:11px 14px; background:#141b25; border-bottom:1px solid #232f3e;
}
.mock-dots{ display:flex; gap:6px; flex:none; }
.mock-dots i{ width:9px; height:9px; border-radius:50%; background:#2c3a4b; }
.mock-url{
  flex:1; height:25px; border-radius:999px;
  background:#0d131b; border:1px solid #232f3e;
  display:flex; align-items:center; gap:7px; padding:0 12px;
  font-family:'Hanken Grotesk',sans-serif; font-size:12px; color:#7f8a99;
}
.mock-url svg{ width:11px; height:11px; flex:none; }

.mock-app{ display:grid; grid-template-columns:150px 1fr; min-height:360px; }
.mock-side{ background:#0c1119; border-right:1px solid #1c2634; padding:16px 14px; }
.mock-brandrow{ display:flex; align-items:center; gap:9px; }
.mock-logo{
  width:24px; height:24px; border-radius:7px; flex:none;
  background:linear-gradient(150deg,#f0a830,#b96a0d);
}
.mock-brandname{
  font-family:'Fraunces',serif; font-size:13.5px; color:#e8eef7; line-height:1.1;
}
.mock-nav{ margin-top:18px; display:flex; flex-direction:column; gap:3px; list-style:none; }
.mock-nav li{
  font-family:'Hanken Grotesk',sans-serif; font-size:12px; color:#77828f;
  padding:7px 9px; border-radius:7px;
}
.mock-nav li.on{ background:rgba(232,148,28,.12); color:#ffc773; }
.mock-side .mock-meta{
  margin-top:20px; padding-top:14px; border-top:1px solid #1c2634;
  font-family:'Hanken Grotesk',sans-serif; font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:#5d6875; line-height:1.7;
}

.mock-chat{
  padding:18px 20px 18px; display:flex; flex-direction:column; gap:13px;
  background:radial-gradient(90% 70% at 80% 0%, rgba(111,178,255,.07) 0%, rgba(10,13,18,0) 60%);
}
.mock-q{
  align-self:flex-end; max-width:76%;
  background:#1d2836; border:1px solid #2b3949;
  border-radius:14px 14px 4px 14px; padding:10px 13px;
  font-family:'Hanken Grotesk',sans-serif; font-size:12.5px; line-height:1.45; color:#e2e8f1;
}
.mock-a{
  align-self:flex-start; max-width:90%;
  background:#111925; border:1px solid #223043;
  border-radius:14px 14px 14px 4px; padding:12px 14px;
  font-family:'Hanken Grotesk',sans-serif; font-size:12.5px; line-height:1.5; color:#b9c3d1;
}
.mock-a strong{ color:#e8eef7; font-weight:600; }
.mock-a ul{ list-style:none; margin-top:8px; display:flex; flex-direction:column; gap:5px; }
.mock-a li{ position:relative; padding-left:14px; }
.mock-a li::before{
  content:''; position:absolute; left:0; top:7px;
  width:5px; height:5px; border-radius:50%; background:var(--amber);
}
.mock-cite{
  display:inline-flex; align-items:center; gap:7px; margin-top:11px;
  padding:5px 10px; border-radius:999px;
  background:rgba(111,178,255,.1); border:1px solid rgba(111,178,255,.3);
  font-size:11px; color:#9cc8ff;
}
.mock-cite svg{ width:11px; height:11px; flex:none; }
.mock-input{
  margin-top:4px; display:flex; align-items:center; justify-content:space-between; gap:10px;
  border:1px solid #253143; background:#0d131b; border-radius:999px; padding:9px 9px 9px 14px;
  font-family:'Hanken Grotesk',sans-serif; font-size:12px; color:#6f7b8b;
}
.mock-send{
  width:24px; height:24px; border-radius:50%; flex:none;
  background:var(--amber); display:flex; align-items:center; justify-content:center;
}
.mock-send svg{ width:11px; height:11px; }

/* The phone floats in front of the panel in the same perspective space —
   a sibling, not a child, because the panel clips its own overflow. */
.mock-phone{
  /* sits at the panel's bottom-left corner rather than across its middle, so
     it hides chrome rather than half-covering readable labels */
  position:absolute; z-index:2; left:-13%; bottom:11%;
  width:158px; border-radius:22px; padding:9px 8px 10px;
  background:#0b1119; border:1px solid #2c3948;
  box-shadow:0 46px 76px -30px rgba(0,0,0,.98);
  transform:rotateX(6deg) rotateY(-17deg) rotate(-3.4deg) translateZ(74px);
}
.mock-notch{
  width:44px; height:4px; border-radius:3px; background:#1e2836; margin:0 auto 9px;
}
.mock-phone .p-head{
  display:flex; align-items:center; gap:7px; padding:0 4px 9px;
  border-bottom:1px solid #1a2432;
}
.mock-phone .p-logo{
  width:16px; height:16px; border-radius:5px; flex:none;
  background:linear-gradient(150deg,#f0a830,#b96a0d);
}
.mock-phone .p-name{ font-family:'Fraunces',serif; font-size:11px; color:#e8eef7; }
.mock-phone .p-body{ padding:10px 4px 0; display:flex; flex-direction:column; gap:8px; }
.mock-phone .p-q{
  align-self:flex-end; max-width:84%;
  background:#1d2836; border-radius:10px 10px 3px 10px; padding:6px 8px;
  font-family:'Hanken Grotesk',sans-serif; font-size:9.5px; line-height:1.4; color:#dfe6f0;
}
.mock-phone .p-a{
  align-self:flex-start; max-width:92%;
  background:#111925; border:1px solid #223043;
  border-radius:10px 10px 10px 3px; padding:7px 9px;
  font-family:'Hanken Grotesk',sans-serif; font-size:9.5px; line-height:1.45; color:#b9c3d1;
}
.mock-phone .p-cite{
  display:block; margin-top:6px; font-size:8.5px; color:#9cc8ff;
}

.mock-caption{
  position:relative; z-index:3;
  /* clears the phone, which hangs below the panel it floats in front of */
  margin-top:60px; text-align:center;
  font-family:'Hanken Grotesk',sans-serif; font-size:var(--fs-meta); color:#8d97a6;
}

/* The angle never goes away at any width. It is what marks this as a preview
   of the product rather than a working copy of it sitting on the page —
   square-on, people try to type in it. Narrower screens ease the rotation a
   few degrees so the far edge doesn't crush, but they never reach flat. */
@media (max-width:1000px){
  .hero-split .hero-inner{ grid-template-columns:1fr; gap:56px; }
  .hero-split .hero-copy{ max-width:600px; }
  .mock-stage{ perspective:1900px; perspective-origin:52% 50%; }
  .mock-browser{ transform:rotateX(5deg) rotateY(-14deg) rotate(1deg) scale(.97); }
  /* once the stage spans the full column, a negative percentage offset is a
     much larger absolute one — the phone lands off-screen and gets clipped */
  .mock-phone{ transform:rotateX(5deg) rotateY(-14deg) rotate(-3deg) translateZ(56px); left:1%; }
}
@media (max-width:620px){
  .mock-app{ grid-template-columns:1fr; }
  .mock-side{ display:none; }
  .mock-phone{ display:none; }
  /* A longer perspective keeps the same visible angle without the near edge
     ballooning past the column and getting clipped by the page's
     overflow-x:hidden — the rotation stays, the distortion doesn't. */
  .mock-stage{ perspective:2400px; perspective-origin:50% 50%; padding-bottom:16px; }
  .mock-browser{ transform:rotateX(4deg) rotateY(-13deg) rotate(.8deg) scale(.96); }
  /* the caption's clearance exists for the phone — with it hidden, the gap
     is just a hole */
  .mock-caption{ margin-top:22px; }
}

/* ---------- PROMISE STRIP ---------- */
.promise{
  background:var(--black-2);
  border-top:1px solid rgba(223,228,236,.08);
  border-bottom:1px solid rgba(223,228,236,.08);
  padding:36px 0;
}
.promise .wrap{
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
}
.promise-item{
  display:flex; gap:14px; align-items:flex-start;
}
.promise-item .dot{
  flex:none; width:9px; height:9px; border-radius:50%; margin-top:7px;
  background:var(--signal);
  box-shadow:0 0 0 3px rgba(111,178,255,.15);
}
.promise-item .t{
  font-family:'Hanken Grotesk',sans-serif; font-weight:600; font-size:var(--fs-body); color:var(--paper-2);
}
.promise-item .d{ font-size:var(--fs-body); color:var(--muted); margin-top:3px; line-height:1.4; }

@media (max-width:760px){
  .promise .wrap{ grid-template-columns:1fr; }
}

/* ---------- SECTION HEADERS ---------- */
.section{ padding:96px 0; }
.section.tint{
  background:var(--black-2);
  border-top:1px solid rgba(223,228,236,.08);
  border-bottom:1px solid rgba(223,228,236,.08);
}
.section-head{ max-width:640px; margin-bottom:52px; }
.section-head .eyebrow{ margin-bottom:14px; }
.section-head h2{ font-size:clamp(28px,3.4vw,38px); line-height:1.15; }
.section-head p{ margin-top:14px; font-size:var(--fs-body-lg); color:var(--muted); line-height:1.6; }

/* ---------- PROCESS ---------- */
/* .gridfield is the faint surveyed-grid backdrop, keyed off a class rather
   than the section id so both pages' process sections can carry it. */
.gridfield{ position:relative; overflow:hidden; }
.gridfield::before{
  content:''; position:absolute; inset:0; z-index:0;
  background-image:
    repeating-linear-gradient(90deg, rgba(223,228,236,.06) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg,  rgba(223,228,236,.06) 0 1px, transparent 1px 56px),
    radial-gradient(60% 70% at 50% 110%, rgba(111,178,255,.14) 0%, rgba(10,13,18,0) 70%);
  opacity:.7;
}
.gridfield::after{
  content:''; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, var(--black) 0%, rgba(10,13,18,0) 45%);
}
.gridfield > .wrap{ position:relative; z-index:1; }

.process-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.step{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:30px 26px; position:relative;
  backdrop-filter:blur(2px);
}
.step .num{
  font-family:'Fraunces',serif; font-size:34px; color:var(--amber); opacity:.6; line-height:1;
}
.step h3{ font-size:20px; margin-top:16px; }
.step p{ font-size:var(--fs-body); color:var(--muted); margin-top:10px; line-height:1.55; }
.step .stage-tag{
  display:inline-block; margin-top:16px;
  font-family:'Hanken Grotesk',sans-serif; font-size:var(--fs-label); font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--signal);
}

@media (max-width:900px){
  .process-grid{ grid-template-columns:1fr; }
}

/* ---------- SERVICES ---------- */
.services-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:20px;
}
.svc{
  background:linear-gradient(160deg,#161d28,#101620);
  border:1px solid var(--line); border-radius:14px;
  padding:28px;
}
.svc h3{ font-size:19px; }
.svc p{ font-size:var(--fs-body); color:var(--muted); margin-top:10px; line-height:1.55; }
.svc .tag{
  display:inline-block; margin-bottom:12px;
  font-family:'Hanken Grotesk',sans-serif; font-size:var(--fs-label); font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--amber-2);
}

@media (max-width:760px){
  .services-grid{ grid-template-columns:1fr; }
}

/* ---------- PRODUCT BAND (homepage → Ask) ----------
   The one place on the consultancy page where we sell something we already
   built, so it gets a frame of its own rather than a fifth service card. */
.band{
  display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center;
  background:
    radial-gradient(70% 120% at 88% 0%, rgba(232,148,28,.16) 0%, rgba(10,13,18,0) 66%),
    linear-gradient(160deg,#171f2b,#0e141d);
  border:1px solid rgba(232,148,28,.28);
  border-radius:18px;
  padding:48px;
}
.band h2{ font-size:clamp(26px,3vw,34px); line-height:1.15; margin-top:14px; }
/* matches the hero's treatment, since the band carries the hero's headline */
.band h2 em{ font-style:italic; color:var(--amber-2); }
.band p{ font-size:var(--fs-body-lg); color:var(--muted); line-height:1.65; margin-top:16px; }
.band .cta-row{ display:flex; gap:16px; margin-top:28px; flex-wrap:wrap; }
/* Compact product view, for the homepage callout's narrower column. No
   sidebar, a longer perspective so the near edge does not push out through
   the band's border, and a smaller caption. The angle stays at every width —
   same reason as the Ask page: it has to read as a preview, not a live app. */
.mock-compact{ padding:0; perspective:2200px; perspective-origin:50% 50%; }
/* the band paints its own amber bloom; a second one behind the panel muddies it */
.mock-compact::before{ display:none; }
.mock-compact .mock-app{ grid-template-columns:1fr; min-height:0; }
.mock-compact .mock-browser{
  transform:rotateX(4deg) rotateY(-13deg) rotate(.8deg) scale(.98);
}
.mock-compact .mock-chat{ padding:16px 16px 16px; }
.mock-compact .mock-caption{ margin-top:18px; font-size:var(--fs-micro); }

.band-points{ list-style:none; display:flex; flex-direction:column; gap:16px; }
.band-points li{
  display:flex; gap:12px; align-items:flex-start;
  font-size:var(--fs-body); color:#c3cbd7; line-height:1.5;
}
.band-points li::before{
  content:''; flex:none; width:7px; height:7px; margin-top:8px; border-radius:50%;
  background:var(--amber); box-shadow:0 0 0 3px rgba(232,148,28,.16);
}

@media (max-width:900px){
  .band{ grid-template-columns:1fr; gap:32px; padding:34px 28px; }
}

/* ---------- WHY ---------- */
.why-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:32px;
}
.why-item .icon{
  width:40px; height:40px; border-radius:10px;
  background:rgba(232,148,28,.12); border:1px solid rgba(232,148,28,.3);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.why-item .icon svg{ width:19px; height:19px; }
.why-item h3{ font-size:18.5px; }
.why-item p{ font-size:var(--fs-body); color:var(--muted); margin-top:9px; line-height:1.55; }

@media (max-width:860px){
  .why-grid{ grid-template-columns:1fr; gap:36px; }
}

/* ---------- TEAM BIOS ---------- */
/* Sits under the three Why items, inside the same section — the section
   argues why DutyAuto, then shows who that actually is. */
.bios{
  max-width:900px; margin:58px auto 0; padding-top:44px;
  border-top:1px solid rgba(223,228,236,.1);
  display:grid; grid-template-columns:1fr 1fr; gap:44px;
}
/* spans the grid, so the two bios stay side by side underneath it. Same
   rhythm as .section-head — heading, then a standfirst at the same measure —
   pitched a size down, since this names a block rather than opening a section.
   Body copy on purpose: it was a boxed callout once and read as a third bio. */
.bios-intro{ grid-column:1/-1; max-width:640px; margin-bottom:-6px; }
.bios-head{
  font-family:'Fraunces',serif; font-weight:500;
  font-size:clamp(22px,2.4vw,27px); line-height:1.2;
  color:var(--paper-2);
}
.bios-intro p{
  margin-top:12px;
  font-size:var(--fs-body-lg); color:var(--muted); line-height:1.6;
}
.bio-portrait{
  width:104px; height:104px;
  border-radius:14px; overflow:hidden;
  border:1px solid rgba(232,148,28,.24);
  box-shadow:0 18px 44px -24px rgba(0,0,0,.95);
  background:linear-gradient(150deg,#1b2432,#12181f);
  display:flex; align-items:center; justify-content:center;
}
.bio-portrait img{ width:100%; height:100%; object-fit:cover; display:block; }
/* monogram stand-in until portraits are shot — swap the span for the
   commented <img> in the markup and this rule stops applying */
.bio-portrait .initials{
  font-family:'Fraunces',serif; font-size:32px; font-weight:500;
  color:var(--amber-2); letter-spacing:.04em;
}
.bio-name{ font-family:'Fraunces',serif; font-weight:500; font-size:21px; color:var(--paper-2); line-height:1.2; margin-top:20px; }
.bio-role{
  font-family:'Hanken Grotesk',sans-serif; font-size:var(--fs-label); font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--signal); margin-top:6px;
}
.bio-text p{ font-size:var(--fs-body); color:var(--muted); line-height:1.65; margin-top:14px; }
.bio-text p:first-of-type{ margin-top:18px; }
/* placeholder copy is marked visually as well as in the source, so it can
   never quietly ship as if it were real */
.bio-text p.placeholder{
  color:#8d97a6; font-style:italic;
  border-left:2px solid rgba(232,148,28,.4); padding-left:14px;
}
/* the one line about how the company is shaped — given its own ground so it
   reads as an aside rather than a third paragraph of CV */
.bio-note{
  max-width:900px; margin:34px auto 0;
  padding:16px 20px;
  border-radius:12px;
  background:rgba(232,148,28,.1);
  border:1px solid rgba(232,148,28,.3);
  color:#d3dae4;
  font-size:var(--fs-body); line-height:1.65;
}

@media (max-width:760px){
  .bios{ grid-template-columns:1fr; gap:38px; margin:44px auto 0; padding-top:36px; }
  .bio-note{ padding:14px 16px; }
}

/* ---------- SPEC LIST (Ask: what it is) ---------- */
.spec{
  border-top:1px solid var(--line);
}
.spec-row{
  display:grid; grid-template-columns:200px 1fr; gap:32px;
  padding:22px 0; border-bottom:1px solid var(--line);
}
.spec-row dt{
  font-family:'Hanken Grotesk',sans-serif; font-size:var(--fs-label); font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--amber-2);
  padding-top:3px;
}
/* capped measure — the row is 1160px wide, which is far past a comfortable
   line length for running prose */
.spec-row dd{ font-size:var(--fs-body); color:#c3cbd7; line-height:1.6; max-width:72ch; }

@media (max-width:700px){
  .spec-row{ grid-template-columns:1fr; gap:8px; padding:18px 0; }
}

/* ---------- STATS (Ask: evidence) ---------- */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
.stat{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:26px 22px;
}
.stat .n{
  font-family:'Fraunces',serif; font-weight:600; font-size:clamp(30px,3.4vw,40px);
  color:var(--amber-2); line-height:1;
}
.stat .l{
  font-size:var(--fs-body); color:var(--muted); margin-top:10px; line-height:1.45;
}
/* Every number on this page is from one deployment and is going stale. The
   footnote is not decoration — it ships with the numbers or they don't ship. */
.footnote{
  margin-top:24px; max-width:78ch;
  font-family:'Hanken Grotesk',sans-serif; font-size:var(--fs-meta);
  color:#8d97a6; line-height:1.6;
}

@media (max-width:900px){ .stats{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .stats{ grid-template-columns:1fr; } }

/* ---------- FIT CARDS (Ask: who it's for) ---------- */
.fit-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.fit{
  background:linear-gradient(160deg,#161d28,#101620);
  border:1px solid var(--line); border-radius:14px; padding:28px;
}
.fit h3{ font-size:19px; }
.fit .who{
  font-family:'Hanken Grotesk',sans-serif; font-size:var(--fs-label); font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--signal); margin-top:10px;
}
/* the question the worker is actually asking, in their words */
.fit .q{
  margin-top:14px; padding:14px 16px; border-radius:10px;
  background:rgba(111,178,255,.08); border:1px solid rgba(111,178,255,.2);
  font-size:var(--fs-body); color:#d3dae4; line-height:1.5; font-style:italic;
}

@media (max-width:900px){ .fit-grid{ grid-template-columns:1fr; } }

/* ---------- LIMITS (Ask: where we draw the line) ---------- */
.limits{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.limit h3{ font-size:18px; }
.limit p{ font-size:var(--fs-body); color:var(--muted); margin-top:9px; line-height:1.6; }
.limit .rule{
  width:34px; height:2px; border-radius:2px; background:var(--amber); margin-bottom:16px;
}

@media (max-width:860px){ .limits{ grid-template-columns:1fr; gap:32px; } }

/* ---------- LOCATIONS / MAP ---------- */
.locations{ background:var(--black-2); border-top:1px solid rgba(223,228,236,.08); border-bottom:1px solid rgba(223,228,236,.08); }
.loc-layout{ display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:center; }
.loc-list{ display:flex; flex-direction:column; gap:22px; }
.loc-item{ display:flex; gap:14px; align-items:flex-start; }
.loc-item .pin{
  flex:none; width:11px; height:11px; border-radius:50% 50% 50% 0;
  transform:rotate(-45deg); margin-top:6px;
  background:var(--amber); box-shadow:0 0 0 4px rgba(232,148,28,.14);
}
.loc-item .city{ font-family:'Fraunces',serif; font-size:18px; color:var(--paper-2); }
.loc-item .role{
  font-family:'Hanken Grotesk',sans-serif; font-size:var(--fs-label); font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--signal); margin-top:3px;
}
.loc-item .d{ font-size:var(--fs-body); color:var(--muted); margin-top:4px; line-height:1.5; }

.globe-wrap{ display:flex; justify-content:center; }
.globe-wrap svg{ width:100%; max-width:440px; height:auto; }
.globe-line{ stroke:rgba(223,228,236,.14); fill:none; }
.globe-outline{ stroke:rgba(223,228,236,.28); fill:none; }
.arc{
  stroke:var(--signal); fill:none; stroke-width:1.4; stroke-dasharray:3 5;
  opacity:.7;
}
.node-ring{ fill:none; stroke:var(--amber); opacity:.5; }
.node-dot{ fill:var(--amber-2); }
.node-label{
  font-family:'Hanken Grotesk',sans-serif; font-size:12px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; fill:#d3dae4;
}

@media (prefers-reduced-motion:no-preference){
  .arc{ animation:dash 3.4s linear infinite; }
  @keyframes dash{ to{ stroke-dashoffset:-160; } }
  .node-ring{ animation:pulse 2.6s ease-in-out infinite; transform-origin:center; }
  @keyframes pulse{ 0%,100%{ opacity:.5; transform:scale(1);} 50%{ opacity:0; transform:scale(1.7);} }
  .fil{ animation:grow .9s ease forwards; opacity:0; }
  @keyframes grow{ from{opacity:0;} to{opacity:1;} }
}
@media (prefers-reduced-motion:reduce){
  .fil{ opacity:1; }
}

@media (max-width:900px){
  .loc-layout{ grid-template-columns:1fr; }
  .globe-wrap{ order:-1; }
}

/* ---------- CONTACT ---------- */
.contact{
  text-align:center; padding:150px 0 140px;
  position:relative; overflow:hidden;
  background:var(--black);
}
.contact::before{
  content:''; position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(90deg, rgba(223,228,236,.05) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg,  rgba(223,228,236,.05) 0 1px, transparent 1px 72px),
    radial-gradient(46% 60% at 50% 40%, rgba(232,148,28,.46) 0%, rgba(232,148,28,.13) 45%, rgba(10,13,18,0) 74%),
    radial-gradient(50% 60% at 50% 110%, rgba(111,178,255,.24) 0%, rgba(10,13,18,0) 72%),
    linear-gradient(180deg,#111823 0%, var(--black) 100%);
}
.contact::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(46% 56% at 50% 48%, rgba(10,13,18,.7) 0%, rgba(10,13,18,.34) 65%, rgba(10,13,18,.12) 100%),
    /* the sides have to be carried down to the page background before the
       feather takes over — without this the fade reads as a lit edge
       rather than a dissolve */
    linear-gradient(90deg, rgba(10,13,18,.96) 0%, rgba(10,13,18,.6) 9%, rgba(10,13,18,0) 24%, rgba(10,13,18,0) 76%, rgba(10,13,18,.6) 91%, rgba(10,13,18,.96) 100%),
    linear-gradient(180deg, rgba(10,13,18,.92) 0%, rgba(10,13,18,.12) 24%, rgba(10,13,18,.12) 74%, rgba(10,13,18,.94) 100%);
}
.contact .wrap{ position:relative; z-index:2; }

@media (max-width:860px){
  .contact{ padding:110px 0 100px; }
  .contact::after{
    background:linear-gradient(180deg,
      rgba(10,13,18,.94) 0%, rgba(10,13,18,.7) 16%,
      rgba(10,13,18,.7) 84%, rgba(10,13,18,.95) 100%);
  }
}
.contact-eyebrow{
  display:flex; justify-content:center; margin-bottom:16px;
  color:var(--amber-2);
  text-shadow:0 1px 14px rgba(10,13,18,.95);
}
.contact h2{ font-size:clamp(30px,4vw,46px); max-width:18ch; margin:0 auto 18px; line-height:1.1; text-shadow:0 2px 30px rgba(10,13,18,.9); }
.contact-lead{ font-size:var(--fs-body-lg); color:#c3cbd7; max-width:48ch; margin:0 auto 34px; line-height:1.6; text-shadow:0 1px 20px rgba(10,13,18,.9); }

/* ---------- FULL-BLEED BACKDROPS: SIZE CAP ---------- */
/* Each backdrop section paints its field on ::before and its scrim on
   ::after. Both are pinned to the same centered frame, capped at
   --media-max, so the scrim always lines up with what it is darkening. */
.hero::before, .hero::after,
.gridfield::before, .gridfield::after,
.contact::before, .contact::after{
  left:50%; right:auto;
  transform:translateX(-50%);
  width:min(100%, var(--media-max));
}
/* Only once the frame is actually narrower than the viewport does it need
   an edge — feather it into the background instead of butting a hard seam. */
@media (min-width:1801px){
  .hero::before, .gridfield::before, .contact::before{
    -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 12%, #000 88%, rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 12%, #000 88%, rgba(0,0,0,0) 100%);
  }
}

/* ---------- CONTACT FORM ---------- */
.form{ max-width:560px; margin:38px auto 0; text-align:left; }
.field{ margin-top:18px; }
.field label{
  display:block;
  font-family:'Hanken Grotesk',sans-serif; font-size:var(--fs-label); font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:#c3cbd7; margin-bottom:8px;
}
.field input, .field textarea{
  width:100%;
  font-family:'Hanken Grotesk',sans-serif; font-size:var(--fs-body);
  color:var(--paper-2);
  background:rgba(10,13,18,.6);
  border:1px solid rgba(223,228,236,.22);
  border-radius:10px;
  padding:13px 15px;
  transition:border-color .15s ease, background .15s ease;
}
.field textarea{ min-height:120px; resize:vertical; line-height:1.55; }
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--amber); background:rgba(10,13,18,.8);
}
.field input::placeholder, .field textarea::placeholder{ color:#7f8a99; }
.field .hint{
  font-family:'Hanken Grotesk',sans-serif; font-size:var(--fs-meta);
  color:#9aa4b3; margin-top:8px; line-height:1.5;
  letter-spacing:0; text-transform:none; font-weight:400;
}
.form .btn{ margin-top:24px; width:100%; justify-content:center; }
.form-status{
  margin-top:16px; font-family:'Hanken Grotesk',sans-serif;
  font-size:var(--fs-body); line-height:1.5;
}
.form-status.ok{ color:var(--amber-2); }
.form-status.err{ color:#ff9d80; }
/* the mail fallback offered when delivery fails — inherits the status colour
   so it reads as part of the sentence, underlined so it reads as a way out */
.form-status a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.form-alt{
  margin-top:22px; text-align:center;
  font-family:'Hanken Grotesk',sans-serif; font-size:var(--fs-meta); color:#9aa4b3;
}
.form-alt a{ color:var(--amber-2); text-decoration:none; }
.form-alt a:hover{ text-decoration:underline; }
/* honeypot — offscreen rather than display:none, which some bots skip */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---------- FOOTER ---------- */
footer{ border-top:1px solid rgba(223,228,236,.08); padding:34px 0; }
.foot-row{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
}
.foot-row .brand{ font-size:16px; }
.foot-meta{
  font-family:'Hanken Grotesk',sans-serif; font-size:var(--fs-meta); color:#8d97a6; text-align:right;
  line-height:1.6;
}
.foot-links{
  font-family:'Hanken Grotesk',sans-serif; font-size:var(--fs-meta); color:#8d97a6;
  display:flex; gap:22px; list-style:none;
}
.foot-links a{ text-decoration:none; opacity:.85; }
.foot-links a:hover{ opacity:1; color:var(--amber-2); }