/* ==========================================================================
   Rana Group / Erisha Smart Manufacturing Hub
   Design system — "Engineered Estate"
   Palette sampled from Rana_Group_Company_Profile_June_2026 (B8963E / 1A3C2E)
   ========================================================================== */

:root{
  /* Brand — sampled directly from the company profile deck */
  --ink:        #0C1F17;
  --forest:     #1A3C2E;
  --forest-2:   #142C22;
  --moss:       #2E6B4F;
  --gold:       #B8963E;
  --gold-lt:    #C9A84C;
  --gold-pale:  #D1BD7D;
  --sand:       #F5EDD6;
  --paper:      #FAF8F2;
  --paper-2:    #F0EBDD;

  --hair:       rgba(201,168,76,.26);
  --hair-dark:  rgba(26,60,46,.16);
  --txt-dark:   #17251F;
  --txt-mute:   #5C6B62;
  --txt-light:  rgba(245,237,214,.78);

  --ff-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ff-body:    "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --ff-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --wrap: 1280px;
  --gut: clamp(20px, 5vw, 72px);
  --nav-h: 76px;

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

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px)}
body{
  margin:0; background:var(--paper); color:var(--txt-dark);
  font-family:var(--ff-body); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{max-width:100%; display:block; height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer}
h1,h2,h3,h4{margin:0; font-family:var(--ff-display); font-weight:700; line-height:1.03; letter-spacing:-.022em}
p{margin:0 0 1em}
ul{margin:0; padding:0; list-style:none}

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

/* ---------- type scale ---------- */
.d1{font-size:clamp(2.6rem,6.4vw,5.1rem); font-stretch:112%; text-transform:uppercase; letter-spacing:-.028em}
.d2{font-size:clamp(2rem,4.2vw,3.4rem); font-stretch:108%; letter-spacing:-.026em}
.d3{font-size:clamp(1.35rem,2.2vw,1.85rem); letter-spacing:-.02em}
.lede{font-size:clamp(1.05rem,1.5vw,1.24rem); line-height:1.58; color:var(--txt-mute)}
.on-dark .lede{color:var(--txt-light)}

.eyebrow{
  font-family:var(--ff-mono); font-size:.7rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
  display:flex; align-items:center; gap:.7rem; margin:0 0 1.1rem;
}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--gold); flex:none}
.on-dark .eyebrow{color:var(--gold-lt)}
.on-dark .eyebrow::before{background:var(--gold-lt)}

.mono{font-family:var(--ff-mono); font-size:.78rem; letter-spacing:.06em}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}
.sec{padding-block:clamp(64px,8vw,124px)}
.sec--tight{padding-block:clamp(48px,5vw,76px)}
.on-dark{background:var(--forest); color:var(--sand)}
.on-ink{background:var(--ink); color:var(--sand)}
.on-paper{background:var(--paper)}
.on-sand{background:var(--paper-2)}

/* Signature structural device: the dossier spread.
   Mirrors the Erisha leasing brochures — dark title column, cream data column. */
.spread{display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}
.spread__title{
  background:var(--forest); color:var(--sand);
  padding:clamp(44px,5.5vw,86px) clamp(28px,4vw,64px);
  display:flex; flex-direction:column; justify-content:center;
  position:relative;
}
.spread__title::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(160deg,rgba(201,168,76,.10),transparent 46%);
}
.spread__body{
  background:var(--paper); padding:clamp(40px,5vw,80px) clamp(28px,4vw,64px);
  display:flex; flex-direction:column; justify-content:center;
}
@media(max-width:900px){ .spread{grid-template-columns:1fr} }

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:0 0 auto; z-index:120; height:var(--nav-h);
  background:rgba(12,31,23,.72); backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid rgba(201,168,76,.16);
  transition:background .35s var(--ease), height .35s var(--ease);
}
.nav.is-solid{background:rgba(12,31,23,.96)}
.nav__in{
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut);
  height:100%; display:flex; align-items:center; gap:clamp(16px,3vw,44px);
}
.nav__logo{display:flex; align-items:center; gap:14px; flex:none}
.nav__logo img{height:34px; width:auto}
.nav__links{display:flex; align-items:center; gap:clamp(12px,2vw,28px); margin-left:auto}
.nav__links a{
  font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.13em;
  text-transform:uppercase; color:rgba(245,237,214,.82); padding:6px 0;
  position:relative; transition:color .2s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--gold-lt); transition:width .28s var(--ease);
}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--sand)}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{width:100%}
.nav__cta{
  flex:none; background:var(--gold); color:var(--ink);
  font-family:var(--ff-mono); font-size:.72rem; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; padding:11px 20px; border:0;
  transition:background .22s, transform .22s var(--ease);
}
.nav__cta:hover{background:var(--gold-lt); transform:translateY(-1px)}
.nav__burger{display:none; background:none; border:0; padding:8px; margin-left:auto; color:var(--sand)}
.nav__burger span{display:block; width:24px; height:2px; background:currentColor; margin:5px 0; transition:transform .3s var(--ease), opacity .2s}
.nav.is-open .nav__burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.is-open .nav__burger span:nth-child(2){opacity:0}
.nav.is-open .nav__burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav__progress{position:absolute; left:0; bottom:-1px; height:2px; width:0; background:var(--gold); transition:width .1s linear}

