/* Studio Monarch Co.
   Layout: sleek and modern, rounded cards, pill buttons, sections alternate
   white, black, burgundy, sage, and cream. Each suite has its own style. */
:root {
  --white: #ffffff;
  --cream: #f6f1ea;
  --black: #0e0e0e;
  --ink: #161616;
  --muted: #6c6a66;
  --line: #e7e2da;
  --burg: #59111b;
  --burg-dark: #3f0b13;
  --gold: #cea73f;
  --gold-soft: #e9d49a;
  --sage: #8b9b80;
  --sage-deep: #5f6f57;
  --sage-light: #e4e9de;
  --green: #16302b;
  --serif: 'Playfair Display', Georgia, serif;
  --didone: 'Bodoni Moda', 'Playfair Display', Georgia, serif;
  --sans: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --script: 'Mrs Saint Delafield', 'Snell Roundhand', cursive;
  --r: 14px;
  --head-h: 78px;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 16px/1.65 var(--sans); overflow-x: hidden; }
img, video { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.06; font-weight: 600; text-wrap: balance; }
p { margin: 0 0 1em; }
em { font-style: italic; color: var(--gold); }
.wrap { width: min(1200px, calc(100% - 40px)); margin: 0 auto; }
.wrap.narrow { width: min(820px, calc(100% - 40px)); }
.center { text-align: center; margin-top: 40px; }
.empty { text-align: center; color: var(--muted); padding: 30px 0; }
.small { font-size: 14px; color: var(--muted); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- buttons and links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 12px 24px; border-radius: 999px; font: 600 14px/1 var(--sans); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background .25s, color .25s, border-color .25s, transform .25s; }
.btn:hover { transform: translateY(-1px); }
.btn.burg { background: var(--burg); color: #fff; }
.btn.burg:hover { background: var(--burg-dark); }
.btn.black { background: #000; color: #fff; }
.btn.black:hover { background: var(--gold); color: #000; }
.btn.gold { background: var(--gold); color: #1a1205; }
.btn.gold:hover { background: #b9922f; }
.btn.green { background: var(--green); color: #fff; }
.btn.green:hover { background: #0d201c; }
.btn.line { border-color: var(--ink); color: var(--ink); }
.btn.line:hover { background: var(--ink); color: #fff; }
.btn.line-gold { border-color: var(--gold); color: #fff; }
.btn.line-gold:hover { background: var(--gold); color: #000; }
.btn.line-light { border-color: rgba(255,255,255,.6); color: #fff; }
.btn.line-light:hover { background: #fff; color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.btn-row.center { justify-content: center; margin-top: 0; }
.text-link { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1 var(--sans); text-decoration: none; color: inherit; }
.text-link::after { content: '\2192'; transition: transform .25s; }
a:hover .text-link::after, .text-link:hover::after { transform: translateX(4px); }
.text-link.dark { color: var(--ink); margin-top: 6px; }

/* ---------- type helpers ---------- */
.kicker { display: inline-block; font: 600 12px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--burg); margin-bottom: 14px; }
.kicker.light { color: var(--gold); }
.section h2, .split-head h2, .h2, .reel-head h2, .showcase-head h2 { font: 600 clamp(34px, 4.6vw, 58px)/1.04 var(--serif); letter-spacing: -.01em; }
.h2 { margin-bottom: 36px; }
.h3 { font: 600 24px/1.2 var(--serif); margin-bottom: 18px; }
.lede { font-size: 17px; color: var(--muted); }
.prompt { font: italic 400 18px/1.4 var(--serif); color: var(--burg); margin: 16px 0 0; }

/* ---------- header ---------- */
.site-head { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.site-head.scrolled { border-bottom-color: var(--line); }
.head-inner { height: var(--head-h); width: min(1280px, calc(100% - 40px)); margin: 0 auto; display: flex; align-items: center; gap: 26px; }
.brand img { height: 50px; width: auto; }
.nav { display: flex; gap: 24px; margin-left: auto; align-items: center; }
.nav > a, .has-menu > a { font: 500 14.5px/1 var(--sans); text-decoration: none; color: #333; padding: 8px 0; border-bottom: 1.5px solid transparent; }
.nav > a:hover, .has-menu > a:hover { color: var(--burg); }
.nav [aria-current="page"] { color: var(--burg); border-bottom-color: var(--gold); }
.has-menu { position: relative; }
.menu { position: absolute; top: calc(100% + 8px); left: -16px; min-width: 220px; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 20px 40px rgba(0,0,0,.08); opacity: 0; visibility: hidden; transform: translateY(6px); transition: .2s; }
.has-menu:hover .menu, .has-menu:focus-within .menu { opacity: 1; visibility: visible; transform: none; }
.menu a { display: block; padding: 10px 12px; border-radius: 8px; text-decoration: none; font-size: 14.5px; }
.menu a:hover { background: var(--cream); color: var(--burg); }
.head-cta { min-height: 42px; padding: 10px 20px; }
.burger { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; position: relative; }
.burger span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--ink); transition: .25s; }
.burger span:first-child { top: 17px; } .burger span:last-child { top: 26px; }
.burger[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }
.mobile-menu { padding: 6px 20px 24px; border-top: 1px solid var(--line); display: grid; background: #fff; }
.mobile-menu a:not(.btn) { padding: 13px 0; text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--line); }
.mobile-menu a.sub { padding-left: 16px; color: var(--muted); font-weight: 400; }
.mobile-menu .btn { margin-top: 16px; }

/* ---------- hero (the original burgundy hero) ---------- */
.hero { background: #5a101b; color: #fff; overflow: hidden; }
.hero-inner { width: min(1240px, calc(100% - 40px)); margin: 0 auto; display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; min-height: clamp(540px, calc(100vh - var(--head-h)), 760px); }
.hero-copy { align-self: center; padding: 60px 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-logo { width: min(560px, 92%); height: auto; }
.hero-tag { font: 500 15px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; margin: 24px 0 24px; }
.hero-tag em { color: var(--gold); font-style: normal; }
.hero-photo { align-self: end; display: flex; justify-content: center; }
.hero-photo img { max-height: min(720px, calc(100vh - var(--head-h) - 20px)); width: auto; }

/* ---------- bars ---------- */
.quote-bar { background: #000; color: #fff; padding: 60px 20px; text-align: center; }
.quote-bar p { width: min(820px, 100%); margin: 0 auto; font: 400 clamp(24px, 3vw, 34px)/1.25 var(--serif); }
.quote-bar em { font-weight: 600; }
.print-strip { height: 16px; background: var(--gold) center / 600px auto repeat; }
.quote-burg { background: var(--burg); color: #fff; padding: 64px 20px; text-align: center; }
.quote-burg p { width: min(780px, 100%); margin: 0 auto; font: italic 400 clamp(22px, 2.6vw, 30px)/1.35 var(--serif); }
.quote-burg em { color: var(--gold-soft); }

/* ---------- sections ---------- */
.section { padding: 100px 0; }
.section.tight { padding-top: 50px; }
.section.white { background: var(--white); }
.section.cream { background: var(--cream); }
.section.sage-light { background: var(--sage-light); }
.split-head { display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: end; margin-bottom: 48px; }
.split-head .lede:last-of-type { margin-bottom: 14px; }
.page-head { background: var(--cream); padding: 80px 0 64px; }
.page-head h1 { font: 600 clamp(40px, 6vw, 76px)/1.02 var(--serif); letter-spacing: -.015em; margin-bottom: 18px; max-width: 900px; }
.page-head .lede { max-width: 620px; }
.page-head.sage { background: var(--sage-deep); color: #fff; }
.page-head.sage .kicker { color: var(--gold-soft); }
.page-head.sage .lede { color: #e4e9de; }
.page-head.burg { background: var(--burg); color: #fff; }
.page-head.burg .kicker { color: var(--gold); }
.page-head.burg .lede { color: #efdcdf; }

/* ---------- the pinned phone showcase ---------- */
.showcase { background: var(--cream); padding: 90px 0 70px; }
.showcase-head { text-align: center; margin-bottom: 26px; }
.showcase-head h2 { font-size: clamp(30px, 3.8vw, 50px); }
.showcase-stage { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 40px; width: min(1100px, calc(100% - 40px)); margin: 0 auto; }
.phone { width: clamp(230px, 22vw, 290px); aspect-ratio: 9 / 18.5; border-radius: 42px; padding: 11px; background: #111; box-shadow: 0 40px 80px rgba(40,20,10,.25), inset 0 0 0 2px #2a2a2a; position: relative; }
.phone::before { content: ''; position: absolute; top: 20px; left: 50%; width: 80px; height: 22px; margin-left: -40px; background: #000; border-radius: 20px; z-index: 3; }
.phone-screen { position: relative; width: 100%; height: 100%; border-radius: 32px; overflow: hidden; background: #000; }
.screen { position: absolute; inset: 0; display: flex; align-items: flex-end; text-decoration: none; opacity: 0; transition: opacity .6s ease; }
.screen.on { opacity: 1; z-index: 2; }
.screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.screen-cap { position: relative; z-index: 1; width: 100%; padding: 22px 20px 26px; display: grid; gap: 6px; }
.screen-cap .kick { font: 600 10.5px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.screen-cap strong { font: 600 30px/1.05 var(--serif); }
.screen-cta { font: 600 13px/1 var(--sans); margin-top: 8px; }
.screen-cta::after { content: ' \2192'; }
.screen.s-simple { background: #fff; color: var(--ink); }
.screen.s-simple .screen-cap { background: #fff; border-top: 1px solid var(--ink); }
.screen.s-creative { background: var(--burg); color: #fff; }
.screen.s-creative .screen-cap { background: linear-gradient(to top, rgba(20,6,8,.9), rgba(20,6,8,0)); padding-top: 70px; }
.screen.s-creative strong { font-style: italic; }
.screen.s-garden { background: var(--sage-deep); color: #fff; }
.screen.s-garden .screen-cap { background: linear-gradient(to top, rgba(40,52,36,.9), transparent); padding-top: 60px; }
.screen.s-garden .kick { color: var(--gold-soft); }
.screen.s-editorial { background: #000; color: #fff; }
.screen.s-editorial strong { font: 700 34px/.98 var(--didone); text-transform: uppercase; }
.screen.s-editorial .kick { color: var(--gold); }
.screen.s-simple:not(:has(img))::before, .screen.s-garden:not(:has(img))::before, .screen.s-editorial:not(:has(img))::before { content: 'SM'; position: absolute; top: 34%; left: 0; right: 0; text-align: center; font: 400 64px/1 var(--didone); opacity: .14; }
.float-col { position: relative; height: 170px; }
.float-col.left { justify-self: end; width: min(260px, 100%); }
.float-col.right { justify-self: start; width: min(280px, 100%); }
.float-card { position: absolute; inset: 0 auto auto 0; width: 100%; padding: 20px 22px; background: #fff; border-radius: var(--r); box-shadow: 0 20px 40px rgba(60,40,20,.12); display: grid; gap: 6px; opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .5s; pointer-events: none; }
.float-card.on { opacity: 1; transform: none; pointer-events: auto; }
.fc-link { font: 600 13px/1 var(--sans); color: var(--burg); text-decoration: none; margin-top: 6px; }
.fc-link::after { content: ' \2192'; }
.fc-label { font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--burg); }
.float-card strong { font: 600 32px/1.05 var(--serif); }
.fc-sub { font-size: 14px; color: var(--muted); }
.showcase-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0 auto 40px; padding: 0 20px; }
.showcase-tabs button { font: 500 14px/1 var(--sans); padding: 11px 18px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--muted); cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.showcase-tabs button:hover { color: var(--burg); border-color: var(--burg); }
.showcase-tabs button.on { background: var(--burg); color: #fff; border-color: var(--burg); }
.showcase-dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.showcase-dots span { font: 500 13px/1 var(--sans); padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--muted); transition: .3s; }
.showcase-dots span.on { background: var(--burg); color: #fff; border-color: var(--burg); }

/* ---------- suite cards (each in its own style) ---------- */
.suite-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.suite { display: flex; flex-direction: column; border-radius: var(--r); overflow: hidden; text-decoration: none; border: 1px solid var(--line); transition: transform .3s, box-shadow .3s; }
.suite:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,.1); }
.suite-art { position: relative; aspect-ratio: 4 / 3; overflow: hidden; display: grid; place-items: center; }
.suite-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.suite-art .script { position: relative; font: 400 64px/1 var(--script); color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.45); }
.suite-text { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 20px 20px 22px; }
.suite .kick { font: 600 11px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.suite strong { font: 600 26px/1.1 var(--serif); }
.suite-intro { font-size: 14.5px; line-height: 1.55; }
.suite-foot { margin-top: auto; padding-top: 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; font: 600 14px/1 var(--sans); border-top: 1px solid currentColor; border-top-color: color-mix(in srgb, currentColor 18%, transparent); }
.suite.s-simple { background: #fff; color: var(--ink); border-color: #d9d9d9; }
.suite.s-simple .suite-art.empty { background: #f4f4f2; border-bottom: 1px solid #e3e3e3; }
.suite.s-simple .suite-art.empty::before { content: ''; width: 46%; aspect-ratio: 1; border: 1.5px solid var(--ink); clip-path: polygon(50% 0, 100% 40%, 100% 100%, 0 100%, 0 40%); }
.suite.s-simple .kick, .suite.s-simple .suite-intro { color: var(--muted); }
.suite.s-creative { background: var(--cream); color: var(--ink); border-color: #e3d6c6; }
.suite.s-creative .kick { color: var(--burg); }
.suite.s-creative strong { font-style: italic; color: var(--burg); }
.suite.s-creative .suite-art.empty { background: var(--burg); }
.suite.s-garden { background: var(--sage-deep); color: #fff; border-color: var(--sage-deep); }
.suite.s-garden .kick { color: var(--gold-soft); }
.suite.s-garden .suite-intro { color: #e5ebdf; }
.suite.s-garden .suite-art.empty { background: var(--sage); }
.suite.s-garden .suite-art.empty::before { content: ''; width: 42%; aspect-ratio: 3 / 4; border: 1.5px solid #fff; border-radius: 999px 999px 0 0; }
.suite.s-editorial { background: #000; color: #fff; border-color: #000; }
.suite.s-editorial .kick { color: var(--gold); }
.suite.s-editorial strong { font: 700 28px/1 var(--didone); text-transform: uppercase; letter-spacing: .01em; }
.suite.s-editorial .suite-intro { color: #cfcfcf; }
.suite.s-editorial .suite-art.empty { background: #fff; }
.suite.s-editorial .suite-art.empty::before { content: 'Aa'; font: 400 80px/1 var(--didone); color: #000; }

/* ---------- work ---------- */
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.work-card { text-decoration: none; color: inherit; display: block; }
.work-card.is-off { display: none; }
.work-media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; background: var(--cream); }
.work-media img, .work-media video { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.work-card:hover .work-media img { transform: scale(1.03); }
.work-blank { width: 100%; height: 100%; display: grid; place-items: center; background: var(--burg); }
.work-blank span { font: 400 50px/1 var(--didone); color: var(--gold); }
.play { position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 8px 20px rgba(0,0,0,.2); }
.play::after { content: ''; position: absolute; left: 25px; top: 20px; border-left: 16px solid var(--burg); border-block: 11px solid transparent; }
.work-meta { padding: 14px 2px 0; display: grid; gap: 3px; }
.work-room { font: 600 11px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--burg); }
.work-meta strong { font: 600 20px/1.25 var(--serif); }
.work-meta span:last-child:not(.work-room) { font-size: 14px; color: var(--muted); }

/* The portfolio page: photos keep their real shape. */
.work-wall { columns: 3 300px; column-gap: 20px; }
.work-wall .work-card { break-inside: avoid; margin-bottom: 26px; }
.work-wall .work-media { aspect-ratio: auto; }
.work-wall .work-media img { height: auto; }

/* Recent work row on the homepage. Normal scrolling, nothing pinned. */
.reel-section { background: #fff; padding: 90px 0 80px; }
.reel-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 36px; }
.reel-side .lede { margin-bottom: 18px; }
.reel-nav { display: flex; gap: 10px; }
.reel-btn { width: 46px; height: 46px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 18px; cursor: pointer; color: var(--ink, #111); transition: background .2s, color .2s; }
.reel-btn:hover { background: var(--burg); color: #fff; border-color: var(--burg); }
.reel { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 max(20px, calc((100vw - 1200px) / 2)) 14px; scrollbar-width: none; overscroll-behavior-x: contain; scroll-padding-inline: max(20px, calc((100vw - 1200px) / 2)); }
.reel::-webkit-scrollbar { display: none; }
.reel .work-card { flex: 0 0 clamp(250px, 26vw, 340px); scroll-snap-align: start; }
.reel .work-media { aspect-ratio: 4 / 5; }
.reel-more { margin-top: 30px; }
@media (max-width: 760px) { .reel-head { grid-template-columns: 1fr; gap: 14px; } .reel .work-card { flex-basis: 78vw; } }

/* ---------- steps ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.steps li { background: #fff; border-radius: var(--r); padding: 26px 24px 24px; border: 1px solid var(--line); }
.step-n { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--burg); color: #fff; font: 600 13px/1 var(--sans); margin-bottom: 18px; }
.steps li:nth-child(2) .step-n { background: var(--sage-deep); }
.steps li:nth-child(3) .step-n { background: #000; }
.steps li:nth-child(4) .step-n { background: var(--gold); color: #1a1205; }
.steps h3 { font: 600 22px/1.2 var(--serif); margin-bottom: 10px; }
.steps p { font-size: 15px; color: var(--muted); margin: 0; }
.two-col { display: grid; grid-template-columns: .9fr 1.1fr; gap: 50px; align-items: start; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.checks li { background: #fff; border-radius: 12px; padding: 16px 18px 16px 50px; position: relative; border: 1px solid var(--line); }
.checks li::before { content: ''; position: absolute; left: 18px; top: 19px; width: 16px; height: 9px; border-left: 2px solid var(--sage-deep); border-bottom: 2px solid var(--sage-deep); transform: rotate(-45deg); }

/* ---------- founder ---------- */
.founder { background: var(--burg); color: #fff; }
.founder-inner { width: min(1200px, calc(100% - 40px)); margin: 0 auto; display: grid; grid-template-columns: 1.15fr .85fr; gap: 60px; align-items: center; padding: 90px 0; }
.founder-name { font: 400 clamp(38px, 5vw, 62px)/1.02 var(--didone); text-transform: uppercase; color: var(--gold); margin-bottom: 22px; }
.founder-copy p { font-size: 17px; color: #f2e5e7; }
.founder-photo { border-radius: var(--r); overflow: hidden; background: #000; }
.founder-photo img { width: 100%; height: auto; }
.signature { font: 400 68px/1 var(--script); color: var(--gold-soft) !important; margin: 0 0 10px; }

/* ---------- team (small) ---------- */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.member { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.avatar { width: 56px; height: 56px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--sage-light); color: var(--sage-deep); font: 600 17px/1 var(--sans); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.member-text { display: grid; gap: 2px; min-width: 0; }
.member-text strong { font: 600 16px/1.2 var(--sans); }
.member-text span { font-size: 13.5px; color: var(--muted); line-height: 1.35; }

/* ---------- testimonials ---------- */
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.quote-card { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 26px 26px 22px; }
.section.white .quote-card { background: var(--cream); border-color: transparent; }
.quote-card blockquote { margin: 0; font-size: 15.5px; color: #3a3836; }
.quote-card blockquote::before { content: '\201C'; display: block; font: 700 54px/.6 var(--serif); color: var(--gold); margin: 6px 0 14px; }
.quote-card figcaption { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 2px; }
.quote-card figcaption strong { font: 600 15px/1.2 var(--sans); }
.quote-card figcaption span { font-size: 13px; color: var(--muted); }

/* ---------- FAQ ---------- */
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { cursor: pointer; list-style: none; padding: 22px 44px 22px 0; font: 600 19px/1.35 var(--serif); position: relative; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; position: absolute; right: 6px; top: 18px; font: 400 28px/1 var(--sans); color: var(--burg); transition: transform .25s; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { color: var(--muted); padding-right: 44px; }

/* ---------- teaser and closing ---------- */
.where-teaser { background: #000; color: #fff; padding: 26px 0; }
.teaser-inner { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.teaser-inner p { margin: 0; color: #ddd; }
.teaser-inner .text-link { color: var(--gold); }
.closing { background: var(--green); color: #fff; text-align: center; padding: 90px 0; }
.big-quote { font: italic 400 clamp(24px, 3.2vw, 36px)/1.32 var(--serif); margin-bottom: 30px; }
.closing-text { max-width: 440px; margin: 0 auto 24px; color: #d6e0dc; }

/* ---------- services and packages ---------- */
.filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.filter button { font: 500 14px/1 var(--sans); padding: 11px 16px; border-radius: 999px; border: 1px solid #cfc8bd; background: #fff; cursor: pointer; transition: .2s; }
.filter button:hover { border-color: var(--burg); color: var(--burg); }
.filter button.on { background: var(--burg); border-color: var(--burg); color: #fff; }
.pkg-group { margin-bottom: 56px; }
.pkg-group.is-off { display: none; }
.group-title { font: 600 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.group-title::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pkg { position: relative; display: flex; flex-direction: column; padding: 26px 24px 24px; border-radius: var(--r); border: 1px solid var(--line); background: #fff; transition: transform .3s, box-shadow .3s; }
.pkg:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(0,0,0,.07); }
.pkg.popular { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.pkg.is-off { display: none; }
.badge { position: absolute; top: -12px; left: 22px; background: var(--gold); color: #1a1205; font: 600 11px/1 var(--sans); letter-spacing: .06em; padding: 7px 11px; border-radius: 999px; }
.pkg h3 { font: 600 23px/1.15 var(--serif); margin-bottom: 14px; }
.pkg-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.pkg-price .pre { width: 100%; font: 600 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pkg-price strong { font: 600 36px/1 var(--sans); letter-spacing: -.02em; color: var(--burg); font-variant-numeric: tabular-nums; }
.pkg-price .unit { font-size: 14px; color: var(--muted); }
.pkg p { font-size: 15px; color: #4a4744; }
.pkg p.note { color: var(--burg); font-size: 14px; }
.pkg ul { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 7px; font-size: 14.5px; }
.pkg li { padding-left: 18px; position: relative; }
.pkg li::before { content: ''; position: absolute; left: 2px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.pkg .text-link { margin-top: auto; padding-top: 10px; color: var(--burg); }
.perk { text-align: center; font: italic 400 19px/1.4 var(--serif); color: var(--burg); margin: 10px auto 0; max-width: 640px; }

/* ---------- suite pages: four different rooms ---------- */
.suite-hero { padding: 64px 0 70px; }
.suite-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: center; }
.suite-hero-grid.no-art { grid-template-columns: 1fr; max-width: 900px; }
.suite-hero h1 { font: 600 clamp(40px, 6vw, 74px)/1.02 var(--serif); letter-spacing: -.015em; margin-bottom: 18px; }
.suite-hero .lede { max-width: 600px; }
.suite-hero-art { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; display: grid; place-items: center; }
.suite-hero-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.suite-hero-art .script { position: relative; font: 400 clamp(80px, 9vw, 130px)/1 var(--script); color: #fff; text-shadow: 0 3px 20px rgba(0,0,0,.4); }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 40px; }
.tabs a { font: 500 13.5px/1 var(--sans); padding: 10px 15px; border-radius: 999px; text-decoration: none; border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 30%, transparent); }
.tabs a[aria-current="page"] { border-color: currentColor; font-weight: 600; }
.suite-packages { padding: 70px 0 40px; }
.suite-band { padding: 80px 0; }
.next-suite { display: grid; justify-items: center; gap: 10px; padding: 70px 20px; text-decoration: none; text-align: center; border-top: 1px solid var(--line); }
.next-suite strong { font: 600 clamp(32px, 4vw, 50px)/1.05 var(--serif); }
.next-suite .kicker { margin: 0; }
.btn.primary, .btn.secondary { border: 1px solid transparent; }

/* Simple: real estate. White, black, crisp. */
.s-simple .suite-hero { background: #fff; border-bottom: 1px solid #e5e5e5; }
.s-simple .kicker { color: #555; }
.s-simple em { color: var(--ink); }
.s-simple .btn.primary { background: #000; color: #fff; }
.s-simple .btn.primary:hover { background: var(--burg); }
.s-simple .btn.secondary { border-color: #000; color: #000; }
.s-simple .btn.secondary:hover { background: #000; color: #fff; }
.s-simple .tabs a[aria-current="page"] { background: #000; color: #fff; }
.s-simple .suite-packages, .s-simple .suite-band { background: #fafafa; }
.s-simple .suite-band.alt { background: #fff; }
.s-simple .pkg { border-radius: 4px; border-color: #dcdcdc; }
.s-simple .pkg.popular { border-color: #000; box-shadow: 0 0 0 1px #000; }
.s-simple .badge { background: #000; color: #fff; border-radius: 3px; }
.s-simple .pkg-price strong, .s-simple .pkg .text-link { color: #000; }
.s-simple .suite-hero-art { border-radius: 4px; }

/* Creative: beauty. Cream, burgundy, cheetah, a little script. */
.s-creative .suite-hero { background: var(--cream); }
.s-creative h1 { font-style: italic; color: var(--burg); }
.s-creative h1 em { color: var(--ink); }
.s-creative .kicker { color: var(--burg); }
.s-creative .btn.primary { background: var(--burg); color: #fff; }
.s-creative .btn.secondary { border-color: var(--burg); color: var(--burg); }
.s-creative .btn.secondary:hover { background: var(--burg); color: #fff; }
.s-creative .tabs { color: var(--burg); }
.s-creative .tabs a[aria-current="page"] { background: var(--burg); color: #fff; }
.s-creative .suite-hero-art { border-radius: 999px 999px var(--r) var(--r); }
.s-creative .suite-packages { background: #fff; }
.s-creative .suite-band { background: var(--cream); }
.s-creative .suite-band.alt { background: #000; color: #fff; }
.s-creative .suite-band.alt .kicker { color: var(--gold); }
.s-creative .suite-band.alt .quote-card { background: #1a1a1a; border-color: #2a2a2a; }
.s-creative .suite-band.alt .quote-card blockquote { color: #e6e1da; }
.s-creative .suite-band.alt figcaption { border-top-color: #333; }
.s-creative .pkg { background: var(--cream); border-color: #eadfce; }
.s-creative .pkg.popular { border-color: var(--burg); box-shadow: 0 0 0 1px var(--burg); }
.s-creative .badge { background: var(--burg); color: #fff; }

/* Garden: events. Sage, cream, soft gold, arches. */
.s-garden .suite-hero { background: var(--sage-deep); color: #fff; }
.s-garden .kicker { color: var(--gold-soft); }
.s-garden h1 em { color: var(--gold-soft); }
.s-garden .lede { color: #e5ebdf; }
.s-garden .btn.primary { background: var(--gold); color: #1a1205; }
.s-garden .btn.secondary { border-color: rgba(255,255,255,.7); color: #fff; }
.s-garden .btn.secondary:hover { background: #fff; color: var(--sage-deep); }
.s-garden .tabs a[aria-current="page"] { background: #fff; color: var(--sage-deep); }
.s-garden .suite-hero-art { border-radius: 999px 999px 8px 8px; }
.s-garden .suite-packages { background: var(--sage-light); }
.s-garden .suite-band { background: var(--cream); }
.s-garden .suite-band.alt { background: var(--sage-light); }
.s-garden .pkg { border-color: #cfd8c8; }
.s-garden .pkg.popular { border-color: var(--sage-deep); box-shadow: 0 0 0 1px var(--sage-deep); }
.s-garden .badge { background: var(--sage-deep); color: #fff; }
.s-garden .pkg-price strong, .s-garden .pkg .text-link { color: var(--sage-deep); }
.s-garden .group-title { color: var(--sage-deep); }

/* Editorial: brands. Black, white, bold type, burgundy. */
.s-editorial .suite-hero { background: #000; color: #fff; }
.s-editorial h1 { font: 700 clamp(46px, 7.5vw, 104px)/.92 var(--didone); text-transform: uppercase; letter-spacing: -.01em; }
.s-editorial h1 em { color: var(--gold); }
.s-editorial .kicker { color: var(--gold); }
.s-editorial .lede { color: #c9c9c9; }
.s-editorial .btn.primary { background: #fff; color: #000; }
.s-editorial .btn.primary:hover { background: var(--gold); }
.s-editorial .btn.secondary { border-color: #fff; color: #fff; }
.s-editorial .btn.secondary:hover { background: #fff; color: #000; }
.s-editorial .tabs a[aria-current="page"] { background: #fff; color: #000; }
.s-editorial .suite-hero-art { border-radius: 0; }
.s-editorial .pkg { border-radius: 0; border: 1.5px solid #000; }
.s-editorial .pkg.popular { box-shadow: 6px 6px 0 var(--burg); border-color: #000; }
.s-editorial .pkg h3 { font: 700 24px/1.05 var(--didone); text-transform: uppercase; }
.s-editorial .badge { border-radius: 0; background: var(--burg); color: #fff; }
.s-editorial .suite-band.alt { background: var(--burg); color: #fff; }
.s-editorial .suite-band.alt .kicker { color: var(--gold); }
.s-editorial .suite-band.alt .quote-card { border-radius: 0; }

/* ---------- locations ---------- */
.where { background: #000; color: #fff; padding: 90px 0; }
.where-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 60px; align-items: center; }
.where-copy .kicker { color: var(--gold); }
.where-copy h1 { font: 600 clamp(36px, 4.6vw, 58px)/1.04 var(--serif); margin-bottom: 18px; }
.where-copy .lede { color: #bdbdbd; }
.market-list { list-style: none; padding: 0; margin: 28px 0 18px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 26px; }
.market-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 15px 0; border-bottom: 1px solid #2c2c2c; font-size: 17px; }
.market-list li.home span::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); margin-right: 10px; vertical-align: middle; }
.market-list li em { font-size: 13px; font-style: normal; color: var(--gold); }
.also { color: #a8a8a8; font-size: 15px; }
.also span { color: #fff; }
.map-card { border-radius: 18px; overflow: hidden; border: 1px solid #262626; background: #0b0b0b; }
.map { position: relative; }
.map-svg { display: block; width: 100%; height: auto; aspect-ratio: 960 / 600; cursor: grab; touch-action: none; user-select: none; }
.map-svg:active { cursor: grabbing; }
.map-svg .base path, .map-svg .base use { vector-effect: non-scaling-stroke; }
.mg-grid { stroke: #fff; stroke-opacity: .04; fill: none; }
.mg-land { fill: #141414; }
.mg-topo { fill: none; stroke: var(--gold); stroke-opacity: .14; stroke-width: .6; }
.mg-counties { fill: none; stroke: #fff; stroke-opacity: .07; stroke-width: .5; }
.mg-states { fill: none; stroke: #fff; stroke-opacity: .22; stroke-width: .8; }
.mg-coast { fill: none; stroke: #fff; stroke-opacity: .35; stroke-width: 1; }
.mg-lit { fill: var(--gold); fill-opacity: .25; stroke: var(--gold); stroke-opacity: .7; stroke-width: .7; }
.mg-lit.minor { fill-opacity: .09; stroke-opacity: .35; }
.mg-edge { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linejoin: round; }
.mg-edge-glow { fill: none; stroke: var(--gold); stroke-width: 6; stroke-opacity: .3; }
.mg-dot { fill: var(--gold); fill-opacity: .85; }
.mg-ring { fill: none; stroke: var(--gold); stroke-opacity: .45; vector-effect: non-scaling-stroke; }
.mg-ring.far { stroke-opacity: .2; }
.mg-pin { fill: var(--gold); stroke: #0b0b0b; stroke-width: 1; vector-effect: non-scaling-stroke; }
.mg-pin-eye { fill: #0b0b0b; }
.mg-leader { stroke: var(--gold); stroke-opacity: .6; stroke-width: .8; fill: none; vector-effect: non-scaling-stroke; }
.mg-label { font-family: var(--sans); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; fill: #fff; paint-order: stroke; stroke: #0b0b0b; stroke-linejoin: round; pointer-events: none; }
.mg-label.home { fill: var(--gold); }
.mg-note { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0; text-transform: none; fill: #b5b5b5; }
.map-tools { position: absolute; left: 14px; right: 14px; top: 14px; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; pointer-events: none; }
.map-views, .map-zoom { display: flex; flex-wrap: wrap; gap: 6px; pointer-events: auto; }
.map-views button, .map-zoom button { font: 500 13px/1 var(--sans); color: #fff; background: rgba(20,20,20,.85); border: 1px solid #333; border-radius: 999px; padding: 9px 13px; cursor: pointer; backdrop-filter: blur(6px); }
.map-views button.on { background: var(--gold); color: #111; border-color: var(--gold); }
.map-zoom { flex-direction: column; }
.map-zoom button { width: 36px; height: 36px; padding: 0; font-size: 19px; border-radius: 10px; }
.map-hint { position: absolute; left: 16px; bottom: 10px; margin: 0; font-size: 12px; color: #8a8a8a; pointer-events: none; }
.map.active .map-hint { color: var(--gold); }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: start; }
.contact-book, .contact-info { border: 1px solid var(--line); border-radius: var(--r); padding: 28px; }
.contact-info { background: var(--cream); border-color: transparent; }
.booking-frame { width: 100%; height: 640px; border: 0; border-radius: 10px; background: #fff; }
.contact-info dl { margin: 0 0 20px; display: grid; gap: 4px; }
.contact-info dt { font: 600 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--burg); margin-top: 14px; }
.contact-info dd { margin: 0; font-size: 16px; }
.contact-info a { color: var(--ink); }

/* ---------- footer ---------- */
.site-foot { background: #000; color: #fff; padding: 64px 0 40px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
.foot-logo { width: 160px; height: auto; margin-bottom: 20px; }
.foot-tag { color: #bdbdbd; max-width: 270px; font-size: 14px; }
.copy { font-size: 13px; color: #8a8a8a; margin-top: 16px; }
.foot-nav { display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; }
.foot-nav a { text-decoration: none; color: #e4e4e4; }
.foot-nav a:hover { color: var(--gold); }
.foot-nav span:not(.lbl) { color: #bdbdbd; }
.lbl { font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.foot-mail { color: var(--gold) !important; margin-top: 12px; }

/* ---------- lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.92); display: grid; place-items: center; padding: 30px; }
.lb-stage { width: min(1100px, 100%); }
.lb-stage iframe, .lb-stage video { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; background: #000; }
.lb-stage img { max-height: 86vh; width: auto; margin: 0 auto; border-radius: 10px; }
.lb-close { position: absolute; top: 14px; right: 20px; width: 48px; height: 48px; border: 0; background: none; color: #fff; font: 300 40px/1 var(--sans); cursor: pointer; }

/* ---------- gentle fade up as sections arrive ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.js [data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .screen, .float-card { transition: none; }
}

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
  .nav { gap: 16px; }
  .nav > a, .has-menu > a { font-size: 13.5px; }
  .suite-grid { grid-template-columns: repeat(2, 1fr); }
  .pkg-grid, .work-grid, .quote-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  :root { --head-h: 66px; }
  .nav, .head-cta { display: none; }
  .burger { display: block; }
  .brand img { height: 42px; }
  .hero-inner { grid-template-columns: 1fr; min-height: 0; }
  .hero-copy { padding: 46px 0 10px; }
  .hero-photo img { max-height: 440px; }
  .split-head, .founder-inner, .suite-hero-grid, .where-grid, .contact-grid, .two-col { grid-template-columns: 1fr; gap: 28px; }
  .suite-hero-art { aspect-ratio: 4 / 3; max-height: 380px; }
  .s-creative .suite-hero-art, .s-garden .suite-hero-art { border-radius: 200px 200px var(--r) var(--r); }
  .showcase { padding: 70px 0 50px; }
  .showcase-stage { grid-template-columns: 1fr; justify-items: center; gap: 18px; }
  .float-col { display: none; }
  .phone { width: min(270px, 70vw); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .founder-inner { padding: 70px 0; }
}
@media (max-width: 620px) {
  .suite-grid, .pkg-grid, .work-grid, .quote-grid, .steps { grid-template-columns: 1fr; }
  .market-list { grid-template-columns: 1fr; }
  .section { padding: 70px 0; }
  .page-head { padding: 56px 0 46px; }
  .hero-btns .btn, .btn-row .btn { flex: 1 1 140px; }
  .foot-grid { grid-template-columns: 1fr; }
  .booking-frame { height: 720px; }
}