/* ============================================================
   Frame Us Photo — frameusphoto.com

   Direction: a photo booth is a dark cabinet you step into and what
   comes out is a paper strip, so the page is built from two materials —
   booth dark and photo-paper light. The accent is a single metal.
   Color and occasion come from the client's own event photography,
   which is why the chrome stays neutral: the same page has to read
   right for a wedding, a mitzvah and a corporate holiday party.

   Type: Fraunces (optical serif) for display, Archivo for everything
   operational. Prices use tabular figures so the columns line up.

   Single visual world by choice — every color is painted explicitly
   so the page holds on any host background.
   ============================================================ */

/* ── Palette ───────────────────────────────────────────────────────────
   Frame Us Photo books weddings, corporate events, graduations, birthdays,
   engagements and mitzvahs. So the page stays a restrained evening-event
   neutral with one metal accent, and the photography supplies the color
   and the occasion. A loud brand palette would fight the photos and would
   tell a corporate client this is a wedding vendor. */

:root{
  /* Ink & Brass */
  --booth:#14161c;
  --booth-soft:#1f222b;
  --booth-line:rgba(247,245,241,.13);
  --paper:#f7f5f1;
  --paper-2:#eeebe4;
  --ink:#16181e;

  --accent:#bb8a42;
  --accent-deep:#95682a;
  --accent-warm:#d9b57c;
  --accent-cool:#7d8a99;

  --label-1:#95682a; --label-2:#95682a; --label-3:#95682a;

  --frame-1:rgba(217,181,124,.38);
  --frame-2:rgba(247,245,241,.22);
  --frame-3:rgba(187,138,66,.34);
  --glow:rgba(187,138,66,.17);

  --header-bg:rgba(247,245,241,.93);
  --on-booth-dim:rgba(247,245,241,.76);
  --on-booth-faint:rgba(247,245,241,.52);
  --on-booth-line:rgba(247,245,241,.34);
  --on-booth-wash:rgba(247,245,241,.04);
  --on-booth-wash-2:rgba(247,245,241,.09);

  --muted:#6a6a73; --muted-dim:#9a9aa3; --line:#e2ded5;

  --shadow:0 1px 2px rgba(16,16,19,.05), 0 10px 28px rgba(16,16,19,.09);
  --shadow-lg:0 2px 6px rgba(16,16,19,.09), 0 22px 56px rgba(16,16,19,.16);

  --display:"Fraunces", "Iowan Old Style", Palatino, Georgia, serif;
  --body:"Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --wrap:1140px;
  --radius:12px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; display:block}
a{color:inherit}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:22px}

.sr-only,.skip:not(:focus){
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip:focus{
  position:fixed; top:12px; left:12px; z-index:300; width:auto; height:auto; clip:auto;
  background:var(--accent); color:var(--paper); padding:11px 18px; border-radius:8px;
  text-decoration:none; font-weight:600;
}
:focus-visible{outline:3px solid var(--accent); outline-offset:3px; border-radius:3px}

/* ── Header ─────────────────────────────────────────── */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--header-bg);
  backdrop-filter:saturate(1.5) blur(12px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:70px}

.brand{display:flex; align-items:center; gap:11px; text-decoration:none}
.brand-strip{display:flex; flex-direction:column; gap:2.5px; padding:4px; background:var(--booth); border-radius:3px}
.brand-strip i{display:block; width:15px; height:5px; border-radius:.5px; background:var(--accent-warm)}
.brand-strip i:nth-child(2){background:var(--accent)}
.brand-strip i:nth-child(3){background:var(--accent-cool)}
.brand-name{font-family:var(--display); font-weight:600; font-size:1.16rem; letter-spacing:-.015em}

.nav-toggle{display:none; background:none; border:1px solid var(--line); border-radius:8px; padding:10px 12px; cursor:pointer}
.bars,.bars::before,.bars::after{display:block; width:20px; height:2px; background:var(--ink); border-radius:2px; position:relative}
.bars::before,.bars::after{content:""; position:absolute; left:0}
.bars::before{top:-6px}
.bars::after{top:6px}

