/* ============================================================ Willow Tree Mental Health — client.css Renovation of willowtreementalhealth.com. Every colour token below is graded KEEP-VERBATIM in the signed Inheritance Ledger (2026-08-02). Do not "modernise" them. ============================================================ */ :root{ /* Inherited palette — exact values, KEEP-VERBATIM (KV04) */ --petrol:#013941; --petrol-lift:#01555F; /* button hover only */ --ink-deep:#011619; --teal:#CFE3E2; --sand:#EBD3AD; --ground-warm:#EAE6E1; --ground-cool:#F5F8FA; --sage:#A6B78A; --white:#FFFFFF; /* Ink — petrol family, never #000 (fixes D13) */ --ink:#153F46; --ink-mute:#456367; --ink-onDark:#DCE9E8; --ink-onDark-mute:#A9C6C6; --hairline:#DBD3C7; --accent-gold:#DCB475; /* the logo's "mental health" gold (KR02) */ /* The logo's "willow" green. Measured by compositing against every ground it actually lands on, not against white: #4F7276 passed on white (5.25:1) but fell to 3.93:1 on the teal band and 4.23:1 on the warm one. #446265 clears AA on all five grounds (4.54-6.60:1) and reads as the same tone. */ --accent-green:#446265; --font-display:'Outfit','Questrial',system-ui,sans-serif; --font-body:'Mulish','Nunito',system-ui,sans-serif; --fs-base:18px; --lh-body:1.75; --lh-head:1.14; --container:1140px; --sec-y:60px; --radius-photo:24px; --radius-card:20px; --radius-pill:32px; --shadow-card:0 10px 30px rgba(1,57,65,.07); --shadow-lift:0 18px 44px rgba(1,57,65,.16); --head-h:128px; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip} body{ margin:0;padding-bottom:0; font-family:var(--font-body);font-size:var(--fs-base);line-height:var(--lh-body); color:var(--ink);background:var(--white); text-wrap:pretty;-webkit-font-smoothing:antialiased; overflow-x:clip; } img{max-width:100%;display:block} picture{display:block} a{color:inherit} h1,h2,h3,h4{ font-family:var(--font-display);font-weight:500;color:var(--petrol); line-height:var(--lh-head);text-wrap:balance;margin:0 0 .55em;letter-spacing:-.012em; } p{margin:0 0 1.05em;text-wrap:pretty} p:last-child{margin-bottom:0} .container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px} .section{position:relative;padding:var(--sec-y) 0;isolation:isolate} .measure{max-width:640px} .measure-wide{max-width:760px} .center{text-align:center;margin-left:auto;margin-right:auto} .skip,.skip-link{position:absolute;left:-9999px} .skip:focus,.skip-link:focus{left:16px;top:10px;z-index:200;background:var(--petrol);color:#fff;padding:10px 18px;border-radius:var(--radius-pill)} .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ---------- ONE button system: petrol pill, 32px radius (KV10, fixes D12) ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.55rem; font-family:var(--font-body);font-weight:700;font-size:17px;letter-spacing:.005em;line-height:1.1; color:#fff;background:var(--petrol);border:1.5px solid var(--petrol); padding:16px 32px;border-radius:var(--radius-pill);text-decoration:none;cursor:pointer; transition:background .25s ease, border-color .25s ease, box-shadow .25s ease; } .btn:hover,.btn:focus-visible{background:var(--petrol-lift);border-color:var(--petrol-lift);box-shadow:0 9px 24px rgba(1,57,65,.28)} .btn--sm{padding:12px 24px;font-size:15.5px;white-space:nowrap} .btn--ghost{background:transparent;color:var(--petrol);border-color:var(--petrol)} .btn--ghost:hover,.btn--ghost:focus-visible{background:var(--petrol);color:#fff} .btn .btn-arrow{transition:transform .28s cubic-bezier(.22,.61,.36,1)} .btn:hover .btn-arrow{transform:translateX(4px)} /* ============================================================ HEADER — sticky, wider than the body container, 424px logo. Ledger KV13–KV15 (geometry) with one deliberate departure: the bar shrinks 128 -> 76px on scroll. Matt, 2026-08-02. Fixed + spacer so the shrink is purely visual and the document never shifts under the scroll trigger. ============================================================ */ .site-header{ position:fixed;left:0;right:0;top:0;z-index:90; background:var(--ground-warm); border-bottom:1px solid rgba(1,57,65,.09); transition:box-shadow .3s ease;will-change:height; } .site-header.is-stuck{box-shadow:0 6px 22px rgba(1,57,65,.09)} .header-spacer{height:var(--head-h);flex:none} /* Wider than the 1140px body container — KV15, and the reason the 424px lockup fits at all. Her live header spans 1192px at a 1440 viewport with 128/119 gutters; ours ran 1265 with 88, so the container was never the tight part. What read as cramped was the nav itself: six items bunched in the middle with ~97px of dead air either side. So the container widens a little and the nav gap does most of the work. */ .site-header .container{max-width:1460px;padding-inline:clamp(24px,4vw,64px)} .header-inner{ display:flex;align-items:center;gap:20px; min-height:var(--head-h);height:auto;padding-block:0; transition:min-height .34s cubic-bezier(.4,0,.2,1); } .brand{flex:0 1 auto;min-width:0;line-height:0} .brand img{width:424px;height:auto;transition:width .34s cubic-bezier(.4,0,.2,1)} .site-header.is-stuck .header-inner{min-height:76px;padding-block:0} .site-header.is-stuck .brand{display:flex;align-items:center} .site-header.is-stuck .brand img{width:272px} .nav{margin-left:auto;display:flex;align-items:center;gap:28px} @media (min-width:901px){.nav{margin-left:auto;margin-right:auto}} .nav-list{display:flex;align-items:center;gap:32px;list-style:none;margin:0;padding:0;flex-wrap:nowrap} .nav-list>li{position:relative;white-space:nowrap} .nav-list>li>a{ display:inline-flex;align-items:center;height:40px; font-family:var(--font-body);font-size:16px;font-weight:600; color:var(--petrol);text-decoration:none;padding:9px 0;position:relative; } /* hover underline lives on ::before so ::after stays free for the caret */ .nav-list>li>a::before{ content:"";position:absolute;left:0;right:100%;bottom:2px;height:1.5px; background:var(--petrol);transition:right .28s cubic-bezier(.22,.61,.36,1); } .nav-list>li>a:hover::before, .nav-list>li>a:focus-visible::before, .nav-list>li.dropdown:hover>a::before{right:0} /* caret on dropdown parents (fixes D-nav: parents must telegraph a submenu) */ .nav-list>li.dropdown>a::after{ content:"";width:7px;height:7px;margin-left:8px;flex:0 0 auto; border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor; transform:translateY(-2px) rotate(45deg);transition:transform .25s ease; } .nav-list>li.dropdown:hover>a::after{transform:translateY(0) rotate(225deg)} /* Parent rows are not destinations — never let them navigate. */ .nav-list .dropdown>a{cursor:default} /* Hover bridge scoped to the ITEM, never the menu width. A bridge that spans .nav-list opens two submenus at once. */ .nav-list>li.dropdown::after{content:"";position:absolute;left:-10px;right:-10px;top:100%;height:14px} .dropdown-menu,.sub-menu{ position:absolute;top:calc(100% + 13px);left:-18px;min-width:262px;margin:0;padding:10px 0; list-style:none;background:var(--white);border:1px solid var(--hairline);border-radius:14px; box-shadow:0 16px 38px rgba(1,57,65,.13);z-index:5; opacity:0;visibility:hidden;transform:translateY(-7px); transition:opacity .22s ease,transform .22s ease,visibility .22s; } .dropdown-menu li,.sub-menu li{list-style:none;margin:0;padding:0} .nav-list>li.dropdown:hover>.dropdown-menu, .nav-list>li.dropdown:focus-within>.dropdown-menu, .nav-list>li.menu-item-has-children:hover>.sub-menu, .nav-list>li.menu-item-has-children:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none} .dropdown-menu a,.sub-menu a{ display:block;padding:9px 22px;font-size:15.5px;font-weight:500;color:var(--ink); text-decoration:none;transition:background .2s ease,color .2s ease;white-space:normal; } .dropdown-menu a:hover,.dropdown-menu a:focus-visible, .sub-menu a:hover,.sub-menu a:focus-visible{background:var(--ground-cool);color:var(--petrol)} /* Grouped panel: Work With Us holds Services and Specialties as headings rather than as two more top-level items. A heading is a , never a link — keyboard users should not land on a dead href="#". */ .dropdown-menu.drop-panel{min-width:288px;padding:14px 0} .drop-panel > li + li{margin-top:6px;padding-top:12px;border-top:1px solid var(--hairline)} .drop-group-label{ display:block;padding:0 22px 8px; font-family:var(--font-body);font-size:12px;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--accent-green); } .drop-items{list-style:none;margin:0;padding:0} .drop-items a{ display:block;padding:9px 22px;font-size:15.5px;font-weight:500;color:var(--ink); text-decoration:none;white-space:normal;transition:background .2s ease,color .2s ease; } .drop-items a:hover,.drop-items a:focus-visible{background:var(--ground-cool);color:var(--petrol)} /* Header phone stacked over the CTA — the pair reads as one block */ .head-actions{display:flex;flex-direction:column;align-items:stretch;gap:9px;flex:0 0 auto;width:196px;margin-bottom:5px} .nav-phone{ font-family:var(--font-body);font-weight:700;font-size:16.5px;color:var(--petrol); text-decoration:none;white-space:nowrap; } /* The drawer carries its own phone link; above the burger breakpoint the header's stacked phone+CTA block is the only one that shows. */ .nav > .nav-phone{display:none} .head-actions .nav-phone{ position:relative;display:block;text-align:center;line-height:1.1; padding:5px 10px;border-radius:10px; transition:color .26s ease,background-color .32s ease; } .head-actions .nav-phone::before{content:"";position:absolute;left:10px;right:10px;bottom:0;height:1.5px;background:var(--sand)} .head-actions .nav-phone::after{ content:"";position:absolute;left:10px;right:10px;bottom:0;height:1.5px;background:var(--petrol); transform:scaleX(0);transform-origin:left center;transition:transform .34s cubic-bezier(.22,1,.36,1); } .head-actions .nav-phone:hover,.head-actions .nav-phone:focus-visible{color:var(--petrol);background:rgba(235,211,173,.34)} .head-actions .nav-phone:hover::after,.head-actions .nav-phone:focus-visible::after{transform:scaleX(1)} .head-actions .header-cta{width:100%;justify-content:center; transition:padding .34s cubic-bezier(.22,1,.36,1),font-size .34s cubic-bezier(.22,1,.36,1),background-color .28s ease,box-shadow .28s ease} .site-header.is-stuck .head-actions{gap:6px;width:180px} .site-header.is-stuck .head-actions .nav-phone{font-size:14.5px;padding:5px 10px} .site-header.is-stuck .head-actions .header-cta{padding:9px 18px;font-size:14.5px} .header-tel{display:none} .burger,.mobile-toggle{ display:none;width:46px;height:44px;border:1px solid rgba(1,57,65,.18);border-radius:11px; background:var(--teal);cursor:pointer;padding:0;align-items:center;justify-content:center; flex-direction:column;gap:5px;flex:0 0 auto;margin-left:auto; } .burger span{display:block;width:20px;height:1.8px;background:var(--petrol);border-radius:2px;flex-shrink:0;min-height:2px;transition:transform .28s ease,opacity .2s ease} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.8px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)} .mobile-nav-close{ display:none;position:absolute;top:10px;right:14px;width:44px;height:44px; background:transparent;border:0;cursor:pointer;padding:0;align-items:center;justify-content:center; color:var(--petrol);transition:transform .25s ease; } .mobile-nav-close:hover{transform:rotate(90deg)} .mobile-nav-close svg{width:22px;height:22px;display:block} /* Blog ships built and styled, but stays out of the advertised nav. Delete this class in Appearance -> Menus to open the loop back up. */ .nav-list>li.nav-hidden,.mobile-nav-links li.nav-hidden{display:none} /* ---------- HERO — inherited split on #EAE6E1 (KR07) ---------- */ .hero{background:var(--ground-warm);padding:64px 0 68px;overflow:hidden;border-bottom:1px solid var(--accent-gold)} .hero-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:48px;align-items:center} .hero h1{font-size:clamp(38px,4.6vw,57px);font-weight:500;margin-bottom:.34em;letter-spacing:-.022em} .hero-sub{font-size:21px;font-weight:500;color:var(--ink);margin-bottom:.5em;max-width:30em} .hero-geo{font-size:16.5px;color:var(--ink-mute);max-width:30em;margin-bottom:1.5em} .hero-cta{display:block} .hero-cta .btn{display:flex;width:100%;justify-content:center;max-width:30em} .hero-figure{position:relative;isolation:isolate;margin:0} .hero-figure img{width:100%;height:auto;border-radius:var(--radius-photo);position:relative;z-index:1;box-shadow:0 16px 40px rgba(1,57,65,.13)} /* KV07 — offset circle behind a rounded photograph */ .offset-circle{position:absolute;border-radius:50%;z-index:0} .hero-figure .offset-circle{width:60%;padding-bottom:60%;background:var(--sand);left:-44px;bottom:-40px} /* ---------- shared decorative layers (CSS layers, ledger §10.1) ---------- */ /* KV06 — pale willow-leaf watermark bleeding off a band edge. MUST appear on the homepage; its absence there was defect D18. */ .watermark{ position:absolute;pointer-events:none;user-select:none;z-index:-1; /* .30 is what every considered placement on this site already chose — fourteen contexts override the base downward to .13–.5. The old base of .72 was never a design decision; it was simply what the three contexts with no override inherited (the service body and the two closing bands), which put the loudest leaf on the page behind the longest run of reading copy. Anything that genuinely needs more still overrides upward. */ width:760px;max-width:78vw;aspect-ratio:1250/1176;opacity:.30; background:url('../images/watermark.png') center/contain no-repeat; will-change:transform; -webkit-mask-image:radial-gradient(115% 105% at 50% 45%, #000 46%, rgba(0,0,0,.55) 72%, transparent 93%); mask-image:radial-gradient(115% 105% at 50% 45%, #000 46%, rgba(0,0,0,.55) 72%, transparent 93%); } .watermark--right{right:-210px;top:4%} .watermark--bl{left:-210px;bottom:2%;top:auto;right:auto;transform:scaleX(-1)} .watermark--left{left:-250px;bottom:-6%;transform:scaleX(-1);opacity:.16;background-image:url('../images/watermark-light.png')} .watermark--lowright{right:-230px;bottom:-16%;top:auto;left:auto;opacity:.13} .sprig{ display:block;position:absolute;pointer-events:none;user-select:none;z-index:0;opacity:.92; background-position:center;background-size:contain;background-repeat:no-repeat;will-change:transform; } .sprig--up{background-image:url('../images/sprig-up.png');aspect-ratio:345/769} .sprig--fan{background-image:url('../images/sprig-fan.png');aspect-ratio:355/647} .sprig--small{background-image:url('../images/sprig-small.png');aspect-ratio:355/647} .sprig--wreath{background-image:url('../images/sprig-wreath.png');aspect-ratio:405/830} /* KV09 — her actual hand-drawn line icons. No stock substitutes. */ .panel-icon{display:block;width:50px;height:50px;margin-bottom:16px;background-position:center;background-size:contain;background-repeat:no-repeat} .icon--heart-circle{background-image:url('../images/icon-heart-circle.png')} .icon--leaf-heart{background-image:url('../images/icon-leaf-heart.png')} .icon--plant-heart{background-image:url('../images/icon-plant-heart.png')} .curve{display:block;width:100%;height:44px;position:absolute;left:0;bottom:-1px;z-index:2;pointer-events:none} .curve svg{display:block;width:100%;height:100%} .curve--top{top:-1px;bottom:auto;z-index:3} .curve--shallow{height:34px} /* ---------- VIGNETTE PANELS — #F5F8FA ---------- */ .pain{background:var(--ground-cool);padding:58px 0 62px;overflow:hidden} .pain-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:0 26px;position:relative} .panel{ background:var(--white);border:1px solid #E6EDEF;border-radius:var(--radius-card); padding:32px 36px 34px;box-shadow:var(--shadow-card);position:relative;z-index:1; } .panel + .panel{margin-top:30px} .panel h2{font-size:clamp(26px,2.6vw,33px);margin-bottom:.5em} .panel p{font-size:17.5px} .panel--0,.panel--2{grid-column:1/9} .panel--1,.panel--3{grid-column:5/13} .pain .sprig--up{left:2%;top:31%;width:158px} .pain .sprig--fan{right:1%;bottom:15%;width:150px;opacity:.8} /* ---------- BRIDGE — sand ---------- */ .bridge{background:var(--sand);padding:56px 0 70px;overflow:hidden;position:relative} .bridge-grid{display:grid;grid-template-columns:1fr .92fr;gap:54px;align-items:center} .bridge h2{font-size:clamp(29px,3.1vw,39px)} .bridge p{color:#3A3222} .bridge-figure{position:relative;isolation:isolate;margin:0} .bridge-figure img{width:100%;height:auto;border-radius:var(--radius-photo);position:relative;z-index:1;box-shadow:0 16px 40px rgba(1,57,65,.15)} .bridge-figure .offset-circle{width:56%;padding-bottom:56%;background:var(--teal);right:-38px;top:-34px} /* ---------- SERVICES — white, magazine-editorial asymmetric (fixes D3) ---------- */ .services{background:var(--white);padding:58px 0 62px;overflow:hidden;position:relative} .services::before{ content:"";position:absolute;inset:0;z-index:-1; background-size:cover;background-position:center 30%;background-attachment:fixed; opacity:.10;filter:contrast(1.06) blur(1.5px); } .services.bg-loaded::before{ background-image:url('../images/texture-leaf.jpg'); background-image:image-set(url('../images/texture-leaf.webp') type('image/webp'),url('../images/texture-leaf.jpg') type('image/jpeg')); } .services-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:32px;flex-wrap:wrap} .services-head h2{font-size:clamp(29px,3.1vw,39px);margin:0} .svc-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:22px} .svc{ position:relative;display:flex;flex-direction:column;justify-content:space-between; overflow:hidden;isolation:isolate; background:var(--white);border:1px solid var(--hairline);border-radius:var(--radius-card); padding:28px 30px 26px;text-decoration:none; transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, background-color .24s ease, border-color .24s ease; } .svc:hover,.svc:focus-visible{transform:translateY(-5px);box-shadow:var(--shadow-lift);border-color:#C9BBA4} .svc h3{font-size:19px;font-weight:400;margin-bottom:1.05em;letter-spacing:-.004em;color:var(--ink-mute)} .svc-name{ display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:auto; font-family:var(--font-display);font-size:24px;font-weight:500;letter-spacing:-.012em; color:var(--petrol);background:var(--ground-warm); border:1px solid var(--hairline);border-radius:14px;padding:16px 20px; } .svc h3,.svc .svc-name{transition:color .01s linear .09s,background-color .24s ease,border-color .24s ease} .svc-name .arrow{transition:transform .28s cubic-bezier(.22,.61,.36,1)} .svc:hover .svc-name .arrow{transform:translateX(5px)} .svc--0{grid-column:1/8;grid-row:1/3;padding:34px 36px 30px;min-height:284px} .svc--0 h3{font-size:clamp(23px,2.4vw,28px);max-width:12em} .svc--0 .svc-name{font-size:30px;padding:18px 22px} .svc--1{grid-column:8/13;grid-row:1/2} .svc--2{grid-column:8/13;grid-row:2/3} .svc--3{grid-column:1/6;grid-row:3/4} .svc--4{grid-column:6/13;grid-row:3/4} .svc--4 h3{max-width:14em} .svc--5{grid-column:1/7;grid-row:4/5} .svc--6{grid-column:7/13;grid-row:4/5} /* the dark treatment travels the grid */ .svc.is-active{background:var(--petrol);border-color:var(--petrol)} .svc.is-active h3{color:var(--ground-warm)} .svc.is-active .svc-name{background:rgba(255,255,255,.10);border-color:rgba(207,227,226,.30);color:var(--sand)} .svc.is-active::before{ content:"";position:absolute;inset:0;z-index:-1; background:url('../images/texture-leaf.jpg') 60% 35%/cover no-repeat; filter:invert(1) blur(2px);mix-blend-mode:screen;opacity:.24; } .svc.is-active:hover{border-color:var(--petrol);box-shadow:0 20px 48px rgba(1,57,65,.34)} /* ---------- BIO — #EAE6E1 ---------- */ .bio{background:var(--ground-warm);padding:62px 0;overflow:hidden} .bio-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:56px;align-items:center} .bio-figure{position:relative;isolation:isolate;margin:0} .bio-figure img{width:100%;height:auto;border-radius:var(--radius-photo);position:relative;z-index:1;box-shadow:0 16px 40px rgba(1,57,65,.14)} .bio-figure .offset-circle{width:64%;padding-bottom:64%;background:var(--teal);left:-40px;top:-34px} .bio-figure .sprig--wreath{right:-40px;bottom:-34px;width:132px;z-index:2} .bio h2{font-size:clamp(31px,3.4vw,42px)} .bio p{font-size:18px} /* ---------- OFFICES — white, overlapping photographs ---------- */ .offices{background:var(--white);padding:62px 0;overflow:hidden} .offices-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:60px;align-items:center} .offices h2{font-size:clamp(28px,3vw,38px)} .offices .btn{margin-top:10px} .offices-figure{position:relative;min-height:430px} .offices-figure img{width:100%;height:auto;border-radius:var(--radius-photo);box-shadow:0 16px 40px rgba(1,57,65,.16)} .pic-main{width:70%;margin-left:auto;position:relative;z-index:1} .pic-inset{position:absolute;left:0;bottom:-6px;width:47%;z-index:2} .office-inset{border:6px solid var(--white);border-radius:calc(var(--radius-photo) + 4px)} .offices-figure .offset-circle{width:46%;padding-bottom:46%;background:var(--sand);right:-30px;top:-26px;z-index:0} /* ---------- OUR STAFF — sand, arch-topped portraits (KV08) ---------- */ .team{background:var(--sand);padding:52px 0 56px;overflow:hidden;position:relative} .team-head{text-align:center;margin-bottom:34px} .team h2{font-size:clamp(38px,5.2vw,62px);font-weight:300;line-height:1.02;letter-spacing:-.03em;margin:0 0 10px} .team-lede{margin:0;font-size:17px;color:#6B573A} .team-row{display:flex;justify-content:center;gap:44px;flex-wrap:wrap} .staff{width:360px;max-width:100%;display:flex;flex-direction:column;text-align:center} .staff picture{display:block;line-height:0} /* Arch keeps its dome top and loses the bottom radius; the plate sits flush beneath at matching width — one continuous form, no overlap. */ .arch{ width:100%;height:316px;object-fit:cover;object-position:50% 22%; border-radius:50% 50% 0 0 / 42% 42% 0 0;display:block; } .staff-plate{ background:var(--white);border-radius:0 0 var(--radius-card) var(--radius-card); margin:0;padding:20px 18px;position:relative;text-align:center; box-shadow:0 16px 34px rgba(1,57,65,.13); } .staff-name{background:none;box-shadow:none;border-radius:0;padding:0;margin:0 0 7px; font-family:var(--font-display);font-size:20px;font-weight:500;color:var(--petrol)} .staff-mail{ display:inline-flex;align-items:center;min-height:32px; font-family:var(--font-body);font-size:15px;color:var(--petrol);text-decoration:none; border-bottom:1px solid rgba(1,57,65,.34);transition:color .2s ease,border-color .2s ease; } .staff-mail:hover,.staff-mail:focus-visible{color:var(--petrol-lift);border-bottom-color:currentColor} .team .watermark--right{top:-8%;right:-260px;opacity:.5} .team .watermark--bl{bottom:-12%;left:-260px;opacity:.42} /* ---------- OUTCOMES — petrol deep band ---------- */ .outcomes{background:var(--petrol);color:var(--ink-onDark);padding:60px 0 70px;overflow:hidden;position:relative} .outcomes::after{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background-image:url('../images/grain.png');background-size:160px 160px;opacity:.5; } .outcomes h2{color:var(--ground-warm);font-size:clamp(29px,3.2vw,40px);margin-bottom:.6em} .outcomes .watermark{opacity:.16} .outcomes-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:26px} .outcomes-head{grid-column:1/6} .outcomes-body{grid-column:6/13;display:flex;flex-direction:column;gap:30px} .outcome{ padding:22px 26px;border-radius:var(--radius-card); background:rgba(207,227,226,.07);border:1px solid rgba(207,227,226,.18); display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start; } .outcome p{margin:0;font-size:17.5px;color:var(--ink-onDark)} .outcome p strong{font-weight:700;color:var(--ground-warm)} /* The head column is short next to three outcome cards; her own sprig fills the well rather than leaving ~400px of dead band (D16). */ .outcomes-head .sprig--small{position:static;width:132px;height:240px;margin-top:30px;opacity:.55;filter:brightness(0) invert(1)} .outcome-icon{width:44px;height:44px;display:block;opacity:.9} .outcome-icon img{width:100%;height:100%;object-fit:contain} /* echo the vignettes' stagger; percentages of the column, not em */ .outcome--0{margin-left:0;width:100%} .outcome--1{margin-left:auto;width:86%} .outcome--2{margin-left:7%;width:78%} /* ---------- FINAL CTA + FORM — pale teal (inherited contact band, KR10) ---------- */ .final{background:var(--teal);padding:62px 0 64px;overflow:hidden} .final-head{max-width:none;margin-bottom:22px} .final h2{font-size:clamp(30px,3.3vw,41px)} .final-head p{font-size:18px} .final-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:46px;align-items:stretch} .form-card{ background:var(--white);border:2px solid var(--sand);border-radius:var(--radius-card); padding:30px 32px 32px;max-width:540px;box-shadow:0 14px 34px rgba(1,57,65,.09); display:flex;flex-direction:column;height:100%; } /* ============================================================ WPForms inside a .form-card — pinned to Mockup D's geometry. Measured, not guessed: mockup vs live, computed styles. field width 465 -> was 270 (WPForms sizes inputs at 60%) field size 16.5px -> was 16 field padding 13px 15px -> was 13.6px 16px label 15px sentence case -> was 12px UPPERCASE + tracking button 465x53 @17px -> was 270x41 @13.6px field gap 16px WPForms' modern engine ships ~600 rules with !important, so these need both the compound selector and !important to land. ============================================================ */ .form-card > .wpforms-container, .lp-form-card > .wpforms-container{margin:0;width:100%} .form-card .wpforms-form, .lp-form-card .wpforms-form{width:100%} .form-card .wpforms-container .wpforms-field, .lp-form-card .wpforms-container .wpforms-field{padding:0 0 16px!important;margin:0!important} .form-card .wpforms-container .wpforms-field:last-of-type, .lp-form-card .wpforms-container .wpforms-field:last-of-type{padding-bottom:0!important} .form-card .wpforms-container .wpforms-form .wpforms-field-label, .lp-form-card .wpforms-container .wpforms-form .wpforms-field-label{ display:block!important; font-family:var(--font-body)!important;font-size:15px!important;font-weight:700!important; text-transform:none!important;letter-spacing:.005em!important; color:var(--form-label)!important;margin:0 0 7px!important;line-height:1.3!important; } /* the mockup's labels carry no asterisk. Needs the extra .wpforms-form class to out-specify the parent hook's .wpforms-container .wpforms-form rule. */ .form-card .wpforms-container .wpforms-form .wpforms-required-label, .lp-form-card .wpforms-container .wpforms-form .wpforms-required-label{display:none!important} .form-card .wpforms-container .wpforms-field input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=submit]), .form-card .wpforms-container .wpforms-field textarea, .form-card .wpforms-container .wpforms-field select, .lp-form-card .wpforms-container .wpforms-field input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=submit]), .lp-form-card .wpforms-container .wpforms-field textarea, .lp-form-card .wpforms-container .wpforms-field select{ display:block!important;width:100%!important;max-width:100%!important; box-sizing:border-box!important; font-family:var(--font-body)!important;font-size:16.5px!important;line-height:1.2!important; color:var(--form-field-text)!important;background:var(--form-field-bg)!important; border:1.5px solid var(--form-field-border)!important;border-radius:12px!important; padding:13px 15px!important;height:auto!important; } .form-card .wpforms-container .wpforms-field textarea, .lp-form-card .wpforms-container .wpforms-field textarea{min-height:112px!important;resize:vertical} .form-card .wpforms-container input::placeholder, .form-card .wpforms-container textarea::placeholder, .lp-form-card .wpforms-container input::placeholder, .lp-form-card .wpforms-container textarea::placeholder{color:#93A6A8!important;opacity:1} .form-card .wpforms-container .wpforms-field input:focus, .form-card .wpforms-container .wpforms-field textarea:focus, .lp-form-card .wpforms-container .wpforms-field input:focus, .lp-form-card .wpforms-container .wpforms-field textarea:focus{ outline:none!important;border-color:var(--form-focus)!important;background:#fff!important; box-shadow:0 0 0 3px var(--form-focus-ring)!important; } .form-card .wpforms-container .wpforms-form .wpforms-submit-container, .lp-form-card .wpforms-container .wpforms-form .wpforms-submit-container{padding:6px 0 0!important;margin:0!important} .form-card .wpforms-container .wpforms-form button.wpforms-submit, .lp-form-card .wpforms-container .wpforms-form button.wpforms-submit{ display:inline-flex!important;align-items:center!important;justify-content:center!important; width:100%!important;max-width:100%!important; font-family:var(--font-body)!important;font-size:17px!important;font-weight:700!important; letter-spacing:.005em!important;line-height:1.1!important;text-transform:none!important; color:var(--form-btn-text)!important;background:var(--form-btn-bg)!important; border:1.5px solid var(--form-btn-bg)!important;border-radius:var(--form-btn-radius)!important; padding:16px 32px!important;min-height:53px!important;box-sizing:border-box!important;cursor:pointer; } /* the mockup's submit carries a trailing arrow. ::after is the parent hook's hover sweep, so this rides on ::before. */ .form-card .wpforms-container .wpforms-form button.wpforms-submit::before, .lp-form-card .wpforms-container .wpforms-form button.wpforms-submit::before{ content:"\2192";order:2;margin-left:.2em;font-weight:700; transition:transform .28s cubic-bezier(.22,.61,.36,1); } .form-card .wpforms-container .wpforms-form button.wpforms-submit:hover::before, .lp-form-card .wpforms-container .wpforms-form button.wpforms-submit:hover::before{transform:translateX(4px)} /* hover is the parent's ::after sweep — left alone on purpose */ /* The card stretches to the copy column; the textarea takes the slack so the button still sits on the card's bottom edge, as it does in the mockup. */ .form-card{display:flex;flex-direction:column} /* The !important is load-bearing. WPForms' modern engine ships the container with a 24px bottom margin at a specificity the plain rule above loses to, so the form's copy bottomed out exactly 24px higher than the details panel beside it while the two boxes measured identical. */ .form-card > .wpforms-container{flex:1 1 auto;display:flex;flex-direction:column;margin:0!important} .form-card .wpforms-form{flex:1 1 auto;display:flex;flex-direction:column} .form-card .wpforms-field-container{flex:1 1 auto;display:flex;flex-direction:column} .form-card .wpforms-field-textarea{flex:1 1 auto;display:flex;flex-direction:column} .form-card .wpforms-field-textarea textarea{flex:1 1 0;max-height:300px!important} /* Contact's info column is short — never stretch there. */ .contact-grid{align-items:start} .contact-wrap .form-card{height:auto} .contact-wrap .form-card .wpforms-field-container, .contact-wrap .form-card .wpforms-field-textarea{flex:0 1 auto} .contact-wrap .form-card .wpforms-field-textarea textarea{flex:0 1 auto;max-height:none!important} .contact-side{padding-top:4px} .contact-side .final-head h2{margin-top:0} .contact-photo{width:100%;height:auto;border-radius:var(--radius-photo);box-shadow:0 14px 34px rgba(1,57,65,.14);margin-bottom:26px} .contact-lines{display:flex;flex-direction:column;gap:14px} .contact-line{display:flex;align-items:center;gap:13px;text-decoration:none} .contact-line .ico{flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:var(--white); display:grid;place-items:center;box-shadow:0 4px 12px rgba(1,57,65,.1);transition:background .22s ease} .contact-line:hover .ico{background:var(--sand)} .contact-line .ico svg{width:19px;height:19px;fill:none;stroke:var(--petrol);stroke-width:1.7} .contact-line span{font-family:var(--font-display);font-size:20px;font-weight:500;color:var(--petrol);word-break:break-word} .contact-meta{margin-top:20px;font-size:16px;color:#255A61} .contact-meta .cm-addr,.contact-meta .cm-area{display:block} .contact-meta .cm-area{margin-top:.85em} .only-wide{display:inline} .only-narrow{display:none} /* ---------- CLIENT WORDS — cool white band (§10.3b) ---------- */ /* Her live testimonial band is #F8F8F8; mapped to the palette's cool white rather than adding a sixth grey. */ .words{background:var(--ground-cool);padding:56px 0 60px;overflow:hidden;position:relative} .words-head{max-width:640px;margin-bottom:34px} .words h2{font-size:clamp(28px,3vw,38px)} .words-note{color:var(--ink-mute);font-size:16.5px;margin:0} .words-grid{columns:2;column-gap:26px} .word{ break-inside:avoid;margin:0 0 26px;background:var(--white); border:1px solid #E6EDEF;border-radius:var(--radius-card); padding:26px 28px 22px;box-shadow:var(--shadow-card); } .word blockquote{margin:0;font-size:16.8px;line-height:1.72;color:var(--ink)} .word blockquote p{margin:0 0 .9em} .word figcaption{margin-top:14px;font-family:var(--font-display);font-size:15px;color:var(--accent-green);font-weight:500} .word figcaption::before{content:"— "} .words .watermark--right{top:-6%;right:-250px;opacity:.4} /* ============================================================ INNER PAGES — KV11 hero pattern, inherited verbatim: title left, petrol pill CTA beneath it, rounded photo right, offset sand circle behind the photo, on #EAE6E1. ============================================================ */ .inner-hero,.inner-page-hero{ background:var(--ground-warm);padding:56px 0 60px;overflow:hidden;position:relative; border-bottom:1px solid var(--accent-gold); } /* The hero band runs wider than the 1140px body container and gives the photo the larger share — the same trade the header makes for the logo, and the same one the homepage hero makes. Her live inner-page photo is ~555px; this lands at ~675px without the title column getting cramped. */ .inner-hero .container{max-width:1280px} .inner-hero-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:48px;align-items:center} .inner-hero-content{min-width:0} .inner-hero-content h1,.inner-page-title{ font-size:clamp(34px,4.4vw,58px);font-weight:500;letter-spacing:-.024em; margin:0 0 .3em;color:var(--petrol); } .inner-hero-sub{font-size:19px;color:var(--ink-mute);margin:0 0 1.3em;max-width:24em} .inner-hero-figure{position:relative;isolation:isolate;margin:0} .inner-hero-figure img,.inner-hero-bg,.inner-page-hero-bg{ width:100%;height:auto;border-radius:var(--radius-photo);position:relative;z-index:1; box-shadow:0 16px 40px rgba(1,57,65,.13); } .inner-hero-figure .offset-circle{width:54%;padding-bottom:54%;background:var(--sand);left:-46px;bottom:-38px} .inner-hero .watermark--right{top:-14%;right:-260px;opacity:.34} /* A headshot is portrait; at full column width it would tower over the title. Narrow the figure and cap the height so the band stays a band. */ .inner-hero-grid--portrait{grid-template-columns:1.15fr .85fr} .inner-hero-figure--portrait{max-width:390px;margin-left:auto} .inner-hero-figure--portrait img{aspect-ratio:5/6;max-height:460px;object-fit:cover;object-position:50% 22%} .inner-hero-figure--portrait .offset-circle{width:62%;padding-bottom:62%;left:-38px;bottom:-30px} @media (max-width:768px){ .inner-hero-grid--portrait{grid-template-columns:1fr} .inner-hero-figure--portrait{max-width:300px;margin-inline:auto} } .inner-content{background:var(--white);padding:56px 0 64px;position:relative;overflow:hidden} .service-body{max-width:var(--service-body-max);margin:0 auto} /* Text-only pages (the services and specialties carry no body photographs) get a narrower column so headings and paragraphs end on the same right edge. At 1040px the 64ch measure left the right 45% of every section empty while the headings ran full width — the page read ragged. */ .service-body--narrow{max-width:760px} .service-body--narrow p, .service-body--narrow ul, .service-body--narrow li{max-width:none} .service-body > *{margin-top:clamp(46px,7vw,84px)} .service-body > *:first-child{margin-top:0} .service-body > .inner-lead{margin-top:0} /* The first subheadline renders exactly like every other body H2 — same face, size, weight, colour AND alignment. Left, never centred. */ .inner-lead{margin:0;text-align:left} .service-body h2,.inner-lead h2,.svc-text-col h2{ font-family:var(--font-display);font-style:normal;font-weight:600;color:var(--petrol); font-size:clamp(1.7rem,3vw,2.3rem);line-height:1.15;margin:0 0 .55em;text-align:left; } .service-body h3{font-family:var(--font-display);font-weight:600;color:var(--petrol);font-size:clamp(1.22rem,2vw,1.5rem);margin:0 0 .5em} .service-body p{font-size:17px;line-height:1.8;margin:0 0 1.05em;max-width:64ch} .service-body p:last-child{margin-bottom:0} .service-body ul{margin:0 0 1.2em;padding-left:1.15em;max-width:64ch} .service-body li{margin-bottom:.5em;font-size:17px;line-height:1.75} .service-body strong{color:var(--petrol);font-weight:700} .service-body em{font-style:italic} .it-strong{font-weight:700;font-style:normal} /* image-beside-text (Rule #7 — the H2 lives INSIDE .svc-text-col) */ /* No `margin:0` here — it sits after `.service-body > *` at equal specificity and silently killed the section gap above every image section. */ .svc-img-section{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start} .svc-img-section--reverse .svc-text-col{order:2} .svc-img-section--reverse .svc-img-col{order:1} /* Rule #7 wants the image to match the text height so a three-line photo never sits beside twenty lines. Stretching literally does the opposite on a long section — the About page's coaching section runs thirteen paragraphs and the photo grew past 1000px. Cap the aspect and let the image travel with the reader instead: no dead space, no absurd photo. */ .svc-img-col{position:sticky;top:calc(var(--head-h) + 28px);align-self:start;isolation:isolate} .svc-img-col img{ width:100%;height:auto;aspect-ratio:4/3;max-height:520px;object-fit:cover; border-radius:var(--radius-photo);box-shadow:0 14px 34px rgba(1,57,65,.12); } .svc-img-col--portrait img{aspect-ratio:3/4;max-height:560px;object-fit:cover} .svc-text-col{min-width:0} /* Every top-level section shares ONE vertical gap. Dividers take the gap and the block after them takes a reduced one, so a divider never doubles it. */ .svc-text-block > h2:first-child,.svc-text-block > h3:first-child{margin-top:0} /* a quiet closing block before the final CTA */ .svc-closing{background:var(--ground-cool);border-radius:var(--radius-card);padding:34px 38px} .svc-closing h2{margin-top:0} /* About bio band — the emotional centre of the page gets its own ground. Full-bleed out of the content column; safe because html/body use overflow-x:clip. */ .about-meet{ margin-inline:calc(50% - 50vw);width:100vw;padding:60px clamp(20px,5vw,48px); background:var(--ground-warm);position:relative;overflow:hidden; } .about-meet-inner{max-width:var(--service-body-max);margin:0 auto;display:grid;grid-template-columns:.72fr 1.28fr;gap:52px;align-items:start} .about-meet-figure{position:relative;isolation:isolate;margin:0;position:sticky;top:calc(var(--head-h) + 24px)} .about-meet-figure img{ position:relative;z-index:1; width:100%;height:auto;display:block; border-radius:50% 50% var(--radius-card) var(--radius-card) / 42% 42% var(--radius-card) var(--radius-card); box-shadow:0 18px 40px rgba(1,57,65,.18); } .about-meet-figure .offset-circle{width:62%;padding-bottom:62%;background:var(--teal);left:-34px;bottom:-28px} /* position+z-index or the offset circle paints over it: an absolutely positioned element beats static in-flow content whatever the DOM order. */ .about-meet-caption{ position:relative;z-index:2; margin:16px auto 0;max-width:100%;text-align:center;text-wrap:balance; font-family:var(--font-display);font-size:16px;color:var(--accent-green);font-weight:500; } .about-meet-card{background:var(--white);border-radius:var(--radius-card);padding:34px 38px;box-shadow:var(--shadow-card)} .about-meet-card > h2:first-child{margin-top:0} .about-meet-card h3{margin-top:1.6em} .about-meet-card h3:first-of-type{margin-top:0} /* ---------- FAQ — "Banded Index", approved 2026-08-02 ---------- Each category is a full-bleed band cycling her four grounds, so the colour banding that sections the homepage sections this page too (KV05). Category name + note in a sticky rail; questions as bordered cards that lift and take a sand border when open. Deliberately unnumbered — the questions are not a sequence, and counting them only tells a worried parent how much is left. */ .faq-band{ padding:clamp(50px,6vw,78px) 0;position:relative;overflow:hidden;isolation:isolate; background:var(--white); } .faq-band--cool{background:var(--ground-cool)} .faq-band--warm{background:var(--ground-warm)} .faq-band--teal{background:var(--teal)} .faq-band .watermark{opacity:.34} /* Centred, not top-aligned: against a three-question list a top-aligned rail reads as sitting low and unbalanced. */ .faq-grid{display:grid;grid-template-columns:.33fr .67fr;gap:46px;align-items:center} .faq-rail{align-self:center} .faq-cat{font-size:clamp(25px,2.7vw,34px);margin:0 0 12px;line-height:1.12} .faq-cat-rule{display:block;width:56px;height:2px;background:var(--sand);margin:0 0 16px;border-radius:2px} .faq-band--warm .faq-cat-rule,.faq-band--teal .faq-cat-rule{background:var(--white)} .faq-cat-note{margin:0;font-size:16px;color:var(--ink-mute)} .faq-band--teal .faq-cat-note{color:#215158} .faq-items{margin:0;padding:0;list-style:none;display:grid;gap:12px} .faq-item{ background:var(--white);border:1px solid var(--hairline);border-radius:16px;overflow:hidden; transition:box-shadow .3s ease,border-color .3s ease; } .faq-item.is-open{box-shadow:var(--shadow-lift);border-color:var(--sand)} .faq-q{ width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:18px; background:none;border:0;cursor:pointer;text-align:left;padding:20px 24px;min-height:44px; font-family:var(--font-display);font-size:1.16rem;font-weight:500;line-height:1.34;color:var(--petrol); transition:color .25s ease; } .faq-q:hover,.faq-q:focus-visible{color:var(--petrol-lift)} .faq-mark{ flex:0 0 auto;width:28px;height:28px;margin-top:2px;border-radius:50%; background:var(--ground-warm);display:grid;place-items:center; transition:background .3s ease; } .faq-band--warm .faq-mark{background:var(--ground-cool)} .faq-mark::before{ content:"";width:8px;height:8px;border-right:1.8px solid var(--petrol);border-bottom:1.8px solid var(--petrol); transform:translateY(-2px) rotate(45deg);transition:transform .35s cubic-bezier(.22,1,.36,1); } .faq-q[aria-expanded="true"] .faq-mark{background:var(--sand)} .faq-q[aria-expanded="true"] .faq-mark::before{transform:translateY(1px) rotate(225deg)} .faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.22,1,.36,1)} .faq-q[aria-expanded="true"] + .faq-a{grid-template-rows:1fr} .faq-a-inner{overflow:hidden;min-height:0} .faq-a-inner > div{padding:18px 24px 22px;border-top:1px solid var(--hairline)} .faq-a p{font-size:1.02rem;line-height:1.78;color:var(--ink);margin:0 0 .8em;max-width:62ch} .faq-a p:last-child{margin-bottom:0} @media (max-width:900px){ .faq-grid{grid-template-columns:1fr;gap:20px} .faq-rail{position:static} } @media (max-width:480px){ .faq-band{padding:38px 0} .faq-q{padding:17px 18px;font-size:1.08rem} .faq-a-inner > div{padding:16px 18px 20px} } /* ---------- CONTACT ---------- */ .contact-wrap{background:var(--teal);padding:56px 0 64px;overflow:hidden;position:relative} .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:stretch} .contact-info{padding-top:4px} .contact-info h2{font-size:clamp(27px,3vw,36px)} .contact-block{margin-top:26px} .contact-block h3{font-family:var(--font-display);font-size:17px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-green);margin:0 0 10px} .contact-block p{margin:0;color:#12454C} .contact-wrap .watermark--right{top:-10%;right:-250px;opacity:.3} /* ---------- BLOG ---------- Her live /blogs/ is a thin list: a small portrait thumb, a title, a date, a Read More, no excerpt and no hierarchy. The frame carries over — warm hero, centred title and lede, leaf watermark, sand disc — the list does not. The newest post gets an editorial lead with the offset circle behind its photo (KV07); the rest are cards on the same hairline border the homepage service cards use. */ .blog-hero{background:var(--ground-warm);padding:clamp(44px,5vw,68px) 0 clamp(46px,5.5vw,72px); text-align:center;border-bottom:1px solid var(--accent-gold);position:relative;overflow:hidden;isolation:isolate} .blog-hero .watermark{opacity:.34;top:-40%;right:-250px} .blog-hero-title{font-size:clamp(38px,5vw,62px);font-weight:400;letter-spacing:-.022em;margin:0 0 .3em} .blog-hero-lede{max-width:36em;margin:0 auto;font-size:18px;color:var(--ink-mute)} .blog-list{background:var(--white);padding:clamp(46px,5.5vw,74px) 0 clamp(52px,6vw,84px); position:relative;overflow:hidden;isolation:isolate} .blog-list .watermark{opacity:.32;bottom:3%;left:-250px} .blog-disc{position:absolute;top:-130px;right:-90px;width:300px;height:300px;border-radius:50%; background:var(--sand);z-index:-1;pointer-events:none} /* the lead post */ .blog-lead{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(32px,4vw,56px);align-items:center; margin:0 0 clamp(44px,5vw,68px)} .blog-lead-fig{position:relative;isolation:isolate;margin:0} .blog-lead-fig a{display:block;line-height:0} .blog-lead-fig img{position:relative;z-index:1;width:100%;height:clamp(260px,30vw,400px);object-fit:cover; border-radius:var(--radius-photo);box-shadow:0 18px 44px rgba(1,57,65,.16)} .blog-lead-fig .offset-circle{width:52%;padding-bottom:52%;background:var(--teal);left:-38px;bottom:-32px} .blog-kicker{font-family:var(--font-body);font-size:12.5px;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:var(--accent-green);margin:0 0 12px} .blog-lead-title{font-size:clamp(28px,3.4vw,42px);line-height:1.14;margin:0 0 .3em} .blog-lead-title a{text-decoration:none;transition:color .2s ease} .blog-lead-title a:hover{color:var(--petrol-lift)} .blog-lead .btn{margin-top:8px} /* the rest */ .blog-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(22px,2.6vw,32px)} .blog-card{background:var(--white);border:1px solid var(--hairline);border-radius:var(--radius-card); overflow:hidden;display:flex;flex-direction:column; transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease,border-color .3s ease} .blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:#C9BBA4} .blog-card-fig{display:block;line-height:0;overflow:hidden} .blog-card-fig img{width:100%;height:220px;object-fit:cover;display:block; transition:transform .45s cubic-bezier(.22,.61,.36,1)} .blog-card:hover .blog-card-fig img{transform:scale(1.04)} .blog-card-body{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1 1 auto} .blog-card__title{font-size:clamp(20px,2.1vw,25px);margin:0 0 .3em;line-height:1.22} .blog-card__title a{text-decoration:none;transition:color .2s ease} .blog-card__title a:hover{color:var(--petrol-lift)} .blog-date{font-family:var(--font-display);font-size:15px;letter-spacing:.03em;color:var(--accent-green);margin:0 0 12px} .blog-excerpt{font-size:16.5px;line-height:1.7;color:var(--ink);margin:0 0 16px} .blog-more{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;font-weight:700; font-size:16px;color:var(--petrol);text-decoration:none;border-bottom:1.5px solid var(--sand); padding-bottom:2px;transition:border-color .2s ease,color .2s ease} .blog-more:hover,.blog-more:focus-visible{border-bottom-color:var(--petrol);color:var(--petrol-lift)} .blog-pagination ul{display:flex;gap:10px;list-style:none;margin:46px 0 0;padding:0;flex-wrap:wrap;justify-content:center} .blog-pagination a,.blog-pagination span{display:inline-flex;align-items:center;justify-content:center; min-width:44px;min-height:44px;padding:0 12px;border-radius:var(--radius-pill); border:1px solid var(--hairline);text-decoration:none;color:var(--petrol)} .blog-pagination .current{background:var(--petrol);color:#fff;border-color:var(--petrol)} /* ---------- single post ---------- */ .post-hero{background:var(--ground-warm);padding:44px 0 50px;position:relative;overflow:hidden;isolation:isolate; border-bottom:1px solid var(--accent-gold)} .post-hero .watermark{opacity:.3;top:-26%;right:-250px} .post-hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(32px,4vw,52px);align-items:center} .post-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;color:var(--accent-green); text-decoration:none;font-weight:600;font-size:15.5px} .post-back:hover{color:var(--petrol)} .post-title{font-size:clamp(30px,3.9vw,52px);font-weight:500;letter-spacing:-.022em;margin:0 0 .25em;line-height:1.12} .post-meta{font-family:var(--font-display);font-size:15.5px;letter-spacing:.03em;color:var(--ink-mute);margin:0} .post-hero-fig{position:relative;isolation:isolate;margin:0} .post-hero-fig img{position:relative;z-index:1;width:100%;height:clamp(240px,26vw,340px);object-fit:cover; border-radius:var(--radius-photo);box-shadow:0 18px 44px rgba(1,57,65,.16)} .post-hero-fig .offset-circle{width:52%;padding-bottom:52%;background:var(--sand);left:-38px;bottom:-30px} .post-single{background:var(--white);padding:clamp(40px,5vw,64px) 0 clamp(46px,6vw,72px); position:relative;overflow:hidden;isolation:isolate} .post-single .watermark{opacity:.28;bottom:4%;left:-250px} .post-body{max-width:700px;margin:0 auto} .post-body > p:first-of-type::first-letter{ float:left;font-family:var(--font-display);font-size:3.9em;line-height:.8; padding:.08em .1em 0 0;color:var(--accent-green);font-weight:400; } .post-body p{font-size:17.5px;line-height:1.85;margin:0 0 1.2em;color:var(--ink)} .post-body h2,.post-body h3{margin:2em 0 .55em} .post-body h2{font-size:clamp(24px,2.6vw,32px)} .post-body h3{font-size:clamp(20px,2.1vw,25px)} .post-body ul,.post-body ol{margin:0 0 1.4em;padding-left:0;list-style:none} .post-body ol{counter-reset:pb} .post-body li{position:relative;padding-left:30px;font-size:17.5px;line-height:1.8;margin-bottom:.7em} .post-body ul li::before{content:"";position:absolute;left:4px;top:.72em;width:9px;height:9px; border-radius:50%;background:var(--sand)} .post-body ol li::before{counter-increment:pb;content:counter(pb);position:absolute;left:0;top:.1em; font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--accent-green)} .post-body strong{color:var(--petrol);font-weight:700} .post-body a{color:var(--petrol);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} .post-body a:hover{color:var(--petrol-lift)} /* Her posts use
between sections — the yoga post alone has fourteen. A sprig at each would be visual noise (and the sprig art is portrait, so it shrinks to a speck in a wide box). A sand hairline that fades at both ends is quiet enough to survive the repetition. */ .post-body hr{ border:0;height:1px;width:120px;margin:2.4em auto; background:linear-gradient(90deg,transparent,var(--sand) 22%,var(--sand) 78%,transparent); } .post-body blockquote{margin:1.9em 0;padding:4px 0 4px 26px;border-left:3px solid var(--sand); font-family:var(--font-display);font-size:1.3em;line-height:1.45;font-style:italic;color:var(--petrol)} .post-body blockquote p{font-size:inherit;line-height:inherit;margin:0} .post-body img{border-radius:var(--radius-photo);margin:1.6em 0} .post-author{display:flex;align-items:center;gap:18px;max-width:700px;margin:clamp(38px,4.5vw,56px) auto 0; padding:22px 26px;background:var(--ground-cool);border-radius:var(--radius-card)} .post-author-face{flex:0 0 auto;width:58px;height:58px;border-radius:50% 50% 12px 12px/46% 46% 12px 12px; object-fit:cover;object-position:50% 18%} .post-author picture{flex:0 0 auto;line-height:0} .post-author-name{font-family:var(--font-display);font-size:17px;font-weight:500;color:var(--petrol);margin:0 0 3px} .post-author-note{font-size:15px;color:var(--ink-mute);margin:0} .post-nav{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:700px;margin:clamp(30px,3.5vw,44px) auto 0} .post-nav-item{display:flex;flex-direction:column;gap:6px;padding:20px 22px;text-decoration:none; border:1px solid var(--hairline);border-radius:var(--radius-card);transition:border-color .25s ease,box-shadow .25s ease} .post-nav-item:hover{border-color:var(--sand);box-shadow:var(--shadow-card)} .post-nav-next{text-align:right;grid-column:2} .post-nav-dir{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-green)} .post-nav-title{font-family:var(--font-display);font-size:17px;font-weight:500;color:var(--petrol);line-height:1.3} @media (max-width:900px){ .blog-lead{grid-template-columns:1fr;gap:26px} .blog-lead-fig{order:-1} .blog-grid{grid-template-columns:1fr} .post-hero-grid{grid-template-columns:1fr;gap:26px} .post-nav{grid-template-columns:1fr} .post-nav-next{text-align:left;grid-column:1} } @media (max-width:480px){ .blog-card-fig img{height:190px} .blog-card-body{padding:20px 20px 22px} .post-body > p:first-of-type::first-letter{font-size:3.2em} .post-author{flex-direction:column;align-items:flex-start;text-align:left} } /* ---------- 404 ---------- */ .nf-wrap{background:var(--white);padding:60px 0 70px;position:relative;overflow:hidden} .nf-card{max-width:720px;margin:0 auto;background:var(--ground-cool);border-radius:var(--radius-card);padding:44px clamp(24px,5vw,52px);text-align:center;box-shadow:var(--shadow-card)} .nf-card h2{font-size:clamp(27px,3vw,36px)} .nf-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:26px} .nf-tel{display:inline-flex;align-items:center;min-height:44px;color:var(--petrol);font-weight:700;text-decoration:none;border-bottom:1.5px solid var(--sand)} /* ---------- FOOTER — WHITE, as on willowtreementalhealth.com ---------- Her footer is white, which is what lets the full-colour lockup and her own full-colour social icons sit on it natively. Reversing the logo would flatten the two-tone wordmark, and the lockup is KEEP-VERBATIM (KV01), so the ground moves, not the mark. The nav link columns and the three-column layout both deviate from the TPA Design Reference on purpose — ledger §6.1, settled. */ .site-footer{background:var(--white);color:var(--ink-mute);padding:52px 0 44px} .footer-top{ display:grid;grid-template-columns:auto auto auto;justify-content:space-between; column-gap:clamp(24px,2.6vw,40px);align-items:start; } .footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:18px;max-width:340px} .footer-logo{width:270px;height:auto;display:block} .footer-tag{font-family:var(--font-display);font-size:17px;font-weight:400;color:var(--petrol);line-height:1.4;margin:0} .social{display:flex;gap:10px} .social a{ width:44px;height:44px;border-radius:50%;display:grid;place-items:center;overflow:hidden; border:1px solid rgba(1,57,65,.16);background:transparent; transition:background .24s ease,border-color .24s ease; } .social a img{width:22px;height:22px;display:block} .social a:hover{background:rgba(1,57,65,.06);border-color:rgba(1,57,65,.34)} .footer-nav{display:flex;gap:clamp(24px,3vw,48px);flex-wrap:wrap} .fnav-h{font-family:var(--font-body);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);margin:0 0 14px} .fnav-col ul{list-style:none;margin:0;padding:0;display:grid;gap:9px} .fnav-col a{font-size:15px;color:var(--petrol);text-decoration:none;transition:color .22s ease} .fnav-col a:hover,.fnav-col a:focus-visible{color:var(--petrol-lift)} .footer-links{display:flex;flex-direction:column;align-items:flex-start;gap:12px;max-width:300px} .freach-lines{display:grid;gap:11px} .freach-line{display:flex;align-items:center;gap:11px;color:var(--petrol);text-decoration:none;font-size:15px;transition:color .2s ease} .freach-line .ico{flex:0 0 auto;width:20px;height:20px;display:grid;place-items:center} .freach-line .ico svg{width:17px;height:17px;fill:none;stroke:var(--petrol);stroke-width:1.7} .freach-line:hover,.freach-line:focus-visible{color:var(--petrol-lift)} .freach-meta{margin:4px 0 0;font-size:14.5px;line-height:1.6;color:var(--ink-mute)} .freach-meta .cm-addr,.freach-meta .cm-area{display:block} .freach-meta .cm-area{margin-top:.7em} .pt-badge{ display:flex;flex-direction:column;align-items:flex-start;gap:5px; border:1px solid rgba(1,57,65,.18);border-radius:12px;padding:11px 15px; font-size:13.5px;color:var(--ink-mute);text-decoration:none; } .pt-badge strong{font-family:var(--font-display);font-weight:600;color:var(--petrol);font-size:13.5px;letter-spacing:.02em} .pt-badge span a{color:var(--petrol);text-decoration:none;border-bottom:1px solid rgba(1,57,65,.32);transition:color .2s ease,border-color .2s ease} .pt-badge span a:hover,.pt-badge span a:focus-visible{color:var(--petrol);border-bottom-color:var(--petrol)} .footer-bottom{ margin-top:30px;padding-top:20px;border-top:1px solid rgba(1,57,65,.12); display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap; font-size:14.5px;color:var(--ink-mute); } .footer-legal{display:flex;gap:20px;flex-wrap:wrap} .footer-legal a{text-decoration:none;color:var(--ink-mute);transition:color .2s ease} .footer-legal a:hover{color:var(--petrol)} .copyline{color:var(--accent-green);font-weight:600;margin:0} /* ---------- motion: 3 earned reveals + parallax (fixes D19) ---------- */ .reveal{ opacity:0;transform:translateY(24px); transition:opacity .75s ease, transform .75s cubic-bezier(.22,.61,.36,1); } .reveal.is-in{opacity:1;transform:none;animation:none} .reveal-2{transition-delay:.1s} .reveal-3{transition-delay:.2s} @keyframes forceVisible{to{opacity:1;transform:none}} /* GROUP 2 — inner-page elements with no scroll animation, 8s safety net. Above-fold hero visibility is handled in the markup, never gated on JS. */ .inner-content,.contact-grid,.faq-wrap,.blog-list,.post-body{animation:forceVisible .01s 8s forwards} .fade-in.visible{opacity:1;transform:translateY(0);animation:none} /* ================= RESPONSIVE ================= */ @media (max-width:1360px){ :root{--head-h:117px} .brand img{width:382px} .site-header.is-stuck .header-inner{min-height:74px} .site-header.is-stuck .brand img{width:262px} } @media (max-width:1240px){ :root{--head-h:103px} .brand img{width:330px} .site-header.is-stuck .header-inner{min-height:72px} .site-header.is-stuck .brand img{width:252px} .head-actions{width:180px} .hero-grid{grid-template-columns:1fr 1fr;gap:40px} } @media (max-width:1240px){ .nav-list{gap:24px} } @media (max-width:1080px){ .nav-list{gap:16px} .nav-list>li>a{font-size:15px} } @media (max-width:1180px){ .inner-hero .container{max-width:1140px} .inner-hero-grid{grid-template-columns:.9fr 1.1fr;gap:40px} } @media (max-width:1024px){ :root{--sec-y:54px;--head-h:88px} .brand img{width:280px} .site-header.is-stuck .header-inner{min-height:68px} .site-header.is-stuck .brand img{width:240px} .head-actions{width:164px;gap:7px} .head-actions .nav-phone{font-size:15px} .head-actions .header-cta{padding:10px 16px;font-size:14.5px} .hero{padding:56px 0 60px} .hero-grid{grid-template-columns:1fr .96fr;gap:32px} .bridge-grid,.bio-grid,.offices-grid,.final-grid,.inner-hero-grid{gap:36px} .panel--0,.panel--1,.panel--2,.panel--3{grid-column:1/13} .bio-figure .sprig--wreath{right:-8px;bottom:-20px;width:104px} .pain .sprig--up,.pain .sprig--fan{display:none} .svc--0{grid-column:1/13;grid-row:auto;min-height:0} .svc--1{grid-column:1/7;grid-row:auto} .svc--2{grid-column:7/13;grid-row:auto} .svc--3{grid-column:1/7;grid-row:auto} .svc--4{grid-column:7/13;grid-row:auto} .svc--5{grid-column:1/7;grid-row:auto} .svc--6{grid-column:7/13;grid-row:auto} .outcomes-head,.outcomes-body{grid-column:1/13} .watermark{width:520px;opacity:.23} .watermark--bl{left:-170px} .faq-group{grid-template-columns:1fr;gap:20px} .faq-rail{position:static} .about-meet-inner{grid-template-columns:.8fr 1.2fr;gap:36px} } @media (max-width:900px){ .footer-top{grid-template-columns:auto auto;justify-content:space-between;row-gap:34px} .footer-brand{grid-column:1/-1;max-width:none} .contact-side{order:-1} .contact-side .contact-photo{margin-top:6px} .outcome--0,.outcome--1,.outcome--2{margin-left:0;width:100%} .words-grid{columns:1} .about-meet-inner{grid-template-columns:1fr;gap:30px} .about-meet-figure{position:static;max-width:340px;margin-inline:auto} } @media (max-width:900px){ :root{--sec-y:50px;--head-h:72px} .header-inner{min-height:var(--head-h);gap:12px} .brand img,.site-header.is-stuck .brand img{width:212px} .site-header.is-stuck .header-inner{min-height:var(--head-h)} .burger{display:flex} .mobile-nav-close{display:flex} .head-actions{display:none} .header-tel{display:inline-flex;margin-left:auto} .nav{ position:fixed;left:0;right:0;top:var(--head-h);bottom:0;margin:0; display:block;background:var(--ground-warm); padding:52px 24px 40px;overflow-y:auto; height:calc(100vh - var(--head-h)); height:calc(100dvh - var(--head-h)); transform:translateX(102%);transition:transform .32s cubic-bezier(.22,.61,.36,1); border-top:1px solid rgba(1,57,65,.1); } .nav.is-open{transform:none} .nav-list{flex-direction:column;align-items:stretch;gap:0;flex-wrap:wrap} .nav-list>li{border-bottom:1px solid rgba(1,57,65,.1);white-space:normal} .nav-list>li>a{display:flex;align-items:center;justify-content:space-between;width:100%;height:auto;padding:15px 0;font-size:17px} .nav-list>li>a::before{display:none} .nav-list>li.dropdown::after{display:none} .nav-list>li.dropdown>a::after{margin-left:auto} .nav-list>li.dropdown.is-open>a::after{transform:translateY(0) rotate(225deg)} .dropdown-menu,.sub-menu{ position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0; background:transparent;min-width:0;padding:0 0 10px;display:none;border-radius:0; } .nav-list>li.is-open .dropdown-menu,.nav-list>li.is-open .sub-menu{display:block} /* the grouped panel flattens in the drawer: headings stay, boxes go */ .dropdown-menu.drop-panel{min-width:0;padding:0} .drop-panel > li + li{margin-top:2px;padding-top:10px;border-top:1px solid rgba(1,57,65,.12)} .drop-group-label{padding:0 0 6px 16px;font-size:12.5px} .drop-items a{padding:10px 0 10px 28px;font-size:16px} .drop-items a:hover{background:transparent} .dropdown-menu a,.sub-menu a{padding:10px 0 10px 16px;font-size:16px} .dropdown-menu a:hover,.sub-menu a:hover{background:transparent} .nav .nav-phone{display:block;padding:16px 0 6px;font-size:19px} .hero{padding:44px 0 50px} .hero-grid{grid-template-columns:1fr;gap:32px} .hero-figure{order:2} .hero-copy{order:1} .hero-sub,.hero-geo{max-width:none} .hero-cta .btn{max-width:none} .hero-figure .offset-circle{left:-22px;bottom:-20px;width:48%;padding-bottom:48%} .bridge-grid,.bio-grid,.offices-grid,.final-grid,.contact-grid,.inner-hero-grid,.services-head{grid-template-columns:1fr;display:grid} .services-head{gap:12px;margin-bottom:26px} .bio-figure{order:2;max-width:400px} .bio-copy{order:1} .bridge-figure{order:2} .bridge-copy{order:1} .bridge{padding:50px 0 62px} .bridge-figure .offset-circle{right:-20px;top:-20px} .bio-figure .sprig--wreath{right:-16px;bottom:-18px;width:106px} .svc-grid{grid-template-columns:1fr;gap:16px} .svc--0,.svc--1,.svc--2,.svc--3,.svc--4,.svc--5,.svc--6{grid-column:1/2;grid-row:auto} .svc--0{padding:30px 26px 28px} .svc{padding:24px 24px 22px} .offices-figure{min-height:0;display:flex;gap:16px;align-items:flex-end} .pic-main{width:60%;margin-left:0} .pic-inset{position:static;width:40%} .office-inset{border-width:0;border-radius:var(--radius-photo)} .offices-figure .offset-circle{display:none} .outcomes{padding:50px 0 62px} .final-grid{gap:32px} .form-card{max-width:none;padding:26px 22px 28px} .team-row{gap:30px} .staff{width:100%;max-width:330px} .footer-top{flex-direction:column} .footer-bottom{flex-direction:column;align-items:flex-start;gap:10px} .watermark{width:400px;opacity:.18} .watermark--right{right:-150px} .watermark--bl{left:-140px;bottom:1%} .curve{height:32px} .curve--shallow{height:24px} .only-wide{display:none} .only-narrow{display:inline} /* inner pages */ .inner-hero{padding:36px 0 44px} .inner-hero-figure .offset-circle{left:-20px;bottom:-18px;width:48%;padding-bottom:48%} .svc-img-section{grid-template-columns:1fr;gap:24px} .svc-img-section--reverse .svc-text-col,.svc-img-section--reverse .svc-img-col{order:initial} .svc-img-col img{aspect-ratio:16/10;max-height:none} .about-meet{padding:44px 20px} .about-meet-card{padding:26px 22px} .svc-closing{padding:26px 22px} } @media (max-width:600px){ .footer-top{grid-template-columns:1fr;justify-content:stretch} .footer-links{max-width:none} } @media (max-width:480px){ :root{--sec-y:46px;--fs-base:17px;--head-h:61px} .container{padding:0 20px} .brand img,.site-header.is-stuck .brand img{width:172px} .header-tel{padding:10px 16px;font-size:14.5px} .hero{padding:36px 0 44px} .hero h1{font-size:clamp(30px,8.4vw,38px)} .hero-sub{font-size:19px} .hero-cta .btn{width:100%} .panel{padding:24px 22px 26px} .panel h2{font-size:24px} .panel p{font-size:16.5px} .staff{width:100%;max-width:270px} .outcome{padding:18px 20px} .contact-line span{font-size:18px} .inner-hero{padding:26px 0 32px} .inner-content{padding:38px 0 44px} .word{padding:22px 20px 18px} } /* ========== SHORT LANDSCAPE PHONES: HERO MUST CLEAR THE NAV ========== */ @media (max-height:500px) and (orientation:landscape){ .hero{min-height:0;height:auto;padding-top:26px;padding-bottom:26px} .inner-hero{padding-top:22px;padding-bottom:26px} .nav{height:calc(100vh - var(--head-h));height:calc(100dvh - var(--head-h))} } /* ========== MOBILE RESPONSIVE INVARIANTS — DO NOT REMOVE ========== */ html, body { overflow-x: clip; } @media (max-width: 900px) { .brand { flex-shrink: 1; min-width: 0; } .burger, .nav-toggle, .mobile-toggle { flex: 0 0 auto; } } @media (max-width: 768px) { .brand { min-width: 0; flex: 1 1 auto; } .brand-text, .brand-text small { white-space: normal; min-width: 0; } .mobile-toggle { flex-shrink: 0; margin-left: auto; } .nav-links > li { white-space: normal; } .dropdown-menu, .dropdown-menu li, .dropdown-menu a { white-space: normal; } } /* Parent dropdown rows link to # and must never be clickable. */ .nav-links .dropdown > a { cursor: default; pointer-events: none; } .dropdown-menu, .dropdown-menu li { list-style: none; margin: 0; padding: 0; } /* ========== MOBILE DRAWER SUBMENU — DUAL-SELECTOR REQUIRED ========== The drawer's submenu