/* ==========================================================================
   RAJESH BASMATI — Design System
   "Editorial Agrarian Modernism": paddy-field contour lines, a single grain
   mark, serif numerals and warm paper tones stand in for photography —
   no stock imagery, no cliché Indian iconography.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* --- colour tokens --- */
  --paper:#FBF7EF;
  --paper-deep:#F2E9D6;
  --paper-line:#EADFC5;
  --charcoal:#211C15;
  --charcoal-soft:#332C22;
  --ink:#211C15;
  --ink-70:rgba(33,28,21,.72);
  --ink-55:rgba(33,28,21,.55);
  --ink-38:rgba(33,28,21,.38);
  --on-dark:#F3ECDA;
  --on-dark-70:rgba(243,236,218,.72);
  --on-dark-45:rgba(243,236,218,.45);
  --gold:#AD8339;
  --gold-bright:#D3AD64;
  --gold-pale:#E7D6A9;
  --gold-deep:#7C5A22;
  --forest:#414A2F;
  --forest-deep:#2B3220;
  --forest-bright:#6C7A4C;
  --terracotta:#A6532E;
  --line:rgba(33,28,21,.14);
  --line-soft:rgba(33,28,21,.08);
  --line-dark:rgba(243,236,218,.18);
  --line-dark-soft:rgba(243,236,218,.1);
  --white:#FFFFFF;
  --shadow:0 30px 60px -30px rgba(33,28,21,.35);
  --shadow-sm:0 12px 28px -16px rgba(33,28,21,.3);

  /* --- type --- */
  --font-display:'Fraunces', ui-serif, Georgia, serif;
  --font-body:'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --fs-hero:clamp(2.6rem, 3.2vw + 1.8rem, 6.2rem);
  --fs-h1:clamp(2.2rem, 2vw + 1.5rem, 3.75rem);
  --fs-h2:clamp(1.8rem, 1.3vw + 1.4rem, 2.6rem);
  --fs-h3:clamp(1.35rem, .6vw + 1.15rem, 1.65rem);
  --fs-h4:clamp(1.1rem, .3vw + 1rem, 1.25rem);
  --fs-lead:clamp(1.1rem, .5vw + 1rem, 1.35rem);
  --fs-body:1.0625rem;
  --fs-small:.925rem;
  --fs-micro:.8rem;
  --fs-eyebrow:.78rem;
  --fs-num:clamp(2.4rem, 2.2vw + 1.6rem, 4.2rem);

  /* --- layout --- */
  --container:1320px;
  --container-narrow:840px;
  --pad-inline:clamp(1.25rem, 5vw, 5rem);
  --section-pad:clamp(4.5rem, 8vw, 8.5rem);
  --radius:2px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4,p,figure{margin:0;}
button{font:inherit;background:none;border:none;cursor:pointer;color:inherit;}
input,select,textarea{font:inherit;color:inherit;}
svg{display:block;}
::selection{background:var(--gold);color:var(--paper);}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}

/* ---------- type helpers ---------- */
h1,h2,h3,.font-display{font-family:var(--font-display);font-weight:500;letter-spacing:-.01em;line-height:1.08;}
h1{font-size:var(--fs-h1);}
h2{font-size:var(--fs-h2);}
h3{font-size:var(--fs-h3);font-weight:500;}
.lead{font-size:var(--fs-lead);line-height:1.55;color:var(--ink-70);font-weight:400;}
.eyebrow{
  font-family:var(--font-body);
  font-size:var(--fs-eyebrow);
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold-deep);
  display:inline-flex;
  align-items:center;
  gap:.7em;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--gold-deep);display:inline-block;}
.eyebrow.on-dark{color:var(--gold-bright);}
.eyebrow.on-dark::before{background:var(--gold-bright);}
.eyebrow.center{justify-content:center;}
.small-caps{font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--ink-55);}

/* ---------- layout ---------- */
.wrap{max-width:var(--container);margin-inline:auto;padding-inline:var(--pad-inline);}
.wrap-narrow{max-width:var(--container-narrow);margin-inline:auto;padding-inline:var(--pad-inline);}
section{position:relative;padding-block:var(--section-pad);}
.section-tight{padding-block:clamp(2.5rem,4vw,4.5rem);}
.bg-paper{background:var(--paper);}
.bg-paper-deep{background:var(--paper-deep);}
.bg-dark{background:var(--charcoal);color:var(--on-dark);}
.bg-forest{background:var(--forest-deep);color:var(--on-dark);}
.bg-dark .ink-70, .bg-forest .ink-70, .page-hero .ink-70, .hero .ink-70{color:var(--on-dark-70);}

.grid{display:grid;gap:clamp(1.5rem,3vw,3rem);}
.grid-2{grid-template-columns:1fr;}
.grid-3{grid-template-columns:1fr;}
.grid-4{grid-template-columns:1fr;}
@media(min-width:720px){
  .grid-2{grid-template-columns:1fr 1fr;}
  .grid-4{grid-template-columns:1fr 1fr;}
}
@media(min-width:980px){
  .grid-3{grid-template-columns:repeat(3,1fr);}
  .grid-4{grid-template-columns:repeat(4,1fr);}
}

.divider{height:1px;background:var(--line);border:0;margin:0;}
.divider.on-dark{background:var(--line-dark);}

/* ---------- reveal-on-scroll ----------
   Progressive enhancement: content is fully visible by default. Only once
   an early inline script confirms JS is running (html.js) do reveal
   elements start hidden, and main.js guarantees they resolve to visible
   either via IntersectionObserver or a safety-net timeout. No-JS and
   slow/failed-script visitors always see full content. */
