/* >>> generated by lib/palette.py — do not hand-edit, run tools/sync_header_css.py */
@layer teamiri-fallback {
  :root{
    --burgundy:#671018; --burgundy-deep:#4C0B11;
    --brand:var(--burgundy); --brand-deep:var(--burgundy-deep);
    --camel:#AE9173; --camel-soft:#C8B49B; --camel-deep:#8A6F52;
    --camel-lift:#E0CDB4;
    --charcoal:#161616; --ink:var(--charcoal);
    --glass:#121615; --scrim:#080C0B;
    --paper:#FAFAF8; --rule:#E1DCD3;
    --serif:"Cormorant Garamond","Vazirmatn","Geeza Pro","Arial Hebrew","Songti SC","PingFang SC",Georgia,"Times New Roman",serif;
    --sans:"Inter","Vazirmatn","Geeza Pro","Arial Hebrew","PingFang SC","PingFang TC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,sans-serif;
    --farsi:"Vazirmatn","Noto Naskh Arabic",Tahoma,sans-serif;
    --shell:1680px; --gut:48px; --util-h:40px; --head-h:108px; --head-rule:1px;
    --band-h:calc(var(--util-h) + var(--head-h) + var(--head-rule));
  }
}
/* <<< end generated */

/* ============================================================
   SHARED HEADER — utility bar, masthead, mega menus, dropdown.
   Lifted verbatim from the hand-written homepage so every page
   opens the identical menu. The homepage remains the source of
   truth; re-extract with .dev/header_extract.py if it changes.
   Loaded AFTER each page's inline <style>, so on equal
   specificity these rules win over the generated pages' own
   flat-nav rules.
   ============================================================ */
/* ============================================================
   1. UTILITY BAR
   ============================================================ */
.utility{
  /* Sticks to the very top; the masthead then sticks directly beneath it,
     so the two behave as one fixed band. z-index sits above the masthead so
     nothing can ride over the bar. */
  position:sticky;
  top:0;
  z-index:61;
  background:transparent;      /* at rest the hero photograph shows through */
  color:#fff;
  height:var(--util-h);
  display:flex;
  align-items:center;
  font-size:11px;
  transition:background-color .3s ease, backdrop-filter .3s ease;
}

/* The scrim that makes the transparent state readable. It hangs off the
   MASTHEAD and reaches upward past the utility bar, so both bars sit on one
   continuous darkening.
   ★ It must belong to the masthead, not the utility bar. The utility bar's
   z-index:61 opens a stacking context ABOVE the masthead's 60, so a scrim
   parented there paints over the logo and the nav rather than behind them —
   which measured as a 45% grey wash across everything in the header while the
   hero headline below it stayed pure white. Parented to the masthead, its
   z-index:-1 puts it behind that element's own content and still above the
   hero. */
.masthead::before{
  content:"";
  position:absolute; left:0; right:0;
  top:calc(-1 * var(--util-h));
  height:calc(var(--band-h) + 56px);
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg, color-mix(in srgb, var(--scrim) 60%, transparent) 0%, color-mix(in srgb, var(--scrim) 34%, transparent) 52%, color-mix(in srgb, var(--scrim) 0%, transparent) 100%);
  transition:opacity .3s ease;
}
/* Once either bar has a background of its own the scrim is redundant. */
[data-scrolled] .masthead::before{ opacity:0; }

/* Once the page has scrolled, both bars take a background and go translucent,
   blurring what passes beneath them. Opening a menu does NOT trigger this: the
   panels are glass, so the bar stays see-through above them. */
[data-scrolled] .utility{
  background-color:color-mix(in srgb, var(--burgundy) 60%, transparent);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
          backdrop-filter:blur(20px) saturate(150%);
}
[data-scrolled] .masthead{
  /* 0.58 is the floor. Composited over the darkest thing that passes beneath
     it — the near-black hero and the forest press band — the dark nav text
     still clears WCAG AA. Below about 0.5 it does not. */
  background-color:color-mix(in srgb, var(--paper) 58%, transparent);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
          backdrop-filter:blur(20px) saturate(150%);
  box-shadow:0 1px 22px -10px color-mix(in srgb, var(--charcoal) 34%, transparent);
  border-bottom-color:var(--rule);
}
/* No blur support (or reduced transparency): fall back to the solid colours. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  [data-scrolled] .utility{ background-color:var(--burgundy); }
  [data-scrolled] .masthead{ background-color:var(--paper); }
}
.utility .shell{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  width:100%;
}
.util-stats{
  display:flex;
  align-items:center;
  gap:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
}
.util-stats svg{ flex:none; opacity:.85; }
.util-stats .dot{ opacity:.5; }
.util-right{
  display:flex;
  align-items:center;
  gap:14px;
  white-space:nowrap;
}
.lang{
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:500;
  opacity:.72;
  transition:opacity .18s;
  padding:4px 2px;
}
.lang:hover{ opacity:1; }
.lang[aria-current="true"]{ opacity:1; }
/* Native-script labels drop the uppercase/letterspacing treatment — neither
   applies meaningfully to Arabic, Hebrew or Han script. No extra webfonts:
   system stacks already cover Hebrew and CJK, and a full CJK face for one
   two-character label would be the heaviest asset on the page. */
