/* ============================================================
   Felix Real Estate — "The Traverse"
   A navigational-survey identity for a Hyderabad NRI property firm.
   Every diaspora client is a bearing + distance from one point:
   Hyderabad, 17.3850°N 78.4867°E.

   Ink (teal-night) base · brass = home/warmth · cyan = the distance
   · warm chart-paper for light "document" sections.
   Display: Fraunces · Body: Hanken Grotesk · Data: Spline Sans Mono
   ============================================================ */

:root{
  --abyss:#0A1416;       /* chart-at-night base (teal-ink, not neutral black) */
  --abyss-2:#0D1B1E;     /* raised panel */
  --abyss-3:#102327;     /* hover panel */
  --paper:#ECE4D3;       /* warm survey-paper, light sections */
  --paper-2:#E2D8C2;     /* paper panel */
  --ink:#13110D;         /* near-black warm text on paper */
  --ink-mute:#5C5647;    /* muted text on paper */
  --mist:#A4B2AF;        /* body text on dark */
  --mist-dim:#7B948E;    /* faint text on dark — bumped for AA contrast on abyss-2 */
  --line:#F4EEE0;        /* headings on dark */
  --brass:#C8A24A;       /* HOME — warm accent + CTAs */
  --brass-2:#E4C684;     /* brass highlight */
  --brass-deep:#8C6E25;  /* brass on paper (contrast) */
  --instr:#7FB6B0;       /* instrument cyan — the distance */
  --instr-2:#A7D2CC;     /* brighter cyan for small labels */
  --instr-deep:#2E6E6A;  /* cyan on paper */
  --hair:rgba(127,182,176,.16);   /* instrument hairlines on dark */
  --hair-paper:rgba(19,17,13,.14);
  --chalk:var(--line);   /* alias used by the ventures-page headline/stat styles */
  --teal:var(--instr);   /* alias used by the ventures-page label/accent styles */

  --serif:'Fraunces',Georgia,serif;
  --sans:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --mono:'Spline Sans Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--abyss);
  color:var(--mist);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;-webkit-user-drag:none;-webkit-user-select:none;user-select:none;}
a{color:inherit;}
::selection{background:var(--brass);color:var(--abyss);}

/* ---- non-selectable UI components & interactive maps ---- */
.plan-frame,
.plan-viewer,
.plan-stage,
.plan-sheet,
.plan-hit,
.plat,
.instr-wrap,
.ticker,
.tape,
.clocks,
.nav,
.felix-navlinks,
.btn-brass,
.btn-line,
.plan-btn,
.parcel,
svg {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

body::-webkit-scrollbar{width:10px;}
body::-webkit-scrollbar-track{background:var(--abyss);}
body::-webkit-scrollbar-thumb{background:#23413f;border-radius:6px;border:2px solid var(--abyss);}
body::-webkit-scrollbar-thumb:hover{background:var(--instr);}

/* ---- shared type helpers ---- */
.serif{font-family:var(--serif);}
.it{font-style:italic;}
.mono{font-family:var(--mono);}
.eyebrow{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:var(--instr-2);
  display:flex;align-items:center;gap:14px;
}
.eyebrow .wp{color:var(--brass);}                 /* waypoint id */
.eyebrow .tick{width:26px;height:1px;background:var(--instr);opacity:.6;display:inline-block;flex:0 0 auto;}
.coord{font-family:var(--mono);letter-spacing:.04em;}

/* ---- keyframes ---- */
@keyframes felixMarquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes felixBob{0%,100%{transform:translateY(0);opacity:.8;}50%{transform:translateY(8px);opacity:.3;}}
@keyframes felixPulse{0%{transform:scale(1);opacity:.5;}70%{transform:scale(2.1);opacity:0;}100%{opacity:0;}}
@keyframes felixPing{0%{transform:scale(.6);opacity:.9;}80%,100%{transform:scale(2.4);opacity:0;}}
@keyframes sweep{to{transform:rotate(360deg);}}

/* ---- scroll reveal (hidden states only exist once JS has claimed the page) ---- */
body.js [data-reveal]:not(.is-archived){opacity:0;transform:translateY(42px);filter:blur(7px);
  transition:opacity 1.05s var(--ease),transform 1.05s var(--ease),filter 1s ease;}
body.js [data-reveal].in:not(.is-archived){opacity:1;transform:none;filter:none;}

/* ---- masked line reveals: display lines rise out of a clipped slot ---- */
.lm{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em;}
.lmi{display:block;}
body.js [data-mask] .lmi{transform:translateY(115%);transition:transform 1.05s var(--ease);}
body.js [data-mask] .lm:nth-child(2) .lmi{transition-delay:.1s;}
body.js [data-mask].in .lmi{transform:none;}

/* ============================================================
   Traverse rail — fixed left-edge progress line (the journey
   plotted as a surveyor's traverse). Quiet connective tissue.
   ============================================================ */
.rail{position:fixed;top:0;bottom:0;left:max(18px,2.4vw);width:1px;z-index:60;
  background:var(--hair);pointer-events:none;}
.rail-fill{position:absolute;top:0;left:0;width:1px;height:0;
  background:linear-gradient(var(--brass),var(--instr));box-shadow:0 0 10px rgba(200,162,74,.5);}
.rail-bug{position:absolute;left:-3px;width:7px;height:7px;border-radius:50%;
  background:var(--brass);box-shadow:0 0 0 3px rgba(200,162,74,.18);transform:translateY(-50%);}
@media(max-width:900px){ .rail{display:none;} }

/* ============================================================
   NAV
   ============================================================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;
  justify-content:space-between;padding:12px clamp(20px,5vw,64px);
  background:transparent;border-bottom:1px solid transparent;
  transition:background .4s ease,box-shadow .4s ease,border-color .4s ease,padding .4s ease;}
.nav.scrolled{background:rgba(8,16,17,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom-color:var(--hair);box-shadow:0 10px 40px rgba(0,0,0,.5);padding-top:8px;padding-bottom:8px;}
.nav-logo{height:60px;width:auto;display:block;transition:height .3s ease;}
.nav.scrolled .nav-logo{height:50px;}
.felix-navlinks{display:flex;align-items:center;gap:clamp(16px,2.6vw,36px);}
.felix-navlink{color:var(--mist);text-decoration:none;font-family:var(--mono);font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;font-weight:500;transition:color .25s ease;position:relative;}
.felix-navlink::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1px;
  background:var(--instr);transition:right .3s var(--ease);}
.felix-navlink:hover{color:var(--instr-2);}
.felix-navlink:hover::after{right:0;}

.felix-burger{display:none;width:46px;height:46px;padding:11px;margin:-6px;background:transparent;
  border:0;cursor:pointer;flex-direction:column;justify-content:space-between;z-index:1;}
.felix-burger span{display:block;width:100%;height:2px;border-radius:2px;background:var(--line);
  transition:transform .35s var(--ease),opacity .25s ease;}

/* ============================================================
   Buttons
   ============================================================ */
.btn-brass{display:inline-flex;align-items:center;gap:9px;background:var(--brass);color:var(--abyss);
  text-decoration:none;font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.02em;
  padding:11px 22px;border-radius:2px;white-space:nowrap;border:0;cursor:pointer;
  transition:transform .2s ease,box-shadow .25s ease,background .2s ease;}
.btn-brass:hover{background:var(--brass-2);transform:translateY(-2px);box-shadow:0 12px 30px rgba(200,162,74,.32);}
.btn-brass.lg{font-size:15px;padding:16px 30px;}
.btn-brass.block{width:100%;justify-content:center;padding:17px;font-size:15px;margin-top:4px;}

.btn-line{display:inline-flex;align-items:center;gap:10px;background:transparent;color:var(--line);
  text-decoration:none;font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.08em;
  padding:15px 26px;border-radius:2px;border:1px solid var(--hair);text-transform:uppercase;
  transition:border-color .25s ease,color .25s ease,background .25s ease,transform .2s ease;}
.btn-line:hover{border-color:var(--instr);color:var(--instr-2);background:rgba(127,182,176,.06);transform:translateY(-2px);}

/* ============================================================
   HERO — split: founder figure (left) · statement (right)
   The InterContinental Jeddah photo's gold backdrop fades into
   the ink panel along its right edge.
   ============================================================ */
.hero{position:relative;min-height:100vh;display:grid;
  grid-template-columns:44% 1fr;align-items:center;overflow:hidden;background:var(--abyss);}
.hero-figure{position:relative;align-self:stretch;height:100vh;overflow:hidden;}
.hero-figure img{width:100%;height:100%;object-fit:cover;object-position:50% 16%;display:block;}
.hero-figure-fade{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg, transparent 36%, rgba(10,20,22,.45) 70%, var(--abyss) 100%),
    linear-gradient(0deg, rgba(10,20,22,.5) 0%, transparent 22%),
    linear-gradient(180deg, rgba(10,20,22,.4) 0%, transparent 16%);}
.hero-text{position:relative;z-index:2;max-width:600px;
  padding:120px clamp(28px,5vw,80px) 90px clamp(34px,4vw,72px);will-change:transform,opacity;}
.hero .eyebrow{color:var(--brass-2);}
.hero .eyebrow .tick{background:var(--brass);opacity:.95;}
.hero-h1{font-family:var(--serif);font-weight:600;color:var(--line);
  font-size:clamp(46px,6.8vw,102px);line-height:.95;letter-spacing:-.04em;margin:20px 0 0;}
.hero-h1 .l1{display:block;}
.hero-h1 .l2{display:block;font-style:italic;font-weight:500;color:var(--brass);}
.hero-sub{max-width:480px;margin:28px 0 0;color:var(--mist);
  font-size:clamp(15px,1.4vw,18px);line-height:1.65;}
.hero-sub b{color:var(--instr-2);font-weight:600;}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px;}
.hero-scroll{position:absolute;bottom:26px;left:clamp(24px,5vw,72px);z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:9px;}
.hero-scroll span:first-child{font-family:var(--mono);font-size:10px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--mist-dim);}
.hero-scroll .bar{display:block;width:1px;height:42px;
  background:linear-gradient(var(--instr),transparent);animation:felixBob 1.8s ease-in-out infinite;}