html.js .reveal:not(.is-visible){opacity:0;transform:translateY(28px);}
.reveal{transition:opacity .9s var(--ease),transform .9s var(--ease);}
.reveal.is-visible{opacity:1;transform:translateY(0);}
.reveal-stagger.is-visible > *{transition-delay:calc(var(--i,0) * 90ms);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--font-body);font-weight:600;font-size:var(--fs-small);
  letter-spacing:.02em;
  padding:.95em 1.7em;
  border-radius:var(--radius);
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
  white-space:nowrap;
}
.btn svg{width:15px;height:15px;transition:transform .35s var(--ease);}
.btn:hover svg{transform:translateX(3px);}
.btn-primary{background:var(--charcoal);color:var(--on-dark);border:1px solid var(--charcoal);}
.btn-primary:hover{background:var(--gold-deep);border-color:var(--gold-deep);}
.btn-gold{background:var(--gold-deep);color:var(--paper);border:1px solid var(--gold-deep);}
.btn-gold:hover{background:var(--charcoal);border-color:var(--charcoal);}
.btn-outline{background:transparent;color:var(--ink);border:1px solid var(--line);}
.btn-outline:hover{border-color:var(--charcoal);}
.btn-outline-dark{background:transparent;color:var(--on-dark);border:1px solid var(--line-dark);}
.btn-outline-dark:hover{border-color:var(--gold-bright);color:var(--gold-bright);}
.btn-ghost{padding:.4em 0;border-bottom:1px solid var(--ink);}
.btn-ghost.on-dark{border-color:var(--on-dark);}
.btn-block{width:100%;justify-content:center;}

/* ---------- nav ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:200;
  padding-block:1.35rem;
  transition:background .4s var(--ease),padding .4s var(--ease),border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.is-solid{
  background:rgba(251,247,239,.92);
  backdrop-filter:blur(10px);
  border-color:var(--line);
  padding-block:.9rem;
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:2rem;}
.brand{display:flex;align-items:center;gap:.7rem;}
.brand svg{width:34px;height:34px;flex:none;}
.brand svg .ink{fill:var(--charcoal);}
.brand svg .ring{stroke:var(--charcoal);}
.brand svg .accent{fill:var(--gold-deep);}
.brand.on-dark svg .ink{fill:var(--on-dark);}
.brand.on-dark svg .ring{stroke:var(--on-dark);}
.brand.on-dark svg .accent{fill:var(--gold-bright);}
.brand-word{font-family:var(--font-display);font-size:1.18rem;letter-spacing:.01em;line-height:1.05;color:var(--charcoal);}
.brand-word small{display:block;font-family:var(--font-body);font-size:.6rem;letter-spacing:.2em;font-weight:600;color:var(--gold-deep);margin-top:.25em;}
.site-header:not(.is-solid) .brand-word,
.site-header:not(.is-solid) .brand-word small{color:var(--on-dark);}
.site-header:not(.is-solid) .brand svg .ink{fill:var(--on-dark);}
.site-header:not(.is-solid) .brand svg .accent{fill:var(--gold-bright);}

.nav-links{display:none;align-items:center;gap:2.1rem;}
.nav-links a{font-size:.9rem;font-weight:500;color:var(--charcoal);position:relative;padding-block:.3rem;}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--gold-deep);transition:right .35s var(--ease);}
.nav-links a:hover::after,.nav-links a.active::after{right:0;}
.nav-links a.active{color:var(--gold-deep);}
.site-header:not(.is-solid) .nav-links a{color:var(--on-dark);}
.site-header:not(.is-solid) .nav-links a::after{background:var(--gold-bright);}
.site-header:not(.is-solid) .nav-links a.active{color:var(--gold-bright);}
.nav-cta{display:none;}
@media(min-width:1080px){
  .nav-links{display:flex;}
  .nav-cta{display:inline-flex;}
}
.nav-toggle{display:flex;flex-direction:column;gap:5px;padding:.5rem;}
.nav-toggle span{width:22px;height:1px;background:currentColor;}
.site-header:not(.is-solid) .nav-toggle{color:var(--on-dark);}
@media(min-width:1080px){.nav-toggle{display:none;}}

.mobile-menu{
  position:fixed;inset:0;z-index:250;background:var(--charcoal);color:var(--on-dark);
  display:flex;flex-direction:column;justify-content:center;
  padding:2rem clamp(1.5rem,6vw,4rem);
  transform:translateY(-100%);transition:transform .5s var(--ease);
}
.mobile-menu.is-open{transform:translateY(0);}
.mobile-menu .close-btn{position:absolute;top:1.5rem;right:clamp(1.5rem,6vw,4rem);font-size:.85rem;letter-spacing:.1em;display:flex;align-items:center;gap:.6rem;}
.mobile-menu ul{display:flex;flex-direction:column;gap:.4rem;}
.mobile-menu a{font-family:var(--font-display);font-size:clamp(1.8rem,7vw,3rem);font-weight:400;padding-block:.28em;display:inline-block;border-bottom:1px solid var(--line-dark-soft);}
.mobile-menu .mm-foot{margin-top:2.5rem;display:flex;flex-direction:column;gap:.6rem;font-size:.9rem;color:var(--on-dark-70);}
.mobile-menu .mm-foot a{border:0;text-decoration:underline;text-underline-offset:3px;font-family:var(--font-body);font-size:.9rem;padding:0;}

/* ---------- hero (no photography — graphic field system) ---------- */
.hero{
  position:relative;min-height:clamp(560px,88svh,860px);display:flex;align-items:flex-end;
  background:var(--charcoal);color:var(--on-dark);overflow:hidden;
}
@media(max-width:640px){.hero{min-height:min(76svh,620px);}}
.hero-field{position:absolute;inset:0;z-index:0;}
.hero-field svg{width:100%;height:100%;}
/* Real photography/video layer, sits above the illustrated fallback. The still photo
   is the reliable base layer (always shown); the video, when it loads, plays on top
   of it. If the video source ever fails, the photo underneath is unaffected and the
   hero never drops back to bare line art. */
.hero-media{position:absolute;inset:0;z-index:0;}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;}
.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:1;background:transparent;}
.hero-gradient{position:absolute;inset:0;background:
  radial-gradient(ellipse 90% 60% at 50% 100%, rgba(173,131,57,.35), transparent 70%),
  linear-gradient(180deg, rgba(33,28,21,.15) 0%, rgba(33,28,21,.55) 62%, rgba(33,28,21,.92) 100%);
  z-index:1;}