@media(max-width:1040px){
  .nav__burger{display:block}
  .nav__links{
    position:fixed; inset:var(--nav-h) 0 auto; flex-direction:column; align-items:stretch;
    gap:0; background:var(--ink); padding:8px var(--gut) 28px; margin:0;
    border-bottom:1px solid var(--hair);
    transform:translateY(-8px); opacity:0; pointer-events:none; transition:.3s var(--ease);
    max-height:calc(100vh - var(--nav-h)); overflow:auto;
  }
  .nav.is-open .nav__links{transform:none; opacity:1; pointer-events:auto}
  .nav__links a{padding:15px 0; border-bottom:1px solid rgba(201,168,76,.12); font-size:.82rem}
  .nav__cta{display:none}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--ff-mono); font-size:.74rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; padding:15px 26px; border:1px solid transparent;
  transition:.24s var(--ease);
}
.btn--gold{background:var(--gold); color:var(--ink)}
.btn--gold:hover{background:var(--gold-lt); transform:translateY(-2px)}
.btn--ghost{border-color:var(--hair); color:var(--sand)}
.btn--ghost:hover{border-color:var(--gold-lt); background:rgba(201,168,76,.1)}
.btn--dark{border-color:rgba(26,60,46,.3); color:var(--forest)}
.btn--dark:hover{background:var(--forest); color:var(--sand); border-color:var(--forest)}
.btn__arw{transition:transform .24s var(--ease)}
.btn:hover .btn__arw{transform:translateX(4px)}

/* ---------- hero ---------- */
.hero{position:relative; background:var(--forest); color:var(--sand); padding-top:var(--nav-h)}
.hero__grid{display:grid; grid-template-columns:1.02fr .98fr; min-height:min(88vh,860px)}
.hero__left{
  padding:clamp(48px,6vw,96px) clamp(24px,4.5vw,72px) clamp(36px,4vw,64px);
  display:flex; flex-direction:column; justify-content:center;
  position:relative; z-index:2;
}
.hero__left::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 0% 0%, rgba(46,107,79,.55), transparent 62%);
  pointer-events:none;
}
.hero__left > *{position:relative}
.hero h1{max-width:14ch}
.hero h1 em{font-style:normal; color:var(--gold-lt); display:block}
.hero__sub{max-width:46ch; margin-top:1.5rem; color:var(--txt-light); font-size:clamp(1rem,1.35vw,1.16rem)}
.hero__actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:2.4rem}
.hero__media{position:relative; overflow:hidden; background:var(--ink)}
.hero__media img{width:100%; height:100%; object-fit:cover; object-position:center}
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, var(--forest) 0%, rgba(26,60,46,.55) 18%, transparent 52%);
}
.hero__stamp{
  position:absolute; right:clamp(16px,2.5vw,32px); bottom:clamp(16px,2.5vw,30px); z-index:3;
  font-family:var(--ff-mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(245,237,214,.72); text-align:right; line-height:1.7;
  text-shadow:0 1px 8px rgba(0,0,0,.6);
}
@media(max-width:920px){
  .hero__grid{grid-template-columns:1fr; min-height:0}
  .hero__media{height:clamp(260px,52vw,420px); order:-1}
  .hero__media::after{background:linear-gradient(to top, var(--forest) 2%, transparent 58%)}
  .hero__stamp{display:none}
}

/* ---------- ticker strip: key figures ---------- */
.ticker{background:var(--ink); border-block:1px solid var(--hair); overflow:hidden}
.ticker__row{
  display:grid; grid-template-columns:repeat(5,1fr);
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut);
}
.ticker__cell{padding:26px 18px 26px 0; border-right:1px solid rgba(201,168,76,.14)}
.ticker__cell:last-child{border-right:0}
.ticker__n{
  font-family:var(--ff-display); font-stretch:110%; font-weight:700;
  font-size:clamp(1.5rem,2.9vw,2.35rem); color:var(--gold-lt); line-height:1;
  letter-spacing:-.02em;
}
.ticker__l{
  font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.15em; text-transform:uppercase;
  color:rgba(245,237,214,.62); margin-top:.6rem; display:block; line-height:1.5;
}
@media(max-width:820px){
  .ticker__row{grid-template-columns:repeat(2,1fr)}
  .ticker__cell{border-right:0; border-bottom:1px solid rgba(201,168,76,.14); padding:18px 10px}
  .ticker__cell:nth-child(odd){border-right:1px solid rgba(201,168,76,.14)}
}