/* ============================================================
   THE DIASPORA WE SERVE — copy (left) + instrument (right)
   ============================================================ */
.serve{background:var(--abyss);overflow:hidden;}
.serve-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(32px,5vw,72px);align-items:center;}
.serve-h{font-family:var(--serif);font-weight:600;font-size:clamp(30px,4.2vw,56px);
  line-height:1.05;letter-spacing:-.02em;margin:22px 0 22px;color:var(--line);}
.serve-h .it{color:var(--brass);}
.serve-p{font-size:clamp(15px,1.4vw,18px);line-height:1.75;color:var(--mist);max-width:520px;margin:0;}

/* instrument */
.instr-wrap{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;}
.instr{width:100%;max-width:580px;height:auto;overflow:visible;}
@media(max-width:860px){ .serve-grid{grid-template-columns:1fr;} .instr{max-width:440px;} }
.instr-ring{fill:none;stroke:var(--hair);stroke-width:1;}
.instr-ring.major{stroke:rgba(127,182,176,.26);}
.instr-cross{stroke:var(--hair);stroke-width:1;}
.instr-tick{stroke:rgba(127,182,176,.3);stroke-width:1;}
.instr-card{stroke:rgba(127,182,176,.5);stroke-width:1;}        /* cardinal ticks */
.instr-spoke{stroke:var(--instr);stroke-width:1;opacity:.55;
  stroke-dasharray:3 4;}
.instr-rlabel{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
  fill:var(--mist-dim);text-transform:uppercase;}
.instr-card-label{font-family:var(--mono);font-size:10px;letter-spacing:.2em;fill:var(--instr-2);}
.instr-city{font-family:var(--mono);font-size:11px;letter-spacing:.06em;fill:var(--instr-2);}
.instr-city .km{fill:var(--mist-dim);}
.instr-node{fill:var(--instr);}
.instr-node-glow{fill:var(--instr);opacity:.18;}
.instr-home{fill:var(--brass);}
.instr-home-ring{fill:none;stroke:var(--brass);stroke-width:1.5;}
.instr-home-label{font-family:var(--mono);font-size:11px;letter-spacing:.22em;fill:var(--brass-2);font-weight:600;}
.instr-home-coord{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;fill:var(--brass);opacity:.85;}
.instr-sweep{fill:url(#sweepGrad);transform-origin:300px 300px;
  animation:sweep 8s linear infinite;}
.instr-pulse{transform-origin:center;transform-box:fill-box;animation:felixPing 3s ease-out infinite;}

/* ============================================================
   Transmission ticker (replaces the generic marquee)
   ============================================================ */
.ticker{overflow:hidden;background:#081012;border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);padding:13px 0;}
.ticker-row{display:flex;width:max-content;animation:felixMarquee 38s linear infinite;will-change:transform;}
.ticker-row span{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--instr);
  white-space:nowrap;text-transform:uppercase;opacity:.7;}
.ticker-row b{color:var(--brass);font-weight:500;}

/* ============================================================
   Section scaffolding
   ============================================================ */
.section{position:relative;padding:clamp(84px,13vh,160px) clamp(24px,6vw,90px);}
.wrap{max-width:1280px;margin:0 auto;position:relative;}
.paper{background:var(--paper);color:var(--ink);}
.paper .eyebrow{color:var(--instr-deep);}
.paper .eyebrow .wp{color:var(--brass-deep);}
.paper .eyebrow .tick{background:var(--instr-deep);}

/* WAYPOINT 01 — THE STANDARD (pinned line reveal) */
.standard{position:relative;height:300vh;background:var(--abyss);}
.standard-stage{position:sticky;top:0;height:100vh;display:flex;align-items:center;
  justify-content:center;overflow:hidden;}
.standard-stage::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 60% at 50% 50%, rgba(127,182,176,.06), transparent 70%);}
.standard-inner{position:relative;max-width:1080px;padding:0 clamp(24px,6vw,80px);}
.standard-q{font-family:var(--serif);font-weight:500;font-size:clamp(28px,4.6vw,62px);
  line-height:1.22;letter-spacing:-.02em;margin:30px 0 0;color:var(--line);}
.standard-q [data-line]{display:block;will-change:opacity,transform,filter;}
.standard-q .hot{color:var(--brass);}
.standard-q .cool{color:var(--instr-2);}

/* WAYPOINT 02 — ABOUT (paper) */
.about-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(40px,6vw,84px);align-items:center;}
.about-h{font-family:var(--serif);font-weight:600;font-size:clamp(32px,4.6vw,58px);
  line-height:1.04;letter-spacing:-.02em;margin:22px 0 24px;color:var(--ink);}
.about-h .it{color:var(--brass-deep);}
.about-p{font-size:clamp(15px,1.4vw,18px);line-height:1.75;color:#3D382C;max-width:560px;margin:0 0 40px;}
.about-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.5vw,40px);
  border-top:1px solid var(--hair-paper);padding-top:32px;max-width:520px;}
