/* ================================================================
   GALLIANO GOLF — style.css
   Shared design system for all pages.
   ================================================================ */

/* ── RESET & VARIABLES ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --black:#0C0C12;
  --graphite:#121218;
  --charcoal:#1A1A24;
  --slate:#262636;
  --steel:#5A5E6E;
  --silver:#8E92A4;
  --white:#E8E9EE;

  --blue:#1A3A8F;
  --blue-bright:#2B4FBF;
  --blue-light:#3D65D4;
  --blue-glow:rgba(26,58,143,0.25);
  --blue-dim:rgba(26,58,143,0.10);

  --gold:#C9A84C;
  --gold-soft:#B89A42;
  --gold-dim:rgba(201,168,76,0.12);
  --gold-glow:rgba(201,168,76,0.18);

  --green:#065F46;
  --green-soft:#047857;

  --display:'Playfair Display','Georgia',serif;
  --body:'DM Sans','Helvetica Neue',sans-serif;
  --mono:'JetBrains Mono','Menlo',monospace;
  --section-pad:clamp(80px,12vh,160px);
  --side-pad:clamp(24px,5vw,120px);
}

/* ── BASE ── */
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{background:var(--graphite);color:var(--white);font-family:var(--body);font-weight:400;line-height:1.6;overflow-x:hidden}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--graphite)}
::-webkit-scrollbar-thumb{background:var(--slate);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--blue)}
::selection{background:var(--blue);color:var(--white)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* Film grain overlay */
body::before{
  content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:0.018;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px;
}


/* ================================================================
   SCROLL-REVEAL ANIMATIONS
   ================================================================ */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-left{opacity:0;transform:translateX(-50px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.reveal-right{opacity:0;transform:translateX(50px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.reveal-left.visible,.reveal-right.visible{opacity:1;transform:translateX(0)}
.stagger-children>*{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.stagger-children.visible>*:nth-child(1){transition-delay:0s;opacity:1;transform:translateY(0)}
.stagger-children.visible>*:nth-child(2){transition-delay:.12s;opacity:1;transform:translateY(0)}
.stagger-children.visible>*:nth-child(3){transition-delay:.24s;opacity:1;transform:translateY(0)}
.stagger-children.visible>*:nth-child(4){transition-delay:.36s;opacity:1;transform:translateY(0)}
.stagger-children.visible>*:nth-child(5){transition-delay:.48s;opacity:1;transform:translateY(0)}
.stagger-children.visible>*:nth-child(6){transition-delay:.60s;opacity:1;transform:translateY(0)}

@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}


/* ================================================================
   NAV
   ================================================================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:0 var(--side-pad);height:80px;display:flex;align-items:center;justify-content:space-between;transition:background .5s,backdrop-filter .5s,height .4s}
.nav.scrolled{background:rgba(18,18,24,.92);backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px) saturate(1.2);height:64px;border-bottom:1px solid rgba(201,168,76,.08)}
.nav-logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:18px;font-weight:600;letter-spacing:.25em;color:var(--white);text-transform:uppercase}
.nav-logo span{color:var(--gold)}
.nav-logo-crown{height:26px;width:auto;filter:drop-shadow(0 0 6px rgba(201,168,76,.15))}
.nav.scrolled .nav-logo-crown{height:22px}

.nav-links{display:flex;align-items:center;gap:36px;list-style:none}
.nav-links a{font-family:var(--body);font-size:13px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--silver);transition:color .3s;position:relative}
.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1px;background:var(--gold);transition:width .3s}
.nav-links a:hover{color:var(--white)}
.nav-links a:hover::after{width:100%}
.nav-links a.active{color:var(--white)}
.nav-links a.active::after{width:100%;background:var(--gold)}

.nav-icons{display:flex;align-items:center;gap:20px}
.nav-icon{width:20px;height:20px;color:var(--silver);cursor:pointer;transition:color .3s}
.nav-icon:hover{color:var(--gold)}
.cart-badge{position:relative}
.cart-badge::after{content:attr(data-count);position:absolute;top:-6px;right:-8px;width:16px;height:16px;background:var(--blue);color:var(--white);font-size:9px;font-weight:600;border-radius:50%;display:flex;align-items:center;justify-content:center}
.nav-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px}
.nav-toggle span{display:block;width:24px;height:1.5px;background:var(--white);transition:transform .3s,opacity .3s}

/* Mobile menu */
.mobile-menu{position:fixed;inset:0;z-index:999;background:var(--black);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:32px;opacity:0;pointer-events:none;transition:opacity .4s}
.mobile-menu.active{opacity:1;pointer-events:auto}
.mobile-menu a{font-family:var(--display);font-size:32px;font-weight:400;color:var(--white);transition:color .3s}
.mobile-menu a:hover{color:var(--gold)}
.mobile-menu-close{position:absolute;top:28px;right:var(--side-pad);width:32px;height:32px;cursor:pointer;color:var(--white)}


/* ================================================================
   BUTTONS
   ================================================================ */
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 36px;font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;border:none;cursor:pointer;transition:all .4s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden}
.btn-primary{background:var(--blue);color:var(--white)}
.btn-primary:hover{background:var(--blue-bright);transform:translateY(-2px);box-shadow:0 8px 32px var(--blue-glow)}
.btn-ghost{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,.15)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}
.btn-gold{background:var(--gold);color:var(--black)}
.btn-gold:hover{background:var(--gold-soft);transform:translateY(-2px);box-shadow:0 8px 32px var(--gold-glow)}
.btn-arrow{transition:transform .3s}
.btn:hover .btn-arrow{transform:translateX(4px)}


/* ================================================================
   SECTION COMMON
   ================================================================ */
.section-header{text-align:center;margin-bottom:64px}
.section-label{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.section-title{font-family:var(--display);font-size:clamp(32px,4.5vw,52px);font-weight:400;line-height:1.15;color:var(--white)}

/* Crown divider */
.crown-divider{display:flex;align-items:center;justify-content:center;gap:20px;padding:6px 0;background:transparent}
.crown-divider-line{width:80px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-dim))}
.crown-divider-line:last-child{background:linear-gradient(90deg,var(--gold-dim),transparent)}
.crown-divider img{width:28px;height:auto;opacity:.25;filter:brightness(1.3)}

/* Putter placeholder (shared between homepage + PDP) */
.putter-placeholder{width:55%;height:72%;position:relative;opacity:.6;transition:opacity .5s,transform .6s cubic-bezier(.16,1,.3,1)}
.putter-head{position:absolute;bottom:20%;left:50%;transform:translateX(-50%);width:72px;height:24px;background:linear-gradient(135deg,#7a7a8a,#b5b5c5 40%,#8a8a9a 60%,#a5a5b5);border-radius:4px 4px 2px 2px;box-shadow:0 3px 12px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.12)}
.putter-head::after{content:'';position:absolute;top:4px;left:6px;right:6px;height:1px;background:rgba(255,255,255,.06)}
.putter-shaft{position:absolute;bottom:calc(20% + 22px);left:50%;transform:translateX(-50%);width:3px;height:55%;background:linear-gradient(to bottom,#555,#888);border-radius:1px}
.putter-grip{position:absolute;top:5%;left:50%;transform:translateX(-50%);width:10px;height:20%;background:linear-gradient(135deg,#2a2a3a,#444458);border-radius:3px}


/* ================================================================
   HERO (index only)
   ================================================================ */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px var(--side-pad) 80px;overflow:hidden;background:var(--black)}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 55% at 50% 45%,rgba(26,58,143,.05) 0%,transparent 60%),radial-gradient(ellipse 50% 40% at 50% 50%,rgba(201,168,76,.025) 0%,transparent 50%);z-index:1}
.hero-pattern-canvas{position:absolute;inset:0;z-index:0;opacity:.07;pointer-events:none}
.hero-crown-watermark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:clamp(400px,55vw,700px);height:auto;opacity:.025;pointer-events:none;z-index:0;filter:brightness(1.5) saturate(0.2)}
.hero-content{position:relative;z-index:2;max-width:900px}

.hero-logo-img{width:clamp(56px,6vw,80px);height:auto;margin:0 auto 20px;filter:drop-shadow(0 0 20px rgba(201,168,76,.2));animation:fadeUp .8s cubic-bezier(.16,1,.3,1) .3s forwards;opacity:0}
.hero-line{width:60px;height:1px;background:linear-gradient(90deg,var(--blue-bright),var(--gold));margin:0 auto 32px;animation:lineExpand 1.2s cubic-bezier(.16,1,.3,1) .5s forwards;transform-origin:center;transform:scaleX(0)}
@keyframes lineExpand{to{transform:scaleX(1);width:120px}}
.hero-subtitle-top{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.35em;text-transform:uppercase;color:var(--gold);margin-bottom:24px;opacity:0;animation:fadeUp .8s cubic-bezier(.16,1,.3,1) .7s forwards}
.hero-title{font-family:var(--display);font-size:clamp(42px,7vw,88px);font-weight:400;line-height:1.05;letter-spacing:-.01em;color:var(--white);margin-bottom:28px;opacity:0;animation:fadeUp 1s cubic-bezier(.16,1,.3,1) .9s forwards}
.hero-title em{font-style:italic;color:var(--blue-bright)}
.hero-description{font-family:var(--body);font-size:clamp(15px,1.8vw,18px);font-weight:300;line-height:1.7;color:var(--silver);max-width:540px;margin:0 auto 48px;opacity:0;animation:fadeUp 1s cubic-bezier(.16,1,.3,1) 1.1s forwards}
.hero-ctas{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;opacity:0;animation:fadeUp 1s cubic-bezier(.16,1,.3,1) 1.3s forwards}

.scroll-indicator{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;animation:fadeUp .8s ease 1.8s forwards}
.scroll-indicator span{font-family:var(--mono);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--steel)}
.scroll-line{width:1px;height:40px;background:linear-gradient(to bottom,var(--gold),transparent);animation:scrollPulse 2s ease-in-out infinite}
@keyframes scrollPulse{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}


/* ================================================================
   MARQUEE
   ================================================================ */
.marquee-section{border-top:1px solid var(--gold-dim);border-bottom:1px solid var(--gold-dim);padding:20px 0;overflow:hidden;background:var(--charcoal)}
.marquee-track{display:flex;animation:marqueeScroll 35s linear infinite;width:max-content}
.marquee-track:hover{animation-play-state:paused}
@keyframes marqueeScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.marquee-item{display:flex;align-items:center;gap:16px;padding:0 40px;white-space:nowrap}
.marquee-item span{font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:.15em;text-transform:uppercase;color:var(--steel)}
.marquee-dot{width:4px;height:4px;background:var(--gold);border-radius:50%;flex-shrink:0}
.marquee-crown{width:16px;height:auto;opacity:.35;flex-shrink:0;filter:brightness(1.3)}


/* ================================================================
   FLAGSHIP PRODUCT (index)
   ================================================================ */
.flagship{padding:var(--section-pad) var(--side-pad);background:var(--charcoal);position:relative;overflow:hidden}
.flagship::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold-dim),transparent)}
.flagship-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:80px;max-width:1200px;margin:0 auto;align-items:center}
.flagship-visual{position:relative;aspect-ratio:4/5;background:var(--graphite);border:1px solid rgba(255,255,255,.04);overflow:hidden;display:flex;align-items:center;justify-content:center}
.flagship-visual::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 40% 40%,rgba(201,168,76,.04),transparent 60%);pointer-events:none}
.flagship-visual:hover .putter-placeholder{opacity:.85;transform:scale(1.03) rotate(-0.5deg)}
.flagship-badge{position:absolute;top:20px;left:20px;padding:5px 14px;font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;background:var(--blue);color:var(--white);z-index:2}
.flagship-content{max-width:500px}
.flagship-name{font-family:var(--display);font-size:clamp(36px,4vw,56px);font-weight:400;line-height:1.1;color:var(--white);margin-bottom:8px}
.flagship-sub{font-family:var(--mono);font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-bottom:24px}
.flagship-desc{font-size:16px;font-weight:300;line-height:1.8;color:var(--silver);margin-bottom:32px}
.flagship-price{font-family:var(--display);font-size:32px;font-weight:500;color:var(--blue-bright);margin-bottom:36px}
.flagship-ctas{display:flex;gap:14px;flex-wrap:wrap}
.flagship-specs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px;padding-top:32px;border-top:1px solid rgba(255,255,255,.06)}
.flagship-spec-value{font-family:var(--mono);font-size:16px;font-weight:500;color:var(--blue-bright);margin-bottom:4px}
.flagship-spec-label{font-family:var(--mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--steel)}


