/* =========================================================================
   Umbrella Studios: "Call Sheet"
   The site as a production document. Paper white, ink type, mono fields,
   live timecode, one red REC. Archivo (bold, uppercase) + IBM Plex Mono.
   Radius 0, hairline rules, hard dividers. Three spaces: Content Studio,
   The Volume, Studio C.
   ========================================================================= */

:root {
  --paper:#F7F6F1; --ink:#131311; --panel:#EFEDE5;
  --hatch1:#E9E7DE; --hatch2:#F0EEE5;
  --muted:#8A8880; --body:#55534C; --rec:#D8261C;
  --line:rgba(19,19,17,0.22); --line2:rgba(19,19,17,0.42); --edge:#131311;

  --bg: var(--paper);
  --fg: var(--ink);

  --disp:'Archivo', system-ui, -apple-system, sans-serif;
  --sans:'Archivo', system-ui, -apple-system, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --pad: clamp(20px, 5vw, 64px);
  --maxw: 1600px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Blackout: inverted treatment for The Volume (ink stage, paper type). */
.blackout {
  --bg: var(--ink);
  --fg: var(--paper);
  --body:#B7B4AC;
  --muted:#7C7A73;
  --panel:#1C1C19;
  --line:rgba(247,246,241,0.16);
  --line2:rgba(247,246,241,0.32);
  --edge:#F7F6F1;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
::selection { background:var(--ink); color:var(--paper); }

.wrap { max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }

/* ---- Type ---- */
.display { font-family:var(--disp); font-weight:800; text-transform:uppercase;
  letter-spacing:-0.03em; line-height:0.92; }
h1.display { font-size:clamp(2.9rem, 8.5vw, 7rem); }
.h2 { font-family:var(--disp); font-weight:800; text-transform:uppercase;
  letter-spacing:-0.02em; line-height:0.98; font-size:clamp(1.9rem, 4.6vw, 3.4rem); }
.h3 { font-family:var(--disp); font-weight:700; text-transform:uppercase; letter-spacing:-0.01em; font-size:1.35rem; line-height:1.05; }
.eyebrow, .mono { font-family:var(--mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); }
.sec-no { font-family:var(--mono); font-size:11px; letter-spacing:0.08em; color:var(--muted); }
.lede { font-size:clamp(1.05rem, 1.7vw, 1.3rem); line-height:1.5; color:var(--body); max-width:60ch; }
.prose p { color:var(--body); font-size:16px; line-height:1.7; max-width:64ch; }
.prose p + p { margin-top:16px; }
.body-muted { color:var(--body); }

/* ---- Buttons ---- */
.btn { display:inline-flex; align-items:center; gap:12px; font-family:var(--mono); font-size:12px;
  letter-spacing:0.1em; text-transform:uppercase; background:var(--edge); color:var(--bg);
  border:1px solid var(--edge); padding:15px 26px; cursor:pointer; transition:background .18s var(--ease), color .18s var(--ease); }
.btn:hover { background:var(--rec); border-color:var(--rec); color:#fff; }
.btn.ghost { background:transparent; color:var(--fg); }
.btn.ghost:hover { background:var(--edge); color:var(--bg); }
.btn .arw { transition:transform .18s var(--ease); }
.btn:hover .arw { transform:translateX(4px); }

/* ---- Slate strip / header ---- */
.slate { border-bottom:2px solid var(--ink); position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter:saturate(120%) blur(6px); }
.slate-fields { display:grid; grid-template-columns:2.2fr 1fr 1fr 1fr 1.4fr; font-family:var(--mono);
  border-bottom:1px solid var(--line); }
.sf { padding:11px 20px; border-right:1px solid var(--line); min-width:0; }
.sf:last-child { border-right:0; }
.sf .k { display:block; font-size:9px; letter-spacing:0.14em; color:var(--muted); margin-bottom:4px; }
.sf .v { font-size:11px; letter-spacing:0.06em; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sf .v.tc { font-variant-numeric:tabular-nums; }
.sf.rec { display:flex; align-items:center; gap:9px; }
.rec-dot { width:9px; height:9px; border-radius:50%; background:var(--rec); flex:none; animation:recblink 1.2s steps(1) infinite; }
.sf.rec .v { font-weight:500; }

.bar { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 20px; }
.brand { display:inline-flex; align-items:center; gap:11px; }
.brand .dot { width:22px; height:17px; flex:none; background:var(--ink);
  -webkit-mask:url("../mark.svg") center/contain no-repeat; mask:url("../mark.svg") center/contain no-repeat; }
.blackout .brand .dot, .slate.on-dark .brand .dot { background:var(--paper); }
.brand .name { font-family:var(--disp); font-weight:800; text-transform:uppercase; letter-spacing:0.02em; font-size:16px; }
.nav { display:flex; gap:26px; align-items:center; }
.nav a { font-family:var(--mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--body); padding-bottom:3px; border-bottom:1px solid transparent; transition:color .15s, border-color .15s; }
.nav a:hover { color:var(--ink); }
.nav a.active { color:var(--ink); border-bottom:1px solid var(--rec); }
.nav-toggle { display:none; font-family:var(--mono); font-size:12px; letter-spacing:0.1em; background:none; border:1px solid var(--line2); color:var(--ink); padding:9px 14px; cursor:pointer; text-transform:uppercase; }

/* ---- Sections ---- */
.section { padding:clamp(52px, 8vw, 104px) 0; }
.section.tight { padding:clamp(36px, 5vw, 64px) 0; }
.hair-top { border-top:1px solid var(--line); }
.rule-top { border-top:2px solid var(--ink); }
.section-head { max-width:var(--maxw); }
.section-head .eyebrow { display:block; margin-bottom:12px; }
.section-head .h2 { margin-top:6px; }
.section-head p { margin-top:20px; color:var(--body); max-width:62ch; font-size:16px; line-height:1.65; }

/* ---- Hero (Form A) ---- */
.hero { padding:clamp(48px, 7vw, 88px) 0 clamp(40px, 5vw, 60px); }
.hero .eyebrow { display:block; margin-bottom:22px; }
.hero h1 { max-width:20ch; }
.hero-row { display:flex; gap:clamp(24px,4vw,56px); margin-top:34px; align-items:flex-end; flex-wrap:wrap; }
.hero-row p { margin:0; }
.hero-row .btn { margin-left:auto; }

/* ---- Hero background video (home only) ---- */
.hero-video { position:relative; overflow:hidden; isolation:isolate; background:var(--ink);
  min-height:clamp(540px, 82vh, 880px); display:flex; align-items:flex-end; }
.hero-video > .wrap { position:relative; z-index:2; width:100%; }
.hero-video .hero-bg { position:absolute; inset:0; z-index:0; overflow:hidden; container-type:size; }
.hero-video .hero-bg img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-video .hero-bg iframe { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
  width:max(100cqw, 177.78cqh); height:max(56.25cqw, 100cqh); border:0; pointer-events:none; }
.hero-video .hero-scrim { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(19,19,17,0.52) 0%, rgba(19,19,17,0.30) 44%, rgba(19,19,17,0.80) 100%); }
.hero-video .eyebrow { color:rgba(247,246,241,0.72); }
.hero-video .display { color:var(--paper); }
.hero-video .lede { color:rgba(247,246,241,0.90); }
.hero-video .btn { background:var(--paper); color:var(--ink); border-color:var(--paper); }
.hero-video .btn:hover { background:var(--rec); border-color:var(--rec); color:#fff; }

/* ---- Stage rows (the call-sheet table) ---- */
.stages { border-top:2px solid var(--ink); }
.srow { display:grid; grid-template-columns:76px 1.5fr 1.1fr 1fr 128px; align-items:center;
  gap:22px; padding:26px var(--pad); border-bottom:1px solid var(--line); transition:background .15s var(--ease); }
.srow:last-child { border-bottom:2px solid var(--ink); }
.srow:hover { background:var(--panel); }
.srow .st { font-family:var(--mono); font-size:12px; color:var(--muted); }
.srow .nm { font-family:var(--disp); font-weight:800; text-transform:uppercase; letter-spacing:-0.02em; font-size:clamp(1.4rem,2.6vw,2rem); line-height:0.98; }
.srow .spec { font-family:var(--mono); font-size:11.5px; line-height:1.7; letter-spacing:0.03em; color:var(--body); }
.srow .go { font-family:var(--mono); font-size:12px; text-align:center; border:1px solid var(--ink); padding:11px 0; transition:background .15s, color .15s; }
.srow:hover .go { background:var(--ink); color:var(--paper); }

/* ---- Exhibits grid ---- */
.exhibits { display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; }
.exhibit .frame { aspect-ratio:16/11; border:1px solid var(--line2); overflow:hidden; position:relative; background:var(--hatch1); }
.exhibit .frame img { width:100%; height:100%; object-fit:cover; }
.exhibit .frame.dark { background:var(--ink); }
.exhibit .cap { font-family:var(--mono); font-size:10px; letter-spacing:0.1em; color:var(--muted); text-transform:uppercase; margin-top:9px; }

/* ---- Motion & video in framed plates ---- */
/* Vimeo background embed inside any frame. The frame's <img> stays beneath as a
   poster/fallback; the .embed overlays it. */
.frame video { width:100%; height:100%; object-fit:cover; display:block; }
/* Cover-fit a 16:9 iframe into any frame shape without distortion: container-type
   on .embed lets the iframe size to the frame via container-query units, so it
   crops to fill instead of stretching. */
.frame .embed { position:absolute; inset:0; overflow:hidden; container-type:size; }
.frame .embed iframe { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
  width:max(100cqw, 177.78cqh); height:max(56.25cqw, 100cqh); border:0; pointer-events:none; }
/* Subtle Ken Burns: a live motion placeholder until real footage lands (and a
   fine lightweight motion option on its own). Global reduced-motion rule stops it. */
@keyframes kenburns { 0% { transform:scale(1.03); } 100% { transform:scale(1.13) translate(2%, -1.5%); } }
.frame.motion img { animation:kenburns 24s ease-in-out infinite alternate; transform-origin:58% 42%; }

/* ---- Split (two-column content) ---- */
.split { display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(30px, 5vw, 72px); align-items:start; }
.split.even { grid-template-columns:1fr 1fr; }
.pull { font-family:var(--disp); font-weight:700; text-transform:uppercase; letter-spacing:-0.015em; font-size:clamp(1.3rem,2.4vw,1.9rem); line-height:1.08; }
.pull cite { display:block; font-family:var(--mono); font-size:10px; letter-spacing:0.1em; color:var(--muted); font-style:normal; text-transform:uppercase; margin-top:14px; }

/* ---- Sets grid ---- */
.sets { display:grid; grid-template-columns:repeat(2, 1fr); gap:22px; margin-top:14px; }
.setcard { border:1px solid var(--line2); background:var(--paper); }
.setcard .shot { aspect-ratio:4/3; overflow:hidden; border-bottom:1px solid var(--line2); position:relative; background:var(--hatch1); }
.setcard .shot img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.setcard:hover .shot img { transform:scale(1.04); }
.setcard .meta { display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:16px 18px; }
.setcard .meta .nm { font-family:var(--disp); font-weight:700; text-transform:uppercase; font-size:1.05rem; letter-spacing:-0.01em; }
.setcard .meta .no { font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:0.1em; }

/* ---- Spec stamps ---- */
.stamps { display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:var(--line2); border:1px solid var(--line2); margin-top:8px; }
.stamp { padding:22px 20px; background:var(--bg); }
.stamp .n { font-family:var(--mono); font-size:10px; letter-spacing:0.12em; color:var(--rec); text-transform:uppercase; }
.stamp .big { font-family:var(--disp); font-weight:800; font-size:clamp(1.5rem,2.6vw,2.1rem); letter-spacing:-0.02em; margin-top:10px; line-height:1; }
.stamp .sub { font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:0.06em; margin-top:8px; text-transform:uppercase; }

/* ---- Per-stage benefits (Why shoot here) ---- */
.benefits { display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line2); border:1px solid var(--line2); }
.bcol { display:block; background:var(--bg); padding:26px 24px; transition:background .15s var(--ease); }
.bcol:hover { background:var(--panel); }
.bhead { display:flex; align-items:baseline; gap:11px; font-family:var(--disp); font-weight:700; text-transform:uppercase; letter-spacing:-0.01em; font-size:1.35rem; line-height:1; padding-bottom:16px; margin-bottom:4px; border-bottom:1px solid var(--line); }
.bno { font-family:var(--mono); font-size:11px; letter-spacing:0.08em; color:var(--rec); font-weight:400; }
.blist { list-style:none; }
.blist li { padding:11px 0; font-size:14.5px; color:var(--body); line-height:1.4; border-bottom:1px solid var(--line); }
.blist li:last-child { border-bottom:0; padding-bottom:0; }
.shared { display:flex; gap:18px; align-items:baseline; padding:16px 24px; border:1px solid var(--line2); border-top:0; background:var(--bg); flex-wrap:wrap; }
.shared-k { font-family:var(--mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--rec); flex:none; }
.shared-v { font-family:var(--mono); font-size:11.5px; letter-spacing:0.03em; color:var(--body); text-transform:uppercase; line-height:1.8; }

/* ---- Amenities ---- */
.amen { list-style:none; border-top:1px solid var(--line2); }
.amen li { display:flex; gap:16px; align-items:baseline; padding:15px 0; border-bottom:1px solid var(--line); color:var(--body); font-size:15px; }
.amen li .m { font-family:var(--mono); font-size:10px; letter-spacing:0.08em; color:var(--rec); flex:none; width:34px; }

/* ---- Gallery plates ---- */
.gallery { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-top:14px; }
.plate { position:relative; overflow:hidden; border:1px solid var(--line2); background:var(--hatch1); aspect-ratio:1/1; }
.plate img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.plate:hover img { transform:scale(1.05); }
.plate.wide { grid-column:span 2; aspect-ratio:2/1; }
.plate .cap { position:absolute; bottom:10px; left:12px; font-family:var(--mono); font-size:9px; letter-spacing:0.1em; text-transform:uppercase; color:#F7F6F1; mix-blend-mode:difference; }

/* ---- Marquee ---- */
.marquee { overflow:hidden; border-top:1px solid var(--line); border-bottom:2px solid var(--ink); background:var(--paper); }
.mq { display:flex; gap:0; white-space:nowrap; animation:marq 34s linear infinite; }
.mq-item { display:inline-flex; align-items:center; gap:20px; padding:16px 0; font-family:var(--disp); font-weight:800; text-transform:uppercase; font-size:clamp(1.1rem,2vw,1.6rem); letter-spacing:-0.01em; }
.mq-item .sep { width:8px; height:8px; background:var(--rec); display:inline-block; flex:none; margin:0 26px; }

/* ---- Estimate builder ---- */
.calc-wrap { display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(24px,3.5vw,48px); align-items:start; }
.calc-wrap.solo { grid-template-columns:1fr; }
.calc { border:1px solid var(--line2); }
.calc .seg { display:flex; border-bottom:1px solid var(--line2); }
.calc .seg button { flex:1; background:transparent; border:0; border-right:1px solid var(--line2); padding:15px 8px;
  font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--body); cursor:pointer; transition:background .15s, color .15s; }
.calc .seg button:last-child { border-right:0; }
.calc .seg button[aria-pressed="true"] { background:var(--ink); color:var(--paper); }
.calc .frow { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:17px 20px; border-bottom:1px solid var(--line); }
.calc .frow:last-child { border-bottom:0; }
.calc .lab { font-size:14px; color:var(--fg); }
.calc .lab small { display:block; font-family:var(--mono); font-size:10px; letter-spacing:0.05em; color:var(--muted); text-transform:uppercase; margin-top:4px; }
.calc .label-uc { font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); padding:14px 20px 0; display:block; }
.calc .hint { padding:14px 20px; font-size:12px; line-height:1.5; color:var(--muted); border-bottom:1px solid var(--line); }
.calc .stepper { display:inline-flex; align-items:center; border:1px solid var(--line2); flex:none; }
.calc .stepper button { width:38px; height:38px; background:transparent; border:0; color:var(--fg); font-family:var(--mono); font-size:16px; cursor:pointer; }
.calc .stepper button:hover { background:var(--ink); color:var(--paper); }
.calc .stepper .val { min-width:44px; text-align:center; font-family:var(--mono); font-size:15px; border-left:1px solid var(--line2); border-right:1px solid var(--line2); padding:9px 0; }
.calc .toggle { position:relative; width:46px; height:26px; border:1px solid var(--line2); background:transparent; cursor:pointer; flex:none; transition:background .18s var(--ease); }
.calc .toggle::after { content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; background:var(--ink); transition:transform .18s var(--ease); }
.calc .toggle[aria-pressed="true"] { background:var(--ink); }
.calc .toggle[aria-pressed="true"]::after { background:var(--paper); transform:translateX(20px); }

.receipt { border:1px solid var(--ink); }
.receipt .rhead { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-bottom:2px solid var(--ink); font-family:var(--mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); }
.receipt .row { display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:13px 20px; border-bottom:1px solid var(--line); }
.receipt .row .k { font-family:var(--mono); font-size:12px; letter-spacing:0.03em; text-transform:uppercase; color:var(--body); }
.receipt .row .v { font-family:var(--mono); font-size:13px; }
.receipt .row .v.neg { color:var(--rec); }
.receipt .row.total { border-bottom:0; padding:18px 20px; border-top:2px solid var(--ink); }
.receipt .row.total .k { color:var(--ink); font-weight:500; }
.receipt .row.total .v.grand { font-family:var(--disp); font-weight:800; font-size:1.9rem; letter-spacing:-0.02em; }
.grand.bump { animation:bump .3s var(--ease); }
.mailrow { display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.mailinput { flex:1 1 180px; min-width:0; background:transparent; border:1px solid var(--line2); color:var(--fg);
  font-family:var(--mono); font-size:12px; letter-spacing:0.04em; padding:0 14px; height:46px; }
.mailinput::placeholder { color:var(--muted); }
.mailinput:focus { outline:2px solid var(--ink); outline-offset:-2px; border-color:var(--ink); }
.mailrow .btn { height:46px; flex:none; }
.form-note { font-family:var(--mono); font-size:11px; letter-spacing:0.05em; color:var(--muted); text-transform:uppercase; }
.form-note.ok { color:#4f7d5c; }
.form-note.err { color:var(--rec); }

/* ---- Request-these-dates booking form (estimate -> qualified inquiry) ---- */
.est-book { border:1px solid var(--line2); border-top:2px solid var(--ink); margin-top:24px; }
.est-book-head { padding:16px 20px; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); }
.est-book-head b { color:var(--ink); font-weight:500; }
.est-form { padding:18px 20px 20px; }
.est-fgrid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.est-form input, .est-form textarea { width:100%; background:transparent; border:1px solid var(--line2); color:var(--fg); font-family:var(--sans); font-size:15px; padding:11px 14px; }
.est-form textarea { margin-top:10px; min-height:70px; resize:vertical; }
.est-form input:focus, .est-form textarea:focus { outline:2px solid var(--ink); outline-offset:-2px; }
.est-form input::placeholder, .est-form textarea::placeholder { color:var(--muted); }
.est-form-foot { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:14px; flex-wrap:wrap; }
.est-attached { font-family:var(--mono); font-size:11px; letter-spacing:0.04em; text-transform:uppercase; color:var(--body); background:var(--panel); border:1px solid var(--line); padding:10px 13px; margin-bottom:12px; }
.est-attached b { color:var(--ink); font-weight:600; }
.est-copy { display:flex; align-items:center; gap:9px; margin-top:12px; font-size:13px; color:var(--body); cursor:pointer; }
.est-copy input { width:16px; height:16px; flex:none; accent-color:var(--rec); cursor:pointer; }
@media (max-width:820px){ .est-fgrid { grid-template-columns:1fr; } }

/* ---- Volume spec sheet ---- */
.specsheet { border:1px solid var(--line2); font-family:var(--mono); }
.specsheet .srow2 { display:grid; grid-template-columns:1fr 1.4fr; border-bottom:1px solid var(--line); }
.specsheet .srow2:last-child { border-bottom:0; }
.specsheet .sk { padding:14px 20px; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); border-right:1px solid var(--line); }
.specsheet .sv { padding:14px 20px; font-size:13px; color:var(--fg); display:flex; align-items:center; gap:10px; }
.specsheet .sv .yes { width:8px; height:8px; border-radius:50%; background:var(--rec); flex:none; }
.ucards { display:grid; grid-template-columns:repeat(3, 1fr); gap:0; border:1px solid var(--line2); }
.ucard { padding:26px 24px; border-right:1px solid var(--line2); border-bottom:1px solid var(--line2); }
.ucard:nth-child(3n) { border-right:0; }
.ucard .n { font-family:var(--mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--rec); }
.ucard h3 { font-family:var(--disp); font-weight:700; text-transform:uppercase; font-size:1.15rem; margin:12px 0 8px; letter-spacing:-0.01em; }
.ucard p { color:var(--body); font-size:14px; line-height:1.6; }

/* Volume schematic hero */
.vhero { position:relative; border:1px solid var(--line); background:var(--ink); overflow:hidden; }
.vhero svg { display:block; width:100%; height:auto; }

/* ---- Inquiry form ---- */
.inquiry { display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line2); }
.inquiry .fld { border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:0; }
.inquiry .fld:nth-child(2n) { border-right:0; }
.inquiry .fld.full { grid-column:1 / -1; border-right:0; }
.inquiry label { display:block; font-family:var(--mono); font-size:9px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); padding:14px 18px 0; }
.inquiry input, .inquiry select, .inquiry textarea { width:100%; background:transparent; border:0; color:var(--fg);
  font-family:var(--sans); font-size:15px; padding:8px 18px 16px; }