.about-stat .n{font-family:var(--serif);font-weight:600;font-size:clamp(40px,4.6vw,60px);
  line-height:1;color:var(--ink);}
.about-stat .n .it{color:var(--brass-deep);}
.about-stat .d{font-size:13px;letter-spacing:.01em;color:var(--ink-mute);margin-top:10px;line-height:1.45;}

/* the "plat" — a survey parcel card standing in for the logo box */
.plat{position:relative;border:1px solid rgba(19,17,13,.18);background:#11201F;
  border-radius:3px;overflow:hidden;aspect-ratio:4/5;min-height:340px;
  box-shadow:0 30px 70px rgba(0,0,0,.22);}
.plat-grid{position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(127,182,176,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(127,182,176,.12) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:96px 96px,96px 96px,24px 24px,24px 24px;}
.plat svg{position:absolute;inset:0;width:100%;height:100%;}
.plat-tag{position:absolute;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  color:var(--instr-2);}
.plat-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:50%;max-width:210px;opacity:.95;}

/* WAYPOINT 03 — THE GUIDE (Abid) */
.guide{background:var(--abyss);overflow:hidden;}
.guide-q{margin:30px 0 clamp(48px,8vh,84px);font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(27px,4.4vw,58px);line-height:1.18;letter-spacing:-.01em;color:var(--line);max-width:1000px;}
.guide-q .hot{color:var(--brass);font-style:normal;}
.guide-grid{display:grid;grid-template-columns:330px 1fr;gap:clamp(40px,6vw,80px);align-items:start;}
.guide-photo{position:relative;width:300px;max-width:100%;}
.guide-photo img{display:block;width:300px;height:380px;max-width:100%;object-fit:cover;
  object-position:50% 16%;border-radius:3px;box-shadow:0 24px 60px rgba(0,0,0,.5);}
.guide-photo .frame{position:absolute;inset:-12px -12px 16px 16px;border:1px solid var(--hair);
  border-radius:3px;z-index:-1;}
/* Abid's own bearing: Dubai -> Hyderabad. He's a returnee NRI. */
.guide-route{display:flex;align-items:center;gap:10px;margin-top:22px;font-family:var(--mono);
  font-size:11px;letter-spacing:.08em;color:var(--instr-2);}
.guide-route .seg{flex:1;height:1px;background:linear-gradient(90deg,var(--instr),var(--brass));position:relative;}
.guide-route .seg::after{content:"";position:absolute;right:0;top:-2px;width:5px;height:5px;border-radius:50%;background:var(--brass);}
.guide-name{font-family:var(--serif);font-weight:600;font-size:30px;margin-top:24px;color:var(--line);}
.guide-role{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass);margin-top:9px;}
.guide-body{max-width:640px;}
.guide-body p{font-size:clamp(15px,1.35vw,18px);line-height:1.8;color:var(--mist);margin:0 0 24px;}
.guide-body p b{color:var(--brass-2);font-weight:600;}
.guide-body .pull{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2vw,26px);
  line-height:1.5;color:var(--line);border-left:2px solid var(--brass);padding-left:24px;margin-top:6px;}
.link-instr{color:var(--mist);text-decoration:none;display:inline-flex;align-items:center;gap:9px;
  margin-top:20px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;transition:color .25s ease;}
.link-instr:hover{color:var(--instr-2);}

/* WAYPOINT 04 — THE HOLDINGS (horizontal pin) */
.holdings{position:relative;height:260vh;background:#081012;}
.holdings-stage{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;}
.holdings-bg{position:absolute;inset:0;z-index:0;pointer-events:none;background-color:#081012;
  background-image:
    linear-gradient(rgba(127,182,176,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(127,182,176,.06) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:128px 128px,128px 128px,32px 32px,32px 32px;}
.holdings-bg::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(127,182,176,.14);}
.holdings-head{position:absolute;top:clamp(86px,11vh,120px);left:clamp(24px,6vw,90px);
  right:clamp(24px,6vw,90px);z-index:5;display:flex;justify-content:space-between;align-items:flex-end;
  pointer-events:none;will-change:transform,opacity;}
.holdings-title{text-align:left;}
.holdings-title .eyebrow{justify-content:flex-start;}
.holdings-head h2{font-family:var(--serif);font-weight:600;font-size:clamp(30px,4vw,52px);
  margin:14px 0 0;letter-spacing:-.02em;color:var(--line);}
.holdings-head h2 .it{color:var(--brass);}
.holdings-hint{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mist-dim);text-align:right;display:flex;flex-direction:column;gap:6px;align-items:flex-end;}
.holdings-row{position:relative;z-index:1;display:flex;align-items:center;gap:clamp(20px,2vw,30px);
  padding:0 clamp(24px,6vw,90px);will-change:transform;}
.holdings-intro{flex:0 0 auto;width:clamp(300px,38vw,440px);padding-right:24px;}
.holdings-intro p{font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.4vw,32px);
  line-height:1.42;color:var(--mist);margin:0;}

.parcel{position:relative;overflow:hidden;flex:0 0 auto;width:clamp(300px,30vw,372px);height:440px;
  border:1px solid var(--hair);border-radius:3px;padding:34px 32px;background:var(--abyss-2);
  display:flex;flex-direction:column;justify-content:flex-end;gap:18px;
  transition:border-color .35s ease,transform .35s ease,box-shadow .35s ease,background .35s ease;}
.parcel::before{content:"";position:absolute;inset:10px;border:1px solid transparent;
  border-top-color:rgba(127,182,176,.18);border-left-color:rgba(127,182,176,.18);
  width:16px;height:16px;pointer-events:none;z-index:1;}
.parcel::after{content:attr(data-idx);position:absolute;right:14px;bottom:-38px;
  font-family:var(--serif);font-weight:600;font-size:190px;line-height:1;letter-spacing:-.03em;
  color:rgba(127,182,176,.05);pointer-events:none;transition:color .35s ease;}
.parcel:hover::after{color:rgba(200,162,74,.07);}
.parcel-top{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-start;}
.parcel-id{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--instr);opacity:.8;}
.parcel svg.ico{width:38px;height:38px;stroke:var(--instr);}
.parcel h3{position:relative;z-index:1;font-family:var(--serif);font-weight:600;font-size:25px;margin:0 0 14px;color:var(--line);}
.parcel p{position:relative;z-index:1;font-size:14.5px;line-height:1.65;color:var(--mist-dim);margin:0;}
.parcel:hover{border-color:rgba(127,182,176,.45);transform:translateY(-6px);background:var(--abyss-3);
  box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 0 1px rgba(127,182,176,.12);}
.parcel:hover svg.ico{stroke:var(--brass-2);}
.parcel:hover .parcel-id{color:var(--brass);}

.holdings-bar{position:absolute;bottom:clamp(28px,6vh,54px);left:clamp(24px,6vw,90px);
  right:clamp(24px,6vw,90px);height:1px;background:var(--hair);}
.holdings-bar i{display:block;height:100%;background:var(--brass);transform:scaleX(0);
  transform-origin:left;will-change:transform;box-shadow:0 0 8px rgba(200,162,74,.6);}

/* WAYPOINT 05 — CONTACT */
.contact{background:var(--abyss);overflow:hidden;}
.contact-bg{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--hair) 1px,transparent 1px),linear-gradient(90deg,var(--hair) 1px,transparent 1px);
  background-size:128px 128px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);}
