/* ------------------------------------------------------------------
   Avinaa marketing site - horizontal scroll build.

   The page is one wide track. Vertical wheel input is translated into
   horizontal travel by a single pinned ScrollTrigger, so the whole site
   reads left to right.

   Falls back to ordinary vertical stacking below 1025px and under
   prefers-reduced-motion. A scroll hijack cannot be "reduced", so it is
   removed rather than softened.

   EXTENSION (readme.md convention):
     1. Display sizes above --fs-display-1 (64px).
     2. Dark mode, derived from the existing bronze/slate ramps.
     3. --text-muted raised to slate-500; slate-400 is 3.64:1 on paper
        white and misses WCAG AA at the 11-14px sizes it is used at.
------------------------------------------------------------------ */

:root{
  --fs-hero:      clamp(2.5rem, 5vw, 5.25rem);
  --fs-numeral:   clamp(3rem, 9vw, 9rem);
  --fs-section:   clamp(1.875rem, 3.6vw, 3.25rem);
  --fs-lede:      clamp(1.0625rem, 1.45vw, 1.3125rem);

  --text-muted: var(--slate-500);

  --hairline: 1px solid var(--border-hairline);
  --nav-h: 72px;
  --rail-w: 34px;
  --panel-pad-top: calc(var(--nav-h) + var(--space-10));
  --panel-pad-bottom: var(--space-16);
}

@media (prefers-color-scheme: dark){
  :root{
    --surface-page:  var(--bronze-900);
    --surface-card:  #38311f;
    --surface-band:  #38311f;
    --surface-sunken:#241f17;
    --text-heading:  #ede7dc;
    --text-body:     #ded6c8;
    --text-muted:    var(--bronze-300);
    --text-brand:    var(--bronze-300);
    --border-hairline:#4a4130;
    --border-subtle: #5a5040;
    --border-strong: var(--bronze-300);
    --brand:         var(--bronze-300);
    --text-on-brand: var(--bronze-900);
    --brand-hover:   var(--bronze-200);
    --brand-press:   var(--bronze-100);
    --surface-brand: var(--bronze-800);
    --focus-ring: 0 0 0 2px var(--bronze-900), 0 0 0 4px var(--bronze-300);
  }
  .lockup--auto{ content: url("ds/assets/avinaa-logo-white.svg"); }
}

*,*::before,*::after{ box-sizing:border-box }
body{ margin:0; overflow-x:hidden }
.rule{ border:0; border-top:var(--hairline); margin:0 }

/* ================= HORIZONTAL TRACK ================= */
.viewport{ overflow:hidden }
.track{
  display:flex; align-items:stretch;
  width:max-content;
  padding-left:var(--rail-w);       /* clears the fixed rail */
  will-change:transform;
}
.panel{
  flex:none;
  height:100dvh;
  display:flex; flex-direction:column; justify-content:center;
  padding:var(--panel-pad-top) var(--space-16) var(--panel-pad-bottom);
  position:relative;
}
.panel--full{ width:100vw; padding-inline:var(--layout-margin) }

/* ---------------- IMAGERY ----------------
   Photography is atmosphere here, never evidence. None of these images
   are Avinaa buildings, so none of them sit beside a project name where
   they could be read as one. They appear only as full-bleed breathing
   panels and as the ground under the brand field.

   The brand allows exactly one gradient: the bottom-up protection wash
   that keeps type legible over a photograph. Nothing else fades. */
.panel--photo{ padding:0; overflow:hidden }
.panel--photo-sm{ width:min(42vw, 620px) }
.panel--photo-lg{ width:min(64vw, 960px) }
.panel--photo-xl{ width:100vw }

/* Parallax layers.
   Each photograph is cut 130% of its frame and inset by -15%, which
   leaves 15% of slack on either side for it to travel through. The
   layer then lags the panel as the page pans, so the image reads as
   sitting behind the frame rather than pinned inside it.

   Only photographs move. Never type, never a control. */
.panel--photo img,
.panel--figure > .panel__bg,
.panel--ground > .panel__bg,
.hero__photo{
  position:absolute; top:0; left:-15%;
  width:130%; height:100%;
  object-fit:cover; display:block;
  will-change:transform;
}

