/* Casa Barbershop v3: film first. Night background, the shop on screen, one face (Geist), WhatsApp green as the only colour. */
@font-face{font-family:"Archivo";src:url(../fonts/archivo-latin-var.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(../fonts/instrument-sans-latin-var.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Kufi Casa";src:url(../fonts/kufi-casa.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --night:#141817;--night-2:#1c201f;--night-3:#252a29;--fg:#f2efea;--dim:#9eaaa7;--hair:#2f3634;
  --paper:#ede7e1;--ink:#141716;--grey:#5f6563;--line:#d8d0c7;--blue:#24453f;
  --wa:#25d366;--wa-ink:#062a14;
  --tan:#64ada4;--tan-2:#9fd0c9;--tan-ink:#0d1a18;--teal:#64ada4;--petrol:#24453f;--slate:#73898a;--cognac:#a1754f;
  --fh:"Archivo","Arial Narrow",Impact,sans-serif;--far:"Kufi Casa","Geeza Pro",Tahoma,sans-serif;
  --f:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --gut:clamp(16px,4vw,40px);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--night);color:var(--fg);font:400 1rem/1.55 var(--f);-webkit-font-smoothing:antialiased;padding-bottom:64px}
@media (min-width:1060px){body{padding-bottom:0}}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.035em;line-height:1;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:1240px;margin:0 auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--fg);color:var(--night);padding:10px 14px}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--wa);outline-offset:3px}

