/* ============================================================
   Diamond Barbershop — "CUT WITH PRECISION"
   Signature redesign v2. Creative direction:
   clients/diamond/reports/creative-redesign/agents/brand-creative-director-direction.md
   Tokens match brand/BRAND_SYSTEM.md and assets/tokens/design-tokens.css.
   ============================================================ */

:root{
  --ink:#0D0D10;
  --charcoal:#18181C;
  --surface-2:#1F1F24;
  --line:#2E2F35;
  --bone:#F5F2EC;
  --ash:#9B9A97;
  --ice:#5B7C99;
  --ice-tint:#7C9CB5;
  --white:#FFFFFF;

  --font-display:'Archivo Black','Arial Black',sans-serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;

  --gutter:24px;
  --maxw:1320px;
  --header-h:78px;
  --sticky-cta-h:64px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

body{
  margin:0;background:var(--ink);color:var(--bone);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--ice);color:var(--ink);}
a{color:inherit;}
img,svg{max-width:100%;display:block;}
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--ice-tint);outline-offset:3px;
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);}
.bleed-l{margin-left:calc(var(--gutter) * -1);padding-left:var(--gutter);}
.display{font-family:var(--font-display);text-wrap:balance;}
.eyebrow{
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ice-tint);
  font-weight:700;margin:0 0 14px;display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--ice-tint);display:inline-block;}

/* irregular vertical rhythm by design — not one repeated padding value */
.pad-spacious{padding:min(11vw,140px) 0;}
.pad-tight{padding:min(6vw,72px) 0;}
section{position:relative;}

/* reveal-on-scroll */
/* Progressive enhancement, deliberately structured so a failed/blocked/slow
   script can never leave content invisible: .reveal is fully visible by
   default. Only main.js, at the point it has ALREADY successfully executed
   far enough to guarantee it will also reveal them, adds .reveal-armed —
   which is what actually applies the hidden starting state. If main.js
   never runs at all (404, syntax error, disabled, blocked), .reveal-armed
   is never added and nothing is ever hidden. This was a real gap found in
   review: the previous version hid content by default and relied entirely
   on JS to un-hide it, so a script failure (exactly what happened when an
   early published preview omitted this file) left real content invisible. */
.reveal{opacity:1;transform:none;}
.reveal.reveal-armed{opacity:0;transform:translateY(20px);transition:opacity .45s ease,transform .45s cubic-bezier(.16,.8,.24,1);}
.reveal.reveal-armed.is-visible{opacity:1;transform:none;}
.reveal.d1{transition-delay:.07s;} .reveal.d2{transition-delay:.14s;} .reveal.d3{transition-delay:.21s;}
@media (prefers-reduced-motion: reduce){ .reveal.reveal-armed{opacity:1;transform:none;transition:none;} }

/* cutting-line hover motif for nav/inline links */
.line-link{position:relative;text-decoration:none;padding-bottom:3px;}
.line-link::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--ice-tint);
  transform:scaleX(0);transform-origin:left;transition:transform .2s ease;
}
.line-link:hover::after,.line-link:focus-visible::after{transform:scaleX(1);}

/* ---------------- Header ---------------- */
header{
  position:sticky;top:var(--banner-h,0px);left:0;right:0;z-index:100;height:var(--header-h);display:flex;align-items:center;
  background:linear-gradient(to bottom, rgba(13,13,16,.94) 40%, rgba(13,13,16,0));
}
.nav{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;}
.brand svg{width:26px;height:26px;flex-shrink:0;}
.brand .wordmark{font-family:var(--font-display);font-size:14px;letter-spacing:.06em;white-space:nowrap;}
.nav-links{display:flex;gap:30px;font-size:13px;color:var(--ash);}
.nav-links a{text-decoration:none;}
.nav-links a:hover{color:var(--bone);}
@media (max-width:820px){ .nav-links{display:none;} }

.btn{
  display:inline-flex;align-items:center;gap:9px;padding:14px 26px;font-size:13px;font-weight:700;
  text-decoration:none;letter-spacing:.04em;text-transform:uppercase;border:1px solid transparent;
  white-space:nowrap;transition:background .25s,border-color .25s,color .25s,transform .15s;
}
.btn:active{transform:scale(.98);}
.btn-primary{background:var(--bone);color:var(--ink);}
.btn-primary:hover{background:var(--white);}
.btn-outline{border-color:var(--line);color:var(--bone);}
.btn-outline:hover{border-color:var(--ice-tint);color:var(--ice-tint);}

