/* ══════════════════════════════════════════════════════════════
   SIMPLE STUDIO — "BRIGHT" POC  ·  token-swap overlay
   Loads AFTER styles.css. Overrides tokens only; zero layout change.
   Warm daylight, not cold white — the brand stays espresso-warm.
   ══════════════════════════════════════════════════════════════ */
:root, body {
  --porcelain: #FBF8F4;   /* page bg — warm off-white */
  --linen:     #F4EEE6;   /* alternating sections */
  --sand:      #EAE0D2;   /* bands, hairlines */
  --ink:       #241813;   /* headings — warm near-black from espresso */
  --ink-soft:  #574840;   /* body copy (7.4:1 on porcelain) */
  --clay-d:    #6F5940;   /* muted / eyebrow — AA on all three grounds */
  --salmon-d:  #9E4A34;   /* accent TEXT — AA on all three grounds */

  /* --- remap the existing brand tokens --- */
  --espresso: var(--porcelain);
  --dark:     var(--linen);
  --mahogany: var(--sand);
  --stone:    var(--ink);
  --white:    var(--ink);
  --clay:     var(--clay-d);
  --warm:     var(--ink-soft);
  /* --salmon stays #e8a99a — used as a FILL with dark text on it */
}

body { background: var(--porcelain); color: var(--ink-soft); }

/* ── HERO — light scrim so the photo reads as daylight ─────────── */
.hero-bg { filter: brightness(1.18) contrast(0.94) saturate(1.04); }
.hero-overlay {
  background:
    linear-gradient(to bottom, rgba(251,248,244,0.42) 0%, rgba(251,248,244,0.08) 42%,
                               rgba(251,248,244,0.20) 66%, rgba(251,248,244,0.92) 100%),
    linear-gradient(to right,  rgba(251,248,244,0.90) 0%, rgba(251,248,244,0.55) 38%,
                               rgba(251,248,244,0.05) 72%);
}
body.en .hero-overlay {
  background:
    linear-gradient(to bottom, rgba(251,248,244,0.42) 0%, rgba(251,248,244,0.08) 42%,
                               rgba(251,248,244,0.20) 66%, rgba(251,248,244,0.92) 100%),
    linear-gradient(to left,   rgba(251,248,244,0.90) 0%, rgba(251,248,244,0.55) 38%,
                               rgba(251,248,244,0.05) 72%);
}
.hero-title, .hero-title span { color: var(--ink); }
.hero-title em { color: var(--salmon-d); }
.hero-title .keyword-line { color: var(--clay-d); }
.hero-sub { color: var(--ink-soft); }
.hero-content .eyebrow { color: var(--salmon-d); }
.hero-vertical, .hero-scroll, .hero-scroll span { color: var(--clay-d); }
.scroll-line { background: var(--clay-d); }

/* CTA — salmon fill, dark ink label (AA on the fill) */
.hero-cta { background: var(--salmon); color: #2A1410; border-color: transparent; }
.hero-cta:hover { background: var(--ink); color: var(--porcelain); }

/* ── NAV ───────────────────────────────────────────────────────── */
nav { background: transparent; }
nav.scrolled {
  background: rgba(251,248,244,0.92);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--sand);
}
nav a, .nav-logo, .nav-logo span { color: var(--ink); }
.logo-pipe { color: var(--salmon-d); }
.side-nav a { color: var(--clay-d); }
.side-nav a:hover, .side-nav a.active { color: var(--salmon-d); }

/* ── SECTIONS ──────────────────────────────────────────────────── */
#about    { background: var(--linen); }
#values   { background: var(--sand); }
#projects { background: var(--porcelain); }
#onthenews, #instagram, #testimonials, #faq { background: var(--linen); }
#contact  { background: var(--porcelain); }
footer    { background: var(--linen); border-top: 1px solid var(--sand); }

/* text that was hard-coded light-on-dark */
.about-body, .value-body, .press-text .about-body { color: var(--ink-soft) !important; }
.section-title, .section-title em, h1, h2, h3 { color: var(--ink); }
.eyebrow { color: var(--salmon-d); }

/* the giant PHILOSOPHY watermark — was 4% white, now 4% ink */
#values::before { color: rgba(36,24,19,0.05); }

