button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;color:inherit}
:root{
  --ink:#060606; --ink-2:#0e0e0e; --ink-3:#1a1a1a; --ink-4:#3a3a3a;
  --bone:#f5f0e8; --bone-2:#ebe5d8; --paper:#e6dfd0;
  --blood:#8a1a1a; --blood-2:#b22b2b; --blood-soft:#d05151;
  --ochre:#b8956d; --ochre-2:#8d6f4f;
  --rule:rgba(245,240,232,.08); --rule-2:rgba(245,240,232,.16);
  --rule-soft:rgba(245,240,232,.04);
  --rule-ink:rgba(6,6,6,.1); --rule-ink-2:rgba(6,6,6,.18);
  --display:'Cinzel', serif;
  --serif:'Old Standard TT', serif;
  --sans:'Inter', sans-serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{background:var(--ink);color:var(--bone);font-family:var(--sans);font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit}

.js #pto{position:fixed;inset:0;background:var(--ink);z-index:9999;pointer-events:none;opacity:1;transition:opacity .4s ease}
#pto.hide{opacity:0}

.yeti-bar{position:sticky;top:0;z-index:9000;background:#000;color:rgba(245,240,232,.55);display:flex;align-items:center;justify-content:space-between;padding:10px 28px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;border-bottom:1px solid rgba(245,240,232,.06);}
.yeti-bar a{color:rgba(245,240,232,.55);text-decoration:none}
.yeti-bar a:hover{color:#fff}
.yeti-bar .right{background:var(--blood);color:var(--bone);font-weight:500;padding:7px 14px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;}
.yeti-bar .right:hover{background:var(--blood-2)}

.nav-toggle{display:none;background:none;border:none;font-size:22px;cursor:pointer;padding:8px;color:var(--bone)}
nav.site-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:24px 40px;background:var(--ink);border-bottom:1px solid var(--rule);position:relative;z-index:8500;}
.nav-l,.nav-r{display:flex;gap:36px;align-items:center}
.nav-r{justify-content:flex-end}
nav.site-nav a{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(245,240,232,.65);text-decoration:none;position:relative;padding-bottom:4px;font-weight:400;}
nav.site-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--blood-2);transition:right .35s cubic-bezier(.4,0,.2,1);}
nav.site-nav a:hover{color:var(--bone)}
nav.site-nav a:hover::after{right:0}
nav.site-nav a.nav-cta::after{display:none}
nav.site-nav .nav-mark{font-family:var(--display);font-size:24px;font-weight:500;letter-spacing:.32em;color:var(--bone);display:flex;align-items:baseline;gap:8px;line-height:1;text-transform:uppercase;}
nav.site-nav .nav-mark sub{font-family:var(--mono);font-size:9px;letter-spacing:.22em;color:rgba(245,240,232,.55);text-transform:uppercase;vertical-align:baseline;font-weight:400;letter-spacing:.18em}
.nav-cta{border:1px solid var(--blood-2);color:var(--blood-soft)!important;padding:14px 20px!important;font-size:10px!important;letter-spacing:.18em!important;transition:background .25s,color .25s;}
.nav-cta:hover{background:var(--blood);color:var(--bone)!important;border-color:var(--blood)}

.hero{position:relative;background:var(--ink);overflow:hidden;padding:48px 36px 0}
.hero-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:end;min-height:80vh}
.hero-left{padding-bottom:48px}
.hero-meta{display:flex;gap:20px;align-items:center;margin-bottom:36px;font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(245,240,232,.5);flex-wrap:wrap}
.hero-meta .pill{background:var(--blood);color:var(--bone);padding:5px 10px;font-weight:500;letter-spacing:.18em;}
.hero-meta .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--blood-soft)}
.hero-h1{font-family:var(--display);font-weight:500;line-height:1.05;letter-spacing:.02em;font-size:clamp(48px,5.6vw,84px);color:var(--bone);text-transform:uppercase;}
.hero-h1 em{font-family:var(--serif);font-style:italic;color:var(--blood-soft);font-weight:400;font-size:.94em;text-transform:none;letter-spacing:0;display:block;margin-top:12px}
.hero-h1 .word{display:inline-block;opacity:0;transform:translateY(.2em);animation:wordIn .9s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes wordIn{to{opacity:1;transform:none}}
.hero-lede{font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.55;color:rgba(245,240,232,.78);max-width:38ch;margin-top:36px;margin-bottom:36px;font-weight:400}
.hero-lede em{color:var(--blood-soft);font-style:italic;font-weight:400}
.hero-stats{display:grid;grid-template-columns:repeat(3,auto);gap:36px;border-top:1px solid var(--rule);padding-top:28px;margin-top:36px}
.hero-stat .num{font-family:var(--display);font-size:32px;font-weight:500;color:var(--bone);line-height:1;margin-bottom:8px;letter-spacing:.04em}
.hero-stat .num em{font-family:var(--serif);font-style:italic;color:var(--blood-soft);font-weight:400;text-transform:none;letter-spacing:0}
.hero-stat .lab{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;color:rgba(245,240,232,.5);text-transform:uppercase}
.hero-ctas{display:flex;gap:24px;align-items:center;margin-bottom:48px;flex-wrap:wrap}
.btn-fill{background:var(--blood);color:var(--bone);padding:17px 30px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;border:none;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:14px;font-family:var(--mono);font-weight:500;transition:background .25s, transform .25s;}
.btn-fill:hover{background:var(--blood-2);transform:translateY(-1px)}
.btn-fill .arrow{display:inline-block;width:20px;height:12px;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M1 6h17M13 1l5 5-5 5'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M1 6h17M13 1l5 5-5 5'/></svg>") center/contain no-repeat;vertical-align:middle;margin-left:2px;transition:transform .25s ease}
.btn-fill:hover .arrow{transform:translateX(3px)}
.btn-ghost{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(245,240,232,.78);text-decoration:none;display:inline-flex;align-items:center;gap:12px;font-weight:400;padding:16px 0;border-bottom:1px solid var(--rule-2);transition:color .25s,border-color .25s;}
.btn-ghost:hover{color:var(--bone);border-color:var(--blood-2)}

.hero-right{padding-bottom:48px;display:flex;flex-direction:column;gap:24px}
.hero-fig{position:relative;background:#0a0a0a;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--rule-2)}
.hero-fig image-slot, .hero-fig img{position:absolute;inset:0;width:100%;height:100%;animation:kenburns 22s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1.06)}to{transform:scale(1.14) translate(-2%,-1%)}}
.hero-fig::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 60%,rgba(0,0,0,.5) 100%)}
.hero-fig .stamp{position:absolute;top:18px;left:18px;z-index:2;font-family:var(--mono);font-size:9px;letter-spacing:.22em;color:var(--bone);text-transform:uppercase;background:rgba(0,0,0,.55);padding:6px 10px;border:1px solid rgba(245,240,232,.18);}
.hero-fig .stamp.br{top:auto;bottom:18px;left:auto;right:18px}
.hero-fig .stamp.tr{top:18px;left:auto;right:18px}
.hero-fig .stamp.bl{top:auto;bottom:18px;left:18px}
.hero-fig .stamp .em{color:var(--blood-soft)}