.hero-inner{position:relative;z-index:2;width:100%;padding-block:clamp(7rem,14vw,10rem) clamp(3rem,6vw,5rem);}
.hero-kicker{display:flex;align-items:center;gap:.9rem;margin-bottom:1.6rem;color:var(--gold-bright);}
.hero-kicker .rule{width:44px;height:1px;background:var(--gold-bright);}
.hero h1{font-size:var(--fs-hero);max-width:16em;font-weight:400;}
.hero h1 em{font-style:italic;color:var(--gold-bright);}
.hero .lead{color:var(--on-dark-70);max-width:34em;margin-top:1.6rem;}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.6rem;}
.hero-scroll{position:absolute;right:clamp(1.25rem,5vw,5rem);bottom:2.6rem;z-index:2;display:flex;flex-direction:column;align-items:center;gap:.7rem;color:var(--on-dark-45);}
/* decorative only — it crowds the CTAs and clips at the edge on small screens */
@media(max-width:700px){.hero-scroll{display:none;}}
.hero-scroll .line{width:1px;height:52px;background:linear-gradient(var(--gold-bright),transparent);animation:scrollpulse 2.4s ease-in-out infinite;}
@keyframes scrollpulse{0%,100%{opacity:.3}50%{opacity:1}}

.page-hero{
  position:relative;background:var(--charcoal);color:var(--on-dark);
  padding-block:clamp(9rem,14vw,11rem) clamp(4rem,7vw,6rem);overflow:hidden;
}
.page-hero .hero-field{opacity:.55;}
.page-hero-inner{position:relative;z-index:2;}
.page-hero h1{font-size:var(--fs-h1);max-width:18em;}
.breadcrumb{display:flex;gap:.5rem;align-items:center;font-size:var(--fs-micro);color:var(--on-dark-45);margin-bottom:1.6rem;letter-spacing:.04em;text-transform:uppercase;}

/* ---------- stat strip ---------- */
.stat-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.stat-strip .grid{gap:0;}
.stat{padding:2.4rem 1rem;text-align:left;border-left:1px solid var(--line);}
.stat:first-child{border-left:0;}
@media(max-width:719px){.stat{border-left:0;border-top:1px solid var(--line);}.stat:first-child{border-top:0;}}
.stat .num{font-family:var(--font-display);font-size:var(--fs-num);color:var(--charcoal);line-height:1;}
.stat .num .unit{font-size:.42em;font-family:var(--font-body);font-weight:600;color:var(--gold-deep);margin-left:.15em;}
.stat .label{margin-top:.7rem;font-size:var(--fs-small);color:var(--ink-55);max-width:16em;}
.bg-dark .stat .num{color:var(--on-dark);}
.bg-dark .stat .label{color:var(--on-dark-45);}
.bg-dark .stat{border-color:var(--line-dark);}

/* ---------- cards ---------- */
.card{background:var(--paper);border:1px solid var(--line);padding:2.2rem;transition:border-color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease);}
.card:hover{border-color:var(--gold);box-shadow:var(--shadow-sm);transform:translateY(-4px);}
.card .icon{width:38px;height:38px;margin-bottom:1.3rem;color:var(--gold-deep);}

/* pillars */
.pillar{padding-top:2.2rem;border-top:1px solid var(--line);}
.pillar .index{font-family:var(--font-display);font-size:1rem;color:var(--gold-deep);}
.pillar h3{margin-top:1rem;}
.pillar p{margin-top:.85rem;color:var(--ink-70);}

/* ---------- product cards ---------- */
.product-editorial{display:grid;grid-template-columns:1fr;border-top:1px solid var(--line);}
.product-row{display:grid;grid-template-columns:1fr;gap:2rem;padding-block:clamp(2.5rem,5vw,4rem);border-bottom:1px solid var(--line);align-items:start;}
@media(min-width:860px){.product-row{grid-template-columns:.9fr 1.5fr .9fr;gap:3rem;align-items:center;}}
.product-visual{aspect-ratio:4/5;position:relative;overflow:hidden;background:var(--paper-deep);}
.product-visual svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;}
/* Variety imagery is generated at exactly 4:5, so it fills the frame edge-to-edge
   with no crop guesswork. The illustrated motif underneath remains as the fallback
   layer if an image is ever removed. */
.product-visual img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;z-index:2;
}
.product-visual::after{
  content:"";position:absolute;inset:10px;z-index:3;pointer-events:none;
  border:1px solid var(--gold);opacity:.34;
}
.product-name{font-size:clamp(1.8rem,2.4vw,2.5rem);}
.product-tag{margin-top:.6rem;}
.product-desc{margin-top:1.1rem;color:var(--ink-70);max-width:34em;}
.product-meta{display:flex;flex-direction:column;gap:1.4rem;}
.product-meta .mgroup .k{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.1em;color:var(--ink-55);font-weight:600;}
.product-meta .mgroup .v{margin-top:.4rem;font-size:var(--fs-small);line-height:1.6;}
.chip-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.4rem;}
.chip{font-size:var(--fs-micro);padding:.35em .8em;border:1px solid var(--line);color:var(--ink-70);}

/* ---------- process steps ---------- */
.process-list{border-top:1px solid var(--line);}
.process-item{display:grid;grid-template-columns:1fr;gap:1rem;padding-block:2.4rem;border-bottom:1px solid var(--line);}
@media(min-width:760px){.process-item{grid-template-columns:.5fr 3.2fr 4fr;gap:2.5rem;align-items:start;}}
.process-item .pnum{font-family:var(--font-display);font-size:1.6rem;color:var(--gold-deep);}
.process-item h3{font-size:var(--fs-h3);}
.process-item p{margin-top:.6rem;color:var(--ink-70);}