/* value cards on the sand band */
.values-grid { background: rgba(36,24,19,0.10); }
.value-card  { background: var(--linen); }
.value-card:hover { background: var(--porcelain); border-color: var(--salmon-d); }

/* ── CONTROLS / MISC ───────────────────────────────────────────── */
.slider-arrow { background: rgba(251,248,244,0.85); color: var(--ink); border: 1px solid var(--sand); }
.slider-arrow:hover { background: var(--ink); color: var(--porcelain); }
.slider-counter, .slider-dots button { color: var(--clay-d); }
::-webkit-scrollbar-track { background: var(--linen); }
::-webkit-scrollbar-thumb { background: var(--clay-d); }
hr, .divider { border-color: var(--sand); }
a { color: inherit; }

/* ══════════════════════════════════════════════════════════════
   FIX PASS 2 — hardcoded rgba(245,242,237,x) light text.
   These are literal values in styles.css, so the token swap
   cannot reach them. Each one was invisible on a light ground.
   ══════════════════════════════════════════════════════════════ */
:root, body { --char: #2B2926; }   /* near-neutral charcoal — the "black stool"
                                      punctuation from the reference interior */

/* nav + language toggle — the two the user saw vanish */
.nav-links a       { color: var(--ink-soft); }
.nav-links a:hover,
.nav-links a.active{ color: var(--salmon-d); }
.lang-btn          { color: var(--ink); border-color: var(--sand); }
.lang-btn:hover,
.lang-btn.active   { color: var(--porcelain); background: var(--char); border-color: var(--char); }
.side-label        { color: rgba(36,24,19,0.18); }

/* footer */
.footer-links a    { color: var(--ink-soft); }
.footer-links a:hover { color: var(--salmon-d); }
.footer-copy       { color: var(--clay-d); }
.footer-seo        { color: rgba(36,24,19,0.16); }
.footer-logo span  { color: var(--ink); }

/* instagram */
.ig-caption p      { color: var(--porcelain); }        /* sits on a photo overlay — stays light */
.ig-fallback       { color: var(--clay-d); }

/* generic safety net: any remaining literal light text on a light ground */
.hero-sub, .about-body, .value-body { color: var(--ink-soft) !important; }

/* crisp dark punctuation, matching the reference's black hardware */
.slider-arrow:hover,
.hero-cta:hover        { background: var(--char); color: var(--porcelain); }
.value-card            { border-top-color: transparent; }
.value-card:hover      { border-top-color: var(--char); }

/* ══════════════════════════════════════════════════════════════
   FIX PASS 3 — hero legibility on ALREADY-bright photography.
   The project shots are light; brightening them blows out the
   headline. Drop the filter, anchor a real scrim behind the text.
   ══════════════════════════════════════════════════════════════ */
.hero-bg { filter: none; }

/* scrim anchored to the text corner (bottom-inline-start in RTL) */
.hero-overlay {
  background:
    radial-gradient(120% 90% at 88% 88%, rgba(251,248,244,0.94) 0%,
                    rgba(251,248,244,0.72) 32%, rgba(251,248,244,0.0) 68%),
    linear-gradient(to bottom, rgba(251,248,244,0.30) 0%, rgba(251,248,244,0.0) 38%,
                               rgba(251,248,244,0.55) 78%, rgba(251,248,244,0.96) 100%);
}
body.en .hero-overlay {
  background:
    radial-gradient(120% 90% at 12% 88%, rgba(251,248,244,0.94) 0%,
                    rgba(251,248,244,0.72) 32%, rgba(251,248,244,0.0) 68%),
    linear-gradient(to bottom, rgba(251,248,244,0.30) 0%, rgba(251,248,244,0.0) 38%,
                               rgba(251,248,244,0.55) 78%, rgba(251,248,244,0.96) 100%);
}
/* headline gets a whisper of lift so it never floats on bare white */
.hero-title { text-shadow: 0 1px 22px rgba(251,248,244,0.85); }

/* side nav + hero vertical were too faint on porcelain */
.side-nav a      { color: var(--ink-soft); opacity: 0.72; }
.side-nav a:hover,
.side-nav a.active { color: var(--salmon-d); opacity: 1; }
.hero-vertical   { color: var(--clay-d); opacity: 0.9; }
.side-label      { color: rgba(36,24,19,0.22); }

/* cookie-consent bar (Codex's new component) — light-theme it */
#cookie-consent, .cookie-consent, .cc-banner {
  background: rgba(251,248,244,0.97) !important;
  color: var(--ink) !important;
  border-top: 1px solid var(--sand) !important;
  backdrop-filter: blur(10px);
}
#cookie-consent a, .cookie-consent a { color: var(--salmon-d) !important; }