.marq{background:var(--blood);color:var(--bone);overflow:hidden;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:18px 0;}
.marq-track{display:flex;gap:48px;align-items:center;animation:marq 36s linear infinite;white-space:nowrap;width:max-content}
.marq span{font-family:var(--display);font-size:22px;font-weight:500;letter-spacing:.18em;color:var(--bone);text-transform:uppercase;line-height:1}
.marq em{font-family:var(--serif);font-style:italic;color:var(--bone);opacity:.78;font-size:.86em;text-transform:none;letter-spacing:0;font-weight:400}
.marq .dot{font-family:var(--display);color:var(--bone);font-size:18px;line-height:0;display:flex;align-items:center;opacity:.6}
.marq .dot::before{content:"✦"}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* THE STUDIO (bespoke quote callout) */
.studio{background:var(--ink);color:var(--bone);padding:120px 40px;position:relative}
.studio-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.studio-eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.28em;color:var(--blood-soft);text-transform:uppercase;display:flex;align-items:center;gap:14px;margin-bottom:24px}
.studio-eyebrow span{display:inline-block;width:36px;height:1px;background:var(--blood-2)}
.studio-quote{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(36px,4.3vw,64px);line-height:1.18;letter-spacing:0;color:var(--bone)}
.studio-quote em{color:var(--blood-soft);font-weight:400}
.studio-attr{margin-top:36px;display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(245,240,232,.55);}
.studio-attr span{display:inline-block;width:32px;height:1px;background:var(--blood-2)}
.studio-fig{position:relative;aspect-ratio:4/5;background:var(--ink-2);overflow:hidden;border:1px solid var(--rule-2)}
.studio-fig image-slot{position:absolute;inset:0;width:100%;height:100%}
.studio-fig::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 70%,rgba(0,0,0,.45) 100%)}
.studio-fig--no-photo{background:linear-gradient(180deg,#0c0a08 0%,#1a1612 100%);border:1px solid rgba(184,79,53,.22)}
.studio-fig--no-photo::after{display:none}
.studio-stamp{position:absolute;z-index:2;top:24px;left:24px;font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;color:var(--bone);background:rgba(0,0,0,.55);padding:7px 11px;border:1px solid rgba(245,240,232,.18);text-transform:uppercase;}
.studio-plates{position:absolute;z-index:2;bottom:24px;right:24px;display:flex;gap:10px}
.plate{background:rgba(0,0,0,.78);border:1px solid var(--rule-2);padding:12px 14px;backdrop-filter:blur(6px)}
.plate .pn{font-family:var(--display);font-size:22px;color:var(--bone);line-height:1;font-weight:500;letter-spacing:.04em}
.plate .pn em{font-family:var(--serif);font-style:italic;color:var(--blood-soft);font-weight:400;letter-spacing:0}
.plate .pl{font-family:var(--mono);font-size:8.5px;letter-spacing:.22em;color:rgba(245,240,232,.6);text-transform:uppercase;margin-top:5px}

.sec{padding:140px 40px;background:var(--ink);color:var(--bone)}
.sec.bone{background:var(--bone);color:var(--ink)}
.sec.bone .sec-eyebrow{color:var(--blood);}
.sec.bone .sec-eyebrow span{background:var(--blood)}
.sec.bone .sec-h2{color:var(--ink)}
.sec.bone .sec-h2 em{color:var(--blood)}
.sec.bone .sec-lede{color:var(--ink-3)}
.sec-wrap{max-width:1280px;margin:0 auto}
.sec-eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.28em;color:var(--blood-soft);text-transform:uppercase;display:flex;align-items:center;gap:14px;margin-bottom:24px}
.sec-eyebrow span{display:inline-block;width:36px;height:1px;background:var(--blood-2)}
.sec-h2{font-family:var(--display);font-weight:500;font-size:clamp(40px,4.4vw,72px);line-height:1.1;letter-spacing:.02em;color:var(--bone);margin-bottom:24px;max-width:18ch;text-transform:uppercase}
.sec-h2 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--blood-soft);text-transform:none;letter-spacing:0;font-size:.86em}
.sec-lede{font-family:var(--serif);font-style:italic;font-weight:400;font-size:21px;line-height:1.55;color:rgba(245,240,232,.78);max-width:55ch;margin-bottom:64px}

/* ARTISTS (artist-first ID-card style) */
.art-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:1240px){.art-grid{grid-template-columns:repeat(3,1fr);gap:22px}}
.art-card{background:var(--ink-2);border:1px solid var(--rule-2);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,border-color .25s,box-shadow .25s;cursor:pointer;text-decoration:none;color:inherit}
.art-card:hover{transform:translateY(-4px);border-color:var(--blood-2);box-shadow:0 32px 80px -20px rgba(138,26,26,.32)}
.art-fig{position:relative;aspect-ratio:4/5;background:var(--ink);overflow:hidden}
.art-fig image-slot{position:absolute;inset:0;width:100%;height:100%}
.art-fig::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.7) 100%)}
.art-fig .id{position:absolute;top:14px;left:14px;font-family:var(--mono);font-size:9px;letter-spacing:.22em;color:var(--bone);text-transform:uppercase;background:rgba(0,0,0,.6);padding:6px 10px;border:1px solid rgba(245,240,232,.18);display:flex;flex-direction:column;gap:3px;line-height:1.3}
.art-fig .id b{color:var(--blood-soft);font-weight:500}
.art-fig .wait{position:absolute;top:14px;right:14px;font-family:var(--mono);font-size:9px;letter-spacing:.22em;color:var(--bone);text-transform:uppercase;background:var(--blood);padding:6px 10px;font-weight:500}
.art-fig .wait.cl{background:rgba(0,0,0,.6);color:rgba(245,240,232,.7);border:1px solid rgba(245,240,232,.18);font-weight:400}
.art-fig .name-overlay{position:absolute;left:18px;bottom:18px;right:18px;color:var(--bone);z-index:1}
.art-fig .name-overlay h3{font-family:var(--display);font-size:32px;font-weight:500;letter-spacing:.04em;line-height:1;text-transform:uppercase;margin-bottom:6px}
.art-fig .name-overlay h3 em{font-family:var(--serif);font-style:italic;color:var(--blood-soft);font-weight:400;text-transform:none;letter-spacing:0;font-size:.78em;display:block;margin-top:4px}
.art-fig .name-overlay .role{font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:rgba(245,240,232,.7)}
.art-body{padding:24px;display:grid;grid-template-rows:auto auto 1fr auto;gap:18px;flex:1}
.art-spec{display:flex;flex-wrap:wrap;gap:6px}
.art-spec li{list-style:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--bone);text-transform:uppercase;background:rgba(245,240,232,.08);padding:6px 10px;border:1px solid var(--rule-2);}
.art-bio{font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.6;color:rgba(245,240,232,.86);font-weight:400}
.art-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;border-top:1px dashed var(--rule-2);padding-top:14px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:rgba(245,240,232,.66);text-transform:uppercase}
.art-stats b{display:block;color:var(--bone);font-family:var(--display);font-size:18px;letter-spacing:.06em;margin-top:4px;font-weight:500}
.art-stats b em{font-family:var(--serif);font-style:italic;color:var(--blood-soft);font-weight:400;font-size:.78em}
.art-cta{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--blood-soft);text-transform:uppercase;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--rule-2);padding-top:14px;font-weight:500}
.art-cta::after{content:"→";font-size:14px;color:var(--blood-soft)}

/* FLASH GALLERY (bespoke) */
.flash-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.flash{position:relative;aspect-ratio:1/1;background:var(--bone);overflow:hidden;cursor:pointer;transition:transform .35s;border:1px solid var(--rule-ink-2)}
.flash:hover{transform:scale(.97)}
.flash image-slot{position:absolute;inset:0;width:100%;height:100%}
.flash-num{position:absolute;top:10px;left:10px;font-family:var(--mono);font-size:9px;letter-spacing:.22em;color:var(--ink);background:var(--bone);padding:4px 8px;border:1px solid var(--rule-ink-2);text-transform:uppercase;z-index:2}