/* ---------- generic section heading ---------- */
.shead{max-width:64ch; margin-bottom:clamp(32px,4vw,58px)}
.shead .d2{margin-bottom:.7rem}

/* ---------- cards ---------- */
.grid{display:grid; gap:clamp(14px,1.8vw,24px)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:940px){ .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:600px){ .g2,.g3,.g4{grid-template-columns:1fr} }

.card{
  background:#fff; border:1px solid var(--hair-dark); padding:clamp(22px,2.4vw,32px);
  display:flex; flex-direction:column; gap:.65rem;
  transition:border-color .26s var(--ease), transform .26s var(--ease), box-shadow .26s var(--ease);
}
.card:hover{border-color:var(--gold); transform:translateY(-3px); box-shadow:0 14px 40px -22px rgba(12,31,23,.4)}
.card__k{font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold)}
.card h3{font-size:1.16rem; letter-spacing:-.015em}
.card p{color:var(--txt-mute); font-size:.95rem; margin:0}
.on-dark .card{background:rgba(245,237,214,.045); border-color:rgba(201,168,76,.2)}
.on-dark .card h3{color:var(--sand)}
.on-dark .card p{color:var(--txt-light)}

/* sector card with image */
.sector{
  position:relative; overflow:hidden; background:var(--ink); color:var(--sand);
  min-height:340px; display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(22px,2.4vw,30px); border:1px solid rgba(201,168,76,.2);
}
.sector img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease), filter .5s; filter:saturate(.85) brightness(.72);
}
.sector::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(12,31,23,.95) 8%, rgba(12,31,23,.35) 55%, rgba(12,31,23,.15));
}
.sector > *{position:relative; z-index:2}
.sector:hover img{transform:scale(1.06); filter:saturate(1) brightness(.8)}
.sector h3{font-size:1.3rem; margin-bottom:.5rem}
.sector p{color:var(--txt-light); font-size:.92rem; margin:0}
.sector__n{
  position:absolute; top:clamp(18px,2vw,26px); right:clamp(18px,2vw,26px); z-index:2;
  font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.14em; color:var(--gold-lt);
  border:1px solid rgba(201,168,76,.45); padding:5px 10px;
}

/* ---------- spec table (from the leasing brochures) ---------- */
.spec{width:100%; border-collapse:collapse; font-size:.93rem}
.spec caption{
  text-align:left; font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold); padding-bottom:14px;
}
.spec th,.spec td{padding:14px 16px; vertical-align:top; text-align:left; border-bottom:1px solid var(--hair-dark)}
.spec thead th{
  background:var(--forest); color:var(--sand); font-family:var(--ff-mono);
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500; border-bottom:0;
}
.spec tbody th{width:30%; font-family:var(--ff-body); font-weight:600; color:var(--forest); font-size:.9rem}
.spec td ul li{position:relative; padding-left:18px; margin-bottom:.35rem; color:var(--txt-mute)}
.spec td ul li::before{content:""; position:absolute; left:0; top:.62em; width:7px; height:1px; background:var(--gold)}
.spec tbody tr:hover{background:var(--paper-2)}
.tbl-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* ---------- tabs ---------- */
.tabs{display:flex; flex-wrap:wrap; gap:0; border-bottom:1px solid var(--hair-dark); margin-bottom:34px}
.tab{
  background:none; border:0; border-bottom:2px solid transparent; padding:14px 20px;
  font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--txt-mute); transition:.2s;
}
.tab:hover{color:var(--forest)}
.tab[aria-selected="true"]{color:var(--forest); border-bottom-color:var(--gold)}
.tabpanel[hidden]{display:none}

