/* ==========================================================================
   REYUN AGRO INDUSTRIES INDIA PVT LTD
   Visual system — "Gold on charcoal, grown in green"
   Display: Cormorant Garamond · Interface: Jost
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --ink:#0A0B09;
  --ink-2:#101210;
  --ink-3:#161A15;
  --ink-4:#1D221C;
  --line:rgba(201,162,75,.22);
  --line-soft:rgba(245,239,227,.10);

  --gold:#C9A24B;
  --gold-lt:#EBD79F;
  --gold-dp:#8B6A26;
  --maroon:#6E1E1E;
  --maroon-lt:#A6403A;
  --green:#1F3A2C;
  --green-lt:#4E6B4A;
  --olive:#7C8A5A;

  --cream:#F6F0E3;
  --cream-2:#EDE4D3;
  --paper:#FBF8F1;

  --txt:#EDE8DD;
  --txt-dim:#B9B4A6;
  --txt-mute:#88857B;

  --serif:'Cormorant Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:'Jost', 'Helvetica Neue', Arial, sans-serif;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
  --gut:clamp(20px, 5vw, 92px);
  --maxw:1480px;
  --nav-h:88px;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--ink); color:var(--txt);
  font-family:var(--sans); font-weight:300; font-size:16.5px; line-height:1.72;
  letter-spacing:.012em; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
ul,ol{margin:0; padding:0; list-style:none}
h1,h2,h3,h4,p{margin:0}
::selection{background:var(--gold); color:#0A0B09}
:focus-visible{outline:1px solid var(--gold); outline-offset:4px}

/* ---------- 3. Typography ---------- */
.display{
  font-family:var(--serif); font-weight:300; line-height:.98;
  letter-spacing:-.015em; color:var(--cream); text-wrap:balance;
}
h1.display{font-size:clamp(2.6rem,5.9vw,5.6rem)}
h2.display{font-size:clamp(2.2rem,4.6vw,4.15rem)}
h3.display{font-size:clamp(1.55rem,2.3vw,2.15rem); line-height:1.1}
.display em{font-style:italic; color:var(--gold-lt)}
.eyebrow{
  font-family:var(--sans); font-size:.66rem; font-weight:400; font-weight:500;
  letter-spacing:.36em; text-transform:uppercase; color:var(--gold);
  display:inline-flex; align-items:center; gap:.9em;
}
.eyebrow::before{
  content:""; width:clamp(18px,3vw,46px); height:1px; background:currentColor; opacity:.55;
}
.eyebrow.no-rule::before{display:none}
.lede{
  font-family:var(--serif); font-size:clamp(1.15rem,1.65vw,1.5rem); line-height:1.55;
  color:var(--cream); font-weight:300;
}
.muted{color:var(--txt-dim)}
.small{font-size:.85rem; line-height:1.7; color:var(--txt-mute)}
.num{font-variant-numeric:tabular-nums}
.rule{height:1px; background:var(--line); border:0; margin:0}
.gold{color:var(--gold)}

/* ---------- 4. Layout ---------- */
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut)}
.section{position:relative; padding-block:clamp(72px,9vw,150px)}
.section--tight{padding-block:clamp(56px,6vw,96px)}
.grid{display:grid; gap:clamp(24px,4vw,64px)}
.split{grid-template-columns:1fr 1fr; align-items:center}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.hairline-grid > *{border-top:1px solid var(--line-soft); padding-top:26px}

/* section number / side label */
.side-label{
  display:flex; align-items:baseline; gap:.7em; font-size:.66rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--txt-mute);
}
.side-label b{color:var(--gold); font-weight:400}

/* ---------- 5. Grain + vignette ---------- */
.grain{
  position:fixed; inset:-50%; z-index:9998; pointer-events:none; opacity:.32; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  animation:grainShift 7s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}20%{transform:translate(-2%,1%)}40%{transform:translate(1%,-2%)}
  60%{transform:translate(-1%,-1%)}80%{transform:translate(2%,1%)}100%{transform:translate(0,0)}
}

/* ---------- 6. Cursor ---------- */
.cursor,.cursor-dot{
  position:fixed; top:0; left:0; z-index:9999; pointer-events:none; border-radius:50%;
  transform:translate3d(-100px,-100px,0); will-change:transform; mix-blend-mode:difference;
}
.cursor{width:34px; height:34px; border:1px solid rgba(233,216,166,.75); transition:width .3s var(--ease),height .3s var(--ease),opacity .3s}
.cursor-dot{width:4px; height:4px; background:var(--gold-lt)}
.cursor.is-active{width:64px; height:64px; background:rgba(233,216,166,.10)}
@media (hover:none),(max-width:900px){.cursor,.cursor-dot{display:none}}

/* ---------- 7. Preloader ---------- */
.preloader{
  position:fixed; inset:0; z-index:10000; background:var(--ink);
  display:grid; place-items:center; transition:opacity .7s var(--ease), visibility .7s;
}
.preloader__inner{display:grid; justify-items:center; gap:26px}
.preloader__mark{width:96px; color:var(--gold)}
.preloader__mark path,.preloader__mark line,.preloader__mark circle{
  stroke-dasharray:420; stroke-dashoffset:420; animation:draw 1.9s var(--ease-io) forwards;
}
.preloader__word{
  font-family:var(--serif); font-size:1rem; letter-spacing:.62em; text-indent:.62em;
  color:var(--gold-lt); text-transform:uppercase; opacity:0;
  animation:fadeUp .9s .55s var(--ease) forwards;
}
.preloader__bar{width:120px; height:1px; background:rgba(255,255,255,.12); overflow:hidden}
.preloader__bar i{display:block; height:100%; width:100%; background:var(--gold); transform:translateX(-100%); animation:sweep 1.5s .1s var(--ease-io) forwards}
.preloader.is-done{opacity:0; visibility:hidden}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes sweep{to{transform:translateX(0)}}
@keyframes fadeUp{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}