/* ---------- owner feature (large portrait + bio, for named principals) ---------- */
.owner-feature{display:grid;grid-template-columns:1fr;gap:2.2rem;padding-block:3rem;border-top:1px solid var(--line);}
@media(min-width:760px){.owner-feature{grid-template-columns:.8fr 1.2fr;align-items:center;gap:3rem;}}
.owner-feature.reverse{direction:rtl;}
.owner-feature.reverse > *{direction:ltr;}
.owner-photo{
  aspect-ratio:4/5;position:relative;overflow:hidden;
  background:linear-gradient(155deg,var(--paper-deep),var(--cream-dark,var(--paper-deep)) 60%,var(--paper-deep));
  border:1px solid var(--line);
}
.owner-photo::before{content:"";position:absolute;inset:12px;border:1px solid var(--gold);opacity:.5;pointer-events:none;z-index:3;}
.owner-photo img{position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:cover;object-position:center top;}
.owner-photo .monogram{
  position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:clamp(2.8rem,6vw,4.2rem);color:var(--gold-deep);
}
.owner-role{margin-top:.3rem;}
.owner-name{font-size:clamp(1.6rem,2.2vw,2.1rem);}
.owner-bio{margin-top:1rem;color:var(--ink-70);}
.owner-meta{margin-top:1.3rem;display:flex;gap:1.6rem;flex-wrap:wrap;font-size:var(--fs-small);color:var(--ink-55);}

/* ---------- leadership / owner cards ---------- */
.leader-card{text-align:left;}
.leader-photo{
  aspect-ratio:4/5;position:relative;overflow:hidden;
  background:linear-gradient(155deg,var(--paper-deep),var(--cream-dark,var(--paper-deep)) 60%,var(--paper-deep));
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
}
.leader-photo::before{
  content:"";position:absolute;inset:10px;border:1px solid var(--gold);opacity:.5;
}
.leader-photo img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1;}
.leader-photo .monogram{font-family:var(--font-display);font-size:clamp(2.4rem,5vw,3.4rem);color:var(--gold-deep);letter-spacing:.03em;position:relative;z-index:1;}
.leader-card h3{margin-top:1.1rem;font-size:1.3rem;}
.leader-card .role{margin-top:.3rem;}
.leader-card p{margin-top:.8rem;color:var(--ink-70);font-size:var(--fs-small);}

/* ---------- timeline ---------- */
.timeline{position:relative;padding-left:1.6rem;border-left:1px solid var(--line);}
.tl-item{position:relative;padding-bottom:2.6rem;}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{content:"";position:absolute;left:-1.62rem;top:.4rem;width:9px;height:9px;border-radius:50%;background:var(--gold-deep);}
.tl-year{font-family:var(--font-display);font-size:1.3rem;color:var(--gold-deep);}
.tl-item h3{margin-top:.4rem;}
.tl-item p{margin-top:.5rem;color:var(--ink-70);max-width:38em;}

/* ---------- forms ---------- */
.form-field{margin-bottom:1.4rem;}
.form-field label{display:block;font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--ink-55);margin-bottom:.55rem;}
.form-field input,.form-field select,.form-field textarea{
  width:100%;padding:.85em 1em;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  font-size:var(--fs-small);transition:border-color .3s var(--ease);
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:none;border-color:var(--gold-deep);}
.form-field textarea{resize:vertical;min-height:120px;}
.form-row{display:grid;grid-template-columns:1fr;gap:1.2rem 1.4rem;}
@media(min-width:640px){.form-row{grid-template-columns:1fr 1fr;}}
.radio-tabs{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:2.2rem;}
.radio-tabs input{position:absolute;opacity:0;pointer-events:none;}
.radio-tabs label{
  padding:.75em 1.3em;border:1px solid var(--line);font-size:var(--fs-small);font-weight:500;cursor:pointer;
  transition:all .3s var(--ease);
}
.radio-tabs input:checked + label{background:var(--charcoal);border-color:var(--charcoal);color:var(--on-dark);}

/* ---------- footer ---------- */
.site-footer{background:var(--charcoal);color:var(--on-dark);padding-block:clamp(4rem,7vw,6rem) 2rem;}
.footer-top{display:grid;grid-template-columns:1fr;gap:3rem;padding-bottom:3.5rem;border-bottom:1px solid var(--line-dark);}
@media(min-width:860px){.footer-top{grid-template-columns:1.3fr 1fr 1fr 1fr;}}
.footer-brand .brand-word,.footer-brand .brand-word small{color:var(--on-dark);}
.footer-brand p{margin-top:1.2rem;color:var(--on-dark-70);font-size:var(--fs-small);max-width:26em;}
.footer-col h4{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.1em;color:var(--gold-bright);margin-bottom:1.1rem;}
.footer-col ul{display:flex;flex-direction:column;gap:.65rem;}
.footer-col a{font-size:var(--fs-small);color:var(--on-dark-70);transition:color .3s;}
.footer-col a:hover{color:var(--on-dark);}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding-top:1.8rem;font-size:var(--fs-micro);color:var(--on-dark-45);}
.footer-bottom .legal-links{display:flex;gap:1.4rem;flex-wrap:wrap;}

/* ---------- misc ---------- */
.tag-row{display:flex;flex-wrap:wrap;gap:.5rem;}
.pattern-rule{height:1px;background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 12px);}
.quote-block{font-family:var(--font-display);font-size:clamp(1.4rem,2vw,2rem);font-weight:400;font-style:italic;line-height:1.4;max-width:30em;}
.quote-block cite{display:block;font-family:var(--font-body);font-style:normal;font-size:var(--fs-small);color:var(--ink-55);margin-top:1.2rem;}
.badge{display:inline-flex;align-items:center;gap:.5em;font-size:var(--fs-micro);font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:.5em 1em;border:1px solid var(--line);}
.badge.gold{border-color:var(--gold);color:var(--gold-deep);}
.badge.muted{color:var(--ink-55);}
.cols-2-text{columns:1;column-gap:3rem;}
@media(min-width:860px){.cols-2-text{columns:2;}}

.map-region{position:relative;}
.map-region svg{width:100%;height:auto;}
.map-dot{fill:var(--gold);}
.map-label{font-family:var(--font-body);font-size:.7rem;font-weight:600;letter-spacing:.03em;}

