/* ============================================================
   Dymianiw Building — "The Maker's Mark"
   Warm craftsman's monograph · bone / ink / oxblood
   ============================================================ */

/* ---- tokens ------------------------------------------------ */
:root{
  /* paper & ink — tinted, never pure #000/#fff */
  --paper:   #F4EEE2;   /* warm bone */
  --paper-2: #ECE3D1;   /* deeper warm band (visible step) */
  --paper-3: #E3D8C2;   /* deepest warm */
  --ink:     #241E15;   /* warm near-black text */
  --ink-2:   #574B3B;   /* muted warm secondary */
  --ink-3:   #8B7C67;   /* captions / faint */
  --ox:      #7C2D20;   /* oxblood accent */
  --ox-2:    #5E2018;   /* oxblood pressed */
  --ox-tint: #A85A46;   /* lighter oxblood (on dark) */
  --night:   #1C1710;   /* dark band / footer ink */
  --night-2: #2A2318;

  --line:    rgba(36,30,21,.14);
  --line-2:  rgba(36,30,21,.08);
  --shadow-rgb: 60 44 30;               /* warm-tinted shadow */
  --shadow-1: 0 1px 2px rgb(var(--shadow-rgb)/.10), 0 1px 1px rgb(var(--shadow-rgb)/.07);
  --shadow-2: 0 3px 6px rgb(var(--shadow-rgb)/.09), 0 10px 22px rgb(var(--shadow-rgb)/.13);
  --shadow-3: 0 6px 12px rgb(var(--shadow-rgb)/.10), 0 26px 50px rgb(var(--shadow-rgb)/.20);

  --serif: 'Zodiak', 'Georgia', 'Times New Roman', serif;
  --sans:  'General Sans', system-ui, -apple-system, sans-serif;
  --hand:  'Caveat', 'Segoe Script', cursive;

  --r: 7px;                    /* radius lane: editorial-precise */
  --content: 1180px;
  --section-y: clamp(5rem, 10vw, 9rem);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-weight:400;
  font-size:clamp(1rem, .96rem + .25vw, 1.125rem);
  line-height:1.6; letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--ox); color:var(--paper); }

/* ---- type ------------------------------------------------- */
.serif{ font-family:var(--serif); }
h1,h2,h3{ font-family:var(--serif); font-weight:400; line-height:1.02; letter-spacing:-.02em; text-wrap:balance; }
.eyebrow{
  font-family:var(--sans); font-weight:600; font-size:.72rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ox);
}
p{ text-wrap:pretty; }
.measure{ max-width:60ch; }

/* ---- layout ----------------------------------------------- */
.wrap{ width:min(92%, var(--content)); margin-inline:auto; }
.wrap-wide{ width:min(95%, 1420px); margin-inline:auto; }
section{ padding-block:var(--section-y); }
[id]{ scroll-margin-top:88px; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(18px, 4vw, 54px);
  transition:background .3s ease, box-shadow .3s ease, padding .3s ease;
}
.nav.scrolled{
  background:color-mix(in oklab, var(--paper) 88%, transparent);
  backdrop-filter:blur(12px) saturate(1.2); -webkit-backdrop-filter:blur(12px) saturate(1.2);
  box-shadow:0 1px 0 var(--line-2), var(--shadow-1); padding-block:12px;
}
.brand{ line-height:1; }
.brand b{ font-family:var(--serif); font-weight:700; font-size:1.5rem; letter-spacing:-.01em; display:block; }
.brand span{
  font-family:var(--sans); font-weight:600; font-size:.6rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-2); display:block; margin-top:3px;
}
.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links a.link{
  font-weight:500; font-size:.95rem; color:var(--ink-2); position:relative; padding:4px 0;
  transition:color .2s ease;
}
.nav-links a.link::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px;
  background:var(--ox); transition:right .28s ease;
}
.nav-links a.link:hover{ color:var(--ink); }
.nav-links a.link:hover::after{ right:0; }

