/* ═══════════════════════════════════════════════════════════════════
   THE DYELINE SHEET — shared design system for the Sector 150 cluster
   (prestige-noida.com · countynoida.com · countyflats.com)

   The page is a measured drawing on cyanotype stock. Facts that are on
   the public register are dimensioned in solid line with terminals.
   Claims that are circulating but unverified are drawn dashed, open,
   and marked T.B.C. The title block carries provenance, exactly as a
   real drawing sheet does.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* dyeline stock */
  --blueprint:#082742;
  --blueprint-deep:#04182b;
  --blueprint-raise:#0d385c;
  --line:#7fb2d4;
  --line-soft:rgba(127,178,212,.34);
  --line-faint:rgba(127,178,212,.16);
  --grid-fine:rgba(127,178,212,.085);
  --grid-coarse:rgba(127,178,212,.17);

  /* ink */
  --paper:#eef6fc;
  --paper-dim:#a6c6dd;
  --paper-faint:#7ea6c4;

  /* marks */
  --confirm:#f0b429;      /* struck through the sheet where a fact is on record */
  --revise:#ef6a45;       /* the surveyor's red pencil — unresolved */

  --font-display:'Archivo',var(--fallback-sans);
  --font-mono:'Overpass Mono',var(--fallback-mono);
  --fallback-sans:'ArchivoFallback',Helvetica,Arial,sans-serif;
  --fallback-mono:'OverpassMonoFallback',ui-monospace,'SF Mono',Menlo,monospace;

  --sheet-max:1180px;
  --gut:clamp(1.15rem,4vw,2.75rem);
  --s1:.35rem; --s2:.65rem; --s3:1rem; --s4:1.6rem;
  --s5:2.5rem; --s6:4rem; --s7:6rem;
  --nav-h:56px;
}

/* CLS guard: metric-matched fallbacks so the swap does not reflow.
   Measured technique reused from upreratracker.com (CLS 0.133 -> 0.011). */
@font-face{font-family:'ArchivoFallback';src:local('Helvetica Neue'),local('Arial');
  size-adjust:97.5%;ascent-override:92%;descent-override:24%;line-gap-override:0%;}
@font-face{font-family:'OverpassMonoFallback';src:local('Menlo'),local('Consolas'),local('Courier New');
  size-adjust:94%;ascent-override:88%;descent-override:22%;line-gap-override:0%;}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 1rem);}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(1rem,.97rem + .18vw,1.075rem);
  line-height:1.62;
  color:var(--paper);
  background:var(--blueprint);
  background-image:
    linear-gradient(var(--grid-coarse) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-coarse) 1px,transparent 1px),
    linear-gradient(var(--grid-fine) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-fine) 1px,transparent 1px),
    radial-gradient(120% 80% at 50% -10%,#0d3a5f 0%,var(--blueprint) 52%,var(--blueprint-deep) 100%);
  background-size:80px 80px,80px 80px,16px 16px,16px 16px,100% 100%;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ── type ─────────────────────────────────────────────────────────── */
h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.08;
  letter-spacing:-.022em;text-wrap:balance;margin:0;color:var(--paper);}
h1{font-size:clamp(2.1rem,1.25rem + 4.1vw,4.15rem);font-weight:800;letter-spacing:-.035em;}
h2{font-size:clamp(1.55rem,1.15rem + 1.75vw,2.5rem);}
h3{font-size:clamp(1.08rem,1rem + .4vw,1.3rem);letter-spacing:-.012em;}
p{margin:0 0 var(--s3);max-width:68ch;}
a{color:var(--paper);text-decoration-color:var(--line-soft);text-underline-offset:.22em;
  text-decoration-thickness:1px;transition:text-decoration-color .18s ease,color .18s ease;}
