/* ═══════════════════════════════════════════════════════════════════════════════════════
   FRIENDS AND FAMILY SHOPPING CENTER — LUXURY / BLACK-CARD DESIGN SYSTEM
   Applied verbatim from modules/luxury-black-card-design.md.

   ONE THEME, AND IT HOLDS AGAINST THE DEVICE (PART 112).
   There is deliberately NOT ONE @media (prefers-color-scheme: ...) rule in this file. Every
   colour below is declared explicitly, body background included, so a device set to light
   and a device set to dark render byte-identical pages. There is no theme toggle. The ADA
   contrast / invert / larger-text controls in the widget rail are accessibility controls the
   visitor chooses for themselves and they stay.

   PALETTE DISCIPLINE. Base black, two charcoal surfaces, pearl text, ONE metallic accent.
   The gold is reserved for real calls to action and the thin rules; it never decorates.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

:root{
  color-scheme: dark;

  --bg:#0A0A0A;          /* base, true black            */
  --panel:#111111;       /* surface 1                    */
  --panel-2:#1A1A1A;     /* surface 2                    */
  --line:#262320;        /* hairline, warm charcoal      */
  --ink:#FAFAFA;         /* pearl, never pure #FFFFFF    */
  --ink-soft:#A69C90;    /* warm grey body               */
  --ink-dim:#7A7168;     /* quiet meta                   */
  --brand:#C4A052;       /* champagne gold, THE accent   */
  --brand-soft:#D8BC7C;
  --brand-dark:#8A6F33;
  --brand-ink:#0A0A0A;   /* ink ON gold                  */

  --f-head:"Playfair Display",Georgia,"Times New Roman",serif;
  --f-sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* ONE spacing scale, defined once, reused site-wide. */
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px; --s7:140px; --s8:180px;
  --wrap:1180px; --measure:62ch; --r:2px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --slow:900ms;
}

*,*::before,*::after{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background-color:var(--bg);
  color:var(--ink-soft);
  font:400 17px/1.75 var(--f-sans);
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

img{max-width:100%;height:auto;display:block}
iframe{max-width:100%;border:0}

/* ── TYPE ────────────────────────────────────────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--f-head);color:var(--ink);margin:0 0 .5em;text-wrap:balance;font-weight:500}
h1{font-size:clamp(2.6rem,6.4vw,5.2rem);line-height:1.04;letter-spacing:-.018em}
h2{font-size:clamp(1.9rem,3.6vw,3.1rem);line-height:1.12;letter-spacing:-.012em}
h3{font-size:clamp(1.12rem,1.5vw,1.3rem);line-height:1.25;letter-spacing:0}
h4{font-size:1.02rem;line-height:1.3}
p{margin:0 0 1.15em;max-width:var(--measure)}
ul,ol{max-width:var(--measure)}
a{color:var(--brand-soft);text-decoration-thickness:1px;text-underline-offset:4px}
a:hover{color:var(--brand)}
strong{color:var(--ink);font-weight:600}
.lede{font-size:clamp(1.06rem,1.7vw,1.32rem);line-height:1.68;color:var(--ink-soft);max-width:56ch}
.muted{color:var(--ink-dim)}

/* All-caps ONLY for labels and navigation, never body. Wide tracking on the small caps. */
.eyebrow{
  font-family:var(--f-sans);font-size:.72rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.22em;color:var(--brand);margin:0 0 var(--s3)
}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background-color:var(--brand);color:var(--brand-ink);
  /* The accessibility statement promises 44px targets, so the skip link must meet it too. */
  display:inline-flex;align-items:center;min-height:44px;padding:12px 20px;z-index:200;border-radius:var(--r)}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

