/* Shared stylesheet for /consulting, /build and /legal.
   These three pages are hand-authored static HTML. Keeping one copy of the
   CSS here means a change lands on all three at once - the previous
   copy-per-page setup had already drifted between them. Page-specific
   overrides stay in a small <style> block on each page. */
:root{
    --bg:#FFFFFF;
    --fg:#0A0A0A;
    --dim:rgba(10,10,10,.62);
    --dimmer:rgba(10,10,10,.42);
    --line:rgba(10,10,10,.14);
    --gutter:clamp(26px,7.5vw,132px);   /* the one number: side inset */
    --gutter-in:clamp(24px,4vw,76px);   /* inner edge of split columns */
    --quiet:rgba(10,10,10,.45);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{background:var(--bg);color:var(--fg);font-family:'Geist','Inter',system-ui,sans-serif;
       font-size:16px;line-height:1.6;font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  body::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.028;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E")}
  a{color:inherit;text-decoration:none}
  .pad{padding-left:var(--gutter);padding-right:var(--gutter)}

  /* type */
  .dh{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;line-height:.86;letter-spacing:-.015em}
  .dh em{font-style:normal;color:var(--quiet)}
  .lab{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--dimmer)}

  /* ── IMAGE SLOTS ──────────────────────────────────────────────
     Each block below has --img. Paste your Cloudinary URL in:
        style="--img:url('https://res.cloudinary.com/…')"
     Until then it renders as an intentional dark field.
  ─────────────────────────────────────────────────────────────── */
  .bleed{position:relative;width:100%;background:#FFFFFF;overflow:hidden;display:flex}
  .bleed::before{content:"";position:absolute;inset:0;
    background-image:var(--img,none);background-size:cover;background-position:center;
    filter:saturate(.85) contrast(1.05)}
  .bleed:not([style*="--img"])::before{
    background:radial-gradient(120% 90% at 30% 20%,#F2F2EF 0%,#E9E9E5 55%,#FFFFFF 100%)}
  .bleed::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.28) 40%,rgba(255,255,255,.92) 100%)}
  .bleed > *{position:relative;z-index:2;width:100%}


  /* hero */
  .hero{min-height:94vh;align-items:flex-end;padding-bottom:clamp(48px,7vw,90px)}
  .hero .lab{margin-bottom:26px}
  .hero h1{font-size:clamp(58px,13.5vw,210px);max-width:11ch}
  .hero .sub{margin-top:34px;display:flex;gap:clamp(20px,4vw,60px);flex-wrap:wrap;
             font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}

  /* nav */
  /* Same mechanics as the main site header: the bar stays put and fades in a
     backdrop over the first 120px of scroll. These pages are all-white, so the
     old mix-blend-mode:difference was only acting as a fixed inversion - real
     colours let a translucent backdrop sit behind the nav. */
  /* Matches the main site header exactly: a 1280px container centred in the
     viewport with 24px / 48px side padding. Expressed as padding rather than
     max-width so the bar itself still spans full width for its background and
     border. Without this the logo sat at a 7.5vw gutter and jumped position
     when moving between these pages and the rest of the site. */
  nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;
      justify-content:space-between;padding:4px 24px;color:#0A0A0A;
      background:rgba(255,255,255,0);border-bottom:1px solid rgba(10,10,10,0)}
  @media(min-width:1024px){
    nav{padding-left:max(48px,calc((100vw - 1280px) / 2 + 48px));
        padding-right:max(48px,calc((100vw - 1280px) / 2 + 48px))}
  }
  nav .mark{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:16px;letter-spacing:.04em;display:flex;align-items:center}
  nav .mark img{height:64px;width:auto;display:block;filter:brightness(0)}
  @media(min-width:640px){nav .mark img{height:80px}}
  @media(min-width:1024px){nav .mark img{height:96px}}
  footer .fmark{margin-bottom:clamp(28px,4vw,52px)}
  footer .fmark img{height:clamp(84px,13vw,190px);width:auto;display:block;filter:brightness(0)}
  nav .links{display:flex;gap:26px;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
  nav .links a{opacity:.58;transition:opacity .25s ease}
  nav .links a:hover{opacity:1}
  nav .links a.on{opacity:1;border-bottom:1px solid currentColor;padding-bottom:4px}

  /* statement: the big editorial moment */
  .say{padding-top:clamp(90px,14vw,190px);padding-bottom:clamp(90px,14vw,190px)}
  .say h2{font-size:clamp(34px,7.4vw,116px);max-width:15ch}
  .say .a{color:var(--quiet)}
  /* Was max-width:44ch with up to 300px of padding-left. Under border-box the
     padding ate the box, leaving a ~86px ribbon pinned to the right edge. The
     copy now sits left under its headline at a readable measure. */
  .say .under{margin-top:clamp(30px,4vw,52px);max-width:52ch;font-size:17px;color:var(--dim)}
  .say .under b{color:var(--fg);font-weight:400}

  /* editorial row: number / title / image */
  .row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-top:1px solid var(--line)}
  .row:last-of-type{border-bottom:1px solid var(--line)}
  .row .txt{padding:clamp(52px,7vw,104px) var(--gutter-in) clamp(52px,7vw,104px) var(--gutter);
            display:flex;flex-direction:column;justify-content:center}
  .row:nth-child(even) .txt{padding-left:var(--gutter-in);padding-right:var(--gutter)}
  .row .no{font-family:'Anton',sans-serif;font-size:13px;color:var(--quiet);letter-spacing:.14em;margin-bottom:clamp(22px,3vw,40px)}
  .row h3{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(28px,4.4vw,58px);
          line-height:.9;letter-spacing:-.012em;margin-bottom:20px}
  .row p{color:var(--dim);font-size:16px;max-width:38ch}
  .row .pic{min-height:clamp(240px,32vw,460px)}
  .row:nth-child(even) .txt{order:2}
  .row:nth-child(even) .pic{order:1}

  /* full-bleed break */
  .break{min-height:clamp(320px,52vw,660px);align-items:center}
  .break h2{font-size:clamp(46px,12.5vw,126px);max-width:15ch}
  .break .lab{margin-bottom:22px}

  /* packages: editorial blocks, not cards */
  .pk{border-top:1px solid var(--line)}
  .pk:last-of-type{border-bottom:1px solid var(--line)}
  .pk .in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,5vw,80px);
          padding-top:clamp(48px,6vw,88px);padding-bottom:clamp(48px,6vw,88px);align-items:start}
  .pk .lft .lab{margin-bottom:20px}
  .pk h3{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(32px,5.4vw,72px);
         line-height:.88;letter-spacing:-.015em;margin-bottom:18px}
  .pk .who{color:var(--dim);font-size:16px;max-width:26ch;margin-bottom:26px}
  .pk .amt{font-family:'Anton',sans-serif;font-size:clamp(38px,5vw,64px);line-height:1;letter-spacing:-.02em}
  .pk .term{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dimmer);margin-top:12px}
  .pk.on .amt{color:var(--fg)}
  .pk .spec{display:grid;grid-template-columns:1fr 1fr;gap:26px 34px}
  .pk .spec div span{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
                     color:var(--quiet);margin-bottom:8px}
  .pk .spec div p{font-size:14.5px;color:var(--dim);line-height:1.5}
  .pk .go{display:inline-block;margin-top:34px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
          border-bottom:1px solid rgba(10,10,10,.28);padding-bottom:6px}
  .pk .go:hover{border-bottom-color:var(--fg)}

  /* ledger */
  .led{padding-top:clamp(70px,10vw,140px);padding-bottom:clamp(70px,10vw,140px)}
  .led h2{font-size:clamp(30px,5.6vw,84px);max-width:14ch;margin-bottom:clamp(36px,5vw,64px)}
  .led .l{display:grid;grid-template-columns:1fr auto;gap:24px;padding:19px 0;
          border-bottom:1px solid var(--line);align-items:baseline;font-size:16px}
  .led .l:first-of-type{border-top:1px solid var(--line)}
  .led .l small{display:block;color:var(--dimmer);font-size:13px;margin-top:4px}
  .led .l .v{color:var(--dim);white-space:nowrap;font-size:16.5px}
  .led .l.sum .v{color:var(--fg);font-size:19px}
  .led .l.sum{border-bottom:none}
  .led .note{margin-top:34px;color:var(--dim);max-width:50ch;font-size:16px}
  .led .note b{color:var(--fg);font-weight:400}

  /* split: contrast block */
  .vs{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .vs > div{padding:clamp(52px,7vw,100px) var(--gutter-in)}
  .vs > div:first-child{padding-left:var(--gutter)}
  .vs > div:last-child{padding-right:var(--gutter)}
  .vs > div:first-child{border-right:1px solid var(--line)}
  .vs .lab{margin-bottom:26px}
  .vs ul{list-style:none;display:flex;flex-direction:column;gap:16px}
  .vs li{font-size:16px;color:var(--dimmer);padding-bottom:16px;border-bottom:1px solid var(--line)}
  .vs .mine li{color:var(--fg)}
  .vs .mine .lab{color:var(--fg)}
  .vs .mine li{border-bottom-color:rgba(10,10,10,.28)}

  /* retainer */
  .ret{padding-top:clamp(70px,9vw,130px);padding-bottom:clamp(70px,9vw,130px);display:flex;justify-content:space-between;
       align-items:flex-end;gap:44px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
  .ret h3{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(26px,3.8vw,48px);
          line-height:.94;max-width:15ch;margin:18px 0}
  .ret p{color:var(--dim);max-width:42ch;font-size:16px}
  .ret .n{font-family:'Anton',sans-serif;font-size:clamp(48px,7vw,96px);line-height:1;letter-spacing:-.02em}
  .ret .n small{display:block;font-family:'Geist',sans-serif;font-size:11px;letter-spacing:.2em;
                text-transform:uppercase;color:var(--dimmer);margin-top:14px}

  /* closer */
  .closer{min-height:86vh;align-items:center;text-align:center}
  .closer h2{font-size:clamp(40px,10vw,150px);max-width:12ch;margin:0 auto}
  .closer .tail{margin-top:26px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--quiet)}
  .closer .go{display:inline-block;margin-top:52px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
              padding:18px 46px;border:1px solid rgba(10,10,10,.32)}
  .closer .go:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}

  /* form */
  .book{padding-top:clamp(80px,11vw,150px);padding-bottom:clamp(80px,11vw,150px)}
  .book .g{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,100px);align-items:start}
  .book h2{font-size:clamp(32px,5.4vw,76px);margin:22px 0 24px}
  .book .sub{color:var(--dim);max-width:34ch;font-size:16.5px}
  .book .fine{margin-top:26px;font-size:13px;color:var(--dimmer);max-width:38ch}
  form{display:flex;flex-direction:column;gap:22px}
  .f label{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dimmer);margin-bottom:10px}
  .f input,.f select,.f textarea{width:100%;padding:0 0 13px;font-family:inherit;font-size:17px;font-weight:300;
    background:transparent;border:none;border-bottom:1px solid var(--line);color:var(--fg);border-radius:0}
  .f input:focus,.f select:focus,.f textarea:focus{outline:none;border-bottom-color:var(--fg)}
  .f select option{background:#FFF;color:var(--fg)}
  .f textarea{resize:vertical;min-height:56px}
  form button{margin-top:18px;padding:18px;font-family:'Anton',sans-serif;text-transform:uppercase;
    letter-spacing:.16em;font-size:15px;background:var(--fg);color:var(--bg);border:none;cursor:pointer}
  form button:hover{background:var(--dim)}
  .sent{padding:28px;border:1px solid var(--line);font-size:16px;display:none;line-height:1.55;color:var(--dim)}
  .sent b{color:var(--fg);font-weight:400}
  .sent.show{display:block}
  .sent.show + form{display:none}

  footer{padding-top:clamp(60px,8vw,110px);padding-bottom:40px;border-top:1px solid var(--line)}
  footer .big{font-size:clamp(44px,11vw,170px);margin:20px 0 44px}
  .fmeta{display:flex;gap:30px;flex-wrap:wrap;font-size:13.5px;color:var(--dim);margin-bottom:40px}
  .fmeta a:hover{color:var(--fg)}
  .fnav{display:flex;gap:24px;flex-wrap:wrap;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
        color:var(--dim);padding-top:28px;border-top:1px solid var(--line)}
  .fnav a:hover{color:var(--fg)}
  .disc{margin-top:34px;font-size:11px;line-height:1.65;color:var(--dimmer);max-width:82ch}

  /* two services: choose one or both */
  .two{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
       border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .opt{background:var(--bg);padding:clamp(40px,5vw,76px) clamp(26px,3.6vw,58px);
       display:flex;flex-direction:column;transition:background .3s}
  a.opt:hover{background:#F7F7F5}
  .opt.now{background:#F4F4F2}
  .go.here{border-bottom-color:transparent;color:var(--quiet)}
  .opt .lab{margin-bottom:clamp(24px,3vw,40px)}
  .opt h3{font-family:'Anton',sans-serif;text-transform:uppercase;
          font-size:clamp(28px,4.2vw,56px);line-height:.9;letter-spacing:-.014em;margin-bottom:18px}
  .opt p{color:var(--dim);font-size:16px;max-width:38ch;margin-bottom:26px}
  .opt .ln{display:flex;flex-direction:column;gap:9px;margin-bottom:30px}
  .opt .ln span{font-size:14px;color:var(--quiet);padding-bottom:9px;border-bottom:1px solid var(--line)}
  .opt .go{margin-top:auto;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
           border-bottom:1px solid rgba(10,10,10,.28);padding-bottom:6px;align-self:flex-start}
  a.opt:hover .go{border-bottom-color:var(--fg)}

  /* statement: headline holds the left, the argument sits beside it */
  .stmt{padding-top:clamp(90px,13vw,180px);padding-bottom:clamp(90px,13vw,180px)}
  .stmt .g{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,1fr);
           gap:clamp(32px,4.5vw,72px);align-items:end}
  /* Wider column + smaller cap: at 138px this headline wrapped to 8 lines in a
     691px column and stood 949px tall, taller than a 900px desktop screen. */
  .stmt h2{font-size:clamp(46px,7vw,82px)}
  .stmt p{color:var(--dim);font-size:clamp(15.5px,1.45vw,18px);max-width:34ch;padding-bottom:14px}
  .stmt p b{color:var(--fg);font-weight:400}

  /* why-us prose */
  .why .cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,88px)}
  /* The two paragraphs used to be twins: same size, same weight, nothing leading.
     'Frequency sits on both sides' is the pivot of the argument, so it carries
     display type, and the answering column drops lower to break the flat line. */
  .why .cols{align-items:start}
  /* .stack runs the block down the page instead of across: paragraph, the
     pivot in display type, then the answering paragraph. Scoped so the legal
     page's two-column why block is untouched. */
  .why.stack .cols{display:block}
  .why.stack p{max-width:62ch}
  .why.stack .turn{padding-top:clamp(26px,3.4vw,52px)}
  .why.stack .turn h3{font-size:clamp(29px,4.6vw,64px);line-height:.94;max-width:20ch;
                      margin-bottom:clamp(18px,2vw,28px)}
  .why p b{color:var(--fg);font-weight:400}

  /* process */
  .flow{display:grid;grid-template-columns:repeat(4,1fr);
        border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .flow > div{padding:clamp(38px,4.6vw,68px) clamp(20px,2.4vw,42px);border-right:1px solid var(--line)}
  .flow > div:first-child{padding-left:var(--gutter)}
  .flow > div:last-child{border-right:none;padding-right:var(--gutter)}
  .flow .no{font-family:'Anton',sans-serif;font-size:12px;letter-spacing:.18em;color:var(--quiet);margin-bottom:clamp(20px,2.6vw,34px)}
  .flow h4{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(17px,2vw,26px);line-height:.96;margin-bottom:13px}
  .flow p{font-size:14px;color:var(--dim);line-height:1.52}

  /* restored: the three arms */
  .arms{border-top:1px solid var(--line)}
  .arm{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1.1fr) auto;
       gap:clamp(18px,4vw,64px);padding:clamp(32px,4vw,58px) 0;
       border-bottom:1px solid var(--line);align-items:baseline}
  .arm h3{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(26px,3.8vw,50px);line-height:.9;letter-spacing:-.012em}
  .arm p{color:var(--dim);font-size:15.5px;max-width:46ch}
  .arm .go{font-size:11px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;color:var(--quiet)}
  .arm:hover .go{color:var(--fg)}

  /* restored: straight answers */
  .qa{padding-top:clamp(70px,9vw,130px);padding-bottom:clamp(70px,9vw,130px)}
  .qa h2{font-size:clamp(30px,5.4vw,80px);margin-bottom:clamp(34px,4.5vw,60px)}
  .qa .q{border-top:1px solid var(--line)}
  .qa .q:last-of-type{border-bottom:1px solid var(--line)}
  .qa summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;justify-content:space-between;
              gap:clamp(20px,4vw,64px);padding:clamp(24px,3vw,40px) 0;
              font-family:'Anton',sans-serif;text-transform:uppercase;
              font-size:clamp(17px,2.1vw,27px);line-height:1.05;letter-spacing:-.008em;
              transition:color .25s ease}
  .qa summary::-webkit-details-marker{display:none}
  .qa summary::marker{content:""}
  .qa summary:hover{color:var(--dim)}
  .qa summary:focus-visible{outline:2px solid var(--fg);outline-offset:4px}
  .qa summary span{flex:none;font-family:'Geist',sans-serif;font-weight:300;font-size:26px;
                   line-height:1;color:var(--quiet);transition:transform .3s ease,color .25s ease}
  .qa .q[open] summary span{transform:rotate(45deg);color:var(--fg)}
  .qa .q p{color:var(--dim);font-size:16.5px;max-width:60ch;padding-bottom:clamp(26px,3vw,42px)}
  .qa .q[open] p{animation:qaIn .38s cubic-bezier(.4,0,.2,1)}
  @keyframes qaIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

  @media(max-width:860px){
    .row{grid-template-columns:1fr}
    .row:nth-child(even) .txt{order:0}
    .row:nth-child(even) .pic{order:0}
    .row .pic{min-height:260px}
    .row .txt,.row:nth-child(even) .txt,
    .vs > div,.vs > div:first-child,.vs > div:last-child{
      padding-left:var(--gutter);padding-right:var(--gutter)}
    .pk .in{grid-template-columns:1fr;gap:32px}
    .pk .spec{grid-template-columns:1fr}
    .vs{grid-template-columns:1fr}
    .vs > div:first-child{border-right:none;border-bottom:1px solid var(--line)}
    .book .g{grid-template-columns:1fr}
    .stmt .g{grid-template-columns:1fr;gap:24px;align-items:start}
    nav .links{gap:15px;font-size:10px;letter-spacing:.1em}
    .two{grid-template-columns:1fr}
    .why .cols{grid-template-columns:1fr;gap:22px}
    .flow{grid-template-columns:1fr 1fr}
    .flow > div{border-bottom:1px solid var(--line)}
    .flow > div:nth-child(odd){padding-left:var(--gutter)}
    .flow > div:nth-child(even){border-right:none;padding-right:var(--gutter)}
    .arm{grid-template-columns:1fr;gap:14px}
  }
  @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}