/* =====================================================================
   DIVIT DEVELOPERS - Design System
   "Designed with Vision. Built with Integrity."
   A quiet, editorial, architectural type-first system.
   ===================================================================== */

/* ------------------------------ Tokens ------------------------------ */
:root {
  /* Surfaces */
  --ivory:        #F4EFE7;   /* warm ivory - primary background */
  --limestone:    #EDE7DC;   /* limestone - alternate surface   */
  --stone:        #E2DACB;   /* stone - panels                  */
  --stone-deep:   #D3C9B6;   /* deeper stone                    */

  /* Ink */
  --graphite:     #23211E;   /* deep graphite - primary text    */
  --graphite-soft:#3A3833;
  --muted:        #6E685E;   /* secondary text                  */
  --faint:        #8C857A;   /* labels, meta                    */

  /* Accents */
  --brass:        #B08542;   /* architectural brass             */
  --brass-deep:   #8F6A2E;
  --sage:         #8B9280;   /* muted sage                      */
  --clay:         #C08B6E;   /* soft clay                       */
  --walnut:       #5B4636;   /* walnut brown                    */

  /* Lines */
  --hair:         rgba(35,33,30,0.14);
  --hair-soft:    rgba(35,33,30,0.08);

  /* Type */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Manrope", system-ui, -apple-system, sans-serif;
  --label: "IBM Plex Sans", system-ui, sans-serif;

  /* Fluid scale */
  --step--1: clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.35rem + 1.2vw, 2.4rem);
  --step-3:  clamp(2.2rem, 1.7rem + 2.4vw, 3.8rem);
  --step-4:  clamp(2.9rem, 2rem + 4.4vw, 6rem);
  --step-5:  clamp(3.6rem, 2rem + 7vw, 9rem);

  /* Rhythm */
  --gutter: clamp(1.25rem, 0.9rem + 2vw, 3rem);
  --section: clamp(3.75rem, 2.75rem + 5vw, 7.5rem);
  --maxw: 1560px;
  --measure: 62ch;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ------------------------------ Reset ------------------------------- */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
/* No native smooth-scroll: Lenis owns scrolling; combining the two stutters. */
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}
body {
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.62;
  color: var(--graphite);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-weight: 400;
  overflow-x: hidden;
}
img,svg { display:block; max-width:100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
::selection { background: var(--brass); color: var(--ivory); }

/* ------------------------------ Layout ------------------------------ */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); position: relative; }
/* Faint decorative hexagon watermark behind a section */
.has-watermark{ position:relative; overflow:hidden; }
.has-watermark > .wrap{ position:relative; z-index:1; }
.section-watermark{ position:absolute; z-index:0; pointer-events:none; color:var(--brass);
  opacity:.055; width:min(48vw,660px); height:auto; top:50%; right:-7vw; transform:translateY(-50%); }
@media(max-width:900px){ .section-watermark{ opacity:.04; right:-24vw; width:80vw; } }
.divider { height:1px; background: var(--hair); border:0; margin:0; }
.limestone { background: var(--limestone); }
.stone { background: var(--stone); }
.graphite-bg { background: var(--graphite); color: var(--ivory); }
.graphite-bg .eyebrow { color: var(--brass); }
.graphite-bg .lede, .graphite-bg .muted { color: rgba(244,239,231,0.72); }

/* Asymmetric editorial grid */
.grid { display:grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }
.col-1{grid-column:auto/span 1}.col-2{grid-column:auto/span 2}.col-3{grid-column:auto/span 3}.col-4{grid-column:auto/span 4}
.col-5{grid-column:auto/span 5}.col-6{grid-column:auto/span 6}.col-7{grid-column:auto/span 7}
.col-8{grid-column:auto/span 8}.col-9{grid-column:auto/span 9}.col-10{grid-column:auto/span 10}.col-11{grid-column:auto/span 11}.col-12{grid-column:auto/span 12}
.start-1{grid-column-start:1}.start-2{grid-column-start:2}.start-3{grid-column-start:3}.start-4{grid-column-start:4}
.start-5{grid-column-start:5}.start-6{grid-column-start:6}.start-7{grid-column-start:7}.start-8{grid-column-start:8}
.start-9{grid-column-start:9}.start-10{grid-column-start:10}.start-11{grid-column-start:11}.start-12{grid-column-start:12}
@media (max-width: 900px){
  .grid{grid-template-columns: repeat(6,1fr);}
  [class*="col-"]{grid-column:1 / -1;}
  [class*="start-"]{grid-column-start:auto;}
}

