@charset "UTF-8";
/* RWD — the home page
   ==========================================================================
   Everything below the descent, brought onto the hero's terms.

   The page it replaces was built to be noticed: 108px of Archivo Black in
   caps, brand green and brand blue at display size, a filled green button in
   every band, and a white card with a border around every piece of content.
   That is the vocabulary of a page that is worried you will scroll past. A
   buyer at this price does not read effort as generosity; they read it as
   need. So the argument here is the opposite one — quiet type, one accent,
   hairlines instead of boxes, and a lot of air. Restraint is the only thing
   on a web page that cannot be faked cheaply, which is exactly why it reads
   as expensive.

   Four decisions carry it:

     Warm ground.  #F6F6F2 is a cold white; it belongs to software. Bone
                   (#F3F0E9) is the colour of paper stock and plaster, and
                   people looking for somewhere to live respond to warmth
                   they cannot name.

     One accent.   Green and blue are demoted to marks — the dots, and
                   nothing else. In their place, a muted 24-karat (#B08D57)
                   on every label, rule and index numeral. Corniche's own
                   line is "A 24-Karat Life for Priceless People", so the
                   colour is the client's, not an invention. One accent reads
                   as a decision; three read as decoration.

     Rules, not boxes.  A bordered white card says "content module". A
                   hairline says "page". Houses of this kind publish; they do
                   not display.

     One left edge. Every section head, every list row and every card hangs
                   off the same column. The eye reads a shared edge as
                   composition and a drifting one as assembly, well below the
                   level anyone notices they are doing it.

   Scoped entirely to #page-home. Nothing here can reach another page.
   ========================================================================= */


/* ---- Ground and marks --------------------------------------------------- */

#page-home{
  --bone:#F3F0E9;
  --bone-2:#EAE5D9;
  --ink-1:#100F0E;
  --ink-2:#1A1815;
  /* Bark. The dark cards are objects sitting on the page rather than ground
     the page is printed on, so they take a material of their own — and the
     material is the building's: Corniche is clad in timber, and the plate
     the whole hero descends is mostly warm brown. Against bone and gold a
     near-black card reads as a hole; this reads as a thing. */
  --bark:#2B211A;
  --gold:#B08D57;
  --gold-lt:#CBAE80;
  --rule:rgba(16,15,14,.14);
  --rule-i:rgba(255,255,255,.13);
  --say:#2E2B27;
  --mute:#6C6860;
  --mute-i:#A7A199;

  background:var(--bone);
  color:var(--say);
}

#page-home .band-dark,
#page-home .stats,
#page-home .cta-band{ background:var(--ink-1); color:#F4F1EA }


/* ---- Measure ------------------------------------------------------------
   Wider gutters and much taller sections. The old 96px was the same
   breathing room a blog gets; at these type sizes it read as cramped.
------------------------------------------------------------------------- */

#page-home section.block{
  max-width:1280px;
  padding:clamp(84px,11vh,148px) clamp(24px,3.4vw,44px);
}


/* ---- Labels -------------------------------------------------------------
   Gold, and much smaller than they were. A 13px label at .15em is a caption;
   a 10.5px label at .3em is a mark on a page, which is what a section label
   should be. The tracking does the work the size used to.
------------------------------------------------------------------------- */

#page-home .eyebrow{
  font:400 clamp(16px,.76vw,16px)/1 var(--lux-sans);
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); gap:11px;
}
#page-home .band-dark .eyebrow,
#page-home .cta-band .eyebrow{ color:var(--gold-lt) }
#page-home .eyebrow .dots{ gap:5px }
#page-home .eyebrow .dots i{ width:6px; height:6px }


/* ---- Section heads ------------------------------------------------------
   Two columns under one hairline, and the same hairline in every section —
   the device that makes twelve unrelated bands read as one document.
------------------------------------------------------------------------- */

/* Stacked, not two columns. hero.css had already moved off a two-column head
   for exactly this reason — "the wider the screen, the further it drifted
   from the heading it belongs to" — and putting the grid back reproduced the
   orphan it was written to fix. The lead belongs under its own headline, on
   a measure short enough to read as a subtitle. */
#page-home .block-head{
  display:block;
  margin-bottom:clamp(42px,6vh,78px);
  /* The padding stays — it is what sets the head off from the block under
     it — but the rule that used to close it is gone. */
  padding-bottom:clamp(24px,3.2vh,38px);
}

/* The one head whose second element is a button rather than a paragraph. */
#page-home .block-head:has(> .btn){
  display:flex; align-items:flex-end; justify-content:space-between;
  flex-wrap:wrap; gap:clamp(20px,3vw,40px);
}

#page-home .block-head h2,
#page-home .legacy h2,
#page-home .cta-band h2{
  margin:clamp(16px,2.2vh,24px) 0 0;
  font:400 clamp(29px,3.6vw,58px)/1.09 var(--lux);
  letter-spacing:0; text-transform:none;
  color:var(--ink-1);
}
#page-home .band-dark h2,
#page-home .cta-band h2{ color:#F4F1EA }