/* ── Cookie consent banner (Codex, Phase A) — light-theme it ───── */
#ssCookieBanner {
  background: rgba(251,248,244,0.97) !important;
  color: var(--ink) !important;
  border-top: 1px solid var(--sand) !important;
  box-shadow: 0 -8px 30px rgba(36,24,19,0.07);
  backdrop-filter: blur(10px);
}
#ssCookieBanner .ss-cookie-text    { color: var(--ink-soft) !important; }
#ssCookieBanner .ss-cookie-text a  { color: var(--salmon-d) !important; }
#ssCookieBanner .ss-cookie-btn.primary {
  background: var(--salmon) !important; color: #2A1410 !important; border-color: transparent !important;
}
#ssCookieBanner .ss-cookie-btn.primary:hover { background: var(--char) !important; color: var(--porcelain) !important; }
#ssCookieBanner .ss-cookie-btn.ghost {
  background: transparent !important; color: var(--ink) !important; border: 1px solid var(--clay-d) !important;
}
#ssCookieBanner .ss-cookie-btn.ghost:hover { background: var(--sand) !important; }

/* ── FIX PASS 4 — the one true dark-on-dark ────────────────────────
   styles.css: .submit-btn { background: var(--ink); color: var(--stone) }
   --stone does double duty (light contact bg AND "light ink on dark").
   Remapping it to dark ink made this button dark-text-on-dark-fill.
   All 26 other var(--stone) uses are headings that correctly flipped. */
.submit-btn {
  background: var(--char) !important;
  color: var(--porcelain) !important;
}
.submit-btn:hover { background: var(--salmon-d) !important; color: var(--porcelain) !important; }

/* testimonial attributions were too faint */
.t-author, .testimonial-author, blockquote cite, blockquote footer { color: var(--clay-d) !important; }

/* accent line: the colour sits on <em>, but the text node lives in the
   inner <span>, whose own rule wins at equal specificity — target both */
.hero-title em, .hero-title em span { color: var(--salmon-d); }

/* ══════════════════════════════════════════════════════════════
   CONTACT FORM — readability + affordance
   Problem: fields were transparent with only a 1px bottom border in
   --sand on a near-white ground, and Hebrew labels were set in the
   LATIN font at 0.58rem uppercase with 0.25em tracking. The result
   did not read as a form at all, and the line length ran the full
   half-grid. Fix: comfortable measure, real field boxes, legible
   labels, 48px touch targets (traffic is mobile-led).
   ══════════════════════════════════════════════════════════════ */
.contact-form { max-width: 480px; gap: 18px; }

.field-wrap label {
  font-family: var(--sans);      /* was --latin: Hebrew fell back badly */
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.02em;        /* was 0.25em */
  text-transform: none;          /* uppercase does nothing for Hebrew */
  color: var(--ink);
  margin-bottom: 6px;
}
body.en .field-wrap label { font-family: var(--latin); letter-spacing: 0.06em; }