/* ================================================================
   ENGINEERING (index)
   ================================================================ */
.engineering{padding:var(--section-pad) var(--side-pad);background:var(--graphite);position:relative;overflow:hidden}
.engineering::before{content:'';position:absolute;bottom:-200px;left:-200px;width:600px;height:600px;background:radial-gradient(circle,rgba(26,58,143,.04),transparent 70%);pointer-events:none}
.engineering-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;max-width:1200px;margin:0 auto;align-items:center}
.engineering-visual{position:relative;aspect-ratio:3/2;background:var(--black);overflow:hidden;border:1px solid rgba(255,255,255,.04)}
.milling-canvas{position:absolute;inset:0}
.engineering-visual-label{position:absolute;bottom:16px;left:20px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);z-index:2}
.engineering-content{max-width:480px}
.engineering-content .section-label{text-align:left;margin-bottom:20px}
.engineering-title{font-family:var(--display);font-size:clamp(28px,3.5vw,42px);font-weight:400;line-height:1.2;color:var(--white);margin-bottom:24px}
.engineering-body{font-size:15px;font-weight:300;line-height:1.8;color:var(--silver);margin-bottom:40px}

.spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:44px}
.spec-item{padding:20px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02);position:relative;overflow:hidden}
.spec-item::before{content:'';position:absolute;top:0;left:0;width:2px;height:100%;background:var(--gold);opacity:.25}
.spec-value{font-family:var(--mono);font-size:22px;font-weight:500;color:var(--blue-bright);margin-bottom:6px}
.spec-label{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--steel)}


