/* ===========================================================
   evolv — Ούτας Χρήστος & ΣΙΑ Ο.Ε. (custom fabrication)
   Design system + page styles. Sibling of bdesign — same
   construction logic & type, deliberately DIFFERENT palette:
   industrial / material-forward — cool concrete-grey neutrals,
   graphite ink, one patinated-bronze accent. Kept in the same
   family as bdesign for kinship; not identical. Not "template/AI".
   =========================================================== */

:root {
  /* palette — cool concrete, graphite, patinated bronze */
  --stone-50:  #f1f1ef;   /* pale cool concrete (bg) */
  --stone-100: #e7e6e2;
  --stone-200: #d5d3cc;
  --ink:       #17181a;   /* graphite near-black (cooler than bdesign's warm ink) */
  --ink-soft:  #44464a;
  --muted:     #7a7c80;
  --line:      #d2d1cb;
  --brass:     #8f7850;   /* patinated bronze accent — cooler/greener than bdesign brass */
  --brass-dk:  #6c5a3a;
  --bronze:    #cdb085;   /* lighter bronze for text/eyebrows on dark sections */
  --white:     #ffffff;

  --maxw: 1280px;
  --gutter: clamp(1.25rem, 4vw, 4rem);

  --serif: "Cormorant Garamond", "GFS Didot", Georgia, serif;
  --sans:  "Commissioner", "Helvetica Neue", Arial, sans-serif;

  --t-xs: .72rem;
  --t-sm: .86rem;
  --t-base: 1.02rem;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset-ish ---------- */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--ink);
  background: var(--stone-50);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

