/* ============================================================================
   starter.css — MECHANICS-ONLY FLOOR (copy this to the TOP of the site's single
   styles.css, then design THIS client's identity below it).

   This file sets ONLY the invisible "won't-fall-down" layer: a spacing rhythm,
   a type-size ladder, a reset, keyboard focus, responsive plumbing, and the
   contrast PATTERN the analyzer cares about.

   It deliberately defines NO palette, NO typefaces, NO section layout, and NO
   decorative shapes. ALL of that is yours to invent per brand — asymmetric
   mastheads, sawtooth rooflines, angled bands, oversized type, motifs, dark
   dramatic heroes: every structural and decorative choice is still wide open.
   Replace and extend freely. The only rule: keep this floor intact.
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-size: 1.0625rem; line-height: 1.6; }
/* ^ set body font-family and color in YOUR styles below, per brand. */
img, svg, video { max-width: 100%; height: auto; }

/* --- spacing rhythm on a 4px base. Use these (or your own 0.25rem-step values)
       so margins/padding line up instead of drifting. The analyzer counts LITERAL
       lengths, so literal 0.25rem multiples keep the spacing-scale check clean. --- */
:root {
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;    --space-7: 3rem;     --space-8: 4.5rem;
  --measure: 38rem;        /* comfortable max line length for body text */
  --section-pad: 4.5rem;   /* vertical breathing room per section */
}

/* --- type-size ladder: SIZES + line-heights only (choose your own typefaces).
       A small, consistent ladder = clean hierarchy. Adjust the steps to taste;
       keep them few and distinct (avoid 9+ sizes or near-duplicate pairs). Set
       sizes in literal rem so the analyzer can read the scale. --- */
h1 { font-size: 2.5rem;   line-height: 1.08; margin: 0 0 1rem; }
h2 { font-size: 1.75rem;  line-height: 1.15; margin: 0 0 0.75rem; }
h3 { font-size: 1.375rem; line-height: 1.25; margin: 0 0 0.5rem; }
p  { margin: 0 0 1rem; max-width: var(--measure); }
@media (min-width: 1000px) { h1 { font-size: 3rem; } }

/* --- keyboard focus on every interactive control (recolor to one of YOUR accents) --- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid currentColor; outline-offset: 2px;
}
a { text-underline-offset: 3px; }

/* --- fixed-header safe area: if the design uses a position:fixed/sticky header,
       in-page #anchors AND any full-bleed hero must clear it. Reference
       var(--header-safe) as a hero's padding-top so tall hero content can never
       tuck UNDER the header (don't rely on bottom-alignment / flex-end alone —
       at short viewports tall content rises under the header). scroll-padding-top
       keeps anchored sections from hiding beneath the header. Tune the value to
       your actual header height. --- */
:root { --header-safe: clamp(5rem, 9vh, 7rem); }
html { scroll-padding-top: var(--header-safe); }

/* --- line-height floor: never let text clip or rows collide. Anything that can
       wrap or carries a styled subline (brand lockups, stacked headings) needs
       line-height >= ~1.0, and small print >= ~1.25. Reserve ultra-tight leading
       (< 1.0) for SINGLE-LINE display headings only, paired with white-space:nowrap
       so they can't wrap into themselves. --- */

/* --- THE CONTRAST PATTERN (the #1 thing the analyzer flags) ---
   It checks contrast PER CSS RULE with no cascade. So on ANY rule that places
   light text on a dark surface, RESTATE the dark background-color in that SAME
   rule. Pick your own colors — just co-declare them together, e.g.:
       .yourDarkBand h2 { color: #ffffff; background-color: #14202b; }
       .yourFooter a    { color: #e8c39a; background-color: #14202b; }
   (No active color rules live here on purpose — the palette is entirely yours.) */

/* --- responsive plumbing: keep at least one @media and collapse multi-column
       layouts to one column on small screens. Also put <meta name="viewport"
       content="width=device-width, initial-scale=1"> in every page's <head>. --- */