.lang.native{ letter-spacing:0; text-transform:none; font-size:12.5px; }
.lang.fa{ font-family:var(--farsi); }
.lang.he{ font-family:"Noto Sans Hebrew","Arial Hebrew",Arial,sans-serif; }
.lang.zh{ font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif; }
.util-sep{ opacity:.35; }

/* Broker attribution. California requires the responsible broker on the
   advertisement; the mockup had none. Delete this block to match the mockup
   exactly — see the note in the handoff. */
.broker{
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:400;
  opacity:.62;
  font-size:10px;
  padding-right:4px;
  border-right:1px solid rgba(255,255,255,.25);
  margin-right:10px;
}

/* ============================================================
   2. HEADER
   ============================================================ */
.masthead{
  position:sticky;
  top:var(--util-h);      /* parks under the utility bar, not over it */
  z-index:60;
  background:transparent;
  border-bottom:var(--head-rule) solid transparent;   /* reserved, so going solid can't shift the row */
  transition:background-color .3s ease, box-shadow .3s ease, border-color .3s ease;
  /* Nav ink is a variable rather than a colour so the over-hero and solid
     states are one declaration each, and a per-instance theme can retune both
     without touching any of the nav rules. */
  --nav-ink:#fff;
  --nav-ink-hot:var(--camel-soft);
}
[data-scrolled] .masthead{
  --nav-ink:var(--ink);
  --nav-ink-hot:var(--brand);
}
.masthead .shell{
  height:var(--head-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
}

/* --- logo lockup --- */
.brandmark{ display:flex; align-items:center; flex:none; }
/* Both artworks occupy the same grid cell and cross-fade, so the lockup keeps
   its exact position and size through the swap — the black wordmark is
   invisible on the hero, the white one is invisible on paper. */
.brandmark-stack{ display:grid; }
.brandmark-stack > *{ grid-area:1 / 1; }
/* Height-driven so the supplied artwork keeps its own proportions. */
.brandmark-img{ height:64px; width:auto; transition:opacity .3s ease; }
.brandmark-img.on-dark{ opacity:1; }
.brandmark-img.on-light{ opacity:0; }
[data-scrolled] .brandmark-img.on-dark{ opacity:0; }
[data-scrolled] .brandmark-img.on-light{ opacity:1; }
.monogram{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:52px;
  line-height:.9;
  color:var(--brand);
  letter-spacing:-.06em;
  margin-bottom:2px;
}
.wordmark{
  font-family:var(--serif);
  font-size:21px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  line-height:1;
  color:var(--ink);
  padding-bottom:5px;
  border-bottom:1px solid var(--ink);
}
.subwordmark{
  font-family:var(--sans);
  font-size:9.5px;
  font-weight:500;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--camel-deep);
  padding-top:5px;
  padding-left:.42em;
}

/* --- nav --- */
/* auto margins keep the nav centred in whatever space the brandmark and the
   right-hand group leave — adding the lockup as a fourth flex child would
   otherwise drag it left. */
.nav{ display:flex; align-items:center; gap:34px; margin:0 auto; }
.nav-item{ position:relative; }
.nav-link{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--nav-ink);
  padding:8px 0;
  transition:color .18s;
  white-space:nowrap;
}
.nav-link:hover,
.nav-item.is-open > .nav-link{ color:var(--nav-ink-hot); }
.nav-link .chev{
  width:9px; height:9px;
  transition:transform .22s ease;
  opacity:.8;
}
.nav-item.is-open .nav-link .chev{ transform:rotate(180deg); }