/* Ground layers.
   A photograph carried under a content panel, washed back until it is
   texture rather than picture. The wash is the panel's own surface
   colour, so the ground never introduces a new tone; it only disturbs
   the flat paper enough to feel like a printed sheet with something
   behind it.

   Density is deliberate and uneven: sparse panels take a bolder ground,
   dense ones stay nearly clean, and several panels carry none at all.
   The alternation is what stops this reading as wallpaper. */
.panel--ground{ overflow:hidden; isolation:isolate }
.panel--ground > .panel__bg{ z-index:0 }
.panel--ground::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:var(--wash, var(--surface-page));
  opacity:var(--wash-a, .94);
}
.panel--ground > *:not(.panel__bg){ position:relative; z-index:2 }
.panel--ground.panel--band{ --wash:var(--surface-band) }
.panel--ground.panel--sunken{ --wash:var(--surface-sunken) }

/* A panel whose background is a photograph, with the brand field laid
   over it so reversed type keeps its contrast. */
.panel--figure{ overflow:hidden }
.panel--figure > .panel__bg{ z-index:0 }
.panel--figure::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to top, rgba(46,40,30,.72), rgba(46,40,30,.30)),
    var(--surface-brand);
  opacity:.9;
}
.panel--figure > *:not(.panel__bg){ position:relative; z-index:2 }
.panel--band{ background:var(--surface-band) }
.panel--sunken{ background:var(--surface-sunken) }
.panel--brand{ background:var(--surface-brand); color:var(--paper-white) }
.panel + .panel{ border-left:var(--hairline) }

/* ---------------- MOTION SYSTEM ----------------
   One device, used everywhere: the rule draws itself.

   Hairline rules are this brand's primary graphic element, so they are
   what moves. Ink being laid down, not a card sliding in. Every rule
   below is a pseudo-element driven by a --draw custom property, which
   GSAP animates; a border cannot be scaled, a pseudo-element can.

   Default --draw is 1, so with no JS every rule is simply drawn. */
.ruled{ position:relative }
.ruled::before{
  content:''; position:absolute; left:0; right:0; top:0; height:2px;
  background:var(--brand);
  transform:scaleX(var(--draw,1)); transform-origin:0 50%;
}
.ruled--hair::before{ height:1px; background:var(--border-hairline) }
.ruled--v::before{
  right:auto; bottom:0; width:1px; height:auto;
  background:var(--border-hairline);
  transform:scaleY(var(--draw,1)); transform-origin:50% 0;
}
.ruled--rev::before{ background:rgba(255,255,255,.4) }

/* Display type wipes in like a line being set, left to right, matching
   the direction the whole page travels. */
.wipe{ clip-path:inset(0 0 0 0) }

/* ================= NAVIGATION ================= */
.nav{
  position:fixed; inset:0 0 auto; z-index:50;
  height:var(--nav-h);
  display:flex; align-items:center;
  padding-left:var(--rail-w);
  background:var(--surface-page);
  border-bottom:var(--hairline);
}
.nav__inner{
  width:100%; padding-inline:var(--layout-margin);
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-8);
}
.nav__logo{ display:flex; border:0; line-height:0 }
.nav__logo img{ height:42px; width:auto; display:block }
.nav__links{ display:flex; align-items:center; gap:var(--space-8); list-style:none; margin:0; padding:0 }
.nav__links a{
  font:var(--fw-medium) var(--fs-body-sm)/1 var(--font-body);
  color:var(--text-body); border:0; padding-block:var(--space-2);
  border-bottom:2px solid transparent; transition:var(--transition-control);
  cursor:pointer;
}
.nav__links a:hover,.nav__links a[aria-current="true"]{ color:var(--text-brand); border-bottom-color:var(--brand) }
.nav__right{ display:flex; align-items:center; gap:var(--space-4) }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font:var(--fw-label) var(--fs-label)/1 var(--font-label);
  letter-spacing:var(--tracking-label); text-transform:uppercase;
  padding:14px var(--space-6);
  border-radius:var(--radius-control);
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:var(--transition-control);
}
.btn--solid{ background:var(--brand); color:var(--text-on-brand) }
.btn--solid:hover{ background:var(--brand-hover); color:var(--text-on-brand) }
.btn--solid:active{ background:var(--brand-press) }
.btn--outline{ background:transparent; color:var(--text-brand); border-color:var(--border-strong) }
.btn--outline:hover{ background:var(--brand-tint) }
.btn--reverse{ background:var(--paper-white); color:var(--bronze-800); border-color:var(--paper-white) }
.btn--reverse:hover{ background:var(--bronze-50); color:var(--bronze-900) }
.btn:focus-visible{ outline:none; box-shadow:var(--focus-ring) }