/* ------------------------------ Type -------------------------------- */
.eyebrow {
  font-family: var(--label);
  font-size: var(--step--1);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--brass-deep);
  display: inline-flex; align-items: center; gap: .9rem;
}
.eyebrow::before {
  content:""; width: 2.4rem; height:1px; background: var(--brass); opacity:.7;
}
.eyebrow.center::before{ display:none; }

h1,h2,h3,.display { font-family: var(--serif); font-weight: 400; line-height: 1.02; letter-spacing: -0.01em; color: var(--graphite); }
.display { font-size: var(--step-5); }
h1, .h1 { font-size: var(--step-4); line-height: 1.03; }
h2, .h2 { font-size: var(--step-3); line-height: 1.06; }
h3, .h3 { font-size: var(--step-2); line-height: 1.12; }
.serif-lg { font-family: var(--serif); font-weight:400; font-size: var(--step-2); line-height:1.22; }
em, .italic { font-style: italic; }

.lede { font-size: var(--step-1); line-height: 1.5; color: var(--graphite-soft); font-weight: 300; max-width: 40ch; }
p { max-width: var(--measure); }
.prose p + p { margin-top: 1.4em; }
.prose p { color: var(--graphite-soft); }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.balance { text-wrap: balance; }

/* ------------------------------ Buttons ----------------------------- */
.btn {
  --c: var(--graphite);
  font-family: var(--label);
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  display: inline-flex; align-items: center; gap: .85rem;
  padding: 1.05rem 0;
  color: var(--c);
  position: relative;
}
.btn::after{
  content:""; position:absolute; left:0; bottom:.55rem; height:1px; width:100%;
  background: currentColor; opacity:.35; transform-origin: right;
  transition: transform .6s var(--ease), opacity .4s;
}
.btn .arrow{ transition: transform .5s var(--ease); }
.btn:hover::after{ transform: scaleX(0); }
.btn:hover .arrow{ transform: translateX(.4rem); }
.btn-brass{ --c: var(--brass-deep); }
.graphite-bg .btn{ --c: var(--ivory); }
.graphite-bg .btn-brass{ --c: var(--brass); }

.btn-solid{
  font-family: var(--label); font-size: var(--step--1); letter-spacing:.16em;
  text-transform: uppercase; font-weight:500;
  padding: 1.1rem 2rem; border:1px solid var(--graphite); color: var(--graphite);
  border-radius: 2px; transition: background .5s var(--ease), color .5s var(--ease);
  display:inline-flex; align-items:center; gap:.75rem;
}
.btn-solid:hover{ background: var(--graphite); color: var(--ivory); }
.graphite-bg .btn-solid{ border-color: rgba(244,239,231,.4); color: var(--ivory); }
.graphite-bg .btn-solid:hover{ background: var(--ivory); color: var(--graphite); }