/* CONSULT FLOW (4-step) */
.cf{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:32px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.cf-step{padding:48px 28px 48px 0;border-right:1px solid var(--rule);position:relative}
.cf-step:last-child{border-right:none;padding-right:0}
.cf-step:not(:first-child){padding-left:28px}
.cf-num{font-family:var(--display);font-size:60px;font-weight:500;color:var(--blood-2);margin-bottom:24px;line-height:1;letter-spacing:.04em}
.cf-name{font-family:var(--display);font-size:24px;line-height:1.1;color:var(--bone);margin-bottom:18px;letter-spacing:.04em;font-weight:500;text-transform:uppercase}
.cf-name em{font-family:var(--serif);font-style:italic;color:var(--blood-soft);font-weight:400;text-transform:none;letter-spacing:0;font-size:.86em}
.cf-desc{font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.55;color:rgba(245,240,232,.7);margin-bottom:24px;font-weight:400}
.cf-time{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:rgba(245,240,232,.5);text-transform:uppercase;border-top:1px dashed var(--rule);padding-top:14px;display:flex;justify-content:space-between}
.cf-time b{color:var(--blood-soft);font-weight:500}

/* HOUSE RULES (illustrated stamps) */
.hr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--rule-ink-2)}
.hr{padding:48px 36px;border-right:1px solid var(--rule-ink-2);border-bottom:1px solid var(--rule-ink-2);position:relative;background:var(--bone)}
.hr:nth-child(3n){border-right:none}
.hr:nth-last-child(-n+3){border-bottom:none}
.hr-num{font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--blood);text-transform:uppercase;margin-bottom:18px;display:flex;gap:14px;align-items:center}
.hr-num span{display:inline-block;width:32px;height:1px;background:var(--blood)}
.hr-name{font-family:var(--display);font-size:26px;line-height:1.1;color:var(--ink);margin-bottom:14px;letter-spacing:.04em;font-weight:500;text-transform:uppercase}
.hr-name em{font-family:var(--serif);font-style:italic;color:var(--blood);font-weight:400;text-transform:none;letter-spacing:0;font-size:.84em}
.hr-desc{font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.55;color:var(--ink-3);font-weight:400}

/* REVIEWS */
.rv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.rv{padding:32px 0;border-top:1px solid var(--rule)}
.rv-stars{font-family:var(--mono);font-size:13px;letter-spacing:.3em;color:var(--blood-soft);margin-bottom:24px}
.rv-quote{font-family:var(--serif);font-style:italic;font-weight:400;font-size:21px;line-height:1.55;color:var(--bone);margin-bottom:28px}
.rv-quote em{color:var(--blood-soft);font-weight:400}
.rv-attr{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:rgba(245,240,232,.55);text-transform:uppercase;display:flex;flex-direction:column;gap:5px}
.rv-attr b{color:var(--bone);font-weight:500;letter-spacing:.22em}

/* ABOUT */
.about{display:grid;grid-template-columns:1fr 1.1fr;gap:80px;align-items:center}
.about-fig{position:relative;aspect-ratio:1/1.1;background:var(--ink-2);overflow:hidden;border:1px solid var(--rule-2)}
.about-fig image-slot{position:absolute;inset:0;width:100%;height:100%}
.about-body .sec-h2{margin-bottom:32px}
.about-body p{font-family:var(--sans);font-size:16px;line-height:1.75;color:rgba(245,240,232,.78);margin-bottom:20px;max-width:48ch}
.about-body p em{font-family:var(--serif);font-style:italic;color:var(--blood-soft);font-weight:400}
.about-sig{margin-top:40px;font-family:var(--display);font-size:32px;font-weight:500;color:var(--bone);letter-spacing:.18em;line-height:1;text-transform:uppercase}
.about-sig em{font-family:var(--serif);font-style:italic;text-transform:none;color:var(--blood-soft);letter-spacing:0;font-weight:400;font-size:.7em;display:block;margin-top:8px}
.about-sig + .about-sig-meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;color:rgba(245,240,232,.5);text-transform:uppercase;margin-top:14px}

/* BIG CTA */
.cta{background:var(--ink);color:var(--bone);padding:160px 40px;position:relative;text-align:center;overflow:hidden;border-top:1px solid var(--blood);border-bottom:1px solid var(--blood)}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 40% at 50% 30%,rgba(138,26,26,.18) 0%,rgba(138,26,26,0) 60%)}
.cta-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:var(--blood-soft);text-transform:uppercase;margin-bottom:32px}
.cta-h{font-family:var(--display);font-weight:500;font-size:clamp(54px,6.6vw,108px);line-height:1.05;letter-spacing:.02em;color:var(--bone);margin-bottom:32px;text-transform:uppercase}
.cta-h em{font-family:var(--serif);font-style:italic;color:var(--blood-soft);font-weight:400;text-transform:none;letter-spacing:0;font-size:.7em;display:block;margin-top:12px}
.cta-lede{font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.55;color:rgba(245,240,232,.78);max-width:50ch;margin:0 auto 56px;font-weight:400}
.cta .btn-fill{background:var(--blood-2)}
.cta .btn-fill:hover{background:var(--blood-soft)}
.cta-meta{margin-top:48px;display:flex;gap:36px;justify-content:center;flex-wrap:wrap;font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;color:rgba(245,240,232,.5);text-transform:uppercase}

.yeti-cs{background:#000;color:var(--bone);padding:88px 40px;border-top:1px solid var(--rule)}
.yeti-cs-wrap{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:auto 1fr auto;gap:48px;align-items:center}
.yeti-cs-mark{font-family:var(--display);font-size:24px;font-weight:500;color:var(--bone);letter-spacing:.18em;line-height:1;text-transform:uppercase}
.yeti-cs-mark em{font-family:var(--serif);font-style:italic;color:var(--blood-soft);font-weight:400;text-transform:none;font-size:.86em;letter-spacing:0}
.yeti-cs-text{font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.55;color:rgba(245,240,232,.78);max-width:48ch;font-weight:400}
.yeti-cs-text b{color:var(--bone);font-style:normal;font-weight:500;font-family:var(--sans)}
.yeti-cs-meta{display:flex;flex-direction:column;gap:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:rgba(245,240,232,.55);text-transform:uppercase;text-align:right}
.yeti-cs-meta b{color:var(--blood-soft);font-weight:500;letter-spacing:.22em}
.yeti-cs-cta{display:inline-flex;align-items:center;gap:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--blood-soft);text-decoration:none;border-bottom:1px solid var(--blood-2);padding-bottom:6px;font-weight:500;transition:color .25s,border-color .25s}
.yeti-cs-cta:hover{color:var(--bone);border-color:var(--bone)}

footer{background:var(--ink);color:var(--bone);padding:80px 40px 36px;border-top:1px solid var(--rule)}
.foot-wrap{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:56px}
.foot-mark{font-family:var(--display);font-size:30px;font-weight:500;letter-spacing:.32em;color:var(--bone);margin-bottom:20px;line-height:1;text-transform:uppercase}
.foot-blurb{font-family:var(--serif);font-style:italic;font-size:16px;line-height:1.6;color:rgba(245,240,232,.6);max-width:32ch;font-weight:400}
.foot-col h3{font-family:var(--mono);font-size:10.5px;letter-spacing:.26em;color:var(--blood-soft);text-transform:uppercase;margin-bottom:20px;font-weight:500}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.foot-col a, .foot-col li{font-family:var(--sans);font-size:13px;color:rgba(245,240,232,.7);text-decoration:none;transition:color .25s}
.foot-col a:hover{color:var(--bone)}
.foot-bottom{max-width:1280px;margin:64px auto 0;padding-top:28px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:rgba(245,240,232,.5);text-transform:uppercase;flex-wrap:wrap;gap:16px;}
.foot-bottom a{color:rgba(245,240,232,.5);text-decoration:none}
.foot-bottom a:hover{color:var(--bone)}