.cta{
  flex:none;
  background:var(--brand);
  color:#fff;
  font-size:12px;
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
  padding:19px 32px;
  transition:background .2s, box-shadow .3s ease;
}
.cta:hover{ background:var(--brand-deep); }
/* Over the hero the button is an outline, matching the rest of the bar. The
   rule is drawn with an inset shadow rather than a border so switching states
   can't change the button's box and reflow the nav row. */
:root:not([data-scrolled]) .cta{
  background:transparent;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
}
:root:not([data-scrolled]) .cta:hover{
  background:rgba(255,255,255,.12);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9);
}

/* ============================================================
   SECOND CTA — "Work with TEAMIRI"
   Eden, 2026-08-26: "next to the Home Valuation button I want a green Work
   with Teamiri button on every single page. The goal is no matter where the
   reader is on the page there will always be a CTA on the page."
   The masthead is sticky, so a button in it satisfies "always on the page"
   without a floating element fighting the content for attention.

   It stays SOLID over the hero while .cta drops to an outline there. That is
   deliberate: two outline buttons side by side read as one control, and the
   whole point of this one is to be findable at a glance.
   ============================================================ */
/* Eden, on the first attempt: "it needs to be the same green as the other
   button." The site already has a green CTA, .btn-forest on "Work with Maryam",
   and inventing a second green put two different greens on the same page. These
   are the existing forest tokens, copied so the header button matches it
   exactly rather than approximately. */
:root{ --evergreen:#1B2E29; --evergreen-deep:#0E1A17; }
.cta-work{ background:var(--evergreen); }
.cta-work:hover{ background:var(--evergreen-deep); }
:root:not([data-scrolled]) .cta-work{
  background:var(--evergreen);
  box-shadow:none;
}
:root:not([data-scrolled]) .cta-work:hover{
  background:var(--evergreen-deep);
  box-shadow:none;
}

/* Same story for the mobile burger. */
:root:not([data-scrolled]) .burger span{ background:#fff; }

/* ============================================================
   3. MENU PANELS — shared palette
   Every panel that hangs off the header is the same smoked glass: the page
   behind it stays faintly visible, the type is light, and the brand colour
   appears only in the hover bubble. Declared once here, so the three panel
   types below carry no colours of their own and a per-instance theme retints
   all of them at once.
   ============================================================ */
.mega, .dropdown{
  /* The alphas here are set by the worst case, not by the hero: a panel opened
     while the page is scrolled hangs over the pale sections, where the plate
     composites to mid-grey. Measured against white — the brightest thing any
     panel can overlap — 0.74 is the thinnest plate on which the list type still
     clears WCAG AA (7.8:1) and the gold heads clear it too (5.0:1). At 0.62 the
     heads measured 2.5:1 and failed outright. Over the hero the photograph
     still reads through. */
  --panel-bg:color-mix(in srgb, var(--glass) 74%, transparent);
  --panel-ink:#fff;
  --panel-ink-soft:rgba(255,255,255,.94);
  --panel-ink-mute:rgba(255,255,255,.68);
  --panel-head:var(--camel-lift);              /* camel lifted for dark surfaces */
  --panel-rule:rgba(255,255,255,.14);
  --panel-hover-bg:color-mix(in srgb, var(--burgundy) 86%, transparent);
}
.mega{
  position:absolute;
  left:0; right:0;
  top:100%;
  background:var(--panel-bg);
  -webkit-backdrop-filter:blur(26px) saturate(140%);
          backdrop-filter:blur(26px) saturate(140%);
  border-top:1px solid var(--panel-rule);
  box-shadow:0 30px 60px -32px rgba(0,0,0,.62);
  z-index:55;
  opacity:0;
  visibility:hidden;
  transform:translateY(-10px);
  transition:opacity .24s ease, transform .24s cubic-bezier(.22,.61,.36,1), visibility .24s;
}
.mega.is-open{ opacity:1; visibility:visible; transform:translateY(0); }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .mega{ background:color-mix(in srgb, var(--glass) 96%, transparent); }
}

.mega-inner{
  display:grid;
  grid-template-columns:1.05fr 1.55fr 1fr 1.05fr .95fr;
  max-width:var(--shell);
  margin:0 auto;
  padding:0 var(--gut);
}

/* The Cities panel drops any column whose list came back empty (see
   hideCol in header.js). Without these the five fixed tracks stay put and
   the panel renders half empty. */
.mega-inner[data-cols="4"]{ grid-template-columns:1.05fr 1.55fr 1fr 1.05fr; }
.mega-inner[data-cols="3"]{ grid-template-columns:1.05fr 1.55fr 1.4fr; }
.mega-inner[data-cols="2"]{ grid-template-columns:1.05fr 2.6fr; }
.mega-col{
  padding:38px 30px 40px;
  border-left:1px solid var(--panel-rule);
  min-width:0;
}
.mega-col:first-child{ border-left:0; padding-left:0; }
.mega-col:last-child{ padding-right:0; }

.col-head{
  /* Gold on glass — the same head colour the compact dropdown uses. */
  color:var(--panel-head);
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin:0 0 20px;
  /* Area names vary in length, so "Newport Beach Neighborhoods" wraps where
     "Irvine Neighborhoods" does not. Reserve two lines in every column so the
     lists always start on the same baseline. */
  min-height:2.8em;
  line-height:1.4;
}

/* --- column 1: area switcher --- */
.area-list{ list-style:none; margin:0; padding:0; }
.area-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 14px;
  font-size:16px;
  color:var(--panel-ink-soft);
  text-align:left;
  transition:background .16s, color .16s;
  line-height:1.3;
}
.area-btn svg{ width:9px; height:9px; flex:none; opacity:.5; }
.area-btn:hover{ color:var(--panel-ink); background:var(--panel-hover-bg); }
/* Hovering a city also SELECTS it (that is what swaps the right-hand columns),
   so this state is what the cursor actually lands on. It previously used --wash,
   which made the city list highlight a different colour from every other menu
   list. Same tint as every other hover now. */