/* ── HEADER ──────────────────────────────────────────────────────────────────────────── */
.site-head{
  background-color:rgba(10,10,10,.92);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:40;backdrop-filter:blur(10px)
}
.head-in{display:flex;align-items:center;gap:var(--s3);min-height:76px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink)}
.brand-logo{height:40px;width:auto;max-width:min(58vw,260px);border-radius:0;object-fit:contain;background-color:transparent}
/* A square emblem gets a box; a wide wordmark is sized by HEIGHT so it is never squashed. */
.brand:not(.brand-wordmark) .brand-logo{width:46px;height:46px;border-radius:var(--r);background-color:var(--panel-2)}
.brand-wordmark .brand-sub{margin-top:5px}
.brand-mark{
  display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r);
  background-color:transparent;border:1px solid var(--brand);color:var(--brand);
  font-family:var(--f-head);font-size:1rem;letter-spacing:.04em
}
.brand-text{display:flex;flex-direction:column;line-height:1.2}
.brand-name{font-family:var(--f-head);font-size:1.04rem;color:var(--ink)}
.brand-sub{font-size:.68rem;text-transform:uppercase;letter-spacing:.18em;color:var(--ink-dim);margin-top:3px}
.nav{margin-left:auto;display:flex;align-items:center;gap:var(--s3)}
.nav ul{display:flex;gap:2px;list-style:none;margin:0;padding:0;flex-wrap:wrap;max-width:none}
.nav a{
  display:flex;align-items:center;padding:10px 14px;min-height:44px;text-decoration:none;
  color:var(--ink-soft);font-size:.82rem;text-transform:uppercase;letter-spacing:.13em;
  transition:color var(--slow) var(--ease)
}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--brand)}
.nav-cta{
  display:inline-flex;align-items:center;min-height:44px;padding:11px 20px;
  border:1px solid var(--brand);color:var(--brand);text-decoration:none;border-radius:var(--r);
  font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;white-space:nowrap;
  transition:background-color var(--slow) var(--ease), color var(--slow) var(--ease)
}
.nav-cta:hover{background-color:var(--brand);color:var(--brand-ink)}
.nav-toggle{
  display:none;margin-left:auto;width:48px;height:48px;border:1px solid var(--line);
  /* An unset colour on a <button> is painted by the USER AGENT, and under color-scheme:dark
     that is pure white. Measured on the rendered page, not read from this file: the CSS had no
     #FFF here at all and the browser supplied one. Declare it, per PART 112 rule 3. */
  background-color:var(--panel);color:var(--ink);border-radius:var(--r);cursor:pointer
}
.bars,.bars::before,.bars::after{display:block;height:1px;width:22px;background-color:var(--ink);margin:0 auto;position:relative}
.bars::before{content:"";position:absolute;top:-7px;left:0}
.bars::after{content:"";position:absolute;top:7px;left:0}
@media (max-width:940px){
  .nav-toggle{display:block}
  .nav{flex-basis:100%;margin-left:0;display:none;flex-direction:column;align-items:flex-start;gap:var(--s2);order:9}
  .nav.open{display:flex}
  .nav ul{flex-direction:column;width:100%;padding-bottom:var(--s2)}
  .nav a{padding:12px 0}
  /* The phone CTA lives OUTSIDE the collapsible menu and stays visible at every width. */
  .nav-cta{margin-left:auto;padding:11px 16px;font-size:.72rem;letter-spacing:.1em}
  .nav-toggle{margin-left:var(--s2)}
}

/* ── HERO. Full-bleed, one dominant focal element, 60-80% of the screen intentionally
      empty. The still is the LCP paint; the video only fades in once it can play. ───────── */
.hero{position:relative;isolation:isolate;display:flex;align-items:flex-end;
  min-height:clamp(560px,86vh,940px);padding:var(--s7) 0 var(--s6);overflow:hidden;
  background-color:var(--bg)}
.hero-media{position:absolute;inset:0;z-index:-2;background-color:var(--bg)}
.hero-still,.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-video{opacity:0;transition:opacity 1200ms var(--ease)}
.hero-video.is-ready{opacity:1}
.hero-scrim{
  position:absolute;inset:0;
  background-image:linear-gradient(to top, rgba(10,10,10,.97) 0%, rgba(10,10,10,.82) 38%, rgba(10,10,10,.55) 70%, rgba(10,10,10,.72) 100%)
}
.hero-in{position:relative;z-index:1}
.hero h1{max-width:16ch;margin-bottom:var(--s3)}
.hero .lede{margin-bottom:var(--s4)}
@media (prefers-reduced-motion: reduce){ .hero-video{display:none} }