/* page-transition curtain */
.curtain{
  position:fixed; inset:0; z-index:9997; background:var(--ink-2); transform:scaleY(0);
  transform-origin:bottom; transition:transform .55s var(--ease-io); pointer-events:none;
}
.curtain.is-on{transform:scaleY(1); transform-origin:top}

/* ---------- 8. Header ---------- */
.header{
  position:fixed; inset:0 0 auto 0; z-index:900; transition:background .5s var(--ease),backdrop-filter .5s,padding .5s var(--ease),border-color .5s;
  border-bottom:1px solid transparent;
}
.header__in{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  height:var(--nav-h); transition:height .5s var(--ease);
}
.header.is-stuck{
  background:rgba(8,9,8,.78); backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line-soft);
}
.header.is-stuck .header__in{height:70px}
.brand{display:flex; align-items:center; gap:14px; flex:0 0 auto}
.brand img{height:52px; width:auto; transition:height .5s var(--ease); filter:drop-shadow(0 2px 10px rgba(0,0,0,.45))}
.header.is-stuck .brand img{height:42px}
.nav{display:flex; align-items:center; gap:clamp(14px,2vw,34px)}
.nav a{
  position:relative; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--txt-dim); padding:6px 0; transition:color .35s;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:var(--gold);
  transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease);
}
.nav a:hover,.nav a.is-active{color:var(--cream)}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1); transform-origin:left}
.header__cta{display:flex; align-items:center; gap:14px}
.burger{display:none; width:44px; height:44px; position:relative}
.burger span{
  position:absolute; left:11px; width:22px; height:1px; background:var(--cream);
  transition:transform .4s var(--ease),opacity .3s;
}
.burger span:nth-child(1){top:19px}
.burger span:nth-child(2){top:25px}
.burger.is-open span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger.is-open span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

/* mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:890; background:var(--ink-2);
  display:grid; align-content:center; padding:100px var(--gut) 40px;
  clip-path:inset(0 0 100% 0); transition:clip-path .7s var(--ease-io);
}
.drawer.is-open{clip-path:inset(0 0 0 0)}
.drawer a{
  font-family:var(--serif); font-size:clamp(1.9rem,8vw,2.9rem); color:var(--cream);
  padding:12px 0; border-bottom:1px solid var(--line-soft); display:flex; align-items:baseline; gap:16px;
}
.drawer a i{font-family:var(--sans); font-size:.6rem; letter-spacing:.3em; color:var(--gold); font-style:normal}
.drawer__foot{margin-top:34px; display:grid; gap:6px; font-size:.78rem; color:var(--txt-mute)}

/* ---------- 9. Buttons ---------- */
.btn{
  --bg:transparent; --fg:var(--cream); --bd:rgba(201,162,75,.55);
  position:relative; display:inline-flex; align-items:center; gap:14px; isolation:isolate;
  padding:16px 30px; border:1px solid var(--bd); color:var(--fg); background:var(--bg);
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; font-weight:400;
  overflow:hidden; transition:color .45s var(--ease), border-color .45s;
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--gold);
  transform:translateY(101%); transition:transform .55s var(--ease);
}
.btn:hover{color:#0A0B09; border-color:var(--gold)}
.btn:hover::before{transform:translateY(0)}
.btn svg{width:16px; height:10px; overflow:visible; transition:transform .5s var(--ease)}
.btn:hover svg{transform:translateX(6px)}
.btn--solid{--bg:var(--gold); --fg:#0A0B09; --bd:var(--gold)}
.btn--solid::before{background:var(--cream)}
.btn--maroon{--bd:rgba(166,64,58,.5); color:var(--cream)}
.btn--maroon::before{background:var(--maroon-lt)}
.btn--maroon:hover{color:#fff; border-color:var(--maroon-lt)}
.btn--ghost{border-color:var(--line-soft)}
.btn--sm{padding:12px 22px; font-size:.62rem}
.link-arrow{
  display:inline-flex; align-items:center; gap:12px; font-size:.7rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold); padding-bottom:6px; position:relative;
}
.link-arrow::after{content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .5s var(--ease)}
.link-arrow:hover::after{transform:scaleX(1); transform-origin:left}
.link-arrow svg{width:20px; height:9px; transition:transform .5s var(--ease)}
.link-arrow:hover svg{transform:translateX(6px)}

/* ---------- 10. Reveal animations ---------- */
[data-reveal]{
  opacity:0; transform:translateY(26px);
  transition:opacity 1s var(--ease) var(--d,0s), transform 1.1s var(--ease) var(--d,0s);
}
[data-reveal="fade"]{transform:none}
[data-reveal="left"]{transform:translateX(-34px)}
[data-reveal="right"]{transform:translateX(34px)}
[data-reveal="scale"]{transform:scale(.94)}
[data-reveal].is-in{opacity:1; transform:none}
[data-reveal-mask]{clip-path:inset(0 0 100% 0); transition:clip-path 1.2s var(--ease) var(--d,0s)}
[data-reveal-mask].is-in{clip-path:inset(0 0 0 0)}
.img-zoom{overflow:hidden}
.img-zoom img{transform:scale(1.14); transition:transform 1.5s var(--ease)}
.img-zoom.is-in img{transform:scale(1)}
.line-grow{transform:scaleX(0); transform-origin:left; transition:transform 1.3s var(--ease) var(--d,0s)}
.line-grow.is-in{transform:scaleX(1)}

/* ---------- 11. Hero ---------- */
.hero{position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden}
.hero__media{position:absolute; inset:0; z-index:0}
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:center 45%;
  animation:heroDrift 26s ease-out forwards; filter:saturate(.92) contrast(1.04);
}
@keyframes heroDrift{from{transform:scale(1.16)}to{transform:scale(1.02)}}
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(8,9,8,.86) 0%, rgba(8,9,8,.34) 34%, rgba(8,9,8,.55) 66%, var(--ink) 99%),
    radial-gradient(120% 80% at 76% 22%, rgba(201,162,75,.16), transparent 58%);
}
.hero__in{position:relative; z-index:2; width:100%; max-width:var(--maxw); margin-inline:auto; padding:clamp(110px,14vh,180px) var(--gut) clamp(24px,4vw,48px)}
.hero__mark{position:absolute; left:-46px; top:11svh; width:clamp(74px,8.4vw,118px); opacity:.075; z-index:1; pointer-events:none}
.hero h1{margin:18px 0 0; max-width:19ch; line-height:.96}
.hero__sub{max-width:50ch; margin-top:22px; color:var(--txt-dim); font-size:1.02rem}
.hero__acts{display:flex; flex-wrap:wrap; gap:14px; margin-top:30px}
.hero__meta{
  margin-top:clamp(28px,4vw,48px); display:grid; grid-template-columns:repeat(4,auto);
  gap:clamp(16px,3vw,48px); justify-content:start; align-items:end;
  border-top:1px solid rgba(245,239,227,.16); padding-top:22px;
}
.hero__meta div{display:grid; gap:5px}
.hero__meta dt,.hero__meta span:first-child{font-size:.58rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold)}
.hero__meta b{font-family:var(--serif); font-size:1.02rem; font-weight:400; color:var(--cream); letter-spacing:.02em}
.hero__meta b.id{font-family:var(--sans); font-size:.8rem; letter-spacing:.1em; color:var(--cream)}
.hero__scroll{
  position:absolute; right:var(--gut); bottom:clamp(28px,5vw,58px); z-index:2;
  display:grid; justify-items:center; gap:12px; font-size:.55rem; letter-spacing:.34em;
  text-transform:uppercase; color:var(--txt-mute); writing-mode:vertical-rl;
}
.hero__scroll i{width:1px; height:64px; background:linear-gradient(var(--gold),transparent); display:block; animation:scrollPulse 2.4s infinite}
@keyframes scrollPulse{0%,100%{opacity:.25; transform:scaleY(.6); transform-origin:top}50%{opacity:1; transform:scaleY(1)}}