.contact-h{font-family:var(--serif);font-weight:600;font-size:clamp(34px,5vw,64px);
  letter-spacing:-.02em;margin:22px 0 30px;color:var(--line);}
.contact-h .it{color:var(--brass);}
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(36px,5vw,68px);align-items:stretch;}
.form{display:flex;flex-direction:column;gap:18px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.field-wrap{display:flex;flex-direction:column;gap:9px;}
.field-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mist-dim);}
.field{width:100%;background:var(--abyss-2);border:1px solid var(--hair);border-radius:2px;
  padding:14px 15px;color:var(--line);font-family:var(--sans);font-size:15px;outline:none;
  transition:border-color .25s ease,background .25s ease;}
.field::placeholder{color:var(--mist-dim);}
.field:focus{border-color:var(--instr);background:var(--abyss-3);}
.field--select{appearance:none;-webkit-appearance:none;}
.field--area{resize:vertical;min-height:118px;}
.phone-row{display:flex;gap:10px;align-items:stretch;}
.phone-row .field--code{flex:0 0 auto;width:128px;}

.wa-panel{position:relative;text-decoration:none;flex:1;background:var(--abyss-2);
  border:1px solid var(--hair);color:var(--line);border-radius:3px;padding:clamp(30px,4vw,44px);
  display:flex;flex-direction:column;justify-content:space-between;gap:22px;
  box-shadow:0 20px 50px rgba(0,0,0,.4);transition:transform .25s ease,border-color .3s ease,box-shadow .3s ease;}
.wa-panel:hover{transform:translateY(-5px);border-color:rgba(127,182,176,.4);
  box-shadow:0 32px 70px rgba(0,0,0,.5),0 0 0 1px rgba(127,182,176,.14);}
.wa-panel .t{font-family:var(--serif);font-weight:600;font-size:clamp(24px,2.6vw,32px);line-height:1.15;color:var(--line);}
.wa-panel .s{font-size:14px;margin-top:8px;color:var(--mist);}
.contact-side{display:flex;flex-direction:column;gap:20px;}
.contact-note{border:1px solid var(--hair);border-radius:3px;padding:26px 28px;}
.contact-note .h{display:flex;align-items:center;gap:10px;color:var(--instr-2);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;}
.contact-note p{font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.7vw,21px);
  line-height:1.45;color:var(--mist);margin:14px 0 0;}
.form-success{display:none;flex-direction:column;align-items:flex-start;justify-content:center;gap:16px;
  border:1px solid rgba(127,182,176,.3);border-radius:3px;padding:40px;background:rgba(127,182,176,.05);}
.form-success .ck{width:54px;height:54px;border-radius:50%;border:1.5px solid var(--instr);
  display:flex;align-items:center;justify-content:center;}
.form-success h3{font-family:var(--serif);font-weight:600;font-size:28px;margin:0;color:var(--line);}
.form-success p{font-size:15px;line-height:1.6;color:var(--mist);margin:0;}
.form-error{display:none;margin:2px 0 0;font-size:14px;line-height:1.5;color:#E39A9A;}

/* FOOTER */
.footer{background:#070D0E;color:var(--mist-dim);
  padding:clamp(60px,9vh,90px) clamp(24px,6vw,90px) 40px;border-top:1px solid var(--hair);}
.footer-top{max-width:1280px;margin:0 auto;display:flex;flex-wrap:wrap;gap:40px;
  justify-content:space-between;align-items:flex-start;}
.footer img, .footer-logo{width:clamp(160px,16vw,220px);height:auto;max-width:100%;display:block;}
.footer-tag{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--mist);
  margin:24px 0 0;max-width:360px;line-height:1.4;}
.footer-cols{display:flex;gap:clamp(40px,6vw,80px);flex-wrap:wrap;}
.footer-col{display:flex;flex-direction:column;gap:13px;}
.footer-col .h{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mist-dim);margin-bottom:4px;}
.footer-link{color:var(--mist);text-decoration:none;font-size:14px;transition:color .2s ease;}
.footer-link:hover{color:var(--instr-2);}
.footer-bottom{max-width:1280px;margin:50px auto 0;padding-top:24px;border-top:1px solid rgba(255,255,255,.06);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--mist-dim);}

/* FAB */
.fab{position:fixed;bottom:24px;right:24px;z-index:200;width:58px;height:58px;border-radius:50%;
  background:var(--brass);display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 36px rgba(200,162,74,.4);transition:transform .2s ease,box-shadow .25s ease;}
.fab:hover{transform:scale(1.08);box-shadow:0 16px 44px rgba(200,162,74,.55);}
.fab .ping{position:absolute;inset:0;border-radius:50%;border:2px solid var(--brass);animation:felixPulse 2.4s ease-out infinite;}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:980px){
  /* Hero stacks: founder photo on top, statement below. */
  .hero{grid-template-columns:1fr;min-height:auto;}
  .hero-figure{height:46vh;}
  .hero-figure img{object-position:50% 14%;}
  .hero-figure-fade{background:
    linear-gradient(180deg, transparent 42%, rgba(10,20,22,.55) 80%, var(--abyss) 100%);}
  .hero-text{max-width:none;padding:34px clamp(24px,6vw,40px) 60px;}
}
@media(max-width:900px){ .about-grid{grid-template-columns:1fr;} }
@media(max-width:820px){ .contact-grid{grid-template-columns:1fr;} }
@media(max-width:760px){ .guide-grid{grid-template-columns:1fr;justify-items:start;} }

@media(max-width:860px){
  .holdings{height:auto !important;}
  .holdings-stage{position:static !important;height:auto !important;overflow:visible !important;display:block !important;}
  .holdings-head{position:relative !important;top:auto !important;left:auto !important;right:auto !important;
    flex-direction:column;align-items:flex-start !important;gap:14px;padding:104px clamp(24px,6vw,90px) 0;}
  .holdings-title{text-align:left !important;}
  .holdings-title .eyebrow{justify-content:flex-start !important;}
  .holdings-hint{display:none !important;}
  .holdings-row{flex-direction:column;align-items:stretch !important;gap:18px !important;
    padding:32px clamp(24px,6vw,90px) 56px !important;transform:none !important;}
  .holdings-intro{width:auto !important;padding-right:0 !important;}
  .parcel{width:auto !important;height:auto !important;min-height:0;}
  .holdings-bar{display:none !important;}
}

@media(max-width:700px){
  .felix-burger{display:flex;}
  .felix-navlinks{position:fixed;top:0;left:0;right:0;z-index:-1;
    flex-direction:column;align-items:stretch;gap:2px;padding:80px clamp(20px,5vw,40px) 24px;
    background:rgba(7,13,14,.97);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    border-bottom:1px solid var(--hair);box-shadow:0 26px 60px rgba(0,0,0,.55);
    transform:translateY(-110%);transition:transform .42s var(--ease);}
  .nav.nav-open .felix-navlinks{transform:translateY(0);}
  .felix-navlink{display:block;padding:15px 4px;font-size:14px;border-bottom:1px solid rgba(255,255,255,.06);}
  .felix-navlinks .btn-brass{justify-content:center;margin-top:16px;padding:15px 22px;font-size:15px;}
  .nav.nav-open .felix-burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav.nav-open .felix-burger span:nth-child(2){opacity:0;}
  .nav.nav-open .felix-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
}
@media(max-width:560px){ .form-row{grid-template-columns:1fr;} }

/* ============================================================
   BOOT — survey calibration overlay
   Pure-CSS failsafe: if JS never runs, the panel fades itself
   out after 4.5s so content is never trapped behind it.
   ============================================================ */