.area-btn[aria-selected="true"]{
  background:var(--panel-hover-bg);
  color:var(--panel-ink);
  font-weight:500;
}
.area-btn[aria-selected="true"] svg{ opacity:1; }

/* --- column 2: feature --- */
.feature-img{
  width:100%;
  aspect-ratio:16/10.4;
  background:rgba(255,255,255,.06);
  border:1px solid var(--panel-rule);
  position:relative;
  overflow:hidden;
}
.feature-img::after{
  content:attr(data-label);
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--panel-ink-mute);
  text-align:center;
  padding:12px;
}
.feature-copy{
  margin:20px 0 0;
  font-size:15.5px;
  line-height:1.75;
  color:var(--panel-ink-soft);
  font-weight:400;
}
.feature-link{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-top:22px;
  color:var(--panel-head);
  font-size:12px;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.feature-link svg{ width:9px; height:9px; transition:transform .2s; }
.feature-link:hover svg{ transform:translateX(4px); }

/* --- columns 3 & 4: link lists --- */
.link-list{ list-style:none; margin:0; padding:0; }
.link-list a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  /* 14px side padding so the hover block reads as a highlight rather than a
     full-bleed bar. Matches the area list, which already indents this way. */
  padding:7px 14px;
  font-size:16px;
  color:var(--panel-ink-soft);
  transition:color .16s, background .16s;
  line-height:1.4;
}
.link-list a svg{ width:9px; height:9px; flex:none; opacity:.4; transition:opacity .16s, transform .16s; }
.link-list a:hover{ color:var(--panel-ink); background:var(--panel-hover-bg); }
.link-list a:hover svg{ opacity:1; transform:translateX(3px); }

/* --- column 5: intent list with icons --- */
.intent-list{ list-style:none; margin:0; padding:0; }
.intent-list a{
  display:flex;
  align-items:center;
  gap:14px;
  padding:8px 14px;
  font-size:16px;
  color:var(--panel-ink-soft);
  transition:color .16s, background .16s;
}
.intent-list a:hover{ color:var(--panel-ink); background:var(--panel-hover-bg); }
.intent-ico{
  width:22px; height:22px;
  flex:none;
  color:var(--panel-head);
}
.intent-ico svg{ width:100%; height:100%; }

/* ============================================================
   3b. STANDARD PANEL — Buyers / Sellers / Luxury
   Three link columns plus a feature card. One component, three
   data objects; Resources and About drop in with no new markup.
   ============================================================ */
.mega-inner.std{ grid-template-columns:1fr 1fr 1fr 1.02fr; }
.mega-inner.std .mega-col{ padding-top:44px; padding-bottom:46px; }