/* ---- buttons (mechanics floor) ---------------------------- */
.btn{
  --pad-y:15px; --pad-x:28px;
  display:inline-flex; align-items:center; gap:.55em; justify-content:center;
  padding:var(--pad-y) var(--pad-x); border-radius:var(--r);
  font-family:var(--sans); font-weight:600; font-size:.95rem; letter-spacing:-.01em;
  cursor:pointer; border:1px solid transparent; white-space:nowrap;
  transition:transform .12s ease, box-shadow .12s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primary{
  background:var(--ox); color:#F7EFE4;
  border-color:color-mix(in oklab, #fff 20%, var(--ox));   /* one tactile cue: top-light bevel */
  box-shadow:var(--shadow-1);
}
.btn-primary:hover{ background:var(--ox-2); box-shadow:var(--shadow-2); transform:translateY(-1px); }
.btn-primary:active{ transform:translateY(1px); box-shadow:var(--shadow-1); }
.btn-ghost{
  background:transparent; color:var(--ink); border-color:var(--line);
}
.btn-ghost:hover{ border-color:var(--ink); background:color-mix(in oklab, var(--ink) 5%, transparent); }
.btn-ghost:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:2px solid var(--ox); outline-offset:3px; }
.btn.on-dark.btn-ghost{ color:var(--paper); border-color:rgba(247,239,228,.28); }
.btn.on-dark.btn-ghost:hover{ border-color:var(--paper); background:rgba(247,239,228,.08); }

.nav-cta{
  font-family:var(--sans); font-weight:600; font-size:.95rem;
  display:inline-flex; align-items:center; gap:.5em;
  padding:11px 20px; border-radius:var(--r);
  border:1px solid var(--line); color:var(--ink);
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.nav-cta svg{ width:16px; height:16px; color:var(--ox); }
.nav-cta:hover{ border-color:var(--ox); color:var(--ox); background:color-mix(in oklab, var(--ox) 6%, transparent); }
.nav-cta:hover svg{ color:var(--ox); }

/* ============================================================
   HERO — asymmetric monograph split
   ============================================================ */
.hero{
  min-height:100dvh; display:grid; align-items:center;
  grid-template-columns:1.05fr .95fr; gap:clamp(2rem, 5vw, 5.5rem);
  width:min(95%, 1420px); margin-inline:auto;
  padding-top:120px; padding-bottom:56px;
}
.hero-copy{ max-width:640px; }
.hero .kicker{
  display:inline-flex; align-items:center; gap:.7em; margin-bottom:26px;
  font-family:var(--sans); font-weight:600; font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-2);
}
.hero .kicker i{ width:26px; height:1.5px; background:var(--ox); display:inline-block; }
.hero h1{
  font-size:clamp(2.9rem, 6vw, 5rem); line-height:.98; letter-spacing:-.03em;
}
.hero h1 .a{ display:block; white-space:nowrap; }
.hero h1 .b{ display:block; white-space:nowrap; color:var(--ox); }
.hero-lede{
  margin-top:26px; font-size:clamp(1.08rem, 1.4vw, 1.28rem); line-height:1.55;
  color:var(--ink-2); max-width:34ch; text-wrap:balance;
}
.hero-actions{ margin-top:36px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.hero-phone{
  display:inline-flex; align-items:baseline; gap:.5em; font-weight:500; color:var(--ink-2);
  font-size:.98rem;
}
.hero-phone a{ font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:.01em; }
.hero-phone a:hover{ color:var(--ox); }
.creds{
  margin-top:46px; padding-top:26px; border-top:1px solid var(--line);
  display:flex; gap:clamp(1.4rem,3vw,2.6rem); flex-wrap:wrap;
}
.cred{ display:flex; flex-direction:column; gap:3px; }
.cred b{ font-family:var(--serif); font-weight:700; font-size:1.02rem; letter-spacing:-.01em; }
.cred span{ font-size:.82rem; color:var(--ink-3); letter-spacing:.01em; }

.hero-figure{ position:relative; justify-self:end; width:100%; max-width:520px; }
.hero-figure .frame{
  position:relative; border-radius:calc(var(--r) + 5px); overflow:hidden;
  box-shadow:var(--shadow-3); aspect-ratio:3/4; background:var(--paper-3);
}
.hero-figure img{ width:100%; height:100%; object-fit:cover; }
.hero-figure .tag{
  position:absolute; left:-16px; bottom:26px; z-index:2;
  background:var(--paper); color:var(--ink); padding:10px 18px 12px;
  border-radius:var(--r); box-shadow:var(--shadow-2); border:1px solid var(--line-2);
}
.hero-figure .tag .h{ font-family:var(--hand); font-size:1.5rem; line-height:.9; color:var(--ox); }
.hero-figure .tag .s{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-top:2px; }
.hero-figure .est{
  position:absolute; top:20px; right:-14px; z-index:2;
  writing-mode:vertical-rl; font-weight:600; font-size:.64rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--ink-3);
  background:var(--paper); padding:12px 7px; border-radius:var(--r); box-shadow:var(--shadow-1);
}

/* ============================================================
   THE LETTER — signature moment
   ============================================================ */
.letter{ background:var(--paper-2); position:relative; overflow:hidden; }
.letter .wrap{ position:relative; }
.letter-grid{ display:grid; grid-template-columns:1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.letter-text{ max-width:640px; }
.letter-body{ max-width:46ch; margin-top:clamp(1.8rem,3.5vw,2.6rem); }
.letter .eyebrow{ display:block; margin-bottom:1.1rem; }
.letter blockquote{
  font-family:var(--serif); font-weight:400; font-style:italic;
  font-size:clamp(1.9rem, 3.9vw, 3.15rem); line-height:1.08; letter-spacing:-.02em;
  color:var(--ink); margin:0; text-wrap:balance;
}
.letter blockquote .ox{ color:var(--ox); }
.letter p{ font-size:clamp(1.05rem,1.3vw,1.2rem); color:var(--ink-2); line-height:1.7; }
.letter p + p{ margin-top:1.1em; }
.sig{ margin-top:2.2rem; display:flex; align-items:flex-end; gap:18px; }
.sig .mark{
  font-family:var(--hand); font-size:3.2rem; line-height:.8; color:var(--ink);
  transition:clip-path 1.1s cubic-bezier(.22,.61,.36,1);
}
/* fail-open: signature is visible by default; only clipped for the draw-in when JS is active */
html.js .sig:not(.drawn) .mark{ clip-path:inset(0 100% 0 0); }
.sig.drawn .mark{ clip-path:inset(0 0 0 0); }
.sig .who{ padding-bottom:8px; border-left:2px solid var(--ox); padding-left:14px; }
.sig .who b{ display:block; font-weight:600; font-size:.9rem; }
.sig .who span{ font-size:.78rem; color:var(--ink-3); }
.letter-figure{ position:relative; border-radius:calc(var(--r)+4px); overflow:hidden; box-shadow:var(--shadow-2); aspect-ratio:1/1; justify-self:end; width:100%; }
.letter-figure img{ width:100%; height:100%; object-fit:cover; }
@media(min-width:900px){
  .letter-grid{ grid-template-columns:1.12fr .88fr; }
}

/* ============================================================
   APPROACH — how I work (answers the fears)
   ============================================================ */
.approach .head{ max-width:720px; margin-bottom:clamp(2.5rem,5vw,4rem); }
.approach h2{ font-size:clamp(2.3rem,4.4vw,3.5rem); max-width:15ch; }
.approach .head p{ margin-top:1rem; color:var(--ink-2); font-size:1.12rem; max-width:48ch; text-wrap:balance; }
.principles{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line-2);
  border:1px solid var(--line-2); border-radius:calc(var(--r)+4px); overflow:hidden; }
.principle{
  background:var(--paper); padding:clamp(1.6rem,3vw,2.5rem);
  display:flex; flex-direction:column; gap:16px; transition:background .25s ease;
}
.principle:hover{ background:color-mix(in oklab, var(--ox) 4%, var(--paper)); }
.principle .top{ display:flex; align-items:center; justify-content:space-between; }
.p-ico{
  width:46px; height:46px; border-radius:calc(var(--r) - 1px); display:grid; place-items:center;
  background:color-mix(in oklab, var(--ox) 10%, var(--paper)); color:var(--ox);
}
.p-ico svg{ width:23px; height:23px; stroke-width:1.9; }
.p-num{ font-family:var(--serif); font-weight:700; font-size:1.05rem; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.principle h3{ font-size:1.4rem; letter-spacing:-.01em; }
.principle p{ color:var(--ink-2); font-size:1rem; line-height:1.62; text-wrap:pretty; }

/* ============================================================
   WORK — editorial mosaic
   ============================================================ */
.work .head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:clamp(2rem,4vw,3.2rem); flex-wrap:wrap; }
.work h2{ font-size:clamp(2.3rem,4.4vw,3.5rem); max-width:16ch; }
.work .head p{ color:var(--ink-2); max-width:34ch; text-wrap:balance; }
.mosaic{ display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(14px,1.6vw,22px); }
.tile{ position:relative; overflow:hidden; border-radius:calc(var(--r)+3px); box-shadow:var(--shadow-1); background:var(--paper-3); }
.tile img{ width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.tile:hover img{ transform:scale(1.045); }
.tile .cap{
  position:absolute; left:0; right:0; bottom:0; padding:20px 20px 16px;
  background:linear-gradient(to top, rgb(28 23 16 / .82), rgb(28 23 16 / 0));
  color:var(--paper); display:flex; align-items:flex-end; justify-content:space-between; gap:10px;
  opacity:0; transform:translateY(8px); transition:opacity .3s ease, transform .3s ease;
}
.tile:hover .cap{ opacity:1; transform:none; }
.tile .cap b{ font-family:var(--serif); font-weight:500; font-size:1.05rem; letter-spacing:-.01em; }
.tile .cap span{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(247,239,228,.72); white-space:nowrap; }
.t-a{ grid-column:span 4; grid-row:span 2; aspect-ratio:4/3; }
.t-b{ grid-column:span 2; aspect-ratio:4/3; }
.t-c{ grid-column:span 2; aspect-ratio:4/3; }
.t-d{ grid-column:span 3; aspect-ratio:16/10; }
.t-e{ grid-column:span 3; aspect-ratio:16/10; }

/* ============================================================
   SERVICES — typographic list
   ============================================================ */
.services{ background:var(--paper-2); }
.services .grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.services h2{ font-size:clamp(2.3rem,4.4vw,3.4rem); max-width:12ch; }
.services .grid > p{ color:var(--ink-2); margin-top:1.1rem; max-width:34ch; text-wrap:balance; }
.slist{ border-top:1px solid var(--line); }
.srow{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1.4rem;
  padding:1.4rem .2rem; border-bottom:1px solid var(--line);
  transition:padding-left .25s ease, color .25s ease;
}
.srow:hover{ padding-left:14px; }
.srow .n{ font-family:var(--serif); font-weight:700; font-size:.9rem; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.srow .t{ font-family:var(--serif); font-weight:500; font-size:clamp(1.3rem,2.4vw,1.85rem); letter-spacing:-.01em; }
.srow .d{ font-size:.92rem; color:var(--ink-2); text-align:right; max-width:26ch; }
.srow .arrow{ color:var(--ox); opacity:0; transform:translateX(-6px); transition:opacity .25s, transform .25s; }
.srow:hover .arrow{ opacity:1; transform:none; }

/* ============================================================
   CONTACT — dark band
   ============================================================ */
.contact{ background:var(--night); color:var(--paper); position:relative; overflow:hidden; }
.contact::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(120% 90% at 82% 12%, rgba(168,90,70,.30), transparent 55%),
    radial-gradient(80% 60% at 10% 100%, rgba(124,45,32,.22), transparent 60%);
}
.contact .wrap{ position:relative; z-index:1; }
.contact-grid{ display:grid; grid-template-columns:1fr; gap:clamp(2.4rem,5vw,4rem); }
.contact h2{ font-size:clamp(2.4rem,5vw,4rem); color:var(--paper); max-width:15ch; }
.contact .lede{ margin-top:1.2rem; color:rgba(247,239,228,.82); font-size:1.15rem; max-width:42ch; text-wrap:balance; }
.contact-lines{ margin-top:2.2rem; display:flex; flex-direction:column; gap:1.1rem; }
.cline{ display:flex; align-items:center; gap:16px; }
.cline .ci{ width:42px; height:42px; border-radius:var(--r); display:grid; place-items:center;
  background:rgba(247,239,228,.08); border:1px solid rgba(247,239,228,.14); color:var(--ox-tint); flex:none; }
.cline .ci svg{ width:20px; height:20px; stroke-width:1.9; }
.cline .cx b{ display:block; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(247,239,228,.55); }
.cline .cx a,.cline .cx span{ font-family:var(--serif); font-size:1.35rem; color:var(--paper); font-variant-numeric:tabular-nums; }
.cline .cx a:hover{ color:var(--ox-tint); }

/* form */
.cform{
  background:rgba(247,239,228,.04); border:1px solid rgba(247,239,228,.12);
  border-radius:calc(var(--r)+6px); padding:clamp(1.6rem,3vw,2.4rem); box-shadow:var(--shadow-3);
}
.cform .fh{ font-family:var(--serif); font-size:1.3rem; margin-bottom:1.2rem; color:var(--paper); }
.field{ margin-bottom:1rem; }
.field label{ display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(247,239,228,.6); margin-bottom:7px; }
.field input,.field textarea{
  width:100%; font-family:var(--sans); font-size:1rem; color:var(--paper);
  background:rgba(20,16,11,.5); border:1px solid rgba(247,239,228,.16);
  border-radius:var(--r); padding:13px 16px; transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
  box-shadow:inset 0 1px 2px rgb(0 0 0 /.25);
}
.field textarea{ resize:vertical; min-height:96px; }
.field input::placeholder,.field textarea::placeholder{ color:rgba(247,239,228,.34); }
.field input:focus,.field textarea:focus{
  outline:none; border-color:var(--ox-tint); background:rgba(20,16,11,.7);
  box-shadow:0 0 0 3px rgba(168,90,70,.28);
}
.cform .btn-primary{ width:100%; margin-top:6px; }
.cform .note{ margin-top:12px; font-size:.8rem; color:rgba(247,239,228,.5); text-align:center; }
.form-ok{ display:none; text-align:center; padding:1.2rem 0; }
.form-ok.show{ display:block; }
.form-ok .k{ font-family:var(--hand); font-size:2.4rem; color:var(--ox-tint); line-height:.9; }
.form-ok p{ color:rgba(247,239,228,.8); margin-top:.4rem; }

@media(min-width:900px){
  .contact-grid{ grid-template-columns:1fr .9fr; align-items:center; }
}

/* ============================================================
   FOOTER — masterpiece, wide
   ============================================================ */
.footer{ background:var(--night-2); color:var(--paper); padding:clamp(4rem,7vw,6rem) 0 2rem; }
.footer .finale{
  text-align:center; font-family:var(--serif); font-weight:400;
  font-size:clamp(1.8rem,4.2vw,3.2rem); line-height:1.1; letter-spacing:-.02em;
  color:var(--paper); max-width:20ch; margin:0 auto clamp(3rem,6vw,4.5rem); text-wrap:balance;
}
.footer .finale em{ color:var(--ox-tint); font-style:italic; }
.footer-cols{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem;
  padding-bottom:2.4rem; border-bottom:1px solid rgba(247,239,228,.14);
}
.footer .fbrand b{ font-family:var(--serif); font-weight:700; font-size:1.8rem; display:block; }
.footer .fbrand span{ font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(247,239,228,.5); display:block; margin-top:4px; }
.footer .fbrand p{ margin-top:1rem; color:rgba(247,239,228,.6); font-size:.92rem; max-width:32ch; }
.fcol h4{ font-family:var(--sans); font-weight:600; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(247,239,228,.5); margin-bottom:1rem; }
.fcol a,.fcol span{ display:block; color:rgba(247,239,228,.82); font-size:.98rem; margin-bottom:.6rem; transition:color .18s ease; }
.fcol a:hover{ color:var(--ox-tint); }
.footer-base{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding-top:1.6rem; color:rgba(247,239,228,.5); font-size:.82rem;
}
.footer-base a{ color:rgba(247,239,228,.7); }
.footer-base a:hover{ color:var(--ox-tint); }

/* ============================================================
   reveal animations
   ============================================================ */
/* fail-open: content is visible by default; only hidden once JS is confirmed (html.js) */
.reveal{ transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
html.js .reveal:not(.in){ opacity:0; transform:translateY(22px); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }

/* ============================================================
   responsive
   ============================================================ */
@media(max-width:980px){
  .hero{ grid-template-columns:1fr; min-height:auto; padding-top:112px; gap:2.4rem; }
  .hero-figure{ justify-self:stretch; max-width:none; }
  .hero-figure .frame{ aspect-ratio:16/11; }
  .hero-figure .est{ display:none; }
  .principles{ grid-template-columns:1fr; }
  .mosaic{ grid-template-columns:repeat(2,1fr); }
  .t-a{ grid-column:span 2; grid-row:auto; } .t-b,.t-c,.t-d,.t-e{ grid-column:span 1; }
  .services .grid{ grid-template-columns:1fr; }
  .srow{ grid-template-columns:auto 1fr; row-gap:4px; padding:1.15rem .2rem; }
  .srow .d{ grid-column:2; text-align:left; max-width:none; margin-top:2px; font-size:.92rem; }
  .srow .arrow{ display:none; }
  /* contact detail values must never overflow a phone */
  .cline .cx{ min-width:0; }
  .cline .cx a, .cline .cx span{ font-size:1.05rem; word-break:break-word; }
  .footer-cols{ grid-template-columns:1fr 1fr; }
  .footer .fbrand{ grid-column:1/-1; }
}
@media(max-width:620px){
  :root{ --section-y:clamp(3.5rem,12vw,5rem); }
  .nav-links .link{ display:none; }
  .hero .kicker{ font-size:.62rem; letter-spacing:.13em; }
  .hero h1{ font-size:clamp(2.2rem,10.5vw,3.9rem); }
  .hero-lede{ max-width:none; }
  .hero-actions{ gap:14px; }
  .hero-actions .btn{ flex:1 1 auto; }
  .mosaic{ grid-template-columns:1fr; }
  .t-a,.t-b,.t-c,.t-d,.t-e{ grid-column:span 1; aspect-ratio:4/3; }
  .footer-cols{ grid-template-columns:1fr; }
  .footer-base{ justify-content:flex-start; }
  .creds{ gap:1.2rem 1.8rem; }
}

@media(prefers-reduced-motion:reduce){
  *{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .sig .mark{ clip-path:inset(0 0 0 0); transition:none; }
  .tile img{ transition:none; }
}