/* ── SECTIONS. 120-200px vertical padding on desktop, one idea per scroll section. ─────── */
.sec{padding:clamp(var(--s6),12vw,var(--s8)) 0;background-color:var(--bg)}
.sec-alt{background-color:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-head{max-width:46ch;margin-bottom:var(--s6)}
.sec-head p:last-child{margin-bottom:0}
.narrow{max-width:66ch}
.rule{width:56px;height:1px;background-color:var(--brand);border:0;margin:0 0 var(--s3)}

[data-reveal]{opacity:0;transform:translateY(22px);
  transition:opacity var(--slow) var(--ease), transform var(--slow) var(--ease)}
[data-reveal].shown{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
}

/* ── CARDS. Quiet, hairline, no marketing colour. ─────────────────────────────────────── */
.grid{display:grid;gap:1px;background-color:var(--line);
  grid-template-columns:repeat(auto-fit,minmax(288px,1fr));border:1px solid var(--line)}
.card{background-color:var(--bg);padding:var(--s4) var(--s3);transition:background-color var(--slow) var(--ease)}
.card:hover{background-color:var(--panel)}
.sec-alt .grid{background-color:var(--line)}
.sec-alt .card{background-color:var(--panel)}
.sec-alt .card:hover{background-color:var(--panel-2)}
.card h3{margin-bottom:.6em}
/* 2026-09-30 M.A.X.: /departments.php card titles are now h2 (they went h1 -> h3, a skipped level). This
   repeats the h3 type scale so the cards look exactly as they did. */
.card h2{font-size:clamp(1.12rem,1.5vw,1.3rem);line-height:1.25;letter-spacing:0;margin-bottom:.6em}
.card p{margin-bottom:0;font-size:.97rem;max-width:none}
.card .idx{display:block;font-family:var(--f-sans);font-size:.7rem;letter-spacing:.2em;
  color:var(--brand);margin-bottom:var(--s2)}

/* ── EDITORIAL SPLIT: one large image beside one column of text. ──────────────────────── */
.split{display:grid;gap:var(--s5);align-items:center;grid-template-columns:1fr}
@media (min-width:900px){
  .split{grid-template-columns:1.05fr .95fr;gap:var(--s6)}
  .split.flip .split-media{order:2}
}
.split-media img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r)}
.split-body p:last-child{margin-bottom:0}

/* ── STEPS ───────────────────────────────────────────────────────────────────────────── */
.steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;gap:1px;
  background-color:var(--line);border:1px solid var(--line);max-width:none}
.steps li{counter-increment:s;background-color:var(--bg);padding:var(--s4) var(--s3);max-width:none}
.sec-alt .steps li{background-color:var(--panel)}
.steps li::before{content:counter(s,decimal-leading-zero);display:block;
  font-family:var(--f-sans);font-size:.7rem;letter-spacing:.2em;color:var(--brand);margin-bottom:var(--s2)}
.steps h3{margin-bottom:.5em}
.steps p{margin-bottom:0;font-size:.97rem;max-width:none}

/* ── BUTTONS. 44px minimum, gold reserved for real calls to action. ──────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:15px 34px;border-radius:var(--r);
  background-color:var(--brand);color:var(--brand-ink);text-decoration:none;
  font-family:var(--f-sans);font-size:.8rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.15em;border:1px solid var(--brand);
  transition:background-color var(--slow) var(--ease), color var(--slow) var(--ease)
}
.btn:hover{background-color:var(--brand-soft);border-color:var(--brand-soft);color:var(--brand-ink)}
.btn-ghost{background-color:transparent;color:var(--brand);border-color:var(--brand-dark)}
.btn-ghost:hover{background-color:transparent;border-color:var(--brand);color:var(--brand-soft)}
.cta-row{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}

/* ── FACTS / CONTACT LIST ────────────────────────────────────────────────────────────── */
.facts{list-style:none;margin:0;padding:0;max-width:none;display:grid;gap:var(--s3)}
.facts dt,.fact-k{font-family:var(--f-sans);font-size:.7rem;text-transform:uppercase;
  letter-spacing:.2em;color:var(--brand);margin-bottom:6px}