/* These lists carry no chevrons and breathe more than the area lists. */
.plain-list{ list-style:none; margin:0; padding:0; }
.plain-list a{
  display:block;
  padding:9px 14px;
  font-size:16.5px;
  font-weight:400;
  color:var(--panel-ink-soft);
  transition:color .16s, background .16s;
  line-height:1.4;
}
.plain-list a:hover{ color:var(--panel-ink); background:var(--panel-hover-bg); }

.feature-panel{ display:flex; flex-direction:column; }
.feature-panel .feature-img{ aspect-ratio:16/9.6; border-radius:3px; }
.feature-kicker{
  color:var(--panel-head);
  font-size:12px;
  font-weight:600;
  letter-spacing:.145em;
  text-transform:uppercase;
  margin:22px 0 12px;
}
.feature-tag{
  font-family:var(--serif);
  font-style:italic;
  font-size:18px;
  font-weight:400;
  color:var(--panel-ink);
  margin:0 0 12px;
  line-height:1.4;
}
.feature-body{
  font-size:15.5px;
  line-height:1.75;
  font-weight:400;
  color:var(--panel-ink-soft);
  margin:0 0 24px;
}
.btn-outline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:flex-start;
  border:1px solid var(--camel);
  color:var(--camel-soft);
  font-size:12px;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  padding:15px 30px;
  transition:background .2s, color .2s;
}
.btn-outline:hover{ background:var(--camel); color:var(--charcoal); }

/* --- assurance strip --- */
.assurance{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  max-width:var(--shell);
  margin:0 auto;
  padding:26px var(--gut);
}
.assure{
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:4px 28px;
  border-left:1px solid var(--panel-rule);
}
.assure:first-child{ border-left:0; padding-left:0; }
.assure-ico{ width:34px; height:34px; flex:none; color:var(--panel-head); }
.assure-ico svg{ width:100%; height:100%; }
.assure h4{
  margin:0 0 4px;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--panel-ink);
}
.assure p{ margin:0; font-size:15px; line-height:1.55; font-weight:400; color:var(--panel-ink-soft); }

@media (max-width:1180px){
  .mega-inner.std{ grid-template-columns:1fr 1fr 1.05fr; }
  .mega-inner.std .mega-col:nth-child(3){ display:none; }
  .assurance{ grid-template-columns:repeat(2,1fr); gap:20px 0; }
  .assure:nth-child(3){ border-left:0; padding-left:0; }
}

/* ============================================================
   3c. SIMPLE DROPDOWN — About / Resources
   A third panel type: too few items to justify a mega panel.
   Quiet, narrow, anchored under its trigger.
   ============================================================ */
/* A plain pale card that hangs off the bottom edge of the header and floats on
   the hero — no arrow, no outline, no full-width sheet. It is left-anchored to
   its trigger rather than centred on it, so the column of items reads as an
   extension of the word above it. */
.dropdown{
  position:absolute;
  top:100%;
  min-width:250px;
  /* The plate alpha is a measured floor, not a taste call —
     thinner and the plate washes out where it overlaps a pale section further
     down the page, and the type stops clearing AA — see the note above. */
  background:var(--panel-bg);
  -webkit-backdrop-filter:blur(26px) saturate(140%);
          backdrop-filter:blur(26px) saturate(140%);
  box-shadow:0 30px 60px -32px rgba(0,0,0,.62);
  padding:20px 0;
  z-index:56;
  opacity:0;
  visibility:hidden;
  transform:translateY(-10px);
  transition:opacity .24s ease, transform .24s cubic-bezier(.22,.61,.36,1), visibility .24s;
}
.dropdown.is-open{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown ul{ list-style:none; margin:0; padding:0; position:relative; }
.dropdown a{
  display:block;
  padding:15px 34px;
  font-size:13.5px;
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--panel-ink-soft);
  white-space:nowrap;
  transition:background .16s, color .16s;
}
/* The bubble stays burgundy on the glass — it is the one place the brand
   colour appears in the menu — but at an alpha that reads as a solid swatch
   rather than a stain. */