.nav__menu{
  display:none; background:none; border:0; cursor:pointer;
  font:var(--fw-label) var(--fs-label)/1 var(--font-label);
  letter-spacing:var(--tracking-label); text-transform:uppercase;
  color:var(--text-body); padding:var(--space-3);
}

.overlay{
  position:fixed; inset:0; z-index:60;
  background:var(--bronze-600);
  display:flex; flex-direction:column; justify-content:center;
  padding:var(--space-16) var(--layout-margin);
  opacity:0; visibility:hidden;
  transition:opacity var(--dur-base) var(--ease-standard), visibility var(--dur-base);
}
.overlay[data-open="true"]{ opacity:1; visibility:visible }
.overlay__close{
  position:absolute; top:calc(var(--nav-h) / 2); right:var(--layout-margin);
  transform:translateY(-50%);
  background:none; border:0; cursor:pointer; color:var(--paper-white);
  font:var(--fw-label) var(--fs-label)/1 var(--font-label);
  letter-spacing:var(--tracking-label); text-transform:uppercase;
}
.overlay__list{ list-style:none; margin:0; padding:0 }
.overlay__list a{
  display:block; border:0; cursor:pointer;
  font:var(--fw-display-light) clamp(2rem, 9vw, 3.5rem)/1.2 var(--font-display);
  letter-spacing:var(--tracking-display);
  color:rgba(255,255,255,.72); transition:color var(--dur-fast) linear;
}
.overlay__list a:hover{ color:var(--paper-white) }
.overlay__foot{
  margin-top:var(--space-10); padding-top:var(--space-6);
  border-top:1px solid rgba(255,255,255,.28);
  font:var(--type-body); color:rgba(255,255,255,.78);
}
.overlay__foot a{ color:var(--paper-white); border-bottom-color:rgba(255,255,255,.4) }

/* Fixed rail and travel indicator ------------------------------- */
.rail{
  position:fixed; left:0; top:0; bottom:0; width:var(--rail-w); z-index:55;
  background:var(--surface-brand);
  display:flex; align-items:center; justify-content:center; border:0;
}
.rail span{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font:var(--type-label); letter-spacing:var(--tracking-label);
  text-transform:uppercase; color:var(--paper-white);
}
.rail:hover{ background:var(--bronze-700) }

/* Wayfinding: a non-standard scroll direction needs a position cue. */
.progress{
  position:fixed; left:var(--rail-w); right:0; bottom:0; height:2px;
  background:var(--border-hairline); z-index:50;
}
.progress__bar{
  height:100%; width:100%; background:var(--brand);
  transform:scaleX(var(--p,0)); transform-origin:0 50%;
}
/* A tick per panel. The bar alone gives ratio; the ticks give place. */
.progress__tick{
  position:absolute; bottom:0; width:1px; height:7px;
  background:var(--border-strong); opacity:.5;
}
.progress__tick[data-on]{ opacity:1; height:11px }

/* ================= SHARED FURNITURE ================= */
.eyebrow{
  font:var(--type-label); letter-spacing:var(--tracking-label);
  text-transform:uppercase; color:var(--text-brand); margin:0 0 var(--space-5);
}
.h-section{
  font:var(--fw-display-light) var(--fs-section)/1.1 var(--font-display);
  letter-spacing:var(--tracking-display); color:var(--text-heading);
  margin:0; text-wrap:balance;
}
.lede{
  font-size:var(--fs-lede); line-height:1.6; color:var(--text-body);
  max-width:54ch; margin:var(--space-6) 0 0;
}
.panel--brand .h-section{ color:var(--paper-white) }
.panel--brand .lede{ color:rgba(255,255,255,.86) }