/* ---------- 12. Marquee ---------- */
.marquee{
  position:relative; overflow:hidden; border-block:1px solid var(--line);
  background:linear-gradient(90deg,rgba(110,30,30,.20),rgba(201,162,75,.10),rgba(31,58,44,.22));
  padding:18px 0;
}
.marquee__track{display:flex; width:max-content; animation:marquee 46s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track span{
  font-family:var(--serif); font-size:clamp(1rem,1.5vw,1.3rem); letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-lt); opacity:.85; padding-inline:26px;
  display:inline-flex; align-items:center; gap:26px; white-space:nowrap;
}
.marquee__track span::after{content:"✦"; font-size:.6em; color:var(--maroon-lt)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- 13. Images / frames ---------- */
.frame{position:relative; overflow:hidden; background:var(--ink-3)}
.frame img{width:100%; height:100%; object-fit:cover}
.frame--tall{aspect-ratio:4/5}
.frame--wide{aspect-ratio:16/10}
.frame--sq{aspect-ratio:1/1}
.frame::after{
  content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(245,239,227,.09);
  pointer-events:none;
}
.media-caption{
  display:flex; justify-content:space-between; gap:16px; margin-top:14px;
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--txt-mute);
}
/* gold corner brackets */
.bracket{position:relative}
.bracket::before,.bracket::after{
  content:""; position:absolute; width:18px; height:18px; border:1px solid var(--gold); opacity:.55;
}
.bracket::before{top:-9px; left:-9px; border-right:0; border-bottom:0}
.bracket::after{bottom:-9px; right:-9px; border-left:0; border-top:0}

/* ---------- 14. Intro / sticky composition ---------- */
.sticky-col{position:sticky; top:calc(var(--nav-h) + 24px); align-self:start}
.statement{
  font-family:var(--serif); font-weight:300; font-size:clamp(1.6rem,3.2vw,2.9rem);
  line-height:1.24; color:var(--cream); letter-spacing:-.01em;
}
.statement em{font-style:italic; color:var(--gold-lt)}
.body-cols{columns:1; display:grid; gap:22px; max-width:56ch}
.body-cols p{color:var(--txt-dim)}

