/* ============================================================ Transcending Personal Training - style.css Shared stylesheet for / (.page-home) and /about (.page-about) How it works: - Base resets below apply everywhere. - Each page's rules are scoped to a class on (/ uses , /about uses ), so the dark home theme and the light about theme never collide. ============================================================ */ /* ── Global base ── */ * {margin:0;padding:0;box-sizing:border-box} html {scroll-behavior:smooth} /* ════════════════════════════════════════════ HOME (/ - dark theme) ════════════════════════════════════════════ */ body.page-home { --t-enter:1400ms; --t-hold:1600ms; --t-exit:1100ms; --t-exit-fade:650ms; } .page-home #tpt-splash { position:fixed;inset:0;z-index:9999;display:grid;place-items:center; background:radial-gradient(circle at 50% 46%, #2e1416 0%, #121010 75%); transition:opacity 700ms ease var(--t-exit-fade,650ms), visibility 0s linear var(--t-exit,1100ms); } .page-home #tpt-splash::before { content:"";position:absolute;width:min(80vw,480px);aspect-ratio:1;border-radius:50%; background:radial-gradient(circle, rgba(237,28,36,.18), transparent 60%); opacity:0;transition:opacity 1100ms ease;pointer-events:none; } .page-home #tpt-splash.glow::before { opacity:1 } .page-home #tpt-seal { width:auto;height:min(86vh,580px);max-width:94vw;object-fit:contain; transform:rotate(-200deg) scale(.2);opacity:0; filter:drop-shadow(0 0 26px rgba(237,28,36,.4)); will-change:transform,opacity; } .page-home #tpt-splash.enter #tpt-seal { animation:tptSpinIn var(--t-enter) cubic-bezier(.22,.61,.36,1) forwards } .page-home #tpt-splash.exit #tpt-seal { animation:tptSpinOut var(--t-exit) cubic-bezier(.5,.02,.6,.18) forwards } .page-home #tpt-splash.exit { opacity:0;visibility:hidden } @keyframes tptSpinIn {from{transform:rotate(-200deg) scale(.2);opacity:0}60%{opacity:1}to{transform:rotate(0) scale(1);opacity:1}} @keyframes tptSpinOut {from{transform:rotate(0) scale(1);opacity:1}to{transform:rotate(320deg) scale(2.6);opacity:0}} @media (prefers-reduced-motion:reduce) { .page-home #tpt-seal { transform:scale(1) } .page-home #tpt-splash.enter #tpt-seal { animation:tptFadeIn .6s ease forwards } .page-home #tpt-splash.exit #tpt-seal { animation:tptFadeOut .5s ease forwards } } @keyframes tptFadeIn {from{opacity:0}to{opacity:1}} @keyframes tptFadeOut {from{opacity:1}to{opacity:0}} body.page-home { --bg:#101010;--off:#0b0b0b;--paper:#1a1a1a; --ink:#ffffff;--mid:#f0eeec;--light:#d9d6d2; --red:#ED1C24;--red-d:#c4141b; --border:#262626;--shadow:0 2px 16px rgba(0,0,0,0.55) } .page-home .skip-link { position:absolute;left:-9999px;top:0;background:var(--red);color:#fff;padding:10px 18px;border-radius:0 0 8px 0;z-index:999;font-weight:700;font-size:.85rem;text-decoration:none } .page-home .skip-link:focus { left:0 } body.page-home { background:var(--bg);color:var(--ink);font-family:'Bricolage Grotesque',sans-serif;overflow-x:clip;-webkit-font-smoothing:antialiased } .page-home .topbar { background:#000;color:#fff;font-size:.78rem;padding:9px 5vw;border-bottom:1px solid rgba(255,255,255,.08) } .page-home .topbar-inner { max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px } .page-home .topbar a { text-decoration:none;font-weight:700 } .page-home .tb-tag { white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0 } .page-home .tb-tag strong { color:#fff } .page-home .tb-short { display:none } .page-home .tb-actions { display:flex;align-items:center;gap:6px;flex-shrink:0 } .page-home .tb-phone { color:#fff;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;padding:4px 10px;border-radius:100px;transition:color .2s } .page-home .tb-phone svg { color:var(--red);flex-shrink:0 } .page-home .tb-phone:hover { color:var(--red) } .page-home .tb-ico { width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:#fff;border:1px solid rgba(255,255,255,.14);transition:all .2s;flex-shrink:0 } .page-home .tb-ico:hover { color:var(--red);border-color:rgba(237,28,36,.5);background:rgba(237,28,36,.1) } .page-home .tb-ico.red { background:var(--red);border-color:var(--red) } .page-home .tb-ico.red:hover { background:var(--red-d);color:#fff } .page-home .tb-sep { width:1px;height:18px;background:rgba(255,255,255,.15);flex-shrink:0 } @media(max-width:768px) { .page-home .topbar { padding:7px 12px;font-size:.7rem } .page-home .topbar-inner { gap:8px } .page-home .tb-full { display:none } .page-home .tb-short { display:inline-block } .page-home .tb-sep { display:none } .page-home .tb-actions { gap:5px } .page-home .tb-phone { padding:0;width:32px;height:32px;justify-content:center;border-radius:50%;border:1px solid rgba(255,255,255,.14) } .page-home .tb-phone span { display:none } } @media(max-width:380px) { .page-home .topbar { padding:6px 10px } .page-home .tb-short { font-size:.66rem } .page-home .tb-ico, .page-home .tb-phone { width:29px;height:29px } .page-home .tb-actions { gap:4px } } .page-home nav { position:sticky;top:12px;z-index:200;max-width:1280px;margin:14px auto 0;width:calc(100% - 32px);border-radius:18px;background:linear-gradient(90deg,rgba(16,16,16,0.74) 0%,rgba(16,16,16,0.74) 68%,rgba(237,28,36,0.2) 100%);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border:1px solid rgba(255,255,255,0.08);box-shadow:inset 0 1px 0 rgba(255,255,255,0.06),0 1px 2px rgba(0,0,0,0.4),0 12px 32px rgba(0,0,0,0.5);padding:0 28px;min-height:64px;display:flex;align-items:center;justify-content:space-between } @supports not ((backdrop-filter:blur(16px)) or (-webkit-backdrop-filter:blur(16px))) { .page-home nav { background:linear-gradient(90deg,rgba(16,16,16,0.98) 0%,rgba(16,16,16,0.98) 68%,#1c0d0e 100%) } } .page-home .logo { display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0 } .page-home .logo-mark { height:32px;width:auto;display:block;flex-shrink:0 } .page-home .logo-txt { font-family:'Bebas Neue',sans-serif;font-size:1.35rem;font-weight:400;color:var(--ink);letter-spacing:.06em;line-height:1;white-space:nowrap } .page-home .logo-txt em { font-style:normal;color:var(--red) } .page-home .nav-center { display:flex;gap:26px;align-items:center } .page-home .nav-center a { color:var(--mid);text-decoration:none;font-size:.83rem;font-weight:600;transition:color .2s } .page-home .nav-center a:hover { color:var(--ink) } .page-home .nav-right { display:flex;align-items:center;gap:16px } .page-home .nav-phone { font-size:.83rem;font-weight:700;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:6px } .page-home .nav-phone svg { color:var(--red) } .page-home .nav-phone:hover { color:var(--red) } .page-home .btn-nav { background:var(--red);color:#fff;padding:11px 24px;border-radius:100px;font-weight:700;font-size:.8rem;text-decoration:none;transition:all .2s;white-space:nowrap } .page-home .btn-nav:hover { background:var(--red-d);transform:translateY(-1px);box-shadow:0 6px 20px rgba(237,28,36,0.4) } .page-home .tpt-burger { display:none;position:relative;width:42px;height:42px;background:none;border:0;cursor:pointer;padding:0;flex-shrink:0;-webkit-tap-highlight-color:transparent } .page-home .tpt-burger .pbar { position:absolute;left:50%;height:2.5px;background:var(--ink);border-radius:99px;transition:all .34s cubic-bezier(.2,.9,.3,1.3) } .page-home .tpt-burger .p1 { width:15px;top:14px;transform:translateX(-50%) } .page-home .tpt-burger .p2 { width:22px;top:20px;transform:translateX(-50%) } .page-home .tpt-burger .p3 { width:15px;top:26px;transform:translateX(-50%) } .page-home .tpt-burger[aria-expanded="true"] .p1 { width:22px;top:20px;background:var(--red);transform:translateX(-50%) rotate(45deg) } .page-home .tpt-burger[aria-expanded="true"] .p2 { opacity:0;transform:translateX(-50%) scaleX(.2) } .page-home .tpt-burger[aria-expanded="true"] .p3 { width:22px;top:20px;background:var(--red);transform:translateX(-50%) rotate(-45deg) } .page-home .tpt-burger:focus-visible { outline:2px solid var(--red);outline-offset:3px;border-radius:10px } .page-home .tpt-menu { position:fixed;top:0;left:0;width:100%;z-index:210;background:rgba(20,20,20,.97);backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);border:1px solid rgba(255,255,255,.1);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.65);padding:12px;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .28s ease,transform .28s ease,visibility 0s linear .28s } .page-home .tpt-grid { display:grid;grid-template-columns:1fr 1fr;gap:8px } .page-home .tpt-menu.open { opacity:1; visibility:visible; transform:translateY(0); transition:opacity .28s ease,transform .28s ease,visibility 0s; } .page-home .tpt-tile { display:flex;flex-direction:column;gap:7px;background:#1e1e1e;border:1px solid rgba(255,255,255,.06);border-radius:11px;padding:14px 12px;text-decoration:none;color:var(--ink);font-size:.86rem;font-weight:700;transition:all .2s;opacity:0;transform:translateY(8px) } .page-home .tpt-menu.open .tpt-tile { opacity:1;transform:none;transition:opacity .35s ease,transform .35s cubic-bezier(.2,.9,.3,1.2),background .2s,border-color .2s } .page-home .tpt-tile:hover, .page-home .tpt-tile:focus-visible { background:#262626;border-color:rgba(237,28,36,.4);outline:none } .page-home .tpt-tile svg { color:var(--red) } .page-home .tpt-tile.wide { grid-column:1 / -1;flex-direction:row;align-items:center;gap:10px } .page-home .tpt-cta { display:block;margin-top:8px;background:var(--red);color:#fff;text-align:center;padding:15px;border-radius:11px;font-weight:800;font-size:.92rem;text-decoration:none;transition:background .2s;opacity:0;transform:translateY(8px) } .page-home .tpt-menu.open .tpt-cta { opacity:1;transform:none;transition:opacity .35s ease .3s,transform .35s cubic-bezier(.2,.9,.3,1.2) .3s,background .2s } .page-home .tpt-cta:hover { background:var(--red-d) } .page-home .tpt-backdrop { position:fixed;inset:0;z-index:150;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:opacity .28s ease,visibility 0s linear .28s } .page-home .tpt-backdrop.open { opacity:1;visibility:visible;transition:opacity .28s ease,visibility 0s } @media(prefers-reduced-motion:reduce) { .page-home .tpt-burger .pbar, .page-home .tpt-menu, .page-home .tpt-tile, .page-home .tpt-cta, .page-home .tpt-backdrop { transition-duration:.01ms!important;transition-delay:0s!important } } @media(max-width:900px) { .page-home .nav-center, .page-home .nav-phone, .page-home .btn-nav { display:none!important } .page-home .tpt-burger { display:block } } @media(min-width:901px) { .page-home .tpt-menu, .page-home .tpt-backdrop { display:none } } @media(max-width:400px) { .page-home .logo-mark { height:27px } .page-home .logo-txt { font-size:1.1rem } .page-home .tpt-tile { font-size:.8rem;padding:12px 10px } } .page-home header { background:var(--bg);padding:72px 5vw 0;overflow:hidden;border-bottom:1px solid var(--border);position:relative } /* ── HERO BACKGROUND IMAGE TEST ── */ .page-home header { background: linear-gradient(90deg, rgba(16,16,16,.96) 0%, rgba(16,16,16,.82) 45%, rgba(16,16,16,.55) 100%), url("images/gymbackground.avif") center 30% / cover no-repeat, var(--bg); } .page-home .topbar { border-bottom:2px solid var(--red) } .page-home header::before { content:'';position:absolute;top:-30%;right:-15%;width:60vw;height:60vw;background:radial-gradient(circle,rgba(237,28,36,.09),transparent 60%);pointer-events:none } .page-home .hero-inner { display:grid;grid-template-columns:1.1fr 480px;gap:60px;align-items:end;max-width:1280px;margin:0 auto;position:relative } .page-home .hero-left { padding-bottom:72px } .page-home .hero-stars { display:flex;align-items:center;gap:8px;margin-bottom:24px } .page-home .stars { color:#f5a623;font-size:1.1rem;letter-spacing:2px } .page-home .hero-stars-text { font-size:.82rem;font-weight:600;color:var(--mid) } .page-home .hero-stars-text strong { color:var(--ink) } .page-home h1 { font-family:'Bebas Neue',sans-serif;font-size:clamp(3.6rem,8vw,8rem);font-weight:400;line-height:.9;letter-spacing:.01em;margin-bottom:24px;color:var(--ink) } .page-home h1 .ital { font-family:'Lora',serif;font-style:italic;font-weight:400;font-size:.66em;color:var(--red);text-transform:none;display:inline-block } .page-home .hero-desc { font-size:1.05rem;line-height:1.78;color:var(--mid);max-width:50ch;margin-bottom:36px } .page-home .hero-desc strong { color:var(--ink) } .page-home .hero-btns { display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:44px } .page-home .btn-red { background:var(--red);color:#fff;padding:16px 34px;border-radius:8px;font-weight:700;font-size:.92rem;text-decoration:none;transition:all .25s;display:inline-flex;align-items:center;gap:8px } .page-home .btn-red:hover { background:var(--red-d);transform:translateY(-2px);box-shadow:0 12px 28px rgba(237,28,36,0.35) } .page-home .btn-border { color:var(--ink);padding:16px 34px;border-radius:8px;font-weight:600;font-size:.92rem;text-decoration:none;border:1.5px solid var(--border);transition:all .2s } .page-home .btn-border:hover { border-color:var(--red);color:var(--red) } .page-home .hero-trust-row { display:flex;gap:24px;flex-wrap:wrap;padding-top:30px;border-top:1px solid var(--border) } .page-home .trust-item { display:flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600;color:var(--mid) } .page-home .trust-item svg { color:var(--red);flex-shrink:0 } .page-home .hero-right { position:relative;align-self:flex-end;padding-bottom:0 } .page-home .hero-photo-wrap { position:relative;padding-bottom:0 } .page-home .hero-photo { display:block;width:100%;border-radius:20px 20px 0 0;object-fit:cover;aspect-ratio:4/5;filter:saturate(1.05) contrast(1.05);box-shadow:0 40px 90px rgba(0,0,0,.6) } .page-home .hero-photo-frame { position:relative;border:1px solid rgba(237,28,36,.35);border-bottom:none;border-radius:22px 22px 0 0;padding:10px 10px 0;background:linear-gradient(180deg,rgba(237,28,36,.08),transparent 60%) } .page-home .hero-badge { position:absolute;background:#161616;border:1px solid var(--border);border-radius:12px;padding:12px 16px;box-shadow:0 12px 32px rgba(0,0,0,.5);z-index:5;animation:floatBadge 3.4s ease-in-out infinite } .page-home .hero-badge.b1 { top:26px;left:-42px } .page-home .hero-badge.b2 { bottom:90px;right:-34px;animation-delay:1.2s } @keyframes floatBadge {0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} .page-home .hb-num { font-family:'Bebas Neue',sans-serif;font-size:1.5rem;color:var(--ink);line-height:1;letter-spacing:.03em } .page-home .hb-num span { color:var(--red) } .page-home .hb-lbl { font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--light);white-space:nowrap;margin-top:2px } .page-home .typing-cursor { display:inline-block;width:3px;height:.8em;background:var(--red);margin-left:5px;vertical-align:baseline;animation:blink .7s infinite } @keyframes blink {0%,100%{opacity:1}50%{opacity:0}} .page-home .proof-bar { background:#000;border-top:2px solid var(--red);border-bottom:2px solid var(--red);padding:18px 5vw;display:flex;justify-content:center;align-items:center;gap:40px;flex-wrap:wrap } .page-home .proof-item { display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.95);font-size:.82rem;font-weight:600 } .page-home .proof-item strong { color:var(--red) } .page-home .proof-stars { color:rgba(255,255,255,.9);letter-spacing:2px;font-size:1rem } .page-home .proof-sep { width:1px;height:20px;background:rgba(255,255,255,.2) } @media(max-width:768px) { .page-home .proof-bar { gap:12px;padding:14px 16px } .page-home .proof-sep { display:none } } .page-home .counter-section { background:var(--bg);border-bottom:1px solid var(--border);padding:64px 5vw } .page-home .counter-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:0;max-width:1280px;margin:0 auto } .page-home .counter-item { text-align:center;padding:0 40px;border-right:1px solid rgba(237,28,36,.35) } .page-home .counter-item:last-child { border-right:none } .page-home .counter-item:hover .ci-n { color:var(--red) } .page-home .ci-n { font-family:'Bebas Neue',sans-serif;font-size:3.6rem;font-weight:400;letter-spacing:.02em;color:var(--ink);line-height:1;margin-bottom:6px;transition:color .3s } .page-home .ci-n em { font-style:normal;font-size:2rem;color:var(--red) } .page-home .ci-l { font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--light) } .page-home .ci-sub { font-size:.78rem;color:var(--mid);margin-top:4px } @media(max-width:768px) { .page-home .counter-section { padding:48px 20px } .page-home .counter-grid { grid-template-columns:1fr 1fr } .page-home .counter-item { padding:22px 12px;border-right:1px solid rgba(237,28,36,.35) } .page-home .counter-item:nth-child(2), .page-home .counter-item:nth-child(4) { border-right:none } .page-home .counter-item:nth-child(3), .page-home .counter-item:nth-child(4) { border-top:1px solid rgba(237,28,36,.35) } .page-home .ci-n { font-size:2.9rem } .page-home .ci-n em { font-size:1.5rem } } @media(max-width:480px) { .page-home .counter-grid { grid-template-columns:1fr } .page-home .counter-item { border-right:none;border-top:1px solid rgba(237,28,36,.35);padding:24px 12px } .page-home .counter-item:first-child { border-top:none;padding-top:0 } .page-home .counter-item:last-child { padding-bottom:0 } .page-home .ci-n { font-size:3rem } } .page-home .sec { padding:96px 5vw;max-width:1280px;margin:0 auto } .page-home .full-sec { padding:96px 5vw } .page-home .sec-kicker { font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:10px;display:block } .page-home h2 { font-family:'Bebas Neue',sans-serif;font-size:clamp(2.6rem,4.8vw,4.6rem);font-weight:400;letter-spacing:.02em;line-height:.96;color:var(--ink);margin-bottom:16px } .page-home h2 .ital { font-family:'Lora',serif;font-style:italic;font-weight:400;font-size:.82em;color:var(--red) } .page-home .sec-sub { font-size:1rem;line-height:1.78;color:var(--mid);max-width:56ch } @media(max-width:768px) { .page-home .sec, .page-home .full-sec { padding:60px 16px } } .page-home .ra { background:var(--w-bg);border-top:4px solid var(--red);border-bottom:1px solid var(--w-border);padding:96px 0;overflow:hidden;position:relative;color:var(--w-ink) } .page-home .ra-grid { position:absolute;inset:0;background-image:radial-gradient(rgba(17,17,17,.05) 1.3px,transparent 1.6px);background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse 70% 70% at 20% 20%,#000 0%,transparent 70%);mask-image:radial-gradient(ellipse 70% 70% at 20% 20%,#000 0%,transparent 70%);pointer-events:none } .page-home .ra-mark { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:'Bebas Neue',sans-serif;font-size:clamp(8rem,22vw,20rem);letter-spacing:.05em;line-height:1;white-space:nowrap;color:transparent;-webkit-text-stroke:1.5px rgba(237,28,36,.12);pointer-events:none;user-select:none;z-index:0 } .page-home .ra-head { position:relative;z-index:2;max-width:760px;margin:0 auto 52px;padding:0 5vw;text-align:center } .page-home .ra-head h2 { font-family:'Bebas Neue',sans-serif;font-size:clamp(2.6rem,4.8vw,4.6rem);font-weight:400;letter-spacing:.02em;line-height:.96;color:var(--w-ink);margin-bottom:16px } .page-home .ra-head h2 .ital { font-family:'Lora',serif;font-style:italic;font-weight:400;font-size:.82em;color:var(--red) } .page-home .ra-head .sec-kicker { display:inline-flex;align-items:center;gap:12px } .page-home .ra-head .sec-kicker::before, .page-home .ra-head .sec-kicker::after { content:'';width:30px;height:2px;background:var(--red) } .page-home .ra-note { font-size:.85rem;line-height:1.7;color:var(--w-mid);max-width:52ch;margin:0 auto } .page-home .ra-rows { position:relative;z-index:1;display:grid;gap:26px } .page-home .ra-row { overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent) } .page-home .ra-track { display:flex;gap:26px;width:max-content;animation:raScroll 28s linear infinite;padding:6px 0 14px } .page-home .ra-row.rev .ra-track { animation-name:raScrollRev;animation-duration:32s } .page-home .ra-row:hover .ra-track { animation-play-state:paused } @keyframes raScroll {from{transform:translateX(0)}to{transform:translateX(-50%)}} @keyframes raScrollRev {from{transform:translateX(-50%)}to{transform:translateX(0)}} @media(prefers-reduced-motion:reduce) { .page-home .ra-track { animation:none;width:auto } .page-home .ra-row { overflow-x:auto;-webkit-mask-image:none;mask-image:none } } .page-home .ra-card { position:relative;flex-shrink:0;width:250px;aspect-ratio:3/4;border-radius:12px;overflow:hidden;border:2px solid var(--w-ink);background:#fff;box-shadow:7px 7px 0 var(--red);transition:transform .3s,box-shadow .3s } .page-home .ra-card:hover { transform:translate(-3px,-3px);box-shadow:10px 10px 0 var(--red) } .page-home .ra-card img { width:100%;height:100%;object-fit:cover;display:block;transition:filter .4s;filter:grayscale(30%) } .page-home .ra-card:hover img { filter:none } .page-home .ra-tag { position:absolute;bottom:12px;left:12px;z-index:2;font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--red);padding:5px 10px;border-radius:100px } .page-home .ra-strap { position:relative;z-index:2;margin-top:44px;text-align:center;padding:0 5vw } .page-home .ra-strap p { font-size:.95rem;color:var(--w-mid);margin-bottom:20px } .page-home .ra-strap p em { font-family:'Lora',serif;font-style:italic;color:var(--w-ink) } .page-home .ra-btn { display:inline-flex;align-items:center;gap:8px;background:var(--red);color:#fff;padding:16px 34px;border-radius:8px;font-weight:700;font-size:.92rem;text-decoration:none;transition:all .25s } .page-home .ra-btn:hover { background:var(--red-d);transform:translateY(-2px);box-shadow:0 12px 28px rgba(237,28,36,.3) } @media(max-width:560px) { .page-home .ra { padding:60px 0 } .page-home .ra-card { width:190px;box-shadow:5px 5px 0 var(--red) } .page-home .ra-head { margin-bottom:32px } } .page-home .massage-banner { background:linear-gradient(90deg,#160c0d,#0d0d0d);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:40px 5vw } .page-home .massage-inner { max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap } .page-home .massage-txt h3 { font-family:'Bebas Neue',sans-serif;font-size:1.9rem;letter-spacing:.02em;color:var(--ink);line-height:1;margin-bottom:6px } .page-home .massage-txt h3 em { font-style:normal;color:var(--red) } .page-home .massage-txt p { font-size:.88rem;color:var(--mid) } .page-home .bt-wrap { position:relative;height:260vh;background:#000 } .page-home .bt-pin { position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;padding:100px 5vw 24px } .page-home .bt-pin::before { content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 0%,rgba(237,28,36,0.07),transparent 70%);pointer-events:none } .page-home .bt-bg { position:absolute;inset:0;opacity:0;transition:opacity .9s ease;pointer-events:none;will-change:opacity } .page-home .bt-bg.on { opacity:1 } .page-home .bt-head { display:flex;justify-content:space-between;align-items:flex-start;gap:24px;max-width:1280px;margin:0 auto;width:100%;position:relative;z-index:2;flex-wrap:wrap } .page-home .bt-eyebrow { font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(237,28,36,0.85);margin-bottom:10px } .page-home .bt-head h2 { color:var(--ink) } .sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0 } .page-home .gb1 { border-top:2px solid var(--red) } .page-home .counter-section { border-top:2px solid var(--red); border-bottom:2px solid var(--red) } .page-home .bt-head h2 .ital { color:var(--red) } .page-home .bt-counter { text-align:right;flex-shrink:0 } .page-home .bt-counter-label { font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#ffffff;margin-bottom:4px } .page-home .bt-day { font-family:'Bebas Neue',sans-serif;font-size:2.2rem;color:var(--ink);letter-spacing:.03em;line-height:1 } .page-home .bt-day em { font-style:normal;color:var(--red) } .page-home .bt-phase { font-size:.72rem;font-weight:700;color:rgba(237,28,36,.85);margin-top:4px;letter-spacing:.06em;text-transform:uppercase } .page-home .bt-stage { position:relative;flex:1;min-height:0;margin-top:8px } .page-home .bt-track { position:absolute;inset:0;will-change:transform } .page-home .bt-svg { position:absolute;top:0;left:0;pointer-events:none } .page-home .bt-path-bg { fill:none;stroke:rgba(255,255,255,.1);stroke-width:2;stroke-dasharray:6 8;stroke-linecap:round } .page-home .bt-path-fill { fill:none;stroke:var(--red);stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 8px rgba(237,28,36,.55)) } .page-home .bt-cart { position:absolute;width:18px;height:18px;background:var(--red);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 20px rgba(237,28,36,.85),0 0 40px rgba(237,28,36,.45);z-index:3 } .page-home .bt-node { position:absolute;width:12px;height:12px;background:#000;border:2px solid rgba(237,28,36,.4);border-radius:50%;transform:translate(-50%,-50%);z-index:2;transition:all .3s } .page-home .bt-node.active { background:var(--red);border-color:var(--red);box-shadow:0 0 16px rgba(237,28,36,.65) } .page-home .bt-card { position:absolute;width:280px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:20px 22px;transform:translate(-50%,0);opacity:.35;transition:opacity .4s,border-color .4s;z-index:2 } .page-home .bt-card.above { transform:translate(-50%,calc(-100% - 26px)) } .page-home .bt-card.below { transform:translate(-50%,26px) } .page-home .bt-card.active { opacity:1;border-color:rgba(237,28,36,.35) } .page-home .bt-when { font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:8px } .page-home .bt-card h3 { font-size:1rem;font-weight:800;color:var(--ink);margin-bottom:8px;letter-spacing:-.02em } .page-home .bt-card p { font-size:.78rem;line-height:1.7;color:rgba(255,255,255,.92) } .page-home .bt-tag { display:inline-block;margin-top:12px;background:rgba(237,28,36,0.1);border:1px solid rgba(237,28,36,0.2);padding:4px 11px;border-radius:100px;font-size:.64rem;font-weight:600;color:rgba(237,28,36,.9) } .page-home .bt-cta-card { background:rgba(237,28,36,.08);border-color:rgba(237,28,36,.35) } .page-home .bt-cta-btn { display:inline-block;margin-top:12px;background:var(--red);color:#fff;padding:10px 18px;border-radius:8px;font-size:.74rem;font-weight:700;text-decoration:none } .page-home .bt-hint { text-align:center;font-size:.72rem;font-weight:600;color:rgba(255,255,255,.8);position:relative;z-index:2 } .page-home .bt-hint span { color:var(--red) } @media (prefers-reduced-motion:reduce) { .page-home .bt-wrap { height:auto } .page-home .bt-pin { position:static;height:auto } .page-home .bt-stage { display:none } .page-home .bt-hint { display:none } } @media(max-width:768px) { .page-home .bt-card { width:min(280px,82vw) } } .page-home .rev-section { padding:96px 5vw;background:var(--bg);border-bottom:1px solid var(--border);position:relative;overflow:hidden } .page-home .rev-inner { max-width:1280px;margin:0 auto;position:relative } .page-home .rev-header { margin-bottom:52px;display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px } .page-home .rev-wall { columns:3;column-gap:18px } .page-home .review-card { break-inside:avoid;margin-bottom:18px;background:var(--paper);border:1px solid var(--border);border-radius:14px;padding:30px 28px;transition:border-color .3s,box-shadow .3s } .page-home .review-card:hover { border-color:rgba(237,28,36,0.35);box-shadow:0 18px 40px rgba(0,0,0,.45) } .page-home .review-card.rc-more { display:none } .page-home .rev-wall.expanded .review-card.rc-more { display:block;animation:rcIn .45s ease both } @keyframes rcIn {from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .page-home .rc-stars { color:#f5a623;font-size:.9rem;letter-spacing:2px;margin-bottom:14px } .page-home .rc-text { font-size:.88rem;line-height:1.75;color:var(--mid);margin-bottom:20px;font-style:italic } .page-home .rc-text::before { content:'\201C' } .page-home .rc-text::after { content:'\201D' } .page-home .rc-author { display:flex;align-items:center;gap:10px } .page-home .rc-avatar { width:36px;height:36px;background:rgba(237,28,36,0.12);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;color:var(--red);flex-shrink:0 } .page-home .rc-name { font-size:.82rem;font-weight:700;color:var(--ink) } .page-home .rc-biz { font-size:.74rem;color:var(--light) } .page-home .rev-more-wrap { text-align:center;margin-top:16px } .page-home .rev-more { display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--border);color:var(--ink);padding:13px 30px;border-radius:100px;font-family:inherit;font-size:.85rem;font-weight:700;cursor:pointer;transition:all .25s } .page-home .rev-more:hover { border-color:var(--red);color:var(--red);background:rgba(237,28,36,0.08) } .page-home .rev-more svg { transition:transform .3s } .page-home .rev-wall.expanded ~ .rev-more-wrap .rev-more svg { transform:rotate(180deg) } .page-home .score { display:flex;align-items:center;gap:16px;margin-top:16px } .page-home .big-score { font-family:'Bebas Neue',sans-serif;font-size:3.6rem;color:var(--ink);line-height:1;letter-spacing:.02em } .page-home .big-score sub { font-size:1.3rem;font-weight:400;color:var(--light);vertical-align:bottom } .page-home .score-detail { display:flex;flex-direction:column;gap:4px } .page-home .score-stars { color:#f5a623;font-size:1.2rem;letter-spacing:2px } .page-home .score-count { font-size:.78rem;font-weight:600;color:var(--mid) } @media(max-width:900px) { .page-home .rev-wall { columns:2 } } @media(max-width:640px) { .page-home .rev-section { padding:72px 16px } .page-home .rev-wall { columns:1 } .page-home .review-card { padding:24px 20px;margin-bottom:14px } } @media(prefers-reduced-motion:reduce) { .page-home .rev-wall.expanded .review-card.rc-more { animation:none } } .page-home .gal-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:52px } .page-home .gal-item { position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/3;border:1px solid var(--border);background:var(--paper) } .page-home .gal-item img { width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease,filter .6s ease;filter:grayscale(24%) } .page-home .gal-item:hover img { transform:scale(1.06);filter:grayscale(0) } .page-home .gal-item::after { content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.4),transparent 40%);opacity:.9 } @media(max-width:900px) { .page-home .gal-grid { grid-template-columns:1fr 1fr } } @media(max-width:560px) { .page-home .gal-grid { grid-template-columns:1fr } } .page-home .consult-wrap { background:#000;padding:96px 5vw;position:relative;overflow:hidden } .page-home .consult-wrap::before { content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 100%,rgba(237,28,36,.09),transparent 70%);pointer-events:none } .page-home .consult-inner { max-width:1100px;margin:0 auto;position:relative;z-index:1 } .page-home .consult-header { text-align:center;margin-bottom:56px } .page-home .consult-header p { color:rgba(255,255,255,.92);max-width:52ch;margin:14px auto 0;font-size:.96rem;line-height:1.8 } .page-home .consult-grid { display:grid;grid-template-columns:1fr 1fr;gap:22px } .page-home .consult-card { background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:40px 36px;transition:all .3s;display:flex;flex-direction:column } .page-home .consult-card:hover { border-color:rgba(237,28,36,.45);transform:translateY(-4px);box-shadow:0 24px 56px rgba(0,0,0,.55) } .page-home .cc-time { font-family:'Bebas Neue',sans-serif;font-size:3rem;color:var(--red);line-height:1;letter-spacing:.02em } .page-home .cc-time small { font-size:1.1rem;color:rgba(255,255,255,.92);letter-spacing:.06em } .page-home .cc-t { font-family:'Bebas Neue',sans-serif;font-size:1.6rem;color:var(--ink);letter-spacing:.03em;margin:10px 0 10px } .page-home .cc-d { font-size:.88rem;line-height:1.8;color:rgba(255,255,255,.92);margin-bottom:26px } .page-home .cc-d strong { color:#ffffff } .page-home .cc-free { display:inline-block;font-size:.62rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:var(--red);border-radius:100px;padding:5px 13px;margin-bottom:18px;width:fit-content } .page-home .consult-card .btn-red { margin-top:auto;justify-content:center } @media(max-width:820px) { .page-home .consult-grid { grid-template-columns:1fr } } .page-home .news-section { background:var(--off);border-top:1px solid var(--border);padding:80px 5vw } .page-home .news-inner { max-width:760px;margin:0 auto;text-align:center } .page-home .news-inner p { color:var(--mid);font-size:.95rem;line-height:1.8;margin-bottom:28px } .page-home .news-form { display:flex;gap:10px;max-width:480px;margin:0 auto } .page-home .news-input { flex:1;padding:14px 16px;background:#181111;border:1px solid #2e1416;border-radius:8px;color:#ffffff;font-family:'Bricolage Grotesque',sans-serif;font-size:.9rem;outline:none;transition:border-color .2s,box-shadow .2s } .page-home .news-input:focus { border-color:var(--red);box-shadow:0 0 0 3px rgba(237,28,36,0.14) } .page-home .news-btn { background:var(--red);color:#fff;padding:14px 26px;border:none;border-radius:8px;font-family:'Bricolage Grotesque',sans-serif;font-size:.88rem;font-weight:700;cursor:pointer;transition:all .2s } .page-home .news-btn:hover { background:var(--red-d) } .page-home #news-status { margin-top:12px;font-size:.8rem;font-weight:600;min-height:16px;color:var(--mid) } @media(max-width:560px) { .page-home .news-form { flex-direction:column } } .page-home .contact-strip { background:var(--red);padding:20px 5vw } .page-home .contact-strip-inner { max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap } .page-home .contact-strip-text { font-size:.95rem;font-weight:700;color:#fff } .page-home .contact-strip-links { display:flex;gap:24px;flex-wrap:wrap } .page-home .contact-strip-link { display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:700;color:#fff;text-decoration:none;transition:opacity .2s } .page-home .contact-strip-link:hover { opacity:.8 } @media(max-width:768px) { .page-home .contact-strip { padding:16px } .page-home .contact-strip-inner { flex-direction:column;text-align:center } } .page-home footer { background:var(--off);padding:72px 5vw 36px;border-top:1px solid var(--border) } .page-home .ft { max-width:1280px;margin:0 auto } .page-home .ft-top { display:grid;grid-template-columns:2.5fr 1fr 1fr 1fr;gap:52px;margin-bottom:52px;padding-bottom:52px;border-bottom:1px solid var(--border) } .page-home .ft-brand-name { font-family:'Bebas Neue',sans-serif;font-size:1.5rem;color:var(--ink);letter-spacing:.05em;margin-bottom:10px } .page-home .ft-brand-name em { font-style:normal;color:var(--red) } .page-home .ft-desc { font-size:.82rem;line-height:1.7;color:var(--mid);max-width:28ch;margin-bottom:16px } .page-home .ft-cities { font-size:.78rem;color:var(--light);line-height:1.8 } .page-home footer h4 { font-size:.67rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--light);margin-bottom:16px } .page-home footer a, .page-home footer p { color:var(--mid);font-size:.82rem;line-height:2;text-decoration:none;display:block;transition:color .2s } .page-home footer a:hover { color:var(--red) } .page-home .ft-bot { max-width:1280px;margin:0 auto;display:flex;justify-content:space-between;font-size:.74rem;color:var(--light);flex-wrap:wrap;gap:10px } @media(max-width:1024px) { .page-home .ft-top { grid-template-columns:1fr 1fr } } @media(max-width:768px) { .page-home footer { padding:48px 16px 28px } .page-home .ft-top { grid-template-columns:1fr;gap:32px } .page-home .ft-bot { flex-direction:column;gap:6px } } @media(max-width:1024px) { .page-home .hero-inner { grid-template-columns:1fr } .page-home .hero-right { display:none } } @media(max-width:768px) { html, body.page-home { max-width:100%;overflow-x:clip } .page-home .topbar-sep { display:none } .page-home nav { padding:0 16px;top:8px;margin:10px auto 0;width:calc(100% - 20px);border-radius:16px } .page-home header { padding:48px 16px 0 } .page-home h1 { font-size:clamp(3rem,13vw,4.2rem) } .page-home .hero-left { padding-bottom:48px } .page-home .gb-section { padding:70px 16px } .page-home .strip-section { padding:60px 0 } .page-home .strip-head { padding:0 16px;margin-bottom:32px } .page-home .consult-wrap { padding:60px 16px } .page-home .news-section { padding:60px 16px } .page-home .massage-inner { justify-content:center;text-align:center } } @media(max-width:480px) { .page-home .hero-btns { flex-direction:column;align-items:stretch } .page-home .btn-red, .page-home .btn-border { text-align:center;justify-content:center } } .page-home .hero-inner, .page-home .gb-inner, .page-home .consult-inner { z-index:2;position:relative } .page-home .strip-section, .page-home .counter-section, .page-home .svcs-bg, .page-home .massage-banner, .page-home .rev-section, .page-home .sec, .page-home .news-section, .page-home footer { position:relative;overflow:hidden } .page-home .strip-head, .page-home .strip-rows, .page-home .strip-strap, .page-home .counter-grid, .page-home .svcs-bg>div, .page-home .massage-inner, .page-home .rev-header, .page-home .rev-track-wrap, .page-home .sec>*, .page-home .news-inner, .page-home .ft, .page-home .ft-bot { position:relative;z-index:2 } .page-home .deco { position:absolute;pointer-events:none;z-index:0 } .page-home .deco svg { display:block;width:100%;height:100% } @keyframes decoFloat {0%,100%{transform:translateY(0) rotate(12deg)}50%{transform:translateY(-14px) rotate(12deg)}} @keyframes decoSpin {from{transform:rotate(0)}to{transform:rotate(360deg)}} @keyframes decoSpinR {from{transform:rotate(0)}to{transform:rotate(-360deg)}} .page-home .deco-grid { inset:0;background-image:radial-gradient(rgba(255,255,255,.04) 1.3px,transparent 1.6px);background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 30% 20%,#000 0%,transparent 70%);mask-image:radial-gradient(ellipse 80% 70% at 30% 20%,#000 0%,transparent 70%) } .page-home .deco-grid.red { background-image:radial-gradient(rgba(237,28,36,.05) 1.3px,transparent 1.6px);-webkit-mask-image:radial-gradient(ellipse 70% 80% at 85% 50%,#000 0%,transparent 72%);mask-image:radial-gradient(ellipse 70% 80% at 85% 50%,#000 0%,transparent 72%) } .page-home .deco-grid.fadeb { -webkit-mask-image:linear-gradient(to bottom,#000 0%,transparent 55%);mask-image:linear-gradient(to bottom,#000 0%,transparent 55%) } .page-home .deco-chalk { inset:0;background:radial-gradient(circle at 12% 30%,rgba(255,255,255,.03) 0 2px,transparent 3px),radial-gradient(circle at 32% 70%,rgba(255,255,255,.025) 0 1.5px,transparent 3px),radial-gradient(circle at 58% 22%,rgba(255,255,255,.03) 0 2px,transparent 3px),radial-gradient(circle at 76% 64%,rgba(255,255,255,.025) 0 1.5px,transparent 3px),radial-gradient(circle at 90% 34%,rgba(255,255,255,.03) 0 2px,transparent 3px);background-size:340px 340px } .page-home .deco-stripe-l { left:0;top:0;bottom:0;width:12px;background:repeating-linear-gradient(-45deg,rgba(237,28,36,.25) 0 16px,transparent 16px 32px) } .page-home .deco-stripe-r { right:0;top:0;bottom:0;width:12px;background:repeating-linear-gradient(-45deg,rgba(237,28,36,.22) 0 16px,transparent 16px 32px) } .page-home .dc-hero-dumbbell { top:6%;left:-6%;width:min(46vw,620px);transform:rotate(-18deg) } .page-home .dc-hero-plate { top:50%;right:-170px;width:min(44vw,560px);margin-top:calc(min(44vw,560px)/-2);animation:decoSpin 120s linear infinite } .page-home .dc-hero-plate2 { bottom:-140px;left:26%;width:min(20vw,260px);animation:decoSpinR 100s linear infinite } .page-home .dc-hero-kb { top:16%;right:38%;width:min(12vw,150px);animation:decoFloat 7s ease-in-out infinite } .page-home .dc-hero-speed { top:8%;right:2%;width:min(28vw,360px) } .page-home .dc-gb-plate { top:50%;right:-140px;width:min(34vw,440px);margin-top:calc(min(34vw,440px)/-2);animation:decoSpin 130s linear infinite } .page-home .dc-gb-plate2 { bottom:-170px;left:-150px;width:min(28vw,360px);animation:decoSpinR 150s linear infinite } .page-home .dc-gb-kb { top:8%;left:44%;width:min(13vw,160px);transform:rotate(-10deg) } .page-home .dc-count-plate { top:50%;left:50%;width:min(30vw,380px);margin-left:calc(min(30vw,380px)/-2);margin-top:calc(min(30vw,380px)/-2);animation:decoSpin 140s linear infinite } .page-home .dc-count-db { top:50%;left:-90px;width:min(22vw,300px);transform:translateY(-50%) rotate(14deg) } .page-home .dc-count-db.r { left:auto;right:-90px;transform:translateY(-50%) rotate(-14deg) } .page-home .dc-svc-plate { top:-160px;left:-150px;width:min(30vw,400px);animation:decoSpinR 130s linear infinite } .page-home .dc-svc-plate2 { bottom:-170px;right:-150px;width:min(28vw,370px);animation:decoSpin 140s linear infinite } .page-home .dc-svc-kb { top:10%;right:-70px;width:min(18vw,240px);transform:rotate(12deg) } .page-home .dc-svc-speed { bottom:6%;left:1%;width:min(24vw,320px);transform:scaleX(-1) } .page-home .dc-mass-plate { top:50%;right:6%;width:min(16vw,210px);margin-top:calc(min(16vw,210px)/-2);animation:decoSpin 90s linear infinite } .page-home .dc-mass-plate2 { top:50%;left:-90px;width:min(16vw,210px);margin-top:calc(min(16vw,210px)/-2);animation:decoSpinR 100s linear infinite } .page-home .dc-bt-plate { bottom:-160px;right:-150px;width:min(28vw,370px);animation:decoSpin 130s linear infinite;z-index:1 } .page-home .dc-bt-plate2 { top:-150px;left:-140px;width:min(24vw,320px);animation:decoSpinR 150s linear infinite;z-index:1 } .page-home .dc-rev-plate { top:-150px;right:-150px;width:min(30vw,400px);animation:decoSpin 120s linear infinite } .page-home .dc-rev-plate2 { bottom:-170px;left:-150px;width:min(26vw,340px);animation:decoSpinR 130s linear infinite } .page-home .dc-rev-db { top:56%;right:6%;width:min(24vw,320px);transform:rotate(-14deg) } .page-home .dc-gal-plate { top:2%;right:-140px;width:min(28vw,360px);animation:decoSpin 110s linear infinite } .page-home .dc-gal-kb { bottom:-60px;left:-60px;width:min(16vw,210px);transform:rotate(-12deg) } .page-home .dc-gal-speed { top:6%;left:2%;width:min(22vw,300px);transform:scaleX(-1) } .page-home .dc-con-plate { top:-160px;left:-150px;width:min(30vw,390px);animation:decoSpin 130s linear infinite } .page-home .dc-con-plate2 { bottom:-160px;right:-150px;width:min(26vw,340px);animation:decoSpinR 120s linear infinite } .page-home .dc-news-plate { top:50%;right:-130px;width:min(26vw,340px);margin-top:calc(min(26vw,340px)/-2);animation:decoSpin 110s linear infinite } .page-home .dc-news-kb { top:50%;left:-50px;width:min(12vw,150px);transform:translateY(-50%) rotate(-10deg) } .page-home .dc-ft-plate { bottom:-170px;right:-150px;width:min(24vw,320px);animation:decoSpinR 150s linear infinite } @media (prefers-reduced-motion:reduce) { .page-home .deco *, .page-home .deco { animation:none!important } } @media (max-width:768px) { .page-home .deco { opacity:.6 } } .page-home .f4 { background:repeating-linear-gradient(-45deg,#0a0a0a 0 14px,#070707 14px 28px); border-top:1px solid var(--border);position:relative;overflow:hidden } .page-home .f4-body { max-width:980px;margin:0 auto;padding:60px 5vw 28px;text-align:center;position:relative;z-index:2 } .page-home .f4-brand { font-family:'Bebas Neue',sans-serif;font-size:2.1rem;letter-spacing:.06em;color:var(--ink);line-height:1 } .page-home .f4-brand em { font-style:normal;color:var(--red) } .page-home .f4-tag { font-family:'Lora',serif;font-style:italic;font-size:.95rem;color:var(--light);margin-top:10px } .page-home .f4-bar { display:flex;align-items:center;justify-content:center;gap:0;margin:34px auto 30px;max-width:420px } .page-home .f4-bar .rod { flex:1;height:5px;background:#3a3a3a;border-radius:0;position:relative } .page-home .f4-bar .rod::before, .page-home .f4-bar .rod::after { content:'';position:absolute;top:50%;transform:translateY(-50%);width:8px;height:13px;background:#4a4a4a;border-radius:2px } .page-home .f4-bar .rod::before { left:6px } .page-home .f4-bar .rod::after { right:6px } .page-home .f4-plates { display:flex;align-items:center;gap:2px } .page-home .f4-plates i { display:block;border-radius:5px;background:var(--red);transition:transform .25s,box-shadow .25s } .page-home .f4-plates i:nth-child(1) { width:13px;height:38px;background:#7a1216 } .page-home .f4-plates i:nth-child(2) { width:15px;height:54px;background:var(--red-d) } .page-home .f4-plates i:nth-child(3) { width:17px;height:70px } .page-home .f4-plates.r { flex-direction:row-reverse } .page-home .f4:hover .f4-plates i { box-shadow:0 0 18px rgba(237,28,36,.55) } .page-home .f4-nav { display:flex;justify-content:center;flex-wrap:wrap;gap:6px 28px;margin-bottom:26px } .page-home .f4-nav a { color:var(--mid);font-size:.84rem;font-weight:600;text-decoration:none;transition:color .2s } .page-home .f4-nav a:hover { color:var(--red) } .page-home .f4-cta { display:inline-flex;align-items:center;gap:8px;background:var(--red);color:#fff;padding:13px 28px;border-radius:100px;font-weight:800;font-size:.84rem;text-decoration:none;transition:background .2s,transform .2s,box-shadow .2s;margin-bottom:30px } .page-home .f4-cta:hover { background:var(--red-d);transform:translateY(-2px);box-shadow:0 10px 26px rgba(237,28,36,.35) } .page-home .f4-meta { display:flex;justify-content:center;flex-wrap:wrap;gap:8px 22px;font-size:.78rem;color:var(--light);margin-bottom:26px } .page-home .f4-meta a { color:var(--mid);text-decoration:none;font-weight:600 } .page-home .f4-meta a:hover { color:var(--red) } .page-home .f4-meta b { color:var(--red);font-weight:700 } .page-home .f4-legal { border-top:1px solid var(--border);padding-top:20px;font-size:.72rem;color:var(--light);line-height:1.9 } @media(max-width:640px) { .page-home .f4-body { padding:46px 16px 24px } .page-home .f4-bar { max-width:320px } .page-home .f4-plates i:nth-child(3) { height:54px } .page-home .f4-plates i:nth-child(2) { height:42px } .page-home .f4-plates i:nth-child(1) { height:30px } } @media(prefers-reduced-motion:reduce) { .page-home .f4-plates i, .page-home .f4-cta { transition:none } } .page-home .dc-gb-db2 { bottom:8%;right:34%;width:min(20vw,270px);transform:rotate(-16deg) } .page-home .dc-count-kb { top:50%;left:22%;width:min(11vw,140px);transform:translateY(-50%) rotate(-10deg) } .page-home .dc-svc-db { top:44%;left:-100px;width:min(24vw,320px);transform:rotate(-12deg) } .page-home .dc-mass-kb { top:50%;left:32%;width:min(9vw,110px);margin-top:calc(min(9vw,110px)/-1.6);transform:rotate(10deg) } .page-home .dc-bt-db { top:8%;right:24%;width:min(20vw,270px);transform:rotate(-10deg);z-index:1 } .page-home .dc-bt-kb { bottom:6%;left:16%;width:min(11vw,140px);transform:rotate(12deg);z-index:1 } .page-home .dc-rev-kb { top:8%;left:30%;width:min(12vw,150px);transform:rotate(-12deg);animation:decoFloat 9s ease-in-out infinite } .page-home .dc-gal-db { bottom:6%;right:24%;width:min(20vw,270px);transform:rotate(10deg) } .page-home .dc-con-db { top:10%;right:20%;width:min(20vw,270px);transform:rotate(-14deg) } .page-home .dc-con-kb { bottom:8%;left:24%;width:min(11vw,140px);transform:rotate(10deg);animation:decoFloat 8s ease-in-out infinite } .page-home .dc-news-db2 { top:6%;left:22%;width:min(16vw,220px);transform:rotate(-12deg) } .page-home .dc-ft-db { top:20%;left:-90px;width:min(18vw,250px);transform:rotate(14deg) } .page-home .dc-ft-kb { top:10%;right:30%;width:min(9vw,120px);transform:rotate(-10deg) } .page-home .bt-wrap:not(.bt-ready) { height:auto } .page-home .bt-wrap:not(.bt-ready) .bt-pin { position:static;height:auto } .page-home .bt-wrap:not(.bt-ready) .bt-stage { position:static;flex:none;margin-top:36px } .page-home .bt-wrap:not(.bt-ready) .bt-track { position:static;width:auto!important;transform:none!important;display:flex;flex-direction:column;gap:16px;align-items:center } .page-home .bt-wrap:not(.bt-ready) .bt-svg, .page-home .bt-wrap:not(.bt-ready) .bt-cart, .page-home .bt-wrap:not(.bt-ready) .bt-node, .page-home .bt-wrap:not(.bt-ready) .bt-hint { display:none } .page-home .bt-wrap:not(.bt-ready) .bt-card { position:static;transform:none!important;opacity:1;width:100%;max-width:560px } body.page-home { --w-bg:#ffffff;--w-soft:#f7f6f4;--w-ink:#111111; --w-mid:#3d3b39;--w-light:#8a8783;--w-border:#e8e6e2; } .page-home .wk1 { background:var(--w-bg);color:var(--w-ink);padding:96px 5vw;position:relative;overflow:hidden;border-top:4px solid var(--red) } .page-home .wk1-grid { position:absolute;inset:0;background-image:radial-gradient(rgba(17,17,17,.05) 1.3px,transparent 1.6px);background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse 70% 70% at 20% 20%,#000 0%,transparent 70%);mask-image:radial-gradient(ellipse 70% 70% at 20% 20%,#000 0%,transparent 70%);pointer-events:none } .page-home .wk1-inner { max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:start;position:relative;z-index:2 } .page-home .wk1 h2 { color:var(--w-ink) } .page-home .wk1-lede { color:var(--w-mid);font-size:.98rem;line-height:1.8;max-width:44ch;margin-bottom:36px } .page-home .wk1-step { display:flex;gap:18px;padding:20px 0;border-top:1px solid var(--w-border) } .page-home .wk1-step:last-of-type { border-bottom:1px solid var(--w-border) } .page-home .wk1-num { font-family:'Bebas Neue',sans-serif;font-size:2rem;color:var(--red);line-height:1;flex-shrink:0;width:34px } .page-home .wk1-step h4 { font-size:.95rem;font-weight:800;color:var(--w-ink);margin-bottom:5px } .page-home .wk1-step p { font-size:.82rem;line-height:1.7;color:var(--w-mid) } .page-home .wk1-alt { margin-top:28px;font-size:.84rem;color:var(--w-light) } .page-home .wk1-alt a { color:var(--red);font-weight:700;text-decoration:none } .page-home .wk1-alt a:hover { text-decoration:underline } .page-home .wk1-card { position:relative;background:#fff;border:2px solid var(--w-ink);border-radius:16px;overflow:hidden;box-shadow:10px 10px 0 var(--red) } .page-home .wk1-card iframe { display:block;width:100%;height:780px;border:0;background:#fff } .page-home .wk1-card-top { display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--w-ink);color:#fff;padding:14px 20px } .page-home .wk1-card-top .t { font-family:'Bebas Neue',sans-serif;font-size:1.15rem;letter-spacing:.06em } .page-home .wk1-card-top .t em { font-style:normal;color:var(--red) } .page-home .wk1-live { display:inline-flex;align-items:center;gap:7px;font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff } .page-home .wk1-dot { width:8px;height:8px;border-radius:50%;background:var(--red);animation:wk1Blink 1.4s ease-in-out infinite } @keyframes wk1Blink {0%,100%{opacity:1}50%{opacity:.25}} @media(max-width:960px) { .page-home .wk1 { padding:60px 16px } .page-home .wk1-inner { grid-template-columns:1fr;gap:40px } .page-home .wk1-card { box-shadow:6px 6px 0 var(--red) } .page-home .wk1-card iframe { height:1050px } } @media(prefers-reduced-motion:reduce) { .page-home .wk1-dot { animation:none } } /* ── VIDEO TESTIMONIALS (vt6) — white, Clean-Up style ── */ .page-home .vt6 { background:var(--w-bg);border-top:4px solid var(--red);padding:96px 5vw;position:relative;overflow:hidden;color:#111 } .page-home .vt6-inner { max-width:1180px;margin:0 auto;position:relative;z-index:2 } .page-home .vt6-head { display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px;margin-bottom:48px } .page-home .vt6-label { display:inline-block;background:#111;color:#fff;font-size:.66rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;padding:8px 16px;border-radius:6px;margin-bottom:16px } .page-home .vt6-head h2 { font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:clamp(2.6rem,4.8vw,4.2rem);letter-spacing:.02em;line-height:.96;color:#111 } .page-home .vt6-head h2 .ital { font-family:'Lora',serif;font-style:italic;text-transform:none;letter-spacing:0;font-size:.94em;color:var(--red) } .page-home .vt6-live { display:inline-flex;align-items:center;gap:9px;font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:#111;border:2px solid #111;border-radius:100px;padding:10px 20px } .page-home .vt6-dot { width:9px;height:9px;border-radius:50%;background:var(--red);animation:vt6blink 1.4s ease-in-out infinite } @keyframes vt6blink {0%,100%{opacity:1}50%{opacity:.25}} .page-home .vt6-mosaic { display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:220px;gap:26px } .page-home .vt6-tile { display:flex;flex-direction:column;background:#f5f3ef;border:2px solid #111;border-radius:14px;overflow:hidden;box-shadow:6px 6px 0 var(--red);cursor:pointer;text-align:left;font-family:inherit;color:#111;padding:0;transition:transform .25s,box-shadow .25s } .page-home .vt6-tile:hover { transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--red) } .page-home .vt6-tile:focus-visible { outline:3px solid var(--red);outline-offset:4px } .page-home .vt6-visual { position:relative;overflow:hidden;background:#eceae5;display:flex;aspect-ratio:auto;flex:1;min-height:0 } .page-home .vt6-visual img { position:static;width:100%;height:100%;object-fit:cover;filter:grayscale(30%);transition:filter .4s,transform .5s } .page-home .vt6-tile:hover .vt6-visual img { filter:none;transform:scale(1.03) } .page-home .vt6-tag { position:absolute;bottom:12px;left:12px;z-index:2;font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--red);padding:5px 11px;border-radius:100px } .page-home .vt6-play { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:var(--red);border:2px solid #111;display:flex;align-items:center;justify-content:center;transition:transform .25s;z-index:2 } .page-home .vt6-play svg { margin-left:3px } .page-home .vt6-tile:hover .vt6-play { transform:translate(-50%,-50%) scale(1.12) } .page-home .vt6-meta { position:static;display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-top:2px solid #111;background:#f5f3ef } .page-home .vt6-n { font-size:.9rem;font-weight:800;letter-spacing:-.01em;color:#111;text-transform:none } .page-home .vt6-n span { display:block;font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--w-light);margin:3px 0 0 } .page-home .vt6-tile.big { grid-column:span 2;grid-row:span 2 } .page-home .vt6-tile.big .vt6-visual { aspect-ratio:auto;flex:1;min-height:0 } .page-home .vt6-tile.big .vt6-play { width:76px;height:76px } .page-home .vt6-tile.big .vt6-meta { padding:24px 28px;gap:12px } .page-home .vt6-q { font-family:'Lora',serif;font-style:italic;font-size:clamp(1.1rem,1.7vw,1.4rem);line-height:1.5;color:#111;display:block } .page-home .vt6-q::before { content:'“';color:var(--red) } .page-home .vt6-q::after { content:'”';color:var(--red) } .page-home .vt6-tile.big .vt6-n { font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--red) } .page-home .vt6-tile.big .vt6-n span { display:inline;color:var(--w-mid);font-weight:600;letter-spacing:.04em;text-transform:none;margin:0 0 0 8px } @media(max-width:900px) { .page-home .vt6 { padding:64px 16px } .page-home .vt6-mosaic { grid-template-columns:1fr 1fr;gap:20px } .page-home .vt6-tile.big { grid-column:span 2;grid-row:auto } .page-home .vt6-tile.big .vt6-visual { aspect-ratio:16/10;min-height:0;max-height:none;flex:none } .page-home .vt6-tile.big .vt6-visual img { position:static } } @media(max-width:520px) { .page-home .vt6-mosaic { gap:16px } .page-home .vt6-tile { box-shadow:5px 5px 0 var(--red) } .page-home .vt6-tile:hover { box-shadow:7px 7px 0 var(--red) } } .page-home .vt6-lb { position:fixed;inset:0;z-index:500;background:rgba(17,17,17,.92);display:none;align-items:center;justify-content:center;padding:24px } .page-home .vt6-lb.open { display:flex } .page-home .vt6-lb-inner { position:relative;width:min(920px,100%);background:#f5f3ef;border:2px solid #111;border-radius:16px;padding:14px;box-shadow:10px 10px 0 var(--red) } .page-home .vt6-lb video { width:100%;max-height:76vh;border-radius:10px;background:#000;display:block;border:none } .page-home .vt6-lb-close { position:absolute;top:-18px;right:-18px;width:44px;height:44px;border-radius:50%;border:2px solid #111;background:var(--red);color:#fff;font-size:1.05rem;font-weight:800;cursor:pointer;transition:transform .2s } .page-home .vt6-lb-close:hover { transform:scale(1.1) } .page-home .vt6-lb-cap { margin-top:0;padding:12px 6px 2px;font-size:.88rem;font-weight:800;color:#111;text-align:left } .page-home .vt6-lb-cap span { color:var(--w-light);font-weight:600 } .page-home .vt6-lb-cap strong { color:var(--red) } @media(prefers-reduced-motion:reduce) { .page-home .vt6-dot { animation:none } .page-home .vt6-tile, .page-home .vt6-visual img, .page-home .vt6-play { transition-duration:.01ms } } .page-home .gb1 { background: repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 2px, transparent 2px 8px), repeating-linear-gradient(-45deg, rgba(255,255,255,.08) 0 2px, transparent 2px 8px), radial-gradient(ellipse 60% 50% at 85% 15%, rgba(237,28,36,.07), transparent 60%), radial-gradient(ellipse 50% 60% at 5% 90%, rgba(237,28,36,.09), transparent 55%), linear-gradient(160deg, #14090a 0%, #0b0b0b 50%, #060606 100%); border-bottom:1px solid var(--border); padding:110px 5vw; position:relative; overflow:hidden; } .page-home .gb1-inner { max-width:1100px;margin:0 auto;position:relative;z-index:2 } .page-home .gb1-intro { font-size:1.02rem;line-height:1.8;color:var(--mid);max-width:60ch;margin-bottom:56px } .page-home .gb1-intro strong { color:var(--ink) } .page-home .gb1-row { position:relative;display:flex;align-items:center;gap:24px;padding:26px 22px;border-bottom:1px solid var(--border);cursor:default;overflow:hidden;transition:padding-left .35s cubic-bezier(.2,.8,.3,1) } .page-home .gb1-row:first-of-type { border-top:1px solid var(--border) } .page-home .gb1-row::before { content:'';position:absolute;inset:0;background:var(--red);transform:scaleY(0);transform-origin:bottom;transition:transform .35s cubic-bezier(.2,.8,.3,1);z-index:0 } .page-home .gb1-row:hover::before, .page-home .gb1-row:focus-within::before, .page-home .gb1-row:focus::before { transform:scaleY(1) } .page-home .gb1-row:hover, .page-home .gb1-row:focus { padding-left:38px } .page-home .gb1-tag { position:relative;z-index:1;flex-shrink:0;font-size:.62rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--red);border:1px solid rgba(237,28,36,.4);border-radius:100px;padding:6px 14px;transition:all .3s } .page-home .gb1-row:hover .gb1-tag, .page-home .gb1-row:focus .gb1-tag { color:#fff;border-color:rgba(255,255,255,.6) } .page-home .gb1-txt { position:relative;z-index:1;font-family:'Bebas Neue',sans-serif;font-size:clamp(2rem,5.4vw,4.4rem);line-height:1;letter-spacing:.015em;color:var(--ink);transition:color .3s } .page-home .gb1-txt b { font-weight:400;color:var(--red);transition:color .3s } .page-home .gb1-row:hover .gb1-txt, .page-home .gb1-row:hover .gb1-txt b, .page-home .gb1-row:focus .gb1-txt, .page-home .gb1-row:focus .gb1-txt b { color:#fff } .page-home .gb1-desc { position:relative;z-index:1;margin-left:auto;max-width:32ch;font-size:.84rem;line-height:1.6;color:#fff;opacity:0;transform:translateX(24px);transition:opacity .35s .05s,transform .35s .05s cubic-bezier(.2,.8,.3,1) } .page-home .gb1-row:hover .gb1-desc, .page-home .gb1-row:focus .gb1-desc { opacity:1;transform:translateX(0) } .page-home .gb1-arrow { position:relative;z-index:1;flex-shrink:0;opacity:0;transform:translateX(-10px);transition:opacity .3s .1s,transform .3s .1s;color:#fff } .page-home .gb1-row:hover .gb1-arrow, .page-home .gb1-row:focus .gb1-arrow { opacity:1;transform:translateX(0) } @media(max-width:820px) { .page-home .gb1 { padding:70px 16px } .page-home .gb1-row { flex-wrap:wrap;gap:12px;padding:22px 14px } .page-home .gb1-row:hover, .page-home .gb1-row:focus { padding-left:14px } .page-home .gb1-desc { max-width:100%;margin-left:0;flex-basis:100% } .page-home .gb1-arrow { display:none } } @media(prefers-reduced-motion:reduce) { .page-home .gb1 *, .page-home .gb1-row::before { transition-duration:.01ms!important } } .page-home .v2 { background:linear-gradient(180deg,#eef1f5,#f8f9fb);padding:56px 20px } .page-home .v2-head { text-align:center;max-width:640px;margin:0 auto 22px } .page-home .v2-head .k { display:inline-block;color:var(--red);font-weight:800;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:6px } .page-home .v2-head h2 { font-family:'Bebas Neue',sans-serif;font-size:clamp(1.8rem,4vw,2.5rem);letter-spacing:.02em;line-height:1;color:#141416 } .page-home .v2-head h2 .ital { font-family:'Lora',serif;font-style:italic;color:var(--red);text-transform:none } .page-home .v2-tabs { display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:26px } .page-home .sw-tab { border:1px solid #d7dbe1;background:#fff;color:#141416;font-family:inherit;font-weight:800;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;padding:10px 22px;border-radius:100px;cursor:pointer;transition:all .2s } .page-home .sw-tab:hover { border-color:var(--red);color:var(--red) } .page-home .sw-tab.on { background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 6px 18px rgba(237,28,36,.28) } .page-home .sw-tab:focus-visible { outline:2px solid var(--red);outline-offset:3px } .page-home .v2 .panel { display:none;animation:swin .4s ease } .page-home .v2 .panel.on { display:grid } @keyframes swin {from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .page-home .v2 .panel { max-width:960px;margin:0 auto;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px } .page-home .v2-card { background:#fff;border:1px solid #e2e5ea;border-radius:14px;padding:12px 12px 16px;display:flex;flex-direction:column;gap:8px;transition:transform .2s,box-shadow .2s } .page-home .v2-card:hover { transform:translateY(-4px);box-shadow:0 12px 26px rgba(30,35,45,.09) } .page-home .v2 .pimg { background:#fff;border:1px solid #e8ebef;border-radius:12px;overflow:hidden;display:grid;place-items:center;aspect-ratio:1/1 } .page-home .v2 .pimg img { width:100%;height:100%;object-fit:contain;padding:12px } .page-home .v2-card h3 { font-family:'Bebas Neue',sans-serif;font-size:1.15rem;letter-spacing:.02em;padding:0 4px;color:#141416 } .page-home .v2-card p { color:#636972;font-size:.78rem;flex:1;padding:0 4px;margin:0 } .page-home .v2-cta { display:inline-flex;align-items:center;gap:6px;color:var(--red);font-weight:800;font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;text-decoration:none;padding:0 4px } .page-home .v2-cta:hover { text-decoration:underline } .page-home .v2-disc { text-align:center;color:#9aa0a8;font-size:.7rem;margin-top:18px } @media (prefers-reduced-motion:reduce) { .page-home .v2 .panel { animation:none } .page-home .v2-card:hover { transform:none } } /* ════════════════════════════════════════════ ABOUT (/about - warm light theme) ════════════════════════════════════════════ */ body.page-about { --bg:#ffffff;--off:#fff1f2;--paper:#ffffff; --ink:#17171a;--mid:#3d3d42;--light:#75757c; --red:#ED1C24;--red-d:#c4141b; --border:#f0d9db;--shadow:0 16px 42px rgba(23,23,26,.13); --nav-ink:#ffffff;--nav-mid:#f0eeec; } body.page-about { background:var(--bg);color:var(--ink);font-family:'Bricolage Grotesque',sans-serif;overflow-x:clip;-webkit-font-smoothing:antialiased } .page-about .skip-link { position:absolute;left:-9999px;top:0;background:var(--red);color:#fff;padding:10px 18px;border-radius:0 0 8px 0;z-index:999;font-weight:700;font-size:.85rem;text-decoration:none } .page-about .skip-link:focus { left:0 } .page-about .sec-kicker { font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:10px;display:block } .page-about h1, .page-about h2, .page-about h3 { font-family:'Bebas Neue',sans-serif;font-weight:400;letter-spacing:.02em;line-height:.96;color:var(--ink) } .page-about .ital { font-family:'Lora',serif;font-style:italic;text-transform:none;letter-spacing:0;color:var(--red) } .page-about .btn-red { background:var(--red);color:#fff;padding:16px 34px;border-radius:8px;font-weight:700;font-size:.92rem;text-decoration:none;transition:all .25s;display:inline-flex;align-items:center;gap:8px } .page-about .btn-red:hover { background:var(--red-d);transform:translateY(-2px);box-shadow:0 10px 26px rgba(237,28,36,.35) } .page-about .btn-border { color:var(--ink);padding:16px 34px;border-radius:8px;font-weight:600;font-size:.92rem;text-decoration:none;border:1.5px solid var(--border);transition:all .2s;display:inline-flex;align-items:center } .page-about .btn-border:hover { border-color:var(--red);color:var(--red) } .page-about .topbar { background:#000;color:#fff;font-size:.78rem;padding:9px 5vw;border-bottom:1px solid rgba(255,255,255,.08) } .page-about .topbar-inner { max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px } .page-about .topbar a { text-decoration:none;font-weight:700 } .page-about .tb-tag { white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0 } .page-about .tb-tag strong { color:#fff } .page-about .tb-short { display:none } .page-about .tb-actions { display:flex;align-items:center;gap:6px;flex-shrink:0 } .page-about .tb-phone { color:#fff;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;padding:4px 10px;border-radius:100px;transition:color .2s } .page-about .tb-phone svg { color:var(--red);flex-shrink:0 } .page-about .tb-phone:hover { color:var(--red) } .page-about .tb-ico { width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:#fff;border:1px solid rgba(255,255,255,.14);transition:all .2s;flex-shrink:0 } .page-about .tb-ico:hover { color:var(--red);border-color:rgba(237,28,36,.5);background:rgba(237,28,36,.1) } .page-about .tb-ico.red { background:var(--red);border-color:var(--red) } .page-about .tb-ico.red:hover { background:var(--red-d);color:#fff } .page-about .tb-sep { width:1px;height:18px;background:rgba(255,255,255,.15);flex-shrink:0 } @media(max-width:768px) { .page-about .topbar { padding:7px 12px;font-size:.7rem } .page-about .topbar-inner { gap:8px } .page-about .tb-full { display:none } .page-about .tb-short { display:inline-block } .page-about .tb-sep { display:none } .page-about .tb-actions { gap:5px } .page-about .tb-phone { padding:0;width:32px;height:32px;justify-content:center;border-radius:50%;border:1px solid rgba(255,255,255,.14) } .page-about .tb-phone span { display:none } } @media(max-width:380px) { .page-about .topbar { padding:6px 10px } .page-about .tb-short { font-size:.66rem } .page-about .tb-ico, .page-about .tb-phone { width:29px;height:29px } .page-about .tb-actions { gap:4px } } .page-about nav { position:sticky;top:12px;z-index:200;max-width:1280px;margin:14px auto 0;width:calc(100% - 32px);border-radius:18px;background:linear-gradient(90deg,rgba(16,16,16,0.74) 0%,rgba(16,16,16,0.74) 68%,rgba(237,28,36,0.2) 100%);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border:1px solid rgba(255,255,255,0.08);box-shadow:inset 0 1px 0 rgba(255,255,255,0.06),0 1px 2px rgba(0,0,0,0.4),0 12px 32px rgba(0,0,0,0.5);padding:0 28px;min-height:64px;display:flex;align-items:center;justify-content:space-between } @supports not ((backdrop-filter:blur(16px)) or (-webkit-backdrop-filter:blur(16px))) { .page-about nav { background:linear-gradient(90deg,rgba(16,16,16,0.98) 0%,rgba(16,16,16,0.98) 68%,#1c0d0e 100%) } } .page-about .logo { display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0 } .page-about .logo-mark { height:32px;width:auto;display:block;flex-shrink:0 } .page-about .logo-txt { font-family:'Bebas Neue',sans-serif;font-size:1.35rem;font-weight:400;color:var(--nav-ink);letter-spacing:.06em;line-height:1;white-space:nowrap } .page-about .logo-txt em { font-style:normal;color:var(--red) } .page-about .nav-center { display:flex;gap:26px;align-items:center } .page-about .nav-center a { color:var(--nav-mid);text-decoration:none;font-size:.83rem;font-weight:600;transition:color .2s } .page-about .nav-center a:hover { color:var(--nav-ink) } .page-about .nav-center a[aria-current] { color:var(--red) } .page-about .nav-right { display:flex;align-items:center;gap:16px } .page-about .nav-phone { font-size:.83rem;font-weight:700;color:var(--nav-ink);text-decoration:none;display:flex;align-items:center;gap:6px } .page-about .nav-phone svg { color:var(--red) } .page-about .nav-phone:hover { color:var(--red) } .page-about .btn-nav { background:var(--red);color:#fff;padding:11px 24px;border-radius:100px;font-weight:700;font-size:.8rem;text-decoration:none;transition:all .2s;white-space:nowrap } .page-about .btn-nav:hover { background:var(--red-d);transform:translateY(-1px);box-shadow:0 6px 20px rgba(237,28,36,0.4) } .page-about .tpt-burger { display:none;position:relative;width:42px;height:42px;background:none;border:0;cursor:pointer;padding:0;flex-shrink:0;-webkit-tap-highlight-color:transparent } .page-about .tpt-burger .pbar { position:absolute;left:50%;height:2.5px;background:var(--nav-ink);border-radius:99px;transition:all .34s cubic-bezier(.2,.9,.3,1.3) } .page-about .tpt-burger .p1 { width:15px;top:14px;transform:translateX(-50%) } .page-about .tpt-burger .p2 { width:22px;top:20px;transform:translateX(-50%) } .page-about .tpt-burger .p3 { width:15px;top:26px;transform:translateX(-50%) } .page-about .tpt-burger[aria-expanded="true"] .p1 { width:22px;top:20px;background:var(--red);transform:translateX(-50%) rotate(45deg) } .page-about .tpt-burger[aria-expanded="true"] .p2 { opacity:0;transform:translateX(-50%) scaleX(.2) } .page-about .tpt-burger[aria-expanded="true"] .p3 { width:22px;top:20px;background:var(--red);transform:translateX(-50%) rotate(-45deg) } .page-about .tpt-burger:focus-visible { outline:2px solid var(--red);outline-offset:3px;border-radius:10px } .page-about .tpt-menu { position:fixed;top:0;left:0;width:100%;z-index:210;background:rgba(20,20,20,.97);backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);border:1px solid rgba(255,255,255,.1);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.65);padding:12px;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .28s ease,transform .28s ease,visibility 0s linear .28s } .page-about .tpt-grid { display:grid;grid-template-columns:1fr 1fr;gap:8px } .page-about .tpt-menu.open { opacity:1;visibility:visible;transform:translateY(0);transition:opacity .28s ease,transform .28s ease,visibility 0s } .page-about .tpt-tile { display:flex;flex-direction:column;gap:7px;background:#1e1e1e;border:1px solid rgba(255,255,255,.06);border-radius:11px;padding:14px 12px;text-decoration:none;color:var(--nav-ink);font-size:.86rem;font-weight:700;transition:all .2s;opacity:0;transform:translateY(8px) } .page-about .tpt-menu.open .tpt-tile { opacity:1;transform:none;transition:opacity .35s ease,transform .35s cubic-bezier(.2,.9,.3,1.2),background .2s,border-color .2s } .page-about .tpt-tile:hover, .page-about .tpt-tile:focus-visible { background:#262626;border-color:rgba(237,28,36,.4);outline:none } .page-about .tpt-tile svg { color:var(--red) } .page-about .tpt-tile.wide { grid-column:1 / -1;flex-direction:row;align-items:center;gap:10px } .page-about .tpt-cta { display:block;margin-top:8px;background:var(--red);color:#fff;text-align:center;padding:15px;border-radius:11px;font-weight:800;font-size:.92rem;text-decoration:none;transition:background .2s;opacity:0;transform:translateY(8px) } .page-about .tpt-menu.open .tpt-cta { opacity:1;transform:none;transition:opacity .35s ease .3s,transform .35s cubic-bezier(.2,.9,.3,1.2) .3s,background .2s } .page-about .tpt-cta:hover { background:var(--red-d) } .page-about .tpt-backdrop { position:fixed;inset:0;z-index:150;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:opacity .28s ease,visibility 0s linear .28s } .page-about .tpt-backdrop.open { opacity:1;visibility:visible;transition:opacity .28s ease,visibility 0s } @media(prefers-reduced-motion:reduce) { .page-about .tpt-burger .pbar, .page-about .tpt-menu, .page-about .tpt-tile, .page-about .tpt-cta, .page-about .tpt-backdrop { transition-duration:.01ms!important;transition-delay:0s!important } } @media(max-width:900px) { .page-about .nav-center, .page-about .nav-phone, .page-about .btn-nav { display:none!important } .page-about .tpt-burger { display:block } } @media(min-width:901px) { .page-about .tpt-menu, .page-about .tpt-backdrop { display:none } } @media(max-width:400px) { .page-about .logo-mark { height:27px } .page-about .logo-txt { font-size:1.1rem } .page-about .tpt-tile { font-size:.8rem;padding:12px 10px } } /* ════════════════════════════════════════════════ ABOUT HERO - editorial masthead (.ob) + stat rail ════════════════════════════════════════════════ */ .page-about .abm-hero.ob { padding:56px 5vw 84px;background:#fff;border-bottom:1px solid var(--border);position:relative;overflow:hidden } .page-about .ob-inner { max-width:1180px;margin:0 auto;position:relative } /* masthead */ .page-about .ob-topline { display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:.66rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--light);border-bottom:2px solid var(--ink);padding-bottom:12px;margin-bottom:10px } .page-about .ob-topline .red { color:var(--red) } .page-about h1.ob-name { font-size:clamp(3.4rem,8.6vw,10rem);line-height:.94;letter-spacing:.01em;color:var(--ink);margin:0;white-space:nowrap } .page-about .ob-name .out { color:transparent;-webkit-text-stroke:2px var(--ink) } @supports not (-webkit-text-stroke:2px black) { .page-about .ob-name .out { color:var(--ink) } } .page-about .ob-name .red { color:var(--red) } .page-about .ob-sub { display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;border-top:1px solid var(--border);margin-top:8px;padding-top:14px;margin-bottom:44px } .page-about .ob-tag { font-family:'Lora',serif;font-style:italic;font-size:clamp(1.15rem,1.9vw,1.35rem);color:var(--red) } .page-about .ob-loc { font-size:.66rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--light) } /* body grid: photo / copy / stat rail */ .page-about .ob-grid { display:grid;grid-template-columns:5fr 4fr 2.4fr;gap:44px;align-items:stretch } .page-about .ob-photo-wrap { position:relative } .page-about .ob-photo { width:100%;aspect-ratio:4/5;object-fit:cover;display:block;border-radius:4px;box-shadow:var(--shadow) } .page-about .ob-cap { display:flex;justify-content:space-between;gap:10px;font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--light);border-top:2px solid var(--ink);margin-top:12px;padding-top:8px } .page-about .ob-cap b { color:var(--ink) } .page-about .ob-copy { display:flex;flex-direction:column;justify-content:center } .page-about .ob-copy .sec-kicker { margin-bottom:14px } .page-about .ob-desc { font-size:1.02rem;line-height:1.85;color:var(--mid);margin-bottom:14px } .page-about .ob-desc strong { color:var(--ink) } .page-about .ob-desc.drop::first-letter { font-family:'Bebas Neue',sans-serif;font-size:3.2em;float:left;line-height:.8;padding:5px 10px 0 0;color:var(--red) } .page-about .ob-btns { display:flex;gap:12px;flex-wrap:wrap;margin-top:16px } .page-about .ob-trust { display:flex;gap:8px 20px;flex-wrap:wrap;margin-top:22px;padding-top:18px;border-top:1px solid var(--border) } /* vertical stat rail */ .page-about .ob-rail { border-left:2px solid var(--ink);padding-left:26px;display:flex;flex-direction:column;justify-content:space-between } .page-about .ob-rail-h { font-size:.62rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);padding-bottom:10px;border-bottom:1px solid var(--border) } .page-about .ob-rs { padding:14px 0;border-bottom:1px solid var(--border) } .page-about .ob-rs:last-child { border-bottom:none;padding-bottom:0 } .page-about .ob-rs .ci-n { font-family:'Bebas Neue',sans-serif;font-size:2.7rem;line-height:1;color:var(--ink);letter-spacing:.02em } .page-about .ob-rs .ci-n em { font-style:normal;color:var(--red);font-size:.58em;margin-left:2px } .page-about .ob-rs .l { font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-top:4px } .page-about .ob-rs .s { font-size:.7rem;color:var(--light);margin-top:2px } @media (max-width:1020px){ .page-about .ob-grid { grid-template-columns:1fr 1fr } .page-about .ob-rail { grid-column:1 / -1;border-left:none;border-top:2px solid var(--ink);padding-left:0;padding-top:20px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px } .page-about .ob-rail-h { grid-column:1 / -1;border-bottom:none;padding-bottom:0 } .page-about .ob-rs { border-bottom:none;padding:0 } } @media (max-width:700px){ .page-about .abm-hero.ob { padding:40px 5vw 64px } .page-about h1.ob-name { white-space:normal;line-height:.96 } .page-about .ob-topline span:nth-child(2) { display:none } .page-about .ob-grid { grid-template-columns:1fr;gap:34px } .page-about .ob-rail { grid-template-columns:repeat(2,1fr);gap:20px 14px } } .page-about .abm-story { padding:90px 5vw } .page-about .abm-story-inner { max-width:820px;margin:0 auto;text-align:center } .page-about .abm-story h2 { font-size:clamp(2.4rem,4.6vw,4rem);margin-bottom:20px } .page-about .abm-p { color:var(--mid);font-size:1.04rem;line-height:1.8;margin-bottom:18px } .page-about .abm-p strong { color:var(--ink) } .page-about .abm-story .abm-btns { display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:28px } .page-about .ses { background:linear-gradient(135deg,#ED1C24 0%,#b40f16 60%,#7c0a10 100%);padding:100px 5vw;position:relative;overflow:hidden } .page-about .ses::before { content:"GO BEYOND";position:absolute;top:24px;left:50%;transform:translateX(-50%);font-family:'Bebas Neue',sans-serif;font-size:clamp(4rem,12vw,10rem);letter-spacing:.1em;color:rgba(255,255,255,.08);white-space:nowrap;pointer-events:none } .page-about .ses-inner { max-width:1180px;margin:0 auto;position:relative;z-index:1 } .page-about .ses-head { text-align:center;margin-bottom:56px } .page-about .ses-head h2 { color:#fff;font-size:clamp(2.4rem,4.6vw,4rem) } .page-about .ses .sec-kicker { color:#ffd9db } .page-about .ses .ital { color:#ffd9db } .page-about .ses-head p { color:rgba(255,255,255,.85);max-width:52ch;margin:10px auto 0 } .page-about .ses-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:18px } .page-about .ses-step { background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(4px);border-radius:16px;padding:28px 24px;position:relative;transition:all .25s } .page-about .ses-step:hover { transform:translateY(-5px);border-color:#fff;background:rgba(0,0,0,.34) } .page-about .ses-num { font-family:'Bebas Neue',sans-serif;font-size:3rem;color:#ffd9db;line-height:1;display:block;margin-bottom:12px } .page-about .ses-step h3 { color:#fff;font-size:1.4rem;margin-bottom:8px } .page-about .ses-step p { color:rgba(255,255,255,.8);font-size:.86rem;line-height:1.6 } .page-about .ses-step .tag { display:inline-block;margin-top:14px;font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);border-radius:100px;padding:5px 12px } .page-about .faq { border-top:1px solid rgba(237,28,36,.35) } .page-about .faq { padding:100px 5vw } .page-about .faq-inner { max-width:820px;margin:0 auto } .page-about .faq-head { text-align:center;margin-bottom:44px } .page-about .faq-head h2 { font-size:clamp(2.4rem,4.6vw,4rem) } .page-about .faq details { background:var(--paper);border:1px solid var(--border);border-radius:14px;margin-bottom:12px;overflow:hidden;transition:border-color .2s } .page-about .faq details[open] { border-color:rgba(237,28,36,.4) } .page-about .faq summary { list-style:none;cursor:pointer;padding:20px 24px;font-weight:700;font-size:.98rem;display:flex;justify-content:space-between;align-items:center;gap:16px;color:var(--ink) } .page-about .faq summary::-webkit-details-marker { display:none } .page-about .faq summary::after { content:"+";font-family:'Bebas Neue',sans-serif;font-size:1.6rem;color:var(--red);line-height:1;transition:transform .25s;flex-shrink:0 } .page-about .faq details[open] summary::after { transform:rotate(45deg) } .page-about .faq .faq-a { padding:0 24px 22px;color:var(--mid);font-size:.92rem;line-height:1.7 } .page-about .faq .faq-a a { color:var(--red);font-weight:700;text-decoration:none } .page-about .f4 { background:repeating-linear-gradient(-45deg,#0a0a0a 0 14px,#070707 14px 28px); border-top:1px solid var(--border);position:relative;overflow:hidden } .page-about .f4-body { max-width:980px;margin:0 auto;padding:60px 5vw 28px;text-align:center;position:relative;z-index:2 } .page-about .f4-brand { font-family:'Bebas Neue',sans-serif;font-size:2.1rem;letter-spacing:.06em;color:var(--ink);line-height:1 } .page-about .f4-brand em { font-style:normal;color:var(--red) } .page-about .f4-tag { font-family:'Lora',serif;font-style:italic;font-size:.95rem;color:var(--light);margin-top:10px } .page-about .f4-bar { display:flex;align-items:center;justify-content:center;gap:0;margin:34px auto 30px;max-width:420px } .page-about .f4-bar .rod { flex:1;height:5px;background:#3a3a3a;border-radius:0;position:relative } .page-about .f4-bar .rod::before, .page-about .f4-bar .rod::after { content:'';position:absolute;top:50%;transform:translateY(-50%);width:8px;height:13px;background:#4a4a4a;border-radius:2px } .page-about .f4-bar .rod::before { left:6px } .page-about .f4-bar .rod::after { right:6px } .page-about .f4-plates { display:flex;align-items:center;gap:2px } .page-about .f4-plates i { display:block;border-radius:5px;background:var(--red);transition:transform .25s,box-shadow .25s } .page-about .f4-plates i:nth-child(1) { width:13px;height:38px;background:#7a1216 } .page-about .f4-plates i:nth-child(2) { width:15px;height:54px;background:var(--red-d) } .page-about .f4-plates i:nth-child(3) { width:17px;height:70px } .page-about .f4-plates.r { flex-direction:row-reverse } .page-about .f4:hover .f4-plates i { box-shadow:0 0 18px rgba(237,28,36,.55) } .page-about .f4-nav { display:flex;justify-content:center;flex-wrap:wrap;gap:6px 28px;margin-bottom:26px } .page-about .f4-nav a { color:var(--mid);font-size:.84rem;font-weight:600;text-decoration:none;transition:color .2s } .page-about .f4-nav a:hover { color:var(--red) } .page-about .f4-cta { display:inline-flex;align-items:center;gap:8px;background:var(--red);color:#fff;padding:13px 28px;border-radius:100px;font-weight:800;font-size:.84rem;text-decoration:none;transition:background .2s,transform .2s,box-shadow .2s;margin-bottom:30px } .page-about .f4-cta:hover { background:var(--red-d);transform:translateY(-2px);box-shadow:0 10px 26px rgba(237,28,36,.35) } .page-about .f4-meta { display:flex;justify-content:center;flex-wrap:wrap;gap:8px 22px;font-size:.78rem;color:var(--light);margin-bottom:26px } .page-about .f4-meta a { color:var(--mid);text-decoration:none;font-weight:600 } .page-about .f4-meta a:hover { color:var(--red) } .page-about .f4-meta b { color:var(--red);font-weight:700 } .page-about .f4-legal { border-top:1px solid var(--border);padding-top:20px;font-size:.72rem;color:var(--light);line-height:1.9 } @media(max-width:640px) { .page-about .f4-body { padding:46px 16px 24px } .page-about .f4-bar { max-width:320px } .page-about .f4-plates i:nth-child(3) { height:54px } .page-about .f4-plates i:nth-child(2) { height:42px } .page-about .f4-plates i:nth-child(1) { height:30px } } @media(prefers-reduced-motion:reduce) { .page-about .f4-plates i, .page-about .f4-cta { transition:none } } .page-about .abm-cta { background:var(--off);border-top:1px solid var(--border);padding:96px 5vw;text-align:center } .page-about .abm-cta h2 { font-size:clamp(2.4rem,4.6vw,4rem);margin-bottom:14px } .page-about .abm-cta p { color:var(--light);max-width:48ch;margin:0 auto 30px } /* Legacy footer rule — disabled for .f4 (barbell footer) which has its own styles */ .page-about footer:not(.f4) { background:var(--ink);color:#fff;padding:34px 5vw;text-align:center;font-size:.82rem } .page-about footer:not(.f4) a { color:#fff;text-decoration:none;font-weight:700 } .page-about footer:not(.f4) a:hover { color:var(--red) } .page-about footer:not(.f4) .f-tag { color:rgba(255,255,255,.55);margin-top:6px;display:block } @media(max-width:960px) { .page-about .abm-story, .page-about .ses, .page-about .faq { padding:70px 20px } .page-about .ses-grid { grid-template-columns:1fr 1fr } .page-about .btn-red, .page-about .btn-border { justify-content:center } } @media(max-width:560px) { .page-about .ses-grid { grid-template-columns:1fr } } /* timeline of date stops */ .page-home .cmty { background:var(--w-bg);color:var(--w-ink);padding:96px 5vw;border-top:4px solid var(--red);overflow:hidden;position:relative } .page-home .cmty-head { max-width:1180px;margin:0 auto 48px;text-align:center } .page-home .cmty-head h2 { color:var(--w-ink) } .page-home .cmty-lede { font-size:1rem;line-height:1.78;color:var(--w-mid);max-width:58ch;margin:0 auto } .page-home .cmty-lede b { color:var(--w-ink) } .page-home .cmty-timeline { max-width:1180px;margin:0 auto 40px;display:flex;justify-content:center;gap:0;position:relative;flex-wrap:wrap } .page-home .cmty-timeline::before { content:'';position:absolute;left:10%;right:10%;top:9px;height:2px;background:var(--w-border) } .page-home .cmty-stop { position:relative;background:none;border:none;cursor:pointer;font-family:'Bricolage Grotesque',sans-serif;font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--w-light);padding:0 26px;display:flex;flex-direction:column;align-items:center;gap:10px;transition:color .25s } .page-home .cmty-stop .dot { width:20px;height:20px;border-radius:50%;background:var(--w-bg);border:2px solid var(--w-border);transition:all .25s;position:relative;z-index:1 } .page-home .cmty-stop:hover { color:var(--w-mid) } .page-home .cmty-stop:hover .dot { border-color:var(--w-mid) } .page-home .cmty-stop.on { color:var(--w-ink) } .page-home .cmty-stop.on .dot { background:var(--red);border-color:var(--w-ink);box-shadow:3px 3px 0 rgba(237,28,36,.35) } /* slider frame */ .page-home .cmty-slider { max-width:1180px;margin:0 auto;display:flex;align-items:stretch;gap:16px } .page-home .cmty-viewport { overflow:hidden;flex:1;border-radius:16px } .page-home .cmty-track { display:flex;transition:transform .55s cubic-bezier(.22,.61,.36,1) } .page-home .cmty-slide { flex:0 0 100%;display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:center;padding:8px 8px 14px } .page-home .cmty-arrow { align-self:center;flex:0 0 auto;width:48px;height:48px;border-radius:50%;border:2px solid var(--w-ink);background:var(--w-bg);color:var(--w-ink);cursor:pointer;display:grid;place-items:center;box-shadow:4px 4px 0 var(--red);transition:all .25s } .page-home .cmty-arrow:hover { background:var(--red);border-color:var(--red);color:#fff;transform:translate(-1px,-1px);box-shadow:6px 6px 0 rgba(237,28,36,.35) } .page-home .cmty-arrow:disabled { opacity:.25;pointer-events:none } /* photo collage */ .page-home .cmty-photos { display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:1fr 1fr;gap:14px;min-height:340px } .page-home .cmty-ph { position:relative;border-radius:12px;overflow:hidden;border:2px solid var(--w-ink);background:var(--w-soft);box-shadow:6px 6px 0 var(--red);transition:transform .3s } .page-home .cmty-ph:hover { transform:translateY(-5px) } .page-home .cmty-ph.big { grid-row:1/3 } .page-home .cmty-ph img { width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0 } .page-home .cmty-ph .ph { position:absolute;inset:0;display:grid;place-items:center;color:var(--w-light);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:14px } .page-home .cmty-tag { position:absolute;left:10px;bottom:10px;background:var(--red);color:#fff;font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:6px;z-index:1 } /* event info */ .page-home .cmty-date { display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:var(--w-ink);padding:6px 12px;border-radius:6px;margin-bottom:14px } .page-home .cmty-info h3 { font-family:'Bebas Neue',sans-serif;font-size:clamp(1.9rem,3.2vw,2.9rem);font-weight:400;letter-spacing:.02em;line-height:1;color:var(--w-ink);margin-bottom:12px } .page-home .cmty-info h3 em { font-family:'Lora',serif;font-style:italic;color:var(--red) } .page-home .cmty-story { color:var(--w-mid);font-size:1rem;line-height:1.7;margin-bottom:22px } .page-home .cmty-stats { display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px } .page-home .cmty-stat { border:2px solid var(--w-ink);border-radius:12px;padding:16px 10px;background:var(--w-soft);box-shadow:4px 4px 0 var(--red);text-align:center } .page-home .cmty-num { font-family:'Bebas Neue',sans-serif;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1;color:var(--red) } .page-home .cmty-lbl { font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--w-mid);margin-top:6px } .page-home .cmty-btn { display:inline-flex;align-items:center;gap:10px;background:var(--red);color:#fff;font-weight:800;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;padding:13px 24px;border-radius:10px;text-decoration:none;transition:background .25s,transform .25s } .page-home .cmty-btn:hover { background:var(--red-d);transform:translateY(-2px) } @media (max-width:900px) { .page-home .cmty { padding:64px 20px } .page-home .cmty-slide { grid-template-columns:1fr;gap:28px;padding:4px 4px 10px } .page-home .cmty-photos { min-height:280px } .page-home .cmty-arrow { display:none } /* swipe instead on mobile */ .page-home .cmty-timeline::before { left:4%;right:4% } .page-home .cmty-stop { padding:0 14px;font-size:.68rem } } /* ════════════════════════════════════════════════════════════ GREV — Floating Google Reviews badge (bottom-left) Collapsed badge + hover/tap popover. All classes prefixed "grev-" so nothing collides with existing styles. ════════════════════════════════════════════════════════════ */ .grev-float { position:fixed;left:18px;bottom:18px;z-index:300; font-family:'Bricolage Grotesque',sans-serif } /* ── Collapsed badge ── */ .grev-badge { appearance:none;border:0;cursor:pointer;background:#fff;color:#202124; border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,.35); padding:12px 18px 10px;display:flex;flex-direction:column;align-items:center;gap:3px; transition:transform .22s ease, box-shadow .22s ease } .grev-badge:hover, .grev-badge:focus-visible { transform:translateY(-2px);box-shadow:0 12px 34px rgba(0,0,0,.45) } .grev-badge:focus-visible { outline:3px solid var(--red,#ED1C24);outline-offset:3px } .grev-badge-top { display:flex;align-items:center;gap:8px } .grev-glogo { display:block;flex:none } .grev-badge-brand { font-size:.92rem;font-weight:600;color:#202124;white-space:nowrap } .grev-stars { color:#F4770C;font-size:1.05rem;letter-spacing:.14em;line-height:1.2 } .grev-badge-score { font-size:.74rem;color:#5f6368;white-space:nowrap } /* ── Popover panel (opens upward) ── */ .grev-pop { position:absolute;left:0;bottom:calc(100% + 12px); width:min(330px, calc(100vw - 30px)); background:#fff;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.5); opacity:0;visibility:hidden;transform:translateY(10px); transition:opacity .28s ease, transform .28s ease, visibility 0s linear .28s } .grev-float.grev-open .grev-pop { opacity:1;visibility:visible;transform:none; transition:opacity .28s ease, transform .28s ease, visibility 0s } .grev-pop-head { display:flex;align-items:center;gap:12px;padding:14px 14px 12px; border-bottom:1px solid #e8eaed } .grev-pop-score { flex:1;min-width:0 } .grev-pop-top { display:flex;align-items:center;gap:8px } .grev-pop-num { font-size:1.25rem;font-weight:700;color:#F4770C;line-height:1 } .grev-pop-stars { color:#F4770C;font-size:1.05rem;letter-spacing:.12em;line-height:1 } .grev-pop-count { display:block;margin-top:2px;font-size:.68rem;font-weight:600; letter-spacing:.06em;color:#5f6368 } .grev-pop-close { appearance:none;border:0;background:transparent;cursor:pointer; padding:8px;border-radius:50%;color:#5f6368;display:flex; transition:background .2s ease, color .2s ease } .grev-pop-close:hover, .grev-pop-close:focus-visible { background:#f1f3f4;color:#202124 } .grev-pop-close:focus-visible { outline:2px solid var(--red,#ED1C24);outline-offset:2px } /* ── Scrollable review list ── */ .grev-pop-list { max-height:min(52vh, 420px);overflow-y:auto; padding:4px 14px 14px;overscroll-behavior:contain; scrollbar-width:thin;scrollbar-color:#dadce0 transparent } .grev-pop-list::-webkit-scrollbar { width:8px } .grev-pop-list::-webkit-scrollbar-thumb { background:#dadce0;border-radius:99px } .grev-pop-list:focus-visible { outline:2px solid var(--red,#ED1C24);outline-offset:-2px } .grev-r { padding:12px 2px;border-bottom:1px solid #f1f3f4 } .grev-r:last-of-type { border-bottom:0 } .grev-r-head { display:flex;align-items:flex-start;gap:10px } .grev-r-avatar { flex:none;width:38px;height:38px;border-radius:50%; display:flex;align-items:center;justify-content:center; color:#fff;font-size:.82rem;font-weight:700;letter-spacing:.02em } .grev-av1 { background:#4285F4 } .grev-av2 { background:#EA4335 } .grev-av3 { background:#34A853 } .grev-av4 { background:#A142F4 } .grev-av5 { background:#F4770C } .grev-r-id { flex:1;min-width:0;display:flex;flex-direction:column;gap:2px } .grev-r-name { font-size:.88rem;font-weight:600;color:#202124; overflow:hidden;text-overflow:ellipsis;white-space:nowrap } .grev-r-stars { color:#F4770C;font-size:.85rem;letter-spacing:.12em;line-height:1 } .grev-r-date { font-size:.72rem;color:#5f6368 } .grev-r-g { flex:none;margin-top:2px } .grev-r-text { margin:8px 0 0;font-size:.8rem;line-height:1.5;color:#3c4043; display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden } .grev-r-open .grev-r-text { display:block;-webkit-line-clamp:unset;line-clamp:unset } .grev-r-more { appearance:none;border:0;background:transparent;cursor:pointer; padding:4px 0 0;font-family:inherit;font-size:.78rem;font-weight:600;color:#1a73e8 } .grev-r-more:hover, .grev-r-more:focus-visible { text-decoration:underline } .grev-r-more:focus-visible { outline:2px solid #1a73e8;outline-offset:2px } /* ── "See all" button at the bottom of the list ── */ .grev-all { display:block;margin:12px 0 2px;padding:11px 16px;border-radius:100px; background:#1a73e8;color:#fff;text-align:center;text-decoration:none; font-size:.82rem;font-weight:700;transition:background .2s ease, transform .2s ease } .grev-all:hover, .grev-all:focus-visible { background:#1765cc;transform:translateY(-1px) } .grev-all:focus-visible { outline:3px solid #F4770C;outline-offset:2px } /* ── Mobile ── */ @media (max-width:640px) { .grev-float { left:12px;bottom:12px } .grev-badge { padding:10px 14px 9px } .grev-badge-brand { font-size:.85rem } .grev-pop-list { max-height:min(56vh, 380px) } } /* ── Reduced motion ── */ @media (prefers-reduced-motion:reduce) { .grev-badge, .grev-pop, .grev-pop-close, .grev-all { transition:none } .grev-badge:hover, .grev-badge:focus-visible, .grev-all:hover { transform:none } .grev-pop { transform:none } } /* ── NAV DROPDOWNS (Services / Service Areas) ── */ .nav-drop { position:relative;display:flex;align-items:center;height:64px } .nav-drop-btn { background:none;border:0;cursor:pointer;font-family:inherit;color:var(--nav-mid,#f0eeec);font-size:.83rem;font-weight:600;display:inline-flex;align-items:center;gap:5px;padding:0;transition:color .2s;height:100%;-webkit-tap-highlight-color:transparent } .nav-drop-btn svg { transition:transform .22s;flex-shrink:0 } .nav-drop:hover .nav-drop-btn, .nav-drop:focus-within .nav-drop-btn { color:var(--nav-ink,#fff) } .nav-drop:hover .nav-drop-btn svg, .nav-drop:focus-within .nav-drop-btn svg { transform:rotate(180deg) } .nav-drop-btn[aria-current] { color:var(--red) } .nav-drop-panel { position:absolute;top:calc(100% - 6px);left:50%;transform:translate(-50%,8px);min-width:256px;background:rgba(20,20,20,.97);backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);border:1px solid rgba(255,255,255,.1);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.55);padding:10px;opacity:0;visibility:hidden;transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s;z-index:250 } .nav-drop:hover .nav-drop-panel, .nav-drop:focus-within .nav-drop-panel { opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .22s ease,transform .22s ease,visibility 0s } .nav-drop-panel a { display:block;padding:9px 14px;border-radius:9px;color:var(--nav-mid,#f0eeec);font-size:.85rem;font-weight:600;text-decoration:none;transition:all .18s;white-space:nowrap } .nav-drop-panel a:hover, .nav-drop-panel a:focus-visible { background:rgba(237,28,36,.14);color:#fff;outline:none } .nav-drop-panel a[aria-current] { color:var(--red) } .nd-label { display:block;font-size:.64rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.42);padding:10px 14px 4px } .nd-label:first-child { padding-top:6px } .nav-drop-panel.nd-wide { min-width:420px } .nd-cols { display:grid;grid-template-columns:1fr 1fr;gap:0 8px } .nd-foot { margin-top:6px;border-top:1px solid rgba(255,255,255,.08);padding-top:8px } .nd-foot a { color:#ffd9db;font-size:.8rem } @media(max-width:900px){ .nav-drop { display:none } } /* ── MOBILE MENU: grouped link rows under the tile grid ── */ .tpt-sub { margin-top:10px;opacity:0;transform:translateY(8px) } .page-about .tpt-menu.open .tpt-sub { opacity:1;transform:none;transition:opacity .35s ease .2s,transform .35s cubic-bezier(.2,.9,.3,1.2) .2s } .tpt-sub-label { display:block;font-size:.64rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.42);margin:0 2px 7px } .tpt-sub-links { display:flex;flex-wrap:wrap;gap:7px } .tpt-sub-links a { display:inline-block;background:#1e1e1e;border:1px solid rgba(255,255,255,.06);border-radius:99px;padding:8px 14px;color:var(--nav-mid,#f0eeec);font-size:.78rem;font-weight:600;text-decoration:none;transition:all .2s } .tpt-sub-links a:hover, .tpt-sub-links a:focus-visible { background:#262626;border-color:rgba(237,28,36,.4);color:#fff;outline:none } /* ── BREADCRUMBS ── */ .page-about .crumbs { max-width:1180px;margin:0 auto;padding:18px 5vw 0;font-size:.78rem;color:var(--light);display:flex;flex-wrap:wrap;gap:7px;align-items:center;position:relative;z-index:2 } .page-about .crumbs a { color:var(--light);text-decoration:none;font-weight:600;transition:color .2s } .page-about .crumbs a:hover { color:var(--red) } .page-about .crumbs .sep { color:var(--border);user-select:none } .page-about .crumbs .here { color:var(--ink);font-weight:700 } /* ── FEATURED CLIENT QUOTE ── */ .page-about .svc-quote { padding:90px 5vw;background:repeating-linear-gradient(-45deg,#0d0d0d 0 14px,#0a0a0a 14px 28px);border-top:3px solid var(--red);border-bottom:1px solid #1e1e1e } .page-about .svc-quote-inner { max-width:760px;margin:0 auto;text-align:center } .page-about .svc-quote .stars { color:var(--red);letter-spacing:3px;font-size:1.05rem } .page-about .svc-quote blockquote { font-family:'Lora',serif;font-style:italic;font-size:clamp(1.25rem,2.4vw,1.7rem);line-height:1.55;color:#f0eeec;margin:18px 0 22px } .page-about .svc-quote figcaption { display:flex;align-items:center;justify-content:center;gap:12px } .page-about .svc-quote .q-av { width:44px;height:44px;border-radius:50%;background:var(--red);color:#fff;font-weight:800;font-size:.9rem;display:grid;place-items:center;flex-shrink:0 } .page-about .svc-quote .q-who { text-align:left } .page-about .svc-quote .q-name { font-weight:800;font-size:.92rem;color:#fff;display:block } .page-about .svc-quote .q-role { font-size:.78rem;color:#9a9792 } /* ── PILL LINK GRID (related services / areas) ── */ .page-about .xlinks { padding:84px 5vw;background:#101010 } .page-about .xlinks-inner { max-width:1180px;margin:0 auto;text-align:center } .page-about .xlinks h2 { font-size:clamp(2rem,4vw,3.2rem);margin-bottom:8px;color:#fff } .page-about .xlinks > .xlinks-inner > p { color:#b8b5b1;max-width:56ch;margin:0 auto 30px } .page-about .pill-grid { display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:34px } .page-about .pill-grid a { display:inline-flex;align-items:center;gap:7px;border:1.5px solid #2a2a2a;border-radius:99px;padding:11px 20px;color:#f0eeec;font-size:.85rem;font-weight:700;text-decoration:none;transition:all .2s;background:#1a1a1a } .page-about .pill-grid a:hover, .page-about .pill-grid a:focus-visible { border-color:var(--red);color:#fff;background:#221315;transform:translateY(-2px);box-shadow:0 8px 20px rgba(237,28,36,.25);outline:none } .page-about .pill-grid a svg { color:var(--red);flex-shrink:0 } .page-about .xlinks .xl-label { font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#8a8782;display:block;margin:34px 0 14px } .page-about .xlinks .xl-label:first-of-type { margin-top:0 } /* ── LOCAL AREA CARDS ("Where we train in …") ── */ .page-about .loc { padding:96px 5vw } .page-about .loc-inner { max-width:1180px;margin:0 auto } .page-about .loc-head { text-align:center;margin-bottom:48px } .page-about .loc-head h2 { font-size:clamp(2.4rem,4.6vw,4rem) } .page-about .loc-head p { color:var(--light);max-width:58ch;margin:12px auto 0 } .page-about .loc-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px } .page-about .loc-card { background:var(--paper);border:1px solid var(--border);border-radius:16px;padding:26px 24px;transition:all .25s;position:relative } .page-about .loc-card:hover { border-color:rgba(237,28,36,.45);box-shadow:var(--shadow);transform:translateY(-3px) } .page-about .loc-card svg { color:var(--red);margin-bottom:12px } .page-about .loc-card h3 { font-size:1.35rem;margin-bottom:8px } .page-about .loc-card p { color:var(--mid);font-size:.9rem;line-height:1.65 } .page-about .loc-note { text-align:center;margin-top:34px;color:var(--light);font-size:.9rem } .page-about .loc-note a { color:var(--red);font-weight:700;text-decoration:none } /* ── TWO-COLUMN BENEFIT SPLIT (service pages) ── */ .page-about .why { padding:96px 5vw;background:#101010;position:relative;overflow:hidden } .page-about .why::before { content:"";position:absolute;top:-120px;right:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(237,28,36,.14),transparent 65%);pointer-events:none } .page-about .why-inner { max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center } .page-about .why h2 { font-size:clamp(2.4rem,4.6vw,4rem);margin-bottom:18px;color:#fff } .page-about .why-copy p { color:#d9d6d2;line-height:1.75;margin-bottom:16px } .page-about .why-copy p strong { color:#fff } .page-about .why-copy a { color:#ff7176;font-weight:700;text-decoration:none;border-bottom:1.5px solid rgba(237,28,36,.45);transition:all .2s } .page-about .why-copy a:hover { color:#fff;border-color:#fff } .page-about .why-list { display:flex;flex-direction:column;gap:14px } .page-about .why-item { display:flex;gap:14px;background:#1a1a1a;border:1px solid #262626;border-radius:14px;padding:18px 20px;transition:all .25s } .page-about .why-item:hover { border-color:rgba(237,28,36,.55);transform:translateX(4px);box-shadow:0 10px 28px rgba(0,0,0,.5) } .page-about .why-item svg { color:var(--red);flex-shrink:0;margin-top:2px } .page-about .why-item b { display:block;font-size:.95rem;margin-bottom:3px;color:#fff } .page-about .why-item span { font-size:.86rem;color:#b8b5b1;line-height:1.6 } @media(max-width:900px){ .page-about .why-inner { grid-template-columns:1fr;gap:36px } } @media(prefers-reduced-motion:reduce){ .nav-drop-panel, .nav-drop-btn svg, .tpt-sub, .page-about .pill-grid a, .page-about .loc-card, .page-about .why-item { transition-duration:.01ms!important;transition-delay:0s!important } } /* ── INLINE REFERENCE LINKS (light sections) ── */ .page-about .abm-p a, .page-about .hero-desc a, .page-about .loc-card p a { color:var(--red);font-weight:700;text-decoration:none;border-bottom:1.5px solid rgba(237,28,36,.35);transition:all .2s } .page-about .abm-p a:hover, .page-about .hero-desc a:hover, .page-about .loc-card p a:hover { color:var(--red-d);border-color:var(--red-d) } /* ── EMBEDDED GOOGLE MAP ── */ .page-about .gmap { padding:96px 5vw;background:#101010;border-top:1px solid #1e1e1e } .page-about .gmap-inner { max-width:1180px;margin:0 auto } .page-about .gmap-head { text-align:center;margin-bottom:40px } .page-about .gmap-head h2 { font-size:clamp(2.4rem,4.6vw,4rem);color:#fff } .page-about .gmap-head .sec-kicker { color:#ff7176 } .page-about .gmap-head p { color:#b8b5b1;max-width:58ch;margin:12px auto 0 } .page-about .gmap-head p a { color:#ff7176;font-weight:700;text-decoration:none;border-bottom:1.5px solid rgba(237,28,36,.45);transition:all .2s } .page-about .gmap-head p a:hover { color:#fff;border-color:#fff } .page-about .gmap-frame { position:relative;border-radius:22px;overflow:hidden;border:1px solid #262626;box-shadow:0 24px 60px rgba(0,0,0,.55);background:#1a1a1a } .page-about .gmap-frame::before { content:"";position:absolute;inset:0;border-radius:22px;pointer-events:none;box-shadow:inset 0 0 0 3px rgba(237,28,36,.25);z-index:2 } .page-about .gmap-frame iframe { display:block;width:100%;height:440px;border:0;filter:grayscale(38%) contrast(1.05) } .page-about .gmap-badge { position:absolute;top:16px;left:16px;z-index:3;background:rgba(16,16,16,.92);backdrop-filter:blur(8px);border:1px solid rgba(237,28,36,.4);border-radius:12px;padding:12px 18px;color:#fff } .page-about .gmap-badge b { display:block;font-family:'Bebas Neue',sans-serif;font-size:1.25rem;letter-spacing:.04em;line-height:1 } .page-about .gmap-badge span { font-size:.72rem;color:#b8b5b1 } .page-about .gmap-pins { display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:22px } .page-about .gmap-pins a { display:inline-flex;align-items:center;gap:6px;background:#1a1a1a;border:1px solid #2a2a2a;border-radius:99px;padding:8px 15px;color:#d9d6d2;font-size:.78rem;font-weight:600;text-decoration:none;transition:all .2s } .page-about .gmap-pins a svg { color:var(--red) } .page-about .gmap-pins a:hover { border-color:var(--red);color:#fff } @media(max-width:700px){ .page-about .gmap-frame iframe { height:340px } .page-about .gmap { padding:70px 20px } } /* ── SERVICE AREA MAP (map6) ── */ .page-home .map6 { background:var(--w-bg);border-top:4px solid var(--red);padding:96px 5vw;color:#111 } .page-home .map6-inner { max-width:1180px;margin:0 auto } .page-home .map6-head { margin-bottom:36px } .page-home .map6-label { display:inline-block;background:#111;color:#fff;font-size:.66rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;padding:8px 16px;border-radius:6px;margin-bottom:16px } .page-home .map6-head h2 { font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:clamp(2.6rem,4.8vw,4.2rem);letter-spacing:.02em;line-height:.96;color:#111 } .page-home .map6-head h2 .ital { font-family:'Lora',serif;font-style:italic;letter-spacing:0;font-size:.94em;color:var(--red) } .page-home .map6-sub { margin-top:12px;font-size:.95rem;color:var(--w-mid);max-width:520px } .page-home .map6-frame { border:2px solid #111;border-radius:14px;overflow:hidden;box-shadow:8px 8px 0 var(--red);background:#eceae5 } .page-home .map6-frame iframe { display:block;width:100%;height:440px;border:0;filter:grayscale(25%) } @media (max-width:768px){ .page-home .map6 { padding:64px 16px } .page-home .map6-frame iframe { height:320px } } /* ============================================================ SHARED SECTIONS ON ABOUT — match index look (map6, timeline bt-wrap, footer f4 text colors) ============================================================ */ /* ── SERVICE AREA MAP (map6) on About ── */ .page-about .map6 { background:#ffffff;border-top:4px solid var(--red);padding:96px 5vw;color:#111 } .page-about .map6-inner { max-width:1180px;margin:0 auto } .page-about .map6-head { margin-bottom:36px } .page-about .map6-label { display:inline-block;background:#111;color:#fff;font-size:.66rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;padding:8px 16px;border-radius:6px;margin-bottom:16px } .page-about .map6-head h2 { font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:clamp(2.6rem,4.8vw,4.2rem);letter-spacing:.02em;line-height:.96;color:#111 } .page-about .map6-head h2 .ital { font-family:'Lora',serif;font-style:italic;letter-spacing:0;font-size:.94em;color:var(--red) } .page-about .map6-sub { margin-top:12px;font-size:.95rem;color:#3d3b39;max-width:520px } .page-about .map6-frame { border:2px solid #111;border-radius:14px;overflow:hidden;box-shadow:8px 8px 0 var(--red);background:#eceae5 } .page-about .map6-frame iframe { display:block;width:100%;height:440px;border:0;filter:grayscale(25%) } @media (max-width:768px){ .page-about .map6 { padding:64px 16px } .page-about .map6-frame iframe { height:320px } } /* ── TRANSFORMATION TIMELINE (bt-wrap) on About — same dark look as index ── */ .page-about .bt-wrap { position:relative;height:260vh;background:#000 } .page-about .bt-pin { position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;padding:100px 5vw 24px } .page-about .bt-pin::before { content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 0%,rgba(237,28,36,0.07),transparent 70%);pointer-events:none } .page-about .bt-bg { position:absolute;inset:0;opacity:0;transition:opacity .9s ease;pointer-events:none;will-change:opacity } .page-about .bt-bg.on { opacity:1 } .page-about .bt-head { display:flex;justify-content:space-between;align-items:flex-start;gap:24px;max-width:1280px;margin:0 auto;width:100%;position:relative;z-index:2;flex-wrap:wrap } .page-about .bt-eyebrow { font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(237,28,36,0.85);margin-bottom:10px } .page-about .bt-head h2 { color:#ffffff } .page-about .bt-head h2 .ital { color:var(--red) } .page-about .bt-counter { text-align:right;flex-shrink:0 } .page-about .bt-counter-label { font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#ffffff;margin-bottom:4px } .page-about .bt-day { font-family:'Bebas Neue',sans-serif;font-size:2.2rem;color:#ffffff;letter-spacing:.03em;line-height:1 } .page-about .bt-day em { font-style:normal;color:var(--red) } .page-about .bt-phase { font-size:.72rem;font-weight:700;color:rgba(237,28,36,.85);margin-top:4px;letter-spacing:.06em;text-transform:uppercase } .page-about .bt-stage { position:relative;flex:1;min-height:0;margin-top:8px } .page-about .bt-track { position:absolute;inset:0;will-change:transform } .page-about .bt-svg { position:absolute;top:0;left:0;pointer-events:none } .page-about .bt-path-bg { fill:none;stroke:rgba(255,255,255,.1);stroke-width:2;stroke-dasharray:6 8;stroke-linecap:round } .page-about .bt-path-fill { fill:none;stroke:var(--red);stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 8px rgba(237,28,36,.55)) } .page-about .bt-cart { position:absolute;width:18px;height:18px;background:var(--red);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 20px rgba(237,28,36,.85),0 0 40px rgba(237,28,36,.45);z-index:3 } .page-about .bt-node { position:absolute;width:12px;height:12px;background:#000;border:2px solid rgba(237,28,36,.4);border-radius:50%;transform:translate(-50%,-50%);z-index:2;transition:all .3s } .page-about .bt-node.active { background:var(--red);border-color:var(--red);box-shadow:0 0 16px rgba(237,28,36,.65) } .page-about .bt-card { position:absolute;width:280px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:20px 22px;transform:translate(-50%,0);opacity:.35;transition:opacity .4s,border-color .4s;z-index:2 } .page-about .bt-card.above { transform:translate(-50%,calc(-100% - 26px)) } .page-about .bt-card.below { transform:translate(-50%,26px) } .page-about .bt-card.active { opacity:1;border-color:rgba(237,28,36,.35) } .page-about .bt-when { font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:8px } .page-about .bt-card h3 { font-size:1rem;font-weight:800;color:#ffffff;margin-bottom:8px;letter-spacing:-.02em } .page-about .bt-card p { font-size:.78rem;line-height:1.7;color:rgba(255,255,255,.92) } .page-about .bt-tag { display:inline-block;margin-top:12px;background:rgba(237,28,36,0.1);border:1px solid rgba(237,28,36,0.2);padding:4px 11px;border-radius:100px;font-size:.64rem;font-weight:600;color:rgba(237,28,36,.9) } .page-about .bt-cta-card { background:rgba(237,28,36,.08);border-color:rgba(237,28,36,.35) } .page-about .bt-cta-btn { display:inline-block;margin-top:12px;background:var(--red);color:#fff;padding:10px 18px;border-radius:8px;font-size:.74rem;font-weight:700;text-decoration:none } .page-about .bt-hint { text-align:center;font-size:.72rem;font-weight:600;color:rgba(255,255,255,.8);position:relative;z-index:2 } .page-about .bt-hint span { color:var(--red) } .page-about .bt-wrap .deco { position:absolute;pointer-events:none;z-index:0 } .page-about .bt-wrap .deco svg { display:block;width:100%;height:100% } .page-about .dc-bt-plate { bottom:-160px;right:-150px;width:min(28vw,370px);animation:decoSpin 130s linear infinite;z-index:1 } .page-about .dc-bt-plate2 { top:-150px;left:-140px;width:min(24vw,320px);animation:decoSpinR 150s linear infinite;z-index:1 } .page-about .dc-bt-db { top:8%;right:24%;width:min(20vw,270px);transform:rotate(-10deg);z-index:1 } .page-about .dc-bt-kb { bottom:6%;left:16%;width:min(11vw,140px);transform:rotate(12deg);z-index:1 } @media (prefers-reduced-motion:reduce) { .page-about .bt-wrap { height:auto } .page-about .bt-pin { position:static;height:auto } .page-about .bt-stage { display:none } .page-about .bt-hint { display:none } } @media(max-width:768px) { .page-about .bt-card { width:min(280px,82vw) } } .page-about .bt-wrap:not(.bt-ready) { height:auto } .page-about .bt-wrap:not(.bt-ready) .bt-pin { position:static;height:auto } .page-about .bt-wrap:not(.bt-ready) .bt-stage { position:static;flex:none;margin-top:36px } .page-about .bt-wrap:not(.bt-ready) .bt-track { position:static;width:auto!important;transform:none!important;display:flex;flex-direction:column;gap:16px;align-items:center } .page-about .bt-wrap:not(.bt-ready) .bt-svg, .page-about .bt-wrap:not(.bt-ready) .bt-cart, .page-about .bt-wrap:not(.bt-ready) .bt-node, .page-about .bt-wrap:not(.bt-ready) .bt-hint { display:none } .page-about .bt-wrap:not(.bt-ready) .bt-card { position:static;transform:none!important;opacity:1;width:100%;max-width:560px } /* ── FOOTER (f4) text colors on About — force light text on dark footer ── */ .page-about .f4-brand { color:#ffffff !important } .page-about .f4-tag { color:#d9d6d2 !important } .page-about .f4-nav a { color:#f0eeec !important } .page-about .f4-nav a:hover { color:var(--red) !important } .page-about .f4-meta { color:#d9d6d2 !important } .page-about .f4-meta a { color:#f0eeec !important } .page-about .f4-meta a:hover { color:var(--red) !important } .page-about .f4-legal { color:#d9d6d2 !important; border-top-color:#262626 !important } .page-about .f4 { border-top-color:#262626 !important } /* ════════════════════════════════════════════ SERVICE PAGES (shared hero layer) Used by ALL service pages via body class: "page-about page-service page-" Pages: page-in-home, page-online-coaching, page-nutrition, page-couples, page-corporate, page-sports, page-senior, page-weight-loss ════════════════════════════════════════════ */ /* ---- HERO CONTAINER ---- */ .page-service .abm-hero { padding:64px 5vw 0;background:var(--bg);border-bottom:1px solid var(--border);position:relative;overflow:hidden } .page-service .abm-hero::before { content:'';position:absolute;top:-30%;right:-15%;width:60vw;height:60vw;background:radial-gradient(circle,rgba(237,28,36,.07),transparent 60%);pointer-events:none } .page-service .abm-hero-inner { display:grid;grid-template-columns:1.1fr 460px;gap:60px;align-items:end;max-width:1280px;margin:0 auto;position:relative;z-index:1 } /* ---- LEFT COLUMN ---- */ .page-service .hero-left { padding-bottom:72px } .page-service .hero-stars { display:flex;align-items:center;gap:8px;margin-bottom:22px } .page-service .abm-hero .stars { color:#f5a623;font-size:1.1rem;letter-spacing:2px } .page-service .hero-stars-text { font-size:.82rem;font-weight:600;color:var(--mid) } .page-service .hero-stars-text strong { color:var(--ink) } .page-service .abm-hero h1 { font-size:clamp(3.2rem,7vw,6.6rem);line-height:.92;margin-bottom:22px } .page-service .abm-hero h1 .ital { font-size:.6em;display:inline-block } .page-service .hero-desc { font-size:1.05rem;line-height:1.78;color:var(--mid);max-width:52ch;margin-bottom:34px } .page-service .hero-desc strong { color:var(--ink) } .page-service .hero-btns { display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:40px } .page-service .hero-trust-row { display:flex;gap:10px 24px;flex-wrap:wrap;padding-top:26px;border-top:1px solid var(--border) } .page-service .trust-item { display:flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600;color:var(--mid) } .page-service .trust-item svg { color:var(--red);flex-shrink:0 } /* ---- RIGHT COLUMN / PHOTO ---- */ .page-service .hero-right { position:relative;align-self:end } .page-service .hero-photo-wrap { position:relative } .page-service .hero-photo { display:block;width:100%;border-radius:20px 20px 0 0;object-fit:cover;aspect-ratio:4/5;filter:saturate(1.05) contrast(1.04);box-shadow:0 30px 70px rgba(23,23,26,.28) } .page-service .hero-badge { position:absolute;background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px 16px;box-shadow:0 12px 32px rgba(23,23,26,.16);z-index:5;animation:abmFloat 3.4s ease-in-out infinite } .page-service .hero-badge.b1 { top:26px;left:-42px } .page-service .hero-badge.b2 { bottom:110px;right:-30px;animation-delay:1.2s } @keyframes abmFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} } .page-service .hb-num { font-family:'Bebas Neue',sans-serif;font-size:1.5rem;color:var(--ink);line-height:1;letter-spacing:.03em } .page-service .hb-num span { color:var(--red) } .page-service .hb-lbl { font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--light);white-space:nowrap;margin-top:2px } .page-service .hero-name-strip { display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;background:var(--ink);color:#fff;padding:12px 18px;border-radius:0 0 4px 4px } .page-service .hero-name-strip .n { font-weight:800;font-size:.85rem;letter-spacing:.02em } .page-service .hero-name-strip .r { font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#ff7176 } /* ---- DECOS ---- */ .page-service .deco { position:absolute;pointer-events:none;z-index:0 } .page-service .deco svg { display:block;width:100%;height:100% } .page-service .dc-hero-plate { top:50%;right:-170px;width:min(44vw,560px);margin-top:calc(min(44vw,560px)/-2);animation:abmSpin 120s linear infinite } @keyframes abmSpin { to { transform:rotate(360deg) } } .page-service .dc-hero-db { bottom:24px;left:-60px;width:min(34vw,400px) } @media (prefers-reduced-motion:reduce) { .page-service .hero-badge, .page-service .dc-hero-plate { animation:none } } /* ---- RESPONSIVE ---- */ @media (max-width:1020px) { .page-service .abm-hero-inner { grid-template-columns:1fr 380px;gap:40px } .page-service .hero-badge.b1 { left:-16px } .page-service .hero-badge.b2 { right:-12px } } @media (max-width:860px) { .page-service .abm-hero { padding:48px 5vw 0 } .page-service .abm-hero-inner { grid-template-columns:1fr } .page-service .hero-left { padding-bottom:48px } .page-service .hero-right { max-width:440px;margin:0 auto;width:100% } .page-service .dc-hero-plate, .page-service .dc-hero-db { display:none } } @media (max-width:480px) { .page-service .hero-btns { flex-direction:column;align-items:stretch } .page-service .hero-btns .btn-red, .page-service .hero-btns .btn-border { justify-content:center } .page-service .hero-badge.b1 { top:14px;left:10px } .page-service .hero-badge.b2 { bottom:96px;right:10px } } /* ════════════════════════════════════════════ SERVICE HERO — MASTHEAD (Option 1) ════════════════════════════════════════════ */ .page-service .svc-hero { padding:52px 5vw 84px;background:#fff;border-bottom:1px solid var(--border);position:relative;overflow:hidden } .page-service .svc-hero-inner { max-width:1180px;margin:0 auto;position:relative } /* topline rule */ .page-service .svc-topline { display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:.66rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--light);border-bottom:2px solid var(--ink);padding-bottom:12px;margin-bottom:10px } .page-service .svc-topline .red { color:var(--red) } /* full-width one-line headline */ .page-service h1.svc-name { font-size:clamp(2.6rem,8.2vw,9.5rem);line-height:.94;letter-spacing:.01em;color:var(--ink);margin:0;white-space:nowrap } .page-service .svc-name .out { color:transparent;-webkit-text-stroke:2px var(--ink) } @supports not (-webkit-text-stroke:2px black) { .page-service .svc-name .out { color:var(--ink) } } .page-service .svc-name .red { color:var(--red) } /* tagline / location sub row */ .page-service .svc-sub { display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;border-top:1px solid var(--border);margin-top:8px;padding-top:14px } .page-service .svc-tag { font-family:'Lora',serif;font-style:italic;font-size:clamp(1.15rem,1.9vw,1.35rem);color:var(--red) } .page-service .svc-loc { font-size:.66rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--light) } /* intro copy */ .page-service .svc-desc { font-size:1.02rem;line-height:1.8;color:var(--mid);max-width:64ch;margin:22px 0 30px } .page-service .svc-desc strong { color:var(--ink) } .page-service .svc-desc a { color:var(--red);font-weight:700;text-decoration:none;border-bottom:1.5px solid rgba(237,28,36,.35);transition:all .2s } .page-service .svc-desc a:hover { color:var(--red-d);border-color:var(--red-d) } /* wide photo + caption rule */ .page-service .svc-photo-wrap { position:relative } .page-service .svc-photo { display:block;width:100%;aspect-ratio:21/9;object-fit:cover;object-position:center 30%;border-radius:4px;box-shadow:var(--shadow);filter:saturate(1.05) contrast(1.04) } .page-service .svc-cap { display:flex;justify-content:space-between;gap:10px;font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--light);border-top:2px solid var(--ink);margin-top:12px;padding-top:8px } .page-service .svc-cap b { color:var(--ink) } /* stat strip + CTAs */ .page-service .svc-row { display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;border-top:2px solid var(--ink);margin-top:26px;padding-top:22px } .page-service .svc-stats { display:flex;gap:38px;flex-wrap:wrap } .page-service .svc-stat .num { font-family:'Bebas Neue',sans-serif;font-size:2.7rem;line-height:1;color:var(--ink);letter-spacing:.02em;display:block } .page-service .svc-stat .num em { font-style:normal;color:var(--red);font-size:.55em;margin-left:2px } .page-service .svc-stat .l { font-size:.64rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-top:4px;display:block } .page-service .svc-btns { display:flex;gap:12px;flex-wrap:wrap } @media (max-width:900px){ .page-service .svc-stats { gap:26px } .page-service .svc-stat .num { font-size:2.2rem } } @media (max-width:700px){ .page-service .svc-hero { padding:40px 5vw 64px } .page-service h1.svc-name { white-space:normal;line-height:.96 } .page-service .svc-topline span:first-child { display:none } .page-service .svc-photo { aspect-ratio:16/9 } .page-service .svc-row { flex-direction:column;align-items:stretch } .page-service .svc-stats { display:grid;grid-template-columns:1fr 1fr;gap:18px } .page-service .svc-btns { flex-direction:column } .page-service .svc-btns .btn-red, .page-service .svc-btns .btn-border { justify-content:center } } /* ════════════════════════════════════════════ SERVICE HERO — POSTCARD DUO (Online Coaching) Reuses the masthead layer; adds tilted cards. ════════════════════════════════════════════ */ .page-service .svc-cards { display:grid;grid-template-columns:5fr 4.6fr;align-items:center;max-width:920px;margin:6px auto 0;position:relative } .page-service .svc-card-photo { background:#fff;border:1px solid var(--border);border-radius:12px;padding:10px;box-shadow:var(--shadow);transform:rotate(-3deg);position:relative;z-index:1;transition:transform .3s } .page-service .svc-card-photo img { display:block;width:100%;aspect-ratio:4/4.4;object-fit:cover;object-position:center top;border-radius:8px } .page-service .svc-card-photo .cap { display:block;font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--light);padding:9px 4px 2px } .page-service .svc-card-photo:hover { transform:rotate(-1.5deg) } .page-service .svc-card-plan { background:var(--red);border-radius:14px;padding:26px 28px;color:#fff;box-shadow:0 22px 48px rgba(237,28,36,.32);transform:rotate(2.5deg);margin-left:-56px;position:relative;z-index:2;transition:transform .3s } .page-service .svc-card-plan:hover { transform:rotate(1deg) } .page-service .svc-card-plan .plan-label { font-size:.64rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#ffd9db;display:block;margin-bottom:14px } .page-service .svc-card-plan ul { list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px } .page-service .svc-card-plan li { display:flex;align-items:center;gap:10px;font-size:.92rem;font-weight:600 } .page-service .svc-card-plan li svg { flex-shrink:0;color:#ffd9db } /* stamp-style stats */ .page-service .svc-stamps { display:flex;gap:12px;flex-wrap:wrap } .page-service .svc-stamp { border:1.5px dashed rgba(237,28,36,.45);border-radius:6px;padding:10px 16px;text-align:center } .page-service .svc-stamp .num { font-family:'Bebas Neue',sans-serif;font-size:1.9rem;line-height:1;color:var(--ink);display:block } .page-service .svc-stamp .num em { font-style:normal;color:var(--red);font-size:.6em;margin-left:2px } .page-service .svc-stamp .l { font-size:.58rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--light);margin-top:4px;display:block } @media (max-width:900px){ .page-service .svc-cards { grid-template-columns:1fr 1fr } .page-service .svc-card-plan { margin-left:-34px;padding:20px 22px } .page-service .svc-card-plan li { font-size:.84rem } } @media (max-width:640px){ .page-service .svc-cards { grid-template-columns:1fr;max-width:420px } .page-service .svc-card-photo { transform:rotate(-2deg) } .page-service .svc-card-plan { margin-left:0;margin-top:-26px;transform:rotate(1.5deg);width:88%;justify-self:end } .page-service .svc-stamps { justify-content:center;width:100% } } /* ════════════════════════════════════════════ SERVICE HERO — COACHING FACTS (Nutrition) Reuses the masthead layer; adds facts label. Photo and label are locked to equal height. ════════════════════════════════════════════ */ .page-service .svc-facts-grid { display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:stretch;max-width:920px;margin:6px auto 0 } .page-service .svc-facts-photo { position:relative;min-height:420px } .page-service .svc-facts-photo img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;border-radius:6px;box-shadow:var(--shadow);filter:saturate(1.05) contrast(1.04) } /* the label panel */ .page-service .svc-facts { border:2.5px solid var(--ink);border-radius:6px;padding:18px 20px;background:#fff;display:flex;flex-direction:column } .page-service .sf-title { font-family:'Bebas Neue',sans-serif;font-size:2.1rem;line-height:1;color:var(--ink);letter-spacing:.02em } .page-service .sf-serving { font-size:.78rem;color:var(--mid);border-bottom:9px solid var(--ink);padding:4px 0 8px } .page-service .sf-rows { flex:1;display:flex;flex-direction:column;justify-content:space-evenly } .page-service .sf-row { display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:.9rem;font-weight:700;color:var(--ink);border-bottom:1px solid var(--border);padding:8px 0 } .page-service .sf-row.thick { border-bottom:3.5px solid var(--ink) } .page-service .sf-row.last { border-bottom:3.5px solid var(--ink) } .page-service .sf-row .red { color:var(--red) } .page-service .sf-note { font-size:.7rem;color:var(--light);line-height:1.55;padding-top:10px } @media (max-width:820px){ .page-service .svc-facts-grid { grid-template-columns:1fr;max-width:520px } .page-service .svc-facts-photo { min-height:300px } .page-service .svc-facts-photo img { position:static;height:auto;aspect-ratio:16/10 } .page-service .sf-row { font-size:.84rem;padding:7px 0 } } /* ════════════════════════════════════════════ SERVICE HERO — BOX SCORE (Couples Training) Reuses the masthead layer; adds scorecard. ════════════════════════════════════════════ */ .page-service .svc-score-photo { max-width:920px;margin:6px auto 0 } .page-service .svc-score-photo img { display:block;width:100%;aspect-ratio:16/8;object-fit:cover;object-position:center 30%;border-radius:6px;box-shadow:var(--shadow);filter:saturate(1.05) contrast(1.04) } .page-service .svc-score { max-width:920px;margin:16px auto 0;border:2px solid var(--ink);border-radius:6px;overflow:hidden;background:#fff } .page-service .sc-head { display:grid;grid-template-columns:1.6fr .8fr .8fr .6fr;gap:8px;background:var(--ink);color:#fff;font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:9px 16px } .page-service .sc-head span:nth-child(2), .page-service .sc-head span:nth-child(3) { text-align:center } .page-service .sc-head span:last-child { text-align:right } .page-service .sc-row { display:grid;grid-template-columns:1.6fr .8fr .8fr .6fr;gap:8px;align-items:center;font-size:.92rem;padding:11px 16px;border-bottom:1px solid var(--border) } .page-service .sc-row:last-child { border-bottom:none } .page-service .sc-row span:first-child { font-weight:700;color:var(--ink) } .page-service .sc-row .ck { text-align:center;color:var(--red);font-weight:800;font-size:1rem } .page-service .sc-row span:nth-child(2), .page-service .sc-row span:nth-child(3) { text-align:center;color:var(--light) } .page-service .sc-row .res { text-align:right;font-family:'Bebas Neue',sans-serif;font-size:1.4rem;line-height:1;color:var(--ink) } .page-service .sc-row.loss { background:#fdeeee } .page-service .sc-row.loss span:first-child { color:var(--red) } .page-service .sc-row.loss .res { color:var(--red) } @media (max-width:640px){ .page-service .sc-head { grid-template-columns:1.6fr .6fr .6fr .5fr;font-size:.54rem;padding:8px 12px } .page-service .sc-head span:first-child { white-space:nowrap;overflow:hidden;text-overflow:ellipsis } .page-service .sc-row { grid-template-columns:1.6fr .6fr .6fr .5fr;font-size:.8rem;padding:9px 12px } .page-service .sc-row .res { font-size:1.15rem } .page-service .svc-score-photo img { aspect-ratio:16/10 } } /* ════════════════════════════════════════════ SERVICE HERO — OFFICE MEMO (Corporate/Group) Reuses the masthead layer; adds memo panel. ════════════════════════════════════════════ */ .page-service .svc-memo-photo { max-width:920px;margin:6px auto 0 } .page-service .svc-memo-photo img { display:block;width:100%;aspect-ratio:16/7.5;object-fit:cover;object-position:center 30%;border-radius:6px;box-shadow:var(--shadow);filter:saturate(1.05) contrast(1.04) } .page-service .svc-memo { position:relative;max-width:720px;margin:16px auto 0;background:#fdfcf9;border:1px solid #d9d4c7;border-radius:3px;padding:22px 26px;font-family:'Courier New',Courier,monospace;box-shadow:0 14px 34px rgba(23,23,26,.1);transform:rotate(-.6deg) } .page-service .memo-head { text-align:center;font-size:.72rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--ink);border-bottom:2px solid var(--ink);padding-bottom:10px } .page-service .memo-fields { display:flex;flex-direction:column;gap:6px;font-size:.86rem;color:var(--ink);margin-top:14px } .page-service .memo-fields span { color:var(--light);display:inline-block;min-width:58px } .page-service .memo-fields b { font-weight:700 } .page-service .memo-body { font-size:.86rem;color:var(--mid);line-height:1.75;border-top:1.5px dashed #b4ae9e;margin-top:12px;padding-top:12px } .page-service .memo-stamp { position:absolute;right:22px;top:64px;transform:rotate(-11deg);border:3px solid var(--red);border-radius:5px;color:var(--red);font-family:'Bricolage Grotesque',sans-serif;font-size:.82rem;font-weight:800;letter-spacing:.18em;padding:6px 12px;opacity:.88;pointer-events:none } @media (max-width:640px){ .page-service .svc-memo { padding:18px;transform:none } .page-service .memo-fields { font-size:.78rem } .page-service .memo-body { font-size:.78rem } .page-service .memo-stamp { right:12px;top:auto;bottom:14px;font-size:.7rem;padding:4px 9px } .page-service .svc-memo-photo img { aspect-ratio:16/9 } } /* ════════════════════════════════════════════ SERVICE HERO — COUNTDOWN (Sports Performance) Reuses the masthead layer; adds prep strip. ════════════════════════════════════════════ */ .page-service .svc-count-photo { max-width:920px;margin:6px auto 0 } .page-service .svc-count-photo img { display:block;width:100%;aspect-ratio:16/7.5;object-fit:cover;object-position:center 30%;border-radius:6px;box-shadow:var(--shadow);filter:saturate(1.05) contrast(1.04) } .page-service .svc-count { max-width:920px;margin:16px auto 0;border:2px solid var(--ink);border-radius:6px;overflow:hidden;background:#fff } .page-service .ct-head { display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--ink);color:#fff;font-size:.62rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;padding:9px 16px } .page-service .ct-head .red { color:#ff7176 } .page-service .ct-blocks { display:grid;grid-template-columns:repeat(4,1fr) } .page-service .ct-block { text-align:center;padding:18px 10px;border-right:1px solid var(--border);transition:background .2s } .page-service .ct-block:hover { background:var(--off) } .page-service .ct-block:last-child { border-right:none } .page-service .ct-block .num { font-family:'Bebas Neue',sans-serif;font-size:2.1rem;line-height:1;color:var(--ink);display:block;letter-spacing:.02em } .page-service .ct-block .u { font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--light);display:block;margin-top:4px } .page-service .ct-block .job { font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);display:block;margin-top:7px } .page-service .ct-block.day0 { background:var(--red);color:#fff } .page-service .ct-block.day0:hover { background:var(--red-d) } .page-service .ct-block.day0 .num { color:#fff } .page-service .ct-block.day0 .u { color:#ffd9db } .page-service .ct-block.day0 .job { color:#fff } @media (max-width:640px){ .page-service .ct-blocks { grid-template-columns:repeat(2,1fr) } .page-service .ct-block { border-bottom:1px solid var(--border) } .page-service .ct-block:nth-child(2n) { border-right:none } .page-service .ct-block:nth-child(n+3) { border-bottom:none } .page-service .ct-block .num { font-size:1.8rem } .page-service .svc-count-photo img { aspect-ratio:16/9 } } /* ════════════════════════════════════════════ SERVICE HERO — STILL ON THE LIST (Senior) Reuses the masthead layer; adds the list card. Photo and list are locked to equal height. ════════════════════════════════════════════ */ .page-service .svc-list-grid { display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:stretch;max-width:920px;margin:6px auto 0 } .page-service .svc-list-photo { position:relative;min-height:400px } .page-service .svc-list-photo img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;border-radius:6px;box-shadow:var(--shadow);filter:saturate(1.05) contrast(1.04) } .page-service .svc-list { background:#fdfcf7;border:1px solid #e0dcd0;border-radius:6px;padding:24px 26px;display:flex;flex-direction:column;box-shadow:0 14px 34px rgba(23,23,26,.09) } .page-service .sl-title { font-family:'Lora',serif;font-style:italic;font-size:1.3rem;color:var(--ink);border-bottom:1.5px dashed #b4b2a9;padding-bottom:12px } .page-service .sl-rows { flex:1;display:flex;flex-direction:column;justify-content:space-evenly;padding:8px 0 } .page-service .sl-row { display:flex;align-items:center;gap:14px;font-size:1.02rem;font-weight:600;color:var(--ink);padding:6px 0 } .page-service .sl-row .ck { color:var(--red);font-weight:800;font-size:1.15rem;flex-shrink:0 } .page-service .sl-note { font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--light);border-top:1.5px dashed #b4b2a9;padding-top:12px } @media (max-width:820px){ .page-service .svc-list-grid { grid-template-columns:1fr;max-width:520px } .page-service .svc-list-photo { min-height:280px } .page-service .svc-list-photo img { position:static;height:auto;aspect-ratio:16/10 } .page-service .svc-list { padding:20px } .page-service .sl-row { font-size:.94rem } } /* ════════════════════════════════════════════ SERVICE HERO — THE EQUATION (Weight Loss) Reuses the masthead layer; adds the formula. ════════════════════════════════════════════ */ .page-service .svc-eq { text-align:center;margin-top:26px } .page-service .eq-terms { display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap } .page-service .eq-term { display:inline-block;border:2px solid var(--ink);border-radius:8px;padding:13px 22px;font-family:'Bebas Neue',sans-serif;font-size:1.5rem;letter-spacing:.05em;color:var(--ink);text-decoration:none;line-height:1;transition:all .2s } .page-service a.eq-term:hover { border-color:var(--red);color:var(--red);transform:translateY(-2px);box-shadow:0 8px 20px rgba(237,28,36,.18) } .page-service .eq-op { font-family:'Lora',serif;font-size:1.6rem;color:var(--red) } .page-service .eq-answer { display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px } .page-service .eq-answer .eq-op { font-size:2rem } .page-service .eq-result { display:inline-block;background:var(--red);color:#fff;border-radius:8px;padding:15px 30px;font-family:'Bebas Neue',sans-serif;font-size:1.9rem;letter-spacing:.06em;line-height:1;box-shadow:0 16px 36px rgba(237,28,36,.3) } .page-service .eq-proof { font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--light);margin-top:16px } .page-service .svc-eq-photo { max-width:920px;margin:22px auto 0 } .page-service .svc-eq-photo img { display:block;width:100%;aspect-ratio:16/7;object-fit:cover;object-position:center 30%;border-radius:6px;box-shadow:var(--shadow);filter:saturate(1.05) contrast(1.04) } @media (max-width:700px){ .page-service .eq-terms { gap:8px } .page-service .eq-term { font-size:1.1rem;padding:10px 14px } .page-service .eq-op { font-size:1.2rem } .page-service .eq-answer .eq-op { font-size:1.5rem } .page-service .eq-result { font-size:1.4rem;padding:12px 20px } .page-service .svc-eq-photo img { aspect-ratio:16/9 } } /* ===== Mobile menu: segmented card (all pages) ===== */ .tpt-seg { border:1px solid rgba(255,255,255,.12); border-radius:12px; overflow:hidden; } .tpt-seg-row { display:flex; align-items:center; gap:10px; color:#fff; font-size:.86rem; font-weight:700; text-decoration:none; padding:13px 14px; border-bottom:1px solid rgba(255,255,255,.08); transition:background .2s; -webkit-tap-highlight-color:transparent; } .tpt-seg-row:last-child { border-bottom:0 } .tpt-seg-row:active, .tpt-seg-row:hover { background:rgba(255,255,255,.05) } .tpt-seg-row svg { color:var(--red); flex-shrink:0 } .tpt-seg-acc { border-bottom:1px solid rgba(255,255,255,.08); transition:background .25s } .tpt-seg-acc:has(.tpt-seg-btn[aria-expanded="true"]) { background:rgba(237,28,36,.08) } .tpt-seg-btn { display:flex; align-items:center; gap:10px; width:100%; background:none; border:0; cursor:pointer; text-align:left; color:#fff; font-size:.86rem; font-weight:700; font-family:inherit; padding:13px 14px; -webkit-tap-highlight-color:transparent; } .tpt-seg-btn > svg:first-child { color:var(--red); flex-shrink:0 } .tpt-seg-count { background:var(--red); color:#fff; font-size:.62rem; font-weight:700; padding:2px 8px; border-radius:99px; line-height:1.4; } .tpt-seg-count.outline { background:none; border:1px solid var(--red); color:var(--red) } .tpt-seg-chev { margin-left:auto; color:rgba(255,255,255,.55); transition:transform .25s ease, color .25s } .tpt-seg-btn[aria-expanded="true"] .tpt-seg-chev { transform:rotate(180deg); color:var(--red) } .tpt-seg-panel { display:grid; grid-template-rows:0fr; overflow:hidden; transition:grid-template-rows .3s ease; } .tpt-seg-btn[aria-expanded="true"] + .tpt-seg-panel { grid-template-rows:1fr } .tpt-seg-links { min-height:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1px; background:rgba(255,255,255,.07); border-top:1px solid rgba(255,255,255,.08); } .tpt-seg-links a { background:#1b1919; color:rgba(255,255,255,.88); text-decoration:none; font-size:.76rem; font-weight:600; padding:9px 14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:background .2s, color .2s; -webkit-tap-highlight-color:transparent; } .tpt-seg-links a:active, .tpt-seg-links a:hover { background:rgba(237,28,36,.16); color:#fff } /* Menu scrolls instead of clipping on short screens */ .tpt-menu { max-height:calc(100vh - 16px); max-height:calc(100dvh - 16px); overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain } /* ---- PER-PAGE OVERRIDES (only if one page needs a tweak) ---- */ /* .page-in-home { } */ /* .page-online-coaching { } */ /* .page-nutrition { } */ /* .page-couples { } */ /* .page-corporate { } */ /* .page-sports { } */ /* .page-senior { } */ /* .page-weight-loss { } */ :root{ --tpt-gold:#d69a45; --tpt-gold-soft:rgba(214,154,69,.45); --tpt-ink:#070707; --tpt-bone:#f4ecdd; } .tptb{position:fixed;right:20px;bottom:20px;z-index:9999; font-family:'Segoe UI',system-ui,-apple-system,sans-serif; display:flex;flex-direction:column;align-items:flex-end} .tptb__main{position:relative;width:72px;height:72px;border-radius:50%; border:0;padding:0;cursor:pointer;background:transparent;-webkit-tap-highlight-color:transparent} .tptb__main:focus-visible{outline:3px solid var(--tpt-gold);outline-offset:4px;border-radius:50%} .tptb__halo{position:absolute;inset:-6px;border-radius:50%; background:conic-gradient(from 0deg, var(--tpt-gold-soft) 0deg 6deg, transparent 6deg 18deg, var(--tpt-gold-soft) 18deg 24deg, transparent 24deg 36deg, var(--tpt-gold-soft) 36deg 42deg, transparent 42deg 54deg, var(--tpt-gold-soft) 54deg 60deg, transparent 60deg 72deg, var(--tpt-gold-soft) 72deg 78deg, transparent 78deg 90deg, var(--tpt-gold-soft) 90deg 96deg, transparent 96deg 108deg, var(--tpt-gold-soft) 108deg 114deg, transparent 114deg 126deg, var(--tpt-gold-soft) 126deg 132deg, transparent 132deg 144deg, var(--tpt-gold-soft) 144deg 150deg, transparent 150deg 162deg, var(--tpt-gold-soft) 162deg 168deg, transparent 168deg 180deg, var(--tpt-gold-soft) 180deg 186deg, transparent 186deg 198deg, var(--tpt-gold-soft) 198deg 204deg, transparent 204deg 216deg, var(--tpt-gold-soft) 216deg 222deg, transparent 222deg 234deg, var(--tpt-gold-soft) 234deg 240deg, transparent 240deg 252deg, var(--tpt-gold-soft) 252deg 258deg, transparent 258deg 270deg, var(--tpt-gold-soft) 270deg 276deg, transparent 276deg 288deg, var(--tpt-gold-soft) 288deg 294deg, transparent 294deg 306deg, var(--tpt-gold-soft) 306deg 312deg, transparent 312deg 324deg, var(--tpt-gold-soft) 324deg 330deg, transparent 330deg 342deg, var(--tpt-gold-soft) 342deg 348deg, transparent 348deg 360deg); -webkit-mask:radial-gradient(circle,transparent 58%,#000 60%); mask:radial-gradient(circle,transparent 58%,#000 60%); animation:tptb-spin 24s linear infinite;opacity:.9} .tptb__disc{position:absolute;inset:0;border-radius:50%; background:radial-gradient(circle at 50% 34%,#1b1b1b,var(--tpt-ink) 70%); border:1.5px solid var(--tpt-gold);display:grid;place-items:center; box-shadow:0 6px 20px rgba(0,0,0,.6),0 0 26px var(--tpt-gold-soft); transition:box-shadow .3s ease} .tptb__main:hover .tptb__disc{box-shadow:0 6px 20px rgba(0,0,0,.6),0 0 42px var(--tpt-gold-soft)} .tptb__disc img{width:46px;height:auto;display:block; filter:drop-shadow(0 0 6px rgba(214,154,69,.35))} .tptb__pulse{position:absolute;inset:0;border-radius:50%;border:2px solid var(--tpt-gold); animation:tptb-ping 2.2s ease-out .8s 2;opacity:0;pointer-events:none} @keyframes tptb-spin{to{transform:rotate(360deg)}} @keyframes tptb-ping{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}} .tptb__list{list-style:none;margin:0 0 14px;padding:0; display:flex;flex-direction:column;gap:10px;align-items:flex-end} .tptb__item{opacity:0;transform:translateY(10px) scale(.96);pointer-events:none; transition:opacity .24s ease,transform .24s ease} .tptb.is-open .tptb__item{opacity:1;transform:none;pointer-events:auto} .tptb.is-open .tptb__item:nth-child(1){transition-delay:.12s} .tptb.is-open .tptb__item:nth-child(2){transition-delay:.08s} .tptb.is-open .tptb__item:nth-child(3){transition-delay:.04s} .tptb__act{display:flex;align-items:center;gap:10px;text-decoration:none; background:rgba(10,10,10,.94);border:1px solid #3d3d3d;color:var(--tpt-bone); padding:11px 18px;border-radius:999px;font-size:13px;font-weight:600; letter-spacing:.12em;text-transform:uppercase;white-space:nowrap; box-shadow:0 4px 14px rgba(0,0,0,.55);backdrop-filter:blur(4px); transition:border-color .2s ease,color .2s ease} .tptb__act:hover{border-color:var(--tpt-gold);color:var(--tpt-gold)} .tptb__act:focus-visible{outline:3px solid var(--tpt-gold);outline-offset:2px} .tptb__act svg{width:16px;height:16px;flex:none} .tptb__act--gold{background:linear-gradient(180deg,#e3ab55,var(--tpt-gold)); border-color:var(--tpt-gold);color:var(--tpt-ink); box-shadow:0 4px 16px rgba(0,0,0,.55),0 0 18px var(--tpt-gold-soft)} .tptb__act--gold:hover{color:var(--tpt-ink);filter:brightness(1.08)} @media (max-width:560px){ .tptb{right:14px;bottom:14px} .tptb__main{width:64px;height:64px} .tptb__disc img{width:40px} } @media (prefers-reduced-motion:reduce){ .tptb__halo{animation:none} .tptb__pulse{animation:none} .tptb__item{transition:opacity .15s ease} }