/* =========================================================
   Gaurav Ink — design tokens
   Palette pulled from the brand mark's ink-swirl gradient,
   each hue doubling as the identity of one ink family.
   ========================================================= */
:root{
  --ink:        #14141b;   /* near-black, body copy / dark sections */
  --paper:      #faf9f6;   /* warm off-white, light sections */
  --paper-dim:  #efeee9;
  --line:       #dedad2;

  --offset:     #2a5ff2;   /* Offset Ink */
  --gravure:    #d6247a;   /* Gravure Printing Inks */
  --flexo:      #f2932e;   /* Flexographic Inks */
  --news:       #545b66;   /* News Ink (newsprint slate) */
  --lamination: #16a35a;   /* Lamination Adhesive */
  --speciality: #7c4fe0;   /* Speciality Inks */

  --font-head: "Bricolage Grotesque Variable", "Space Grotesk", "Arial Narrow", sans-serif;
  --font-body: "Figtree Variable", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Roboto Mono", Menlo, Consolas, monospace;

  --max: 1180px;
  --ease: cubic-bezier(.16,.84,.44,1);
}

@font-face{
  font-family:"Bricolage Grotesque Variable";
  src:url("../fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2-variations"),
      url("../fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");
  font-weight:200 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Figtree Variable";
  src:url("../fonts/figtree-latin-wght-normal.woff2") format("woff2-variations"),
      url("../fonts/figtree-latin-wght-normal.woff2") format("woff2");
  font-weight:300 900; font-style:normal; font-display:swap;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{
  font-family:var(--font-head);
  margin:0 0 .4em;
  line-height:1.12;
  letter-spacing:-0.015em;
  font-weight:600;
}
p{ margin:0 0 1em; }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 28px; }

:focus-visible{ outline:3px solid var(--offset); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(250,249,246,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s ease;
}
.site-header.scrolled{ box-shadow:0 8px 24px -12px rgba(20,20,27,.18); }
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:14px; padding-bottom:14px;
  transition:padding .3s ease;
}
.site-header.scrolled .wrap{ padding-top:9px; padding-bottom:9px; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ height:40px; width:auto; transition:transform .3s var(--ease); }
.brand:hover img{ transform:translateY(-2px); }
.brand-text{ font-family:var(--font-head); font-weight:700; font-size:1.05rem; line-height:1.05; }
.brand-text small{ display:block; font-family:var(--font-body); font-weight:500; font-size:.65rem; letter-spacing:.03em; color:#6a6a70; }

.main-nav ul{ display:flex; gap:28px; list-style:none; margin:0; padding:0; font-weight:500; font-size:.95rem; }
.main-nav a{ position:relative; padding:4px 0; transition:color .25s ease; }
.main-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--flexo),var(--gravure),var(--offset));
  transition:right .3s cubic-bezier(.4,0,.2,1);
}
.main-nav a[aria-current="page"]{ color:var(--gravure); }
.main-nav a:hover{ color:var(--offset); }
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after{ right:0; }
.nav-toggle{ display:none; }

@media (max-width:760px){
  .main-nav{
    position:absolute; top:100%; left:0; right:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; transition:max-height .25s ease;
  }
  .main-nav.open{ max-height:340px; }
  .main-nav ul{ flex-direction:column; gap:0; padding:10px 28px 18px; }
  .main-nav li{ border-top:1px solid var(--line); }
  .main-nav a{ display:block; padding:12px 0; }
  .nav-toggle{
    display:block; background:none; border:1px solid var(--line);
    border-radius:6px; padding:8px 10px; font-size:1rem; cursor:pointer;
  }
}

