/* ==========================================================================
   RIPRO — Ramawat Infraprojects
   Design system: "The Development Drawing Set"
   Dark drafting sheet + amber brand gradient + survey blue-grey linework
   ========================================================================== */

:root{
  /* Ink */
  --ink:#101114;
  --ink-2:#16181C;
  --ink-3:#1E2126;
  --line:#2A2E35;
  --line-soft:#22252B;

  /* Brand amber, sampled from the RIPRO mark */
  --amber:#F79420;
  --amber-hi:#FFC40C;
  --amber-lo:#F47821;
  --amber-grad:linear-gradient(180deg,#FFC40C 0%,#F47821 100%);

  /* Paper */
  --paper:#EDEAE3;
  --paper-2:#E3DFD5;
  --paper-line:#CFC9BB;

  /* Survey linework */
  --steel:#7C8A97;
  --steel-dk:#4C5661;

  /* Type colours */
  --tx:#F2F1EE;
  --tx-dim:#9BA2AB;
  --tx-dark:#15171A;
  --tx-dark-dim:#5C6067;

  /* Type */
  --display:"Archivo","Arial Narrow",Helvetica,sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  /* Layout */
  --gut:clamp(20px,5vw,64px);
  --maxw:1320px;
  --rad:2px;
}

/* ---------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--ink); color:var(--tx);
  font-family:var(--body); font-size:16px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block; border:0}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,h4{margin:0; font-family:var(--display); font-weight:800; line-height:.98; letter-spacing:-.028em; text-transform:uppercase}
p{margin:0}
::selection{background:var(--amber); color:#12130F}

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

/* ------------------------------------------------------------ type scale */
.d1{font-size:clamp(2.5rem,5.6vw,4.9rem)}
.d2{font-size:clamp(2.1rem,5vw,4.1rem)}
.d3{font-size:clamp(1.5rem,2.7vw,2.3rem)}
.d4{font-size:clamp(1.1rem,1.6vw,1.35rem); letter-spacing:-.015em}

.lead{font-size:clamp(1rem,1.35vw,1.18rem); line-height:1.62; color:var(--tx-dim); max-width:60ch}
.small{font-size:.9rem; line-height:1.6; color:var(--tx-dim)}

.tag{
  font-family:var(--mono); font-size:.66rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--steel);
  display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px;
}
.tag::after{content:""; flex:1; height:1px; background:var(--line); max-width:180px}
.tag--solo::after{display:none}
.tag b{color:var(--amber); font-weight:500}

.amber{color:var(--amber-hi)}
.amber-text{
  background:var(--amber-grad); -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

/* ------------------------------------------------------------- structure */
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut)}
.section{position:relative; padding-block:clamp(72px,10vw,140px)}
.section--tight{padding-block:clamp(56px,7vw,96px)}
.section--paper{background:var(--paper); color:var(--tx-dark)}
.section--paper .lead,.section--paper .small{color:var(--tx-dark-dim)}
.section--paper .tag{color:var(--steel-dk)}
.section--paper .tag::after{background:var(--paper-line)}
.section--ink2{background:var(--ink-2)}

/* drafting grid, used sparingly */
.grid-bg::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 0%,transparent 78%);
          mask-image:radial-gradient(120% 90% at 50% 0%,#000 0%,transparent 78%);
  opacity:.6;
}
.section > .wrap{position:relative; z-index:1}

.sheet-rule{height:1px; background:var(--line); border:0; margin:0}
.section--paper .sheet-rule{background:var(--paper-line)}