@media (max-width: 720px) {
  :root { --section-pad: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ============================================================================
   END OF FLOOR. Everything below this line is yours: tokens for your palette,
   @font-face / font-family choices, section and hero layouts, decorative shapes
   and motifs, components. Go make it unmistakably THIS business.
   ============================================================================ */

/* ============================================================================
   TASTE 154 — bespoke identity (espresso · cream · ink-cobalt · honey amber)
   Display: Bricolage Grotesque | Body: Hanken Grotesk
   ============================================================================ */
:root{
  --cream:#F5E5CC;        /* page canvas (matches signature illustration) */
  --paper:#FBF1DF;        /* lifted cards */
  --espresso:#2B2018;     /* near-black brown: dark bands + body ink */
  --cocoa:#5B4636;        /* secondary brown */
  --cobalt:#1E4D86;       /* signature accent (from their latte cup) */
  --cobalt-deep:#163C6B;  /* accent hover */
  --amber:#C07A1E;        /* decorative warmth (non-text: strokes, dots) */
  --amber-ink:#8A4E12;    /* amber for small text on cream/paper (AA) */
  --amber-light:#E8B25A;  /* amber for text on dark espresso (AA) */
  --line:#E2CDA8;         /* hairlines on cream */
  --ink:#2B2018;

  --display:"Bricolage Grotesque",Georgia,serif;
  --body:"Hanken Grotesk",system-ui,sans-serif;
  --shell:1180px;
  --header-h:5.25rem;
  --header-safe:clamp(7rem,16vh,9.5rem);
}

body{ font-family:var(--body); color:var(--ink); background-color:var(--cream); }
h1,h2,h3,h4{ font-family:var(--display); color:var(--espresso); letter-spacing:-.01em; }
strong,b{ font-weight:700; }
a{ color:var(--cobalt); }
a:hover{ color:var(--cobalt-deep); }

/* layout shell */
.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:clamp(1.25rem,5vw,3rem); }
.section{ padding-block:clamp(3.25rem,8vw,6rem); }
.tight{ padding-block:clamp(2rem,5vw,3.25rem); }
img{ display:block; }

/* eyebrow + wave motif */
.eyebrow{ font-size:.8rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--amber-ink); margin:0 0 var(--space-3); display:flex; align-items:center; gap:var(--space-3); }
.wave{ width:58px; height:14px; flex:0 0 auto; }
.wave path{ fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; }
.lead{ font-size:1.1875rem; line-height:1.6; color:var(--cocoa); max-width:42rem; }

/* ---------- header ---------- */
.topbar{ position:sticky; top:0; z-index:50; background-color:var(--paper);
  border-bottom:1px solid var(--line); }
.barshell{ display:flex; align-items:center; gap:var(--space-4);
  min-height:var(--header-h); padding-block:var(--space-3); }
.brand{ display:inline-flex; align-items:center; flex:0 0 auto; min-width:0; }
.brandmark{ height:2.25rem; width:auto; }
.mainnav{ display:flex; flex-wrap:wrap; gap:clamp(.35rem,.9vw,.9rem); margin-inline:auto; }
.mainnav a{ font-size:.9375rem; font-weight:600; letter-spacing:.01em; color:var(--espresso);
  text-decoration:none; padding:var(--space-2) var(--space-1); border-bottom:2px solid transparent; }
.mainnav a:hover{ color:var(--cobalt); border-bottom-color:var(--amber); }
.headcta{ display:flex; align-items:center; gap:var(--space-2); flex:0 0 auto; }
.headcta .btn{ padding:var(--space-2) var(--space-4); }
.tel{ font-weight:700; color:var(--espresso); text-decoration:none; white-space:nowrap; }
.tel:hover{ color:var(--cobalt); }
.navtoggle{ display:none; }

/* ---------- buttons ---------- */
.btn{ display:inline-block; font-family:var(--body); font-weight:700; font-size:.9375rem;
  letter-spacing:.01em; padding:var(--space-3) var(--space-5); border-radius:999px;
  border:2px solid transparent; cursor:pointer; text-decoration:none; transition:transform .15s ease; }
.btn:hover{ transform:translateY(-2px); }
.btn-solid{ background-color:var(--espresso); color:var(--cream); }
.btn-solid:hover{ background-color:var(--cobalt); color:var(--cream); }
.btn-ghost{ background-color:var(--paper); color:var(--cobalt); border-color:var(--cobalt); }
.btn-ghost:hover{ background-color:var(--cobalt); color:var(--cream); border-color:var(--cobalt); }
.btn-lg{ font-size:1.0625rem; padding:var(--space-4) var(--space-6); }

/* ---------- masthead (home) ---------- */
.masthead{ background-color:var(--cream); }
.mastgrid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.5rem,4vw,3.5rem);
  align-items:center; }
.kicker{ display:inline-flex; align-items:center; gap:var(--space-3); font-weight:700;
  font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; color:var(--amber-ink);
  margin-bottom:var(--space-4); }
