/* =========================================================================
   Property Finder Hyderabad — Design System
   A warm-neutral identity on a 60/30/10 split: white ground, beige surfaces,
   near-black ink, and a single greyish-blue accent. Replaces the earlier orange/navy scheme, which was
   sampled from the old logo artwork.
   Every colour pair used for text is checked against WCAG 2.1 AA; the ratios are
   noted beside each token and re-derivable with brand/contrast.py.
   ========================================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* Brand tokens. White 60 / beige 30 / black 10.
     Ratios below are measured, not estimated - brand/qa.py asserts every one. */

  /* Grounds and surfaces */
  --ground:        #FFFFFF;   /* the page - the 60% */
  --surface:       #E1D8C2;   /* cards and panels - the 30%, 1.42:1 against the ground */
  --surface-alt:   #EDE7D9;   /* full-bleed bands; a card still reads on it via its border */
  --surface-alt2:  #DCD2BB;   /* deeper beige, hover and fills */
  --border:        #D2C7AE;
  --border-strong: #B9AC8D;

  /* Ink */
  --ink:           #1A1A18;   /* 17.43:1 on white - AAA */
  --body:          #4A4945;   /*  9.01:1 on white - AAA */
  --muted:         #5A5850;   /*  7.13:1 on white, 5.02:1 on a card - AA */

  /* Dark ground, for the footer - the black end of the 10% */
  --dark:          #1A1A18;
  --dark-900:      #121210;
  --dark-800:      #292927;
  --on-dark:       #FFFFFF;   /* 17.43:1 on ink - AAA */
  --on-dark-soft:  #A9A79E;   /*  7.23:1 on ink - AAA */

  /* The accent: a greyish blue, used sparingly */
  --accent:        #4E5D6C;   /*  6.76:1 on white - AA */
  --accent-hover:  #3E4C59;
  --accent-ink:    #43505C;
  --accent-050:    #EEF0F2;
  --accent-100:    #DFE3E7;
  --accent-deep:   #3E4C59;
  --accent-deep-hover: #2F3A45;
  --accent-deep-050:   #EEF0F2;
  --on-accent:     #FFFFFF;

  --success:       #3F6B4E;
  --success-050:   #EDF2EE;

  /* Type. One grotesque does the whole job. */
  --f-sans: "Instrument Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --f-disp: "Instrument Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  /* Space and shape. Shadows are slate-tinted and very low: on pure white a neutral
     grey shadow reads as dirt, and anything heavier reads as a template. Cards do not
     use them at all - see the note at the top of this file. */
  --r-sm: 3px; --r: 6px; --r-lg: 10px; --r-xl: 16px; --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(78,93,108,.04);
  --shadow:    0 2px 8px rgba(78,93,108,.05);
  --shadow-lg: 0 12px 32px rgba(78,93,108,.10);
  --wrap: 1200px;
  --header-h: 85px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
/* Must outrank component display rules (.card{display:flex} etc.) */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{
  margin:0;font-family:var(--f-sans);font-size:16px;line-height:1.65;
  color:var(--body);background:var(--ground);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--accent-deep);text-decoration:none}
a:hover{color:var(--accent-deep-hover)}
button,input,select,textarea{font:inherit;color:inherit}
ul,ol{margin:0;padding:0}
h1,h2,h3,h4,h5,h6{margin:0;color:var(--ink);font-weight:800;letter-spacing:-.02em;line-height:1.18}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
hr{border:0;border-top:1px solid var(--border);margin:0}

/* ---------- 3. Type scale ---------- */
.h-hero{font-size:clamp(2rem,1.35rem + 2.7vw,3.25rem);line-height:1.1;letter-spacing:-.03em}
.h1{font-size:clamp(1.85rem,1.3rem + 2.2vw,2.75rem)}
.h2{font-size:clamp(1.5rem,1.15rem + 1.5vw,2.125rem)}
.h3{font-size:clamp(1.2rem,1.06rem + .6vw,1.4rem)}
.h4{font-size:1.0625rem}
.display{font-family:var(--f-disp);font-weight:600;letter-spacing:-.015em}
.lede{font-size:clamp(1.02rem,.98rem + .3vw,1.15rem);color:var(--body);line-height:1.7}
.small{font-size:.875rem;line-height:1.55}
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.75rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-ink);margin-bottom:.75rem;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--accent);border-radius:2px}
.eyebrow--light{color:var(--accent)}
.text-muted{color:var(--muted)}
.mono-num{font-variant-numeric:tabular-nums}

/* ---------- 4. Layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.wrap-narrow{max-width:820px}
.section{padding-block:clamp(3.5rem,2rem + 5vw,6rem)}
.section--tight{padding-block:clamp(2.5rem,1.5rem + 3vw,4rem)}
.section--alt{background:var(--surface-alt)}
.section--dark{background:var(--dark);color:var(--on-dark-soft)}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:#fff}
.section-head{max-width:720px;margin-bottom:2.5rem}
.section-head--center{margin-inline:auto;text-align:center}
.grid{display:grid;gap:clamp(1rem,.6rem + 1vw,1.75rem)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,1rem + 3vw,4rem);align-items:center}
.stack>*+*{margin-top:1rem}
.center{text-align:center}

/* ---------- 5. Buttons ----------
   Primary  : ink ground + cream label            -> 15.70:1  (AAA)
   Secondary: slate ground + cream label          ->  6.09:1  (AA)
   Ghost    : ink label on the page, hairline border.
   The accent is a greyish blue, so it can only ever carry a LIGHT label: ink on
   slate is 2.58:1 and would have failed outright. */