.modal-bg{position:fixed;inset:0;background:rgba(6,6,6,.85);backdrop-filter:blur(8px);z-index:9500;opacity:0;pointer-events:none;transition:opacity .3s}
.modal-bg.on{opacity:1;pointer-events:auto}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.95);background:var(--ink-2);width:min(580px,92vw);z-index:9600;opacity:0;pointer-events:none;transition:opacity .3s,transform .35s cubic-bezier(.2,.7,.2,1);max-height:90vh;overflow:auto;border:1px solid var(--rule-2);}
.modal.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.modal-h{padding:36px 40px 28px;border-bottom:1px solid var(--rule-2);display:flex;align-items:center;justify-content:space-between}
.modal-h h3{font-family:var(--display);font-size:26px;color:var(--bone);font-weight:500;line-height:1;letter-spacing:.06em;text-transform:uppercase}
.modal-h h3 em{font-family:var(--serif);font-style:italic;color:var(--blood-soft);font-weight:400;letter-spacing:0;text-transform:none;font-size:.86em}
.modal-x{background:none;border:none;cursor:pointer;color:rgba(245,240,232,.6);padding:8px;font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;font-size:11px}
.modal-x:hover{color:var(--bone)}
.modal-body{padding:32px 40px 40px}
.modal-body label{display:block;margin-bottom:18px;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:rgba(245,240,232,.55);text-transform:uppercase}
.modal-body input,.modal-body select,.modal-body textarea{display:block;width:100%;padding:13px 14px;background:var(--ink);border:1px solid var(--rule-2);font-family:var(--sans);font-size:16px;color:var(--bone);margin-top:8px;}
.modal-body input:focus,.modal-body select:focus,.modal-body textarea:focus{outline:none;border-color:var(--blood-2)}
.modal-body textarea{min-height:80px;resize:vertical}
.modal-body button{width:100%;padding:16px;background:var(--blood);color:var(--bone);border:none;cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;margin-top:12px;transition:background .25s;}
.modal-body button:hover{background:var(--blood-2)}

@media (max-width:980px){
  nav.site-nav{grid-template-columns:1fr auto auto;padding:18px 22px}
  .nav-l, .nav-r .nav-link{display:none}
  .nav-toggle{display:block}
  .nav-r{gap:14px}
  .hero{padding:32px 20px 0}
  .hero-grid{grid-template-columns:1fr;gap:32px;min-height:auto}
  .hero-left, .hero-right{padding-bottom:36px}
  .hero-stats{gap:24px}
  .studio{padding:88px 24px}
  .studio-grid{grid-template-columns:1fr;gap:48px}
  .studio-quote{font-size:36px}
  .sec{padding:88px 24px}
  .sec-h2{font-size:42px}
  .art-grid{grid-template-columns:1fr 1fr;gap:14px}
  .flash-grid{grid-template-columns:repeat(2,1fr)}
  .cf{grid-template-columns:1fr 1fr;gap:0}
  .cf-step{padding:36px 18px!important;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
  .cf-step:nth-child(2n){border-right:none}
  .cf-step:nth-last-child(-n+2){border-bottom:none}
  .hr-grid{grid-template-columns:1fr 1fr}
  .hr:nth-child(3n){border-right:1px solid var(--rule-ink-2)}
  .hr:nth-child(2n){border-right:none}
  .hr:nth-last-child(-n+3){border-bottom:1px solid var(--rule-ink-2)}
  .hr:nth-last-child(-n+2){border-bottom:none}
  .rv-grid{grid-template-columns:1fr;gap:24px}
  .about{grid-template-columns:1fr;gap:48px}
  .cta{padding:96px 28px}
  .yeti-cs-wrap{grid-template-columns:1fr;gap:24px;text-align:left}
  .yeti-cs-meta{text-align:left}
  .foot-wrap{grid-template-columns:1fr 1fr;gap:36px}
  .foot-bottom{justify-content:flex-start}
}
@media (max-width:760px){
  .art-grid{grid-template-columns:1fr;gap:18px}
}
@media (max-width:560px){
  .flash-grid{grid-template-columns:1fr 1fr}
  .cf{grid-template-columns:1fr}
  .cf-step{border-right:none!important;border-bottom:1px solid var(--rule)!important}
  .cf-step:last-child{border-bottom:none!important}
  .hr-grid{grid-template-columns:1fr}
  .hr{border-right:none!important;border-bottom:1px solid var(--rule-ink-2)!important}
  .hr:last-child{border-bottom:none!important}
  .foot-wrap{grid-template-columns:1fr}
  .hero-stats{grid-template-columns:1fr;gap:18px}
  .hero-stat{display:flex;align-items:baseline;gap:14px}
  .hero-stat .num{margin-bottom:0;font-size:26px}
  .yeti-bar{flex-direction:column;gap:8px;padding:10px 16px}
  .yeti-bar .right{align-self:stretch;text-align:center}
}

.mob-nav{position:fixed;top:0;right:0;bottom:0;width:min(360px,86vw);background:var(--ink);color:var(--bone);padding:28px;z-index:9700;transform:translateX(105%);transition:transform .35s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column;gap:20px;border-left:1px solid var(--blood)}
.mob-nav.on{transform:translateX(0)}
.mob-nav .x{align-self:flex-end;background:none;border:none;color:var(--bone);font-family:var(--mono);font-size:12px;letter-spacing:.2em;cursor:pointer;text-transform:uppercase}
.mob-nav a{font-family:var(--display);font-size:24px;font-weight:500;color:var(--bone);text-decoration:none;letter-spacing:.18em;text-transform:uppercase}
.mob-nav a em{font-family:var(--serif);font-style:italic;color:var(--blood-soft);font-weight:400;letter-spacing:0;text-transform:none;font-size:.86em}
.mob-nav .sub{font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--blood-soft);margin-top:auto;text-transform:uppercase}

/* ── Mobile + reduced-motion: disable kenburns + heavy animations to keep scroll smooth ─ */
@media (max-width:880px){
  image-slot{animation:none !important}
}
@media (prefers-reduced-motion:reduce){
  image-slot{animation:none !important}
  *{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}
}


