/*
Theme Name: COMBCK
Theme URI: https://combck.com
Author: COMBCK
Description: One-page landing theme and WooCommerce store for COMBCK Kashmiri willow tennis-ball cricket bats. Hero with rotating cricket calls, brand story, scale bat anatomy, interactive ping test and WhatsApp ordering. Edit price, WhatsApp number, Instagram, shipping text, video link and accent colour in Appearance → Customize → COMBCK Settings.
Version: 1.3.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: combck
WC requires at least: 8.0
WC tested up to: 11.2.2
*/
:root{
  --bg:#0A0A09; --panel:#121210; --ink:#F3EEE4; --ink-2:#D6D0C4; --muted:#A39E94;
  --line:rgba(243,238,228,.14); --accent:#E0A85E; --cream:#F3EEE4;
  --pad:clamp(20px,4vw,56px);
  --sans:'Archivo',system-ui,-apple-system,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
main{overflow-x:clip}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase}
.muted{color:var(--muted)}
.accent{color:var(--accent)}
.serif-i{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.01em}
.wrap{padding-left:var(--pad);padding-right:var(--pad)}

/* NAV */
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px 32px;padding:18px var(--pad);background:rgba(10,10,9,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;min-height:44px}
.logo img{height:22px;width:auto}
.nav-links{display:flex;gap:28px}
.nav-links a{padding:12px 0;transition:color .2s}
.nav-links a:hover{color:var(--accent)}
.pill{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 20px;border:1px solid var(--accent);border-radius:999px;color:var(--accent);transition:background .2s,color .2s}
.pill:hover{background:var(--accent);color:var(--bg)}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* HERO */
.hero{padding-top:clamp(28px,4vw,56px);padding-bottom:clamp(48px,6vw,96px)}
.combck-landing .meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px}
.motto{margin:clamp(20px,3vw,40px) 0 0;font-weight:900;font-size:clamp(38px,6.9vw,124px);line-height:.92;letter-spacing:-.035em;text-transform:uppercase}
.motto .ln{display:block;overflow:hidden;padding-bottom:.04em}
.motto .ln > span{display:inline-block;opacity:0;transform:translateY(60%);animation:rise .75s cubic-bezier(.2,.8,.2,1) forwards}
.motto .ol > span{color:transparent;-webkit-text-stroke:1.5px rgba(243,238,228,.55)}
.motto .gd > span{color:var(--accent)}
.motto .ln:nth-child(1) > span:nth-child(1){animation-delay:.10s}.motto .ln:nth-child(1) > span:nth-child(2){animation-delay:.18s}.motto .ln:nth-child(1) > span:nth-child(3){animation-delay:.26s}.motto .ln:nth-child(1) > span:nth-child(4){animation-delay:.34s}
.motto .ln:nth-child(2) > span:nth-child(1){animation-delay:.85s}.motto .ln:nth-child(2) > span:nth-child(2){animation-delay:.93s}.motto .ln:nth-child(2) > span:nth-child(3){animation-delay:1.01s}
.motto .ln:nth-child(3) > span:nth-child(1){animation-delay:1.55s}.motto .ln:nth-child(3) > span:nth-child(2){animation-delay:1.65s}.motto .ln:nth-child(3) > span:nth-child(3){animation-delay:1.75s}
@keyframes rise{to{opacity:1;transform:none}}
.mega{margin:clamp(20px,3vw,40px) 0 0;font-weight:900;font-size:clamp(46px,14.6vw,232px);line-height:.84;letter-spacing:-.035em;text-transform:uppercase;white-space:nowrap;display:flex}
.mega span{display:inline-block;opacity:0;transform:translateY(40%);animation:rise .8s cubic-bezier(.2,.8,.2,1) forwards}
.mega span:nth-child(1){animation-delay:.1s}.mega span:nth-child(2){animation-delay:.2s}.mega span:nth-child(3){animation-delay:.3s}.mega span:nth-child(4){animation-delay:.4s}.mega span:nth-child(5){animation-delay:.5s}.mega span:nth-child(6){animation-delay:.6s}.mega span:nth-child(7){animation-delay:.7s}.mega span:nth-child(8){animation-delay:.8s}
.mega .ghost{-webkit-text-stroke:1.5px rgba(243,238,228,0);animation:rise .8s cubic-bezier(.2,.8,.2,1) forwards,drop .7s ease 1.55s forwards}
.mega .ghost:nth-child(4){animation-delay:.4s,1.55s}.mega .ghost:nth-child(6){animation-delay:.6s,1.7s}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes drop{to{color:transparent;-webkit-text-stroke-color:rgba(243,238,228,.35)}}
.mega:hover .ghost{-webkit-text-stroke-color:var(--accent) !important}
.tagline{margin:clamp(18px,2.4vw,34px) 0 0;line-height:0}
.tagline img{width:min(100%,clamp(260px,62vw,980px));height:auto;opacity:0;clip-path:inset(0 100% 0 0);animation:tag 1.1s cubic-bezier(.7,0,.2,1) 2.35s forwards}
@keyframes tag{0%{opacity:1;clip-path:inset(0 100% 0 0)}100%{opacity:1;clip-path:inset(0 0 0 0)}}
.lede{margin:clamp(22px,2.6vw,36px) 0 0;font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.4vw,34px);line-height:1.2;color:var(--muted)}
.lede b{font-weight:400;color:var(--ink)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,.75fr);gap:clamp(28px,4vw,56px);margin-top:clamp(40px,5vw,72px);align-items:stretch}
.hero-copy{display:flex;flex-direction:column;gap:32px}
.combck-landing .board{border:1px solid var(--line);border-radius:4px;padding:22px 24px;background:var(--panel)}
.combck-landing .board-top{display:flex;justify-content:space-between;font-size:11px}
.combck-landing .board-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}
.combck-landing .board-nums div{display:flex;flex-direction:column;gap:6px}
.combck-landing .board-nums small{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--muted)}
.combck-landing .board-nums strong{font-family:var(--mono);font-weight:500;font-size:clamp(26px,2.4vw,34px);letter-spacing:-.02em}
.balls{display:flex;gap:8px;margin-top:20px}
.balls span{flex:1;height:6px;border-radius:3px;background:rgba(243,238,228,.18)}
.balls span:first-child{background:var(--accent)}
.combck-landing .body{margin:0;font-size:clamp(17px,1.5vw,21px);line-height:1.55;color:var(--ink-2);max-width:470px}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 26px;border-radius:999px;font-weight:700;font-size:15px;transition:transform .2s,background .2s}
.btn:hover{transform:translateY(-2px)}
.btn-solid{background:var(--accent);color:var(--bg)}
.btn-line{border:1px solid rgba(243,238,228,.3)}
.btn-line:hover{border-color:var(--ink)}
.combck-landing .photo{position:relative;margin:0;border-radius:4px;overflow:hidden;min-height:560px;background:var(--panel)}
.combck-landing .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 28%;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.combck-landing .photo:hover img{transform:scale(1.04)}
.combck-landing .photo figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;gap:12px;padding:14px 16px;background:rgba(10,10,9,.78);font-size:11px}
.combck-landing .stats{margin:0;display:flex;flex-direction:column}
.combck-landing .stats div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:20px 0;border-top:1px solid var(--line)}
.combck-landing .stats div:last-child{border-bottom:1px solid var(--line)}
.combck-landing .stats dt{font-size:11px}
.combck-landing .stats dd{margin:0;font-weight:900;font-stretch:112%;font-size:clamp(40px,3.6vw,52px);letter-spacing:-.03em;line-height:1}
.combck-landing .stats dd small{font-size:.42em;color:var(--muted);margin-left:2px}