a:hover{color:#fff;text-decoration-color:var(--confirm);}
:focus-visible{outline:2px solid var(--confirm);outline-offset:3px;border-radius:1px;}
strong{font-weight:700;}
::selection{background:var(--confirm);color:var(--blueprint-deep);}

/* measured data — mono here is measurement, not costume */
.code,.dl-val,.rev-tbl td,.reg-tbl td,.tbc-list b,.meta{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
.code{font-size:.86em;letter-spacing:.01em;color:var(--confirm);white-space:nowrap;}
.meta{font-size:.735rem;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-faint);}

/* ── the sheet ────────────────────────────────────────────────────── */
.sheet{max-width:var(--sheet-max);margin:0 auto;padding:0 var(--gut);}
.rule{height:1px;background:var(--line-soft);border:0;margin:0;}
.rule--heavy{height:2px;background:var(--line);}

/* corner registration ticks, as on a real print */
.ticks{position:fixed;inset:14px;pointer-events:none;z-index:1;}
.ticks span{position:absolute;width:16px;height:16px;border:0 solid var(--line-soft);}
.ticks span:nth-child(1){top:0;left:0;border-top-width:1px;border-left-width:1px;}
.ticks span:nth-child(2){top:0;right:0;border-top-width:1px;border-right-width:1px;}
.ticks span:nth-child(3){bottom:0;left:0;border-bottom-width:1px;border-left-width:1px;}
.ticks span:nth-child(4){bottom:0;right:0;border-bottom-width:1px;border-right-width:1px;}
/* the sheet keeps its registration ticks on a phone — smaller, and inset clear
   of the sticky header and action bar, which are opaque enough to bury them */
@media (max-width:640px){
  /* measured: the two-row sticky header is 128px and the action bar 71px
     (its labels wrap to two lines), so the ticks clear both */
  .ticks{inset:138px 8px 82px 8px;}
  .ticks span{width:10px;height:10px;}
}

/* ── nav ──────────────────────────────────────────────────────────── */
.topbar{position:sticky;top:0;z-index:40;height:var(--nav-h);display:flex;align-items:center;
  background:rgba(4,24,43,.86);backdrop-filter:blur(9px);border-bottom:1px solid var(--line-faint);}
.topbar__in{max-width:var(--sheet-max);margin:0 auto;padding:0 var(--gut);width:100%;
  display:flex;align-items:center;gap:var(--s4);}
.brand{display:flex;align-items:center;gap:.55rem;font-weight:700;letter-spacing:-.01em;
  text-decoration:none;font-size:.96rem;}
.brand svg{flex:none;}
.brand span{color:var(--paper);}
.topbar nav{margin-left:auto;display:flex;gap:var(--s4);}
.topbar nav a{font-size:.83rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--paper-dim);text-decoration:none;}
.topbar nav a:hover{color:var(--confirm);}
/* the sheet keeps its index of sections on a phone, as a scrolling rail */
@media (max-width:760px){
  /* nav is a child of .topbar__in, so the wrap has to happen THERE — putting
     flex-direction on .topbar leaves the rail as a slit beside the brand */
  .topbar{height:auto;}
  .topbar__in{flex-wrap:wrap;height:auto;padding-right:0;}
  .topbar__in > .brand{height:var(--nav-h);display:flex;align-items:center;}
  .topbar nav{flex:1 0 100%;margin:0;gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch;
    border-top:1px solid var(--line-faint);scrollbar-width:none;}
  .topbar nav::-webkit-scrollbar{display:none;}
  .topbar nav a{flex:none;display:flex;align-items:center;min-height:44px;
    padding:0 var(--s4) 0 0;font-size:.74rem;letter-spacing:.11em;white-space:nowrap;}
  .topbar nav a:first-child{padding-left:var(--gut);}
  html{scroll-padding-top:8.75rem;}  /* measured header 128px + breathing room */
}

/* ── hero: the drawing ────────────────────────────────────────────── */
.plate{padding:clamp(2.75rem,7vw,5.5rem) 0 var(--s6);position:relative;z-index:2;}
.plate__sheetno{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4);}
.plate__sheetno .rule{flex:1;}
.plate__sheetno .orient{flex:none;display:flex;align-items:center;gap:.45rem;}
.plate__sheetno .orient svg{display:block;}
/* narrow sheets keep the orientation group but read as a title bar, not a stack:
   two rows, and the rule is dropped rather than left separating nothing */
@media (max-width:560px){
  .plate__sheetno{flex-wrap:wrap;gap:var(--s2) var(--s3);}
  .plate__sheetno .rule{display:none;}
  .plate__sheetno .meta:first-child{flex:1 1 auto;}
  .plate__sheetno .orient{order:2;margin-left:auto;transform:scale(.85);transform-origin:right center;}
  .plate__sheetno .meta:last-child{order:3;flex:1 0 100%;
    border-top:1px solid var(--line-faint);padding-top:var(--s2);}
}