/* ------------------------------ Nav --------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.5rem var(--gutter);
  transition: background .5s var(--ease), padding .5s var(--ease), box-shadow .5s;
  mix-blend-mode: normal;
}
.nav.scrolled{
  background: rgba(244,239,231,0.82);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  padding-block: 1rem; box-shadow: 0 1px 0 var(--hair-soft);
}
.nav.inverse:not(.scrolled){ color: var(--ivory); }
.nav.inverse:not(.scrolled) .brandmark path.txt{ fill: var(--ivory); }
/* Soft top scrim so the ivory logo + links stay legible over bright parts of a hero */
.nav.inverse:not(.scrolled)::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background: linear-gradient(180deg, rgba(35,33,30,.40) 0%, rgba(35,33,30,.16) 55%, rgba(35,33,30,0) 100%);
}
.nav-brand{ display:flex; align-items:center; gap:.85rem; z-index:2; }
.brandmark{ height: 34px; width:auto; }
.brandmark-hex{ flex:none; }
.brandmark-hex path{ fill: var(--brass); }
/* Larger hexagon mark (≈1.5× previous) */
.nav .brandmark-hex{ width:44px; height:auto; }
.footer .brandmark-hex{ width:40px; height:auto; }
/* Stacked all-caps wordmark: DIVIT DEVELOPERS / INDIA */
.nav-brand .name, .footer-logo .name{ display:flex; flex-direction:column; justify-content:center; line-height:1; }
.nav-brand .line1, .footer-logo .line1{
  font-family: var(--sans); font-weight:600; font-size:1.24rem;
  letter-spacing:.15em; text-transform:uppercase; color:currentColor; white-space:nowrap;
}
.nav-brand .line2, .footer-logo .line2{
  font-family: var(--label); font-weight:500; font-size:.64rem;
  letter-spacing:.46em; text-transform:uppercase; color:var(--brass);
  margin-top:.46em; padding-left:.08em;
}
.footer-logo{ display:flex; align-items:center; gap:.85rem; }
.footer-logo .line1{ color:var(--ivory); }
@media(max-width:520px){
  .nav-brand .line1, .footer-logo .line1{ font-size:1.08rem; letter-spacing:.12em; }
  .nav .brandmark-hex{ width:38px; }
}
.nav-links{ display:flex; align-items:center; gap: clamp(1.3rem,2.4vw,2.8rem); }
.nav-links a{
  font-family: var(--label); font-size: var(--step--1); letter-spacing:.12em;
  text-transform: uppercase; font-weight:450; position:relative; padding-block:.3rem;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background: currentColor; transform: scaleX(0); transform-origin:left;
  transition: transform .5s var(--ease); opacity:.6;
}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{ transform: scaleX(1); }
.nav-links a[aria-current="page"]{ color: var(--brass-deep); }
.nav-cta{ padding:.7rem 1.3rem; border:1px solid currentColor; border-radius:2px; opacity:.9; }
.nav-cta::after{ display:none; }
.nav-toggle{ display:none; width:34px; height:34px; z-index:2; flex-direction:column; justify-content:center; gap:6px; }
.nav-toggle span{ height:1.5px; width:24px; background: currentColor; transition: transform .4s var(--ease), opacity .3s; }

@media (max-width: 860px){
  .nav-toggle{ display:flex; }
  .nav-links{
    position: fixed; inset:0; background: var(--ivory); color: var(--graphite);
    flex-direction: column; justify-content:center; gap:2rem;
    transform: translateY(-100%); transition: transform .7s var(--ease);
  }
  .nav-links a{ font-size: 1.1rem; }
  .nav.open .nav-links{ transform: translateY(0); }
  .nav.open .nav-toggle span:nth-child(1){ transform: translateY(7.5px) rotate(45deg); }
  .nav.open .nav-toggle span:nth-child(2){ opacity:0; }
  .nav.open .nav-toggle span:nth-child(3){ transform: translateY(-7.5px) rotate(-45deg); }
}

/* --------------------------- Atmosphere ----------------------------- */
/* Honest, hand-composed tonal fields that evoke architectural photography
   (golden hour, mist, stone, water) without stock imagery. Swap the
   --img custom property or replace .scene with real photography later. */
.scene{ position:relative; overflow:hidden; background: var(--stone); }
.scene::after{ /* film grain + vignette */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 8%, transparent 55%, rgba(35,33,30,.18) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.05'/></svg>");
  mix-blend-mode: multiply;
}
.scene-inner{ position:absolute; inset:0; }
/* Real photography inside a scene: slightly oversized to allow parallax travel */
img.scene-inner{ left:0; top:-20%; width:100%; height:140%; object-fit:cover; inset:auto; }
.ratio-hero img.scene-inner{ top:-12%; height:124%; }
/* Legibility scrims for text over photography */
.scrim-bottom{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(35,33,30,.34) 0%, rgba(35,33,30,0) 26%, rgba(35,33,30,0) 52%, rgba(35,33,30,.62) 100%),
    linear-gradient(90deg, rgba(35,33,30,.42) 0%, rgba(35,33,30,0) 42%); }
.scrim-center{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(95% 85% at 50% 50%, rgba(35,33,30,.42) 0%, rgba(35,33,30,.60) 100%),
    linear-gradient(180deg, rgba(35,33,30,.30) 0%, rgba(35,33,30,.30) 70%, rgba(35,33,30,.52) 100%); }