/* ------------------------------------------------------------------ header */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:80;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background:rgba(16,17,20,.6); border-bottom:1px solid transparent;
  transition:background .3s ease,border-color .3s ease;
}
.hdr.is-stuck{background:rgba(16,17,20,.94); border-bottom-color:var(--line)}
.hdr__in{display:flex; align-items:center; gap:24px; height:74px}
.hdr__logo img{height:34px; width:auto}
.nav{display:flex; align-items:center; gap:30px; margin-left:auto}
.nav a{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tx-dim); position:relative; padding-block:6px; transition:color .2s ease;
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--tx)}
.nav a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--amber-grad);
}
.hdr__cta{margin-left:6px}
.burger{display:none; margin-left:auto; width:44px; height:44px; align-items:center; justify-content:center}
.burger span{display:block; width:22px; height:1.5px; background:var(--tx); position:relative; transition:.25s}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:22px; height:1.5px; background:var(--tx); transition:.25s}
.burger span::before{top:-7px} .burger span::after{top:7px}
.is-open .burger span{background:transparent}
.is-open .burger span::before{top:0; transform:rotate(45deg)}
.is-open .burger span::after{top:0; transform:rotate(-45deg)}

/* ------------------------------------------------------------------ buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--mono); font-size:.72rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  padding:15px 24px; border-radius:var(--rad); border:1px solid transparent;
  transition:transform .18s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--amber-grad); color:#17130A; font-weight:600}
.btn--ghost{border-color:var(--line); color:var(--tx)}
.btn--ghost:hover{border-color:var(--steel)}
.btn--paper{border:1px solid var(--tx-dark); color:var(--tx-dark)}
.btn--paper:hover{background:var(--tx-dark); color:var(--paper)}
.btn--sm{padding:11px 17px; font-size:.66rem}
.btn__dot{width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.65}

.btn-row{display:flex; flex-wrap:wrap; gap:12px}

/* =========================================================== HERO */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; padding-top:120px}
.hero__bg{position:absolute; inset:0; z-index:0}
.hero__bg img{width:100%; height:100%; object-fit:cover; object-position:50% 62%; filter:grayscale(.32) contrast(1.06) brightness(.62)}
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(16,17,20,.86) 0%,rgba(16,17,20,.5) 34%,rgba(16,17,20,.92) 82%,var(--ink) 100%),
             linear-gradient(90deg,rgba(16,17,20,.9) 0%,rgba(16,17,20,.15) 62%);
}
.hero__in{position:relative; z-index:2; width:100%; padding-bottom:clamp(40px,7vw,84px)}
.hero__grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(28px,5vw,64px); align-items:end}
.hero h1{margin-block:22px 0}
.hero h1 .ln{display:block; overflow:hidden}
.hero h1 .ln > span{display:block; transform:translateY(105%); animation:rise .9s cubic-bezier(.16,.84,.34,1) forwards}
.hero h1 .ln:nth-child(2) > span{animation-delay:.08s}
.hero h1 .ln:nth-child(3) > span{animation-delay:.16s}
.hero h1 .ln:nth-child(4) > span{animation-delay:.24s}
@keyframes rise{to{transform:translateY(0)}}
.hero__sub{margin-top:26px; max-width:52ch}
.hero__own{
  margin-top:22px; display:inline-flex; align-items:center; gap:14px;
  border-left:2px solid var(--amber); padding:4px 0 4px 16px;
  font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:-.01em;
  font-size:clamp(.95rem,1.5vw,1.15rem); line-height:1.25;
}
.hero .btn-row{margin-top:34px}
.hero__aside{padding-bottom:8px}
.hero__meta{display:flex; gap:26px; flex-wrap:wrap; margin-top:26px; padding-top:22px; border-top:1px solid var(--line)}
.hero__meta div{min-width:78px}
.hero__meta b{display:block; font-family:var(--display); font-size:1.6rem; font-weight:800; letter-spacing:-.03em}
.hero__meta span{font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--steel)}

.scroll-cue{
  position:absolute; left:var(--gut); bottom:18px; z-index:3;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--steel);
  display:flex; align-items:center; gap:10px;
}
.scroll-cue i{display:block; width:1px; height:26px; background:linear-gradient(var(--amber),transparent); animation:cue 1.9s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.3; transform:scaleY(.6)}50%{opacity:1; transform:scaleY(1)}}