.anchor-offset{scroll-margin-top:110px;}

/* ============================================================
   MEDIA SYSTEM
   One rule set governs every image on the site. Each media box
   declares its own aspect-ratio, so the slot occupies its final
   size before the image decodes: no reflow, no collapsed boxes,
   no mismatched heights in a row. All images are self-hosted.
   ============================================================ */
.image-slot{
  position:relative;overflow:hidden;
  background:var(--paper-deep);
  aspect-ratio:16/10;              /* default; overridden per context below */
}
.image-slot > img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  display:block;
}
.image-slot.dark{background:var(--charcoal-soft);}

/* aspect presets — use these instead of inline styles */
.ar-21x9{aspect-ratio:21/9;}
.ar-21x8{aspect-ratio:21/8;}
.ar-16x9{aspect-ratio:16/9;}
.ar-3x2 {aspect-ratio:3/2;}
.ar-4x3 {aspect-ratio:4/3;}
.ar-1x1 {aspect-ratio:1/1;}
.ar-4x5 {aspect-ratio:4/5;}
.ar-3x4 {aspect-ratio:3/4;}
/* very wide banners get taller on narrow screens or they become slivers */
@media(max-width:719px){
  .ar-21x9,.ar-21x8{aspect-ratio:16/9;}
}

.image-caption{margin-top:.7rem;font-size:var(--fs-micro);color:var(--ink-55);}
.bg-dark .image-caption,.bg-forest .image-caption,.page-hero .image-caption{color:var(--on-dark-45);}

/* framed variant — thin gold inner rule, used for feature imagery */
.image-slot.framed::after{
  content:"";position:absolute;inset:10px;z-index:2;pointer-events:none;
  border:1px solid var(--gold);opacity:.42;
}

/* ---------- video ---------- */
.video-frame{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--charcoal-soft);border:1px solid var(--line-dark);}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* ---------- galleries ---------- */
/* Uniform cells. Every tile is the same ratio, so rows always align regardless
   of the source images' native dimensions. */
.gallery-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;}
@media(min-width:760px){.gallery-strip{grid-template-columns:repeat(4,1fr);gap:.9rem;}}
.gallery-strip .image-slot{aspect-ratio:3/4;}

/* editorial 2-up / 3-up media rows */
.media-row{display:grid;grid-template-columns:1fr;gap:1rem;}
@media(min-width:760px){
  .media-row.two{grid-template-columns:repeat(2,1fr);gap:1.2rem;}
  .media-row.three{grid-template-columns:repeat(3,1fr);gap:1.2rem;}
}
.media-row .image-slot{aspect-ratio:4/3;}

/* offset feature pair: one tall, one wide — adds rhythm to long pages */
.media-feature{display:grid;grid-template-columns:1fr;gap:1.2rem;align-items:center;}
@media(min-width:860px){.media-feature{grid-template-columns:1.25fr .75fr;gap:1.8rem;}}
.media-feature .image-slot:first-child{aspect-ratio:3/2;}
.media-feature .image-slot:last-child{aspect-ratio:4/5;}

/* ---------- 360 tour card ---------- */
.tour-card{
  display:flex;align-items:center;gap:1.6rem;padding:1.8rem 2rem;border:1px solid var(--line-dark);
  background:var(--charcoal-soft);transition:border-color .3s var(--ease);
}
.tour-card:hover{border-color:var(--gold);}
.tour-card .ring360{
  flex:none;width:56px;height:56px;border-radius:50%;border:1px solid var(--gold-bright);
  display:flex;align-items:center;justify-content:center;color:var(--gold-bright);font-family:var(--font-display);font-size:.85rem;
}

/* utility */
.mt-0{margin-top:0;}
.center{text-align:center;margin-inline:auto;}
.flex-between{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.gap-sm{gap:.75rem;}
.max-w-content{max-width:60ch;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ---------- brand logomark (real RI mark) ---------- */
.brand .logo-img{height:42px;width:auto;display:block;flex:none;}
@media(max-width:520px){.brand .logo-img{height:34px;}}

/* ---------- person card (real portraits of the directors) ---------- */
.person-card{margin:0;}
.person-card figcaption{margin-top:.9rem;display:flex;flex-direction:column;gap:.15rem;}
.person-name{font-family:var(--font-display);font-size:1.2rem;color:var(--ink);}
.person-role{font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);font-weight:600;}
.bg-dark .person-name,.bg-forest .person-name{color:var(--on-dark);}

/* ---------- spec table (real grain-length data) ---------- */
.spec-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:2.4rem;border:1px solid var(--line);}
.spec-table{width:100%;border-collapse:collapse;font-size:var(--fs-small);min-width:660px;background:var(--paper);}
.spec-table th,.spec-table td{padding:.95rem 1.1rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;}
.spec-table thead th{background:var(--paper-deep);font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.09em;color:var(--ink-70);font-weight:600;white-space:nowrap;}
.spec-table tbody tr:last-child td{border-bottom:0;}
.spec-table tbody tr:hover{background:var(--paper-deep);}
.spec-table .v-name{font-weight:600;color:var(--ink);white-space:nowrap;}
.spec-table .v-len{font-family:var(--font-display);color:var(--gold-deep);white-space:nowrap;}
.spec-note{margin-top:.8rem;font-size:var(--fs-micro);color:var(--ink-55);}

/* ---------- certificate plates ---------- */
.cert-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.2rem;margin-top:2.4rem;}
.cert-plate{background:var(--paper);border:1px solid var(--line);padding:.7rem;}
.cert-plate .image-slot{aspect-ratio:3/4;background:var(--paper-deep);}
.cert-plate figcaption{margin-top:.7rem;font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-55);text-align:center;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ---------- FIX: closed mobile menu must not leak its overflow ----------
   The panel is taller than the viewport, so translateY(-100%) alone left the
   overflowing footer content sitting on top of the header. visibility:hidden
   removes it outright while keeping the slide animation. */
.mobile-menu{overflow-y:auto;visibility:hidden;
  transition:transform .5s var(--ease),visibility 0s linear .5s;}