/* Golden hour over layered hills / mist */
.field-hills{
  background:
    linear-gradient(180deg, #EAD9B8 0%, #E3C79A 22%, #D9B487 40%, transparent 62%),
    linear-gradient(180deg, transparent 46%, rgba(139,146,128,.55) 60%, rgba(91,70,54,.75) 100%),
    linear-gradient(180deg, #F1E7D2 0%, #C9B79A 55%, #6E6A5A 100%);
}
.field-hills .ridge{ position:absolute; left:-5%; right:-5%; height:40%; bottom:0;
  background: linear-gradient(180deg, rgba(91,70,54,.0), rgba(43,40,35,.85));
  clip-path: polygon(0 55%,12% 42%,26% 52%,40% 34%,55% 48%,70% 30%,84% 46%,100% 36%,100% 100%,0 100%); }
.field-hills .ridge.two{ bottom:0; opacity:.55; height:55%;
  clip-path: polygon(0 62%,18% 50%,33% 60%,50% 44%,66% 58%,82% 46%,100% 58%,100% 100%,0 100%); }
.field-hills .sun{ position:absolute; top:16%; left:64%; width:16vmax; height:16vmax; border-radius:50%;
  background: radial-gradient(circle, rgba(255,244,214,.95), rgba(224,181,127,.25) 55%, transparent 70%); filter: blur(2px); }

/* Stone wall / limestone plane in raking light */
.field-stone{
  background:
    linear-gradient(115deg, rgba(255,255,255,.35) 0%, transparent 30%),
    linear-gradient(160deg, #E9E0CF 0%, #D8CDB6 45%, #B9AC90 100%);
}
.field-stone::before{ content:""; position:absolute; inset:0;
  background: repeating-linear-gradient(90deg, transparent 0 78px, rgba(35,33,30,.05) 78px 79px),
              repeating-linear-gradient(0deg, transparent 0 46px, rgba(35,33,30,.045) 46px 47px);
  mix-blend-mode: multiply; }

/* Water / reflection */
.field-water{
  background:
    linear-gradient(180deg, #DCE1DA 0%, #C6CEC4 40%, #A9B6AC 55%, #8B9A8F 56%, #B7BEB2 78%, #D4D6C9 100%);
}
.field-water::before{ content:""; position:absolute; left:0; right:0; top:56%; bottom:0;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.14) 0 3px, transparent 3px 9px);
  filter: blur(.5px); }

/* Timber / warm interior light */
.field-timber{
  background:
    linear-gradient(180deg, rgba(255,240,214,.5) 0%, transparent 40%),
    linear-gradient(120deg, #C79A6B 0%, #9A6E44 50%, #5B4636 100%);
}
.field-timber::before{ content:""; position:absolute; inset:0;
  background: repeating-linear-gradient(93deg, rgba(35,33,30,.10) 0 2px, transparent 2px 34px);
  mix-blend-mode: multiply; }

/* Mist / dawn courtyard */
.field-mist{
  background:
    linear-gradient(180deg, #EFEAE0 0%, #E4DED2 40%, #CFC7B6 100%),
    radial-gradient(140% 100% at 30% 120%, rgba(139,146,128,.4), transparent 60%);
}
.field-mist::before{ content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 30%, rgba(244,239,231,.7) 100%); }

.ratio-hero{ min-height: 100svh; }
.ratio-tall{ aspect-ratio: 3/4; }
.ratio-portrait{ aspect-ratio: 4/5; }
.ratio-wide{ aspect-ratio: 16/9; }
.ratio-square{ aspect-ratio: 1/1; }
.ratio-cine{ aspect-ratio: 21/9; }
@media(max-width:900px){ .ratio-tall,.ratio-portrait{ aspect-ratio: 4/5; } }

.caption{ font-family: var(--label); font-size: var(--step--1); letter-spacing:.06em; color: var(--faint); margin-top:.9rem; }

/* ------------------------- Reveal utilities ------------------------- */
[data-reveal]{ opacity:0; transform: translateY(28px); }
[data-reveal-line]{ display:block; overflow:hidden; }
.js-ready [data-reveal]{ will-change: opacity, transform; }
.no-js [data-reveal]{ opacity:1; transform:none; }

/* Reveal mask: extra clip room so serif descenders / italic swashes are not
   cropped; negative margins neutralise the layout so line spacing is unchanged. */
.mask-line{ display:block; overflow:hidden; padding: 0 .07em .22em; margin: 0 -.07em -.16em; }
.mask-line > span{ display:block; will-change: transform; }

/* ------------------------------ Hexagon ----------------------------- */
.values{ display:grid; grid-template-columns: repeat(3, 1fr); gap:0; border-top:1px solid var(--hair); }
.value{
  position:relative; padding: clamp(2rem,4vw,3.6rem) clamp(1.4rem,2.5vw,2.4rem);
  border-bottom:1px solid var(--hair); border-right:1px solid var(--hair);
  min-height: clamp(220px, 26vw, 340px); display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden; transition: background .6s var(--ease);
}
.value:nth-child(3n){ border-right:0; }
.value::before{ /* brass wash on hover */
  content:""; position:absolute; inset:0; background:
    radial-gradient(120% 120% at 15% 110%, rgba(176,133,66,.14), transparent 60%);
  opacity:0; transition: opacity .7s var(--ease);
}
.value:hover{ background: var(--limestone); }
.value:hover::before{ opacity:1; }
.value .idx{ font-family: var(--label); font-size: var(--step--1); letter-spacing:.2em; color: var(--brass-deep); }
.value h3{ margin-top:.4rem; transition: transform .6s var(--ease); }
.value:hover h3{ transform: translateY(-2px); }
.value .val-body{
  max-height:0; opacity:0; margin-top:0;
  transition: max-height .7s var(--ease), opacity .5s var(--ease), margin-top .5s var(--ease);
  color: var(--muted); font-size: var(--step-0);
}
.value:hover .val-body{ max-height: 200px; opacity:1; margin-top:1rem; }
.value .hex{ position:absolute; top: clamp(1.4rem,2.5vw,2.4rem); right: clamp(1.4rem,2.5vw,2.4rem); width:34px; opacity:.5; transition: transform .8s var(--ease), opacity .5s; }
.value:hover .hex{ transform: rotate(60deg); opacity:1; }
@media(max-width:900px){ .values{ grid-template-columns:1fr 1fr; } .value:nth-child(3n){ border-right:1px solid var(--hair);} .value:nth-child(2n){ border-right:0;} }
@media(max-width:560px){ .values{ grid-template-columns:1fr; } .value{ border-right:0!important; min-height:auto; } .value .val-body{ max-height:200px; opacity:1; margin-top:1rem;} }

/* Overlaid image-band line (single line; second clause emphasised) */
.mist-line{ font-family: var(--serif); font-weight:400; font-style:normal;
  font-size: calc(var(--step-2) + 3px); line-height:1.14; letter-spacing:-.005em; max-width:none; }
.mist-line .em-big{ font-size:1.14em; font-style:italic; }
@media(max-width:720px){ .mist-line{ font-size: var(--step-2); } }

/* ------------------------------ Big statement ----------------------- */
.statement{ font-family: var(--serif); font-weight:400; font-size: var(--step-4); line-height:1.08; letter-spacing:-.01em; }
.statement .em-brass{ color: var(--brass); font-style: italic; }

/* pull line reveal */
.line-mask{ overflow:hidden; display:block; }

/* ------------------------------ Cards ------------------------------- */
.pillar{ padding: clamp(1.15rem,2vw,1.7rem) 0; border-top:1px solid var(--hair); }
.pillar .num{ font-family: var(--serif); font-size: var(--step-2); color: var(--brass); font-style:italic; }
.pillar h3{ margin:.6rem 0 .8rem; }

/* ------------------------------ Marquee ----------------------------- */
.wordmark-strip{ font-family: var(--serif); font-style: italic; color: var(--stone-deep);
  font-size: var(--step-4); white-space:nowrap; user-select:none; }

/* ------------------------------ Form -------------------------------- */
.form{ display:grid; gap: 2.2rem; }
.field{ position:relative; }
.field label{
  position:absolute; left:0; top:.9rem; font-family:var(--label); font-size: var(--step-0);
  color: var(--faint); pointer-events:none; transition: transform .4s var(--ease), font-size .4s var(--ease), color .4s;
  transform-origin:left;
}
.field input,.field textarea,.field select{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--hair);
  padding:.9rem 0; font-family:var(--sans); font-size: var(--step-1); color: var(--graphite);
  border-radius:0; transition: border-color .4s var(--ease);
}
.field textarea{ resize: vertical; min-height: 3rem; }
.field select{ font-size: var(--step-0); }
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color: var(--brass); }
.field input:focus + label,.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,.field textarea:not(:placeholder-shown) + label{
  transform: translateY(-1.8rem) scale(.72); color: var(--brass-deep);
}
.field input::placeholder,.field textarea::placeholder{ color:transparent; }
.graphite-bg .field input,.graphite-bg .field textarea,.graphite-bg .field select{ border-color: rgba(244,239,231,.24); color: var(--ivory); }
.graphite-bg .field label{ color: rgba(244,239,231,.5); }

/* ---- Modern form (Connect) : labels above, soft filled inputs, card ---- */
.form-card{ background: var(--limestone); border:1px solid var(--hair); border-radius:20px;
  padding: clamp(1.5rem,3vw,2.6rem);
  box-shadow: 0 1px 0 rgba(35,33,30,.02), 0 30px 70px -50px rgba(35,33,30,.45); }
.form-modern{ display:grid; gap: 1.35rem; }
.form-modern .field{ position:relative; display:flex; flex-direction:column; gap:.5rem; }
.form-modern .field label{
  position:static; transform:none; pointer-events:auto;
  font-family: var(--label); font-size: var(--step--1); letter-spacing:.09em;
  text-transform:uppercase; color: var(--brass-deep); transition:none; }
.form-modern .field .opt{ color: var(--faint); letter-spacing:.06em; }
.form-modern .field input,
.form-modern .field textarea,
.form-modern .field select{
  width:100%; background:#FFFDF9; border:1px solid var(--hair); border-bottom:1px solid var(--hair);
  border-radius:12px; padding:.9rem 1.05rem; font-family: var(--sans);
  font-size: var(--step-0); color: var(--graphite); line-height:1.4;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease); }
