/* Comrades Barber Shops — redesign preview */
:root{
  --ink:#0b0b0c; --ink-2:#141416; --ink-3:#1d1d20; --bone:#f3f1ec; --bone-2:#e7e4dd;
  --mute:#8d8f94; --line:rgba(255,255,255,.12); --line-d:rgba(11,11,12,.14);
  --red:#c8102e; --blue:#1d3f8f;
  --chrome:linear-gradient(100deg,#7c8089 0%,#e9ecf1 22%,#a3a8b0 40%,#ffffff 52%,#8e939b 70%,#d9dce1 88%,#7c8089 100%);
  --display:"Archivo",system-ui,sans-serif; --serif:"Playfair Display",Georgia,serif;
  --body:"Inter Tight",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
  --pad:clamp(20px,5vw,72px); --ease:cubic-bezier(.2,.7,.1,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--bone);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
p{margin:0 0 1em}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
::selection{background:var(--red);color:#fff}

/* type */
.display{font-family:var(--display);font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:.92;margin:0}
.h-xl{font-size:clamp(48px,11vw,190px)}
.h-lg{font-size:clamp(38px,7vw,112px)}
.h-md{font-size:clamp(28px,4.2vw,64px)}
.h-sm{font-size:clamp(20px,2.2vw,30px)}
.serif{font-family:var(--serif);font-style:italic;font-weight:500;text-transform:none;letter-spacing:0}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.chrome{background:var(--chrome);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 7s linear infinite}
@keyframes sheen{to{background-position:-250% 0}}
.muted{color:var(--mute)}
.lead{font-size:clamp(18px,1.6vw,22px);line-height:1.55;max-width:60ch}

/* layout */
.wrap{padding-left:var(--pad);padding-right:var(--pad);max-width:1600px;margin:0 auto}
section{position:relative}
.sec{padding:clamp(72px,11vw,160px) 0}
.light{background:var(--bone);color:var(--ink)}
.light .muted{color:#5f6166}
.grid-lines{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:calc(100%/6) 100%;background-position:var(--pad) 0;opacity:.6}
.light .grid-lines{background-image:linear-gradient(90deg,var(--line-d) 1px,transparent 1px)}
.two{display:grid;gap:clamp(32px,5vw,80px)}
@media(min-width:900px){.two{grid-template-columns:1fr 1fr}.two.wide-left{grid-template-columns:1.25fr 1fr}}

/* ruler strip (Creators-style seam) */
.ruler{height:28px;position:relative;border-top:1px solid var(--line);
  background-image:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 12px);background-size:100% 8px;background-repeat:no-repeat;background-position:0 0}
.light .ruler{border-color:var(--line-d);background-image:repeating-linear-gradient(90deg,var(--line-d) 0 1px,transparent 1px 12px)}

/* barber-pole stripe from the crest */
.pole{height:10px;background:repeating-linear-gradient(-45deg,var(--red) 0 14px,#fff 14px 28px,var(--blue) 28px 42px,#fff 42px 56px);background-size:79.2px 79.2px;animation:pole 2.4s linear infinite}
.pole.thin{height:4px}
@keyframes pole{to{background-position:79.2px 0}}

/* crop marks */
.crop{position:relative}
.crop::before,.crop::after{content:"";position:absolute;width:22px;height:22px;border:1px solid currentColor;opacity:.55;z-index:2;pointer-events:none}
.crop::before{top:-10px;left:-10px;border-right:0;border-bottom:0}
.crop::after{bottom:-10px;right:-10px;border-left:0;border-top:0}

/* buttons */
.btn{--bg:var(--bone);--fg:var(--ink);position:relative;display:inline-flex;align-items:center;gap:.7em;padding:1.05em 1.6em;border-radius:999px;background:var(--bg);color:var(--fg);text-decoration:none;font-family:var(--display);font-stretch:115%;font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;overflow:hidden;isolation:isolate;transition:transform .4s var(--ease),box-shadow .4s}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.85) 48%,transparent 66%);transform:translateX(-120%);transition:transform .9s var(--ease);z-index:-1;mix-blend-mode:overlay}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px -10px rgba(0,0,0,.6)}
.btn:hover::after{transform:translateX(120%)}
.btn .arr{transition:transform .4s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn.chromebtn{background:var(--chrome);background-size:200% 100%;color:var(--ink)}
.btn.ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px currentColor}
.btn.ghost:hover{background:var(--bone);color:var(--ink)}
.light .btn.ghost:hover{background:var(--ink);color:var(--bone)}
.btn.red{--bg:var(--red);--fg:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.app-btns .btn{font-size:12px}
.ulink{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s var(--ease)}
.ulink:hover{background-size:100% 1px}

/* header */
.hdr{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:14px var(--pad);transition:background .4s,backdrop-filter .4s,padding .4s}
.hdr.scrolled{background:rgba(11,11,12,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding-top:8px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.hdr .brand img{height:52px;width:auto;transition:height .4s,transform .6s var(--ease)}
.hdr.scrolled .brand img{height:42px}
.hdr .brand:hover img{transform:rotate(-6deg) scale(1.05)}
.hdr-right{display:flex;align-items:center;gap:10px}
.hdr .btn{padding:.8em 1.2em;font-size:12px}
.hdr .book{display:none}
@media(min-width:720px){.hdr .book{display:inline-flex}}
.menu-btn{display:inline-flex;align-items:center;gap:10px;background:none;border:1px solid var(--line);color:var(--bone);border-radius:999px;padding:.7em 1.1em;font:600 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.menu-btn .bars{width:18px;height:8px;position:relative}
.menu-btn .bars::before,.menu-btn .bars::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .4s var(--ease),top .4s}
.menu-btn .bars::before{top:0}.menu-btn .bars::after{top:6.5px}
.menu-open .menu-btn .bars::before{top:3.25px;transform:rotate(45deg)}
.menu-open .menu-btn .bars::after{top:3.25px;transform:rotate(-45deg)}
.social{display:flex;gap:8px}
.social a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);transition:background .3s,color .3s,transform .3s}
.social a:hover{background:var(--bone);color:var(--ink);transform:translateY(-2px)}
.social svg{width:16px;height:16px;fill:currentColor}
.hdr .social{display:none}
@media(min-width:1000px){.hdr .social{display:flex}}

/* overlay nav */
.nav{position:fixed;inset:0;z-index:45;background:var(--ink);clip-path:circle(0 at calc(100% - 60px) 40px);transition:clip-path .8s var(--ease);display:flex;flex-direction:column;overflow:auto}
.menu-open .nav{clip-path:circle(150% at calc(100% - 60px) 40px)}
.nav .grid-lines{opacity:.4}
.nav ol{list-style:none;margin:0;padding:110px var(--pad) 30px;counter-reset:n;display:grid;gap:2px}
@media(min-width:1000px){.nav ol{grid-template-columns:1fr 1fr;column-gap:60px}}
.nav li{counter-increment:n;overflow:hidden}
.nav a{display:flex;align-items:baseline;gap:18px;text-decoration:none;padding:8px 0;border-bottom:1px solid var(--line);transform:translateY(110%);transition:transform .7s var(--ease),color .3s}
.menu-open .nav a{transform:none}
.nav li:nth-child(n) a{transition-delay:calc(var(--i)*45ms + .15s)}
.nav a::before{content:"[ " counter(n,decimal-leading-zero) " ]";font:12px var(--mono);color:var(--mute);min-width:56px}
.nav a span{font-family:var(--display);font-stretch:125%;font-weight:800;text-transform:uppercase;font-size:clamp(24px,3.6vw,48px);line-height:1.1}
.nav a:hover span,.nav a[aria-current] span{background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav a[aria-current]::before{color:var(--red)}
.nav-foot{margin-top:auto;padding:24px var(--pad) 32px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.menu-open{overflow:hidden}

/* preloader */
.preloader{position:fixed;inset:0;z-index:100;background:var(--ink);display:grid;place-items:center;transition:opacity .6s .1s,visibility .6s .1s}
.preloader .pl-inner{display:grid;justify-items:center;gap:18px}
.preloader img{width:min(150px,36vw);animation:plcrest 1s var(--ease) both}
.preloader .count{font:600 13px var(--mono);letter-spacing:.3em;color:var(--mute)}
.preloader .bar{width:160px;height:1px;background:var(--line);overflow:hidden}
.preloader .bar i{display:block;height:100%;background:var(--bone);transform-origin:left;transform:scaleX(var(--p,0))}
.loaded .preloader{opacity:0;visibility:hidden}
@keyframes plcrest{from{opacity:0;transform:scale(.85);filter:blur(6px)}}

/* hero (home) */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-2}
.hero-bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(.75) contrast(1.1) brightness(.55);transform:scale(1.15);animation:kenburns 22s ease-out forwards}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 35%,rgba(11,11,12,.15),rgba(11,11,12,.85) 70%),linear-gradient(180deg,rgba(11,11,12,.55),transparent 30%,rgba(11,11,12,.95))}
@keyframes kenburns{to{transform:scale(1.02)}}
.hero-crest{position:absolute;left:50%;top:44%;width:min(420px,62vw);transform:translate(-50%,-50%);z-index:1}
.hero-crest img{width:100%;filter:drop-shadow(0 30px 60px rgba(0,0,0,.6));animation:crestIn 1.6s .2s var(--ease) both}
.hero-crest::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);background-size:300% 100%;-webkit-mask:url(../img/crest-480.png) center/contain no-repeat;mask:url(../img/crest-480.png) center/contain no-repeat;animation:crestShine 5s 1.6s ease-in-out infinite;mix-blend-mode:overlay}
@keyframes crestIn{from{opacity:0;transform:scale(.7) rotate(-8deg);filter:blur(10px)}}
@keyframes crestShine{0%{background-position:150% 0}45%,100%{background-position:-150% 0}}
.hero-words{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:0 2vw;padding:0 var(--pad);margin-bottom:22px;position:relative;z-index:2}
.hero-words .w{overflow:hidden}
.hero-words .w span{display:block;font-family:var(--display);font-stretch:125%;font-weight:900;font-size:clamp(44px,7.4vw,160px);line-height:.9;letter-spacing:-.02em;animation:rise 1.1s var(--ease) both}
.hero-words .w:nth-child(1) span{animation-delay:.55s}.hero-words .w:nth-child(2) span{animation-delay:.68s}.hero-words .w:nth-child(3) span{animation-delay:.81s}
.hero-words .w:nth-child(2) span{-webkit-text-stroke:1.5px var(--bone);color:transparent}
@keyframes rise{from{transform:translateY(105%)}}
.hero-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:18px var(--pad) 26px;border-top:1px solid var(--line);position:relative;z-index:2;animation:fadeUp 1s 1.1s var(--ease) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}}
.scroll-cue{display:flex;align-items:center;gap:12px;color:var(--mute)}
.scroll-cue i{width:1px;height:42px;background:var(--line);position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;left:0;top:-50%;width:100%;height:50%;background:var(--bone);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{to{top:100%}}

/* page hero (inner pages) */
.phero{padding:clamp(130px,18vw,220px) 0 clamp(40px,6vw,80px);overflow:hidden}
.phero .eyebrow{margin-bottom:22px;display:flex;align-items:center;gap:12px}
.phero .eyebrow img{width:34px}
.phero h1{overflow:hidden}
.phero h1 .ln{display:block;overflow:hidden}
.phero h1 .ln>span{display:block;animation:rise 1.1s var(--ease) both}
.phero h1 .ln:nth-child(2)>span{animation-delay:.12s}
.phero .phero-img{margin-top:clamp(36px,6vw,80px)}
.frame{overflow:hidden;border-radius:18px;background:var(--ink-3)}
.frame img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease),filter 1s}
.frame.duo img{filter:grayscale(1) contrast(1.05)}
.frame.duo:hover img,a:hover .frame.duo img,a:focus-visible .frame.duo img{filter:none;transform:scale(1.05)}
.frame.tall{aspect-ratio:4/5}.frame.wide{aspect-ratio:16/9}.frame.std{aspect-ratio:3/2}
.parallax img{will-change:transform}