/* the ground reads as stock, not a flat field: grid fades under the fold */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(130% 90% at 50% 0%,transparent 0%,transparent 38%,rgba(4,24,43,.55) 100%);}
.plate h1{margin-bottom:var(--s4);max-width:17ch;}
/* the headline obeys the sheet's own legend: amber is on the record,
   surveyor's red is the unresolved claim */
.plate h1 em{font-style:normal;color:var(--confirm);}
.plate h1 .claim{color:var(--revise);}
.lede{font-size:clamp(1.06rem,1rem + .55vw,1.3rem);color:var(--paper-dim);max-width:60ch;
  line-height:1.55;}

/* the dimension figure — the thesis, drawn */
.figure{margin:var(--s6) 0 0;border:1px solid var(--line-soft);background:rgba(4,24,43,.42);
  padding:clamp(1.25rem,3.2vw,2.25rem);position:relative;}
.figure__cap{display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;
  margin-bottom:var(--s5);}
.dimset{display:grid;gap:var(--s4);}
.dim{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s2) var(--s3);align-items:end;}
.dim__label{font-size:.96rem;font-weight:600;line-height:1.35;grid-column:1;}
.dim__val{grid-column:2;text-align:right;font-family:var(--font-mono);font-size:.85rem;
  white-space:nowrap;color:var(--confirm);font-variant-numeric:tabular-nums;}
.dim__line{grid-column:1/-1;height:11px;position:relative;}
.dim__line svg{display:block;width:100%;height:11px;overflow:visible;}
.dim__note{grid-column:1/-1;font-size:.845rem;color:var(--paper-dim);margin:0;max-width:78ch;}
.dim--tbc .dim__val{color:var(--revise);}
.dim--tbc .dim__label{color:var(--paper-dim);font-weight:500;}
/* a long registration number must never crush its own label — at narrow widths
   the value takes its own row above the line, which is the drawing convention anyway */
@media (max-width:640px){
  .dim{grid-template-columns:1fr;}
  .dim__val{grid-column:1;text-align:left;}
  .dim__label{order:-1;}
}

/* ── sections ─────────────────────────────────────────────────────── */
section{position:relative;z-index:2;}
.band{padding:var(--s7) 0;border-top:1px solid var(--line-faint);}
.band--tight{padding:var(--s6) 0;}
.band__head{margin-bottom:var(--s5);}
.band__head h2{margin-bottom:var(--s3);}
.band__head p{color:var(--paper-dim);}

.cols{display:grid;gap:var(--s5);}
@media (min-width:900px){.cols--2{grid-template-columns:1fr 1fr;gap:var(--s6);}}

/* on-record entries: solid left terminal, like a dimensioned callout */
.record{border-top:1px solid var(--line-soft);padding:var(--s4) 0 var(--s4) var(--s4);position:relative;}
.record::before{content:"";position:absolute;left:0;top:var(--s4);width:9px;height:9px;
  border:1px solid var(--confirm);background:var(--confirm);transform:rotate(45deg);}
/* relayed from a secondary source, not read off the register: it gets the
   unresolved mark, never the filled amber one */
.record--reported::before{background:transparent;border:1px dashed var(--revise);}
.record h3{margin-bottom:var(--s2);}
.record p:last-child{margin-bottom:0;}
.record blockquote{margin:0 0 var(--s3);padding:0;font-size:1.06rem;line-height:1.5;color:var(--paper);}
.record cite{display:block;font-style:normal;font-family:var(--font-mono);font-size:.78rem;
  color:var(--paper-faint);letter-spacing:.04em;line-height:1.5;}

/* unresolved list: dashed terminal, red pencil */
.tbc-list{list-style:none;margin:0;padding:0;display:grid;gap:0;}
.tbc-list li{border-top:1px dashed var(--line-soft);padding:var(--s3) 0 var(--s3) var(--s4);
  position:relative;display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;}
.tbc-list li::before{content:"";position:absolute;left:0;top:calc(var(--s3) + .55em);
  width:9px;height:9px;border:1px dashed var(--revise);transform:rotate(45deg);}
.tbc-list b{font-weight:400;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--revise);white-space:nowrap;}

/* steps to verify */
.steps{list-style:none;counter-reset:st;margin:0;padding:0;display:grid;gap:var(--s4);}
.steps li{counter-increment:st;padding-left:3.1rem;position:relative;}
.steps li::before{content:counter(st,decimal-leading-zero);position:absolute;left:0;top:.05em;
  font-family:var(--font-mono);font-size:.82rem;color:var(--confirm);letter-spacing:.06em;
  border:1px solid var(--line-soft);width:2.1rem;height:1.8rem;display:grid;place-items:center;}
