/* === SCROLL INTEGRITY (touch-safe) === body must never be a scroll container. Base CSS set body{overflow-x:hidden} -> computed overflow-y:auto -> body becomes the scroller, breaking touch scrolling. Clip horizontal at instead. */ html{overflow-x:hidden} body{overflow:visible!important;height:auto!important;min-height:100%} /* ===================================================================== Quantum — enhancement layer ("wow") . Static, no-JS, brand-consistent. Uses existing tokens: --pine-deep --pine --paper --ink --red/--ember --mint --muted, fonts --font-fraunces / --font-hanken / --font-mono. Default state is always VISIBLE; motion is progressive enhancement. ===================================================================== */ :root{ --ember:#c2452a; --ember-bright:#e8654a; --pine-deep:#0c2c27; --pine:#124c40; --mint:#67e8c3; } /* ---------- global polish ---------- */ html{scroll-behavior:smooth} ::selection{background:var(--ember);color:#fff} img{max-width:100%} /* ---------- HERO: let the photo breathe + cinematic depth ---------- */ .hero{min-height:100svh} .hero-bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);animation:heroZoom 14s var(--ease) forwards} @keyframes heroZoom{to{transform:scale(1)}} /* softer scrim so the patient photo is actually visible, with depth bottom */ .hero .hero-scrim{ background: linear-gradient(90deg, hsla(40,27%,98%,.97) 0%, hsla(40,27%,98%,.9) 26%, hsla(40,27%,98%,.55) 50%, hsla(40,27%,98%,.12) 74%, hsla(40,27%,98%,0) 100%), linear-gradient(0deg, rgba(12,44,39,.28), rgba(12,44,39,0) 38%) !important; } .hero-inner{max-width:660px;animation:rise .9s var(--ease) both} .kinetic, .hero h1{font-family:var(--font-fraunces);line-height:.96;letter-spacing:-.015em;font-size:clamp(3.2rem,8.5vw,6.6rem)} .kinetic .l{display:inline-block} .hero-lead{font-size:clamp(1.12rem,1.6vw,1.34rem);color:#243b37;max-width:46ch} .hero-eyebrow{animation:rise .7s var(--ease) both} /* stat readout -> big editorial numbers */ .readout{display:flex;flex-wrap:wrap;gap:38px;margin-top:46px;padding-top:30px;border-top:1px solid var(--line);animation:rise 1s var(--ease) .15s both} .readout .n{font-family:var(--font-fraunces);font-size:clamp(2rem,3.6vw,3.1rem);line-height:1;color:var(--pine);font-weight:600} .readout .u{color:var(--ember);font-family:var(--font-fraunces)} .readout .k{display:block;margin-top:7px;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)} /* ---------- buttons: tactile, premium ---------- */ .btn{border-radius:999px;font-weight:600;letter-spacing:.01em;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s} .btn-primary{background:linear-gradient(135deg,var(--ember-bright),var(--ember)) !important;color:#fff !important;box-shadow:0 10px 26px -10px rgba(194,69,42,.7)} .btn-primary:hover{transform:translateY(-3px) scale(1.015);box-shadow:0 18px 40px -12px rgba(194,69,42,.85)} .btn-ghost:hover{transform:translateY(-2px)} /* ---------- section rhythm + eyebrows ---------- */ section{position:relative} .eyebrow{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ember);display:flex;align-items:center;gap:12px} .eyebrow .num,.eyebrow b{color:var(--pine)} /* subtle texture on pine sections */ .statement,.consult,.site, .qband{position:relative} .statement::before,.qband::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 15% 0%,rgba(103,232,195,.10),transparent 60%);pointer-events:none} /* ---------- image cards: hover zoom everywhere ---------- */ .tcard,.work .mphoto,.qcard,.diff figure,.tech .cell{overflow:hidden;border-radius:16px} .tcard img,.qcard img,.tech .cell img,.diff img{transition:transform .7s var(--ease)} .tcard:hover img,.qcard:hover img,.tech .cell:hover img{transform:scale(1.06)} .tcard{box-shadow:0 1px 0 var(--line);transition:transform .3s var(--ease),box-shadow .3s} .tcard:hover{transform:translateY(-4px);box-shadow:0 24px 50px -28px rgba(12,44,39,.5)} /* ---------- progressive scroll-reveal (NO JS; visible if unsupported) ---------- */ @supports (animation-timeline: view()){ @media (prefers-reduced-motion: no-preference){ .reveal{opacity:1!important} .reveal > *{animation:rise both;animation-timeline:view();animation-range:entry 0% cover 22%} } } @keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}} /* ===================================================================== NEW: photo gallery band + patient-story cards + press strip ===================================================================== */ .qband{background:var(--pine-deep);color:#fff;padding:clamp(70px,9vw,120px) 0} .qband .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} .qband .eyebrow{color:var(--mint)} .qhead{font-family:var(--font-fraunces);font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.02;letter-spacing:-.01em;margin:14px 0 8px;max-width:20ch} .qsub{color:var(--muted-d,#a7afac);max-width:60ch;font-size:1.08rem} .qgallery{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin-top:46px} .qcard{position:relative;border-radius:18px;overflow:hidden;background:#06201c;min-height:230px;box-shadow:0 30px 60px -40px #000} .qcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.02)} .qcard .qcap{position:absolute;left:0;right:0;bottom:0;padding:46px 20px 18px; background:linear-gradient(0deg,rgba(6,32,28,.92),rgba(6,32,28,0)); font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#dfeee9; transform:translateY(8px);opacity:.92;transition:transform .4s var(--ease),opacity .4s} .qcard:hover .qcap{transform:none;opacity:1} /* asymmetric layout */ .qcard.tall{grid-row:span 2;min-height:476px} .qspan6{grid-column:span 6}.qspan4{grid-column:span 4}.qspan8{grid-column:span 8}.qspan3{grid-column:span 3}.qspan12{grid-column:span 12} @media(max-width:820px){.qspan6,.qspan4,.qspan8,.qspan3{grid-column:span 6}.qcard.tall{grid-row:auto;min-height:230px}} /* patient story quote cards */ .qstories{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:42px} @media(max-width:820px){.qstories{grid-template-columns:1fr}} .qstory{background:rgba(255,255,255,.04);border:1px solid var(--line-d,hsla(0,0%,100%,.15));border-radius:16px;padding:26px 24px} .qstory .qquote{font-family:var(--font-fraunces);font-size:1.18rem;line-height:1.45} .qstory .qstars{color:var(--ember-bright);letter-spacing:3px;margin-bottom:12px} .qstory .qattr{margin-top:16px;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mint)} /* press / "as seen on" strip */ .qpress{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:30px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .qpress span{font-family:var(--font-fraunces);font-size:1.15rem;color:var(--pine);opacity:.85} .qpress span+span::before{content:"•";color:var(--ember);margin-right:26px;opacity:.6} /* interior pages: give the bare hero a little more life */ .interior{padding-top:clamp(120px,15vh,180px)} .interior h2{font-family:var(--font-fraunces);letter-spacing:-.01em} .note{opacity:.0;display:none} /* retire placeholder note */ /* ---------- CSS-only mobile menu (JS removed) ---------- */ #navt{display:none} .burger{display:none} @media(max-width:980px){ .burger{margin-left:auto;display:inline-flex;flex-direction:column;gap:5px;width:44px;height:40px;align-items:center;justify-content:center;cursor:pointer;border:1px solid var(--line);border-radius:10px;background:hsla(40,27%,98%,.6)} .burger i{width:20px;height:2px;background:var(--ink);display:block;transition:transform .3s var(--ease),opacity .3s} nav.primary{display:none !important;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:hsla(40,27%,98%,.98);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding:8px 24px 18px} nav.primary a{padding:13px 0;border-bottom:1px solid var(--line);font-size:1.05rem} #navt:checked ~ nav.primary{display:flex !important} #navt:checked ~ .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)} #navt:checked ~ .burger i:nth-child(2){opacity:0} #navt:checked ~ .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)} } /* ---------- News & Media: clickable press cards ---------- */ a.minicard{display:block;text-decoration:none;color:inherit;cursor:pointer; border:1px solid var(--line);border-radius:14px;padding:22px 22px 18px;background:rgba(18,76,64,.02); transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s} a.minicard:hover{transform:translateY(-4px);border-color:var(--ember);box-shadow:0 22px 46px -28px rgba(12,44,39,.45)} a.minicard h3{font-family:var(--font-fraunces);margin:0 0 6px} a.minicard p{color:var(--muted);margin:0} a.minicard .readlink{display:inline-block;margin-top:14px;color:var(--ember);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase} a.minicard:hover .readlink{text-decoration:underline} .minicard .readlink.muted{color:var(--muted);text-transform:uppercase}