/* ================= 1. HERO ================= */
.hero{ flex-direction:row; align-items:stretch; padding:0; width:100vw }
.hero__copy{
  flex:1 1 62%;
  display:flex; flex-direction:column; justify-content:center;
  padding:var(--panel-pad-top) var(--space-12) var(--panel-pad-bottom) var(--layout-margin);
}
.hero h1{
  font-size:var(--fs-hero); font-weight:var(--fw-display-light);
  line-height:1.04; letter-spacing:var(--tracking-display);
  color:var(--text-heading); margin:0; text-wrap:balance;
}
.hero__lede{
  font-size:var(--fs-lede); line-height:1.6; color:var(--text-body);
  max-width:44ch; margin:var(--space-8) 0 0;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:var(--space-4); margin-top:var(--space-10) }
.hero__hint{
  display:flex; align-items:center; gap:var(--space-4);
  margin-top:var(--space-16);
  font:var(--type-label); letter-spacing:var(--tracking-label);
  text-transform:uppercase; color:var(--text-muted);
}
.hero__hint i{ display:block; width:64px; height:1px; background:var(--border-strong); font-style:normal }
.hero__field{
  flex:1 1 38%; background:var(--surface-brand);
  display:flex; align-items:center; justify-content:center; padding:var(--space-8);
  position:relative; overflow:hidden;
}
.hero__photo{ z-index:0 }
/* Bronze field over the photograph. The lockup has to stay reversed
   white at full strength, so the ground under it stays brand colour
   rather than becoming a picture with a logo on top. */
.hero__field::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to top, rgba(46,40,30,.74), rgba(46,40,30,.34)),
    var(--surface-brand);
  opacity:.88;
}
.hero__mark{ position:relative; z-index:2 }
.hero__mark{
  display:block; width:min(72%, 250px); aspect-ratio:93/87;
  background:url("ds/assets/avinaa-logo-white.svg") center/contain no-repeat;
}

/* ================= 2. PROOF ================= */
.proof__row{ display:flex; align-items:flex-end; gap:var(--space-16) }
.proof__cell{ padding-left:var(--space-16) }
.proof__cell:first-child{ padding-left:0 }
.proof__cell:first-child::before{ display:none }
.proof__n{
  font:var(--fw-display-light) var(--fs-numeral)/.9 var(--font-display);
  letter-spacing:.01em; color:var(--text-brand);
  display:block; font-variant-numeric:lining-nums; white-space:nowrap;
}
.proof__k{
  font:var(--type-label); letter-spacing:var(--tracking-label);
  text-transform:uppercase; color:var(--text-muted);
  display:block; margin-top:var(--space-5); white-space:nowrap;
}
.proof__note{
  font:var(--fw-display-light) var(--fs-subtitle)/1.4 var(--font-display);
  font-style:italic; color:var(--text-muted); margin:var(--space-12) 0 0;
}

/* ================= 3. POSITION ================= */
.position{ width:min(92vw, 1180px) }
.position__grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-16); align-items:start }
.position__meta{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-8); margin-top:var(--space-10) }
.position__meta dt{
  font:var(--type-label); letter-spacing:var(--tracking-label);
  text-transform:uppercase; color:var(--text-muted); margin-bottom:var(--space-2);
}
.position__meta dd{ margin:0; font-size:var(--fs-body-lg); color:var(--text-body) }
.position__body p{ margin:0 0 var(--space-5) }
.position__body p:last-child{ margin-bottom:0 }

/* ================= 4. REASONS ================= */
.reasons__row{ display:flex; gap:0; margin-top:var(--space-10) }
.reasons__item{
  width:340px; flex:none;
  padding:var(--space-8) var(--space-8) var(--space-8) 0;
  margin-right:var(--space-8);
}
.reasons__item::before{ right:var(--space-8) }
.reasons__item h3{
  font:var(--fw-display) var(--fs-title)/1.2 var(--font-display);
  letter-spacing:var(--tracking-display); color:var(--text-heading);
  margin:0 0 var(--space-4);
}
.reasons__item p{ margin:0; color:var(--text-body); font-size:var(--fs-body-sm) }

