*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;} :root{ --black:#0d0d0d; --ink:#141414; --white:#ffffff; --cream:#f3efe9; --cream-2:#ece7df; --line:#e2dcd2; --gold:#b08d57; --gold-d:#977745; --text:#1c1c1c; --muted:#5f5b54; --serif:'Cormorant Garamond',Georgia,serif; --sans:'Jost',-apple-system,Segoe UI,sans-serif; --container:1200px; } html{scroll-behavior:smooth;font-size:16px;} body{font-family:var(--sans);color:var(--text);background:var(--white);line-height:1.7;font-weight:300;overflow-x:hidden;-webkit-font-smoothing:antialiased;} img,video{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} ul{list-style:none;} h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.12;} .container{max-width:var(--container);margin:0 auto;padding:0 28px;} .eyebrow{font-family:var(--sans);font-size:.74rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);} .btn{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--sans);font-size:.78rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;padding:15px 34px;border:1px solid var(--black);border-bottom:2.5px solid var(--black);border-radius:6px;color:var(--black);background:transparent;transition:all .35s ease;cursor:pointer;} .btn:hover{background:var(--black);color:#fff;} .btn--light{border-color:#fff;color:#fff;} .btn--light:hover{background:#fff;color:var(--black);} .btn--solid{background:var(--black);color:#fff;} .btn--solid:hover{background:var(--gold);border-color:var(--gold);} /* gold solid — for CTAs sitting on DARK sections (a black .btn disappears there) */ .btn--gold{background:var(--gold);border-color:var(--gold);border-bottom-color:var(--gold-d);color:#0d0d0d;} .btn--gold:hover{background:#fff;border-color:#fff;color:#0d0d0d;} .arrow{font-family:var(--sans);} /* ============ TOP UTILITY BAR ============ */ .util{background:var(--black);color:#cfcabf;font-size:.78rem;letter-spacing:.04em;} .util .container{display:flex;align-items:center;justify-content:space-between;height:42px;} .util a{display:inline-flex;align-items:center;gap:7px;color:#cfcabf;transition:color .3s;} .util a:hover{color:#fff;} .util-left{display:flex;gap:26px;} .util-right{display:flex;gap:16px;} .util svg{width:14px;height:14px;} @media(max-width:760px){.util-left a:first-child{display:none;}.util .container{justify-content:center;gap:22px;}} /* ============ HEADER ============ */ .header{position:sticky;top:0;z-index:900;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);transition:box-shadow .3s;} .header.scrolled{box-shadow:0 6px 28px rgba(0,0,0,.07);} .header .container{display:flex;align-items:center;justify-content:space-between;height:84px;} .logo img{height:50px;width:auto;} .nav{display:flex;align-items:center;gap:30px;} .nav a{font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;font-weight:400;color:#2a2a2a;position:relative;padding:6px 0;} .nav a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);transition:width .3s;} .nav a:hover::after{width:100%;} .nav a:hover{color:var(--gold-d);} .nav .btn{padding:12px 26px;} .burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px;} .burger span{width:26px;height:1.5px;background:var(--black);transition:.3s;} /* mobile-only chrome inside the slide-in panel — hidden on desktop, desktop nav unchanged */ .nav__mobile-top,.nav__mobile-foot{display:none;} /* ===================================================================== MOBILE NAV (<=1000px) — full-screen cream editorial panel Root coverage fix: the desktop .header uses backdrop-filter:blur(), which makes it a containing block for position:fixed descendants. At mobile we drop the blur (solid bg instead) so the fixed .nav overlay is positioned against the viewport and covers 100vw x 100dvh — no bleed. ===================================================================== */ @media(max-width:1000px){ .header{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--white);} /* the slide-in panel */ .nav{ position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;height:100dvh; background:var(--cream); display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0; transform:translateX(100%);transition:transform .42s cubic-bezier(.4,0,.2,1); z-index:1200;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0; } .nav.open{transform:translateX(0);} /* fixed-feel top bar: logo + close, hairline beneath */ .nav__mobile-top{ display:flex;align-items:center;justify-content:space-between; flex:0 0 auto;padding:18px 22px;border-bottom:1px solid var(--line);background:var(--cream); } .nav__mobile-logo img{height:46px;width:auto;} .nav__close{ display:flex;align-items:center;justify-content:center; width:44px;height:44px;margin-right:-8px;background:none;border:0;cursor:pointer; color:var(--ink);border-radius:6px;transition:background .2s,color .2s; } .nav__close:hover{background:var(--cream-2);color:var(--gold-d);} .nav__close svg{width:24px;height:24px;} /* primary nav list */ .nav__menu{flex:1 0 auto;flex-direction:column;align-items:stretch;gap:0 !important;width:100%;max-width:none;margin:0;padding:8px 0 0 !important;} .nav__item{width:100%;text-align:left;border-bottom:1px solid var(--line);} /* every top-level row: serif, large, high contrast --ink. NOTE: triggers carry BOTH classes (nav__link mega-trigger). The desktop JUMBO-MEGA rule ".nav .mega-trigger" lives LATER in the file, so at equal specificity it would win — we use ".nav .nav__link.mega-trigger" (one extra class) to outrank it and apply the serif/large/legible mobile styling. */ .nav a.nav__link,.nav .nav__link.mega-trigger{ display:flex;align-items:center;width:100%;min-height:56px; font-family:var(--serif);font-size:1.6rem;font-weight:500;letter-spacing:0;text-transform:none; color:var(--ink);padding:8px 22px;justify-content:flex-start;-webkit-appearance:none;appearance:none; } .nav a.nav__link::after{display:none;} .nav a.nav__link:hover,.nav .nav__link.mega-trigger:hover{color:var(--gold-d);} /* mega trigger row: label left, gold chevron right */ .nav .nav__link.mega-trigger{justify-content:space-between;background:none;border:0;cursor:pointer;} .nav .nav__link.mega-trigger .caret{ width:9px;height:9px;border-right:1.7px solid var(--gold);border-bottom:1.7px solid var(--gold); transform:rotate(45deg);transition:transform .3s ease;margin:0;flex:0 0 auto; } .nav .has-mega.open .nav__link.mega-trigger .caret{transform:rotate(225deg);} /* the inline "Contact Us" button row becomes the bottom CTA instead — hide the in-list one */ .nav__menu > .nav__item:last-child{display:none;} /* burger glyph — the dedicated .nav__close inside the panel handles closing, so hide the burger entirely while the menu is open (no duplicate X) */ .burger{display:flex;position:relative;z-index:1300;} .burger span{background:var(--black);} .burger.open{display:none;} body.nav-open{overflow:hidden;} body.nav-open .booknow{display:none;} /* bottom section pinned after the nav */ .nav__mobile-foot{ display:flex;flex-direction:column;align-items:stretch;gap:14px; flex:0 0 auto;margin-top:auto;padding:24px 22px calc(24px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--line);background:var(--cream-2); } /* NOTE: these foot links are inside .nav, so the desktop rule ".nav a{color:#2a2a2a}" (specificity 0-1-1) outranks a bare single-class selector (0-1-0) for `color`. We scope each under ".nav" (-> 0-2-0) so the intended colors win — otherwise the CTA text inherited #2a2a2a on a black bg and rendered invisible. */ .nav .nav__cta{ display:flex;align-items:center;justify-content:center;width:100%;min-height:52px; background:var(--black);color:#fff;border:1px solid var(--black);border-radius:6px; font-family:var(--sans);font-size:.78rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase; transition:background .3s,border-color .3s,color .3s; } .nav .nav__cta:hover{background:var(--gold);border-color:var(--gold);color:#fff;} .nav .nav__phone{ font-family:var(--serif);font-size:1.5rem;color:var(--ink);text-align:center;letter-spacing:.01em;min-height:44px; display:flex;align-items:center;justify-content:center; } .nav .nav__phone:hover{color:var(--gold-d);} .nav .nav__email{ display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px; font-family:var(--sans);font-size:.95rem;color:var(--muted); } .nav__email svg{width:18px;height:18px;color:var(--gold);} .nav .nav__email:hover{color:var(--gold-d);} .nav__social{display:flex;justify-content:center;gap:14px;margin-top:2px;} .nav__social a{ width:44px;height:44px;display:flex;align-items:center;justify-content:center; border:1px solid var(--line);border-radius:6px;color:var(--ink);transition:color .25s,border-color .25s,background .25s; } .nav__social a:hover{color:var(--gold-d);border-color:var(--gold);background:var(--cream);} .nav__social svg{width:18px;height:18px;} /* staggered reveal of rows when the panel opens */ .nav.open .nav__item,.nav.open .nav__mobile-foot{animation:navIn .4s ease both;} .nav.open .nav__menu > .nav__item:nth-child(1){animation-delay:.06s;} .nav.open .nav__menu > .nav__item:nth-child(2){animation-delay:.11s;} .nav.open .nav__menu > .nav__item:nth-child(3){animation-delay:.16s;} .nav.open .nav__menu > .nav__item:nth-child(4){animation-delay:.21s;} .nav.open .nav__menu > .nav__item:nth-child(5){animation-delay:.26s;} .nav.open .nav__mobile-foot{animation-delay:.30s;} @keyframes navIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}} @media(prefers-reduced-motion:reduce){ .nav{transition:none;} .nav.open .nav__item,.nav.open .nav__mobile-foot{animation:none;} .nav .mega-trigger .caret,.mega{transition:none !important;} } } /* ============ BOOK NOW vertical tab ============ */ .booknow{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:880;writing-mode:vertical-rl;text-orientation:mixed;background:var(--black);color:#fff;padding:20px 11px;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;transition:background .3s;} .booknow:hover{background:var(--gold);} @media(max-width:760px){.booknow{display:none;}} /* ============ HERO (video) ============ */ .hero{position:relative;height:92vh;min-height:600px;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;} .hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;} .hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.30) 35%,rgba(0,0,0,.55) 100%);z-index:1;} .hero-inner{position:relative;z-index:2;max-width:1000px;padding:0 28px;} .hero .eyebrow{color:#e9dcc6;display:block;margin-bottom:20px;} .hero h1{font-size:clamp(2.6rem,6vw,5.2rem);font-weight:500;letter-spacing:.01em;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.4);min-height:1.1em;} /* slider */ .slides{position:relative;height:clamp(6.4rem,14vw,12rem);margin-bottom:6px;} .slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .9s ease,transform .9s ease;transform:translateY(14px);} .slide.active{opacity:1;transform:translateY(0);} .hero-sub{font-family:var(--serif);font-style:italic;font-size:clamp(1.1rem,2.2vw,1.7rem);color:#f0e9da;margin:14px 0 30px;font-weight:400;} .hero-ctas{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;} .hero-scroll{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;color:#fff;opacity:.7;animation:bob 2.4s ease-in-out infinite;} @keyframes bob{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,9px);}} /* ============ CENTERED INTRO ROW ============ */ .intro{padding:clamp(70px,9vw,120px) 0;text-align:center;background:var(--white);} .intro .eyebrow{display:block;margin-bottom:18px;} .intro h2{font-size:clamp(2.1rem,4.4vw,3.4rem);color:var(--ink);margin:0 auto;max-width:24ch;line-height:1.2;} .intro p{font-family:var(--serif);font-size:clamp(1.25rem,2.4vw,1.7rem);font-style:italic;color:var(--muted);max-width:760px;margin:22px auto 0;} /* ============ FULL-BLEED SPLIT FEATURE ROWS ============ */ /* image fills its half edge-to-edge & full height (no padding, no card); text half padded */ .feature{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:600px;background:var(--white);} .feature.alt{background:var(--cream);} .feature .media{position:relative;overflow:hidden;min-height:600px;background:var(--white);} .feature.alt .media{background:var(--cream);} .feature .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;z-index:1;} .feature .media.has-video{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;overflow:visible;background:linear-gradient(155deg,#efe9df 0%,#e2dacb 100%);padding:44px 20px;} .feature.alt .media.has-video{background:linear-gradient(155deg,#ebe4d7 0%,#dcd3c2 100%);} .feature .media.has-video video{position:relative;inset:auto;width:min(88%,360px);aspect-ratio:9/16;height:auto;max-height:70vh;object-fit:cover;border-radius:20px;box-shadow:0 28px 66px rgba(0,0,0,.30);border:1px solid rgba(151,119,69,.4);background:#0d0d0d;z-index:1;} .feature .media.has-video .vlabel{order:-1;font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#977745;} @media(max-width:880px){.feature .media.has-video{min-height:0;padding:32px 16px;}} /* desktop: cap + center the welcome-video feature as a balanced pair (no big side gaps), and let the text container run a bit wider */ @media(min-width:881px){ .feature:has(.media.has-video){grid-template-columns:minmax(0,880px) minmax(330px,420px);justify-content:center;column-gap:clamp(28px,3.5vw,72px);} .feature:has(.media.has-video) .body{max-width:none;padding-left:clamp(24px,3vw,56px);padding-right:clamp(24px,3vw,56px);} } /* DESKTOP: show the FULL image (no crop, no blur). The complete image starts edge-aligned and slides across the column's empty space on scroll, then stops — top→bottom if the slack is vertical, outside→in if it's horizontal. Axis + distance computed per-image in components.js. */ @media(min-width:881px){ .feature{align-items:stretch;} .feature .media{min-height:0;} .feature .media img{object-fit:contain;object-position:left top;will-change:transform;transition:transform .12s linear;} } .feature .body{display:flex;flex-direction:column;justify-content:center;padding:clamp(48px,6vw,96px) clamp(32px,6vw,96px);max-width:760px;} /* image LEFT by default; img-right puts media in column 2 */ .feature .media{order:0;} .feature .body{order:1;} .feature.img-right .media{order:1;} .feature.img-right .body{order:0;} .feature .body .eyebrow{display:block;margin-bottom:14px;} .feature .body h2{font-size:clamp(1.9rem,3.4vw,2.9rem);color:var(--ink);margin-bottom:20px;} .feature .body p{color:var(--muted);margin-bottom:16px;} /* ---- IN-TEXT LINK STANDARD: gold text always, underline on hover (prose/FAQ/cards/features/hero) ---- */ .feature .body p a, .feature .body a.inline, .page-hero .body p a, .prose a, .faq .ans a, .icard a, .intro a{ color:var(--gold-d);text-decoration:none;border-bottom:0; transition:color .2s ease, text-decoration-color .2s ease; } .feature .body p a:hover, .feature .body a.inline:hover, .page-hero .body p a:hover, .prose a:hover, .faq .ans a:hover, .icard a:hover, .intro a:hover{ text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px; } .quicklinks{margin:24px 0;border-top:1px solid var(--line);} .quicklinks a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 2px;border-bottom:1px solid var(--line);font-size:1rem;color:var(--ink);transition:padding-left .3s,color .3s;} .quicklinks a:hover{padding-left:10px;color:var(--gold-d);} .quicklinks a .arrow{color:var(--gold);font-size:1.1rem;} .feature .ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px;} @media(max-width:880px){ .feature{grid-template-columns:1fr;min-height:0;} .feature .media,.feature.img-right .media{order:0;min-height:0;} .feature .body,.feature.img-right .body{order:1;max-width:none;padding:48px 28px;} /* MOBILE: show the FULL image (no crop), sized to its natural height. No blur, no pan. */ .feature .media{position:relative;overflow:hidden;} .feature .media img{position:relative;inset:auto;width:100%;height:auto;object-fit:contain;transform:none;z-index:1;} } /* ============ SERVICE CARDS (Elevate style) ============ */ .services{padding:clamp(70px,9vw,120px) 0;background:var(--cream-2);} .section-header{text-align:center;max-width:760px;margin:0 auto 56px;} .section-header .eyebrow{display:block;margin-bottom:14px;} .section-header h2{font-size:clamp(2rem,4vw,3.2rem);color:var(--ink);margin-bottom:14px;} .section-header p{color:var(--muted);font-size:1.05rem;} .services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px;} .svc-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 16px rgba(0,0,0,.07);transition:transform .4s,box-shadow .4s;display:block;} .svc-card:hover{transform:translateY(-8px);box-shadow:0 24px 50px rgba(0,0,0,.14);} .svc-img{height:auto;aspect-ratio:1/1;overflow:hidden;position:relative;} .svc-img img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .6s ease;} .svc-card:hover .svc-img img{transform:scale(1.07);} .svc-img::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(13,13,13,.35),transparent 55%);} /* Before/after client collages ("-result"): the "before" photo sits at the BOTTOM, so a fixed-height card was cropping it off. A SQUARE card shows a square collage in full (zero crop); any landscape sibling in the same trio then shows its full height too. */ .svc-img:has(img[src*="-result"]){height:auto;aspect-ratio:1/1;} .services-grid:has(img[src*="-result"]) .svc-img{height:auto;aspect-ratio:1/1;} .services-grid:has(img[src*="-result"]) .svc-img img{object-position:center;} .svc-body{padding:26px 24px 30px;} .svc-body h3{font-size:1.45rem;color:var(--ink);margin-bottom:9px;} .svc-body p{color:var(--muted);font-size:.95rem;line-height:1.65;} /* ============ CALLOUT STRIP ============ */ .callout{text-align:center;padding:clamp(50px,7vw,90px) 0;background:var(--white);border-bottom:1px solid var(--line);} .callout a.portfolio{display:inline-flex;align-items:center;gap:10px;font-family:var(--serif);font-style:italic;font-size:1.5rem;color:var(--ink);} .callout a.portfolio .arrow{color:var(--gold);} .callout .phone{margin-top:18px;font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);} .callout .phone a{color:var(--gold-d);font-weight:500;} /* ============ PARALLAX BAND ============ */ /* NOTE: no background-attachment:fixed here. With fixed, the bg sizes/positions against the VIEWPORT, not the section — in Firefox/Chrome the image slid under the overlay text ("text goes over the picture", client round 2 item 10) while Safari fell back to scroll and looked right. Scroll attachment = every browser renders the band the same way: image + text move together. */ .parallax{position:relative;min-height:480px;padding:300px 0;display:flex;align-items:center;background-image:linear-gradient(rgba(13,13,13,.55),rgba(13,13,13,.55)),url('/images/parallax-wide.webp');background-size:cover;background-position:right 18%;color:#fff;} .parallax .container{position:relative;z-index:1;width:100%;} .parallax .inner{max-width:620px;margin-right:auto;} .parallax .eyebrow{display:block;color:#e9dcc6;margin-bottom:16px;} .parallax h2{font-size:clamp(2rem,4vw,3.2rem);color:#fff;margin-bottom:18px;} .parallax p{color:#e7e2d8;margin-bottom:26px;} /* FULL-IMAGE parallax: whole image (contain) anchored right, parallax kept; left fades dark for text. Image URL is supplied per-page via --pbg. */ .parallax--full{background-color:#0d0d0d;background-image:linear-gradient(90deg,rgba(13,13,13,.96) 0%,rgba(13,13,13,.85) 28%,rgba(13,13,13,.4) 52%,rgba(13,13,13,0) 78%),var(--pbg);background-size:cover,contain;background-position:center,right center;background-repeat:no-repeat,no-repeat;} /* full-width background-video band (e.g. the hair-blowing clip on hair-extensions) */ .videoband{position:relative;overflow:hidden;padding:clamp(120px,18vw,210px) 0;display:flex;align-items:center;background:#0d0d0d;color:#fff;} .videoband-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;} .videoband::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(13,13,13,.58),rgba(13,13,13,.58));z-index:1;} .videoband .container{position:relative;z-index:2;width:100%;} .videoband .inner{max-width:620px;margin-right:auto;} .videoband .eyebrow{display:block;color:#e9dcc6;margin-bottom:16px;} .videoband h2{font-size:clamp(2rem,4vw,3.2rem);color:#fff;margin-bottom:18px;} .videoband p{color:#e7e2d8;margin-bottom:26px;} @media(max-width:760px){ .parallax{background-attachment:scroll;padding:140px 0;} .svc-img{height:auto;aspect-ratio:1/1;}.svc-img img{object-position:center top;} /* mobile: image as a contained band behind a darker scrim, normal scroll (avoids iOS fixed-bg bug) */ .parallax--full{background-attachment:scroll,scroll;background-size:cover,cover;background-position:center,center;background-image:linear-gradient(rgba(13,13,13,.72),rgba(13,13,13,.72)),var(--pbg);} } /* ---- BLEED PARALLAX (homepage test) ---- The band is very wide, so `contain` sizes the image by its HEIGHT: it fits the band exactly and there is 0px of vertical slack, which is why the drift was barely visible. Scaling the image up buys slack but enlarges the subject. Instead this uses a TALL canvas (600x1200) whose subject is pixel-identical and rendered at exactly the same size as the square version — the extra height is studio backdrop above and shadow below. At `auto 200%` the image is twice the band's height, so it genuinely starts in the row above and continues into the row below (hidden behind them), giving ~647px of travel instead of 0. Placed after the mobile block so it applies at every width. */ .parallax--bleed{background-size:cover,auto 200%;} /* ---- FIXED PARALLAX — matches the old Elementor site (nuhair.net) ---- Decoded from their post-71.css: they pin the image with `background-attachment:fixed` (background-size:contain, background-position:center right), desktop-only at min-width:1025px. Because the image is pinned to the VIEWPORT it does not move at all while the band scrolls past, so the movement relative to the band is the band's whole journey across the screen — ~1550px on a 900px window, versus ~284px total for the transform drift. That gap is what the client is seeing. TWO THINGS THAT MUST NOT BE COPIED NAIVELY FROM THE OLD SITE: 1. They scope the background to a ~58%-wide RIGHT COLUMN, not the whole section. That is what keeps the copy safe. With `fixed` the image is sized against the VIEWPORT, so on a FULL-WIDTH band it slides under the text — the round-9 bug Ilan saw in Firefox/Chrome (Safari ignores `fixed`, which is why it looked fine to Sharon). Confining it to a right-side layer makes that collision structurally impossible. 2. Their `contain` works only because their source is a large PORTRAIT photo (1120x1700) that contain SHRINKS to ~53%. Our square 600x600 would be UPSCALED to 900x900 — the "too big" the client already rejected. So the height is pinned instead: it tracks the viewport and caps at the ~650px she has already approved. A flat 650px would be right-anchored to the viewport and run 213px under the copy at 1025px wide. */ /* padding lives here, not inline on the section: an inline style outranks a media query, so the mobile layout below could never override it. */ .parallax--fixed{padding:200px 0;} /* button row is NOT desktop-only: the .ctaband component this replaced spaced its buttons at every width, so scoping this to >=1025px stacked them flush (0px gap) on phones. */ .parallax--fixed .ctas{display:flex;gap:14px;flex-wrap:wrap;} @media(min-width:1025px){ .parallax--fixed{background-image:none;background-color:#0d0d0d;} .parallax--fixed::before{ content:""; position:absolute;top:0;right:0;bottom:0;width:58%;z-index:0; background-image:var(--pbg); background-attachment:fixed; background-position:center right; /* sized by WIDTH, not height: width is what has to clear the copy. Sizing by height renders a 1920x1080 photo 1127px wide, straight under the text. For the square homepage image the two are identical. The third term caps the RENDERED HEIGHT at 650px. The band is a window onto a viewport-fixed image, so anything taller than the band gets guillotined and its feathered top/bottom edges are cut off — which is what happened to the 600x800 portraits. Shortest band carrying a portrait is 662px, so 650 clears it. For any square or landscape photo (--pbgr <= 1) this term is >= 650px and the min() ignores it, so every other page is unchanged. --pbgcap raises that ceiling for a TRAVEL CANVAS: a deliberately tall photo whose top and bottom are already dark padding around a centred subject. Those are MEANT to overflow the band — that overflow is what makes the photo pan as you scroll, the way nuhair.net does — and nothing is lost to the clip because the clipped strips are empty. refeather_cta.py sets it only when it can see that padding in the raw upload. */ background-size:min(650px,44vw,calc(var(--pbgcap,650px) / var(--pbgr,1))) auto; background-repeat:no-repeat; } .parallax--fixed::after{ content:""; position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(90deg,rgba(13,13,13,.96) 0%,rgba(13,13,13,.85) 28%,rgba(13,13,13,.4) 52%,rgba(13,13,13,0) 78%); } .parallax--fixed .container{position:relative;z-index:2;} .parallax--fixed .inner{max-width:500px;} } /* ---- MOBILE (<1025px): STACK, don't overlay ---- Desktop keeps the pinned parallax. Below it the copy sits ABOVE the photo instead of on top of it, so nothing is ever read against the picture on a phone. The section background image is cleared and the photo re-introduced as a block after the text. No scrim needed: the image's edges are already feathered into #0d0d0d, this band's colour, so it dissolves in. */ @media(max-width:1024px){ .parallax--fixed{ display:block; min-height:0; padding:56px 0 0; background-image:none; background-color:#0d0d0d; } .parallax--fixed .inner{max-width:none;margin-right:0;} .parallax--fixed .container::after{ content:""; display:block; margin:30px -28px 0; /* bleed past .container's 28px padding to the section edges */ /* height tracks the photo's own aspect so there is no dead black above it. NOT aspect-ratio: when max-height clamps, Chrome also shrinks the box WIDTH, which would break the full-bleed box. --pbgr is the image's height/width. */ --pbh:min(calc(100vw * var(--pbgr,0.78)),78vw,420px); --pbw:min(100vw,calc(var(--pbh) / var(--pbgr,0.78))); /* width the photo actually paints at */ height:var(--pbh); background-image:var(--pbg); background-size:contain; background-position:center; /* centred on mobile, per the client */ background-repeat:no-repeat; /* Fade the RIGHT edge, mobile only. That edge is deliberately left hard in the image file: on desktop it sits flush against the viewport edge and is never seen, and baking a fade in would put a dark gradient down the side of every desktop band. Centred on mobile the edge IS visible, so it is faded here in CSS instead. A mask is only safe on this breakpoint. Desktop uses background-attachment:fixed, where the photo slides through the band, so a mask would fade the BAND's edge while the photo's own hard edge kept sweeping past it. Here the background is static, so the two agree. mask-size is the PAINTED width, not the box width — `contain` letterboxes a square photo (304px painted inside a 390px box at 390vw), and a box-width gradient would fade the empty margin and leave the photo's real edge hard. */ -webkit-mask-image:linear-gradient(to right,#000 80%,rgba(0,0,0,.5) 91%,transparent 100%); mask-image:linear-gradient(to right,#000 80%,rgba(0,0,0,.5) 91%,transparent 100%); -webkit-mask-size:var(--pbw) 100%; mask-size:var(--pbw) 100%; -webkit-mask-position:center; mask-position:center; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; } } /* ============ CLOSING CTA BAND ============ Dark band; the client photo is a real anchored flush to the RIGHT + BOTTOM, solid #0d0d0d fills the rest, and the photo's TOP + LEFT edges feather into the dark (via .ctaband-scrim) so the headline sits on clean dark and never touches the photo. Landscape (4:3) photos are fine — the dark fills whatever the photo doesn't cover. */ .ctaband{position:relative;overflow:hidden;background:#0d0d0d;color:#fff;} .ctaband-photo{position:absolute;z-index:1;} .ctaband-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;} .ctaband .container{position:relative;z-index:3;width:100%;} .ctaband-inner{max-width:600px;} .ctaband-inner .eyebrow{display:block;color:#e9dcc6;margin-bottom:16px;} .ctaband-inner h2{font-size:clamp(2rem,4vw,3.2rem);color:#fff;margin-bottom:18px;line-height:1.1;} .ctaband-inner p{color:#e7e2d8;margin-bottom:26px;max-width:46ch;} .ctaband-inner .ctas{display:flex;gap:14px;flex-wrap:wrap;} /* Keep each phrase of the closing headline together so it always breaks as 'Discover easy ways to get' / 'your beautiful hair back'. Without this the line reflows on narrower laptops and leaves 'your' stranded at the end of line one. */ .ctaband-inner h2 .nb{display:inline-block;} /* DESKTOP: whole photo (contain) flush bottom-right; top+left feathered; text vertically centered on the dark left */ @media(min-width:821px){ .ctaband{display:flex;align-items:center;min-height:clamp(460px,44vw,560px);} /* soft-fade the image's OWN left edge into the dark (tied to the photo, not the section width, so every photo blends cleanly regardless of how wide it sits) */ /* The photo is a TALL canvas (2x its original height): the middle is the untouched original and the added top/bottom dissolve into #0d0d0d. At height:200% it renders the SAME width as the old height:100% did — so the subject is identical in size — but it now extends a half-band above and below, hidden behind the neighbouring rows, giving it room to drift. top:-50% centres that overflow so it can travel both ways. Left edge soft-faded into the dark (tied to the photo, not the section width, so every photo blends cleanly regardless of how wide it sits). */ .ctaband-photo{top:-50%;right:0;height:200%;width:auto;max-width:64%;object-fit:contain;object-position:right center; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 13%); mask-image:linear-gradient(90deg,transparent 0,#000 13%);} .ctaband-scrim{background: linear-gradient(90deg,#0d0d0d 0%,#0d0d0d 24%,rgba(13,13,13,.55) 44%,rgba(13,13,13,0) 64%), linear-gradient(180deg,#0d0d0d 0%,rgba(13,13,13,0) 26%);} } /* MOBILE: photo covers the band behind a top-weighted dark scrim; text flows and sets the height (overlays nicely, never overflows) */ @media(max-width:820px){ /* Same tall canvas here: height:200% (not 100%) keeps the subject at its previous scale — at 100% `cover` would fit the WHOLE tall image into the band, shrinking the subject to half size and exposing the dissolved strips. top:-50% centres the overflow. */ .ctaband-photo{top:-50%;left:0;width:100%;height:200%;object-fit:cover;object-position:center;} .ctaband-scrim{background:linear-gradient(180deg,rgba(13,13,13,.92) 0%,rgba(13,13,13,.6) 46%,rgba(13,13,13,.4) 100%);} .ctaband .container{padding-top:52px;padding-bottom:52px;} .ctaband-inner{max-width:none;} } /* ============ REVIEWS TICKER ============ */ .ticker-sec{padding:clamp(64px,8vw,104px) 0;background:var(--black);color:#fff;overflow:hidden;} .ticker-sec .section-header h2{color:#fff;} .ticker-sec .section-header .eyebrow{color:var(--gold);} .ticker{position:relative;width:100%;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);} .ticker-track{display:flex;gap:0;width:max-content;will-change:transform;backface-visibility:hidden;transform:translate3d(0,0,0);} /* Only pause on real hover (desktop). On touch, a tap triggers a STICKY :hover that would freeze the strip ("starts black, had to push play") — so gate it to hover devices. */ /* marquee is JS-driven (components.js) so it always circulates seamlessly; no hover-pause (it stalled) */ @keyframes scroll-x{from{transform:translateX(0);}to{transform:translateX(-50%);}} /* reviews carousel stop/restart control (works by tap on phone + click/hover on laptop) */ .ticker-wrap{position:relative;} .ticker.is-paused .ticker-track{animation-play-state:paused;} .ticker-toggle{position:absolute;right:16px;bottom:14px;z-index:4;width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(20,20,20,.72);border:1px solid #3a3a3a;color:#efe9dd;cursor:pointer;transition:background .2s,border-color .2s,color .2s;-webkit-tap-highlight-color:transparent;backdrop-filter:blur(4px);} .ticker-toggle:hover{background:rgba(40,40,40,.92);border-color:var(--gold);color:#fff;} .ticker-toggle svg{width:19px;height:19px;pointer-events:none;} .ticker-toggle .ic-play{display:none;} .ticker-toggle.is-paused .ic-pause{display:none;} .ticker-toggle.is-paused .ic-play{display:block;margin-left:2px;} @media(max-width:640px){.ticker-toggle{width:46px;height:46px;right:12px;bottom:12px;}} .tk-card{flex:0 0 380px;background:#161616;border:1px solid #262626;border-radius:10px;padding:30px 28px;position:relative;margin-right:26px;} .tk-g{position:absolute;top:22px;right:22px;width:22px;height:22px;opacity:.95;} .tk-g svg{width:100%;height:100%;display:block;} .tk-card .tk-quote{padding-right:26px;} .tk-stars{color:var(--gold);letter-spacing:3px;font-size:.9rem;margin-bottom:12px;} .tk-quote{font-family:var(--serif);font-style:italic;font-size:1.08rem;line-height:1.6;color:#e6e2d9;margin-bottom:16px;} .tk-name{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;} .tk-role{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-top:3px;} /* ============ FINAL CTA ============ */ .final-cta{padding:clamp(70px,9vw,120px) 0;text-align:center;background:var(--cream);} .final-cta .eyebrow{display:block;margin-bottom:14px;} .final-cta h2{font-size:clamp(2.2rem,4.4vw,3.4rem);color:var(--ink);margin-bottom:18px;} .final-cta p{color:var(--muted);max-width:680px;margin:0 auto 14px;} .final-cta .appt{font-family:var(--serif);font-style:italic;font-size:1.2rem;color:var(--ink);margin:18px auto 6px;text-align:center;} .final-cta .bigphone{font-family:var(--serif);font-size:clamp(1.8rem,4vw,2.6rem);color:var(--gold-d);display:inline-block;margin-bottom:26px;} /* ============ FOOTER ============ */ .footer{background:var(--black);color:#bdb8ad;padding:70px 0 36px;} .footer .grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;align-items:start;} .footer img.flogo{height:52px;margin-bottom:18px;} .footer h4{font-family:var(--sans);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:#fff;margin-bottom:16px;} .footer a{color:#bdb8ad;transition:color .3s;}.footer a:hover{color:#fff;} .footer ul li{margin-bottom:10px;font-size:.92rem;} .footer .contact p{font-size:.92rem;margin-bottom:8px;} .footer .social{display:flex;gap:14px;margin-top:14px;} .footer .social a{width:34px;height:34px;border:1px solid #333;display:flex;align-items:center;justify-content:center;} .footer .social svg{width:15px;height:15px;} .footer .copy{border-top:1px solid #262626;margin-top:44px;padding-top:24px;text-align:center;font-size:.8rem;letter-spacing:.05em;color:#8a8579;} @media(max-width:760px){.footer .grid{grid-template-columns:1fr;gap:30px;}} /* reveal */ .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease;} .reveal.vis{opacity:1;transform:none;} /* ===================================================================== INNER-PAGE COMPONENTS (shared across all interior pages) ===================================================================== */ /* ---- JUMBO MEGA MENU (desktop) ---- */ .nav .has-mega{position:relative;} .nav .mega-trigger{display:inline-flex;align-items:center;gap:6px;cursor:pointer;background:none;border:0;font:inherit;color:inherit;text-transform:uppercase;letter-spacing:.13em;font-size:.8rem;-webkit-appearance:none;appearance:none;padding:6px 0;} .nav .mega-trigger .caret{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .3s;} .nav .has-mega:hover .mega-trigger .caret,.nav .has-mega:focus-within .mega-trigger .caret{transform:rotate(-135deg) translateY(0);} .mega{position:absolute;top:calc(100% + 18px);left:50%;transform:translateX(-50%) translateY(10px);background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 30px 70px rgba(0,0,0,.16);padding:30px 32px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,transform .3s ease,visibility 0s linear .3s;z-index:1100;} .has-mega:hover .mega,.has-mega:focus-within .mega,.has-mega.open .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);transition:opacity .3s ease,transform .3s ease;} .mega::before{content:'';position:absolute;top:-20px;left:0;right:0;height:22px;} /* compact menus (Results, About) size to content — no wasted white space */ .mega--compact{width:max-content;max-width:92vw;} .mega--compact .mega-cols{display:flex;gap:40px;} .mega--compact .mega-col{min-width:230px;} /* Services: 3 columns, General Services spans 2, CTA row spans all beneath */ .mega--services{width:min(960px,94vw);} .mega--services .mega-cols{display:grid;grid-template-columns:1fr 1fr;column-gap:36px;row-gap:26px;} .mega--services .mega-col--wide{grid-column:1 / -1;} .mega--services .mega-col--wide .mega-links{display:grid;grid-template-columns:1fr 1fr;column-gap:36px;} .mega-col h5{font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;padding-bottom:9px;border-bottom:1px solid var(--line);} .mega-links{display:flex;flex-direction:column;} .mega-col a{display:flex;align-items:center;gap:11px;font-family:var(--sans);font-size:.92rem;letter-spacing:.01em;text-transform:none;color:var(--text);padding:7px 0;border:0;transition:color .22s,padding-left .22s;} .mega-col a::after{display:none;} .mega-col a:hover{color:var(--gold-d);padding-left:5px;} .mega-ic{width:19px;height:19px;flex-shrink:0;color:var(--gold);transition:color .22s,transform .22s;} .mega-col a:hover .mega-ic{color:var(--gold-d);transform:scale(1.12);} /* Blog mega: right-align so it doesn't bleed off the right edge of the screen */ .mega--blog{width:min(680px,94vw);left:auto;right:-200px;transform:translateX(0) translateY(10px);} .mega--blog .mega-cols{display:flex;gap:40px;} .mega--blog .mega-col{min-width:200px;} .has-mega:hover .mega--blog,.has-mega:focus-within .mega--blog,.has-mega.open .mega--blog{transform:translateX(0) translateY(0);} /* full-width CTA row beneath the Services links */ .mega-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:24px;padding:18px 24px;background:var(--cream);border-radius:10px;transition:background .25s;} .mega-cta:hover{background:var(--cream-2);} /* the header rule ".nav a{padding:6px 0}" (specificity 0,1,1) was overriding .mega-cta's padding, so the CTA copy ran to the box edge. Restore proper inner padding on desktop only (min-width scope keeps the mobile full-width-button CTA untouched). */ @media(min-width:1001px){.nav .mega-cta{padding:20px 28px;}} .mega-cta-txt{font-size:.92rem;color:var(--muted);line-height:1.4;} .mega-cta-txt strong{display:inline;font-family:var(--serif);font-size:1.15rem;color:var(--ink);font-weight:600;margin-right:6px;} .mega-cta-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:8px;background:var(--black);color:#fff;font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:13px 26px;border-radius:6px;transition:background .25s;} .mega-cta:hover .mega-cta-btn{background:var(--gold);} .mega-cta-btn .arrow{color:#fff;} /* ---- CONTENT HERO (interior pages, no video) ---- */ /* top padding trimmed 170px -> 110px (desktop): the H1 sat too far below the header on every page */ .page-hero{background:var(--cream);padding:clamp(80px,9vw,110px) 0 clamp(60px,8vw,90px);} .page-hero .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px);align-items:center;} .page-hero .eyebrow{display:block;margin-bottom:16px;} .page-hero h1{font-size:clamp(2.4rem,5.2vw,4rem);color:var(--ink);} .page-hero h1 .accent{color:var(--gold);} .page-hero p{color:var(--muted);margin-top:22px;font-size:1.05rem;} .page-hero .ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px;} .page-hero .grid{align-items:start;} .page-hero .hero-photo img{display:block;width:100%;height:auto;border-radius:12px;box-shadow:0 30px 70px rgba(0,0,0,.16);} @media(max-width:880px){.page-hero .grid{grid-template-columns:1fr;}.page-hero .hero-photo img{max-width:520px;margin:0 auto;}} /* ---- METHODS / TWO-LIST GRID (cards from bullets) ---- */ .cardgrid{padding:clamp(64px,8vw,110px) 0;} .cardgrid.alt{background:var(--cream);} .cardgrid .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-top:46px;} .cardgrid .cards[style*="grid-template-columns:1fr"]{grid-template-columns:1fr;} @media(min-width:768px){ .cardgrid .cards[style*="grid-template-columns:1fr"]{grid-template-columns:1fr 1fr;} } /* responsive 2-col cards: stack on mobile, side-by-side on desktop */ .cost-cards{grid-template-columns:1fr !important;} @media(min-width:768px){ .cost-cards{grid-template-columns:1fr 1fr !important;} } .icard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:30px 28px;transition:transform .35s,box-shadow .35s,border-color .35s;} .icard:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(0,0,0,.10);border-color:transparent;} .icard .num{font-family:var(--serif);font-style:italic;font-size:1.1rem;color:var(--gold);margin-bottom:12px;display:block;} .icard h3{font-size:1.3rem;color:var(--ink);margin-bottom:10px;} .icard p{color:var(--muted);font-size:.95rem;line-height:1.6;} /* two-column labeled groups (e.g. Medical vs Non-medical) */ .dualcol{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:46px;} .dualcol .group h3{font-family:var(--sans);font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:20px;} @media(max-width:760px){.dualcol{grid-template-columns:1fr;}} /* FAQ bubble groups — full-width rows so each labeled set (matching the original nuhair.net breakdown) reads as its own band: centered gold-ruled title, uniform card widths, and partial last rows CENTERED (5 → 3+2, 4 → 3+1) instead of two ragged uneven columns. */ .faqgroups{margin-top:46px;} .faqgroup + .faqgroup{margin-top:48px;} .faqgroup-title{display:flex;align-items:center;justify-content:center;gap:18px;font-family:var(--sans);font-size:.8rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:0 0 24px;text-align:center;} .faqgroup-title::before,.faqgroup-title::after{content:'';height:1px;flex:0 0 clamp(36px,7vw,96px);background:var(--gold);opacity:.45;} .faqgroup-cards{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;} .faqgroup-cards .icard{flex:0 1 368px;margin:0;} /* fixed basis: partial rows center at the SAME width as full rows */ /* ---- FAQ ACCORDION ---- */ .faq{padding:clamp(64px,8vw,110px) 0;background:var(--cream);} .faq .wrap{max-width:860px;margin:0 auto;} .faq details{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:14px;overflow:hidden;} .faq summary{list-style:none;cursor:pointer;padding:22px 26px;font-family:var(--serif);font-size:1.25rem;color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:16px;} .faq summary::-webkit-details-marker{display:none;} .faq summary .plus{flex-shrink:0;width:16px;height:16px;position:relative;} .faq summary .plus::before,.faq summary .plus::after{content:'';position:absolute;background:var(--gold);transition:transform .3s;} .faq summary .plus::before{top:7px;left:0;width:16px;height:2px;} .faq summary .plus::after{top:0;left:7px;width:2px;height:16px;} .faq details[open] summary .plus::after{transform:rotate(90deg);opacity:0;} .faq .ans{padding:0 26px 24px;color:var(--muted);font-size:1rem;line-height:1.7;} /* ---- inline section heading helper ---- */ .sec-head{text-align:center;max-width:820px;margin:0 auto;} .sec-head .eyebrow{display:block;margin-bottom:14px;} .sec-head h2{font-size:clamp(2rem,4vw,3.2rem);color:var(--ink);margin-bottom:14px;} .sec-head p{color:var(--muted);font-size:1.05rem;} /* ---- prose block (verbatim paragraphs) ---- */ .prose{padding:clamp(56px,7vw,96px) 0;} .prose .wrap{max-width:820px;margin:0 auto;padding:0 28px;} .prose h2{font-size:clamp(1.8rem,3.4vw,2.6rem);color:var(--ink);margin:0 0 22px;} .prose h3{font-size:1.5rem;color:var(--ink);margin:30px 0 12px;} .prose p{color:var(--muted);margin-bottom:18px;} /* ---- VIDEO SHOWCASE (real client lifestyle clips; autoplay-muted-loop) ---- */ .videoshow{padding:clamp(64px,8vw,110px) 0;background:var(--cream);text-align:center;} .videoshow .vid-wrap{max-width:940px;margin:42px auto 0;border-radius:14px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.18);background:#0d0d0d;line-height:0;} .videoshow video{display:block;width:100%;height:auto;aspect-ratio:16/9;} .videoshow .vid-cap{margin:22px auto 0;max-width:680px;font-family:var(--serif);font-style:italic;font-size:1.12rem;color:var(--muted);line-height:1.6;} /* Cap a standard-definition clip at its NATIVE size instead of stretching it. The Marvin diving clip is the one low-quality source on the site: 1280x720 at 898 kbps, about a third of the bitrate 720p normally wants. At the default 940px it was drawn across 1880 device pixels on a 2x screen — a 1.47x upscale on top of that compression, which is what made it read as blurry. 640 CSS px is exactly 1280 device px, so it renders 1:1. Deliberately NOT applied to .vid-wrap generally: the other showcases are YouTube facades (YouTube serves its own resolution) and would only be made smaller for no gain. */ .videoshow .vid-wrap--native{max-width:640px;} /* lazy YouTube facade: self-hosted thumbnail + play button -> loads nocookie iframe on click (components.js) */ .yt-facade{position:relative;width:100%;aspect-ratio:16/9;cursor:pointer;background:#0d0d0d;overflow:hidden;} .yt-facade img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .yt-facade::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,13,13,.12),rgba(13,13,13,.45));transition:background .3s;} .yt-facade:hover::after{background:linear-gradient(180deg,rgba(13,13,13,.02),rgba(13,13,13,.32));} .yt-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:78px;height:78px;border-radius:50%;background:rgba(176,141,87,.94);display:flex;align-items:center;justify-content:center;z-index:2;transition:transform .3s,background .3s;} .yt-facade:hover .yt-play{transform:translate(-50%,-50%) scale(1.08);background:var(--gold);} .yt-play::before{content:'';width:0;height:0;border-style:solid;border-width:13px 0 13px 22px;border-color:transparent transparent transparent #fff;margin-left:5px;} .yt-facade iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3;} /* ---- BEFORE/AFTER GALLERY ---- */ .gallery{padding:clamp(64px,8vw,110px) 0;} .gallery .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin-top:46px;} .gallery figure{margin:0;border-radius:12px;overflow:hidden;box-shadow:0 2px 16px rgba(0,0,0,.08);background:#fff;} .gallery figure img{width:100%;height:auto;display:block;transition:transform .5s ease;} .gallery figure:hover img{transform:scale(1.04);} .gallery figcaption{padding:12px 16px;font-size:.85rem;color:var(--muted);text-align:center;line-height:1.5;} @media(max-width:767px){ .gallery .grid{grid-template-columns:1fr;} .gallery .grid figure[style*="grid-column"]{grid-column:auto !important;} } /* ===================================================================== STACKED-SECTION SPACING COLLAPSE (site-wide) Each full-width band carries its own generous top AND bottom padding (~90-110px). Where two bands sit back-to-back the paddings ADD UP, so the gap doubled to ~200px+. These rules collapse EVERY adjacent band pair to ~70px total (client round 2: the first pass only covered five specific pairs at ~100px — still read as "huge" on the transplant page's cardgrid→prose / cardgrid→feature seams and the Results pages). .feature and .parallax carry no padding of their own, so they appear only as neighbors: a band BEFORE them gets its bottom trimmed, a band AFTER them gets its top trimmed. :is() keeps specificity at (0,2,0), beating the single-class base rules regardless of source order. ===================================================================== */ :is(.prose,.gallery,.cardgrid,.vtestim,.callout,.faq,.feature,.parallax,.ticker-sec,.videoband) + :is(.prose,.gallery,.cardgrid,.vtestim,.callout,.faq){padding-top:clamp(18px,2.5vw,34px);} :is(.prose,.gallery,.cardgrid,.vtestim,.callout,.faq):has( + :is(.prose,.gallery,.cardgrid,.vtestim,.callout,.faq,.feature,.parallax,.ticker-sec,.videoband)){padding-bottom:clamp(20px,3vw,38px);} /* page-hero (cream) into the first band — same tightening */ .page-hero + :is(.prose,.gallery,.cardgrid,.vtestim,.callout,.faq){padding-top:clamp(20px,3vw,40px);} .page-hero:has(+ :is(.prose,.gallery,.cardgrid,.vtestim,.callout,.faq)){padding-bottom:clamp(28px,4vw,52px);} /* ---- VIDEO TESTIMONIALS (portrait client videos; click-to-play, no autoload) ---- */ .vtestim{padding:clamp(56px,7vw,96px) 0;background:var(--cream);text-align:center;} .vtestim .grid{display:flex;gap:32px;justify-content:center;flex-wrap:wrap;margin-top:44px;} .vtestim figure{margin:0;} .vtestim video{width:min(340px,82vw);aspect-ratio:9/16;height:auto;border-radius:16px;background:#0d0d0d;object-fit:cover;box-shadow:0 26px 64px rgba(0,0,0,.20);} .vtestim figcaption{margin-top:14px;font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--ink);} /* featured client videos inside the shared dark reviews section */ .review-videos{display:flex;gap:26px;justify-content:center;align-items:flex-start;flex-wrap:wrap;margin-top:40px;} .rv-col{display:flex;flex-direction:column;gap:26px;align-items:center;} .review-videos figure{margin:0;text-align:center;} .review-videos video{width:min(264px,74vw);aspect-ratio:9/16;height:auto;border-radius:14px;background:#000;border:1px solid #2a2a2a;object-fit:cover;box-shadow:0 20px 48px rgba(0,0,0,.28);} .review-videos figcaption{margin-top:12px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);} .review-videos figure.landscape video,.vtestim figure.landscape video{aspect-ratio:16/9;width:min(90vw,460px);} /* Cloudflare Stream embeds (Arnold's clips) have an iframe, not a