/* ============================================================
   NOIRE TECH — finish layer
   Editorial serif headings over a quiet sans, flat surfaces,
   square corners, monochrome photography, one brass accent.
   Loaded last.
   ============================================================ */

/* ---------- type ---------- */
body{font-size:17px;line-height:1.7;font-weight:300}
h1,h2,h3,h4{font-weight:500;letter-spacing:-.012em;line-height:1.04}
h1{font-size:clamp(3rem,6.2vw,5.5rem);font-weight:500;letter-spacing:-.02em;line-height:.98;max-width:14ch}
h2{font-size:clamp(2.4rem,4.8vw,4rem)}
h3{font-size:clamp(1.45rem,2vw,1.7rem);letter-spacing:-.005em}
.page-hero h1{max-width:16ch}
.lede{font-size:clamp(1.05rem,1.3vw,1.2rem)}
.overview .body-lg{font-family:var(--display);font-weight:400;font-size:clamp(1.45rem,2.1vw,1.9rem);line-height:1.38;letter-spacing:0}

/* the emphasised half of a headline: italic, in the accent */
.grad{background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:var(--s1);font-style:italic;font-weight:400}

.cluster h3,.work-card h3,.founder h3{font-size:1.9rem}
.disc-card h3{font-size:1.65rem}
.phase h3{font-size:1.5rem}
.tl-item h3{font-size:clamp(1.8rem,2.8vw,2.4rem)}
.success h3{font-size:2.1rem}
.focus h4{font-size:1.45rem;font-weight:500}
.facts b{font-size:2.7rem;font-weight:500;line-height:1;margin-bottom:8px}
.drawer a.top{font-size:1.9rem;font-weight:500}
.lead-aside li b{font-style:italic;font-weight:500;font-size:1.35rem;line-height:1.2;color:var(--s1)}
.phase-n{font-family:var(--body);font-weight:500;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase}

/* wordmark and navigation: small tracked capitals */
.brand span{font-family:var(--body);font-weight:500;font-size:.9rem;letter-spacing:.26em}
.brand small{letter-spacing:.32em;margin-top:1px}
.brand .mark{filter:none}
.navlink{font-size:.74rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;border-radius:0}
.navlink:hover,.navlink:focus-visible{background:none}
.navlink[aria-current="true"]::after{height:1px;background:var(--s1)}
.mega-col a,.drawer a{font-weight:300}

/* ---------- buttons ---------- */
.btn,.cta-nav,.btn-sm,.success button{border-radius:2px;text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;font-weight:500}
.btn{padding:18px 32px}
.btn-primary,.cta-nav,.btn-next{background:var(--text);color:var(--ink);transition:background .25s,color .25s}
.btn-primary:hover,.cta-nav:hover,.btn-next:hover{background:var(--s1);transform:none;box-shadow:none}
.btn-ghost{background:none}
.btn-ghost:hover{background:none;border-color:var(--text)}
.drawer .cta-nav{font-size:.78rem}
.more,.more-btn,.svc-pick,.mega-foot a{font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase}

/* ---------- surfaces: square, hairline, no glow ---------- */
.cluster,.work-card,.founder,.contact-strip,.form-card,.phases,.facts,.shot,.disc-card,.work-cover{border-radius:3px}
input[type=text],input[type=email],input[type=tel],input[type=url],select,textarea,.pick,.metrics span{border-radius:2px}
.form-card{box-shadow:none}
.mega{box-shadow:0 24px 50px rgba(0,0,0,.5)}

.focus{background:none;border:0;border-left:1px solid var(--s3);border-radius:0;padding:6px 0 6px 28px}
.focus::before{display:none}

.cta-band .inner{background:none;border-radius:0;border-inline:0;border-block:1px solid var(--line-2);padding-inline:0}

.success .mark{background:none;border:1px solid var(--s1);color:var(--s1);font-weight:400}
.metrics span{font-weight:400;letter-spacing:.04em}
.seam{opacity:.35}

/* ---------- hero monogram ---------- */
.vitrine::before{background:radial-gradient(circle,rgba(239,234,224,.13),transparent 62%);
  filter:blur(30px);opacity:1;animation:none;inset:0}
.vitrine::after{background:none;border-color:var(--line)}
.vitrine .mark{filter:drop-shadow(0 30px 50px rgba(0,0,0,.7))}
.orbit{border-style:solid;border-color:var(--line)}
.orbit::before{width:7px;height:7px;top:-4px;margin-left:-3.5px;box-shadow:none}

/* ---------- marquee ---------- */
.marquee{padding:22px 0}
.marquee span{font-style:italic;font-weight:400;font-size:1.4rem;gap:34px;padding-right:34px}
.marquee span::after{width:5px;height:5px;border-radius:0;transform:rotate(45deg);background:var(--s3)}

/* ---------- photography: black and white, colour on hover ---------- */
.page-hero .bg{filter:grayscale(1) contrast(1.1) brightness(.38)}
.page-hero.has-bg::before{background:linear-gradient(180deg,rgba(11,11,12,.62),rgba(11,11,12,.4) 45%,var(--ink) 100%)}
.shot img{filter:grayscale(1) contrast(1.08) brightness(.85)}
.shot::after{background:linear-gradient(180deg,transparent 55%,rgba(11,11,12,.5))}
.disc-card .pic img,.cluster-pic img{filter:grayscale(1) contrast(1.05) brightness(.7)}
.disc-card:hover .pic img,.cluster:hover .cluster-pic img{filter:grayscale(.15) brightness(.9)}
.cluster-pic img{transition:transform 1s var(--ease),filter .6s}
.disc-card .pic::after,.cluster-pic::after{background:linear-gradient(180deg,transparent 35%,var(--ink-2))}
.disc-card:hover{transform:translateY(-4px)}

/* ---------- work covers: a plate with the client's initials ---------- */
.work-cover{height:132px;background:var(--surface);animation:none;align-items:center;padding:0 26px}
.work-cover::before{display:none}
.work-cover b{font-weight:400;font-style:italic;font-size:4.2rem;letter-spacing:-.02em;color:var(--s1)}

/* ---------- founders ---------- */
.avatar{background:none;border:1px solid var(--s3);font-style:italic;font-weight:500;font-size:1.55rem;color:var(--s1)}
.avatar::before{display:none}
.founder .role{font-weight:400;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}

/* ---------- timeline ---------- */
.timeline::before,.timeline::after{width:1px}
.timeline::after{background:var(--s1)}
.tl-item::before{width:11px;height:11px;border-width:1px;left:calc(var(--lx) - var(--gut) - 5px);top:8px}
.tl-item.lit::before{box-shadow:0 0 0 5px rgba(201,173,130,.14)}
.progress{height:1px;background:var(--s1)}

@media(max-width:640px){
  h1{font-size:clamp(2.7rem,12vw,3.3rem)}
  .work-cover b{font-size:3.4rem}
}