/* ================= 5. TRACK RECORD ================= */
/* No space-between here: the panel is thousands of pixels wide, so it
   would strand the total offscreen from the heading it belongs to. */
.record__head{ display:flex; align-items:flex-end; gap:var(--space-16); width:max-content }
.record__total b{
  display:block;
  font:var(--fw-display-light) clamp(1.5rem,2.6vw,2.25rem)/1 var(--font-display);
  color:var(--text-brand); letter-spacing:.01em; white-space:nowrap;
}
.record__total span{
  font:var(--type-label); letter-spacing:var(--tracking-label);
  text-transform:uppercase; color:var(--text-muted);
  display:block; margin-top:var(--space-3);
}
.record__row{ display:flex; margin-top:var(--space-10) }
.record__cell{
  width:280px; flex:none;
  padding:var(--space-8) var(--space-6);
  border-right:var(--hairline);
  transition:background-color var(--dur-fast) linear;
}
.record__cell:first-child{ border-left:var(--hairline) }
.record__cell:hover{ background:var(--surface-band) }
.record__i{ font:var(--type-label); letter-spacing:var(--tracking-label); color:var(--text-muted); display:block }
.record__name{
  font:var(--fw-display) var(--fs-subtitle)/1.25 var(--font-display);
  letter-spacing:var(--tracking-display); color:var(--text-heading);
  margin:var(--space-5) 0 var(--space-3);
}
.record__area{ font-size:var(--fs-body-sm); color:var(--text-muted); margin:0 }

/* ================= 6. PROCESS =================
   Six stages reading left to right. The horizontal axis is the point:
   this is a sequence from land to possession, drawn as one. */
.process__row{ display:flex; margin-top:var(--space-10); position:relative }
.process__step{
  width:330px; flex:none; padding:var(--space-8) var(--space-8) 0 0;
  margin-right:var(--space-6);
}
.process__n{
  font:var(--fw-display-light) var(--fs-display-3)/1 var(--font-display);
  color:var(--brand); display:block; margin-bottom:var(--space-4);
}
.process__step h3{
  font:var(--fw-semibold) var(--fs-body-lg)/1.3 var(--font-body);
  color:var(--text-heading); letter-spacing:0; margin:0 0 var(--space-3);
}
.process__step p{ margin:0; font-size:var(--fs-body-sm); color:var(--text-body) }

/* ================= 7. PIPELINE ================= */
.pipeline__row{ display:flex; gap:var(--space-10); margin-top:var(--space-10); align-items:stretch }
.pipeline__card{
  flex:none; background:var(--surface-card);
  padding:var(--space-10); display:flex; flex-direction:column; justify-content:space-between;
  min-height:280px;
}
/* Sized to what they hold. Sankalp One is twelve times Lavanya, so it
   does not sit in a card the same size. The proportion is the point. */
.pipeline__card--sm{ width:300px; min-height:300px; align-self:flex-start }
.pipeline__card--lg{ width:820px; min-height:460px; align-self:flex-end }
.pipeline__card h3{
  font:var(--fw-display-light) clamp(1.75rem,2.6vw,2.5rem)/1.1 var(--font-display);
  letter-spacing:var(--tracking-display); color:var(--text-heading); margin:0;
}
.pipeline__type{ font-size:var(--fs-body-sm); color:var(--text-muted); margin:var(--space-4) 0 0 }
.pipeline__area{
  font:var(--fw-display-light) clamp(2rem,3.6vw,3.25rem)/1 var(--font-display);
  color:var(--text-brand); margin-top:var(--space-10); display:block;
}
.pipeline__area small{
  display:block; margin-top:var(--space-3);
  font:var(--type-label); letter-spacing:var(--tracking-label);
  text-transform:uppercase; color:var(--text-muted);
}

/* ================= 8. LANDOWNERS ================= */
.land{ width:min(94vw, 1220px) }
.land__grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-16); align-items:center }
.land__list{ list-style:none; margin:0; padding:0 }
.land__list li{
  padding:var(--space-4) 0;
  color:var(--paper-white); font-size:var(--fs-body);
}
.land__list li::before{ height:1px }