/* ============================================== parcel drawing (signature) */
.parcel{width:100%; height:auto; display:block; overflow:visible}
.parcel .bound{fill:rgba(247,148,32,.05); stroke:var(--amber); stroke-width:2; stroke-linejoin:round}
.parcel .bound-glow{fill:none; stroke:var(--amber); stroke-width:7; opacity:.13; filter:blur(3px)}
.parcel .grid{stroke:var(--line); stroke-width:1}
.parcel .tick{stroke:var(--steel); stroke-width:1}
.parcel .node{fill:var(--ink); stroke:var(--amber-hi); stroke-width:1.6}
.parcel .lbl{font-family:var(--mono); font-size:9px; letter-spacing:.12em; fill:var(--steel); text-transform:uppercase}
.parcel .lbl-a{fill:var(--amber-hi)}
.parcel .road{stroke:var(--steel); stroke-width:2.5; fill:none; stroke-dasharray:1 6; stroke-linecap:round}
.parcel .plot{fill:none; stroke:var(--steel-dk); stroke-width:1}
.parcel .mass{fill:rgba(124,138,151,.18); stroke:var(--steel); stroke-width:1.2}
.parcel .build{fill:rgba(247,148,32,.16); stroke:var(--amber); stroke-width:1.4}
.parcel .lit{fill:var(--amber-hi)}
.parcel .green{fill:rgba(124,138,151,.5)}
.parcel .legend{font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; fill:var(--steel)}
.parcel .legend-n{fill:var(--amber)}
.parcel .dimline{stroke:var(--steel-dk); stroke-width:1; stroke-dasharray:3 3}

.parcel .stg{opacity:0; transform:translateY(8px); transition:opacity .55s ease, transform .55s ease}
.parcel .stg.on{opacity:1; transform:translateY(0)}