/* ================================================================
   STATEMENT (index)
   ================================================================ */
.statement{position:relative;padding:var(--section-pad) var(--side-pad);text-align:center;background:var(--charcoal);overflow:hidden}
.statement::before{content:'GALLIANO';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--display);font-size:clamp(100px,15vw,240px);font-weight:700;color:rgba(255,255,255,.015);white-space:nowrap;pointer-events:none;letter-spacing:.1em}
.statement::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold-dim),transparent)}
.statement-content{position:relative;z-index:1;max-width:700px;margin:0 auto}
.statement-crown{width:80px;height:auto;margin:0 auto 32px;opacity:.3;filter:drop-shadow(0 0 16px rgba(201,168,76,.12))}
.statement-quote{font-family:var(--display);font-size:clamp(24px,3.5vw,40px);font-weight:400;font-style:italic;line-height:1.4;color:var(--white);margin-bottom:32px}
.statement-quote span{color:var(--blue-bright)}
.statement-attr{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft)}


/* ================================================================
   PROCESS (index)
   ================================================================ */
.process{padding:var(--section-pad) var(--side-pad);background:var(--graphite);border-top:1px solid rgba(255,255,255,.04)}
.process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;max-width:1200px;margin:48px auto 0}
.process-step{padding:40px 32px;background:var(--charcoal);position:relative;transition:background .4s}
.process-step:hover{background:var(--slate)}
.process-step-number{font-family:var(--mono);font-size:11px;color:var(--gold);letter-spacing:.15em;margin-bottom:20px}
.process-step-title{font-family:var(--display);font-size:20px;font-weight:500;color:var(--white);margin-bottom:12px}
.process-step-desc{font-size:13px;font-weight:300;line-height:1.7;color:var(--steel)}
.process-step::after{content:'\2192';position:absolute;right:-12px;top:50%;transform:translateY(-50%);font-size:16px;color:var(--gold);z-index:2}
.process-step:last-child::after{display:none}


/* ================================================================
   PDP — BREADCRUMB
   ================================================================ */
.breadcrumb{padding:100px var(--side-pad) 0;max-width:1400px;margin:0 auto}
.breadcrumb-list{display:flex;align-items:center;gap:8px;list-style:none;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.breadcrumb-list a{color:var(--steel);transition:color .3s}
.breadcrumb-list a:hover{color:var(--gold)}
.breadcrumb-sep{color:var(--slate)}
.breadcrumb-current{color:var(--silver)}


/* ================================================================
   PDP — LAYOUT
   ================================================================ */
.pdp{padding:32px var(--side-pad) var(--section-pad);max-width:1400px;margin:0 auto}
.pdp-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(40px,5vw,80px);align-items:start}


/* ================================================================
   PDP — GALLERY
   ================================================================ */
.gallery{position:sticky;top:100px}
.gallery-main{position:relative;aspect-ratio:4/5;background:var(--charcoal);border:1px solid rgba(255,255,255,.04);overflow:hidden;cursor:crosshair;margin-bottom:12px}
.gallery-main::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 40% 40%,rgba(201,168,76,.03),transparent 60%);pointer-events:none}
.gallery-main-img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.gallery-main:hover .gallery-main-img{transform:scale(1.06)}

.gallery-putter{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.gallery-putter .putter-placeholder{width:50%;height:70%;position:relative;opacity:.7;transition:opacity .5s,transform .6s cubic-bezier(.16,1,.3,1)}
.gallery-main:hover .gallery-putter .putter-placeholder{opacity:.9;transform:scale(1.04) rotate(-0.5deg)}

.gallery-milling-canvas{position:absolute;inset:0;z-index:1;opacity:.06;pointer-events:none}
.gallery-badge{position:absolute;top:16px;left:16px;padding:5px 14px;font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;background:var(--green);color:var(--white);z-index:3}
.gallery-zoom-hint{position:absolute;bottom:16px;right:16px;font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);z-index:3;opacity:0;transition:opacity .3s}
.gallery-main:hover .gallery-zoom-hint{opacity:1}