/* ─── A11y: keyboard focus ring + touch handling ─── */
:focus{outline:none}
:focus-visible{outline:2px solid #a31621;outline-offset:3px;border-radius:2px}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid #a31621;outline-offset:3px;border-radius:2px}
button,a,input[type=submit],input[type=button]{touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,0,0,.08)}
.modal,.booking-modal{overscroll-behavior:contain}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;background:#111;color:#fff;padding:14px 22px;font-family:inherit;font-size:11px;letter-spacing:.18em;text-transform:uppercase;z-index:9999}
.skip-link:focus,.skip-link:focus-visible{left:16px;top:16px;outline:2px solid #a31621;outline-offset:3px}

/* ─── Mobile scroll-perf — kill infinite animations + backdrop-filter + heavy transforms.
       Stops scroll jank on iOS Safari + low-end Android. Universal selectors. */
@media (max-width: 880px) {
  .hero-fig image-slot, .hero-figure image-slot,
  .hero-fig img, .hero-figure img,
  .hero-photo image-slot, .hero-photo img,
  image-slot[id*="hero"], .featured-cover img {
    animation: none !important;
    transform: none !important;
  }
  .modal-bg, .booking-modal-bg, [class*="modal-bg"],
  [class*="-cap"], [class*="-bar"], [class*="-stamp"], [class*="-plate"],
  .topbar, .site-nav, .yeti-bar, nav.site-nav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  section { content-visibility: auto; contain-intrinsic-size: 0 800px; }
  /* Reset stuck compositor layers from opacity:0 backdrop-filter elements */
  .modal-bg[style*="opacity: 0"], .modal-bg:not(.is-open) {
    will-change: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* NO MOBILE BTN PATCH — mobile button shrink */
@media (max-width:560px) {
  .btn-fill { padding: 13px 22px !important; font-size: 10.5px !important; letter-spacing: .18em !important; gap: 10px !important; }
  .btn-fill .arrow { width: 16px !important; height: 10px !important; }
  .btn-ghost { padding: 13px 20px !important; font-size: 10.5px !important; letter-spacing: .16em !important; }
  .nav-cta { padding: 11px 16px !important; font-size: 10px !important; letter-spacing: .14em !important; }
  .hero-actions, .hero-ctas { gap: 12px !important; flex-direction: column !important; align-items: stretch !important; }
  .hero-actions a, .hero-ctas a { justify-content: center !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SUB-PAGE KIT — the components the multi-page build needs that the
   single-page original never had: page masthead, prose column, priced
   menu rows, card grids, FAQ, callouts, related links, closing band.
   Every token here comes from this site's own palette; nothing is shared
   with another prototype.
   ═══════════════════════════════════════════════════════════════════════ */
.p-wrap{max-width:1240px;margin:0 auto;padding:0 40px}

/* Page masthead */
.p-head{background:var(--ink-2);border-bottom:1px solid var(--rule);padding:84px 0 72px}
.p-head .p-wrap{display:block}
.p-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ochre);margin-bottom:22px;display:flex;align-items:center;gap:12px}
.p-eyebrow::before{content:"";width:26px;height:1px;background:var(--ochre);flex:none}
.p-h1{font-family:var(--display);font-weight:400;font-size:clamp(40px,5.4vw,84px);line-height:1.02;
  letter-spacing:.06em;color:var(--bone);margin:0 0 26px;max-width:20ch;text-transform:uppercase;}
.p-h1 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ochre);letter-spacing:0;text-transform:none}
.p-lede{font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.9vw,23px);line-height:1.55;
  color:rgba(245,240,232,.76);max-width:56ch;margin:0}
.p-crumb{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(245,240,232,.56);margin-top:34px}
.p-crumb a{color:rgba(245,240,232,.56);text-decoration:none}
.p-crumb a:hover{color:var(--ochre)}
.p-crumb span{margin:0 8px;opacity:.5}

/* Sections */
.p-sec{padding:84px 0}
.p-sec + .p-sec{border-top:1px solid var(--rule)}
.p-sec--tint{background:var(--ink-2)}
.p-sec--ink{background:var(--ink);color:var(--bone)}
.p-sec--ink .p-h2,.p-sec--ink .p-prose p,.p-sec--ink .p-prose li{color:var(--bone)}
.p-sec--ink .p-lead{color:var(--bone)}
.p-h2{font-family:var(--display);font-weight:400;font-size:clamp(28px,3.4vw,50px);line-height:1.1;
  letter-spacing:.06em;color:var(--bone);margin:0 0 22px;max-width:24ch;text-transform:uppercase;}
.p-h2 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ochre);letter-spacing:0;text-transform:none}
.p-h3{font-family:var(--display);font-weight:400;font-size:clamp(20px,2vw,27px);line-height:1.18;
  color:var(--bone);margin:0 0 12px;text-transform:uppercase;}
.p-h3 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ochre);text-transform:none}
.p-lead{font-family:var(--serif);font-style:italic;font-size:clamp(19px,2vw,25px);line-height:1.5;
  color:rgba(245,240,232,.78);max-width:52ch;margin:0 0 30px}

/* Prose */
.p-prose{max-width:66ch}
.p-prose p{font-family:var(--sans);font-size:16.5px;line-height:1.72;color:rgba(245,240,232,.78);margin:0 0 20px}
.p-prose p:last-child{margin-bottom:0}
.p-prose strong{color:var(--bone);font-weight:600}
.p-prose em{font-family:var(--serif);font-style:italic;color:var(--ochre);font-size:1.06em}
.p-prose a{color:var(--ochre);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.p-prose a:hover{color:var(--bone)}
.p-prose ul,.p-prose ol{margin:0 0 22px;padding-left:0;list-style:none}
.p-prose li{font-family:var(--sans);font-size:16.5px;line-height:1.68;color:rgba(245,240,232,.78);
  margin-bottom:11px;padding-left:24px;position:relative}
.p-prose li::before{content:"";position:absolute;left:0;top:11px;width:9px;height:1px;background:var(--ochre)}
.p-prose h2,.p-prose h3{font-family:var(--display);font-weight:400;font-size:23px;color:var(--bone);
  margin:38px 0 12px;letter-spacing:.06em;text-transform:uppercase;}
.p-prose h3 em{font-family:var(--serif);font-style:italic;color:var(--ochre);text-transform:none;letter-spacing:0}

/* Two-column editorial split */
.p-split{display:grid;grid-template-columns:0.72fr 1fr;gap:72px;align-items:start}
.p-split--even{grid-template-columns:1fr 1fr}
.p-aside{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(245,240,232,.56);line-height:2;position:sticky;top:110px}
.p-aside b{display:block;color:var(--bone);font-weight:500;letter-spacing:.14em;margin-bottom:14px}

/* Priced menu rows */
.p-menu{border-top:1px solid var(--rule)}
.p-row{display:grid;grid-template-columns:46px minmax(0,1fr) minmax(110px,max-content) minmax(96px,max-content);gap:22px;align-items:baseline;
  padding:26px 0;border-bottom:1px solid var(--rule)}
.p-row-n{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:rgba(245,240,232,.56);padding-top:6px}
.p-row-name{font-family:var(--display);font-size:22px;line-height:1.2;color:var(--bone);letter-spacing:.06em;text-transform:uppercase;}
.p-row-name em{font-family:var(--serif);font-style:italic;color:var(--ochre);text-transform:none;letter-spacing:0}
.p-row-desc{font-family:var(--sans);font-size:15px;line-height:1.62;color:rgba(245,240,232,.62);margin-top:9px;max-width:62ch}
.p-row-time{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,240,232,.56)}
.p-row-price{font-family:var(--display);font-size:26px;color:var(--bone);text-align:right;letter-spacing:.06em}
.p-row-price em{font-family:var(--serif);font-style:italic;font-size:.62em;color:rgba(245,240,232,.56);letter-spacing:0}

/* Card grids */
.p-grid{display:grid;gap:2px}
.p-grid--2{grid-template-columns:repeat(2,1fr)}
.p-grid--3{grid-template-columns:repeat(3,1fr)}
.p-grid--4{grid-template-columns:repeat(4,1fr)}
.p-card{border:1px solid var(--rule);padding:32px 30px;background:var(--ink-2);display:flex;flex-direction:column}
.p-card .p-num{font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--ochre);margin-bottom:18px}
.p-card p{font-family:var(--sans);font-size:15px;line-height:1.65;color:rgba(245,240,232,.62);margin:0}
.p-card p + p{margin-top:14px}
.p-card-tag{margin-top:auto;padding-top:20px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(245,240,232,.56)}

/* Stat strip */
.p-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--rule);border:1px solid var(--rule)}
.p-stat{background:var(--ink-2);padding:28px 26px}
.p-stat b{display:block;font-family:var(--display);font-size:38px;line-height:1;color:var(--bone);margin-bottom:10px;letter-spacing:.06em}
.p-stat b em{font-family:var(--serif);font-style:italic;color:var(--ochre);font-size:.7em}
.p-stat span{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,240,232,.56);line-height:1.7}