/* Emphasis by italic, never by colour — the rule the curtain set. */
#page-home h2 span,
#page-home h2 em{ font-style:italic; font-weight:400; color:inherit }

/* Hung off a gold hairline so it reads as attached to the headline above it
   rather than as a paragraph that lost its section. */
#page-home .block-head .lead{
  max-width:56ch;
  margin:clamp(20px,2.8vh,30px) 0 0;
  padding-left:clamp(18px,2vw,30px);
  border-left:1px solid var(--gold);
  font:400 clamp(16px,1.05vw,16.5px)/1.76 var(--lux-sans);
  color:var(--mute);
}
#page-home .band-dark .lead{ color:var(--mute-i) }

/* A head whose second column is a button, not a paragraph. */



/* No blanket `#page-home p` rule, however tempting. The hero lives inside
   this page too, and an id-scoped element selector outranks every class in
   hero.css — .sky-line and .fact-fig are both <p>, and both would have lost
   their Playfair to it. Each block below states its own type instead. */


/* ---- Actions ------------------------------------------------------------
   No filled green anywhere. Ink on bone, paper on ink, and both invert on
   hover — one gesture, used everywhere, instead of four button styles.
------------------------------------------------------------------------- */

#page-home .btn{
  padding:clamp(15px,2vh,19px) clamp(26px,2.6vw,40px);
  font:400 clamp(16px,.82vw,16px)/1 var(--lux-sans);
  letter-spacing:.22em; text-transform:uppercase;
  border:1px solid transparent; gap:12px;
  transition:background .38s ease, color .38s ease, border-color .38s ease;
}
#page-home .btn-solid{
  background:var(--ink-1); color:#F4F1EA; border-color:var(--ink-1);
}
#page-home .btn-solid:hover{ background:transparent; color:var(--ink-1) }

#page-home .band-dark .btn-solid,
#page-home .cta-band .btn-solid{
  background:#F4F1EA; color:var(--ink-1); border-color:#F4F1EA;
}
#page-home .band-dark .btn-solid:hover,
#page-home .cta-band .btn-solid:hover{ background:transparent; color:#F4F1EA }

#page-home .btn-ghost{
  background:transparent; color:#F4F1EA;
  border-color:rgba(255,255,255,.38);
}
#page-home .btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08) }

#page-home .btn-dark{
  background:transparent; color:var(--ink-1);
  border-color:rgba(16,15,14,.28);
}
#page-home .btn-dark:hover{ background:var(--ink-1); color:#F4F1EA; border-color:var(--ink-1) }


/* ==== 1. The record ======================================================
   Four figures in four bordered boxes with green and blue plus signs read as
   a dashboard. The dividers are gone; each figure now sits under its own
   hairline with a lot of space around it, which is how a number is presented
   when you are not worried about being believed.
========================================================================= */

#page-home .stats{ padding:clamp(78px,11vh,132px) 0 }
#page-home .stats-inner{ width:min(1280px, calc(100% - clamp(48px,6.8vw,88px))) }

#page-home .stat-band{
  margin-top:clamp(38px,5vh,62px);
  border-top:none;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,3vw,54px);
}
#page-home .stat-band .stat{
  padding:clamp(20px,2.8vh,32px) 0 0;
  border-right:none;
  border-top:1px solid var(--rule-i);
}

#page-home .stat .num{
  font:400 clamp(32px,4.2vw,72px)/1 var(--lux);
  color:#F4F1EA;
  font-variant-numeric:tabular-nums;
}
/* The unit set as a raised gold mark rather than as a second colour of the
   same size — the way a price is set, not the way a score is. */
#page-home .stat .num em{
  font-style:normal; font-size:.5em; vertical-align:.30em;
  margin-left:.08em; color:var(--gold);
}
#page-home .stat:nth-child(odd) .num em,
#page-home .stat:nth-child(even) .num em{ color:var(--gold) }

#page-home .stat .lbl{
  margin-top:clamp(12px,1.8vh,18px);
  font:400 16px/1 var(--lux-sans);
  letter-spacing:.3em; text-transform:uppercase;
  color:rgba(244,241,234,.52);
}

@media (max-width:820px){
  #page-home .stat-band{ grid-template-columns:1fr 1fr }
  #page-home .stat-band .stat{ border-bottom:none; padding-bottom:0 }
}


/* ==== 2. The drawn plate =================================================
   What is left of the Ongoing section. Its lead-and-stack layout — .og-lead,
   .og-side, .og-grid, .og-facts, .og-amen and the twenty rules that dressed
   them — went when both homepage card rows moved onto the shared card in
   cards.css. The lead card in particular was sized to match the pair stacked
   beside it and could not fill that height, which is what put 340px of bone
   above its own call to action.

   These five rules stay, because footprint.js still draws them: a project
   with no usable photograph gets a diagram on its map card rather than a
   hole. A plotted development gets a lattice of plots either side of two
   avenues; anything else gets its own initial in outline. Full-bleed behind
   the words and faint enough to be ground rather than image, with the
   avenues a shade brighter than the plot lines so the drawing has a
   hierarchy instead of reading as graph paper.
========================================================================= */