.pre{position:fixed;inset:0;z-index:2000;background:#060C0D;
  display:flex;align-items:center;justify-content:center;
  transition:transform .95s cubic-bezier(.76,0,.19,1);will-change:transform;
  animation:preFail .5s ease 4.5s forwards;}
.pre.pre-out{transform:translateY(-101%);}
.pre::after{content:"";position:absolute;left:0;right:0;top:100%;height:16vh;
  background:linear-gradient(rgba(200,162,74,.14),transparent);}
@keyframes preFail{to{opacity:0;visibility:hidden;}}
.pre-tag{position:absolute;top:28px;left:50%;transform:translateX(-50%);
  font-size:10px;letter-spacing:.34em;color:var(--mist-dim);text-transform:uppercase;white-space:nowrap;}
.pre-core{display:flex;flex-direction:column;align-items:center;gap:28px;}
.pre-ret{width:118px;height:118px;}
.pr-ring{fill:none;stroke:rgba(127,182,176,.35);stroke-width:1;}
.pr-ring2{stroke:rgba(127,182,176,.18);}
.pr-tick{fill:none;stroke:var(--instr);stroke-width:3;stroke-dasharray:1 10;opacity:.45;
  transform-origin:70px 70px;animation:sweep 3.4s linear infinite;}
.pr-x{stroke:rgba(127,182,176,.5);stroke-width:1;}
.pr-dot{fill:var(--brass);}
.pre-coord{font-size:13px;letter-spacing:.18em;color:var(--instr-2);font-variant-numeric:tabular-nums;}
.pre-foot{position:absolute;left:clamp(24px,6vw,64px);right:clamp(24px,6vw,64px);bottom:34px;
  display:flex;align-items:center;gap:18px;}
.pre-bar{flex:1;height:1px;background:rgba(127,182,176,.16);}
.pre-bar i{display:block;height:100%;background:var(--brass);transform:scaleX(0);transform-origin:left;
  box-shadow:0 0 8px rgba(200,162,74,.5);}
.pre-pct{font-size:11px;letter-spacing:.18em;color:var(--brass-2);min-width:36px;text-align:right;
  font-variant-numeric:tabular-nums;}

/* ---- boot choreography: content held below the fold of its own mask
       until the overlay lifts, then rises in sequence ---- */
body.lock{overflow:hidden;}
body.js:not(.booted) .nav{opacity:0;}
body.js.booted .nav{animation:navIn .9s var(--ease) .85s backwards;}
@keyframes navIn{from{opacity:0;transform:translateY(-16px);}to{opacity:1;transform:none;}}
body.js:not(.booted) .rail{opacity:0;}
.rail{transition:opacity .9s ease 1.2s;}
body.js.booted .fab{animation:fabIn .7s var(--ease) 1.5s backwards;}
@keyframes fabIn{from{opacity:0;transform:scale(.5);}to{opacity:1;transform:scale(1);}}

body.js [data-boot]{opacity:0;transform:translateY(26px);
  transition:opacity .95s var(--ease) var(--bd,0s),transform .95s var(--ease) var(--bd,0s);}
body.js.booted [data-boot]{opacity:1;transform:none;}

body.js .hero-h1 .lmi{transform:translateY(118%);transition:transform 1.15s var(--ease);}
body.js.booted .hero-h1 .lm:nth-child(1) .lmi{transform:none;transition-delay:.42s;}
body.js.booted .hero-h1 .lm:nth-child(2) .lmi{transform:none;transition-delay:.56s;}
.hero-figure img{will-change:transform;}

/* ambient bearing ring behind the hero statement */
.hero-ring{position:absolute;top:50%;right:clamp(-340px,-18vw,-220px);transform:translateY(-50%);
  width:clamp(480px,54vw,780px);height:auto;z-index:-1;opacity:1;transition:opacity 1.8s ease 1.1s;}
body.js:not(.booted) .hero-ring{opacity:0;transition:none;}
.hr-a{fill:none;stroke:rgba(127,182,176,.13);stroke-width:1;}
.hr-b{fill:none;stroke:rgba(200,162,74,.28);stroke-width:1.2;stroke-dasharray:2 16;
  transform-origin:400px 400px;animation:sweep 80s linear infinite;}
.hr-c{fill:none;stroke:rgba(127,182,176,.08);stroke-width:1;}

/* ============================================================
   Reticle cursor — trailing survey ring on fine pointers
   ============================================================ */
.cur{position:fixed;left:0;top:0;z-index:2100;width:34px;height:34px;
  border:1px solid rgba(127,182,176,.55);border-radius:50%;pointer-events:none;opacity:0;
  transition:opacity .3s ease,width .28s var(--ease),height .28s var(--ease),
    border-color .28s ease,background .28s ease;}
.cur::after{content:"";position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;
  border-radius:50%;background:var(--brass);}
.cur.on{opacity:1;}
.cur.hot{width:54px;height:54px;border-color:var(--brass);background:rgba(200,162,74,.07);}
@media(pointer:coarse){.cur{display:none;}}

/* ============================================================
   Film grain — the chart printed on real paper
   ============================================================ */
@media(min-width:760px){
  body::after{content:"";position:fixed;inset:0;z-index:900;pointer-events:none;opacity:.05;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:260px 260px;animation:grain .8s steps(8) infinite;}
}
@keyframes grain{to{background-position:260px 130px;}}

/* ============================================================
   Traverse rail — distance-to-arrival readout
   ============================================================ */
.rail-km{position:absolute;left:9px;top:0;transform:translateY(-50%);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--instr);
  white-space:nowrap;background:var(--abyss);border:1px solid var(--hair);
  border-radius:2px;padding:3px 7px;opacity:0;transition:opacity .4s ease;}
.rail-km.show{opacity:.9;}
.rail-km.arrived{color:var(--brass-2);border-color:rgba(200,162,74,.4);}

/* ============================================================
   Compass tape — behind the pinned Standard statement
   ============================================================ */
.tape{position:absolute;left:0;right:0;bottom:clamp(44px,9vh,92px);height:64px;overflow:hidden;
  opacity:.6;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);}
.tape-track{position:absolute;left:0;top:0;height:100%;display:flex;align-items:flex-end;will-change:transform;}
.tape-deg{flex:0 0 auto;width:72px;text-align:center;font-family:var(--mono);font-size:12px;
  color:var(--mist-dim);letter-spacing:.1em;position:relative;padding-bottom:20px;}
.tape-deg::after{content:"";position:absolute;bottom:0;left:50%;width:1px;height:12px;
  background:rgba(127,182,176,.35);}
.tape-deg.card{color:var(--brass);font-weight:600;font-size:13px;}
.tape-deg.card::after{height:19px;background:var(--brass);}
.tape-minor::after{height:7px;}
.tape-caret{position:absolute;left:50%;bottom:0;width:1px;height:28px;background:var(--brass);
  box-shadow:0 0 9px rgba(200,162,74,.8);}

/* ============================================================
   Instrument — bearing needle, readout, homing runners
   ============================================================ */
.instr{cursor:crosshair;}
.instr-needle{stroke:var(--brass);stroke-width:1;opacity:0;transition:opacity .35s ease;pointer-events:none;}
.instr-readout{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;fill:var(--brass-2);
  opacity:0;transition:opacity .35s ease;text-transform:uppercase;}
.instr-wrap.aim .instr-needle{opacity:.85;}
.instr-wrap.aim .instr-readout{opacity:1;}
.instr-city.hi{fill:var(--brass-2);}
.instr-runner{fill:var(--brass-2);pointer-events:none;}