/* ---------- allocation board (signature) ---------- */
.board{background:var(--ink); color:var(--sand); border:1px solid var(--hair)}
.board__bar{
  display:flex; flex-wrap:wrap; gap:14px; align-items:center;
  padding:18px clamp(16px,2vw,26px); border-bottom:1px solid var(--hair);
  background:linear-gradient(180deg, rgba(46,107,79,.28), transparent);
}
.board__search{
  flex:1 1 240px; background:rgba(245,237,214,.06); border:1px solid rgba(201,168,76,.24);
  color:var(--sand); padding:11px 14px; font-family:var(--ff-mono); font-size:.78rem;
}
.board__search::placeholder{color:rgba(245,237,214,.42)}
.board__search:focus{outline:none; border-color:var(--gold-lt); background:rgba(245,237,214,.1)}
.board__count{font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.14em; color:var(--gold-lt); white-space:nowrap}
.chips{display:flex; flex-wrap:wrap; gap:8px; padding:16px clamp(16px,2vw,26px); border-bottom:1px solid var(--hair)}
.chip{
  background:transparent; border:1px solid rgba(201,168,76,.28); color:rgba(245,237,214,.8);
  font-family:var(--ff-mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase;
  padding:8px 13px; transition:.2s;
}
.chip:hover{border-color:var(--gold-lt); color:var(--sand)}
.chip[aria-pressed="true"]{background:var(--gold); border-color:var(--gold); color:var(--ink); font-weight:700}
.chip span{opacity:.62; margin-left:.5em}
.chip[aria-pressed="true"] span{opacity:.75}

.board__list{max-height:620px; overflow:auto; scrollbar-width:thin; scrollbar-color:var(--moss) transparent}
.board__list::-webkit-scrollbar{width:9px}
.board__list::-webkit-scrollbar-thumb{background:var(--moss)}
.row{
  display:grid; grid-template-columns:64px 1fr 240px; gap:16px; align-items:baseline;
  padding:13px clamp(16px,2vw,26px); border-bottom:1px solid rgba(201,168,76,.1);
  transition:background .16s;
}
.row:hover{background:rgba(201,168,76,.07)}
.row__n{font-family:var(--ff-mono); font-size:.72rem; color:var(--gold); letter-spacing:.06em}
.row__t{font-size:.96rem; color:var(--sand)}
.row__t mark{background:rgba(201,168,76,.34); color:#fff; padding:0 2px}
.row__g{font-family:var(--ff-mono); font-size:.63rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(245,237,214,.5); text-align:right}
.board__empty{padding:56px 26px; text-align:center; color:rgba(245,237,214,.6); font-family:var(--ff-mono); font-size:.8rem}
@media(max-width:760px){
  .row{grid-template-columns:46px 1fr; gap:10px}
  .row__g{grid-column:2; text-align:left; margin-top:2px}
}

/* ---------- masterplan explorer ---------- */
.plan{position:relative; background:var(--paper-2); border:1px solid var(--hair-dark); overflow:hidden}
.plan__img{width:100%; display:block}
.hot{
  position:absolute; transform:translate(-50%,-50%); z-index:3;
  background:rgba(12,31,23,.9); color:var(--sand); border:1px solid var(--gold);
  font-family:var(--ff-mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase;
  padding:9px 13px; transition:.24s var(--ease); white-space:nowrap;
}
.hot::after{
  content:""; position:absolute; inset:-6px; border:1px solid rgba(201,168,76,.4);
  opacity:0; transition:opacity .24s;
}
.hot:hover,.hot[aria-pressed="true"]{background:var(--gold); color:var(--ink); font-weight:700}
.hot:hover::after,.hot[aria-pressed="true"]::after{opacity:1}
.plan__info{
  background:var(--forest); color:var(--sand); padding:clamp(24px,3vw,38px);
  border:1px solid var(--hair); border-top:0;
}
.plan__info h3{color:var(--gold-lt); font-size:1.3rem; margin-bottom:.6rem}
.plan__info p{color:var(--txt-light); margin-bottom:1rem}
.plan__meta{display:flex; flex-wrap:wrap; gap:26px; font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(245,237,214,.6)}
.plan__meta b{display:block; color:var(--gold-lt); font-size:1.05rem; letter-spacing:0; margin-top:.3rem; font-family:var(--ff-display); text-transform:none}

/* ---------- timeline ---------- */
.tl{position:relative; padding-left:0}
.tl__item{position:relative; padding:0 0 34px 34px; border-left:1px solid var(--hair)}
.tl__item:last-child{border-left-color:transparent; padding-bottom:0}
.tl__item::before{
  content:""; position:absolute; left:-5px; top:6px; width:9px; height:9px;
  background:var(--gold); border-radius:50%;
}
.tl__ph{font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-lt)}
.tl__item h3{font-size:1.12rem; margin:.45rem 0 .5rem; color:var(--sand)}
.tl__item p{color:var(--txt-light); font-size:.94rem; margin:0}

/* ---------- comparison table ---------- */
.cmp{width:100%; border-collapse:collapse; font-size:.86rem; min-width:720px}
.cmp th,.cmp td{padding:12px 14px; text-align:left; border-bottom:1px solid var(--hair-dark)}
.cmp thead th{background:var(--forest); color:var(--sand); font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; font-weight:500}
.cmp thead th:nth-child(2){background:var(--gold); color:var(--ink); font-weight:700}
.cmp tbody th{font-weight:600; color:var(--forest)}
.cmp td:nth-child(2){background:rgba(184,150,62,.1); font-weight:600; color:var(--forest)}
.cmp tbody tr:hover td,.cmp tbody tr:hover th{background:var(--paper-2)}
.cmp tbody tr:hover td:nth-child(2){background:rgba(184,150,62,.18)}

/* ---------- accordion ---------- */
.acc{border-top:1px solid var(--hair-dark)}
.acc__item{border-bottom:1px solid var(--hair-dark)}
.acc__btn{
  width:100%; background:none; border:0; text-align:left; padding:22px 44px 22px 0;
  font-family:var(--ff-display); font-weight:600; font-size:1.05rem; color:var(--forest);
  position:relative; letter-spacing:-.01em;
}
.acc__btn::after{
  content:"+"; position:absolute; right:8px; top:50%; transform:translateY(-50%);
  font-family:var(--ff-mono); font-size:1.2rem; color:var(--gold); transition:transform .3s var(--ease);
}
.acc__btn[aria-expanded="true"]::after{transform:translateY(-50%) rotate(45deg)}
.acc__panel{overflow:hidden; max-height:0; transition:max-height .38s var(--ease)}
.acc__panel > div{padding:0 0 24px; color:var(--txt-mute); max-width:76ch}

/* ---------- quote / chairman ---------- */
.quote{display:grid; grid-template-columns:300px 1fr; gap:clamp(28px,4vw,60px); align-items:center}
.quote__img{position:relative}
.quote__img img{width:100%; filter:drop-shadow(0 24px 46px rgba(12,31,23,.5))}
.quote blockquote{margin:0; font-family:var(--ff-display); font-weight:400; font-size:clamp(1.15rem,1.85vw,1.55rem); line-height:1.42; letter-spacing:-.018em; color:var(--sand)}
.quote blockquote::before{content:"“"; display:block; font-size:3.4rem; color:var(--gold); line-height:.6; margin-bottom:.2em}
.quote figcaption{margin-top:1.6rem; font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-lt)}
.quote figcaption span{display:block; color:rgba(245,237,214,.55); margin-top:.35rem}
@media(max-width:760px){ .quote{grid-template-columns:1fr} .quote__img{max-width:220px} }

/* ---------- leadership ---------- */
.lead{border:1px solid var(--hair-dark); padding:clamp(20px,2.2vw,28px); background:#fff; height:100%}
.lead__name{font-family:var(--ff-display); font-weight:700; font-size:1.08rem; color:var(--forest)}
.lead__role{font-family:var(--ff-mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin:.4rem 0 .9rem}
.lead p{font-size:.88rem; color:var(--txt-mute); margin:0}

/* ---------- form ---------- */
.form{display:grid; gap:18px; grid-template-columns:repeat(2,1fr)}
.field{display:flex; flex-direction:column; gap:8px}
.field--full{grid-column:1/-1}
.field label{font-family:var(--ff-mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-lt)}
.field input,.field select,.field textarea{
  background:rgba(245,237,214,.06); border:1px solid rgba(201,168,76,.24); color:var(--sand);
  padding:13px 15px; font-family:var(--ff-body); font-size:.96rem; border-radius:0;
}
.field textarea{min-height:130px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--gold-lt); background:rgba(245,237,214,.1)}
.field select option{background:var(--forest); color:var(--sand)}
.form__note{grid-column:1/-1; font-size:.82rem; color:rgba(245,237,214,.55)}
.form__msg{grid-column:1/-1; font-family:var(--ff-mono); font-size:.78rem; padding:14px; border:1px solid var(--gold); color:var(--gold-lt)}
@media(max-width:700px){ .form{grid-template-columns:1fr} }

/* ---------- footer ---------- */
.foot{background:var(--ink); color:var(--sand); padding-block:clamp(48px,6vw,84px) 30px; border-top:1px solid var(--hair)}
.foot__grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:clamp(24px,3vw,48px)}
.foot h4{font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:1.1rem; font-weight:500}
.foot a{color:rgba(245,237,214,.72); font-size:.92rem; transition:color .2s}
.foot a:hover{color:var(--gold-lt)}
.foot li{margin-bottom:.6rem}
.foot__logo{height:42px; width:auto; margin-bottom:1.2rem}
.foot__addr{font-size:.9rem; color:rgba(245,237,214,.68); font-style:normal; line-height:1.8}
.foot__bar{
  margin-top:clamp(36px,4vw,58px); padding-top:24px; border-top:1px solid rgba(201,168,76,.16);
  display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between;
  font-family:var(--ff-mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(245,237,214,.45);
}
@media(max-width:900px){ .foot__grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .foot__grid{grid-template-columns:1fr} }

/* ---------- page header (inner pages) ---------- */
.phead{
  background:var(--forest); color:var(--sand); padding-top:calc(var(--nav-h) + clamp(48px,6vw,90px));
  padding-bottom:clamp(48px,6vw,90px); position:relative; overflow:hidden;
}
.phead::before{
  content:""; position:absolute; inset:0; opacity:.16;
  background:url("../img/band-erisha-dusk-wide.jpg") center/cover no-repeat;
}
.phead::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, var(--forest) 32%, rgba(26,60,46,.6));
}
.phead .wrap{position:relative; z-index:2}
.phead h1{max-width:18ch; font-size:clamp(2.1rem,4.6vw,3.8rem); font-stretch:110%; text-transform:uppercase}
.phead p{max-width:60ch; margin-top:1.2rem; color:var(--txt-light); font-size:clamp(1rem,1.3vw,1.14rem)}
.crumb{font-family:var(--ff-mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(245,237,214,.5); margin-bottom:1.4rem}
.crumb a:hover{color:var(--gold-lt)}

/* ---------- misc ---------- */
.checklist li{position:relative; padding-left:26px; margin-bottom:.72rem; font-size:.97rem}
.checklist li::before{
  content:""; position:absolute; left:0; top:.52em; width:11px; height:6px;
  border-left:1.6px solid var(--gold); border-bottom:1.6px solid var(--gold);
  transform:rotate(-45deg);
}
.on-dark .checklist li{color:var(--txt-light)}
.rule{height:1px; background:var(--hair-dark); border:0; margin-block:clamp(36px,4vw,64px)}
.on-dark .rule{background:var(--hair)}
.pill{
  display:inline-block; font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; border:1px solid var(--gold); color:var(--gold); padding:5px 11px;
}
.figure-cap{font-family:var(--ff-mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--txt-mute); margin-top:12px}
.on-dark .figure-cap{color:rgba(245,237,214,.5)}
.disclaimer{font-size:.78rem; color:var(--txt-mute); line-height:1.7; max-width:90ch}
.on-dark .disclaimer{color:rgba(245,237,214,.5)}

/* ---------- reveal ---------- */
.rv{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.rv.in{opacity:1; transform:none}
.rv[data-d="1"]{transition-delay:.08s} .rv[data-d="2"]{transition-delay:.16s}
.rv[data-d="3"]{transition-delay:.24s} .rv[data-d="4"]{transition-delay:.32s}

/* A full-height coloured panel must never fade as a block — that leaves a hole in
   the page while it waits to be revealed. Animate its contents instead. */
.spread__title.rv,.spread__body.rv,.plan__info.rv{opacity:1; transform:none; transition:none}
.spread__title.rv > *,.spread__body.rv > *,.plan__info.rv > *{
  opacity:0; transform:translateY(16px);
  transition:opacity .62s var(--ease), transform .62s var(--ease);
}
.spread__title.rv.in > *,.spread__body.rv.in > *,.plan__info.rv.in > *{opacity:1; transform:none}
.spread__title.rv.in > :nth-child(2),.spread__body.rv.in > :nth-child(2){transition-delay:.07s}
.spread__title.rv.in > :nth-child(3),.spread__body.rv.in > :nth-child(3){transition-delay:.14s}
.spread__title.rv.in > :nth-child(4),.spread__body.rv.in > :nth-child(4){transition-delay:.21s}

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

.skip{position:absolute; left:-9999px; top:0; background:var(--gold); color:var(--ink); padding:12px 18px; z-index:200}
.skip:focus{left:8px; top:8px}

/* Headings inside the narrow dark column wrap on their own — no manual breaks */
.spread__title h2{max-width:15ch}
.spread__title .d2{font-size:clamp(1.85rem,3.4vw,2.9rem)}

/* Keep the reduced-motion override last so it wins */
@media(prefers-reduced-motion:reduce){
  .spread__title.rv > *,.spread__body.rv > *,.plan__info.rv > *{opacity:1; transform:none}
}

/* Buttons in the flex-column dossier panels must not stretch full width */
.spread__body > .btn,.spread__title > .btn,.spread__body > a.btn,.spread__title > a.btn{align-self:flex-start}

/* Sector cards: on narrow screens the card grows tall and the scrim thins out,
   so strengthen it and give the type its own shadow. */
.sector::after{
  background:linear-gradient(to top,
    rgba(12,31,23,.97) 0%, rgba(12,31,23,.88) 26%,
    rgba(12,31,23,.45) 62%, rgba(12,31,23,.22) 100%);
}
.sector h3,.sector p{text-shadow:0 1px 10px rgba(12,31,23,.75)}

/* The masterplan drawing is tall and portrait; centre the phase panel against it
   so the pair reads as one spread rather than a short note beside a long image. */
.plan__info{display:flex; flex-direction:column; justify-content:center; min-height:100%}
@media(max-width:900px){
  #planwrap,.plan + .plan__info{grid-template-columns:1fr}
  .plan__info{border-top:0}
}
.planwrap{grid-template-columns:1.32fr 1fr}
@media(max-width:900px){ .planwrap{grid-template-columns:1fr} }

/* The activity-count badge sat on whatever the photo happened to be doing behind
   it, so on the bright factory shots it disappeared. Give it its own ground. */
.sector__n{
  background:rgba(12,31,23,.8);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}

/* The register scrolls inside its own frame; without an edge fade the clipped
   last row reads as a rendering fault rather than an invitation to scroll. */
.board{position:relative}
.board__list{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 56px),transparent);
             mask-image:linear-gradient(to bottom,#000 calc(100% - 56px),transparent)}
.board__list:not(:hover){scrollbar-color:rgba(46,107,79,.7) transparent}

/* Contact: enquiry form beside the address cards, stacking on tablet down.
   Previously this pair was pinned two-up inline and forced a 698px page on a
   390px screen. */
.contactgrid{grid-template-columns:1.25fr .95fr}
@media(max-width:860px){ .contactgrid{grid-template-columns:1fr} }

/* Grid and flex children default to min-width:auto, so one wide descendant
   (a long table, a nowrap label) can widen the whole track and push the page
   sideways. Cap them. */
.grid > *,.spread > *,.hero__grid > *,.ticker__row > *,.foot__grid > *{min-width:0}

/* A <select> sizes itself to its longest option, and several of these options are
   full sentences — that intrinsic width was widening the form track and the page
   with it. Force the controls to obey their column instead. */
.field input,.field select,.field textarea{width:100%; min-width:0; max-width:100%}
.field select{text-overflow:ellipsis}

/* An inline max-width beats the reset's img{max-width:100%}, so an image given a
   fixed cap could still exceed a narrower container. Belt and braces. */
img{max-width:100% !important; height:auto}
.quote__img{max-width:220px}
@media(min-width:761px){ .quote__img{max-width:none} }

/* Static phase cards. The interactive masterplan shows one phase at a time, which
   means a visitor who never clicks — or who prints the page — only ever sees one.
   These carry all three in full, unconditionally. */
.phase{
  background:#fff; border:1px solid var(--hair-dark); border-top:3px solid var(--gold);
  padding:clamp(22px,2.4vw,30px); display:flex; flex-direction:column; gap:.9rem;
  transition:border-color .26s var(--ease), transform .26s var(--ease), box-shadow .26s var(--ease);
}
.phase:hover{transform:translateY(-3px); box-shadow:0 14px 40px -22px rgba(12,31,23,.4)}
.phase__tag{
  font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--gold);
}
.phase h3{font-size:1.15rem; color:var(--forest); letter-spacing:-.015em}
.phase .checklist{margin:0; flex:1}
.phase .checklist li{font-size:.91rem; color:var(--txt-mute); margin-bottom:.55rem}
.phase__state{
  align-self:flex-start; font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--forest); background:rgba(184,150,62,.16);
  border:1px solid var(--hair-dark); padding:6px 11px;
}
.on-dark .phase{background:rgba(245,237,214,.045); border-color:rgba(201,168,76,.2); border-top-color:var(--gold)}
.on-dark .phase h3{color:var(--sand)}
.on-dark .phase .checklist li{color:var(--txt-light)}
.on-dark .phase__state{color:var(--gold-lt); background:rgba(201,168,76,.12); border-color:var(--hair)}