.gallery-thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.gallery-thumb{aspect-ratio:1;background:var(--charcoal);border:1px solid rgba(255,255,255,.04);cursor:pointer;overflow:hidden;position:relative;transition:border-color .3s}
.gallery-thumb:hover{border-color:rgba(255,255,255,.12)}
.gallery-thumb.active{border-color:var(--gold)}
.gallery-thumb canvas{position:absolute;inset:0;width:100%;height:100%}
.gallery-thumb-label{position:absolute;bottom:4px;left:0;right:0;text-align:center;font-family:var(--mono);font-size:7px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);z-index:2}


/* ================================================================
   PDP — PRODUCT INFO
   ================================================================ */
.product-info{padding-top:8px}
.product-label{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.product-name{font-family:var(--display);font-size:clamp(36px,4.5vw,56px);font-weight:400;line-height:1.1;color:var(--white);margin-bottom:8px}
.product-tagline{font-family:var(--mono);font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--steel);margin-bottom:24px}

.product-rating{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.product-stars{display:flex;gap:2px}
.product-star{width:16px;height:16px;color:var(--gold)}
.product-star.empty{color:var(--slate)}
.product-rating-text{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--steel)}
.product-rating-text a{color:var(--silver);transition:color .3s}
.product-rating-text a:hover{color:var(--gold)}

.product-price-row{display:flex;align-items:baseline;gap:16px;margin-bottom:8px}
.product-price{font-family:var(--display);font-size:36px;font-weight:500;color:var(--white)}
.product-price-note{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}

.product-availability{display:flex;align-items:center;gap:8px;margin-bottom:32px}
.availability-dot{width:7px;height:7px;border-radius:50%;background:var(--green-soft);box-shadow:0 0 8px rgba(4,120,87,.4);animation:pulse-dot 2s ease-in-out infinite}
@keyframes pulse-dot{0%,100%{opacity:.7}50%{opacity:1}}
.availability-text{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--green-soft)}

.product-divider{width:100%;height:1px;background:rgba(255,255,255,.06);margin:28px 0}

/* Variant selectors */
.variant-group{margin-bottom:24px}
.variant-label{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--silver);margin-bottom:10px}
.variant-options{display:flex;gap:8px;flex-wrap:wrap}
.variant-btn{padding:10px 20px;font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:.08em;background:transparent;border:1px solid rgba(255,255,255,.1);color:var(--silver);cursor:pointer;transition:all .3s}
.variant-btn:hover{border-color:rgba(255,255,255,.25);color:var(--white)}
.variant-btn.selected{border-color:var(--gold);color:var(--white);background:var(--gold-dim)}
.variant-btn.disabled{opacity:.3;cursor:not-allowed;pointer-events:none}

/* PDP CTAs */
.product-ctas{display:flex;gap:12px;margin-bottom:12px}
.product-ctas .btn{flex:1;justify-content:center}
.product-ctas .btn-ghost{flex:0.6}
.product-buy-now{width:100%;padding:14px 36px;font-family:var(--body);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;background:transparent;border:1px solid rgba(255,255,255,.06);color:var(--steel);cursor:pointer;transition:all .3s;margin-bottom:28px}
.product-buy-now:hover{border-color:var(--blue);color:var(--blue-bright)}

/* Trust row */
.trust-row{display:flex;gap:24px;margin-bottom:32px;flex-wrap:wrap}
.trust-item{display:flex;align-items:center;gap:8px}
.trust-icon{width:16px;height:16px;color:var(--steel)}
.trust-text{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--steel)}


/* ================================================================
   PDP — SPECS ACCORDION
   ================================================================ */
.specs-section{margin-top:8px}
.spec-accordion{border-top:1px solid rgba(255,255,255,.06)}
.spec-accordion-item{border-bottom:1px solid rgba(255,255,255,.06)}
.spec-accordion-header{display:flex;justify-content:space-between;align-items:center;padding:18px 0;cursor:pointer;user-select:none}
.spec-accordion-title{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--silver);transition:color .3s}
.spec-accordion-header:hover .spec-accordion-title{color:var(--white)}
.spec-accordion-icon{width:16px;height:16px;color:var(--steel);transition:transform .3s,color .3s}
.spec-accordion-item.open .spec-accordion-icon{transform:rotate(45deg);color:var(--gold)}
.spec-accordion-body{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.16,1,.3,1)}
.spec-accordion-item.open .spec-accordion-body{max-height:600px}
.spec-accordion-content{padding:0 0 24px}

.spec-table{width:100%}
.spec-table-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.03)}
.spec-table-row:last-child{border-bottom:none}
.spec-table-label{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--steel)}
.spec-table-value{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--white);text-align:right}

.shipping-info{font-size:13px;font-weight:300;line-height:1.8;color:var(--steel)}
.shipping-info strong{color:var(--silver);font-weight:500}


/* ================================================================
   PDP — CRAFTSMANSHIP
   ================================================================ */
.craft-section{padding:var(--section-pad) var(--side-pad);background:var(--charcoal);position:relative;overflow:hidden}
.craft-section::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold-dim),transparent)}
.craft-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;max-width:1200px;margin:0 auto;align-items:center}
.craft-visual{position:relative;aspect-ratio:3/2;background:var(--black);overflow:hidden;border:1px solid rgba(255,255,255,.04)}
.craft-visual canvas{position:absolute;inset:0}
.craft-visual-label{position:absolute;bottom:16px;left:20px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);z-index:2}
.craft-content{max-width:480px}
.craft-label{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.craft-title{font-family:var(--display);font-size:clamp(28px,3.5vw,42px);font-weight:400;line-height:1.2;color:var(--white);margin-bottom:20px}
.craft-body{font-size:15px;font-weight:300;line-height:1.8;color:var(--silver);margin-bottom:32px}
.craft-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.craft-stat{padding:16px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02);position:relative}
.craft-stat::before{content:'';position:absolute;top:0;left:0;width:2px;height:100%;background:var(--gold);opacity:.25}
.craft-stat-value{font-family:var(--mono);font-size:18px;font-weight:500;color:var(--blue-bright);margin-bottom:4px}
.craft-stat-label{font-family:var(--mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--steel)}


