/* Triple T Salon — design system v2 (2026-08-23). Tokens first; every value below binds to one.
   Brand: the orange sign in the shop (#F26A1B on black/white). American spelling throughout. */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@600;700&family=Manrope:wght@400;500;600;700&display=swap');
:root{
  /* ===== PRIMARIES — the sign: orange, black, white ===== */
  --tt-orange:#F26A1B; --tt-black:#1E1F26; --tt-white:#FFFFFF;
  /* orange ramp (built around the live sign value at 500) */
  --tt-brand-050:#FFF5EE; --tt-brand-100:#FDE8DA; --tt-brand-200:#FBCDAE; --tt-brand-300:#F8A875; --tt-brand-400:#F5873F;
  --tt-brand-500:#F26A1B; --tt-brand-600:#D9560C; --tt-brand-700:#B8460A; --tt-brand-800:#8F3608; --tt-brand-900:#5E2406;
  /* ink ramp (warm black) */
  --tt-ink-900:#121318; --tt-ink:#1E1F26; --tt-ink-soft:#2B2C35; --tt-ink-700:#3A3B45; --tt-ink-2:#4E4F58; --tt-ink-500:#6A6B74; --tt-ink-3:#8B8C95; --tt-ink-300:#B4B5BC; --tt-ink-200:#D2D3D8;
  /* paper */
  --tt-paper:#FFFFFF; --tt-paper-2:#F4F2EE; --tt-paper-3:#EAE7E1; --tt-line:#E4E1DC; --tt-line-strong:#1E1F26;
  --tt-on-brand:#FFFFFF; --tt-on-ink:#FFFFFF; --tt-on-ink-2:rgba(255,255,255,.78); --tt-on-ink-3:rgba(255,255,255,.55);
  --tt-scrim:rgba(0,0,0,.45); --tt-scrim-soft:rgba(255,255,255,.18); --tt-scrim-photo:linear-gradient(180deg,rgba(30,31,38,0) 35%,rgba(30,31,38,.85) 100%);
  /* ===== STATUS — what a booking is right now (each has a fill + a tint for badges) ===== */
  --tt-ok:#2E6B4F; --tt-ok-100:#E3F1E9;              /* booked · confirmed · done */
  --tt-warn:#A66A15; --tt-warn-100:#FBF0DC;          /* needs a look: unconfirmed, running late, call to book */
  --tt-wait:#7B5EA7; --tt-wait-100:#EEE8F6;          /* on the waitlist · held 30 min */
  --tt-info:#3B7DD8; --tt-info-100:#E4EEFA;          /* new client · first visit · info */
  --tt-bad:#B3261E; --tt-bad-100:#F9E3E1;            /* canceled · no-show (struck through, never deleted) */
  --tt-busy:#8B8C95; --tt-busy-100:#ECECEF;          /* blocked · personal event · closed */
  --tt-brand-badge:var(--tt-brand-500); --tt-brand-badge-100:var(--tt-brand-100); /* regular · rebooked · series */
  /* ===== SERVICE CATEGORIES — the calendar color-code Johnny asked for (Q25) ===== */
  --tt-cat-color:#F26A1B; --tt-cat-color-100:#FDE8DA;
  --tt-cat-cut:#1E1F26; --tt-cat-cut-100:#E6E6EA;
  --tt-cat-keratin:#2E6B4F; --tt-cat-keratin-100:#E3F1E9;
  --tt-cat-ext:#7B5EA7; --tt-cat-ext-100:#EEE8F6;
  --tt-cat-personal:#B4B5BC; --tt-cat-personal-100:#ECECEF;
  /* type */
  --tt-font-display:"Quicksand",system-ui,sans-serif; --tt-font-body:"Manrope",system-ui,sans-serif;
  --tt-fs-2xs:10px; --tt-fs-xs:12px; --tt-fs-sm:14px; --tt-fs-md:16px; --tt-fs-lg:18px; --tt-fs-xl:24px; --tt-fs-2xl:32px; --tt-fs-3xl:44px; --tt-fs-hero:56px;
  --tt-lh-tight:1.1; --tt-lh-snug:1.25; --tt-lh-body:1.5;
  --tt-track-caps:.18em; --tt-track-wide:.32em; --tt-track-tight:-.02em;
  /* space (4px grid) */
  --tt-s-1:4px; --tt-s-2:8px; --tt-s-3:12px; --tt-s-4:16px; --tt-s-5:20px; --tt-s-6:24px; --tt-s-8:32px; --tt-s-10:40px; --tt-s-12:48px; --tt-s-16:64px; --tt-s-20:80px;
  /* geometry */
  --tt-r-sm:8px; --tt-r-md:12px; --tt-r-lg:20px; --tt-r-pill:999px; --tt-r-none:0;
  --tt-control-h:48px; --tt-control-h-sm:40px; --tt-tap-min:48px; --tt-icon:24px; --tt-icon-sm:16px; --tt-avatar:40px; --tt-avatar-lg:64px;
  --tt-border:2px; --tt-hairline:1px;
  --tt-shadow:0 1px 2px rgba(30,31,38,.06),0 8px 24px rgba(30,31,38,.08);
  --tt-ring:0 0 0 3px var(--tt-brand-100);
  --tt-measure:60ch;
  --tt-dur:100ms; --tt-ease:linear;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--tt-paper);color:var(--tt-ink);font:var(--tt-fs-md)/var(--tt-lh-body) var(--tt-font-body)}