#page-home .og-mark{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:.9;
  -webkit-mask-image:linear-gradient(200deg, #000 8%, rgba(0,0,0,.25) 62%, transparent 92%);
          mask-image:linear-gradient(200deg, #000 8%, rgba(0,0,0,.25) 62%, transparent 92%);
}
#page-home .og-mark svg{ width:100%; height:100%; display:block }
#page-home .og-plots path{
  fill:none; stroke:rgba(203,174,128,.26); stroke-width:1;
  vector-effect:non-scaling-stroke;
}
#page-home .og-ave{
  fill:none; stroke:rgba(203,174,128,.52); stroke-width:1.4;
  vector-effect:non-scaling-stroke;
}
#page-home .og-init{
  fill:none; stroke:rgba(203,174,128,.28); stroke-width:1.2;
  vector-effect:non-scaling-stroke;
  font:400 210px/1 var(--lux);
}


/* ==== 3. Chairman ========================================================
   A circular portrait with a green dot on it is a staff badge. Squared off,
   set small against a large italic quotation and hung off the same left edge
   as everything else, it becomes a frontispiece — and the words get to be
   the thing on the page, which is the point of a chairman's message.
========================================================================= */

/* The portrait was too small to hold its side of the spread — a 210px plate
   against a 34px quotation reads as a thumbnail attached to a pull-quote
   rather than as a frontispiece facing a page. Roughly a third of the width
   now, and in colour: this is the one face on the site, and draining it grey
   was a designer's habit rather than a decision. The warmth of a portrait is
   most of what a chairman's message is doing. */
#page-home .chair-grid{
  grid-template-columns:minmax(0,clamp(230px,26vw,340px)) minmax(0,1fr);
  gap:clamp(32px,4.6vw,76px);
  align-items:start;
}
#page-home .chair-photo{ position:relative }
#page-home .chair-photo img{
  border-radius:0; border:none;
  aspect-ratio:4/5; object-fit:cover; object-position:50% 22%;
  filter:none;
}
#page-home .chair-photo::after{ display:none }
/* A hairline under the plate instead of the dot that was on it. */
#page-home .chair-photo::before{
  content:""; display:block; position:absolute;
  left:0; right:0; bottom:-15px; height:1px; background:var(--gold);
}

/* Set to the height of the portrait beside it rather than to a measure
   chosen on its own: the quotation and the plate should finish together. */
#page-home .chair-quote{
  margin-top:0!important;
  font:400 clamp(19px,2.05vw,30px)/1.52 var(--lux);
  font-style:italic; color:#F4F1EA; max-width:34ch;
}
/* Typographic marks, set by the stylesheet rather than typed into the copy —
   the opening one hung outside the measure the way a book sets it, so the
   first line still starts on the column edge. The straight quotes that were
   in the markup have been taken out; two would have printed otherwise. */
#page-home .chair-quote::before{
  content:"“"; position:absolute;
  margin-left:-.54em; margin-top:-.04em;
  font-style:normal; color:var(--gold); opacity:.9;
}
#page-home .chair-quote::after{
  content:"”"; font-style:normal; color:var(--gold); opacity:.9;
}
#page-home .chair-grid > div:last-child{ position:relative }
/* The two emphasised words were green and blue inside an italic line, which
   made them read as links. Upright inside an italic is the older and quieter
   way to stress a word. */
#page-home .chair-quote strong,
#page-home .chair-quote .b{
  font-style:normal; font-weight:400; color:#F4F1EA;
}
#page-home .chair-meta{ margin-top:clamp(30px,4.4vh,48px)!important }
#page-home .chair-meta::before{
  content:""; display:block; width:44px; height:1px;
  background:var(--gold); margin-bottom:clamp(18px,2.4vh,24px);
}
#page-home .chair-meta .nm{
  font:400 17px/1 var(--lux); text-transform:none; letter-spacing:0;
  color:#F4F1EA;
}
#page-home .chair-meta .rl{
  font:400 16px/1 var(--lux-sans); letter-spacing:.26em;
  text-transform:uppercase; color:var(--gold-lt); margin-top:9px;
}


/* ==== 4. Why RWD =========================================================
   The words on the left, a card carousel on the right (after React Bits'
   Carousel, flat — no 3D turn, no autoplay). A rounded frame holds one card
   at a time; the card is bark with its number in a cream disc, its line
   drawing, then its title and sentence. Dots under the frame.
========================================================================= */

#page-home section.why-sec{
  display:grid; align-items:center;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(36px,6vw,110px);
}
@media (max-width:900px){
  #page-home section.why-sec{ grid-template-columns:minmax(0,1fr); gap:36px }
}

/* The heading stacks: title, line, then the paragraph under it. */
#page-home .why-sec .block-head{ display:block; margin:0; padding:0 }
#page-home .why-sec .block-head .lead{
  margin-top:clamp(22px,3vh,32px); max-width:44ch;
  font:400 clamp(16px,1.02vw,16px)/1.78 var(--lux-sans); color:var(--mute);
}

