/* ===== Tokens: colors, type, spacing ===== */
:root{--night:#0f0d0b;--night-2:#1c1813;--ember:#ff6a2b;--gold:#ffc94a;--sand:#f4ecdc;--sand-2:#e8dcc4;--ink:#1a1612;--muted:#b9ad99;--gut:clamp(16px,5vw,48px);--max:1200px;--display:'Big Shoulders Display',Impact,'Arial Narrow',sans-serif;--body:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
body{margin:0;background:var(--night);color:var(--sand);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold);text-underline-offset:3px}
a:hover{color:var(--ember)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
p,li{overflow-wrap:anywhere}

/* ===== Type scale: use h1-h3 anywhere; .display for oversized statements; .kicker for small labels ===== */
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:.95;letter-spacing:.01em;text-transform:uppercase;margin:0 0 .5em}
h1{font-size:clamp(2.8rem,9vw,6.5rem)}
h2{font-size:clamp(2.1rem,5.5vw,4rem)}
h3{font-size:clamp(1.5rem,3vw,2rem)}
.display{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(2.6rem,10vw,8rem);line-height:.9;margin:0}
.kicker{font:600 .8rem/1.2 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--ember);margin:0 0 1rem}
.lead{font-size:clamp(1.08rem,1.6vw,1.25rem);max-width:60ch}
.accent{color:var(--ember)}

/* ===== Skip link ===== */
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--gold);color:var(--night);padding:12px 16px;font-weight:600;border-radius:4px}
.skip:focus{top:12px}

/* ===== Header and navigation (solid night bar, readable on every page) ===== */
.site-header{position:sticky;top:0;z-index:50;background:rgba(15,13,11,.96);border-bottom:1px solid rgba(255,201,74,.18)}
.site-header .bar{max-width:var(--max);margin:0 auto;padding:10px var(--gut);display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.brand{font-family:var(--display);font-weight:800;font-size:1.5rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sand);text-decoration:none;line-height:1}
.brand span{color:var(--ember)}
.menu-btn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;background:none;border:1px solid rgba(244,236,220,.4);border-radius:4px;color:var(--sand);font:600 .85rem var(--body);letter-spacing:.1em;text-transform:uppercase;padding:0 14px;cursor:pointer}
.site-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--night);border-bottom:1px solid rgba(255,201,74,.18);padding:8px var(--gut) 20px}
.site-nav.open{display:block}
.site-nav ul{list-style:none;margin:0;padding:0}
.site-nav a{display:flex;align-items:center;min-height:48px;color:var(--sand);text-decoration:none;font:700 1.6rem var(--display);text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid rgba(244,236,220,.1)}
.site-nav a:hover,.site-nav a[aria-current=page]{color:var(--ember)}
.nav-cta{color:var(--night)!important;background:var(--ember);justify-content:center;border-radius:4px;margin-top:12px;border:0!important}
@media(min-width:900px){.menu-btn{display:none}.site-nav{display:block;position:static;background:none;border:0;padding:0}.site-nav ul{display:flex;gap:28px;align-items:center}.site-nav a{font-size:1.15rem;border:0;min-height:44px}.nav-cta{padding:0 18px;margin:0}}
/* pages without a photo opening get breathing room under the header */
body:has(main.text-page) .site-header,body:has(main.plain-top) .site-header{background:var(--night)}
main.plain-top{padding-top:clamp(40px,7vw,96px)}

/* ===== Layout helpers: .wrap = centered column with gutters ===== */
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.section{padding-block:clamp(56px,9vw,128px)}