.bigtitle{ font-size:clamp(2.9rem,7vw,5.25rem); line-height:.98; margin:0 0 var(--space-5);
  color:var(--espresso); }
.bigtitle em{ font-style:normal; color:var(--cobalt); }
.mastactions{ display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-6); }
.mastfig{ position:relative; }
.mastfig img{ width:100%; height:clamp(20rem,52vh,33rem); object-fit:cover;
  border-radius:14px 14px 64px 14px; box-shadow:0 24px 48px -28px rgba(43,32,24,.55); }
.mastbadge{ position:absolute; left:-12px; bottom:24px; background-color:var(--cobalt);
  color:var(--cream); font-weight:700; font-size:.9375rem; padding:var(--space-3) var(--space-4);
  border-radius:10px; box-shadow:0 12px 24px -14px rgba(22,60,107,.7); }

/* facts ribbon */
.ribbon{ background-color:var(--espresso); }
.ribbon .shell{ display:flex; flex-wrap:wrap; gap:var(--space-4) clamp(1.5rem,5vw,4rem);
  align-items:center; justify-content:space-between; padding-block:var(--space-5); }
.ribbon p{ margin:0; max-width:none; color:var(--cream); background-color:var(--espresso);
  font-weight:600; display:flex; align-items:center; gap:var(--space-3); }
.ribbon b{ color:var(--cream); background-color:var(--espresso); }
.ribbon .star{ color:var(--amber-light); background-color:var(--espresso); font-weight:700; }

/* ---------- section heads ---------- */
.head{ max-width:46rem; margin-bottom:clamp(1.75rem,4vw,2.75rem); }
.head h2{ font-size:clamp(1.9rem,4.2vw,2.9rem); line-height:1.05; margin:0 0 var(--space-3); }

/* ---------- signature band (illustration) ---------- */
.spread{ background-color:#F5E5CC; border-block:1px solid var(--line); }
.spread .shell{ display:grid; grid-template-columns:1fr 1.25fr; gap:clamp(1.5rem,4vw,3rem);
  align-items:center; }
.spread img{ width:100%; height:auto; }
.spread h2{ font-size:clamp(1.8rem,4vw,2.7rem); line-height:1.06; }

/* ---------- menu teasers (offset grid, unclassed children) ---------- */
.teasers{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:var(--space-5); }
.teasers > a{ display:block; text-decoration:none; color:var(--espresso);
  background-color:var(--paper); border:1px solid var(--line); border-radius:12px;
  padding:var(--space-6); transition:transform .15s ease, box-shadow .2s ease; }
.teasers > a:nth-child(even){ transform:translateY(18px); }
.teasers > a:hover{ box-shadow:0 18px 36px -24px rgba(43,32,24,.5); }
.teasers > a:nth-child(even):hover{ transform:translateY(12px); }
.teasers h3{ font-size:1.375rem; margin:0 0 var(--space-2); }
.teasers p{ margin:0; color:var(--cocoa); font-size:.9375rem; }
.teasers .more{ display:inline-block; margin-top:var(--space-4); font-weight:700;
  color:var(--cobalt); font-size:.9375rem; }
.teasers .motif{ width:84px; height:auto; margin-bottom:var(--space-3); border-radius:8px; }

/* ---------- dusk band (dark, photo) ---------- */
.dusk{ position:relative; background-color:var(--espresso); color:var(--cream); overflow:hidden; }
.dusk .shell{ position:relative; z-index:2; display:grid; grid-template-columns:1.1fr .9fr;
  gap:clamp(1.5rem,5vw,4rem); align-items:center; }
.dusk h2{ color:var(--cream); background-color:var(--espresso); font-size:clamp(1.9rem,4.2vw,2.9rem);
  line-height:1.05; }
.dusk p{ color:#F0DEC2; background-color:var(--espresso); }
.dusk .eyebrow{ color:var(--amber-light); background-color:var(--espresso); }
.dusk li{ color:var(--cream); background-color:var(--espresso); }
.dusk .checklist li{ color:var(--cream); background-color:var(--espresso); }
.duskfig img{ width:100%; height:clamp(16rem,42vh,26rem); object-fit:cover; border-radius:12px; }
.dusk .btn-ghost{ background-color:var(--espresso); color:var(--cream); border-color:var(--cream); }
.dusk .btn-ghost:hover{ background-color:var(--cream); color:var(--espresso); border-color:var(--cream); }

/* ---------- split feature (photo + text) ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3.25rem); align-items:center; }
.split.flip .splitfig{ order:2; }
.splitfig img{ width:100%; height:clamp(18rem,46vh,30rem); object-fit:cover; border-radius:12px;
  box-shadow:0 20px 40px -28px rgba(43,32,24,.5); }
.checklist{ list-style:none; padding:0; margin:var(--space-5) 0 0; display:grid; gap:var(--space-3); }
.checklist li{ position:relative; padding-left:1.9rem; color:var(--cocoa); max-width:34rem; }
.checklist li::before{ content:""; position:absolute; left:0; top:.55em; width:.7rem; height:.7rem;
  background-color:var(--amber); border-radius:50% 50% 50% 0; transform:rotate(-45deg); }

/* ---------- menu page ---------- */
.menuwrap{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(1.5rem,3.5vw,2.75rem); align-items:start; }
.card{ background-color:var(--paper); border:1px solid var(--line); border-radius:14px;
  padding:clamp(1.4rem,3vw,2rem); }
.card h2{ font-size:1.75rem; margin:0 0 var(--space-2); display:flex; align-items:baseline;
  justify-content:space-between; gap:var(--space-3); }
.card .sub{ font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--amber-ink);
  font-weight:700; }
.rows{ list-style:none; padding:0; margin:var(--space-4) 0 0; }
.rows li{ display:flex; gap:var(--space-3); align-items:baseline; padding:var(--space-3) 0;
  border-top:1px dashed var(--line); }
.rows li:first-child{ border-top:0; }
.rows .nm{ font-weight:700; color:var(--espresso); }
.rows .ds{ color:var(--cocoa); font-size:.9375rem; }
.rows .pr{ margin-left:auto; font-weight:700; color:var(--cobalt); white-space:nowrap;
  font-variant-numeric:tabular-nums; }
.rows .szrow{ margin-left:auto; color:var(--cocoa); font-size:.9375rem; white-space:nowrap;
  font-variant-numeric:tabular-nums; }
.menunote{ color:var(--cocoa); font-size:.9375rem; }
.span2{ grid-column:1 / -1; }

/* ---------- gallery ---------- */
.grid-gal{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--space-4); }
.grid-gal figure{ margin:0; border-radius:12px; overflow:hidden; background-color:var(--paper);
  border:1px solid var(--line); }