/* ---------------- Hero ---------------- */
.hero{position:relative;min-height:100vh;overflow:hidden;}
.hero-stage{position:absolute;top:0;right:0;height:100%;width:62%;z-index:1;}
#diamond-canvas-wrap{position:absolute;top:8%;right:-8%;width:100%;height:85%;}
#diamond-canvas-wrap canvas{width:100% !important;height:100% !important;display:block;}
.hero-stage-fallback{position:absolute;top:10%;right:-6%;width:78%;height:80%;display:flex;align-items:center;justify-content:flex-end;}
.hero-stage-fallback svg{width:82%;filter:drop-shadow(0 50px 70px rgba(0,0,0,.6));}
.diamond-fallback-spin{transform-origin:50% 50%;animation:diamondSpin 26s linear infinite;}
@keyframes diamondSpin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .diamond-fallback-spin{animation:none;} }
.scene-fade-in{opacity:0;transition:opacity 1s ease;}
.scene-fade-in.is-ready{opacity:1;}

.hero-copy{
  position:relative;z-index:3;padding-top:38vh;padding-left:7vw;max-width:600px;
}
/* Font-size ceiling fixed after a real bug: at the previous 96px max,
   "PRECISION." (the longer line) measured ~614px wide — wider than this
   column — and was being silently clipped by `overflow:hidden` on the line
   span (dead scaffolding for a clip-path reveal that was never actually
   wired up in JS, so it had no benefit and only caused clipping). Removed
   the overflow and capped the size so the longest real line fits with
   margin to spare, verified by measuring actual rendered scrollWidth. */
.hero h1{font-size:clamp(40px,6.4vw,80px);line-height:.98;margin:0 0 26px;letter-spacing:-.01em;}
.hero h1 span{display:block;}
.hero h1 span em{display:block;font-style:normal;}
.hero h1 .line2{color:var(--ice-tint);}
.hero-sub-row{padding-left:3vw;max-width:520px;}
.hero-sub-row p.lede{font-size:clamp(16px,1.5vw,18px);color:var(--ash);line-height:1.65;max-width:42ch;margin:0 0 30px;}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;}
.hero-location-tag{
  position:absolute;right:var(--gutter);bottom:64px;z-index:3;text-align:right;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ash);
}
.hero-location-tag .dot{color:var(--ice-tint);margin:0 6px;}

@media (max-width:900px){
  .hero{min-height:auto;padding-bottom:56px;}
  .hero-stage{position:relative;width:auto;height:48vh;min-height:280px;max-height:420px;top:0;right:0;
    margin:calc(var(--header-h) + 10px) -6vw 0;transform:rotate(-8deg);}
  #diamond-canvas-wrap{top:0;right:0;width:100%;height:100%;}
  .hero-stage-fallback{top:0;right:0;width:100%;height:100%;justify-content:center;}
  .hero-stage-fallback svg{width:60%;}
  .hero-copy{position:static;padding-top:28px;padding-left:0;max-width:none;}
  .wrap > .hero-copy{padding-left:0;}
  .hero h1{font-size:clamp(38px,11vw,54px);}
  .hero-sub-row{padding-left:0;}
  .hero-location-tag{position:static;text-align:left;margin-top:28px;padding:0 var(--gutter);}
}

/* ---------------- Services ---------------- */
.services{background:var(--ink);}
.service-menu{display:flex;flex-direction:column;gap:min(9vh,90px);}
.service-line{position:relative;}
.service-line .idx{
  position:absolute;left:-2.2em;top:.15em;font-size:13px;color:var(--ash);font-variant-numeric:tabular-nums;
}
.service-name{
  font-family:var(--font-display);font-size:clamp(48px,9vw,120px);line-height:.95;margin:0;
  letter-spacing:-.01em;text-decoration:none;color:var(--bone);display:inline-block;position:relative;
  transition:letter-spacing .25s ease;
}
.service-name::after{
  content:"";position:absolute;left:0;top:52%;width:100%;height:2px;background:var(--ice-tint);
  transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.16,.8,.24,1);
}
.service-line:hover .service-name,.service-line:focus-within .service-name{letter-spacing:.01em;}
.service-line:hover .service-name::after,.service-line:focus-within .service-name::after{transform:scaleX(1);}
.service-ask{
  display:inline-block;margin-top:12px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ice-tint);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;
}
.service-line:hover .service-ask{border-color:var(--ice-tint);}
.sl-1{margin-left:6vw;} .sl-2{margin-left:16vw;} .sl-3{margin-left:10vw;}
@media (max-width:760px){
  .sl-1,.sl-2,.sl-3{margin-left:0;}
  .service-line .idx{position:static;display:block;margin-bottom:6px;}
}