/* hero draw-in */
.parcel--hero .bound{stroke-dasharray:1600; stroke-dashoffset:1600; animation:draw 2.1s .25s cubic-bezier(.5,0,.2,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.parcel--hero .node{opacity:0; animation:pop .5s ease forwards}
.parcel--hero .node:nth-of-type(1){animation-delay:1.5s}
.parcel--hero .node:nth-of-type(2){animation-delay:1.62s}
.parcel--hero .node:nth-of-type(3){animation-delay:1.74s}
.parcel--hero .node:nth-of-type(4){animation-delay:1.86s}
.parcel--hero .node:nth-of-type(5){animation-delay:1.98s}
.parcel--hero .node:nth-of-type(6){animation-delay:2.1s}
.parcel--hero .node:nth-of-type(7){animation-delay:2.22s}
@keyframes pop{from{opacity:0; transform:scale(.4)}to{opacity:1; transform:scale(1)}}

/* =========================================================== proposition */
.prop{display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(20px,3vw,40px); align-items:start}
.prop__l{grid-column:1/span 6}
.prop__r{grid-column:8/span 5}
.prop__statement{font-size:clamp(1.9rem,4.4vw,3.6rem); margin-top:20px}
.prop__statement em{font-style:normal; display:block; color:var(--steel)}
.prop__note{
  margin-top:26px; padding:20px 22px; border:1px solid var(--line); border-left:2px solid var(--amber);
  background:var(--ink-2); border-radius:var(--rad);
}
.nots{list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--rad); overflow:hidden}
.nots li{background:var(--ink); padding:16px 20px; display:flex; align-items:flex-start; gap:14px}
.nots li span{font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; color:var(--steel); padding-top:4px; min-width:26px}
.nots li b{font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:-.01em; font-size:1rem}
.nots li p{font-size:.88rem; color:var(--tx-dim); margin-top:3px}

/* =============================================================== model */
.model{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:44px}
.model__c{background:var(--ink-2); padding:clamp(26px,3.4vw,42px); position:relative; min-height:280px; display:flex; flex-direction:column}
.model__c::before{
  content:""; position:absolute; top:14px; right:14px; width:12px; height:12px;
  border-top:1px solid var(--line); border-right:1px solid var(--line);
}
.model__n{font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; color:var(--amber)}
.model__c h3{font-size:clamp(1.25rem,2vw,1.7rem); margin-top:34px}
.model__c p{margin-top:auto; padding-top:18px; font-size:.92rem; color:var(--tx-dim)}
.model__band{
  margin-top:1px; background:var(--ink-2); border:1px solid var(--line); border-top:0;
  padding:clamp(28px,4vw,52px); text-align:center;
}
.model__band h3{font-size:clamp(1.7rem,4.2vw,3.1rem)}
.model__band h3 span{display:block}
.model__band h3 span:nth-child(2){color:var(--amber)}
.model__band p{margin-top:14px; color:var(--tx-dim); font-size:.95rem}

/* ==================================================== land explorer tabs */
.explore{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,5vw,70px); align-items:center; margin-top:44px}
.uses{display:flex; flex-wrap:wrap; gap:8px; margin-top:26px}
.use{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.13em; text-transform:uppercase;
  padding:11px 16px; border:1px solid var(--line); border-radius:var(--rad); color:var(--tx-dim);
  transition:.2s;
}
.use:hover{border-color:var(--steel); color:var(--tx)}
.use[aria-pressed="true"]{background:var(--amber-grad); color:#17130A; border-color:transparent; font-weight:600}
.use-out{margin-top:26px; min-height:96px; border-top:1px solid var(--line); padding-top:22px}
.use-out h3{font-size:1.25rem}
.use-out p{margin-top:10px; color:var(--tx-dim); font-size:.93rem; max-width:46ch}
.explore__viz{background:var(--ink-2); border:1px solid var(--line); padding:clamp(18px,2.6vw,34px); border-radius:var(--rad)}

/* ========================================================== journey (7) */
.journey{position:relative}
.journey__grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(30px,6vw,90px); align-items:start}
.journey__sticky{position:sticky; top:110px}
.journey__viz{background:var(--ink-2); border:1px solid var(--line); padding:clamp(18px,2.4vw,30px); border-radius:var(--rad)}
.journey__bar{display:flex; gap:4px; margin-top:18px}
.journey__bar i{flex:1; height:2px; background:var(--line); transition:background .4s ease}
.journey__bar i.on{background:var(--amber)}
.stages{display:flex; flex-direction:column}
.stage{padding-block:clamp(46px,9vh,90px); border-top:1px solid var(--line); opacity:.34; transition:opacity .45s ease}
.stage:first-child{border-top:0}
.stage.is-active{opacity:1}
.stage__n{font-family:var(--mono); font-size:.72rem; letter-spacing:.22em; color:var(--amber)}
.stage h3{font-size:clamp(1.6rem,3vw,2.5rem); margin-top:12px}
.stage p{margin-top:14px; color:var(--tx-dim); max-width:44ch; font-size:.95rem}
.stage ul{margin:20px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:7px}
.stage li{
  font-family:var(--mono); font-size:.63rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--steel); border:1px solid var(--line); padding:7px 11px; border-radius:var(--rad);
}

/* ================================================================ reasons */
.reasons{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:44px}
.reason{background:var(--ink); padding:clamp(26px,3vw,38px); transition:background .3s ease}
.reason:hover{background:var(--ink-2)}
.reason__i{font-family:var(--mono); font-size:.64rem; letter-spacing:.2em; color:var(--steel)}
.reason h3{font-size:1.2rem; margin-top:26px}
.reason p{margin-top:12px; font-size:.9rem; color:var(--tx-dim)}

/* ================================================================= stats */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--paper-line); border:1px solid var(--paper-line); margin-top:44px}
.stat{background:var(--paper); padding:clamp(26px,3.4vw,44px)}
.stat b{display:block; font-family:var(--display); font-weight:800; font-size:clamp(2.4rem,5vw,4rem); letter-spacing:-.04em; line-height:1}
.stat span{display:block; margin-top:12px; font-family:var(--mono); font-size:.64rem; letter-spacing:.17em; text-transform:uppercase; color:var(--steel-dk)}
.turnover{margin-top:44px; border:1px solid var(--paper-line); padding:clamp(22px,3vw,34px); background:rgba(255,255,255,.42)}
.bars{display:flex; align-items:flex-end; gap:clamp(10px,2.4vw,28px); height:190px; margin-top:26px}
.bar{flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:100%}
.bar i{display:block; width:100%; background:var(--tx-dark); height:0; transition:height 1.1s cubic-bezier(.2,.7,.3,1)}
.bar:last-child i{background:var(--amber-grad)}
.bar b{font-family:var(--mono); font-size:.72rem; margin-bottom:8px; color:var(--tx-dark)}
.bar span{font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; margin-top:10px; color:var(--steel-dk)}

