/* ============================================================
   Nair Smart Solutions
   Light, warm, professional. The work is ornate — the page stays quiet.
   Bone is the palette. Stone and Steel were carried behind [data-palette]
   so the three could be compared at ?review=1; that switcher is gone and
   so are they, along with roughly a third of the custom properties.
   ============================================================ */

/* ---------- Typefaces, self-hosted ----------
   Playfair Display and Inter used to arrive from Google: two preconnects and
   a render-blocking stylesheet on every page, before any of the site's own
   CSS could be parsed, plus a third-party who learned every visitor's IP.

   Both are OFL-licensed, so self-hosting is permitted; the licences are in
   assets/fonts/. These are the variable Latin subsets — one file covers the
   whole 300-600 range each, which is the same bytes the three static
   instances cost and covers every weight the site uses.

   font-display:swap: the page renders immediately in Georgia/system-sans and
   swaps when the woff2 lands. On a slow connection in Trinidad that is the
   difference between reading the headline at 1.2s and staring at nothing. */
@font-face{
  font-family:"Playfair Display";
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url("../fonts/playfair-latin-var.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Playfair Display";
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url("../fonts/playfair-latin-var-italic.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:300 600;
  font-display:swap;
  src:url("../fonts/inter-latin-var.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root,
:root[data-palette="bone"]{
  --paper:      #FAF8F4;
  --paper-2:    #EFEBE2;
  --paper-3:    #FFFFFF;
  --deep:       #131316;
  --deep-2:     #1C1C20;
  --ink:        #131316;
  --ink-soft:   #3A3A41;
  --muted:      #5E5E66;
  /* 4.5:1 on --paper (5.06) and on --paper-2 (4.51). Was #83838B — 3.55:1,
     below AA at the 12px it is used at. Same hue, one step down in value. */
  --muted-2:    #6A6A71;
  --line:       rgba(19,19,22,.16);
  --line-soft:  rgba(19,19,22,.085);
  --accent:     #8A6C2C;
  --accent-2:   #A98748;
  --on-deep:    #FAF8F4;
  --on-deep-mut:#9C9CA4;
  --logo:       url("../img/logo-ink.png");
  --logo-deep:  url("../img/logo-white.png");
}

:root{
  --wrap: 1280px;
  --gut: clamp(20px, 5vw, 56px);
  --sec: clamp(76px, 10vw, 150px);
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
  /* A cutting head leaves the corner quickly and eases into the stop. */
  --ease-cut: cubic-bezier(.62,.04,.28,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px; line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-weight:400; letter-spacing:-.015em; }
p{ margin:0 0 1.1em; } p:last-child{ margin-bottom:0; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }

.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--accent); color:#fff; padding:12px 18px; font-size:14px; }
.skip:focus{ left:12px; top:12px; }

/* ---------- shared type ---------- */
.eyebrow{
  font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); margin:0 0 18px;
}
.sec-title{ font-family:var(--serif); font-size:clamp(2rem,4.1vw,3.4rem); line-height:1.1; letter-spacing:-.02em; }
.sec-sub{ color:var(--muted); max-width:62ch; margin-top:20px; font-size:1.02rem; }
.sec-head{ margin-bottom:clamp(40px,5vw,64px); max-width:900px; }
.sec-head--center{ margin-inline:auto; text-align:center; }
.sec-head--center .sec-sub{ margin-inline:auto; }

.section{ padding-block:var(--sec); }
.js .section{ opacity:0; transform:translateY(20px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.js .section.in{ opacity:1; transform:none; }
.section--tight{ padding-block:clamp(46px,6vw,80px); }
.section--alt{ background:var(--paper-2); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans); font-size:14px; font-weight:500; letter-spacing:.03em;
  padding:15px 28px; border:1px solid transparent; border-radius:2px; cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  white-space:nowrap;
}
.btn--solid{ background:var(--ink); color:var(--paper); }
.btn--solid:hover{ background:var(--accent); color:#fff; }
.btn--ghost{ border-color:var(--line); color:var(--ink); background:transparent; }
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn--onimage{ background:rgba(255,255,255,.95); color:#141310; }
.btn--onimage:hover{ background:#fff; }
.btn--outline-light{ border-color:rgba(255,255,255,.55); color:#fff; }
.btn--outline-light:hover{ background:rgba(255,255,255,.14); border-color:#fff; }
.btn--lg{ padding:18px 34px; font-size:15px; }
.btn--sm{ padding:10px 18px; font-size:13px; }
.btn--block{ width:100%; }

.wa{
  width:15px; height:15px; flex:none; background:currentColor;
  -webkit-mask:var(--wa) center/contain no-repeat; mask:var(--wa) center/contain no-repeat;
  --wa:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.86 9.86 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91S17.5 2 12.04 2zm0 18.15h-.01a8.2 8.2 0 0 1-4.19-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.19 8.19 0 0 1-1.26-4.38c0-4.54 3.7-8.23 8.25-8.23 2.2 0 4.27.86 5.83 2.42a8.18 8.18 0 0 1 2.41 5.82c0 4.54-3.7 8.23-8.24 8.23zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.13-.16.25-.64.8-.79.97-.14.16-.29.19-.54.06-.25-.12-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.01-.38.11-.51.11-.11.25-.29.37-.43.12-.14.16-.25.25-.41.08-.16.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.48-.4-.42-.56-.43h-.48c-.16 0-.43.06-.66.31-.22.25-.86.85-.86 2.07 0 1.22.89 2.4 1.01 2.56.12.16 1.75 2.67 4.23 3.74.59.26 1.05.41 1.41.52.59.19 1.13.16 1.56.1.48-.07 1.47-.6 1.68-1.18.21-.58.21-1.08.14-1.18-.06-.11-.22-.17-.47-.29z'/></svg>");
}

.link-arrow{
  display:inline-block; margin-top:16px;
  font-size:12px; letter-spacing:.13em; text-transform:uppercase; font-weight:600;
  color:var(--accent); position:relative; padding-bottom:5px;
}
.link-arrow::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:color-mix(in srgb, var(--accent) 35%, transparent); transition:background .4s var(--ease);
}
a:hover .link-arrow::after, .card:hover .link-arrow::after{ background:var(--accent); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease);
}
.site-header.is-stuck{
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:saturate(140%) blur(14px); -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom-color:var(--line-soft);
}
.header-inner{ display:flex; align-items:center; gap:34px; height:86px; }
.site-header.is-stuck .header-inner{ height:70px; transition:height .4s var(--ease); }

.brand{ display:block; width:120px; height:40px; }
.brand span{
  display:block; width:100%; height:100%;
  background:var(--logo) left center/contain no-repeat;
  transition:background-image .3s var(--ease);
}
/* Every hero now opens on paper, so the header is always dark-on-light.
   No inversion state to manage. */
.page--plain .site-header{ background:var(--paper); border-bottom-color:var(--line-soft); }

.nav{ display:flex; gap:28px; margin-left:auto; }
.nav a{ font-size:13.5px; letter-spacing:.03em; padding-block:6px; position:relative; transition:color .3s var(--ease); }
.nav a::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--accent); transition:width .4s var(--ease); }
.nav a:hover::after{ width:100%; }
/* "Design Your Own" is too long for a phone header, so it shortens.
   Contact drops out below 720px — the mobile bar and footer both carry it. */
.nav-short{ display:none; }


/* ============================================================
   HERO
   ============================================================ */
/* The headline always sits on paper. The photograph is a picture, not a mood.
   Band is the arrangement — headline on paper with a proof rail beside it,
   then the gate as a full-bleed wide band. The `split` alternative that used
   to sit behind [data-hero] is gone, and with it the 1200x1500 portrait crop
   it loaded on every homepage view but only ever displayed in that variant. */
.hero{ background:var(--paper); }
.hero__title{
  font-family:var(--serif); font-size:clamp(2.7rem,6vw,5rem); line-height:1.04; letter-spacing:-.028em;
  max-width:15ch;
}
.hero__sub{ margin-top:22px; max-width:46ch; font-size:clamp(1rem,1.25vw,1.16rem); color:var(--muted); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:13px; margin-top:32px; }
.hero__tag{ margin-top:34px; font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--accent); font-weight:600; }
.hero__media{ overflow:hidden; background:var(--paper-2); }
.hero__media img{ width:100%; height:100%; object-fit:cover; }

/* ============================================================
   SPEC RAIL  (.spec-rail)
   ============================================================
   One component, used by the home hero and the Design Your Own opening.
   It is the vertical form of the ruled row the process steps already use,
   so it borrows that vocabulary deliberately: same --line hairline, same
   Playfair label, sitting on the page's 4-up column grid. The rules are
   drawn rather than bordered so each one can be cut in on reveal.
   Placement lives with the host section; everything here is the component. */
.spec-rail{
  position:relative;
  list-style:none; margin:0; padding:0;
  display:grid; gap:0; align-content:end;
}
.spec-rail li{ position:relative; padding:16px 0 15px; }

/* Four rules: one above each row, one closing the group on the ul itself.
   Each is two stacked hairlines — the line, plus a brass tip that rides its
   leading edge while it draws. The torch, not a highlight. */
.spec-rail li::before,
.spec-rail li::after,
.spec-rail::before,
.spec-rail::after{
  content:""; position:absolute; left:0; right:0;
  height:1px; transform-origin:left center; pointer-events:none;
}
.spec-rail li::before,
.spec-rail li::after{ top:0; }
.spec-rail::before,
.spec-rail::after{ bottom:0; }

/* --line, not --line-soft: this matches .steps li, the house ruled row. */
.spec-rail li::before,
.spec-rail::after{ background:var(--line); transition:background .45s var(--ease); }

.spec-rail li::after,
.spec-rail::before{
  opacity:0;
  background:linear-gradient(90deg,
    transparent 0 52%,
    color-mix(in srgb, var(--accent) 38%, transparent) 86%,
    var(--accent-2) 100%);
}

/* Playfair 400, sitting in the house serif scale between the step numerals
   (15.2px) and the trust bar labels (18.9px). Inter 500 read as a button. */
.spec-rail strong{
  display:block; font-family:var(--serif); font-weight:400;
  font-size:1.1rem; line-height:1.3; letter-spacing:-.012em;
  transition:transform .5s var(--ease);
}
.spec-rail span{
  display:block; margin-top:4px; font-size:.845rem; line-height:1.45;
  color:var(--muted-2); transition:color .45s var(--ease);
}

/* Brass at a matched alpha, not mixed into the hairline: mixing with the
   line colour would raise the alpha and thicken the rule instead of just
   warming it. Calibrated against --line (.16), not --line-soft. */
.spec-rail li:hover::before{ background:color-mix(in srgb, var(--accent) 52%, transparent); }
.spec-rail li:hover strong{ transform:translateX(3px); }
.spec-rail li:hover span{ color:var(--muted); }

/* --- the reveal ---
   Every rule is cut left to right, and the words rise behind it once the cut
   has passed. The pre-animation state lives inside the motion query only, so
   with reduced motion — or with no JS at all — the rail simply arrives
   finished instead of staying invisible. */
@keyframes rail-cut{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes rail-tip{
  0%  { transform:scaleX(0); opacity:0; }
  14% { opacity:1; }
  74% { opacity:1; }
  100%{ transform:scaleX(1); opacity:0; }
}
@keyframes rail-rise{ from{ opacity:0; translate:0 10px; } to{ opacity:1; translate:0 0; } }

@media (prefers-reduced-motion:no-preference){
  .js .spec-rail li::before,
  .js .spec-rail::after{ transform:scaleX(0); }
  .js .spec-rail strong,
  .js .spec-rail span{ opacity:0; }

  /* .5s, not .62s: the rule travels a 260px column now, not 383px. */
  .js .spec-rail.in li::before,
  .js .spec-rail.in::after{ animation:rail-cut .5s var(--ease-cut) both; }
  .js .spec-rail.in li::after,
  .js .spec-rail.in::before{ animation:rail-tip .5s var(--ease-cut) both; }
  .js .spec-rail.in strong,
  .js .spec-rail.in span{ animation:rail-rise .66s var(--ease) both; }

  .js .spec-rail.in li:nth-child(1)::before,
  .js .spec-rail.in li:nth-child(1)::after{ animation-delay:.06s; }
  .js .spec-rail.in li:nth-child(2)::before,
  .js .spec-rail.in li:nth-child(2)::after{ animation-delay:.17s; }
  .js .spec-rail.in li:nth-child(3)::before,
  .js .spec-rail.in li:nth-child(3)::after{ animation-delay:.28s; }
  .js .spec-rail.in::before,
  .js .spec-rail.in::after{ animation-delay:.39s; }

  .js .spec-rail.in li:nth-child(1) strong{ animation-delay:.30s; }
  .js .spec-rail.in li:nth-child(1) span  { animation-delay:.36s; }
  .js .spec-rail.in li:nth-child(2) strong{ animation-delay:.41s; }
  .js .spec-rail.in li:nth-child(2) span  { animation-delay:.47s; }
  .js .spec-rail.in li:nth-child(3) strong{ animation-delay:.52s; }
  .js .spec-rail.in li:nth-child(3) span  { animation-delay:.58s; }
}

/* --- A: BAND — headline on paper, then a full-bleed image band ---
   The 4-up grid and gap are lifted from .steps / .trustbar__inner, so the
   rail's left edge lands on the same column line as the fourth process step
   and the fourth trust bar cell. The lead spans the first three columns;
   both the title (15ch) and the sub (46ch) are max-width capped, so the
   wider column costs nothing on the left. */
.hero__inner{
  padding-top:clamp(140px,17vh,186px); padding-bottom:clamp(44px,6vh,70px);
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(24px,3vw,44px); align-items:end;
}
.hero__lead{ grid-column:1 / 4; }
.hero__facts{ grid-column:4 / 5; }
.hero__media{ width:100%; aspect-ratio:24/10; }

/* The facts rail only exists where there is genuinely room for it — below
   1080px it is hidden and the trust bar carries the same three points. */

/* ============================================================
   STATEMENT
   ============================================================ */
.statement{ text-align:center; }
.statement .wrap{ max-width:1000px; }
.statement__lead{ font-family:var(--serif); font-size:clamp(1.5rem,3.2vw,2.5rem); line-height:1.34; letter-spacing:-.015em; }
.statement__lead em{ color:var(--accent); font-style:italic; }
.statement__sub{ margin-top:24px; color:var(--muted); font-size:1.05rem; }

/* ============================================================
   PRODUCT BANDS
   ============================================================ */
.bands{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,30px); }
.band__media{ overflow:hidden; aspect-ratio:4/5; background:var(--paper-2); }
.band__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.band:hover .band__media img{ transform:scale(1.055); }
.band__body{ padding-top:20px; }
.band__body h3{ font-family:var(--serif); font-size:1.4rem; }
.band__body p{ margin-top:8px; color:var(--muted); font-size:.94rem; line-height:1.55; }

/* ============================================================
   STYLES GRID
   ============================================================ */
.style-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(10px,1.4vw,20px); }
.style{ position:relative; display:block; overflow:hidden; aspect-ratio:1; background:var(--paper-2); }
.style img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.style:hover img{ transform:scale(1.07); }
.style span{
  position:absolute; inset:auto 0 0 0; padding:32px 13px 13px; color:#fff;
  font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; font-weight:600;
  background:linear-gradient(180deg, transparent, rgba(18,17,14,.55) 34%, rgba(18,17,14,.90));
}

/* ============================================================
   SPLIT
   ============================================================ */
.split__inner{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(36px,5vw,80px); align-items:center; }
.split__media{ overflow:hidden; }
.split__body .sec-title{ margin-bottom:24px; }
.split__body p{ color:var(--muted); max-width:52ch; }
.split__body .btn{ margin-top:12px; }

/* ============================================================
   CASE STUDY
   ============================================================ */
.case__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(12px,1.6vw,22px); }
.case__wide{ grid-column:1 / -1; }
.case__grid img{ width:100%; height:100%; object-fit:cover; }
.case__wide img{ aspect-ratio:9/5; }
.case__a img, .case__b img{ aspect-ratio:4/5; }

/* ============================================================
   PROCESS
   ============================================================ */
.steps{ list-style:none; margin:0 0 clamp(52px,6vw,84px); padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(24px,3vw,44px); }
.steps li{ border-top:1px solid var(--line); padding-top:22px; }
.steps__n{ display:block; font-family:var(--serif); font-size:.95rem; color:var(--accent); letter-spacing:.1em; margin-bottom:12px; }
.steps h3{ font-family:var(--serif); font-size:1.26rem; margin-bottom:9px; }
.steps p{ color:var(--muted); font-size:.94rem; line-height:1.6; }

/* One deep anchor moment on an otherwise light page. */
.promise{
  display:grid; grid-template-columns:auto auto 1fr; gap:clamp(28px,4vw,60px); align-items:center;
  background:var(--deep); color:var(--on-deep); padding:clamp(30px,4vw,52px);
}
.promise__figure{ display:flex; align-items:baseline; gap:14px; }
.promise__figure strong{ font-family:var(--serif); font-weight:400; font-size:clamp(3rem,5vw,4.2rem); line-height:.85; color:#D8B36B; }
.promise__figure span{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--on-deep-mut); line-height:1.5; }
.promise__text p{ font-size:.98rem; color:var(--on-deep-mut); }
.promise__text p strong{ color:var(--on-deep); font-weight:600; }

/* ============================================================
   DUO CARDS
   ============================================================ */
.duo__inner{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.4vw,30px); }
.card{
  background:var(--paper-3); border:1px solid var(--line-soft); padding:clamp(30px,3.6vw,50px);
  transition:border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.card:hover{ border-color:color-mix(in srgb, var(--accent) 40%, transparent); box-shadow:0 18px 50px -30px rgba(0,0,0,.35); }
.card h3{ font-family:var(--serif); font-size:clamp(1.5rem,2.2vw,1.95rem); margin-bottom:14px; }
.card p{ color:var(--muted); max-width:46ch; }

/* ============================================================
   TRUST BAR
   ============================================================ */
.trustbar{ border-block:1px solid var(--line-soft); padding-block:clamp(30px,4vw,50px); background:var(--paper-2); }
.js .trustbar{ opacity:0; transform:translateY(16px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.js .trustbar.in{ opacity:1; transform:none; }
.trustbar__inner{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,44px); }
.trustbar strong{ display:block; font-family:var(--serif); font-weight:400; font-size:1.18rem; margin-bottom:5px; }
.trustbar span{ font-size:.88rem; color:var(--muted); }

/* ============================================================
   CONTACT CTA (home)
   ============================================================ */
.contact__inner{ max-width:840px; }
.contact__title{ font-family:var(--serif); font-size:clamp(2.1rem,4.4vw,3.6rem); line-height:1.08; letter-spacing:-.022em; }
.contact__sub{ margin-top:20px; color:var(--muted); font-size:1.06rem; max-width:54ch; }
.contact__actions{ display:flex; flex-wrap:wrap; gap:13px; margin-top:34px; }
.contact__alt{
  margin-top:30px; padding-top:24px; border-top:1px solid var(--line-soft);
  color:var(--muted); font-size:.95rem; max-width:60ch;
}
.contact__alt a{ color:var(--accent); border-bottom:1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.contact__note{ margin-top:18px; color:var(--muted-2); font-size:.9rem; max-width:60ch; }

/* ============================================================
   FORM (contact page)
   ============================================================ */
.formpage{ padding-top:150px; }
.formpage__head{ max-width:760px; margin-bottom:clamp(40px,5vw,64px); }
.formpage__head h1{ font-family:var(--serif); font-size:clamp(2.2rem,4.6vw,3.6rem); line-height:1.08; letter-spacing:-.022em; }
.formpage__head p{ margin-top:20px; color:var(--muted); font-size:1.06rem; max-width:56ch; }

.formgrid{ display:grid; grid-template-columns:1.45fr .55fr; gap:clamp(36px,5vw,74px); align-items:start; }

.form{ display:grid; gap:26px; }
.fieldset{ border:0; margin:0; padding:0; display:grid; gap:16px; }
.fieldset > legend{
  font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--accent);
  padding:0; margin-bottom:4px;
}
.row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:grid; gap:7px; }
.field > label, .field > .label{ font-size:13px; font-weight:500; letter-spacing:.02em; }
.hint{ font-size:12.5px; color:var(--muted-2); margin:0; }
.fieldset > .hint{ margin-top:-6px; }
.req{ color:var(--accent); }

input[type=text], input[type=email], input[type=tel], select, textarea{
  font-family:var(--sans); font-size:15px; color:var(--ink);
  background:var(--paper-3); border:1px solid var(--line);
  border-radius:2px; padding:13px 14px; width:100%;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
textarea{ min-height:130px; resize:vertical; }
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 19px) 50%,calc(100% - 14px) 50%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:38px; }

.chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chip{ position:relative; }
.chip input{ position:absolute; opacity:0; width:0; height:0; }
.chip span{
  display:inline-block; padding:9px 16px; font-size:13.5px;
  border:1px solid var(--line); border-radius:100px; cursor:pointer;
  transition:border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.chip input:checked + span{ border-color:var(--accent); background:var(--accent); color:#fff; }
.chip input:focus-visible + span{ box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }

.drop{
  border:1px dashed var(--line); border-radius:2px; padding:22px; text-align:center;
  background:var(--paper-3); cursor:pointer; transition:border-color .25s var(--ease), background .25s var(--ease);
}
.drop:hover{ border-color:var(--accent); }
.drop strong{ display:block; font-size:14px; font-weight:500; margin-bottom:4px; }
.drop span{ font-size:12.5px; color:var(--muted-2); }
.drop input{ display:none; }
.filelist{ font-size:13px; color:var(--muted); margin-top:10px; }

.consent{ display:flex; gap:11px; align-items:flex-start; font-size:13.5px; color:var(--muted); }
.consent input{ margin-top:3px; accent-color:var(--accent); width:16px; height:16px; flex:none; }

.form__submit{ display:flex; flex-wrap:wrap; align-items:center; gap:18px; }
.form__note{ font-size:12.5px; color:var(--muted-2); }

.aside{ display:grid; gap:22px; position:sticky; top:110px; }
.aside__card{ background:var(--paper-2); border:1px solid var(--line-soft); padding:26px; }
.aside__card h3{ font-family:var(--serif); font-size:1.2rem; margin-bottom:12px; }
.aside__card p, .aside__card li{ font-size:14px; color:var(--muted); line-height:1.6; }
.aside__card ul{ margin:0; padding-left:18px; display:grid; gap:7px; }
.aside__card .btn{ margin-top:16px; }
.aside__card--deep{ background:var(--deep); color:var(--on-deep); border-color:transparent; }
.aside__card--deep h3{ color:var(--on-deep); }
.aside__card--deep p{ color:var(--on-deep-mut); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--deep); color:var(--on-deep); padding-top:clamp(54px,7vw,84px); }
.footer__inner{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:clamp(30px,4vw,56px); padding-bottom:clamp(42px,5vw,62px); }
.footer__brand .brandmark{ display:block; width:150px; height:48px; background:var(--logo-deep) left center/contain no-repeat; }
.footer__tag{ margin-top:16px; font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; color:#D8B36B; }
.footer__col h4{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--on-deep-mut); font-weight:600; margin-bottom:16px; }
.footer__col a{ display:block; font-size:.94rem; color:var(--on-deep-mut); padding-block:5px; transition:color .3s var(--ease); }
.footer__col a:hover{ color:#D8B36B; }
.footer__social{ display:flex; flex-wrap:wrap; gap:18px; margin-top:16px; }
.footer__social a{ font-size:.82rem; }
.footer__base{ border-top:1px solid rgba(255,255,255,.10); padding-block:24px; }
.footer__base p{ font-size:.82rem; color:var(--on-deep-mut); }

/* ============================================================
   MOBILE BAR
   ============================================================ */
.mobilebar{ display:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){

  .bands{ grid-template-columns:repeat(2,1fr); row-gap:36px; }
  .style-grid{ grid-template-columns:repeat(3,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); row-gap:32px; }
  .promise{ grid-template-columns:auto auto; }
  .promise__text{ grid-column:1 / -1; }
  .footer__inner{ grid-template-columns:1fr 1fr; }
  .formgrid{ grid-template-columns:1fr; }
  .aside{ position:static; }

  /* The 4-up hero stacks. The spans must be reset to auto, or a 1-column
     grid would sprout implicit columns to satisfy grid-column:1/4. */
  .hero__inner{ grid-template-columns:1fr; }
  .hero__lead,
  .hero__facts{ grid-column:auto; }

  /* At full width the rail turns into a proper spec list: claim on the left,
     qualifier alongside it. The stacked grid's own row gap is the
     separation — no extra margin needed. */
  .spec-rail li{
    display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    gap:clamp(16px,3vw,40px); align-items:baseline;
  }
  .spec-rail span{ margin-top:0; }
}

@media (max-width:820px){
  .split__inner{ grid-template-columns:1fr; }
  .duo__inner{ grid-template-columns:1fr; }
  .trustbar__inner{ grid-template-columns:1fr 1fr; row-gap:26px; }
}

@media (max-width:720px){
  body{ font-size:16px; }
  .hero__title{ max-width:14ch; }
  .hero__actions{ gap:11px; }
  .hero__actions .btn{ width:100%; }
  .hero__sub{ max-width:100%; }
  /* A 24:10 band is a letterbox strip on a phone — give the gate real height. */
  .hero__media{ aspect-ratio:4/3; }
  /* On a phone the hero rail would push the gate below the fold, and it is
     the gate that sells. The trust bar and the promise figures further down
     the page already carry all three of these points. */
  .hero__facts{ display:none; }
  /* The Design Your Own rail carries terms stated nowhere else on that page,
     so it stays — the page opens on type, not on a photograph to protect. */
  .eyebrow{ font-size:10px; letter-spacing:.16em; }
  .header-cta{ display:none; }
  .nav-toggle{ margin-left:auto; }
  .nav{ gap:20px; }
  .nav-full, .nav-contact{ display:none; }
  .nav-short{ display:inline; }

  .bands{ grid-template-columns:1fr; row-gap:40px; }
  .style-grid{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:1fr; }
  .promise{ grid-template-columns:1fr; gap:24px; }
  .case__grid{ grid-template-columns:1fr; }
  .footer__inner{ grid-template-columns:1fr; }
  .row{ grid-template-columns:1fr; }
  .contact__actions .btn, .form__submit .btn{ width:100%; }
  .formpage{ padding-top:120px; }

  .mobilebar{
    display:grid; grid-template-columns:1.35fr 1fr;
    position:fixed; inset:auto 0 0 0; z-index:120;
    background:color-mix(in srgb, var(--paper) 94%, transparent);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-top:1px solid var(--line);
  }
  .mobilebar a{ display:flex; align-items:center; justify-content:center; gap:9px; padding:16px 8px; font-size:13.5px; font-weight:500; }
  .mobilebar a:first-child{ background:var(--ink); color:var(--paper); }
  .mobilebar a:last-child{ color:var(--ink); }
  body{ padding-bottom:54px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  .js .section, .js .trustbar{ opacity:1; transform:none; }
  .js .spec-rail strong, .js .spec-rail span{ opacity:1; }
  .js .spec-rail li::before, .js .spec-rail::after{ transform:none; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   WORK CATALOG
   ============================================================ */
.workpage{ padding-top:clamp(128px,15vh,168px); }
.workpage__head{ max-width:780px; margin-bottom:clamp(36px,4.5vw,56px); }
.workpage__head h1{ font-family:var(--serif); font-size:clamp(2.2rem,4.6vw,3.6rem); line-height:1.08; letter-spacing:-.022em; }
.workpage__head p{ margin-top:20px; color:var(--muted); font-size:1.05rem; max-width:60ch; }

/* ---------- filters ---------- */
.filters{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding-block:22px; margin-bottom:clamp(30px,3.6vw,46px);
  display:grid; gap:16px;
}
.filters__group{ display:grid; grid-template-columns:96px 1fr; gap:16px; align-items:start; }
.filters__label{
  font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted-2); padding-top:9px;
}
.filters__set{ display:flex; flex-wrap:wrap; gap:8px; }
.fchip{
  font-family:var(--sans); font-size:13.5px; color:var(--ink);
  background:transparent; border:1px solid var(--line); border-radius:100px;
  padding:8px 15px; cursor:pointer;
  transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.fchip:hover{ border-color:var(--accent); color:var(--accent); }
.fchip.is-on{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.fchip:focus-visible{ outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.filters__count{ font-size:13px; color:var(--muted-2); margin:0; }

/* ---------- grid ---------- */
/* Tall doors and wide gates keep their real proportions rather than being
   forced into one box. CSS columns are the no-JS fallback; with JS we switch
   to a grid whose row spans are measured, so pieces read left-to-right in
   priority order instead of filling one column at a time. */
.workgrid{ --wg:clamp(14px,1.8vw,26px); columns:3; column-gap:var(--wg); }
.wk{ break-inside:avoid; margin:0 0 var(--wg); }

.workgrid.is-masonry{
  columns:auto; display:grid; grid-template-columns:repeat(3,1fr);
  column-gap:var(--wg); row-gap:0; grid-auto-rows:4px; align-items:start;
}
.workgrid.is-masonry .wk{ margin:0 0 var(--wg); }
.wk[hidden]{ display:none; }
.wk__btn{
  display:block; width:100%; padding:0; border:0; background:none;
  cursor:pointer; text-align:left; font-family:inherit; color:inherit;
}
.wk__btn img{
  width:100%; height:auto; background:var(--paper-2);
  transition:opacity .4s var(--ease), transform 1s var(--ease);
}
.wk__btn:hover img{ opacity:.9; transform:scale(1.012); }
.wk__btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.wk__meta{ display:block; padding-top:11px; }
.wk__title{ display:block; font-family:var(--serif); font-size:1.08rem; line-height:1.3; }
.wk__sub{ display:block; margin-top:3px; font-size:12px; letter-spacing:.05em; color:var(--muted-2); }
.workgrid__empty{ padding:52px 0; text-align:center; color:var(--muted); }

.workcta{
  margin-top:clamp(56px,7vw,100px); padding-top:clamp(40px,5vw,64px);
  border-top:1px solid var(--line); max-width:640px;
}
.workcta h2{ font-family:var(--serif); font-size:clamp(1.7rem,3.2vw,2.5rem); line-height:1.12; }
.workcta p{ margin-top:16px; color:var(--muted); }

/* ---------- detail overlay ---------- */
body.lb-open{ overflow:hidden; }
.lightbox{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:rgba(16,15,13,.90); padding:clamp(14px,3vw,44px);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.lightbox[hidden]{ display:none; }
.lightbox__inner{
  display:grid; grid-template-columns:minmax(0,1fr) 330px;
  background:var(--paper); max-width:1220px; width:100%; max-height:100%; overflow:hidden;
}
.lightbox__stage{ background:var(--paper-2); display:grid; place-items:center; overflow:hidden; }
.lightbox__stage img{ width:100%; height:100%; object-fit:contain; max-height:min(78vh,860px); }
.lightbox__panel{ padding:clamp(24px,2.6vw,38px); overflow-y:auto; }
.lightbox__panel h2{ font-family:var(--serif); font-size:clamp(1.45rem,2.2vw,1.9rem); line-height:1.16; }
.lightbox__facts{ margin:24px 0 0; display:grid; grid-template-columns:auto 1fr; gap:9px 20px; font-size:14px; }
.lightbox__facts dt{ color:var(--muted-2); }
.lightbox__facts dd{ margin:0; color:var(--ink); }
.lightbox__note{ margin-top:20px; font-size:13px; color:var(--muted); }
.lightbox__panel .btn{ margin-top:22px; }
.lightbox__close, .lightbox__nav{
  position:absolute; z-index:2; background:rgba(250,248,244,.92); border:0; cursor:pointer;
  color:#131316; line-height:1; border-radius:100px;
  transition:background .25s var(--ease);
}
.lightbox__close{ top:clamp(10px,2vw,22px); right:clamp(10px,2vw,22px); width:42px; height:42px; font-size:26px; }
.lightbox__nav{ top:50%; transform:translateY(-50%); width:46px; height:46px; font-size:28px; }
.lightbox__nav--prev{ left:clamp(6px,1.4vw,18px); }
.lightbox__nav--next{ right:clamp(6px,1.4vw,18px); }
.lightbox__close:hover, .lightbox__nav:hover{ background:#fff; }

@media (max-width:1080px){
  .workgrid{ columns:2; }
  .workgrid.is-masonry{ grid-template-columns:repeat(2,1fr); }
  .lightbox__inner{ grid-template-columns:1fr; grid-template-rows:auto auto; overflow-y:auto; }
  .lightbox__stage img{ max-height:52vh; }
  .lightbox__nav{ display:none; }
}
@media (max-width:720px){
  .workgrid{ columns:1; }
  .workgrid.is-masonry{ grid-template-columns:1fr; }
  .filters__group{ grid-template-columns:1fr; gap:9px; }
  .filters__label{ padding-top:0; }
  .filters__set{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:5px; scrollbar-width:none; }
  .filters__set::-webkit-scrollbar{ display:none; }
  .fchip{ flex:none; }
  .workpage{ padding-top:110px; }
}

/* ============================================================
   DESIGN YOUR OWN
   The page opens on paper rather than on a photograph: the catalog is
   where pictures do the work, and this page is meant to read as a
   conversation. One deep anchor moment only — the cost argument.
   ============================================================ */
.dyo{ padding-top:clamp(128px,15vh,168px); }

/* Same 4-up grid as the home hero, for the same reason: the rail lands on a
   column line the rest of the page already uses. */
.dyo-open{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(24px,3vw,44px); align-items:end;
  padding-bottom:clamp(30px,5vw,56px);
}
.dyo-open__lead{ grid-column:1 / 4; }
.dyo-facts{ grid-column:4 / 5; }
.dyo-open h1{
  font-family:var(--serif); font-size:clamp(2.5rem,5.4vw,4.4rem);
  line-height:1.05; letter-spacing:-.026em;
}
.dyo-open__p{ margin-top:24px; color:var(--muted); font-size:clamp(1rem,1.2vw,1.1rem); max-width:54ch; }
.dyo-open__p em{ font-style:italic; color:var(--ink-soft); }

/* ---------- the cost argument (deep anchor) ---------- */
.dyo-cost{ background:var(--deep); color:var(--on-deep); }
.dyo-cost .eyebrow{ color:#D8B36B; }
.dyo-cost__grid{ display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(30px,5vw,80px); }
.dyo-cost__body p{ color:var(--on-deep-mut); font-size:1.02rem; max-width:56ch; }
.dyo-cost__body strong{ color:var(--on-deep); font-weight:600; }
.dyo-cost__body em{ color:var(--on-deep); font-style:italic; }

.dyo-drivers{
  margin-top:clamp(40px,5vw,66px); padding-top:clamp(28px,3.4vw,42px);
  border-top:1px solid rgba(255,255,255,.14);
}
.dyo-drivers__label{
  font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--on-deep-mut); margin-bottom:18px;
}
.dyo-drivers ul{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2.4vw,32px);
}
.dyo-drivers li{
  font-family:var(--serif); font-size:clamp(1.05rem,1.5vw,1.3rem); line-height:1.3;
  padding-top:16px; border-top:1px solid rgba(255,255,255,.14);
}
.dyo-drivers__note{ margin-top:26px; font-size:.92rem; color:var(--on-deep-mut); }

/* ---------- six ways in ---------- */
.dyo-sources{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.6vw,38px); }
.dyo-src{ display:block; }
.dyo-src__media{ display:block; overflow:hidden; aspect-ratio:4/3; background:var(--paper-2); }
.dyo-src__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.dyo-src:hover .dyo-src__media img{ transform:scale(1.055); }
.dyo-src__body{ display:block; padding-top:20px; }
.dyo-src__body h3{ font-family:var(--serif); font-size:1.35rem; }
.dyo-src__body p{ margin-top:9px; color:var(--muted); font-size:.94rem; line-height:1.6; }
.dyo-src .link-arrow{ margin-top:14px; }

/* ---------- approval ---------- */
/* Step 3 is the answer to the one fear that is entirely rational — steel
   cannot be undone — so it carries a little more weight than its neighbours. */
.dyo-steps{ margin-bottom:clamp(44px,5vw,72px); }
.dyo-steps p em{ font-style:italic; color:var(--ink-soft); }
.dyo-steps__key{ border-top-color:var(--accent) !important; }
.dyo-steps__key p{ color:var(--ink-soft); }

.dyo-send{
  background:var(--paper-3); border:1px solid var(--line-soft);
  padding:clamp(28px,3.4vw,48px);
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(26px,4vw,64px);
}
.dyo-send__head h3{ font-family:var(--serif); font-size:clamp(1.4rem,2.1vw,1.85rem); margin-bottom:14px; }
.dyo-send__head p{ color:var(--muted); font-size:.95rem; max-width:34ch; }
.dyo-send__list{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.dyo-send__list li{
  color:var(--muted); font-size:.96rem; line-height:1.6;
  padding-left:20px; position:relative;
}
.dyo-send__list li::before{
  content:""; position:absolute; left:0; top:.62em; width:8px; height:1px; background:var(--accent);
}
.dyo-send__list strong{ color:var(--ink); font-weight:500; }

/* ---------- what works in steel ---------- */
.dyo-notes{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(26px,3.4vw,52px); }
.dyo-note{ border-top:1px solid var(--line); padding-top:22px; }
.dyo-note h3{ font-family:var(--serif); font-size:1.3rem; line-height:1.25; margin-bottom:11px; }
.dyo-note p{ color:var(--muted); font-size:.96rem; line-height:1.65; max-width:52ch; }
.dyo-note--close{ grid-column:1 / -1; border-top-color:var(--accent); }
.dyo-note--close p{
  font-family:var(--serif); font-size:clamp(1.1rem,1.7vw,1.4rem); line-height:1.45;
  color:var(--ink); max-width:60ch;
}

/* ---------- file to steel ---------- */
.dyo-file{ display:grid; gap:clamp(30px,4vw,54px); }
.dyo-file__text{ max-width:74ch; }
.dyo-file__text .sec-title{ margin-bottom:22px; }
.dyo-file__text p{ color:var(--muted); max-width:64ch; }
.dyo-figure figure{ margin:0; }
.dyo-figure img{ width:100%; height:100%; object-fit:cover; aspect-ratio:16/9; background:var(--paper-2); }
.dyo-figure figcaption{ margin-top:12px; font-size:12.5px; letter-spacing:.04em; color:var(--muted-2); }
/* Ready for the workshop shoot: the CAD screen beside the gate it became. */
.dyo-figure--pair{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,1.8vw,26px); }
.dyo-figure--pair img{ aspect-ratio:4/3; }

/* ---------- selected work ---------- */
.dyo-picks{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,30px); }
/* height:auto is load-bearing — the intrinsic height attribute on each <img>
   is a presentational hint that would otherwise beat aspect-ratio. */
.dyo-pick img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; background:var(--paper-3); transition:opacity .4s var(--ease); }
.dyo-pick:hover img{ opacity:.9; }
.dyo-pick__t{ display:block; padding-top:11px; font-family:var(--serif); font-size:1.05rem; line-height:1.3; }
.dyo-pick__s{ display:block; margin-top:3px; font-size:12px; letter-spacing:.05em; color:var(--muted-2); }
.dyo-picks__more{ margin-top:clamp(28px,3.4vw,44px); }

@media (max-width:1080px){
  /* Stacks like the home hero, spans reset so no implicit columns appear.
     The rail stays: it becomes the full-width spec list from .spec-rail. */
  .dyo-open{ grid-template-columns:1fr; }
  .dyo-open__lead, .dyo-facts{ grid-column:auto; }
  .dyo-cost__grid{ grid-template-columns:1fr; }
  .dyo-drivers ul{ grid-template-columns:repeat(2,1fr); }
  .dyo-sources{ grid-template-columns:repeat(2,1fr); }
  .dyo-picks{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:820px){
  .dyo-send{ grid-template-columns:1fr; }
  .dyo-notes{ grid-template-columns:1fr; }
}

@media (max-width:720px){
  .dyo{ padding-top:110px; }
  .dyo-sources{ grid-template-columns:1fr; }
  .dyo-drivers ul{ grid-template-columns:1fr; }
  .dyo-figure--pair{ grid-template-columns:1fr; }
  /* Two up still reads on a phone, but the captions need to come down a size. */
  .dyo-pick__t{ font-size:.95rem; }
  .dyo-pick__s{ font-size:11px; }
}

/* ---------- social links ---------- */
.soc{ display:inline-flex; align-items:center; gap:7px; }
/* .footer__col a sets display:block, which would leave these spans inline
   and therefore unsized — both rules below are load-bearing. */
.footer__social .soc{ display:inline-flex; }
.soc__ic{
  display:inline-block; width:15px; height:15px; flex:none; background:currentColor;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.soc__ic--ig{
  -webkit-mask-image:var(--ig); mask-image:var(--ig);
  --ig:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.43.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.43.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41-.56-.22-.96-.48-1.38-.9-.42-.42-.68-.82-.9-1.38-.16-.43-.36-1.06-.41-2.23-.06-1.27-.07-1.65-.07-4.85s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.43-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16M12 0C8.74 0 8.33.01 7.05.07 5.78.13 4.9.33 4.14.63c-.79.3-1.46.72-2.13 1.38C1.35 2.68.93 3.35.63 4.14.33 4.9.13 5.78.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.27.26 2.15.56 2.91.3.79.72 1.46 1.38 2.13.67.66 1.34 1.08 2.13 1.38.76.3 1.64.5 2.91.56C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c1.27-.06 2.15-.26 2.91-.56.79-.3 1.46-.72 2.13-1.38.66-.67 1.08-1.34 1.38-2.13.3-.76.5-1.64.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.27-.26-2.15-.56-2.91-.3-.79-.72-1.46-1.38-2.13-.67-.66-1.34-1.08-2.13-1.38-.76-.3-1.64-.5-2.91-.56C15.67.01 15.26 0 12 0z'/><path d='M12 5.84A6.16 6.16 0 1 0 18.16 12 6.16 6.16 0 0 0 12 5.84zM12 16a4 4 0 1 1 4-4 4 4 0 0 1-4 4z'/><circle cx='18.41' cy='5.59' r='1.44'/></svg>");
}
.soc__ic--tt{
  -webkit-mask-image:var(--tt); mask-image:var(--tt);
  --tt:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M16.6 5.82A4.28 4.28 0 0 1 15.54 3h-3.09v12.4a2.59 2.59 0 0 1-2.59 2.5 2.59 2.59 0 0 1 0-5.18c.27 0 .53.04.77.12v-3.2a5.8 5.8 0 0 0-.77-.05 5.79 5.79 0 1 0 5.79 5.79V9.01a7.35 7.35 0 0 0 4.29 1.38V7.3a4.29 4.29 0 0 1-3.34-1.48z'/></svg>");
}
.contact__social{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 22px;
  margin-top:24px; font-size:.95rem; color:var(--muted);
}
.contact__social .soc{ color:var(--accent); }
.contact__social .soc:hover{ text-decoration:underline; }

/* ==== PHASE 1: launch-blockers ==== */

/* ============================================================
   TAP TARGETS
   ============================================================
   Nav links measured 34px and filter chips 35px against a 44px minimum, on a
   site whose traffic will be overwhelmingly mobile. Everything below grows the
   box only — no type is scaled, no colour changes, no weight changes — so the
   design reads exactly as before while the targets become thumb-sized. */

/* The nav link keeps its 13.5px type and its 6px-below-the-text hover rule;
   only the invisible box around it grows. padding-block is zeroed so the
   min-height alone sets the height and the text centres in it cleanly, and
   the underline is re-offset to sit where it always sat (the extra height is
   split evenly above and below, so it needs to come back up ~5px). */
.nav a{ display:inline-flex; align-items:center; min-height:44px; padding-block:0; }
.nav a::after{ bottom:5px; }

/* Filter chips and the form's checkbox chips are pills, so there is nowhere to
   hide the extra height — they genuinely get taller. This is the one place the
   page changes shape, and 44px is the point of the exercise. */
.fchip{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; }
.chip span{ display:inline-flex; align-items:center; min-height:44px; }

/* Footer links were 36px. They are the only navigation on a phone once the
   header nav has collapsed, so they matter more here than they look. */
.footer__col a{ display:flex; align-items:center; min-height:44px; }

/* 42px, and it is the only way out of the overlay. */
.lightbox__close{ width:44px; height:44px; }

/* The two homepage link-arrows became real anchors in this phase, which made
   them real tap targets — at 25px. Growing the box would push the brass rule
   away from its text, so the hit area is expanded with a pseudo-element
   instead: 44px tall, centred on the text, nothing visible. Anchors only —
   the ones inside .band are spans wrapped by a card that is already a large
   target of its own. ::after is the underline, so this uses ::before. */
a.link-arrow::before{
  content:""; position:absolute; left:0; right:0;
  top:50%; transform:translateY(-50%); height:44px;
}

/* Standalone links in a flex row, not inline in a sentence, so the target
   size applies to them the same as it does to any other control. */
.contact__social .soc{ min-height:44px; }

/* ============================================================
   FORM PROGRESS
   ============================================================
   Quiet by design — a hairline that fills, in the same brass the rest of the
   page uses for anything active. It only exists while something is happening. */
.form__progress[hidden]{ display:none; }
.form__progress{ margin-top:-8px; }
.form__progress-track{
  height:2px; background:var(--line); overflow:hidden;
}
.form__progress-fill{
  display:block; height:100%; width:0;
  background:var(--accent);
  transition:width .25s var(--ease);
}
.form__progress-label{
  margin:9px 0 0; font-size:12.5px; color:var(--muted);
}
/* Compression and the wait for the server's answer have no percentage to
   report, so the bar sweeps instead of sitting at 100% looking stalled. */
.form__progress.is-indeterminate .form__progress-fill{
  transition:none;
  animation:form-progress-sweep 1.1s var(--ease) infinite;
  transform-origin:left center;
}
@keyframes form-progress-sweep{
  0%  { transform:scaleX(0); opacity:1; }
  70% { transform:scaleX(1); opacity:1; }
  100%{ transform:scaleX(1); opacity:.25; }
}
@media (prefers-reduced-motion:reduce){
  .form__progress.is-indeterminate .form__progress-fill{ animation:none; opacity:.55; }
}

/* ============================================================
   404
   ============================================================ */
.notfound__links{
  list-style:none; margin:26px 0 30px; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2px clamp(20px,3vw,44px);
}
.notfound__links a{
  display:flex; align-items:center; min-height:44px;
  font-size:.98rem; color:var(--ink);
  border-bottom:1px solid var(--line-soft);
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.notfound__links a:hover{ color:var(--accent); border-bottom-color:var(--accent); }
.notfound__tel{ color:var(--accent); border-bottom:1px solid color-mix(in srgb, var(--accent) 35%, transparent); }

@media (max-width:720px){
  .notfound__links{ grid-template-columns:1fr; }
}

/* ============================================================
   WORKSHOP SHOT SLOTS  (About)
   ============================================================
   The workshop shoot hasn't happened — see WORKSHOP-SHOT-LIST.md — so
   about.html is built to stand on typography and catalog imagery alone.
   These markers name the shot that belongs at each point. They appear only in
   a review build (npm run review), which stamps data-review on <html>: the
   team can see what is outstanding, a customer never sees an empty box, and
   the page is publishable today either way. */
.shot-slot{ display:none; }
[data-review="1"] .shot-slot{
  display:block;
  margin-block:clamp(28px,4vw,48px);
  padding:20px 22px;
  border:1px dashed color-mix(in srgb, var(--accent) 55%, transparent);
  background:color-mix(in srgb, var(--accent) 5%, transparent);
}
[data-review="1"] .shot-slot strong{
  display:block; font-size:12px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
  margin-bottom:9px;
}
[data-review="1"] .shot-slot span{
  display:block; font-size:.92rem; line-height:1.6; color:var(--muted); max-width:70ch;
}
[data-review="1"] .shot-slot code{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.86em; color:var(--ink-soft);
}

/* ============================================================
   MOBILE BAR — SAFE AREA
   ============================================================
   On an iPhone with a home indicator the bar's lower edge falls inside the
   gesture area, so the primary CTA is partly under it. The bar now pads
   itself out of the inset and the body's compensating padding grows by the
   same amount, so the last of the page still clears the bar.

   NOTE: env(safe-area-inset-*) only resolves to a non-zero value when the
   page opts in with `viewport-fit=cover` on the viewport meta. That meta
   lives in every <head>, which Phase 2 owns, so it is NOT changed here — the
   fallback keeps this a no-op until then rather than a regression. Flagged in
   PRE-DEPLOY-CHECKLIST.md § Phase 1 notes so it lands with the Phase 2 head. */
@media (max-width:720px){
  .mobilebar{ padding-bottom:env(safe-area-inset-bottom, 0px); }
  body{ padding-bottom:calc(54px + env(safe-area-inset-bottom, 0px)); }
}

/* ==== END PHASE 1 ==== */
/* ==== PHASE 3: conversion ==== */

/* ============================================================
   UNCONFIRMED CONTENT  (.pending)
   ============================================================
   Blocks whose copy is a placeholder waiting on Avinash — testimonials,
   the price anchor, deposit terms. They are fully designed and reviewable
   in a review build, and invisible everywhere else, so a made-up figure or
   a fake quote cannot reach a customer by accident.

       npm run review      serves the site with these visible

   THIS MECHANISM SURVIVED THE REVIEW-MODE STRIP ON PURPOSE. Phase 3 warned
   that removing ?review=1 would leave `:root:not([data-review="1"])` true on
   every load forever, making all nine of these blocks permanently hidden and
   permanently unpreviewable — still in the HTML, invisible, with nothing but
   the checklist recording that they exist. Nobody would have noticed, because
   a hidden placeholder looks exactly like a finished page. The attribute is
   now set at build time instead of from a query string: the switcher is gone
   from production, and the placeholders are still reviewable.

   To publish one: replace the placeholder copy, then delete the word
   "pending" from its class. Nothing else changes.
   See PRE-DEPLOY-CHECKLIST.md § "Unconfirmed content". */
/* Hiding is written as "not in review mode" rather than as a display:none
   the review rule has to undo — several of these blocks are grids, and
   there is no safe value to put them back to. */
:root:not([data-review="1"]) .pending{ display:none !important; }
[data-review="1"] .pending{ position:relative; outline:1px dashed color-mix(in srgb, #B4402F 55%, transparent); outline-offset:6px; }
[data-review="1"] .pending::before{
  content:"Placeholder · " attr(data-pending);
  position:absolute; z-index:2; top:0; left:0; transform:translateY(-100%);
  background:#B4402F; color:#fff;
  font-family:var(--sans); font-size:10px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  padding:5px 10px; white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis;
}

/* ============================================================
   TESTIMONIALS  (.words)
   ============================================================
   No stars, no carousel, no stock faces. A ruled row, the quote in
   Playfair, the attribution in the same small-caps label the spec rail
   and the filters already use. First name and district only. */
.words__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(26px,3.4vw,52px); }
.word{ margin:0; border-top:1px solid var(--line); padding-top:24px; }
.word blockquote{
  margin:0; font-family:var(--serif); font-size:clamp(1.08rem,1.5vw,1.32rem);
  line-height:1.45; letter-spacing:-.012em; color:var(--ink); max-width:34ch;
}
.word figcaption{
  margin-top:20px; font-size:11px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted-2);
}
.word figcaption b{ color:var(--ink-soft); font-weight:600; }
.words__note{ margin-top:clamp(34px,4vw,54px); font-size:.92rem; color:var(--muted-2); max-width:60ch; }

/* The aside version: one quote, inside the form page's card column. */
.aside__card--word blockquote{
  margin:0; font-family:var(--serif); font-size:1.12rem; line-height:1.45; color:var(--ink);
}
.aside__card--word figcaption{
  margin-top:16px; font-size:10.5px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted-2);
}
.aside__card--word figure{ margin:0; }

/* ============================================================
   PRICE AND PAYMENT  (.money)
   ============================================================
   The lead-time promise answers "when". This answers "how much" and
   "when do I pay" — the other half of the same objection. Kept on paper:
   the page already has its one deep anchor. */
.money__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(26px,3.4vw,56px); }
.money__block{ border-top:1px solid var(--accent); padding-top:24px; }
.money__block h3{ font-family:var(--serif); font-size:clamp(1.3rem,2vw,1.65rem); line-height:1.25; margin-bottom:14px; }
.money__block p{ color:var(--muted); font-size:.98rem; line-height:1.65; max-width:52ch; }
.money__block strong{ color:var(--ink); font-weight:500; }
.money__terms{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:12px; }
.money__terms li{ position:relative; padding-left:20px; color:var(--muted); font-size:.96rem; line-height:1.6; }
.money__terms li::before{ content:""; position:absolute; left:0; top:.62em; width:8px; height:1px; background:var(--accent); }
.money__terms b{ color:var(--ink); font-weight:500; }

/* ============================================================
   FAQ
   ============================================================
   Question left, answer right — the ruled row the process steps and the
   spec rail already established, stretched wide enough to read. No
   accordions: every answer is short enough to simply be on the page, and
   an answer nobody can see is an answer nobody is reassured by. */
.faqpage{ padding-top:clamp(128px,15vh,168px); }
.faqpage__head{ max-width:780px; margin-bottom:clamp(30px,4vw,48px); }
.faqpage__head h1{ font-family:var(--serif); font-size:clamp(2.2rem,4.6vw,3.6rem); line-height:1.08; letter-spacing:-.022em; }
.faqpage__head p{ margin-top:20px; color:var(--muted); font-size:1.05rem; max-width:58ch; }

.faq-jump{
  display:flex; flex-wrap:wrap; gap:8px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding-block:20px; margin-bottom:clamp(10px,2vw,24px);
}
.faq-jump a{
  font-size:13px; color:var(--ink); border:1px solid var(--line); border-radius:100px;
  padding:8px 15px; transition:border-color .25s var(--ease), color .25s var(--ease);
}
.faq-jump a:hover{ border-color:var(--accent); color:var(--accent); }

.faq-list{ display:grid; }
.faq-item{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(20px,3.4vw,56px);
  border-top:1px solid var(--line); padding-block:clamp(24px,2.8vw,36px);
}
.faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq-item h3{ font-family:var(--serif); font-size:clamp(1.15rem,1.7vw,1.45rem); line-height:1.3; max-width:22ch; }
.faq-item p{ color:var(--muted); font-size:.98rem; line-height:1.7; max-width:56ch; }
.faq-item strong{ color:var(--ink); font-weight:500; }
.faq-item em{ font-style:italic; color:var(--ink-soft); }
.faq-item a{ color:var(--accent); border-bottom:1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.faq-item ul{ margin:0 0 1.1em; padding-left:18px; color:var(--muted); font-size:.98rem; line-height:1.7; }
.faq-item ul li{ margin-bottom:7px; }

/* ============================================================
   LEGAL PROSE  (privacy)
   ============================================================ */
.legal{ padding-top:clamp(128px,15vh,168px); }
.legal__head{ max-width:760px; margin-bottom:clamp(34px,4vw,54px); }
.legal__head h1{ font-family:var(--serif); font-size:clamp(2.1rem,4.4vw,3.3rem); line-height:1.08; letter-spacing:-.022em; }
.legal__head p{ margin-top:20px; color:var(--muted); font-size:1.05rem; max-width:58ch; }
.legal__meta{ margin-top:22px; font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--muted-2); }
.legal__body{ max-width:70ch; }
.legal__body section{ border-top:1px solid var(--line); padding-block:clamp(26px,3vw,40px); }
.legal__body section:last-child{ border-bottom:1px solid var(--line); }
.legal__body h2{ font-family:var(--serif); font-size:clamp(1.3rem,2.1vw,1.7rem); line-height:1.25; margin-bottom:16px; }
.legal__body h3{ font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.02em; margin:22px 0 8px; }
.legal__body p, .legal__body li{ color:var(--muted); font-size:.98rem; line-height:1.7; }
.legal__body strong{ color:var(--ink); font-weight:500; }
.legal__body ul{ margin:0 0 1.1em; padding-left:18px; display:grid; gap:8px; }
.legal__body a{ color:var(--accent); border-bottom:1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.legal__body dl{ margin:0; display:grid; grid-template-columns:minmax(0,.5fr) minmax(0,1fr); gap:12px 26px; }
.legal__body dt{ font-size:.94rem; font-weight:500; color:var(--ink); }
.legal__body dd{ margin:0; color:var(--muted); font-size:.94rem; line-height:1.6; }

/* ============================================================
   FORM VALIDATION  (see assets/js/form.js § PHASE 3)
   ============================================================
   One conversion path, twelve fields. Failure has to say which field and
   why, in the same place the eye already is. */
:root{ --bad:#B4402F; --bad-soft:rgba(180,64,47,.10); }

.formerr{
  border:1px solid var(--bad); border-left-width:3px;
  background:var(--bad-soft); padding:20px 22px;
}
.formerr:focus{ outline:2px solid var(--bad); outline-offset:3px; }
.formerr:focus:not(:focus-visible){ outline:none; }
.formerr h2{ font-family:var(--serif); font-size:1.15rem; color:var(--ink); margin-bottom:10px; }
.formerr ul{ margin:0; padding-left:18px; display:grid; gap:7px; }
.formerr li{ font-size:14px; line-height:1.5; }
.formerr a{ color:var(--bad); font-weight:500; border-bottom:1px solid color-mix(in srgb, var(--bad) 40%, transparent); }
.formerr a:hover{ border-bottom-color:var(--bad); }

.err{
  display:flex; gap:7px; align-items:flex-start;
  margin:0; font-size:13px; line-height:1.45; color:var(--bad); font-weight:500;
}
.err::before{
  content:"!"; flex:none; width:15px; height:15px; margin-top:1px;
  border:1px solid currentColor; border-radius:50%;
  font-size:10px; font-weight:700; line-height:13px; text-align:center;
}

.is-bad > label, .is-bad > .label{ color:var(--bad); }
.is-bad input[type=text], .is-bad input[type=email], .is-bad input[type=tel],
.is-bad select, .is-bad textarea{ border-color:var(--bad); background:var(--bad-soft); }
.is-bad input:focus, .is-bad select:focus, .is-bad textarea:focus{
  border-color:var(--bad); box-shadow:0 0 0 3px color-mix(in srgb, var(--bad) 18%, transparent);
}
/* The chip group and the consent row are not .field, so they mark themselves. */
.is-bad .chip span{ border-color:color-mix(in srgb, var(--bad) 55%, transparent); }
/* The error message is a sibling of the label, not a child: a <label> may
   only contain phrasing content, and the message is a paragraph. */
.consent-field{ display:grid; gap:9px; }
.consent-field .hint a{ color:var(--accent); border-bottom:1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.consent-field.is-bad .consent{ color:var(--bad); }
.consent-field.is-bad .consent input{ outline:2px solid var(--bad); outline-offset:2px; }

.form__note--bad{ color:var(--bad); font-weight:500; }
.form__draft{ font-size:12.5px; color:var(--muted-2); margin:0; }
.form__draft button{
  font-family:var(--sans); font-size:12.5px; color:var(--accent);
  background:none; border:0; border-bottom:1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  padding:0; cursor:pointer;
}
.form__draft button:hover{ border-bottom-color:var(--accent); }
.form__draft button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ============================================================
   PHASE 3 — RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .words__grid{ grid-template-columns:repeat(2,1fr); row-gap:36px; }
  .word:last-child{ grid-column:1 / -1; }
}

@media (max-width:820px){
  .money__grid{ grid-template-columns:1fr; }
  .faq-item{ grid-template-columns:1fr; gap:14px; }
  .faq-item h3{ max-width:100%; }
  .legal__body dl{ grid-template-columns:1fr; gap:4px 0; }
  .legal__body dd{ margin-bottom:12px; }
}

@media (max-width:720px){
  .words__grid{ grid-template-columns:1fr; row-gap:30px; }
  .word:last-child{ grid-column:auto; }
  .word blockquote{ max-width:100%; }
  .faqpage, .legal{ padding-top:110px; }
  /* Same reason .eyebrow tightens on a phone: .18em tracking wraps a short
     label onto two lines. */
  .legal__meta{ letter-spacing:.14em; font-size:10px; }
  .faq-jump{ gap:7px; padding-block:16px; }
  .faq-jump a{ font-size:12.5px; padding:7px 13px; }
}

/* ==== END PHASE 3 ==== */
/* ==== PHASE 5: pages ==== */
/* Process & Materials, Custom Metalwork and CNC Plasma Cutting.
   Nothing above this line is edited. Everything here is either a new
   component or a modifier on an existing one, and the vocabulary is
   deliberately borrowed rather than reinvented: the 4-up opening grid comes
   from the home hero and Design Your Own, the ruled rows come from .steps
   and .spec-rail, and the single deep anchor per page comes from .promise
   and .dyo-cost. Three new pages should read as the same site, not as three
   more design systems.
   ------------------------------------------------------------------
   PREFIXES:  .pg-*   shared by all three pages
              .cm-*   Custom Metalwork only
              .cnc-*  CNC Plasma Cutting only
   ============================================================ */

/* Clears the fixed header, matching .dyo and .workpage. */
.pg{ padding-top:clamp(128px,15vh,168px); }

/* ---------- opening ----------
   Default is the typographic open used by Process and CNC: lead across the
   first three columns, spec rail in the fourth, on the same 4-up grid as the
   home hero so the rail's left edge lands on a column line the page reuses
   further down. Custom overrides it with a photograph, because that page has
   one piece that argues better than a paragraph does. */
.pg-open{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(24px,3vw,44px); align-items:end;
  padding-bottom:clamp(30px,5vw,56px);
}
.pg-open__lead{ grid-column:1 / 4; }
.pg-open__rail{ grid-column:4 / 5; }
.pg-open h1{
  font-family:var(--serif); font-size:clamp(2.5rem,5.4vw,4.4rem);
  line-height:1.05; letter-spacing:-.026em;
}
.pg-open__p{ margin-top:24px; color:var(--muted); font-size:clamp(1rem,1.2vw,1.1rem); max-width:54ch; }
.pg-open__p em{ font-style:italic; color:var(--ink-soft); }
.pg-open__p a{ color:var(--accent); border-bottom:1px solid color-mix(in srgb, var(--accent) 35%, transparent); }

/* --- opening variant: headline beside a portrait piece (Custom) ---
   Two columns rather than four, and the grid-column spans are reset or the
   lead would still be trying to occupy columns that no longer exist. */
.pg-open--figure{ grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); align-items:center; }
.pg-open--figure .pg-open__lead{ grid-column:auto; }
.pg-open__media{ grid-column:auto; margin:0; }
.pg-open__media img{
  width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; background:var(--paper-2);
}

/* ---------- ruled figure caption ----------
   Same size and colour as .dyo-figure figcaption; separate class so the two
   pages can diverge without either one changing under the other. */
.pg-cap{ margin-top:12px; font-size:12.5px; letter-spacing:.04em; color:var(--muted-2); }

/* ---------- steps, three across ----------
   A modifier on the existing .steps component. .steps sets four columns and
   the shared responsive block narrows it to two then one; both of those rules
   sit above this one, so the modifier restates its own breakpoints rather
   than relying on the cascade. */
.pg-steps3{ grid-template-columns:repeat(3,1fr); }

/* ---------- ruled note pairs ---------- */
.pg-notes{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(26px,3.4vw,52px); }
.pg-note{ border-top:1px solid var(--line); padding-top:22px; }
.pg-note h3{ font-family:var(--serif); font-size:1.3rem; line-height:1.25; margin-bottom:11px; }
.pg-note p{ color:var(--muted); font-size:.96rem; line-height:1.65; max-width:52ch; }
.pg-note p strong{ color:var(--ink); font-weight:500; }
.pg-note--wide{ grid-column:1 / -1; }
.pg-note--wide p{ max-width:64ch; }
.pg-note .link-arrow{ margin-top:14px; }

/* ---------- the limits block ----------
   The two statements that stop enquiries the business cannot service. It sits
   on paper-3 like .dyo-send, but takes a brass rule across the top: this is
   the one place on the page where the answer is no, and it should be found by
   someone skimming rather than only by someone reading. */
.pg-limits{
  background:var(--paper-3); border:1px solid var(--line-soft); border-top:2px solid var(--accent);
  padding:clamp(28px,3.4vw,48px);
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(26px,4vw,64px);
}
.pg-limits__head h2{ font-family:var(--serif); font-size:clamp(1.5rem,2.4vw,2.1rem); line-height:1.15; margin-bottom:14px; }
/* :not(.eyebrow) is load-bearing — a bare `.pg-limits__head p` outranks
   `.eyebrow` on specificity and would repaint the brass label grey. */
.pg-limits__head p:not(.eyebrow){ color:var(--muted); font-size:.95rem; max-width:34ch; }
.pg-limits__list{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(22px,2.6vw,34px); }
.pg-limits__list h3{ font-family:var(--serif); font-size:1.24rem; line-height:1.3; margin-bottom:9px; }
.pg-limits__list p{ color:var(--muted); font-size:.96rem; line-height:1.65; max-width:56ch; }
.pg-limits__list strong{ color:var(--ink); font-weight:500; }

/* ---------- deep anchor ----------
   One per page, following the homepage rule. Same construction as .dyo-cost
   so the two dark moments on the site are recognisably the same device. */
.pg-deep{ background:var(--deep); color:var(--on-deep); }
.pg-deep .eyebrow{ color:#D8B36B; }
.pg-deep .sec-sub{ color:var(--on-deep-mut); }
.pg-deep__grid{ display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(30px,5vw,80px); }
.pg-deep__body p{ color:var(--on-deep-mut); font-size:1.02rem; max-width:56ch; }
.pg-deep__body strong{ color:var(--on-deep); font-weight:600; }
.pg-deep__body em{ color:var(--on-deep); font-style:italic; }
.pg-deep__close{
  margin-top:clamp(36px,4.4vw,60px); padding-top:clamp(26px,3.2vw,40px);
  border-top:1px solid rgba(255,255,255,.14);
  font-family:var(--serif); font-size:clamp(1.05rem,1.6vw,1.35rem); line-height:1.45;
  color:var(--on-deep); max-width:64ch;
}

/* Trailing "see more" link under a grid of pieces. */
.pg-more{ margin-top:clamp(28px,3.4vw,44px); }

/* ---------- paired figures ---------- */
.pg-figures{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,1.8vw,26px); }
.pg-figures figure{ margin:0; }
.pg-figures img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; background:var(--paper-2); }

/* ============================================================
   CUSTOM METALWORK
   ============================================================ */

/* What falls under it. Four ruled cells on the same grid as .steps. */
.cm-kinds{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(24px,3vw,44px);
}
.cm-kinds li{ border-top:1px solid var(--line); padding-top:22px; }
.cm-kinds h3{ font-family:var(--serif); font-size:1.26rem; margin-bottom:9px; }
.cm-kinds p{ color:var(--muted); font-size:.94rem; line-height:1.6; }

/* Selected pieces. The brief is explicit that real aspect ratios are
   respected rather than forced into one box, so the tall panel stays tall and
   the row is aligned from its top edge instead of being stretched level. */
.cm-picks{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,30px); align-items:start; }
/* height:auto is load-bearing — the intrinsic height attribute on each <img>
   is a presentational hint that would otherwise beat aspect-ratio. */
.cm-pick img{
  width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  background:var(--paper-2); transition:opacity .4s var(--ease);
}
.cm-pick--tall img{ aspect-ratio:3/4; }
.cm-pick:hover img{ opacity:.9; }
.cm-pick__t{ display:block; padding-top:11px; font-family:var(--serif); font-size:1.05rem; line-height:1.3; }
.cm-pick__s{ display:block; margin-top:3px; font-size:12px; letter-spacing:.05em; color:var(--muted-2); }

/* ============================================================
   CNC PLASMA CUTTING  (trade)
   ============================================================
   A different audience buying a service, so the page furniture is a
   specification sheet rather than a photograph. The values are deliberately
   unpublished until Avinash confirms them — see .cnc-tbd. */

.cnc-spec{ margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(30px,5vw,80px); }
.cnc-spec > div{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(12px,2vw,26px); align-items:baseline;
  padding:18px 0; border-top:1px solid var(--line);
}
.cnc-spec dt{ font-size:12px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--muted-2); }
.cnc-spec dd{ margin:0; font-size:.97rem; line-height:1.55; color:var(--ink); }
.cnc-spec dd small{ display:block; margin-top:5px; font-size:.82rem; line-height:1.5; color:var(--muted); }

/* Outstanding value. Marked rather than guessed: the brief is explicit that
   no material or thickness figure may be invented here. */
.cnc-tbd{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent);
}
.cnc-tbd::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }

/* ---------- review-only draft notice ----------
   Hidden by default and shown only in a review build (npm run review). The
   page is unlinked and pending client confirmation, but a published page must
   never announce that to a customer — so the warning is visible to whoever is
   reviewing and to nobody else. It can no longer be reached from a URL. */
.cnc-draft{ display:none; }
[data-review="1"] .cnc-draft{
  display:block; margin-bottom:clamp(28px,4vw,48px);
  border-top:2px solid var(--accent); border-bottom:1px solid var(--line-soft);
  padding:16px 0 15px;
  font-size:.9rem; line-height:1.6; color:var(--muted); max-width:76ch;
}
[data-review="1"] .cnc-draft b{
  display:block; margin-bottom:5px;
  font-family:var(--serif); font-weight:400; font-size:1.05rem;
  letter-spacing:-.01em; color:var(--ink);
}
/* Matches the marker it is pointing at, rather than reading as emphasis. */
[data-review="1"] .cnc-draft em{ font-style:normal; font-weight:500; color:var(--accent); }

.pg-deep .cnc-spec > div{ border-top-color:rgba(255,255,255,.14); }
.pg-deep .cnc-spec dt{ color:var(--on-deep-mut); }
.pg-deep .cnc-spec dd{ color:var(--on-deep); }
.pg-deep .cnc-spec dd small{ color:var(--on-deep-mut); }
.pg-deep .cnc-tbd{ color:#D8B36B; }

/* ============================================================
   PHASE 5 — RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  /* Stacks like the home hero and Design Your Own, spans reset so a
     single-column grid does not sprout implicit columns. The rail stays and
     becomes the full-width spec list .spec-rail already defines. */
  .pg-open{ grid-template-columns:1fr; }
  .pg-open__lead, .pg-open__rail{ grid-column:auto; }
  /* The figure opening keeps two columns down to 820px — a portrait piece
     beside text is the whole arrangement, and it survives the narrower
     column better than the 4-up rail does. */
  .pg-open--figure{ grid-template-columns:minmax(0,1fr) minmax(0,.8fr); }

  .pg-steps3{ grid-template-columns:repeat(2,1fr); }
  .pg-deep__grid{ grid-template-columns:1fr; }
  .cm-kinds{ grid-template-columns:repeat(2,1fr); row-gap:32px; }
  .cnc-spec{ grid-template-columns:1fr; }
  /* Two across at the same breakpoint .workgrid uses — these are catalog
     pieces and they should narrow when the catalog narrows. */
  .cm-picks{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:820px){
  .pg-open--figure{ grid-template-columns:1fr; }
  .pg-notes{ grid-template-columns:1fr; }
  .pg-limits{ grid-template-columns:1fr; }
}

@media (max-width:720px){
  .pg{ padding-top:110px; }
  .pg-steps3{ grid-template-columns:1fr; }
  .cm-kinds{ grid-template-columns:1fr; }
  .cm-picks{ grid-template-columns:1fr; }
  .pg-figures{ grid-template-columns:1fr; }
  /* The portrait piece keeps its real 4:5 on a phone. Cropping it to 4:3 to
     buy fold space made the one photograph on the page smaller than the
     paragraph above it, which is backwards — the brief is explicit that
     photography stays large and real aspect ratios are respected. */
  .cnc-spec > div{ grid-template-columns:1fr; gap:7px; }
}
/* ==== END PHASE 5 ==== */

/* ============================================================
   PRINT
   ============================================================
   Customers print or PDF a catalog page to show a spouse, and that printout
   is a sales document: it has to carry the photograph, the reference code and
   a way to get back in touch. Everything that only works on a screen comes
   off — the sticky header, the mobile bar, the buttons, the filter chips.

   The reference codes matter most. On screen a piece is identified by the
   `.wk__sub` line under the photograph; on paper that is the only way anyone
   can say which gate they meant, so it is kept and set slightly heavier.
   Contact details are appended to the end of the page, because a printed
   sheet has no footer navigation to fall back on. */
@media print{
  /* Force the light palette regardless of what the browser decides to do
     with backgrounds, and drop the ink-heavy page furniture. */
  :root{ --paper:#fff; --paper-2:#fff; --paper-3:#fff; }
  *{ box-shadow:none !important; text-shadow:none !important; }
  html,body{ background:#fff !important; color:#000; font-size:11pt; }

  /* Navigation, calls to action and anything interactive. */
  .site-header,
  .mobilebar,
  .skip,
  .filters,
  .btn,
  .hero__actions,
  .lightbox,
  .workcta,
  .footer__social,
  .site-footer .footer__col,
  .site-footer .footer__brand{ display:none !important; }

  /* The reveal animation starts at opacity:0 and is driven by an
     IntersectionObserver that never fires for content below the first screen.
     Printing without this gives blank pages. */
  .section,.trustbar,.spec-rail,.wk{ opacity:1 !important; transform:none !important; }

  /* Photography stays — it is the entire proposition. */
  img,picture{ max-width:100% !important; page-break-inside:avoid; break-inside:avoid; }
  .workgrid{ columns:2 !important; column-gap:14mm; }
  .workgrid.is-masonry{ display:block !important; }
  .wk{ break-inside:avoid; page-break-inside:avoid; margin-bottom:8mm; }

  /* The reference code is what a customer quotes back on the phone. */
  .wk__sub{ font-weight:600; color:#000 !important; }
  .wk__title{ color:#000 !important; }

  h1,h2,h3{ page-break-after:avoid; break-after:avoid; }
  p,li{ orphans:3; widows:3; }

  /* A printed link is a dead end unless the address is on the paper. Internal
     hrefs are skipped — a bare "contact.html" helps nobody — but real
     destinations are spelled out. */
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:9pt; word-break:break-all; }
  a[href^="tel:"]::after,
  a[href^="mailto:"]::after{ content:""; }

  /* Contact details, since the footer columns are gone. */
  .site-footer::after{
    content:"Nair Smart Solutions · Fabrication Redefined · 769-1035 · nairsmartsolutionstt@gmail.com · Trinidad & Tobago";
    display:block; padding-top:6mm; border-top:1px solid #000;
    font-size:10pt; line-height:1.6;
  }
  .site-footer{ margin-top:8mm !important; }
  .footer__base{ border-top:0 !important; }

  @page{ margin:14mm; }
}