/* ===== PHONE LAYER (2026-09-23) — the phone site designed on purpose, HBH v5 recipe. Loaded after styles.css with media="(max-width:900px)"; wins on conflict. CSS + tiny JS only: every word stays where it is, blocks move. Home shell first (header, drawer, hero, fact strip, sticky call bar). ===== */ :root{--hdr-h:60px;--bar-h:64px} /* ---- header: slim one-line lockup, hides on scroll-down, returns on scroll-up (mobile.js) ---- */ header{transition:transform .28s ease;background:var(--cream);-webkit-backdrop-filter:none;backdrop-filter:none;transform:translate3d(0,0,0)} /* solid on phones: iOS rasterizes a blurred + animated sticky bar at low resolution (blurry text) */ /* no will-change: a transformed header would become the containing block of the fixed drawer */ header.hdr-hide{transform:translate3d(0,-100%,0)} .nav{padding:8px 0;gap:10px;min-height:var(--hdr-h)} .logo{gap:10px;min-height:44px;align-items:center} .logo-img{height:40px} .logo .lt .nm{font-size:1.06rem;white-space:nowrap;line-height:1.05} .logo .lt .sub{font-size:.75rem;letter-spacing:.06em;margin-top:2px} .nav-cta{gap:6px} .nav-cta > .lang-switch{display:none} /* moved into the drawer by mobile.js */ .burger{display:flex;width:44px;height:44px;padding:0;margin:0;align-items:center;justify-content:center;gap:5px;box-sizing:border-box;border-radius:10px} .burger span{width:22px;transition:transform .22s ease,opacity .22s ease} body.nav-open .burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)} body.nav-open .burger span:nth-child(2){opacity:0} body.nav-open .burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)} @media(max-width:360px){.logo .lt .nm{font-size:.98rem}.logo .lt .sub{font-size:.7rem;letter-spacing:.04em}.logo-img{height:36px}} /* ---- drawer: app-style panel under the header, navy brand band, 60px rows, call card at the bottom ---- */ .nav-links.open{position:fixed;top:var(--hdr-h);left:0;right:0;bottom:0;z-index:70;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;background:var(--cream);box-shadow:none;border:0;overflow-y:auto;-webkit-overflow-scrolling:touch} .nav-links.open::before{content:"";display:block;flex:0 0 8px;background:linear-gradient(90deg,var(--navy) 0 70%,var(--gold) 70% 100%)} /* slim brand stripe; the header above already carries the logo */ .nav-links.open a{display:flex;width:100%;align-items:center;min-height:60px;padding:0 24px;margin:0;font-size:1.12rem;font-weight:700;color:var(--navy);border-bottom:1px solid var(--cream-deep);background:var(--white)} .nav-links.open a::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--gold-deep);border-bottom:2px solid var(--gold-deep);transform:rotate(-45deg);opacity:.7} .nav-links.open .lang-switch{margin:18px 24px 0;align-self:flex-start;border-radius:10px} .nav-links.open .lang-switch a{min-height:44px;padding:0 16px;font-size:.9rem;border:0;background:var(--white)} .nav-links.open .lang-switch a.active{background:var(--gold);color:#fff} .nav-links.open .lang-switch a::after{display:none} .nav-links.open .nav-call{margin:auto 20px calc(20px + env(safe-area-inset-bottom,0px));min-height:54px;justify-content:center;border-radius:12px;background:var(--gold);color:#fff;font-weight:800;font-size:1.05rem;border:0;box-shadow:var(--shadow-soft)} .nav-links.open .nav-call::after{display:none} body.nav-open{overflow:hidden} /* the drawer node is moved to on phones by mobile.js, so header transforms never clip it */ body > .nav-links:not(.open){display:none} body.nav-open header{transform:none} /* ---- sticky call bar: frosted navy strip at the thumb, safe-area padded; hidden while the home hero is on screen ---- */ .mobile-call{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;border-radius:0;padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px));background:rgba(21,83,158,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font-weight:800;font-size:1.05rem;letter-spacing:.01em;box-shadow:0 -8px 24px rgba(21,36,58,.12);transition:transform .3s ease} .mobile-call svg{width:20px;height:20px;color:var(--gold-soft,#f5c86b)} body{padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom,0px))} body.hero-in-view .mobile-call{transform:translateY(120%)} body.nav-open .mobile-call{transform:translateY(120%)} /* ---- home hero: one screen — art on top, words centred under it, ONE solid action, fact strip ---- */ .home .hero{min-height:calc(100svh - var(--hdr-h));display:flex;align-items:stretch;padding:0} .home .hero-grid{display:flex;flex-direction:column;gap:0;padding:8px 18px 18px;max-width:none;margin:0;width:100%} .home .hero-art{order:-1;display:flex;flex-direction:column;align-items:center} .home .hero-art-pill{order:2;margin:10px 0 0;font-size:.66rem;padding:6px 12px;white-space:nowrap;box-shadow:none;border:1px solid var(--cream-deep)} .home .growth-card{order:1;width:100%;padding:0;background:none;box-shadow:none;border:0;border-radius:0;transform:none} .home .growth-img{border-radius:12px} .home .hero-grid > div:first-child{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:14px} .home .hero h1{order:1;font-size:clamp(1.9rem,8.2vw,2.5rem);line-height:1.05;margin:0} .home .hero h1 .hero-spec{font-size:clamp(1rem,4.2vw,1.2rem);margin-top:6px} .home .hero-tagline{order:2;font-size:1rem;margin:8px 0 0;max-width:30ch} .home .hero-actions{order:3;width:100%;flex-direction:column;align-items:stretch;gap:2px;margin-top:16px} .home .hero-actions .btn-primary{min-height:52px;justify-content:center;font-size:1.05rem;border-radius:12px} .home .hero-actions .btn-ghost{background:none;border:0;box-shadow:none;color:var(--navy);text-decoration:underline;text-underline-offset:3px;min-height:44px;justify-content:center;font-size:.95rem} .home .hero-feats{order:4;display:grid;grid-template-columns:repeat(3,1fr);gap:0;width:100%;margin:14px 0 0;border-top:1px solid var(--cream-deep);border-bottom:1px solid var(--cream-deep)} .home .hero-feats .hf{flex-direction:column;justify-content:flex-start;gap:6px;background:none;border:0;border-radius:0;padding:12px 6px 10px;font-size:.7rem;line-height:1.2;text-align:center;font-weight:800;color:var(--navy);letter-spacing:.01em} .home .hero-feats .hf + .hf{border-left:1px solid var(--cream-deep)} .home .hero-feats .hf svg{width:20px;height:20px} .home .hero p.lead{order:5;font-size:1.02rem;line-height:1.55;margin:20px 0 0;text-align:left;max-width:none} /* doodles: keep a few, out of the reading column */ .home .hero-deco svg:nth-of-type(n+6){display:none} .home .hero-deco svg{opacity:.35} /* the four-fact strip right under the hero reads as the second screen; tighten it */ .fact-strip{padding:20px 0} .fact-strip .trust-row{grid-template-columns:repeat(2,1fr);gap:16px 18px} /* ---- phone landscape: art beside the words so the name is in the first screen ---- */ @media (max-height:520px) and (orientation:landscape){ .home .hero{min-height:0} .home .hero-grid{flex-direction:row;align-items:center;gap:18px;padding:12px 22px 16px} .home .hero-art{flex:0 0 44%;order:2} .home .hero-grid > div:first-child{flex:1;margin-top:0;align-items:flex-start;text-align:left} .home .hero h1{font-size:1.7rem} .home .hero-tagline{margin-top:4px} .home .hero-actions{margin-top:10px} .home .hero-actions .btn-primary{min-height:46px} .home .hero-feats{margin-top:10px} .home .hero-feats .hf{padding:8px 4px 6px} .home .hero p.lead{font-size:.92rem;margin-top:10px} } /* ---- small functional icons stay crisp on phones: the crayon displacement filter reads as grain below ~80px ---- */ .cx-mark svg{filter:none;shape-rendering:geometricPrecision} .hero-feats .hf svg,.trust-row .t-ic svg{shape-rendering:geometricPrecision} /* ===== PHASE 2 (2026-09-23) — inner pages on phones: centred page heads, doodles out of the head, rows not cards, hairline accordions, swipe cross-links, tap floors. `.inner` pages only; wording untouched. ===== */ .inner section{padding:48px 0} /* doodle layer starts below the page head so nothing sits on the breadcrumb or title */ .inner .page-deco{top:440px} .inner .page-deco svg{opacity:.16 !important} /* watermark-faint on phones: no gutter to keep them out of the text */ /* page heads: breadcrumb, kicker, title, rule, intro — centred, tighter */ .inner .breadcrumb{font-size:.78rem;text-align:center;margin:0 0 14px} .inner .sec-head{text-align:center;justify-items:center;margin:0 0 28px} .inner .sec-head .kicker,.inner .kicker,.inner .cond-kicker{font-size:.76rem} .inner .sec-head .rule{margin:0 auto 14px} .inner .sec-head h1,.inner .sec-head h2{font-size:clamp(1.85rem,7.6vw,2.4rem);line-height:1.1} .inner .sec-head p{font-size:1rem;max-width:34ch;margin:12px auto 0} .inner .wrap > h1{text-align:center;font-size:clamp(1.85rem,7.6vw,2.4rem);line-height:1.1} .inner .cond{padding:22px 0 12px} .inner .cond > .breadcrumb,.inner .cond .cond-kicker,.inner .cond > h1{text-align:center} .inner .cond > .rule{margin:0 auto 18px} .inner .cond h1{font-size:clamp(1.85rem,7.6vw,2.4rem);line-height:1.1} .inner .cond h2{font-size:1.45rem;margin-top:30px} .inner .cond p,.inner .cond ul.body-list li{font-size:1.02rem} .inner .cond .lead-em{font-size:1.08rem;text-align:center} /* What We Treat: tappable rows — crayon icon as a 56px thumb, name, one line, arrow; whole row is the link (mobile.js) */ .inner .svc-grid{border-top:1px solid var(--cream-deep)} .inner .svc,.inner .svc:nth-child(even){grid-template-columns:56px minmax(0,1fr);gap:0 14px;align-items:center;padding:18px 0;cursor:pointer} .inner .svc .ic,.inner .svc:nth-child(even) .ic{grid-column:1;grid-row:1/4;width:56px;justify-self:start} .inner .svc .ic svg{width:44px;height:44px;filter:none} .inner .svc h2,.inner .svc p,.inner .svc .svc-link,.inner .svc:nth-child(even) h2,.inner .svc:nth-child(even) p,.inner .svc:nth-child(even) .svc-link{grid-column:2} .inner .svc h2{font-size:1.2rem;margin:0 0 4px;line-height:1.15} .inner .svc p{font-size:.94rem;line-height:1.45;margin:0} .inner .svc .svc-link{margin-top:6px;font-size:.92rem;min-height:32px;display:inline-flex;align-items:center} .inner .svc-note{margin-top:26px;padding:4px 0 4px 16px} /* Who We Treat: illustration as a 92px thumb beside the words */ .inner .aud,.inner .aud:nth-child(even){grid-template-columns:92px minmax(0,1fr);gap:0 16px;align-items:center;padding:20px 0} .inner .aud .ai,.inner .aud:nth-child(even) .ai{grid-column:1;grid-row:1/3;width:92px;max-width:92px;justify-self:start;border-radius:12px} .inner .aud h2,.inner .aud p,.inner .aud:nth-child(even) h2,.inner .aud:nth-child(even) p{grid-column:2} .inner .aud h2{font-size:1.3rem;margin:0 0 4px} .inner .aud p{font-size:.95rem;line-height:1.45;margin:0} /* accordions: hairline rows, plus sign on the right */ .faq-wrap{border-top:1px solid var(--cream-deep)} .faq{background:none;border:0;border-bottom:1px solid var(--cream-deep);border-radius:0;box-shadow:none;margin:0} .faq summary{padding:16px 0;font-size:1.02rem;line-height:1.3;gap:14px} .faq summary:hover{background:none} .faq[open]{box-shadow:none} .faq[open] summary{border-bottom:0} .faq .body{padding:0 0 16px} .faq summary .pm{width:26px;height:26px;background:none;border:1.5px solid var(--gold);color:var(--gold-deep)} .faq-row{margin-bottom:0} /* cross-links between conditions: one swipe row of chips */ .sib-links{display:flex;flex-wrap:nowrap;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:24px -18px 0;padding:4px 18px 8px} .sib-links::-webkit-scrollbar{display:none} .sib-links a{flex:0 0 auto;white-space:nowrap;scroll-snap-align:start;min-height:44px;display:inline-flex;align-items:center;padding:10px 16px;background:#fff;border:1px solid var(--cream-deep)} /* tap floors: footer and contact-list links */ footer li a,.foot-grid a,.info-row a{display:inline-flex;align-items:center;min-height:40px} /* About: the name and heading come first on phones; the photo follows the intro (doctor prefers not to lead with his photo) */ .inner .about-grid{display:flex;flex-direction:column;gap:18px} .inner .about-grid > .about-photo{order:2;max-width:220px;align-self:center} .inner .about h1{text-align:center;font-size:clamp(1.85rem,7.6vw,2.4rem)} .inner .about .kicker,.inner .about .breadcrumb{text-align:center} .inner .about .rule{margin:0 auto 16px} /* ===== PHASE 3 (2026-09-25) — contact page + home reviews on phones. ===== */ /* contact: call and hours before the address; map with a poster behind it (no blank block); illustrated map cropped to the block */ .inner .info-card{display:flex;flex-direction:column;padding:0} .inner .info-row{margin-bottom:18px} .inner .info-row:nth-child(1){order:3;margin-bottom:0} .inner .info-row:nth-child(2){order:1} .inner .info-row:nth-child(3){order:2} .inner .info-row h2{font-size:1.05rem;margin-bottom:4px} .inner .info-row p{font-size:1rem} .inner .hours-table td{font-size:.92rem;padding:9px 0} .inner .map-box{min-height:0;height:240px;margin:6px 0 0;border-radius:12px;background:var(--cream-deep) url(map-plate-800.png) center/cover no-repeat} .inner .map-box iframe{min-height:0;height:240px} .inner .illus-map{position:relative;overflow:hidden;aspect-ratio:4/3;border-radius:12px;margin:14px 0 0;border:1px solid var(--cream-deep)} .inner .illus-map img{position:absolute;width:235%;max-width:none;height:auto;left:-54%;top:-32%} /* what to expect: a left rail of numbers instead of centred circles */ .inner .steps-grid{max-width:none;margin:0;gap:20px} .inner .step{display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 14px;text-align:left;padding:0;align-items:start} .inner .step .n{width:44px;height:44px;font-size:1.4rem;grid-row:1/3;margin:0} .inner .step h3{grid-column:2;font-size:1.2rem;margin:9px 0 4px;line-height:1.15} .inner .step p{grid-column:2;font-size:.95rem;line-height:1.5;margin:0} .inner .newpt{padding:28px 0 0} .inner .np-cards{gap:0} /* home reviews: drawing full width, Google strip compact, the three quotes as a swipe strip */ .home .rev-editorial{display:flex;flex-direction:column;gap:18px} .home .rev-editorial > *{min-width:0;width:100%} .home .rev-lead{gap:18px} .home .thanks-card{max-width:none;width:100%;margin:0;transform:rotate(-1.2deg)} .home .greview{padding:18px 16px;border-radius:12px} .home .greview-btns{flex-direction:column;align-items:stretch;gap:8px} .home .greview-btns .btn{width:100%;justify-content:center} .home .rev-quotes{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:12px;border-top:0;margin:0 -18px;padding:4px 18px 10px} .home .rev-quotes::-webkit-scrollbar{display:none} .home .rcard{flex:0 0 calc(100vw - 64px);max-width:calc(100vw - 64px);scroll-snap-align:start;background:#fff;border:1px solid var(--cream-deep);border-bottom:1px solid var(--cream-deep);border-radius:14px;padding:22px 18px 18px 44px} .home .rcard::before{left:14px;top:8px;font-size:3rem} .home .rcard p{font-size:1.25rem}