/* MARQUEE */
.marquee{background:var(--accent);color:var(--bg);overflow:hidden;padding:18px 0}
.track{display:flex;width:max-content;animation:mq 30s linear infinite;font-weight:900;font-stretch:125%;font-size:clamp(22px,2.6vw,38px);text-transform:uppercase;letter-spacing:-.01em;white-space:nowrap}
.track span{padding-right:48px}
@keyframes mq{to{transform:translateX(-50%)}}

/* SECTIONS */
.section{padding-top:clamp(64px,9vw,140px);padding-bottom:clamp(64px,9vw,140px)}
.kicker{margin:0 0 20px}
.h2{margin:0;font-weight:900;font-stretch:110%;font-size:clamp(40px,6vw,92px);line-height:.92;letter-spacing:-.035em;text-transform:uppercase}
.head-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px 48px}
.head-row > div{flex:1 1 520px;min-width:0}
.head-row > p{flex:0 1 400px;margin:0;font-size:18px;line-height:1.55;color:var(--ink-2)}

/* DIAGRAM — horizontal (desktop) */
.diagram{margin-top:clamp(48px,6vw,88px)}
.dh{display:flex;flex-direction:column;gap:18px}
.ruler{display:flex;justify-content:space-between;align-items:flex-end;height:34px;border-bottom:1px solid rgba(243,238,228,.3)}
.ruler i{position:relative;width:1px;height:7px;background:rgba(243,238,228,.3)}
.ruler i.M{height:14px;background:rgba(243,238,228,.7)}
.ruler i b{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);font:400 11px var(--mono);color:var(--muted);font-style:normal}
.dim{display:flex;align-items:center;gap:8px;font:400 11px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.dim::before,.dim::after{content:"";flex:1;height:1px;background:currentColor}
.dim{border-left:1px solid currentColor;border-right:1px solid currentColor;height:14px}
.bat-h{display:flex;align-items:center}
.blade-h{flex:0 0 68.571%;aspect-ratio:6/1;position:relative;border-radius:10px 3px 3px 10px;overflow:hidden;background-color:#E3BD83;background-image:repeating-linear-gradient(90deg,transparent 0 14px,rgba(120,72,24,.16) 15px,transparent 17px);box-shadow:inset 0 -10px 18px rgba(80,44,10,.25),inset 0 8px 14px rgba(255,240,210,.35)}
.blade-h img{position:absolute;right:0;top:0;height:100%;width:35.42%;object-fit:cover}
.wide{position:absolute;left:5%;top:9%;bottom:9%;display:flex;align-items:center;gap:8px;color:#3A2410;font:500 11px var(--mono);letter-spacing:.1em}
.wide::before{content:"";width:1px;height:100%;background:#3A2410}
.handle-h{flex:0 0 31.429%;aspect-ratio:11/1.35;border-radius:3px 999px 999px 3px;background-color:#161614;background-image:repeating-linear-gradient(115deg,#24241F 0 6px,#0E0E0C 7px 9px)}
.row{display:flex}

/* DIAGRAM — vertical (mobile) */
.dv{display:none;position:relative;height:620px;margin:0 auto;max-width:360px}
.dv .bat{position:absolute;left:28%;top:0;bottom:0;width:72px;display:flex;flex-direction:column;align-items:center}
.dv .handle{width:24px;height:calc(11/35*100%);border-radius:999px 999px 3px 3px;background-color:#161614;background-image:repeating-linear-gradient(25deg,#2A2A25 0 5px,#0E0E0C 6px 8px)}
.dv .blade{position:relative;width:100%;height:calc(24/35*100%);border-radius:3px 3px 10px 10px;overflow:hidden;background-color:#E3BD83;background-image:repeating-linear-gradient(0deg,transparent 0 12px,rgba(120,72,24,.16) 13px,transparent 15px);box-shadow:inset -8px 0 14px rgba(80,44,10,.25),inset 8px 0 12px rgba(255,240,210,.3)}
.dv .blade img{position:absolute;top:0;left:0;width:100%;height:calc(8.5/24*100%);object-fit:cover}
.vdim{position:absolute;display:flex;flex-direction:column;align-items:flex-start;font:400 11px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.vdim .ln{position:absolute;left:0;top:0;bottom:0;width:10px;border-top:1px solid currentColor;border-bottom:1px solid currentColor}
.vdim .ln::after{content:"";position:absolute;left:4px;top:0;bottom:0;width:1px;background:currentColor}
.vdim span{position:absolute;left:18px;top:50%;transform:translateY(-50%);white-space:nowrap}
.vdim.total{left:0;top:0;bottom:0;color:var(--accent)}
.vdim.total .ln{left:auto;right:0}
.vdim.total span{left:auto;right:18px;writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg)}
.v-handle{left:calc(28% + 88px);top:0;height:calc(11/35*100%);color:var(--ink-2)}
.v-sticker{left:calc(28% + 88px);top:calc(11/35*100%);height:calc(8.5/35*100%);color:var(--accent)}
.v-blade{left:calc(28% + 170px);top:calc(11/35*100%);height:calc(24/35*100%);color:var(--ink-2)}
.v-blade span{writing-mode:vertical-rl;left:16px}
.v-width{left:28%;width:72px;bottom:-34px;height:14px;border-left:1px solid var(--ink-2);border-right:1px solid var(--ink-2);color:var(--ink-2);display:flex;align-items:center;justify-content:center}
.v-width::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor}
.v-width em{position:relative;background:var(--bg);padding:0 4px;font-style:normal}

/* SPEC SHEET */
.combck-landing .specs{margin:clamp(56px,7vw,104px) 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:32px}
.combck-landing .specs div{padding:24px 0 28px;border-top:1px solid var(--line)}
.combck-landing .specs dt{font-size:11px}
.combck-landing .specs dd{margin:10px 0 0;font-weight:800;font-size:clamp(22px,2.1vw,30px);letter-spacing:-.02em}
.size-note{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.size-note div{background:var(--bg);padding:28px}
.size-note h3{margin:12px 0 8px;font-size:20px;font-weight:800}
.size-note p{margin:0;font-size:15px;line-height:1.55;color:var(--muted)}

/* WILLOW */
.willow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);padding-top:clamp(64px,9vw,140px);border-top:1px solid var(--line)}
.grain{margin:0;display:flex;gap:12px;min-height:600px}
.grain div{flex:1;border-radius:4px;overflow:hidden;position:relative;background:var(--panel)}
.grain img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.grain figcaption{writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px}
.willow-copy{display:flex;flex-direction:column;justify-content:space-between;gap:48px}
.h2b{font-size:clamp(38px,5vw,76px)}
.combck-landing .list{list-style:none;margin:0;padding:0}
.combck-landing .list li{display:flex;gap:24px;padding:22px 0;border-top:1px solid var(--line)}
.combck-landing .list li:last-child{border-bottom:1px solid var(--line)}
.combck-landing .list h3{margin:0;font-size:22px;font-weight:800;letter-spacing:-.01em}
.combck-landing .list p{margin:6px 0 0;font-size:16px;line-height:1.5;color:var(--muted)}
.combck-landing .list .mono{padding-top:6px;color:var(--accent)}


/* PING TEST */
.ping{border-top:1px solid var(--line)}
.ping-wrap{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);margin-top:clamp(40px,5vw,72px)}
.stage{position:relative;height:440px;border:1px solid var(--line);border-radius:4px;background-color:var(--panel);background-image:linear-gradient(rgba(243,238,228,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(243,238,228,.04) 1px,transparent 1px);background-size:40px 40px;overflow:hidden}
.ping-hint{position:absolute;left:24px;top:22px;font-size:11px;color:var(--muted)}
.ping-hint b{color:var(--accent);font-weight:500}
.ball{position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F4FF9A,#C9E83A 55%,#8FAF16);box-shadow:0 6px 14px rgba(0,0,0,.45);opacity:0;pointer-events:none;z-index:3}
.ball::after{content:"";position:absolute;inset:3px;border-radius:50%;border:2px solid rgba(255,255,255,.75);border-left-color:transparent;border-bottom-color:transparent;transform:rotate(20deg)}
.pbat{position:absolute;left:24px;right:24px;bottom:84px;display:flex;align-items:center}
.pblade{flex:0 0 68.571%;aspect-ratio:6/1;position:relative;display:block;padding:0;border:0;cursor:crosshair;border-radius:10px 3px 3px 10px;overflow:hidden;background-color:#E3BD83;background-image:repeating-linear-gradient(90deg,transparent 0 14px,rgba(120,72,24,.16) 15px,transparent 17px);box-shadow:inset 0 -10px 18px rgba(80,44,10,.25),inset 0 8px 14px rgba(255,240,210,.35);transition:transform .08s}
.pblade.hit{transform:translateY(3px)}
.pblade img{position:absolute;right:0;top:0;height:100%;width:35.42%;object-fit:cover;pointer-events:none}
.sweet{position:absolute;left:25%;width:25%;top:0;bottom:0;background:rgba(224,168,94,.28);border-left:1px dashed rgba(58,36,16,.6);border-right:1px dashed rgba(58,36,16,.6);pointer-events:none}
.sweet em{position:absolute;left:50%;top:8px;transform:translateX(-50%);font-style:normal;font-size:10px;color:#3A2410;white-space:nowrap}
.pcur{position:absolute;top:0;bottom:0;width:1px;background:#0A0A09;opacity:0;pointer-events:none;transition:opacity .15s}
.pblade:hover .pcur{opacity:1}
.pcur b{position:absolute;bottom:6px;left:6px;font-weight:500;font-size:10px;color:#0A0A09;white-space:nowrap}
.phandle{flex:0 0 31.429%;aspect-ratio:11/1.35;border-radius:3px 999px 999px 3px;background-color:#161614;background-image:repeating-linear-gradient(115deg,#24241F 0 6px,#0E0E0C 7px 9px)}
.ripple{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:2px solid #0A0A09;pointer-events:none;animation:rip .6s ease-out forwards}
@keyframes rip{from{transform:scale(.4);opacity:.9}to{transform:scale(5);opacity:0}}
.pscale{position:absolute;left:24px;right:24px;bottom:34px;display:flex;font-size:11px;color:var(--muted)}
.pscale span:nth-child(1){flex:0 0 25%}.pscale span:nth-child(2){flex:0 0 25%;color:var(--accent)}.pscale span:nth-child(3){flex:1}
.readout{border:1px solid var(--line);border-radius:4px;padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column;gap:22px;background:var(--panel)}
.rd-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.rd-row span:first-child{font-size:11px}
.rd-row strong{font-family:var(--mono);font-weight:500;font-size:18px}
.verdict{margin:0;font-weight:900;font-stretch:115%;font-size:clamp(52px,6vw,88px);line-height:.9;letter-spacing:-.04em;text-transform:uppercase;min-height:.9em}
.pbars{display:flex;gap:5px;height:34px;align-items:flex-end}
.pbars i{flex:1;background:rgba(243,238,228,.12);border-radius:2px;transition:background .25s}
.pbars i:nth-child(1){height:20%}.pbars i:nth-child(2){height:28%}.pbars i:nth-child(3){height:36%}.pbars i:nth-child(4){height:44%}.pbars i:nth-child(5){height:52%}.pbars i:nth-child(6){height:60%}.pbars i:nth-child(7){height:68%}.pbars i:nth-child(8){height:76%}.pbars i:nth-child(9){height:88%}.pbars i:nth-child(10){height:100%}
.pbars i.on{background:var(--accent)}
.rd-btns{display:flex;flex-wrap:wrap;gap:10px}
.rd-btns button{font:inherit;cursor:pointer}

/* HERO headline — rotating cricket calls */
.rot{margin:clamp(20px,3vw,40px) 0 0;font-weight:900;font-size:clamp(34px,9.4vw,150px);line-height:.9;letter-spacing:-.04em;text-transform:uppercase}
.rot-stage{display:flex;flex-wrap:nowrap;align-items:flex-start;gap:.24em;white-space:nowrap;min-height:1em;padding:.04em 0}
.rot .wd{display:inline-flex}
.rot .ch{display:inline-block;opacity:0;transform:translateY(70%) rotate(4deg);transition:transform .65s cubic-bezier(.2,.8,.2,1),opacity .4s ease,color .55s ease,-webkit-text-stroke-color .55s ease;transition-delay:var(--d,0s)}
.rot .g .ch{color:transparent;-webkit-text-stroke:2px var(--ink)}
.rot sup{font-size:.36em;line-height:1;margin:.1em 0 0 -.12em;color:var(--accent);opacity:0;transform:scale(0) rotate(-90deg);transition:transform .6s cubic-bezier(.3,1.6,.4,1),opacity .3s}
.rot-stage.show .ch{opacity:1;transform:none}
.rot-stage.filled .g .ch{color:var(--accent);-webkit-text-stroke-color:var(--accent)}
.rot-stage.filled sup{opacity:1;transform:none}
.rot-stage.hide .ch{opacity:0;transform:translateY(-60%);transition-duration:.45s}
.rot-stage.hide sup{opacity:0;transform:scale(0)}
.rot-stage.boom .ch{transform:scale(1.08)}
.rot-stage.scatter .ch{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r));transition:transform 1s cubic-bezier(.3,.1,.3,1),opacity .9s ease .1s}
.rot-ticker{display:flex;align-items:center;gap:12px;margin-top:clamp(18px,2.4vw,30px);font-size:12px;color:var(--muted)}
.rot-ticker .live{width:8px;height:8px;border-radius:50%;background:#E5482E;animation:pulse 1.2s ease-in-out infinite}
.rot-dots{display:flex;gap:6px;margin-left:8px}
.rot-dots i{width:22px;height:3px;border-radius:2px;background:rgba(243,238,228,.18);transition:background .3s}
.rot-dots i.on{background:var(--accent)}
/* HERO headline — NOT OUT (one line) */
.no1{margin:clamp(20px,3vw,40px) 0 0;display:flex;align-items:flex-start;gap:.22em;font-weight:900;font-size:clamp(50px,13.6vw,216px);line-height:.84;letter-spacing:-.04em;text-transform:uppercase;white-space:nowrap}
.no1 .w1,.no1 .w2{display:flex;overflow:hidden;padding:.02em 0 .05em}
.no1 .w1 > span,.no1 .w2 > span{display:inline-block;transform:translateY(105%);animation:up .9s cubic-bezier(.2,.8,.2,1) forwards}
.no1 .w1 > span:nth-child(1){animation-delay:.15s}.no1 .w1 > span:nth-child(2){animation-delay:.25s}.no1 .w1 > span:nth-child(3){animation-delay:.35s}
.no1 .w2 > span{color:transparent;-webkit-text-stroke:2px var(--ink);animation:up .9s cubic-bezier(.2,.8,.2,1) forwards,fill .8s ease 1.6s forwards}
.no1 .w2 > span:nth-child(1){animation-delay:.6s,1.6s}.no1 .w2 > span:nth-child(2){animation-delay:.7s,1.7s}.no1 .w2 > span:nth-child(3){animation-delay:.8s,1.8s}.no1 .w2 > span:nth-child(4){animation-delay:.9s,1.9s}
.no1 sup{align-self:flex-start;font-size:.36em;line-height:1;margin:.14em 0 0 .04em;color:var(--accent);transform:scale(0) rotate(-90deg);animation:star .7s cubic-bezier(.3,1.6,.4,1) 2.4s forwards}
/* HERO — two words */
.hero2{min-height:calc(100svh - 81px);display:flex;align-items:center;padding-top:clamp(24px,4vh,48px);padding-bottom:clamp(24px,4vh,48px);overflow:hidden}
.no{margin:0;width:100%;font-weight:900;font-stretch:118%;font-size:min(31vw,40svh);line-height:.8;letter-spacing:-.05em;text-transform:uppercase}
.no .w1,.no .w2{display:flex;overflow:hidden;padding:.02em 0 .04em}
.no .w2{justify-content:flex-end;position:relative;padding-right:.08em}
.no .w1 > span,.no .w2 > span{display:inline-block;transform:translateY(105%);animation:up .9s cubic-bezier(.2,.8,.2,1) forwards}
.no .w1 > span:nth-child(1){animation-delay:.15s}.no .w1 > span:nth-child(2){animation-delay:.25s}.no .w1 > span:nth-child(3){animation-delay:.35s}
.no .w2 > span{color:transparent;-webkit-text-stroke:2px var(--ink);animation:up .9s cubic-bezier(.2,.8,.2,1) forwards,fill .8s ease 1.75s forwards}
.no .w2 > span:nth-child(1){animation-delay:.75s,1.75s}.no .w2 > span:nth-child(2){animation-delay:.85s,1.85s}.no .w2 > span:nth-child(3){animation-delay:.95s,1.95s}.no .w2 > span:nth-child(4){animation-delay:1.05s,2.05s}
.no sup{align-self:flex-start;font-size:.38em;line-height:1;margin:.12em 0 0 .04em;color:var(--accent);transform:scale(0) rotate(-90deg);animation:star .7s cubic-bezier(.3,1.6,.4,1) 2.5s forwards}
@keyframes up{to{transform:none}}
@keyframes fill{to{color:var(--accent);-webkit-text-stroke-color:var(--accent)}}
@keyframes star{to{transform:none}}
/* NEVER BACK OUT — hero beat */
.nbo{margin:clamp(22px,2.8vw,40px) 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:.28em;font-weight:900;font-stretch:112%;font-size:clamp(30px,4.4vw,66px);line-height:1;letter-spacing:-.03em;text-transform:uppercase;color:var(--accent)}
.nbo span{display:inline-block;opacity:0;transform:scale(1.7);filter:blur(10px);animation:stamp .45s cubic-bezier(.2,.9,.25,1.2) forwards}
.nbo span:nth-child(1){animation-delay:2.5s}.nbo span:nth-child(2){animation-delay:2.75s}.nbo span:nth-child(3){animation-delay:3s}
.nbo i{display:block;height:3px;flex:0 0 clamp(40px,8vw,140px);margin-left:.2em;background:var(--accent);transform:scaleX(0);transform-origin:left;animation:line .6s cubic-bezier(.7,0,.2,1) 3.4s forwards}
@keyframes stamp{60%{opacity:1;filter:blur(0);transform:scale(.94)}100%{opacity:1;filter:blur(0);transform:scale(1)}}
@keyframes line{to{transform:scaleX(1)}}

/* STORY */
.story-head .h2{font-size:clamp(40px,6vw,96px)}
.manifesto{margin:clamp(56px,8vw,120px) 0 0;max-width:1100px;font-weight:800;font-size:clamp(28px,3.6vw,54px);line-height:1.18;letter-spacing:-.025em}
.manifesto span{display:block;color:rgba(243,238,228,.16);transition:color .6s ease}
.manifesto span.lit{color:var(--ink)}
.manifesto span.gold.lit{color:var(--accent)}
.manifesto span.gap{margin-top:.7em}
.ages{margin-top:clamp(80px,10vw,160px)}
.ages-title{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 40px;margin-bottom:clamp(32px,4vw,56px)}
.ages-title h3{margin:0;font-weight:900;font-stretch:110%;font-size:clamp(34px,4.6vw,68px);line-height:.95;letter-spacing:-.03em;text-transform:uppercase}
.ages-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.age{background:var(--bg);padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:18px;transition:background .4s}
.age:hover{background:var(--panel)}
.age .num{font-weight:900;font-stretch:115%;font-size:clamp(96px,11vw,180px);line-height:.8;letter-spacing:-.06em}
.age .num sup{font-size:.45em;vertical-align:top;line-height:1;color:var(--accent);margin-left:.04em}
.age.old .num{color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.age .num{color:var(--ink)}
.age.old .num{color:transparent}
.age h4{margin:8px 0 0;font-size:24px;font-weight:800;letter-spacing:-.01em}
.age p{margin:0;font-size:17px;line-height:1.6;color:var(--ink-2)}
.age .rv{transition-delay:inherit}
.closing{margin-top:clamp(96px,12vw,200px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:end}
.closing p{margin:0;font-size:clamp(18px,1.6vw,22px);line-height:1.6;color:var(--ink-2)}
.closing p + p{margin-top:18px}
.closing .sig{font-family:var(--serif);font-style:italic;font-size:clamp(26px,2.6vw,38px);color:var(--ink);line-height:1.2}
.big-nbo{margin:0;font-weight:900;font-stretch:118%;font-size:clamp(64px,11.5vw,184px);line-height:.84;letter-spacing:-.045em;text-transform:uppercase}
.big-nbo span{display:block;opacity:0;transition:opacity .8s ease,transform 1s cubic-bezier(.2,.8,.2,1)}
.big-nbo span:nth-child(1){transform:translateX(-12%)}
.big-nbo span:nth-child(2){transform:translateX(12%);color:transparent;-webkit-text-stroke:2px var(--ink);transition-delay:.18s}
.big-nbo span:nth-child(3){transform:translateX(-12%);color:var(--accent);transition-delay:.36s}
.big-nbo.in span{opacity:1;transform:none}

/* WEIGHT */
.weight{background:var(--cream);color:var(--bg)}
.weight .mono{color:#5C5850}
.w-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 48px;margin-top:24px}
.w-num{margin:0;font-weight:900;font-size:clamp(92px,22vw,340px);line-height:.8;letter-spacing:-.06em}
.w-num small{font-size:.3em;letter-spacing:-.02em}
.w-row p:last-child{flex:0 1 360px;margin:0 0 12px;font-family:var(--serif);font-style:italic;font-size:clamp(28px,3vw,44px);line-height:1.1}
.bar{margin-top:clamp(40px,5vw,72px);height:10px;border-radius:5px;background:#DDD6C8;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--bg);border-radius:5px;transition:width 1.6s cubic-bezier(.2,.8,.2,1)}
.bar.on i{width:96%}
.bar-labels{display:flex;justify-content:space-between;margin-top:12px;font-size:11px}
.bar-labels b{color:var(--bg);font-weight:500}

/* ORDER */
.order-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:end}
.h2c{font-size:clamp(46px,8vw,128px);line-height:.88;letter-spacing:-.04em}
.combck-landing .card{border:1px solid rgba(243,238,228,.18);border-radius:4px;padding:clamp(22px,3vw,36px);background:var(--panel);display:flex;flex-direction:column;gap:22px}
.combck-landing .card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.combck-landing .card-top p{margin:0}
.combck-landing .price{font:500 22px var(--mono);color:var(--accent);white-space:nowrap}
.combck-landing .card-img{aspect-ratio:4/3;width:100%;object-fit:cover;object-position:50% 40%;border-radius:3px}
.combck-landing .chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;font-size:11px}
.combck-landing .chips li{padding:8px 12px;border:1px solid rgba(243,238,228,.2);border-radius:999px}
.btn-wide{display:flex;justify-content:space-between;min-height:56px;font-size:16px;font-weight:800}
.combck-landing .fine{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
.combck-landing .fine a{color:var(--ink);text-decoration:underline}

/* FOOTER */
footer{border-top:1px solid var(--line);padding-top:32px;overflow:hidden}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px}
.foot a:hover{color:var(--accent)}
.giant{display:block;width:100%;height:auto;margin:40px 0 -2%;opacity:.07}

/* reveal */
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}

/* ---------- TABLET ---------- */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .combck-landing .stats{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:20px}
  .combck-landing .stats div{flex-direction:column;align-items:flex-start;border-bottom:none !important}
  .combck-landing .specs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .order-grid{grid-template-columns:1fr}
  .ages-grid{grid-template-columns:1fr 1fr}
  .ages-grid .age:last-child{grid-column:1 / -1}
  .closing{grid-template-columns:1fr}
  .ping-wrap{grid-template-columns:1fr}
}
/* ---------- MOBILE ---------- */
@media (max-width:760px){
  .nav-links{display:none}
  .no .w2 > span,.no1 .w2 > span,.rot .g .ch{-webkit-text-stroke-width:1.5px}
  .pill{padding:0 16px;font-size:11px}
  .combck-landing .meta span:last-child{display:none}
  .mega .ghost{-webkit-text-stroke-width:1px}
  .motto .ol > span{-webkit-text-stroke-width:1px}
  .hero-grid{grid-template-columns:1fr}
  .combck-landing .photo{min-height:auto;aspect-ratio:4/5;order:-1}
  .combck-landing .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dh{display:none}
  .dv{display:block}
  .diagram{margin-bottom:40px}
  .size-note{grid-template-columns:1fr}
  .ages-grid{grid-template-columns:1fr}
  .closing{grid-template-columns:1fr}
  .big-nbo span:nth-child(2){-webkit-text-stroke-width:1.5px}
  .willow{grid-template-columns:1fr}
  .grain{min-height:440px}
  .combck-landing .specs{column-gap:20px}
  .btn{flex:1 1 auto}
  .ping-wrap{grid-template-columns:1fr}
  .stage{height:330px}
  .pbat{left:16px;right:16px;bottom:70px}
  .pblade{flex:1 1 100%}
  .phandle{display:none}
  .pscale{left:16px;right:16px;bottom:26px}
  .pscale span:nth-child(1),.pscale span:nth-child(2){flex:0 0 25%}
  .ping-hint{left:16px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .rv{opacity:1;transform:none}
  .no .w1 > span,.no .w2 > span,.no1 .w1 > span,.no1 .w2 > span{transform:none}
  .no1 .w2 > span{color:var(--accent);-webkit-text-stroke-color:var(--accent)}
  .no1 sup{transform:none}
  .rot .ch{opacity:1;transform:none}
  .rot .g .ch{color:var(--accent);-webkit-text-stroke-color:var(--accent)}
  .rot sup{opacity:1;transform:none}
  .no .w2 > span{color:var(--accent);-webkit-text-stroke-color:var(--accent)}
  .no sup{transform:none}
  .mega span{opacity:1;transform:none}
  .mega .ghost{color:transparent;-webkit-text-stroke-color:rgba(243,238,228,.35)}
  .tagline img{opacity:1;clip-path:none}
  .motto .ln > span{opacity:1;transform:none}
  .nbo span{opacity:1;transform:none;filter:none}
  .nbo i{transform:none}
  .big-nbo span{opacity:1;transform:none}
  .manifesto span{color:var(--ink)}
  .bar i{width:96%}
}

/* ---------- Header actions (order pill + cart) ---------- */
.nav-actions{display:flex;align-items:center;gap:10px}
.combck-cart{position:relative;display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(243,238,228,.3);border-radius:50%;color:var(--ink);transition:border-color .2s,color .2s}
.combck-cart:hover{border-color:var(--accent);color:var(--accent)}
.combck-cart-count{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--accent);color:var(--bg);font-size:11px;font-weight:500;line-height:20px;text-align:center}
.combck-cart-count.is-empty{display:none}
.btn-soldout{background:rgba(243,238,228,.08);color:var(--muted);cursor:not-allowed}
.nav-actions .pill{white-space:nowrap}
@media (max-width:760px){.nav-actions .pill{padding:0 14px;font-size:11px;letter-spacing:.08em}}
@media (max-width:420px){.nav-actions .pill .pill-label{display:none}}
@media (max-width:400px){.nav-actions .pill .dot{display:none}}

/* ---------- WordPress basics ---------- */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}
.skip-link:focus{clip:auto;clip-path:none;height:auto;width:auto;left:12px;top:12px;z-index:100;padding:12px 18px;background:var(--accent);color:var(--bg);border-radius:4px}
body.admin-bar .nav{top:32px}
@media (max-width:782px){body.admin-bar .nav{top:46px}}
.logo .custom-logo{height:22px;width:auto}
/* generic pages & posts */
.page-shell{padding-top:clamp(56px,8vw,120px);padding-bottom:clamp(56px,8vw,120px);max-width:860px;margin:0 auto}
.page-shell h1.entry-title{margin:0 0 32px;font-weight:900;font-stretch:110%;font-size:clamp(40px,6vw,80px);line-height:.95;letter-spacing:-.035em;text-transform:uppercase}
.entry-content{font-size:18px;line-height:1.7;color:var(--ink-2)}
.entry-content a{color:var(--accent);text-decoration:underline}
.entry-content h2,.entry-content h3{color:var(--ink);letter-spacing:-.02em;margin:1.6em 0 .5em}
.entry-content img{height:auto;border-radius:4px}
.post-list{list-style:none;margin:0;padding:0}
.post-list li{padding:24px 0;border-top:1px solid var(--line)}
.post-list a{font-size:26px;font-weight:800;letter-spacing:-.02em}
.post-list a:hover{color:var(--accent)}
.pagination{margin-top:40px;display:flex;gap:16px}