/* ═══════════════════════════════════════════════════════════════════
   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, never absent */
@media (max-width:640px){.ticks{inset: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){
  .topbar{height:auto;flex-direction:column;align-items:stretch;}
  .topbar__in{height:var(--nav-h);}
  .topbar nav{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;padding:.55rem var(--gut) .55rem 0;font-size:.72rem;letter-spacing:.11em;
    white-space:nowrap;}
  .topbar nav a:first-child{padding-left:var(--gut);}
  :root{--nav-h:56px;}
  html{scroll-padding-top:6.5rem;}
}

/* ── 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 drop the orientation group to its own row rather than losing it */
@media (max-width:560px){
  .plate__sheetno{flex-wrap:wrap;}
  .plate__sheetno .rule{order:3;flex:1 0 100%;margin-top:var(--s2);}
  .plate__sheetno .orient{order:2;margin-left:auto;transform:scale(.85);transform-origin:right center;}
}

/* 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;}
  .reg-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  .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:8.6rem 1fr;gap:var(--s2);
    align-items:baseline;}
  .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;}
}