/* ---------- buttons / tags ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; position:relative; overflow:hidden;
  padding:13px 24px; border-radius:5px; font-weight:600; font-size:.95rem;
  border:2px solid var(--ink); cursor:pointer; font-family:var(--font-body);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
}
.btn::after{
  content:""; position:absolute; top:0; left:-60%; width:35%; height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-20deg); transition:left .65s ease; pointer-events:none;
}
.btn:hover::after{ left:130%; }
.btn:hover{ transform:translateY(-2px); }
.btn-solid{ background:var(--ink); color:var(--paper); }
.btn-solid:hover{ background:var(--gravure); border-color:var(--gravure); box-shadow:0 14px 28px -12px rgba(214,36,122,.5); }
.btn-outline{ background:transparent; color:var(--ink); }
.btn-outline:hover{ border-color:var(--gravure); color:var(--gravure); box-shadow:0 14px 28px -14px rgba(20,20,27,.25); }

.tag-row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:22px; }
.tag{
  display:inline-flex; align-items:center; gap:8px;
  font:600 .78rem/1 var(--font-body); padding:7px 14px 7px 11px; border-radius:100px;
  color:#fff; letter-spacing:.02em; text-transform:uppercase;
}
.tag.swatch{
  background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.4);
}
.tag.swatch::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--fam,#fff); flex:none; }
/* on light backgrounds (legal/product cards) swap to a paper-toned chip */
.tag.swatch.on-paper{ background:var(--paper-dim); color:var(--ink); border-color:var(--line); }
.overline{
  display:block; font:600 .78rem/1 var(--font-mono); text-transform:uppercase; letter-spacing:.09em;
  color:rgba(255,255,255,.7); margin-bottom:18px;
}
.overline b{ color:#fff; font-weight:700; }
.section-head .overline, .legal-body .overline{ color:var(--gravure); margin-bottom:10px; }

/* ---------- hero: full-bleed picture + colour tint, copy centred on top ---------- */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  min-height:clamp(540px, 80vh, 780px); padding:96px 0;
  color:#fff; text-align:center; background:var(--ink);
}
.hero-bg{ position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center; }
.hero-tint{ position:absolute; inset:0; z-index:-1; }
.hero .wrap{ position:relative; width:100%; display:flex; flex-direction:column; align-items:center; }
.hero h1{ font-size:clamp(2.3rem, 5.4vw, 4.1rem); max-width:17ch; margin:0 auto .45em; color:#fff; text-wrap:balance; }
.hero .lede{ font-size:1.15rem; max-width:60ch; margin:0 auto; color:rgba(255,255,255,.9); }
.hero .tag-row{ justify-content:center; }
.hero-cta{ display:flex; justify-content:center; gap:14px; margin-top:30px; flex-wrap:wrap; }

/* buttons that sit on the dark picture */
.hero .btn-solid{ background:#fff; color:var(--ink); border-color:#fff; }
.hero .btn-solid:hover{ background:var(--gravure); border-color:var(--gravure); color:#fff; }
.hero .btn-outline{ color:#fff; border-color:rgba(255,255,255,.75); }
.hero .btn-outline:hover{ background:rgba(255,255,255,.14); border-color:#fff; color:#fff; box-shadow:none; }

/* lighter gradient so the accent word stays readable over the picture */
.hero .grad-text{ background-image:linear-gradient(90deg,#ffb347,#ff5fa8 60%,#ff8ad0); }

/* Home — ink-in-water picture, near-black tint with a warm magenta glow behind the copy */
.hero--home .hero-bg{ background-image:url(../img/hero-home.jpg); }
.hero--home .hero-tint{
  background:
    radial-gradient(70% 90% at 50% 50%, rgba(214,36,122,.18), transparent 72%),
    linear-gradient(180deg, rgba(14,14,20,.50), rgba(14,14,20,.68));
}

/* About — CMYK halftone print picture, deep-blue tint, shorter banner; stats overlap its lower edge */
.hero--about .hero-bg{ background-image:url(../img/photos/IMG_3571.jpg); background-position:center 60%; }
.hero--about .hero-tint{ background:linear-gradient(180deg, rgba(12,24,74,.74), rgba(10,18,56,.86)); }

/* Contact — no suitable wide photo without baked-in text, so a calm gradient (like the legal pages) */
.hero--contact{ background:linear-gradient(135deg,#1c1430,#0e2830); }
.hero--contact .hero-bg{ display:none; }
.hero--contact .hero-tint{ background:linear-gradient(135deg, rgba(38,20,86,.35), rgba(8,40,52,.45)); }

/* Products — its own picture, warm amber/magenta tint */
.hero--products .hero-bg{ background-image:url(../img/photos/gaurav-inks-slider-1.png); background-position:center 40%; }
.hero--products .hero-tint{
  background:
    radial-gradient(65% 85% at 50% 40%, rgba(242,147,46,.16), transparent 72%),
    linear-gradient(180deg, rgba(12,16,24,.58), rgba(10,14,20,.78));
}

/* Ink-family pages — each family gets its own picture + a tint in its ink colour */
.hero--fam .hero-bg{ background-image:var(--hero-img); background-position:center; }
.hero--fam .hero-tint{ background:linear-gradient(180deg, rgb(var(--tint) / var(--a1,.66)), rgb(var(--tint) / var(--a2,.84))); }
.hero--f-offset{     --hero-img:url(../img/hero-offset.jpg);     --tint:10 22 76; }
.hero--f-gravure{    --hero-img:url(../img/hero-gravure.jpg);    --tint:60 8 36; }
.hero--f-flexo{      --hero-img:url(../img/hero-flexo.jpg);      --tint:66 30 4; }
.hero--f-news{       --hero-img:url(../img/hero-news.jpg);       --tint:20 24 32; --a1:.78; --a2:.88; }
.hero--f-lamination{ --hero-img:url(../img/hero-lamination.jpg); --tint:4 44 28; }
.hero--f-speciality{ --hero-img:url(../img/hero-speciality.jpg); --tint:36 18 84; }
.hero--fam .tag-row{ margin-bottom:16px; }
.hero--fam h1{ max-width:20ch; }
.hero--fam .lede{ max-width:56ch; }
.crumb{ display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; margin-bottom:20px; font-size:.86rem; color:rgba(255,255,255,.72); }
.crumb a{ color:rgba(255,255,255,.88); transition:color .2s ease; }
.crumb a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }

/* Used on plain/light sections (not a dark hero) — e.g. the single product page. */
.crumb--dark{ color:#6a6a70; }
.crumb--dark a{ color:#3c3c42; }
.crumb--dark a:hover{ color:var(--ink); }

/* Gallery — teal/amber ink picture */
.hero--gallery .hero-bg{ background-image:url(../img/photos/G1.jpg); }
.hero--gallery .hero-tint{ background:linear-gradient(180deg, rgba(4,36,44,.60), rgba(4,26,32,.82)); }

/* 404 — home picture, dark tint, oversized code */
.hero--404 .hero-bg{ background-image:url(../img/hero-home.jpg); background-position:center 60%; }
.hero--404 .hero-tint{ background:linear-gradient(180deg, rgba(14,14,20,.66), rgba(14,14,20,.84)); }
.err-code{
  font-family:var(--font-head); font-weight:700; line-height:.9; letter-spacing:-.04em;
  font-size:clamp(5.5rem, 18vw, 11rem); margin:0 0 10px;
}

/* Legal pages — no picture: calm ink-dark banner with the brand stripe along the bottom */
.hero--legal{ background:linear-gradient(135deg,#14141b,#22222f); }
.hero--legal::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:4px;
  background:linear-gradient(90deg,var(--flexo),var(--gravure),var(--offset));
}
.legal-meta{ margin:14px 0 0; font-size:.85rem; color:rgba(255,255,255,.62); }

.hero--short{ min-height:clamp(340px, 46vh, 470px); padding:72px 0; }
.hero--about{ padding-bottom:140px; }

.grad-text{
  background:linear-gradient(90deg,var(--flexo),var(--gravure) 50%,var(--offset) 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* .mark — a hand-set highlighter stroke behind a word, instead of a rainbow text-fill.
   Colour comes from --fam where one is in scope, else falls back to gravure. */
.mark{ position:relative; white-space:nowrap; z-index:0; }
.mark::before{
  content:""; position:absolute; z-index:-1; left:-.09em; right:-.07em; bottom:.02em; height:.34em;
  background:var(--fam, var(--gravure)); opacity:.4; border-radius:2px 8px 4px 9px;
  transform:rotate(-1deg);
}
.hero .mark{ color:#fff; }
.hero .mark::before{ opacity:.55; }

.hero-fade-in{ animation:heroFadeUp .8s cubic-bezier(.16,.84,.44,1) both; }
@keyframes heroFadeUp{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

@media (max-width:560px){
  .hero{ min-height:480px; padding:64px 0; }
  .hero--short{ min-height:320px; padding:56px 0; }
  .hero--about{ padding-bottom:110px; }
  .hero .lede{ font-size:1.02rem; }
}

/* ---------- stat strip ---------- */
.stat-strip{ background:var(--ink); color:var(--paper); padding:60px 0; }
.stat-strip .wrap{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:28px; }
.stat-strip.inset{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:28px;
  border-radius:6px; padding:44px 40px;
  box-shadow:0 30px 60px -28px rgba(20,20,27,.55);
}
.stat{ border-left:4px solid var(--flexo); padding-left:20px; transition:transform .3s ease; }
.stat:hover{ transform:translateY(-3px); }
.stat b{
  display:block; font-family:var(--font-head); font-weight:700;
  font-size:clamp(2.6rem, 5vw, 4.2rem); line-height:1; letter-spacing:-.025em; white-space:nowrap;
  font-variant-numeric:tabular-nums; margin-bottom:10px;
  background:linear-gradient(90deg,var(--flexo),var(--gravure) 60%,var(--offset));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* label only — direct child span, so the counting number inside <b> keeps its big gradient style */
.stat > span{ display:block; font-size:.95rem; color:#c7c6cb; }
.stat:nth-child(2){ border-color:var(--gravure); }
.stat:nth-child(3){ border-color:var(--offset); }
.stat:nth-child(4){ border-color:var(--lamination); }
@media (max-width:760px){
  .stat-strip .wrap, .stat-strip.inset{ grid-template-columns:1fr 1fr; gap:32px 20px; }
  .stat-strip.inset{ padding:34px 24px; }
  .stat{ padding-left:14px; }
}

/* ---------- generic section ---------- */
.section{ padding:76px 0; }
.section-dim{ background:var(--paper-dim); }
.section-ink{ background:var(--ink); color:var(--paper); }
.section-head{ max-width:60ch; margin-bottom:40px; }
.section-head h2{ font-size:clamp(1.6rem,3vw,2.3rem); }
.section-head h2::after{
  content:""; display:block; width:52px; height:4px; margin-top:14px; border-radius:2px;
  background:linear-gradient(90deg,var(--flexo),var(--gravure),var(--offset));
}
.section-head p{ color:#4a4a50; font-size:1.05rem; }
.section-ink .section-head p{ color:#c7c6cb; }

/* ---------- ink families ---------- */
.family-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.family-card{
  background:var(--paper); border:1px solid var(--line); border-left:5px solid var(--fam,var(--offset));
  padding:24px 22px; border-radius:3px;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.family-card:hover{ transform:translateY(-6px); box-shadow:0 18px 34px -18px rgba(20,20,27,.28); border-color:var(--fam,var(--offset)); }
.family-card .dot{ transition:transform .3s ease; }
.family-card:hover .dot{ transform:scale(1.4); }
.family-card h3{ font-size:1.15rem; margin-bottom:8px; }
.family-card p{ font-size:.94rem; color:#4a4a50; margin-bottom:0; }
.family-card .dot{ width:10px; height:10px; border-radius:50%; background:var(--fam,var(--offset)); display:inline-block; margin-bottom:12px; }
@media (max-width:860px){ .family-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .family-grid{ grid-template-columns:1fr; } }

/* ---------- about blurb / split ---------- */
.split{ display:grid; grid-template-columns:1.2fr .8fr; gap:52px; align-items:start; }
.split .lede{ font-size:1.1rem; }
.fact-list{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.fact-list li{ display:flex; gap:12px; padding:14px; background:var(--paper); border:1px solid var(--line); border-radius:4px; font-size:.92rem; transition:transform .25s ease, box-shadow .25s ease; }
.fact-list li:hover{ transform:translateX(4px); box-shadow:0 10px 22px -16px rgba(20,20,27,.3); }
.fact-list b{ color:var(--gravure); }
@media (max-width:860px){ .split{ grid-template-columns:1fr; } }

/* ---------- portfolio grid ---------- */
.portfolio-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.portfolio-card{
  border:1px solid var(--line); border-radius:3px; padding:20px 18px; background:var(--paper);
  border-top:4px solid var(--accent);
  transition:transform .3s ease, box-shadow .3s ease;
}
.portfolio-card:hover{ transform:translateY(-6px); box-shadow:0 18px 34px -18px rgba(20,20,27,.26); }
.portfolio-card h3{ font-size:1rem; margin-bottom:8px; letter-spacing:.005em; }
.portfolio-card p{ font-size:.88rem; color:#54545a; margin-bottom:0; }
@media (max-width:960px){ .portfolio-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .portfolio-grid{ grid-template-columns:1fr; } }

/* ---------- family card as a link (Products hub) ---------- */
a.family-card{ display:block; }
.family-card .go{
  display:inline-flex; align-items:center; gap:6px; margin-top:14px;
  font-size:.85rem; font-weight:600; color:var(--fam,var(--offset));
}
.family-card .go svg{ width:14px; height:14px; transition:transform .25s ease; }
a.family-card:hover .go svg{ transform:translateX(3px); }

/* ---------- product card (fuller than portfolio-card: intro + feature list) ---------- */
.product-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.product-card{
  border:1px solid var(--line); border-radius:6px; padding:26px 26px 24px; background:var(--paper);
  border-top:4px solid var(--accent); transition:transform .3s ease, box-shadow .3s ease;
}
.product-card:hover{ transform:translateY(-5px); box-shadow:0 18px 34px -18px rgba(20,20,27,.26); }
.product-card .fam-label{ font-size:.76rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; display:block; }
.product-card h3{ font-size:1.12rem; margin-bottom:6px; }
.product-card .tagline{ font-size:.9rem; color:#6a6a70; margin-bottom:14px; }
.product-card p.intro{ font-size:.92rem; color:#4a4a50; margin-bottom:16px; }
.spec-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.spec-list li{ display:flex; gap:9px; align-items:flex-start; font-size:.87rem; color:#3c3c42; }
.spec-list li::before{
  content:""; flex:none; width:6px; height:6px; margin-top:7px; border-radius:50%; background:var(--accent);
}
@media (max-width:860px){ .product-grid{ grid-template-columns:1fr; } }


/* ---------- ink-family pages ---------- */
.family-page .fact-list b{ color:var(--fam); }
.family-page .section-head h2::after{ background:var(--fam); }
.page-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:26px; }

.benefit-grid{ --cols:3; display:flex; flex-wrap:wrap; gap:20px; }
.benefit-grid.cols-1{ --cols:1; } .benefit-grid.cols-2{ --cols:2; } .benefit-grid.cols-3{ --cols:3; } .benefit-grid.cols-4{ --cols:4; }
/* each card takes 1/cols of the row; a short last row stretches to fill it (5 items -> 3 + 2) */
.benefit-grid > .benefit{ flex:1 1 calc((100% - (var(--cols) - 1) * 20px) / var(--cols) - 1px); min-width:0; }
@media (max-width:960px){ .benefit-grid.cols-3, .benefit-grid.cols-4{ --cols:2; } }
@media (max-width:560px){ .benefit-grid.cols-2, .benefit-grid.cols-3, .benefit-grid.cols-4{ --cols:1; } }
.benefit{
  background:var(--paper); border:1px solid var(--line); border-top:4px solid var(--fam);
  border-radius:4px; padding:24px 22px;
  transition:transform .3s ease, box-shadow .3s ease;
}
.benefit:hover{ transform:translateY(-4px); box-shadow:0 16px 30px -18px rgba(20,20,27,.28); }
.benefit h3{ font-size:1.05rem; margin-bottom:8px; }
.benefit p{ font-size:.92rem; color:#4a4a50; margin-bottom:0; }

.chip-list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  display:inline-flex; align-items:center; gap:9px; padding:10px 18px;
  background:#fff; border:1px solid var(--line); border-radius:100px;
  font-size:.94rem; font-weight:500; transition:transform .25s ease, border-color .25s ease;
}
.chip::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--fam); flex:none; }
.chip:hover{ transform:translateY(-2px); border-color:var(--fam); }

.series-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.series-card{
  background:var(--paper); border:1px solid var(--line); border-top:4px solid var(--fam);
  border-radius:6px; padding:26px 26px 18px;
  transition:transform .3s ease, box-shadow .3s ease;
}
.series-card:hover{ transform:translateY(-5px); box-shadow:0 18px 34px -18px rgba(20,20,27,.26); }
.series-card .badge{
  display:inline-block; margin-bottom:12px; padding:4px 12px; border-radius:100px;
  font-family:var(--font-head); font-weight:700; font-size:.82rem; letter-spacing:.01em;
  color:#fff; background:var(--fam);
}
.series-card h3{ font-size:1.3rem; margin-bottom:8px; }
.series-card > p{ font-size:.94rem; color:#4a4a50; }
.spec-rows{ margin:16px 0 0; }
.spec-rows > div{ display:grid; grid-template-columns:96px 1fr; gap:14px; padding:10px 0; border-top:1px solid var(--line); font-size:.88rem; }
.spec-rows dt{ color:#6a6a70; font-weight:500; }
.spec-rows dd{ margin:0; color:#2b2b31; }
@media (max-width:860px){ .series-grid{ grid-template-columns:1fr; } }
@media (max-width:420px){ .spec-rows > div{ grid-template-columns:1fr; gap:2px; } }

.family-nav{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
@media (max-width:1000px){ .family-nav{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .family-nav{ grid-template-columns:1fr; } }
.family-nav a{
  display:flex; align-items:center; gap:10px; padding:15px 14px 15px 16px; height:100%;
  background:#fff; border:1px solid var(--line); border-left:5px solid var(--fam); border-radius:3px;
  font-family:var(--font-head); font-weight:600; font-size:.95rem; transition:transform .25s ease, box-shadow .25s ease;
}
.family-nav a:hover{ transform:translateY(-3px); box-shadow:0 14px 26px -18px rgba(20,20,27,.3); }
.family-nav .dot{ width:10px; height:10px; border-radius:50%; background:var(--fam); flex:none; }
.family-nav .fam-name{ flex:1; line-height:1.25; }
.family-nav svg{ width:16px; height:16px; color:var(--fam); transition:transform .25s ease; }
.family-nav a:hover svg{ transform:translateX(3px); }


/* ---------- legal / policy pages ---------- */
.legal-layout{ display:grid; grid-template-columns:240px minmax(0,1fr); gap:64px; align-items:start; }
.legal-toc{ position:sticky; top:96px; font-size:.9rem; }
.legal-toc b{ display:block; font-family:var(--font-head); font-size:.95rem; margin-bottom:12px; }
.legal-toc ol{ list-style:none; margin:0; padding:0; border-left:2px solid var(--line); }
.legal-toc a{ display:block; padding:6px 0 6px 14px; margin-left:-2px; border-left:2px solid transparent; color:#4a4a50; transition:color .2s ease, border-color .2s ease; }
.legal-toc a:hover{ color:var(--gravure); border-left-color:var(--gravure); }
.legal-body{ max-width:72ch; }
.legal-body h2{ font-size:1.35rem; margin:2.2em 0 .6em; scroll-margin-top:96px; }
.legal-body h2:first-child{ margin-top:0; }
.legal-body p, .legal-body li{ color:#34343a; }
.legal-body ul{ margin:0 0 1em; padding-left:1.2em; display:grid; gap:8px; }
.legal-body a{ color:var(--offset); text-decoration:underline; text-underline-offset:3px; }
.legal-body a:hover{ color:var(--gravure); }
.legal-address{ font-style:normal; padding:18px 20px; background:var(--paper-dim); border-left:4px solid var(--gravure); border-radius:3px; line-height:1.8; }
@media (max-width:900px){
  .legal-layout{ grid-template-columns:1fr; gap:28px; }
  .legal-toc{ position:static; }
  .legal-toc ol{ columns:2; column-gap:24px; border-left:none; }
  .legal-toc a{ border-left:none; padding:5px 0; margin-left:0; }
}
@media (max-width:520px){ .legal-toc ol{ columns:1; } }
.consent a{ color:var(--offset); text-decoration:underline; text-underline-offset:2px; }

/* ---------- gallery ---------- */
.g-filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px; }
.g-filter{
  padding:9px 20px; border:1px solid var(--line); border-radius:100px; background:#fff;
  font:600 .9rem var(--font-body); color:var(--ink); cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.g-filter:hover{ border-color:var(--ink); }
.g-filter[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:#fff; }

.gallery-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.g-item[hidden]{ display:none; }
.g-open{
  position:relative; display:block; width:100%; padding:0; border:0; background:var(--paper-dim);
  aspect-ratio:4/3; overflow:hidden; border-radius:4px; cursor:zoom-in; text-align:left;
}
.g-open img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.16,.84,.44,1); }
.g-open:hover img, .g-open:focus-visible img{ transform:scale(1.05); }
.g-cap{
  position:absolute; left:0; right:0; bottom:0; padding:34px 16px 14px;
  font-weight:600; font-size:.95rem; color:#fff;
  background:linear-gradient(to top, rgba(10,10,16,.78), transparent);
}
.g-cap small{ display:block; font-weight:500; font-size:.78rem; opacity:.8; }
.gallery-empty{ padding:48px 24px; text-align:center; background:var(--paper-dim); border-radius:4px; color:#4a4a50; }
.gallery-empty a{ color:var(--offset); text-decoration:underline; }
@media (max-width:900px){ .gallery-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .gallery-grid{ grid-template-columns:1fr; } }

.lightbox{
  position:fixed; inset:0; z-index:3000; display:flex; align-items:center; justify-content:center;
  padding:56px 76px; background:rgba(8,8,12,.94);
}
.lightbox[hidden]{ display:none; }
.lb-figure{ margin:0; max-width:min(100%, 1200px); text-align:center; }
.lb-img{ max-width:100%; max-height:78vh; width:auto; height:auto; margin:0 auto; border-radius:3px; }
.lb-caption{ margin-top:14px; color:#e7e6ea; font-size:.95rem; }
.lb-btn{
  position:absolute; width:46px; height:46px; display:grid; place-items:center; border:0; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff; cursor:pointer; transition:background .2s ease;
}
.lb-btn:hover{ background:rgba(255,255,255,.26); }
.lb-btn:focus-visible{ outline:3px solid #fff; outline-offset:2px; }
.lb-btn svg{ width:22px; height:22px; }
.lb-close{ top:16px; right:16px; }
.lb-prev{ left:16px; top:50%; transform:translateY(-50%); }
.lb-next{ right:16px; top:50%; transform:translateY(-50%); }
@media (max-width:600px){
  .lightbox{ padding:64px 12px 72px; }
  .lb-prev, .lb-next{ top:auto; bottom:14px; transform:none; }
  .lb-prev{ left:calc(50% - 56px); } .lb-next{ right:calc(50% - 56px); }
}

/* ---------- application grid ---------- */
.app-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.app-card{ background:var(--paper); padding:26px 22px; transition:background .3s ease, transform .3s ease; position:relative; z-index:0; }
.app-card:hover{ background:#fff; transform:translateY(-3px); z-index:1; box-shadow:0 16px 30px -20px rgba(20,20,27,.3); }
.app-card h3{ font-size:1rem; margin-bottom:8px; }
.app-card p{ font-size:.88rem; color:#54545a; margin-bottom:0; }
@media (max-width:860px){ .app-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .app-grid{ grid-template-columns:1fr; } }

/* ---------- faq ---------- */
.faq{ max-width:820px; }
.faq details{ border-bottom:1px solid var(--line); padding:18px 14px; border-radius:6px; transition:background .3s ease, padding .3s ease; }
.faq details[open]{ background:var(--paper-dim); }
.faq summary{ font-family:var(--font-head); font-weight:600; font-size:1.05rem; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-size:1.4rem; color:var(--gravure); flex:none; display:inline-block; transition:transform .3s ease; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ margin-top:12px; color:#4a4a50; max-width:70ch; animation:faqOpen .35s ease; }
@keyframes faqOpen{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

/* ---------- cta band ---------- */
.cta-band{
  background:linear-gradient(120deg,var(--gravure),var(--speciality),var(--offset),var(--gravure));
  background-size:300% 300%;
  animation:ctaShift 12s ease infinite;
  color:#fff; padding:56px 0;
}
@keyframes ctaShift{ 0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } }
@media (prefers-reduced-motion: reduce){ .cta-band{ animation:none; } }
.cta-band .wrap{ display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
.cta-band h2{ font-size:clamp(1.5rem,2.6vw,2rem); max-width:26ch; margin:0; }
.cta-band .btn{ border-color:#fff; background:#fff; color:var(--gravure); }
.cta-band .btn:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }

/* ---------- footer ---------- */
.site-footer{ background:var(--ink); color:#c7c6cb; padding:52px 0 26px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px; margin-bottom:34px; }
.footer-grid h4{ color:#fff; font-size:.95rem; margin-bottom:14px; }
.footer-grid p, .footer-grid a{ font-size:.9rem; color:#a9a8ad; }
.footer-grid a:hover{ color:#fff; }
.footer-grid ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.footer-bottom a{ color:#c7c6cb; font-weight:600; border-bottom:1px solid #4a4a54; transition:color .2s ease, border-color .2s ease; }
.footer-bottom a:hover{ color:#fff; border-color:var(--gravure); }
.footer-bottom{ border-top:1px solid #2a2a32; padding-top:20px; font-size:.82rem; color:#7c7b81; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr; } }

/* ---------- about page pieces ---------- */
.pillar-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.pillar{ padding:26px 22px; background:var(--paper); border:1px solid var(--line); border-radius:3px; }
.pillar b.k{ display:block; font-family:var(--font-head); font-size:.82rem; letter-spacing:.02em; color:var(--offset); margin-bottom:10px; }
.pillar p{ font-size:.94rem; color:#4a4a50; margin-bottom:0; }
@media (max-width:860px){ .pillar-grid{ grid-template-columns:1fr; } }

.director-strip{ display:flex; gap:24px; flex-wrap:wrap; margin-top:8px; }
.director{ display:flex; gap:12px; align-items:center; padding:14px 18px; background:var(--paper); border:1px solid var(--line); border-radius:4px; }
.director .initials{ width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:700; color:#fff; flex:none; }
.director b{ display:block; font-size:.92rem; }
.director span{ font-size:.8rem; color:#6a6a70; }

/* ---------- contact page ---------- */
.contact-layout{ display:grid; grid-template-columns:.85fr 1.15fr; gap:32px; align-items:start; }
.contact-cards{ display:grid; gap:18px; }

.info-card{
  display:flex; gap:18px; align-items:flex-start;
  padding:24px 24px 24px 22px; background:#fff;
  border:1px solid var(--line); border-left:5px solid var(--accent,var(--offset)); border-radius:4px;
  transition:transform .3s ease, box-shadow .3s ease;
}
.info-card > div{ min-width:0; }         /* flex children don't shrink below content size by default — this was causing mobile overflow */
.info-card .body{ overflow-wrap:anywhere; }
.info-card:hover{ transform:translateY(-4px); box-shadow:0 18px 34px -18px rgba(20,20,27,.28); }
.info-card .ico{
  flex:none; width:48px; height:48px; border-radius:12px;
  display:grid; place-items:center;
  color:var(--accent,var(--offset)); background:#f1efe9;
  background:color-mix(in srgb, var(--accent,var(--offset)) 12%, #fff);
}
.info-card .ico svg{ width:22px; height:22px; }
.info-card h3{ font-size:1.05rem; margin-bottom:8px; }
.info-card .body{ font-size:.95rem; color:#3c3c42; line-height:1.65; }
.info-card .body a{ display:inline-block; padding:1px 0; transition:color .2s ease; }
.info-card .body a:hover{ color:var(--accent,var(--offset)); text-decoration:underline; text-underline-offset:3px; }
.info-card .more{ display:inline-block; margin-top:10px; font-weight:600; font-size:.88rem; color:var(--accent,var(--offset)); }
.info-card .more:hover{ text-decoration:underline; text-underline-offset:3px; }

.form-card{ background:var(--paper); border:1px solid var(--line); padding:32px; border-radius:4px; }
.form-card h3{ font-size:1.25rem; margin-bottom:6px; }
.form-card .sub{ color:#4a4a50; font-size:.95rem; margin-bottom:22px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:6px; }
.field input, .field textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:4px;
  font-family:var(--font-body); font-size:.95rem; background:#fff; color:var(--ink);
}
.field input:focus, .field textarea:focus{ border-color:var(--offset); }
.field.has-error input, .field.has-error textarea{ border-color:var(--gravure); background:#fdf3f7; }
.field-error{ display:none; margin:6px 0 0; font-size:.82rem; color:var(--gravure); }
.field.has-error .field-error{ display:block; }
.consent.has-error + .field-error{ display:block; }
.consent.has-error span{ color:var(--gravure); }
.consent{ display:flex; gap:10px; font-size:.82rem; color:#4a4a50; align-items:flex-start; margin-bottom:20px; }
.consent input{ margin-top:3px; }
.form-note{ padding:14px 16px; border-radius:4px; font-size:.9rem; margin-bottom:20px; }
.form-note.success{ background:#e7f6ec; color:#166534; border:1px solid #b7e4c7; }
.form-note.error{ background:#fdecec; color:#991b1b; border:1px solid #f3c2c2; }

/* map */
.map-frame{
  position:relative; width:100%; height:clamp(340px, 46vw, 480px);
  border:1px solid var(--line); border-radius:4px; overflow:hidden; background:var(--paper-dim);
  box-shadow:0 24px 48px -30px rgba(20,20,27,.4);
}
.map-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.map-foot{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-top:16px; font-size:.92rem; color:#4a4a50; }
.map-foot a{ font-weight:600; color:var(--offset); }
.map-foot a:hover{ text-decoration:underline; text-underline-offset:3px; }

@media (max-width:860px){ .contact-layout{ grid-template-columns:1fr; } .form-card{ padding:24px 20px; } }

/* ---------- scroll-reveal utilities ---------- */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1);
}
.reveal.in{ opacity:1; transform:none; }

.reveal-stagger > *{
  opacity:0; transform:translateY(22px);
  transition:opacity .6s cubic-bezier(.16,.84,.44,1), transform .6s cubic-bezier(.16,.84,.44,1);
}
.reveal-stagger.in > *{ opacity:1; transform:none; }
.reveal-stagger.in > *:nth-child(1){ transition-delay:.04s; }
.reveal-stagger.in > *:nth-child(2){ transition-delay:.09s; }
.reveal-stagger.in > *:nth-child(3){ transition-delay:.14s; }
.reveal-stagger.in > *:nth-child(4){ transition-delay:.19s; }
.reveal-stagger.in > *:nth-child(5){ transition-delay:.24s; }
.reveal-stagger.in > *:nth-child(6){ transition-delay:.29s; }
.reveal-stagger.in > *:nth-child(n+7){ transition-delay:.34s; }

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-stagger > *{ opacity:1; transform:none; transition:none; }
}

/* =========================================================
   Interactive components
   ========================================================= */

/* ---------- section index number ("01 / 06") — a print-shop signature ---------- */
.section-head{ position:relative; }
.section-head .idx{
  display:block; font:600 .8rem/1 var(--font-mono); color:var(--gravure);
  letter-spacing:.06em; margin-bottom:10px;
}
.dotted{
  background-image:radial-gradient(var(--line) 1.4px, transparent 1.4px);
  background-size:16px 16px;
}

/* ---------- ink-glow: a soft light that follows the pointer inside a hero ---------- */
.ink-glow{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(480px 480px at var(--x,50%) var(--y,32%), rgba(255,255,255,.18), transparent 62%);
}
@media (max-width:700px){ .ink-glow{ display:none; } }

/* ---------- press selector (home): tabs that swap one panel instead of six cards ---------- */
.press-select{ display:grid; gap:28px; }
.press-tabs{
  display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin:0; padding:0;
}
.press-tab{
  display:inline-flex; align-items:center; gap:9px; padding:11px 18px;
  background:#fff; border:1px solid var(--line); border-radius:100px; cursor:pointer;
  font:600 .92rem var(--font-body); color:#5a5a60; transition:all .25s var(--ease);
}
.press-tab .dot{ width:9px; height:9px; border-radius:50%; background:var(--fam); flex:none; transition:transform .25s var(--ease); }
.press-tab:hover{ border-color:var(--fam); color:var(--ink); }
.press-tab[aria-selected="true"]{
  background:var(--ink); border-color:var(--ink); color:#fff;
}
.press-tab[aria-selected="true"] .dot{ transform:scale(1.3); }

.press-panels{ position:relative; }
.press-panel{
  display:grid; grid-template-columns:1fr 1.15fr; gap:0; align-items:stretch;
  background:#fff; border:1px solid var(--line); border-radius:8px; overflow:hidden;
  animation:panelIn .45s var(--ease) both;
}
.press-panel[hidden]{ display:none; }
@keyframes panelIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.press-panel-media{ position:relative; min-height:260px; }
.press-panel-media .ph{ height:100%; border-radius:0; aspect-ratio:auto; }
.press-panel-media .ph img{ height:100%; }
.press-panel-body{ padding:38px 40px; display:flex; flex-direction:column; align-items:flex-start; gap:14px; justify-content:center; }
.press-panel-body h3{ font-size:1.7rem; }
.press-panel-body p{ color:#4a4a50; margin-bottom:6px; }
.press-panel-body .tag{ background:var(--fam); }
@media (max-width:820px){
  .press-panel{ grid-template-columns:1fr; }
  .press-panel-media{ min-height:200px; }
  .press-panel-body{ padding:28px 26px; }
}

/* ---------- applications rail: drag / scroll-snap photo strip ---------- */
.rail-wrap{ position:relative; }
.rail{
  display:flex; gap:16px; margin:0; padding:6px 2px 18px; list-style:none;
  overflow-x:auto; scroll-snap-type:x proximity; scroll-padding-left:2px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; cursor:grab;
}
.rail.dragging{ cursor:grabbing; scroll-snap-type:none; }
.rail::-webkit-scrollbar{ display:none; }
.rail-item{ flex:0 0 auto; width:200px; scroll-snap-align:start; }
.rail-item .ph{ border-radius:6px; }
.rail-cap{ display:block; margin-top:10px; font-weight:600; font-size:.9rem; }
.rail-arrow{
  position:absolute; top:calc(50% - 26px); width:44px; height:44px; z-index:2;
  display:grid; place-items:center; border-radius:50%; border:1px solid var(--line);
  background:#fff; cursor:pointer; box-shadow:0 10px 22px -12px rgba(20,20,27,.3);
  transition:transform .2s ease, opacity .2s ease;
}
.rail-arrow:hover{ transform:translateY(-50%) scale(1.06); }
.rail-arrow[disabled]{ opacity:0; pointer-events:none; }
.rail-prev{ left:-22px; } .rail-next{ right:-22px; }
.rail-arrow svg{ width:18px; height:18px; }
@media (max-width:700px){ .rail-arrow{ display:none; } .rail-item{ width:168px; } }

/* ---------- ink finder (products page): pick a substrate, see matches ---------- */
.finder{
  background:var(--ink); color:#fff; border-radius:10px; padding:44px 40px;
  background-image:radial-gradient(600px 260px at 15% 0%, rgba(214,36,122,.35), transparent 60%),
                    radial-gradient(600px 260px at 100% 100%, rgba(42,95,242,.35), transparent 60%);
}
.finder h2{ color:#fff; font-size:1.6rem; margin-bottom:6px; }
.finder .sub{ color:rgba(255,255,255,.7); margin-bottom:24px; max-width:52ch; }
.finder-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.finder-chip{
  padding:10px 18px; border-radius:100px; border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.06); color:#fff; font:600 .92rem var(--font-body); cursor:pointer;
  transition:all .2s ease;
}
.finder-chip:hover{ border-color:#fff; }
.finder-chip[aria-pressed="true"]{ background:#fff; color:var(--ink); border-color:#fff; }
.finder-result{
  margin-top:26px; padding-top:26px; border-top:1px solid rgba(255,255,255,.18);
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:14px;
  animation:panelIn .35s var(--ease) both;
}
.finder-result[hidden]{ display:none; }
.finder-hit{
  display:block; padding:16px 18px; border-radius:6px; background:rgba(255,255,255,.07);
  border-left:4px solid var(--hue, #fff); transition:background .2s ease, transform .2s ease;
}
.finder-hit:hover{ background:rgba(255,255,255,.13); transform:translateY(-2px); }
.finder-hit b{ display:block; font-family:var(--font-head); font-size:1.02rem; margin-bottom:3px; }
.finder-hit span{ display:block; font-size:.85rem; color:rgba(255,255,255,.72); }

/* ---------- photo slots: real image, or a friendly crop-mark placeholder ---------- */
.ph{
  position:relative; width:100%; aspect-ratio:var(--r, 4/3); overflow:hidden;
  border-radius:4px; background:var(--paper-dim);
}
.ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ph--empty{
  display:flex; align-items:center; justify-content:center; padding:18px; text-align:center;
  background:
    linear-gradient(135deg, transparent 48%, color-mix(in srgb, var(--c,#999) 30%, transparent) 49%, color-mix(in srgb, var(--c,#999) 30%, transparent) 51%, transparent 52%),
    color-mix(in srgb, var(--c, #999) 7%, var(--paper-dim));
  border:1.5px dashed color-mix(in srgb, var(--c,#999) 45%, var(--line));
}
.ph--empty::before, .ph--empty::after{ content:""; position:absolute; width:16px; height:16px; border:2px solid color-mix(in srgb, var(--c,#999) 55%, var(--line)); }
.ph--empty::before{ top:8px; left:8px; border-right:0; border-bottom:0; }
.ph--empty::after{ bottom:8px; right:8px; border-left:0; border-top:0; }
.ph-tag{ display:flex; flex-direction:column; gap:2px; }
.ph-tag b{ font:600 .82rem var(--font-body); color:var(--ink); }
.ph-tag i{ font:600 .76rem var(--font-mono); font-style:normal; color:color-mix(in srgb, var(--c,#999) 70%, var(--ink)); }
.ph-tag small{ font-size:.7rem; color:#7a7a80; }

/* ---------- accordion product cards (native <details>) ---------- */
.pcard-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:16px; }
.pcard{
  border:1px solid var(--line); border-top:4px solid var(--accent, var(--gravure));
  border-radius:6px; background:#fff; padding:22px 22px 8px; transition:box-shadow .25s ease, transform .25s ease;
}
.pcard:hover{ box-shadow:0 16px 30px -20px rgba(20,20,27,.3); }
.pcard-top{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.pcard h3{ font-size:1.08rem; margin-bottom:4px; }
.pcard .tagline{ font-size:.86rem; color:#6a6a70; margin-bottom:12px; }
.pcard .chips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.pcard .chip-sm{
  font:600 .72rem var(--font-body); padding:4px 10px; border-radius:100px;
  background:var(--paper-dim); color:#54545a;
}
.pcard summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px;
  padding:12px 0; font:600 .86rem var(--font-body); color:var(--accent, var(--gravure));
  border-top:1px solid var(--line); margin-top:6px;
}
.pcard summary::-webkit-details-marker{ display:none; }
.pcard summary::after{ content:"+"; margin-left:auto; font-size:1.1rem; transition:transform .2s ease; }
.pcard[open] summary::after{ transform:rotate(45deg); }
.pcard .pcard-body{ padding-bottom:16px; }
.pcard .pcard-body ul{ margin:0; padding-left:1.15em; display:grid; gap:6px; font-size:.88rem; color:#3c3c42; }
.pcard .pcard-link{ display:inline-block; margin-top:10px; font-size:.84rem; font-weight:600; color:var(--accent, var(--gravure)); }

/* filter chip row (products page) */
.filter-row{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:26px; }
.filter-chip{
  padding:9px 16px; border-radius:100px; border:1px solid var(--line); background:#fff;
  font:600 .87rem var(--font-body); cursor:pointer; transition:all .2s ease;
}
.filter-chip:hover{ border-color:var(--ink); }
.filter-chip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:#fff; }
.pcard[hidden]{ display:none; }

.detail-block{ margin-bottom:44px; }
.detail-block:last-child{ margin-bottom:0; }
.detail-block h3{ font-size:1.2rem; margin-bottom:8px; }
.detail-block .block-intro{ color:#5a5a60; font-size:.95rem; margin-bottom:18px; }
.tabset-panel.split{ display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:start; }
@media (max-width:820px){ .tabset-panel.split{ grid-template-columns:1fr; } }

/* ---------- content tabs (family pages): swap panels instead of stacking sections ---------- */
.tabset{ display:grid; gap:0; }
.tabset-nav{ display:flex; flex-wrap:wrap; gap:6px; border-bottom:1px solid var(--line); margin-bottom:32px; }
.tabset-btn{
  padding:13px 6px; margin-right:22px; background:none; border:0; border-bottom:2px solid transparent;
  font:600 1rem var(--font-head); color:#8a8a90; cursor:pointer; transition:color .2s ease, border-color .2s ease;
}
.tabset-btn:hover{ color:var(--ink); }
.tabset-btn[aria-selected="true"]{ color:var(--ink); border-color:var(--fam); }
.tabset-panel{ animation:panelIn .35s var(--ease) both; }
.tabset-panel[hidden]{ display:none; }

/* ---------- accordion (about "what we do" pillars) ---------- */
.acc{ border-top:1px solid var(--line); }
.acc-item{ border-bottom:1px solid var(--line); }
.acc-item summary{
  list-style:none; cursor:pointer; padding:20px 4px; display:flex; align-items:center; gap:16px;
  font-family:var(--font-head); font-weight:600; font-size:1.08rem;
}
.acc-item summary::-webkit-details-marker{ display:none; }
.acc-item summary .n{ font:600 .82rem var(--font-mono); color:var(--gravure); flex:none; }
.acc-item summary::after{ content:"+"; margin-left:auto; font-size:1.3rem; color:#9a9aa0; transition:transform .25s ease; }
.acc-item[open] summary::after{ transform:rotate(45deg); }
.acc-item .acc-body{ padding:0 4px 22px 42px; color:#4a4a50; max-width:66ch; }

/* ---------- timeline strip (about) ---------- */
.timeline{ display:flex; gap:0; overflow-x:auto; padding:8px 2px 14px; scrollbar-width:none; }
.timeline::-webkit-scrollbar{ display:none; }
.t-step{ flex:0 0 220px; position:relative; padding:28px 24px 0 0; }
.t-step::before{ content:""; position:absolute; top:0; left:0; right:24px; height:3px; background:var(--line); }
.t-step.is-on::before{ background:var(--gravure); }
.t-step::after{ content:""; position:absolute; top:-4px; left:0; width:11px; height:11px; border-radius:50%; background:var(--gravure); }
.t-step b{ display:block; font-family:var(--font-mono); color:var(--gravure); font-size:.85rem; margin-bottom:6px; }
.t-step p{ margin:0; font-size:.92rem; color:#4a4a50; }

/* ---------- director cards ---------- */
.people-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.people-grid.cols-3{ grid-template-columns:repeat(3,1fr); gap:16px; }
.people-card{ border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#fff; }
.people-card .ph{ border-radius:0; }
.people-card .pc-body{ padding:18px 20px; }
.people-card h3{ font-size:1.05rem; margin-bottom:2px; }
.people-card .role{ font-size:.85rem; color:var(--gravure); font-weight:600; }
@media (max-width:700px){ .people-grid.cols-3{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .people-grid{ grid-template-columns:1fr; } .people-grid.cols-3{ grid-template-columns:1fr; } }

/* ---------- fine paper-grain overlay for a less flat, more crafted feel ---------- */
body::before{
  content:""; position:fixed; inset:0; z-index:2147483000; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- WhatsApp links on the Contact page (brand-green accents) ---------- */
.info-card .wa-link{ display:inline-flex; align-items:center; gap:6px; }
.info-card .wa-link svg{ width:15px; height:15px; flex:none; color:#25d366; }