.nav-links{display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0}
.nav-links a{
  display:inline-block; padding:9px 13px; border-radius:7px; text-decoration:none;
  font-size:.92rem; font-weight:500; color:var(--ink);
}
.nav-links a:hover{background:var(--paper-2)}
.nav-cta{background:var(--accent); color:var(--paper)!important; font-weight:600; margin-left:8px}
.nav-cta:hover{background:var(--accent-deep)!important}

/* ── Buttons ────────────────────────────────────────── */
.btn{
  display:inline-block; text-align:center; text-decoration:none; cursor:pointer;
  font-family:var(--body); font-weight:600; font-size:.97rem; letter-spacing:.005em;
  padding:14px 26px; border-radius:9px; border:1.5px solid transparent;
  transition:background .14s ease, border-color .14s ease, transform .14s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--accent); color:var(--paper); box-shadow:var(--shadow)}
.btn-primary:hover{background:var(--accent-deep)}
.btn-ghost{background:transparent; color:var(--paper); border-color:var(--on-booth-line)}
.btn-ghost:hover{border-color:var(--paper); background:var(--on-booth-wash-2)}
.btn-outline{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-outline:hover{border-color:var(--ink)}
.btn.full{display:block; width:100%}
.btn[disabled]{opacity:.5; cursor:not-allowed; transform:none}

/* ── Hero — inside the booth ────────────────────────── */
.hero{
  background:var(--booth); color:var(--paper);
  padding-block:clamp(52px,7vw,96px);
  position:relative; overflow:hidden;
}
/* the flash */
.hero::before{
  content:""; position:absolute; top:-30%; left:50%; width:min(900px,120%); aspect-ratio:1;
  transform:translateX(-50%);
  background:radial-gradient(circle, var(--glow), transparent 62%);
  pointer-events:none;
}
.hero-inner{position:relative; display:grid; grid-template-columns:1.18fr .82fr; gap:clamp(30px,5vw,68px); align-items:center}

.eyebrow{
  margin:0 0 16px; font-size:.75rem; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--accent-warm);
}
.hero h1{
  margin:0 0 20px;
  font-family:var(--display); font-weight:600;
  font-size:clamp(2.2rem,5.4vw,3.85rem); line-height:1.04; letter-spacing:-.025em;
  text-wrap:balance;
}
.hero h1 em{font-style:italic; color:var(--accent)}
.lede{margin:0 0 30px; font-size:clamp(1.02rem,1.5vw,1.14rem); color:var(--on-booth-dim); max-width:50ch}
.lede strong{color:var(--paper); font-weight:600}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin:0 0 20px}
.hero-note{margin:0; font-size:.88rem; color:var(--on-booth-faint)}
.hero-note strong{color:var(--accent-warm); font-weight:600}

/* The strip. Each .frame is a slot for a real photo:
   .frame-a{ background-image:url(photos/one.jpg) }  — the tint sits on ::after. */
.hero-strip{display:flex; justify-content:center}
.strip{
  width:min(268px,76vw); background:var(--paper); padding:13px 13px 0;
  border-radius:3px; box-shadow:var(--shadow-lg);
  transform:rotate(-2.5deg);
}
.frame{
  /* 1.55 is the real aspect of a photo panel on a Frame Us Photo strip
     (401x259 on a 415-wide strip). Matching it means background-size:cover
     scales without shaving the sides off anyone's face. */
  aspect-ratio:1.55; margin-bottom:11px; background:var(--booth-soft);
  background-size:cover; background-position:center;
  position:relative; overflow:hidden;
}
.frame::after{content:""; position:absolute; inset:0; mix-blend-mode:screen}

