/* ---------- Tokens ---------- */
:root{
  --sound:#13263B;      /* Puget Sound navy: primary dark */
  --sound-2:#1C3450;
  --fog:#DDE4E7;        /* Seattle fog: primary light */
  --paper:#F5F7F6;      /* pole white */
  --pole:#C7362C;       /* barber-pole red: the one accent */
  --steel:#8797A2;      /* chrome / muted text */
  --bg:var(--fog);
  --fg:var(--sound);
  --muted:#4E6072;
  --line:rgba(19,38,59,.16);
  --display:"Big Shoulders Display","Arial Narrow","Helvetica Neue Condensed",Impact,sans-serif;
  --text:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --pad:clamp(20px,5vw,72px);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0D1B2A; --fg:#E3EAED; --muted:#9FB0BC; --line:rgba(227,234,237,.16); --paper:#16283C;
  }
}
:root[data-theme="dark"]{
  --bg:#0D1B2A; --fg:#E3EAED; --muted:#9FB0BC; --line:rgba(227,234,237,.16); --paper:#16283C;
}
*,*::before,*::after{box-sizing:inherit;margin:0;padding:0}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 80px);-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:var(--bg);color:var(--fg);font-family:var(--text);font-size:clamp(16px,1.1vw,18px);line-height:1.55;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--pole);outline-offset:3px;border-radius:4px}
.wrap{padding-inline:var(--pad);max-width:1440px;margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Header ---------- */
.top{position:fixed;inset:0 0 auto 0;z-index:50;padding-top:env(safe-area-inset-top,0px);
  transition:background .3s,backdrop-filter .3s}
.top.scrolled{background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:16px;height:68px}
.brand{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:900;font-size:28px;letter-spacing:.01em;text-decoration:none;line-height:1}
.brand svg{width:26px;height:26px;color:var(--pole);overflow:visible}
.brand svg g{transform-box:view-box;transform-origin:12px 12px;transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.brand:hover svg .b1,.brand:focus-visible svg .b1{transform:rotate(12deg)}
.brand:hover svg .b2,.brand:focus-visible svg .b2{transform:rotate(-12deg)}
.status{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;padding:6px 12px;border:1px solid var(--line);border-radius:999px;white-space:nowrap}
.status i{width:8px;height:8px;border-radius:50%;background:var(--steel)}
.status.open i{background:#2F9E5B;box-shadow:0 0 0 0 rgba(47,158,91,.6);animation:ping 2.2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 8px rgba(47,158,91,0)}100%{box-shadow:0 0 0 0 rgba(47,158,91,0)}}
.top nav{margin-left:auto;display:flex;align-items:center;gap:22px}
.top nav a.link{text-decoration:none;font-size:15px;font-weight:500}
.top nav a.link:hover{color:var(--pole)}
.btn{display:inline-flex;align-items:center;gap:10px;font:600 16px/1 var(--text);text-decoration:none;padding:14px 20px;border-radius:999px;border:2px solid var(--fg);color:var(--fg);transition:background .2s,color .2s}
.btn:hover{background:var(--fg);color:var(--bg)}
.btn.solid{background:var(--pole);border-color:var(--pole);color:#fff}
.btn.solid:hover{background:var(--sound);border-color:var(--sound)}
.btn.sm{padding:10px 16px;font-size:15px}
@media (max-width:820px){.top nav a.link{display:none}.top .status{display:none}}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;overflow:hidden;display:flex;align-items:flex-end;padding-bottom:clamp(40px,8vh,90px)}
.hero .fog-layer{position:absolute;inset:-10% -5%;background:
  radial-gradient(60% 50% at 20% 30%,rgba(255,255,255,.55),transparent 70%),
  radial-gradient(50% 60% at 80% 70%,rgba(135,151,162,.35),transparent 70%);pointer-events:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .hero .fog-layer{opacity:.12}}
.snips-wrap{position:absolute;right:clamp(8px,7vw,140px);top:14vh;height:74vh;aspect-ratio:200/470;z-index:1;pointer-events:none}
.snips{width:100%;height:100%;transform:rotate(-24deg);overflow:visible;filter:drop-shadow(0 24px 40px rgba(0,0,0,.28))}
.snips .blade{fill:url(#steel);stroke:var(--fg);stroke-width:1.5;stroke-linejoin:round}
.snips .shank{fill:none;stroke:var(--fg);stroke-width:14;stroke-linecap:round}
.snips .ring{fill:none;stroke:var(--pole);stroke-width:12}
.snips .edge{stroke:rgba(255,255,255,.7);stroke-width:1.2}
.snips .screw{fill:#C9D2D8;stroke:var(--fg);stroke-width:2}
.wordmark{position:absolute;left:0;right:0;top:14vh;z-index:0;font-family:var(--display);font-weight:900;
  font-size:clamp(120px,27vw,440px);line-height:.8;letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap;
  padding-left:calc(var(--pad) - .04em);color:transparent;-webkit-text-stroke:2px var(--fg);opacity:.9}
.hero-copy{position:relative;z-index:2;max-width:640px}
.hero h1{font-family:var(--display);font-weight:700;font-size:clamp(46px,6.6vw,104px);line-height:.92;letter-spacing:.005em;margin-bottom:22px}
.hero p.lede{font-size:clamp(18px,1.5vw,22px);max-width:34ch;color:var(--muted);margin-bottom:30px}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:700px){
  .snips-wrap{right:4px;top:84px;height:36vh}
  .wordmark{top:auto;bottom:60vh;font-size:30vw;-webkit-text-stroke:1.5px var(--fg)}
  .hero{align-items:flex-end}
}

/* ---------- Moving line ---------- */
.ticker{border-block:1px solid var(--line);overflow:hidden;padding:26px 0;background:var(--paper)}
.ticker .row{display:flex;gap:48px;white-space:nowrap;font-family:var(--display);font-weight:700;font-size:clamp(40px,6vw,88px);line-height:1;will-change:transform}
.ticker .row span{display:inline-flex;align-items:center;gap:48px}
.ticker .row span::after{content:"";width:.5em;height:.18em;border-radius:99px;background:repeating-linear-gradient(-35deg,var(--pole) 0 6px,var(--paper) 6px 12px,var(--sound) 12px 18px,var(--paper) 18px 24px);border:1px solid var(--line)}

/* ---------- Section scaffolding ---------- */
section{position:relative}
.block{padding-block:clamp(90px,14vh,170px)}
.h2{font-family:var(--display);font-weight:700;font-size:clamp(44px,5.6vw,92px);line-height:.94;margin-bottom:24px}
.body{max-width:58ch;color:var(--muted)}
.body p+p{margin-top:1em}

/* ---------- Walk-in steps ---------- */
.steps{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,110px)}
.steps .intro{position:sticky;top:120px;align-self:start}
.steps ol{list-style:none;display:grid;gap:0}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:28px;padding:36px 0;border-top:1px solid var(--line)}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps .n{font-family:var(--display);font-weight:900;font-size:clamp(56px,6vw,96px);line-height:.8;color:var(--pole);min-width:1.1ch}
.steps h3{font-family:var(--display);font-weight:700;font-size:clamp(30px,2.8vw,44px);line-height:1;margin-bottom:10px}
.steps p{color:var(--muted);max-width:44ch}
.steps a{font-weight:600}
@media (max-width:860px){.steps{grid-template-columns:1fr}.steps .intro{position:static}}

/* ---------- Story (dark) ---------- */
.dark{background:var(--sound);color:#E7EDF0;--muted:#A9B8C3;--line:rgba(231,237,240,.16)}
.story{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,6vw,100px);align-items:center}
.years{display:flex;gap:clamp(24px,4vw,64px);margin:40px 0 0;flex-wrap:wrap}
.years div{border-left:3px solid var(--pole);padding-left:16px}
.years b{display:block;font-family:var(--display);font-weight:900;font-size:clamp(52px,5vw,84px);line-height:.9;color:#fff}
.years span{font-size:15px;color:var(--muted)}
@media (max-width:860px){.story{grid-template-columns:1fr}}

/* ---------- Photo frames with inner parallax ---------- */
.frame{position:relative;overflow:hidden;border-radius:6px;background:var(--sound-2)}
/* inner layer is 12% taller than the frame and only extends downward,
   so parallax drift never crops the tops of heads */
.frame .inner{position:absolute;inset:0 0 -12% 0;will-change:transform}
.frame .photo{width:100%;height:100%;object-fit:cover;display:block}
.frame.tall{aspect-ratio:4/5}
.frame.wide{aspect-ratio:16/10}

/* ---------- Barbers ---------- */
.barbers-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:56px}
.barbers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,48px)}
.barber .frame{aspect-ratio:4/5;margin-bottom:22px}
.barber .reveal{clip-path:inset(0 0 0 0)}
.barber .frame .inner{inset:0}
.barber h3{font-family:var(--display);font-weight:900;font-size:clamp(48px,4.6vw,76px);line-height:.9}
.barber .role{color:var(--pole);font-weight:600;margin:6px 0 12px}
.barber p{color:var(--muted);max-width:46ch}
.barber:nth-child(2){margin-top:clamp(0px,10vw,160px)}
@media (max-width:760px){.barbers{grid-template-columns:1fr}.barber:nth-child(2){margin-top:0}}

/* ---------- Services ---------- */
.services{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,110px)}
.svc{list-style:none}
.svc li{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:22px 0;border-top:1px solid var(--line)}
.svc li:last-child{border-bottom:1px solid var(--line)}
.svc strong{font-family:var(--display);font-weight:700;font-size:clamp(28px,2.6vw,40px);line-height:1}
.svc span{color:var(--muted);text-align:right;font-size:15px;max-width:36ch}
@media (max-width:860px){.services{grid-template-columns:1fr}}