.btn{
  --btn-bg:var(--ink);--btn-fg:var(--on-dark);--btn-bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.85rem 1.5rem;border:1.5px solid var(--btn-bd);border-radius:var(--r);
  background:var(--btn-bg);color:var(--btn-fg);
  font-weight:800;font-size:.9375rem;letter-spacing:-.005em;line-height:1.2;
  cursor:pointer;text-align:center;
  transition:background .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease),color .18s var(--ease);
}
.btn:hover{--btn-bg:var(--accent-deep);color:var(--on-dark);transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(26,26,24,.16)}
.btn:active{transform:translateY(0)}
.btn svg{flex:none}
.btn--accent{--btn-bg:var(--accent);--btn-fg:var(--on-dark)}
.btn--accent:hover{--btn-bg:var(--accent-hover);color:var(--on-dark);box-shadow:0 8px 20px rgba(26,26,24,.14)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:var(--border-strong)}
.btn--ghost:hover{--btn-bg:var(--surface-alt);--btn-bd:var(--ink);color:var(--ink);box-shadow:none}
.btn--ghost-light{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.4)}
.btn--ghost-light:hover{--btn-bg:rgba(255,255,255,.1);color:#fff;box-shadow:none}
.btn--wa{--btn-bg:var(--accent);--btn-fg:var(--on-dark)}
.btn--wa:hover{--btn-bg:var(--accent-hover);color:var(--on-dark);box-shadow:0 8px 20px rgba(26,26,24,.14)}
.btn--sm{padding:.6rem 1.05rem;font-size:.85rem}
.btn--lg{padding:1rem 1.9rem;font-size:1rem}
.btn--block{display:flex;width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem}
.link-arrow{
  display:inline-flex;align-items:center;gap:.4rem;font-weight:700;color:var(--accent-deep);
}
.link-arrow::after{content:"→";transition:transform .18s var(--ease)}
.link-arrow:hover::after{transform:translateX(4px)}

/* ---------- 6. Header ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--on-dark);padding:.75rem 1.25rem;font-weight:600;border-radius:0 0 var(--r) 0}
.skip:focus{left:0}
.topbar{background:var(--surface-alt);color:var(--body);font-size:.8125rem;
  border-bottom:1px solid var(--border)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:38px;flex-wrap:wrap}
.topbar a,.topbar span{color:var(--on-dark-soft);display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
.topbar a:hover{color:#fff}
.topbar-links{display:flex;gap:1.25rem;align-items:center;flex-wrap:wrap}

.site-header{position:sticky;top:0;z-index:100;background:var(--ground);
  /* white on white, so the hairline is the only thing separating it from the hero */
  border-bottom:1px solid var(--border)}
.site-header.is-stuck{box-shadow:0 6px 24px rgba(26,26,24,.08)}
.header-inner{display:flex;align-items:center;gap:1.25rem;min-height:var(--header-h)}
.brand{display:flex;align-items:center;gap:.7rem;flex:none;padding-block:8px}
.brand img.brand-logo{height:53px;width:auto}
.brand:hover{opacity:.92}

.nav{margin-left:auto;display:flex;align-items:center;gap:.15rem}
.nav>ul{display:flex;align-items:center;gap:.1rem;list-style:none}
.nav li{position:relative}
.nav a,.nav .navbtn{
  display:flex;align-items:center;gap:.3rem;
  padding:.6rem .68rem;border-radius:var(--r-sm);
  color:var(--body);font-size:.875rem;font-weight:500;letter-spacing:-.005em;
  background:none;border:0;cursor:pointer;white-space:nowrap;
  transition:color .16s,background .16s;
}
.nav a:hover,.nav .navbtn:hover,.nav [aria-expanded="true"]{color:var(--ink);background:var(--surface-alt)}
.nav a[aria-current="page"]{color:var(--ink);font-weight:600}
.nav .caret{width:9px;height:9px;flex:none;transition:transform .18s var(--ease);opacity:.75}
.nav [aria-expanded="true"] .caret{transform:rotate(180deg)}

.submenu{
  position:absolute;top:calc(100% + 6px);left:0;min-width:236px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow);padding:.5rem;list-style:none;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s,transform .16s,visibility .16s;
}
.nav li:hover>.submenu,.submenu.is-open{opacity:1;visibility:visible;transform:translateY(0)}
.submenu a{
  display:block;padding:.55rem .7rem;border-radius:var(--r-sm);
  color:var(--ink);font-size:.875rem;font-weight:600;
}
.submenu a:hover{background:var(--accent-deep-050);color:var(--accent-deep)}
.submenu .sub-note{display:block;font-size:.75rem;font-weight:500;color:var(--muted);margin-top:.1rem}
.submenu a:hover .sub-note{color:var(--accent-deep)}
.submenu-sep{height:1px;background:var(--border);margin:.4rem .35rem}

.header-cta{display:flex;align-items:center;gap:.6rem;flex:none;margin-left:.5rem}
.nav-toggle{
  display:none;margin-left:auto;background:transparent;border:1px solid var(--border-strong);
  color:var(--ink);width:44px;height:44px;border-radius:var(--r-sm);cursor:pointer;
  align-items:center;justify-content:center;
}
.nav-toggle:hover{background:var(--surface-alt)}
.nav-toggle span{display:block;width:20px;height:2px;background:currentColor;border-radius:2px;position:relative}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:currentColor;border-radius:2px;transition:transform .2s var(--ease),top .2s var(--ease)}
.nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* ---------- 7. Hero ---------- */
.hero{position:relative;background:var(--dark);color:#fff;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(900px 500px at 85% 0%,rgba(78,93,108,.20),transparent 62%),
    radial-gradient(760px 520px at 5% 100%,rgba(62,76,89,.55),transparent 60%),
    linear-gradient(155deg,rgba(26,26,24,.97) 0%,rgba(26,26,24,.93) 55%,rgba(62,76,89,.72) 100%);
}
.hero::after{
  content:"";position:absolute;inset:0;opacity:.16;mix-blend-mode:overlay;
  background-image:var(--hero-img);background-size:cover;background-position:center;
}
.hero-inner{position:relative;z-index:2;padding-block:clamp(3rem,2rem + 5vw,5.5rem)}
.hero h1{color:#fff;max-width:17ch}
.hero .lede{color:var(--on-dark-soft);max-width:56ch;margin-top:1.1rem}
.hero-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.75rem}
.hero-badge{
  display:inline-flex;align-items:center;gap:.45rem;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-pill);padding:.42rem .9rem;font-size:.8125rem;font-weight:700;color:#fff;
}
.hero-badge svg{color:var(--accent)}