/* Real photos stack inside the frame as two layers and crossfade between
   samples. The ::after tint is suppressed once photos are present so it does
   not sit over someone's face. */
.frame .layer{
  position:absolute; inset:0; opacity:0;
  background-size:cover; background-position:center;
  transition:opacity .7s ease;
}
.frame .layer.on{opacity:1}
.strip.has-photos .frame::after{content:none}
@media (prefers-reduced-motion:reduce){
  .frame .layer{transition:none}
}
.frame-a::after{background:radial-gradient(circle at 34% 30%, var(--frame-1), transparent 64%)}
.frame-b::after{background:radial-gradient(circle at 62% 42%, var(--frame-2), transparent 64%)}
.frame-c::after{background:radial-gradient(circle at 44% 62%, var(--frame-3), transparent 64%)}
.strip-footer{
  font-family:var(--display); font-style:italic; font-weight:500;
  text-align:center; color:var(--ink); padding:4px 0 13px; font-size:.92rem;
}

/* ── Value props ────────────────────────────────────── */
.props{background:var(--paper-2); border-bottom:1px solid var(--line)}
.props-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,4vw,52px); padding-block:clamp(32px,4vw,48px)}
.prop h2{margin:0 0 7px; font-size:.75rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase}
.props-grid .prop:nth-child(1) h2{color:var(--label-1)}
.props-grid .prop:nth-child(2) h2{color:var(--label-2)}
.props-grid .prop:nth-child(3) h2{color:var(--label-3)}
.prop p{margin:0; color:var(--muted); font-size:.96rem}

/* ── Sections ───────────────────────────────────────── */
.section{padding-block:clamp(56px,7.5vw,96px)}
.section-tint{background:var(--paper-2); border-block:1px solid var(--line)}
.section-dark{background:var(--booth); color:var(--paper)}
.section-dark .section-sub{color:var(--on-booth-dim)}
.section-dark p{color:var(--on-booth-dim)}

.section-head{max-width:62ch; margin:0 auto clamp(34px,4.5vw,54px); text-align:center}
.section-title{
  margin:0 0 12px; font-family:var(--display); font-weight:600;
  font-size:clamp(1.7rem,3.6vw,2.5rem); line-height:1.12; letter-spacing:-.02em;
  text-wrap:balance;
}
.section-sub{margin:0; color:var(--muted); font-size:1.01rem}

/* ── Packages: each card is a photo strip ───────────── */
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; align-items:start}
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; height:100%;
}
/* the black band at the head of a strip */
.card::before{content:""; display:block; height:8px; background:var(--booth)}
.card-featured{
  border-color:var(--accent); box-shadow:var(--shadow-lg); position:relative;
}
.card-featured::before{background:var(--accent)}
.card-flag{
  position:absolute; top:20px; right:20px; margin:0;
  font-size:.68rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--accent-deep); white-space:nowrap;
}
.card-body{padding:24px 20px 26px; display:flex; flex-direction:column; flex:1}
.card-num{margin:0 0 3px; font-size:.67rem; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--muted-dim)}
.card-name{margin:0 0 10px; font-family:var(--display); font-weight:600;
  font-size:1.5rem; letter-spacing:-.02em; line-height:1.1; color:var(--ink)}
/* top tier: marked by the tier name in brass, so "Most booked" stays the only badge */
.card-top .card-name{color:var(--accent-deep)}
.card-price{margin:0; font-family:var(--display); line-height:1; font-variant-numeric:tabular-nums}
.card-price .amt{font-size:2.35rem; font-weight:600; letter-spacing:-.03em}
.card-dur{margin:8px 0 20px; color:var(--muted); font-size:.94rem}
.card-list{list-style:none; margin:0 0 22px; padding:0; display:grid; gap:10px; flex:1}
.card-list li{position:relative; padding-left:25px; font-size:.95rem}
.card-list li::before{
  content:""; position:absolute; left:2px; top:.5em;
  width:11px; height:6px; border-left:2px solid var(--accent); border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}