/* ============================================================
   Holdings — parcels light as they enter the frame (desktop pin)
   ============================================================ */
@media(min-width:861px){
  body.js .holdings-intro,body.js .parcel{opacity:.22;transform:translateY(36px) scale(.97);
    transition:opacity .8s var(--ease),transform .8s var(--ease),
      border-color .35s ease,box-shadow .35s ease,background .35s ease;}
  body.js .holdings-intro.lit,body.js .parcel.lit{opacity:1;transform:none;}
  body.js .parcel.lit:hover{transform:translateY(-6px);border-color:rgba(127,182,176,.45);
    background:var(--abyss-3);box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 0 1px rgba(127,182,176,.12);}
}

/* ============================================================
   Diaspora clocks — we answer on your time
   ============================================================ */
.clocks{display:flex;flex-wrap:wrap;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  margin:0 0 clamp(44px,7vh,72px);}
.clock{flex:1 1 auto;display:flex;align-items:baseline;gap:10px;padding:15px 18px;
  border-right:1px solid var(--hair);font-family:var(--mono);}
.clock:last-child{border-right:0;}
.clock b{font-size:11px;letter-spacing:.18em;color:var(--mist-dim);font-weight:500;}
.clock i{font-style:normal;font-size:15px;color:var(--instr-2);letter-spacing:.06em;
  font-variant-numeric:tabular-nums;}
.clock.home b{color:var(--brass);}
.clock.home i{color:var(--brass-2);}
@media(max-width:640px){ .clock{padding:12px 13px;gap:7px;} .clock i{font-size:13px;} }

/* ============================================================
   Footer — the journey, monumental
   ============================================================ */
.jmq{overflow:hidden;margin:0 calc(-1 * clamp(24px,6vw,90px)) clamp(40px,7vh,70px);}
.jmq-row{display:flex;width:max-content;will-change:transform;
  animation:felixMarquee 70s linear infinite reverse;}
.jmq-row span{font-family:var(--serif);font-style:italic;font-weight:600;white-space:nowrap;
  font-size:clamp(54px,8.5vw,124px);line-height:1.2;letter-spacing:-.01em;
  color:transparent;-webkit-text-stroke:1px rgba(200,162,74,.38);}
@supports not (-webkit-text-stroke:1px black){
  .jmq-row span{color:rgba(200,162,74,.13);}
}


/* ============================================================
   WP·05 — THE GROUND · layout plan
   A surveyed sheet on the chart table. The drawing is an external
   SVG at 842×1191; the plot hotspots ride above it in the same user
   space, so they stay registered at every zoom level.
   ============================================================ */
.plan{overflow:hidden;}
.plan::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(1100px 620px at 78% 8%,rgba(127,182,176,.09),transparent 62%);}
.plan-h{font-family:var(--serif);font-weight:500;color:var(--line);
  font-size:clamp(34px,5vw,68px);line-height:1.04;letter-spacing:-.018em;margin:22px 0 0;}
.plan-h .it{color:var(--brass-2);}
.plan-lede{max-width:64ch;margin:20px 0 0;font-size:clamp(15px,1.15vw,17px);line-height:1.72;color:var(--mist);}

.plan-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:clamp(20px,2.6vw,38px);
  align-items:start;margin-top:clamp(32px,4vw,54px);max-width:1180px;}

/* ---- the sheet ---- */
.plan-viewer{margin:0;min-width:0;}
.plan-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:9px 10px 9px 16px;background:var(--abyss-2);
  border:1px solid var(--hair);border-bottom:0;border-radius:4px 4px 0 0;}
.plan-bar-id{font-size:10px;letter-spacing:.24em;color:var(--mist-dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.plan-tools{display:flex;align-items:center;gap:6px;flex:0 0 auto;}
.plan-btn{width:31px;height:31px;display:grid;place-items:center;padding:0;cursor:pointer;
  background:transparent;color:var(--mist);border:1px solid var(--hair);border-radius:3px;
  font-family:var(--mono);font-size:15px;line-height:1;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);}
.plan-btn svg{width:15px;height:15px;}
.plan-btn:hover{background:rgba(127,182,176,.1);color:var(--instr-2);border-color:rgba(127,182,176,.4);}
.plan-btn:disabled{opacity:.34;cursor:default;background:transparent;color:var(--mist);border-color:var(--hair);}
.plan-zoom{font-size:11px;letter-spacing:.1em;color:var(--instr-2);min-width:46px;text-align:center;}

.plan-frame{position:relative;overflow:hidden;height:clamp(440px,80vh,880px);
  border:1px solid var(--hair);border-radius:0 0 4px 4px;background:#08100F;
  background-image:linear-gradient(rgba(127,182,176,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(127,182,176,.045) 1px,transparent 1px);
  background-size:34px 34px;touch-action:pan-y;}
.plan-frame.is-grabbing{cursor:grabbing;}
.plan-frame.is-zoomed{touch-action:none;cursor:grab;}

.plan-stage{position:absolute;top:50%;left:50%;height:100%;aspect-ratio:1191/842;
  transform-origin:50% 50%;translate:-50% -50%;}
.sold-out .plan-stage{aspect-ratio:842/1191;}
#manneguda .plan-stage{aspect-ratio:4494/3179;}
/* Promote only while the view is actually moving. A permanent will-change
   pins the compositor's raster scale, so the vector sheet never re-renders
   at the zoomed scale and goes soft the moment you zoom in. */
.plan-stage.moving{will-change:transform;}
.plan-sheet{display:block;width:100%;height:100%;border-radius:1px;
  box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 1px rgba(200,162,74,.13);
  transition:filter .6s var(--ease);}
/* Shadnagar active layout: no darkening — display at full brightness */

.plan-hit{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;}
.plan-hit .hot{fill:transparent;stroke:rgba(200,162,74,.0);stroke-width:1.4;cursor:pointer;pointer-events:all;
  vector-effect:non-scaling-stroke;transition:fill .08s ease-out,stroke .08s ease-out;
  outline:none;-webkit-tap-highlight-color:transparent;}
.plan-hit .hot:hover{fill:rgba(200,162,74,.22);stroke:rgba(200,162,74,.85);}
.plan-hit .hot:focus,.plan-hit .hot:focus-visible{outline:2px solid var(--brass);outline-offset:2px;}
.plan-hit .hot:active{fill:rgba(200,162,74,.32);transition:none;}
.plan-hit .hot.sel{fill:rgba(200,162,74,.28);stroke:var(--brass);stroke-width:2.2;transition:none !important;outline:none !important;}
.plan-hit .hot.unavail{fill:rgba(0,0,0,.28);stroke:none;cursor:default;}
.plan-hit .hot.soldout{fill:rgba(232,198,60,.55);stroke:rgba(232,198,60,.85);stroke-width:1.4;cursor:default;}
body.js .plan-hit .hot{opacity:0;}
body.js .plan-viewer.lit .plan-hit .hot{opacity:1;transition:opacity .35s var(--ease);}

/* Manneguda layout plot demarcation borders & selection */
#manneguda .plan-hit .hot {
  fill: transparent;
  stroke: transparent;
  stroke-width: 2px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  pointer-events: all;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: fill .15s ease-out, stroke .15s ease-out, stroke-width .15s ease-out;
}
#manneguda .plan-hit .hot:hover {
  fill: rgba(200, 162, 74, 0.24);
  stroke: var(--brass);
  stroke-width: 3.2px;
}
#manneguda .plan-hit .hot.sel {
  fill: rgba(200, 162, 74, 0.32);
  stroke: #e0b454;
  stroke-width: 3.8px;
}
/* Marked on Admin > Layouts; not selectable (see setPlotState in main.js) */
#manneguda .plan-hit .hot.unavail { fill: rgba(0, 0, 0, 0.32); stroke: none; cursor: default; }
#manneguda .plan-hit .hot.soldout { fill: rgba(232, 198, 60, 0.55); stroke: rgba(232, 198, 60, 0.85); cursor: default; }

