/* ============================================================
   Iron & Oak — builders, joiners and carpenters, Penshurst
   Hand-written stylesheet. No framework.
   Corner language: SHARP 0px, with 45° cut corners cut only into
   photographic panels — never into anything that takes a focus ring.
   ============================================================ */

@layer tokens, base, layout, components, motion, responsive;

/* ---------------------------------------------------------
   tokens
   --------------------------------------------------------- */
@layer tokens{
  :root{
    /* palette (DESIGN-SPEC) */
    --oak:#8A5A2B;
    --oak-dark:#6C4520;
    --oak-lt:#D3994F;          /* oak for dark grounds — AA on --iron */
    --iron:#22201D;
    --iron-2:#1A1917;
    --bone:#F3EEE5;
    --bone-2:#E9E1D3;
    --bone-3:#DDD2BF;
    --moss:#4F5B45;

    --ink:#22201D;
    --muted:#6B6259;
    --line:rgba(34,32,29,.16);
    --line-soft:rgba(34,32,29,.09);
    --line-dk:rgba(243,238,229,.2);

    /* type */
    --font-display:"Bitter",Georgia,"Times New Roman",serif;
    --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;

    --wrap:1240px;
    --gut:clamp(20px,4vw,56px);
    --cut:16px;
    --ease:cubic-bezier(.19,.72,.34,1);
    --speed:.34s;
  }
}

/* ---------------------------------------------------------
   base
   --------------------------------------------------------- */