/* Search widget */
.searchbar{
  position:relative;z-index:3;background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);padding:1.1rem;margin-top:2.25rem;
}
.searchbar .tabs{display:inline-flex;background:var(--surface-alt);border-radius:var(--r-pill);padding:4px;margin-bottom:.9rem}
.searchbar .tabs button{
  border:0;background:none;padding:.45rem 1.15rem;border-radius:var(--r-pill);
  font-size:.85rem;font-weight:800;color:var(--muted);cursor:pointer;transition:.16s;
}
.searchbar .tabs button[aria-selected="true"]{background:var(--dark);color:#fff}
.search-fields{display:grid;gap:.75rem;align-items:end;
  /* The locality select holds 'Any locality in Hyderabad'; equal columns clipped
     it to 'Any localit'. It gets the extra width it actually needs. */
  grid-template-columns:1.7fr 1fr 1fr auto}
.field{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.field label{font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.field select,.field input,.field textarea{
  width:100%;padding:.72rem .85rem;border:1.5px solid var(--border);border-radius:var(--r-sm);
  background:#fff;font-size:.9375rem;font-weight:600;color:var(--ink);
  transition:border-color .16s,box-shadow .16s;
}
.field select{
  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 d='M1 1.5 6 6.5l5-5' stroke='%237D7C76' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .85rem center;padding-right:2.2rem;
}
.field select:focus,.field input:focus,.field textarea:focus{outline:0;border-color:var(--accent-deep);box-shadow:0 0 0 3px rgba(62,76,89,.14)}
.field textarea{resize:vertical;min-height:120px;font-weight:500}
.field .hint{font-size:.75rem;color:var(--muted);font-weight:500}
.field-error{color:#8C3B33;font-size:.78rem;font-weight:700;display:none}
.field.has-error select,.field.has-error input,.field.has-error textarea{border-color:#8C3B33}
.field.has-error .field-error{display:block}
.search-note{margin-top:.8rem;font-size:.8rem;color:var(--muted);display:flex;align-items:center;gap:.4rem}

/* ---------- 8. Cards ---------- */
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--border-strong)}
.card-media{position:relative;aspect-ratio:4/3;background:var(--surface-alt2);overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.card:hover .card-media img{transform:scale(1.06)}
.card-media::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(transparent,rgba(26,26,24,.55))}
.card-badges{position:absolute;z-index:2;top:.7rem;left:.7rem;right:.7rem;display:flex;gap:.4rem;flex-wrap:wrap}
.card-badges .spacer{margin-left:auto}
.badge{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.3rem .6rem;border-radius:var(--r-sm);
  font-size:.6875rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  background:rgba(255,255,255,.94);color:var(--dark);backdrop-filter:blur(4px);
}
.badge--accent{background:var(--accent);color:var(--on-dark)}
.badge--deep{background:var(--accent-deep);color:#fff}
.badge--dark{background:rgba(26,26,24,.88);color:#fff}
.card-loc{
  position:absolute;z-index:2;left:.85rem;bottom:.7rem;color:#fff;
  font-size:.8125rem;font-weight:700;display:flex;align-items:center;gap:.35rem;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.card-body{padding:1.1rem 1.15rem 1.25rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.card-body h3{font-size:1.125rem;letter-spacing:-.02em}
.card-body h3 a{color:var(--ink)}
.card-body h3 a:hover{color:var(--accent-deep)}
.card-builder{font-size:.78rem;font-weight:700;color:var(--muted);letter-spacing:.02em;margin-top:-.35rem}
.spec-row{display:flex;flex-wrap:wrap;gap:.45rem}
.spec{
  display:inline-flex;align-items:center;gap:.35rem;
  background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:.32rem .58rem;font-size:.78rem;font-weight:700;color:var(--body);
}
.spec svg{color:var(--muted);flex:none}
.price-slot{
  margin-top:auto;padding-top:.85rem;border-top:1px dashed var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
}
.price-ask{display:flex;flex-direction:column;gap:.1rem}
.price-ask .k{font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.price-ask .v{font-size:.95rem;font-weight:800;color:var(--accent-deep)}

/* ---------- 9. Feature / value blocks ---------- */
.tile{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:1.5rem;height:100%;transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s;
}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--border-strong)}
.tile .ico{
  width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:var(--accent-050);color:var(--accent-ink);margin-bottom:1rem;
}
.tile--dark{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
.tile--dark:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.22)}
.tile--dark .ico{background:rgba(78,93,108,.16);color:var(--accent)}
.tile h3{margin-bottom:.5rem}
.tile--dark h3{color:#fff}

.step{position:relative;padding-left:0}
.step .n{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--dark);color:var(--on-dark);font-weight:600;font-size:1.05rem;margin-bottom:1rem;
}
.steps{counter-reset:s}
.steps .step::after{
  content:"";position:absolute;top:22px;left:calc(100% - 12px);width:calc(100% - 20px);
  height:2px;background:repeating-linear-gradient(90deg,var(--border-strong) 0 6px,transparent 6px 12px);
}
.steps .step:last-child::after{display:none}

/* checklist */
.checks{list-style:none;display:grid;gap:.7rem}
.checks li{display:flex;gap:.65rem;align-items:flex-start;font-weight:600;color:var(--body)}
.checks svg{flex:none;margin-top:.28rem;color:var(--success)}
.checks--light li{color:var(--on-dark-soft)}
.checks--light svg{color:var(--accent)}

/* ---------- 10. Testimonials ---------- */
.quote{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:1.6rem 1.5rem;height:100%;display:flex;flex-direction:column;gap:1rem;
}
.quote .stars{display:flex;gap:2px;color:var(--accent)}
.quote blockquote{margin:0;font-family:var(--f-disp);font-size:1.0625rem;line-height:1.6;color:var(--ink)}
.quote figcaption{margin-top:auto;display:flex;align-items:center;gap:.75rem;padding-top:.5rem;border-top:1px solid var(--border)}
.avatar{
  width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--accent-deep);color:#fff;font-weight:800;font-size:.9rem;letter-spacing:.02em;
}
.quote .who{font-weight:800;color:var(--ink);font-size:.9375rem;line-height:1.3}
.quote .where{font-size:.8125rem;color:var(--muted);font-weight:600}

/* ---------- 11. Honest-gap patterns ---------- */
.notice{
  display:flex;gap:.85rem;align-items:flex-start;
  background:var(--accent-deep-050);border:1px solid var(--on-dark-soft);border-left:4px solid var(--accent-deep);
  border-radius:var(--r);padding:1rem 1.15rem;
}
.notice svg{flex:none;margin-top:.15rem;color:var(--accent-deep)}
.notice p{font-size:.9rem;color:var(--body)}
.notice strong{color:var(--ink)}
.notice--warm{background:var(--accent-050);border-color:var(--accent-100);border-left-color:var(--accent)}
.notice--warm svg{color:var(--accent-ink)}

.ask-panel{
  background:linear-gradient(150deg,var(--dark) 0%,var(--dark-800) 100%);
  color:var(--on-dark-soft);border-radius:var(--r-lg);padding:1.6rem;
}
.ask-panel h3{color:#fff;margin-bottom:.5rem}
.ask-panel .price-line{
  display:flex;align-items:baseline;gap:.5rem;font-size:1.35rem;font-weight:800;color:#fff;margin-bottom:.35rem;
}
.ask-panel .price-line .rupee{color:var(--accent);font-size:1.5rem}

/* ---------- 12. Property detail ---------- */
.pagehead{background:var(--dark);color:#fff;padding-block:clamp(2rem,1.4rem + 2.5vw,3.25rem);position:relative;overflow:hidden}
.pagehead::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 380px at 88% -10%,rgba(78,93,108,.22),transparent 60%),radial-gradient(600px 400px at 0% 110%,rgba(62,76,89,.5),transparent 62%)}
.pagehead>.wrap{position:relative;z-index:2}
.pagehead h1{color:#fff;max-width:22ch}
.pagehead .lede{color:var(--on-dark-soft);max-width:60ch;margin-top:.85rem}
.crumbs{display:flex;flex-wrap:wrap;gap:.4rem;font-size:.8125rem;color:var(--on-dark-soft);margin-bottom:1rem;list-style:none}
.crumbs a{color:var(--on-dark-soft)}
.crumbs a:hover{color:var(--accent)}
.crumbs li+li::before{content:"/";margin-right:.4rem;opacity:.5}
.crumbs [aria-current]{color:#fff;font-weight:700}

.gallery{display:grid;grid-template-columns:2fr 1fr;gap:.6rem;border-radius:var(--r-lg);overflow:hidden}
.gallery a{display:block;position:relative;background:var(--surface-alt2)}
.gallery a img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.gallery a:hover img{transform:scale(1.05)}
.gallery .g-main{aspect-ratio:4/3}
.gallery .g-side{display:grid;grid-template-rows:1fr 1fr;gap:.6rem}
.gallery .g-side a{aspect-ratio:16/11}
.gallery .g-more{position:absolute;inset:0;display:grid;place-items:center;background:rgba(26,26,24,.72);color:#fff;font-weight:800;font-size:1rem}
.detail-grid{display:grid;grid-template-columns:1fr 366px;gap:clamp(1.5rem,1rem + 2vw,2.75rem);align-items:start}
.sticky-side{position:sticky;top:calc(var(--header-h) + 20px)}
.factgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.factgrid div{background:var(--surface);padding:1.05rem}
.factgrid dt{font-size:.7rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:.25rem}
.factgrid dd{margin:0;font-size:1.0625rem;font-weight:800;color:var(--ink)}
.prose h2{margin:2rem 0 .75rem}
.prose h3{margin:1.5rem 0 .6rem}
.prose p{margin-bottom:1rem;line-height:1.75}
.prose ul{padding-left:1.15rem;margin:0 0 1rem;list-style:disc}
.prose li{margin-bottom:.4rem}
.amen-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.6rem;list-style:none}
.amen-grid li{display:flex;align-items:center;gap:.55rem;background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--r-sm);padding:.65rem .8rem;font-size:.875rem;font-weight:700;color:var(--body)}
.amen-grid svg{color:var(--accent-ink);flex:none}

/* ---------- 13. Filter bar / results ---------- */
.filterbar{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.1rem;box-shadow:var(--shadow-sm)}
.filter-fields{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:.75rem;align-items:end}
.results-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin:1.75rem 0 1.1rem}
.results-count{font-weight:800;color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.9rem}
.chip{
  display:inline-flex;align-items:center;gap:.4rem;background:var(--accent-deep-050);color:var(--accent-deep);
  border:1px solid var(--on-dark-soft);border-radius:var(--r-pill);padding:.3rem .75rem;font-size:.8rem;font-weight:700;
}
.chip button{border:0;background:none;cursor:pointer;color:inherit;font-size:1rem;line-height:1;padding:0;opacity:.7}
.chip button:hover{opacity:1}
.empty-state{
  text-align:center;background:var(--surface-alt);border:1px dashed var(--border-strong);
  border-radius:var(--r-lg);padding:3rem 1.5rem;
}
.empty-state .ico{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--muted);margin:0 auto 1rem;border:1px solid var(--border)}

/* ---------- 14. Forms / CTA band ---------- */
.form-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(1.25rem,1rem + 1vw,1.9rem);box-shadow:var(--shadow)}
.form-grid{display:grid;gap:1rem}
.form-grid.two{grid-template-columns:1fr 1fr}
.consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.82rem;color:var(--muted);line-height:1.5}
.consent input{margin-top:.2rem;width:16px;height:16px;accent-color:var(--accent-deep);flex:none}
.form-status{display:none;border-radius:var(--r);padding:1rem 1.15rem;font-weight:700;font-size:.9rem;margin-top:1.1rem}
.form-status.ok{display:block;background:var(--success-050);color:#33563F;border:1px solid #D5E2D8}
.form-status .btn-row{gap:.5rem}
.form-status .btn{--btn-bd:transparent}
.form-status .btn--ghost{--btn-bd:#B9CFC0;--btn-fg:#33563F}

.ctaband{background:linear-gradient(140deg,var(--dark) 0%,var(--dark-800) 60%,var(--accent-deep-hover) 100%);color:#fff;border-radius:var(--r-xl);padding:clamp(1.75rem,1.2rem + 2.5vw,3rem);position:relative;overflow:hidden}
.ctaband::after{content:"";position:absolute;right:-70px;top:-70px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(78,93,108,.35),transparent 68%)}
.ctaband>*{position:relative;z-index:2}
.ctaband h2{color:#fff}
.ctaband p{color:var(--on-dark-soft);max-width:56ch}

/* ---------- 15. Footer ---------- */
.site-footer{background:var(--dark);color:var(--on-dark-soft);padding-top:clamp(2.75rem,2rem + 3vw,4rem)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.25fr;gap:clamp(1.5rem,1rem + 2vw,3rem);padding-bottom:2.5rem}
.site-footer h4{color:#fff;font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:1.05rem}
.site-footer ul{list-style:none;display:grid;gap:.6rem}
.site-footer a{color:var(--on-dark-soft);font-size:.9rem}
.site-footer a:hover{color:var(--accent)}
.footer-brand img{height:52px;width:auto;margin-bottom:1rem}
.footer-brand p{font-size:.9rem;line-height:1.7;max-width:38ch}
.contact-line{display:flex;gap:.65rem;align-items:flex-start;font-size:.9rem;margin-bottom:.85rem}
.contact-line svg{flex:none;margin-top:.2rem;color:var(--accent)}
.socials{display:flex;gap:.5rem;margin-top:1.1rem}
.socials a{width:38px;height:38px;border-radius:var(--r-sm);display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#fff}
.socials a:hover{background:var(--accent);color:var(--on-dark);border-color:var(--accent)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-block:1.25rem;font-size:.8125rem}
.footer-bottom .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.footer-disclaimer{background:var(--dark-900);padding-block:1.1rem;font-size:.75rem;line-height:1.65;color:var(--on-dark-soft)}

/* ---------- 16. Sticky mobile action bar ---------- */
.actionbar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;
  background:var(--surface);border-top:1px solid var(--border);box-shadow:0 -6px 22px rgba(26,26,24,.12);
  padding:.6rem .75rem calc(.6rem + env(safe-area-inset-bottom));gap:.55rem;
}
.actionbar .btn{flex:1;padding:.8rem .5rem}
.wa-float{
  position:fixed;right:18px;bottom:18px;z-index:89;
  display:inline-flex;align-items:center;gap:.55rem;
  background:var(--accent);color:var(--on-dark);font-weight:600;font-size:.875rem;
  padding:.8rem 1.15rem;border-radius:var(--r-pill);box-shadow:0 10px 26px rgba(68,105,78,.4);
}
.wa-float:hover{background:var(--accent-hover);color:var(--on-dark);transform:translateY(-2px)}
.wa-float{transition:transform .18s var(--ease),background .18s}

/* ---------- 17. Blog ---------- */
.post-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.post-card .meta{font-size:.78rem;font-weight:700;color:var(--muted);letter-spacing:.03em}
.post-card .card-body{gap:.55rem}
.post-body{font-size:1.0625rem}
.post-body h2{font-size:1.5rem;margin:2.25rem 0 .8rem}
.post-body h3{font-size:1.2rem;margin:1.75rem 0 .6rem}
.post-body p,.post-body li{line-height:1.8}
.toc{background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.25rem 1.4rem}
.toc h4{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.7rem}
.toc ol{padding-left:1.1rem;display:grid;gap:.4rem;font-size:.9rem;font-weight:600}

/* ---------- 18. Misc ---------- */
.tabs-line{display:flex;gap:.35rem;border-bottom:1px solid var(--border);overflow-x:auto;margin-bottom:1.75rem}
.tabs-line button{
  border:0;background:none;padding:.8rem 1.1rem;font-weight:800;font-size:.9rem;color:var(--muted);
  cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap;transition:.16s;
}
.tabs-line button[aria-selected="true"]{color:var(--accent-deep);border-bottom-color:var(--accent)}
.tabs-line button:hover{color:var(--ink)}
.accordion{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.accordion details+details{border-top:1px solid var(--border)}
.accordion summary{
  cursor:pointer;padding:1.1rem 1.3rem;font-weight:800;color:var(--ink);font-size:1rem;
  display:flex;justify-content:space-between;gap:1rem;align-items:center;list-style:none;
}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary::after{content:"+";font-size:1.35rem;color:var(--accent-ink);font-weight:700;line-height:1}
.accordion details[open] summary::after{content:"–"}
.accordion summary:hover{background:var(--surface-alt)}
.accordion .acc-body{padding:0 1.3rem 1.3rem;color:var(--body)}
.statline{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.statline div{background:var(--surface);padding:1.35rem 1.1rem;text-align:center}
.statline .k{font-size:1.65rem;font-weight:800;color:var(--accent-deep);letter-spacing:-.02em;line-height:1.1}
.statline .l{font-size:.8rem;font-weight:700;color:var(--muted);margin-top:.3rem}
.logo-strip{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.logo-strip span{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill);
  padding:.5rem 1.1rem;font-weight:800;font-size:.875rem;color:var(--ink);letter-spacing:-.01em;
}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 19. Responsive ---------- */
@media (max-width:1080px){
  .g-4{grid-template-columns:repeat(2,1fr)}
  .detail-grid{grid-template-columns:1fr}
  .sticky-side{position:static}
  .factgrid{grid-template-columns:repeat(2,1fr)}
  .filter-fields{grid-template-columns:repeat(2,1fr)}
  .filter-fields .btn{grid-column:1/-1}
}
@media (max-width:960px){
  .nav-toggle{display:flex}
  .header-cta{display:none}
  /* Anchored to the header itself, so it always opens directly beneath it —
     whether or not the contact bar above has scrolled away. */
  .nav{
    /* The header is light now, so a dark panel would have put dark nav links
       on a dark ground. */
    position:absolute;top:100%;left:0;right:0;background:var(--ground);
    border-bottom:1px solid var(--border);
    display:block;overflow-y:auto;-webkit-overflow-scrolling:touch;
    max-height:calc(100dvh - var(--header-h));
    padding:.5rem 20px 5rem;border-top:1px solid var(--border);
    box-shadow:0 18px 40px rgba(26,26,24,.14);
    transform:translateX(100%);transition:transform .26s var(--ease);
  }
  .nav.is-open{transform:translateX(0)}
  .nav>ul{display:block}
  .nav>ul>li{border-bottom:1px solid var(--border)}
  .nav a,.nav .navbtn{width:100%;justify-content:space-between;padding:.95rem .25rem;font-size:1rem}
  .submenu{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    background:transparent;border:0;border-radius:0;padding:0 0 .6rem .8rem;
    max-height:0;overflow:hidden;transition:max-height .26s var(--ease)
  }
  .submenu.is-open{max-height:640px}
  .nav li:hover>.submenu{max-height:0}
  .nav li>.submenu.is-open{max-height:640px}
  .submenu a{color:var(--body);font-size:.9375rem;padding:.6rem .25rem}
  .submenu a:hover{background:transparent;color:var(--ink)}
  .submenu .sub-note{display:none}
  .submenu-sep{background:var(--border)}
  .split{grid-template-columns:1fr}
  .search-fields{grid-template-columns:1fr 1fr}
  .search-fields .btn{grid-column:1/-1}
  .steps .step::after{display:none}
  .footer-grid{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:1fr}
  .gallery .g-side{grid-template-rows:none;grid-template-columns:1fr 1fr}
  .statline{grid-template-columns:repeat(2,1fr)}
  body{padding-bottom:0}
}
@media (max-width:720px){
  :root{--header-h:73px}
  .topbar-links a.hide-sm{display:none}
  .brand img.brand-logo{height:43px}
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .form-grid.two{grid-template-columns:1fr}
  .search-fields,.filter-fields{grid-template-columns:1fr}
  .factgrid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr}
  .actionbar{display:flex}
  .wa-float{display:none}
  body{padding-bottom:72px}
  .statline{grid-template-columns:1fr 1fr}
  .section{padding-block:3rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .card:hover,.tile:hover,.btn:hover,.post-card:hover{transform:none}
}
@media print{
  .site-header,.topbar,.site-footer,.actionbar,.wa-float,.ctaband,.searchbar{display:none!important}
  body{color:#000}
}

/* ---------- 11. Hero: the 3D massing model ----------
   The hero was a dark navy panel with a photograph blended into it. It is now a
   light room: cream ground, ink type, and an architectural massing study rendered
   in WebGL to the right (assets/js/hero3d.js). Copy and canvas never overlap, so
   the headline is plain --ink on --ground at 15.7:1 rather than relying on a
   scrim or a blend mode to stay legible. */
.hero{position:relative;background:var(--ground);color:var(--ink);overflow:hidden;
  border-bottom:1px solid var(--border)}
.hero::before,.hero::after{content:none}
/* The canvas is FULL-BLEED behind the copy, so the massing and the headline share one
   continuous ambient space rather than sitting in two columns with a seam between them.
   .hero-inner is deliberately static so the absolute canvas resolves against .hero (the
   full viewport width) and not against the 1200px wrap.
   Legibility is protected in the renderer instead of by layout: hero3d.js measures the
   copy and frames the massing into the band the copy leaves free, so geometry can never
   land under the headline. Only the soft ground shadow reaches across. */
.hero-inner{position:static;padding-block:clamp(2.75rem,1.75rem + 4vw,5rem)}
.hero-copy{position:relative;z-index:2;max-width:min(42rem,54%)}
.hero3d{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero3d-canvas{display:block;width:100%;height:100%}
.hero h1,.h-hero{color:var(--ink)}
.hero .lede{color:var(--body)}
.hero .eyebrow--light{color:var(--muted)}
.hero-badge{background:var(--surface);border:1px solid var(--border);
  color:var(--body);font-weight:500;border-radius:var(--r-pill)}
.hero-badge svg{color:var(--accent)}
@media (max-width:900px){
  .hero-copy{max-width:none}
  .hero3d{position:relative;inset:auto;height:clamp(240px,52vw,320px);margin-top:2.25rem}
}
/* No WebGL: the hero is simply a quiet cream panel, which is a perfectly good
   place to land. Nothing is lost but the ornament. */
[data-hero3d-failed]{display:none}
@media (max-width:900px){ [data-hero3d-failed]{display:none} }

/* ---------- 12. Hero variant: relief wall (see hero-options.html) ----------
   The wall is busy by nature, so the copy side is protected by a scrim rather than by
   hoping the geometry stays out of the way. Measured before and after: body copy went
   from 2.51:1 to comfortably past AA. */
.hero-relief{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-relief .hero3d-canvas{display:block;width:100%;height:100%}
.hero-relief::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,
    rgb(255,255,255) 0%, rgb(255,255,255) 30%, rgba(255,255,255,.92) 46%,
    rgba(255,255,255,.55) 62%, rgba(255,255,255,0) 80%)}
@media (max-width:900px){
  .hero-relief{position:relative;inset:auto;height:clamp(240px,52vw,320px);margin-top:2.25rem}
  .hero-relief::after{content:none}
}

/* ---------- 18. Full-bleed project carousel ----------
   The homepage hero is now the work itself: a slow crossfade through projects we are
   selling, with the header overlaid on it. White type sits on photographs, so the
   scrims below are not decoration - they are what makes the type legible, and their
   strength was measured against the actual slide images rather than guessed. */
/* Full screen, the way the reference does it: the image IS the first view, and the
   header rides on it. svh rather than vh so the mobile URL bar does not push the dots
   below the fold on first paint; vh stays as the fallback for browsers without svh. */
.hero-slides{position:relative;height:100vh;height:100svh;overflow:hidden;
  background:var(--ink);isolation:isolate}
.hs-track{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.hs-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.15s var(--ease);
  pointer-events:none}
.hs-slide.is-on{opacity:1;pointer-events:auto}
.hs-slide img{width:100%;height:100%;object-fit:cover;display:block}
/* top scrim carries the overlaid header, bottom scrim carries the caption */
.hero-slides::before,.hero-slides::after{content:"";position:absolute;left:0;right:0;
  pointer-events:none;z-index:2}
.hero-slides::before{top:0;height:230px;
  background:linear-gradient(rgba(16,15,14,.62),rgba(16,15,14,0))}
/* Two axes, not one. A purely vertical scrim was measured at 1.18:1 behind the
   headline on the brighter slides - white type over a lit pool and a bright sky. The
   horizontal pass darkens the left column where the headline sits; the vertical pass
   carries the caption on the right.

   The stops are solved, not chosen. Each slide was composited to a canvas with these
   gradients, and the worst single pixel behind each run of text was measured against
   white using the actual text rects (a Range, not the block box - .hs-eyebrow is
   display:block and its box runs the full wrap width, which reads far brighter than the
   type does). Worst case across all three slides:

       eyebrow 12.15:1   headline 7.16:1   project name 5.40:1   meta 6.78:1

   Before this, the headline measured 1.18:1 on the brightest slide. If the slide set
   changes, re-measure - these numbers are specific to these photographs. */
.hero-slides::after{inset:0;height:100%;
  background:
    linear-gradient(to right,rgba(16,15,14,.814) 0%,rgba(16,15,14,.726) 30%,
      rgba(16,15,14,.330) 58%,rgba(16,15,14,.132) 78%,rgba(16,15,14,.055) 100%),
    linear-gradient(to top,rgba(16,15,14,.88) 0%,rgba(16,15,14,.58) 34%,
      rgba(16,15,14,.197) 66%,rgba(16,15,14,0) 100%)}

.hs-lead{position:absolute;left:0;right:0;bottom:150px;z-index:3;
  width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px;
  pointer-events:none}
.hs-eyebrow{display:block;font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.82);margin-bottom:1rem}
.hs-title{color:#fff;max-width:19ch;margin:0;
  font-size:clamp(2rem,1.3rem + 2.8vw,3.4rem);line-height:1.08;letter-spacing:-.03em}

.hs-cap{position:absolute;right:0;bottom:150px;z-index:3;
  width:100%;max-width:var(--wrap);margin-inline:auto;left:0;padding-inline:20px;
  display:flex;justify-content:flex-end}
.hs-cap a{display:block;text-align:right;color:#fff;max-width:22rem}
.hs-loc{display:block;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.8)}
.hs-name{display:block;font-size:1.35rem;font-weight:600;margin-top:.35rem;
  border-bottom:1px solid rgba(255,255,255,0);transition:border-color .25s var(--ease)}
.hs-cap a:hover .hs-name{border-bottom-color:rgba(255,255,255,.7)}
.hs-meta{display:block;font-size:.8125rem;color:rgba(255,255,255,.78);margin-top:.3rem}

.hs-dots{position:absolute;left:0;right:0;bottom:64px;z-index:3;
  display:flex;justify-content:center;gap:14px}
.hs-dot{background:none;border:0;padding:10px 0;cursor:pointer;width:56px}
.hs-dot span{display:block;height:2px;background:rgba(255,255,255,.42);
  transition:background .3s var(--ease)}
.hs-dot.is-on span,.hs-dot:hover span{background:#fff}
.hs-dot:focus-visible{outline:2px solid #fff;outline-offset:4px}

/* The header rides on the photographs until the page scrolls, then becomes itself. */
/* The header stays STICKY and in flow; the carousel is pulled up underneath it
   instead. Taking the header out of flow with position:fixed collapsed it onto the
   contact bar above and clipped the logo. */
.has-hero-overlay .site-header{background:transparent;border-bottom-color:transparent}
.has-hero-overlay .hero-slides{margin-top:calc(-1 * var(--header-h))}
.has-hero-overlay .site-header .nav>ul>li>a,
.has-hero-overlay .site-header .navbtn{color:rgba(255,255,255,.92)}
.has-hero-overlay .site-header .nav a:hover,
.has-hero-overlay .site-header .navbtn:hover{color:#fff;background:rgba(255,255,255,.12)}
.has-hero-overlay .site-header .nav a[aria-current="page"]{color:#fff}
.has-hero-overlay .site-header .brand-logo{filter:brightness(0) invert(1)}
.has-hero-overlay .site-header .nav-toggle{color:#fff;border-color:rgba(255,255,255,.4)}
.has-hero-overlay .site-header.is-stuck{position:sticky;background:var(--ground);
  border-bottom-color:var(--border)}
.has-hero-overlay .site-header.is-stuck .nav>ul>li>a,
.has-hero-overlay .site-header.is-stuck .navbtn{color:var(--body)}
.has-hero-overlay .site-header.is-stuck .nav a[aria-current="page"]{color:var(--ink)}
.has-hero-overlay .site-header.is-stuck .brand-logo{filter:none}
.has-hero-overlay .site-header.is-stuck .nav-toggle{color:var(--ink);
  border-color:var(--border-strong)}
.has-hero-overlay .topbar{position:relative;z-index:101}

@media (max-width:900px){
  .hero-slides{height:100vh;height:100svh}
  .hs-lead{bottom:auto;top:38%}
  .hs-cap{bottom:112px}
  .hs-cap a{text-align:left;max-width:none}
  .hs-cap{justify-content:flex-start}
  .hs-dots{bottom:40px;gap:10px}
  .hs-dot{width:34px}
}
@media (prefers-reduced-motion: reduce){
  .hs-slide{transition:none}
}

/* ---------- 19. External project cards ----------
   Projects we can arrange a viewing for but did not photograph. Rather than hotlink the
   developer's imagery or fake a photograph, the media slot becomes a typographic panel.
   It is aria-hidden - the initials are decoration, and the project name is already the
   card's heading, so a screen reader would otherwise hear the name twice. */
.card--external .card-media--mark{
  aspect-ratio:4/3;display:grid;place-items:center;position:relative;
  background:linear-gradient(155deg,var(--surface-alt) 0%,var(--surface-alt2) 100%);
  border-bottom:1px solid var(--border)}
.cm-initials{font-size:2.6rem;font-weight:600;letter-spacing:.06em;
  color:var(--border-strong);user-select:none}
.card--external .card-badges{position:absolute;top:.7rem;left:.7rem}
/* .card-loc is absolutely positioned over the photo and paints white with a text shadow;
   every one of those has to be undone, not just the position. */
.card--external .card-loc--static{position:static;left:auto;bottom:auto;z-index:auto;
  text-shadow:none;font-weight:500;color:var(--muted);
  display:flex;align-items:center;gap:.35rem;
  margin:.75rem 1.1rem 0;font-size:.8125rem}
.card--external .card-loc--static svg{flex:none;color:var(--accent)}
.card--external .card-body{padding-top:.5rem}
.card--external h3 a{display:inline-flex;align-items:baseline;gap:.4rem}
.card--external h3 svg{flex:none;color:var(--muted)}
.card--external h3 a:hover svg{color:var(--accent)}

/* ---------- 20. Gallery slideshow ----------
   Sits above everything, including the sticky header and the floating chat button, so
   nothing pokes through the backdrop. The backdrop is near-opaque rather than a light
   wash: these are photographs, and a translucent scrim would let the page's beige bleed
   into them and shift their colour. */
html.lb-open{overflow:hidden;padding-right:var(--sbw,0px)}
.lb{position:fixed;inset:0;z-index:2000;background:rgba(14,13,12,.95);
  display:grid;grid-template-rows:1fr auto;place-items:center;
  animation:lb-in .18s var(--ease)}
.lb.no-anim{animation:none}
@keyframes lb-in{from{opacity:0}to{opacity:1}}
.lb-stage{margin:0;display:grid;place-items:center;width:100%;height:100%;padding:4.5rem 4.75rem 1rem}
.lb-stage img{max-width:100%;max-height:78vh;object-fit:contain;display:block;
  border-radius:2px;background:rgba(255,255,255,.04)}
.lb.is-loading .lb-stage img{opacity:0}
.lb-spin{display:none;position:absolute;width:30px;height:30px;border-radius:50%;
  border:2px solid rgba(255,255,255,.25);border-top-color:#fff;animation:lb-spin .7s linear infinite}
.lb.is-loading .lb-spin{display:block}
@keyframes lb-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.lb-spin{animation-duration:2s}}
.lb-cap{margin-top:.9rem;color:rgba(255,255,255,.86);font-size:.8125rem;text-align:center;
  max-width:60ch}
.lb-count{margin:0 0 1.4rem;color:rgba(255,255,255,.8);font-size:.8125rem;
  letter-spacing:.12em;text-transform:uppercase}

/* 48px targets - these are the only controls in the dialog and they get used on phones */
.lb-close,.lb-nav{position:absolute;display:grid;place-items:center;
  width:48px;height:48px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.10);color:#fff;transition:background .2s var(--ease)}
.lb-close:hover,.lb-nav:hover{background:rgba(255,255,255,.22)}
.lb-close:focus-visible,.lb-nav:focus-visible{outline:2px solid #fff;outline-offset:3px}
.lb-close{top:1.1rem;right:1.1rem}
.lb-prev{left:1.1rem;top:50%;transform:translateY(-50%)}
.lb-next{right:1.1rem;top:50%;transform:translateY(-50%)}
@media (max-width:720px){
  .lb-stage{padding:4.25rem 1rem 1rem}
  .lb-stage img{max-height:66vh}
  .lb-prev{left:.6rem} .lb-next{right:.6rem}
}

/* the badge is a button now, so it should read as one */
.g-more{cursor:pointer}

/* ---------- 21. Split band ----------
   The beige ends on the centre line of the cards, so they straddle the edge rather than
   sitting in a coloured box. --band-stop is measured in site.js; the 66% here is the
   no-JavaScript fallback, chosen to land inside the cards at common viewport sizes
   rather than to be exact. Two hard stops at the same position, so it is a clean edge
   and not a gradient. */
.section--split{
  background:linear-gradient(to bottom,
    var(--surface-alt) 0 var(--band-stop,66%),
    var(--ground) var(--band-stop,66%) 100%)}

/* ---------- 22. FAQ blocks ----------
   <details> rather than a JS accordion: it is open-able before any script runs, it is
   findable by the browser's own in-page search when closed in modern browsers, and it
   carries the right semantics for free. The visible copy is the same text as the FAQPage
   JSON-LD - schema that does not match what a visitor can read is a guidelines breach,
   not a shortcut. */
.faq-list{margin-top:1rem;border-top:1px solid var(--border)}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item summary{cursor:pointer;padding:.95rem 2rem .95rem 0;position:relative;
  font-weight:600;color:var(--ink);list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"";position:absolute;right:.4rem;top:1.35rem;
  width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);transition:transform .2s var(--ease)}
.faq-item[open] summary::after{transform:rotate(-135deg)}
.faq-item summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.faq-item summary:hover{color:var(--accent)}
.faq-a{padding:0 0 1.05rem;color:var(--body)}
.faq-a p{margin:0}
@media (prefers-reduced-motion: reduce){.faq-item summary::after{transition:none}}