.mobile-menu.is-open{visibility:visible;transition:transform .5s var(--ease),visibility 0s;}
@media(min-width:1040px){.mobile-menu{display:none;}}

/* ---------- FIX: keep the primary nav on one line beside the real logo ---------- */
.nav-links{gap:1.55rem;}
.nav-links a{white-space:nowrap;}
.brand .logo-img{height:38px;}
.brand-word{font-size:1.1rem;white-space:nowrap;}
.brand-word small{letter-spacing:.14em;}
@media(max-width:1180px){.brand-word{font-size:1rem;}.nav-links{gap:1.25rem;}}

/* ---------- hero scrim: tuned for the real (bright-sky) plant photograph ---------- */
.hero .hero-gradient{background:
  radial-gradient(ellipse 90% 60% at 50% 100%, rgba(173,131,57,.30), transparent 70%),
  linear-gradient(180deg, rgba(33,28,21,.42) 0%, rgba(33,28,21,.30) 26%, rgba(33,28,21,.66) 68%, rgba(33,28,21,.94) 100%);}
.page-hero .hero-gradient{background:
  linear-gradient(180deg, rgba(33,28,21,.72) 0%, rgba(33,28,21,.62) 50%, rgba(33,28,21,.86) 100%);}

/* ---------- logo plate: the mark sits on its own cream badge, because the
     RI letters are white and cannot be knocked out of the paper ---------- */
.brand .logo-img{height:44px;width:auto;border-radius:3px;
  border:1px solid rgba(173,131,57,.30);background:var(--paper);}
@media(max-width:520px){.brand .logo-img{height:36px;}}
.footer-brand .logo-img{height:52px;}

/* ---------- quality-control feature strip ---------- */
.qc-grid{display:grid;grid-template-columns:1fr;gap:1.4rem;margin-top:2.8rem;}
@media(min-width:720px){.qc-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1040px){.qc-grid{grid-template-columns:repeat(4,1fr);gap:1.1rem;}}
.qc-card{background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;}
.bg-dark .qc-card,.bg-forest .qc-card{background:var(--charcoal-soft);border-color:var(--line-dark);}
.qc-card .image-slot{aspect-ratio:4/3;}
.qc-card .qc-body{padding:1.3rem 1.35rem 1.5rem;}
.qc-card .qc-step{font-family:var(--font-display);font-size:.95rem;color:var(--gold-deep);}
.bg-dark .qc-card .qc-step{color:var(--gold-bright);}
.qc-card h3{margin-top:.5rem;font-size:1.08rem;}
.qc-card p{margin-top:.6rem;color:var(--ink-70);font-size:var(--fs-small);}
.bg-dark .qc-card p{color:var(--on-dark-70);}
.bg-dark .qc-card h3{color:var(--on-dark);}

/* ---------- variety range grid ---------- */
.range-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem;margin-top:2.6rem;}
.range-card{border:1px solid var(--line);background:var(--paper);padding:1.4rem 1.5rem;display:flex;flex-direction:column;gap:.5rem;
  transition:border-color .35s var(--ease),transform .35s var(--ease);}
.range-card:hover{border-color:var(--gold);transform:translateY(-3px);}
.range-card .r-name{font-family:var(--font-display);font-size:1.25rem;}
.range-card .r-agl{font-family:var(--font-display);font-size:1.5rem;color:var(--gold-deep);line-height:1;}
.range-card .r-agl small{font-family:var(--font-body);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-55);display:block;margin-top:.35rem;font-weight:600;}
.range-card .r-note{font-size:var(--fs-small);color:var(--ink-70);}
.range-card .r-forms{margin-top:auto;padding-top:.9rem;border-top:1px solid var(--line);font-size:var(--fs-micro);color:var(--ink-55);letter-spacing:.03em;}

/* ==========================================================================
   NARROW / ZOOMED VIEWPORT CONTAINMENT
   At high browser zoom the CSS viewport gets narrow, which was collapsing
   multi-column blocks to a single column and turning each image into a
   full-width slab hundreds of pixels tall. These rules keep the grids
   multi-column much further down, and cap image height when they do stack.
   ========================================================================== */

/* --- quality-control cards: 2-up from small tablets, never one giant column --- */
.qc-grid{grid-template-columns:repeat(2,1fr);gap:1rem;}
@media(min-width:1040px){.qc-grid{grid-template-columns:repeat(4,1fr);gap:1.1rem;}}
@media(max-width:479px){.qc-grid{grid-template-columns:1fr;}}
.qc-card .image-slot{aspect-ratio:4/3;}
@media(max-width:479px){.qc-card .image-slot{aspect-ratio:16/9;}}

/* --- editorial media rows: go multi-column well before desktop --- */
@media(min-width:560px){.media-row.two{grid-template-columns:repeat(2,1fr);gap:1.1rem;}}
@media(min-width:620px){.media-row.three{grid-template-columns:repeat(3,1fr);gap:1.1rem;}}
@media(max-width:559px){.media-row .image-slot{aspect-ratio:16/9;}}

/* --- feature pair --- */
@media(max-width:859px){
  .media-feature .image-slot:first-child{aspect-ratio:16/9;}
  .media-feature .image-slot:last-child{aspect-ratio:3/2;}
}

/* --- gallery tiles must not tower when only two fit per row --- */
@media(max-width:759px){.gallery-strip .image-slot{aspect-ratio:1/1;}}

/* --- director portraits: keep a sane column width once stacked --- */
@media(max-width:759px){
  .owner-photo{max-width:400px;}
  .owner-feature{gap:1.6rem;}
}

/* --- hard ceiling: no single image slab on a stacked layout --- */
@media(max-width:1039px){
  .qc-card .image-slot,
  .media-row .image-slot{max-height:300px;}
}

/* --- product rows: the 4:5 variety photo must not become a 788px slab
       once the three-column row stacks on a narrow/zoomed viewport --- */
@media(max-width:859px){
  .product-visual{max-width:300px;}
  .product-row{gap:1.6rem;}
}