/* ---- The frame ---------------------------------------------------------- */
#page-home .why-car{ min-width:0; width:100%; max-width:560px; justify-self:center }
#page-home .why-frame{
  position:relative; overflow:hidden;
  padding:16px;
  border:1px solid var(--rule); border-radius:28px;
  background:rgba(255,255,255,.35);
}
#page-home .why-frame:focus-visible{ outline:2px solid var(--gold); outline-offset:4px }

#page-home .why-track{
  list-style:none; margin:0; padding:0;
  display:flex; column-gap:16px;
  /* Without the script: a sideways scroller that snaps a card at a time. */
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
}
#page-home .why-track::-webkit-scrollbar{ display:none }
#page-home .why-car.is-js .why-track{
  overflow:visible; scroll-snap-type:none;
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
#page-home .why-car.is-js .why-track.is-dragging{ transition:none }
#page-home .why-car.is-js .why-frame{ touch-action:pan-y; cursor:grab; user-select:none }
#page-home .why-car.is-js .why-frame:active{ cursor:grabbing }

/* ---- A card -------------------------------------------------------------
   A picture of RWD's own work, full bleed, under a veil that is clear at the
   top and deep bark at the foot where the words sit. The number in a cream
   disc and the drawing on a glass tile ride the top edge.

   Playing in (.is-on, set by why.js once the section is on screen): the
   picture settles from a slow zoom, the drawing's lines draw themselves, the
   title and sentence rise. Only under .is-js — without the script every
   card is simply shown, finished.
------------------------------------------------------------------------- */
#page-home .why-card{
  position:relative; isolation:isolate;
  flex:0 0 100%; min-width:0; scroll-snap-align:start;
  display:flex; flex-direction:column; justify-content:space-between;
  min-height:clamp(440px,60vh,560px);
  border-radius:14px;
  background:var(--bark); color:var(--paper-i);
  overflow:hidden;
}
#page-home .wy-img{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover;
}
#page-home .why-card::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(16,15,14,.42) 0%, rgba(16,15,14,0) 26%),
    linear-gradient(0deg, rgba(43,33,26,.97) 0%, rgba(43,33,26,.86) 30%, rgba(43,33,26,.25) 62%, rgba(43,33,26,0) 78%);
}
/* A hairline of gold round the inside edge, so the card reads as a plate
   even over a bright sky. */
#page-home .why-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(203,174,128,.28);
}

#page-home .wy-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:20px;
}
#page-home .why-card .wy-n{
  display:grid; place-items:center; flex:none;
  width:44px; height:44px; border-radius:50%;
  background:#F4F1EA; color:#100F0E;
  font:500 16px/1 var(--lux-sans); letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}

/* The drawing, on a tile of frosted bark. */
#page-home .wy-art{
  display:grid; place-items:center;
  width:clamp(118px,11vw,150px); aspect-ratio:240/170;
  padding:12px; border-radius:14px;
  background:rgba(43,33,26,.5);
  border:1px solid rgba(203,174,128,.3);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
#page-home .wy-art svg{
  width:100%; height:auto;
  fill:none; stroke:var(--gold-lt); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
  overflow:visible;
}
#page-home .wy-art .wy-faint{ stroke-opacity:.35 }
#page-home .wy-art .wy-dash{ stroke-opacity:.7; stroke-dasharray:5 6 }
#page-home .wy-art .wy-fill{ fill:var(--gold-lt); stroke:none }
#page-home .wy-art .wy-cut{ fill:var(--bark); stroke:var(--gold-lt) }
#page-home .wy-art .wy-tick{ stroke-width:2.6 }

#page-home .wy-body{ padding:0 26px 28px }
#page-home .why-card .wy-t{
  margin:0 0 10px;
  font:400 clamp(24px,2.1vw,32px)/1.15 var(--lux); color:#fff;
  text-transform:none; letter-spacing:0;
  text-shadow:0 2px 18px rgba(0,0,0,.3);
}
/* A short gold rule between the title and its sentence. */
#page-home .why-card .wy-t::after{
  content:""; display:block; width:36px; height:1px; margin-top:14px;
  background:var(--gold);
}
#page-home .why-card .wy-say{
  margin:0; max-width:44ch;
  font:400 clamp(16px,1.02vw,16px)/1.7 var(--lux-sans);
  color:rgba(244,241,234,.86);
}