.val{color:var(--muted); font-size:.85em}
.card-extra{margin:0 0 20px; font-size:.84rem; color:var(--muted); line-height:1.5}
.card-btn{margin-top:auto}

/* ── Add-ons ────────────────────────────────────────── */
.addons{
  margin-top:clamp(32px,4vw,52px); background:var(--paper);
  border:1px solid var(--line); border-radius:var(--radius); padding:clamp(24px,3vw,34px);
}
.addons h3{margin:0 0 18px; font-size:.74rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--muted)}
.addon-list{list-style:none; margin:0 0 16px; padding:0; display:grid; gap:11px}
.addon-list li{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:10px;
  padding-bottom:11px; border-bottom:1px solid var(--line); font-size:.96rem;
}
.addon-list li:last-child{border-bottom:0; padding-bottom:0}
.addon-list span{flex:1; min-width:190px}
.addon-list b{font-weight:600; font-variant-numeric:tabular-nums}
.addon-list em{color:var(--muted); font-size:.86rem; font-style:normal}
.addon-note{margin:0; font-size:.92rem; color:var(--muted)}
.addon-note a{color:var(--accent-deep); font-weight:600}

/* ── Included ───────────────────────────────────────── */
/* Portrait prop shot beside the tiles; the photo is the only color in an
   otherwise dark, typographic section. */
.incl-wrap{display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr); gap:clamp(24px,4vw,44px); align-items:start}
.incl-photo{margin:0; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg)}
.incl-photo img{width:100%; height:auto; display:block}
.incl-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.5vw,26px)}
.incl{padding:24px; border:1px solid var(--booth-line); border-radius:var(--radius); background:var(--on-booth-wash)}
.incl h3{margin:0 0 7px; font-family:var(--display); font-weight:600; font-size:1.06rem; color:var(--paper)}
.incl p{margin:0; font-size:.94rem}

/* ── About ──────────────────────────────────────────── */
.about-wrap{display:grid; grid-template-columns:1.5fr .8fr; gap:clamp(30px,5vw,64px); align-items:start}
/* Byline portrait. Source is 120px native, so it is displayed at 60 and
   never upscaled. */
.about-head{display:flex; align-items:center; gap:16px; margin-bottom:20px}
.about-head .section-title{margin:0; text-align:left}
.owner-photo{width:60px; height:60px; border-radius:50%; object-fit:cover; flex:none;
  border:2px solid var(--accent); box-shadow:var(--shadow)}
.about-copy .section-title{text-align:left}
.about-copy p{color:var(--muted); font-size:1.02rem; margin:0 0 18px}
.about-copy p strong{color:var(--ink); font-weight:600}
.about-sign{font-family:var(--display); font-size:1.3rem; color:var(--ink)!important; margin-top:26px!important}
.script{font-style:italic; color:var(--accent-deep)}

.about-facts{
  background:var(--booth); color:var(--paper); border-radius:var(--radius);
  padding:28px; box-shadow:var(--shadow); position:sticky; top:92px;
}
.about-facts dl{margin:0 0 22px; display:grid; gap:16px}
.about-facts dt{font-size:.68rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--muted-dim)}
.about-facts dd{margin:4px 0 0; font-size:1rem; font-weight:500}

/* ── Service area ───────────────────────────────────── */
/* Text and a photo of the actual setup side by side; the town chips run
   full width underneath. */
.area-wrap{display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,52px); align-items:center}
.area-copy{text-align:left}
.area-copy .section-title{text-align:left}
.area-photo{margin:0}
.area-photo img{width:100%; height:auto; border-radius:var(--radius); box-shadow:var(--shadow-lg)}
.area-photo figcaption{margin-top:10px; font-size:.84rem; color:var(--muted); text-align:left}
.area-chips{grid-column:1 / -1}
.area-lede{font-family:var(--display); font-style:italic; font-size:1.22rem; color:var(--accent-deep); margin:0 0 16px}
.area-body{max-width:52ch}
.area-body{color:var(--muted); font-size:1.01rem; margin:0 0 26px}
.area-body strong{color:var(--ink); font-weight:600}
.area-chips{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:9px; justify-content:center}
.area-chips li{background:var(--paper); border:1px solid var(--line); border-radius:99px; padding:7px 17px; font-size:.89rem; font-weight:500}