/* ================= 9. CONTACT ================= */
.contact{ width:min(94vw, 1240px) }
.contact__grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-16) }
.contact__items{ display:grid; gap:var(--space-6); margin-top:var(--space-8) }
.contact__item{ display:flex; gap:var(--space-5); align-items:flex-start }
.contact__icon{
  width:28px; height:28px; flex:none; margin-top:2px;
  background-position:center; background-size:contain; background-repeat:no-repeat;
}
.contact__icon--phone{ background-image:url("ds/assets/icons/icon-phone.svg") }
.contact__icon--email{ background-image:url("ds/assets/icons/icon-email.svg") }
.contact__icon--address{ background-image:url("ds/assets/icons/icon-address.svg") }
.contact__k{
  font:var(--type-label); letter-spacing:var(--tracking-label);
  text-transform:uppercase; color:var(--text-brand);
  display:block; margin-bottom:var(--space-2);
}
.contact__v{ font-size:var(--fs-body); color:var(--text-body); line-height:1.5; margin:0 }

.form{ display:grid; gap:var(--space-4) }
.field{ display:grid; gap:var(--space-2) }
.field label{
  font:var(--type-label); letter-spacing:var(--tracking-label);
  text-transform:uppercase; color:var(--text-body);
}
.field input,.field select,.field textarea{
  font:var(--type-body); color:var(--text-body);
  background:var(--surface-card);
  border:1px solid var(--border-subtle); border-radius:var(--radius-control);
  padding:11px var(--space-4); width:100%;
  transition:var(--transition-control);
}
.field textarea{ resize:vertical; min-height:80px }
.field select{
  appearance:none; -webkit-appearance:none; padding-right:var(--space-10);
  background-image:linear-gradient(45deg,transparent 50%,var(--text-brand) 50%),
                   linear-gradient(135deg,var(--text-brand) 50%,transparent 50%);
  background-position:calc(100% - 22px) 20px, calc(100% - 16px) 20px;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
}
.field input::placeholder,.field textarea::placeholder{ color:var(--text-muted) }
.field input:hover,.field select:hover,.field textarea:hover{ border-color:var(--border-strong) }
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:none; border-color:var(--border-strong); box-shadow:var(--focus-ring);
}
/* Honeypot. Moved off-screen rather than display:none, which bots skip. */
.trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