/* Callout */
.p-note{border-left:2px solid var(--ochre);padding:22px 0 22px 26px;margin:34px 0;background:transparent}
.p-note b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ochre);margin-bottom:12px}
.p-note p{font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.6;color:rgba(245,240,232,.78);margin:0}

/* Figure */
.p-fig{position:relative;overflow:hidden;background:var(--ink-2)}
.p-fig img{display:block;width:100%;height:100%;object-fit:cover}
.p-fig--tall{aspect-ratio:4/5}
.p-fig--wide{aspect-ratio:16/9}
.p-fig--sq{aspect-ratio:1/1}
.p-figcap{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(245,240,232,.56);margin-top:14px;line-height:1.8}

/* FAQ */
.p-qa{border-top:1px solid var(--rule)}
.p-qa details{border-bottom:1px solid var(--rule)}
.p-qa summary{list-style:none;cursor:pointer;padding:26px 46px 26px 0;position:relative;
  font-family:var(--display);font-size:clamp(18px,1.8vw,23px);line-height:1.32;color:var(--bone);letter-spacing:.06em;text-transform:uppercase;}
.p-qa summary::-webkit-details-marker{display:none}
.p-qa summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:1px solid var(--ochre);border-bottom:1px solid var(--ochre);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s}
.p-qa details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.p-qa .p-qa-body{padding:0 0 28px;max-width:66ch}
.p-qa .p-qa-body p{font-family:var(--sans);font-size:16px;line-height:1.7;color:rgba(245,240,232,.62);margin:0 0 16px}
.p-qa .p-qa-body p:last-child{margin-bottom:0}

/* Related links */
.p-rel{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--rule);border:1px solid var(--rule)}
.p-rel a{background:var(--ink-2);padding:28px 26px;text-decoration:none;display:flex;flex-direction:column;gap:10px;
  transition:background .25s}
.p-rel a:hover{background:var(--ink-2)}
.p-rel .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ochre)}
.p-rel .t{font-family:var(--display);font-size:21px;line-height:1.22;color:var(--bone);letter-spacing:.06em;text-transform:uppercase;}
.p-rel .d{font-family:var(--sans);font-size:14px;line-height:1.6;color:rgba(245,240,232,.62)}

/* Closing band */
.p-cta{background:var(--ink);color:var(--bone);padding:96px 40px;text-align:center}
.p-cta h2{font-family:var(--display);font-weight:400;font-size:clamp(30px,4.2vw,62px);line-height:1.06;
  color:var(--bone);margin:0 auto 22px;max-width:18ch;letter-spacing:.06em;text-transform:uppercase;}
.p-cta h2 em{font-family:var(--serif);font-style:italic;color:var(--ochre);text-transform:none;letter-spacing:0}
.p-cta p{font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.55;
  color:rgba(245,240,232,.7);max-width:48ch;margin:0 auto 32px}
.p-cta-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.p-btn{display:inline-flex;align-items:center;gap:10px;padding:16px 28px;min-height:52px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;
  border:1px solid var(--ochre);color:var(--ochre);transition:background .25s,color .25s}
.p-btn:hover{background:var(--ochre);color:var(--ink)}
.p-btn--fill{background:var(--ochre);color:var(--ink)}
.p-btn--fill:hover{background:transparent;color:var(--ochre)}

/* Journal index cards */
.p-jgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:var(--rule);border:1px solid var(--rule)}
/* the grid paints its own gaps, so an unfilled cell reads as a blank card:
   match the track count to the number of posts */
.p-jgrid:has(> .p-jc:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.p-jgrid:has(> .p-jc:only-child){grid-template-columns:minmax(0,1fr)}

.p-jc{background:var(--ink-2);text-decoration:none;display:flex;flex-direction:column;transition:background .25s ease}
.p-jc:hover{background:var(--ink-2)}
.p-jc-fig{aspect-ratio:16/10;overflow:hidden;background:var(--ink-2)}
.p-jc-fig img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.p-jc:hover .p-jc-fig img{transform:scale(1.03)}
.p-jc-body{padding:26px 26px 30px;display:flex;flex-direction:column;gap:11px;flex:1}
.p-jc-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ochre)}
.p-jc-h{font-family:var(--display);font-weight:400;font-size:22px;line-height:1.2;color:var(--bone);margin:0;letter-spacing:.06em;text-transform:uppercase;}
.p-jc-d{font-family:var(--sans);font-size:14.5px;line-height:1.62;color:rgba(245,240,232,.62);margin:0}
.p-jc-r{margin-top:auto;padding-top:16px;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ochre)}
@media (max-width:980px){ .p-jgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .p-jgrid{grid-template-columns:1fr} }

/* Enquiry form */
.p-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 26px;max-width:860px}
.p-field{display:flex;flex-direction:column;gap:9px;min-width:0}
.p-field--wide{grid-column:1 / -1}
.p-field label{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,240,232,.56)}
.p-field input,.p-field select,.p-field textarea{
  font-family:var(--sans);font-size:16px;line-height:1.5;color:var(--bone);
  background:var(--ink-2);border:1px solid var(--rule);border-radius:2px;
  padding:13px 14px;min-height:50px;width:100%;
  transition:border-color .2s ease}
.p-field textarea{min-height:118px;resize:vertical}
.p-field select{appearance:none;background-image:none;cursor:pointer}
.p-field input::placeholder,.p-field textarea::placeholder{color:rgba(245,240,232,.56);opacity:.75}
.p-field input:focus,.p-field select:focus,.p-field textarea:focus{outline:none;border-color:var(--ochre)}
.p-field input:focus-visible,.p-field select:focus-visible,.p-field textarea:focus-visible{
  outline:2px solid var(--ochre);outline-offset:2px}
.p-form .p-btn{border-color:var(--ochre);color:var(--ochre);background:transparent;cursor:pointer;font:inherit;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase}
.p-form .p-btn--fill{background:var(--ochre);color:var(--ink-2)}
.p-form .p-btn--fill:hover{background:transparent;color:var(--ochre)}
.p-formnote{font-family:var(--sans);font-size:13.5px;line-height:1.6;color:rgba(245,240,232,.62);margin:14px 0 0}
@media (max-width:640px){ .p-form{grid-template-columns:1fr} }

/* Author byline for journal entries */
.p-by{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(245,240,232,.56);margin-top:30px}
.p-by b{color:var(--bone);font-weight:500}
.p-by span{opacity:.5}

/* Shell the sub-pages own: framing band, footer, page-transition veil and the
   reveal. The home page keeps whatever it already had; these never collide. */
#pto{position:fixed;inset:0;background:var(--ink-2);z-index:9999;pointer-events:none;
  opacity:1;transition:opacity .32s ease}
#pto.hide{opacity:0}
html:not(.js) #pto{display:none}

.sr{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.sr.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ .sr{opacity:1;transform:none;transition:none} }

.p-band{display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:var(--ink);color:rgba(245,240,232,.7);padding:11px 24px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.08);position:relative;z-index:8600}
.p-band a{color:rgba(245,240,232,.7);text-decoration:none}
.p-band a:hover{color:var(--bone)}
.p-band .right{background:var(--ochre);color:var(--ink);font-weight:500;padding:8px 15px;white-space:nowrap}
.p-band .right:hover{color:var(--ink);opacity:.86}
@media (max-width:860px){ .p-band .mid{display:none} .p-band{justify-content:space-between} }
@media (max-width:520px){ .p-band .back{display:none} .p-band{justify-content:flex-end} }

.p-foot{background:var(--ink);color:rgba(245,240,232,.7);padding:72px 40px 34px}
.p-foot-wrap{max-width:1240px;margin:0 auto;display:grid;
  grid-template-columns:1.5fr repeat(3,1fr);gap:48px}