/* marquee */
.marquee{overflow:hidden;white-space:nowrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;user-select:none}
.light .marquee{border-color:var(--line-d)}
.marquee .track{display:inline-flex;gap:40px;animation:marq 26s linear infinite;padding-right:40px}
.marquee .track>*{font-family:var(--display);font-stretch:125%;font-weight:800;font-size:clamp(36px,6vw,92px);line-height:1;text-transform:uppercase;display:inline-flex;align-items:center;gap:40px}
.marquee .track img{height:.9em;width:auto}
.marquee .o{-webkit-text-stroke:1.2px currentColor;color:transparent}
@keyframes marq{to{transform:translateX(-50%)}}

/* mission */
.mission .statement{font-family:var(--display);font-stretch:112%;font-weight:600;font-size:clamp(24px,3.2vw,48px);line-height:1.18;letter-spacing:-.01em;max-width:30ch}
.mission .statement .wd{opacity:.14;transition:opacity .35s}
.mission .statement .wd.on{opacity:1}
.mission .name-line{margin-top:clamp(40px,6vw,90px);font-size:clamp(20px,2vw,28px);line-height:1.4}
.mission .name-line .big{display:block;font-size:clamp(48px,8vw,128px);line-height:1}
.label{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.label::before{content:"";width:34px;height:1px;background:currentColor;opacity:.6}

/* location cards (home) */
.cards{display:grid;gap:clamp(24px,3vw,40px)}
@media(min-width:800px){.cards{grid-template-columns:1fr 1fr}.cards .card:nth-child(2){margin-top:clamp(40px,8vw,140px)}}
.card{text-decoration:none;display:block}
.card .frame{aspect-ratio:3/2}
.card .meta{display:flex;justify-content:space-between;align-items:center;padding:18px 2px;border-bottom:1px solid currentColor}
.card .meta .t{font-family:var(--display);font-stretch:120%;font-weight:700;text-transform:uppercase;font-size:clamp(18px,1.8vw,24px)}
.card .meta .arr{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid currentColor;transition:transform .5s var(--ease),background .3s,color .3s}
.card:hover .meta .arr{transform:rotate(-45deg);background:var(--ink);color:var(--bone)}

/* numbered contact rows */
.rows{border-top:1px solid var(--line)}
.row{position:relative;display:grid;grid-template-columns:auto 1fr;gap:6px 22px;padding:clamp(22px,3vw,36px) 0;border-bottom:1px solid var(--line);isolation:isolate;overflow:hidden}
.row::before{content:"";position:absolute;inset:0;background:var(--bone);transform:scaleY(0);transform-origin:bottom;transition:transform .6s var(--ease);z-index:-1}
.row:hover::before{transform:scaleY(1)}
.row:hover{color:var(--ink)}
.row:hover .idx{color:var(--red)}
.row .idx{font:600 13px var(--mono);color:var(--mute);padding-top:.6em;transition:color .3s}
.row h3{margin:0;font-family:var(--display);font-stretch:120%;font-weight:800;text-transform:uppercase;font-size:clamp(20px,3vw,44px);line-height:1.05}
.row .det{grid-column:2;display:flex;flex-wrap:wrap;gap:6px 28px;font-size:clamp(15px,1.3vw,18px)}
.row .det a{text-decoration:none}
@media(min-width:1000px){.row{grid-template-columns:70px 1.2fr 1fr;align-items:center}.row .det{grid-column:3;justify-content:flex-end;text-align:right;flex-direction:column;gap:4px}}

/* hours / info */
.hours{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:15px}
.hours td{padding:14px 4px;border-bottom:1px solid var(--line)}
.light .hours td{border-color:var(--line-d)}
.hours td:last-child{text-align:right}
.hours tr{transition:background .3s}
.hours tr.today td{color:var(--bone)}
.hours tr.today td:first-child::after{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red);margin-left:10px;box-shadow:0 0 0 4px rgba(200,16,46,.25);animation:pulse 2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(200,16,46,0)}}
.panel{background:var(--ink-2);border:1px solid var(--line);border-radius:22px;padding:clamp(24px,3.5vw,44px)}
.light .panel{background:#fff;border-color:var(--line-d)}
.panel h2,.panel h3{margin:0 0 18px}
.stack>*+*{margin-top:clamp(20px,2.5vw,32px)}
.info h3{font-family:var(--display);font-stretch:118%;font-weight:700;text-transform:uppercase;font-size:clamp(17px,1.6vw,21px);margin:0 0 10px;letter-spacing:.01em}
.addr{font-family:var(--display);font-stretch:115%;font-weight:700;font-size:clamp(22px,2.6vw,36px);line-height:1.15;margin:0 0 14px;text-transform:uppercase}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0 0 14px}
.chips li{border:1px solid var(--line);border-radius:999px;padding:.45em 1em;font-size:14px;transition:background .3s,color .3s,border-color .3s}
.light .chips li{border-color:var(--line-d)}
.chips li:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.light .chips li:hover{background:var(--ink);color:var(--bone)}
.phone{font-family:var(--mono);font-size:clamp(16px,1.6vw,20px);text-decoration:none}