/* ============================================================== projects */
.filters{display:flex; flex-wrap:wrap; gap:8px; margin-top:32px}
.filter{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  padding:10px 15px; border:1px solid var(--line); color:var(--tx-dim); border-radius:var(--rad); transition:.2s;
}
.filter:hover{border-color:var(--steel); color:var(--tx)}
.filter[aria-pressed="true"]{background:var(--tx); color:var(--ink); border-color:var(--tx); font-weight:600}
.pgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,22px); margin-top:30px}
.pcard{position:relative; overflow:hidden; background:var(--ink-2); border:1px solid var(--line); border-radius:var(--rad)}
.pcard__img{aspect-ratio:16/11; overflow:hidden; background:var(--ink-3)}
.pcard__img img{width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.3,1); filter:saturate(.9)}
.pcard:hover .pcard__img img{transform:scale(1.06)}
.pcard__b{padding:18px 20px 20px; border-top:1px solid var(--line)}
.pcard__cat{font-family:var(--mono); font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--amber)}
.pcard h3{font-size:1.02rem; margin-top:10px; letter-spacing:-.01em}
.pcard__m{display:flex; justify-content:space-between; gap:12px; margin-top:10px; font-family:var(--mono); font-size:.64rem; color:var(--steel); letter-spacing:.06em}
.pcard.is-hidden{display:none}

/* ================================================================ quality */
.qs{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:44px}
.qs__c{background:var(--ink-2); padding:clamp(26px,3.4vw,44px)}
.qs__c h3{font-size:1.35rem}
.qlist{list-style:none; margin:24px 0 0; padding:0; display:grid; gap:16px}
.qlist li b{display:block; font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--amber)}
.qlist li p{margin-top:5px; font-size:.89rem; color:var(--tx-dim)}
.mantra{margin-top:26px; padding-top:22px; border-top:1px solid var(--line)}
.mantra p{font-family:var(--display); text-transform:uppercase; font-weight:700; font-size:1.05rem; line-height:1.3; letter-spacing:-.01em}
.mantra p + p{margin-top:10px; color:var(--steel)}

/* ================================================================ clients */
.clients{margin-top:40px}
.cgroup + .cgroup{margin-top:34px}
.cwall{display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:var(--paper-line); border:1px solid var(--paper-line); margin-top:16px}
.cwall div{background:var(--paper); aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; padding:18px}
.cwall img{max-height:60%; max-width:78%; width:auto; object-fit:contain; filter:grayscale(1); opacity:.62; transition:.3s; mix-blend-mode:multiply}
.cwall div:hover img{filter:none; opacity:1}

/* ============================================================ leadership */
.lead-sec{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(28px,5vw,72px); align-items:center}
.quote{
  font-family:var(--display); font-weight:700; text-transform:none; letter-spacing:-.02em;
  font-size:clamp(1.2rem,2.2vw,1.85rem); line-height:1.32;
}
.quote::before{content:"“"; color:var(--amber); margin-right:2px}
.quote::after{content:"”"; color:var(--amber)}
.sig{margin-top:28px; padding-top:20px; border-top:1px solid var(--line)}
.sig b{font-family:var(--display); text-transform:uppercase; font-size:1.05rem; letter-spacing:-.01em}
.sig span{display:block; font-family:var(--mono); font-size:.64rem; letter-spacing:.17em; text-transform:uppercase; color:var(--steel); margin-top:6px}