.dropdown a:hover{ color:var(--panel-ink); background:var(--panel-hover-bg); }
/* No blur support: the plate goes near-solid so the type never sits on a
   half-transparent smear of whatever is behind it. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .dropdown{ background:color-mix(in srgb, var(--glass) 96%, transparent); }
}
.dropdown .drop-head{
  padding:10px 34px 12px;
  margin:0;
  color:var(--panel-head);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.155em;
  text-transform:uppercase;
}
.dropdown .drop-rule{ height:1px; background:var(--panel-rule); margin:12px 0; }
@media (max-width:1024px){ .dropdown{ display:none; } }

/* --- mega footer strip --- */
.mega-foot{
  border-top:1px solid var(--panel-rule);
  background:rgba(0,0,0,.16);   /* one step darker than the plate, not a second surface */
}
.mega-foot-inner{
  max-width:var(--shell);
  margin:0 auto;
  padding:26px var(--gut);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:56px;
  flex-wrap:wrap;
}
.foot-prompt{ display:flex; align-items:center; gap:18px; }
.pin{
  width:44px; height:44px;
  border:1px solid var(--panel-rule);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--panel-head);
  flex:none;
}
.pin svg{ width:17px; height:17px; }
.foot-prompt p{ margin:0; font-size:15.5px; line-height:1.6; color:var(--panel-ink-soft); font-weight:400; }
.foot-prompt strong{ display:block; color:var(--panel-ink); font-weight:500; }



/* The burger's box and bars were only ever defined in the homepage's own
   inline CSS, so on every generated page the button rendered as three
   zero-height spans — invisible. These are the homepage's values. */
.burger{ display:none; width:26px; height:18px; position:relative; flex:none;
  background:none; border:0; padding:0; cursor:pointer; }
.burger span{ position:absolute; left:0; right:0; height:1.5px;
  background:var(--ink,#14201c); transition:transform .24s, opacity .2s; }
.burger span:nth-child(1){ top:0; }
.burger span:nth-child(2){ top:8px; }
.burger span:nth-child(3){ top:16px; }
.burger.is-on span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.burger.is-on span:nth-child(2){ opacity:0; }
.burger.is-on span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* --- mobile rules that touch the header --- */
@media (max-width:1280px){
  .broker{ display:none; }
}
@media (max-width:1100px){
  .util-stats .u-extra{ display:none; }
}
@media (max-width:1500px){
  .nav{ gap:22px; }
  .nav-link{ font-size:11.5px; letter-spacing:.1em; }
  .cta{ padding:17px 24px; font-size:11px; }
  .cta-work{ padding:17px 20px; }
  .mega-col{ padding:32px 22px 34px; }
}
@media (max-width:1180px){
  .mega-inner{ grid-template-columns:1fr 1.4fr 1fr 1fr; }
  .mega-col.col-intent{ display:none; }
}
@media (max-width:1024px){
  .burger{ display:block; }
  .nav{ display:none; }
  /* Eden's goal is a CTA on the page wherever the reader is, so hiding both
     buttons left the phone with no way to act at all. Home Valuation still
     goes; the green one stays. (The burger now opens #mnav — see below.) */
  .cta:not(.cta-work){ display:none; }
  .cta-work{ padding:15px 16px; font-size:10px; letter-spacing:.09em; }
  .broker{ display:none; }
  .util-stats{ font-size:9.5px; letter-spacing:.1em; }
  .mega{ display:none; }
}
@media (max-width:640px){
  .util-stats .dot,
  .util-stats .u-extra{ display:none; }
  .cta-work{ padding:14px 12px; font-size:9.5px; letter-spacing:.06em; }
}
@media (pointer:fine) and (hover:hover){
  body, a, button, .area-btn{ cursor:none; }
  #cursor{
    position:fixed;
    top:0; left:0;
    width:16px; height:16px;
    margin:-8px 0 0 -8px;        /* centre on the point, no transform needed */
    border:1px solid #fff;
    border-radius:50%;
    pointer-events:none;
    z-index:9999;
    opacity:0;
    /* difference blending keeps one ring legible on the dark hero AND on the
       ivory panels — a plain white ring would vanish on the light sections. */
    mix-blend-mode:difference;
    transition:width .22s ease, height .22s ease, margin .22s ease,
               background-color .22s ease, opacity .18s ease;
    will-change:transform;
  }
  #cursor.is-visible{ opacity:1; }
  /* Over anything clickable. No fill — the reference is an open ring, so the
     element underneath stays readable through it. */
  #cursor.is-hot{
    width:30px; height:30px;
    margin:-15px 0 0 -15px;
  }
  /* while the button is held */
  #cursor.is-down{
    width:12px; height:12px;
    margin:-6px 0 0 -6px;
  }
}
@media (prefers-reduced-motion:reduce){
  #cursor{ transition:opacity .18s ease; }
}