.facts dd,.fact-v{margin:0;color:var(--ink);font-size:1.02rem}
.facts a,.fact-v a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--brand-dark)}
.facts a:hover,.fact-v a:hover{color:var(--brand)}
address{font-style:normal}

/* ── FAQ. The answers are VISIBLE copy. The FAQPage schema is built from this same text. ─ */
.faq{margin:0;max-width:none;display:grid;gap:1px;background-color:var(--line);border:1px solid var(--line)}
.faq-item{background-color:var(--bg);padding:var(--s4) var(--s3)}
.sec-alt .faq-item{background-color:var(--panel)}
.faq dt,.faq-q{font-family:var(--f-head);color:var(--ink);font-size:1.12rem;margin:0 0 .55em;line-height:1.3}
.faq dd,.faq-a{margin:0;max-width:var(--measure)}

/* ── TABLES ──────────────────────────────────────────────────────────────────────────── */
.table-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:520px}
th,td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
th{font-family:var(--f-sans);font-size:.7rem;text-transform:uppercase;letter-spacing:.18em;color:var(--brand)}
td{color:var(--ink-soft)}

/* ── PROSE (legal pages) ─────────────────────────────────────────────────────────────── */
.prose h2{margin-top:var(--s5);font-size:clamp(1.3rem,2.2vw,1.8rem)}
.prose h2:first-child{margin-top:0}
.prose ul{padding-left:1.15em}
.prose li{margin-bottom:.5em}

/* ── FOOTER ──────────────────────────────────────────────────────────────────────────── */
.site-foot{background-color:var(--panel);border-top:1px solid var(--line);padding:var(--s6) 0 var(--s4);color:var(--ink-dim)}
.foot-grid{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.foot-brand{font-family:var(--f-head);color:var(--ink);font-size:1.16rem;margin:0 0 var(--s1)}
.foot-brand-col p{max-width:34ch}
.foot-h{font-family:var(--f-sans);font-size:.7rem;text-transform:uppercase;letter-spacing:.2em;
  color:var(--brand);margin:0 0 var(--s2)}
.foot-list{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-width:none}
.foot-list a{color:var(--ink-soft);text-decoration:none;font-size:.95rem}
.foot-list a:hover{color:var(--brand)}
.map-wrap{margin-top:var(--s5)}
.map-frame{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;line-height:0}
.map-frame iframe{width:100%;height:340px;display:block;filter:grayscale(.35) contrast(1.05) brightness(.9)}
.foot-bar{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);justify-content:space-between;align-items:center}
.foot-bar p{margin:0;font-size:.85rem;max-width:none}
/* The AppWT credit is a byline, not a call to action: pearl at reduced opacity, never gold. */
.foot-credit{color:var(--ink-dim);opacity:.78}
.foot-credit a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--line)}
.foot-credit a:hover{color:var(--ink);border-bottom-color:var(--ink-dim)}

/* ── 404 / EMPTY STATES. Fully designed and on-brand, per the module's detail discipline. ─ */
.state{min-height:64vh;display:flex;align-items:center;padding:var(--s6) 0;background-color:var(--bg)}
.state .code{font-family:var(--f-head);font-size:clamp(4rem,14vw,9rem);line-height:1;color:var(--panel-2);margin:0 0 var(--s3)}

/* ══ WIDGET RAIL (PART 105 / PART 112 offsets). Tinted to the palette: no injected
      third-party UI is allowed to bring a saturated marketing colour onto this page. ════ */
