/* ══════════════════════════════════════════════════════════════════
   CONTACT, v3
   Rebuilt as a standard premium contact page. One container, one grid,
   one spacing scale, content driven heights.

   Loaded only by contact.html, after home-v2.css. Two things from that
   file are deliberately overridden below and must stay overridden:

     section{padding:140px 0}   280px of vertical space per section, which
                                is what made the old page feel fragmented
     .ghost                     the giant outlined background numerals

   Alignment comes from .wrap alone (max-width 1200, padding 0 32), the
   same container the service and case study pages use. Nothing on this
   page sets its own width.
   ══════════════════════════════════════════════════════════════════ */

/* ── Spacing scale ───────────────────────────────────────────────── */

section{padding:96px 0}                 /* large   */
section.s-md{padding:76px 0}            /* medium  */
section.s-sm{padding:60px 0}            /* compact */
@media(max-width:1023px){
  section{padding:72px 0}
  section.s-md{padding:60px 0}
  section.s-sm{padding:52px 0}
}
@media(max-width:640px){
  section{padding:56px 0}
  section.s-md,section.s-sm{padding:48px 0}
  .wrap{padding:0 22px}
}

/* the decorative background numerals are removed on this page entirely */
.ghost{display:none}

/* ── Shared heads ────────────────────────────────────────────────── */

.lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gray,#6B6B6B);display:flex;align-items:center;gap:11px;margin:0 0 16px}
.lbl::before{content:"";width:22px;height:1px;background:currentColor}
.dark .lbl{color:var(--acid,#E9FF5C)}

.h2{font-size:clamp(26px,2.9vw,38px);line-height:1.15;letter-spacing:-.025em;font-weight:600;margin:0}
.dark .h2{color:var(--paper,#FAF9F5)}

/* section head, label + heading left, supporting copy right */
.shead{display:grid;grid-template-columns:1fr;gap:16px;align-items:end;margin-bottom:40px}
@media(min-width:900px){.shead{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px}}
.shead p{font-size:15.5px;line-height:1.7;color:var(--gray,#6B6B6B);margin:0;max-width:44ch}
.dark .shead p{color:var(--gray-s,#A8A8A8)}

/* ── 1. Hero ─────────────────────────────────────────────────────── */

.chero{padding:112px 0 88px}
@media(max-width:1023px){.chero{padding:96px 0 68px}}
@media(max-width:640px){.chero{padding:84px 0 56px}}
.chero-g{display:grid;grid-template-columns:1fr;gap:44px;align-items:center}
@media(min-width:900px){.chero-g{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:80px}}
.chero h1{font-size:clamp(32px,4.4vw,54px);line-height:1.07;letter-spacing:-.03em;font-weight:600;
  color:var(--paper,#FAF9F5);margin:0;max-width:16ch}
.chero p{font-size:clamp(15px,1.35vw,17px);line-height:1.7;color:var(--gray-s,#A8A8A8);margin:20px 0 0;max-width:50ch}
.chero-a{display:flex;gap:13px;flex-wrap:wrap;margin-top:30px}

/* hero metadata, thin rules rather than a floating card */
.cmeta{margin:0;border-top:1px solid rgba(250,249,245,.18)}
.cmeta div{display:grid;grid-template-columns:1fr;gap:3px;padding:15px 0;border-bottom:1px solid rgba(250,249,245,.12)}
.cmeta dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:rgba(250,249,245,.45)}
.cmeta dd{margin:0;font-size:15px;color:var(--paper,#FAF9F5);word-break:break-word}
.cmeta dd a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(250,249,245,.3);transition:color var(--t-fast,150ms),border-color var(--t-fast,150ms)}
.cmeta dd a:hover{color:var(--acid,#E9FF5C);border-bottom-color:var(--acid,#E9FF5C)}
.cmeta dd a:focus-visible{outline:2px solid var(--acid,#E9FF5C);outline-offset:3px}

/* ── 2. Contact form ─────────────────────────────────────────────── */

.cform-g{display:grid;grid-template-columns:1fr;gap:44px;align-items:start}
@media(min-width:1024px){.cform-g{grid-template-columns:minmax(0,36fr) minmax(0,64fr);gap:56px}}
@media(min-width:1280px){.cform-g{gap:72px}}
.cform-intro h2{font-size:clamp(26px,2.7vw,36px);line-height:1.15;letter-spacing:-.025em;font-weight:600;margin:0;max-width:14ch}
.cform-intro p{font-size:15.5px;line-height:1.7;color:var(--gray,#6B6B6B);margin:18px 0 0;max-width:40ch}
.cform-note{font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;line-height:1.75;color:var(--gray,#6B6B6B);
  border-left:2px solid var(--acid,#E9FF5C);padding:3px 0 3px 14px;margin:24px 0 0;max-width:38ch}

.cform{display:grid;gap:22px}
.frow{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:640px){.frow.two{grid-template-columns:repeat(2,1fr)}}
.fld{display:flex;flex-direction:column;min-width:0}
.fld label,.fset legend{font-size:14px;font-weight:500;color:var(--black,#0A0A0A);margin-bottom:8px;display:block;padding:0}
.req{color:var(--gray,#6B6B6B);font-weight:400}
.fhint{font-size:12.5px;line-height:1.55;color:var(--gray,#6B6B6B);margin:0 0 9px}
.fld input,.fld textarea,.fld select{
  font-family:var(--sans);font-size:16px;color:var(--black,#0A0A0A);background:#fff;
  border:1px solid #D7D4CB;border-radius:4px;padding:14px 15px;width:100%;min-height:54px;
  transition:border-color var(--t-fast,150ms),box-shadow var(--t-fast,150ms);appearance:none}
.fld textarea{min-height:152px;resize:vertical;line-height:1.65}
.fld select{background-image:linear-gradient(45deg,transparent 50%,var(--black,#0A0A0A) 50%),linear-gradient(135deg,var(--black,#0A0A0A) 50%,transparent 50%);
  background-position:calc(100% - 20px) 23px,calc(100% - 14px) 23px;background-size:6px 6px;background-repeat:no-repeat;padding-right:44px}
.fld input::placeholder,.fld textarea::placeholder{color:#A8A49A}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:none;border-color:var(--black,#0A0A0A);box-shadow:0 0 0 3px var(--acid,#E9FF5C)}
.fld input[aria-invalid="true"],.fld textarea[aria-invalid="true"]{border-color:#B3261E;border-width:2px}
/* an error is never signalled by colour alone, every one has text below it */
.ferr{font-size:12.5px;line-height:1.5;color:#B3261E;margin:8px 0 0;display:flex;gap:7px}
.ferr::before{content:"!";font-family:var(--mono);font-weight:500;flex-shrink:0}
.ferr[hidden]{display:none}

.fset{border:0;padding:0;margin:0;min-width:0}
.ptypes{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:2px}
@media(min-width:640px){.ptypes{grid-template-columns:repeat(3,1fr)}}
.ptype{position:relative;display:block}
.ptype input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.ptype span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:46px;padding:8px 12px;
  border:1px solid #D7D4CB;border-radius:4px;background:#fff;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gray,#6B6B6B);
  transition:border-color var(--t-fast,150ms),background var(--t-fast,150ms),color var(--t-fast,150ms);cursor:pointer}
.ptype input:hover + span{border-color:var(--black,#0A0A0A);color:var(--black,#0A0A0A)}
.ptype input:checked + span{background:var(--black,#0A0A0A);border-color:var(--black,#0A0A0A);color:var(--paper,#FAF9F5)}
/* selection is not colour only, a marker bar is added as well */
.ptype input:checked + span::before{content:"";position:absolute;left:0;top:11px;bottom:11px;width:3px;background:var(--acid,#E9FF5C)}
.ptype input:focus-visible + span{outline:2px solid var(--black,#0A0A0A);outline-offset:2px}

.fsubmit{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.fsubmit .btn{border:0;cursor:pointer;font-family:var(--sans);min-height:52px}
.fsubmit .btn[disabled]{opacity:.55;cursor:not-allowed}
.fconsent{font-size:12.5px;line-height:1.55;color:var(--gray,#6B6B6B);margin:0;max-width:34ch}
.fconsent a{color:var(--black,#0A0A0A)}
@media(max-width:520px){.fsubmit .btn{width:100%;justify-content:center}}

/* Honeypot. Off screen rather than display:none, because a bot that parses
   CSS skips display:none fields and would leave this empty, defeating it. */
.form-honeypot{position:absolute!important;left:-10000px!important;top:auto!important;
  width:1px!important;height:1px!important;overflow:hidden!important}

.fstatus[hidden]{display:none}
.fstatus.err{border-left:3px solid #B3261E;padding:15px 18px;background:rgba(179,38,30,.05)}
.fstatus.err p{margin:0;font-size:14px;line-height:1.6;color:var(--black,#0A0A0A)}
.fstatus.err a{color:var(--black,#0A0A0A)}

.fdone{border-top:2px solid var(--acid,#E9FF5C);padding-top:26px}
.fdone[hidden]{display:none}
.fdone h3{font-size:clamp(22px,2.3vw,30px);line-height:1.16;letter-spacing:-.025em;font-weight:600;margin:12px 0 0}
.fdone p{font-size:15.5px;line-height:1.7;color:var(--gray,#6B6B6B);margin:14px 0 0;max-width:44ch}
.fdone-a{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:26px}

/* ── 3. Direct contact, three columns ────────────────────────────── */

.cdirect{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid rgba(10,10,10,.18)}
@media(min-width:820px){.cdirect{grid-template-columns:repeat(3,1fr);column-gap:40px}}
.cdirect a{display:block;padding:24px 0;text-decoration:none;color:inherit;border-bottom:1px solid rgba(10,10,10,.12)}
@media(min-width:820px){.cdirect a{border-bottom:0}}
.cdirect em{font-family:var(--mono);font-style:normal;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--gray,#6B6B6B);display:block}
.cdirect b{font-size:17px;font-weight:600;letter-spacing:-.015em;display:flex;align-items:baseline;gap:9px;margin-top:11px;word-break:break-word}
.cdirect b i{font-style:normal;font-size:15px;color:var(--gray,#6B6B6B);transition:transform var(--t-base,250ms),color var(--t-fast,150ms)}
.cdirect a:hover b i{transform:translateX(4px);color:var(--black,#0A0A0A)}
.cdirect a:hover b{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.cdirect span{font-size:14px;line-height:1.6;color:var(--gray,#6B6B6B);display:block;margin-top:8px;max-width:32ch}
.cdirect a:focus-visible{outline:2px solid var(--black,#0A0A0A);outline-offset:3px}

/* ── 4. Services, two columns ────────────────────────────────────── */

.cserv{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;border-top:1px solid rgba(10,10,10,.18)}
@media(min-width:820px){.cserv{grid-template-columns:repeat(2,1fr);column-gap:48px}}
.cserv li{border-bottom:1px solid rgba(10,10,10,.12)}
.cserv li a{display:block;padding:22px 0;text-decoration:none;color:inherit;border-bottom:0}
.cserv b{font-size:17px;font-weight:600;letter-spacing:-.015em;display:flex;align-items:baseline;gap:9px}
.cserv b i{font-style:normal;font-size:15px;color:var(--gray,#6B6B6B);margin-left:auto;transition:transform var(--t-base,250ms),color var(--t-fast,150ms)}
.cserv li a:hover b i{transform:translateX(4px);color:var(--black,#0A0A0A)}
.cserv li a:hover b{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.cserv p{font-size:14px;line-height:1.6;color:var(--gray,#6B6B6B);margin:7px 0 0;max-width:42ch}
.cserv li a:focus-visible{outline:2px solid var(--black,#0A0A0A);outline-offset:3px}

/* ── 5. Selected work, 2x2 ───────────────────────────────────────── */

.cwork{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;column-gap:48px}
@media(min-width:820px){.cwork{grid-template-columns:repeat(2,1fr)}}
.cwork li{border-top:1px solid #2C2C2C}
.cwork li a{display:block;padding:28px 0;text-decoration:none;color:inherit;border-bottom:0;position:relative}
.cwork em{font-family:var(--mono);font-style:normal;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--acid,#E9FF5C);display:block}
.cwork b{font-size:21px;font-weight:600;letter-spacing:-.02em;color:var(--paper,#FAF9F5);display:flex;align-items:baseline;gap:12px;margin-top:12px}
.cwork b i{font-style:normal;font-size:16px;color:var(--gray-s,#A8A8A8);margin-left:auto;transition:transform var(--t-base,250ms),color var(--t-fast,150ms)}
.cwork li a:hover b i{transform:translateX(4px);color:var(--acid,#E9FF5C)}
.cwork li a:hover b{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.cwork p{font-size:14.5px;line-height:1.65;color:var(--gray-s,#A8A8A8);margin:10px 0 0;max-width:42ch}
.cwork li a:focus-visible{outline:2px solid var(--acid,#E9FF5C);outline-offset:3px}
.cwork-cta{margin:32px 0 0;padding-top:22px;border-top:1px solid #2C2C2C}
.cwork-cta a{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--paper,#FAF9F5);text-decoration:none;border-bottom:1px solid rgba(250,249,245,.4);padding-bottom:4px;
  display:inline-flex;align-items:center;gap:9px;transition:color var(--t-fast,150ms),border-color var(--t-fast,150ms)}
.cwork-cta a:hover{color:var(--acid,#E9FF5C);border-bottom-color:var(--acid,#E9FF5C)}
.cwork-cta a:focus-visible{outline:2px solid var(--acid,#E9FF5C);outline-offset:3px}

/* ── 6. Final CTA ────────────────────────────────────────────────── */

.cend{display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
@media(min-width:900px){.cend{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px}}
.cend h2{font-size:clamp(26px,2.8vw,36px);line-height:1.14;letter-spacing:-.025em;font-weight:600;margin:0;max-width:18ch}
.cend p{font-size:15.5px;line-height:1.7;color:var(--gray,#6B6B6B);margin:14px 0 0;max-width:46ch}
.cend-a{display:flex;gap:13px;flex-wrap:wrap;align-items:center}
@media(min-width:900px){.cend-a{justify-content:flex-end}}

/* ── Reduced motion ──────────────────────────────────────────────── */

@media(prefers-reduced-motion:reduce){
  .cdirect b i,.cserv b i,.cwork b i,.fld input,.fld textarea,.fld select,.ptype span{transition:none}
  .cdirect a:hover b i,.cserv li a:hover b i,.cwork li a:hover b i{transform:none}
}