/* ============================================================
   NO-HERO PAGES
   The .74 plate was measured on the homepage, where a panel floats
   over a dark, low-detail hero photograph. Every other page has
   busy light content up there instead, and 26% of sharp body text
   reading through the menu looks broken. Those pages get the same
   value the no-backdrop-filter fallback already uses, .96, so the
   panel reads as a SOLID plate — even 4% bleed of sharp black body
   text ghosted through and read as a rendering fault. The blur is
   dropped with it: there is nothing worth showing through on a
   content page, and it is wasted compositing. The type on the panel
   is unchanged and clears AA by a wider margin than on the hero.
   ============================================================ */
[data-no-hero] .mega,
[data-no-hero] .dropdown{
  background:var(--glass);
  -webkit-backdrop-filter:none; backdrop-filter:none;
}

/* The masthead is permanently in its scrolled state on these pages, so the
   hero-only transparent treatments must not apply. */
[data-no-hero] .masthead{ background:var(--paper); }
[data-no-hero] .utility{ background:var(--burgundy); }

/* ============================================================
   UNBUILT MARKERS INSIDE THE PANELS
   An unavailable menu item is a <span>, so it never picks up the
   `.plain-list a` / `.link-list a` colour and falls back to the
   body's charcoal — charcoal on a near-black plate, which reads as
   the options being missing entirely. This is the same fix already
   made on the homepage; it lives outside the CSS range extracted
   into this file, so it is restated here.
   ============================================================ */
.plain-list .is-unbuilt,
.link-list .is-unbuilt,
.intent-list .is-unbuilt,
.area-list .is-unbuilt{
  display:block;
  padding:9px 14px;
  font-size:16.5px;
  font-weight:400;
  line-height:1.4;
  color:var(--panel-ink-soft);
  opacity:.62;
}
.link-list .is-unbuilt,
.intent-list .is-unbuilt{ font-size:inherit; padding:inherit; }

/* A language with no translated page yet is shown, not offered. */
.lang.is-untranslated{opacity:.38;cursor:default;text-decoration:none}

/* ============================================================
   MOBILE NAVIGATION PANEL + LANGUAGE DROPDOWN
   The burger had no panel below 1024px; the five language links
   overflowed the phone and the fifth was clipped. Both are built
   at runtime by header.js, so no page needed rebuilding.
   ============================================================ */
/* Fixed to the viewport, NOT absolute inside the sticky masthead. Anchoring
   it to the header meant a scroll lock on <html> collapsed the scroll
   container, position:sticky fell back to its document position, and opening
   the menu part-way down a page threw it a screenful above the viewport. */