.rail{position:fixed;inset:auto 0 0 0;z-index:60;pointer-events:none}
.rail-btn{
  position:fixed;width:48px;height:48px;min-width:48px;min-height:48px;border-radius:50%;
  background-color:var(--panel-2);color:var(--brand);border:1px solid var(--line);
  cursor:pointer;font-size:1.05rem;line-height:1;pointer-events:auto;
  display:grid;place-items:center;
  transition:background-color var(--slow) var(--ease), border-color var(--slow) var(--ease)
}
.rail-btn:hover{background-color:var(--panel);border-color:var(--brand-dark)}
/* The rail marks are inline SVG on currentColor, so no emoji font can inject a saturated
   blue into a palette that allows exactly one accent. */
.rail-i{display:block;color:var(--brand)}
.brand{min-height:44px}
.rail-ada{bottom:25px;left:20px}
.rail-top{bottom:25px;right:20px}
.rail-xl{bottom:85px;right:20px}
.ada-panel{
  position:fixed;bottom:85px;left:20px;width:250px;max-width:calc(100vw - 40px);
  background-color:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s3);pointer-events:auto;display:grid;gap:8px;z-index:61
}
.ada-panel[hidden]{display:none}
.ada-h{font-family:var(--f-sans);font-size:.7rem;text-transform:uppercase;letter-spacing:.2em;
  color:var(--brand);margin:0 0 var(--s1)}
.ada-panel button{
  min-height:44px;width:100%;text-align:left;padding:11px 14px;border-radius:var(--r);
  background-color:var(--bg);border:1px solid var(--line);color:var(--ink-soft);
  font:inherit;font-size:.9rem;cursor:pointer
}
.ada-panel button:hover{border-color:var(--brand-dark);color:var(--ink)}
.ada-note{margin:var(--s1) 0 0;font-size:.8rem;color:var(--ink-dim)}
.xl-host{position:fixed;bottom:145px;right:20px;background-color:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);padding:10px;pointer-events:auto;z-index:61}
.xl-host[hidden]{display:none}
@media (max-width:480px){
  .rail-btn{right:12px}
  .rail-ada{left:12px;bottom:20px}
  .rail-top{bottom:20px;right:12px}
  .rail-xl{bottom:74px;right:12px}
  .ada-panel{left:12px;bottom:74px}
  .xl-host{right:12px;bottom:128px}
}

/* ── ADA visitor controls. Deliberate accessibility choices, NOT a theme toggle. ───────── */
html.ada-contrast body{background-color:#000;color:#FFF}
html.ada-contrast h1,html.ada-contrast h2,html.ada-contrast h3,html.ada-contrast h4{color:#FFF}
html.ada-contrast .hero-scrim{background-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.95) 100%)}
html.ada-invert{filter:invert(1) hue-rotate(180deg)}
html.ada-invert img,html.ada-invert video,html.ada-invert iframe{filter:invert(1) hue-rotate(180deg)}
html.ada-bigtext body{font-size:20px}
html.ada-readable body,html.ada-readable h1,html.ada-readable h2,html.ada-readable h3,html.ada-readable h4{
  font-family:Verdana,Tahoma,"DejaVu Sans",sans-serif;letter-spacing:.01em}

/* Google Translate injects its own chrome. Keep it inside our palette. */
.goog-te-gadget,.goog-te-gadget *{color:var(--ink-soft) !important;font-family:var(--f-sans) !important}
.goog-te-combo{background-color:var(--bg) !important;color:var(--ink) !important;
  border:1px solid var(--line) !important;border-radius:var(--r) !important;padding:8px !important;min-height:44px}
body{top:0 !important}
.skiptranslate iframe{display:none !important}

@media (max-width:640px){
  body{font-size:16px}
  .hero{min-height:clamp(480px,78vh,680px);padding:var(--s6) 0 var(--s5)}
  .hero h1{max-width:none}
  .cta-row .btn{width:100%}
}