.form-modern .field textarea{ resize:vertical; min-height: 7.5rem; }
.form-modern .field input::placeholder,
.form-modern .field textarea::placeholder{ color: var(--faint); }
.form-modern .field select{ appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238a6a34' stroke-width='1.5' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1.1rem center; background-size:12px 8px; padding-right:2.6rem; }
.form-modern .field input:focus,
.form-modern .field textarea:focus,
.form-modern .field select:focus{
  outline:none; border-color: var(--brass); background:#fff;
  box-shadow: 0 0 0 3px rgba(176,133,66,.14); }
.form-modern .field input:not(:placeholder-shown) + label{ transform:none; }
@media(max-width:900px){ .form-card{ border-radius:16px; } }
.form-status{ margin-top:.2rem; }
.form-status.is-success{ padding:.4rem 0; }
.form-status.is-error{ font-family:var(--sans); font-size:var(--step-0); color:#8a3b2e;
  background:rgba(138,59,46,.06); border:1px solid rgba(138,59,46,.24); border-radius:12px; padding:.9rem 1.05rem; }
.btn-solid[disabled]{ cursor:progress; }
/* Simple, on-theme contact links (Connect) */
.contact-link{ font-family:var(--sans); font-size:var(--step-1); font-weight:500;
  color:var(--graphite); display:inline-block; line-height:1.3;
  border-bottom:1px solid var(--hair); transition:border-color .3s var(--ease), color .3s var(--ease); }
.contact-link:hover{ color:var(--brass-deep); border-bottom-color:var(--brass); }
.graphite-bg .contact-link, .footer .contact-link{ color:var(--ivory); border-bottom-color:rgba(244,239,231,.3); }
/* Locate-on-Maps link */
.maps-link{ font-family:var(--label); font-size:var(--step--1); letter-spacing:.06em; text-transform:uppercase;
  color:var(--brass-deep); border-bottom:1px solid transparent; transition:border-color .3s var(--ease); }
.maps-link:hover{ border-bottom-color:var(--brass); }
/* Floating WhatsApp button (all pages) */
.wa-float{ position:fixed; right:clamp(1rem,2.5vw,2rem); bottom:clamp(1rem,2.5vw,2rem); z-index:200;
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:#25D366; color:#fff; box-shadow:0 12px 30px -8px rgba(35,33,30,.5), 0 2px 6px rgba(35,33,30,.22);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.wa-float:hover{ transform:translateY(-3px) scale(1.04); box-shadow:0 18px 40px -10px rgba(35,33,30,.55); }
.wa-float svg{ width:30px; height:30px; display:block; }
@media(max-width:600px){ .wa-float{ width:52px; height:52px; } .wa-float svg{ width:28px; height:28px; } }

/* ------------------------------ Footer ------------------------------ */
.footer{ background: var(--graphite); color: rgba(244,239,231,.8); padding-block: clamp(4rem,7vw,7rem) 2.4rem; }
.footer a{ color: rgba(244,239,231,.8); transition: color .4s; }
.footer a:hover{ color: var(--brass); }
.footer .brandmark path.txt{ fill: var(--ivory); }
.footer h4{ font-family: var(--label); font-size: var(--step--1); letter-spacing:.2em; text-transform:uppercase; color: var(--brass); font-weight:500; margin-bottom:1.4rem; }
.footer .fnav{ display:grid; gap:.85rem; }
.footer .fbig{ font-family: var(--serif); font-size: var(--step-3); line-height:1.05; color: var(--ivory); }
.footer-bottom{ display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between; align-items:center;
  margin-top: clamp(3rem,5vw,5rem); padding-top:1.8rem; border-top:1px solid rgba(244,239,231,.14);
  font-family: var(--label); font-size: var(--step--1); color: rgba(244,239,231,.5); letter-spacing:.04em; }
.footer-bottom nav{ display:flex; gap:1.6rem; flex-wrap:wrap; }

/* ------------------------------ Page head --------------------------- */
.pagehead{ padding-top: clamp(9rem,14vw,13rem); padding-bottom: clamp(3rem,6vw,6rem); }
.crumb{ font-family:var(--label); font-size:var(--step--1); letter-spacing:.2em; text-transform:uppercase; color:var(--brass-deep); font-weight:500; }

/* ------------------------------ Utilities --------------------------- */
.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}.mt-3{margin-top:3rem}.mt-4{margin-top:clamp(3rem,6vw,6rem)}
.mb-2{margin-bottom:2rem}.mb-3{margin-bottom:3rem}
.max-40{max-width:40ch}.max-50{max-width:50ch}.max-30{max-width:30ch}
.center{text-align:center}.center .eyebrow{justify-content:center}
.flow > * + *{ margin-top: 1.4rem; }
.sticky{ position: sticky; top: clamp(6rem,10vw,9rem); }
.hide-mobile{ } @media(max-width:860px){ .hide-mobile{ display:none!important; } }
.skip{ position:absolute; left:-999px; top:0; background:var(--graphite); color:var(--ivory); padding:.8rem 1.2rem; z-index:999; }
.skip:focus{ left:1rem; top:1rem; }
:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }

/* ============================ Mobile polish ============================ */
/* Touch devices have no hover: reveal the value-card descriptions permanently
   so their text is never trapped behind a hover state. */
@media (hover: none){
  .value{ min-height:auto; justify-content:flex-start; }
  .value .val-body{ max-height:none; opacity:1; margin-top:1rem; }
  .value .hex{ opacity:.7; }
  .contact-link, .maps-link{ padding-block:.2rem; }
}
/* Width-based fallback: on any tablet/phone width, always show value-card
   descriptions (covers browsers that don't match the hover feature). */
@media (max-width: 900px){
  .value{ min-height:auto; justify-content:flex-start; }
  .value .val-body{ max-height:none; opacity:1; margin-top:1rem; }
  .value .hex{ opacity:.7; }
}
/* Single-column layout: drop the sticky contact column. */
@media (max-width: 860px){
  .sticky{ position: static; top: auto; }
}
/* Scale the largest headline type down on phones so long words sit comfortably. */
@media (max-width: 600px){
  .display{ font-size: clamp(2.5rem, 11vw, 3.4rem); line-height:1.05; }
  h1, .h1{ font-size: clamp(2.1rem, 9vw, 2.9rem); }
  h2, .h2{ font-size: clamp(1.9rem, 7.5vw, 2.5rem); }
  .statement{ font-size: clamp(2rem, 8.5vw, 2.8rem); }
  .wordmark-strip{ font-size: 2.6rem; }
  .lede{ font-size: 1.08rem; }
  .section{ padding-block: clamp(3rem, 9vw, 4.5rem); }
  .nav{ padding-block: 1.1rem; }
}
/* Very small screens: keep the wordmark clear of the menu button. */
@media (max-width: 380px){
  .nav{ padding-inline: 1.1rem; }
  .nav-brand{ gap:.6rem; }
  .nav-brand .line1, .footer-logo .line1{ font-size:.94rem; letter-spacing:.08em; }
  .nav .brandmark-hex{ width:34px; }
}