img{max-width:100%;display:block}
.frame{position:relative;overflow:hidden;background:var(--tt-paper);margin:0 auto}
.frame.phone{width:390px;height:844px;border-radius:var(--tt-r-lg)}
.frame.tall{height:1500px}
.frame.desk{width:1280px;height:960px}
.scroll{height:100%;overflow:hidden}
.stage{background:var(--tt-paper-2);padding:0}
/* wordmark — the sign: star with 3T, lowercase triple·T, spaced SALON */
.wm{display:inline-flex;align-items:center;gap:var(--tt-s-2);text-decoration:none;color:inherit}
.wm .star{width:34px;height:34px;flex:0 0 auto}
.wm .t{font:700 var(--tt-fs-xl)/1 var(--tt-font-display);letter-spacing:var(--tt-track-tight)}
.wm .t small{display:block;font:600 var(--tt-fs-2xs)/1 var(--tt-font-body);letter-spacing:var(--tt-track-wide);text-transform:uppercase;margin-top:var(--tt-s-1);opacity:.8}
.wm.on-ink{color:var(--tt-on-ink)}
/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;padding:var(--tt-s-4) var(--tt-s-5);background:var(--tt-paper)}
.nav.on-ink{background:var(--tt-ink);color:var(--tt-on-ink)}
.nav .links{display:flex;gap:var(--tt-s-6);font-weight:600;font-size:var(--tt-fs-sm)}
.nav .links a{color:inherit;text-decoration:none}
.burger{width:var(--tt-tap-min);height:var(--tt-tap-min);display:grid;place-items:center;border-radius:var(--tt-r-sm)}
.burger i{display:block;width:22px;height:2px;background:currentColor;box-shadow:0 -7px 0 currentColor,0 7px 0 currentColor}
/* booking-flow header */
.flow{display:flex;align-items:center;justify-content:space-between;padding:var(--tt-s-3) var(--tt-s-5);background:var(--tt-ink);color:var(--tt-on-ink);font-weight:600;font-size:var(--tt-fs-sm)}
.flow .back{width:var(--tt-tap-min);height:var(--tt-tap-min);margin-left:calc(-1*var(--tt-s-3));display:grid;place-items:center}
.flow .back::before{content:"";width:10px;height:10px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
.steps{display:flex;gap:var(--tt-s-1);padding:0 var(--tt-s-5);background:var(--tt-ink)}
.steps i{flex:1;height:3px;background:var(--tt-on-ink-3);border-radius:var(--tt-r-pill)}
.steps i.done{background:var(--tt-brand-500)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--tt-s-2);height:var(--tt-control-h);padding:0 var(--tt-s-6);border-radius:var(--tt-r-pill);font:600 var(--tt-fs-md)/1 var(--tt-font-body);text-decoration:none;border:var(--tt-border) solid transparent;white-space:nowrap;cursor:pointer}
.btn.primary{background:var(--tt-brand-500);color:var(--tt-on-brand)}
.btn.secondary{background:transparent;color:var(--tt-ink);border-color:var(--tt-line-strong)}
.btn.secondary.on-ink{color:var(--tt-on-ink);border-color:var(--tt-on-ink)}
.btn.ghost{background:transparent;color:var(--tt-brand-600)}
.btn.paper{background:var(--tt-paper);color:var(--tt-ink)}
.btn.block{width:100%}
.btn.sm{height:var(--tt-control-h-sm);padding:0 var(--tt-s-4);font-size:var(--tt-fs-sm)}
.btn.disabled{background:var(--tt-line);color:var(--tt-ink-3)}
/* hero — full-bleed black-and-white video under oversized type; the portfolio, not a price list */
.hero{position:relative;background:var(--tt-ink);color:var(--tt-on-ink);padding:var(--tt-s-8) var(--tt-s-5)}
.hero.bleed{padding:0;min-height:620px;display:flex;flex-direction:column;justify-content:flex-end}
.hero.bleed .video{position:absolute;inset:0;margin:0;aspect-ratio:auto}
.hero.bleed .video img{filter:grayscale(1) contrast(1.1)}
.hero.bleed .video::after{background:linear-gradient(180deg,rgba(30,31,38,.15) 0%,rgba(30,31,38,.2) 40%,rgba(30,31,38,.92) 100%)}
.hero.bleed .copy{position:relative;z-index:1;padding:var(--tt-s-8) var(--tt-s-5) var(--tt-s-20)}
.hero.bleed .eyebrow{display:inline-block;background:var(--tt-brand-500);color:var(--tt-on-brand);padding:var(--tt-s-1) var(--tt-s-2);border-radius:var(--tt-r-sm)}
.hero.bleed h1{font-size:var(--tt-fs-hero);line-height:1;margin-bottom:var(--tt-s-4)}
.hero.bleed .video .play{top:var(--tt-s-6);left:auto;right:var(--tt-s-5);margin:0;width:var(--tt-s-12);height:var(--tt-s-12)}
.hero.bleed .video .dur{top:var(--tt-s-6);left:var(--tt-s-5)}
.hero.bleed .sig{font:600 var(--tt-fs-xs)/1 var(--tt-font-body);letter-spacing:var(--tt-track-caps);text-transform:uppercase;color:var(--tt-on-ink-2);margin-top:var(--tt-s-6)}
.desk .hero.bleed{min-height:720px;display:flex;grid-template-columns:none}
.desk .hero.bleed .copy{padding:var(--tt-s-16);max-width:760px}
.desk .hero.bleed h1{font-size:88px}
.desk .hero.bleed .video{border-radius:var(--tt-r-none)}
.desk .hero.bleed .video::after{background:linear-gradient(90deg,rgba(30,31,38,.82) 0%,rgba(30,31,38,.55) 38%,rgba(30,31,38,.1) 70%),linear-gradient(180deg,rgba(30,31,38,0) 55%,rgba(30,31,38,.7) 100%)}
/* booking overlay on desktop — the site stays behind, dimmed; the wizard is a right sheet */
.overlay-dim{position:absolute;inset:0;background:var(--tt-scrim);z-index:2}
.sheet{position:absolute;top:0;right:0;bottom:0;width:480px;background:var(--tt-paper);z-index:3;box-shadow:var(--tt-shadow);display:flex;flex-direction:column}
.sheet .body{flex:1;overflow:hidden;padding:0 var(--tt-s-6)}
.sheet .flow,.sheet .steps{flex:0 0 auto}
.sheet .foot{flex:0 0 auto;padding:var(--tt-s-4) var(--tt-s-6) var(--tt-s-6);background:var(--tt-paper);border-top:var(--tt-hairline) solid var(--tt-line)}
.sheet h2{font:700 var(--tt-fs-2xl)/var(--tt-lh-tight) var(--tt-font-display);margin:var(--tt-s-6) 0 var(--tt-s-2)}
.sheet .lead{color:var(--tt-ink-2);margin:0 0 var(--tt-s-5)}
.hero .eyebrow,.kicker{font:600 var(--tt-fs-xs)/1 var(--tt-font-body);letter-spacing:var(--tt-track-caps);text-transform:uppercase;color:var(--tt-brand-500);margin-bottom:var(--tt-s-3)}
.kicker{color:var(--tt-brand-600);margin-bottom:var(--tt-s-2)}
.hero h1{font:700 var(--tt-fs-3xl)/var(--tt-lh-tight) var(--tt-font-display);margin:0 0 var(--tt-s-4);letter-spacing:var(--tt-track-tight)}
.hero p{color:var(--tt-on-ink-2);margin:0 0 var(--tt-s-6);max-width:var(--tt-measure)}
.hero .cta{display:flex;gap:var(--tt-s-3);flex-wrap:wrap}
.video{position:relative;overflow:hidden;background:var(--tt-ink-soft);color:var(--tt-on-ink)}
.video img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.video::after{content:"";position:absolute;inset:0;background:var(--tt-scrim-photo)}
.video .play{position:absolute;z-index:1;top:50%;left:50%;width:var(--tt-s-16);height:var(--tt-s-16);margin:calc(-1*var(--tt-s-8)) 0 0 calc(-1*var(--tt-s-8));border-radius:var(--tt-r-pill);background:var(--tt-brand-500);display:grid;place-items:center;box-shadow:var(--tt-shadow)}
.video .play::after{content:"";border-left:18px solid var(--tt-on-brand);border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:var(--tt-s-1)}
.video .dur,.video .soon{position:absolute;z-index:1;top:var(--tt-s-3);left:var(--tt-s-3);font-size:var(--tt-fs-xs);font-weight:600;background:var(--tt-scrim);padding:var(--tt-s-1) var(--tt-s-2);border-radius:var(--tt-r-pill)}
.video .soon{background:var(--tt-scrim-soft)}
.video .cap{position:absolute;z-index:1;left:var(--tt-s-4);right:var(--tt-s-4);bottom:var(--tt-s-4)}
.video .cap b{display:block;font:700 var(--tt-fs-lg)/var(--tt-lh-snug) var(--tt-font-display)}
.video .cap span{font-size:var(--tt-fs-sm);color:var(--tt-on-ink-2)}
.hero .video{margin:var(--tt-s-6) calc(-1*var(--tt-s-5)) calc(-1*var(--tt-s-8));aspect-ratio:4/5}
/* sections */
.sec{padding:var(--tt-s-8) var(--tt-s-5)}
.sec.tight{padding-top:var(--tt-s-5)}
.sec.on-paper-2{background:var(--tt-paper-2)}
.sec.on-ink{background:var(--tt-ink);color:var(--tt-on-ink)}
.sec h2{font:700 var(--tt-fs-2xl)/var(--tt-lh-tight) var(--tt-font-display);margin:0 0 var(--tt-s-2);letter-spacing:var(--tt-track-tight)}
.sec h3{font:700 var(--tt-fs-lg)/var(--tt-lh-snug) var(--tt-font-display);margin:var(--tt-s-6) 0 var(--tt-s-2)}
.sec .lead{color:var(--tt-ink-2);margin:0 0 var(--tt-s-5)}
.sec.on-ink .lead{color:var(--tt-on-ink-2)}
.sec .more{display:flex;justify-content:space-between;align-items:baseline}
.sec .more a{font-weight:600;color:var(--tt-brand-600);text-decoration:none;font-size:var(--tt-fs-sm)}
/* service picker (Book Now wizard, step 0) */
.pick{display:grid;gap:var(--tt-s-3)}
.pick .choice{margin:0}
/* video tiles (menu) */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:var(--tt-s-3)}
.tiles.four{grid-template-columns:repeat(4,1fr)}
.tile{position:relative;border-radius:var(--tt-r-md);overflow:hidden;aspect-ratio:9/16;background:var(--tt-ink-soft);color:var(--tt-on-ink);display:flex;flex-direction:column;justify-content:flex-end;padding:var(--tt-s-3);text-decoration:none}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.tile::before{content:"";position:absolute;inset:0;background:var(--tt-scrim-photo)}
.tile>*{position:relative}
.tile .play{position:absolute;top:var(--tt-s-3);right:var(--tt-s-3);width:36px;height:36px;border-radius:var(--tt-r-pill);background:var(--tt-scrim-soft);display:grid;place-items:center}
.tile .play::after{content:"";border-left:12px solid var(--tt-on-ink);border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.tile .dur{position:absolute;top:var(--tt-s-3);left:var(--tt-s-3);font-size:var(--tt-fs-xs);font-weight:600;background:var(--tt-scrim);padding:3px var(--tt-s-2);border-radius:var(--tt-r-pill)}
.tile b{font:700 var(--tt-fs-md)/1.2 var(--tt-font-display)}
.tile span{font-size:var(--tt-fs-sm);color:var(--tt-on-ink-2)}
/* service rows */
.row{display:flex;justify-content:space-between;align-items:center;gap:var(--tt-s-4);padding:var(--tt-s-4) 0;border-bottom:var(--tt-hairline) solid var(--tt-line);text-decoration:none;color:inherit;min-height:var(--tt-tap-min)}
.row b{display:block;font:700 var(--tt-fs-md)/1.2 var(--tt-font-display)}
.row small{color:var(--tt-ink-2);font-size:var(--tt-fs-sm)}
.row .price{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.row .price small{display:block;text-align:right;font-weight:500}
.row .chev{width:10px;height:10px;border-right:2px solid var(--tt-ink-3);border-top:2px solid var(--tt-ink-3);transform:rotate(45deg);flex:0 0 auto}
/* facts strip on service page */
.facts{display:grid;grid-template-columns:1fr 1fr;gap:var(--tt-s-3);margin:var(--tt-s-5) 0}
.fact{background:var(--tt-paper-2);border-radius:var(--tt-r-md);padding:var(--tt-s-4)}
.fact small{display:block;font:600 var(--tt-fs-xs)/1 var(--tt-font-body);letter-spacing:var(--tt-track-caps);text-transform:uppercase;color:var(--tt-ink-3);margin-bottom:var(--tt-s-2)}
.fact b{font:700 var(--tt-fs-xl)/1 var(--tt-font-display);font-variant-numeric:tabular-nums}
.fact b em{font:600 var(--tt-fs-sm)/1 var(--tt-font-body);color:var(--tt-ink-2);font-style:normal}
/* before / after slider */
.ba{position:relative;aspect-ratio:4/5;border-radius:var(--tt-r-md);overflow:hidden;background:var(--tt-ink-soft)}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .after{clip-path:inset(0 0 0 52%)}
.ba .after img{filter:none}
.ba .before img{filter:grayscale(1) brightness(.8)}
.ba .handle{position:absolute;top:0;bottom:0;left:52%;width:var(--tt-border);background:var(--tt-paper);margin-left:-1px}
.ba .knob{position:absolute;top:50%;left:52%;width:var(--tt-tap-min);height:var(--tt-tap-min);margin:calc(-1*var(--tt-s-6)) 0 0 calc(-1*var(--tt-s-6));border-radius:var(--tt-r-pill);background:var(--tt-paper);box-shadow:var(--tt-shadow);display:grid;place-items:center;color:var(--tt-ink)}
.ba .knob::before{content:"‹ ›";font:700 var(--tt-fs-lg)/1 var(--tt-font-display);letter-spacing:.1em}
.ba .lbl{position:absolute;bottom:var(--tt-s-3);font-size:var(--tt-fs-xs);font-weight:600;color:var(--tt-on-ink);background:var(--tt-scrim);padding:var(--tt-s-1) var(--tt-s-2);border-radius:var(--tt-r-pill)}
.ba .lbl.l{left:var(--tt-s-3)}.ba .lbl.r{right:var(--tt-s-3)}
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--tt-s-3)}
/* cards, pills, notes */
.card{background:var(--tt-paper);border:var(--tt-hairline) solid var(--tt-line);border-radius:var(--tt-r-md);padding:var(--tt-s-4)}
.card.soft{background:var(--tt-paper-2);border-color:transparent}
.card.ok{background:var(--tt-ok-100);border-color:transparent}
.pill{display:inline-block;font-size:var(--tt-fs-xs);font-weight:600;padding:var(--tt-s-1) var(--tt-s-3);border-radius:var(--tt-r-pill);background:var(--tt-brand-100);color:var(--tt-brand-600)}
.pill.ok{background:var(--tt-ok-100);color:var(--tt-ok)}
.pill.warn{background:var(--tt-warn-100);color:var(--tt-warn)}
.pill.neutral{background:var(--tt-paper-2);color:var(--tt-ink-2)}
.pill.wait{background:var(--tt-wait-100);color:var(--tt-wait)}
.pill.info{background:var(--tt-info-100);color:var(--tt-info)}
.pill.bad{background:var(--tt-bad-100);color:var(--tt-bad);text-decoration:line-through}
.pill.busy{background:var(--tt-busy-100);color:var(--tt-ink-2)}
.pill.ink{background:var(--tt-ink);color:var(--tt-on-ink)}
.pill.solid{background:var(--tt-brand-500);color:var(--tt-on-brand)}
.pill.dot::before{content:"";display:inline-block;width:6px;height:6px;border-radius:var(--tt-r-pill);background:currentColor;margin-right:var(--tt-s-1);vertical-align:middle}
.pills{display:flex;gap:var(--tt-s-2);flex-wrap:wrap;margin-top:var(--tt-s-4)}
.note{font-size:var(--tt-fs-sm);color:var(--tt-ink-2);margin:var(--tt-s-3) 0 0}
.check{list-style:none;margin:0;padding:0}
.check li{padding:var(--tt-s-2) 0 var(--tt-s-2) var(--tt-s-8);position:relative;border-bottom:var(--tt-hairline) solid var(--tt-line)}
.check li::before{content:"";position:absolute;left:var(--tt-s-1);top:14px;width:12px;height:6px;border-left:2px solid var(--tt-ok);border-bottom:2px solid var(--tt-ok);transform:rotate(-45deg)}
/* choice list (stylist / service pick) */
.choice{display:flex;align-items:center;gap:var(--tt-s-3);padding:var(--tt-s-4);border:var(--tt-border) solid var(--tt-line);border-radius:var(--tt-r-md);margin-bottom:var(--tt-s-3);min-height:var(--tt-tap-min);text-decoration:none;color:inherit}
.choice.on{border-color:var(--tt-ink)}
.choice.off{opacity:.6}
.choice .radio{width:22px;height:22px;border-radius:var(--tt-r-pill);border:var(--tt-border) solid var(--tt-ink-3);flex:0 0 auto}
.choice.on .radio{border-color:var(--tt-brand-500);box-shadow:inset 0 0 0 5px var(--tt-paper);background:var(--tt-brand-500)}
.choice .av{width:var(--tt-avatar);height:var(--tt-avatar);border-radius:var(--tt-r-pill);background:var(--tt-brand-100);color:var(--tt-brand-600);display:grid;place-items:center;font:700 var(--tt-fs-sm)/1 var(--tt-font-display);flex:0 0 auto;overflow:hidden}
.choice .av img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.choice .av.muted{background:var(--tt-paper-2);color:var(--tt-ink-3)}
.choice .body{flex:1;min-width:0}
.choice b{display:block;font:700 var(--tt-fs-md)/1.2 var(--tt-font-display)}
.choice small{color:var(--tt-ink-2);font-size:var(--tt-fs-sm)}
.choice .right{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
/* calendar */
.cal{margin-top:var(--tt-s-4)}
.cal .mhead{display:flex;justify-content:space-between;align-items:center;font:700 var(--tt-fs-lg)/1 var(--tt-font-display);padding:0 var(--tt-s-2);margin-bottom:var(--tt-s-3)}
.cal .mhead a{width:var(--tt-tap-min);height:var(--tt-tap-min);display:grid;place-items:center;color:var(--tt-ink);text-decoration:none}
.cal .grid{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--tt-s-1);text-align:center}
.cal .dow{font:600 var(--tt-fs-xs)/1 var(--tt-font-body);color:var(--tt-ink-3);padding:var(--tt-s-2) 0}
.cal .d{height:var(--tt-tap-min);display:grid;place-items:center;border-radius:var(--tt-r-sm);font-weight:600;font-variant-numeric:tabular-nums;position:relative}
.cal .d.off{color:var(--tt-ink-3);font-weight:400}
.cal .d.full{color:var(--tt-ink-3);text-decoration:line-through}
.cal .d.on{background:var(--tt-brand-500);color:var(--tt-on-brand)}
.cal .d.open::after{content:"";position:absolute;bottom:6px;width:4px;height:4px;border-radius:var(--tt-r-pill);background:var(--tt-brand-500)}
.cal .d.on::after{background:var(--tt-on-brand)}
.times{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--tt-s-2);margin-top:var(--tt-s-5)}
.times .t{height:var(--tt-control-h);display:grid;place-items:center;border:var(--tt-border) solid var(--tt-line);border-radius:var(--tt-r-sm);font-weight:600;font-variant-numeric:tabular-nums}
.times .t.on{border-color:var(--tt-brand-500);color:var(--tt-brand-600);background:var(--tt-brand-050)}
.times .t.evening{border-style:dashed}
/* forms */
.field{margin-bottom:var(--tt-s-4)}
.field label{display:block;font:600 var(--tt-fs-sm)/1 var(--tt-font-body);margin-bottom:var(--tt-s-2)}
.field label small{font-weight:500;color:var(--tt-ink-3)}
.input{height:var(--tt-control-h);border:var(--tt-border) solid var(--tt-line);border-radius:var(--tt-r-sm);padding:0 var(--tt-s-4);display:flex;align-items:center;font-size:var(--tt-fs-md);background:var(--tt-paper)}
.input.area{height:auto;min-height:80px;align-items:flex-start;padding:var(--tt-s-3) var(--tt-s-4);color:var(--tt-ink-3)}
.input.focus{border-color:var(--tt-brand-500);box-shadow:var(--tt-ring)}
.input .ph{color:var(--tt-ink-3)}
.toggle{display:flex;align-items:center;gap:var(--tt-s-3);padding:var(--tt-s-4);background:var(--tt-paper-2);border-radius:var(--tt-r-md)}
.toggle .sw{width:44px;height:26px;border-radius:var(--tt-r-pill);background:var(--tt-brand-500);position:relative;flex:0 0 auto}
.toggle .sw::after{content:"";position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:var(--tt-r-pill);background:var(--tt-on-brand)}
.toggle .sw.off{background:var(--tt-line)}
.toggle .sw.off::after{right:auto;left:3px}
.toggle b{display:block;font:700 var(--tt-fs-sm)/1.2 var(--tt-font-display)}
.toggle small{font-size:var(--tt-fs-xs);color:var(--tt-ink-2)}
/* summary block */
.summary{background:var(--tt-paper-2);border-radius:var(--tt-r-md);padding:var(--tt-s-4);margin-bottom:var(--tt-s-5)}
.summary b{display:block;font:700 var(--tt-fs-md)/1.2 var(--tt-font-display)}
.summary small{color:var(--tt-ink-2);font-size:var(--tt-fs-sm)}
.summary .edit{float:right;font-size:var(--tt-fs-sm);font-weight:600;color:var(--tt-brand-600)}
/* confirmed */
.big-ok{width:var(--tt-avatar-lg);height:var(--tt-avatar-lg);border-radius:var(--tt-r-pill);background:var(--tt-ok);margin:var(--tt-s-8) auto var(--tt-s-4);position:relative}
.big-ok::after{content:"";position:absolute;left:20px;top:18px;width:22px;height:12px;border-left:4px solid var(--tt-on-ink);border-bottom:4px solid var(--tt-on-ink);transform:rotate(-45deg)}
.center{text-align:center}
/* series rebook */
.series{display:grid;grid-template-columns:1fr 1fr;gap:var(--tt-s-2);margin-top:var(--tt-s-3)}
.series .s{border:var(--tt-border) solid var(--tt-line);border-radius:var(--tt-r-sm);padding:var(--tt-s-3);font-size:var(--tt-fs-sm)}
.series .s b{display:block;font:700 var(--tt-fs-md)/1.2 var(--tt-font-display);font-variant-numeric:tabular-nums}
.series .s.on{border-color:var(--tt-brand-500);background:var(--tt-brand-050)}
.series .s small{color:var(--tt-ink-2)}
/* team */
.person{display:flex;gap:var(--tt-s-4);align-items:flex-start;padding:var(--tt-s-4) 0;border-bottom:var(--tt-hairline) solid var(--tt-line)}
.person .photo{width:var(--tt-avatar-lg);height:var(--tt-avatar-lg);border-radius:var(--tt-r-md);background:var(--tt-paper-2);flex:0 0 auto;overflow:hidden;display:grid;place-items:center;font:700 var(--tt-fs-lg)/1 var(--tt-font-display);color:var(--tt-brand-600)}
.person .photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.person b{display:block;font:700 var(--tt-fs-lg)/1.2 var(--tt-font-display)}
.person small{color:var(--tt-ink-2);font-size:var(--tt-fs-sm);display:block}
.person .btn{margin-top:var(--tt-s-3)}
/* reviews */
.review{padding:var(--tt-s-4);border:var(--tt-hairline) solid var(--tt-line);border-radius:var(--tt-r-md);margin-bottom:var(--tt-s-3)}
.stars{color:var(--tt-brand-500);letter-spacing:.1em;font-size:var(--tt-fs-sm)}
.review p{margin:var(--tt-s-2) 0;font-size:var(--tt-fs-sm)}
.review small{color:var(--tt-ink-3);font-size:var(--tt-fs-xs)}
.rating{display:flex;align-items:center;gap:var(--tt-s-3);margin-bottom:var(--tt-s-4)}
.rating b{font:700 var(--tt-fs-3xl)/1 var(--tt-font-display)}
.rating small{color:var(--tt-ink-2);font-size:var(--tt-fs-sm)}
/* info / footer */
.info{background:var(--tt-paper-2);padding:var(--tt-s-8) var(--tt-s-5);font-size:var(--tt-fs-sm);color:var(--tt-ink-2)}
.info b{color:var(--tt-ink)}
.info .grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--tt-s-4)}
.hours{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.hours td{padding:var(--tt-s-2) 0;border-bottom:var(--tt-hairline) solid var(--tt-line)}
.hours td:last-child{text-align:right;white-space:nowrap}
.hours tr.today td{font-weight:700;color:var(--tt-ink)}
.map{aspect-ratio:16/10;border-radius:var(--tt-r-md);background:var(--tt-paper-2);display:grid;place-items:center;color:var(--tt-ink-3);font-size:var(--tt-fs-sm);border:var(--tt-hairline) solid var(--tt-line)}
.footer{background:var(--tt-ink);color:var(--tt-on-ink-2);padding:var(--tt-s-8) var(--tt-s-5);font-size:var(--tt-fs-sm)}
.footer .cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--tt-s-6)}
.footer a{color:var(--tt-on-ink);text-decoration:none;display:block;padding:var(--tt-s-1) 0}
/* sticky bottom CTA on phone */
.sticky{position:absolute;left:0;right:0;bottom:0;padding:var(--tt-s-3) var(--tt-s-5) var(--tt-s-6);background:linear-gradient(180deg,rgba(255,255,255,0),var(--tt-paper) 30%)}
.sticky .two{display:flex;gap:var(--tt-s-3)}
.sticky .two .btn{flex:1}
/* Johnny's side: text + Apple Calendar */
.sms{background:var(--tt-paper-2);border-radius:var(--tt-r-lg);padding:var(--tt-s-4);font-size:var(--tt-fs-sm);max-width:320px;margin:var(--tt-s-4) auto}
.sys{font-size:var(--tt-fs-xs);color:var(--tt-ink-3);text-align:center;margin:var(--tt-s-4) 0 var(--tt-s-2)}
.evt{border:var(--tt-hairline) solid var(--tt-line);border-radius:var(--tt-r-md);padding:var(--tt-s-4);margin:0 var(--tt-s-5) var(--tt-s-3);background:var(--tt-paper)}
.evt .cal-name{font-size:var(--tt-fs-xs);color:var(--tt-ink-2);display:flex;align-items:center;gap:var(--tt-s-2)}
.evt .dot{width:8px;height:8px;border-radius:var(--tt-r-pill);background:var(--tt-cat-color)}
.evt .dot.cut{background:var(--tt-cat-cut)}.evt .dot.keratin{background:var(--tt-cat-keratin)}.evt .dot.personal{background:var(--tt-cat-personal)}
.evt b{display:block;font:700 var(--tt-fs-lg)/1.2 var(--tt-font-display);margin:var(--tt-s-1) 0}
.evt small{display:block;color:var(--tt-ink-2);font-size:var(--tt-fs-sm)}
/* staff app: day column */
.day{display:grid;grid-template-columns:56px 1fr 1fr;gap:var(--tt-s-1) var(--tt-s-2)}
.day .hr{font:600 var(--tt-fs-xs)/1 var(--tt-font-body);color:var(--tt-ink-3);padding-top:var(--tt-s-1);font-variant-numeric:tabular-nums}
.day .col-h{font:600 var(--tt-fs-xs)/1 var(--tt-font-body);letter-spacing:var(--tt-track-caps);text-transform:uppercase;color:var(--tt-ink-2);padding-bottom:var(--tt-s-2)}
.day .slot{min-height:28px;border-top:var(--tt-hairline) dashed var(--tt-line)}
.appt{border-radius:var(--tt-r-sm);padding:var(--tt-s-2) var(--tt-s-3);font-size:var(--tt-fs-xs);color:var(--tt-on-ink);background:var(--tt-cat-color);border-left:4px solid var(--tt-brand-700)}
.appt.cut{background:var(--tt-cat-cut);border-left-color:var(--tt-ink-900)}
.appt.personal{background:var(--tt-cat-personal);border-left-color:var(--tt-ink-3);color:var(--tt-ink)}
.appt.now{outline:var(--tt-border) solid var(--tt-ink);outline-offset:2px}
.appt b{display:block;font:700 var(--tt-fs-sm)/1.2 var(--tt-font-display)}
.appt.h2{min-height:56px}.appt.h3{min-height:84px}.appt.h6{min-height:168px}
/* spec tables */
.spec{padding:var(--tt-s-8);max-width:840px;margin:0 auto;background:var(--tt-paper)}
.spec h1{font:700 var(--tt-fs-2xl)/var(--tt-lh-tight) var(--tt-font-display);margin:0 0 var(--tt-s-2)}
.spec h2{font:700 var(--tt-fs-lg)/var(--tt-lh-snug) var(--tt-font-display);margin:var(--tt-s-8) 0 var(--tt-s-3)}
.spec table{width:100%;border-collapse:collapse;font-size:var(--tt-fs-sm)}
.spec th,.spec td{text-align:left;padding:var(--tt-s-2) var(--tt-s-3);border-bottom:var(--tt-hairline) solid var(--tt-line);vertical-align:top}
.spec th{font-weight:700;background:var(--tt-paper-2)}
.spec code{font-size:var(--tt-fs-xs);background:var(--tt-paper-2);padding:2px var(--tt-s-1);border-radius:var(--tt-r-sm)}
/* guideline cards */
.sw-row{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--tt-s-3);margin-bottom:var(--tt-s-5)}
.swatch{border-radius:var(--tt-r-md);overflow:hidden;border:var(--tt-hairline) solid var(--tt-line)}
.swatch i{display:block;height:56px}
.swatch.big i{height:120px}
.swatch small{display:block;padding:var(--tt-s-2) var(--tt-s-3);font-size:var(--tt-fs-xs)}
.swatch small b{display:block}
.type-row{display:flex;align-items:baseline;gap:var(--tt-s-4);padding:var(--tt-s-3) 0;border-bottom:var(--tt-hairline) solid var(--tt-line)}
.type-row small{flex:0 0 200px;font-size:var(--tt-fs-xs);color:var(--tt-ink-3)}
.stack{display:flex;flex-direction:column;gap:var(--tt-s-3);align-items:flex-start}
.stack .r{display:flex;gap:var(--tt-s-3);flex-wrap:wrap;align-items:center}
/* desktop */
.desk .nav{padding:var(--tt-s-5) var(--tt-s-16)}
.desk .hero{display:grid;grid-template-columns:1fr 1fr;gap:var(--tt-s-16);align-items:center;padding:var(--tt-s-16)}
.desk .hero h1{font-size:var(--tt-fs-hero)}
.desk .hero .video{margin:0;aspect-ratio:4/5;border-radius:var(--tt-r-lg)}
.desk .sec{padding:var(--tt-s-16)}
.desk .sec.tight{padding-top:var(--tt-s-8)}
.desk .cols-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--tt-s-16);align-items:center}
.desk .strip{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--tt-s-6)}
.desk .strip .row{border:0;padding:0;display:block}
.desk .footer{padding:var(--tt-s-10) var(--tt-s-16)}
.desk .footer .cols{grid-template-columns:2fr 1fr 1fr 1fr}
.desk .panel{display:grid;grid-template-columns:320px 1fr 360px;min-height:100%}
.desk .side{background:var(--tt-paper-2);padding:var(--tt-s-6);border-right:var(--tt-hairline) solid var(--tt-line)}
.desk .main{padding:var(--tt-s-6)}
.desk .aside{padding:var(--tt-s-6);border-left:var(--tt-hairline) solid var(--tt-line)}
.desk .day{grid-template-columns:64px 1fr 1fr 1fr}
.nav-side a{display:block;padding:var(--tt-s-3) var(--tt-s-4);border-radius:var(--tt-r-sm);text-decoration:none;color:var(--tt-ink);font-weight:600;min-height:var(--tt-tap-min);display:flex;align-items:center;gap:var(--tt-s-3)}
.nav-side a.on{background:var(--tt-ink);color:var(--tt-on-ink)}
.nav-side .count{margin-left:auto;background:var(--tt-brand-500);color:var(--tt-on-brand);font-size:var(--tt-fs-xs);padding:2px var(--tt-s-2);border-radius:var(--tt-r-pill)}
.q{padding:var(--tt-s-3) 0;border-bottom:var(--tt-hairline) solid var(--tt-line);font-size:var(--tt-fs-sm)}
.q b{display:block;font:700 var(--tt-fs-md)/1.2 var(--tt-font-display)}
.q .acts{display:flex;gap:var(--tt-s-2);margin-top:var(--tt-s-2)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}