.inquiry textarea { resize:vertical; min-height:100px; }
.inquiry input:focus, .inquiry select:focus, .inquiry textarea:focus { outline:2px solid var(--ink); outline-offset:-2px; background:var(--panel); }
.inquiry select { font-family:var(--mono); font-size:13px; text-transform:uppercase; letter-spacing:0.04em; }
.inquiry .submit-row { grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 18px; flex-wrap:wrap; }
.form-status { font-family:var(--mono); font-size:12px; letter-spacing:0.04em; min-height:18px; }
.form-status.ok { color:#4f7d5c; } .form-status.err { color:var(--rec); }

/* ---- CTA ---- */
.cta { text-align:center; max-width:60ch; margin:0 auto; }
.cta .h2 { margin-bottom:18px; }
.cta .lede { margin:0 auto 28px; }

/* ---- Footer ---- */
.site-footer { border-top:2px solid var(--ink); }
.foot { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:30px; padding:48px 0 36px; }
.foot p { color:var(--body); font-size:13px; margin-top:12px; max-width:34ch; }
.foot-col h3 { font-family:var(--mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.foot-col a { display:block; font-size:14px; color:var(--body); padding:5px 0; }
.foot-col a:hover { color:var(--ink); }
.foot-bottom { display:flex; justify-content:space-between; gap:14px; padding:16px 0; border-top:1px solid var(--line); font-family:var(--mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); flex-wrap:wrap; }

/* ---- Reveal ---- */
.reveal { opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity:1; transform:none; }

/* ---- Printable estimate document ---- */
.estimate-doc { display:none; }
@media print {
  body > *:not(.estimate-doc) { display:none !important; }
  .estimate-doc { display:block !important; padding:40px; color:#131311; background:#fff; font-family:'Archivo', sans-serif; }
  .edoc-head { display:flex; justify-content:space-between; border-bottom:2px solid #131311; padding-bottom:14px; }
  .edoc-brand { font-family:'Archivo',sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:0.02em; font-size:15px; display:flex; align-items:center; gap:8px; }
  .edoc-brand .m { width:20px; height:16px; background:#131311; -webkit-mask:url("../mark.svg") center/contain no-repeat; mask:url("../mark.svg") center/contain no-repeat; }
  .edoc-meta { font-family:'IBM Plex Mono',monospace; font-size:10px; text-align:right; letter-spacing:0.08em; text-transform:uppercase; color:#8A8880; }
  .estimate-doc h1 { font-family:'Archivo',sans-serif; font-weight:800; text-transform:uppercase; font-size:34px; letter-spacing:-0.02em; margin:26px 0 12px; }
  .estimate-doc .intro { color:#55534C; font-size:13px; line-height:1.6; max-width:70ch; }
  .edoc-section { margin-top:26px; }
  .edoc-section h2 { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:#8A8880; border-bottom:1px solid #131311; padding-bottom:8px; margin-bottom:14px; }
  .edoc-rows .r { display:flex; justify-content:space-between; font-family:'IBM Plex Mono',monospace; font-size:12px; text-transform:uppercase; padding:8px 0; border-bottom:1px solid #e6e2d8; }
  .edoc-rows .r.total { border-top:2px solid #131311; border-bottom:0; font-size:15px; padding-top:12px; margin-top:4px; }
  .edoc-rows .rv { font-weight:600; text-align:right; }
  .edoc-two { display:grid; grid-template-columns:1fr 1fr; gap:30px; }
  .edoc-list { list-style:none; }
  .edoc-list li { font-size:12px; color:#55534C; padding:4px 0; }
  .edoc-terms { font-size:11px; color:#55534C; line-height:1.6; }
  .edoc-foot { display:flex; justify-content:space-between; font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:0.08em; text-transform:uppercase; color:#8A8880; border-top:1px solid #131311; padding-top:12px; margin-top:30px; }
}

/* ---- Screen-reader only ---- */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---- Honeypot ---- */
.hp, .ask-hp { position:absolute !important; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }

/* ---- AI concierge widget ---- */
.ask-fab { position:fixed; right:24px; bottom:24px; z-index:90; display:inline-flex; align-items:center; gap:9px;
  background:var(--ink); color:var(--paper); border:1px solid var(--ink); cursor:pointer;
  font-family:var(--mono); font-size:12px; letter-spacing:0.12em; text-transform:uppercase; padding:14px 18px;
  transition:transform .25s var(--ease), opacity .25s var(--ease); }
.ask-fab:hover { transform:translateY(-2px); background:var(--rec); border-color:var(--rec); color:#fff; }
.ask-fab.hide { opacity:0; pointer-events:none; transform:translateY(8px); }
.ask-fab .ask-dot { width:15px; height:12px; background:var(--paper); flex:none;
  -webkit-mask:url("../mark.svg") center/contain no-repeat; mask:url("../mark.svg") center/contain no-repeat; }
.ask-panel { position:fixed; right:24px; bottom:24px; z-index:91; width:min(380px, calc(100vw - 40px));
  height:min(560px, calc(100vh - 52px)); display:none; flex-direction:column; background:var(--paper); border:2px solid var(--ink); }
.ask-panel.on { display:flex; animation:askin .28s var(--ease) both; }
.ask-head { display:flex; align-items:center; justify-content:space-between; padding:0; border-bottom:2px solid var(--ink); }
.ask-title { display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; padding:15px 18px; }
.ask-title .ask-dot { width:16px; height:13px; background:var(--ink); flex:none;
  -webkit-mask:url("../mark.svg") center/contain no-repeat; mask:url("../mark.svg") center/contain no-repeat; }
.ask-rec { display:inline-flex; align-items:center; gap:7px; margin-left:8px; font-size:9px; color:var(--muted); letter-spacing:0.1em; }
.ask-rec i { width:7px; height:7px; border-radius:50%; background:var(--rec); animation:recblink 1.2s steps(1) infinite; }
.ask-x { background:none; border:0; border-left:1px solid var(--line); color:var(--muted); cursor:pointer; font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; padding:15px 18px; align-self:stretch; }
.ask-x:hover { color:var(--ink); background:var(--panel); }
.ask-log { flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:12px; }
.ask-msg { max-width:85%; font-size:14px; line-height:1.55; padding:11px 14px; }
.ask-msg.bot { align-self:flex-start; background:var(--panel); border:1px solid var(--line2); color:var(--ink); }
.ask-msg.me { align-self:flex-end; background:var(--ink); color:var(--paper); }
.ask-msg.typing { color:var(--muted); letter-spacing:0.3em; }
.ask-form { display:flex; border-top:1px solid var(--line2); }
.ask-input { flex:1; min-width:0; background:transparent; border:0; color:var(--ink); font-family:var(--sans); font-size:14px; padding:0 16px; height:54px; }
.ask-input:focus { outline:none; box-shadow:inset 0 -2px 0 var(--ink); }
.ask-input::placeholder { color:var(--muted); }
.ask-send { flex:none; background:var(--ink); color:var(--paper); border:0; cursor:pointer; font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; padding:0 20px; }
.ask-send:hover { background:var(--rec); color:#fff; }
.ask-foot { padding:11px 18px; border-top:1px solid var(--line); font-family:var(--mono); font-size:9px; letter-spacing:0.05em; text-transform:uppercase; color:var(--muted); line-height:1.5; }
/* Follow-up email capture inside the chat, for questions the concierge cannot answer */
.ask-fu { align-self:flex-start; max-width:85%; display:flex; flex-direction:column; gap:8px; }
.ask-fu .ask-fu-note { font-size:14px; line-height:1.55; padding:11px 14px; background:var(--panel); border:1px solid var(--line2); color:var(--ink); }
.ask-fu form { display:flex; border:1px solid var(--line2); }
.ask-fu .ask-fu-input { flex:1; min-width:0; background:transparent; border:0; color:var(--ink); font-family:var(--sans); font-size:14px; padding:0 14px; height:44px; }
.ask-fu .ask-fu-input:focus { outline:none; box-shadow:inset 0 -2px 0 var(--ink); }
.ask-fu .ask-fu-input.err { box-shadow:inset 0 -2px 0 var(--rec); }
.ask-fu .ask-fu-input::placeholder { color:var(--muted); }
.ask-fu .ask-fu-send { flex:none; background:var(--ink); color:var(--paper); border:0; cursor:pointer; font-family:var(--mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; padding:0 16px; }
.ask-fu .ask-fu-send:hover { background:var(--rec); color:#fff; }

/* ---- Lightbox ---- */
.lb { position:fixed; inset:0; z-index:100; background:rgba(15,15,13,0.96); display:none; align-items:center; justify-content:center; }
.lb.on { display:flex; }
.lb img { max-width:88vw; max-height:82vh; object-fit:contain; border:1px solid rgba(247,246,241,0.2); }
.lb button { position:absolute; background:none; border:0; color:#F7F6F1; cursor:pointer; font-family:var(--mono); }
.lb-close { top:22px; right:26px; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; }
.lb-prev, .lb-next { top:50%; transform:translateY(-50%); font-size:40px; padding:10px 18px; }
.lb-prev { left:18px; } .lb-next { right:18px; }
.lb-cap { position:absolute; bottom:24px; left:0; right:0; text-align:center; font-family:var(--mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:#B7B4AC; }

/* ---- 404 ---- */
.err { min-height:64vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.err .big { font-family:var(--disp); font-weight:800; font-size:clamp(5rem,18vw,12rem); line-height:1; letter-spacing:-0.03em; text-transform:uppercase; }

/* ---- Reviews ---- */
.rating { display:flex; align-items:baseline; gap:14px; margin-top:16px; flex-wrap:wrap; }
.rating-score { font-family:var(--disp); font-weight:800; font-size:clamp(2.2rem,6vw,3.4rem); line-height:1; letter-spacing:-0.02em; }
.rating-stars { color:var(--rec); font-size:19px; letter-spacing:3px; }
.rating-src { font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); }
.reviews { margin-top:32px; display:grid; grid-template-columns:repeat(3,1fr); border-top:2px solid var(--ink); }
.rev { margin:0; padding:26px var(--pad) 28px; border-right:1px solid var(--line2); border-bottom:1px solid var(--line2); display:flex; flex-direction:column; }
.rev:nth-child(3n) { border-right:0; }
.rev blockquote { margin:0 0 20px; font-family:var(--disp); font-weight:500; font-size:1.02rem; line-height:1.5; letter-spacing:-0.01em; color:var(--ink); }
.rev figcaption { margin-top:auto; }
.rev-cap { margin-top:auto; }
.rev-name { display:block; font-family:var(--mono); font-size:12px; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink); padding-bottom:11px; margin-bottom:12px; border-bottom:1px solid var(--line2); }
.rev-slate { display:grid; grid-template-columns:auto 1fr; gap:7px 14px; }
.rev-slate .rk { position:relative; padding-left:13px; align-self:center; font-family:var(--mono); font-size:9px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); }
.rev-slate .rk::before { content:""; position:absolute; left:0; top:50%; width:5px; height:5px; background:var(--rec); transform:translateY(-50%); }
.rev-slate .rv { font-family:var(--mono); font-size:11px; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink); }
.reviews-foot { margin-top:18px; font-family:var(--mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); }

/* ---- Booking terms ---- */
.terms-grid { margin-top:32px; display:grid; grid-template-columns:repeat(2,1fr); border-top:2px solid var(--ink); }
.term { padding:24px var(--pad) 26px; border-right:1px solid var(--line2); border-bottom:1px solid var(--line2); }
.term:nth-child(2n) { border-right:0; }
.term h3 { font-family:var(--mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); margin:0 0 10px; }
.term p { margin:0; font-size:14px; line-height:1.6; color:var(--body); }

/* ---- Comparison grid ---- */
.compare { margin-top:32px; border-top:2px solid var(--ink); }
.crow { display:grid; grid-template-columns:0.9fr 1.25fr 1.25fr; border-bottom:1px solid var(--line2); }
.crow > * { padding:15px 18px; }
.crow .cattr { font-family:var(--mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); align-self:center; }
.crow .cus, .crow .cthem { font-size:14px; line-height:1.45; border-left:1px solid var(--line2); }
.crow .cus { color:var(--ink); position:relative; padding-left:34px; }
.crow .cus::before { content:""; position:absolute; left:18px; top:19px; width:6px; height:6px; background:var(--rec); }
.crow .cthem { color:var(--muted); }
.compare .chead { border-bottom:2px solid var(--ink); }
.compare .chead .cus, .compare .chead .cthem { font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; font-weight:500; }
.compare .chead .cus { color:var(--ink); padding-left:18px; }
.compare .chead .cthem { color:var(--muted); }
.compare .chead .cus::before { display:none; }

/* ---- FAQ ---- */
.faq-group { margin-top:44px; max-width:880px; }
.faq-group:first-of-type { margin-top:4px; }
.faq-group .glabel { display:block; font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--rec); padding-bottom:11px; border-bottom:2px solid var(--ink); }
.faq { border-bottom:1px solid var(--line2); }
.faq > summary { list-style:none; cursor:pointer; display:flex; align-items:baseline; justify-content:space-between; gap:24px; padding:20px 0; font-family:var(--disp); font-weight:600; font-size:clamp(1rem,2.2vw,1.15rem); letter-spacing:-0.01em; color:var(--ink); }
.faq > summary::-webkit-details-marker { display:none; }
.faq > summary::after { content:"+"; font-family:var(--mono); font-size:20px; line-height:1; color:var(--rec); flex:none; }
.faq[open] > summary::after { content:"\2212"; }
.faq .fa { padding:2px 0 24px; max-width:72ch; font-size:15px; line-height:1.65; color:var(--body); }

/* ---- Work / case studies ---- */
.work-grid { margin-top:32px; display:grid; grid-template-columns:repeat(3,1fr); border-top:2px solid var(--ink); }
.work-card { border-right:1px solid var(--line2); border-bottom:1px solid var(--line2); display:flex; flex-direction:column; }
.work-card:nth-child(3n) { border-right:0; }
.work-card .shot { aspect-ratio:4/3; overflow:hidden; background:var(--panel); }
.work-card .shot img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease); }
.work-card:hover .shot img { transform:scale(1.04); }
.work-card .wmeta { padding:16px 18px 22px; }
.work-card .wtag { font-family:var(--mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--rec); }
.work-card .wtitle { display:block; margin-top:9px; font-family:var(--disp); font-weight:600; font-size:1.06rem; line-height:1.25; letter-spacing:-0.01em; color:var(--ink); }
.work-card .wsub { display:block; margin-top:8px; font-family:var(--mono); font-size:10px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); }
.case-snap { margin-top:26px; display:grid; grid-template-columns:repeat(5,1fr); border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); }
.case-snap .cs { padding:16px 16px 18px; border-right:1px solid var(--line2); }
.case-snap .cs:last-child { border-right:0; }
.case-snap .csk { display:block; font-family:var(--mono); font-size:9px; letter-spacing:0.12em; text-transform:uppercase; color:var(--rec); }
.case-snap .csv { display:block; margin-top:7px; font-family:var(--mono); font-size:12px; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink); }

/* ---- Keyframes ---- */
@keyframes recblink { 0%,50% { opacity:1; } 51%,100% { opacity:0.15; } }
@keyframes marq { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes askin { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes bump { 0% { transform:none; } 30% { transform:translateY(-3px); } 100% { transform:none; } }

/* ---- Responsive ---- */
@media (max-width:1024px){
  .slate-fields { grid-template-columns:1.6fr 1fr 1fr 1.4fr; }
  .sf.hide-md { display:none; }
  .exhibits, .ucards { grid-template-columns:1fr 1fr; }
  .ucard:nth-child(3n) { border-right:1px solid var(--line2); }
  .ucard:nth-child(2n) { border-right:0; }
  .gallery { grid-template-columns:repeat(3, 1fr); }
  .reviews { grid-template-columns:1fr 1fr; }
  .rev:nth-child(3n) { border-right:1px solid var(--line2); }
  .rev:nth-child(2n) { border-right:0; }
  .work-grid { grid-template-columns:1fr 1fr; }
  .work-card:nth-child(3n) { border-right:1px solid var(--line2); }
  .work-card:nth-child(2n) { border-right:0; }
}
@media (max-width:820px){
  .nav { display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0; background:var(--paper); border-bottom:2px solid var(--ink); padding:6px 20px 16px; }
  .nav.open { display:flex; }
  .nav a { padding:12px 0; border-bottom:1px solid var(--line); }
  .nav-toggle { display:inline-block; }
  .slate-fields { grid-template-columns:1fr 1fr 1.3fr; }
  .sf.hide-sm { display:none; }
  .split, .split.even, .calc-wrap, .specsheet .srow2 { grid-template-columns:1fr; }
  .stamps { grid-template-columns:1fr 1fr; }
  .exhibits, .sets, .ucards, .inquiry, .benefits { grid-template-columns:1fr; }
  .reviews { grid-template-columns:1fr; }
  .rev, .rev:nth-child(2n), .rev:nth-child(3n) { border-right:0; }
  .terms-grid { grid-template-columns:1fr; }
  .term { border-right:0; }
  .work-grid { grid-template-columns:1fr; }
  .work-card, .work-card:nth-child(2n), .work-card:nth-child(3n) { border-right:0; }
  .case-snap { grid-template-columns:1fr 1fr; }
  .case-snap .cs { border-bottom:1px solid var(--line2); }
  .ucard { border-right:0; }
  .inquiry .fld { border-right:0; }
  .hero-row .btn { margin-left:0; }
  .srow { grid-template-columns:1fr; gap:10px; padding:22px var(--pad); }
  .srow .go { padding:12px; }
  .foot { grid-template-columns:1fr 1fr; }
}
@media (max-width:620px){
  /* Stack the slate strip into clean full-width rows on phones (no uneven
     2-column split / mismatched vertical alignment). */
  .slate-fields { grid-template-columns:1fr; }
  .sf { border-right:0; border-bottom:1px solid var(--line); }
  .sf:last-child { border-bottom:0; }
  .sf.rec { justify-content:flex-start; }
  .sf.hide-xs { display:none; }
  .compare .crow { grid-template-columns:1fr 1fr; }
  .compare .crow .cattr { grid-column:1 / -1; padding:14px 18px 2px; }
  .compare .crow .cus { border-left:0; }
  .compare .chead .cattr { display:none; }
}
@media (max-width:480px){
  .gallery { grid-template-columns:1fr 1fr; }
  .plate.wide { grid-column:span 2; }
  .foot { grid-template-columns:1fr; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  * { animation:none !important; scroll-behavior:auto; }
  .reveal { opacity:1; transform:none; }
  .rec-dot, .ask-rec i { opacity:1; }
}