@layer base{
  *,*::before,*::after{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
  body{
    margin:0;background:var(--bone);color:var(--ink);
    font-family:var(--font-body);font-size:17px;line-height:1.66;
    -webkit-font-smoothing:antialiased;overflow-x:hidden;
  }
  body:has(.lightbox[open]){overflow:hidden}
  body.nav-open{overflow:hidden}

  h1,h2,h3,h4{margin:0;font-family:var(--font-display);color:var(--ink);font-weight:600;line-height:1.08;letter-spacing:-.012em}
  p{margin:0 0 1.05em}
  em{font-style:normal;color:var(--oak)}
  img{display:block;max-width:100%;height:auto}
  a{color:var(--oak-dark);text-decoration:none;transition:color var(--speed) var(--ease)}
  a:hover{color:var(--iron)}
  ul,ol{list-style:none;margin:0;padding:0}
  address{font-style:normal}
  figure{margin:0}
  button,input,select,textarea{font:inherit;color:inherit}
  ::selection{background:var(--oak);color:#fff}

  :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
    outline:3px solid var(--oak);outline-offset:3px;
  }
  .lightbox :where(button):focus-visible{outline-color:var(--oak-lt)}

  .skip-link{
    position:absolute;left:-9999px;top:0;z-index:400;
    background:var(--iron);color:var(--bone);padding:13px 20px;font-weight:600;
  }
  .skip-link:focus{left:0}
}

/* ---------------------------------------------------------
   layout
   --------------------------------------------------------- */
@layer layout{
  .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
  .section{padding:clamp(66px,8.5vw,124px) 0}
  .sec-head{max-width:760px;margin-bottom:clamp(34px,4.6vw,58px)}
  .sec-lede{font-size:1.06rem;color:var(--muted);max-width:64ch;margin-bottom:0}
  .lede{font-size:1.08rem;line-height:1.62;color:var(--muted)}

  .label{
    display:inline-flex;align-items:center;gap:10px;
    font-family:var(--font-body);font-size:.735rem;font-weight:600;
    letter-spacing:.2em;text-transform:uppercase;color:var(--oak);
    margin:0 0 16px;
  }
  .label::before{content:"";width:9px;height:9px;background:var(--oak);transform:rotate(45deg);flex:0 0 auto}
  .h2{font-size:clamp(1.75rem,3.7vw,2.85rem);margin:0 0 18px;text-wrap:balance}

  .field{margin-bottom:16px}
  .field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .field label{
    display:block;font-size:.79rem;font-weight:600;letter-spacing:.1em;
    text-transform:uppercase;color:var(--muted);margin-bottom:7px;
  }
  .field .opt{text-transform:none;letter-spacing:0;font-weight:400;font-size:.84rem;color:#8A8078}
  .field-hint{margin:7px 0 0;font-size:.82rem;color:var(--muted)}
  .field-check{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start}
  .field-check label{
    text-transform:none;letter-spacing:0;font-size:.94rem;font-weight:400;
    color:var(--muted);margin:0;
  }

  /* shared form controls — sharp, oak-focused */
  .field input,.field select,.field textarea{
    width:100%;background:#FCFAF6;border:1px solid var(--line);border-radius:0;
    padding:13px 14px;font-size:1rem;color:var(--ink);
    transition:border-color var(--speed) var(--ease),background var(--speed) var(--ease),
               box-shadow var(--speed) var(--ease);
  }
  .field textarea{resize:vertical;min-height:112px}
  .field select{
    appearance:none;background-image:
      linear-gradient(45deg,transparent 50%,var(--oak) 50%),
      linear-gradient(135deg,var(--oak) 50%,transparent 50%);
    background-position:calc(100% - 20px) 22px,calc(100% - 15px) 22px;
    background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  }
  .field input:hover,.field select:hover,.field textarea:hover{border-color:#A99C89}
  .field input:focus,.field select:focus,.field textarea:focus{
    outline:none;border-color:var(--oak);background:#fff;
    box-shadow:0 0 0 3px color-mix(in srgb,var(--oak) 20%,transparent);
  }
  .field input::placeholder,.field textarea::placeholder{color:#9A9086}
  .field input:user-invalid,.field select:user-invalid{border-color:#A8320F}
  .field input[type="checkbox"]{
    width:20px;height:20px;margin:2px 0 0;accent-color:var(--oak);cursor:pointer;
  }
}

/* ---------------------------------------------------------
   components
   --------------------------------------------------------- */
@layer components{

  /* ---------- buttons ---------- */
  .btn{
    --bg:var(--oak);--fg:#fff;
    position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
    padding:15px 27px;background:var(--bg);color:var(--fg);border:0;border-radius:0;
    font-family:var(--font-display);font-size:.97rem;font-weight:600;letter-spacing:.01em;
    cursor:pointer;overflow:hidden;isolation:isolate;
    transition:color var(--speed) var(--ease),transform var(--speed) var(--ease);
  }
  .btn::before{
    content:"";position:absolute;inset:0;z-index:-1;background:var(--iron);
    transform:translateY(101%);transition:transform var(--speed) var(--ease);
  }
  .btn:hover{color:#fff;transform:translateY(-2px)}
  .btn:hover::before{transform:translateY(0)}
  .btn-oak{--bg:var(--oak)}
  .btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
  .btn-ghost::before{background:var(--oak)}
  .btn-ghost:hover{color:#fff;border-color:var(--oak)}
  .btn-sm{padding:11px 18px;font-size:.88rem}
  .btn-block{width:100%}

  /* ---------- header ---------- */
  .site-header{
    position:fixed;inset:0 0 auto 0;z-index:200;background:transparent;
    padding:16px 0;border-bottom:1px solid transparent;
    transition:background var(--speed) var(--ease),padding var(--speed) var(--ease),
               border-color var(--speed) var(--ease),box-shadow var(--speed) var(--ease);
  }
  .site-header.is-stuck{
    background:rgba(26,25,23,.96);padding:8px 0;border-bottom-color:rgba(211,153,79,.35);
    box-shadow:0 14px 34px -26px rgba(0,0,0,.9);
  }
  .site-header.is-stuck .brand,
  .site-header.is-stuck .site-nav a,
  .site-header.is-stuck .tel{color:var(--bone)}
  .site-header.is-stuck .site-nav a:hover{color:var(--oak-lt)}
  .site-header.is-stuck .brand-sub{color:var(--oak-lt)}
  .site-header.is-stuck .nav-toggle{border-color:var(--line-dk)}
  .site-header.is-stuck .nav-toggle span{background:var(--bone)}
  .site-header.is-stuck .btn-ghost{color:var(--bone);border-color:var(--line-dk)}

  .header-inner{display:flex;align-items:center;gap:24px}
  .brand{display:flex;align-items:center;gap:12px;color:var(--ink)}
  .brand:hover{color:var(--ink)}
  .brand-mark{color:var(--oak);display:grid;place-items:center}
  .brand-text{display:flex;flex-direction:column;line-height:1}
  .brand-word{font-family:var(--font-display);font-size:1.32rem;font-weight:700;letter-spacing:-.02em}
  .brand-word em{color:var(--oak)}
  .brand-sub{
    font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
    color:var(--muted);margin-top:4px;
  }
  .site-nav{margin-inline:auto}
  .site-nav ul{display:flex;gap:4px}
  .site-nav a{
    font-size:.92rem;font-weight:500;color:var(--ink);padding:9px 12px;position:relative;
  }
  .site-nav a::after{
    content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;background:var(--oak);
    transform:scaleX(0);transform-origin:left;transition:transform var(--speed) var(--ease);
  }
  .site-nav a:hover{color:var(--oak-dark)}
  .site-nav a:hover::after,.site-nav a:focus-visible::after{transform:scaleX(1)}
  .header-actions{display:flex;align-items:center;gap:14px}
  .tel{font-size:.9rem;font-weight:600;color:var(--ink);white-space:nowrap}
  .tel:hover{color:var(--oak-dark)}
  .nav-toggle{
    display:none;width:46px;height:44px;padding:0;position:relative;cursor:pointer;
    background:transparent;border:1px solid var(--line);
  }
  .nav-toggle span{
    position:absolute;left:12px;right:12px;height:2px;background:var(--ink);
    transition:transform var(--speed) var(--ease),opacity var(--speed) var(--ease);
  }
  .nav-toggle span:nth-child(1){top:15px}
  .nav-toggle span:nth-child(2){top:21px}
  .nav-toggle span:nth-child(3){top:27px}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

  /* ---------- mobile nav ---------- */
  .mobile-nav{
    position:fixed;inset:0;z-index:190;background:var(--iron);color:var(--bone);
    display:flex;flex-direction:column;justify-content:center;gap:36px;
    padding:104px var(--gut) 44px;overflow-y:auto;
  }
  .mobile-nav[hidden]{display:none}
  .mobile-nav nav{display:flex;flex-direction:column}
  .mobile-nav nav a{
    font-family:var(--font-display);font-size:clamp(1.5rem,6vw,2.1rem);font-weight:600;
    color:var(--bone);padding:13px 0;border-bottom:1px solid var(--line-dk);
    display:flex;align-items:baseline;gap:16px;
  }
  .mobile-nav nav a span{font-family:var(--font-body);font-size:.7rem;font-weight:600;letter-spacing:.2em;color:var(--oak-lt)}
  .mobile-nav nav a:hover{color:var(--oak-lt);padding-left:10px}
  .mobile-nav-foot{border-top:1px solid var(--line-dk);padding-top:20px;font-size:.94rem;color:rgba(243,238,229,.72)}
  .mobile-nav-foot p{margin:0 0 6px}
  .mobile-nav-foot a{color:var(--oak-lt)}

  /* ---------- hero ---------- */
  .hero{padding:clamp(118px,14vw,168px) 0 clamp(52px,6vw,84px)}
  .hero-grid{
    display:grid;grid-template-columns:1.06fr .94fr;
    gap:clamp(30px,4.4vw,64px);align-items:center;
  }
  .hero-media{position:relative}
  .hero-media img{
    width:100%;aspect-ratio:4/3.15;object-fit:cover;
    clip-path:polygon(0 0,100% 0,100% calc(100% - 74px),calc(100% - 74px) 100%,0 100%);
  }
  .seal{
    position:absolute;left:-26px;bottom:30px;margin:0;
    width:116px;height:116px;display:grid;place-items:center;text-align:center;
    border-radius:50%;background:var(--iron);color:var(--bone);
    box-shadow:0 12px 26px -14px rgba(0,0,0,.75);
    transform:rotate(-7deg);
  }
  .seal-inner{display:grid;gap:1px;line-height:1}
  .seal-est{font-size:.6rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--oak-lt)}
  .seal-year{font-family:var(--font-display);font-size:1.6rem;font-weight:700;letter-spacing:-.02em}
  .seal-rule{width:26px;height:1px;background:var(--oak-lt);margin:5px auto}
  .seal-sub{font-size:.56rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(243,238,229,.7)}

  .eyebrow{
    font-size:.75rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
    color:var(--moss);margin:0 0 18px;
  }
  .hero-title{font-size:clamp(2.5rem,6.4vw,4.35rem);font-weight:700;letter-spacing:-.03em;line-height:1.02;margin-bottom:22px;text-wrap:balance}
  .hero-lede{font-size:clamp(1.04rem,1.4vw,1.16rem);color:var(--muted);max-width:48ch;margin-bottom:28px}
  .hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:32px}
  .hero-facts{
    display:grid;grid-template-columns:repeat(3,auto);gap:clamp(20px,3vw,44px);
    margin:0 0 20px;padding:18px 0 0;border-top:2px solid var(--iron);
  }
  .hero-facts dt{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .hero-facts dd{
    margin:5px 0 0;font-family:var(--font-display);font-size:clamp(1.3rem,2.4vw,1.85rem);
    font-weight:700;color:var(--iron);font-variant-numeric:tabular-nums;letter-spacing:-.02em;
  }
  .hero-note{font-size:.88rem;color:var(--muted);margin:0;max-width:46ch}

  /* ---------- projects ---------- */
  .projects{background:var(--bone-2)}
  .filters{
    display:flex;flex-wrap:wrap;align-items:center;gap:9px;
    padding-bottom:22px;margin-bottom:clamp(20px,3vw,32px);border-bottom:1px solid var(--line);
  }
  .filter{
    display:inline-flex;align-items:center;gap:8px;cursor:pointer;
    background:transparent;border:1px solid var(--line);border-radius:0;
    padding:10px 15px;font-size:.9rem;font-weight:600;color:var(--ink);
    transition:background var(--speed) var(--ease),color var(--speed) var(--ease),
               border-color var(--speed) var(--ease);
  }
  .filter span{
    font-size:.76rem;font-weight:600;color:var(--muted);
    background:color-mix(in srgb,var(--bone) 80%,#fff);padding:1px 7px;
  }
  .filter:hover{border-color:var(--oak);color:var(--oak-dark)}
  .filter.is-on{background:var(--iron);border-color:var(--iron);color:var(--bone)}
  .filter.is-on span{background:var(--oak);color:#fff}
  .filter-count{margin:0 0 0 auto;font-size:.86rem;color:var(--muted)}

  .project-grid{
    display:grid;grid-template-columns:repeat(3,1fr);
    grid-auto-rows:clamp(190px,20vw,248px);gap:clamp(10px,1.3vw,18px);
  }
  .p-item{grid-row:span 1;min-width:0}
  .p-item:nth-child(3),.p-item:nth-child(7){grid-row:span 2}
  .p-item[hidden]{display:none}

  .p-card{
    position:relative;display:block;height:100%;overflow:hidden;
    container-type:inline-size;background:var(--iron);
  }
  .p-card figure{position:relative;height:100%;overflow:hidden}
  .p-card figure::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(26,25,23,0) 34%,rgba(26,25,23,.55) 66%,rgba(26,25,23,.92) 100%);
    transition:opacity var(--speed) var(--ease);
  }
  .p-card img{
    width:100%;height:100%;object-fit:cover;
    transition:transform .9s var(--ease),filter var(--speed) var(--ease);
  }
  .p-card:hover img,.p-card:focus-visible img{transform:scale(1.055)}
  .p-card figcaption{
    position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px 20px 22px;
    color:var(--bone);
  }
  .p-cat{
    display:inline-block;font-size:.66rem;font-weight:600;letter-spacing:.2em;
    text-transform:uppercase;color:var(--oak-lt);margin-bottom:7px;
  }
  .p-card h3{
    color:#fff;font-size:1.06rem;line-height:1.22;margin:0 0 5px;
    text-wrap:balance;
  }
  .p-spec{display:block;font-size:.82rem;color:rgba(243,238,229,.78);line-height:1.4}
  .p-zoom{
    position:absolute;top:14px;right:14px;z-index:2;
    font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    background:var(--oak);color:#fff;padding:6px 10px;opacity:0;transform:translateY(-6px);
    transition:opacity var(--speed) var(--ease),transform var(--speed) var(--ease);
  }
  .p-card:hover .p-zoom,.p-card:focus-visible .p-zoom{opacity:1;transform:none}
  .p-card:focus-visible{outline:3px solid var(--oak-lt);outline-offset:-3px}
  @container (min-width:330px){
    .p-card h3{font-size:1.16rem}
    .p-card figcaption{padding:22px 22px 24px}
  }
  .grid-empty{margin:26px 0 0;font-size:.95rem;color:var(--muted)}

  /* ---------- process ---------- */
  .process{background:var(--iron);color:rgba(243,238,229,.8)}
  .process .label{color:var(--oak-lt)}
  .process .label::before{background:var(--oak-lt)}
  .process .h2{color:#fff;max-width:22ch}
  .timeline{
    display:grid;grid-template-columns:repeat(5,1fr);
    border-top:0;margin-top:clamp(30px,4vw,48px);
  }
  .tl-step{
    position:relative;padding:38px 24px 0 0;
    border-top:2px solid rgba(243,238,229,.22);
  }
  .tl-step::before{
    content:"";position:absolute;top:-6px;left:0;width:11px;height:11px;
    background:var(--oak-lt);transform:rotate(45deg);
    transition:transform var(--speed) var(--ease),background var(--speed) var(--ease);
  }
  .tl-step:hover::before{transform:rotate(45deg) scale(1.5)}
  .tl-step:hover{border-top-color:var(--oak-lt)}
  .tl-mark{
    font-family:var(--font-display);font-size:1.5rem;font-weight:700;
    color:var(--oak-lt);display:block;margin-bottom:12px;letter-spacing:-.02em;
    font-variant-numeric:tabular-nums;
  }
  .tl-body h3{color:#fff;font-size:1.1rem;margin-bottom:9px}
  .tl-body p{font-size:.92rem;color:rgba(243,238,229,.72);margin-bottom:12px}
  .tl-meta{
    font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
    color:var(--oak-lt);margin:0;
  }

  /* ---------- materials ---------- */
  .materials{background:var(--bone)}
  .materials-strip{
    display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,1.5vw,20px);
  }
  .mat{background:#FCFAF6;border:1px solid var(--line);padding:0 0 18px}
  .mat-swatch{
    display:block;height:86px;margin-bottom:16px;
    background:
      repeating-linear-gradient(99deg,rgba(0,0,0,.07) 0 2px,rgba(255,255,255,.06) 2px 6px),
      linear-gradient(148deg,var(--swatch-a),var(--swatch-b));
    clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%);
  }
  .mat h3,.mat p,.mat-note{margin-inline:16px}
  .mat h3{font-size:1.02rem;margin-bottom:8px;margin-top:0}
  .mat p{font-size:.87rem;color:var(--muted);line-height:1.5;margin-bottom:12px}
  .mat-note{
    display:block;font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
    color:var(--oak);
  }
  .mat:hover{background:#fff;border-color:var(--oak)}
  .mat:hover .mat-swatch{filter:saturate(1.12) brightness(1.03)}
  .mat{transition:background var(--speed) var(--ease),border-color var(--speed) var(--ease)}
  .mat-swatch{transition:filter var(--speed) var(--ease)}

  /* ---------- workshop ---------- */
  .workshop{background:var(--bone-2)}
  .ws-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:start}
  .ws-facts{
    display:grid;grid-template-columns:1fr 1fr;gap:18px 26px;
    margin:28px 0;padding-top:22px;border-top:2px solid var(--iron);
  }
  .ws-facts dt{
    font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    color:var(--oak);margin-bottom:5px;
  }
  .ws-facts dd{margin:0;font-size:.96rem;color:var(--ink)}
  .badge-row{display:flex;flex-wrap:wrap;gap:8px}
  .badge-row li{
    font-size:.78rem;font-weight:600;color:var(--moss);
    border:1px solid color-mix(in srgb,var(--moss) 34%,transparent);
    background:color-mix(in srgb,var(--moss) 7%,transparent);
    padding:7px 12px;
  }
  .ws-figures{display:grid;gap:clamp(10px,1.4vw,18px)}
  .ws-fig-a,.ws-fig-b{overflow:hidden}
  .ws-fig-a img,.ws-fig-b img{width:100%;object-fit:cover;transition:transform .9s var(--ease)}
  .ws-fig-a img{aspect-ratio:16/10;clip-path:polygon(0 0,100% 0,100% calc(100% - 40px),calc(100% - 40px) 100%,0 100%)}
  .ws-fig-b img{aspect-ratio:16/9}
  .ws-fig-a:hover img,.ws-fig-b:hover img{transform:scale(1.04)}

  /* ---------- reviews ---------- */
  .reviews{background:var(--iron);color:rgba(243,238,229,.8)}
  .reviews .label{color:var(--oak-lt)}
  .reviews .label::before{background:var(--oak-lt)}
  .reviews .h2{color:#fff;max-width:26ch}
  .review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
  .review{
    margin:0;background:rgba(243,238,229,.045);border-left:3px solid var(--oak);
    padding:clamp(20px,2.4vw,28px);
    transition:background var(--speed) var(--ease),transform var(--speed) var(--ease);
  }
  .review:hover{background:rgba(243,238,229,.08);transform:translateY(-4px)}
  .review-stars{color:var(--oak-lt);letter-spacing:.16em;margin:0 0 12px;font-size:.95rem}
  .review p:not(.review-stars){color:rgba(243,238,229,.9);font-size:1rem;margin-bottom:16px}
  .review cite{
    font-style:normal;font-size:.84rem;color:rgba(243,238,229,.62);
    padding-top:12px;border-top:1px solid var(--line-dk);display:block;
  }
  .review cite span{color:var(--oak-lt);font-weight:600;display:block;margin-bottom:2px}
  .review-stats{
    display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,32px);
    margin-top:clamp(32px,4vw,52px);padding-top:clamp(26px,3vw,38px);
    border-top:1px solid var(--line-dk);
  }
  .rs-n{
    display:block;font-family:var(--font-display);font-size:clamp(1.7rem,3.2vw,2.4rem);
    font-weight:700;color:var(--oak-lt);letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  }
  .rs-l{display:block;font-size:.86rem;color:rgba(243,238,229,.66);margin-top:8px;max-width:26ch}

  /* ---------- quote ---------- */
  .quote-section{background:var(--bone-2)}
  .quote-shell{
    display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(28px,4vw,64px);
    background:#FCFAF6;border:1px solid var(--line);border-top:4px solid var(--oak);
    padding:clamp(26px,3.6vw,48px);
  }
  .quote-intro .h2{margin-bottom:16px}
  .nap{display:grid;gap:20px;margin:26px 0 0;padding-top:22px;border-top:1px solid var(--line)}
  .nap dt{
    font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
    color:var(--oak);margin-bottom:6px;
  }
  .nap dd{margin:0;font-size:.96rem;color:var(--muted);line-height:1.62}
  .nap a{color:var(--ink);border-bottom:1px solid var(--line);font-weight:500}
  .nap a:hover{color:var(--oak-dark);border-color:var(--oak)}
  .form-msg{margin:14px 0 0;font-size:.93rem;font-weight:600;min-height:1.3em;color:var(--moss)}
  .form-msg.is-error{color:#A8320F}
  .form-fine{margin:12px 0 0;font-size:.81rem;color:var(--muted)}

  /* ---------- footer ---------- */
  .site-footer{background:var(--iron-2);color:rgba(243,238,229,.7);padding:clamp(52px,6.5vw,88px) 0 26px}
  .footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:clamp(26px,3.6vw,52px)}
  .footer-brand .brand-word{color:var(--bone);font-size:1.6rem;display:block;margin-bottom:14px}
  .footer-brand p{font-size:.93rem;color:rgba(243,238,229,.62);max-width:36ch}
  .footer-reg{
    font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
    color:var(--oak-lt) !important;margin-top:14px;
  }
  .site-footer h3{
    font-family:var(--font-body);font-size:.72rem;font-weight:600;letter-spacing:.18em;
    text-transform:uppercase;color:var(--oak-lt);margin:0 0 16px;
  }
  .site-footer ul li{margin-bottom:9px}
  .site-footer a{color:rgba(243,238,229,.86);font-size:.94rem}
  .site-footer a:hover{color:var(--oak-lt)}
  .site-footer address,.footer-hours{font-size:.94rem;color:rgba(243,238,229,.7);line-height:1.72}
  .footer-hours{margin-top:12px;font-size:.86rem;color:rgba(243,238,229,.55)}
  .footer-base{
    display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
    margin-top:clamp(34px,4vw,54px);padding-top:20px;border-top:1px solid var(--line-dk);
  }
  .footer-base p{margin:0;font-size:.83rem;color:rgba(243,238,229,.5)}
  .footer-base a{font-size:.83rem;color:rgba(243,238,229,.76)}

  /* ---------- lightbox (native dialog) ---------- */
  .lightbox{
    width:min(1080px,92vw);padding:0;border:0;background:transparent;color:var(--bone);
    max-height:94vh;
  }
  .lightbox:not([open]){display:none}
  .lightbox::backdrop{background:rgba(18,17,16,.9);backdrop-filter:blur(6px)}
  .lb-inner{position:relative;background:var(--iron);border-top:3px solid var(--oak-lt);padding:14px}
  .lb-fig{margin:0}
  .lb-fig img{
    width:100%;max-height:72vh;object-fit:contain;background:#141312;
  }
  .lb-fig figcaption{padding:16px 4px 4px}
  .lb-fig h3{color:#fff;font-size:1.18rem;margin:0 0 6px}
  .lb-fig p{margin:0;font-size:.9rem;color:rgba(243,238,229,.7)}
  .lb-btn{
    cursor:pointer;background:var(--oak);border:0;border-radius:0;color:#fff;
    font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    padding:10px 14px;transition:background var(--speed) var(--ease);
  }
  .lb-btn:hover{background:var(--oak-lt);color:var(--iron)}
  .lb-close{position:absolute;top:-3px;right:0}
  .lb-prev,.lb-next{position:absolute;bottom:18px;z-index:3}
  .lb-prev{right:104px}
  .lb-next{right:14px}
}

/* ---------------------------------------------------------
   motion — pure CSS scroll-driven reveal
   --------------------------------------------------------- */
@layer motion{
  @keyframes io-slide{
    from{opacity:0;transform:translate3d(-16px,14px,0)}
    to{opacity:1;transform:none}
  }
  @supports (animation-timeline: view()){
    @media (prefers-reduced-motion: no-preference){
      .reveal{
        animation:io-slide .1s var(--ease) both;
        animation-timeline:view();
        animation-range:entry 12% cover 24%;
      }
      .p-item{
        animation:io-slide .1s var(--ease) both;
        animation-timeline:view();
        animation-range:entry 6% cover 20%;
      }
    }
  }
  .reveal.is-in{opacity:1;transform:none}

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{
      animation-duration:.001ms !important;animation-iteration-count:1 !important;
      transition-duration:.001ms !important;
    }
    .reveal,.p-item{opacity:1 !important;transform:none !important}
    .site-header{transition:none}
  }
}

/* ---------------------------------------------------------
   responsive
   --------------------------------------------------------- */
@layer responsive{
  @media (max-width:1100px){
    .site-nav a{padding:9px 8px;font-size:.88rem}
    .materials-strip{grid-template-columns:repeat(3,1fr)}
    .timeline{grid-template-columns:repeat(3,1fr);row-gap:34px}
    .quote-shell{grid-template-columns:1fr;gap:34px}
    .review-grid{grid-template-columns:1fr 1fr}
    .review-stats{grid-template-columns:repeat(2,1fr);row-gap:26px}
    .footer-grid{grid-template-columns:1fr 1fr}
  }
  @media (max-width:960px){
    .hero-grid{grid-template-columns:1fr;gap:30px}
    .hero-media{order:2}
    .seal{left:16px;bottom:16px;width:104px;height:104px}
    .ws-grid{grid-template-columns:1fr;gap:36px}
    .project-grid{grid-template-columns:repeat(2,1fr)}
    .p-item:nth-child(3),.p-item:nth-child(7){grid-row:span 1}
    .timeline{grid-template-columns:repeat(2,1fr)}
  }
  @media (max-width:860px){
    .site-nav{display:none}
    .nav-toggle{display:block}
    .tel{display:none}
    .header-actions{gap:10px}
  }
  @media (max-width:767px){
    body{font-size:16px}
    .hero{padding-top:104px}
    .hero-media img{aspect-ratio:4/3.4}
    .hero-facts{grid-template-columns:1fr 1fr;gap:16px 24px}
    .project-grid{grid-template-columns:1fr;grid-auto-rows:auto}
    .p-item{aspect-ratio:4/3}
    .p-card{height:100%}
    .filter-count{margin:6px 0 0;width:100%}
    .timeline{grid-template-columns:1fr;row-gap:26px}
    .tl-step{padding:32px 0 0}
    .materials-strip{grid-template-columns:repeat(2,1fr)}
    .review-grid{grid-template-columns:1fr}
    .review-stats{grid-template-columns:1fr}
    .ws-facts{grid-template-columns:1fr}
    .field-row{grid-template-columns:1fr}
    .footer-grid{grid-template-columns:1fr}
    .footer-base{flex-direction:column}
    .lb-prev{right:96px}
  }
  @media (max-width:430px){
    .brand-sub{display:none}
    .seal{width:88px;height:88px}
    .seal-year{font-size:1.3rem}
    .hero-facts{grid-template-columns:1fr 1fr}
  }
}