.field__err{
  margin:0; font-size:var(--fs-caption); color:var(--signal-danger);
  min-height:0; display:none;
}
.field__err[data-shown]{ display:block }
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"]{ border-color:var(--signal-danger) }
@media (prefers-color-scheme: dark){
  .field__err{ color:#e0a08f }
  .field input[aria-invalid="true"]{ border-color:#e0a08f }
}
.form__note{ font-size:var(--fs-caption); color:var(--text-muted); margin:0 }
.form__status{ font-size:var(--fs-body-sm); color:var(--text-brand); margin:0; min-height:1.2em }

.endcap{
  margin-top:var(--space-10); padding-top:var(--space-5); border-top:var(--hairline);
  display:flex; justify-content:space-between; gap:var(--space-6); flex-wrap:wrap;
  font-size:var(--fs-caption); color:var(--text-muted);
}

/* ================= VERTICAL FALLBACK =================
   Below 1025px, and whenever reduced motion is requested, the track
   stops being a track. */
@media (max-width:1024px), (prefers-reduced-motion: reduce){
  .viewport{ overflow:visible }
  .track{ display:block; width:auto; padding-left:var(--rail-w) }
  .panel{
    width:auto !important; height:auto; min-height:0;
    padding:var(--space-16) var(--layout-margin);
    border-left:0;
  }
  .panel + .panel{ border-top:var(--hairline) }
  .panel--photo{ padding:0; height:44vh; min-height:260px }
  .panel--photo-sm,.panel--photo-lg,.panel--photo-xl{ width:auto !important }
  /* No pan to lag behind, so the layers stop travelling. */
  .panel--photo img,
  .panel--figure > .panel__bg,
  .panel--ground > .panel__bg,
  .hero__photo{ left:0; width:100%; will-change:auto; transform:none !important }
  .progress{ display:none }
  .hero{ flex-direction:column; padding:0 }
  .hero__copy{ padding:calc(var(--nav-h) + var(--space-10)) var(--layout-margin) var(--space-12) }
  .hero__field{ min-height:36vh }
  .hero__hint{ display:none }
  .proof__row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-10) }
  .proof__cell{ border-right:0; padding-right:0 }
  .position,.land,.contact{ width:auto }
  .position__grid,.land__grid,.contact__grid{ grid-template-columns:1fr; gap:var(--space-10) }
  .reasons__row,.process__row,.pipeline__row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-8) }
  /* The --sm / --lg modifiers are two classes deep, so they need naming
     here or they keep their fixed pixel widths and overflow the page. */
  .reasons__item,.process__step,
  .pipeline__card,.pipeline__card--sm,.pipeline__card--lg{ width:auto; margin-right:0; min-height:0; align-self:auto }
  .record__row{ display:grid; grid-template-columns:repeat(2,1fr); border-top:0 }
  .record__cell{ width:auto; border-left:var(--hairline) !important; border-bottom:var(--hairline) }
  /* max-content is right for a wide panel, wrong for a phone. */
  .record__head{ width:auto; flex-wrap:wrap; align-items:flex-start; gap:var(--space-6) }
}
@media (max-width:640px){
  :root{ --nav-h:64px }
  .nav__right .btn{ display:none }
  .proof__row{ grid-template-columns:1fr }
  .reasons__row,.process__row,.pipeline__row,.record__row{ grid-template-columns:1fr }
}
@media (max-width:1024px){
  .nav__links{ display:none }
  .nav__menu{ display:block }
}

/* ================= MOBILE ==================
   Below 1025px this stops being a sideways page, so the furniture that
   serves the pan has to stop too. The vertical rail is a desktop device:
   on a 390px screen it costs 9% of every viewport and gives a 34px-wide
   tap target. It becomes a bottom bar instead, which is where a thumb
   already is and where a property enquiry should always be reachable. */
@media (max-width:1024px){
  .rail{
    left:0; right:0; top:auto; bottom:0;
    width:auto; height:56px;
    flex-direction:row; gap:var(--space-3);
    border-top:1px solid rgba(255,255,255,.18);
  }
  .rail span{
    writing-mode:horizontal-tb; transform:none;
    font:var(--fw-label) var(--fs-body-sm)/1 var(--font-label);
    letter-spacing:var(--tracking-label);
  }
  /* The rail no longer occupies the left edge. */
  .track{ padding-left:0 }
  .nav{ padding-left:0 }
  .progress{ display:none }
  /* Clear the bar, and the home indicator on notched phones. */
  body{ padding-bottom:calc(56px + env(safe-area-inset-bottom, 0px)) }
  .rail{ height:calc(56px + env(safe-area-inset-bottom, 0px)); padding-bottom:env(safe-area-inset-bottom, 0px) }

  /* Touch targets. 44px is the floor, not the target. */
  .nav__menu{ min-width:48px; min-height:48px; margin-right:calc(var(--space-3) * -1) }
  .nav__logo{ min-height:48px; align-items:center }
  .overlay__close{ min-width:48px; min-height:48px; display:flex; align-items:center; justify-content:flex-end }
  .overlay__list a{ padding-block:var(--space-3) }
  .btn{ min-height:48px; padding-inline:var(--space-8) }

  /* Phone and email are the two things a buyer actually taps. */
  .contact__v a{
    display:inline-block; min-height:44px; line-height:44px;
    padding-right:var(--space-2);
  }
  .overlay__foot a{ display:inline-block; min-height:44px; line-height:44px }

  /* 11px is below the readable floor on a phone. */
  .proof__k, .record__i, .contact__k, .eyebrow, .foot h4{ font-size:var(--fs-caption) }
}

@media (max-width:640px){
  /* One clear action per row at this width. */
  .hero__actions{ display:grid; grid-template-columns:1fr; gap:var(--space-3) }
  .hero__actions .btn{ width:100% }
  .form .btn{ width:100% }
}