/* --- general ceiling for feature imagery on stacked layouts --- */
@media(max-width:859px){
  section .image-slot:not(.gallery-strip .image-slot):not(.cert-plate .image-slot){max-height:400px;}
}

/* ==========================================================================
   HEADER: always solid.
   The logo is a photographic mark whose own letters are white, so it has to
   sit on a light plate. Over a transparent header that plate read as a pale
   box floating on the hero. A permanently solid header makes the plate and
   the bar the same colour, so only the mark itself is visible.
   ========================================================================== */
.site-header{background:var(--paper);border-bottom:1px solid var(--line);}
.site-header .brand-word{color:var(--charcoal);}
.site-header .brand-word small{color:var(--gold-deep);}
.site-header .nav-links a{color:var(--charcoal);}
.site-header .nav-links a::after{background:var(--gold-deep);}
.site-header .nav-links a.active{color:var(--gold-deep);}
.site-header .nav-toggle{color:var(--charcoal);}
.brand .logo-img{height:46px;border:0;border-radius:2px;background:transparent;}
@media(max-width:520px){.brand .logo-img{height:38px;}}

/* the hero no longer sits under a transparent bar, so it needs less top padding */
.hero-inner{padding-block:clamp(4.5rem,9vw,7rem) clamp(3rem,6vw,5rem);}

/* ---------- video facade: our own still, YouTube only loads on click ---------- */
.video-poster{
  position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;
  cursor:pointer;display:block;background:var(--charcoal-soft);
}
.video-poster img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease),filter .4s var(--ease);}
.video-poster:hover img{transform:scale(1.03);filter:brightness(.85);}
.video-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:76px;height:76px;border-radius:50%;
  background:rgba(33,28,21,.55);border:1px solid var(--gold-bright);
  color:var(--gold-bright);display:flex;align-items:center;justify-content:center;
  transition:background .35s var(--ease),transform .35s var(--ease);
}
.video-poster:hover .video-play{background:var(--gold-deep);color:var(--paper);transform:translate(-50%,-50%) scale(1.06);}
.video-play svg{width:34px;height:34px;margin-left:3px;}
.video-cap{
  position:absolute;left:0;right:0;bottom:1.4rem;text-align:center;
  font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-dark);font-weight:600;
}

/* The base sheet colours header text for a TRANSPARENT bar via
   `.site-header:not(.is-solid) …`, which outranks a plain `.site-header …`
   override. Match that specificity so the solid bar always gets dark text. */
.site-header:not(.is-solid) .brand-word{color:var(--charcoal);}
.site-header:not(.is-solid) .brand-word small{color:var(--gold-deep);}
.site-header:not(.is-solid) .nav-links a{color:var(--charcoal);}
.site-header:not(.is-solid) .nav-links a::after{background:var(--gold-deep);}
.site-header:not(.is-solid) .nav-links a.active{color:var(--gold-deep);}
.site-header:not(.is-solid) .nav-toggle{color:var(--charcoal);}
.site-header:not(.is-solid) .brand svg .ink{fill:var(--charcoal);}
.site-header:not(.is-solid) .brand svg .accent{fill:var(--gold-deep);}

/* ==========================================================================
   HERO = the drone footage. No headline over it.
   With the copy gone the scrim only needs to protect the two buttons, so it
   is pulled right back and the clip reads at full strength.
   ========================================================================== */
.hero .hero-gradient{background:
  linear-gradient(180deg, rgba(33,28,21,.20) 0%, rgba(33,28,21,.06) 30%, rgba(33,28,21,.30) 78%, rgba(33,28,21,.66) 100%);}
.hero-inner{padding-block:0 clamp(2.6rem,5vw,4rem);}
.hero-actions{margin-top:0;}
.hero{min-height:clamp(460px,78svh,760px);}
@media(max-width:640px){.hero{min-height:min(64svh,520px);}}

/* ---------- logo: real transparency now, so no plate and a bigger mark ---------- */
.brand .logo-img{
  height:70px;width:auto;border:0;background:transparent;border-radius:0;
}
@media(max-width:900px){.brand .logo-img{height:58px;}}
@media(max-width:520px){.brand .logo-img{height:48px;}}
.site-header{padding-block:.85rem;}
.brand{gap:.85rem;}
/* .hero is a <section>, so it was inheriting the global section padding —
   that is what held the buttons ~115px clear of the bottom edge. */
.hero{padding-block:0;}

/* ==========================================================================
   HEADER SITS IN THE PAGE, IT NO LONGER HOVERS OVER IT.
   As a fixed bar it covered the top ~100px of the hero, clipping the drone
   footage permanently. Placing it in normal flow means the video starts
   below the bar and plays in full, and the header scrolls away with the page.
   ========================================================================== */
.site-header{position:relative;top:auto;left:auto;right:auto;}

/* inner-page heroes no longer need to clear a floating bar */
.page-hero{padding-block:clamp(3.5rem,6vw,5.5rem) clamp(3.5rem,6vw,5rem);}

/* in-page anchors no longer land under a fixed bar */
.anchor-offset{scroll-margin-top:18px;}

/* ---------- trade-fair gallery ---------- */
.fair-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:2.6rem;}
@media(min-width:760px){.fair-grid{grid-template-columns:repeat(3,1fr);gap:1.2rem;}}
@media(min-width:1100px){.fair-grid{grid-template-columns:repeat(4,1fr);}}
.fair-card{margin:0;background:var(--paper);border:1px solid var(--line);
  transition:border-color .35s var(--ease),transform .35s var(--ease);}
.fair-card:hover{border-color:var(--gold);transform:translateY(-3px);}
.fair-card .image-slot{aspect-ratio:4/3;}
.fair-card figcaption{padding:.85rem 1rem 1rem;}
.fair-card .f-name{font-family:var(--font-display);font-size:1.02rem;color:var(--ink);display:block;}
.fair-card .f-place{display:block;margin-top:.25rem;font-size:var(--fs-micro);letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold-deep);font-weight:600;}
@media(max-width:1039px){.fair-card .image-slot{max-height:300px;}}
.next-steps{margin-top:1rem;padding-left:1.2rem;color:var(--ink-70);font-size:var(--fs-small);line-height:1.9;list-style:decimal;}
.next-steps li{padding-left:.2rem;margin-bottom:.35rem;}
/* square tiles: these are phone photos in mixed orientations, and a landscape
   crop was slicing faces off the portrait ones */
