/* ============================================================
     DIXON & HAMMOND — paper and ink.
     Design language from the "Full Site 1B" canvas (2026-09-04):
     Newsreader at weight 300 for every heading, never bold, sized
     large against small Helvetica body copy. Zero border-radius.
     Hairline grids built from 1px gaps over a --line background.
     Dark sections (#0E1114) carry the expanding particle field.
     ============================================================ */
  :root{
    --paper:#F7F5F1;
    --paper-2:#EFEBE4;
    --paper-3:#E9E6E0;
    --ink:#16191C;
    --body:#4A443D;
    --muted:#6E6357;
    --faint:#A39A8D;
    --line:#DDD8D0;
    --field:#C9C2B7;
    --dark:#0E1114;
    --d-head:#F9F7F4;
    --d-body:#B9BEC2;
    --d-soft:#C6C2BB;
    --d-mute:#96A0A8;
    --d-faint:#7E8A93;
    --d-line:rgba(247,245,241,.14);
    --maxw:1280px;
    --pad:96px;
    --serif:'Newsreader',Georgia,'Times New Roman',serif;
    --sans:'Helvetica Neue',Helvetica,Inter,system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
  body{
    font-family:var(--sans);
    background:var(--paper);color:var(--body);
    font-size:16px;line-height:1.7;
    -webkit-font-smoothing:antialiased;overflow-x:hidden;
  }
  h1,h2,h3,.disp{font-family:var(--serif);font-weight:300;color:var(--ink);letter-spacing:-.015em;text-wrap:pretty}
  h1{font-size:clamp(38px,5.6vw,78px);line-height:1.05;letter-spacing:-.02em}
  h2{font-size:clamp(30px,3.6vw,44px);line-height:1.14}
  h3{font-size:clamp(22px,2vw,26px);line-height:1.26}
  p{text-wrap:pretty}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
  section{padding-bottom:110px}
  @media(max-width:1000px){:root{--pad:44px} section{padding-bottom:76px}}
  @media(max-width:640px){:root{--pad:22px} section{padding-bottom:60px}}

  /* ---- micro-label ---- */
  .lbl{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);line-height:1.5}
  .lbl.faint{color:var(--faint)}
  .lbl.tight{letter-spacing:.2em}

  /* ---- buttons ---- */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;
    padding:16px 30px;background:var(--ink);color:var(--paper);
    font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
    line-height:1;border:1px solid var(--ink);cursor:pointer;transition:background .2s,color .2s,border-color .2s;
  }
  .btn:hover{background:#2C3238;border-color:#2C3238;color:var(--paper)}
  .btn.ghost{background:transparent;color:var(--ink)}
  .btn.ghost:hover{background:var(--ink);color:var(--paper)}
  .btn.light{background:var(--paper);color:var(--ink);border-color:var(--paper)}
  .btn.light:hover{background:#fff;border-color:#fff;color:var(--ink)}
  .btn.outline-light{background:transparent;color:var(--paper);border-color:rgba(247,245,241,.4)}
  .btn.outline-light:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
  .btn[disabled]{opacity:.5;cursor:default}
  .btn.block{width:100%}
  .ulink{
    display:inline-flex;align-items:center;padding:16px 4px;
    border-bottom:1px solid var(--faint);color:var(--body);
    font-size:12px;letter-spacing:.14em;text-transform:uppercase;transition:color .2s,border-color .2s;
  }
  .ulink:hover{color:var(--ink);border-bottom-color:var(--ink)}
  .ulink.on-dark{border-bottom-color:rgba(247,245,241,.35);color:var(--d-soft)}
  .ulink.on-dark:hover{color:var(--paper);border-bottom-color:var(--paper)}

  /* ================= HERO ================= */
  .hero{position:relative;height:720px;max-height:92vh;min-height:600px;overflow:hidden;background:var(--dark)}
  .hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
  .hero .vig{position:absolute;inset:0;background:radial-gradient(62% 50% at 50% 44%,rgba(14,17,20,.1) 0%,rgba(14,17,20,.72) 62%,rgba(14,17,20,.94) 100%)}
  .hero .fade{position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(to bottom,rgba(247,245,241,0) 0%,rgba(247,245,241,.5) 52%,rgba(247,245,241,.94) 82%,var(--paper) 100%)}
  .hero .veil{position:absolute;inset:0;z-index:5;background:var(--paper);pointer-events:none;animation:veilOut 1.5s cubic-bezier(.4,0,.2,1) both}
  @keyframes veilOut{0%{opacity:1}55%{opacity:1}100%{opacity:0}}
  @keyframes riseIn{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:translateY(0)}}
  .rise{animation:riseIn 1.2s cubic-bezier(.2,.7,.3,1) both}

  header{position:absolute;top:0;left:0;right:0;z-index:3}
  .hdr{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:30px var(--pad);max-width:var(--maxw);margin:0 auto}
  .mark{font-family:var(--serif);font-weight:300;font-size:21px;line-height:1;letter-spacing:.02em;color:var(--paper);white-space:nowrap}
  .mark .bar{color:var(--d-faint)}
  nav.main{display:none;align-items:center;gap:34px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--d-soft)}
  @media(min-width:1080px){nav.main{display:flex}}
  nav.main a:hover{color:var(--paper)}
  nav.main a.cta{padding:11px 18px;border:1px solid rgba(247,245,241,.4);color:var(--paper)}
  nav.main a.cta:hover{background:var(--paper);color:var(--ink)}
  .hdr .mini{display:inline-flex;padding:11px 18px;border:1px solid rgba(247,245,241,.4);color:var(--paper);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
  @media(min-width:1080px){.hdr .mini{display:none}}

  .hero-copy{
    /* inset rather than a % height: the header sits at the top and the fact bar at the
       bottom, so the copy needs real clearance from both or it collides on a short viewport */
    position:absolute;inset:0;z-index:2;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;
    padding:112px max(var(--pad),8vw) 124px;text-align:center;
  }
  .hero-copy h1{color:var(--d-head);max-width:16ch}
  .hero-copy p{max-width:600px;font-size:17px;line-height:1.65;color:var(--d-body)}
  .hero-copy .eyebrow{color:var(--d-mute)}
  .hero-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:18px;margin-top:4px}
  @media(max-width:640px){
    .hero-copy{gap:18px;padding:96px var(--pad) 96px}
    .hero-copy p{font-size:15.5px}
  }
  /* short viewports: shrink the type rather than let it crash into the furniture */
  @media(max-height:760px) and (min-width:641px){
    .hero-copy{gap:22px}
    .hero-copy h1{font-size:clamp(34px,4.4vw,58px)}
  }
  .hero-foot{
    position:absolute;left:var(--pad);right:var(--pad);bottom:32px;z-index:3;
    display:flex;align-items:baseline;justify-content:space-between;gap:24px;
    border-top:1px solid var(--line);padding-top:18px;
    font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  }
  @media(max-width:860px){.hero-foot span:nth-child(2){display:none}}
  @media(max-width:560px){.hero-foot{font-size:10px;letter-spacing:.08em;bottom:20px}.hero-foot span:nth-child(3){display:none}}

  /* ================= SECTION FURNITURE ================= */
  .shead{border-top:1px solid var(--line);padding-top:40px;display:flex;align-items:baseline;justify-content:space-between;gap:60px;flex-wrap:wrap}
  .shead p{max-width:480px;font-size:15px;line-height:1.7;color:var(--muted)}
  .numbered{display:grid;grid-template-columns:1fr;gap:34px;padding-top:110px}
  @media(min-width:1000px){.numbered{grid-template-columns:300px 1fr;gap:80px}}
  @media(max-width:999px){.numbered{padding-top:70px;gap:24px}}
  .numbered .idx{display:flex;flex-direction:column;gap:14px}
  .biglead{font-family:var(--serif);font-weight:300;font-size:clamp(24px,2.9vw,34px);line-height:1.38;letter-spacing:-.01em;color:var(--ink)}
  .twoup{display:grid;grid-template-columns:1fr;gap:24px;font-size:16px;line-height:1.7;color:var(--body)}
  @media(min-width:820px){.twoup{grid-template-columns:1fr 1fr;gap:40px}}
  .stack{display:flex;flex-direction:column;gap:34px;max-width:760px}

  /* ---- hairline tile grid ---- */
  .hgrid{display:grid;gap:1px;background:var(--line);margin-top:56px;grid-template-columns:1fr}
  @media(min-width:620px){.hgrid{grid-template-columns:1fr 1fr}}
  @media(min-width:980px){.hgrid.four{grid-template-columns:repeat(4,1fr)}.hgrid.three{grid-template-columns:repeat(3,1fr)}}
  .hcell{background:var(--paper);padding:34px 28px 30px;display:flex;flex-direction:column;gap:12px}
  .hcell .val{font-family:var(--serif);font-weight:300;font-size:clamp(28px,2.8vw,38px);line-height:1;letter-spacing:-.01em;color:var(--ink)}
  .hcell .cap{font-size:13px;line-height:1.6;color:var(--muted)}
  .hcell.card{padding:36px 30px 40px;gap:16px}
  .hcell.card p{font-size:15px;line-height:1.72;color:var(--body)}

  /* ---- numbered rows ---- */
  .rows{margin-top:48px;display:flex;flex-direction:column}
  .row{display:grid;grid-template-columns:1fr;gap:14px;padding:34px 0;border-bottom:1px solid var(--line);align-items:start}
  @media(min-width:1000px){.row{grid-template-columns:150px 320px 1fr;gap:48px;padding:40px 0}}
  .row p{max-width:640px;font-size:16px;line-height:1.72;color:var(--body)}

  /* ---- dark band ---- */
  .darkband{position:relative;overflow:hidden;background:var(--dark);color:var(--paper);padding:104px 0}
  @media(max-width:999px){.darkband{padding:72px 0}}
  .darkband canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:.55}
  .darkband .scrim{position:absolute;inset:0;background:linear-gradient(to right,rgba(14,17,20,.94) 0%,rgba(14,17,20,.78) 55%,rgba(14,17,20,.5) 100%)}
  .darkband .inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr;gap:44px}
  @media(min-width:1000px){.darkband .inner{grid-template-columns:1fr 1fr;gap:80px}}
  .darkband h2{color:var(--d-head)}
  .darkband p{font-size:16px;line-height:1.72;color:var(--d-body)}
  .dcards{display:flex;flex-direction:column;gap:1px;background:var(--d-line)}
  .dcard{background:rgba(14,17,20,.55);padding:28px 30px;display:flex;flex-direction:column;gap:10px}
  .dcard p{font-size:15px;line-height:1.7;color:#C9CFD4}

  /* ---- suitability ---- */
  .fitgrid{margin-top:48px;display:grid;grid-template-columns:1fr;gap:44px}
  @media(min-width:900px){.fitgrid{grid-template-columns:1fr 1fr;gap:64px}}
  .fitcol{display:flex;flex-direction:column;gap:20px}
  .fithead{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:14px}
  .fitcol.no .fithead{color:var(--faint);border-bottom-color:var(--line)}
  .fititem{display:grid;grid-template-columns:18px 1fr;gap:14px;font-size:16px;line-height:1.6;color:var(--body)}
  .fititem i{display:block;width:12px;height:1px;background:var(--ink);margin-top:13px}
  .fitcol.no .fititem{color:#8B8478}
  .fitcol.no .fititem i{background:var(--faint)}

  /* ---- FAQ ---- */
  .faq{margin-top:40px;display:flex;flex-direction:column}
  .faq details{border-bottom:1px solid var(--line)}
  .faq summary{
    list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 24px;gap:24px;align-items:center;
    padding:26px 0;font-family:var(--serif);font-weight:300;font-size:clamp(19px,1.9vw,24px);line-height:1.3;
    letter-spacing:-.01em;color:var(--ink);transition:color .2s;
  }
  .faq summary::-webkit-details-marker{display:none}
  .faq summary:hover{color:var(--muted)}
  .faq summary::after{content:"+";justify-self:end;font-family:var(--sans);font-size:20px;line-height:1;color:var(--faint)}
  .faq details[open] summary::after{content:"\2013"}
  .faq .ans{padding:0 0 30px;max-width:800px;font-size:16px;line-height:1.75;color:var(--body)}
  .faq .ans p+p{margin-top:14px}

  /* ---- enquiry ---- */
  .panelwrap{background:var(--paper-2);padding:64px;display:grid;grid-template-columns:1fr;gap:44px}
  @media(min-width:1040px){.panelwrap{grid-template-columns:380px 1fr;gap:72px}}
  @media(max-width:640px){.panelwrap{padding:34px 24px}}
  .panelwrap .intro{display:flex;flex-direction:column;gap:24px}
  .panelwrap .intro p{font-size:16px;line-height:1.7;color:var(--body)}
  .assure{display:flex;flex-direction:column;gap:12px;margin-top:8px;padding-top:22px;border-top:1px solid var(--line);font-size:13px;line-height:1.6;color:var(--muted)}
  .fields{display:grid;grid-template-columns:1fr;gap:22px}
  @media(min-width:620px){.fields{grid-template-columns:1fr 1fr}}
  .field{display:flex;flex-direction:column;gap:9px}
  .field.full{grid-column:1/-1}
  .field label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
  .field .opt-note{text-transform:none;letter-spacing:.02em;color:var(--faint)}
  .field .opt{text-transform:none;letter-spacing:.02em;color:var(--faint)}
  .field input,.field select,.field textarea{
    border:none;border-bottom:1px solid var(--field);background:transparent;padding:10px 0;
    font-family:var(--sans);font-size:16px;line-height:1.4;color:var(--ink);outline:none;
    transition:border-color .2s;border-radius:0;-webkit-appearance:none;appearance:none;
  }
  .field select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' fill='none' stroke='%236E6357' stroke-width='1.3'%3E%3Cpath d='M1 1l4.5 4.5L10 1'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 2px center;padding-right:22px}
  .field textarea{resize:none;line-height:1.5}
  .field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--ink)}
  .field input::placeholder,.field textarea::placeholder{color:var(--faint)}
  .field.err input,.field.err select,.field.err textarea{border-bottom-color:#9B4A2F}
  .consent{grid-column:1/-1;display:grid;grid-template-columns:20px 1fr;gap:14px;align-items:start;cursor:pointer;font-size:13px;line-height:1.6;color:var(--muted)}
  .consent input{position:absolute;opacity:0;pointer-events:none}
  .consent .box{width:18px;height:18px;border:1px solid var(--field);display:flex;align-items:center;justify-content:center;margin-top:2px;transition:background .18s,border-color .18s}
  .consent .box svg{opacity:0;transition:opacity .18s}
  .consent.on .box{background:var(--ink);border-color:var(--ink)}
  .consent.on .box svg{opacity:1}
  .consent.err .box{border-color:#9B4A2F}
  .formfoot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;margin-top:6px}
  .formfoot .fine{max-width:420px;font-size:12px;line-height:1.6;color:var(--muted)}
  .formerr{grid-column:1/-1;display:none;font-size:13px;line-height:1.6;color:#9B4A2F}
  .formerr.on{display:block}
  #form-view.off{display:none}
  #thanks{display:none}
  #thanks.on{display:block}
  #thanks ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:14px;font-size:15.5px;line-height:1.7;color:var(--body)}

  /* ---- footer ---- */
  footer{background:var(--dark);color:var(--d-body);padding:72px 0 40px}
  .fgrid{display:grid;grid-template-columns:1fr;gap:40px;padding-bottom:56px;border-bottom:1px solid var(--d-line)}
  @media(min-width:900px){.fgrid{grid-template-columns:1fr 190px 220px 210px 170px;gap:40px}}
  .fgrid .mark{color:var(--paper)}
  .ftag{margin-top:18px;max-width:340px;font-size:14px;line-height:1.7;color:var(--d-mute)}
  .fcol{display:flex;flex-direction:column;gap:12px;font-size:13px}
  .fcol .fh{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--d-faint);margin-bottom:6px}
  .fcol a:hover{color:var(--paper)}
  .fcol span{color:var(--d-mute)}
  .fbot{padding-top:26px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;font-size:12px;color:#6E7A82}
  .fdisc{margin-top:26px;max-width:900px;font-size:11.5px;line-height:1.7;color:#5C666D}

  @media(prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
    html{scroll-behavior:auto}
  }

/* ---- capital partners page ---- */
.hero.short{height:560px;min-height:480px;max-height:80vh}
.hero.short .hero-copy{padding-top:104px;padding-bottom:110px}
.hero.short h1{max-width:18ch}
.backlink{display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--d-soft)}
.backlink:hover{color:var(--paper)}
.backlink i{display:block;width:16px;height:1px;background:currentColor}
.legal{margin-top:56px;padding-top:26px;border-top:1px solid var(--line);max-width:900px;font-size:12px;line-height:1.75;color:var(--muted)}

/* ================= QUIZ PAGE (capital partners, standalone) =================
   Logo, then straight into the questions. One per screen, auto-advancing.
   Flow modelled on omegahire.secretagents.co; palette and type stay Dixon & Hammond.
   ========================================================================= */
.quizpage{background:var(--paper);min-height:100svh}
#bg-field{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
.bgwash{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(58% 46% at 50% 44%,rgba(247,245,241,.94) 0%,rgba(247,245,241,.76) 44%,rgba(247,245,241,.5) 100%)}

.qshell{position:relative;z-index:2;max-width:660px;margin:0 auto;padding:34px 24px 64px;
  min-height:100svh;display:flex;flex-direction:column}
@media(min-width:700px){.qshell{padding:44px 32px 80px}}

.qbrand{display:flex;justify-content:center;padding-bottom:34px}
.qbrand a{font-family:var(--serif);font-weight:300;font-size:23px;line-height:1;letter-spacing:.02em;color:var(--ink)}
.qbrand .bar{color:var(--faint)}
@media(min-width:700px){.qbrand{padding-bottom:46px}}

.quiz{flex:1;display:flex;flex-direction:column}
.qback{align-self:flex-start;background:none;border:0;padding:6px 0;cursor:pointer;
  font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);transition:color .2s}
.qback:hover{color:var(--ink)}
.qback[hidden]{display:none}
.qhead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:14px 0 12px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.qtrack{height:1px;background:var(--field);position:relative;margin-bottom:40px}
.qfill{position:absolute;left:0;top:0;height:1px;background:var(--ink);width:0;transition:width .4s cubic-bezier(.4,0,.2,1)}

.step{display:flex;flex-direction:column;gap:22px;padding-bottom:30px}
.quiz-live .step{display:none;padding-bottom:0}
.quiz-live .step.on{display:flex;animation:riseIn .45s cubic-bezier(.2,.7,.3,1) both}
.step h2{font-size:clamp(25px,4.2vw,34px);line-height:1.2}
.step .qhint{font-size:14.5px;line-height:1.62;color:var(--muted);margin-top:-12px}

.opts{display:flex;flex-direction:column;gap:10px}
.opt{display:flex;align-items:center;gap:16px;width:100%;text-align:left;cursor:pointer;
  font-family:var(--sans);font-size:16px;line-height:1.4;color:var(--ink);
  background:transparent;border:1px solid var(--line);padding:19px 20px;
  transition:border-color .16s,background .16s,color .16s}
.opt:hover{border-color:var(--ink);background:rgba(255,255,255,.5)}
.opt:active{transform:scale(.995)}
.opt.sel{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.opt .lead{flex:1}
.opt .sub{display:block;font-size:13px;line-height:1.5;color:var(--muted);margin-top:4px}
.opt.sel .sub{color:rgba(247,245,241,.72)}
.opt .chk{margin-left:auto;width:20px;height:20px;flex:none;border:1px solid var(--field);
  display:flex;align-items:center;justify-content:center;transition:background .16s,border-color .16s}
.opt .chk svg{opacity:0;transition:opacity .16s}
.opt.sel .chk{background:var(--paper);border-color:var(--paper)}
.opt.sel .chk svg{opacity:1}

.qerr{display:none;font-size:13px;line-height:1.6;color:#9B4A2F}
.qerr.on{display:block}

.step.contact .fields{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:620px){.step.contact .fields{grid-template-columns:1fr 1fr}}
.step.contact .formfoot{flex-direction:column;align-items:stretch;gap:16px}
.step.contact .formfoot .btn{width:100%}

/* thank you */
#thanks{display:none}
#thanks.on{display:block;animation:riseIn .5s cubic-bezier(.2,.7,.3,1) both}
#thanks h2{font-size:clamp(28px,4.4vw,38px);margin-bottom:16px}
#thanks .lede-p{font-size:16px;line-height:1.7;color:var(--body)}
.outcome{border-top:1px solid var(--line);margin-top:30px;padding-top:26px;display:flex;flex-direction:column;gap:10px}
.outcome .oh{font-family:var(--serif);font-weight:300;font-size:23px;line-height:1.3;color:var(--ink)}
.outcome p{font-size:15px;line-height:1.7;color:var(--body)}
.recap{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.recap span{border:1px solid var(--line);padding:7px 12px;font-size:11.5px;letter-spacing:.06em;color:var(--muted)}
#thanks ol{margin:30px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:12px;font-size:15px;line-height:1.7;color:var(--body)}

.qfoot{margin-top:auto;padding-top:48px;display:flex;flex-wrap:wrap;gap:14px;align-items:baseline;justify-content:space-between}
.qfoot a{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.qfoot a:hover{color:var(--ink)}
.microlegal{font-size:11px;line-height:1.7;color:var(--faint);max-width:52ch}