/* ---- Playing in --------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  #page-home .why-car.is-js .wy-img{
    transform:scale(1.14);
    transition:transform 7s cubic-bezier(.16,.6,.3,1);
  }
  #page-home .why-car.is-js .why-card.is-on .wy-img{ transform:scale(1.02) }

  #page-home .why-car.is-js .wy-draw{
    stroke-dasharray:1; stroke-dashoffset:1;
    transition:stroke-dashoffset 1.5s cubic-bezier(.45,.05,.25,1) .25s;
  }
  #page-home .why-car.is-js .why-card.is-on .wy-draw{ stroke-dashoffset:0 }
  #page-home .why-car.is-js .wy-art .wy-dash,
  #page-home .why-car.is-js .wy-art .wy-fill{
    opacity:0; transition:opacity .6s ease 1.1s;
  }
  #page-home .why-car.is-js .why-card.is-on .wy-art .wy-dash,
  #page-home .why-car.is-js .why-card.is-on .wy-art .wy-fill{ opacity:1 }

  #page-home .why-car.is-js .why-card .wy-t,
  #page-home .why-car.is-js .why-card .wy-say{
    opacity:0; transform:translateY(18px);
    transition:opacity .7s ease, transform .8s cubic-bezier(.22,.61,.36,1);
  }
  #page-home .why-car.is-js .why-card.is-on .wy-t{ opacity:1; transform:none; transition-delay:.2s }
  #page-home .why-car.is-js .why-card.is-on .wy-say{ opacity:1; transform:none; transition-delay:.34s }
  #page-home .why-car.is-js .why-card .wy-t::after{
    transform:scaleX(0); transform-origin:left;
    transition:transform .7s cubic-bezier(.22,.61,.36,1) .5s;
  }
  #page-home .why-car.is-js .why-card.is-on .wy-t::after{ transform:none }
}


/* ---- Dots --------------------------------------------------------------- */
#page-home .why-dots{
  display:flex; justify-content:center; gap:14px;
  margin-top:20px;
}
#page-home .why-car:not(.is-js) .why-dots{ display:none }
#page-home .why-dot{
  width:9px; height:9px; padding:0; border:0; border-radius:50%;
  background:rgba(16,15,14,.2); cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
#page-home .why-dot:hover{ background:rgba(16,15,14,.4) }
#page-home .why-dot.is-on{ background:var(--gold); transform:scale(1.25) }
#page-home .why-dot:focus-visible{ outline:2px solid var(--gold); outline-offset:3px }

@media (max-width:900px){
  #page-home .why-car{ max-width:none }
  #page-home .why-card{ min-height:460px }
}

@media (prefers-reduced-motion:reduce){
  #page-home .why-car.is-js .why-track,
  #page-home .why-dot{ transition:none }
}


/* ==== 5. Completed landmarks =============================================
   Nothing here any more. The row used .proj-card, and both homepage card
   rows moved to the shared card in cards.css — which is also where the
   upright crop this section introduced now lives, applied to every card on
   the site rather than to these three.
========================================================================= */


/* ==== 6. Residents speak =================================================
   Two white cards with borders on an ink band is a comment thread. Two
   columns of large italic testimony separated by a hairline is a page from a
   book — and a quotation carries more when nothing is drawn around it.
========================================================================= */

#page-home .testi-grid{ gap:0; column-gap:clamp(30px,5vw,90px) }
#page-home .testi{
  background:transparent; border:none;
  padding:clamp(30px,4.4vh,52px) 0;
  border-top:1px solid var(--rule-i);
  gap:clamp(20px,2.8vh,30px);
}
/* The renderer was writing background, border and colour as inline styles,
   which no stylesheet can outrank. They are gone from the markup; the card is
   styled here like everything else. */
#page-home .testi .q{
  position:relative;
  font:400 clamp(17px,1.6vw,23px)/1.56 var(--lux);
  font-style:italic; color:#F4F1EA;
}
/* Typed quotes came out of the copy with them. */
#page-home .testi .q::before{
  content:"“"; position:absolute;
  margin-left:-.5em; font-style:normal; color:var(--gold-lt);
}
#page-home .testi .q::after{
  content:"”"; font-style:normal; color:var(--gold-lt);
}
/* The attribution sat on `margin-top:auto`, which pinned it to the foot of a
   card stretched to its neighbour's height. Next to a two-line quotation
   that opened a void between the words and the person who said them. It now
   follows the quotation directly and the slack falls at the bottom of the
   card, where it reads as air rather than as a missing line.

   The cards still stretch, so the hairline above each one in the second row
   still lines up across the grid — which is the reason to stretch them. */
#page-home .testi{ justify-content:flex-start }
#page-home .testi .q{ margin:0 }
#page-home .testi .who{
  margin-top:clamp(24px,3.2vh,34px);
  align-items:flex-start; gap:13px;
}
/* Name and project were set solid — 15px of Playfair with a tracked 10.5px
   label immediately under it read as one clump rather than two lines. */
#page-home .testi .who > div{ display:grid; gap:9px }
#page-home .testi .who .nm{
  font:400 16px/1 var(--lux); font-weight:400; color:#F4F1EA;
}
#page-home .testi .who .pj{
  font:400 16px/1 var(--lux-sans); letter-spacing:.26em;
  text-transform:uppercase; color:var(--gold-lt);
}
#page-home .testi .who .dash{
  font:400 16px/1 var(--lux-sans); color:#F4F1EA;
}


/* ==== 7. Beyond RWD ====================================================== */

/* In colour, and at full strength. Greyscaling a set of logos is a habit
   from pages where they are filler; these are the group RWD belongs to, and
   holding them at 44% until someone happens to point at them hides the
   argument the section exists to make. Hover lifts them a little instead. */