.grid-gal img{ width:100%; height:16rem; object-fit:cover; }
.grid-gal figcaption{ padding:var(--space-3) var(--space-4); font-size:.9375rem; color:var(--cocoa); }
.grid-gal figure:nth-child(3n+1) img{ height:21rem; }

/* ---------- reviews ---------- */
.statband{ background-color:var(--cobalt); color:var(--cream); text-align:center; }
.statband .shell{ display:flex; flex-wrap:wrap; gap:var(--space-5) clamp(2rem,7vw,5rem);
  justify-content:center; align-items:center; padding-block:clamp(2rem,5vw,3rem); }
.statband .num{ font-family:var(--display); font-size:clamp(2.4rem,5vw,3.4rem); line-height:1;
  color:var(--cream); background-color:var(--cobalt); }
.statband .lbl{ color:#DCE7F4; background-color:var(--cobalt); font-weight:600; font-size:.9375rem; }
.quotes{ columns:2 320px; column-gap:var(--space-5); }
.quotes blockquote{ break-inside:avoid; margin:0 0 var(--space-5); background-color:var(--paper);
  border:1px solid var(--line); border-left:4px solid var(--amber); border-radius:10px;
  padding:clamp(1.3rem,3vw,1.8rem); }
.quotes p{ margin:0 0 var(--space-3); color:var(--espresso); font-size:1.0625rem; }
.quotes .by{ font-weight:700; color:var(--cocoa); font-size:.9375rem; margin:0; }
.quotes .rate{ color:var(--amber-ink); font-weight:700; letter-spacing:.1em; margin:0 0 var(--space-2); }

/* ---------- careers ---------- */
.roles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--space-4); }
.roles > div{ background-color:var(--paper); border:1px solid var(--line); border-radius:12px;
  padding:var(--space-6); }
.roles h3{ font-size:1.375rem; margin:0 0 var(--space-2); }
.roles p{ margin:0; color:var(--cocoa); font-size:.9375rem; }