/* ---------------- Work / Atmosphere ---------------- */
.atmosphere{background:var(--charcoal);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.filmstrip{display:flex;align-items:flex-end;gap:20px;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin;}
.film-slot{
  position:relative;flex:0 0 auto;background:var(--surface-2);border:1px solid var(--line);overflow:hidden;
}
.film-slot.wide{width:min(46vw,520px);aspect-ratio:16/9;align-self:flex-start;}
.film-slot.tall{width:min(24vw,260px);aspect-ratio:3/4;align-self:flex-end;}
.film-slot.square{width:min(30vw,320px);aspect-ratio:1/1;align-self:center;}
.film-slot svg{position:absolute;inset:0;width:100%;height:100%;opacity:.55;}
.film-slot .cap{
  position:absolute;left:14px;bottom:12px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ash);
}
@media (max-width:760px){
  .film-slot.wide{width:78vw;} .film-slot.tall{width:46vw;} .film-slot.square{width:52vw;}
}

/* ---------------- Brand story ---------------- */
.story{overflow:hidden;}
.story-grid{position:relative;display:grid;grid-template-columns:1fr;min-height:56vh;}
.story-vertical{
  position:absolute;left:2vw;top:0;height:100%;display:flex;align-items:center;pointer-events:none;
}
.story-vertical span{
  display:block;font-family:var(--font-display);font-size:clamp(26px,4.2vw,54px);color:var(--line);
  white-space:nowrap;writing-mode:vertical-rl;transform:rotate(180deg);letter-spacing:.02em;
}
.story-copy{margin-left:auto;width:min(46%,520px);padding:8vh 0;position:relative;z-index:2;}
.story-copy .support{color:var(--ash);font-size:15.5px;line-height:1.75;max-width:46ch;}
@media (max-width:900px){
  .story-vertical{position:static;height:auto;margin-bottom:24px;}
  .story-vertical span{writing-mode:horizontal-tb;transform:none;font-size:clamp(28px,8vw,40px);color:var(--ice-tint);white-space:normal;}
  .story-copy{width:100%;margin-left:0;padding:0;}
}

/* ---------------- Diamond Club (internal build only) ---------------- */
.club-section{background:var(--ink);}
.club-inner{position:relative;display:grid;grid-template-columns:1fr;min-height:52vh;align-items:center;}
.club-copy{max-width:420px;}
.club-copy p{color:var(--ash);line-height:1.65;}
.club-copy .micro{margin-top:18px;font-size:12px;color:var(--line);letter-spacing:.02em;}
.club-card-stage{margin-top:40px;display:flex;justify-content:flex-end;}
.club-card-wrap{width:min(400px,90vw);perspective:900px;}
.club-card-svg{
  width:100%;height:auto;overflow:visible;transition:transform .4s ease;will-change:transform;
  animation:clubSweep 8s ease-in-out infinite;
}
.club-card-wrap:hover .club-card-svg{transform:rotateX(6deg) rotateY(-8deg);}
.club-card__outline{fill:rgba(24,24,28,0.55);stroke:var(--ice);stroke-width:1.5;stroke-dasharray:5 4;}
.club-card__facets{stroke:var(--ice);stroke-width:.75;opacity:.45;}
.club-card__label{
  font-family:var(--font-display);font-size:20px;fill:var(--bone);letter-spacing:.02em;
  text-anchor:middle;
}
.club-card__concept-tag{font-family:var(--font-body);font-size:9px;letter-spacing:.16em;fill:var(--ash);text-transform:uppercase;}
@keyframes clubSweep{
  0%,20%{ filter:drop-shadow(0 0 0 transparent); }
  50%{ filter:drop-shadow(4px 0 10px rgba(124,156,181,.28)); }
  80%,100%{ filter:drop-shadow(0 0 0 transparent); }
}
@media (prefers-reduced-motion: reduce){
  .club-card-svg{animation:none;transition:none;}
  .club-card-wrap:hover .club-card-svg{transform:none;}
}
@media (max-width:820px){ .club-card-stage{justify-content:center;} }