#page-home .group-strip img{
  filter:none; opacity:.9;
  transition:opacity .5s ease;
}
#page-home .group-strip li:hover img{ opacity:1 }


/* ==== 8. Legacy ==========================================================
   Centred and alone on ink, with the year it reaches back to standing behind
   it as an outline. A date used as artwork rather than as a claim is the
   oldest move in heritage advertising, and it works because it says the
   thing without asserting it.
========================================================================= */

#page-home .band-dark:has(.legacy){ overflow:hidden }
#page-home .legacy{
  position:relative; max-width:840px; text-align:center;
}
#page-home .legacy .btn{ margin-top:clamp(10px,1.6vh,18px) }
#page-home .legacy::before{
  content:"1997"; position:absolute;
  /* 0 rather than the old negative offset: Lora's figures sit higher in
     their line box than Playfair's did, and the band clipped their tops. */
  top:0; left:50%; transform:translateX(-50%);
  font:400 clamp(120px,20vw,300px)/1 var(--lux);
  /* A faint fill plus a heavier stroke: at 1px and 16% the year all but
     vanished into the band. Still low enough to sit behind the copy. */
  color:rgba(176,141,87,.10);
  -webkit-text-stroke:1.5px rgba(203,174,128,.55);
  letter-spacing:.04em; pointer-events:none; white-space:nowrap;
}
#page-home .legacy > *{ position:relative }
#page-home .lg-eyebrow{
  font:400 clamp(16px,.76vw,16px)/1 var(--lux-sans);
  letter-spacing:.3em; text-transform:uppercase; color:var(--gold-lt);
}
#page-home .legacy h2{ color:#F4F1EA; max-width:20ch }
#page-home .lg-eyebrow{ margin-inline:auto }
#page-home .legacy h2{ margin-inline:auto }
#page-home .lg-copy{
  margin-inline:auto; max-width:58ch;
  font:400 clamp(16px,1.02vw,16.5px)/1.82 var(--lux-sans);
  color:var(--mute-i);
}


/* ==== 9. Footprint =======================================================
   Not a section: a scene. The map of Chennai and its corridors fills the
   screen edge to edge and is held there (sticky, inside a track a little
   under two screens tall) while the caption and its wash of the page's bone
   give way and the view settles to fill the screen; then the page carries
   on, and the map is the visitor's to move.
========================================================================= */

#page-home .tn-scene{ position:relative; height:170vh }
#page-home .tn-stage{
  position:sticky; top:0; height:100vh; height:100svh; overflow:hidden;
  background:var(--bone-2);
}
/* z-index:0 makes the map its own stacking context: Leaflet's panes carry
   z-indexes up to 1000, and without this they would ride over the fixed
   header. */
#page-home .tn-map{ position:absolute; inset:0; z-index:0 }
/* On a phone the action bar covers the foot of the screen; the zoom buttons
   and the credit line sit above it. */
@media (max-width:900px){
  #page-home .tn-map .leaflet-bottom{ bottom:var(--bar-h, 0px) }
}

#page-home .tn-shade{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(243,240,233,.95) 0%, rgba(243,240,233,.8) 27%,
             rgba(243,240,233,0) 54%);
}
@media (max-width:760px){
  #page-home .tn-shade{
    /* Solid well up past the caption's first line: a place name on the map
       behind the section label reads as a typo in it. */
    background:linear-gradient(0deg, rgba(243,240,233,.97) 0%, rgba(243,240,233,.93) 44%,
               rgba(243,240,233,0) 64%);
  }
}

/* The caption sits over the wash; clicks go through to the map. */
#page-home .tn-captions{
  position:absolute; z-index:2; top:0; bottom:0;
  left:clamp(24px,5vw,84px); width:min(40vw,560px); pointer-events:none;
}
@media (max-width:760px){ #page-home .tn-captions{ left:22px; right:22px; width:auto } }
#page-home .tn-cap{
  position:absolute; left:0; right:0; top:50%;
  transform:translateY(calc(-50% + var(--dy, 0px)));
  will-change:transform, opacity;
}
@media (max-width:760px){
  #page-home .tn-cap{ top:auto; bottom:calc(var(--bar-h, 0px) + 40px); transform:translateY(var(--dy, 0px)) }
}
#page-home .tn-cap-eyebrow{
  display:flex; align-items:center; gap:11px; margin:0 0 clamp(14px,2vh,22px);
  font:400 clamp(16px,.76vw,16px)/1 var(--lux-sans);
  letter-spacing:.3em; text-transform:uppercase; color:var(--gold);
}
#page-home .tn-cap-eyebrow .dots{ gap:5px }
#page-home .tn-cap-eyebrow .dots i{ width:6px; height:6px }
#page-home .tn-cap h2{
  margin:0; font:400 clamp(30px,3.8vw,62px)/1.06 var(--lux); color:var(--ink-1);
  text-wrap:balance;
}
#page-home .tn-cap-text{
  margin:clamp(16px,2.4vh,26px) 0 0; max-width:44ch;
  padding-left:clamp(16px,1.6vw,26px); border-left:1px solid var(--gold);
  font:400 clamp(16px,1.05vw,16.5px)/1.7 var(--lux-sans); color:var(--mute);
}
#page-home .tn-cap-count{
  margin:clamp(14px,2vh,20px) 0 0;
  font:400 16px/1.4 var(--lux-sans); letter-spacing:.22em; text-transform:uppercase; color:var(--gold);
}