.fair-card .image-slot{aspect-ratio:1/1;}
.fair-card .image-slot img{object-position:center;}
/* photo-only fair grid — no captions */
.fair-card{padding:0;overflow:hidden;}
.fair-card.image-slot{aspect-ratio:1/1;background:var(--paper-deep);}
.fair-card.image-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;}

/* ==========================================================================
   TRADE FAIR REEL
   Twelve equal squares read as a contact sheet, and squaring the portrait
   phone photos cut faces. A fixed-height horizontal reel keeps every photo
   at its own natural width, so nothing is cropped and the row has rhythm.
   ========================================================================== */
.reel{position:relative;margin-top:2.8rem;}
.reel-track{
  display:flex;gap:.9rem;overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:x proximity;padding-block:.25rem;
  scrollbar-width:none;-ms-overflow-style:none;
}
.reel-track::-webkit-scrollbar{display:none;}
.reel-item{
  margin:0;flex:0 0 auto;height:clamp(230px,26vw,340px);
  scroll-snap-align:start;overflow:hidden;background:var(--paper);
  border:1px solid var(--line);
}
.reel-item img{height:100%;width:auto;display:block;object-fit:cover;}

/* edge fades so the row reads as continuing past the viewport */
.reel::before,.reel::after{
  content:"";position:absolute;top:0;bottom:0;width:56px;z-index:2;pointer-events:none;
}
.reel::before{left:0;background:linear-gradient(90deg,var(--paper-deep),transparent);}
.reel::after{right:0;background:linear-gradient(270deg,var(--paper-deep),transparent);}

.reel-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:44px;height:44px;border-radius:50%;
  background:var(--paper);border:1px solid var(--line);color:var(--ink);
  display:none;align-items:center;justify-content:center;
  box-shadow:var(--shadow-sm);transition:background .3s var(--ease),color .3s var(--ease);
}
.reel-nav:hover{background:var(--gold-deep);color:var(--paper);border-color:var(--gold-deep);}
.reel-nav svg{width:20px;height:20px;}
.reel-nav.prev{left:-10px;}
.reel-nav.next{right:-10px;}
@media(min-width:900px){.reel-nav{display:flex;}}

/* ==========================================================================
   PRODUCT CARD GRID  (products.html — "Every Product We Ship")
   A card per finished product: photograph, name, AGL, elongation, enquiry.
   Four up on desktop, two on tablet, one on phone. The card is a flex
   column with the button pushed to the bottom by `margin-top:auto`, so a
   two-line product name never leaves a row of ragged buttons.
   ========================================================================== */
.prod-filter{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem;}
.prod-filter button{
  font-family:var(--font-body);font-size:var(--fs-micro);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  padding:.55em 1.05em;border:1px solid var(--line);background:transparent;
  color:var(--ink-70);cursor:pointer;transition:all .25s var(--ease);
}
.prod-filter button:hover{border-color:var(--gold);color:var(--ink);}
.prod-filter button[aria-pressed="true"]{
  background:var(--charcoal);border-color:var(--charcoal);color:var(--on-dark);
}

.prod-count{margin-top:1rem;font-size:var(--fs-micro);color:var(--ink-55);letter-spacing:.04em;}

.prod-grid{
  display:grid;gap:1rem;margin-top:1.4rem;
  grid-template-columns:repeat(2,1fr);
}
@media(min-width:760px){.prod-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:1100px){.prod-grid{grid-template-columns:repeat(4,1fr);gap:1.1rem;}}
@media(max-width:439px){.prod-grid{grid-template-columns:1fr;}}

.prod-card{
  background:var(--paper);border:1px solid var(--line);
  display:flex;flex-direction:column;
  transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
.prod-card:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:var(--shadow-sm);}
.prod-card[hidden]{display:none;}
.prod-card .image-slot{aspect-ratio:1/1;}
/* a square photo becomes a very tall slab in a one-column phone layout */
@media(max-width:439px){.prod-card .image-slot{aspect-ratio:16/9;}}

.prod-body{padding:1.1rem 1.15rem 1.25rem;display:flex;flex-direction:column;flex:1;}
.prod-card .p-name{
  font-family:var(--font-display);font-size:1.12rem;font-weight:500;
  line-height:1.25;color:var(--ink);
}
.prod-card .p-specs{margin-top:.85rem;border-top:1px solid var(--line-soft);}
.prod-card .p-specs div{
  display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;
  padding:.45rem 0;border-bottom:1px solid var(--line-soft);
}
.prod-card .p-specs dt,.prod-card .p-specs .p-k{
  font-size:var(--fs-micro);letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-55);font-weight:600;
}
.prod-card .p-specs dd,.prod-card .p-specs .p-v{
  margin:0;font-family:var(--font-display);font-size:1rem;color:var(--gold-deep);
  white-space:nowrap;
}
.prod-card .p-note{margin-top:.75rem;font-size:var(--fs-micro);color:var(--ink-55);line-height:1.5;}
.prod-card .btn{margin-top:auto;padding-top:0;}
.prod-card .p-cta{
  margin-top:1.05rem;display:flex;align-items:center;justify-content:center;gap:.4rem;
  font-family:var(--font-body);font-size:var(--fs-micro);font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;
  padding:.8em 1em;border:1px solid var(--charcoal);color:var(--ink);
  transition:all .28s var(--ease);
}
.prod-card .p-cta svg{width:13px;height:13px;transition:transform .3s var(--ease);}
.prod-card:hover .p-cta{background:var(--charcoal);color:var(--on-dark);}
.prod-card:hover .p-cta svg{transform:translateX(3px);}

.prod-empty{margin-top:2rem;color:var(--ink-55);}