/* ============================================================== timeline */
.tl{margin-top:44px; border-top:1px solid var(--line)}
.tl__row{
  display:grid; grid-template-columns:150px 1fr; gap:clamp(16px,4vw,60px);
  padding-block:clamp(22px,3vw,34px); border-bottom:1px solid var(--line); align-items:baseline;
  transition:background .3s ease;
}
.tl__row:hover{background:var(--ink-2)}
.tl__y{font-family:var(--display); font-weight:800; font-size:clamp(1.6rem,3.4vw,2.6rem); letter-spacing:-.03em; color:var(--amber)}
.tl__row p{color:var(--tx-dim); font-size:.98rem; max-width:64ch}

/* ============================================================ capability */
.caps{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:44px}
.cap{background:var(--ink-2); padding:clamp(26px,3.2vw,40px)}
.cap h3{font-size:1.15rem; padding-bottom:20px; border-bottom:1px solid var(--line)}
.cap ul{list-style:none; margin:20px 0 0; padding:0; display:grid; gap:12px}
.cap li{display:flex; gap:12px; align-items:baseline; font-size:.93rem; color:var(--tx-dim)}
.cap li::before{content:""; width:5px; height:5px; background:var(--amber); flex:0 0 auto; transform:translateY(-2px)}

.equip{display:grid; grid-template-columns:repeat(2,1fr); gap:0 clamp(20px,4vw,60px); margin-top:34px}
.equip__r{display:flex; align-items:baseline; gap:16px; padding-block:13px; border-bottom:1px solid var(--line)}
.equip__r b{font-family:var(--display); font-size:1.15rem; font-weight:800; color:var(--amber); min-width:74px; letter-spacing:-.02em}
.equip__r span{font-size:.9rem; color:var(--tx-dim)}

/* ================================================================= final */
.final{position:relative; text-align:center; padding-block:clamp(90px,15vw,180px); overflow:hidden}
.final h2{font-size:clamp(2.6rem,7.4vw,6rem); line-height:.94}
.final h2 span{display:block}
.final h2 span:nth-child(3){color:var(--amber)}
.final p{margin-top:26px; color:var(--tx-dim); font-size:1.05rem}
.final .btn-row{justify-content:center; margin-top:36px}

/* ================================================================ footer */
.ftr{background:var(--ink-2); border-top:1px solid var(--line); padding-block:clamp(48px,6vw,76px)}
.ftr__grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:clamp(24px,4vw,50px)}
.ftr img.mark{height:44px; width:auto}
.ftr h4{font-family:var(--mono); font-weight:500; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--steel)}
.ftr ul{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:11px}
.ftr a:hover{color:var(--amber-hi)}
.ftr .small{font-size:.86rem}
.ftr__legal{margin-top:44px; padding-top:22px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; color:var(--steel); text-transform:uppercase}

/* ================================================== sticky mobile CTA bar */
.have-land{
  position:fixed; left:0; right:0; bottom:0; z-index:70; display:none;
  background:rgba(16,17,20,.95); backdrop-filter:blur(12px); border-top:1px solid var(--line);
  padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));
}
.have-land .btn{width:100%}

/* ================================================================= modal */
.modal{position:fixed; inset:0; z-index:120; display:none}
.modal.is-open{display:block}
.modal__bg{position:absolute; inset:0; background:rgba(8,9,10,.82); backdrop-filter:blur(6px)}
.modal__panel{
  position:absolute; inset:auto 0 0 0; margin-inline:auto; max-width:640px; width:100%;
  background:var(--ink); border:1px solid var(--line); border-radius:var(--rad);
  max-height:92svh; overflow-y:auto;
  animation:slideup .4s cubic-bezier(.16,.84,.34,1);
}
@media(min-width:721px){
  .modal__panel{inset:50% auto auto 50%; transform:translate(-50%,-50%); max-height:86svh; animation:fadein .3s ease}
}
@keyframes slideup{from{transform:translateY(28px); opacity:0}to{transform:translateY(0); opacity:1}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.modal__hd{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--ink); z-index:2}
.modal__hd .tag{margin:0}
.modal__x{width:34px; height:34px; border:1px solid var(--line); border-radius:var(--rad); display:grid; place-items:center; color:var(--tx-dim)}
.modal__x:hover{color:var(--tx); border-color:var(--steel)}
.modal__body{padding:26px 24px 30px}
.steps{display:flex; gap:6px; margin-bottom:26px}
.steps i{flex:1; height:2px; background:var(--line)}
.steps i.on{background:var(--amber)}
.step{display:none}
.step.is-current{display:block}
.step h3{font-size:clamp(1.35rem,3vw,1.9rem)}
.step > p{margin-top:10px; color:var(--tx-dim); font-size:.92rem}