/* Every pin is the RWD badge. A white collar carries it over the map's own
   greens and greys, which a bare dark disc would sink into; the border
   colour carries the status (below). */
#page-home .tn-marker{ background:none; border:0 }
#page-home .tn-marker svg{
  display:block; overflow:visible;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.34));
}
#page-home .tn-marker .tn-ring{ fill:#76BC21 }
#page-home .tn-marker .tn-body{ fill:#0B0B0C }
/* Every pin is the same badge; only the border says which stage it is at —
   the same three as the projects map: red ongoing, green completed,
   white coming soon. */
#page-home .tn-marker.is-ongoing .tn-ring{ fill:#E53935 }
#page-home .tn-marker.is-soon .tn-ring{ fill:#FFFFFF }
/* Small at state scale (hero code sets .is-far below zoom 9), scaled from
   the tip so each still points at its place. */
#page-home .tn-marker svg{ transform-origin:50% 100%; transition:transform .25s ease }
#page-home .tn-map.is-far .tn-marker svg{ transform:scale(.6) }

/* A pin's card: the project's picture, its status, where and what it is.
   With a mouse it comes up on hover (a Leaflet tooltip, so it never catches
   the pointer) and the pin itself is the link; on a touch screen a tap
   opens it as a popup, with the link in it. */
#page-home .tn-map .tn-tip{
  width:260px; padding:0; border:0; border-radius:2px; background:#fff;
  white-space:normal;
  box-shadow:0 22px 44px -16px rgba(28,22,16,.5), 0 2px 8px rgba(28,22,16,.14);
}
#page-home .tn-map .tn-pop .leaflet-popup-content-wrapper{ padding:0; border-radius:2px; overflow:hidden }
#page-home .tn-map .tn-pop .leaflet-popup-content{ margin:0 }
#page-home .tn-map .tn-pop a.leaflet-popup-close-button{
  z-index:2; top:8px; right:8px; width:28px; height:28px; border-radius:50%;
  font:400 20px/28px var(--lux-sans); color:#fff; background:rgba(20,16,12,.5);
}
#page-home .tn-card{ overflow:hidden; border-radius:2px; animation:tn-card-in .3s cubic-bezier(.22,.61,.36,1) both }
@keyframes tn-card-in{ from{ opacity:0; transform:translateY(6px) } }
#page-home .tn-card-media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--ink-1) }
#page-home .tn-card-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
#page-home .tn-card-media .og-mark{ opacity:1 }
#page-home .tn-card-tag{
  position:absolute; left:10px; top:10px; z-index:1;
  display:inline-flex; align-items:center; gap:7px; padding:6px 10px 6px 9px;
  background:rgba(20,16,12,.6); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  font:400 16px/1 var(--lux-sans); letter-spacing:.2em; text-transform:uppercase; color:#fff;
}
#page-home .tn-card-tag i{ width:6px; height:6px; border-radius:50%; background:var(--gold) }
#page-home .tn-card-tag.is-ongoing i{ background:#E53935 }
#page-home .tn-card-tag.is-built i{ background:#76BC21 }
#page-home .tn-card-tag.is-soon i{ background:#fff }
#page-home .tn-card-body{ padding:14px 16px 16px }
#page-home .tn-card-loc{
  margin:0; font:400 16px/1.3 var(--lux-sans);
  letter-spacing:.24em; text-transform:uppercase; color:var(--gold);
}
#page-home .tn-card-name{ margin:6px 0 0; font:400 21px/1.15 var(--lux); color:var(--ink-1) }
#page-home .tn-card-spec{ margin:5px 0 0; font:400 16px/1.5 var(--lux-sans); color:var(--mute) }
#page-home .tn-card-go{
  display:inline-flex; align-items:center; gap:8px; margin-top:12px; text-decoration:none;
  font:400 16px/1 var(--lux-sans); letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
}
#page-home .tn-card-go i{ font-style:normal }
/* Coming-soon pins show their card but lead nowhere yet. */
#page-home .tn-map .tn-marker.is-soon{ cursor:default }

/* Without the map library the caption stands as an ordinary section. */
#page-home .tn-scene.no-map{ height:auto }
#page-home .tn-scene.no-map .tn-stage{
  position:static; height:auto; background:none;
  padding:clamp(84px,11vh,148px) clamp(24px,3.4vw,44px);
}
#page-home .tn-scene.no-map .tn-map,
#page-home .tn-scene.no-map .tn-shade{ display:none }
#page-home .tn-scene.no-map .tn-captions{ position:static; width:auto }
#page-home .tn-scene.no-map .tn-cap{ position:static; transform:none }

}