/* ---------------- Location ---------------- */
.location{position:relative;padding:0;min-height:70vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--charcoal);}
.loc-bg{position:absolute;inset:0;}
.loc-bg svg{position:absolute;inset:0;width:100%;height:100%;}
.loc-bg .pin-wrap{position:absolute;left:50%;top:44%;transform:translate(-50%,-100%);text-align:center;}
.loc-bg .pin-dot{width:12px;height:12px;background:var(--ice-tint);border-radius:50%;margin:0 auto;box-shadow:0 0 0 8px rgba(124,156,181,.14);}
.loc-card{
  position:relative;z-index:2;margin:0 0 min(8vw,64px) min(8vw,64px);background:rgba(13,13,16,.88);
  border:1px solid var(--line);padding:32px 34px;max-width:380px;backdrop-filter:blur(6px);
}
.loc-card .addr{font-family:var(--font-display);font-size:clamp(20px,2.4vw,26px);line-height:1.3;margin:0 0 20px;}
.loc-links{display:flex;flex-direction:column;gap:14px;}
.loc-link{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:14px;padding:10px 0;border-top:1px solid var(--line);}
.loc-link:first-child{border-top:none;}
.loc-link svg{width:16px;height:16px;stroke:var(--ice-tint);flex-shrink:0;}
.loc-link .arrow{margin-left:auto;color:var(--ash);}
@media (max-width:760px){ .loc-card{margin:0 var(--gutter) 40px;max-width:none;} }

/* ---------------- Closing ---------------- */
.closing{
  background:var(--bone);color:var(--ink);min-height:70vh;display:flex;align-items:center;
}
.closing-inner{width:100%;}
.closing h2{font-size:clamp(36px,7vw,84px);margin:0 0 32px;color:var(--ink);position:relative;display:inline-block;}
.closing-sweep{position:absolute;left:0;top:0;height:100%;width:0;background:var(--ice-tint);mix-blend-mode:multiply;pointer-events:none;}
.closing.sweep-play .closing-sweep{animation:closingSweep 1.1s cubic-bezier(.16,.8,.24,1) forwards;}
@keyframes closingSweep{ 0%{width:0;left:0;opacity:.55;} 60%{width:100%;left:0;opacity:.3;} 100%{width:0;left:100%;opacity:0;} }
@media (prefers-reduced-motion: reduce){ .closing-sweep{display:none;} }
.closing .btn-primary{background:var(--ink);color:var(--bone);}
.closing .btn-primary:hover{background:#000;}
.closing .btn-outline{border-color:var(--ink);color:var(--ink);}
.closing .btn-outline:hover{border-color:var(--ice);color:var(--ice);}
.closing-ctas{display:flex;gap:14px;flex-wrap:wrap;position:relative;z-index:2;}
.closing-cta-underline{
  position:relative;
}
.closing.sweep-play .closing-cta-underline::after{
  content:"";position:absolute;left:0;bottom:-8px;height:2px;width:100%;background:var(--ice);
  animation:underlineIn .3s ease-out 1.05s both;
}
@keyframes underlineIn{ from{transform:scaleX(0);} to{transform:scaleX(1);} }
.closing-meta{margin-top:36px;color:#6b6a66;font-size:13px;}

/* ---------------- Footer ---------------- */
footer{padding:44px 0;border-top:1px solid var(--line);background:var(--ink);}
.footer-grid{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--ash);}
.footer-grid a{text-decoration:none;}
.footer-grid a:hover{color:var(--bone);}

/* ---------------- Sticky mobile CTA ---------------- */
.sticky-cta{
  position:fixed;bottom:0;left:0;right:0;z-index:90;background:rgba(24,24,28,.97);
  border-top:1px solid var(--ice); /* hairline echo of the cutting-line motif */
  padding:10px var(--gutter);display:none;gap:10px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
  transform:translateY(100%);transition:transform .3s ease;
}
.sticky-cta .btn{flex:1;justify-content:center;padding:13px 16px;}
@media (max-width:820px){
  /* Hidden by default (translateY 100%) so it never overlaps the hero's own
     CTA buttons; main.js reveals it (.is-visible) once the hero's primary
     CTA has scrolled out of view. See mission requirement: "a mobile sticky
     action bar that does not obscure content." */
  .sticky-cta{display:flex;}
  .sticky-cta.is-visible{transform:translateY(0);}
  body{padding-bottom:var(--sticky-cta-h);}
}
@media (prefers-reduced-motion: reduce){ .sticky-cta{transition:none;} }

.skip-link{
  position:absolute;left:12px;top:-60px;background:var(--bone);color:var(--ink);
  padding:10px 16px;z-index:200;text-decoration:none;font-size:13px;font-weight:700;transition:top .2s;
}
.skip-link:focus{top:12px;}

/* Internal-review-only banner — never present in the release build */
.internal-review-banner{
  position:sticky;top:0;z-index:110;background:#D9A441;color:#1a1200;
  text-align:center;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:700;padding:8px 12px;
}