@keyframes darkenSheet{
  0%{filter:brightness(1) contrast(1);}
  100%{filter:brightness(0.38) contrast(1.15);}
}

@-webkit-keyframes darkenSheet{
  0%{filter:brightness(1) contrast(1);}
  100%{filter:brightness(0.38) contrast(1.15);}
}

.stamp{
  position:absolute;
  left:50%;
  top:50%;
  width:min(360px,60%);
  max-height:65%;
  object-fit:contain;
  pointer-events:none;
  z-index:6;
  opacity:0;
  transform-origin:50% 50%;
}

.plan-viewer:not(.lit):not(.is-archived) .stamp{
  opacity:0;
  animation:none;
  -webkit-animation:none;
}

/* Stamp pulse fires on any lit plan-viewer that has a stamp
   (the Pargi archived viewer gets .lit via dedicated IO in initPlan) */
body.js .plan-viewer.lit .stamp,
.plan-viewer.is-archived.lit .stamp{
  -webkit-animation-name:pulse;
  animation-name:pulse;
  animation-delay:.6s;
  -webkit-animation-delay:.6s;
  animation-duration:.55s;
  -webkit-animation-duration:.55s;
  -webkit-animation-fill-mode:forwards;
  animation-fill-mode:forwards;
}

@-webkit-keyframes pulse{
  0%{
    opacity:0;
    transform:translate(-50%,-50%) rotate(-2deg) scale(4);
  }
  15%{
    opacity:.50;
    transform-origin:50% 50%;
    transform:translate(-50%,-50%) rotate(-2deg) scale(4);
    transition:all .3s cubic-bezier(0.6, 0.04, 0.98, 0.335);
  }
  100%{
    opacity:1;
    transform-origin:50% 50%;
    transform:translate(-50%,-50%) rotate(-15deg) scale(1);
  }
}

@keyframes pulse{
  0%{
    opacity:0;
    transform:translate(-50%,-50%) rotate(-2deg) scale(4);
  }
  15%{
    opacity:.50;
    transform-origin:50% 50%;
    transform:translate(-50%,-50%) rotate(-2deg) scale(4);
    transition:all .3s cubic-bezier(0.6, 0.04, 0.98, 0.335);
  }
  100%{
    opacity:1;
    transform-origin:50% 50%;
    transform:translate(-50%,-50%) rotate(-15deg) scale(1);
  }
}

/* sold-out venture card: darken the sheet and animate the stamp in
   once the element scrolls into view (.lit is added by a dedicated IO). */
.plan-viewer.is-archived.lit .plan-sheet{
  animation:darkenSheet .65s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay:.85s;
}
.plan-viewer.is-archived .stamp{
  opacity:0;
  transform:translate(-50%,-50%) rotate(-15deg) scale(1);
}

/* brass register marks at the corners of the frame */
.plan-corner{position:absolute;width:15px;height:15px;z-index:2;pointer-events:none;
  border:0 solid rgba(200,162,74,.5);}
.plan-corner.tl{top:9px;left:9px;border-top-width:1px;border-left-width:1px;}
.plan-corner.tr{top:9px;right:9px;border-top-width:1px;border-right-width:1px;}
.plan-corner.bl{bottom:9px;left:9px;border-bottom-width:1px;border-left-width:1px;}
.plan-corner.br{bottom:9px;right:9px;border-bottom-width:1px;border-right-width:1px;}

.plan-tip{position:absolute;z-index:3;pointer-events:none;transform:translate(-50%,-140%);
  padding:6px 11px;font-size:11px;letter-spacing:.11em;white-space:nowrap;
  color:var(--abyss);background:var(--brass-2);border-radius:3px;
  box-shadow:0 8px 22px rgba(0,0,0,.4);}
.plan-tip[hidden]{display:none;}

.plan-hint{position:absolute;left:50%;bottom:13px;transform:translateX(-50%);z-index:2;
  pointer-events:none;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mist-dim);background:rgba(10,20,22,.82);border:1px solid var(--hair);
  padding:6px 13px;border-radius:20px;transition:opacity .45s var(--ease);}
.plan-hint.gone{opacity:0;}

.plan-cap{display:flex;flex-wrap:wrap;align-items:center;gap:9px 20px;margin-top:14px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--mist-dim);}
.plan-key{display:inline-flex;align-items:center;gap:8px;}
.plan-key i{width:17px;height:0;border-top:2px solid;flex:0 0 auto;}
.plan-key .k-bound{border-color:#4E9C96;}
.plan-key .k-plot{border-color:#8E8672;}
.plan-key .k-road{border-color:var(--brass);}
.plan-dl{margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:var(--instr-2);
  text-decoration:none;border-bottom:1px solid rgba(127,182,176,.3);padding-bottom:2px;
  transition:color .2s var(--ease),border-color .2s var(--ease);}
.plan-dl svg{width:12px;height:12px;}
.plan-dl:hover{color:var(--brass-2);border-color:rgba(200,162,74,.5);}

/* ---- the readout ---- */
.plan-side{position:sticky;top:96px;display:flex;flex-direction:column;gap:14px;min-width:0;}
.plan-read{background:var(--abyss-2);border:1px solid var(--hair);border-radius:4px;padding:22px;}
.plan-read-empty{display:flex;flex-direction:column;align-items:flex-start;gap:14px;}
.plan-read-empty[hidden]{display:none;}
.plan-read-ico{width:38px;height:38px;color:var(--instr);opacity:.5;}
.plan-read-empty p{margin:0;font-size:13.5px;line-height:1.65;color:var(--mist-dim);}
.plan-read-body[hidden]{display:none;}
.plan-read-no{display:flex;align-items:baseline;gap:11px;padding-bottom:15px;
  border-bottom:1px solid var(--hair);}
.plan-read-no span{font-size:10px;letter-spacing:.26em;color:var(--instr-2);}
.plan-read-no b{font-family:var(--serif);font-weight:500;font-size:46px;line-height:.9;color:var(--brass-2);}
.plan-spec{margin:0;padding:15px 0 3px;display:flex;flex-direction:column;gap:11px;}
/* flex-wrap so a long value (FRONTING's road names run much longer than
   every other row here) drops to its own line under the label instead of
   forcing a single line -- min-width:0 on dd lets it actually shrink/wrap
   rather than demand its unbroken intrinsic width, the classic flex-item
   default that fights wrapping even when the child itself can wrap. */
.plan-spec div{display:flex;align-items:baseline;justify-content:space-between;gap:6px 14px;flex-wrap:wrap;}
.plan-spec dt{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mist-dim);white-space:nowrap;flex:0 0 auto;}
.plan-spec dd{margin:0;font-size:14px;color:var(--line);text-align:right;min-width:0;
  flex:1 1 auto;overflow-wrap:break-word;}
/* Belt and suspenders: body already clips overflow-x, but that's a distant
   ancestor and .plan-side is position:sticky -- add it here too, on the
   actual box that must never spill past the page edge. */
.plan-side{overflow-x:hidden;}
.plan-cta{width:100%;justify-content:center;margin-top:17px;}
.plan-clear{display:block;width:100%;margin-top:10px;padding:8px;cursor:pointer;
  background:none;border:0;font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mist-dim);transition:color .2s var(--ease);}
