/* ============================================================ MEGAN QUIGLEY, LCSW – VERSION A – "THE LONG LIGHT" The page is a single sunset. One continuous warm light that shades down through the body, goes dark at the pivot, and comes back up into the blown-out gold of the last photograph. ============================================================ */ :root{ /* client palette – 2026-09 refresh */ --bronze:#7A3F5C; /* PRIMARY – the structure colour: rules, dividers, hairlines */ --rust:#7A3F5C; --clay:#C79CB0; /* accent – use sparingly, per client palette */ --sage:#6B7A5A; /* accent – use sparingly, per client palette */ --cream:#F5EFE6; --ink:#1E1018; /* derived, measured */ --rust-deep:#3E1F30; --bark:#3E1F30; --bark-soft:#4A2A3D; --oat:#EDE4D6; /* secondary cream – woven in alongside --cream, never white */ --clay-pale:#E4C9D3; --body-ink:#3E1F30; /* warm near-black, dark palette shade on cream */ --muted:#6E4D5E; --font-h:'Alegreya',Georgia,serif; --font-b:'Hanken Grotesk',system-ui,sans-serif; --container:1140px; --sy:64px; /* section rhythm – ceiling is 70 */ --header-h:76px; --e:cubic-bezier(.22,.61,.36,1); /* consumed by tpa-base .site-footer – required by the fleet convention */ --footer-bg:#3E1F30; --footer-text:#EDE4D6; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; padding-bottom:0; background:var(--cream); color:var(--body-ink); font-family:var(--font-b); font-size:18px; font-weight:400; line-height:1.72; text-wrap:pretty; -webkit-font-smoothing:antialiased; } img{display:block; max-width:100%} a{color:inherit} h1,h2,h3,h4{ font-family:var(--font-h); font-weight:500; line-height:1.14; margin:0; text-wrap:balance; letter-spacing:-.005em; } p{margin:0 0 1.05em} p:last-child{margin-bottom:0} .container{max-width:var(--container); margin:0 auto; padding:0 26px} .narrow{max-width:760px} /* ---------- buttons ---------- */ .btn{ display:inline-block; font-family:var(--font-b); font-size:.95rem; font-weight:600; letter-spacing:.012em; line-height:1.25; text-decoration:none; padding:16px 30px; background:var(--rust); color:#fff; border:0; border-radius:20px; /* client request 2026-09-04: round corners to match images, not the brand shape */ box-shadow:0 1px 0 rgba(115,64,31,.9), 0 8px 22px -14px rgba(42,30,20,.85); transition:background-color .28s var(--e), box-shadow .28s var(--e); cursor:pointer; } .btn:hover,.btn:focus-visible{ background:var(--rust-deep); box-shadow:0 1px 0 rgba(60,32,14,.9), 0 12px 26px -14px rgba(42,30,20,.95); } .btn--ghost{ background:transparent; color:var(--rust); box-shadow:inset 0 0 0 1.5px rgba(140,78,42,.5); padding:13px 26px; } .btn--ghost:hover,.btn--ghost:focus-visible{ background:rgba(140,78,42,.07); color:var(--rust-deep); box-shadow:inset 0 0 0 1.5px rgba(140,78,42,.85); } :focus-visible{outline:2.5px solid var(--rust); outline-offset:3px} .skip{ position:absolute; left:16px; top:-60px; z-index:100; background:var(--rust); color:#fff; padding:12px 20px; font-size:.95rem; font-weight:600; text-decoration:none; border-radius:0 0 12px 12px; transition:top .2s var(--e); } .skip:focus{top:0} /* ---------- eyebrow-free section heads ---------- */ .h-xl{font-size:clamp(2.1rem,4.4vw,3.35rem)} .h-lg{font-size:clamp(1.85rem,3.4vw,2.6rem)} .h-md{font-size:clamp(1.5rem,2.5vw,1.95rem)} /* ============================================================ HEADER – overlays the photo hero, solidifies on scroll ============================================================ */ /* Client request 2026-09-03: a solid, full-width bar instead of a floating rounded plate – the cream background and shadow now live on .site-header itself (edge to edge), not on the narrower .hdr shell. */ .site-header{ position:fixed; inset:0 0 auto 0; z-index:60; height:var(--header-h); display:flex; align-items:center; background:var(--cream); box-shadow:0 6px 20px -16px rgba(30,18,9,.7); transition:box-shadow .32s var(--e); } .hdr-shell{max-width:1420px; margin:0 auto; padding:0 26px; width:100%} .hdr{ display:flex; align-items:center; gap:26px; width:100%; padding:0 30px; min-height:62px; } .stuck .site-header{box-shadow:0 16px 40px -24px rgba(30,18,9,.95)} .brand{text-decoration:none; line-height:1.02; flex:0 0 auto; padding:6px 0} .brand b{ display:block; font-family:var(--font-h); font-weight:500; font-size:1.22rem; letter-spacing:.004em; color:var(--rust); } .brand span{ display:block; font-size:.6rem; font-weight:500; letter-spacing:.19em; text-transform:uppercase; color:var(--muted); margin-top:3px; } .nav{margin-left:auto; display:flex; align-items:center; gap:26px} .menu{display:flex; align-items:center; gap:25px; list-style:none; margin:0; padding:0} .menu > li{position:relative} .menu > li > a{ display:block; padding:22px 0; font-size:.875rem; font-weight:500; letter-spacing:.028em; text-decoration:none; color:var(--body-ink); white-space:nowrap; transition:color .2s var(--e); } .menu > li > a:hover{color:var(--rust)} .menu > li > a::after{ content:''; position:absolute; left:0; right:0; bottom:16px; height:1.5px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .3s var(--e); } .menu > li:hover > a::after,.menu > li:focus-within > a::after{transform:scaleX(1)} .dropdown > a::before{ content:''; position:absolute; right:-13px; top:50%; margin-top:-1px; width:5px; height:5px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-1px); opacity:.75; } .dropdown{margin-right:13px} /* dropdown – no dead gap, the li padding bridges it */ .dropdown-menu{ position:absolute; top:100%; left:-18px; min-width:264px; list-style:none; margin:0; padding:9px 0; background:var(--cream); box-shadow:0 1px 0 rgba(140,78,42,.2), 0 20px 40px -26px rgba(42,30,20,.75); border-radius:2px 14px 2px 14px; opacity:0; visibility:hidden; transform:translateY(-7px); transition:opacity .22s var(--e), transform .22s var(--e), visibility .22s; } .dropdown:hover .dropdown-menu,.dropdown:focus-within .dropdown-menu{opacity:1; visibility:visible; transform:none} .dropdown-menu a{ display:block; padding:9px 22px; font-size:.86rem; font-weight:400; color:var(--body-ink); text-decoration:none; transition:background-color .18s var(--e), color .18s var(--e); } .dropdown-menu a:hover,.dropdown-menu a:focus-visible{background:rgba(208,164,147,.28); color:var(--rust-deep)} .hdr-phone{ display:inline-flex; align-items:center; min-height:44px; font-size:.9rem; font-weight:600; letter-spacing:.015em; text-decoration:none; color:var(--rust); white-space:nowrap; transition:color .2s var(--e); } .hdr-phone:hover{color:var(--rust-deep); text-decoration:underline; text-underline-offset:3px} .hdr-cta{ font-size:.8rem; font-weight:600; letter-spacing:.03em; text-decoration:none; padding:10px 18px; white-space:nowrap; color:#fff; background:var(--rust); border-radius:20px; /* client request 2026-09-04: round corners to match images, not the brand shape */ transition:background-color .26s var(--e); } .hdr-cta:hover,.hdr-cta:focus-visible{background:var(--rust-deep)} /* Client Portal – secondary/ghost so it doesn't compete with Free Consultation */ .hdr-cta--portal{ background:transparent; color:var(--rust); box-shadow:inset 0 0 0 1.5px rgba(140,78,42,.5); } .hdr-cta--portal:hover,.hdr-cta--portal:focus-visible{ background:rgba(140,78,42,.07); color:var(--rust-deep); box-shadow:inset 0 0 0 1.5px rgba(140,78,42,.85); } .burger{ display:none; width:44px; height:44px; padding:0; margin-left:auto; background:none; border:0; cursor:pointer; } .burger i{display:block; height:1.6px; background:var(--body-ink); margin:5px auto; width:24px; transition:.3s var(--e)} .open .burger i:nth-child(1){transform:translateY(6.6px) rotate(45deg)} .open .burger i:nth-child(2){opacity:0} .open .burger i:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)} /* ============================================================ HERO – the coast, and a solid cream plate. Never a scrim. ============================================================ */ /* Client reference 2026-09-03 (2nd pass): the photo breaks out of the container to the viewport's true right edge – square corners, no card, no shadow – while the text stays put in the normal container on the left. .hero__media is a sibling of .container (see front-page.php), so its `right:0` resolves against the full-bleed .hero section rather than the container's own inset edge; .hero needs `position:relative` so that `top:0; bottom:0` on the media measures against the SECTION's height (set by the text side) rather than the viewport. */ .hero{position:relative; overflow:hidden; background:var(--cream); padding:calc(var(--header-h) + 48px) 0 var(--sy)} .hero__inner{position:relative; z-index:2} /* Capped against the viewport, not just a fixed px value – at in-between widths (container narrower than 1140px but still well over the 900px stack point) a flat 560px could reach far enough right to touch the image's left edge, which starts at a hard 50vw. */ .hero__plate{max-width:min(500px, 40vw)} .hero__media{position:absolute; top:0; bottom:0; right:0; width:50vw; overflow:hidden; border-radius:20px} /* client request 2026-09-04: round corners to match buttons/images */ /* The hero is a real , not a CSS background. A background is invisible to the HTML preload scanner and only starts loading after CSS parses – 1–3s late under PSI's mobile throttle, on the LCP element. */ .hero__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:10% 30%; filter:brightness(.97) saturate(1.02); } .hero h1{font-size:clamp(2.3rem,3.6vw,3.4rem); line-height:1.08; letter-spacing:-.016em; color:var(--body-ink)} .hero__sub{ margin-top:22px; font-size:1.2rem; line-height:1.45; color:var(--rust); font-weight:500; max-width:none; text-wrap:initial; } .hero__geo{ margin-top:0; font-size:.86rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); line-height:1.7; max-width:none; text-wrap:initial; } .hero__rule{ width:72px; height:2.5px; background:var(--bronze); border-radius:2px; margin:28px 0 20px; } .hero .btn{margin-top:0; font-size:1rem; padding:18px 32px} /* ============================================================ HOW I CAN HELP YOU – "Overprint". The title is the first thing on the tile, not a caption under a picture: it sits at the TOP, at display scale, and the grade falls from the top down. You read the words, then the photograph explains them. ============================================================ */ .help{padding:var(--sy) 0 calc(var(--sy) + 6px); background:var(--cream); position:relative} .help__head{display:flex; align-items:flex-end; gap:26px; margin-bottom:36px} .help__head h2{color:var(--rust)} .help__head .line{flex:1; height:1.5px; background:rgba(140,108,69,.42); margin-bottom:12px} /* Briefed as "three tall image panels at different vertical offsets, edges overlapping ... Not a flat 3-up grid, not rectangles in a row." It shipped as the flat grid. The offsets are small on purpose — enough that the row reads as composed rather than tabulated, not so much that the three stop being a set. */ .tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; align-items:start} /* Client request 2026-09-03: cards align evenly, no staggered offset. */ /* Client request 2026-09-11: no title scrim over the photo – show the whole image, and carry the title in a small button-shaped badge that straddles the image's bottom edge instead. The rounded/shadowed "card" plate moves to .tile__media (the image alone); .tile__cap is now plain caption copy in normal flow underneath, not an absolutely-positioned overlay. */ .tile{ position:relative; display:block; text-decoration:none; } .tile:hover img,.tile:focus-visible img{transform:scale(1.045)} /* .tile__media stays overflow:visible – .tile__badge lives inside it and straddles the photo's bottom edge on purpose. The clipping/rounding (and the hover zoom crop) move down to .tile__frame, which wraps only the photo, so the badge sitting half outside it is never clipped. */ .tile__media{position:relative; isolation:isolate} .tile__frame{ position:relative; overflow:hidden; display:block; border-radius:20px; /* client request 2026-09-03: round all image corners evenly */ box-shadow:0 22px 48px -32px rgba(42,30,20,.9); } .tile__go{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-b); font-size:.74rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--rust); transition:gap .28s var(--e), color .28s var(--e); } .tile__go svg{width:17px; height:9px} .tile img{ width:100%; height:100%; aspect-ratio:3/4.3; object-fit:cover; filter:saturate(.72) url(#warmgrade); transition:transform 1.2s var(--e); } /* the title, in a small button rather than laid over the photo */ .tile__badge{ position:absolute; z-index:2; left:26px; bottom:0; transform:translateY(50%); max-width:calc(100% - 48px); width:max-content; font-family:var(--font-b); font-size:1rem; font-weight:600; letter-spacing:-.006em; line-height:1.2; color:#fff; text-wrap:balance; background:var(--rust); border-radius:20px; /* matches .btn – "round corners to match images" */ padding:12px 22px; box-shadow:0 1px 0 rgba(115,64,31,.9), 0 8px 22px -14px rgba(42,30,20,.85); transition:background-color .28s var(--e); } .tile:hover .tile__badge,.tile:focus-visible .tile__badge{background:var(--rust-deep)} .tile__cap{padding:34px 26px 0} .tile__rule{display:block; width:56px; height:2px; background:var(--clay); border-radius:2px; margin-bottom:18px} /* Placeholder service copy, revealed on hover. grid-template-rows 0fr -> 1fr animates to auto height without animating a layout property. */ .tile__desc{ display:grid; grid-template-rows:0fr; opacity:0; margin-bottom:0; transition:grid-template-rows .5s var(--e), opacity .38s var(--e), margin-bottom .5s var(--e); } .tile__desc > span{ overflow:hidden; display:block; font-family:var(--font-b); font-size:.98rem; line-height:1.52; color:var(--muted); } .tile:hover .tile__desc,.tile:focus-visible .tile__desc{ grid-template-rows:1fr; opacity:1; margin-bottom:18px; } .tile:hover .tile__go,.tile:focus-visible .tile__go{gap:16px; color:var(--rust-deep)} /* ============================================================ PAIN PANELS – "Intrusion". One steady column, and the intrusive thoughts physically break out of it into the left margin. The narration keeps its measure; the voice does not stay in the lines. ============================================================ */ .field{ position:relative; overflow:hidden; padding:calc(var(--sy) + 6px) 0 calc(var(--sy) + 10px); background-color:#EAE2D5; background-image: radial-gradient(46% 26% at 84% 9%, rgba(208,164,147,.52), rgba(208,164,147,0) 72%), radial-gradient(40% 22% at 10% 33%, rgba(236,228,219,.9), rgba(236,228,219,0) 74%), radial-gradient(46% 24% at 86% 55%, rgba(208,164,147,.46), rgba(208,164,147,0) 74%), radial-gradient(52% 26% at 14% 82%, rgba(226,196,178,.55), rgba(226,196,178,0) 76%), radial-gradient(58% 40% at 12% 4%, rgba(236,228,219,.92), rgba(236,228,219,0) 70%), linear-gradient(177deg,#ECE4DB 0%,#E7DDCE 26%,#E0D3BE 58%,#D9C7AB 84%,#D39CB9 100%); } .field__thread{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0} .field__thread path{fill:none; stroke:var(--bronze); stroke-linecap:round} .field .container{position:relative; z-index:1} .lines{margin:0 0 1.05em} /* keeps the paragraph break after a short-line block */ .lines span{display:block} .voice span{display:block} /* The four panels were briefed to sit at different horizontal offsets "so the eye tracks down a gentle diagonal rather than a straight column". The offset is a variable because the intrusive-voice line breaks out to CONTAINER-left, not panel-left — it has to cancel whatever offset its own panel carries, or the second speaker lands in a different place each time. */ /* Client request 2026-09-03: the four panels used to sit at different horizontal offsets "so the eye tracks down a gentle diagonal" – now a single shared --off so heading/lines/para/close all share one left edge. Client follow-up 2026-09-03: .voice no longer breaks out to CONTAINER-left either – it now sits flush with the rest of the panel. */ .panel{--off:150px; max-width:660px; margin-left:var(--off); padding:30px 0} .panel + .panel{margin-top:6px; border-top:1.5px solid rgba(140,108,69,.4)} .panel h2{color:var(--body-ink); margin-bottom:18px} .panel p{color:var(--body-ink)} .voice{ font-family:var(--font-h); font-style:italic; font-weight:400; font-size:clamp(1.45rem,2.3vw,1.86rem); line-height:1.34; color:var(--rust-deep); margin:22px 0; } .close-beat{ display:block; margin-top:20px; font-family:var(--font-h); font-size:1.46rem; line-height:1.34; color:var(--rust-deep); } /* ============================================================ THE PIVOT – the hinge of the page. Darkest ground. ============================================================ */ .pivot{position:relative; background:var(--bark); color:var(--cream); overflow:hidden} .pivot::before{ content:''; position:absolute; z-index:0; pointer-events:none; right:-180px; top:8%; width:760px; height:760px; background:radial-gradient(circle at 50% 50%, rgba(208,164,147,.2), rgba(208,164,147,0) 64%); } .pivot__curve{display:block; width:100%; height:70px; margin-bottom:-1px; position:relative; z-index:1} /* The dark band rises INTO the section above it and settles back OUT into the one below, so the page's one colour break has a soft edge at both ends instead of a curve on top and a ruled line underneath. */ .pivot__curve--out{margin:-1px 0 0; transform:scaleY(-1)} .pivot__inner{position:relative; z-index:1; padding-top:20px; padding-bottom:calc(var(--sy) + 4px)} .pivot h2{ color:var(--cream); font-size:clamp(2.3rem,5vw,3.8rem); max-width:15ch; margin-bottom:34px; } /* The turn is the LAST BEAT of this section, not a note running alongside it. The copy builds – didn't come from nowhere, those experiences are over, your nervous system didn't get the memo – and this is the line the build lands on. So it sits in flow beneath the body and opens out past the body's measure: the same narrow-then-wide move the Heal the Root list makes, which is what tells you it is a conclusion. */ .pivot__grid{display:block} .pivot__body{max-width:660px} .pivot p{color:#E4DBCE} .pivot .accent{color:var(--clay)} .pivot__turn{margin-top:42px; padding-left:0; border-left:0} /* The set-up stays in the body voice so it reads as part of the paragraph it belongs to; the payoff is the thing that lands. No rule underneath – the size and colour break already close the section. */ .pivot .pivot__turn-lead{ font-family:var(--font-b); font-size:inherit; line-height:1.72; color:#E4DBCE; margin:0 0 14px; } .pivot .pivot__turn-line{ font-family:var(--font-h); font-weight:700; font-size:clamp(1.95rem,3.5vw,2.85rem); line-height:1.16; letter-spacing:-.012em; color:var(--clay); margin:0; max-width:26ch; text-wrap:balance; } /* ============================================================ HEAL THE ROOT / MAKE MISTAKES / BIO – "Plate System". The hero and the final CTA both put copy on a solid cream plate. This run extends that language inward so the page reads as one system: a plate of outcomes, a plate over the photograph, and a plate the portrait breaks out of. ============================================================ */ /* Heal the Root is NOT on a plate – it is an open cream field. The narrow intro sits above and the five statements run the full container width beneath it, which is what gives them their weight. The dot ring is a MEASURED solid (30% clay over cream); an alpha ring on a warm ground shimmers when five of them stack in a column. */ .root{padding:var(--sy) 0; background:var(--cream)} .root__intro{max-width:660px; margin-bottom:44px} .root h2{color:var(--rust); margin-bottom:20px} .root__intro p{color:var(--body-ink)} /* The five outcomes STEP UP the page, as briefed, instead of sitting in a flat bordered list. Each line starts further across and sets very slightly larger than the one above it, so the section climbs toward the final claim rather than tabulating five equal rows. The copy already builds that way; only the container was flat. Offsets are percentages of the container so the ascent scales with the viewport and can never push a line off the edge. */ .claims{list-style:none; margin:0; padding:0; --rise:5.5%} .claims li{ display:flex; gap:22px; align-items:baseline; padding:18px 0; border-bottom:1.5px solid rgba(140,108,69,.3); font-family:var(--font-h); line-height:1.3; color:var(--body-ink); text-wrap:pretty; } .claims li:nth-child(1){margin-left:0; font-size:clamp(1.16rem,1.7vw,1.46rem)} .claims li:nth-child(2){margin-left:calc(var(--rise)); font-size:clamp(1.2rem,1.8vw,1.54rem)} .claims li:nth-child(3){margin-left:calc(var(--rise)*2); font-size:clamp(1.24rem,1.9vw,1.62rem)} .claims li:nth-child(4){margin-left:calc(var(--rise)*3); font-size:clamp(1.28rem,2vw,1.7rem)} .claims li:nth-child(5){margin-left:calc(var(--rise)*4); font-size:clamp(1.34rem,2.2vw,1.86rem); border-bottom:0} .claims li::before{ content:''; flex:0 0 auto; width:10px; height:10px; margin-top:.42em; background:var(--clay); border-radius:50%; box-shadow:0 0 0 4px #E4D8C5; } .claims li:last-child{color:var(--rust-deep)} /* colour only – same size as the rest */ /* Each dot still takes about four seconds to breathe in and out (~2s up, ~2s down) — that unhurried breath is the whole character of it, and speeding the individual dot up would turn it into a blink. What changed is the DEAD TIME. At 30s the wave crossed all five dots in ~14s and then the list sat perfectly still for ~16s. That still window was longer than most visitors spend in view of this section, so a good number of them saw nothing happen at all. At 18s with a 2s stagger the wave takes 12s and the rest drops to ~6s, which means someone who pauses here catches it within a couple of seconds without it ever reading as busy. The keyframe stops are percentages of the total duration, so they have to be recomputed whenever that duration changes or the breath silently rescales with it: 4s/18s = 22.2%, peak at 2s/18s = 10.8%. */ @keyframes dotTwinkle{ 0%, 22.2%, 100%{transform:scale(1); box-shadow:0 0 0 4px #E4D8C5} 10.8% {transform:scale(1.18); box-shadow:0 0 0 6px #DFCFB6} } .claims li::before{animation:dotTwinkle 18s ease-in-out infinite} /* Delays are absolute seconds, so they are the one part that does NOT rescale with the duration. */ .claims li:nth-child(1)::before{animation-delay:0s} .claims li:nth-child(2)::before{animation-delay:2s} .claims li:nth-child(3)::before{animation-delay:4s} .claims li:nth-child(4)::before{animation-delay:6s} .claims li:nth-child(5)::before{animation-delay:8s} @media (prefers-reduced-motion:reduce){.claims li::before{animation:none}} .bridge{position:relative; overflow:hidden; background:var(--bark); color:var(--cream)} .bridge__inner{position:relative; z-index:2; padding-top:var(--sy); padding-bottom:var(--sy); display:flex; justify-content:flex-start} .bridge__plate{max-width:588px; padding:44px 46px 42px} .bridge__plate h2{color:var(--cream); margin-bottom:20px} .bridge__plate p{color:#E4DBCE} .bridge__plate .lead{font-family:var(--font-h); font-size:1.34rem; line-height:1.42; color:var(--clay); margin-bottom:16px} .bridge__plate .btn{margin-top:24px} .bio{padding:calc(var(--sy) + 10px) 0 var(--sy); background:var(--cream); position:relative; overflow:hidden} .bio::before{content:''; position:absolute; z-index:0; pointer-events:none; width:560px; height:560px; left:-180px; bottom:-200px; background:radial-gradient(circle at 50% 50%, rgba(208,164,147,.5), rgba(208,164,147,0) 68%)} .bio__stage{position:relative; z-index:1; padding-left:130px} .bio__plate{ background:#EDE4D6; border-radius:3px 46px 3px 46px; padding:46px 52px 46px 405px; box-shadow:0 24px 54px -36px rgba(42,30,20,.8); } /* 430px -> 495px, +15%. The plate's left padding moves with it so the gap between portrait and copy stays where it was. */ .bio__figure{ position:absolute; z-index:2; margin:0; left:-130px; top:34px; width:495px; } .bio__figure img{ width:100%; height:auto; border-radius:20px; /* client request: round all image corners evenly */ border:9px solid var(--cream); box-shadow:0 26px 56px -30px rgba(42,30,20,.9); } .bio h2{font-style:italic; font-weight:400; color:var(--rust); font-size:clamp(1.9rem,3.4vw,2.6rem); margin-bottom:20px} .bio p{color:var(--body-ink)} .bio__warm{font-family:var(--font-h); font-size:1.24rem; line-height:1.48; color:var(--rust-deep)} .bio .btn{margin-top:24px} /* ============================================================ READY IF – "Self-Check". The copy is a self-assessment, so it is drawn as one: five real checkboxes the reader can run down and answer. Hover fills the box, but the resting state already reads as complete – there is no hover on a phone. ============================================================ */ .ready{padding:var(--sy) 0; background:linear-gradient(168deg,var(--clay-pale) 0%,#DCC9AB 58%,#D298B7 100%)} .ready h2{color:var(--bark); margin-bottom:34px; max-width:none} .checks{list-style:none; margin:0; padding:0; display:grid; gap:14px} .checks li{max-width:740px} /* Stepped: each row starts a little further across than the one above, so the set descends left-to-right. Percentages of the container, so the tread scales with the viewport and can never push a card off the edge. */ .checks{--tread:7.5%} /* one tread; the last row lands at 4 x this */ .checks li:nth-child(1){margin-left:0} .checks li:nth-child(2){margin-left:calc(var(--tread) * 1)} .checks li:nth-child(3){margin-left:calc(var(--tread) * 2)} .checks li:nth-child(4){margin-left:calc(var(--tread) * 3)} .checks li:nth-child(5){margin-left:calc(var(--tread) * 4)} .checks li{ display:flex; gap:20px; align-items:center; background:rgba(252,248,244,.5); border:1.5px solid rgba(42,30,20,.16); border-radius:2px 18px 2px 18px; padding:18px 24px; font-size:1.1rem; line-height:1.45; color:var(--bark); } /* These are statements, not links, so there is no hover state. The boxes tick themselves in one after another on the same 30s clock as the dots above, hold briefly once the set is complete, then clear all at once and restart. Each box carries its OWN keyframes rather than sharing one with a delay – a delay would shift each box's reset too, and they would never clear together. The tick inherits `color` from the box, so one keyframe drives both the fill and the mark. */ .box{ flex:0 0 auto; display:grid; place-items:center; width:28px; height:28px; border-radius:5px; /* plum accent – client request 2026-09-09, was sage */ border:2px solid var(--rust); background-color:transparent; color:var(--rust); animation-duration:21s; animation-timing-function:ease-in-out; animation-iteration-count:infinite; } .box svg{width:16px; height:16px; stroke:currentColor} .checks li:nth-child(1) .box{animation-name:tick1} .checks li:nth-child(2) .box{animation-name:tick2} .checks li:nth-child(3) .box{animation-name:tick3} .checks li:nth-child(4) .box{animation-name:tick4} .checks li:nth-child(5) .box{animation-name:tick5} @keyframes tick1{ 0%{background-color:transparent; color:var(--rust)} 5.71%, 78.57%{background-color:var(--rust); color:#fff} 85.71%, 100%{background-color:transparent; color:var(--rust)} } @keyframes tick2{ 0%, 11.9%{background-color:transparent; color:var(--rust)} 17.62%, 78.57%{background-color:var(--rust); color:#fff} 85.71%, 100%{background-color:transparent; color:var(--rust)} } @keyframes tick3{ 0%, 23.81%{background-color:transparent; color:var(--rust)} 29.52%, 78.57%{background-color:var(--rust); color:#fff} 85.71%, 100%{background-color:transparent; color:var(--rust)} } @keyframes tick4{ 0%, 35.71%{background-color:transparent; color:var(--rust)} 41.43%, 78.57%{background-color:var(--rust); color:#fff} 85.71%, 100%{background-color:transparent; color:var(--rust)} } @keyframes tick5{ 0%, 47.62%{background-color:transparent; color:var(--rust)} 53.33%, 78.57%{background-color:var(--rust); color:#fff} 85.71%, 100%{background-color:transparent; color:var(--rust)} } @media (prefers-reduced-motion:reduce){ .box{animation:none; background-color:var(--rust); color:#fff} } /* ============================================================ FINAL CTA – two-column split (client reference, 2026-09-03) Dark panel carrying the copy/contact/form directly on the section's own background (no floating card); the photograph fills the other column, full height, edge to edge. Replaces the previous full-bleed background photo with an overlaid cream plate. ============================================================ */ /* Client reference 2026-09-03 (2nd pass): both halves break out to the true viewport edges – dark panel to the left edge, photo to the right edge – square corners, no card, no shadow. Same full-bleed technique the site already uses for .svc-block.it-band / .about-band (margin-inline calc), just on a section that's already 100% dark rather than tinted. The panel's own left padding uses the same calc so its TEXT still lines up with every other section's container-left edge, even though the background itself runs to the true edge. */ .final{background:var(--bark)} .final__inner{ margin-inline:calc(50% - 50vw); width:100vw; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch; gap:0; } .final__panel{ padding:var(--sy) 50px var(--sy) max(26px, calc(50vw - var(--container) / 2)); display:flex; flex-direction:column; justify-content:center; } .final h2{color:#fff; margin-bottom:18px} .final p{color:#E4DBCE; font-size:1rem} /* .final p above is tuned for the dark panel copy, but it also cascades into the light .final__form-card nested inside (WPForms error/confirmation messages render as plain

tags, not through the --form-* brand tokens that cover the fields) -- #E4DBCE on the card's --cream background is ~1.1:1 contrast, unreadable. Force card