.steps h3{margin-bottom:var(--s1);}
.steps p{margin-bottom:0;color:var(--paper-dim);font-size:.95rem;}

/* register table */
.reg-wrap{overflow-x:auto;border:1px solid var(--line-soft);background:rgba(4,24,43,.42);}
table.reg-tbl{border-collapse:collapse;width:100%;min-width:680px;font-size:.9rem;}
.reg-tbl th{text-align:left;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--paper-faint);font-weight:600;padding:var(--s3) var(--s3);
  border-bottom:1px solid var(--line);white-space:nowrap;background:rgba(4,24,43,.5);}
.reg-tbl td{padding:var(--s3);border-bottom:1px solid var(--line-faint);vertical-align:top;
  font-size:.855rem;color:var(--paper-dim);}
.reg-tbl td:first-child{color:var(--paper);font-family:var(--font-display);font-weight:600;
  font-size:.94rem;}
.reg-tbl tbody tr:hover td{background:rgba(127,178,212,.05);}
.reg-tbl .num{color:var(--confirm);white-space:nowrap;}
.reg-tbl .none{color:var(--revise);}

/* On a phone the promoter and registration columns ARE the deliverable, so the
   register restacks into labelled entries rather than hiding behind a scroll. */
@media (max-width:760px){
  .reg-wrap{overflow-x:visible;border:0;background:transparent;}
  table.reg-tbl{min-width:0;display:block;}
  /* display:none, not clip — a clipped thead stays in the a11y tree as a stray
     run of column names, and the data-labels already carry the headers */
  .reg-tbl thead{display:none;}
  .reg-tbl tbody,.reg-tbl tr,.reg-tbl td{display:block;width:auto;}
  .reg-tbl tr{border:1px solid var(--line-soft);background:rgba(4,24,43,.42);
    padding:var(--s3) var(--s3) var(--s2);margin-bottom:var(--s3);}
  .reg-tbl td{border:0;padding:.2rem 0;display:grid;grid-template-columns:7rem 1fr;gap:var(--s2);
    align-items:baseline;}
  /* a 23-character registration must never be the thing that breaks the box:
     the label column is narrow enough for one line at 320px, and the value is
     allowed to wrap rather than overflow if it ever still cannot fit */
  .reg-tbl .num{white-space:normal;overflow-wrap:anywhere;}
  .reg-tbl td::before{content:attr(data-label);font-family:var(--font-display);font-size:.66rem;
    letter-spacing:.13em;text-transform:uppercase;color:var(--paper-faint);}
  .reg-tbl td:first-child{display:block;font-size:1.02rem;color:var(--paper);
    padding-bottom:var(--s2);margin-bottom:var(--s2);border-bottom:1px solid var(--line-faint);}
  .reg-tbl td:first-child::before{content:none;}
  .reg-tbl tbody tr:hover td{background:transparent;}
}

/* ── enquiry ──────────────────────────────────────────────────────── */
.ask{border:1px solid var(--line);background:rgba(4,24,43,.6);padding:clamp(1.35rem,3.5vw,2.5rem);}
.ask h2{margin-bottom:var(--s3);}
.ask > p{color:var(--paper-dim);}
form.js-lead-form{display:grid;gap:var(--s3);margin-top:var(--s4);max-width:26rem;}
.fld{display:grid;gap:var(--s1);}
.fld label{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--paper-faint);}
.fld input{font-family:var(--font-mono);font-size:1rem;color:var(--paper);background:rgba(8,39,66,.85);
  border:1px solid var(--line-soft);padding:.72rem .8rem;width:100%;border-radius:0;
  transition:border-color .16s ease,background .16s ease;}
.fld input::placeholder{color:var(--paper-faint);opacity:1;}
.fld input:hover{border-color:var(--line);}
.fld input:focus{outline:none;border-color:var(--confirm);background:rgba(8,39,66,1);}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.btn{font-family:var(--font-display);font-weight:700;font-size:.9rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--blueprint-deep);background:var(--confirm);
  border:1px solid var(--confirm);padding:.8rem 1.4rem;cursor:pointer;border-radius:0;
  transition:background .16s ease,transform .16s ease,box-shadow .16s ease;
  text-decoration:none;display:inline-block;text-align:center;}