/* ---------- 15. Capability list (hover image swap) ---------- */
.cap{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,5vw,72px); align-items:start}
.cap__list{border-top:1px solid var(--line-soft)}
.cap__item{
  display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:clamp(14px,2.4vw,34px);
  padding:clamp(20px,2.4vw,30px) 0; border-bottom:1px solid var(--line-soft);
  position:relative; transition:padding-left .5s var(--ease);
}
.cap__item::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:1px; background:var(--gold);
  transform:scaleY(0); transform-origin:bottom; transition:transform .55s var(--ease);
}
.cap__item:hover{padding-left:22px}
.cap__item:hover::before{transform:scaleY(1); transform-origin:top}
.cap__num{font-size:.62rem; letter-spacing:.2em; color:var(--gold); padding-top:.5em}
.cap__t{font-family:var(--serif); font-size:clamp(1.25rem,2.1vw,1.85rem); color:var(--cream); font-weight:400; line-height:1.15}
.cap__d{grid-column:2; color:var(--txt-mute); font-size:.9rem; max-width:52ch; margin-top:8px}
.cap__ico{width:26px; height:26px; opacity:.45; transition:opacity .4s, transform .5s var(--ease)}
.cap__item:hover .cap__ico{opacity:1; transform:rotate(-45deg)}
.cap__stage{position:sticky; top:calc(var(--nav-h) + 30px); aspect-ratio:4/5; overflow:hidden; background:var(--ink-3)}
.cap__stage img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0;
  transform:scale(1.08); transition:opacity .8s var(--ease), transform 1.2s var(--ease);
}
.cap__stage img.is-on{opacity:1; transform:scale(1)}

/* ---------- 16. Product cards ---------- */
.pcard{
  position:relative; display:grid; background:var(--ink-2); border:1px solid var(--line-soft);
  overflow:hidden; transition:border-color .5s, transform .6s var(--ease), background .6s;
}
.pcard:hover{border-color:rgba(201,162,75,.5); transform:translateY(-4px); background:var(--ink-3)}
.pcard__media{position:relative; aspect-ratio:4/3; overflow:hidden}
.pcard__media img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease), filter .8s}
.pcard:hover .pcard__media img{transform:scale(1.07); filter:saturate(1.1)}
.pcard__tag{
  position:absolute; top:14px; left:14px; z-index:2; padding:6px 12px; font-size:.55rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--gold-lt);
  background:rgba(8,9,8,.62); border:1px solid rgba(201,162,75,.4); backdrop-filter:blur(6px);
}
.pcard__body{padding:clamp(20px,2.2vw,28px); display:grid; gap:12px}
.pcard__body h3{font-family:var(--serif); font-size:clamp(1.2rem,1.6vw,1.5rem); color:var(--cream); font-weight:400}
.pcard__body p{font-size:.88rem; color:var(--txt-mute); line-height:1.65}
.pcard__foot{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  border-top:1px solid var(--line-soft); padding-top:14px; margin-top:4px;
  font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--txt-mute);
}
.pcard__foot b{color:var(--gold); font-weight:400}
.pcard__arrow{width:22px; height:9px; color:var(--gold); transition:transform .5s var(--ease)}
.pcard:hover .pcard__arrow{transform:translateX(5px)}

/* filter bar */
.filters{display:flex; flex-wrap:wrap; gap:10px}
.filters button{
  padding:10px 18px; border:1px solid var(--line-soft); font-size:.62rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--txt-dim); transition:.4s var(--ease);
}
.filters button:hover{color:var(--cream); border-color:var(--line)}
.filters button.is-active{background:var(--gold); color:#0A0B09; border-color:var(--gold)}

/* ---------- 17. Stats band ---------- */
.band{position:relative; overflow:hidden; padding-block:clamp(64px,8vw,118px)}
.band__bg{position:absolute; inset:-12% 0; z-index:0}
.band__bg img{width:100%; height:100%; object-fit:cover; filter:grayscale(.25) contrast(1.05)}
.band__bg::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,var(--ink),rgba(10,11,9,.82) 40%,var(--ink))}
.band__in{position:relative; z-index:2}
.stat{display:grid; gap:10px; padding-right:20px}
.stat__n{font-family:var(--serif); font-size:clamp(2.6rem,4.6vw,4.2rem); line-height:1; color:var(--gold-lt); font-weight:300}
.stat__n sup{font-size:.4em; vertical-align:super; color:var(--gold); letter-spacing:.1em}
.stat__n .unit{font-size:.34em; letter-spacing:.16em; color:var(--gold); margin-left:.3em; vertical-align:.55em}
.stat__n .pre{font-size:.55em; color:var(--gold); vertical-align:.35em; margin-right:.08em}
.stat__l{font-size:.64rem; letter-spacing:.26em; text-transform:uppercase; color:var(--txt-mute)}
.stat__d{font-size:.82rem; color:var(--txt-dim); max-width:26ch; line-height:1.6}

/* ---------- 18. Process ---------- */
.process{position:relative}
.process__line{position:absolute; left:0; top:46px; width:100%; height:1px; background:var(--line-soft)}
.process__line i{display:block; height:100%; background:linear-gradient(90deg,var(--gold),var(--gold-lt)); transform:scaleX(0); transform-origin:left; transition:transform 2.2s var(--ease-io)}
.process__line.is-in i{transform:scaleX(1)}
.step{position:relative; padding-top:0}
.step__dot{width:9px; height:9px; border-radius:50%; background:var(--gold); position:relative; margin-bottom:26px; box-shadow:0 0 0 6px rgba(201,162,75,.12)}
.step__n{font-size:.6rem; letter-spacing:.28em; color:var(--txt-mute); text-transform:uppercase; margin-bottom:10px}
.step h3{font-family:var(--serif); font-size:1.35rem; color:var(--cream); font-weight:400; margin-bottom:10px}
.step p{font-size:.86rem; color:var(--txt-mute); line-height:1.66}