.p-foot-mark{font-family:var(--display);font-size:30px;color:var(--bone);letter-spacing:.06em;text-transform:uppercase;}
.p-foot-mark em{font-family:var(--serif);font-style:italic;color:var(--ochre);text-transform:none;letter-spacing:0}
.p-foot-blurb{font-family:var(--sans);font-size:14px;line-height:1.7;color:rgba(245,240,232,.7);
  margin-top:16px;max-width:34ch;text-transform:none;letter-spacing:0}
.p-foot h3{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ochre);margin:0 0 18px}
.p-foot ul{list-style:none;margin:0;padding:0}
.p-foot li{font-family:var(--sans);font-size:14px;line-height:2.1;color:rgba(245,240,232,.7)}
.p-foot li a{color:rgba(245,240,232,.7);text-decoration:none}
.p-foot li a:hover{color:var(--bone)}
.p-foot-bottom{max-width:1240px;margin:52px auto 0;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.10);display:flex;justify-content:space-between;
  gap:18px;flex-wrap:wrap;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(245,240,232,.7)}
.p-foot-bottom a{color:var(--ochre);text-decoration:none}
@media (max-width:860px){
  .p-foot-wrap{grid-template-columns:1fr 1fr;gap:34px}
  .p-foot{padding:56px 24px 28px}
}
@media (max-width:520px){ .p-foot-wrap{grid-template-columns:1fr} }

/* Prototype disclosure panel above the footer */
.p-cs{background:var(--ink-2);border-top:1px solid var(--rule);padding:56px 40px}
.p-cs-wrap{max-width:900px;margin:0 auto;text-align:center}
.p-cs-mark{font-family:var(--display);font-size:22px;color:var(--bone);letter-spacing:.06em;margin-bottom:18px;text-transform:uppercase;}
.p-cs-mark em{font-family:var(--serif);font-style:italic;color:var(--ochre);text-transform:none;letter-spacing:0}
.p-cs-text{font-family:var(--sans);font-size:14.5px;line-height:1.75;color:rgba(245,240,232,.62);margin:0 auto 22px;max-width:70ch}
.p-cs-text b{color:var(--bone);font-weight:600}
.p-cs-text em{font-family:var(--serif);font-style:italic;color:var(--ochre)}
.p-cs-meta{display:flex;gap:26px;justify-content:center;align-items:center;flex-wrap:wrap;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,240,232,.56)}
.p-cs-meta b{color:var(--bone)}
.p-cs-cta{color:var(--ochre);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}

@media (max-width:980px){
  .p-split,.p-split--even{grid-template-columns:1fr;gap:36px}
  .p-aside{position:static}
  .p-grid--3,.p-grid--4{grid-template-columns:repeat(2,1fr)}
  .p-rel{grid-template-columns:1fr}
  .p-row{grid-template-columns:36px minmax(0,1fr) minmax(84px,max-content);gap:16px}
  .p-row-price{grid-column:3;text-align:right}
  .p-row-time{grid-column:2;margin-top:8px}
}
@media (max-width:640px){
  .p-grid--2,.p-grid--3,.p-grid--4{grid-template-columns:1fr}
  .p-stats{grid-template-columns:1fr}
  .p-row{grid-template-columns:1fr auto;gap:10px}
  .p-row-n{display:none}
  .p-row-price{grid-column:2;grid-row:1}
  .p-row-time{grid-column:1;grid-row:2}
  .p-row-desc{grid-column:1 / -1}
}

/* ═══════════════════════════════════════════════════════════════════════
   NAV — grouped. A sixteen-page site cannot hang sixteen links in one bar;
   the old one wrapped into soup on desktop and buried everything on phones.
   Group heads are real links, so every page stays one hover (or one tap)
   away and the crawler sees the whole graph without opening anything.
   ═══════════════════════════════════════════════════════════════════════ */
nav.site-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:20px;padding:22px 36px;background:var(--ink);border-bottom:1px solid var(--rule);
  position:relative;z-index:8500}
.nav-l,.nav-r{display:flex;align-items:center;gap:30px;min-width:0}
.nav-r{justify-content:flex-end}
nav.site-nav .nav-l>a,nav.site-nav .nav-head{white-space:nowrap}

.nav-group{position:relative;display:flex;align-items:center}
.nav-head{display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.nav-caret{width:0;height:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;
  border-top:4px solid currentColor;opacity:.5;transition:transform .25s,opacity .25s;flex:none}
.nav-group:hover .nav-caret,.nav-group.is-open .nav-caret,.nav-group:focus-within .nav-caret{transform:rotate(180deg);opacity:1}
.nav-group.is-here>.nav-head{color:var(--ochre)}

.nav-drop{position:absolute;top:100%;left:-18px;padding-top:16px;min-width:214px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s;z-index:20}
.nav-r .nav-drop{left:auto;right:-18px}
.nav-group:hover>.nav-drop,.nav-group:focus-within>.nav-drop,.nav-group.is-open>.nav-drop{
  opacity:1;visibility:visible;transform:translateY(0)}
.nav-drop-in{background:var(--ink-2);border:1px solid var(--rule);padding:14px 18px;
  display:flex;flex-direction:column;gap:2px;box-shadow:0 24px 48px rgba(0,0,0,.6)}
nav.site-nav .nav-drop a{display:block;padding:9px 0;font-size:10.5px;letter-spacing:.15em;
  color:rgba(245,240,232,.62);white-space:nowrap}
nav.site-nav .nav-drop a::after{display:none}
nav.site-nav .nav-drop a:hover,nav.site-nav .nav-drop a[aria-current="page"]{color:var(--ochre)}

nav.site-nav .nav-mark[aria-current="page"]{color:var(--ochre)}
nav.site-nav .nav-cta[aria-current="page"]{background:var(--ochre);color:var(--ink)!important;border-color:var(--ochre)}
.mob-nav .mob-cta[aria-current="page"]{background:var(--ochre);color:var(--ink)}

.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:10px;margin-right:-10px;
  width:44px;height:44px;align-items:center;justify-content:center;color:var(--bone)}
.nav-burger,.nav-burger::before,.nav-burger::after{display:block;width:22px;height:1.5px;background:currentColor;
  transition:transform .25s ease,opacity .2s ease}
.nav-burger{position:relative}
.nav-burger::before,.nav-burger::after{content:"";position:absolute;left:0}
.nav-burger::before{top:-7px}
.nav-burger::after{top:7px}
[aria-expanded="true"] .nav-burger{background:transparent}
[aria-expanded="true"] .nav-burger::before{transform:translateY(7px) rotate(45deg)}
[aria-expanded="true"] .nav-burger::after{transform:translateY(-7px) rotate(-45deg)}

/* Drawer */
html.nav-locked{overflow:hidden}
.mob-scrim{position:fixed;inset:0;background:rgba(0,0,0,.44);z-index:9600;
  animation:navFade .25s ease}
@keyframes navFade{from{opacity:0}to{opacity:1}}
.mob-nav{position:fixed;top:0;right:0;bottom:0;width:min(360px,88vw);background:var(--ink);
  color:var(--bone);padding:24px 28px 40px;z-index:9700;overflow-y:auto;-webkit-overflow-scrolling:touch;
  transform:translateX(105%);visibility:hidden;
  transition:transform .32s cubic-bezier(.2,.7,.2,1),visibility 0s linear .32s;
  display:flex;flex-direction:column;gap:2px}