.btn:hover{background:#ffc94d;border-color:#ffc94d;color:var(--blueprint-deep);
  box-shadow:0 6px 18px -6px rgba(240,180,41,.5);}
.btn:active{transform:translateY(1px);}
.btn[disabled]{opacity:.55;cursor:not-allowed;box-shadow:none;}
.btn--ghost{background:transparent;color:var(--paper);border-color:var(--line);}
.btn--ghost:hover{background:rgba(127,178,212,.1);color:#fff;border-color:var(--line);box-shadow:none;}
.form-err{color:var(--revise);font-size:.86rem;display:none;margin:0;}
.form-err.show{display:block;}
.form-thankyou{display:none;border:1px solid var(--confirm);padding:var(--s4);margin-top:var(--s4);}
.form-thankyou.show{display:block;}
.form-thankyou p:last-child{margin-bottom:0;}
.ask__legal{font-size:.8rem;color:var(--paper-faint);margin:var(--s3) 0 0;max-width:44ch;}

.actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s4);}

/* ── title block ──────────────────────────────────────────────────── */
.titleblock{border-top:2px solid var(--line);background:var(--blueprint-deep);
  padding:var(--s6) 0 var(--s5);margin-top:var(--s7);position:relative;z-index:2;}
.tb-grid{display:grid;gap:0;border:1px solid var(--line-soft);}
@media (min-width:780px){.tb-grid{grid-template-columns:repeat(4,1fr);}}
.tb-cell{padding:var(--s3) var(--s4);border-bottom:1px solid var(--line-faint);}
@media (min-width:780px){
  .tb-cell{border-bottom:0;border-right:1px solid var(--line-faint);}
  .tb-cell:last-child{border-right:0;}
}
.tb-cell dt{font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:var(--paper-faint);
  margin-bottom:.3rem;}
.tb-cell dd{margin:0;font-family:var(--font-mono);font-size:.82rem;color:var(--paper);line-height:1.45;}
.disclaimer{margin-top:var(--s5);font-size:.78rem;line-height:1.62;color:var(--paper-faint);
  max-width:none;}
/* the mandatory disclosure is the one block that must actually be readable */
.disclaimer p{max-width:78ch;margin-bottom:var(--s3);}
.disclaimer a{color:var(--paper-dim);}
.siblings{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s4);font-size:.82rem;}
.siblings a{color:var(--paper-dim);}

/* ── faq ──────────────────────────────────────────────────────────── */
.faq-list{display:grid;gap:0;}
.faq-list details{border-top:1px solid var(--line-faint);padding:var(--s3) 0;}
.faq-list details:last-child{border-bottom:1px solid var(--line-faint);}
.faq-list summary{cursor:pointer;font-weight:600;font-size:1rem;list-style:none;
  display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s2) 0;}
.faq-list summary::-webkit-details-marker{display:none;}
.faq-list summary::after{content:"+";margin-left:auto;font-family:var(--font-mono);
  color:var(--confirm);font-size:1.1rem;line-height:1;flex:none;transition:transform .2s ease;}
.faq-list details[open] summary::after{transform:rotate(45deg);}
.faq-list details > p{margin:var(--s2) 0 var(--s3);color:var(--paper-dim);font-size:.95rem;}

/* ── sticky action bar (mobile) ───────────────────────────────────── */
.actionbar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;
  border-top:1px solid var(--line);background:rgba(4,24,43,.95);backdrop-filter:blur(8px);}
.actionbar a{flex:1;padding:.85rem .5rem;text-align:center;font-size:.82rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;text-decoration:none;color:var(--paper);}
.actionbar a + a{border-left:1px solid var(--line-faint);color:var(--confirm);}
@media (max-width:760px){.actionbar{display:flex;}body{padding-bottom:52px;}}

/* ── the one authored motion: the sheet plots itself ──────────────── */
.reveal{opacity:0;transform:translateY(14px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i,0) * 55ms);}
.reveal.in{opacity:1;transform:none;}
.plot{stroke-dasharray:var(--len,240);stroke-dashoffset:var(--len,240);}
/* scoped to the element that actually receives .in, so each dimension draws as
   it is reached rather than all of them firing when the figure intersects */
.reveal.in .plot{animation:plot 1.05s cubic-bezier(.22,1,.28,1) forwards;
  animation-delay:calc(var(--i,0) * 55ms + 120ms);}
@keyframes plot{to{stroke-dashoffset:0;}}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .plot{stroke-dashoffset:0;animation:none;}
}