/* ==========================================================================
   TTA Fabrication — site.css
   One stylesheet for every public page. Built by joining the former files
   in a fixed order, so the cascade is identical to before:
     fonts, styles, vision, gallery, dark-theme, collection-refinement,
     shop-refinement, brand-lockup, home
   The old separate files are no longer loaded by any public page.
   (admin.php still loads dark-theme.css, so leave that one in place.)
   ========================================================================== */

/* ---------- fonts.css ---------- */


/* ---------- fonts.css ---------- */
/* Self-hosted fonts (Inter and Space Grotesk, both SIL Open Font License 1.1).
   Served from this site, so visitors' browsers never contact Google.
   Variable fonts: one file covers every weight the site uses. Latin only. */
@font-face{
  font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../fonts/inter-latin-wght-normal.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:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;
  src:url("../fonts/space-grotesk-latin-wght-normal.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;
}


/* ---------- styles.css ---------- */
/* ==========================================================================
   TTA Fabrication — site styles
   v4 — rebuilt from v3. Single stylesheet for all pages.
   ========================================================================== */

:root{
  --black:#101113;
  --black2:#191b1f;
  --white:#ffffff;
  --paper:#f5f5f2;
  --paper2:#ecece8;
  --line:#d7d9dd;
  --muted:#5c6167;          /* darkened from #646970 for AA contrast */
  --muted2:#6b7076;
  --accent:#b51f2e;
  --accent-dark:#8e1824;    /* for text on light backgrounds */
  --accent-light:#f0737e;   /* for text on dark backgrounds */
  --shadow:0 20px 60px rgba(16,17,19,.12);
  --shadow-sm:0 12px 30px rgba(16,17,19,.06);
  --radius:24px;
  --container:min(1180px,calc(100% - 40px));
  --font-display:"Space Grotesk","Inter",system-ui,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  margin:0;background:var(--paper);color:var(--black);
  font-family:var(--font-body);line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
h1,h2,h3{font-family:var(--font-display);letter-spacing:-.03em;line-height:1.05;margin:0}
.container{width:var(--container);margin:auto}
.section{padding:104px 0}
.section-sm{padding:72px 0}

/* Focus visibility — was completely missing in v3 */
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,summary:focus-visible{
  outline:3px solid var(--accent);outline-offset:3px;border-radius:6px;
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--black);color:#fff;padding:14px 20px;border-radius:0 0 12px 0;font-weight:700;
}
.skip-link:focus{left:0}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.93);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(16,17,19,.08);
}
.nav-wrap{height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:52px;height:52px;object-fit:contain}     /* square box — logo is square */
.brand-text{display:flex;flex-direction:column;line-height:1.05}
.brand-text strong{font-family:var(--font-display);font-size:1.02rem;letter-spacing:-.01em}
.brand-text span{font-size:.64rem;letter-spacing:.19em;font-weight:700;color:var(--muted2)}
.nav-links{display:flex;align-items:center;gap:26px;font-size:.9rem;font-weight:700}
.nav-links a[aria-current="page"]{color:var(--accent-dark)}
.nav-phone{
  display:inline-flex;align-items:center;gap:7px;color:var(--black);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.nav-phone::before{
  content:"";width:15px;height:15px;flex:none;background:var(--accent);
  -webkit-mask:var(--phone-icon) center/contain no-repeat;mask:var(--phone-icon) center/contain no-repeat;
}
:root{
  --phone-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1-9.4 0-17-7.6-17-17 0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .7-.2 1l-2.3 2.2z'/%3E%3C/svg%3E");
}
.nav-cta{background:var(--accent);color:#fff;padding:11px 18px;border-radius:999px}
.nav-links a.nav-cta[aria-current="page"]{color:#fff}
.header-call{display:none}   /* mobile-only quick-call button, see media query */
.nav-toggle{display:none;border:0;background:none;padding:8px;cursor:pointer}
.nav-toggle span{display:block;width:26px;height:2px;background:var(--black);margin:5px auto;transition:.2s}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;padding:0 26px;border-radius:999px;
  font-family:var(--font-body);font-size:1rem;font-weight:800;cursor:pointer;
  border:1px solid transparent;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.btn:hover{transform:translateY(-2px)}
/* Press feedback. :hover does not exist on a phone, so without :active a
   tap gave no acknowledgement at all until the next page painted. */
.btn:active{transform:translateY(0) scale(.97);transition-duration:.06s}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 10px 26px rgba(181,31,46,.24)}
.btn-primary:hover{background:#a01a28}
.btn-primary:active{background:#8e1824;box-shadow:0 4px 12px rgba(181,31,46,.3)}
.btn-ghost{border-color:#bfc2c6;background:rgba(255,255,255,.8);color:var(--black)}
.btn-ghost:hover{background:#fff}
.btn-ghost:active{background:#eceae7;border-color:#a9adb3}
.btn-light{background:#fff;color:var(--black)}
.btn-light:active{background:#e8e8e4}
.btn-block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}
/* Kill the sticky iOS/Android tap highlight — we draw our own now. */
a,button,summary,.card-link{-webkit-tap-highlight-color:transparent}

.eyebrow{
  font-family:var(--font-display);font-size:.75rem;letter-spacing:.18em;
  font-weight:700;color:var(--accent-dark);margin-bottom:14px;
}
.eyebrow.light{color:var(--accent-light)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#fff 0%,#f2f2ef 62%,#e8e9e7 100%)}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:6px;background:linear-gradient(90deg,var(--black),var(--accent),var(--black))}
.hero-orb{position:absolute;width:650px;height:650px;border-radius:50%;right:-140px;top:-160px;background:radial-gradient(circle,rgba(181,31,46,.2),rgba(181,31,46,.03) 45%,transparent 68%);pointer-events:none}
.hero-lines{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(16,17,19,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(16,17,19,.035) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:linear-gradient(90deg,black,transparent 85%);mask-image:linear-gradient(90deg,black,transparent 85%)}
.hero-layout{position:relative;display:grid;grid-template-columns:.95fr 1.05fr;gap:60px;align-items:center;min-height:720px;padding:64px 0 80px}
.hero-logo{width:132px;height:132px;object-fit:contain;margin:0 auto 18px}  /* centred in the hero column */
.hero h1{font-size:clamp(2.7rem,4.4vw,4.3rem)}
.hero h1 span{color:var(--accent)}
.hero-copy>p{font-size:1.12rem;color:#4f545a;max-width:600px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-trust{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:28px;font-size:.86rem;font-weight:600;color:var(--muted)}
.hero-trust li{list-style:none;display:flex;align-items:center;gap:8px}
.hero-trust li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.hero-trust{padding:0;margin-left:0}

/* Video hero: the timelapse gets a proper 16:9 slot on top, photos beneath. */
.hero-showcase{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hero-tile{position:relative;border-radius:24px;overflow:hidden;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.4)}
.hero-tile img{width:100%;height:100%;object-fit:cover}
.hero-tile-video{grid-column:1 / -1;background:#0a0a0a;aspect-ratio:16/9}
.hero-tile-video video{width:100%;height:100%;object-fit:cover;display:block}
.tile-caption{position:absolute;left:0;right:0;bottom:0;padding:70px 24px 22px;background:linear-gradient(transparent,rgba(0,0,0,.9));color:#fff}
.tile-caption span{font-size:.68rem;letter-spacing:.15em;font-weight:800;color:#ff8f99}
.tile-caption strong{display:block;font-family:var(--font-display);font-size:1.22rem;margin-top:4px;line-height:1.2}
.hero-tile.mini{background:#fff;aspect-ratio:1/1}
.hero-tile.mini img{object-fit:contain;padding:14px}
.hero-tile.mini.fill{background:#d2d7e0}
.hero-tile.mini.fill img{object-fit:cover;padding:0}   /* square tile matches the photo, so cover is safe here */

/* ---------- Category strip ---------- */
.category-strip{background:var(--black);color:#fff}
.category-strip-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.category-strip a{padding:22px 24px;border-right:1px solid #33363b;display:flex;gap:14px;align-items:center;transition:background .18s}
.category-strip a:hover{background:#1c1e22}
.category-strip a:last-child{border-right:0}
.category-strip span{color:#e2717a;font-family:var(--font-display);font-size:.72rem;font-weight:700}
.category-strip strong{font-size:.88rem}

/* ---------- Headings ---------- */
.split-heading,.section-heading{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:end;margin-bottom:48px}
.section h2{font-size:clamp(2.3rem,4.2vw,3.8rem)}
.split-heading p,.section-heading p{margin:0;color:var(--muted);font-size:1.05rem}
.intro-section{background:#fff}

/* ---------- Portfolio ---------- */
.portfolio{background:var(--paper2)}
.portfolio-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.project-card{
  grid-column:span 4;background:#fff;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease;
}
.project-card:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(16,17,19,.1)}
.project-card.large,.project-card.wide,.before-after-card{grid-column:span 8}
/* Absolute positioning, not flex: a flex item's height:100% resolves to auto,
   which made images render at natural size and get clipped by overflow:hidden. */
.image-wrap{position:relative;height:330px;overflow:hidden}
.image-wrap.on-light{background:#fff}             /* cutouts on white: show the whole object */
.image-wrap.on-dark{background:#0a0a0a}          /* dark-background photos get a dark plate */
.image-wrap.on-photo{background:#d2d7e0}         /* in-situ scene photos: colour sampled from the photo edge */
.image-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:16px}
.image-wrap.on-dark img{padding:0;object-fit:cover}
/* Scene photos are shown whole — never cropped. The plate colour is sampled
   from the photo's own edge, so the fill reads as part of the picture. */
.image-wrap.on-photo img{padding:0;object-fit:contain}
.project-copy{padding:24px;flex:1}
.project-copy span{font-size:.69rem;letter-spacing:.15em;font-weight:800;color:var(--accent-dark)}
/* h2 on /work.html (proper heading order for a standalone gallery page),
   h3 elsewhere — both are card titles and must not inherit .section h2. */
.project-copy h2,.project-copy h3{font-size:1.5rem;margin:7px 0 8px;line-height:1.12}
.project-copy p{margin:0;color:var(--muted)}

.before-after{display:grid;grid-template-columns:1fr 1fr;background:#050505;gap:1px}
.before-after>div{position:relative;height:420px;overflow:hidden}
.before-after img{width:100%;height:100%;object-fit:cover;object-position:center}
.before-after>div>span{
  position:absolute;z-index:3;top:16px;left:16px;background:rgba(0,0,0,.78);color:#fff;
  border:1px solid rgba(255,255,255,.22);padding:7px 11px;border-radius:999px;
  font-size:.66rem;font-weight:800;letter-spacing:.14em;
}

/* ---------- Landing page quick links ----------
   Three text links under the category cards, so the door offers every
   destination without the homepage carrying any of that content itself. */
.landing-links{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
.landing-links a{
  display:flex;flex-direction:column;gap:3px;padding:18px 22px;
  border:1px solid var(--line);border-radius:16px;background:#fff;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.landing-links a:hover{transform:translateY(-2px);border-color:#a9adb3;box-shadow:var(--shadow-sm)}
.landing-links a:active{transform:translateY(0);transition-duration:.06s;background:var(--paper)}
.landing-links strong{font-family:var(--font-display);font-size:1.02rem;color:var(--accent-dark)}
.landing-links span{font-size:.86rem;color:var(--muted)}

/* Two buttons in the closing band instead of one. */
.business-actions{display:flex;flex-wrap:wrap;gap:10px;flex:none}
.btn-outline-light{border-color:rgba(255,255,255,.45);color:#fff;background:transparent}
.btn-outline-light:hover{background:rgba(255,255,255,.12)}
.btn-outline-light:active{background:rgba(255,255,255,.2)}

@media(max-width:760px){
  .landing-links{grid-template-columns:1fr;gap:10px;margin-top:26px}
  .landing-links a{padding:15px 18px}
  .business-actions{width:100%}
  .business-actions .btn{width:100%}
}

/* ---------- Homepage proof strip ----------
   Four real photographs and one link, instead of the full gallery. The gallery
   itself moved to /work.html; this is the trailer, not the film. */
.proof-strip{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center}
.proof-strip-copy h2{margin-bottom:14px}
.proof-strip-copy p{color:var(--muted);font-size:1.02rem;margin:0 0 26px;max-width:46ch}
.proof-strip-shots{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:0;margin:0}
.proof-strip-shots li{list-style:none;border-radius:18px;overflow:hidden;background:#fff;
  border:1px solid var(--line);box-shadow:var(--shadow-sm);aspect-ratio:4/3}
.proof-strip-shots img{width:100%;height:100%;object-fit:cover}

@media(max-width:1000px){
  .proof-strip{grid-template-columns:1fr;gap:30px}
}
@media(max-width:760px){
  .proof-strip-shots{gap:10px}
  .proof-strip-shots li{border-radius:14px}
}

/* ---------- Custom section ---------- */
.custom-section{background:#fff}
.custom-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.custom-copy p{color:var(--muted);font-size:1.06rem}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0 30px;padding:0}
.chips li{list-style:none;border:1px solid var(--line);background:var(--paper);padding:7px 12px;border-radius:999px;font-size:.8rem;font-weight:700}
.custom-proof{border-radius:26px;overflow:hidden;background:var(--black);box-shadow:var(--shadow)}
.proof-head{display:flex;justify-content:space-between;gap:20px;padding:20px 22px;color:#fff;border-bottom:1px solid #33363b}
.proof-head span{font-size:.69rem;letter-spacing:.15em;color:var(--accent-light);font-weight:800}
.proof-head strong{font-family:var(--font-display)}
.proof-images{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#33363b}
.proof-images img{height:400px;width:100%;object-fit:cover}

/* ---------- Process steps ---------- */
.process-section{background:var(--paper)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:0;margin:0}
.step{list-style:none;background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px 24px}
.step .num{font-family:var(--font-display);font-size:2.1rem;color:var(--accent);line-height:1;display:block;margin-bottom:10px}
.step h3{font-size:1.15rem;margin-bottom:6px}
.step p{margin:0;color:var(--muted);font-size:.95rem}

/* ---------- Business band ---------- */
.business-section{background:var(--paper)}
.business-card{background:linear-gradient(135deg,#141517,#292c31);border-radius:28px;color:#fff;padding:52px;display:flex;justify-content:space-between;align-items:center;gap:40px}
.business-card p{color:#c7cbd0;max-width:640px;margin-bottom:0}
.business-card .btn{flex:none}

/* ---------- FAQ ---------- */
.faq-section{background:#fff}
.faq-list{max-width:840px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{
  cursor:pointer;list-style:none;padding:22px 40px 22px 0;position:relative;
  font-family:var(--font-display);font-size:1.18rem;font-weight:600;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-size:1.6rem;font-weight:400;color:var(--accent);line-height:1;
}
.faq-item[open] summary::after{content:"\2212"}
.faq-item p{margin:0 0 22px;color:var(--muted);max-width:70ch}

/* ---------- Contact ---------- */
.contact-section{background:var(--paper2)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.contact-grid p{color:var(--muted)}
.contact-box{border:1px solid var(--line);border-radius:var(--radius);padding:32px;background:#fff;box-shadow:var(--shadow-sm)}
.contact-box h3{font-size:1.4rem;margin-bottom:8px}
.contact-box p{margin-top:0}
.contact-lines{padding:0;margin:22px 0 0;font-size:.95rem}
.contact-lines li{list-style:none;padding:9px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px}
.contact-lines b{font-weight:700}

/* ---------- Shop ---------- */
.page-head{background:linear-gradient(135deg,#fff,#eeeeeb);border-bottom:1px solid var(--line);padding:72px 0 64px}
.page-head h1{font-size:clamp(2.6rem,5vw,4.4rem);max-width:16ch}
.page-head p{color:var(--muted);font-size:1.1rem;max-width:62ch;margin-bottom:0}

.shop-filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:36px;padding:0}
.shop-filters li{list-style:none}
.filter-btn{
  border:1px solid var(--line);background:#fff;padding:9px 16px;border-radius:999px;
  font-family:var(--font-body);font-size:.87rem;font-weight:700;color:var(--black);cursor:pointer;transition:.18s;
}
.filter-btn:hover{border-color:#a9adb3}
.filter-btn[aria-pressed="true"]{background:var(--black);border-color:var(--black);color:#fff}

.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px;padding:0;margin:0}
.product-card{
  list-style:none;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease;
}
.product-card:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(16,17,19,.1)}
.product-media{position:relative;height:250px;overflow:hidden}
.product-media.on-light{background:#fff}
.product-media.on-dark{background:#0a0a0a}
.product-media.on-photo{background:#d2d7e0}
.product-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:14px}
.product-media.on-dark img{padding:0;object-fit:cover}
.product-media.on-photo img{padding:0;object-fit:contain}
.product-badge{
  position:absolute;top:14px;left:14px;z-index:2;background:var(--accent);color:#fff;
  font-size:.64rem;font-weight:800;letter-spacing:.13em;padding:6px 11px;border-radius:999px;
}
.product-badge.muted{background:var(--black)}
.product-body{padding:22px;display:flex;flex-direction:column;gap:8px;flex:1}
.product-cat{font-size:.66rem;letter-spacing:.15em;font-weight:800;color:var(--accent-dark)}
.product-body h2{font-size:1.28rem}
.product-body p{margin:0;color:var(--muted);font-size:.94rem;flex:1}
.product-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:12px}
.price{font-family:var(--font-display);font-size:1.32rem;font-weight:700}
.price small{font-size:.75rem;font-weight:600;color:var(--muted2);display:block;letter-spacing:0}
.price-tbd{font-family:var(--font-body);font-size:.88rem;font-weight:700;color:var(--muted)}
.buy-btn{min-height:46px;padding:0 20px;font-size:.92rem}

.shop-empty{
  border:2px dashed var(--line);border-radius:var(--radius);background:#fff;
  padding:64px 32px;text-align:center;
}
.shop-empty h2{font-size:1.8rem;margin-bottom:12px}
.shop-empty p{color:var(--muted);max-width:52ch;margin:0 auto 26px}

.shop-note{
  margin-top:44px;padding:26px 28px;border-radius:20px;background:#fff;
  border:1px solid var(--line);display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.shop-note p{margin:0;color:var(--muted)}
.shop-note strong{color:var(--black)}

.trust-bar{background:var(--black);color:#fff;padding:20px 0}
.trust-bar ul{display:flex;flex-wrap:wrap;gap:14px 40px;justify-content:center;padding:0;margin:0;font-size:.85rem;font-weight:600}
.trust-bar li{list-style:none;display:flex;align-items:center;gap:9px;color:#d6d9dd}
.trust-bar li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-light)}

/* ---------- Forms ---------- */
.form-layout{display:grid;grid-template-columns:1fr .85fr;gap:56px;align-items:start}
.quote-form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px;box-shadow:var(--shadow-sm)}
.field{margin-bottom:20px}
.field label{display:block;font-weight:700;font-size:.9rem;margin-bottom:7px}
.field .hint{display:block;font-weight:500;color:var(--muted2);font-size:.82rem;margin-top:3px}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--font-body);font-size:1rem;color:var(--black);
  padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:var(--paper);
  transition:border-color .18s,background .18s;
}
.field input:focus,.field select:focus,.field textarea:focus{background:#fff;border-color:#9aa0a7}
.field textarea{min-height:150px;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.req{color:var(--accent);font-weight:800}
.field-error{color:#96131f;font-size:.85rem;font-weight:600;margin-top:6px;display:none}
.field.invalid input,.field.invalid textarea,.field.invalid select{border-color:#96131f;background:#fff5f5}
.field.invalid .field-error{display:block}
.hp-field{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- Attachment list ----
   Shown as soon as files are picked, so nobody uploads 40 MB to find out
   the limit was 8. */
.file-list{margin-top:12px}
.file-rows{list-style:none;padding:0;margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.file-row{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:10px 14px;font-size:.88rem;background:#fff;border-bottom:1px solid var(--line)}
.file-row:last-child{border-bottom:0}
.file-name{font-weight:600;word-break:break-all}
.file-size{color:var(--muted2);font-weight:600;font-variant-numeric:tabular-nums;flex:none}
.file-row.bad{background:#fdf0f1;color:#96131f}
.file-row.bad .file-size{color:#96131f}
.file-warning{margin:10px 0 0;font-size:.85rem;font-weight:600;color:#96131f}
.form-note{font-size:.85rem;color:var(--muted2);margin:18px 0 0}
.form-status{margin-top:18px;padding:14px 16px;border-radius:12px;font-weight:600;display:none}
.form-status.ok{display:block;background:#eaf6ee;border:1px solid #b7dfc4;color:#1d6b35}
.form-status.err{display:block;background:#fdf0f1;border:1px solid #f0bcc0;color:#96131f}

.side-card{background:var(--black);color:#fff;border-radius:var(--radius);padding:32px;margin-bottom:22px}
.side-card h2{font-size:1.4rem;margin-bottom:14px}
.side-card ol,.side-card ul{padding-left:20px;margin:0;color:#c7cbd0}
.side-card li{margin-bottom:10px}
.side-card li strong{color:#fff}
.side-card-light{background:#fff;color:var(--black);border:1px solid var(--line)}
.side-card-light ul,.side-card-light ol{color:var(--muted)}
.side-card-light li strong{color:var(--black)}

/* ---------- 404 ---------- */
.notfound{min-height:62vh;display:flex;align-items:center;text-align:center;background:linear-gradient(135deg,#fff,#eeeeeb)}
.notfound h1{font-size:clamp(3rem,8vw,6rem)}
.notfound p{color:var(--muted);font-size:1.1rem;max-width:48ch;margin:14px auto 30px}

/* ---------- Footer ---------- */
footer{background:var(--black);color:#c7cbd0;padding:56px 0 30px;font-size:.9rem}
.footer-top{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:44px;padding-bottom:36px;border-bottom:1px solid #2b2e33}
.footer-brand img{width:60px;height:60px;object-fit:contain;margin-bottom:14px;filter:invert(1)}
.footer-brand p{margin:0;max-width:38ch}
.footer-col h3{font-size:.74rem;letter-spacing:.16em;color:#fff;margin-bottom:14px;font-family:var(--font-display)}
.footer-col ul{padding:0;margin:0}
.footer-col li{list-style:none;margin-bottom:9px}
.footer-col a:hover{color:#fff}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:22px;font-size:.82rem;color:#8d9299}

/* ---------- Grid overflow guard ----------
   A grid item defaults to min-width:auto, so it refuses to shrink below its
   widest unbreakable child — a full phone number on a pill button, a date
   input's UA intrinsic width. That pushed the contact box and the quote form
   to 402px inside a 362px container and gave the whole page a horizontal
   scrollbar on a phone. min-width:0 lets them shrink to their track. */
.hero-layout>*,.split-heading>*,.section-heading>*,.custom-grid>*,
.contact-grid>*,.form-layout>*,.story-grid>*,.proof-strip>*,
.business-card>*,.product-detail>*{min-width:0}
.btn{max-width:100%}

/* ---------- Responsive ---------- */
@media(max-width:1080px){
  .nav-phone{display:none}     /* keeps the desktop nav from crowding */
  .nav-links{gap:20px}
}
@media(max-width:1000px){
  .hero-layout{grid-template-columns:1fr;min-height:auto;gap:44px}
  .hero-showcase{max-width:700px}
  .split-heading,.section-heading,.custom-grid,.contact-grid,.form-layout{grid-template-columns:1fr;gap:30px}
  .project-card,.project-card.large,.project-card.wide,.before-after-card{grid-column:span 6}
  .business-card{align-items:flex-start;flex-direction:column;padding:40px}
  .steps{grid-template-columns:1fr 1fr}
  .footer-top{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  :root{--container:min(100% - 28px,1180px)}
  .nav-wrap{height:70px}
  .brand img{width:44px;height:44px}
  .brand-text strong{font-size:.94rem}
  .nav-toggle{display:block}
  .nav-wrap{gap:10px}
  .brand{margin-right:auto}
  .header-call{
    display:inline-flex;align-items:center;min-height:42px;padding:0 15px;
    background:var(--accent);color:#fff;border-radius:999px;
    font-size:.84rem;font-weight:800;white-space:nowrap;
  }
  .nav-phone{display:none}    /* the Call / Text button covers this on mobile */
  .nav-links{
    display:none;position:absolute;top:70px;left:14px;right:14px;background:#fff;
    border:1px solid var(--line);border-radius:18px;padding:14px;box-shadow:var(--shadow);
    flex-direction:column;align-items:stretch;gap:2px;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 12px;border-radius:10px}
  .nav-cta{text-align:center;margin-top:6px}
  /* Tightened so the first product photo reaches the first screen on a phone
     instead of sitting entirely below the fold. */
  .hero-layout{padding:30px 0 56px;gap:26px}
  .hero .eyebrow{font-size:.68rem;letter-spacing:.13em;margin-bottom:10px}
  .hero h1{font-size:clamp(2.3rem,9.6vw,3.4rem)}
  .hero-copy>p{font-size:1rem;margin:14px 0 0}
  .hero-actions{margin-top:20px;gap:10px}
  .hero-trust{margin-top:18px;gap:6px 20px;font-size:.8rem}
  .hero-showcase{gap:10px}
  .tile-caption{padding:50px 16px 16px}
  .tile-caption strong{font-size:1rem}
  .tile-caption span{font-size:.6rem}
  .category-strip-grid{grid-template-columns:1fr 1fr}
  .category-strip a:nth-child(2n){border-right:0}
  .category-strip a{border-bottom:1px solid #33363b}
  .section,.page-head{padding-top:64px;padding-bottom:64px}
  .project-card,.project-card.large,.project-card.wide,.before-after-card{grid-column:span 12}
  .image-wrap{height:270px}
  .before-after>div{height:280px}
  .proof-images img{height:280px}
  .steps{grid-template-columns:1fr}
  .business-card{padding:32px 24px}
  .quote-form{padding:24px}
  .field-row{grid-template-columns:1fr;gap:0}
  .footer-top{grid-template-columns:1fr;gap:30px}
  .product-foot{flex-direction:column;align-items:stretch}
  .buy-btn{width:100%}
}

/* ==========================================================================
   Catalogue: collection grid, breadcrumbs, product detail
   ========================================================================== */

.crumbs{background:#fff;border-bottom:1px solid var(--line);padding:14px 0;font-size:.86rem;color:var(--muted)}
.crumbs .container{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.crumbs a{font-weight:700;color:var(--accent-dark)}
.crumbs a:hover{text-decoration:underline}
.crumbs span[aria-hidden]{color:#b6bac0}

/* Track width decides how the rows break. At 320px the 1180px container fits
   exactly 3 across, so six collections land as two clean rows of three rather
   than 4 + 2 orphans. Revisit this if the collection count changes again. */
.collection-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;padding:0;margin:0}
.collection-card{
  list-style:none;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease;
}
.collection-card:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(16,17,19,.1)}
.collection-card > a{display:flex;flex-direction:column;height:100%}
.collection-card .product-media{height:230px}
.collection-body{padding:24px;display:flex;flex-direction:column;gap:7px;flex:1}
.collection-body h2{font-size:1.4rem}
.collection-body p{margin:0;color:var(--muted);font-size:.94rem;flex:1}
.collection-more{font-size:.85rem;font-weight:800;color:var(--accent-dark);margin-top:10px}
.collection-card:hover .collection-more{text-decoration:underline}

.card-link{display:block;color:inherit}
.product-card h2 a:hover{text-decoration:underline}

/* ---- Whole-card hit target ----
   The image and the title were links; the description paragraph between them
   was dead. People click descriptions. The title's link is stretched over the
   entire card so any part of it navigates, and the footer is lifted above it
   so the Buy / View button still wins its own clicks. */
.product-card,.collection-card,.project-card{position:relative}
/* The overlay must resolve against .product-card, so the title's own anchor
   must NOT be positioned — only the media anchor (a direct child) is lifted. */
.product-card > .card-link{position:relative;z-index:2}
.product-body h2 a::after{content:"";position:absolute;inset:0;z-index:1}
.product-foot{position:relative;z-index:2}

/* Press feedback on cards, for the same reason as the buttons. */
.product-card:active,.collection-card:active,.project-card:active{
  transform:translateY(-1px);box-shadow:var(--shadow-sm);transition-duration:.06s;
}
.category-strip a:active{background:#26292e}
.filter-btn:active{background:var(--paper2);border-color:#8f949a}
.faq-item summary:active{color:var(--accent-dark)}

/* ---- product detail ---- */
.product-detail-section{padding-top:56px}
.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.product-hero-media{
  position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow-sm);aspect-ratio:1/1;
}
.product-hero-media.on-light{background:#fff}
.product-hero-media.on-dark{background:#0a0a0a}
.product-hero-media.on-photo{background:#d2d7e0}
.product-hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:20px}
.product-hero-media.on-dark img{padding:0;object-fit:cover}
.product-hero-copy h1{font-size:clamp(2rem,3.6vw,3rem);margin-bottom:14px}
.product-hero-copy .lede{font-size:1.1rem;color:#4f545a;margin:0}
.product-price-row{margin:22px 0 6px}
.product-price-row .price{font-size:1.8rem}
.product-long{margin-top:26px;color:var(--muted)}
.product-long p{margin:0 0 14px;max-width:62ch}
.product-hero-copy .chips{margin-top:24px}

.related-section{background:var(--paper2);padding-bottom:80px}
.related-section .section-heading{margin-bottom:30px}

@media(max-width:1000px){
  .product-detail{grid-template-columns:1fr;gap:32px}
  .product-hero-media{max-width:520px}
}
@media(max-width:760px){
  /* Two up on a phone. One-per-row turned the collection grid into 2,200px of
     scrolling for four choices — a menu you have to scroll is not a menu. */
  .collection-grid{grid-template-columns:1fr 1fr;gap:12px}
  .collection-card .product-media{height:148px}
  .collection-body{padding:14px 14px 16px;gap:5px}
  .collection-body h2{font-size:1.02rem;letter-spacing:-.02em}
  .collection-body p{
    font-size:.82rem;line-height:1.45;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  }
  .collection-more{font-size:.78rem;margin-top:6px}
  .product-detail-section{padding-top:36px}
}
@media(max-width:480px){
  /* On a narrow phone the blurb only ever showed a truncated fragment
     ("Stake, clip and countertop sign…"), which reads like a bug. A menu
     card needs the name, the count and the link — not half a sentence. */
  .collection-body h2{font-size:1rem}
  .collection-body p{display:none}
  .collection-body{gap:4px}
  .collection-more{margin-top:8px}
}

/* ==========================================================================
   Our Story page
   ========================================================================== */

.story-hero{background:linear-gradient(135deg,#fff 0%,#f4f4f1 60%,#eceae7 100%);padding:72px 0 84px;border-bottom:1px solid var(--line)}
.story-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:68px;align-items:start}
.story-copy h1{font-size:clamp(2.4rem,4.6vw,4rem);margin-bottom:26px}
.story-copy p{color:#4a4f55;max-width:60ch}
.story-copy .lede{font-size:1.16rem;color:var(--black)}
.story-copy em{font-style:normal;font-weight:700;color:var(--accent-dark)}
.story-copy .hero-actions{margin-top:34px}

.story-photo{margin:0;position:sticky;top:104px}
.story-photo picture{display:block;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.6)}
.story-photo img{width:100%;height:auto;display:block}
.story-photo figcaption{margin-top:14px;font-size:.85rem;font-weight:700;color:var(--muted);text-align:center}

.story-values{background:#fff}
.story-values .step h2{font-size:1.15rem;margin-bottom:6px}

@media(max-width:1000px){
  .story-grid{grid-template-columns:1fr;gap:38px}
  .story-photo{position:static;order:-1;max-width:460px;margin:0 auto}
  .story-hero{padding:52px 0 62px}
}

/* ==========================================================================
   Quote page: "How pricing works" band
   ========================================================================== */
.pricing-section{background:var(--paper2);border-bottom:1px solid var(--line)}
.pricing-title{font-size:clamp(1.8rem,3.2vw,2.6rem);margin-bottom:12px}
.pricing-lede{color:var(--muted);max-width:62ch;margin:0 0 34px;font-size:1.05rem}
.pricing-steps .step p{font-size:.92rem}
.pricing-faq{max-width:100%;margin-top:30px;border-top:1px solid var(--line)}
.pricing-faq .faq-item summary{font-size:1.05rem;padding:20px 40px 20px 0}
.pricing-faq .faq-item p{margin-bottom:20px}

@media(max-width:1000px){.pricing-steps{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.pricing-steps{grid-template-columns:1fr}}

/* ==========================================================================
   Collection header band
   --------------------------------------------------------------------------
   Replaces .page-head on collection.html. The old block ran 72px + 64px of
   padding around an h1 capped at max-width:16ch, so a two-word collection
   name wrapped to two lines and left the right half of the band empty —
   ~370px of height for two lines of text. This is centred, black, and lands
   around 210px. The red glow and the closing accent rule are the same two
   devices the homepage hero uses, so the shop pages read as the same site.
   ========================================================================== */
.page-head-band{
  position:relative;overflow:hidden;text-align:center;
  padding:52px 0 56px;
  background:
    radial-gradient(62% 130% at 50% 0%, rgba(181,31,46,.30), transparent 68%),
    var(--black);
}
.page-head-band::after{
  content:"";position:absolute;inset:auto 0 0;height:4px;
  background:linear-gradient(90deg,var(--black),var(--accent),var(--black));
}
.page-head-band .eyebrow{color:var(--accent-light);margin-bottom:10px}
.page-head-band h1{
  color:#fff;font-size:clamp(2.2rem,4.2vw,3.4rem);
  max-width:26ch;margin:0 auto;
}
.page-head-band p{
  color:#c7cbd0;font-size:1.05rem;max-width:58ch;margin:14px auto 0;
}
@media(max-width:760px){
  .page-head-band{padding:36px 0 40px}
  .page-head-band h1{font-size:clamp(1.9rem,7.4vw,2.6rem);max-width:18ch}
  .page-head-band p{font-size:.97rem;margin-top:11px}
}

/* P1: keep direct form navigation visible below the sticky header. */
#quote-form{scroll-margin-top:96px}


/* ---------- vision.css ---------- */
/* Review concept: original catalog and backend, a separate visual direction. */
:root{--paper:#f5f2eb;--paper2:#e9e5dc;--black:#202320;--black2:#2a2d29;--muted:#555b53;--muted2:#5d625c;--accent:#af2634;--accent-dark:#98202d;--line:#d8d7cd;--radius:8px;--shadow-sm:0 5px 16px #20232008;--container:min(1280px,calc(100% - 80px))}
body{background:var(--paper)}h1,h2,h3{text-wrap:balance}h1 em,h2 em{font-style:normal;color:var(--accent)}.section{padding:96px 0}.eyebrow{font-size:.69rem;letter-spacing:.18em;font-weight:800}.site-header{background:var(--paper);backdrop-filter:none;border-bottom:1px solid var(--line)}.nav-wrap{height:88px}.brand img{width:48px;height:48px}.brand-text strong{font-size:1.08rem}.brand-text span{font-size:.59rem}.nav-links{gap:25px;font-size:.8rem}.nav-cta{border-radius:3px;padding:13px 18px}.nav-links a:not(.nav-cta):hover{text-decoration:underline;text-underline-offset:7px}.btn{border-radius:3px;min-height:52px;font-size:.88rem;font-weight:700;gap:24px}.btn-primary:hover,.nav-cta:hover{background:#8e1b28}.btn-ghost{background:transparent;border:1px solid var(--black)}.v-text-link{font-weight:700;font-size:.9rem;border-bottom:1px solid currentColor;padding:8px 0;display:inline-block}.v-hero{padding:52px 0 58px}.v-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}.v-hero-copy h1{font-size:clamp(3.5rem,6.7vw,6.5rem);letter-spacing:-.065em;line-height:.96;margin:30px 0}.v-lede{color:var(--muted);font-size:1.05rem;line-height:1.8}.v-hero-copy .hero-actions{gap:22px;margin:30px 0 42px}.v-origin{font-size:.59rem;letter-spacing:.15em;font-weight:800;display:flex;gap:10px;align-items:center}.v-dot{width:7px;height:7px;background:var(--accent);border-radius:50%}.v-hero-image{margin:0;background:#202320;position:relative;aspect-ratio:1/.98;display:flex;flex-direction:column;overflow:hidden;border-radius:4px}.v-hero-image img{width:100%;height:calc(100% - 67px);object-fit:contain;flex:1;min-height:0}.v-hero-image figcaption{background:#202320;color:#fff;padding:19px 24px;display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:.78rem}.v-hero-image figcaption span{font-size:.58rem;letter-spacing:.12em;color:#c9ccc3}.v-service-strip{border-block:1px solid var(--line);background:#eae7df}.v-service-strip .container{display:flex;justify-content:space-between;align-items:center;gap:18px;min-height:68px;font-size:.73rem}.v-service-strip span:first-child{font-size:.6rem;font-weight:800;letter-spacing:.13em}.v-service-strip a{font-weight:700}.section-heading{align-items:end;margin-bottom:40px;gap:40px}.section-heading h2{font-size:clamp(2.2rem,3.8vw,3.8rem);letter-spacing:-.045em}.section-heading>p{max-width:410px;font-size:1rem}.v-feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}.v-feature-card>div{height:390px;background:#ddd9cf;overflow:hidden;margin-bottom:23px}.v-feature-card:first-child>div{background:#111}.v-feature-card img{width:100%;height:100%;object-fit:contain;transition:transform .25s}.v-feature-card:hover img{transform:scale(1.035)}.v-feature-card>span{font-size:.6rem;font-weight:800;letter-spacing:.13em;color:var(--accent)}.v-feature-card h3{font-size:1.65rem;margin:10px 0}.v-feature-card p{margin:0;color:var(--muted);font-size:.9rem}.intro-section{border-top:1px solid var(--line);background:#eae7df}.collection-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}.collection-card,.product-card,.project-card{border-radius:3px;box-shadow:none;border:1px solid var(--line);background:#faf9f5;overflow:hidden}.collection-card .product-media{height:265px}.product-media.on-dark img,.product-hero-media.on-dark img{object-fit:contain}.product-media{background:#e7e5dd!important}.product-media.on-dark{background:#171917!important}.collection-body{padding:25px}.collection-body h2{font-size:1.35rem}.collection-more{border-top:1px solid var(--line);padding-top:16px;margin-top:18px;color:var(--black)}.landing-links{margin-top:32px}.landing-links a{border-radius:3px;border:1px solid var(--line);background:transparent;box-shadow:none}.v-making-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:75px;align-items:center}.v-making h2{font-size:clamp(2.5rem,4vw,4rem);line-height:1.07}.v-making p:not(.eyebrow){color:var(--muted);max-width:42ch}.v-video video{width:100%;aspect-ratio:16/9;display:block;background:#111}.v-video p{font-size:.6rem;letter-spacing:.12em;font-weight:700;max-width:none!important}.business-section{padding:0 0 90px;background:transparent}.business-card{background:var(--black);border-radius:3px;padding:55px;color:white;box-shadow:none}.business-card h2{font-size:clamp(2.4rem,4vw,4rem)}.business-card p{color:#d4d9d0}.business-card .eyebrow{color:#f8999f}.business-card .btn-light{color:var(--black);background:var(--paper)}footer{background:#e9e5dc;color:var(--black);border-top:1px solid var(--line);padding-top:60px}footer p,footer a,.footer-col h3{color:var(--muted)}.footer-col h3{letter-spacing:.12em;font-size:.67rem}.footer-bottom{border-color:#c9c9bf}.footer-brand img{width:82px;height:82px}.page-head,.page-head-band{padding:75px 0;background:var(--black);color:var(--paper);border:none;position:relative}.page-head h1,.page-head-band h1{font-size:clamp(3rem,5.7vw,5.2rem);max-width:20ch;letter-spacing:-.05em}.page-head p,.page-head-band p{color:#d0d3ca;max-width:66ch}.page-head .eyebrow,.page-head-band .eyebrow{color:#f69ba4}.page-head em{color:#f19b9e}.page-head-band::after{display:none}.trust-bar{background:#e9e5dc;border-bottom:1px solid var(--line)}.trust-bar ul{gap:25px;font-size:.74rem}.portfolio-grid{display:grid;grid-template-columns:1fr 1fr;gap:35px}.project-card,.project-card.large,.project-card.wide,.before-after-card{grid-column:auto;display:flex;flex-direction:column}.before-after-card{grid-column:1/-1;display:grid;grid-template-columns:1.25fr 1fr}.project-card .image-wrap{height:340px;aspect-ratio:auto}.project-card .image-wrap img{height:100%;width:100%;object-fit:contain}.before-after{height:500px}.before-after img{object-fit:contain!important;height:100%!important;padding:12px}.before-after>div{height:100%;background:#181a18}.before-after>div:first-child{background:#e2dfd7}.project-copy{padding:32px}.before-after-card .project-copy{padding:55px;display:flex;flex-direction:column;justify-content:center}.project-copy h2{font-size:1.9rem;margin:15px 0}.project-copy p{font-size:.95rem;line-height:1.75}.project-copy .v-text-link{align-self:start;margin-top:25px}.project-card:hover{transform:none;box-shadow:0 8px 24px #2023200c}.v-filter{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:32px}.v-filter button{padding:12px 20px;background:transparent;border:1px solid #989c91;border-radius:2px;font:600 .8rem var(--font-body);color:var(--black);cursor:pointer;min-height:44px}.v-filter button[aria-pressed=true]{background:var(--black);color:#fff;border-color:var(--black)}[hidden]{display:none!important}.v-shop-tools{border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:36px}.v-shop-tools>label{display:block;font-size:1.35rem;font-weight:700;margin-bottom:18px}.v-shop-tools>div{display:flex;gap:14px}.v-shop-tools input,.v-shop-tools select{font:inherit;padding:14px;border:1px solid #92988d;background:#fff;min-width:0;border-radius:3px}.v-shop-tools input{flex:1}.v-shop-tools select{width:250px}.v-shop-tools p{font-size:.8rem;color:var(--muted);margin-bottom:0}.v-results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;padding:0;gap:25px}.v-results a{height:100%;display:block;background:#faf9f5;border:1px solid var(--line);padding-bottom:24px}.v-results img{width:100%;height:260px;object-fit:contain;background:#e4e1d9}.v-results h2,.v-results p{margin:18px 22px 0}.v-results h2{font-size:1.3rem}.v-results p{font-size:.87rem;color:var(--muted)}.product-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}.product-media{height:290px}.product-detail{gap:60px}.product-hero-media{border-radius:3px;box-shadow:none;position:sticky;top:115px}.product-hero-copy h1{font-size:clamp(2.25rem,3.2vw,3.4rem)}.product-long{border-top:1px solid var(--line);padding-top:25px}.quote-form{border-radius:3px;border:1px solid var(--line);box-shadow:0 14px 40px #20232008;padding:36px}.quote-form input,.quote-form select,.quote-form textarea{border-radius:3px;background:#fcfbf8;border-color:#a4a79e}.form-layout{grid-template-columns:1.2fr .8fr;gap:65px}.form-layout aside{border-top:3px solid var(--accent);padding-top:22px}.faq-item summary{padding:25px 0}.faq-item[open]{padding-inline:20px;background:#eae7df}.chips li{border-radius:2px;background:#e8e6dd}.custom-proof,.proof-images{border-radius:3px}.custom-section{background:#eae7df}.v-zoom{margin-top:14px;border:1px solid var(--line);background:var(--paper);padding:10px 16px;cursor:pointer;font:inherit}.v-dialog{border:0;border-radius:4px;padding:20px;max-width:92vw;max-height:92vh;background:var(--paper)}.v-dialog::backdrop{background:#000b}.v-dialog img{max-height:75vh;max-width:85vw;object-fit:contain}.v-dialog button{display:block;margin:0 0 12px auto;padding:10px 18px;border:1px solid var(--black);background:var(--paper);cursor:pointer;font:inherit}
@media(min-width:1051px){.nav-links{display:flex!important}}
@media(max-width:1050px){:root{--container:calc(100% - 40px)}.nav-links{gap:14px}.nav-phone{display:none}.v-hero-grid{gap:25px}.v-hero-copy h1{font-size:clamp(3.8rem,7.5vw,5.2rem)}.v-hero-copy .hero-actions{flex-direction:column;align-items:flex-start;gap:10px}.v-feature-card>div{height:320px}.before-after-card .project-copy{padding:28px}.collection-grid,.v-results,.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.v-making-grid{gap:35px}.v-service-strip .container{flex-wrap:wrap;padding-block:20px}.form-layout{gap:30px}}
@media(max-width:760px){:root{--container:calc(100% - 32px)}.nav-wrap{height:72px}.nav-links{background:var(--paper);border-color:var(--line);top:72px}.nav-links a{min-height:44px;display:flex;align-items:center}.nav-toggle{min-height:44px;min-width:44px}.brand img{width:42px;height:42px}.brand-text strong{font-size:.95rem}.brand-text span{font-size:.53rem}.section{padding:55px 0}.v-hero{padding:28px 0 35px}.v-hero-grid{grid-template-columns:1fr;gap:30px}.v-hero-copy h1{font-size:clamp(3.6rem,14vw,5.8rem);margin:22px 0}.v-lede{font-size:.98rem}.v-hero-copy .hero-actions{margin:24px 0;gap:14px}.v-hero-image{aspect-ratio:1/1}.v-hero-image figcaption{padding:18px 15px;flex-wrap:wrap;gap:6px}.v-service-strip .container{display:grid;grid-template-columns:1fr;font-size:.78rem;gap:9px}.v-feature-grid{grid-template-columns:1fr;gap:35px}.v-feature-card>div{height:350px}.section-heading{display:block}.section-heading>p{margin-top:22px}.collection-grid,.v-results,.product-grid{grid-template-columns:1fr}.collection-card .product-media{height:280px}.v-making-grid{grid-template-columns:1fr;gap:25px}.business-section{padding-bottom:45px}.business-card{padding:30px 24px}.page-head,.page-head-band{padding:45px 0}.page-head h1,.page-head-band h1{font-size:clamp(2.7rem,11vw,4rem)}.page-head p,.page-head-band p{font-size:1rem}.trust-bar ul{font-size:.74rem;gap:12px;justify-content:flex-start}.portfolio-grid{grid-template-columns:1fr;gap:25px}.before-after-card{grid-column:auto;display:flex}.before-after{height:340px}.before-after-card .project-copy,.project-copy{padding:25px}.project-card .image-wrap{height:320px}.v-filter{gap:8px}.v-filter button{padding:11px 12px;font-size:.73rem}.v-shop-tools>div{flex-direction:column}.v-shop-tools select{width:100%}.product-detail,.form-layout{grid-template-columns:1fr;gap:28px}.product-hero-media{position:relative;top:auto}.quote-form{padding:23px}.footer-top{gap:32px}.footer-bottom{font-size:.78rem}.v-origin{letter-spacing:.09em;font-size:.56rem}.custom-grid{gap:30px}}

.product-hero-media .v-zoom{position:absolute;bottom:14px;right:14px;z-index:3;background:#f5f2eb;box-shadow:0 2px 8px #0002}

.trust-bar,.trust-bar ul,.trust-bar li{color:#3f463d}.trust-bar li::before{background:var(--accent)}

/* Compact homepage: one hero and routes into the site. */
.vision-index .v-hero{padding:58px 0 52px}.vision-index .v-hero-grid{grid-template-columns:.82fr 1.18fr;gap:48px}.vision-index .v-hero-copy h1{font-size:clamp(3rem,5.6vw,5rem);margin:24px 0}.vision-index .v-lede{margin:0 0 28px}.v-home-film{margin:0;background:#202320;border-radius:3px;overflow:hidden}.v-home-film video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#101113}.v-home-film figcaption{padding:15px 20px;color:#d9ddd4;font-size:.6rem;letter-spacing:.12em}.v-home-paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:1px solid var(--line);margin-bottom:42px}.v-home-paths a{display:flex;flex-direction:column;gap:10px;padding:25px 22px;border-right:1px solid var(--line)}.v-home-paths a:first-child{padding-left:0}.v-home-paths a:last-child{border-right:0}.v-home-paths span{color:var(--accent-dark);font-size:.62rem;letter-spacing:.13em;font-weight:800}.v-home-paths strong{font-size:.95rem;line-height:1.4}.v-home-paths a:hover strong{text-decoration:underline;text-underline-offset:4px}.v-home-footer{padding:18px 0;background:var(--paper);border-top:0}.v-home-footer>.container{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.v-home-footer p{font-size:.72rem;margin:0}.v-home-footer a{display:inline-block;padding:8px 0}.v-home-footer p:first-child{padding-block:8px}
@media(max-width:760px){.vision-index .v-hero{padding:24px 0 32px}.vision-index .v-hero-grid{grid-template-columns:1fr;gap:28px}.v-home-film{order:-1}.vision-index .v-hero-copy h1{font-size:clamp(3rem,12vw,4.5rem);margin:18px 0}.vision-index .v-lede{font-size:.94rem}.v-home-paths{grid-template-columns:1fr;margin-bottom:20px}.v-home-paths a,.v-home-paths a:first-child{border-right:0;border-bottom:1px solid var(--line);padding:20px 0;gap:6px}.v-home-paths a:last-child{border-bottom:0}.v-home-footer>.container{gap:3px}}

/* Brand film direction: dark entrance, photographic invitations. */
.vision-index{background:#0c0e10;color:#f4f2ed}.vision-index .site-header{background:#0c0e10;border-color:#ffffff20}.vision-index .brand-text span{color:#bfc1bf}.vision-index .nav-links a[aria-current=page]{color:#ff8791}.vision-index .nav-phone{color:#f4f2ed}.vision-index .nav-toggle span{background:#fff}.vision-index .brand img{background:#ecebe7;border-radius:50%;padding:3px}.brand-stage{height:min(720px,calc(100svh - 88px));min-height:550px;position:relative;isolation:isolate;background:#07090a;overflow:hidden}.brand-stage>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.brand-shade{position:absolute;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(0deg,#080a0cf2 0%,#080a0c80 23%,transparent 57%,#080a0c30 100%)}.brand-stage-top{position:absolute;top:25px;left:0;right:0;display:flex;justify-content:space-between;gap:20px;color:#c4cbcf;font-size:.58rem;letter-spacing:.18em}.brand-stage-bottom{position:absolute;bottom:38px;left:0;right:0;display:flex;justify-content:space-between;align-items:end;gap:25px}.brand-stage h1{font-size:clamp(3.7rem,7.2vw,7rem);letter-spacing:-.055em;line-height:1;max-width:none}.brand-stage h1 em{font-style:normal;color:#f78993}.brand-stage .eyebrow{color:#d8dce0;font-size:.6rem;margin:0 0 16px}.brand-stage-bottom p:not(.eyebrow){color:#c3c8cc;font-size:.95rem;margin:17px 0}.brand-explore{font-size:.88rem;font-weight:700;border-bottom:1px solid #f4f2ed;padding:10px 0;display:inline-flex;gap:45px;align-items:center}.brand-controls{display:flex;gap:8px;flex-shrink:0}.brand-controls button{border:1px solid #ffffff60;color:#eee;background:#0b0e12b8;padding:11px 16px;font:600 .7rem var(--font-body);min-height:44px;cursor:pointer;border-radius:2px}.brand-controls button:hover{background:#30363c}.brand-portals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding:28px 0 32px}.brand-portals>a{height:235px;position:relative;overflow:hidden;background:#1a1e21}.brand-portals img{width:100%;height:100%;object-fit:cover;transition:transform .45s,filter .45s;filter:brightness(.72)}.brand-portals>a:nth-child(2) img{object-fit:contain;background:#c3c4bf}.brand-portals>a:nth-child(3) img{object-fit:contain;object-position:85% center;background:#0b0c0e}.brand-portals>a:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#050709ed,transparent 90%);pointer-events:none}.brand-portals a>div{position:absolute;left:24px;right:24px;bottom:24px;z-index:1}.brand-portals span{font-size:.57rem;font-weight:700;letter-spacing:.14em;color:#d6d9dc}.brand-portals h2{font-size:1.75rem;margin:10px 25px 0 0;color:#fff}.brand-portals .portal-arrow{position:absolute;right:0;bottom:2px;font-size:1.5rem;color:#fff}.brand-portals a:hover img{transform:scale(1.045);filter:brightness(.95)}.vision-index .v-home-footer{background:#0c0e10;border-top:1px solid #ffffff20}.vision-index .v-home-footer p,.vision-index .v-home-footer a{color:#b8bec3}
/* Inner pages act as the product gallery after the dark brand entrance. */
body:not(.vision-index) .collection-card .product-media{height:330px}body:not(.vision-index) .product-media{height:330px}body:not(.vision-index) .product-hero-media{background:#202326;min-height:520px}body:not(.vision-index) .product-hero-media img{object-fit:contain;padding:14px}body:not(.vision-index) .product-card,body:not(.vision-index) .collection-card{border:0;box-shadow:0 8px 25px #20232009}body:not(.vision-index) .collection-body,body:not(.vision-index) .product-body{border-bottom:2px solid #aa2936}.inner-showcase{margin-block:30px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.inner-showcase a{display:grid;grid-template-columns:130px 1fr;align-items:center;gap:20px;background:#e9e6dd;border:1px solid var(--line);padding:12px}.inner-showcase img{width:130px;height:145px;object-fit:contain;background:#181b1e}.inner-showcase small{display:block;color:var(--accent-dark);font-weight:700;font-size:.55rem;letter-spacing:.1em;margin-bottom:9px}.inner-showcase strong{display:block;font-size:.96rem;line-height:1.3}.inner-showcase span{display:block;font-size:.72rem;margin-top:12px;color:var(--muted)}
@media(max-width:1000px){.brand-stage-bottom{align-items:start}.brand-controls{flex-direction:column}.brand-stage h1{font-size:4.8rem}.inner-showcase a{grid-template-columns:1fr;gap:12px}.inner-showcase img{width:100%;height:180px}}
@media(max-width:760px){.vision-index .nav-links{background:#0c0e10}.brand-stage{height:620px;min-height:0}.brand-stage>video{object-fit:contain;object-position:center top;height:auto;aspect-ratio:16/9;top:60px}.brand-stage-top{font-size:.5rem;top:20px}.brand-stage-top span:last-child{display:none}.brand-stage-bottom{bottom:25px;flex-direction:column;gap:15px}.brand-stage h1{font-size:clamp(3.2rem,12vw,4.5rem);max-width:9ch}.brand-stage .eyebrow{font-size:.55rem}.brand-stage-bottom p:not(.eyebrow){font-size:.85rem;max-width:30ch}.brand-controls{flex-direction:row}.brand-controls button{padding:10px 15px}.brand-portals{grid-template-columns:1fr;gap:12px;padding-block:16px}.brand-portals>a{height:170px}.brand-portals>a img{object-position:center 45%}.brand-portals>a:nth-child(3) img{object-position:85% center}.brand-portals a>div{left:20px;right:20px;bottom:20px}.brand-portals h2{font-size:1.55rem}.inner-showcase{gap:10px;grid-template-columns:1fr}.inner-showcase a{grid-template-columns:110px 1fr}.inner-showcase img{width:110px;height:110px}body:not(.vision-index) .product-hero-media{min-height:360px}body:not(.vision-index) .product-media,body:not(.vision-index) .collection-card .product-media{height:300px}}
@media(prefers-reduced-motion:reduce){.brand-portals img{transition:none}}

.work-process{margin-top:22px}.work-process summary{cursor:pointer;font-weight:700;font-size:.85rem;padding-block:12px}.work-process video{width:100%;height:auto;margin-top:10px}
body:not(.vision-index) .page-head,body:not(.vision-index) .page-head-band{padding:38px 0}body:not(.vision-index) .page-head h1,body:not(.vision-index) .page-head-band h1{font-size:clamp(2.5rem,4.5vw,4rem)}.vision-shop main>.section,.vision-collection main>.section{padding-top:38px}.photographic-heading{position:relative;padding-right:43%;min-height:265px;display:flex;flex-direction:column;justify-content:center}.heading-product{position:absolute;right:0;top:0;bottom:0;width:36%;display:flex;align-items:center;justify-content:center;background:#14171a;overflow:hidden}.heading-product img{height:100%;width:100%;object-fit:contain}.heading-product span{position:absolute;bottom:0;left:0;right:0;background:#090b0de8;color:white;padding:12px 16px;font-size:.72rem}.inner-showcase a,.inner-showcase a>div,.product-detail>*{min-width:0}.inner-showcase strong{overflow-wrap:anywhere}
@media(max-width:760px){.photographic-heading{padding-right:0;min-height:0}.heading-product{position:relative;height:200px;width:100%;margin-top:22px}.vision-404 .inner-showcase{width:100%}.product-hero-copy .hero-actions .btn{max-width:100%;font-size:.8rem;gap:8px;padding-inline:15px}}
body:not(.vision-index) .product-hero-media{min-height:0;width:100%;max-width:100%;aspect-ratio:1/1}.vision-404 .inner-showcase{max-width:100%;width:var(--container)}.vision-404 .inner-showcase a{grid-template-columns:1fr}.vision-404 .inner-showcase img{max-width:100%;width:100%}
@media(max-width:760px){.vision-404 .inner-showcase a{grid-template-columns:100px minmax(0,1fr)}.vision-404 .inner-showcase img{width:100px}}
.vision-404 .notfound{flex-direction:column;padding:45px 0 25px;gap:20px}.vision-404 .notfound>.container{flex:none;min-width:0}.vision-404 .inner-showcase{margin-block:10px}

.brand-stage>video{transition:transform .8s ease;transform-origin:center 30%}.brand-stage.is-revealed>video{transform:translateY(-14%) scale(.74)}@media(max-width:760px){.brand-stage.is-revealed>video{transform:none}}@media(prefers-reduced-motion:reduce){.brand-stage>video{transition:none}}
.brand-stage>video{z-index:0}.brand-shade{z-index:1}.brand-stage-top,.brand-stage-bottom{z-index:2}


/* ---------- gallery.css ---------- */
.product-gallery{min-width:0;align-self:start}.product-gallery .product-hero-media{position:relative;top:auto;min-height:0;width:100%;aspect-ratio:1/1}.product-gallery .product-hero-media img{object-fit:contain!important;max-width:100%;width:100%;height:100%}.gallery-zoom{position:absolute;bottom:12px;right:12px;z-index:3;border:1px solid #aaa;background:#f7f5ef;color:#202320;min-height:44px;padding:10px 16px;cursor:pointer;font:600 .8rem var(--font-body,system-ui)}.gallery-caption{font-size:.8rem;color:var(--muted,#555);margin:14px 0}.gallery-thumbs{display:flex;gap:10px;overflow-x:auto;padding:4px 4px 12px}.gallery-thumbs button{flex:0 0 76px;width:76px;height:76px;cursor:pointer;border:2px solid transparent;border-radius:3px;background:#e5e3df;padding:3px}.gallery-thumbs button[aria-pressed=true]{border-color:var(--accent,#aa2534)}.gallery-thumbs img{width:100%;height:100%;object-fit:contain}.gallery-viewer{border:0;border-radius:5px;background:#131619;color:#fff;max-width:min(1050px,94vw);width:94vw;max-height:94vh;padding:18px}.gallery-viewer::backdrop{background:#000c}.gallery-viewer>img{width:100%;height:65vh;object-fit:contain}.gallery-viewer button{border:1px solid #aaa;background:#20252a;color:white;padding:11px 18px;min-height:44px;cursor:pointer;font:inherit}.viewer-close{display:block;margin-left:auto}.viewer-caption{font-size:.85rem}.viewer-controls{display:flex;justify-content:space-between;gap:20px}.product-gallery button:focus-visible,.gallery-viewer button:focus-visible{outline:3px solid #f78993;outline-offset:3px}@media(min-width:761px){.product-gallery{position:sticky;top:110px}}


/* ---------- dark-theme.css ---------- */
/* Shared charcoal palette across the brand film and all supporting pages. */
:root{color-scheme:dark;--paper:#0c0e10;--paper2:#111519;--black:#101316;--black2:#191e23;--muted:#b9c0c7;--muted2:#aeb7c0;--accent:#e51b23;--accent-dark:#ff454d;--accent-light:#ff454d;--line:#363d44;--ink:#f4f2ed;--surface:#181d22}
body{background:var(--paper);color:var(--ink)}
.site-header,.nav-links{background:#0c0e10;border-color:var(--line)}
.brand img{background:#ecebe7;border-radius:50%;padding:3px}.brand-text span,.nav-phone{color:var(--muted)}.nav-toggle span{background:var(--ink)}
.vision-index .nav-links a[aria-current=page],.nav-links a[aria-current=page]{color:#ff454d}.nav-links a.nav-cta[aria-current=page]{color:white}
.brand-stage h1 em{color:#ff2028}
h1 em,h2 em,.page-head em{color:#ff454d}.eyebrow,.page-head .eyebrow,.page-head-band .eyebrow,.business-card .eyebrow{color:#ff454d}
.page-head,.page-head-band,.story-hero,.notfound,.hero{background:#111519;color:var(--ink);border-color:var(--line)}
.page-head p,.page-head-band p,.story-copy p,.story-copy .lede,.product-hero-copy .lede,.hero-copy>p{color:var(--muted)}
.intro-section,.custom-section,.faq-section,.story-values,.process-section,.portfolio,.pricing-section,.related-section,.contact-section{background:var(--paper2)}
.collection-card,.product-card,.project-card,.quote-form,.contact-box,.step,.shop-empty,.shop-note,.inner-showcase a,.v-results a,.landing-links a,.side-card,.side-card-light,.business-card{background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:none}
.collection-more,.shop-note strong,.side-card-light li strong{color:var(--ink)}
body .product-media{background:#171b1f!important}.image-wrap.on-light,.image-wrap.on-photo,.before-after>div:first-child,.v-results img,.proof-strip-shots li{background:#171b1f}
body:not(.vision-index) .product-body,body:not(.vision-index) .collection-body{border-bottom-color:var(--accent)}
.trust-bar,.trust-bar ul,.trust-bar li{background:#111519;color:var(--muted)}
.crumbs{background:#111519;color:var(--muted)}
.btn-ghost,.btn-light,.business-card .btn-light,.v-zoom,.v-dialog button,.product-hero-media .v-zoom{background:#20262c;color:var(--ink);border-color:#75808b}
.btn-ghost:hover,.btn-light:hover,.business-card .btn-light:hover{background:#303941}.btn-primary,.nav-cta{background:var(--accent);color:white}.btn-primary:hover,.nav-cta:hover{background:#ba151c}
.v-filter button,.filter-btn{background:#181d22;color:var(--ink);border-color:#69747e}.v-filter button[aria-pressed=true],.filter-btn[aria-pressed=true]{background:#b91820;border-color:#ff454d;color:white}
.chips li,.faq-item[open],.file-row,.v-service-strip{background:#1b2127;color:var(--ink)}
.quote-form input,.quote-form select,.quote-form textarea,.v-shop-tools input,.v-shop-tools select,.field input:focus,.field textarea:focus,.field select:focus{background:#0f1317;color:var(--ink);border-color:#68747f}
input::placeholder,textarea::placeholder{color:#a4aeb8;opacity:1}input::file-selector-button{background:#29323a;color:white;border:1px solid #68747f;border-radius:3px;padding:8px 12px;cursor:pointer}
.field-error,.file-warning{color:#ff8d93}.field.invalid input,.field.invalid textarea,.field.invalid select,.file-row.bad,.form-status.err{background:#34191e;color:#ffb7bc;border-color:#ff616b}.file-row.bad .file-size{color:#ffb7bc}.form-status.ok{background:#122d22;color:#a6edbf;border-color:#478563}
footer,.v-home-footer{background:#0c0e10;color:var(--muted);border-color:var(--line)}footer p,footer a,.footer-col h3,.footer-bottom{color:var(--muted)}.footer-bottom{border-color:var(--line)}
.v-dialog{background:var(--surface);color:var(--ink)}
:focus-visible{outline:2px solid #fff;outline-offset:4px}
/* The making film is visible without opening an accordion. */
.work-process{border-top:1px solid var(--line);padding-top:20px}.work-process h3{font-size:1rem;margin:0 0 12px}.work-process video{display:block;width:100%;height:auto;background:#090b0d;border:1px solid var(--line);margin:0}
/* Same palette, existing admin controls and workflow. */
.vision-admin{background:#0c0e10;color:#f4f2ed}.vision-admin .card,.vision-admin .coverpick-opt{background:#181d22}.vision-admin input,.vision-admin select,.vision-admin textarea{background:#0f1317;color:#f4f2ed;border-color:#68747f}.vision-admin button.ghost,.vision-admin button.tiny,.vision-admin .pill{background:#29323a;color:#f4f2ed}.vision-admin button.link{color:#ff6970}.vision-admin .msg.ok,.vision-admin .pill.live{background:#122d22;color:#a6edbf;border-color:#478563}.vision-admin .msg.err,.vision-admin .pill.warn{background:#34191e;color:#ffb7bc;border-color:#ff616b}.vision-admin .thumb,.vision-admin .photo-row img,.vision-admin .coverpick-opt img{background:#111519}
.gallery-zoom,.gallery-thumbs button{background:#242c33;color:var(--ink);border-color:#68747f}.gallery-thumbs button[aria-pressed=true]{border-color:#ff454d}.product-gallery button:focus-visible,.gallery-viewer button:focus-visible{outline-color:white}


/* ---------- collection-refinement.css ---------- */
/* Collection-specific correction; preserve rectangular hero and original media. */
.vision-collection{--collection-circle:144px}
.related-collections{margin-block:28px 0}
.related-collections>h2{font-size:.8rem;letter-spacing:.12em;margin:0 0 16px}
.related-collections>ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding:0;margin:0;list-style:none}
.related-collections li{min-width:0;background:#181d22;border:1px solid var(--line);border-radius:3px}
.related-collections a{display:grid;grid-template-columns:88px minmax(0,1fr);gap:16px;padding:16px;height:100%;align-items:start}
.related-collections img{width:88px;height:104px;object-fit:contain;background:#111519;border:1px solid var(--line);border-radius:2px}
.related-collections h3{font-size:1.05rem;margin:0 0 8px;line-height:1.3}
.related-collections p{font-size:.8rem;line-height:1.55;color:var(--muted);margin:0 0 12px}
.related-collection-cta{font-size:.8rem;font-weight:700;color:#ff6269;display:block;line-height:1.5}
.related-collections a:hover .related-collection-cta{text-decoration:underline;text-underline-offset:4px}
.related-collections a:focus-visible{outline:3px solid white;outline-offset:4px}
.vision-collection #collection-products>.product-card{background:#181d22;border:1px solid var(--line);box-shadow:none}
.vision-collection #collection-products>.product-card>.card-link{display:flex;justify-content:center;align-items:center;padding:24px 16px 8px;min-height:calc(var(--collection-circle) + 32px)}
body.vision-collection #collection-products .product-media{width:var(--collection-circle);height:var(--collection-circle);flex:none;border-radius:50%;overflow:hidden;border:2px solid #6b747d;background:#111519!important}
body.vision-collection #collection-products .product-media img{width:100%;height:100%;object-fit:cover;object-position:center;padding:0;border-radius:50%}
.vision-collection #collection-products .product-badge{top:8px;left:8px;max-width:calc(100% - 16px)}
@media(max-width:1050px){.vision-collection{--collection-circle:124px}.related-collections a{grid-template-columns:1fr;gap:12px}.related-collections img{width:88px;height:96px}}
@media(max-width:760px){.vision-collection{--collection-circle:112px}.related-collections{margin-top:22px}.related-collections>ul{grid-template-columns:1fr;gap:12px}.related-collections a{grid-template-columns:88px minmax(0,1fr);gap:16px;padding:14px}.related-collections p{font-size:.83rem}.related-collection-cta{font-size:.85rem}.vision-collection #collection-products>.product-card>.card-link{padding-top:24px}}
/* Group each centered name with its circle; keep the reading area left aligned. */
.vision-collection #collection-products .product-body{padding-top:10px;gap:14px}
.vision-collection #collection-products .product-body h2{width:100%;text-align:center;line-height:1.3;min-height:2.6em;margin:0;text-wrap:balance}
.vision-collection #collection-products .product-body>p,.vision-collection #collection-products .product-foot{text-align:left}


/* ---------- shop-refinement.css ---------- */
/* Shop-only refinement; existing catalog, links and site palette. */
.vision-shop{--shop-circle:152px}
.vision-shop .shop-intro{padding:34px 0 24px;background:#111519;border-bottom:1px solid var(--line)}
.vision-shop .shop-intro .eyebrow{margin-bottom:12px;font-size:.65rem}
.vision-shop .shop-intro h1{font-size:clamp(2rem,3.8vw,3.3rem);line-height:1.08;letter-spacing:-.045em;margin:0 0 14px}
.vision-shop .shop-lede{max-width:720px;color:var(--muted);font-size:1rem;margin:0}
.vision-shop .shop-intro .hero-actions{margin:20px 0 0;gap:12px}
.vision-shop .shop-intro .btn{min-height:44px;padding:12px 18px;font-size:.7rem;letter-spacing:.035em;gap:18px}
.vision-shop .shop-origin{display:flex;flex-wrap:wrap;list-style:none;gap:10px 22px;padding:0;margin:22px 0 0;color:var(--muted);font-size:.72rem}
.vision-shop .shop-origin li{display:flex;align-items:center;gap:8px}.vision-shop .shop-origin li::before{content:'';width:4px;height:4px;flex:none;background:var(--accent)}
.vision-shop main>.shop-browse{padding-top:28px;scroll-margin-top:105px}
.shop-browse-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.shop-browse-heading h2{font-size:.9rem;letter-spacing:.1em;margin:0}
.shop-browse-heading>a{font-size:.85rem;text-decoration:underline;text-underline-offset:4px;min-height:44px;display:flex;align-items:center;gap:12px}
.vision-shop .v-shop-tools{padding-bottom:0;border:0;margin-bottom:24px}
.vision-shop .v-shop-tools input,.vision-shop .v-shop-tools select{padding:12px 14px;font-size:.9rem;min-height:46px}
.vision-shop .v-shop-tools p{font-size:.78rem;margin-top:10px}
.vision-shop .collection-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
body.vision-shop .collection-card{border:1px solid #363d44;border-radius:4px;box-shadow:none;transition:transform .18s,border-color .18s;overflow:visible}
body.vision-shop .collection-card:hover{transform:translateY(-2px);border-color:#89949e;box-shadow:none}
.vision-shop .collection-card>a{border-radius:3px;overflow:hidden;height:100%;display:flex;flex-direction:column}
.vision-shop .collection-card>a:focus-visible{outline:3px solid white;outline-offset:4px}
body.vision-shop .collection-card .product-media{width:var(--shop-circle);height:var(--shop-circle);flex:none;margin:24px auto 0;border:1px solid #6b747d;border-radius:50%;overflow:hidden}
.vision-shop .collection-card .product-media img{width:100%;height:100%;object-fit:cover;object-position:center;padding:0;transform:none}
body.vision-shop .collection-body{padding:14px 22px 0;gap:12px;border-bottom:0}
.vision-shop .collection-body h3{font-size:1.4rem;line-height:1.3;margin:0;letter-spacing:-.025em;text-align:center;text-wrap:balance}
.vision-shop .collection-body p{display:block;text-align:left;font-size:.9rem;line-height:1.65;-webkit-line-clamp:unset;overflow:visible;margin:0}
.vision-shop .collection-more{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:8px;padding:15px 0;min-height:52px;font-size:.85rem;line-height:1.4;border-color:#363d44}
.vision-shop .collection-more span{font-size:1.2rem;color:#ff454d}
.vision-shop .v-results h3{margin:18px 22px 0;font-size:1.3rem}.vision-shop .v-results a:focus-visible{outline:3px solid white;outline-offset:4px}
@media(max-width:1050px){.vision-shop{--shop-circle:132px}.vision-shop .collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.vision-shop{--shop-circle:120px}.vision-shop .shop-intro{padding:26px 0 20px}.vision-shop .shop-intro h1{max-width:15ch;font-size:2.15rem}.vision-shop .shop-lede{font-size:.93rem}.vision-shop .shop-intro .hero-actions{flex-wrap:wrap;margin-top:18px}.vision-shop .shop-intro .btn{font-size:.65rem;gap:10px;padding-inline:12px}.vision-shop .shop-origin{font-size:.65rem;gap:8px 14px;margin-top:18px}.vision-shop .collection-grid{grid-template-columns:1fr;gap:20px}body.vision-shop .collection-card .product-media{height:var(--shop-circle)}.vision-shop .shop-browse{scroll-margin-top:88px}.shop-browse-heading{align-items:start}.shop-browse-heading h2{font-size:.8rem}.shop-browse-heading>a{font-size:.78rem}body.vision-shop .collection-body{padding:14px 20px 0}.vision-shop .collection-body h3{font-size:1.3rem}.vision-shop .v-shop-tools>div{gap:10px}}
@media(prefers-reduced-motion:reduce){body.vision-shop .collection-card{transition:none}body.vision-shop .collection-card:hover{transform:none}}
@media(min-width:1051px){.vision-shop .shop-intro>.container{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:40px}.vision-shop .shop-intro .eyebrow{grid-column:1/-1}.vision-shop .shop-intro h1{grid-column:1;grid-row:2}.vision-shop .shop-lede{grid-column:1;grid-row:3}.vision-shop .shop-intro .hero-actions{grid-column:2;grid-row:2/4;align-self:center;display:flex;flex-direction:column;margin:0}.vision-shop .shop-origin{grid-column:1/-1}}
@media(max-width:760px){.vision-shop .shop-intro .hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.vision-shop .shop-intro .btn{white-space:normal;text-align:left;line-height:1.4;justify-content:space-between}.vision-shop .shop-intro .btn span{flex:none}}


/* ---------- brand-lockup.css ---------- */
/* One shared lockup for the nine public page headers. */
.site-header .brand-lockup{display:flex;flex-direction:column;align-items:center;gap:5px;flex:none;text-decoration:none}
.brand-lockup-main{display:flex;align-items:center;justify-content:center;gap:12px}
body .site-header .brand-lockup .brand-anchor img{display:block;width:46px;height:46px;background:#ecebe7;border-radius:50%;padding:3px}
body .site-header .brand-lockup .brand-letters{display:block;width:142px;height:auto;background:none;border:0;border-radius:0;padding:0}
.brand-division{display:block;color:#b9c0c7;font:400 10px/1.3 var(--font-body,system-ui);letter-spacing:0;white-space:nowrap;text-align:center}
@media(max-width:760px){.site-header .nav-wrap{gap:8px}.site-header .brand-lockup{gap:4px}.brand-lockup-main{gap:8px}body .site-header .brand-lockup .brand-anchor img{width:34px;height:34px;padding:2px}body .site-header .brand-lockup .brand-letters{width:106px}.brand-division{font-size:8.5px}.site-header .header-call{font-size:.7rem;padding:10px 9px;white-space:nowrap}.site-header .nav-toggle{flex:none}}


/* ---------- home.css ---------- */
/* ==========================================================================
   TTA Fabrication — homepage
   Loaded after the shared dark theme. Uses its tokens (--surface, --line,
   --muted, --ink, --accent, --accent-dark) so the look matches every page.
   Red is reserved for actions and state: buttons, the active nav item,
   keyboard focus and link arrows. Everything else is charcoal and off-white.
   ========================================================================== */

/* ---------- Hero: call to action ---------- */
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:6px}
.hero-cta .btn{width:auto;min-height:48px;padding-inline:26px}
.brand-stage h1{text-wrap:balance}

/* ---------- Shared section frame ---------- */
.home-section{padding-block:56px}
.home-section-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px 24px;flex-wrap:wrap;margin-bottom:26px}
.home-section-head h2{font-size:clamp(1.55rem,2.6vw,2.1rem);letter-spacing:-.025em;line-height:1.1}
.home-section-head a{font-size:.88rem;min-height:44px;display:inline-flex;align-items:center;gap:10px}
.home-section-head a span,.tile-cta>span[aria-hidden],.brand-explore span{color:var(--accent-dark)}
.text-link{font-size:.9rem;font-weight:700;border-bottom:1px solid currentColor;padding-block:4px;display:inline-block}
.text-link:hover{color:var(--accent-dark)}

/* ---------- Gift collections: two large cards ---------- */
.home-gifts{list-style:none;margin:0 0 24px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.gift-card{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);min-height:360px;background:var(--surface);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.gift-media{display:block;position:relative;background:#171b1f;min-height:100%}
.gift-media picture{position:absolute;inset:0;display:block}
.gift-media img{width:100%;height:100%;object-fit:cover;display:block}
.gift-body{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:28px 26px;min-width:0}
.gift-body h3{font-size:clamp(1.55rem,2.2vw,1.95rem);letter-spacing:-.03em}
.gift-body h3 a:hover{color:var(--accent-dark)}
.gift-body p{margin:0;color:var(--muted);line-height:1.65;max-width:36ch}
.gift-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:8px}
.gift-actions .btn{width:auto;min-height:46px;padding-inline:24px}

/* ---------- Other collections and featured builds: photo tiles ---------- */
.home-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.home-tiles-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.home-tiles>li{min-width:0}
.tile{display:flex;flex-direction:column;height:100%;background:var(--surface);border:1px solid var(--line);border-radius:4px;overflow:hidden;transition:border-color .18s}
.tile:hover{border-color:#89949e}
.tile-media{display:block;aspect-ratio:4/3;background:#171b1f;overflow:hidden}
.tile-media picture{display:block;width:100%;height:100%}
.tile-media img{width:100%;height:100%;object-fit:cover;display:block}
.tile h3{font-size:1.15rem;line-height:1.25;margin:16px 16px 8px}
.tile p{font-size:.86rem;line-height:1.55;color:var(--muted);margin:0 16px 14px}
.tile-cta{display:flex;justify-content:space-between;gap:10px;margin:auto 16px 0;padding:12px 0 14px;border-top:1px solid var(--line);font-size:.82rem}

/* ---------- Process and proof ---------- */
.home-process{background:#111519;border-block:1px solid var(--line);padding-block:64px}
.process-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.process-copy h2{font-size:clamp(1.7rem,3vw,2.4rem);letter-spacing:-.03em;line-height:1.1;text-wrap:balance}
.process-lede{margin:12px 0 28px;color:var(--muted);line-height:1.6}
.process-steps{list-style:none;margin:0;padding:0;counter-reset:step;display:grid;gap:0}
.process-steps li{counter-increment:step;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;padding:18px 0;border-top:1px solid var(--line)}
.process-steps li:last-child{border-bottom:1px solid var(--line)}
.process-steps li::before{content:counter(step);grid-row:1 / span 2;font-family:var(--font-display);font-size:1.5rem;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums}
.process-steps h3{font-size:1.08rem;letter-spacing:-.01em;margin:0 0 4px}
.process-steps p{margin:0;color:var(--muted);font-size:.93rem;line-height:1.6;max-width:44ch}
.proof{margin:0;display:grid;gap:14px}
.proof-pair{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.proof-pair>div{position:relative;aspect-ratio:3/4;background:#07090a;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.proof-pair picture{display:block;width:100%;height:100%}
.proof-pair img{width:100%;height:100%;object-fit:cover;display:block}
.proof-pair span{position:absolute;left:10px;bottom:10px;background:rgba(12,14,16,.82);color:var(--ink);font-size:.78rem;font-weight:600;padding:5px 10px;border-radius:3px}
.proof figcaption{color:var(--muted);font-size:.92rem;line-height:1.6;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline}

/* ---------- Closing call to action ---------- */
.home-custom{padding-block:56px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px 40px;align-items:center}
.home-custom h2{font-size:clamp(1.6rem,2.6vw,2.2rem);letter-spacing:-.025em;line-height:1.15;margin:0 0 12px}
.home-custom p{margin:0;max-width:60ch;color:var(--muted);line-height:1.65}
.home-custom-actions{display:flex;flex-wrap:wrap;gap:12px}
.home-custom-actions .btn{width:auto;min-height:48px;padding-inline:24px}

/* ---------- Responsive ---------- */
@media(max-width:1180px){
  .home-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .home-tiles-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:940px){
  .home-gifts{grid-template-columns:1fr}
  .process-grid{grid-template-columns:1fr;gap:40px}
  .home-custom{grid-template-columns:1fr}
}
@media(max-width:760px){
  .home-section{padding-block:40px}
  .home-process{padding-block:44px}
  .home-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .tile h3{margin:12px 12px 6px;font-size:1.05rem}
  .tile p{margin:0 12px 12px;font-size:.82rem}
  .tile-cta{margin-inline:12px}
  .hero-cta .btn{flex:1 1 auto;text-align:center}
}
@media(max-width:560px){
  .gift-card{grid-template-columns:1fr;min-height:0}
  .gift-media{aspect-ratio:4/3;min-height:0}
  .home-tiles,.home-tiles-4{grid-template-columns:1fr}
  .home-tiles .tile-media{aspect-ratio:16/10}
  .gift-actions .btn,.home-custom-actions .btn{flex:1 1 100%;text-align:center}
}
@media(prefers-reduced-motion:reduce){.tile{transition:none}}

/* Nine equal collection tiles (homepage option B) */
.home-tiles-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:760px){.home-tiles-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.home-tiles-3{grid-template-columns:1fr}}

/* Cake topper story: the idea, the print, the finished piece */
.proof-idea img{object-fit:contain;background:#0b0f1a}
@media(max-width:560px){
  .proof-pair{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proof-idea{grid-column:1 / -1;aspect-ratio:1 / 1 !important}
  .proof-idea img{object-fit:cover}
}