/* ================================================================
   PDP — REVIEWS
   ================================================================ */
.reviews-section{padding:var(--section-pad) var(--side-pad);background:var(--graphite)}
.reviews-header{text-align:center;margin-bottom:56px}
.reviews-label{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.reviews-title{font-family:var(--display);font-size:clamp(28px,3.5vw,42px);font-weight:400;line-height:1.15;color:var(--white);margin-bottom:12px}
.reviews-summary{font-family:var(--mono);font-size:12px;color:var(--steel);display:flex;align-items:center;justify-content:center;gap:12px}
.reviews-summary .product-stars{display:inline-flex}
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;max-width:1200px;margin:0 auto}
.review-card{padding:36px;background:var(--charcoal);position:relative;transition:background .4s}
.review-card:hover{background:var(--slate)}
.review-card-stars{display:flex;gap:2px;margin-bottom:16px}
.review-card-star{width:12px;height:12px;color:var(--gold)}
.review-card-title{font-family:var(--display);font-size:18px;font-weight:500;color:var(--white);margin-bottom:10px}
.review-card-body{font-size:14px;font-weight:300;line-height:1.7;color:var(--steel);margin-bottom:20px}
.review-card-author{display:flex;align-items:center;gap:12px}
.review-card-avatar{width:32px;height:32px;border-radius:50%;background:var(--slate);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;font-weight:500;color:var(--steel)}
.review-card-meta{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--steel)}
.review-card-meta strong{color:var(--silver);display:block;font-weight:500;margin-bottom:2px}
.review-verified{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--green-soft)}


/* ================================================================
   PDP — RELATED PRODUCTS
   ================================================================ */
.related-section{padding:var(--section-pad) var(--side-pad);background:var(--charcoal);border-top:1px solid rgba(255,255,255,.04)}
.related-header{text-align:center;margin-bottom:48px}
.related-label{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.related-title{font-family:var(--display);font-size:clamp(24px,3vw,36px);font-weight:400;color:var(--white)}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1200px;margin:0 auto}
.related-card{background:var(--graphite);border:1px solid rgba(255,255,255,.04);overflow:hidden;transition:border-color .4s,transform .4s}
.related-card:hover{border-color:rgba(201,168,76,.15);transform:translateY(-4px)}
.related-card-img{aspect-ratio:4/5;background:var(--black);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.related-card-img canvas{position:absolute;inset:0;opacity:.08}
.related-card-badge{position:absolute;top:12px;left:12px;padding:4px 10px;font-family:var(--mono);font-size:8px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;background:var(--blue);color:var(--white);z-index:2}
.related-card-body{padding:20px}
.related-card-name{font-family:var(--display);font-size:18px;font-weight:500;color:var(--white);margin-bottom:4px}
.related-card-sub{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);margin-bottom:12px}
.related-card-price{font-family:var(--display);font-size:20px;font-weight:500;color:var(--blue-bright)}


/* ================================================================
   LIGHTBOX
   ================================================================ */
.lightbox{position:fixed;inset:0;z-index:2000;background:rgba(12,12,18,.95);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .4s}
.lightbox.active{opacity:1;pointer-events:auto}
.lightbox-close{position:absolute;top:28px;right:28px;width:32px;height:32px;cursor:pointer;color:var(--silver);transition:color .3s}
.lightbox-close:hover{color:var(--white)}
.lightbox-content{max-width:80vw;max-height:85vh;position:relative}
.lightbox-content canvas{width:100%;height:100%}


/* ================================================================
   FOOTER
   ================================================================ */
.footer{padding:80px var(--side-pad) 40px;background:var(--black);border-top:1px solid var(--gold-dim)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:60px;max-width:1200px;margin:0 auto;padding-bottom:60px;border-bottom:1px solid rgba(255,255,255,.04)}
.footer-brand-logo{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.footer-brand-logo .nav-logo{font-size:16px}
.footer-brand-crown{width:30px;height:auto;opacity:.5;filter:drop-shadow(0 0 8px rgba(201,168,76,.1))}
.footer-brand-desc{font-size:14px;font-weight:300;line-height:1.7;color:var(--steel);max-width:280px;margin-bottom:24px}
.footer-social{display:flex;gap:16px}
.footer-social a{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.08);color:var(--steel);font-size:14px;font-family:var(--mono);transition:all .3s}
.footer-social a:hover{border-color:var(--gold);color:var(--gold)}
.footer-col-title{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:12px}
.footer-col a{font-size:14px;font-weight:300;color:var(--steel);transition:color .3s}
.footer-col a:hover{color:var(--white)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;padding-top:32px}
.footer-copyright{font-size:12px;color:var(--steel)}
.footer-tagline{display:flex;align-items:center;gap:20px}
.footer-tagline-item{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
.footer-tagline-divider{width:3px;height:3px;background:var(--gold);border-radius:50%}


/* ================================================================
   CART OVERLAY + DRAWER
   ================================================================ */
.cart-overlay{position:fixed;inset:0;z-index:1500;background:rgba(12,12,18,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .4s}
.cart-overlay.active{opacity:1;pointer-events:auto}

.cart-drawer{position:fixed;top:0;right:0;bottom:0;z-index:1501;width:min(440px,92vw);background:var(--charcoal);border-left:1px solid rgba(201,168,76,.08);transform:translateX(100%);transition:transform .45s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column;box-shadow:-20px 0 60px rgba(0,0,0,.4)}
.cart-drawer.open{transform:translateX(0)}

/* Header */
.cart-drawer-header{display:flex;align-items:center;justify-content:space-between;padding:24px 28px 20px;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0}
.cart-drawer-title{font-family:var(--display);font-size:22px;font-weight:500;color:var(--white);display:flex;align-items:center;gap:10px}
.cart-drawer-count{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.08em;color:var(--gold);background:var(--gold-dim);padding:2px 8px}
.cart-drawer-close{width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--steel);transition:color .3s;background:none;border:none}
.cart-drawer-close:hover{color:var(--white)}

/* Scrollable items area */
.cart-drawer-body{flex:1;overflow-y:auto;padding:0}
.cart-drawer-body::-webkit-scrollbar{width:3px}
.cart-drawer-body::-webkit-scrollbar-thumb{background:var(--slate);border-radius:2px}

/* Empty state */
.cart-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 28px;text-align:center;gap:20px}
.cart-empty-icon{width:48px;height:48px;color:var(--slate)}
.cart-empty-title{font-family:var(--display);font-size:20px;font-weight:400;color:var(--silver)}
.cart-empty-text{font-size:13px;font-weight:300;color:var(--steel);line-height:1.6}
.cart-empty-cta{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);cursor:pointer;transition:color .3s;background:none;border:none;padding:0}
.cart-empty-cta:hover{color:var(--white)}