/* ---------- 19. Light sections ---------- */
.light{background:var(--cream); color:#241F18}
.light .display,.light h2,.light h3{color:#1B1A16}
.light .eyebrow{color:var(--maroon)}
.light .lede{color:#2C2822}
.light .muted{color:#5B554A}
.light .small{color:#6C6558}
.light .rule{background:rgba(110,30,30,.18)}
.light .body-cols p{color:#4A453B}
.light .statement{color:#1B1A16}
.light .statement em{color:var(--maroon)}
.light .hairline-grid > *{border-top-color:rgba(110,30,30,.16)}
.light .btn{--bd:rgba(110,30,30,.4); color:#241F18}
.light .btn:hover{color:var(--cream)}
.light .btn::before{background:var(--maroon)}
.light .link-arrow{color:var(--maroon)}
.light .pcard{background:var(--paper); border-color:rgba(110,30,30,.14)}
.light .pcard:hover{background:#fff; border-color:rgba(110,30,30,.3)}
.light .pcard__body h3{color:#1B1A16}
.light .pcard__body p{color:#5B554A}
.light .pcard__foot{border-top-color:rgba(110,30,30,.14); color:#7A7264}
.light .pcard__foot b,.light .pcard__arrow{color:var(--maroon)}
.light .pcard__tag{background:rgba(251,248,241,.8); color:var(--maroon); border-color:rgba(110,30,30,.28)}

/* ---------- 20. Green (limited) accents ---------- */
.verde{background:linear-gradient(180deg,var(--ink),#131A15 55%,var(--ink))}
.verde .leaf-rule{display:flex; align-items:center; gap:14px; color:var(--green-lt); font-size:.6rem; letter-spacing:.28em; text-transform:uppercase}
.verde .leaf-rule::after{content:""; flex:1; height:1px; background:linear-gradient(90deg,rgba(78,107,74,.6),transparent)}
.chip{
  display:inline-flex; align-items:center; gap:9px; padding:8px 15px; border-radius:100px;
  border:1px solid rgba(78,107,74,.42); background:rgba(31,58,44,.30);
  font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:#A9BB9B;
}
.chip::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--olive)}

/* ---------- 21. Values / accordion ---------- */
.acc{border-top:1px solid var(--line-soft)}
.acc__item{border-bottom:1px solid var(--line-soft)}
.acc__head{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:26px 0; text-align:left; transition:color .4s;
}
.acc__head h3{font-family:var(--serif); font-size:clamp(1.15rem,1.8vw,1.5rem); font-weight:400; color:var(--cream)}
.acc__head:hover h3{color:var(--gold-lt)}
.acc__sign{position:relative; width:16px; height:16px; flex:0 0 auto}
.acc__sign::before,.acc__sign::after{content:""; position:absolute; background:var(--gold); transition:transform .45s var(--ease)}
.acc__sign::before{left:0; top:7.5px; width:16px; height:1px}
.acc__sign::after{top:0; left:7.5px; height:16px; width:1px}
.acc__item.is-open .acc__sign::after{transform:scaleY(0)}
.acc__panel{overflow:hidden; max-height:0; transition:max-height .6s var(--ease)}
.acc__panel > div{padding-bottom:28px; max-width:66ch; color:var(--txt-dim); font-size:.94rem}

/* ---------- 22. Leadership ---------- */
.people{display:grid; gap:clamp(18px,2.4vw,30px)}
.person{
  position:relative; padding:clamp(24px,3vw,38px); border:1px solid var(--line-soft);
  background:linear-gradient(180deg,rgba(29,34,28,.55),rgba(16,18,16,.5));
  display:grid; gap:16px; overflow:hidden; transition:border-color .5s var(--ease), transform .6s var(--ease);
}
.person:hover{border-color:rgba(201,162,75,.45); transform:translateY(-3px)}
.person::after{
  content:""; position:absolute; right:-40px; bottom:-40px; width:150px; height:150px;
  border:1px solid rgba(201,162,75,.10); border-radius:50%; transition:transform .8s var(--ease);
}
.person:hover::after{transform:scale(1.14)}
.person__mono{
  width:74px; height:74px; display:grid; place-items:center; border:1px solid rgba(201,162,75,.4);
  border-radius:50%; font-family:var(--serif); font-size:1.4rem; letter-spacing:.06em;
  color:var(--gold-lt); background:radial-gradient(circle at 32% 28%, rgba(201,162,75,.22), transparent 68%);
}
.person h3{font-family:var(--serif); font-size:clamp(1.25rem,1.9vw,1.6rem); font-weight:400; color:var(--cream); line-height:1.2}
.person__role{font-size:.6rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold)}
.person p{font-size:.88rem; color:var(--txt-mute); line-height:1.68}
.person__meta{display:grid; gap:6px; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:#6F6C63; border-top:1px solid var(--line-soft); padding-top:14px}
.person__meta b{color:var(--txt-dim); font-weight:400}

/* ---------- 23. Timeline ---------- */
.tl{position:relative; padding-left:clamp(20px,4vw,44px)}
.tl::before{content:""; position:absolute; left:0; top:6px; bottom:6px; width:1px; background:var(--line)}
.tl__item{position:relative; padding-bottom:clamp(28px,3.4vw,46px)}
.tl__item::before{content:""; position:absolute; left:calc(-1 * clamp(20px,4vw,44px) - 3px); top:9px; width:7px; height:7px; border-radius:50%; background:var(--ink); border:1px solid var(--gold)}
.tl__item:last-child{padding-bottom:0}
.tl__yr{font-family:var(--serif); font-size:1.35rem; color:var(--gold-lt); margin-bottom:6px}
.tl__item h4{font-family:var(--serif); font-size:1.15rem; font-weight:400; color:var(--cream); margin-bottom:6px}
.tl__item p{font-size:.88rem; color:var(--txt-mute); max-width:54ch}

/* ---------- 24. Data table / corporate facts ---------- */
.facts{display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--line-soft)}
.fact{display:grid; gap:6px; padding:20px 0; border-bottom:1px solid var(--line-soft)}
.fact:nth-child(odd){padding-right:24px}
.fact:nth-child(even){padding-left:24px; border-left:1px solid var(--line-soft)}
.fact dt{font-size:.58rem; letter-spacing:.26em; text-transform:uppercase; color:var(--txt-mute)}
.fact dd{margin:0; font-family:var(--serif); font-size:1.02rem; color:var(--cream); line-height:1.4}
.fact dd.sans{font-family:var(--sans); font-size:.86rem; letter-spacing:.04em; color:var(--txt-dim)}
.badge-row{display:flex; flex-wrap:wrap; gap:10px}

/* ---------- 25. CTA ---------- */
.cta{position:relative; overflow:hidden; border-top:1px solid var(--line)}
.cta__bg{position:absolute; inset:0; opacity:.20}
.cta__bg img{width:100%; height:100%; object-fit:cover}
.cta__bg::after{content:""; position:absolute; inset:0; background:radial-gradient(70% 100% at 50% 100%, rgba(110,30,30,.5), var(--ink) 72%)}
.cta__in{position:relative; z-index:2; text-align:center; display:grid; justify-items:center; gap:26px}
.cta h2{max-width:20ch}
.cta__acts{display:flex; flex-wrap:wrap; gap:14px; justify-content:center}

/* ---------- 26. Footer ---------- */
.footer{background:var(--ink-2); border-top:1px solid var(--line); padding-top:clamp(52px,6vw,86px)}
.footer__top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:clamp(24px,4vw,54px); padding-bottom:clamp(34px,4vw,58px)}
.footer__brand img{height:56px; width:auto; margin-bottom:20px}
.footer__brand p{font-size:.86rem; color:var(--txt-mute); max-width:34ch; line-height:1.7}
.footer h4{font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); margin-bottom:18px; font-weight:400}
.footer ul{display:grid; gap:10px}
.footer li a,.footer li span{font-size:.86rem; color:var(--txt-dim); transition:color .35s}
.footer li a:hover{color:var(--gold-lt)}
.footer__bot{
  display:flex; flex-wrap:wrap; gap:14px 30px; justify-content:space-between; align-items:center;
  border-top:1px solid var(--line-soft); padding-block:24px; font-size:.7rem; color:#6E6B62;
}
.footer__bot .cin{letter-spacing:.1em}
.totop{display:inline-flex; align-items:center; gap:10px; color:var(--txt-dim); font-size:.64rem; letter-spacing:.24em; text-transform:uppercase}
.totop:hover{color:var(--gold-lt)}
.totop svg{width:11px; height:16px; transition:transform .4s var(--ease)}
.totop:hover svg{transform:translateY(-4px)}

/* ---------- 27. Page hero (inner pages) ---------- */
.phero{position:relative; padding-top:calc(var(--nav-h) + clamp(56px,9vw,120px)); padding-bottom:clamp(44px,6vw,80px); overflow:hidden}
.phero__bg{position:absolute; inset:0; z-index:0; opacity:.36}
.phero__bg img{width:100%; height:100%; object-fit:cover; object-position:center 55%}
.phero__bg::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,11,9,.92),rgba(10,11,9,.72) 45%,var(--ink))}
.phero__in{position:relative; z-index:2}
.phero h1{font-size:clamp(2.5rem,6vw,5.4rem); margin-top:20px; max-width:20ch}
.phero__sub{max-width:58ch; margin-top:24px; color:var(--txt-dim)}
.crumbs{display:flex; gap:10px; align-items:center; font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--txt-mute)}
.crumbs a:hover{color:var(--gold-lt)}
.crumbs span{color:var(--gold)}

/* ---------- 28. Forms ---------- */
.form{display:grid; gap:22px}
.field{position:relative; display:grid; gap:8px}
.field label{font-size:.58rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold)}
.field input,.field select,.field textarea{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--line-soft);
  padding:12px 0; color:var(--cream); font-family:var(--sans); font-size:.98rem; font-weight:300;
  transition:border-color .4s;
}
.field textarea{resize:vertical; min-height:96px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-bottom-color:var(--gold)}
.field input::placeholder,.field textarea::placeholder{color:#6A675F}
.field select{appearance:none; cursor:pointer}
.field select option{background:var(--ink-3); color:var(--txt)}
.form__note{font-size:.74rem; color:var(--txt-mute)}
.form__ok{
  display:none; padding:16px 18px; border:1px solid rgba(78,107,74,.5); background:rgba(31,58,44,.28);
  color:#B9CBA9; font-size:.86rem;
}
.form__ok.is-on{display:block; animation:fadeUp .6s var(--ease)}

/* ---------- 29. Misc ---------- */
.center{text-align:center; justify-items:center}
.mt-s{margin-top:18px}.mt-m{margin-top:34px}.mt-l{margin-top:clamp(34px,4vw,60px)}
.stack{display:grid; gap:12px}
.divider-motif{display:flex; align-items:center; gap:18px; color:var(--gold); opacity:.8}
.divider-motif i{flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent)}
.quote{font-family:var(--serif); font-size:clamp(1.3rem,2.4vw,2rem); line-height:1.4; color:var(--cream); font-style:italic}
.quote__by{font-style:normal; font-family:var(--sans); font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); margin-top:18px}
.notice{border:1px solid var(--line); padding:18px 20px; font-size:.8rem; color:var(--txt-mute); background:rgba(201,162,75,.05)}

/* ---------- 30. Responsive ---------- */
@media (max-width:1080px){
  .nav{display:none}
  .burger{display:block}
  .header__cta .btn{display:none}
  .split,.cap{grid-template-columns:1fr}
  .g-4{grid-template-columns:repeat(2,1fr)}
  .footer__top{grid-template-columns:1fr 1fr}
  .hero__meta{grid-template-columns:repeat(2,1fr); row-gap:20px}
  .cap__stage{position:relative; top:0; aspect-ratio:16/10; order:-1}
}
@media (max-width:720px){
  :root{--nav-h:74px}
  body{font-size:16px}
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .hero__scroll{display:none}
  .sticky-col{position:relative; top:0}
  .facts{grid-template-columns:1fr}
  .fact:nth-child(even){border-left:0; padding-left:0}
  .fact:nth-child(odd){padding-right:0}
  .footer__top{grid-template-columns:1fr}
  .marquee__track span{font-size:.95rem}
  .process__line{display:none}
}

/* ---------- 31. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  [data-reveal],[data-reveal-mask]{opacity:1 !important; transform:none !important; clip-path:none !important}
  .grain{display:none}
  html{scroll-behavior:auto}
}

/* ---------- 32. Component add-ons (products / services / contact) ---------- */
/* spec list inside product cards */
.specs{display:grid; gap:0; margin:4px 0 2px; border-top:1px solid var(--line-soft)}
.specs li{
  display:flex; justify-content:space-between; gap:14px; padding:8px 0;
  border-bottom:1px solid var(--line-soft); font-size:.72rem; letter-spacing:.06em;
}
.specs span{color:var(--txt-mute); text-transform:uppercase; letter-spacing:.16em; font-size:.6rem}
.specs b{color:var(--cream); font-weight:400; text-align:right}
.light .specs,.light .specs li{border-color:rgba(110,30,30,.14)}
.light .specs span{color:#83796A}
.light .specs b{color:#241F18}

/* spec table */
.table-wrap{overflow-x:auto}
.spec-table{width:100%; border-collapse:collapse; min-width:520px}
.spec-table th,.spec-table td{
  text-align:left; padding:15px 16px 15px 0; border-bottom:1px solid rgba(110,30,30,.14);
  font-size:.86rem; font-weight:400; color:#3E3A32;
}
.spec-table th{
  font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; color:#6E1E1E;
  border-bottom:1px solid rgba(110,30,30,.3); padding-bottom:12px;
}
.spec-table td:first-child{font-family:var(--serif); font-size:1rem; color:#1B1A16}
.spec-table tr:hover td{background:rgba(110,30,30,.03)}

/* service rows */
.svc{display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,5vw,76px); align-items:center}
.svc--rev .svc__media{order:2}
.svc__num{font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold)}
.svc__list{display:grid; gap:12px; border-top:1px solid var(--line-soft); padding-top:18px}
.svc__list li{
  position:relative; padding-left:24px; font-size:.9rem; color:var(--txt-dim); line-height:1.55;
}
.svc__list li::before{
  content:""; position:absolute; left:0; top:.62em; width:10px; height:1px; background:var(--gold);
}
@media (max-width:900px){
  .svc{grid-template-columns:1fr}
  .svc--rev .svc__media{order:0}
}

/* contact cards */
.contact-card{
  display:grid; grid-template-columns:auto 1fr; gap:18px; padding:26px 0;
  border-top:1px solid var(--line-soft);
}
.contact-card:last-child{border-bottom:1px solid var(--line-soft)}
.contact-card__ico{
  width:44px; height:44px; display:grid; place-items:center; color:var(--gold);
  border:1px solid rgba(201,162,75,.35); border-radius:50%;
}
.contact-card h4{
  font-family:var(--serif); font-size:1.12rem; font-weight:400; color:var(--cream);
  margin-bottom:8px; letter-spacing:.01em;
}
.contact-card p{font-size:.9rem; color:var(--txt-dim); line-height:1.66}
.contact-card a:hover{color:var(--gold-lt)}
.contact-card .link-arrow{margin-top:10px}
.mini-facts{display:grid; gap:9px; margin-top:4px}
.mini-facts div{display:flex; justify-content:space-between; gap:14px; border-bottom:1px dotted rgba(245,239,227,.12); padding-bottom:8px}
.mini-facts dt{font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--txt-mute)}
.mini-facts dd{margin:0; font-size:.8rem; color:var(--cream); letter-spacing:.04em}

/* stylised map panel */
.mappanel{position:relative; border:1px solid var(--line-soft); overflow:hidden; background:var(--ink-2)}
.mappanel__svg{display:block; width:100%; height:clamp(240px,32vw,420px)}
.mappanel__meta{
  display:grid; grid-template-columns:repeat(3,1fr) auto; gap:clamp(16px,3vw,40px); align-items:center;
  padding:22px clamp(18px,3vw,32px); border-top:1px solid var(--line-soft); background:rgba(8,9,8,.5);
}
.mappanel__meta b{font-family:var(--serif); font-size:1.02rem; font-weight:400; color:var(--cream); display:block; margin-top:5px}
@media (max-width:860px){
  .mappanel__meta{grid-template-columns:1fr 1fr; row-gap:20px}
}

/* ---------- 33. Light-section fact table + misc fixes ---------- */
.light .facts{border-top-color:rgba(110,30,30,.22)}
.light .fact{border-bottom-color:rgba(110,30,30,.16)}
.light .fact:nth-child(even){border-left-color:rgba(110,30,30,.16)}
.light .fact dt{color:#8A8072}
.light .fact dd{color:#1B1A16}
.light .fact dd.sans{color:#3E3A32}
.light .notice{border-color:rgba(110,30,30,.2); background:rgba(110,30,30,.045); color:#5B554A}
.light .acc{border-top-color:rgba(110,30,30,.18)}
.light .acc__item{border-bottom-color:rgba(110,30,30,.16)}
.light .acc__head h3{color:#1B1A16}
.light .acc__head:hover h3{color:var(--maroon)}
.light .acc__sign::before,.light .acc__sign::after{background:var(--maroon)}
.light .acc__panel > div{color:#5B554A}
.light .tl::before{background:rgba(110,30,30,.22)}
.light .tl__item::before{background:var(--cream); border-color:var(--maroon)}
.light .tl__yr{color:var(--maroon)}
.light .tl__item h4{color:#1B1A16}
.light .tl__item p{color:#5B554A}
.light .table-wrap{border-top:0}
.light .contact-card{border-color:rgba(110,30,30,.16)}
.light .contact-card h4{color:#1B1A16}
.light .contact-card p{color:#4A453B}
.light .contact-card__ico{color:var(--maroon); border-color:rgba(110,30,30,.3)}
.light .chip{border-color:rgba(110,30,30,.3); background:rgba(110,30,30,.05); color:#6E1E1E}
.light .chip::before{background:var(--maroon)}
.light .mini-facts div{border-bottom-color:rgba(110,30,30,.18)}
.light .mini-facts dt{color:#8A8072}
.light .mini-facts dd{color:#1B1A16}
.light .specs li{border-bottom-color:rgba(110,30,30,.14)}
.light .pcard__foot{border-top-color:rgba(110,30,30,.14)}

/* process grid: 5 across on desktop, stacked on small screens */
.process__grid{grid-template-columns:repeat(5,1fr); gap:clamp(16px,2.4vw,34px)}
@media (max-width:1080px){.process__grid{grid-template-columns:repeat(2,1fr); gap:26px}}
@media (max-width:720px){
  .process__grid{grid-template-columns:1fr; gap:0}
  .step{padding-block:22px; border-top:1px solid var(--line-soft)}
  .step__dot{display:none}
  .step:first-child{border-top:0}
}

/* ---------- 34. Small-screen typography refinements ---------- */
@media (max-width:720px){
  .eyebrow{letter-spacing:.22em; font-size:.58rem}
  .side-label{letter-spacing:.22em; font-size:.6rem}
  .brand img{height:44px}
  .header.is-stuck .brand img{height:38px}
  .hero h1{font-size:clamp(2.1rem,8.6vw,2.9rem); margin-top:14px}
  .hero__sub{font-size:.96rem; margin-top:16px; line-height:1.7}
  .hero__meta{gap:16px 20px; padding-top:18px}
  .hero__meta b{font-size:.92rem}
  .hero__meta b.id{font-size:.7rem; letter-spacing:.08em}
  .hero__meta span:first-child{font-size:.54rem; letter-spacing:.22em}
  .hero__acts{margin-top:24px}
  .btn{padding:14px 22px; font-size:.62rem; letter-spacing:.2em}
  .statement{font-size:clamp(1.5rem,6.4vw,2.1rem)}
  .marquee{padding:13px 0}
  .marquee__track span{font-size:.82rem; padding-inline:16px; gap:16px; letter-spacing:.1em}
  .phero h1{font-size:clamp(2rem,8.4vw,2.9rem)}
  .phero__sub{font-size:.95rem}
  .stat__n{font-size:clamp(2.2rem,10vw,3rem)}
  .stat{padding-right:0}
  .quote{font-size:clamp(1.15rem,5vw,1.5rem)}
  .person h3{font-size:1.2rem}
  .acc__head h3{font-size:1.05rem}
  .spec-table th,.spec-table td{padding-right:10px; font-size:.78rem}
  .contact-card{grid-template-columns:1fr; gap:12px; padding:22px 0}
  .mappanel__meta{grid-template-columns:1fr; gap:16px; padding:20px}
  .footer__bot{font-size:.66rem}
  .divider-motif{display:none}
}

/* ---------- 35. Director photos ---------- */
.person__photo{
  position:relative; overflow:hidden; background:var(--ink-3);
  display:grid; place-items:stretch;
}
.person__photo img{width:100%; height:100%; object-fit:cover; filter:saturate(.92); transition:filter .6s var(--ease)}
.person:hover .person__photo img{filter:saturate(1)}
.person__photo::after{content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(201,162,75,.16); pointer-events:none}
@media (max-width:720px){
  .person > a{grid-template-columns:112px 1fr !important}
}