/* ---------- Gallery (horizontal) ---------- */
.gallery{overflow:hidden}
.gallery .head{padding-top:clamp(90px,14vh,170px);margin-bottom:40px;display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap}
.track{display:flex;gap:clamp(14px,2vw,28px);padding-inline:var(--pad);padding-bottom:clamp(90px,14vh,170px);will-change:transform}
/* every frame keeps its photo's own shape: same height, width follows the photo */
.track .frame{flex:0 0 auto;height:clamp(300px,50vh,520px);width:auto;aspect-ratio:var(--ar,4/5)}
.track .frame:nth-child(even){margin-top:60px}
@media (max-width:760px){
  .track{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .track .frame{height:min(56svh,440px);max-width:86vw;scroll-snap-align:start}
  .track .frame:nth-child(even){margin-top:0}
}

/* ---------- Visit ---------- */
.visit{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,100px);align-items:start}
.hours{list-style:none;margin:30px 0 34px;max-width:420px}
.hours li{display:flex;justify-content:space-between;padding:12px 0;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.hours li:last-child{border-bottom:1px solid var(--line)}
.hours li.today{font-weight:600;color:var(--pole)}
.hours li.closed span:last-child{color:var(--muted)}
address{font-style:normal;font-size:clamp(20px,1.7vw,26px);line-height:1.35;margin-bottom:26px}
address strong{font-weight:600}
.map{border:1px solid var(--line);border-radius:6px;background:var(--paper);overflow:hidden}
.map svg{width:100%;height:auto}
.map text{font-family:var(--text);fill:var(--muted);font-size:13px}
.map .ave-label{fill:var(--fg);font-weight:600;font-size:15px}
@media (max-width:860px){.visit{grid-template-columns:1fr}}
/* short laptop and tablet screens: keep heading, hours, full address and both buttons in one view */
@media (min-width:861px) and (max-height:860px){
  #visit .h2{font-size:clamp(44px,4.8vw,72px);margin-bottom:16px}
  #visit .hours{margin:16px 0 20px}
  #visit .hours li{padding:8px 0}
  #visit address{margin-bottom:18px;font-size:clamp(19px,1.5vw,22px)}
}

/* ---------- Footer ---------- */
footer{background:var(--sound);color:#E7EDF0;padding:clamp(80px,12vh,140px) 0 calc(40px + env(safe-area-inset-bottom,0px))}
footer .call{display:block;font-family:var(--display);font-weight:900;font-size:clamp(52px,6.5vw,104px);line-height:.9;text-decoration:none;letter-spacing:-.005em;margin:18px 0 48px;transition:color .2s}
footer .call:hover{color:var(--pole)}
footer .cols{display:flex;flex-wrap:wrap;gap:40px 80px;border-top:1px solid rgba(231,237,240,.16);padding-top:32px;font-size:15px;color:#A9B8C3}
footer h4{font-weight:600;color:#fff;margin-bottom:10px;font-size:15px}
footer ul{list-style:none;display:grid;gap:6px}
footer a{text-decoration:none}
footer a:hover{color:#fff;text-decoration:underline}

/* ---------- Mobile call bar ---------- */
.callbar{display:none}
@media (max-width:700px){
  footer .call{font-size:15vw}
  .callbar{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:60;gap:10px;
    padding-bottom:env(safe-area-inset-bottom,0px)}
  .callbar a{flex:1;justify-content:center;box-shadow:0 10px 30px rgba(19,38,59,.25)}
  .callbar .btn:not(.solid){background:var(--bg)}
  footer{padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}
}

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