/* ===========================================================
   bdesign — Ούτας Χρήστος & ΣΙΑ Ο.Ε.
   Design system + homepage styles
   Aesthetic: editorial showroom — warm stone palette,
   high-contrast serif display + humanist sans, generous
   asymmetric whitespace. Deliberately not "template/AI".
   =========================================================== */

:root {
  /* palette — warm stone, ink, brass */
  --stone-50:  #f7f4ef;
  --stone-100: #efeae1;
  --stone-200: #e2dccf;
  --ink:       #1b1916;
  --ink-soft:  #4a463f;
  --muted:     #837c70;
  --line:      #d9d2c5;
  --brass:     #9b7a4a;
  --brass-dk:  #7c6038;
  --white:     #ffffff;

  --maxw: 1280px;
  --gutter: clamp(1.75rem, 5vw, 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; }
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: brass fill to match the palette instead of stark black */
.site-head .head-cta .btn--solid { background: var(--brass-dk); border-color: var(--brass-dk); color: #fff; }
.site-head .head-cta .btn--solid:hover { background: var(--ink); border-color: var(--ink); }
.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(247,244,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; }
.brand .mark { font-family: var(--serif); font-size: 2.45rem; font-weight: 700; letter-spacing: .005em; }
.brand .mark b { color: var(--brass-dk); font-weight: 700; }
.brand .sub { font-size: .58rem; letter-spacing: .34em; text-transform: uppercase; color: var(--muted); margin-top: .35rem; }

.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(247,244,239,.98); }
}

/* 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:#d4ac74; }
.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:#d4ac74; }
.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 { aspect-ratio: 4/5; object-fit:cover; }
.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-block: clamp(3rem,6vw,5rem) 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:#d4ac74; }
.cat .label .cat-t { font-family:var(--serif); font-weight:500; line-height:1.04; 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; align-self: center; }
.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-block: clamp(4rem,8vw,7rem); 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} }

/* ===========================================================
   BRANDS
   =========================================================== */
.brands { padding-block: clamp(4rem,7vw,6rem); text-align:center; }
.brands .eyebrow { justify-content:center; }
.brands h2 { font-size: clamp(1.7rem,3vw,2.4rem); margin:1rem 0 2.8rem; }
.brand-row { display:grid; grid-template-columns: repeat(6, 1fr); gap: 1.5rem 2.5rem; align-items:center; }
.brand-row .b { display:flex; align-items:center; justify-content:center; padding:1rem; }
.brand-row img { max-height: 52px; width:auto; filter: grayscale(1) contrast(.9) opacity(.62); transition: filter .45s var(--ease), transform .45s var(--ease); }
.brand-row .b:hover img { filter:none; transform: scale(1.05); }
@media (max-width: 860px){ .brand-row{ grid-template-columns: repeat(3,1fr); } }