/* Cart items */
.cart-items-list{padding:8px 0}

.cart-item{display:flex;gap:16px;padding:20px 28px;border-bottom:1px solid rgba(255,255,255,.04);transition:opacity .3s,transform .3s,background .3s}
.cart-item:hover{background:rgba(255,255,255,.02)}

.cart-item-thumb{width:72px;height:90px;flex-shrink:0;background:var(--graphite);border:1px solid rgba(255,255,255,.04);position:relative;overflow:hidden}
.cart-item-canvas{position:absolute;inset:0;width:100%;height:100%}

.cart-item-details{flex:1;display:flex;flex-direction:column;justify-content:space-between;min-width:0}
.cart-item-header{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.cart-item-name{font-family:var(--display);font-size:15px;font-weight:500;color:var(--white);line-height:1.3}
.cart-item-variant{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--steel);margin-top:3px}
.cart-item-remove{background:none;border:none;color:var(--steel);cursor:pointer;padding:2px;transition:color .3s;flex-shrink:0}
.cart-item-remove:hover{color:var(--gold)}

.cart-item-footer{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.cart-item-price{font-family:var(--display);font-size:16px;font-weight:500;color:var(--white)}

/* Quantity stepper */
.cart-item-qty{display:flex;align-items:center;border:1px solid rgba(255,255,255,.08)}
.cart-qty-btn{width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--silver);cursor:pointer;font-family:var(--mono);font-size:14px;transition:color .3s,background .3s}
.cart-qty-btn:hover{color:var(--white);background:rgba(255,255,255,.05)}
.cart-qty-value{width:32px;text-align:center;font-family:var(--mono);font-size:12px;font-weight:500;color:var(--white);border-left:1px solid rgba(255,255,255,.08);border-right:1px solid rgba(255,255,255,.08)}

/* Footer */
.cart-drawer-footer{flex-shrink:0;border-top:1px solid rgba(255,255,255,.06);padding:20px 28px 28px}

/* Promo code */
.cart-promo{display:flex;gap:8px;margin-bottom:20px}
.cart-promo-toggle{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);cursor:pointer;background:none;border:none;padding:0;margin-bottom:8px;transition:color .3s}
.cart-promo-toggle:hover{color:var(--gold)}
.cart-promo-row{display:none;gap:8px;margin-bottom:16px}
.cart-promo-row.visible{display:flex}
.cart-promo-input{flex:1;padding:10px 14px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;background:var(--graphite);border:1px solid rgba(255,255,255,.08);color:var(--white);outline:none;transition:border-color .3s}
.cart-promo-input:focus{border-color:var(--gold)}
.cart-promo-input::placeholder{color:var(--steel)}
.cart-promo-apply{padding:10px 16px;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;background:transparent;border:1px solid rgba(255,255,255,.12);color:var(--silver);cursor:pointer;transition:all .3s;white-space:nowrap}
.cart-promo-apply:hover{border-color:var(--gold);color:var(--gold)}

/* Subtotal + checkout */
.cart-subtotal-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px}
.cart-subtotal-label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
.cart-subtotal-value{font-family:var(--display);font-size:24px;font-weight:500;color:var(--white)}

.cart-shipping-note{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);text-align:center;margin-bottom:16px}

.cart-checkout-btn{width:100%;padding:16px 36px;font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;background:var(--gold);color:var(--black);border:none;cursor:pointer;transition:all .4s cubic-bezier(.16,1,.3,1);margin-bottom:12px}
.cart-checkout-btn:hover{background:var(--gold-soft);transform:translateY(-1px);box-shadow:0 6px 24px var(--gold-glow)}
.cart-checkout-btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}

.cart-continue{display:block;text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);cursor:pointer;background:none;border:none;padding:4px;transition:color .3s;width:100%}
.cart-continue:hover{color:var(--gold)}

/* Trust row in cart */
.cart-trust{display:flex;justify-content:center;gap:20px;margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.04)}
.cart-trust-item{font-family:var(--mono);font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);display:flex;align-items:center;gap:5px}
.cart-trust-item svg{width:12px;height:12px}


/* ================================================================
   THE CRAFT — Brand Story Page
   ================================================================ */