.field{margin-top:20px}
.field label{display:block; font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--steel); margin-bottom:9px}
.field input,.field select,.field textarea{
  width:100%; background:var(--ink-2); border:1px solid var(--line); border-radius:var(--rad);
  padding:14px 15px; font-size:.95rem; transition:border-color .2s ease;
}
.field input::placeholder,.field textarea::placeholder{color:#5A616A}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--amber)}
.field textarea{resize:vertical; min-height:96px}
.field--2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.field--2 > div{margin:0}
.choices{display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:6px}
.choice{
  border:1px solid var(--line); border-radius:var(--rad); padding:15px 16px; text-align:left;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--tx-dim); transition:.2s;
}
.choice:hover{border-color:var(--steel); color:var(--tx)}
.choice[aria-pressed="true"]{border-color:var(--amber); color:var(--tx); background:rgba(247,148,32,.08)}
.modal__ft{display:flex; gap:12px; justify-content:space-between; align-items:center; margin-top:28px; padding-top:20px; border-top:1px solid var(--line)}
.hint{font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; color:var(--steel); text-transform:uppercase}
.done{text-align:center; padding-block:20px}
.done .mark{width:54px; height:54px; border-radius:50%; background:var(--amber-grad); display:grid; place-items:center; margin:0 auto 22px; color:#17130A; font-size:1.4rem}

/* form on contact page */
.form-card{background:var(--ink-2); border:1px solid var(--line); padding:clamp(24px,3.2vw,42px); border-radius:var(--rad)}

/* ============================================================== reveal fx */
.rv{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.is-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}

/* ============================================================ responsive */
@media(max-width:1080px){
  .prop__l{grid-column:1/span 12}
  .prop__r{grid-column:1/span 12}
  .model{grid-template-columns:1fr}
  .reasons{grid-template-columns:repeat(2,1fr)}
  .caps{grid-template-columns:1fr}
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .cwall{grid-template-columns:repeat(4,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .ftr__grid{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .nav,.hdr__cta{display:none}
  .burger{display:flex}
  .hdr.is-open .nav{
    display:flex; flex-direction:column; align-items:flex-start; gap:4px;
    position:absolute; top:74px; left:0; right:0; background:var(--ink);
    border-bottom:1px solid var(--line); padding:18px var(--gut) 26px; margin:0;
  }
  .hdr.is-open .nav a{font-size:.9rem; padding-block:12px; width:100%; border-bottom:1px solid var(--line-soft)}
  .hero__grid{grid-template-columns:1fr}
  .hero__aside{display:none}
  .explore,.journey__grid,.lead-sec{grid-template-columns:1fr}
  .journey__sticky{position:sticky; top:84px; z-index:4; background:var(--ink); padding-bottom:14px; margin-bottom:6px}
  .qs{grid-template-columns:1fr}
  .equip{grid-template-columns:1fr}
  .have-land{display:block}
  body{padding-bottom:76px}
  .tl__row{grid-template-columns:1fr; gap:8px}
}
@media(max-width:620px){
  .pgrid{grid-template-columns:1fr}
  .reasons{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .cwall{grid-template-columns:repeat(3,1fr)}
  .ftr__grid{grid-template-columns:1fr}
  .field--2{grid-template-columns:1fr}
  .choices{grid-template-columns:1fr}
  .hero{min-height:92svh}
  .scroll-cue{display:none}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  .rv{opacity:1; transform:none}
  .hero h1 .ln > span{transform:none}
  .parcel--hero .bound{stroke-dashoffset:0}
  .parcel--hero .node{opacity:1}
}