.mob-nav.on{transform:translateX(0);visibility:visible;transition:transform .32s cubic-bezier(.2,.7,.2,1),visibility 0s}
.mob-nav .x{align-self:flex-end;background:none;border:0;color:rgba(245,240,232,.56);cursor:pointer;
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  padding:10px 0 10px 10px;margin-bottom:10px}
.mob-nav .x:hover{color:var(--bone)}
.mob-nav a{text-decoration:none;color:var(--bone);display:flex;align-items:center;min-height:44px}
.mob-nav a.lg{font-family:var(--display);font-size:26px;letter-spacing:.05em;text-transform:uppercase;}
.mob-nav a.sm{font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(245,240,232,.56);min-height:40px;padding-left:2px}
.mob-nav a.sm:hover,.mob-nav a[aria-current="page"]{color:var(--ochre)}
.mob-nav .grp{font-family:var(--mono);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ochre);margin:20px 0 6px;padding-top:14px;border-top:1px solid rgba(245,240,232,.14)}
.mob-nav .mob-cta{margin-top:26px;justify-content:center;border:1px solid var(--ochre);color:var(--ochre);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;min-height:52px}
.mob-nav .mob-cta:hover{background:var(--ochre);color:var(--ink)}
.mob-nav .sub{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;line-height:1.9;
  color:rgba(245,240,232,.56);text-transform:uppercase;margin-top:28px;padding-top:18px;
  border-top:1px solid rgba(245,240,232,.14)}

@media (max-width:1180px){ .nav-l,.nav-r{gap:20px} }
@media (max-width:980px){
  nav.site-nav{grid-template-columns:1fr auto 1fr;padding:16px 20px}
  .nav-l{display:none}
  .nav-r .nav-group{display:none}
  .nav-toggle{display:inline-flex}
}
@media (max-width:600px){
  nav.site-nav .nav-cta{display:none}
}
@media (prefers-reduced-motion:reduce){
  .mob-nav{transition:none}
  .nav-drop{transition:none}
}

/* ── Touch targets on phones ─────────────────────────────────────────
   The Yeti framing chrome and the shared link styles were sized for a
   cursor: the band links sat at 14px tall and the case-study CTA at 21.
   Nothing here changes type, colour or spacing above 880px. */
@media (max-width:880px){
  .yeti-bar a,.yeti-link,.yeti-cs-cta{display:inline-flex;align-items:center;min-height:44px}
  .p-band a,.p-cs-cta{display:inline-flex;align-items:center;min-height:44px}
  .site-nav a,.site-nav .nav-mark{display:inline-flex;align-items:center;min-height:44px}
  .modal-x,.booking-close{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
  .btn-link,.svc-cta,.insta-link,.feed-link{display:inline-flex;align-items:center;min-height:44px}
  .btn,.btn-fill{display:inline-flex;align-items:center;min-height:44px}
  .booking-cal-nav button,.tt-cats button{min-height:44px}
  .foot-bottom a,.p-foot-bottom a,.p-crumb a{display:inline-block;padding:6px 0}
  /* The band stays one row. Both labels shorten on a phone rather than
     truncating: "Back to Examples" and "Get a site — $950". */
  .yeti-bar,.p-band,.yeti-band-inner{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:12px;padding:0 16px;min-height:52px}
  .yeti-bar .bd-lg,.p-band .bd-lg,.yeti-band .bd-lg{display:none}
  .yeti-bar > a:first-child,.p-band .back,.yeti-band-inner > a:first-child{display:inline-flex;align-items:center;flex:0 1 auto;min-width:0;white-space:nowrap}
  .yeti-bar .right,.p-band .right,.yeti-band .yeti-cta{flex:0 0 auto;align-self:center;text-align:center;white-space:nowrap}
  /* The wordmark bar duplicates the nav mark directly beneath it. One is enough
     on a phone; it carries no links. */
  .shop-top{display:none}
}
/* .nav-l is display:none on a phone, which drops it out of the grid and slides
   the mark and the toggle a column to the left: the hamburger ended up stranded
   mid-row with dead space beside it. Lay the row out with flex instead. */
@media (max-width:980px){
  nav.site-nav{display:flex;align-items:center;justify-content:space-between;gap:12px}
  nav.site-nav .nav-mark{flex:0 1 auto;min-width:0}
  nav.site-nav .nav-r{flex:0 0 auto;margin-left:auto}
}
/* Under 360px there is no room for both band labels; the way back steps aside.
   work.html stays in the drawer and in the panel at the foot of the page. */
@media (max-width:359px){
  .yeti-bar > a:first-child,.p-band .back,.yeti-band-inner > a:first-child{display:none}
  .yeti-bar,.p-band,.yeti-band-inner{justify-content:flex-end}
}


/* ── Nav layout: mark left, one menu in the middle, CTA right ──────────
   Was a three-column grid with the wordmark centred and the links split
   either side of it, which reads as two separate menus rather than one.
   Scoped above the 980px breakpoint so the mobile drawer rules are
   untouched. The auto margins centre the two link groups as a pair. */
@media (min-width:981px){
  nav.site-nav{display:flex;align-items:center;gap:30px}
  nav.site-nav .nav-mark{order:1;flex:0 0 auto}
  nav.site-nav .nav-l{order:2;margin-left:auto}
  nav.site-nav .nav-r{order:3;margin-right:auto;justify-content:flex-start}
  nav.site-nav .nav-cta{order:4;flex:0 0 auto}
  nav.site-nav .nav-toggle{order:5;flex:0 0 auto}
}

/* ── Mobile footer: two columns, not one ─────────────────
   Stacked into a single column the footer ran past 900px on a phone,
   which is two and a half screens of small print under every page. */
@media (max-width:560px){
  footer{padding:44px 20px 26px}
  .foot-wrap{grid-template-columns:1fr 1fr;gap:24px 18px}
  .foot-wrap > :first-child{grid-column:1 / -1}
  .foot-mark{font-size:30px;margin-bottom:10px}
  .foot-blurb{font-size:13.5px;line-height:1.55;max-width:none}
  .foot-col h3{margin-bottom:10px;font-size:9.5px;letter-spacing:.2em}
  .foot-col ul{gap:9px}
  .foot-col a,.foot-col li{font-size:12.5px;line-height:1.45}
  .foot-bottom{margin-top:30px;padding-top:18px;flex-direction:column;align-items:flex-start;gap:8px}
  .p-foot{padding:44px 20px 26px}
  .p-foot-wrap{grid-template-columns:1fr 1fr;gap:24px 18px}
  .p-foot-wrap > :first-child{grid-column:1 / -1}
  .p-foot-mark{font-size:26px}
  .p-foot-blurb{font-size:13.5px;line-height:1.55;max-width:none}
  .p-foot-wrap h3{margin-bottom:10px;font-size:9.5px;letter-spacing:.2em}
  .p-foot-wrap ul{gap:9px}
  .p-foot-wrap a,.p-foot-wrap li{font-size:12.5px;line-height:1.45}
  .p-foot-bottom{margin-top:30px;padding-top:18px;flex-direction:column;align-items:flex-start;gap:8px}
}

/* ── Mobile drawer: one hierarchy, two steps ─────────────
   Top-level links ran at 26px display against 12px mono children, a jump
   that read as two unrelated menus stacked on top of each other. */
@media (max-width:980px){
  .mob-nav a.lg{font-size:19px;letter-spacing:.04em;min-height:50px}
  .mob-nav a.sm{font-size:13px;letter-spacing:.12em;min-height:46px;padding-left:12px}
  .mob-nav .grp{font-size:9.5px;letter-spacing:.24em;margin:18px 0 4px;padding-top:14px}
  .mob-nav .mob-cta{margin-top:22px;min-height:52px}
  .mob-nav .sub{margin-top:24px;padding-top:16px;line-height:1.8}
}