.craft-hero{position:relative;min-height:70vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:160px var(--side-pad) 100px;background:var(--black);overflow:hidden}
.craft-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 50%,rgba(201,168,76,.03) 0%,transparent 60%);pointer-events:none}
.craft-hero-canvas{position:absolute;inset:0;z-index:0;opacity:.05;pointer-events:none}
.craft-hero-content{position:relative;z-index:1;max-width:700px}
.craft-hero-logo{width:60px;height:auto;margin:0 auto 24px;opacity:.5;filter:drop-shadow(0 0 16px rgba(201,168,76,.15))}
.craft-hero-label{font-family:var(--mono);font-size:11px;letter-spacing:.35em;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
.craft-hero-title{font-family:var(--display);font-size:clamp(36px,6vw,72px);font-weight:400;line-height:1.1;color:var(--white);margin-bottom:24px}
.craft-hero-title em{font-style:italic;color:var(--blue-bright)}
.craft-hero-desc{font-size:clamp(15px,1.8vw,18px);font-weight:300;line-height:1.7;color:var(--silver);max-width:520px;margin:0 auto}

/* Chapter sections */
.craft-chapter{padding:var(--section-pad) var(--side-pad);position:relative;overflow:hidden}
.craft-chapter:nth-child(odd){background:var(--charcoal)}
.craft-chapter:nth-child(even){background:var(--graphite)}
.craft-chapter::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold-dim),transparent)}

.craft-chapter-inner{max-width:1200px;margin:0 auto}

/* Two-column chapter layout */
.craft-chapter-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.craft-chapter-grid.reversed{direction:rtl}
.craft-chapter-grid.reversed>*{direction:ltr}

/* Chapter number + heading */
.craft-chapter-number{font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;display:flex;align-items:center;gap:12px}
.craft-chapter-number::after{content:'';flex:1;height:1px;background:var(--gold-dim);max-width:60px}
.craft-chapter-title{font-family:var(--display);font-size:clamp(28px,3.5vw,44px);font-weight:400;line-height:1.2;color:var(--white);margin-bottom:20px}
.craft-chapter-body{font-size:15px;font-weight:300;line-height:1.85;color:var(--silver);margin-bottom:32px}

/* Chapter visual — milling canvas or photo placeholder */
.craft-chapter-visual{position:relative;aspect-ratio:4/3;background:var(--black);border:1px solid rgba(255,255,255,.04);overflow:hidden}
.craft-chapter-visual canvas{position:absolute;inset:0}
.craft-chapter-visual-label{position:absolute;bottom:14px;left:18px;font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--steel);z-index:2}

/* Chapter stats row */
.craft-chapter-stats{display:flex;gap:32px;flex-wrap:wrap}
.craft-chapter-stat-value{font-family:var(--mono);font-size:20px;font-weight:500;color:var(--blue-bright);margin-bottom:4px}
.craft-chapter-stat-label{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}

/* Full-bleed divider with canvas between chapters */
.craft-divider{position:relative;height:clamp(120px,18vh,220px);background:var(--black);overflow:hidden}
.craft-divider canvas{position:absolute;inset:0;opacity:.1}
.craft-divider-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--display);font-size:clamp(60px,10vw,160px);font-weight:700;color:rgba(255,255,255,.015);white-space:nowrap;pointer-events:none;letter-spacing:.08em}

/* Quote break between chapters */
.craft-quote{padding:clamp(60px,10vh,120px) var(--side-pad);background:var(--charcoal);text-align:center;position:relative;overflow:hidden}
.craft-quote::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold-dim),transparent)}
.craft-quote-mark{font-family:var(--display);font-size:64px;line-height:1;color:var(--gold);opacity:.3;margin-bottom:8px}
.craft-quote-text{font-family:var(--display);font-size:clamp(20px,3vw,32px);font-weight:400;font-style:italic;line-height:1.5;color:var(--white);max-width:640px;margin:0 auto 20px}
.craft-quote-text span{color:var(--blue-bright)}
.craft-quote-attr{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft)}

/* Final CTA section */
.craft-cta{padding:var(--section-pad) var(--side-pad);background:var(--black);text-align:center;position:relative;overflow:hidden}
.craft-cta::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 50% 40% at 50% 50%,rgba(26,58,143,.04) 0%,transparent 60%);pointer-events:none}
.craft-cta-content{position:relative;z-index:1;max-width:600px;margin:0 auto}
.craft-cta-crown{width:48px;height:auto;margin:0 auto 24px;opacity:.35;filter:drop-shadow(0 0 12px rgba(201,168,76,.1))}
.craft-cta-title{font-family:var(--display);font-size:clamp(28px,4vw,48px);font-weight:400;line-height:1.2;color:var(--white);margin-bottom:16px}
.craft-cta-desc{font-size:16px;font-weight:300;line-height:1.7;color:var(--silver);margin-bottom:36px}


/* ================================================================
   ABOUT PAGE — Origin Story
   ================================================================ */
.about-hero{position:relative;min-height:80vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:160px var(--side-pad) 100px;background:var(--black);overflow:hidden}
.about-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 65% 50% at 50% 45%,rgba(201,168,76,.03) 0%,transparent 60%),radial-gradient(ellipse 40% 35% at 50% 55%,rgba(26,58,143,.04) 0%,transparent 50%);pointer-events:none}
.about-hero-canvas{position:absolute;inset:0;z-index:0;opacity:.06;pointer-events:none}
.about-hero-content{position:relative;z-index:1;max-width:750px}
.about-hero-logo{width:60px;height:auto;margin:0 auto 24px;opacity:.5;filter:drop-shadow(0 0 16px rgba(201,168,76,.15))}
.about-hero-label{font-family:var(--mono);font-size:11px;letter-spacing:.35em;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
.about-hero-title{font-family:var(--display);font-size:clamp(36px,6vw,72px);font-weight:400;line-height:1.1;color:var(--white);margin-bottom:24px}
.about-hero-title em{font-style:italic;color:var(--blue-bright)}
.about-hero-desc{font-size:clamp(15px,1.8vw,18px);font-weight:300;line-height:1.7;color:var(--silver);max-width:540px;margin:0 auto}

/* Origin section — founder intro */
.about-origin{padding:var(--section-pad) var(--side-pad);background:var(--charcoal);position:relative;overflow:hidden}
.about-origin::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold-dim),transparent)}
.about-origin-inner{max-width:1200px;margin:0 auto}
.about-origin-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:80px;align-items:center}
.about-origin-portrait{position:relative;aspect-ratio:3/4;background:var(--black);border:1px solid rgba(255,255,255,.04);overflow:hidden}
.about-origin-portrait canvas{position:absolute;inset:0}
.about-origin-portrait-label{position:absolute;bottom:16px;left:20px;font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--steel);z-index:2}
.about-origin-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;display:flex;align-items:center;gap:12px}
.about-origin-eyebrow::after{content:'';flex:1;height:1px;background:var(--gold-dim);max-width:60px}
.about-origin-name{font-family:var(--display);font-size:clamp(32px,4vw,52px);font-weight:400;line-height:1.1;color:var(--white);margin-bottom:8px}
.about-origin-role{font-family:var(--mono);font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--steel);margin-bottom:24px}
.about-origin-divider{width:60px;height:1px;background:linear-gradient(90deg,var(--gold),transparent);margin-bottom:28px}
.about-origin-body{font-size:15px;font-weight:300;line-height:1.85;color:var(--silver);margin-bottom:24px}