/* ===== Grounds: alternate these on sections ===== */
.ground-night{background:var(--night);color:var(--sand)}
.ground-ember{background:var(--night-2);color:var(--sand)}
.ground-sand{background:var(--sand);color:var(--ink)}
.ground-sand a{color:#9a3a0c}
.ground-sand .kicker{color:#b1420d}
.ground-sand .muted{color:#5b5144}
.muted{color:var(--muted)}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:0 24px;border-radius:4px;font:700 1rem var(--body);letter-spacing:.04em;text-decoration:none;border:2px solid transparent;cursor:pointer}
.btn--primary{background:var(--ember);color:var(--night)}
.btn--primary:hover{background:var(--gold);color:var(--night)}
.btn--ghost{border-color:currentColor;color:var(--sand)}
.ground-sand .btn--ghost{color:var(--ink)}
.btn--ghost:hover{color:var(--gold)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

/* ===== Photo-led opening: <section class=hero> with img.hero__img + h1.hero__title (same grid cell) then div.hero__body. Edge to edge on phones. ===== */
.hero{display:grid;grid-template-columns:1fr;background:var(--night)}
.hero__img{grid-area:1/1;width:100%;height:auto;border-radius:0}
.hero__title{grid-area:1/1;align-self:end;margin:0;padding:48px var(--gut) 18px;background:linear-gradient(to top,rgba(15,13,11,.92) 0%,rgba(15,13,11,.6) 60%,rgba(15,13,11,0) 100%);color:var(--sand);font-size:clamp(2.6rem,11vw,7rem);z-index:1}
.hero__body{padding:22px var(--gut) 40px}
.hero__body .lead{margin:0}
.hero__proof{margin-top:18px;font-size:.92rem;color:var(--muted)}
@media(min-width:900px){.hero{grid-template-columns:repeat(12,1fr);max-width:1440px;margin:0 auto;padding:24px var(--gut) 0;column-gap:24px}.hero__img{grid-area:1/4/2/13;max-height:78vh;object-fit:cover;border-radius:0}.hero__title{grid-area:1/1/2/10;background:linear-gradient(to top,rgba(15,13,11,.85),rgba(15,13,11,0));padding:60px 0 28px 0;font-size:clamp(4rem,8.5vw,8rem)}.hero__body{grid-area:2/1/3/13;display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;padding:28px 0 56px}.hero__body>*{grid-column:4/12}}

/* ===== Shape 1: .split = words beside a photo; add .split--flip to swap ===== */
.split{display:grid;gap:32px;align-items:center}
.split img{width:100%}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr;gap:64px}.split--flip>:first-child{order:2}}

/* ===== Shape 2: .band = oversized typographic statement across the page ===== */
.band{text-align:left;border-top:1px solid rgba(255,201,74,.25);border-bottom:1px solid rgba(255,201,74,.25)}
.band .display{max-width:14ch}

/* ===== Shape 3 / signature: .fuse = numbered visit sequence with a lit fuse line (ol.fuse > li > h3 + p) ===== */
.fuse{list-style:none;margin:32px 0 0;padding:0 0 0 28px;position:relative;counter-reset:f}
.fuse::before{content:'';position:absolute;left:6px;top:6px;bottom:6px;width:3px;background:linear-gradient(var(--gold),var(--ember) 60%,rgba(255,106,43,.15));border-radius:2px}
.fuse li{position:relative;padding:0 0 36px 20px;counter-increment:f}
.fuse li::before{content:'0' counter(f);position:absolute;left:-28px;top:0;width:16px;height:16px;border-radius:50%;background:var(--ember);box-shadow:0 0 0 5px rgba(255,106,43,.2),0 0 22px var(--ember);font-size:0}
.fuse li::after{content:'0' counter(f);display:block;position:absolute;right:0;top:-6px;font:800 3rem var(--display);color:rgba(255,201,74,.14)}
.fuse h3{margin-bottom:.3em}
@media(prefers-reduced-motion:no-preference){.fuse li{animation:spark linear both;animation-timeline:view();animation-range:entry 0% cover 35%}}
@keyframes spark{from{opacity:.25;transform:translateY(18px)}to{opacity:1;transform:none}}
@media(min-width:900px){.fuse{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding:40px 0 0}.fuse::before{left:0;right:0;top:6px;bottom:auto;width:auto;height:3px;background:linear-gradient(90deg,var(--gold),var(--ember) 60%,rgba(255,106,43,.15))}.fuse li{padding:24px 0 0}.fuse li::before{left:0;top:-41px}}

/* ===== Shape 4: .mosaic = photo wall; photos keep their natural shape (never cropped). Use .mosaic__tall on portrait photos ===== */
.mosaic{display:grid;gap:14px;grid-template-columns:1fr}
.mosaic figure{margin:0}
.mosaic img{width:100%;height:auto}
.mosaic figcaption{font-size:.85rem;color:var(--muted);padding-top:6px}
@media(min-width:700px){.mosaic{grid-template-columns:1fr 1fr;align-items:start}}
@media(min-width:1000px){.mosaic{grid-template-columns:repeat(3,1fr)}.mosaic__tall{grid-row:span 2}}

/* ===== Shape 5: .facts = ruled list of plain facts (dl.facts > div > dt + dd) ===== */
.facts{margin:0;display:grid;gap:0}
.facts>div{display:grid;gap:4px;padding:20px 0;border-top:1px solid currentColor}
.facts dt{font:800 1.4rem var(--display);text-transform:uppercase;letter-spacing:.04em}
.facts dd{margin:0}
@media(min-width:800px){.facts>div{grid-template-columns:1fr 2fr;gap:24px}}

/* ===== Cards (.cards > .card) ===== */
.cards{display:grid;gap:18px}
@media(min-width:800px){.cards{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}}
.card{padding:28px;border:1px solid rgba(255,201,74,.25);border-radius:6px;background:rgba(255,255,255,.02)}
.ground-sand .card{border-color:rgba(26,22,18,.2);background:rgba(255,255,255,.5)}

/* ===== Review: <blockquote class=review><p>text</p><footer>author + stars</footer></blockquote> ===== */
.review{margin:0;padding:0 0 0 24px;border-left:4px solid var(--ember);max-width:62ch}
.review p{font-size:clamp(1.15rem,2vw,1.45rem);line-height:1.5;margin:0 0 16px}
.review footer{font-size:.95rem;font-weight:600}
.stars{color:var(--gold);letter-spacing:.15em}
.ground-sand .stars{color:#b1420d}

/* ===== Table (hours or facts) inside <div class=table-wrap> ===== */
.table-wrap{overflow-x:auto;max-width:100%}
.table{width:100%;border-collapse:collapse;min-width:280px}
.table th,.table td{text-align:left;padding:12px 10px;border-bottom:1px solid rgba(244,236,220,.2)}
.ground-sand .table th,.ground-sand .table td{border-color:rgba(26,22,18,.2)}

/* ===== Form: form.form > .field > label + input/textarea ===== */
.form{display:grid;gap:18px;max-width:640px}
.field{display:grid;gap:6px}
.field label{font-weight:600}
.field input,.field textarea{width:100%;min-height:48px;padding:12px 14px;border:2px solid #6f6556;border-radius:4px;background:#fffdf8;color:var(--ink);font:inherit}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--ember);outline:3px solid var(--gold);outline-offset:1px}
.hint{font-size:.88rem;color:inherit;opacity:.8}
.hidden{position:absolute;left:-9999px}

/* ===== Map embed ===== */
.map{width:100%;aspect-ratio:4/3;border:0;display:block}

/* ===== Legal and utility pages ===== */
main.text-page{max-width:calc(70ch + 40px);margin:0 auto;padding:clamp(48px,8vw,96px) max(20px,var(--gut)) 96px}
main.text-page h1{font-size:clamp(2.6rem,7vw,4.5rem)}
main.text-page h2{font-size:clamp(1.6rem,3.5vw,2.2rem);margin-top:1.6em;color:var(--gold)}
main.text-page p{max-width:70ch}
main.text-page a{color:var(--gold)}

/* ===== Footer ===== */
.site-footer{background:#0a0907;border-top:1px solid rgba(255,201,74,.2);color:var(--muted);font-size:.95rem}
.footer-grid{max-width:var(--max);margin:0 auto;padding:56px var(--gut) 32px;display:grid;gap:36px}
@media(min-width:800px){.footer-grid{grid-template-columns:2fr 1fr 1fr}}
.footer-mark{font:800 1.4rem var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--sand);margin:0 0 10px}
.site-footer h2{font:600 .8rem var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--sand);margin:0 0 12px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li a{display:inline-flex;min-height:44px;align-items:center;color:var(--muted);text-decoration:none}
.site-footer a:hover{color:var(--gold)}
.footer-legal{max-width:var(--max);margin:0 auto;padding:18px var(--gut) 28px;border-top:1px solid rgba(244,236,220,.08);display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-size:12.5px}
.footer-legal a{color:var(--muted);display:inline-flex;min-height:44px;align-items:center}
@media(min-width:900px){.footer-legal{flex-wrap:nowrap;white-space:nowrap}}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}


/* Contact page */
.ctc-grid{display:grid;gap:32px}@media(min-width:900px){.ctc-grid{grid-template-columns:1fr 1.4fr;gap:64px;align-items:start}}
/* site fixup: begin */
.footer-legal{display:flex!important;flex-wrap:wrap;align-items:center;column-gap:14px;row-gap:2px;max-width:100%}
.footer-legal>*{margin-top:0;margin-bottom:0}
.footer-legal .fx-legal-links{display:inline-flex;flex-wrap:wrap;align-items:center;column-gap:14px}
.fx-legal-wrap{max-width:1240px;margin:0 auto;padding:0 20px}
@media (min-width:1240px){.footer-legal{flex-wrap:nowrap!important;white-space:nowrap!important;align-items:stretch!important;grid-column:1/-1;}.footer-legal>*,.footer-legal .fx-legal-links{flex:0 0 auto!important;flex-wrap:nowrap!important;display:inline-flex!important;align-items:center!important}}
@media (max-width:639px){.footer-legal{flex-direction:column;align-items:flex-start}.footer-legal>.fx-legal-sep,.footer-legal>[aria-hidden="true"]{display:none}.footer-legal .fx-legal-links a{display:inline-block;padding-top:10px;padding-bottom:10px}}
/* site fixup: end */