/* ── Contact ────────────────────────────────────────── */
.contact-wrap{display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(30px,5vw,64px); align-items:start}
.contact-intro .section-title{text-align:left}
.contact-direct{list-style:none; margin:28px 0 0; padding:0; display:grid; gap:16px}
.contact-direct li{display:grid; gap:3px}
.contact-direct .lbl{font-size:.68rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--muted-dim)}
.contact-direct a{color:var(--accent-warm); text-decoration:none; font-size:1.05rem; font-weight:600}
.contact-direct a:hover{text-decoration:underline}

/* Square map tile. The embed loads lazily, since it is well below the fold
   and heavier than the rest of the page put together. The fallback link sits
   behind it, so a blocked or slow embed still shows the location and still
   goes to the map. */
.map-tile{
  position:relative; margin-top:26px; aspect-ratio:1; width:100%; max-width:340px;
  border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--on-booth-line); background:var(--booth-soft);
}
.map-tile iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.map-fallback{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:6px; text-decoration:none;
  color:var(--paper); text-align:center; padding:20px;
}
.map-pin{
  width:16px; height:16px; border-radius:50% 50% 50% 0;
  transform:rotate(-45deg); background:var(--accent); margin-bottom:6px;
}
.map-place{font-family:var(--display); font-size:1.15rem; font-weight:600}
.map-sub{font-size:.82rem; color:var(--on-booth-faint)}