s back to the field-text color. */ .final__form-card p{color:var(--form-field-text)} .final__media{position:relative; min-height:280px} .final__media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:30% 40%} /* The two ways to reach her that don't require filling anything in – given the full width of the panel and a size that matches their importance. */ .final__contact{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px 26px; margin:22px 0 26px; padding:20px 0; border-top:1.5px solid rgba(228,219,206,.3); border-bottom:1.5px solid rgba(228,219,206,.3); } .final__contact a{ font-size:1.12rem; font-weight:600; color:var(--clay); text-decoration:none; letter-spacing:.005em; transition:color .2s var(--e); } .final__contact a:hover{color:#fff; text-decoration:underline; text-underline-offset:3px} /* The form keeps its own light card so the WPForms brand tokens (tuned for a light ground) stay legible on the now-dark panel. */ .final__form-card{ background:var(--cream); border-radius:20px; /* client request: round all corners, match .btn, not the plate cut */ padding:28px 26px 24px; box-shadow:0 20px 44px -30px rgba(15,8,4,.6); } .final__form-card input,.final__form-card textarea{border-radius:20px} form{display:grid; gap:14px} .f-row{display:grid; grid-template-columns:1fr 1fr; gap:14px} label{ display:block; font-size:.74rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; } input,textarea{ width:100%; font-family:var(--font-b); font-size:.95rem; color:var(--body-ink); background:rgba(245,239,230,.62); border:1px solid rgba(140,78,42,.3); border-radius:2px 10px 2px 10px; padding:12px 14px; transition:border-color .22s var(--e), background-color .22s var(--e); } input:focus,textarea:focus{ outline:none; border-color:var(--rust); background:var(--cream); box-shadow:0 0 0 3px rgba(140,78,42,.14); } textarea{min-height:104px; resize:vertical} .req{color:var(--rust); font-weight:600; letter-spacing:.06em} form .btn{width:100%; margin-top:4px; text-align:center} /* ============================================================ FOOTER ============================================================ */ .site-footer{background:var(--bark); color:#CFC4B4; padding:44px 0 26px} .foot{display:flex; flex-wrap:wrap; align-items:center; gap:20px 32px} /* The full lockup, not just the name. Both lines run light: cream is 12.89:1 on the bark ground and clay is 8.71:1, so the credential line is actually readable instead of the header's dark-on-cream treatment. */ .foot__brand{line-height:1.2} .foot__brand b{ display:block; font-family:var(--font-h); font-weight:500; font-size:1.24rem; letter-spacing:.004em; color:var(--cream); } .foot__brand span{ display:block; margin-top:6px; font-family:var(--font-b); font-size:.72rem; font-weight:600; letter-spacing:.17em; text-transform:uppercase; color:var(--clay); } .foot__social{display:flex; gap:14px; margin-left:auto} .foot__social a{ display:grid; place-items:center; width:32px; height:32px; color:#CFC4B4; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(208,164,147,.32); transition:color .22s var(--e), box-shadow .22s var(--e), background-color .22s var(--e); } .foot__social a:hover{color:var(--bark); background:var(--clay); box-shadow:inset 0 0 0 1px var(--clay)} .foot__social svg{width:15px; height:15px} .foot__legal{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; width:100%; margin-top:24px; padding-top:18px; border-top:1px solid rgba(208,164,147,.2); font-size:.78rem; color:#A88A9A; } .foot__legal a{color:#A88A9A; text-decoration:none; transition:color .2s var(--e)} .foot__legal a:hover{color:var(--clay); text-decoration:underline; text-underline-offset:3px} .foot__legal .cr{margin-left:auto} /* ============================================================ SCROLL REVEAL – exactly three on this page ============================================================ */ .js .reveal{opacity:0; transform:translateY(20px); transition:opacity .9s var(--e), transform .9s var(--e)} .js .reveal.in{opacity:1; transform:none} /* ============================================================ MOBILE TAP-TO-CALL – the number is otherwise inside a closed drawer or 9,800px down the page ============================================================ */ .callbar{display:none} @media (max-width:768px), (hover:none) and (pointer:coarse) and (max-height:500px){ .callbar{ position:fixed; left:0; right:0; bottom:30px; z-index:88; display:flex; align-items:center; justify-content:center; gap:11px; min-height:56px; padding:14px 18px; background:var(--rust); color:#fff; text-decoration:none; font-family:var(--font-b); font-size:1.02rem; font-weight:600; letter-spacing:.015em; box-shadow:0 -8px 24px -14px rgba(30,18,9,.85); } .callbar svg{width:19px; height:19px} .callbar:active{background:var(--rust-deep)} /* clearance so the bar never covers the copyright */ .site-footer{padding-bottom:96px} } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1100px){ .checks{--tread:5%} } @media (max-width:1024px){ :root{--sy:56px} .bio__grid{grid-template-columns:380px 1fr; gap:42px} .root__grid{gap:40px} .bridge__grid{gap:36px} .menu{gap:18px} .nav{gap:18px} .menu > li > a{font-size:.82rem} } @media (max-width:900px){ .hdr-cta{display:none} } /* The bio's side-by-side layout needs room for BOTH a 495px portrait and a readable text column. Below ~1080px it stops having it: measured at 820px the copy column was 181px, about twenty characters a line. The portrait enlargement made a squeeze that already existed worse, so the stack starts here rather than waiting for the 768 breakpoint. */ @media (max-width:1080px){ .bio__stage{padding-left:0} .bio__figure{position:relative; left:0; top:0; width:360px; margin:0 auto -50px} .bio__plate{padding:74px 40px 40px} } @media (max-width:768px), (hover:none) and (pointer:coarse) and (max-height:500px){ .checks{--tread:0} .checks li{max-width:none} :root{--sy:48px; --header-h:66px} body{font-size:17px} .burger{display:block} .nav{ position:fixed; inset:var(--header-h) 0 auto 0; flex-direction:column; align-items:stretch; gap:0; background:var(--cream); padding:10px 26px 26px; box-shadow:0 22px 40px -26px rgba(42,30,20,.7); max-height:calc(100vh - var(--header-h)); overflow-y:auto; transform:translateY(-12px); opacity:0; visibility:hidden; transition:opacity .28s var(--e), transform .28s var(--e), visibility .28s; } .open .nav{opacity:1; visibility:visible; transform:none} .menu{flex-direction:column; align-items:stretch; gap:0; width:100%} .menu > li > a{ padding:14px 0; color:var(--body-ink); font-size:1rem; border-bottom:1px solid rgba(140,78,42,.14); } .menu > li > a::after{display:none} .dropdown{margin-right:0} .dropdown > a::before{right:4px; transform:rotate(45deg)} .dropdown-menu{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; background:rgba(208,164,147,.16); border-radius:0; min-width:0; padding:4px 0; display:none; } .dropdown.expanded .dropdown-menu{display:block} .dropdown-menu a{padding:11px 18px; font-size:.94rem} .hdr-shell{padding:0 18px} .hdr{padding:0 18px; min-height:52px} .hdr-phone{ color:var(--rust); font-size:1rem; padding:16px 0 4px; display:flex; min-height:48px; } .brand b{font-size:1.06rem} /* hero stacks: plate, then photo. Below this breakpoint the photo drops out of the absolute/full-bleed position and becomes a normal block that follows .hero__inner in the DOM (see front-page.php), so it lands under the text without any extra markup. */ .hero{padding-top:calc(var(--header-h) + 24px)} .hero__plate{max-width:none} .hero__media{position:relative; top:auto; bottom:auto; right:auto; width:100%; aspect-ratio:16/10; margin-top:28px} .hero__media img{object-position:24% 40%} .hero__sub{font-size:1.12rem; max-width:none} .hero__geo{max-width:none} .tiles{grid-template-columns:1fr; gap:16px} .tile img{aspect-ratio:16/10} .tile__badge{left:22px; font-size:.95rem; padding:10px 18px} .tile__cap{padding:26px 22px 0} .help{padding-bottom:var(--sy)} .panel{max-width:none; margin-left:0 !important; padding:22px 0} .panel + .panel{margin-top:0} .voice{margin-left:0; font-size:1.24rem} .pivot__curve{height:44px} .pivot__turn{margin-top:30px} .root__intro{margin-bottom:30px} .claims{--rise:0} .claims li{gap:16px; padding:15px 0} .claims li:nth-child(n){font-size:clamp(1.1rem,3.6vw,1.32rem)} .bridge__inner{display:block} .bridge__plate{max-width:none; padding:30px 26px 30px} .bio__stage{padding-left:0} .bio__figure{position:relative; left:0; top:0; width:300px; margin:0 auto -46px} .bio__plate{padding:64px 26px 34px} /* stacks: panel, then photo */ .final__inner{grid-template-columns:1fr} .final__panel{padding:34px 26px 32px} .final__media{min-height:220px; order:2} .final__contact{justify-content:flex-start; gap:6px 22px} .final__contact a{font-size:1.05rem} .foot{gap:16px 22px} .foot__social{margin-left:0} .foot__legal .cr{margin-left:0; width:100%; margin-top:4px} } @media (max-width:480px){ :root{--sy:42px} .container{padding:0 20px} .plate{border-radius:2px 22px 2px 22px} .f-row{grid-template-columns:1fr} .hero__media{aspect-ratio:4/3} .final__media{min-height:200px} .bio__figure{max-width:100%} .checks li{font-size:1rem; padding:15px 18px; gap:15px; align-items:flex-start} .box{width:25px; height:25px; margin-top:1px} } /* touch devices: no fixed backgrounds, ≥14px fine print, ≥44px tap targets */ @media (hover:none) and (pointer:coarse){ /* Both the hero and the final CTA are real elements now, not CSS backgrounds, so there is no background-attachment to override here. Keep this comment so nobody "restores" a scroll fix for a declaration that no longer exists. */ .hero__geo{font-size:.875rem; letter-spacing:.07em} label{font-size:.875rem; letter-spacing:.07em} .foot__legal{font-size:.875rem} .foot__brand span{font-size:.875rem; letter-spacing:.1em} .tile__go{font-size:.875rem; letter-spacing:.11em; min-height:44px} .tile__desc{grid-template-rows:1fr; opacity:1; margin-bottom:16px} .brand span{font-size:.875rem; letter-spacing:.1em; margin-top:5px} .menu > li > a::after{display:none} /* 44px minimum touch targets */ .brand{padding:9px 0} .final__contact{gap:4px 18px} .final__contact a{min-height:44px; display:inline-flex; align-items:center} .foot__legal a{min-height:44px; display:inline-flex; align-items:center} .foot__social a{width:44px; height:44px} .foot__social svg{width:17px; height:17px} } @media (prefers-reduced-motion:reduce){ .js .reveal{opacity:1 !important; transform:none !important; transition:none} /* Deliberately scoped to animation-duration only. A blanket `transition:none !important` here would kill the dropdown's visibility transition and make the Services/Specialties submenus unreachable for exactly the users who asked for less motion. */ *{animation-duration:.01ms !important} } /* ============================================================================ ============================================================================ INNER PAGES – the same language as the homepage, carried inward. Plates, bronze hairlines, rust for action, clay for warmth only. ============================================================================ ============================================================================ */ :root{ /* One gap between sections, declared once, applied BETWEEN siblings. Every top-level block of post_content is a .svc-block, so image-left, image-right, text-only, heading-less and full-bleed all space identically by construction. Do NOT reintroduce type-based spacing (`.service-body > h2, .service-body > .svc-img-section {…}`): it can only ever space the shapes somebody remembered to enumerate, and everything else falls through to the paragraph margin and jams. */ --sec-gap:clamp(46px,7vw,84px); } /* ---------- inner hero ---------- A CSS background, deliberately, NOT an : tpa-base/inc/page-overrides.php lets the client swap any inner-page hero by setting a Featured Image, and it does that by overriding `background-image` on .inner-hero / .inner-hero-bg with !important. An child would sit on top of that override and the client's chosen photo would silently never appear. Its LCP cost is paid back in header.php, which preloads the resolved URL. */ .inner-hero{ position:relative; overflow:hidden; background:var(--bark); /* Client request 2026-09-03: fixed 525px on desktop. Tablet/mobile keep their own clamp()/auto overrides below (500px/900px breakpoints). */ height:525px; } .inner-hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center 42%; background-repeat:no-repeat; filter:brightness(.95) saturate(1.02); } .inner-hero-inner{ position:relative; z-index:2; height:100%; display:flex; align-items:center; justify-content:flex-start; /* vertical only – a shorthand would reset .container's horizontal padding */ padding-top:var(--header-h); } /* The title card is RINGED in bronze rather than underlined. Bronze is the palette's structure colour – rules, dividers, hairlines – so a border that describes the whole plate uses it more honestly than an accent line under the heading, and it keeps the plate reading as one object. */ .inner-hero-content{ background:var(--cream); border:2px solid var(--bronze); border-radius:20px; /* client request 2026-09-04: round corners to match images, not the brand shape */ box-shadow:0 26px 60px -34px rgba(30,18,9,.9); padding:30px 38px 30px; max-width:660px; } .inner-hero-content h1{ /* client request 2026-09-04: page titles reduced by a third (was clamp(1.75rem,3.6vw,2.85rem)) */ font-size:clamp(1.17rem,2.4vw,1.9rem); line-height:1.08; letter-spacing:-.014em; color:var(--body-ink); } /* client request 2026-09-04: mirror the hero photo on these two pages. .inner-hero-bg is the CSS-background layer only (behind .inner-hero-content), so flipping it never mirrors the title text. */ .page-emdr-intensives .inner-hero-bg, .page-emdr-consultation-for-therapists .inner-hero-bg{ transform:scaleX(-1); } /* ---------- inner body ---------- */ .inner-content{padding:calc(var(--sy) + 12px) 0 calc(var(--sy) + 4px); background:var(--cream)} .service-body{max-width:var(--service-body-max,1080px); margin:0 auto} .service-body > .svc-block{margin:0} .service-body > .svc-block + .svc-block{margin-top:var(--sec-gap)} /* Collapse the inner edges so a block's own first/last child can't stack a second, unequal gap on top of the section gap. */ .service-body > .svc-block > *:first-child{margin-top:0} .service-body > .svc-block > *:last-child{margin-bottom:0} .service-body > .svc-block:first-child{margin-top:0} .service-body h2{ font-family:var(--font-h); font-weight:500; font-size:clamp(1.5rem,2.6vw,2.05rem); line-height:1.16; letter-spacing:-.008em; color:var(--rust); margin:0 0 16px; } .service-body h3{ font-family:var(--font-h); font-weight:500; font-size:clamp(1.18rem,1.9vw,1.42rem); line-height:1.24; color:var(--body-ink); margin:26px 0 12px; } .service-body p{color:var(--body-ink)} .service-body a:not(.btn){color:var(--rust); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px} .service-body a:not(.btn):hover{color:var(--rust-deep)} /* tel:/mailto: links must never render underlined, no matter which body-copy link style (.service-body, .faq-a-body, .single-content, etc.) would otherwise apply to them — a phone/email typed inline in post_content inherits the generic "underline body links" treatment otherwise. !important because several of those rules tie or beat a plain attribute selector on specificity. */ a[href^="tel:"], a[href^="mailto:"]{text-decoration:none !important} .service-body ul,.service-body ol{margin:0 0 1.05em; padding-left:0; list-style:none} .service-body ol{counter-reset:svc} .service-body ul > li,.service-body ol > li{ position:relative; padding-left:30px; margin-bottom:12px; line-height:1.7; } .service-body ul > li::before{ content:''; position:absolute; left:2px; top:.62em; width:9px; height:9px; background:var(--clay); border-radius:50%; box-shadow:0 0 0 3px #E4D8C5; } .service-body ol > li{counter-increment:svc} .service-body ol > li::before{ content:counter(svc); position:absolute; left:0; top:.05em; font-family:var(--font-h); font-size:.95rem; font-weight:700; color:var(--bronze); } .service-body blockquote{ margin:0 0 1.05em; padding:0; font-family:var(--font-h); font-style:italic; font-size:clamp(1.24rem,2vw,1.5rem); line-height:1.42; color:var(--rust-deep); } /* The first subheadline of a page. Identical typography to every other body H2 (it inherits `.service-body h2` – do NOT give it a distinct italic "lead" treatment) and LEFT-aligned like every section below it. Centering this block is the defect that has shipped on most sites: the first heading sits centred while all the rest are left, on every service page. */ .inner-lead{margin:0; text-align:left} /* Plain-bold single line – body size, normal spacing. Reserve the large italic display treatment below for genuine pull-line moments. */ .service-body p.it-strong{font-weight:700; font-style:normal} .service-body p.it-emph{ font-family:var(--font-h); font-style:italic; font-weight:400; font-size:clamp(1.28rem,2.1vw,1.58rem); line-height:1.4; color:var(--rust-deep); } /* ---------- image beside text ---------- Rule #7b: the COPY sets the height and the image fills it, never the reverse. An in-flow in an align-items:stretch grid sizes the row to its own intrinsic height, so a short text column gets a towering photo beside it. Taking the image out of flow makes the copy authoritative at any length, with no per-page tuning. */ .svc-img-section{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:stretch; min-height:clamp(240px,26vw,340px); /* a floor, not a height */ } .svc-img-section--reverse .svc-text-col{order:2} .svc-text-col{min-width:0} .svc-img-col{min-width:0; position:relative} /* A light warm grade across every body photograph, so the inner pages read as one set the way the service tiles do — the technique the brief names for exactly this. Six of the delivered images run 21–60% cool hues, which breaks the "no cool colour anywhere" rule in the one medium the CSS palette can't reach. Done at render time, NOT baked into the files. Three attempts at per-pixel correction each failed differently: a light desaturation moved the metric without changing the picture, a heavy one left the frames grey and lifeless, and a hue rotation put a magenta sheen on dark fur and turned a mirror bright yellow — because hue is meaningless at low saturation. A filter is uniform, artifact-free, tunable in one number, and revertible by deleting one line. Deliberately gentle: sepia(.14) is well inside the 20–26% band the brief sets for the tiles, so warm frames are barely touched and cool ones are pulled toward the page. */ .svc-img-col img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:20px; /* client request: round all image corners evenly */ box-shadow:0 22px 48px -34px rgba(42,30,20,.85); filter:saturate(.86) sepia(.14); } /* The inner-page hero band gets the same treatment, at half strength — it is already sitting under a brightness/saturate pass. */ .inner-hero-bg{filter:brightness(.95) saturate(.92) sepia(.07)} /* ---------- editorial bands ---------- The page paints in three zones: a white lead, a tinted middle carrying the struggle-then-approach content, and a white resolution before the CTA. A band breaks full-bleed and pulls its own content back to the measure. */ .svc-block.it-band{ margin-inline:calc(50% - 50vw); width:100vw; background:var(--oat); padding:calc(var(--sec-gap) / 2) max(26px, calc(50vw - var(--service-body-max,1080px) / 2)); border-top:1.5px solid rgba(140,108,69,.28); border-bottom:1.5px solid rgba(140,108,69,.28); } /* Same-colour neighbours give half a gap each, i.e. one normal section gap; a colour change gives the full margin plus the band's half-pad. */ .service-body > .svc-block.it-band + .svc-block.it-band{margin-top:0; border-top:0} .svc-block.it-relief{background:transparent} /* ============================================================ FAQ – centered accordion Client request 2026-09-03: replaced the old "Index" split (questions left, answer mirrored in a panel on the right — the client found it confusing to read) with a single centered column, matching the landing page's FAQ. Each answer opens directly beneath its question, at every screen size — no separate mobile-only behavior needed any more. ============================================================ */ .faq-section{padding:calc(var(--sy) + 12px) 0 calc(var(--sy) + 4px)} .faq-intro{max-width:660px; margin:0 auto 46px; text-align:center} .faq-intro p{color:var(--body-ink)} .faq-list{max-width:760px; margin:0 auto; border-top:1.5px solid rgba(140,108,69,.42)} /* These are section subheadings, not eyebrows. They shipped as .74rem uppercase sans at .17em tracking — which is the eyebrow treatment this brand deliberately does not use anywhere else, and it read as a stray convention borrowed from another site. Now they are set the way every other subheading on the site is: Alegreya, title case, at a size that actually leads the questions beneath it, over a bronze hairline. The rule sits UNDER the heading, never above it. */ .faq-cat{ font-family:var(--font-h); font-weight:500; font-size:clamp(1.12rem,1.7vw,1.34rem); letter-spacing:-.004em; line-height:1.24; text-transform:none; color:var(--rust-deep); text-align:center; margin:44px auto 24px; padding:10px 26px; display:table; /* shrink-to-fit + auto-margin centering */ background:var(--oat); border-radius:2px 18px 2px 18px; } .faq-list > .faq-cat:first-child{margin-top:22px} .faq-item{border-bottom:1px solid rgba(140,108,69,.24)} .faq-q{ display:flex; align-items:flex-start; gap:16px; width:100%; margin:0; padding:21px 0; background:none; border:0; cursor:pointer; text-align:left; font-family:var(--font-b); font-size:1.06rem; line-height:1.45; color:var(--muted); transition:color .2s var(--e); } .faq-q:hover{color:var(--rust)} .faq-q-text{flex:1 1 auto; min-width:0} .faq-item.is-active > .faq-q{color:var(--rust-deep); font-weight:600} /* A bronze chevron that rotates open like any accordion. */ .faq-mark{ flex:0 0 auto; width:9px; height:9px; margin-top:.5em; border-right:2px solid var(--bronze); border-bottom:2px solid var(--bronze); transform:rotate(45deg); opacity:.55; transition:transform .3s var(--e), opacity .2s var(--e); } .faq-item.is-active .faq-mark{opacity:1; transform:rotate(-135deg); border-color:var(--rust)} .faq-inline{display:grid; grid-template-rows:0fr; transition:grid-template-rows .42s var(--e)} .faq-item.is-active .faq-inline{grid-template-rows:1fr} .faq-inline-in{overflow:hidden} .faq-a-body{padding:0 0 24px; max-width:64ch} .faq-a-body p{color:var(--body-ink); font-size:1.04rem} .faq-a-body p:last-child{margin-bottom:0} .faq-a-body a{color:var(--rust); text-decoration:underline; text-underline-offset:3px} /* ============================================================ ABOUT – the bio gets its own ground, not another text section. It is the one place a prospective client decides whether they want to sit with this person, so it breaks out of the reading column onto a tinted band with the portrait travelling alongside the prose. ============================================================ */ .about-band{ margin-inline:calc(50% - 50vw); width:100vw; background:var(--oat); padding:calc(var(--sec-gap) / 2) max(26px, calc(50vw - var(--service-body-max,1080px) / 2)); border-top:1.5px solid rgba(140,108,69,.28); border-bottom:1.5px solid rgba(140,108,69,.28); } .about-band__grid{display:grid; grid-template-columns:330px 1fr; gap:48px; align-items:start} .about-band__figure{margin:0; position:sticky; top:calc(var(--header-h) + 24px)} .about-band__figure img{ width:100%; height:auto; border:9px solid var(--cream); border-radius:20px; /* client request: round all image corners evenly */ box-shadow:0 26px 56px -30px rgba(42,30,20,.9); } .about-band__figure figcaption{ margin-top:14px; font-family:var(--font-b); font-size:.78rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); line-height:1.5; } .about-band__card{ background:var(--cream); border-radius:3px 40px 3px 40px; padding:38px 42px 36px; box-shadow:0 24px 54px -38px rgba(42,30,20,.8); } .about-band__card > *:first-child{margin-top:0} .about-band__card > *:last-child{margin-bottom:0} /* ============================================================ CONTACT ============================================================ */ .contact-grid{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:52px; align-items:start} .contact-info h2{color:var(--rust); margin-bottom:18px} .contact-copy{margin-bottom:36px} .contact-copy h2{ font-family:var(--font-h); font-weight:500; font-size:clamp(1.5rem,2.6vw,2.05rem); line-height:1.16; color:var(--rust); margin:0 0 18px; } .contact-copy p{color:var(--body-ink)} .contact-copy > *:last-child{margin-bottom:0} /* Client request 2026-09-03: a "Where I Work" callout with a pin icon on the in-person line and a monitor icon on the online line(s), both in the accent colour. */ .contact-where__head{ font-family:var(--font-h); font-weight:500; font-size:clamp(1.2rem,2vw,1.5rem); line-height:1.16; color:var(--rust); margin:0 0 16px; } .contact-where__list{list-style:none; margin:0; padding:0} /* Icons only – overrides the .service-body prose-list clay dot (0,1,2), which otherwise still shows up beside the icon since this is a