.field-wrap input,
.field-wrap textarea {
  background: #FFFFFF;
  border: 1px solid var(--sand);
  border-radius: 4px;
  padding: 13px 14px;
  min-height: 48px;              /* touch target */
  font-size: 0.95rem;
  color: var(--ink);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.field-wrap textarea { min-height: 116px; line-height: 1.6; }

.field-wrap input::placeholder,
.field-wrap textarea::placeholder { color: #7E7165; opacity: 1; }   /* AA: 4.73:1 on white */

.field-wrap input:hover,
.field-wrap textarea:hover { border-color: var(--clay-d); }

.field-wrap input:focus,
.field-wrap textarea:focus {
  border-color: var(--salmon-d);
  box-shadow: 0 0 0 3px rgba(158,74,52,0.14);   /* visible focus ring (AA) */
  outline: none;
}

/* required marker */
.field-wrap input:required + .req,
.field-wrap label .req { color: var(--salmon-d); }

/* Chrome autofill: keep our palette instead of the blue wash */
.field-wrap input:-webkit-autofill,
.field-wrap input:-webkit-autofill:hover,
.field-wrap input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 40px #FFFFFF inset;
  caret-color: var(--ink);
}

.submit-btn { min-height: 50px; padding: 15px 34px; font-size: 0.72rem; }

/* stack the two-up row on narrow screens */
@media (max-width: 620px) {
  .form-row { grid-template-columns: 1fr; }
  .contact-form { max-width: 100%; }
}

/* ══════════════════════════════════════════════════════════════
   GROK UI AUDIT — P0 / P2 fixes.  EN-scoped; Hebrew untouched.
   ══════════════════════════════════════════════════════════════ */

/* ── P0a (mandatory, both languages): .inquire-btn was white-on-salmon.
   Measured 1.99:1 — an AA failure. Dark ink on the same fill = 8.77:1. */
.inquire-btn { background: var(--salmon); color: #2A1410; border-color: transparent; }
.inquire-btn:hover { background: var(--char); color: var(--porcelain); }

/* ── P0b (EN only): nav links sit on the hero photo's mid-tones.
   Measured worst case 2.53:1 against #574840. A 70% porcelain scrim
   behind the nav band lifts it to 4.95:1 worst-frame (measured across the full
   Ken Burns zoom; 5.68 at scale 1.00, 4.95 at 1.08) — clears AA
   and, unlike simply darkening the text, still holds if the hero photo
   is ever replaced with a darker one. HE keeps the clean transparent nav. */
body.en nav::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
              rgba(251,248,244,0.70) 0%,
              rgba(251,248,244,0.55) 60%,
              rgba(251,248,244,0.0) 100%);
  pointer-events: none;
  z-index: -1;
  transition: opacity .3s;
}
body.en nav { position: fixed; isolation: isolate; }
body.en nav.scrolled::before { opacity: 0; }   /* solid bar takes over on scroll */

/* ── P2 (EN only): footer city links overflow past the viewport ≥1024px.
   Pre-existing (a control build without bright.css is byte-identical):
   the flex row plus longer Latin labels cannot fit. Allow wrapping and
   tighten the gap. RTL Hebrew layout is untouched. */
body.en .footer-links {
  flex-wrap: wrap;
  gap: 10px 18px;
  max-width: 100%;
}
body.en .footer-links li { flex: 0 0 auto; }

/* ══════════════════════════════════════════════════════════════════
   SUB-PAGE ROLLOUT — 2026-09-14
   ══════════════════════════════════════════════════════════════════
   Everything above was written for the homepage. The ten city and
   service pages, the journal and /questionnaire/ render `lp-` and
   `post-` components the homepage never uses, and those hit three
   tokens the override above deliberately leaves alone. Harmless on
   the homepage. Not harmless here.
   ────────────────────────────────────────────────────────────────── */

/* ── 1.1  --sand is REDEFINED, not remapped.
   styles.css treats it as #e8e2d8, a near-white TEXT colour. Here it
   becomes #EAE0D2, a light BAND. Three rules still use it as text,
   which lands at 1.23:1 on porcelain — invisible, not merely low.
   Fixed at the rule rather than the token: the band role is correct. */
.lp-lead              { color: var(--ink-soft); }   /* 8.24:1 — lead para, all 10 landing pages */
.post-body blockquote { color: var(--ink); }        /* 16.32:1 — pull-quote takes heading weight */

/* ── 1.2  --salmon #e8a99a stays a FILL (see the note at the top of
   this file) but is used as TEXT or a BORDER by a dozen rules the
   homepage never renders. It measures 1.88:1 on porcelain.
   Use --salmon-d #9E4A34, which this file already defines as
   "accent TEXT — AA on all three grounds": 5.69 porcelain,
   5.23 linen, 4.62 sand. That 4.62 is the project's documented
   worst pair.
   Deliberately NOT #bf7259 from styles.css:1449 — that value was
   vetted against body.consult's grounds and only reaches
   3.44 / 3.16 / 2.79 here: it fails AA as text, and fails even the
   3:1 non-text bar on the sand band. */