.contact-form{background:var(--paper); border-radius:var(--radius); padding:clamp(24px,3vw,34px); box-shadow:var(--shadow-lg); color:var(--ink)}
.row{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.field{display:grid; gap:7px; margin-bottom:18px}
.field label{font-size:.81rem; font-weight:600}
.field label span{color:var(--accent)}
.field input,.field select,.field textarea{
  font-family:var(--body); font-size:.97rem; color:var(--ink); background:var(--paper-2);
  border:1.5px solid var(--line); border-radius:8px; padding:12px 14px; width:100%;
  transition:border-color .14s ease, background .14s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{background:var(--paper); border-color:var(--accent); outline:none}
.field textarea{resize:vertical; min-height:118px}
/* flashes when a package card preselects this dropdown */
.field select.prefilled{border-color:var(--accent); background:var(--paper); box-shadow:0 0 0 3px rgba(187,138,66,.18)}
.field.invalid input,.field.invalid textarea,.field.invalid select{border-color:#c0392b; background:#fdf4f3}
.field-error{font-size:.82rem; color:#c0392b; margin:0}

.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.turnstile-mount:not(:empty){margin:0 0 16px; min-height:65px}
.form-status{margin:16px 0 0; font-size:.94rem; font-weight:600; min-height:1.3em}
.form-status.ok{color:#15764a}
.form-status.err{color:#c0392b}
.form-fine{margin:12px 0 0; font-size:.82rem; color:var(--muted)}

/* ── Footer ─────────────────────────────────────────── */
.site-footer{background:var(--booth-soft); color:var(--on-booth-dim); padding-block:38px}
.footer-inner{display:flex; flex-wrap:wrap; gap:20px; align-items:flex-start; justify-content:space-between}
.footer-brand{margin:0; font-family:var(--display); font-size:1.16rem; color:var(--paper)}
.footer-line{margin:3px 0 0; font-size:.89rem}
.footer-contact{display:grid; gap:5px; font-size:.91rem}
.footer-contact a{color:var(--accent-warm); text-decoration:none}
.footer-contact a:hover{text-decoration:underline}
.footer-copy{margin:0; font-size:.82rem; width:100%; padding-top:18px; border-top:1px solid var(--booth-line); color:var(--on-booth-faint)}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr; text-align:center}
  .hero-copy{order:1}
  .hero-strip{order:0; margin-bottom:10px}
  .hero-actions{justify-content:center}
  .lede{margin-inline:auto}
  .props-grid{grid-template-columns:1fr; gap:24px; text-align:center}
  .cards{grid-template-columns:repeat(2,1fr)}
  .area-wrap{grid-template-columns:1fr; gap:26px}
  .area-copy, .area-copy .section-title, .area-photo figcaption{text-align:center}
  .area-body{margin-inline:auto}
  .incl-wrap{grid-template-columns:1fr; gap:26px}
  .incl-photo{max-width:340px; margin-inline:auto}
  .incl-grid{grid-template-columns:1fr 1fr}
  .about-wrap{grid-template-columns:1fr}
  .about-head{flex-direction:column; text-align:center; gap:12px}
  .about-head .section-title{text-align:center}
  .about-copy .section-title{text-align:center}
  .about-facts{position:static}
  .contact-wrap{grid-template-columns:1fr}
  .contact-intro{text-align:center}
  .contact-intro .section-title{text-align:center}
  .contact-direct{justify-items:center}
  .map-tile{margin-inline:auto}
}

@media (max-width:640px){
  body{font-size:16px}
  .nav-toggle{display:block}
  .nav-links{
    display:none; position:absolute; top:70px; left:0; right:0; flex-direction:column;
    align-items:stretch; gap:2px; background:var(--paper); border-bottom:1px solid var(--line);
    padding:10px 22px 18px; box-shadow:var(--shadow);
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 10px}
  .nav-cta{margin:8px 0 0; text-align:center}
  .incl-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr; max-width:420px; margin-inline:auto}
  .row{grid-template-columns:1fr; gap:0}
  .card-flag{position:static; margin:0 0 10px}
  .footer-inner{flex-direction:column}
}

@media print{
  .site-header,.hero-strip,.contact-form,.nav{display:none}
  body{background:#fff; color:#000}
}

/* ── Occasions band ─────────────────────────────────── */
.occasions{background:var(--booth); color:var(--paper); padding-block:clamp(38px,5vw,60px)}
.occ-head{text-align:center; margin:0 auto 26px; max-width:56ch}
.occ-head h2{
  margin:0 0 8px; font-family:var(--display); font-weight:600;
  font-size:clamp(1.4rem,2.8vw,1.95rem); letter-spacing:-.02em;
}
.occ-head p{margin:0; color:var(--on-booth-dim); font-size:.99rem}
.occ-grid{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center; list-style:none; margin:0; padding:0;
}
.occ-grid li{
  border:1px solid var(--on-booth-line); border-radius:99px;
  padding:9px 19px; font-size:.93rem; font-weight:500; color:var(--paper);
}
.occ-grid li.lead{background:var(--accent); border-color:var(--accent); color:var(--booth); font-weight:600}


/* ── FAQ ──────────────────────────────────────────────────────────
   Answers are visible rather than folded into accordions. Search
   engines index either, but an answer someone can read without
   clicking is the one an AI assistant quotes and the one a visitor
   actually reads. */
.faq-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:30px 52px; margin-top:34px;
}
.faq-q{
  font-family:var(--display); font-weight:600; font-size:1.05rem;
  margin:0 0 7px; color:var(--ink); line-height:1.35; text-wrap:balance;
}
.faq-a{margin:0; color:var(--muted); font-size:.97rem; line-height:1.62}
.faq-a strong{color:var(--ink); font-weight:600}
.faq-a a{color:var(--accent-deep); text-decoration:underline; text-underline-offset:2px}
@media (max-width:640px){ .faq-grid{gap:24px; margin-top:26px} }