.mnav{
  position:fixed; left:0; right:0;
  top:calc(var(--util-h,40px) + var(--head-h,80px));
  background:var(--paper,#f4f2ee);
  border-top:1px solid var(--rule,#d8d3c9);
  border-bottom:1px solid var(--rule,#d8d3c9);
  max-height:calc(100vh - var(--util-h,40px) - var(--head-h,80px));
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  z-index:70;
}
.mnav[hidden]{ display:none; }
.mnav-inner{ padding:6px 0 22px; }
.mnav-scrim{
  position:fixed; inset:0; top:calc(var(--util-h,34px) + var(--head-h,80px));
  background:rgba(12,16,15,.34); z-index:59;
}
.mnav-scrim[hidden]{ display:none; }
/* No overflow:hidden on <html> here — that is what broke the sticky header.
   The scrim swallows wheel and touch instead, so the page behind stays put. */

.msection{ border-bottom:1px solid var(--rule,#d8d3c9); }
.msection:last-of-type{ border-bottom:0; }
.mtoggle, .mlink{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; padding:17px var(--gut,24px);
  font-size:13px; letter-spacing:.13em; text-transform:uppercase; font-weight:500;
  color:var(--ink,#14201c); background:none; border:0; text-align:left; cursor:pointer;
}
.mlink{ text-decoration:none; }
.mtoggle .mchev{ width:11px; height:11px; flex:none; opacity:.65; transition:transform .22s ease; }
.msection.is-open .mtoggle .mchev{ transform:rotate(180deg); }
.mtoggle[aria-expanded="true"]{ color:var(--brand,#7b1d26); }

.mpanel{ display:none; padding:2px var(--gut,24px) 18px; }
.msection.is-open .mpanel{ display:block; }
.mgroup{
  margin:14px 0 6px; font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:600; opacity:.55;
}
.mlist{ list-style:none; margin:0; padding:0; }
.mlist a{
  display:block; padding:9px 0; font-size:14px; line-height:1.35;
  color:var(--ink,#14201c); text-decoration:none; border-bottom:1px solid rgba(0,0,0,.06);
}
.mlist li:last-child a{ border-bottom:0; }
.mrule{ height:1px; background:var(--rule,#d8d3c9); margin:14px 0 4px; }

.mcta{ display:flex; flex-direction:column; gap:10px; padding:20px var(--gut,24px) 4px; }
.mbtn{
  display:block; text-align:center; padding:15px 18px; text-decoration:none;
  font-size:11px; letter-spacing:.13em; text-transform:uppercase; font-weight:500;
}
.mbtn-solid{ background:var(--brand,#7b1d26); color:#fff; }
.mbtn-line{ border:1px solid var(--ink,#14201c); color:var(--ink,#14201c); }

/* --- language switcher --- */
.lang-select{ position:relative; display:flex; align-items:center; }
.lang-toggle{
  display:none; align-items:center; gap:6px; background:none; border:0; cursor:pointer;
  color:inherit; font:inherit; letter-spacing:.12em; text-transform:uppercase;
  font-size:10px; font-weight:500; padding:4px 2px;
}
.lang-chev{ width:9px; height:9px; opacity:.7; transition:transform .2s ease; }
.lang-select.is-open .lang-chev{ transform:rotate(180deg); }
.lang-panel{ display:flex; align-items:center; gap:14px; }

@media (max-width:900px){
  .lang-toggle{ display:inline-flex; }
  .lang-panel{
    display:none; position:absolute; top:calc(100% + 6px); right:0;
    flex-direction:column; align-items:stretch; gap:0;
    min-width:172px; padding:6px 0; z-index:80;
    background:var(--paper,#f4f2ee); color:var(--ink,#14201c);
    border:1px solid var(--rule,#d8d3c9); box-shadow:0 16px 38px rgba(0,0,0,.22);
  }
  .lang-select.is-open .lang-panel{ display:flex; }
  .lang-panel .lang{
    display:block; padding:11px 16px; opacity:1; font-size:13px;
    color:var(--ink,#14201c); text-decoration:none;
  }
  .lang-panel .lang[aria-current="true"]{ font-weight:600; background:rgba(0,0,0,.05); }
  .lang-panel .util-sep{ display:none; }
}

/* RTL: the panel hangs off the other edge. */
[dir="rtl"] .lang-panel{ right:auto; left:0; }
[dir="rtl"] .mtoggle, [dir="rtl"] .mlink{ text-align:right; }

/* ============================================================
   MOBILE SIZING — phone only, desktop untouched
   Two things Eden caught on a phone. (1) `.bg-body` sets
   `padding:72px 0 8px`, which overrides `.shell`'s `0 var(--gut)`;
   on desktop the shell's max-width hides that, but on a phone the
   shell fills the viewport and every heading and paragraph sits
   flush against the glass. (2) The masthead is built around a 64px
   logo, so utility + header ate 148px of a 844px screen before a
   word of content. Selectors are doubled (.shell.bg-body) so they
   win over the per-page inline CSS regardless of load order.
   ============================================================ */
@media (max-width:900px){
  .shell.bg-body{
    padding-left:var(--gut);
    padding-right:var(--gut);
  }
}

@media (max-width:640px){
  :root{ --head-h:64px; }
  .masthead .brandmark-img{ height:44px; }
  .masthead .shell{ gap:12px; }
  /* Eden: "make the buttons a bit smaller FOR MOBILE ONLY". The green
     CTA stays on the page — it is the only one left below 1024px. */
  .cta-work{ padding:11px 12px; font-size:9px; letter-spacing:.05em; }
  .burger{ width:24px; height:16px; }
  .burger span:nth-child(2){ top:7px; }
  .burger span:nth-child(3){ top:14px; }
  .burger.is-on span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .burger.is-on span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .utility{ font-size:9px; }
  /* The drawer sits under a shorter header now. */
  .mnav{ top:calc(var(--util-h,40px) + var(--head-h,64px));
         max-height:calc(100vh - var(--util-h,40px) - var(--head-h,64px)); }
  .mnav-scrim{ top:calc(var(--util-h,40px) + var(--head-h,64px)); }
  .mtoggle, .mlink{ padding:15px var(--gut); font-size:12px; }
}