.post-body a,
.post-crumbs a:hover,
.lp-back:hover,
.post-chip                { color: var(--salmon-d); }
.post-body ul li::marker,
.post-body ol li::marker  { color: var(--salmon-d); }
.lp-step::before          { color: var(--salmon-d); border-color: var(--salmon-d); }
.post-body blockquote     { border-inline-start-color: var(--salmon-d); }
.lp-price                 { border-color: var(--salmon-d); }
.post-chip                { border-color: rgba(158,74,52,0.45); }
.lp-card:hover,
.post-card:hover          { border-color: var(--salmon-d); }
.lp-cta-row a.ghost:hover { color: var(--salmon-d); border-color: var(--salmon-d); }

/* ── 1.3  --ember #523429 is never remapped above. Five consumers
   down here, one a real failure: .post-body th paints --ember behind
   --stone, and --stone flips to #241813 — dark on dark, 1.55:1. */
.post-card-img         { background: var(--sand); }   /* was a dark flash behind every thumbnail */
.post-card-img-empty   { background: linear-gradient(135deg, var(--sand), var(--linen)); }
.post-body th          { background: var(--sand); color: var(--ink); }  /* 13.24:1 */
.lp-card               { border-color: var(--sand); }
.lp-terms              { border-inline-start-color: var(--sand); }

/* ── 1.4  The sub-page hero.
   styles.css:1271 hardcodes a near-black scrim:
     linear-gradient(180deg, rgba(21,10,8,0.55), rgba(21,10,8,0.82))
   There is no token in it, so the override above cannot reach it. The
   result on a bright page is an 82 percent opaque black wedge above a
   porcelain page, with .lp-hero h1 flipping to #241813 inside it —
   dark ink on a dark scrim.

   The homepage fix anchors a radial scrim at the text corner, but
   .lp-hero is align-items:flex-end with a full-width content block,
   so the text sits along the BOTTOM edge rather than in a corner.
   A bottom-weighted porcelain scrim is the correct analogue.
   The small wash at the top keeps the fixed nav legible. */
.lp-hero .hero-overlay {
  background: linear-gradient(to bottom,
    rgba(251,248,244,0.22) 0%,
    rgba(251,248,244,0.00) 26%,
    rgba(251,248,244,0.70) 62%,
    rgba(251,248,244,0.97) 100%);
}
.lp-hero h1     { text-shadow: 0 1px 22px rgba(251,248,244,0.85); }

/* The eyebrow is 0.6rem, so it needs the full 4.5:1, not the 3:1
   large-text allowance. Measured against the darkest photo pixels
   under it: --clay-d reaches only 3.99. --ink-soft reaches 5.27.
   Darkening the text beats thickening the scrim here — pushing the
   scrim to 0.84 would also clear AA but leaves the photograph only
   9 percent visible behind the headline. */
.lp-hero .eyebrow { color: var(--ink-soft); }

/* ── 1.5  .lp-card paints a hardcoded dark wash,
   styles.css:1309  background: rgba(42,20,16,0.35)
   which no token can reach. On porcelain it becomes a muddy brown
   panel, and the card's own h3 (--stone, now #241813) lands at
   1.01:1 against it — the worst figure anywhere in the sweep.
   Its paragraph reaches only 2.64:1.
   Give the card a real light surface instead. */
.lp-card {
  background: var(--linen);
  border-color: var(--sand);
}
.lp-card h3 { color: var(--ink); }
.lp-card p  { color: var(--ink-soft); }

/* ── 1.6  Salmon-as-text cases the homepage override never patched.
   These are live today on the bright homepage at 1.72:1 — they
   predate the sub-page rollout and are fixed here with the same
   token used for every other accent text. */
.value-num,
.press-pub,
.faq-arrow,
.mobile-menu a:hover { color: var(--salmon-d); }
.about-badge .num    { color: var(--ink); }          /* was porcelain on salmon, 1.75:1 */
.testi-card          { border-top-color: var(--salmon-d); }

/* ── 1.7  /questionnaire/ error state. The page's inline block sets
   #e8998a, tuned for the espresso ground; on porcelain it fails.
   The rest of that block is fixed in the page itself by switching
   --sand to --stone, which flips correctly in both themes. */
.q-status.err { color: #9E4A34; }

/* ── 1.8  Final salmon-as-text stragglers found by the full sweep.
   .testi-name is live on the bright homepage today at 2.03:1.
   The questionnaire's step numbers and privacy link needed a class
   first — they were inline styles, which no stylesheet can override. */
.testi-name        { color: var(--salmon-d); }
/* The questionnaire's own block now asks for
   var(--salmon-d, var(--salmon)), so it needs nothing here. */