/* ===========================================================
   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:#d4ac74; }
.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 { 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(4rem,9vw,7rem); }
.custom__panel { max-width: 42rem; }
.custom .eyebrow { color:#d4ac74; }
.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-block: clamp(4.5rem,9vw,8rem); 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); }
.foot-grid .mark { font-family:var(--serif); font-size:1.8rem; color:#fff; }
.foot-grid .mark b { color: var(--brass); }
.brandcell .mark-tag { margin-top:.55rem; font-family:var(--sans); font-size:.62rem; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:rgba(255,255,255,.5); display:flex; align-items:center; gap:.7rem; }
.brandcell .mark-tag::before { content:""; width:26px; height:1px; background:var(--brass); display:inline-block; flex:none; }
.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-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; } }

/* ===========================================================
   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:#d4ac74; }
.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; }
.teff { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,1.6vw,1.6rem); margin-top:clamp(1.6rem,3vw,2.4rem); }
.teff__card { position:relative; display:block; margin:0; border:0; padding:0; width:100%; background:#0f0d0b; font:inherit; text-align:left; cursor:pointer; overflow:hidden; aspect-ratio:2/3; color:#fff; isolation:isolate; }
.teff__cap small { font-weight:400; opacity:.8; margin-left:.45em; }
.teff__cap small::before { content:"· "; }
.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; } }

/* per-effect photo grid (revealed after choosing an effect) */
.teff-bar { display:flex; align-items:baseline; gap:1rem clamp(1rem,2vw,1.6rem); flex-wrap:wrap; margin:clamp(1.4rem,3vw,2.2rem) 0 clamp(1rem,2vw,1.4rem); }
.teff-back { border:1px solid var(--line); background:none; font:inherit; color:var(--ink); cursor:pointer; padding:.5rem .9rem; letter-spacing:.04em; transition:background .2s var(--ease), color .2s var(--ease); }
.teff-back:hover { background:var(--ink); color:#fff; }
.teff-view__title { margin:0; font-size:clamp(1.3rem,2.6vw,1.9rem); }
.teff-view__title small { font-weight:400; font-size:.55em; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin-left:.6em; }
.teff-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
.teff-grid figure { margin:0; overflow:hidden; position:relative; aspect-ratio:4/3; cursor:pointer; }
.teff-grid img { width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.teff-grid figure:hover img { transform:scale(1.06); }
@media (min-width:1100px){ .teff-grid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:820px){ .teff-grid{ grid-template-columns:repeat(2,1fr); } }

/* ===========================================================
   BRANDS GRID (Εταιρίες page)
   =========================================================== */
.brandgrid { padding-block: clamp(3.5rem,7vw,6rem); }
.bg-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.bg-card { background:#fff; border:1px solid var(--line); padding:2rem 1.4rem; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.3rem; aspect-ratio:1/.78; text-align:center; transition:.4s var(--ease); }
.bg-card:hover { border-color:var(--brass); box-shadow:0 18px 44px -30px rgba(0,0,0,.5); transform:translateY(-3px); }
.bg-card img { max-height:58px; width:auto; filter:grayscale(1) opacity(.66); transition:.4s var(--ease); }
.bg-card:hover img { filter:none; }
.bg-card span { font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
@media (max-width:900px){ .bg-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .bg-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .bg-grid{ grid-template-columns:1fr; } .bg-card{ padding:1.6rem 1.2rem; aspect-ratio:auto; min-height:8.5rem; } }

/* ===========================================================
   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); grid-auto-flow:dense; 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; }
/* load-more pagination */
.gal-grid figure.lm-hidden, .teff-grid figure.lm-hidden { display:none; }
.lm-wrap { display:flex; justify-content:center; margin:clamp(1.6rem,3.5vw,2.6rem) 0 0; }
.lm-more { font:inherit; font-size:var(--t-xs); letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  padding:.85em 2em; border:1px solid var(--ink); background:transparent; color:var(--ink); cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease); }
.lm-more:hover { background:var(--ink); color:var(--stone-50); }
/* feature tile: wide establishing shot — taller portrait tile to anchor each scene */
.gal-grid figure.feat { grid-row:span 2; aspect-ratio:auto; }
/* full-width band introducing the general-showroom views */
.gal-sep { grid-column:1/-1; margin:clamp(1.6rem,4vw,3rem) 0 .4rem; }
.gal-sep--top { margin:0 0 clamp(.6rem,1.6vw,1.1rem); }
.gal-sep h2 { font-size:clamp(1.4rem,2.8vw,2.1rem); margin:.3rem 0 .5rem; }
.gal-sep p { color:var(--ink-soft); max-width:60ch; margin:0; }
@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-block: clamp(4rem,8vw,7rem); }
.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: clamp(3rem,6vw,5rem) 0 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; }

/* <picture> wrappers (WebP+JPEG thumbnails) fill their grid cell like the bare <img> did */
.gal-grid picture, .teff-grid picture, .teff__card 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; } }