/* Quote break — reuse craft-quote styles with about- prefix aliases */
.about-quote{padding:clamp(60px,10vh,120px) var(--side-pad);background:var(--charcoal);text-align:center;position:relative;overflow:hidden}
.about-quote::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold-dim),transparent)}
.about-quote-mark{font-family:var(--display);font-size:64px;line-height:1;color:var(--gold);opacity:.3;margin-bottom:8px}
.about-quote-text{font-family:var(--display);font-size:clamp(20px,3vw,32px);font-weight:400;font-style:italic;line-height:1.5;color:var(--white);max-width:680px;margin:0 auto 20px}
.about-quote-text span{color:var(--blue-bright)}
.about-quote-attr{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft)}

/* Chapter sections — reuse craft-chapter layout */
.about-chapter{padding:var(--section-pad) var(--side-pad);position:relative;overflow:hidden}
.about-chapter:nth-of-type(odd){background:var(--graphite)}
.about-chapter:nth-of-type(even){background:var(--charcoal)}
.about-chapter::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold-dim),transparent)}
.about-chapter-inner{max-width:1200px;margin:0 auto}
.about-chapter-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.about-chapter-grid.reversed{direction:rtl}
.about-chapter-grid.reversed>*{direction:ltr}
.about-chapter-number{font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;display:flex;align-items:center;gap:12px}
.about-chapter-number::after{content:'';flex:1;height:1px;background:var(--gold-dim);max-width:60px}
.about-chapter-title{font-family:var(--display);font-size:clamp(28px,3.5vw,44px);font-weight:400;line-height:1.2;color:var(--white);margin-bottom:20px}
.about-chapter-body{font-size:15px;font-weight:300;line-height:1.85;color:var(--silver);margin-bottom:24px}
.about-chapter-visual{position:relative;aspect-ratio:4/3;background:var(--black);border:1px solid rgba(255,255,255,.04);overflow:hidden}
.about-chapter-visual canvas{position:absolute;inset:0}
.about-chapter-visual-label{position:absolute;bottom:14px;left:18px;font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--steel);z-index:2}

/* Philosophy grid — design considerations */
.about-philosophy-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
.about-philosophy-item{padding:20px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02);position:relative;overflow:hidden}
.about-philosophy-item::before{content:'';position:absolute;top:0;left:0;width:2px;height:100%;background:var(--gold);opacity:.25}
.about-philosophy-value{font-family:var(--mono);font-size:14px;font-weight:500;color:var(--blue-bright);margin-bottom:6px;letter-spacing:.05em}
.about-philosophy-desc{font-size:12px;font-weight:300;line-height:1.6;color:var(--steel)}

/* Stats row */
.about-stats-row{display:flex;gap:32px;flex-wrap:wrap;margin-top:8px}
.about-stat-value{font-family:var(--mono);font-size:20px;font-weight:500;color:var(--blue-bright);margin-bottom:4px}
.about-stat-label{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}


/* ================================================================
   RESPONSIVE
   ================================================================ */
@media(max-width:1024px){
  .flagship-grid{grid-template-columns:1fr;gap:48px}
  .engineering-grid{grid-template-columns:1fr;gap:48px}
  .process-steps{grid-template-columns:repeat(2,1fr)}
  .process-step:nth-child(2)::after{display:none}
  .pdp-grid{grid-template-columns:1fr;gap:40px}
  .gallery{position:static}
  .craft-grid{grid-template-columns:1fr;gap:48px}
  .craft-chapter-grid{grid-template-columns:1fr;gap:48px}
  .craft-chapter-grid.reversed{direction:ltr}
  .reviews-grid{grid-template-columns:1fr 1fr}
  .related-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:40px}
  .about-origin-grid{grid-template-columns:1fr;gap:48px}
  .about-chapter-grid{grid-template-columns:1fr;gap:48px}
  .about-chapter-grid.reversed{direction:ltr}
  .about-philosophy-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:768px){
  .nav-links{display:none}
  .nav-toggle{display:flex}
  .process-steps{grid-template-columns:1fr}
  .process-step::after{display:none}
  .hero-ctas{flex-direction:column;align-items:center}
  .btn{width:100%;max-width:300px;justify-content:center}
  .spec-grid{grid-template-columns:1fr}
  .flagship-ctas{flex-direction:column}
  .flagship-ctas .btn{width:100%}
  .flagship-specs{grid-template-columns:repeat(3,1fr)}
  .gallery-thumbs{grid-template-columns:repeat(4,1fr)}
  .product-ctas{flex-direction:column}
  .product-ctas .btn{flex:auto}
  .reviews-grid{grid-template-columns:1fr}
  .related-grid{grid-template-columns:1fr}
  .craft-stats{grid-template-columns:1fr}
  .trust-row{flex-direction:column;gap:12px}
  .about-philosophy-grid{grid-template-columns:1fr}
  .about-stats-row{gap:20px}
  .footer-grid{grid-template-columns:1fr;gap:32px}
  .footer-bottom{flex-direction:column;gap:16px;text-align:center}
  .footer-tagline{flex-wrap:wrap;justify-content:center;gap:12px}
  .hero-logo-img{width:48px}
}