.plan-clear:hover{color:var(--instr-2);}

.plan-facts{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--hair);border:1px solid var(--hair);border-radius:4px;overflow:hidden;}
.plan-facts div{background:var(--abyss-2);padding:15px 16px;}
.plan-facts dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.19em;
  text-transform:uppercase;color:var(--mist-dim);}
.plan-facts dd{margin:5px 0 0;font-family:var(--serif);font-size:23px;color:var(--line);line-height:1;}
.plan-facts dd span{font-family:var(--sans);font-size:11px;color:var(--mist-dim);letter-spacing:.04em;}

/* ---- expanded ---- */
.plan-viewer.is-full{position:fixed;inset:0;z-index:220;margin:0;background:var(--abyss);
  padding:clamp(12px,2vw,26px);display:flex;flex-direction:column;}
.plan-viewer.is-full .plan-frame{flex:1;height:auto;}
.plan-viewer.is-full .plan-cap{flex:0 0 auto;}
body.plan-locked{overflow:hidden;}

@media(max-width:1040px){
  /* stacked: hold the column near the sheet's own width so it doesn't
     float in a sea of table */
  .plan-layout{grid-template-columns:1fr;max-width:760px;}
  .plan-side{position:static;flex-direction:row;flex-wrap:wrap;}
  .plan-read{flex:1 1 320px;}
  .plan-facts{flex:1 1 260px;align-content:start;}
}
@media(max-width:640px){
  /* stacked again: flex-basis would otherwise become a height and pad the panels out */
  .plan-side{flex-direction:column;}
  .plan-read,.plan-facts{flex:0 0 auto;}
  .plan-frame{height:auto;aspect-ratio:1191/842;min-height:220px;max-height:75vh;}
  .sold-out .plan-frame{aspect-ratio:842/1191;max-height:75vh;}
  .plan-stage{width:100%;height:100%;max-width:100%;max-height:100%;}
  .plan-bar-id{display:none;}
  .plan-cap{font-size:9.5px;gap:8px 14px;}
  .plan-dl{margin-left:0;}
}

/* keyboard focus, always visible */
:focus-visible{outline:2px solid var(--instr);outline-offset:3px;}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  [data-reveal],.lmi,[data-boot],.nav{opacity:1 !important;transform:none !important;filter:none !important;transition:none !important;animation:none !important;}
  .pre,.cur{display:none !important;}
  body::after{animation:none !important;}
  .instr-sweep,.instr-pulse{animation:none !important;}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;}
}

/* ============================================================
   Venture Cards — reference-matched style
   ============================================================ */

/* Section header: heading left, outlined pill CTA right */
.vnt-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: clamp(32px, 4vw, 52px);
}
.vnt-head-h {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(30px, 4.2vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--line);
  margin: 14px 0 0;
}
.vnt-head-h .it {
  font-style: italic;
  color: var(--brass);
}

/* Outlined pill button — matches reference "Explore All Projects →" */
.vnt-explore-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 10px 22px;
  border-radius: 100px;
  border: 1.5px solid rgba(200,162,74,.45);
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--brass);
  text-decoration: none;
  transition: background .18s, border-color .18s, gap .18s, color .18s;
  white-space: nowrap;
}
.vnt-explore-btn:hover {
  background: rgba(200,162,74,.08);
  border-color: var(--brass);
  gap: 12px;
}
.vnt-explore-btn svg { transition: transform .18s; flex-shrink: 0; }
.vnt-explore-btn:hover svg { transform: translateX(2px); }

/* Card grid — 3-up, matches reference column layout */
.vnt-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: clamp(16px, 2.5vw, 28px);
  align-items: start;
}

/* Card shell */
.vnt-card {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(13,27,30,.55);
  border: 1px solid rgba(127,182,176,.1);
  text-decoration: none;
  color: inherit;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s;
  cursor: pointer;
}
.vnt-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 56px rgba(0,0,0,.4);
  border-color: rgba(200,162,74,.28);
}
.vnt-card--sold { opacity: .85; }
.vnt-card--sold:hover {
  opacity: 1;
  border-color: rgba(127,182,176,.22);
  box-shadow: 0 20px 56px rgba(0,0,0,.35);
}

/* Image block — tall, like the reference */
.vnt-card-img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: rgba(10,20,22,.9);
  border-radius: 10px 10px 0 0;
}
.vnt-card-img > img:first-child {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .45s ease;
}
.vnt-card:hover .vnt-card-img > img:first-child {
  transform: scale(1.05);
}

/* Sold-out overlay centred in image */
.vnt-sold-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10,20,22,.38);
  pointer-events: none;
}
.vnt-sold-overlay img {
  width: clamp(90px, 22%, 130px);
  opacity: .92;
}

/* Text body below image — matches reference: clean, open */
.vnt-card-body {
  padding: clamp(14px, 2.2vw, 22px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Title + location on same line */
.vnt-card-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.vnt-card-title {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--chalk);
  margin: 0;
  flex: 1 1 auto;
}
.vnt-card-loc {
  font-family: 'Spline Sans Mono', monospace;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--teal);
  flex-shrink: 0;
  opacity: .8;
}
.vnt-card-loc--sold {
  color: var(--mist);
  opacity: .55;
}

/* Description */
.vnt-card-desc {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--mist);
  margin: 0;
}

/* ── Interactive Venture Map Block ──────────────────────── */
.vnt-map-block {
  margin-top: clamp(60px, 8vw, 96px);
  padding-top: clamp(48px, 6vw, 72px);
  border-top: 1px solid rgba(127, 182, 176, 0.14);
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: clamp(36px, 5vw, 68px);
  align-items: center;
}

.vnt-map-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.vnt-map-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Spline Sans Mono', monospace;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 20px;
}
.vnt-map-badge::before {
  content: '';
  display: block;
  width: 22px;
  height: 1px;
  background: var(--brass);
  opacity: .7;
}

.vnt-map-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(2.2rem, 3.8vw, 3.5rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--chalk);
  margin: 0 0 20px;
}
.vnt-map-title .it {
  font-style: italic;
  color: var(--brass);
}

.vnt-map-desc {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.7;
  color: var(--mist);
  margin: 0 0 32px;
  max-width: 520px;
}

.vnt-map-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 30px;
  border-radius: 9999px;
  background: #000000;
  color: #F0ECE1;
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: all .25s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .4);
  cursor: pointer;
}
.vnt-map-cta:hover {
  background: var(--brass);
  color: #0A1416;
  border-color: var(--brass);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(200, 162, 74, .35);
}
.vnt-map-arr {
  display: inline-block;
  transition: transform .25s ease;
  font-size: 17px;
  line-height: 1;
}
.vnt-map-cta:hover .vnt-map-arr {
  transform: translateX(5px);
}

.vnt-map-frame-wrap {
  position: relative;
  width: 100%;
  height: clamp(350px, 32vw, 440px);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(127, 182, 176, 0.2);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  background: #0D1B1E;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.vnt-map-frame-wrap:hover {
  border-color: rgba(200, 162, 74, 0.4);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

.vnt-map-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

@media (max-width: 960px) {
  .vnt-map-block {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .vnt-map-frame-wrap {
    height: 350px;
  }
}
@media (max-width: 600px) {
  .vnt-map-frame-wrap {
    height: 300px;
    border-radius: 14px;
  }
}