/* buttons */
.cta{display:flex;flex-wrap:wrap;gap:10px}
.cta.col{flex-direction:column}
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:16px;min-height:54px;padding:0 20px;background:var(--fg);color:var(--night);font-weight:700;text-decoration:none;transition:transform .15s,background .15s}
.btn svg{width:20px;height:20px;flex:none}
.btn:hover{transform:translateY(-1px)}
.btn-wa{background:var(--wa);color:var(--wa-ink)}
.btn-line{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.light .btn{background:var(--ink);color:var(--paper)}
.light .btn-wa{background:var(--wa);color:var(--wa-ink)}
.light .btn-line{background:transparent;color:var(--ink)}
.more{display:inline-flex;align-items:center;gap:8px;font-weight:700;text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:2px}
.more svg{width:16px;height:16px}

/* header */
.hdr{position:fixed;inset:0 0 auto;z-index:40;padding-top:env(safe-area-inset-top,0px);transition:background .25s,border-color .25s;border-bottom:1px solid transparent}
.hdr.solid{background:rgba(11,11,12,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-color:var(--hair)}
.hdr .wrap{display:flex;align-items:center;gap:24px;height:64px}
.word{display:flex;align-items:baseline;gap:8px;text-decoration:none;margin-right:auto}
.word b{font-size:1.45rem;font-weight:800;letter-spacing:-.05em}
.word span{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.nav{display:none;gap:26px}
.nav a{text-decoration:none;font-size:.95rem;color:#d9d9d6;padding:12px 0}
.nav a:hover{color:var(--fg)}
.hdr-tel{display:none;text-decoration:none;font-size:.95rem;padding:12px 0}
.hdr-book{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;background:var(--fg);color:var(--night);font-weight:700;text-decoration:none}
@media (min-width:960px){.nav{display:flex}.hdr-tel{display:block}}
@media (max-width:379px){.word span{display:none}.hdr .wrap{gap:12px}}

/* film hero */
.film{position:relative;min-height:min(92svh,880px);display:flex;align-items:flex-end;overflow:hidden;padding:110px 0 clamp(28px,5vw,56px)}
.film-bg{position:absolute;inset:0}
.film-bg video,.film-bg img,.film-bg picture{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.film-bg video{opacity:0;transition:opacity .6s}
.film-bg video.on{opacity:1}
.film-empty{inset:-8%;background:radial-gradient(40% 50% at 25% 35%,rgba(210,190,160,.26),transparent 70%),radial-gradient(35% 45% at 75% 60%,rgba(120,140,160,.2),transparent 70%),linear-gradient(120deg,#1d1b19,#0e0e10 60%,#191716);animation:pan 18s ease-in-out infinite alternate}
@keyframes pan{to{transform:scale(1.1) translate(-3%,2%)}}
.clipnote{position:absolute;top:24%;right:14%;font-size:.8rem;color:var(--dim);border:1px dashed #4a4a48;padding:8px 10px}
.film::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,12,.6),rgba(11,11,12,.25) 30%,rgba(11,11,12,.55) 55%,rgba(11,11,12,.94));pointer-events:none}
@media (min-width:900px){.film::after{background:linear-gradient(90deg,rgba(11,11,12,.78),rgba(11,11,12,.35) 60%,rgba(11,11,12,.2)),linear-gradient(180deg,rgba(11,11,12,.5),transparent 30%,transparent 60%,rgba(11,11,12,.9))}}
.film>.wrap{position:relative;z-index:2;width:100%;display:grid;gap:28px;align-items:end}
@media (min-width:960px){.film>.wrap{grid-template-columns:minmax(0,1fr) minmax(280px,320px);gap:48px}}
.film h1{font-size:clamp(2.8rem,1.4rem + 6vw,6.8rem);line-height:.93;letter-spacing:-.045em;max-width:12ch}
.film .sub{margin-top:18px;font-size:clamp(1.05rem,1rem + .3vw,1.2rem);color:#dcdcd8;max-width:46ch}
.film-copy>*{animation:rise .8s cubic-bezier(.2,.7,.1,1) both}
.film-copy>:nth-child(2){animation-delay:.06s}.film-copy>:nth-child(3){animation-delay:.12s}.film-copy>:nth-child(4){animation-delay:.18s}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.film-cta .btn{width:100%}
.tel-line{margin-top:14px;color:var(--dim);font-size:.95rem}
.tel-line a{color:var(--fg);text-decoration:none;border-bottom:1px solid var(--dim)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.chips span{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;background:rgba(11,11,12,.55);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:.88rem;font-weight:600}
@media (max-width:420px){.chips{gap:6px}.chips span{padding:7px 9px;font-size:.82rem;gap:6px}}
.live::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--dim);flex:none}
.live.is-open::before{background:var(--wa);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.6)}70%{box-shadow:0 0 0 9px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px;font-size:.85rem;color:var(--dim);margin-bottom:16px}
.crumbs li+li::before{content:"/";margin-right:6px}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--fg)}

/* plain page header (guides, 404) */
.page-head{padding:120px 0 clamp(36px,5vw,64px);background:var(--night-2)}
.page-head h1{font-size:clamp(2.4rem,1.4rem + 4.4vw,5rem);line-height:.95;max-width:18ch}
.page-head .sub{margin-top:18px;color:#d0d0cc;max-width:52ch;font-size:1.1rem}
.page-head .cta{margin-top:28px}
.art-meta{margin-top:18px;color:var(--dim);font-size:.95rem}

/* sections */
.sec{padding-block:clamp(56px,8vw,112px)}
.dark{background:var(--night)}
.light{background:var(--paper);color:var(--ink)}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:12px 32px;margin-bottom:clamp(24px,3.5vw,44px)}
.sec-head h2{font-size:clamp(2rem,1.2rem + 3vw,3.6rem)}
.sec-head p{color:var(--dim);max-width:52ch}
.h-big{font-size:clamp(2.6rem,1.4rem + 5vw,5.6rem);line-height:.92;letter-spacing:-.045em}
.h-big em{font-style:normal;color:var(--blue)}
.lead{font-size:1.1rem;color:#3b3935;max-width:46ch}
.lead a{font-weight:700}
.split{display:grid;gap:32px}
@media (min-width:960px){.split{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:64px}.split>.side{position:sticky;top:96px;align-self:start}.split .h-big{font-size:clamp(2.6rem,1rem + 4vw,4.4rem)}}
.side .lead{margin-top:18px}
.side .cta{margin-top:24px}
.split-head{display:grid;gap:20px 48px;align-items:end;margin-bottom:clamp(28px,4vw,48px)}
@media (min-width:960px){.split-head{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}}
.split-head .cta{margin-top:20px}

/* reels + proof */
.rgrid{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(170px,46%);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);scrollbar-width:none}
.rgrid::-webkit-scrollbar{display:none}
@media (min-width:900px){.rgrid{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);overflow:visible;margin:0;padding:0}}
.rv{position:relative;scroll-snap-align:start;aspect-ratio:9/16;max-width:100%;overflow:hidden;background:linear-gradient(160deg,#2a2826,#121212)}
.rv video,.rv picture,.rv img,.rv .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rv>span{position:absolute;left:12px;bottom:12px;font-weight:700;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.rv.empty::before{content:"";position:absolute;top:50%;left:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:rgba(255,255,255,.14)}
.rv.empty::after{content:"";position:absolute;top:50%;left:50%;margin:-9px 0 0 -5px;border-left:16px solid var(--fg);border-top:9px solid transparent;border-bottom:9px solid transparent}
.proof{display:grid;gap:22px;margin-top:clamp(32px,4vw,48px);padding-top:28px;border-top:1px solid var(--hair)}
.proof:first-child{margin-top:0}
@media (min-width:900px){.proof{grid-template-columns:1.5fr 1fr 1fr;gap:40px}}
.proof blockquote{margin:0;font-size:clamp(1.2rem,1rem + .6vw,1.5rem);line-height:1.35;font-weight:600}
.proof figure{margin:0}
.proof figcaption{margin-top:10px;color:var(--dim);font-size:.9rem}
.proof b{display:block;font-size:2.6rem;font-weight:800;letter-spacing:-.04em;line-height:1}
.proof div span{display:block;margin-top:8px;color:var(--dim)}

/* barber cards */
.cards{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,78%);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gut) * -1);padding:0 var(--gut) 8px;scrollbar-width:thin}
@media (min-width:700px){.cards{grid-auto-columns:minmax(250px,42%)}}
@media (min-width:1100px){.cards{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);overflow:visible;margin:0;padding:0}}
.card{scroll-snap-align:start;background:#fff;border:1px solid var(--line);display:flex;flex-direction:column}
.face{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ink)}
.face picture,.face img{width:100%;height:100%;object-fit:cover}
.face.mono i{position:absolute;right:-4px;top:-30px;font-style:normal;font-weight:800;font-size:170px;line-height:1;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px #3a3936}
.card .body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.card h3{font-size:1.8rem}
.card .role{font-size:.92rem;color:var(--grey);font-weight:600}
.card blockquote{margin:8px 0 0;line-height:1.45}
.card .cite{color:var(--grey);font-size:.85rem}
.card .book{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-weight:700;text-decoration:none;color:var(--blue)}
.card .book svg{width:18px;height:18px}

/* services index */
.index{border-top:1px solid var(--hair)}
.index li{border-bottom:1px solid var(--hair)}
.index a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 20px;align-items:center;padding:22px 0;text-decoration:none;transition:padding .2s,background .2s}
.index h3{font-size:clamp(1.8rem,1rem + 3vw,3.4rem);letter-spacing:-.045em}
.index p{grid-column:1;color:var(--dim)}
.index .amt{grid-row:1;grid-column:2;font-weight:600;color:#d9d9d6;white-space:nowrap}
.index .go{grid-row:2;grid-column:2;justify-self:end}
.index .go svg{width:22px;height:22px;transition:transform .2s}
@media (hover:hover){.index a:hover{background:var(--night-3);padding-inline:18px}.index a:hover .go svg{transform:translateX(4px)}}

/* prices */
.cat{border-top:2px solid var(--ink)}
.cat:last-of-type{border-bottom:2px solid var(--ink)}
.cat summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;cursor:pointer;list-style:none}
.cat summary::-webkit-details-marker{display:none}
.cat summary h3{font-size:clamp(1.3rem,1rem + 1vw,1.7rem);letter-spacing:-.03em}
.cat summary span{display:inline-flex;align-items:center;gap:12px;color:var(--grey);font-size:.9rem}
.cat summary span::after{content:"+";font-size:1.4rem;line-height:1;color:var(--ink)}
.cat[open] summary span::after{content:"–"}
.rows{padding-bottom:16px}
.row{display:grid;grid-template-columns:auto minmax(12px,1fr) auto;gap:2px 10px;align-items:baseline;padding:10px 0;text-decoration:none;color:inherit;border-radius:0;transition:background .15s}
.row .bk{grid-column:1/-1;display:inline-flex;align-items:center;gap:6px;font-size:.85rem;font-weight:700;color:var(--blue)}
.row .bk svg{width:14px;height:14px}
@media (hover:hover) and (min-width:760px){.row{margin-inline:-12px;padding-inline:12px}.row .bk{opacity:0;transition:opacity .15s}.row:hover{background:#e7e5df}.row:hover .bk,.row:focus-visible .bk{opacity:1}}
.row .n{font-weight:600}
.row .dots{border-bottom:1.5px dotted #b9b6af;transform:translateY(-4px)}
.row .p{font-weight:700;white-space:nowrap}
.row .p small{font-weight:400;color:var(--grey);margin-right:5px}
.row .p s{font-weight:400;color:var(--grey);margin-right:8px}
.row .d{grid-column:1/-1;color:var(--grey);font-size:.9rem;max-width:62ch}
.board-note{margin-top:20px;color:var(--grey)}
.board-note a{color:var(--ink);font-weight:700}

/* offer */
.offer{background:var(--wa);color:var(--wa-ink);padding-block:clamp(48px,7vw,88px)}
.offer .wrap{display:grid;gap:28px;align-items:end}
@media (min-width:900px){.offer .wrap{grid-template-columns:1fr 1fr;gap:64px}}
.kicker{font-weight:700;font-size:.95rem}
.offer h2{font-size:clamp(2.6rem,1.4rem + 5vw,5.6rem);letter-spacing:-.045em;margin-top:8px}
.offer .big{margin-top:14px;font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem);font-weight:800;letter-spacing:-.03em}
.offer .big s{font-weight:500;font-size:.6em;opacity:.7;margin-left:8px}
.offer ul{border-top:1.5px solid var(--wa-ink);margin-bottom:22px}
.offer li{padding:11px 0;border-bottom:1px solid rgba(6,42,20,.25);font-weight:600}
.offer .btn{background:var(--wa-ink);color:var(--wa)}
.offer .btn-wa{background:#fff;color:var(--wa-ink)}

/* photos */
.photos{display:grid;gap:12px}
@media (min-width:600px) and (max-width:899px){.photos{grid-template-columns:1fr 1fr}.photos .a,.photos .f{grid-column:1/-1}.photos .f{aspect-ratio:16/9}}
@media (min-width:900px){.photos{grid-template-columns:1fr 1fr 1fr;grid-template-areas:"a a b" "a a c" "d e f"}.photos .a{grid-area:a}.photos .b{grid-area:b}.photos .c{grid-area:c}.photos .d{grid-area:d}.photos .e{grid-area:e}.photos .f{grid-area:f}}
.photos figure{margin:0;overflow:hidden;background:var(--night-3);aspect-ratio:4/3}
.photos .a{aspect-ratio:16/9}
@media (min-width:900px){.photos .a{aspect-ratio:auto;min-height:280px}}
.photos picture,.photos img{width:100%;height:100%;object-fit:cover}
.ph{display:flex;align-items:flex-end;width:100%;height:100%;padding:14px;background:var(--night-3);color:var(--dim);font-size:.85rem}
.light .ph{background:#e2e0da;color:var(--grey)}

/* reviews */
.quotes{display:grid;gap:12px}
@media (min-width:700px){.quotes{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.quotes{grid-template-columns:repeat(3,1fr)}}
.quotes li{background:var(--night-2);padding:22px;display:flex;flex-direction:column;gap:10px}
.quotes .stars{color:var(--wa);letter-spacing:.12em;font-size:.85rem}
.quotes blockquote{margin:0;font-size:1.12rem;line-height:1.45;flex:1}
.quotes .cite{color:var(--dim);font-size:.88rem}
#reviews .more{margin-top:28px}

/* find us */
.visit{background:var(--night-2)}
.visit .sec-head p{color:#d0d0cc}
.visit .live{display:inline-flex;align-items:center;gap:8px;margin-left:8px;color:var(--fg);font-weight:600}
.map-grid{display:grid;gap:16px}
@media (min-width:960px){.map-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:28px}}
.map{position:relative;min-height:clamp(340px,62vw,560px);background:var(--night-3);overflow:hidden}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map-open{position:absolute;right:12px;top:12px;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;background:var(--fg);color:var(--night);font-weight:700;font-size:.9rem;text-decoration:none}
.map-open svg{width:16px;height:16px}
.map-ph{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px;text-align:center;padding:24px;background:repeating-linear-gradient(90deg,transparent 0 63px,var(--hair) 63px 64px),repeating-linear-gradient(0deg,transparent 0 63px,var(--hair) 63px 64px),var(--night-3)}
.map-ph span{display:grid;place-items:center;width:64px;height:64px;background:var(--wa);color:var(--wa-ink);border-radius:50% 50% 50% 0;transform:rotate(-45deg)}
.map-ph span svg{width:30px;height:30px;transform:rotate(45deg)}
.map-ph p{max-width:34ch;color:var(--dim)}
.map-ph b{display:block;color:var(--fg);font-size:1.3rem;margin-bottom:6px}
.go{display:flex;flex-direction:column;gap:10px}
.go-main{min-height:64px;font-size:1.1rem;background:var(--wa);color:var(--wa-ink)}
.go-apps{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.go-apps a,.copy{display:flex;align-items:center;justify-content:center;min-height:52px;background:var(--night-3);color:var(--fg);border:0;font:inherit;font-weight:700;text-decoration:none;cursor:pointer}
.go-apps a:hover,.copy:hover{background:#2b2b2f}
.copy{width:100%}
.facts{margin:6px 0 0}
.facts>div{display:grid;grid-template-columns:84px minmax(0,1fr);gap:14px;padding:12px 0;border-bottom:1px solid var(--hair)}
.facts dt{color:var(--dim);font-size:.9rem}
.facts dd{margin:0}
.facts a{text-decoration:none;border-bottom:1px solid var(--dim)}
.ways{display:grid;gap:0 32px;margin-top:clamp(32px,4vw,52px);border-top:1px solid var(--hair)}
@media (min-width:700px){.ways{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.ways{grid-template-columns:repeat(4,1fr)}}
.ways li{padding:20px 0;border-bottom:1px solid var(--hair)}
.ways h3{font-size:1.3rem;margin-bottom:8px}
.ways p{color:var(--dim)}
.near{margin-top:18px;color:var(--dim);font-size:.92rem}

/* points on service pages */
.points{display:grid;gap:28px}
@media (min-width:860px){.points{grid-template-columns:repeat(3,1fr);gap:40px}}
.points li{border-top:1px solid var(--hair);padding-top:18px}
.points h2{font-size:1.5rem;margin-bottom:10px}
.points p{color:#cfcfcb}

/* faq */
.faq details{border-top:1px solid var(--ink)}
.faq details:last-child{border-bottom:1px solid var(--ink)}
.faq summary{display:flex;justify-content:space-between;gap:16px;padding:18px 0;font-weight:700;font-size:1.08rem;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{padding:0 0 20px;max-width:64ch;color:#3b3935}

/* guides */
.art-list{display:grid;gap:12px}
@media (min-width:800px){.art-list{grid-template-columns:1fr 1fr}}
.art-list a{display:block;height:100%;padding:24px;background:var(--night-2);text-decoration:none;transition:background .2s}
.art-list a:hover{background:var(--night-3)}
.art-list h3{font-size:1.5rem;margin-bottom:10px}
.art-list p{color:var(--dim)}
.prose{max-width:68ch}
.prose .lede{font-size:1.25rem;line-height:1.5;margin-bottom:12px}
.prose h2{font-size:clamp(1.5rem,1.2rem + 1vw,2rem);margin:44px 0 12px}
.prose h3{font-size:1.15rem;letter-spacing:-.02em;margin:24px 0 6px}
.prose p{margin:0 0 14px;color:#2f2e2b}
.art-cta{margin-top:48px;padding:28px;background:var(--ink);color:var(--paper)}
.art-cta h2{margin:0 0 8px}
.art-cta p{color:#cfcfcb;margin-bottom:20px}
.light .art-cta .btn{background:var(--paper);color:var(--ink)}
.light .art-cta .btn-line{background:transparent;color:var(--paper)}

/* footer */
.ftr{background:var(--night);border-top:1px solid var(--hair);padding:clamp(48px,6vw,80px) 0 28px}
.ftr-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;padding-bottom:36px;border-bottom:1px solid var(--hair)}
.ftr-word{display:flex;align-items:baseline;gap:12px}
.ftr-word b{font-size:clamp(2.6rem,1.6rem + 4vw,4.6rem);font-weight:800;letter-spacing:-.06em;line-height:1}
.ftr-word span{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.ftr-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding:36px 0}
@media (min-width:900px){.ftr-grid{grid-template-columns:repeat(4,1fr)}}
.ftr h2{font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);font-weight:600;margin-bottom:14px}
.ftr li{padding:4px 0;color:#d6d6d2}
.ftr li a{text-decoration:none}
.ftr li a:hover{text-decoration:underline}
.ftr-base{color:var(--dim);font-size:.85rem;padding-top:20px;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px}
/* maker's credit: quiet until touched, then the llama leans back */
.llama{--e:cubic-bezier(.34,1.56,.64,1);display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--dim);font-size:.85rem;-webkit-tap-highlight-color:transparent}
.llama-name{position:relative;color:#c9cfcd;font-weight:600;transition:color .3s}
.llama-name sup{font-size:.6em;margin-left:1px;vertical-align:.6em;transition:color .3s}
.llama-name::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--teal);box-shadow:0 0 8px var(--teal);transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.65,0,.35,1)}
.llama-pic{position:relative;display:block;width:56px;height:32px;margin-left:4px;transform-origin:22% 92%;transition:transform .55s var(--e)}
.llama-pic img{width:100%;height:100%;object-fit:contain;filter:grayscale(1) sepia(.35) hue-rotate(120deg) saturate(1.3) brightness(.85);opacity:.55;transition:filter .4s,opacity .4s}
.llama-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.7) 50%,transparent 65%) no-repeat;background-size:250% 100%;background-position:130% 0;-webkit-mask:url(../img/lbllama.webp) center/contain no-repeat;mask:url(../img/lbllama.webp) center/contain no-repeat;pointer-events:none}
.llama:hover .llama-name,.llama:focus-visible .llama-name,.llama.is-on .llama-name{color:var(--fg)}
.llama:hover sup,.llama:focus-visible sup,.llama.is-on sup{color:var(--teal)}
.llama:hover .llama-name::after,.llama:focus-visible .llama-name::after,.llama.is-on .llama-name::after{transform:scaleX(1);transform-origin:left}
.llama:hover .llama-pic img,.llama:focus-visible .llama-pic img,.llama.is-on .llama-pic img{filter:none;opacity:1}
.llama:hover .llama-pic,.llama:focus-visible .llama-pic,.llama.is-on .llama-pic{transform:rotate(-9deg) scale(1.15) translateY(-1px)}
.llama:hover .llama-pic::after,.llama:focus-visible .llama-pic::after,.llama.is-on .llama-pic::after{background-position:-30% 0;transition:background-position .8s .15s ease-out}
.llama:active .llama-pic{transform:rotate(-14deg) scale(1.08)}
@media (min-width:1060px){.ftr{padding-bottom:104px}}
@media (max-width:640px){.ftr-base{flex-direction:column;align-items:flex-start}}
@media (prefers-reduced-motion:reduce){.llama *,.llama *::after{transition:color .2s,filter .2s,opacity .2s!important}.llama .llama-pic{transform:none!important}.llama .llama-pic::after{display:none}}

/* mobile action bar + desktop WhatsApp */
.bar{position:fixed;inset:auto 0 0;z-index:50;display:grid;grid-template-columns:1fr 1.25fr 1fr;padding-bottom:env(safe-area-inset-bottom,0px);background:var(--night);border-top:1px solid var(--hair)}
.bar a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:60px;text-decoration:none;font-weight:700}
.bar svg{width:20px;height:20px}
.bar .wa{background:var(--wa);color:var(--wa-ink)}
.bar .bk{background:var(--fg);color:var(--night)}
@media (min-width:1060px){.bar{display:none}}
.wa-float{display:none}
@media (min-width:1060px){.wa-float{display:flex;align-items:center;gap:10px;position:fixed;right:24px;bottom:24px;z-index:50;padding:0 18px;min-height:52px;background:var(--wa);color:var(--wa-ink);text-decoration:none;font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.35)}.wa-float svg{width:22px;height:22px}.js .wa-float{opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .25s,transform .25s}.js .wa-float.on{opacity:1;transform:none;pointer-events:auto}}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.film-empty,.live.is-open::before,.film-copy>*{animation:none}}

/* quick book */
.quick{background:var(--night-2);border-block:1px solid var(--hair);padding:clamp(28px,5vw,48px) 0}
.quick .wrap{display:grid;gap:20px}
.quick-head h2{font-size:clamp(1.7rem,1.1rem + 2vw,2.6rem)}
.quick-head p{margin-top:8px;color:var(--dim);max-width:52ch}
.quick-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (min-width:760px){.quick-list{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1100px){.quick-list{grid-template-columns:repeat(7,minmax(0,1fr))}}
.quick-list a{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:6px;min-height:84px;padding:14px 38px 14px 14px;background:var(--night-3);border:1px solid var(--hair);text-decoration:none;transition:border-color .15s,background .15s}
.quick-list a:hover{border-color:#55555a;background:#242428}
.quick-list b{font-weight:700;line-height:1.2}
.quick-list span{font-size:.85rem;color:var(--dim)}
.quick-list svg{position:absolute;right:12px;top:14px;width:16px;height:16px;color:var(--dim)}
.quick-list .any a{background:var(--fg);color:var(--night);border-color:var(--fg)}
.quick-list .any span,.quick-list .any svg{color:#4a4a48}
.quick-proof{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.88rem;color:var(--dim)}
.quick-proof span:first-child{color:var(--fg);font-weight:600}

/* gallery captions and the door */
.photos figure{position:relative}
.photos figcaption,.door figcaption{font-size:.85rem;color:var(--dim)}
.photos figcaption{position:absolute;left:0;bottom:0;padding:8px 12px;background:linear-gradient(0deg,rgba(11,11,12,.75),transparent);color:#e8e8e5;width:100%}
.door{margin:0 0 6px}
.door picture{display:block;aspect-ratio:16/9;overflow:hidden}
.door img{width:100%;height:100%;object-fit:cover}
.door figcaption{margin-top:8px}
/* quick book on phones: one clean list, the next-free-chair button first */
@media (max-width:599px){
  .quick-list{grid-template-columns:minmax(0,1fr);gap:0}
  .quick-list li:first-child a{border-top:1px solid var(--hair)}
  .quick-list li{min-width:0}
  .quick-list a{flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;min-height:58px;padding:0 4px;background:none;border:0;border-bottom:1px solid var(--hair)}
  .quick-list b{flex:1;min-width:0}
  .quick-list span{white-space:nowrap}
  .quick-list svg{position:static;flex:none}
  .quick-list .any{order:-1;margin-bottom:12px}
  .quick-list .any a{justify-content:flex-start;padding:0 16px;min-height:58px;border:0}
  .quick-proof{flex-direction:column;gap:4px}
}

/* instagram reels */
.rv.clip video{opacity:1}
.rv-cap{position:absolute;inset:auto 0 0 0;display:flex;flex-direction:column;gap:6px;padding:40px 12px 12px;background:linear-gradient(0deg,rgba(11,11,12,.85),transparent)}
.rv-cap span{font-weight:700;line-height:1.2}
.rv-cap a{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;font-weight:700;color:var(--wa);text-decoration:none}
.rv-cap a svg{width:14px;height:14px}
@media (min-width:900px){.rgrid.n5{grid-template-columns:repeat(5,1fr)}.rgrid.n3{grid-template-columns:repeat(3,1fr)}}
/* quick book on tablet and desktop: equal cards in one row, next free chair as a full-width bar */
@media (min-width:600px){
  .quick-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .quick-list li{display:flex}
  .quick-list li>a{flex:1}
  .quick-list b,.quick-list span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .quick-list .any{grid-column:1/-1}
  .quick-list .any a{flex-direction:row;align-items:center;justify-content:flex-start;gap:14px;min-height:56px;padding:0 44px 0 18px}
  .quick-list .any svg{top:50%;margin-top:-8px}
}
@media (min-width:1100px){.quick-list{grid-template-columns:repeat(6,minmax(0,1fr))}}
/* instagram button */
.ig-btn{position:relative;display:inline-flex;align-items:center;gap:14px;padding:8px 18px 8px 8px;background:var(--night-3);border-radius:999px;text-decoration:none;isolation:isolate;transition:transform .15s}
.ig-btn::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;z-index:-1}
.ig-btn:hover{transform:translateY(-1px)}
.ig-logo{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%);color:#fff;flex:none}
.ig-logo svg{width:22px;height:22px}
.ig-txt{display:flex;flex-direction:column;line-height:1.2}
.ig-txt small{font-size:.78rem;color:var(--dim)}
.ig-txt b{font-weight:700}
.ig-btn>svg{width:16px;height:16px;color:var(--dim)}
.index a{align-items:center}.index .go{grid-row:1;grid-column:2}

/* inside casa */
.inside{background:var(--night);padding-bottom:clamp(48px,7vw,96px)}
.inside-hero{position:relative;height:clamp(480px,88svh,880px);overflow:hidden;display:flex;align-items:flex-end}
.inside-hero picture,.inside-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.inside-hero img{transform:scale(1.04);animation:drift 24s ease-in-out infinite alternate}
@keyframes drift{to{transform:scale(1.14) translate(-2%,-1%)}}
@media (prefers-reduced-motion:reduce){.inside-hero img{animation:none}}
.inside-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--night) 0%,rgba(11,11,12,.15) 22%,rgba(11,11,12,.1) 50%,rgba(11,11,12,.92) 100%),linear-gradient(90deg,rgba(11,11,12,.55),transparent 60%)}
.inside-copy{position:relative;z-index:1;width:100%;padding-bottom:clamp(32px,5vw,64px)}
.inside-copy .kicker{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:#cfcfcb;margin-bottom:14px}
.inside-copy h2{font-size:clamp(3.2rem,1.6rem + 7vw,8.5rem);line-height:.9;letter-spacing:-.055em}
.inside-copy p:last-child{margin-top:18px;font-size:clamp(1.05rem,1rem + .4vw,1.3rem);color:#dcdcd8;max-width:36ch}
.strip-head{display:flex;justify-content:space-between;align-items:center;margin-top:clamp(24px,3vw,40px);margin-bottom:16px;color:var(--dim);font-size:.85rem;letter-spacing:.12em;text-transform:uppercase}
.strip-nav{display:none;gap:8px}
@media (hover:hover) and (min-width:900px){.strip-nav{display:flex}}
.strip-nav button{width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--hair);background:transparent;color:var(--fg);cursor:pointer;transition:background .15s,border-color .15s}
.strip-nav button:hover{background:var(--night-3);border-color:#55555a}
.strip-nav button svg{width:18px;height:18px}
.strip-nav button:first-child svg{transform:rotate(180deg)}
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(240px,78vw,440px);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:max(var(--gut),calc((100vw - 1240px) / 2 + var(--gut)));padding-inline:max(var(--gut),calc((100vw - 1240px) / 2 + var(--gut)));scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
@media (min-width:900px){.strip{grid-auto-columns:clamp(300px,30vw,440px)}}
.strip li{scroll-snap-align:start}
.strip figure{margin:0}
.strip picture{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--night-3)}
.strip img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.1,1)}
.strip figure:hover img{transform:scale(1.04)}
.strip figcaption{display:flex;gap:12px;align-items:baseline;margin-top:12px;font-weight:600}
.strip figcaption .num{font-size:.8rem;color:var(--dim);font-weight:500}
.word{align-items:center}.word .mark{height:26px;width:auto;margin-right:2px}.ftr-word .mark{height:34px}
.ftr-word{align-items:center}.ftr-word .mark{height:clamp(44px,2rem + 3vw,72px)}
.ftr-word .mark{width:auto}

/* ---------- identity layer: sign, leather, pole ---------- */
/* film grain over everything, very light */
body::before{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* wordmark: the pole mark + the script from the shopfront */
.word{gap:10px}
.word .script{height:30px;width:auto;margin-top:2px}
.word span{color:var(--tan-2)}
.ftr-word .script{height:clamp(48px,2rem + 4vw,88px);width:auto}

/* buttons in leather tan; green stays for WhatsApp only */
.btn{background:var(--tan);color:var(--tan-ink)}
.btn:hover{background:var(--tan-2)}
.btn-wa,.btn-wa:hover{background:var(--wa);color:var(--wa-ink)}
.light .btn{background:var(--ink);color:var(--paper)}
.light .btn-wa{background:var(--wa);color:var(--wa-ink)}
.hdr-book,.bar .bk{background:var(--tan);color:var(--tan-ink)}
.quick-list .any a{background:var(--tan);border-color:var(--tan);color:var(--tan-ink)}
.quick-list .any span,.quick-list .any svg{color:#4b2f17}
.rv-cap a{color:var(--tan-2)}
.quotes .stars{color:var(--tan)}
.row .bk{color:#8a5a2b}

/* hero: the shop sign glowing like the neon in the lounge */
.film .sign{display:block;width:clamp(190px,34vw,420px);height:auto;margin:6px 0 10px -6px;filter:drop-shadow(0 0 6px rgba(255,255,255,.55)) drop-shadow(0 0 28px rgba(255,214,170,.35));animation:neon 2.4s ease-out both}
@keyframes neon{0%{opacity:0}8%{opacity:.9}10%{opacity:.15}14%{opacity:1}18%{opacity:.35}24%,100%{opacity:1}}
.film.signed h1{font-size:clamp(1.9rem,1rem + 3.4vw,4rem);line-height:1;max-width:16ch}
@media (prefers-reduced-motion:reduce){.film .sign{animation:none}}

/* section kickers: the mark in tan + a small label */
[data-k]::before{content:attr(data-k);display:flex;align-items:center;flex-basis:100%;min-height:22px;padding-left:18px;margin-bottom:14px;background:url(../img/mark-teal.svg) left center/auto 22px no-repeat;color:var(--tan);font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.light [data-k]::before{color:var(--petrol);background-image:url(../img/mark-petrol.svg)}

/* barber pole band with a slow ticker */
.pole{position:relative;overflow:hidden;height:56px;background:repeating-linear-gradient(-45deg,var(--tan) 0 14px,var(--fg) 14px 28px,var(--night) 28px 42px);background-size:59.4px 59.4px;animation:pole 3s linear infinite;display:flex;align-items:center}
@keyframes pole{to{background-position:59.4px 0}}
.pole-track{display:flex;width:max-content;animation:tick 48s linear infinite;background:var(--night);border-block:1px solid #000;padding:9px 0}
.pole-track span{display:flex;align-items:center;gap:22px;padding-right:22px;white-space:nowrap}
.pole-track b{font-weight:700;font-size:.82rem;letter-spacing:.18em;text-transform:uppercase}
.pole-track i{width:7px;height:18px;background:url(../img/mark.svg) center/contain no-repeat}
@keyframes tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.pole,.pole-track{animation:none}}

/* offer band in leather tan instead of WhatsApp green */
.offer{background:var(--tan);color:var(--tan-ink)}
.offer ul{border-top-color:var(--tan-ink)}
.offer li{border-bottom-color:rgba(26,16,9,.25)}
.offer .btn{background:var(--tan-ink);color:var(--tan-2)}
.offer .btn-wa{background:var(--wa);color:var(--wa-ink)}

/* reviews: big tan quote mark */
.quotes li{position:relative;border-top:2px solid var(--tan)}

/* inside casa kicker in tan */
.inside-copy .kicker{color:var(--tan-2)}
/* menu: numbered like a shop price board */
.board{counter-reset:cat}
.cat{counter-increment:cat}
.cat summary h3{display:flex;align-items:baseline;gap:14px}
.cat summary h3::before{content:counter(cat,decimal-leading-zero);font-size:.8rem;font-weight:700;letter-spacing:.08em;color:var(--tan);font-variant-numeric:tabular-nums;min-width:1.6em}
.cat[open] summary h3::before{color:#8a5a2b}
.row .p{background:linear-gradient(transparent 62%,rgba(200,146,90,.32) 62%);padding:0 3px}
@media (hover:hover) and (min-width:760px){.row:hover{background:#e8dccb}}
@media (min-width:1000px){.board .side{position:sticky;top:110px;align-self:start}}

/* ---------- Casa identity v2: from the brand study ---------- */
/* poster voice: condensed heavy capitals, like the wall posters */
h1,h2,.h-big,.offer h2,.inside-copy h2,.index h3,.cat summary h3,.card h3,.ways h3,.art-list h3,.points h2{font-family:var(--fh);font-stretch:66%;font-weight:850;text-transform:uppercase;letter-spacing:-.005em;line-height:.9}
.cat summary h3,.ways h3,.points h2,.art-list h3{font-stretch:80%;font-weight:750;letter-spacing:.01em}
.film h1{font-stretch:62%;font-weight:900;line-height:.86}
.film.signed h1{font-size:clamp(3rem,1.4rem + 7vw,7.6rem);max-width:none;line-height:.86}
.film h1 em,.h-big em{font-style:normal;color:var(--teal)}
.light .h-big em{color:var(--petrol)}
.prose h2,.prose h3,.faq summary,.ftr h2{font-family:var(--f);text-transform:none;font-stretch:100%}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ar{font-family:var(--far);font-weight:700;direction:rtl;font-size:clamp(1.05rem,1rem + .5vw,1.35rem);color:var(--tan-2);margin-top:14px}

/* the hero sign glows in Marina teal; the ribbon rises at the edge */
.film .sign{filter:drop-shadow(0 0 6px rgba(255,255,255,.5)) drop-shadow(0 0 30px rgba(100,173,164,.55))}
.film::after{background:linear-gradient(180deg,rgba(20,24,23,.55),rgba(20,24,23,.2) 30%,rgba(20,24,23,.55) 55%,rgba(20,24,23,.95))}
@media (min-width:900px){.film::after{background:linear-gradient(90deg,rgba(20,24,23,.82),rgba(20,24,23,.35) 60%,rgba(20,24,23,.15)),linear-gradient(180deg,rgba(20,24,23,.5),transparent 30%,transparent 60%,rgba(20,24,23,.92))}}
.rib{position:absolute;top:0;bottom:0;right:clamp(10px,3vw,40px);width:28px;overflow:hidden;z-index:1;opacity:.75;-webkit-mask:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);mask:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);pointer-events:none}
.rib>div{display:flex;flex-direction:column;animation:ribup 22s linear infinite}
.rib img{width:28px;height:auto;margin-top:-5px;flex:none}
@keyframes ribup{to{transform:translateY(-50%)}}
@media (min-width:960px){.rib{right:auto;left:calc(50% + 620px - var(--gut) + 14px)}}
@media (min-width:960px) and (max-width:1340px){.rib{left:auto;right:12px}}
@media (max-width:959px){.rib{display:none}}

/* marble: Casa's poster ink, painted by main.js */
canvas[data-marble]{position:absolute;inset:0;width:100%;height:100%;display:block;background:var(--petrol)}
canvas[data-marble="cognac"]{background:#5b4330}
.mband{position:relative;overflow:hidden;height:64px;display:flex;align-items:center;background:var(--petrol)}
.mband .pole-track{position:relative;background:rgba(20,24,23,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:0;padding:10px 0}
.mband .pole-track b{color:var(--fg)}

/* manifesto band */
.manifesto{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(72px,11vw,150px)}
.manifesto canvas{z-index:-2}
.manifesto::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 25% 55%,rgba(20,24,23,.7),rgba(20,24,23,.2) 70%)}
.manifesto .wrap{display:flex;align-items:center;gap:clamp(20px,5vw,64px)}
.m-mark{height:clamp(120px,22vw,250px);width:auto;flex:none;filter:drop-shadow(0 6px 24px rgba(0,0,0,.35))}
.manifesto blockquote{margin:0}
.manifesto blockquote p{font-family:var(--fh);font-stretch:62%;font-weight:900;text-transform:uppercase;font-size:clamp(2.6rem,1.2rem + 6.4vw,7rem);line-height:.86;color:#fff;text-wrap:balance}
.manifesto blockquote em{font-style:normal;color:var(--tan-2)}
.manifesto footer{margin-top:18px;font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.8)}
@media (max-width:520px){.m-mark{display:none}}

/* light slash: the ceiling LED strips, under section headings */
.sec-head h2,.side .h-big,.quick-head h2,.inside-copy h2,.offer h2{position:relative}
.sec-head h2::after,.side .h-big::after,.quick-head h2::after{content:"";display:block;width:72px;height:3px;margin-top:16px;border-radius:2px;background:#f7f4ee;box-shadow:0 0 12px 2px rgba(255,255,255,.45);transform:rotate(-8deg);transform-origin:left center}
.light .side .h-big::after,.light .sec-head h2::after{background:var(--petrol);box-shadow:none}

/* buttons: Marina teal; WhatsApp keeps its green */
.btn{background:var(--teal);color:var(--tan-ink)}
.btn:hover{background:var(--tan-2)}
.light .btn{background:var(--petrol);color:var(--paper)}
.light .btn:hover{background:#1b3632}
.hdr-book,.bar .bk{background:var(--teal);color:var(--tan-ink)}
.hdr.solid{background:rgba(20,24,23,.92)}
.word span{color:var(--tan-2)}

/* offer on cognac marble */
.offer{position:relative;overflow:hidden;isolation:isolate;background:#5b4330;color:#fff}
.offer canvas{z-index:-2}
.offer::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(20,24,23,.78),rgba(20,24,23,.35))}
.offer .kicker{color:#f1d9c2}
.offer ul{border-top-color:rgba(255,255,255,.7)}
.offer li{border-bottom-color:rgba(255,255,255,.22)}
.offer .btn{background:var(--fg);color:var(--ink)}
.offer .btn:hover{background:#fff}
.offer .btn-wa{background:var(--wa);color:var(--wa-ink)}

/* menu: petrol numbers, soft teal highlight on prices */
.cat summary h3::before,.cat[open] summary h3::before{color:var(--petrol);font-family:var(--f);font-stretch:100%}
.row .p{background:linear-gradient(transparent 62%,rgba(100,173,164,.35) 62%)}
.row .bk{color:var(--petrol)}
@media (hover:hover) and (min-width:760px){.row:hover{background:#e2ddd5}}

/* halo: the round lit mirrors */
.halos{display:flex;gap:clamp(10px,2vw,18px);align-items:center}
.halo{width:clamp(64px,8vw,96px);aspect-ratio:1;border-radius:50%;overflow:hidden;flex:none;box-shadow:0 0 0 3px #f7f4ee,0 0 18px 5px rgba(255,250,240,.45),0 0 48px 8px rgba(255,250,240,.14)}
.halo picture,.halo img{display:block;width:100%;height:100%;object-fit:cover}
.quotes li{border-top:2px solid var(--teal)}
.quotes .stars{color:var(--teal)}
.rv-cap a{color:var(--tan-2)}
.inside-copy .kicker{color:var(--tan-2)}
.quick-list .any a{background:var(--teal);border-color:var(--teal);color:var(--tan-ink)}
.quick-list .any span,.quick-list .any svg{color:#16403b}
.go-main{background:var(--wa)}
@media (prefers-reduced-motion:reduce){.rib>div{animation:none}}
.btn-wa,.btn-wa:hover,.light .btn-wa{background:var(--wa);color:var(--wa-ink)}
.mband{height:92px}
.mband .pole-track{padding:8px 0}
.manifesto::after{background:radial-gradient(ellipse at 25% 55%,rgba(20,24,23,.78),rgba(20,24,23,.3) 75%)}
/* the official lockup: S mark + Casa / Barbershop */
.word .logo{height:38px;width:auto}
.ftr-word .logo{height:clamp(64px,3rem + 3vw,104px);width:auto}
@media (max-width:379px){.word .logo{height:32px}}