/* Social links — 32x32, official brand colours.
   The glyphs sit on a light tile because X's mark is black: on the deep green
   footer it would be invisible, and LinkedIn blue only just clears 3:1 there.
   A light ground lets every mark render in its true brand colour.
   Fills are set as SVG attributes so they survive with CSS disabled. */
/* All five marks stay on a single line at every width — they wrapped to a second
   row in the narrow Contact sidebar. 5 x 32px + 4 x 10px gap = 200px, which fits
   the tightest container on the site. */
.social{display:flex; flex-wrap:nowrap; gap:10px; margin-top:20px; padding:0; list-style:none}
.social li{flex:0 0 auto}
.social a{flex:0 0 auto}
.social a{
  position:relative;
  display:grid; place-items:center; width:32px; height:32px;
  background:var(--paper); border:1px solid rgba(255,255,255,.14);
  transition:background .22s var(--ease), border-color .22s var(--ease),
             transform .22s var(--ease), box-shadow .22s var(--ease);
}
.social svg{width:18px; height:18px; display:block}
/* A 32px tile is under the 44px minimum for touch, so extend the hit area
   invisibly rather than enlarging the mark. */
.social a::after{content:""; position:absolute; inset:-6px}

.social a:hover,.social a:focus-visible{transform:translateY(-2px); border-color:transparent}
.social a:hover svg path,.social a:focus-visible svg path{fill:#fff}
.social a[data-social="linkedin"]:hover, .social a[data-social="linkedin"]:focus-visible{background:#0A66C2}
.social a[data-social="x"]:hover,        .social a[data-social="x"]:focus-visible{background:#000}
.social a[data-social="youtube"]:hover,  .social a[data-social="youtube"]:focus-visible{background:#FF0000}
.social a[data-social="facebook"]:hover, .social a[data-social="facebook"]:focus-visible{background:#1877F2}
.social a[data-social="instagram"]:hover,.social a[data-social="instagram"]:focus-visible{
  background:linear-gradient(45deg,#FEDA75,#FA7E1E,#D62976,#962FBF,#4F5BD5);
}
.social a:focus-visible{outline:2px solid var(--gold-lt); outline-offset:3px}

@media(prefers-reduced-motion:reduce){ .social a:hover{transform:none} }