h1,h2,h3 { font-family: var(--serif); font-weight: 500; line-height: 1.04; margin: 0; letter-spacing: .005em; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

/* small-caps eyebrow label */
.eyebrow {
  font-size: var(--t-xs);
  letter-spacing: .28em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brass-dk);
  display: inline-flex; align-items: center; gap: .7em;
}
.eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--brass); display: inline-block; }
.nowrap { white-space: nowrap; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--sans); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  padding: .95em 1.7em; border: 1px solid var(--ink); color: var(--ink);
  border-radius: 4px;
  background: transparent; transition: all .35s var(--ease);
}
.btn:hover { background: var(--ink); color: var(--stone-50); }
.btn--solid { background: var(--ink); color: var(--stone-50); }
.btn--solid:hover { background: var(--brass-dk); border-color: var(--brass-dk); }
.btn--light { border-color: rgba(255,255,255,.6); color: #fff; }
.btn--light:hover { background: #fff; color: var(--ink); border-color: #fff; }
/* header CTA: subtle outline (black text, no fill) — fills ink on hover */
.site-head .head-cta .btn--solid { background: transparent; border-color: var(--ink); color: var(--ink); }
.site-head .head-cta .btn--solid:hover { background: var(--ink); border-color: var(--ink); color: var(--stone-50); }
.btn .ar { transition: transform .35s var(--ease); }
.btn:hover .ar { transform: translateX(4px); }

/* ===========================================================
   TOP UTILITY BAR
   =========================================================== */
.topbar {
  background: var(--ink); color: var(--stone-200);
  font-size: var(--t-xs); letter-spacing: .04em;
}
.topbar .wrap { display: flex; justify-content: flex-end; align-items: center; min-height: 38px; gap: 1rem; }
.topbar a:hover { color: #fff; }
.t-right { display: flex; align-items: center; gap: .9rem; }
.t-phone { display: inline-flex; align-items: center; gap: .45em; font-weight: 600; letter-spacing: .03em; }
.t-phone svg { opacity: .8; }
.t-div { width: 1px; height: 14px; background: currentColor; opacity: .25; }
.lang { display: flex; gap: .1rem; align-items: center; }
.lang a { padding: .15rem .45rem; opacity: .55; }
.lang a.is-active { opacity: 1; color: #fff; border-bottom: 1px solid var(--brass); }

/* ===========================================================
   HEADER / NAV
   =========================================================== */
.site-head {
  position: sticky; top: 0; z-index: 60;
  background: rgba(241,241,239,.86); backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.site-head.scrolled { border-color: var(--line); box-shadow: 0 8px 30px -22px rgba(0,0,0,.4); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 98px; transition: min-height .4s var(--ease); }
.site-head.scrolled .wrap { min-height: 74px; }

.brand { display: flex; flex-direction: column; line-height: 1; }
/* inline SVG monogram — letters+frame use currentColor so it themes per context */
.brand-logo { display: block; color: var(--ink); }
.brand-logo svg { display: block; width: auto; }
.brand-logo--head svg { height: 60px; transition: height .4s var(--ease); }
.site-head.scrolled .brand-logo--head svg { height: 48px; }
.brand-logo--drawer svg { height: 58px; }
@media (max-width: 560px){ .brand-logo--head svg { height: 50px; } }

/* horizontal lockup: tight EVOLV monogram | CERAMIC SURFACES tagline */
.brand-lock { display: flex; align-items: center; gap: .8rem; }
.brand-lock .bl-mark { display: block; }
.brand-lock .bl-rule { width: 1px; align-self: stretch; background: currentColor; opacity: .25; }
.brand-lock .bl-sub {
  font-size: .62rem; letter-spacing: .3em; text-transform: uppercase;
  line-height: 1.1; white-space: nowrap; color: var(--ink-soft);
}
.site-head.scrolled .brand-lock { gap: .7rem; }
/* phones: nav links + Showroom button are hidden, so the lockup keeps its
   room — show the tagline, just tighten it on very narrow screens */
@media (max-width: 400px){
  .brand-logo--head.brand-lock { gap: .55rem; }
  .brand-logo--head.brand-lock .bl-rule { display: none; }
  .brand-logo--head.brand-lock .bl-sub { font-size: .54rem; letter-spacing: .2em; }
}

.nav { display: flex; align-items: center; gap: clamp(1.4rem, 3vw, 3.2rem); }
.nav a.navlink {
  font-size: var(--t-sm); letter-spacing: .02em; position: relative; padding: .3rem 0; color: var(--ink-soft);
  transition: color .3s var(--ease);
}
.nav a.navlink::after { content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0; background: var(--brass); transition: width .35s var(--ease); }
.nav a.navlink:hover { color: var(--ink); }
.nav a.navlink:hover::after, .nav a.navlink.is-current::after { width:100%; }
.nav a.navlink--ext { color: var(--brass-dk); font-weight: 600; }
.nav a.navlink--ext::after { background: var(--brass-dk); }
.nav a.navlink--ext .ext-ar { font-size: .82em; vertical-align: 1px; }

.head-cta { display:flex; align-items:center; gap: 1.1rem; }
.phone-link { display:inline-flex; align-items:center; gap:.5em; font-size: var(--t-sm); font-weight:600; letter-spacing:.02em; }
.phone-link svg { color: var(--brass-dk); }

.burger { display:none; width:46px; height:46px; border:1px solid var(--ink); background:var(--ink); align-items:center; justify-content:center; transition: background .3s var(--ease), border-color .3s var(--ease); }
.burger:hover { background: var(--brass-dk); border-color: var(--brass-dk); }
.burger span, .burger span::before, .burger span::after { content:""; display:block; width:22px; height:2px; background:#fff; position:relative; transition:.3s var(--ease); }
.burger span::before { position:absolute; top:-6px; } .burger span::after { position:absolute; top:6px; }

@media (max-width: 1080px){
  .nav { display:none; }
  .burger { display:flex; }
  /* fully opaque on phones — content was visible through the translucent bar while scrolling */
  .site-head { background: rgba(241,241,239,.98); }
}
@media (max-width: 640px){
  /* phones: drop the Showroom button so the logo + burger fit (CTA lives in the drawer + floating call) */
  .site-head .head-cta .btn--solid { display:none; }
}

/* mobile drawer */
.drawer { position:fixed; inset:0; z-index:80; background:var(--stone-50); transform: translateX(100%); transition: transform .45s var(--ease); display:flex; flex-direction:column; padding: 2rem var(--gutter); }
.drawer.open { transform: translateX(0); }
.drawer .d-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:2.5rem; }
.drawer nav { display:flex; flex-direction:column; gap:.3rem; }
.drawer nav a { font-family:var(--serif); font-size:2rem; padding:.5rem 0; border-bottom:1px solid var(--line); }
.drawer nav a.d-ext { color: var(--brass-dk); }
.drawer .d-foot { margin-top:auto; font-size:var(--t-sm); color:var(--muted); }
.d-close { font-size:2rem; background:none; border:none; line-height:1; }

/* ===========================================================
   HERO
   =========================================================== */
.hero { position: relative; min-height: min(92vh, 860px); display:flex; align-items:flex-end; color:#fff; overflow:hidden; }
.hero__img { position:absolute; inset:0; }
.hero__img img { width:100%; height:100%; object-fit:cover; transform: scale(1.06); animation: heroZoom 9s var(--ease) forwards; }
@keyframes heroZoom { to { transform: scale(1); } }
.hero::after { content:""; position:absolute; inset:0; background:
  linear-gradient(90deg, rgba(15,13,11,.62) 0%, rgba(15,13,11,.28) 42%, rgba(15,13,11,0) 70%),
  linear-gradient(0deg, rgba(15,13,11,.55) 0%, rgba(15,13,11,0) 40%); }
.hero .wrap { position:relative; z-index:2; padding-bottom: clamp(3rem, 7vw, 6rem); padding-top: 6rem; width:100%; }
.hero .eyebrow { color:var(--bronze); }
.hero .eyebrow::before { background:#bf935c; }
.hero h1 { font-size: clamp(2.7rem, 6.4vw, 5.6rem); max-width: 16ch; margin:.5em 0 .35em; font-weight:500; }
.hero h1 em { font-style: italic; color:var(--bronze); }
.hero p.lede { font-size: clamp(1.02rem,1.5vw,1.25rem); max-width: 46ch; color: rgba(255,255,255,.86); margin-bottom: 2.2rem; }
.hero__cta { display:flex; gap:1rem; flex-wrap:wrap; }

/* ===========================================================
   reveal animation utility
   =========================================================== */
.reveal { opacity:0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-visible { opacity:1; transform:none; }
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero__img img{animation:none;transform:none}
  html{scroll-behavior:auto}
}

/* ===========================================================
   INTRO / statement
   =========================================================== */
.intro { padding-block: clamp(4.5rem, 9vw, 8rem); }
.intro .grid { display:grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items:center; }
.intro .statement { font-family:var(--serif); font-size: clamp(1.7rem, 3.2vw, 2.7rem); line-height:1.22; font-weight:500; color:var(--ink); }
.intro .statement b { color: var(--brass-dk); font-weight:500; font-style:italic; }
.intro .body { margin-top:1.6rem; color:var(--ink-soft); max-width: 52ch; }
.intro .meta { margin-top:2rem; display:flex; gap:2.5rem; }
.intro .meta .n { font-family:var(--serif); font-size:2.6rem; color:var(--brass-dk); line-height:1; }
.intro .meta .l { font-size:var(--t-xs); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:.4rem; }
.intro .figure { position:relative; }
.intro .figure img { width:100%; aspect-ratio: 4/5; object-fit:cover; display:block; }
.intro .figure .tag { position:absolute; left:-1px; bottom:1.4rem; background:var(--stone-50); color:var(--ink); padding:.7rem 1.2rem; font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase; border:1px solid var(--line); border-left:none; }
@media (max-width: 860px){ .intro .grid{ grid-template-columns:1fr; } .intro .figure{ order:-1; } }

/* ===========================================================
   CATEGORIES — editorial rows
   =========================================================== */
.section-head { display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-bottom: clamp(2rem,4vw,3.2rem); }
.section-head h2 { font-size: clamp(2rem, 4vw, 3.2rem); max-width: 18ch; }
.section-head p { color:var(--muted); max-width: 38ch; font-size:var(--t-sm); }
@media (max-width:720px){ .section-head{ display:block; } .section-head p{ margin-top:1rem; } }

.cats { padding: clamp(3rem,6vw,5rem) 0 clamp(4.5rem,9vw,8rem); }
.cat-grid { display:grid; grid-template-columns: repeat(12, 1fr); gap: 1.1rem; }
.cat { position:relative; overflow:hidden; display:block; color:#fff; isolation:isolate; }
.cat img { width:100%; height:100%; object-fit:cover; transition: transform 1.1s var(--ease); }
.cat::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(15,13,11,.72), rgba(15,13,11,.05) 55%); z-index:1; transition: background .5s; }
.cat:hover img { transform: scale(1.07); }
.cat .label { position:absolute; left:0; bottom:0; z-index:2; padding: clamp(1.2rem,2vw,1.8rem); width:100%; }
.cat .label .k { font-size:var(--t-xs); letter-spacing:.2em; text-transform:uppercase; color:var(--bronze); }
.cat .label h3 { font-size: clamp(1.4rem,2.2vw,2rem); margin-top:.3rem; display:flex; align-items:center; gap:.5em; }
.cat .label .ar { opacity:0; transform:translateX(-6px); transition:.4s var(--ease); }
.cat:hover .label .ar { opacity:1; transform:none; }
.cat--tall { grid-column: span 6; aspect-ratio: 3/3.4; }
.cat--wide { grid-column: span 6; aspect-ratio: 16/10; }
.cat--half { grid-column: span 6; aspect-ratio: 16/9; }
@media (max-width: 720px){ .cat--tall,.cat--wide,.cat--half{ grid-column: span 12; aspect-ratio:16/10; } }

/* ===========================================================
   GALLERY teaser — magazine grid
   =========================================================== */
.feature { padding: clamp(4rem,8vw,7rem) 0; background: var(--stone-100); }
.mason { display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 1.1rem; }
.mason a { overflow:hidden; position:relative; }
.mason img { width:100%; height:100%; object-fit:cover; transition: transform 1s var(--ease), filter .6s; }
.mason a:hover img { transform:scale(1.06); }
.mz-1{ grid-column: span 2; grid-row: span 2; }
.mz-2{ grid-column: span 2; grid-row: span 1; }
.mz-3{ grid-column: span 1; grid-row: span 1; }
.mz-4{ grid-column: span 1; grid-row: span 2; }
@media (max-width: 820px){ .mason{ grid-template-columns: repeat(2,1fr); grid-auto-rows:160px; } .mz-1{grid-column:span 2} }

/* ===========================================================
   SHOWROOM CTA
   =========================================================== */
.showroom { position:relative; color:#fff; }
.showroom .grid { display:grid; grid-template-columns: 1fr 1fr; min-height: 560px; }
.showroom .photo { position:relative; overflow:hidden; }
.showroom .photo img { width:100%; height:100%; object-fit:cover; }
.showroom .panel { background: var(--ink); display:flex; align-items:center; padding: clamp(2.5rem, 6vw, 5.5rem); }
.showroom .panel .inner { max-width: 30rem; }
.showroom .eyebrow { color:var(--bronze); }
.showroom h2 { color:#fff; font-size: clamp(2rem,3.6vw,3rem); margin:1rem 0 1.3rem; }
.showroom p { color: rgba(255,255,255,.74); margin-bottom:1.8rem; }
.showroom .info { display:flex; flex-direction:column; gap:.9rem; margin-bottom:2rem; font-size:var(--t-sm); }
.showroom .info .row { display:flex; gap:.9rem; align-items:flex-start; color:rgba(255,255,255,.9); }
.showroom .info svg { color:var(--brass); flex:none; margin-top:.15rem; }
@media (max-width: 860px){ .showroom .grid{ grid-template-columns:1fr; } .showroom .photo{ min-height:320px; } }

/* ===========================================================
   CUSTOM FABRICATION BAND (evolv)
   =========================================================== */
.custom { position:relative; color:#fff; overflow:hidden; }
.custom__img { position:absolute; inset:0; }
.custom__img img, .custom__vid { width:100%; height:100%; object-fit:cover; }
.custom::after { content:""; position:absolute; inset:0; background:
  linear-gradient(90deg, rgba(15,13,11,.86) 0%, rgba(15,13,11,.6) 50%, rgba(15,13,11,.2) 100%); }
.custom .wrap { position:relative; z-index:2; padding-block: clamp(5.5rem,12vw,9rem); } /* taller band = more video visible; was clamp(4rem,9vw,7rem) */
.custom__panel { max-width: 42rem; }
.custom .eyebrow { color:var(--bronze); }
.custom__panel h2 { color:#fff; font-size: clamp(2rem,4vw,3.2rem); line-height:1.12; margin:.7rem 0 1.1rem; font-weight:500; }
.custom__panel p { color: rgba(255,255,255,.82); max-width: 48ch; margin-bottom: 2rem; }
.custom .btn--solid { background: var(--brass-dk); border-color: var(--brass-dk); color:#fff; }
.custom .btn--solid:hover { background:#fff; border-color:#fff; color: var(--ink); }

/* ===========================================================
   REVIEWS
   =========================================================== */
.reviews { padding: clamp(4.5rem,9vw,8rem) 0; text-align:center; }
.reviews .stars { color: var(--brass); letter-spacing:.2em; font-size:1.3rem; }
.reviews blockquote { font-family:var(--serif); font-style:italic; font-size: clamp(1.5rem,3vw,2.4rem); line-height:1.3; max-width: 24ch; margin: 1.2rem auto 1.4rem; font-weight:500; }
.reviews .who { font-size:var(--t-sm); color:var(--muted); letter-spacing:.04em; }
.reviews .gbadge { margin-top:2.4rem; display:inline-flex; align-items:center; gap:.7rem; font-size:var(--t-sm); border:1px solid var(--line); padding:.7rem 1.3rem; border-radius:4px; transition:border-color .3s var(--ease), background .3s var(--ease); }
.reviews a.gbadge:hover { border-color:var(--brass-dk); background:var(--stone-50); }
.reviews .gbadge b { font-size:1.1rem; }

/* ===========================================================
   FOOTER
   =========================================================== */
.site-foot { background: var(--ink); color: var(--stone-200); padding: clamp(3.5rem,7vw,5.5rem) 0 2rem; }
.foot-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.12); }
.brand-logo--foot { color:#fff; }
.brand-logo--foot svg { height: 96px; }
.foot-grid p { font-size:var(--t-sm); color: rgba(255,255,255,.6); max-width: 32ch; margin-top:1rem; }
.foot-col h4 { font-size:var(--t-xs); letter-spacing:.2em; text-transform:uppercase; color: var(--brass); margin:0 0 1.1rem; font-family:var(--sans); font-weight:700; }
.foot-col a, .foot-col p { display:block; font-size:var(--t-sm); color:rgba(255,255,255,.74); margin-bottom:.6rem; }
.foot-col a:hover { color:#fff; }
.foot-social { display:inline-flex !important; align-items:center; gap:.5rem; margin-top:.4rem; }
.foot-social svg { flex:none; }
.foot-bottom { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-top:1.6rem; font-size:var(--t-xs); color:rgba(255,255,255,.45); flex-wrap:wrap; }
.foot-bottom a { color:rgba(255,255,255,.6); } .foot-bottom a:hover{ color:#fff; }
@media (max-width: 760px){ .foot-grid{ grid-template-columns:1fr 1fr; } .foot-grid .brandcell{ grid-column:1/-1; } }

/* ===========================================================
   floating call / viber
   =========================================================== */
.fab { position:fixed; right:1.1rem; bottom:1.1rem; z-index:70; display:flex; flex-direction:column; gap:.7rem; }
.fab a { width:48px; height:48px; border-radius:50%; /* was 54px */ display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 10px 26px -8px rgba(0,0,0,.5); transition: transform .3s var(--ease); }
.fab a:hover { transform: translateY(-3px) scale(1.05); }
.fab .call { background: var(--brass-dk); }
.fab .viber { background:#7360f2; }
.fab .whatsapp { background:#25d366; }
@media (min-width:981px){ .fab{ right:1.6rem; bottom:1.6rem; } }
/* while the cookie banner is up on phones, lift the floating actions clear of it */
@media (max-width:560px){ body.cookie-open .fab{ bottom:13rem; transition: bottom .5s var(--ease); } }

/* ===========================================================
   cookie banner
   =========================================================== */
.cookie { position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:90; max-width:560px; background:var(--white); border:1px solid var(--line); box-shadow:0 20px 50px -20px rgba(0,0,0,.4); padding:1.3rem 1.4rem; display:flex; gap:1rem; align-items:center; flex-wrap:wrap; transform: translateY(140%); transition: transform .5s var(--ease); }
.cookie.show { transform:none; }
.cookie p { font-size:var(--t-sm); margin:0; color:var(--ink-soft); flex:1 1 240px; }
.cookie p a { text-decoration:underline; }
.cookie .c-act { display:flex; gap:.6rem; }
.cookie .btn { padding:.6em 1.1em; font-size:var(--t-xs); }

/* ===========================================================
   INNER-PAGE HEADER (compact hero band)
   =========================================================== */
.pagehead { position:relative; color:#fff; min-height: clamp(330px, 46vh, 470px); display:flex; align-items:flex-end; overflow:hidden; }
.pagehead__img { position:absolute; inset:0; }
.pagehead__img img { width:100%; height:100%; object-fit:cover; transform:scale(1.05); animation: heroZoom 9s var(--ease) forwards; }
.pagehead::after { content:""; position:absolute; inset:0; background:
  linear-gradient(0deg, rgba(15,13,11,.72), rgba(15,13,11,.12) 72%),
  linear-gradient(90deg, rgba(15,13,11,.5), rgba(15,13,11,0) 58%); }
.pagehead .wrap { position:relative; z-index:2; padding-top:5rem; padding-bottom: clamp(2.2rem,5vw,3.6rem); width:100%; }
.pagehead .eyebrow { color:var(--bronze); }
.pagehead .eyebrow::before { background:#bf935c; }
.pagehead h1 { font-size: clamp(2.4rem,5.2vw,4.1rem); margin:.45em 0 .3em; max-width:18ch; font-weight:500; }
.pagehead p.lede { max-width:48ch; color:rgba(255,255,255,.85); font-size: clamp(1rem,1.5vw,1.18rem); }
.crumb { font-size:var(--t-xs); letter-spacing:.04em; color:rgba(255,255,255,.55); margin-top:1.1rem; }
.crumb a:hover { color:#fff; } .crumb span { opacity:.5; margin:0 .4em; }
@media (prefers-reduced-motion: reduce){ .pagehead__img img{ animation:none; transform:none; } }

/* ===========================================================
   PRODUCTS — editorial alternating rows
   =========================================================== */
.products { padding-block: clamp(4rem,8vw,7rem); }
/* D: tighter catalog rhythm — was gap clamp(2rem,5vw,5rem) / margin-bottom clamp(3.5rem,7vw,6rem) */
.prod { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.6rem,3.5vw,3.2rem); align-items:center; margin-bottom: clamp(2.2rem,4vw,3.5rem); }
.prod:last-child { margin-bottom:0; }
.prod__media { position:relative; overflow:hidden; }
.prod__media img { aspect-ratio:4/3; width:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.prod__media:hover img { transform:scale(1.05); }
.prod__num { font-family:var(--serif); font-size:1.1rem; color:var(--brass-dk); letter-spacing:.1em; }
.prod h2 { font-size:clamp(1.8rem,3.4vw,2.7rem); margin:.35rem 0 1rem; }
.prod p { color:var(--ink-soft); max-width:46ch; }
.prod ul { list-style:none; padding:0; margin:1.4rem 0 0; display:flex; flex-wrap:wrap; gap:.5rem; }
.prod ul li { font-size:var(--t-xs); letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--line); padding:.4rem .85rem; color:var(--ink-soft); }
.prod:nth-child(even) .prod__media { order:2; }
@media (max-width:780px){ .prod{ grid-template-columns:1fr; gap:1.6rem; } .prod:nth-child(even) .prod__media{ order:0; } }

/* tiles category → full-width header + per-effect photo grid */
.prod--tiles { display:block; }
.prod--tiles > div:first-child { max-width:60ch; }
.teff { display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; margin-top:clamp(1.6rem,3vw,2.4rem); }
.teff__card { position:relative; display:block; overflow:hidden; aspect-ratio:3/4; color:#fff; isolation:isolate; }
.teff__card img { width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.teff__card:hover img { transform:scale(1.06); }
.teff__card::after { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(0deg, rgba(15,13,11,.62), rgba(15,13,11,0) 58%); }
.teff__cap { position:absolute; left:0; bottom:0; z-index:2; padding:clamp(.8rem,1.4vw,1.1rem); font-size:var(--t-xs); letter-spacing:.16em; text-transform:uppercase; font-weight:600; }
@media (max-width:760px){ .teff{ grid-template-columns:repeat(2,1fr); gap:.6rem; } }

/* ===========================================================
   GALLERY page — filter + grid + lightbox
   =========================================================== */
.gal { padding-block: clamp(3rem,6vw,5rem) clamp(4rem,8vw,7rem); }
.filters { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-bottom: clamp(2rem,4vw,3rem); }
.filters button { font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; font-weight:600; padding:.62em 1.2em; border:1px solid var(--line); background:transparent; color:var(--ink-soft); transition:.3s var(--ease); }
.filters button.is-active, .filters button:hover { background:var(--ink); color:var(--stone-50); border-color:var(--ink); }
/* D: denser gallery wall — was repeat(3,1fr) / gap 1.1rem (no 4-col tier) */
.gal-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
.gal-grid figure { margin:0; overflow:hidden; position:relative; aspect-ratio:4/3; cursor:pointer; }
.gal-grid img { width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.gal-grid figure:hover img { transform:scale(1.06); }
.gal-grid figure.hide { display:none; }
@media (min-width:1100px){ .gal-grid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:820px){ .gal-grid{ grid-template-columns:repeat(2,1fr); } }

.lb { position:fixed; inset:0; z-index:120; background:rgba(15,13,11,.93); display:none; align-items:center; justify-content:center; padding:2rem; }
.lb.open { display:flex; }
.lb img { max-width:92vw; max-height:86vh; object-fit:contain; box-shadow:0 30px 80px -20px #000; }
.lb__close, .lb__nav { position:absolute; background:none; border:none; color:#fff; opacity:.7; transition:.3s var(--ease); line-height:1; }
.lb__close:hover, .lb__nav:hover { opacity:1; }
.lb__close { top:1.1rem; right:1.5rem; font-size:2.4rem; }
.lb__nav { top:50%; transform:translateY(-50%); padding:1rem 1.2rem; font-size:2.6rem; }
.lb__nav.prev { left:.4rem; } .lb__nav.next { right:.4rem; }

/* ===========================================================
   ABOUT page — story + values
   =========================================================== */
.story { padding-block: clamp(4rem,8vw,7rem); }
.story .grid { display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2rem,6vw,6rem); align-items:center; }
.story .lead { font-family:var(--serif); font-size:clamp(1.7rem,3.2vw,2.6rem); line-height:1.24; max-width:20ch; font-weight:500; color:var(--ink); }
.story .lead b { color:var(--brass-dk); font-style:italic; font-weight:500; }
.story .body { margin-top:1.5rem; color:var(--ink-soft); max-width:54ch; }
.story .body p { margin:0 0 1.1rem; }
.story .figure { position:relative; }
.story .figure img { aspect-ratio:4/5; object-fit:cover; width:100%; }
.story .figure .tag { position:absolute; left:-1px; bottom:1.4rem; background:var(--stone-50); padding:.7rem 1.2rem; font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase; border:1px solid var(--line); border-left:none; }
@media (max-width:860px){ .story .grid{ grid-template-columns:1fr; } .story .figure{ order:-1; } }

.values { background:var(--stone-100); padding: clamp(4rem,8vw,7rem) 0; }
.val-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.6rem,3vw,2.6rem); margin-top: clamp(2rem,4vw,3rem); }
.val { border-top:1px solid var(--line); padding-top:1.4rem; }
.val .vn { font-family:var(--serif); font-size:2.2rem; color:var(--brass-dk); line-height:1; }
.val h3 { font-size:1.45rem; margin:.7rem 0 .55rem; }
.val p { color:var(--ink-soft); font-size:var(--t-sm); margin:0; }
@media (max-width:760px){ .val-grid{ grid-template-columns:1fr; } }

/* ===========================================================
   CONTACT page — form + info + map
   =========================================================== */
.contact { padding-block: clamp(3.5rem,7vw,6rem); }
.contact .grid { display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2.2rem,5vw,4.5rem); align-items:start; }
.form-row { display:grid; gap:1.2rem; }
.form-2 { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.field label { display:block; font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:.45rem; }
.field input, .field textarea { width:100%; font-family:inherit; font-size:var(--t-base); padding:.85rem 1rem; border:1px solid var(--line); background:#fff; color:var(--ink); transition:border-color .3s var(--ease); }
.field input:focus, .field textarea:focus { outline:none; border-color:var(--brass); }
.field textarea { min-height:150px; resize:vertical; }
.hp { position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }
.formnote { font-size:var(--t-sm); padding:.9rem 1.1rem; margin-bottom:1.4rem; }
.formnote.ok { background:#eef5ee; border:1px solid #cfe3cf; color:#2f5d33; }
.formnote.err { background:#f8eded; border:1px solid #e6cccc; color:#7a3030; }
.cinfo .row { display:flex; gap:1rem; padding:1.15rem 0; border-bottom:1px solid var(--line); align-items:flex-start; }
.cinfo .row:first-child { padding-top:0; }
.cinfo .row svg { color:var(--brass-dk); flex:none; margin-top:.2rem; }
.cinfo .lbl { font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:.2rem; }
.cinfo .val a:hover { color:var(--brass-dk); }
.hours { width:100%; border-collapse:collapse; font-size:var(--t-sm); margin-top:.5rem; }
.hours td { padding:.5rem 0; border-bottom:1px solid var(--line); }
.hours tr:last-child td { border-bottom:none; }
.hours td:last-child { text-align:right; color:var(--ink-soft); }
.mapwrap { margin-top: clamp(2.5rem,5vw,4rem); }
.mapwrap iframe { width:100%; height:430px; border:0; filter:grayscale(.25) contrast(1.02); }
@media (max-width:820px){ .contact .grid{ grid-template-columns:1fr; } }

/* ===========================================================
   LEGAL / prose pages
   =========================================================== */
.legal { padding-block: clamp(3rem,6vw,5rem) clamp(4rem,8vw,6.5rem); }
.legal .prose { max-width: 70ch; }
.legal h2 { font-size: clamp(1.4rem,2.6vw,2rem); margin: 2.4rem 0 .8rem; }
.legal h2:first-child { margin-top:0; }
.legal p, .legal li { color:var(--ink-soft); }
.legal p { margin:0 0 1rem; }
.legal ul { padding-left:1.2rem; margin:0 0 1.2rem; }
.legal li { margin-bottom:.4rem; }
.legal a { color:var(--brass-dk); text-decoration:underline; }
.legal .updated { font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:2rem; }

/* ===========================================================
   404
   =========================================================== */
.notfound { min-height:60vh; display:flex; align-items:center; text-align:center; padding-block: clamp(4rem,9vw,8rem); }
.notfound .big { font-family:var(--serif); font-size:clamp(5rem,16vw,11rem); line-height:1; color:var(--brass-dk); }
.notfound h1 { font-size:clamp(1.6rem,3vw,2.4rem); margin:1rem 0 1rem; }
.notfound p { color:var(--ink-soft); max-width:42ch; margin:0 auto 2rem; }

/* ===========================================================
   evolv additions — video hero, placeholders, work hub,
   material band, CTA band, category detail + work gallery
   =========================================================== */
/* video hero (waterjet loop) — reuses .hero (+ its ::after scrim) */
.hero--video { background:#101113; }
.hero__media { position:absolute; inset:0; }
.hero__vid { width:100%; height:100%; object-fit:cover; }

/* dev placeholders — concrete hatch until real photos/video land */
.ph-fill { width:100%; height:100%; min-height:260px;
  background: repeating-linear-gradient(135deg, var(--stone-100) 0 14px, var(--stone-200) 14px 28px); }
.ph-fill--dark { background: repeating-linear-gradient(135deg, #1d1f22 0 14px, #232629 14px 28px); }
.intro .figure .ph-fill { aspect-ratio:4/5; min-height:0; }

/* bare pagehead (no hero image) — dark band */
.pagehead--bare { background:var(--ink); min-height:auto; }
.pagehead--bare::after { display:none; }
.pagehead--bare .wrap { padding-top: clamp(3.4rem,7vw,5.5rem); padding-bottom: clamp(2.2rem,5vw,3.4rem); }

/* video pagehead (Work hub — CNC cut loop); base .pagehead ::after scrim handles legibility */
.pagehead--video { background:#101113; }
.pagehead__media { position:absolute; inset:0; z-index:0; }
.pagehead__vid { width:100%; height:100%; object-fit:cover; }

/* WORK HUB — category cards */
.workhub { padding-block: clamp(3.5rem,7vw,6.5rem); }
.wh-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.6rem); }
.wh-card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); transition:.4s var(--ease); color:var(--ink); }
.wh-card:hover { border-color:var(--brass); box-shadow:0 20px 50px -34px rgba(0,0,0,.55); transform:translateY(-3px); }
.wh-media { position:relative; overflow:hidden; aspect-ratio:4/3; display:block; }
.wh-media img { width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.wh-card:hover .wh-media img { transform:scale(1.05); }
.wh-media--ph { background: repeating-linear-gradient(135deg, var(--stone-100) 0 14px, var(--stone-200) 14px 28px); }
.wh-body { padding: clamp(1.2rem,2vw,1.7rem); }
.wh-k { font-family:var(--serif); font-size:1rem; color:var(--brass-dk); letter-spacing:.1em; }
.wh-body h2, .wh-body h3 { font-size:clamp(1.4rem,2.2vw,1.85rem); margin:.25rem 0 .6rem; display:flex; justify-content:space-between; align-items:center; gap:.5rem; font-weight:500; }
.wh-body .ar { color:var(--brass); transition:transform .35s var(--ease); }
.wh-card:hover .ar { transform:translateX(4px); }
.wh-body p { color:var(--ink-soft); font-size:var(--t-sm); margin:0; }
@media (max-width:900px){ .wh-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .wh-grid{ grid-template-columns:1fr; } }

/* MATERIAL band */
.material { position:relative; color:#fff; overflow:hidden; }
.material__media { position:absolute; inset:0; }
.material__media img, .material__vid { width:100%; height:100%; object-fit:cover; }
.material::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(15,16,18,.84), rgba(15,16,18,.42)); }
.material .wrap { position:relative; z-index:2; padding-block: clamp(5.5rem,12vw,9rem); } /* taller band = more video visible; was clamp(4rem,9vw,7rem) */
.material__panel { max-width:42rem; }
.material .eyebrow { color:var(--bronze); }
.material__panel h2 { color:#fff; font-size:clamp(2rem,4vw,3.2rem); margin:.7rem 0 1.1rem; font-weight:500; }
.material__panel p { color:rgba(255,255,255,.84); max-width:48ch; margin-bottom:2rem; }

/* CTA band */
.ctaband { background:var(--stone-100); padding: clamp(3.5rem,8vw,6rem) 0; text-align:center; }
.ctaband h2 { font-size:clamp(1.9rem,3.6vw,2.8rem); max-width:22ch; margin:0 auto .9rem; }
.ctaband p { color:var(--ink-soft); max-width:54ch; margin:0 auto 1.8rem; }
.cta-row { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* CATEGORY detail intro + work gallery */
.cat-intro { padding-block: clamp(3rem,6vw,5rem); }
.cat-intro .grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,5rem); align-items:start; }
.cat-intro .statement { font-family:var(--serif); font-size:clamp(1.6rem,3vw,2.4rem); line-height:1.24; font-weight:500; color:var(--ink); margin:0; }
.cat-intro .body { color:var(--ink-soft); margin:0; }
@media (max-width:760px){ .cat-intro .grid{ grid-template-columns:1fr; gap:1.1rem; } }

.work-gallery { padding-bottom: clamp(3.5rem,7vw,6rem); }
.wg-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
.wg-tile { position:relative; overflow:hidden; aspect-ratio:4/3; display:block; background:var(--stone-100); }
.wg-tile img { width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.wg-tile:hover img { transform:scale(1.06); }
.wg-tile--ph { background: repeating-linear-gradient(135deg, var(--stone-100) 0 14px, var(--stone-200) 14px 28px); }
.wg-grid .wg-tile.hide { display:none; }
.wg-note { text-align:center; color:var(--muted); font-size:var(--t-sm); margin-top:1.4rem; letter-spacing:.04em; }
@media (min-width:1100px){ .wg-grid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:760px){ .wg-grid{ grid-template-columns:repeat(2,1fr); } }

/* ===== MATERIALS catalogue (3 lines + cut bands + applications) ===== */
.mat-section { padding-block: clamp(3rem,6vw,5rem); }
.mat-head { display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem;
  border-bottom:1px solid var(--line); padding-bottom:1.1rem; margin-bottom: clamp(1.6rem,3vw,2.4rem); }
.mat-head h2 { font-family:var(--serif); font-size:clamp(2rem,4.4vw,3.2rem); font-weight:500; line-height:1; margin:.35rem 0 0; }
.mat-head__meta { font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
@media (max-width:560px){
  .mat-head{ flex-direction:column; align-items:flex-start; gap:.5rem; }
  .mat-head__meta{ white-space:normal; }
}

.mat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap: clamp(.9rem,2vw,1.5rem) clamp(.7rem,1.5vw,1.1rem); }
@media (min-width:560px){ .mat-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:900px){ .mat-grid{ grid-template-columns:repeat(4,1fr); } }
@media (min-width:1240px){ .mat-grid{ grid-template-columns:repeat(5,1fr); } }

.mat-grid figure.hide { display:none; }
.mat-card { margin:0; }
.mat-card__img { display:block; overflow:hidden; aspect-ratio:3/4; background:var(--stone-100); }
.mat-card__img img { width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.mat-card:hover .mat-card__img img { transform:scale(1.05); }
.mat-card figcaption { padding-top:.7rem; }
.mat-card__name { display:block; font-family:var(--serif); font-size:1.06rem; line-height:1.2; color:var(--ink); }
.mat-card__spec { display:block; margin-top:.2rem; font-size:var(--t-xs); letter-spacing:.04em; color:var(--muted); }

/* CNC cut interstitial band */
.mat-cut { position:relative; overflow:hidden; min-height:clamp(380px,60vh,660px); display:flex; align-items:flex-end; background:#101113; color:#fff; } /* taller to show more of the 2.67:1 clip; was clamp(320px,52vh,560px) */
.mat-cut__media { position:absolute; inset:0; z-index:0; }
.mat-cut__vid { width:100%; height:100%; object-fit:cover; }
.mat-cut::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(15,16,18,.82), rgba(15,16,18,.18) 55%, rgba(15,16,18,.30)); }
.mat-cut__cap { position:relative; z-index:2; padding-block: clamp(1.8rem,4vw,3rem); }
.mat-cut__cap .eyebrow { color:var(--bronze); }
.mat-cut__cap .eyebrow::before { background:#bf935c; }
.mat-cut__cap p { font-family:var(--serif); font-size:clamp(1.3rem,2.6vw,2rem); font-weight:500; max-width:30ch; margin:.5rem 0 0; color:rgba(255,255,255,.92); }

/* applications gallery reuses .gal-grid; just spacing */
.mat-apps { padding-block: clamp(3rem,6vw,5rem) clamp(1rem,2vw,2rem); }
.gal-more { display:flex; justify-content:center; margin-top: clamp(1.4rem,3vw,2.2rem); }
.gal-more__btn .ar { transition: transform .3s var(--ease); }

/* <picture> wrappers (WebP+JPEG thumbnails) fill their grid cell like the bare <img> did */
.gal-grid picture, .wg-tile picture, .mat-card__img picture, .wh-media picture { display:block; width:100%; height:100%; }

/* ===========================================================
   A11Y — skip link + visible keyboard focus (2026-07 audit)
   =========================================================== */
.skip { position:absolute; left:-9999px; top:0; z-index:200; background:var(--ink); color:#fff;
  padding:.85rem 1.3rem; font-size:var(--t-sm); letter-spacing:.04em; }
.skip:focus { left:0; }
.gal-grid figure:focus-visible, .teff-grid figure:focus-visible,
a:focus-visible, button:focus-visible { outline:2px solid var(--brass-dk); outline-offset:2px; }

/* ===========================================================
   REVIEWS ROTOR — real Google quotes, gentle crossfade
   =========================================================== */
.rev-rotor .rev { display:none; }
.rev-rotor .rev.is-on { display:block; animation: revFade .8s var(--ease); }
@keyframes revFade { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
/* real quotes run longer than the old one-liner: a touch smaller + wider */
.rev-rotor blockquote { max-width:32ch; font-size: clamp(1.35rem,2.6vw,2.1rem); }
@media (prefers-reduced-motion: reduce){ .rev-rotor .rev.is-on { animation:none; } }