/* ---------- forms ---------- */
.formwrap{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(1.5rem,4vw,3rem); align-items:start; }
.demoform{ background-color:var(--paper); border:1px solid var(--line); border-radius:14px;
  padding:clamp(1.4rem,3vw,2.2rem); }
.field{ margin-bottom:var(--space-4); }
.field label{ display:block; font-weight:700; font-size:.9375rem; color:var(--espresso);
  margin-bottom:var(--space-2); }
.field input,.field textarea{ width:100%; font-family:var(--body); font-size:1.0625rem;
  color:var(--espresso); background-color:var(--cream); border:1px solid var(--cocoa);
  border-radius:8px; padding:var(--space-3) var(--space-4); }
.field textarea{ min-height:7.5rem; resize:vertical; }
.formnote{ font-size:.8rem; color:var(--amber-ink); margin-top:var(--space-3); font-weight:600; }
.info{ display:grid; gap:var(--space-4); }
.info .blk{ background-color:var(--paper); border:1px solid var(--line); border-radius:12px;
  padding:var(--space-5); }
.info h3{ font-size:1.1875rem; margin:0 0 var(--space-2); }
.info p,.info a{ margin:0; color:var(--cocoa); }
.mapembed{ width:100%; border:0; border-radius:12px; min-height:18rem; }

/* ---------- footer ---------- */
.foot{ background-color:var(--espresso); color:var(--cream); }
.foot .shell{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(1.5rem,4vw,3rem);
  padding-block:clamp(2.5rem,5vw,4rem); }
.foot h3{ font-family:var(--body); font-weight:700; text-transform:uppercase; letter-spacing:.16em;
  font-size:.8rem; color:var(--amber-light); background-color:var(--espresso); margin:0 0 var(--space-4); }
.foot p,.foot li,.foot address{ color:#EAD9BE; background-color:var(--espresso); font-style:normal;
  margin:0 0 var(--space-2); }
.foot a{ color:#EAD9BE; background-color:var(--espresso); text-decoration:none; }
.foot a:hover{ color:var(--amber-light); background-color:var(--espresso); }
.foot ul{ list-style:none; padding:0; margin:0; }
.footbrand img{ height:2.4rem; width:auto; margin-bottom:var(--space-4); }
.footcta{ display:flex; gap:var(--space-3); flex-wrap:wrap; margin-top:var(--space-4); }
.foot .btn-solid{ background-color:var(--cream); color:var(--espresso); }
.foot .btn-solid:hover{ background-color:var(--amber-light); color:var(--espresso); }
.foot .btn-ghost{ background-color:var(--espresso); color:var(--cream); border-color:#7a6450; }
.foot .btn-ghost:hover{ background-color:var(--cream); color:var(--espresso); border-color:var(--cream); }
.legal{ border-top:1px solid #43342a; }
.legal .shell{ display:flex; flex-wrap:wrap; gap:var(--space-3); justify-content:space-between;
  padding-block:var(--space-4); text-align:center; }
.legal p{ color:#C9B49A; background-color:var(--espresso); margin:0; font-size:.8rem; }

/* ---------- responsive ---------- */
@media (max-width:980px){
  .mastgrid,.spread .shell,.dusk .shell,.split,.formwrap{ grid-template-columns:1fr; }
  .split.flip .splitfig{ order:0; }
  .foot .shell{ grid-template-columns:1fr 1fr; }
  .quotes{ columns:1; }
  /* collapse the horizontal nav to a menu while the brand keeps a roomy row */
  .barshell{ flex-wrap:wrap; }
  .navtoggle{ display:inline-flex; align-items:center; gap:.5rem; margin-left:auto;
    background-color:var(--espresso); color:var(--cream); border:0; border-radius:8px;
    font-family:var(--body); font-weight:700; font-size:.9375rem; padding:var(--space-2) var(--space-4); cursor:pointer; }
  .mainnav{ display:none; flex-basis:100%; flex-direction:column; gap:0; margin:var(--space-3) 0 0; }
  .mainnav.open{ display:flex; }
  .mainnav a{ padding:var(--space-3) 0; border-bottom:1px solid var(--line); }
  .headcta{ flex-basis:100%; justify-content:flex-start; flex-wrap:wrap; margin-top:var(--space-2); }
}
@media (max-width:760px){
  :root{ --header-safe:clamp(5.5rem,12vh,7rem); }
  .teasers > a:nth-child(even){ transform:none; }
}
@media (max-width:560px){
  .foot .shell{ grid-template-columns:1fr; }
}