/* services */
.svc-grid{display:grid;gap:18px}
@media(min-width:760px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1200px){.svc-grid{grid-template-columns:repeat(3,1fr)}}
.svc{position:relative;padding:clamp(24px,3vw,36px);border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,var(--ink-2),var(--ink));overflow:hidden;transition:transform .5s var(--ease),border-color .4s}
.svc::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:repeating-linear-gradient(-45deg,var(--red) 0 8px,#fff 8px 16px,var(--blue) 16px 24px,#fff 24px 32px);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.svc:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.3)}
.svc:hover::before{transform:scaleX(1)}
.svc .n{font:600 12px var(--mono);color:var(--mute);letter-spacing:.14em}
.svc h3{font-family:var(--display);font-stretch:120%;font-weight:800;text-transform:uppercase;font-size:clamp(20px,2vw,26px);line-height:1.1;margin:14px 0 14px}
.svc .price{display:inline-block;margin-left:.2em}
.svc p{color:#c9c9cc;font-size:16px}
.svc .addon{margin-top:16px;font:600 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.svc .chips{margin-top:10px}
.svc .chips li{font-size:13px}
.adv{display:grid;gap:0;border-top:1px solid var(--line-d)}
.adv p{padding:26px 0;border-bottom:1px solid var(--line-d);margin:0;display:grid;gap:10px}
@media(min-width:900px){.adv p{grid-template-columns:1fr 2fr;gap:40px}}
.adv b{font-family:var(--display);font-stretch:118%;font-weight:800;text-transform:uppercase;font-size:clamp(17px,1.6vw,22px);line-height:1.2}

/* join */
.list-big{list-style:none;padding:0;margin:0;counter-reset:l}
.list-big li{counter-increment:l;display:flex;gap:18px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line);font-size:clamp(17px,1.5vw,21px);transition:padding .4s var(--ease)}
.light .list-big li{border-color:var(--line-d)}
.list-big li::before{content:counter(l,decimal-leading-zero);font:600 12px var(--mono);color:var(--mute);min-width:26px}
.list-big li:hover{padding-left:10px}
.values{list-style:none;padding:0;margin:0;font-family:var(--display);font-stretch:125%;font-weight:800;text-transform:uppercase;font-size:clamp(30px,5.5vw,80px);line-height:1.02}
.values li{overflow:hidden;transition:color .3s}
.values li:hover{background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent}
.culture{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0 0 18px}
.culture li{font-family:var(--display);font-stretch:118%;font-weight:700;text-transform:uppercase;padding:.6em 1.2em;border-radius:999px;background:var(--ink);color:var(--bone);font-size:clamp(14px,1.3vw,17px)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:22px 0;font-family:var(--display);font-stretch:115%;font-weight:700;font-size:clamp(17px,1.6vw,22px)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-weight:400;transition:transform .4s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:#c9c9cc;padding-bottom:22px;margin:0}
.apply-list{columns:2 220px;list-style:none;padding:0;margin:20px 0}
.apply-list li{break-inside:avoid;padding:10px 0;border-bottom:1px dashed var(--line-d)}

/* blog */
.post-card{display:grid;gap:24px;text-decoration:none;color:inherit;border-top:1px solid var(--line-d);padding-top:28px}
@media(min-width:900px){.post-card{grid-template-columns:1fr 1.2fr;align-items:center;gap:56px}}
.post-card h2{margin:0 0 14px}
.post-card .ex{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.post-card .meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px}
.article{max-width:760px;margin:0 auto;font-size:clamp(17px,1.25vw,19px);line-height:1.75}
.article h2{font-family:var(--display);font-stretch:118%;font-weight:800;text-transform:uppercase;font-size:clamp(22px,2.4vw,32px);line-height:1.15;margin:2.2em 0 .7em}
.article .pull{font-family:var(--serif);font-style:italic;font-size:1.35em;line-height:1.4;border-left:3px solid var(--red);padding-left:20px;margin:1.4em 0}
.article strong{color:var(--ink);font-weight:700}
.tabs{display:flex;gap:10px;margin-bottom:30px}
.tabs a{text-decoration:none;padding:.5em 1.1em;border-radius:999px;border:1px solid var(--line-d);font:600 12px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.tabs a[aria-current]{background:var(--ink);color:var(--bone)}

/* footer */
.ftr{position:relative;background:var(--ink);overflow:hidden;padding-top:clamp(70px,9vw,120px)}
.ftr .big-crest{width:min(220px,46vw);margin:0 auto 34px;opacity:.95}
.ftr .wordmark{font-family:var(--display);font-stretch:125%;font-weight:900;text-transform:uppercase;font-size:clamp(46px,13.5vw,250px);line-height:.8;letter-spacing:-.02em;text-align:center;white-space:nowrap;margin:clamp(40px,6vw,80px) 0 -0.12em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.18);user-select:none}
.ftr nav ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px}
.ftr nav a{text-decoration:none;font-size:15px;color:#c9c9cc}
.ftr nav a:hover{color:var(--bone)}
.ftr .ftr-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px;padding:28px 0;border-top:1px solid var(--line);margin-top:40px}

/* reveals */
.js .rv{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
.js .rv-mask img{clip-path:inset(100% 0 0 0);transform:scale(1.25);transition:clip-path 1.3s var(--ease),transform 1.8s var(--ease),filter 1s;transition-delay:var(--d,0s)}
.js .rv-mask.in img{clip-path:inset(0 0 0 0);transform:scale(1)}
.js .rv-mask.in:hover img{transform:scale(1.05)}
.js .rv-line{transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease)}
.js .rv-line.in{transform:none}

/* misc */
.center{text-align:center}
.mt-s{margin-top:16px}.mt-m{margin-top:clamp(28px,4vw,48px)}.mt-l{margin-top:clamp(48px,7vw,100px)}
.note{font-size:14px;color:var(--mute);font-style:italic}
.hr{height:1px;background:var(--line);border:0;margin:0}
.light .hr{background:var(--line-d)}
.watermark{width:min(520px,80vw);margin:0 auto;opacity:.95;animation:floaty 8s ease-in-out infinite}
@keyframes floaty{50%{transform:translateY(-12px) rotate(1deg)}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .rv,.js .rv-mask,.js .rv-line{opacity:1!important;transform:none!important;clip-path:none!important}
  .js .rv-mask img{clip-path:none!important}
  .js .rv-mask img{transform:none!important}
  .mission .statement .wd{opacity:1!important}
  .preloader{display:none!important}
  .hero-bg img{transform:none!important}
}
@media (max-width:699px){
  .hero-words{flex-direction:column;align-items:flex-start;gap:0}
  .hero-words .w span{font-size:17.5vw;line-height:.92}
  .hero-crest{top:34%;width:68vw}
}
/* home shop info link rows (photos removed per Greg) */
.shop-links{border-top:1px solid var(--line-d)}
.shop-link{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:22px;padding:clamp(24px,3.4vw,44px) 4px;border-bottom:1px solid var(--line-d);text-decoration:none;color:var(--ink);isolation:isolate;overflow:hidden}
.shop-link::before{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleY(0);transform-origin:bottom;transition:transform .6s var(--ease);z-index:-1}
.shop-link::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:repeating-linear-gradient(-45deg,var(--red) 0 8px,#fff 8px 16px,var(--blue) 16px 24px,#fff 24px 32px);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.shop-link:hover::before,.shop-link:focus-visible::before{transform:scaleY(1)}
.shop-link:hover::after,.shop-link:focus-visible::after{transform:scaleX(1)}
.shop-link:hover,.shop-link:focus-visible{color:var(--bone)}
.shop-link .idx{font:600 13px var(--mono);color:#5f6166;letter-spacing:.14em;min-width:44px}
.shop-link:hover .idx{color:var(--red)}
.shop-link .t{font-family:var(--display);font-stretch:125%;font-weight:800;text-transform:uppercase;font-size:clamp(26px,5.2vw,80px);line-height:1;letter-spacing:-.01em;transition:transform .6s var(--ease)}
.shop-link:hover .t{transform:translateX(12px)}
.shop-link .arr{width:clamp(44px,5vw,72px);height:clamp(44px,5vw,72px);border-radius:50%;display:grid;place-items:center;border:1px solid currentColor;font-size:clamp(16px,1.6vw,22px);transition:transform .5s var(--ease),background .3s,color .3s}
.shop-link:hover .arr{transform:rotate(-45deg);background:var(--chrome);color:var(--ink);border-color:transparent}
/* ---- Full, uncropped photos (Greg 2026-11-08): natural aspect ratio, no cover-crop, no zoom ---- */
.frame,.frame.std,.frame.wide,.frame.tall,.card .frame{aspect-ratio:auto!important;height:auto}
.frame img{width:100%;height:auto!important;object-fit:contain!important;transform:none!important}
.frame.duo:hover img,a:hover .frame.duo img,a:focus-visible .frame.duo img{transform:none!important}
.js .rv-mask img{clip-path:none!important;transform:none!important;opacity:0;transition:opacity 1.1s var(--ease),filter 1s}
.js .rv-mask.in img{opacity:1}
.parallax img{will-change:auto}
@media (prefers-reduced-motion: reduce){.js .rv-mask img{opacity:1!important}}
/* ---- App CTA (preferred booking) ---- */
.app-band{position:relative;background:radial-gradient(ellipse at 80% 20%,#26262b,var(--ink) 60%);overflow:hidden;scroll-margin-top:70px}
.app-inner{display:grid;gap:clamp(28px,4vw,60px);align-items:center;padding-top:clamp(64px,9vw,130px);padding-bottom:clamp(64px,9vw,130px)}
@media(min-width:900px){.app-inner{grid-template-columns:minmax(220px,.7fr) 1.3fr}}
.app-crest{width:min(340px,60vw);margin:0 auto;filter:drop-shadow(0 30px 60px rgba(0,0,0,.6));animation:floaty 8s ease-in-out infinite}
.app-eyebrow{display:inline-block;background:var(--red);color:#fff;padding:.5em 1em;border-radius:999px;margin-bottom:22px}
.app-band .lead{margin-top:18px;color:#c9c9cc}
.badges{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.badge{display:inline-flex;align-items:center;gap:12px;padding:12px 22px 12px 18px;border-radius:14px;background:var(--bone);color:var(--ink);text-decoration:none;min-width:200px;font-family:var(--display);font-stretch:110%;font-weight:700;font-size:20px;line-height:1.05;transition:transform .4s var(--ease),box-shadow .4s,background .3s}
.badge svg{width:28px;height:28px;fill:currentColor;flex:none}
.badge small{display:block;font:500 11px var(--body);letter-spacing:.04em;opacity:.75}
.badge:hover{transform:translateY(-3px);background:var(--chrome);box-shadow:0 16px 36px -12px rgba(0,0,0,.8)}
.hdr .app-cta{display:inline-flex}
.hdr .book{display:none}
@media(min-width:1000px){.hdr .book{display:inline-flex}}
.hero-bar .btn-row{gap:12px}
/* ---- Instagram gallery ---- */
.gallery{background:var(--ink)}
.gal-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.gal-follow{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.ig-feed{position:relative}
.ig-fallback{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:minmax(150px,44vw);grid-auto-flow:dense;gap:8px}
@media(min-width:760px){.ig-fallback{grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(180px,26vw)}}
@media(min-width:1100px){.ig-fallback{grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(220px,19vw,330px);gap:12px}}
.ig-tile{position:relative;display:grid;place-items:center;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,#1a1a1d,#101012);border:1px solid var(--line);isolation:isolate}
.ig-tile.reel{grid-row:span 2}
.ig-tile::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.06) 50%,transparent 70%);background-size:250% 100%;animation:shimmer 2.6s linear infinite;z-index:-1}
@keyframes shimmer{to{background-position:-250% 0}}
.ig-tile img{width:34%;opacity:.16;filter:grayscale(1);transition:opacity .4s,transform .6s var(--ease)}
.ig-tile:hover img{opacity:.5;transform:scale(1.06)}
.ig-tile .play{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.12)}
.ig-tile .play::after{content:"";position:absolute;left:11px;top:8px;border-left:11px solid var(--bone);border-top:7px solid transparent;border-bottom:7px solid transparent}
.ig-preview-note{margin-top:16px;color:var(--mute);font-size:11px}
.ig-feed.live .ig-fallback,.ig-feed.live .ig-preview-note{display:none}
.ig-feed behold-widget{display:block}

/* hero crest in normal flow so it can never overlap CUT SHAVE STYLE; hero stretches as needed */
.hero{justify-content:flex-end}
.hero-crest{position:relative;left:auto;top:auto;transform:none;width:min(380px,56vw,38vh);min-width:170px;margin:clamp(96px,16vh,150px) auto clamp(28px,5vh,56px)}
@media (max-width:699px){.hero-crest{top:auto;width:min(68vw,34vh);min-width:160px}}

/* Instagram: real post embeds (no account connection needed) */
.ig-embeds{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:760px){.ig-embeds{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.ig-embeds{grid-template-columns:repeat(3,1fr);gap:20px}}
.ig-embed{border-radius:14px;overflow:hidden;background:#fff;border:1px solid var(--line)}
.ig-embed iframe{display:block;width:100%;height:690px;border:0}
@media(max-width:759px){.ig-embed iframe{height:600px}}

/* header: Join the Team button (after Book Appointment) */
.hdr .jointeam{display:none}
@media(min-width:1180px){.hdr .jointeam{display:inline-flex}}