/* ==== 11. Closing ========================================================
   The two coloured blobs behind the headline were the only piece of pure
   decoration on the page. Replaced with a single wide gold wash low on the
   band — light entering a dark room rather than two circles.
========================================================================= */

#page-home .cta-band .block{ padding-block:clamp(94px,13vh,168px) }
#page-home .cta-dots{
  right:auto; top:auto; left:50%; bottom:-46%;
  width:min(1500px,150%); height:120%;
  transform:translateX(-50%); border-radius:0;
  background:radial-gradient(58% 62% at 50% 100%,
    rgba(176,141,87,.20), rgba(176,141,87,.05) 44%, transparent 74%);
}
#page-home .cta-band h2{
  font:400 clamp(32px,4.6vw,74px)/1.08 var(--lux);
  text-transform:none; letter-spacing:0; max-width:17ch;
}
#page-home .cta-band h2 span{ color:inherit; font-style:italic }
#page-home .cta-band .hero-actions{ display:flex; flex-wrap:wrap; gap:13px }


/* ==== Motion =============================================================
   The descent runs at 30 seconds. Everything below it has to move at the
   same speed or the page changes character halfway down: fast easing reads
   as an interface, slow easing reads as film.

   Headings arrive by uncovering rather than by fading — a line that wipes on
   from below reads as something being printed, and it is the one gesture on
   the page that is worth spending 1.1 seconds on.
========================================================================= */

@media (prefers-reduced-motion: no-preference){
  #page-home .rv{
    transform:translateY(30px);
    transition:opacity 1.05s cubic-bezier(.22,.61,.36,1),
               transform 1.05s cubic-bezier(.22,.61,.36,1);
  }

  #page-home .rv h2,
  #page-home .rv .lg-eyebrow,
  #page-home .rv .lead{
    clip-path:inset(0 0 108% 0);
    transition:clip-path 1.1s cubic-bezier(.22,.61,.36,1);
  }
  #page-home .rv.in h2,
  #page-home .rv.in .lg-eyebrow,
  #page-home .rv.in .lead{ clip-path:inset(0 0 -12% 0) }

  #page-home .rv h2{ transition-delay:.10s }
  #page-home .rv .lead{ transition-delay:.24s }

}



/* ==== Arrival ============================================================
   A fade and a short rise. No flip: a plane rotating in space is a gesture
   about the animation, and once every card on the page does it the page is
   about its own transitions rather than about the buildings.

   What is kept is the order. Cards side by side reach the viewport in the
   same frame, so arrival alone can never produce one-after-another —
   nth-child delays do, and that sequencing is the part that was worth
   having.
========================================================================= */

@media (prefers-reduced-motion: no-preference){

  /* The base .rv rule above sets a transform with id specificity, which the
     site's own `.rv.in{transform:none}` cannot outrank. Without this line
     every revealed block on the page stays 30px low for good. */
  #page-home .rv.in{ transform:none }

  html.js #page-home .testi.rv{
    opacity:0; transform:translateY(26px);
    transition:transform .95s cubic-bezier(.22,.61,.36,1),
               opacity .75s ease;
  }
  /* html.js on these too. Gating only the opacity:0 rule above gave it a
     type selector the .in rule did not have, so it outranked its own
     override and every card stayed invisible after revealing — the same
     specificity trap the note twenty lines up describes. */
  html.js #page-home .testi.rv.in{ opacity:1; transform:none }
  /* Both card rows are .pl-slot now, staged by cards.css; only the
     residents’ quotes are still staged here. */

  #page-home .testi-grid .testi.rv:nth-child(1){ transition-delay:0s }
  #page-home .testi-grid .testi.rv:nth-child(2){ transition-delay:.12s }
  #page-home .testi-grid .testi.rv:nth-child(3){ transition-delay:.24s }
  #page-home .testi-grid .testi.rv:nth-child(4){ transition-delay:.36s }

  /* ---- The rows and the marks ------------------------------------------
     Children of one revealed container rather than revealed individually, so
     they run on a keyframe with a delay instead of on a transition. Same
     distance, same curve — one gesture on the page, not two.
  --------------------------------------------------------------------- */
  #page-home .why.in li,
  #page-home .group-strip.in li{
    animation:homeRise .95s cubic-bezier(.22,.61,.36,1) both;
  }
  #page-home .why.in li:nth-child(1),
  #page-home .group-strip.in li:nth-child(1){ animation-delay:.02s }
  #page-home .why.in li:nth-child(2),
  #page-home .group-strip.in li:nth-child(2){ animation-delay:.13s }
  #page-home .why.in li:nth-child(3),
  #page-home .group-strip.in li:nth-child(3){ animation-delay:.24s }
  #page-home .why.in li:nth-child(4),
  #page-home .group-strip.in li:nth-child(4){ animation-delay:.35s }
  #page-home .why.in li:nth-child(5),
  #page-home .group-strip.in li:nth-child(5){ animation-delay:.46s }
  #page-home .group-strip.in li:nth-child(6){ animation-delay:.57s }
}

@keyframes homeRise{
  from{ opacity:0; transform:translateY(20px) }
  to  { opacity:1; transform:none }
}