/* ============================================================ ANNA PSAUTE — VERSION B — "ONE LEVEL BELOW" Tenor Sans / Karla · one uniform bone ground · the trace ============================================================ */ :root{ --slate:#4A5568; --slate-lt:#5E6B7D; --sage:#7A8A8E; /* fills only — 3.26:1 on bone, never body text */ --sage-lt:#8C9A9E; /* 5.66:1 on ink — muted text on dark grounds */ --muted:#5C696D; /* 5.17:1 on bone — muted text on light grounds */ --bronze:#8B7355; --bronze-dk:#6F5C44; --bronze-lt:#C6A97F; /* 7.34:1 on ink */ --focus:#8B7355; --focus-lt:#DCC7A6; --img-plate:#22262B; --bone:#F5F4F2; --bone-dp:#EDEBE7; --ink:#1F1F23; --ink-soft:#C9C7C2; --font-d:"Tenor Sans","Tenor Sans Fallback",Optima,"Gill Sans MT","Helvetica Neue",sans-serif; --font-b:"Karla","Karla Fallback","Helvetica Neue",Arial,sans-serif; --wrap:1140px; --gut:clamp(20px,5vw,40px); --sec:clamp(50px,5.2vw,68px); --rail:max(var(--gut), calc((100vw - var(--wrap)) / 2)); --key:rgba(74,85,104,.38); /* the keyline */ --key-lt:rgba(245,244,242,.34); --hair:rgba(31,31,35,.11); --col:620px; /* the reading measure */ } /* Font-metric-override fallbacks — kept in sync with client-critical.css (which has the full explanation). Fixes the CLS 0.224 seen on real PSI from the Karla/Tenor Sans &display=swap reflow: Arial is given the exact ascent/descent/line-gap/size-adjust of the real font so the fallback already occupies its box before the swap happens - no shift either way. */ @font-face{ font-family:"Karla Fallback"; src:local("Arial"); ascent-override:99.48%; descent-override:27.34%; line-gap-override:0%; size-adjust:92.18%; } @font-face{ font-family:"Tenor Sans Fallback"; src:local("Arial"); ascent-override:95.41%; descent-override:25.93%; line-gap-override:0%; size-adjust:96.42%; } *{box-sizing:border-box} /* a translated-off-canvas drawer must not create a scroll axis */ html{-webkit-text-size-adjust:100%;overflow-x:hidden;overflow-x:clip} body{ margin:0;padding-bottom:0; background:var(--bone); color:var(--ink); font:400 17.5px/1.72 var(--font-b); -webkit-font-smoothing:antialiased; overflow-x:hidden;overflow-x:clip; position:relative; } /* the page's one ground, faintly surfaced. background-image is intentionally NOT here - this pseudo-element is full-viewport and always "on screen", so it can't be lazy-loaded the usual scroll-triggered way. Instead it's PSI's bandwidth-starvation trap: this 36KB image sits inside the render-blocking base CSS, so the browser fetches it at High priority the instant CSS is parsed - directly competing with the hero for the same throttled pipe (PSI mobile ~1.6Mbps) and roughly doubling the hero's resource-load-duration. It's 5.5% opacity multiply, so a fade-in a few hundred ms after full load is invisible; the `tex-loaded` class is added by client.js once the rest of the page (incl. the hero) has already finished loading. */ body::before{ content:"";position:fixed;inset:0;z-index:0;pointer-events:none; background-size:cover;background-position:center;background-repeat:no-repeat; opacity:.055;mix-blend-mode:multiply; } body.tex-loaded::before{ background:url("../images/texture-wm.jpg") center/cover no-repeat; background-image:image-set(url("../images/texture-wm.webp") type("image/webp"), url("../images/texture-wm.jpg") type("image/jpeg")); background-size:cover;background-position:center;background-repeat:no-repeat; } body > *{position:relative;z-index:1} img{display:block;max-width:100%} a{color:inherit} /* Tenor Sans ships ONE weight (400) and no italic. Asking for 600 makes the browser synthesize a fake bold, which smears its thin classical strokes - so headings carry hierarchy on size, tracking and colour instead of weight. Its proportions are wide and open, so the negative tracking that suited a serif now fights the face; hold it a touch positive. */ h1,h2,h3{ font-family:var(--font-d); font-weight:400; line-height:1.14; letter-spacing:.004em; margin:0; text-wrap:balance; } p,li{margin:0;text-wrap:pretty} p + p{margin-top:1.1em} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)} /* is an inline wrapper — it must not size itself independently of the inside it, or the image paints past its frame */ picture{display:contents} .col{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)} .col > *{max-width:var(--col)} /* ---------- the trace ---------- */ .trace{ display:block;width:100vw;margin-left:calc(50% - 50vw); height:clamp(34px,4vw,58px); stroke:var(--bronze);fill:none; overflow:visible; } .trace--in{width:100%;margin-left:0;height:clamp(30px,3.2vw,48px)} .trace--dim{stroke:rgba(139,115,85,.55)} .trace-hero{animation:settleTrace 1.9s cubic-bezier(.16,1,.3,1) both} @keyframes settleTrace{ from{transform:scaleY(2.6);opacity:0} 60%{opacity:1} to{transform:none;opacity:1} } /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:.85em; background:transparent;color:var(--slate); border:1px solid var(--slate);border-radius:0; font:600 12.5px/1 var(--font-b); letter-spacing:.16em;text-transform:uppercase; padding:18px 28px;text-decoration:none;cursor:pointer; transition:background .3s cubic-bezier(.22,1,.36,1), color .3s cubic-bezier(.22,1,.36,1), border-color .3s; } .btn .ar{width:16px;height:8px;flex:0 0 auto;overflow:visible} .btn .ar path{stroke:currentColor;stroke-width:1.2;fill:none} .btn:hover,.btn:focus-visible{background:var(--slate);color:var(--bone);border-color:var(--slate)} .btn--inv{border-color:rgba(245,244,242,.72);color:var(--bone)} .btn--inv:hover,.btn--inv:focus-visible{background:var(--bronze-lt);border-color:var(--bronze-lt);color:var(--ink)} :where(a,button,input,textarea,select,summary):focus-visible{ outline:3px solid var(--focus); outline-offset:3px; } /* on the dark grounds the ring switches to the light bronze so it stays visible */ .br :focus-visible,.ft :focus-visible,.sq:hover:focus-visible{outline-color:var(--focus-lt)} /* skip link — WCAG 2.4.1 bypass blocks */ .skip{ position:absolute;left:-9999px;top:0;z-index:300; background:var(--ink);color:var(--bone); font:600 14px/1 var(--font-b);letter-spacing:.06em; padding:15px 22px;text-decoration:none; } .skip:focus{left:12px;top:12px} /* visually hidden, still announced */ .vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} .meta{ font:600 11.5px/1 var(--font-b); letter-spacing:.2em;text-transform:uppercase;color:var(--bronze-dk); } /* ---------- header ---------- */ /* a photographic hero must not have a solid bar stuck on top of it — the header overlays the image and only takes a ground once you scroll off the fold */ .hdr{ position:fixed;top:0;left:0;right:0;z-index:60; background:transparent;border-bottom:1px solid transparent; transition:background .3s cubic-bezier(.22,1,.36,1), border-color .3s cubic-bezier(.22,1,.36,1), box-shadow .3s cubic-bezier(.22,1,.36,1); } /* the bar is fixed, so compressing it reflows only its own contents — nothing on the page below moves */ .hdr-in,.brand img,.brand b,.brand span{ transition:height .32s cubic-bezier(.22,1,.36,1), width .32s cubic-bezier(.22,1,.36,1), font-size .32s cubic-bezier(.22,1,.36,1); } .hdr.small .hdr-in{height:58px} .hdr.small .brand img{width:46px;height:46px} .hdr.small .brand b{font-size:17px} .hdr.small .brand span{font-size:10px} .hdr.small .nav a{padding-top:22px;padding-bottom:22px} .hdr.small{ background:var(--bone);border-bottom-color:var(--hair); box-shadow:0 6px 22px -18px rgba(31,31,35,.7); } /* B-1: the header spans the viewport rather than the 1140 container, so the mark sits hard left and the CTA hard right, with the nav breathing in the middle */ .hdr-in{ max-width:none;margin:0;padding:0 clamp(20px,2.6vw,46px); height:76px;display:flex;align-items:center;gap:clamp(14px,2.2vw,30px); } .brand{display:flex;align-items:center;gap:13px;text-decoration:none;flex:0 0 auto;min-height:44px} /* 66px inside a 76px bar — 5px of air top and bottom, header height unchanged */ .brand img{width:66px;height:66px} .brand b{font:400 22px/1.14 var(--font-d);letter-spacing:.04em;display:block;text-transform:uppercase;color:var(--ink)} .brand span{font:600 11.5px/1.35 var(--font-b);letter-spacing:.16em;text-transform:uppercase;color:var(--slate)} .nav-wrap{margin-left:auto;margin-right:auto;display:flex} .nav{margin:0;padding:0;display:flex;align-items:center;gap:clamp(10px,2vw,38px)} .nav > li{list-style:none;position:relative} .nav a{ font:600 12.5px/1 var(--font-b);letter-spacing:.15em;text-transform:uppercase; text-decoration:none;color:var(--ink); display:inline-flex;align-items:center;gap:6px;position:relative;padding:27px 0; transition:color .22s, padding .32s cubic-bezier(.22,1,.36,1); } .nav a:hover{color:var(--bronze-dk)} /* enlarge the hit area to >=44px without widening the nav — the narrowest label ("FAQ") is 28px, so 8px of overlay each side clears the target rule */ .nav > li > a::after{content:"";position:absolute;inset:0 -9px} .nav .caret{width:6px;height:6px;border-right:1.3px solid currentColor;border-bottom:1.3px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.5} .nav ul{ position:absolute;left:-20px;top:100%;margin:0;padding:8px 0; min-width:236px;list-style:none; background:var(--bone);border:1px solid var(--key); opacity:0;transform:translateY(-5px);pointer-events:none; transition:opacity .2s ease, transform .2s ease; } .nav li:hover > ul,.nav li:focus-within > ul{opacity:1;transform:none;pointer-events:auto} .nav > li.has-sub::after{content:"";position:absolute;left:-26px;right:-26px;top:100%;height:14px} .nav ul a{display:flex;align-items:center;min-height:44px;padding:11px 20px;letter-spacing:.09em;font-size:11.5px} .nav ul a:hover{background:var(--bone-dp);color:var(--bronze-dk)} .hdr-tel{flex:0 0 auto;display:flex;align-items:center;gap:14px;padding-left:clamp(8px,1.6vw,20px)} .hdr-tel .num{ font:600 14.5px/1 var(--font-b);letter-spacing:.03em;color:var(--ink);text-decoration:none; display:inline-flex;align-items:center;min-height:44px;gap:7px;transition:color .22s; } .hdr-tel .num svg{width:13px;height:13px;fill:none;stroke:var(--bronze);stroke-width:1.6} .hdr-tel .num:hover{color:var(--bronze-dk)} .hdr-cta{ font:600 10.5px/1 var(--font-b);letter-spacing:.16em;text-transform:uppercase; color:var(--slate);text-decoration:none; display:inline-flex;align-items:center;min-height:44px; border:1px solid var(--slate);padding:11px 15px; transition:background .25s,color .25s; } .hdr-cta:hover{background:var(--slate);color:var(--bone)} .burger{display:none;margin-left:auto;width:44px;height:44px;background:none;border:0;padding:10px;cursor:pointer} .burger span{display:block;height:1.4px;background:var(--ink);margin:6px 0;transition:transform .28s,opacity .2s} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.4px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.4px) rotate(-45deg)} /* ---------- hero B-1 "OPEN WATER" ---------- No plate. The lake has a large, flat, pale quiet zone; the type is placed INTO it and lifted with a measured bone wash, so the photograph is never covered — it is composed around. */ .hero{ position:relative;isolation:isolate;overflow:hidden; min-height:clamp(560px,90vh,860px); display:flex;flex-direction:column;justify-content:center; padding:calc(76px + clamp(34px,4.4vw,64px)) 0 clamp(44px,5.4vw,72px); } .hero-bg{position:absolute;inset:0;z-index:-2} .hero-bg img{ width:100%;height:100%;object-fit:cover;object-position:70% 56%; filter:brightness(1.01) saturate(1.78) contrast(1.26); } /* the lift: strongest over the type column, gone by mid-frame */ .hero::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background: /* a band under the overlaid nav */ linear-gradient(to bottom, rgba(245,244,242,.9) 0%, rgba(245,244,242,.66) 13%, rgba(245,244,242,0) 25%), /* and a pool centred on the copy — it lifts the dark patches the glyphs sit on and falls away in every direction, so the lake keeps its colour */ radial-gradient(88% 94% at 24% 52%, rgba(245,244,242,.76) 0%, rgba(245,244,242,.7) 40%, rgba(245,244,242,.44) 64%, rgba(245,244,242,.14) 86%, rgba(245,244,242,.01) 100%); } .hero-in{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)} .hero-copy{max-width:min(640px,52vw)} .hero h1,.hero .sub,.hero .geo,.hero-act .tel{ text-shadow:0 1px 20px rgba(245,244,242,.85), 0 1px 3px rgba(245,244,242,.6); } .hero h1{ font-size:clamp(2.05rem,4.9vw,4.1rem); font-weight:600;line-height:1;letter-spacing:.004em; } .hero h1 .l2{display:block;color:var(--slate)} /* the trace is not boxed in — it runs the whole frame, edge to edge */ .hero .trace{margin:clamp(16px,2vw,26px) 0 clamp(18px,2.2vw,28px)} .hero .sub{ font:500 clamp(1.05rem,4.4vw,1.55rem)/1.4 var(--font-b); color:var(--ink);max-width:42ch; } .hero .geo{ margin-top:.85em;padding-top:.95em;border-top:1px solid rgba(31,31,35,.2); font-size:15px;line-height:1.58;color:var(--slate);max-width:46ch; } .hero-act{ display:flex;align-items:center;gap:clamp(16px,2.2vw,28px);flex-wrap:wrap; margin-top:clamp(24px,2.8vw,34px); } .hero-act .btn{background:var(--slate);color:var(--bone);border-color:var(--slate)} .hero-act .btn:hover,.hero-act .btn:focus-visible{background:transparent;color:var(--slate)} .hero-act .tel{ font:600 14px/1 var(--font-b);color:var(--ink);text-decoration:none; display:inline-flex;align-items:center;min-height:44px; box-shadow:inset 0 -1px 0 var(--bronze); transition:color .22s,box-shadow .22s; } .hero-act .tel:hover{color:var(--bronze-dk);box-shadow:inset 0 -1px 0 var(--bronze-dk)} /* the lake, at its own proportion, holding nothing */ /* parallax: the plate is taller than its frame and lags the scroll. Transform on the image rather than background-attachment:fixed, which iOS ignores and which would cost the /WebP pair. */ .breath{position:relative;width:100%;overflow:hidden;background:var(--bone-dp);height:clamp(260px,54vh,540px)} .breath picture{display:contents} .breath img{ position:absolute;left:0;right:0;top:-3.5%;width:100%;height:107%; object-fit:cover;object-position:50% 0%;filter:saturate(.86) contrast(1.02); } @media (prefers-reduced-motion:reduce){ .breath img{top:0;height:100%;transform:none !important} } @media (max-width:1024px){ .breath img{top:-2%;height:104%} } /* ---------- how I help: the tonal triad ---------- Three panels stepping down through the practice's own grounds — bone, sand, slate. The palette carries the section, and a spotlight walks the three so every blurb gets read without anyone having to hover. Contained to the page's own container. */ /* its own ground, so the section is a stripe rather than more of the page */ .gate{ position:relative; background:#E7E5E0; border-top:1px solid rgba(74,85,104,.16); padding:var(--sec) 0 clamp(62px,6.4vw,86px); } /* the handoff: the trace straddles the foot of the stripe and carries you into the reading column, where it keeps settling */ .gate-seam{ position:absolute;left:0;right:0;bottom:0; transform:translateY(50%);pointer-events:none; } .gate-seam .trace{margin-left:0;width:100%} .gate h2{ max-width:var(--wrap);margin:0 auto clamp(28px,3.4vw,42px);padding:0 var(--gut); font-size:clamp(1.88rem,3.85vw,3rem);letter-spacing:.004em; } .triad{ max-width:var(--wrap);margin:0 auto;padding:0 var(--gut); display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,18px); } .pl{ position:relative;overflow:hidden; min-height:clamp(212px,21.5vw,286px); display:flex;flex-direction:column;justify-content:flex-start; padding:clamp(18px,2.1vw,26px); text-decoration:none;border:1px solid transparent; transform-origin:center; transition:background .4s cubic-bezier(.22,1,.36,1),border-color .4s,color .4s, transform .55s cubic-bezier(.22,1,.36,1), box-shadow .55s cubic-bezier(.22,1,.36,1); } .pl h3{ font-size:clamp(1.1rem,1.85vw,1.58rem);font-weight:600;letter-spacing:.004em; transform-origin:left center; transition:color .4s, transform .5s cubic-bezier(.22,1,.36,1); } .pl:focus-visible{outline-offset:-5px} /* bone, warm sand, slate — three distinct grounds rather than a tint ladder */ .pl--1{background:var(--bone);border-color:var(--key)} .pl--1 h3,.pl--1 .pl-blurb{color:var(--ink)} .pl--1 .trace{stroke:var(--bronze)} .pl--2{background:#E6DDCE;border-color:rgba(111,92,68,.34)} .pl--2 h3,.pl--2 .pl-blurb{color:var(--ink)} .pl--2 .trace{stroke:var(--bronze-dk)} .pl--3{background:var(--slate);border-color:var(--slate)} .pl--3 h3,.pl--3 .pl-blurb{color:var(--bone)} .pl--3 .trace{stroke:var(--focus-lt)} /* the trace and the blurb share one cell, so the swap costs no reflow */ .pl-swap{ position:relative;display:grid;align-items:center; min-height:clamp(100px,10.4vw,128px); margin:clamp(10px,1.3vw,15px) 0 0; } .pl-swap > *{grid-area:1/1;transition:opacity .34s ease} .pl .trace{width:100%;height:clamp(20px,2.2vw,30px);margin:0;opacity:1} .pl-blurb{ opacity:0; font:400 clamp(.86rem,1.05vw,.95rem)/1.52 var(--font-b); } /* it belongs to the active card only, so it never repeats — and it lives inside the card's own link rather than being a second one */ .pl-more{ margin-top:auto;align-self:flex-end; display:inline-flex;align-items:center;gap:9px; font:600 12.5px/1 var(--font-b);letter-spacing:.16em;text-transform:uppercase; opacity:0;transition:opacity .34s ease; } .pl-more svg{width:19px;height:8px;stroke:currentColor;stroke-width:1.4;fill:none;overflow:visible} .pl:hover .pl-more,.pl:focus-within .pl-more,.pl.is-lit .pl-more{opacity:1} .pl--1 .pl-more,.pl--2 .pl-more{color:var(--bronze-dk)} .pl--3 .pl-more{color:var(--focus-lt)} .triad:hover .pl.is-lit:not(:hover) .pl-more, .triad:focus-within .pl.is-lit:not(:focus-within) .pl-more{opacity:0} @media (hover:none){ .pl-more{opacity:1} } /* the spotlight breathes; a person's own hover stays immediate */ .triad--auto .pl, .triad--auto .pl h3, .triad--auto .pl-swap > *{ transition-duration:1.55s; transition-timing-function:cubic-bezier(.45,0,.3,1); } .triad:hover .pl,.triad:focus-within .pl, .triad:hover .pl-swap > *,.triad:focus-within .pl-swap > *{ transition-duration:.4s; transition-timing-function:cubic-bezier(.22,1,.36,1); } /* --- the lit state: shared by hover, focus and the spotlight --- */ .pl:hover,.pl:focus-within,.pl.is-lit{ /* it grows into the light rather than hopping — a scale from the card's own centre, so nothing shifts position */ transform:scale(1.045);z-index:2; box-shadow:0 0 0 2px var(--bronze), 0 0 44px -10px rgba(139,115,85,.52); } @media (prefers-reduced-motion:reduce){ .pl:hover,.pl:focus-within,.pl.is-lit{transform:none} } /* the name lifts and takes the accent, so the active service is unmistakable */ .pl:hover h3,.pl:focus-within h3,.pl.is-lit h3{transform:scale(1.07)} .pl--1:hover h3,.pl--1:focus-within h3,.pl--1.is-lit h3{color:var(--bronze-dk)} .pl--2:hover h3,.pl--2:focus-within h3,.pl--2.is-lit h3{color:var(--bronze-dk)} .pl--3:hover h3,.pl--3:focus-within h3,.pl--3.is-lit h3{color:var(--focus-lt)} .pl:hover .trace,.pl:focus-within .trace,.pl.is-lit .trace{opacity:0} .pl:hover .pl-blurb,.pl:focus-within .pl-blurb,.pl.is-lit .pl-blurb{opacity:1} .pl--1:hover,.pl--1:focus-within,.pl--1.is-lit{background:#EFECE6} .pl--2:hover,.pl--2:focus-within,.pl--2.is-lit{background:#DED2BC} .pl--3:hover,.pl--3:focus-within,.pl--3.is-lit{background:#3E4756} /* a person's attention beats the timer: while the section is being used, only the card actually under the pointer or focus is lit */ .triad:hover .pl.is-lit:not(:hover), .triad:focus-within .pl.is-lit:not(:focus-within){box-shadow:none} .triad:hover .pl.is-lit:not(:hover) h3, .triad:focus-within .pl.is-lit:not(:focus-within) h3{transform:none} .triad:hover .pl--1.is-lit:not(:hover) h3,.triad:focus-within .pl--1.is-lit:not(:focus-within) h3, .triad:hover .pl--2.is-lit:not(:hover) h3,.triad:focus-within .pl--2.is-lit:not(:focus-within) h3{color:var(--ink)} .triad:hover .pl--3.is-lit:not(:hover) h3,.triad:focus-within .pl--3.is-lit:not(:focus-within) h3{color:var(--bone)} .triad:hover .pl.is-lit:not(:hover) .trace, .triad:focus-within .pl.is-lit:not(:focus-within) .trace{opacity:1} .triad:hover .pl.is-lit:not(:hover) .pl-blurb, .triad:focus-within .pl.is-lit:not(:focus-within) .pl-blurb{opacity:0} .triad:hover .pl--1.is-lit:not(:hover),.triad:focus-within .pl--1.is-lit:not(:focus-within){background:var(--bone)} .triad:hover .pl--2.is-lit:not(:hover),.triad:focus-within .pl--2.is-lit:not(:focus-within){background:#E6DDCE} .triad:hover .pl--3.is-lit:not(:hover),.triad:focus-within .pl--3.is-lit:not(:focus-within){background:var(--slate)} /* nothing hovers on a touch screen — show the blurb outright */ @media (hover:none){ .pl .trace{opacity:0} .pl-blurb{opacity:1} } @media (prefers-reduced-motion:reduce){ .pl-swap > *{transition:opacity .01s linear} .pl.is-lit{box-shadow:none} .pl.is-lit h3{transform:none} } /* ---------- the reading column ---------- */ .read{padding:clamp(52px,5.6vw,80px) 0 clamp(26px,2.8vw,36px)} /* the thesis breaks the measure */ .thesis{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut) clamp(34px,3.6vw,51px)} .ln{display:block} .thesis h2{text-wrap:pretty} .thesis h2{ font-size:clamp(1.88rem,3.85vw,3rem);letter-spacing:.004em; margin-bottom:.5em; } .thesis .body{max-width:760px;font-size:clamp(1.02rem,1.24vw,1.13rem);line-height:1.76;color:var(--slate)} .thesis .body p:last-child{ color:var(--ink);font-family:var(--font-d);font-weight:400; font-size:clamp(1.15rem,1.82vw,1.46rem);line-height:1.34;letter-spacing:.004em; margin-top:1.05em; } .panel{padding:clamp(40px,4.6vw,58px) 0} .panel h2{ font-size:clamp(1.88rem,3.85vw,3rem);margin-bottom:.5em;letter-spacing:.004em; } .panel p{color:var(--slate);font-size:16.6px;line-height:1.78} /* prints laid down beside the reading column, off-axis and off-size — the two scenarios share the gesture, the angle and the scale differ */ .panel-in{ max-width:var(--wrap);margin:0 auto;padding:0 var(--gut); display:grid;grid-template-columns:minmax(0,var(--col)) minmax(0,1fr); gap:clamp(24px,3vw,46px);align-items:start; } .panel-tx{max-width:var(--col)} .panel-fig{ margin:0;background:var(--bone); padding:10px 10px 34px; /* the deep foot of a photographic print */ box-shadow:0 22px 44px -26px rgba(31,31,35,.5); align-self:start; } .panel-fig img{width:100%;height:auto;object-fit:cover;display:block; filter:saturate(.86) contrast(1.02)} .panel--a .panel-fig{ transform:rotate(2.4deg);margin-top:0; width:min(100%,386px); } .panel--a .panel-fig img{aspect-ratio:4/5} /* the second print is larger, tips the other way and runs off the page edge */ .panel--b .panel-fig{ transform:rotate(-2deg);margin-top:0; width:min(124%,430px);margin-right:clamp(-70px,-4vw,-20px); } .panel--b .panel-fig img{aspect-ratio:5/4} /* ---------- the close: the two scenarios above each carry a print. There is no photograph for this one and none should be invented, so the sentence that matters takes the slot the prints occupy. Print, print, sentence. Source order is preserved; only the grid placement moves it. ---------- */ .panel--close1{padding:clamp(46px,5.2vw,66px) 0 clamp(54px,6vw,78px)} .close1-in{ max-width:var(--wrap);margin:0 auto;padding:0 var(--gut); display:grid;grid-template-columns:minmax(0,596px) minmax(0,1fr); column-gap:clamp(26px,3vw,44px);align-items:start; } .close1-in > *{grid-column:1} .close1-in p{color:var(--slate);font-size:16.6px;line-height:1.78} .close1-in p + p{margin-top:19px} .close1-in .turn{ grid-column:2;grid-row:1 / span 8;align-self:center;margin-top:0; color:var(--ink);font-family:var(--font-d);font-weight:400; font-size:clamp(1.34rem,2.2vw,2rem);line-height:1.26;letter-spacing:.004em; text-wrap:balance; } @media (max-width:1080px){ .close1-in{grid-template-columns:minmax(0,1fr)} .close1-in > *,.close1-in .turn{grid-column:1;grid-row:auto} .close1-in .turn{margin-top:19px;align-self:auto} } /* ---------- picture what changes ---------- */ .out{padding:0 0 clamp(28px,3.2vw,42px)} .out-lead{ max-width:var(--wrap);margin:0 auto;padding:clamp(34px,3.8vw,46px) var(--gut) 0; } .out-lead > *{max-width:760px} .out-lead h2{font-size:clamp(1.88rem,3.85vw,3rem);margin-bottom:.5em;letter-spacing:.004em} .out-lead p{font-size:clamp(1.02rem,1.24vw,1.13rem);line-height:1.76;color:var(--slate)} .change{ max-width:var(--wrap);margin:0 auto;padding:0 var(--gut); } .change li{list-style:none;max-width:none} .change li .trace{margin-bottom:clamp(22px,2.6vw,32px)} .change-tx{ display:block;max-width:840px; font-family:var(--font-b);font-style:italic;font-weight:600; font-size:clamp(1.2rem,2.08vw,1.72rem);line-height:1.34;letter-spacing:-.004em; color:var(--ink); padding-bottom:clamp(22px,2.6vw,32px); } .out-close{ max-width:var(--wrap);margin:0 auto;padding:clamp(28px,3.2vw,42px) var(--gut) 0; } /* the flat seam's lower half is empty space — discount it so the note sits on the optical centre of the band rather than below it */ .out > .trace{margin-bottom:calc(-1 * clamp(17px,2vw,29px))} .out-close > *{max-width:760px} .out-close p{font-size:16.4px;line-height:1.74;color:var(--slate)} .out-close .note{ display:block;margin-top:0;font-style:italic;font-size:14.5px;color:var(--muted); max-width:none;text-align:center; } /* ---------- bridge: the inverted keyline band ---------- */ .br{background:var(--ink);color:var(--bone);padding:clamp(44px,4.8vw,60px) 0} .br-frame{ max-width:var(--wrap);margin:0 auto; border:1px solid var(--key-lt); padding:clamp(26px,3.4vw,46px); } .br-in{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.68fr); gap:clamp(28px,4.2vw,58px);align-items:start; } .br h2{color:var(--bone);font-size:clamp(1.88rem,3.85vw,3rem);margin-bottom:.5em;letter-spacing:.004em} .br p{color:var(--ink-soft);font-size:16.6px;line-height:1.8} .br p:last-of-type{color:var(--bone)} .br-act{margin-top:clamp(26px,3vw,34px)} .br-img{overflow:hidden;aspect-ratio:3/4;background:var(--img-plate)} .br-img img{width:100%;height:100%;object-fit:cover;object-position:52% 40%;filter:saturate(.92) contrast(1.02)} .br-cap{ margin-top:12px;font:500 12.5px/1.5 var(--font-b);letter-spacing:.1em;text-transform:uppercase; color:var(--sage-lt); } /* ---------- bio: the portrait breaks the frame ---------- */ .bio{position:relative;padding:var(--sec) 0 104px} .bio-frame{ position:absolute;left:var(--rail);right:var(--rail); top:clamp(28px,3vw,40px);bottom:104px; border:1px solid var(--key);pointer-events:none; } .bio-in{ position:relative;max-width:var(--wrap);margin:0 auto; padding:clamp(32px,3.8vw,52px) clamp(26px,3.2vw,46px) 0; display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr); gap:clamp(28px,4.2vw,58px);align-items:end; } .bio-por{margin-bottom:-64px;background:var(--bone-dp)} .bio-por img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;object-position:50% 26%} .bio-tx{padding-bottom:clamp(10px,1.6vw,22px)} .bio-tx h2{font-size:clamp(1.88rem,3.85vw,3rem);margin-bottom:.5em;letter-spacing:.004em} .bio-tx h2 em{font-style:italic;font-weight:600;color:var(--bronze-dk)} .bio-tx .lede{ font-family:var(--font-d);font-weight:400; font-size:clamp(1.08rem,1.66vw,1.32rem);line-height:1.4;color:var(--ink);letter-spacing:.004em; } .bio-tx p{font-size:16.6px;line-height:1.8;color:var(--slate)} .bio-tx b{font-weight:600;color:var(--ink)} .cred{ margin-top:clamp(22px,2.6vw,30px);padding-top:16px;border-top:1px solid var(--hair); font:500 12.5px/1.8 var(--font-b);letter-spacing:.13em;text-transform:uppercase;color:var(--muted); } .cred i{font-style:normal;color:var(--bronze-dk);padding:0 .5em} /* ---------- final CTA: vertical split ---------- */ .fin{display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr);align-items:stretch} .fin-img{position:relative;overflow:hidden;min-height:clamp(420px,72vh,740px);background:var(--bone-dp)} .fin-img img{width:100%;height:100%;object-fit:cover;object-position:50% 58%;filter:saturate(.88) contrast(1.02)} .fin-tx{ padding:clamp(44px,5vw,64px) var(--rail) clamp(44px,5vw,64px) clamp(28px,4vw,56px); display:flex;flex-direction:column;justify-content:center; } .fin-tx h2{font-size:clamp(1.88rem,3.85vw,3rem);max-width:23ch;text-wrap:balance;margin-bottom:.5em;letter-spacing:.004em} .fin-tx .copy{max-width:52ch;font-size:16.6px;line-height:1.78;color:var(--slate)} .fin-tx .copy strong{font-weight:600;color:var(--ink)} .reach{ display:flex;align-items:center;gap:clamp(14px,2.2vw,26px);flex-wrap:wrap; margin:clamp(24px,2.8vw,32px) 0 0;padding:18px 0; border-top:1px solid var(--hair);border-bottom:1px solid var(--hair); max-width:52ch; } .reach a{display:inline-flex;align-items:center;min-height:44px;gap:9px;text-decoration:none;font:600 15.5px/1 var(--font-b);color:var(--ink);transition:color .22s} .reach a svg{width:15px;height:15px;fill:none;stroke:var(--bronze);stroke-width:1.55} .reach a:hover{color:var(--bronze-dk)} .reach .sep{width:1px;height:18px;background:var(--hair)} form{max-width:530px;margin:clamp(26px,3vw,34px) 0 0} .fld{margin-bottom:15px} .fld label{display:block;margin-bottom:7px;font:600 11px/1 var(--font-b);letter-spacing:.17em;text-transform:uppercase;color:var(--slate)} .fld input,.fld textarea{ width:100%;font:400 16px/1.6 var(--font-b);color:var(--ink); background:transparent;border:1px solid var(--key);border-radius:0; padding:13px 14px;transition:border-color .22s,background .22s; } .fld textarea{min-height:108px;resize:vertical} .fld input:focus,.fld textarea:focus{outline:none;border-color:var(--ink);background:var(--bone)} .f2{display:grid;grid-template-columns:1fr 1fr;gap:15px} .fld--cap{max-width:190px;margin-bottom:22px} form .btn{width:100%;justify-content:center} .req-note{margin-bottom:18px;font-size:14px;line-height:1.5;color:var(--muted)} .req{color:var(--bronze-dk)} .fld input:user-invalid,.fld textarea:user-invalid{border-color:#8C3B2E;background:#FBF2F0} .form-status{margin-top:14px;font:600 15px/1.5 var(--font-b);color:var(--bronze-dk);min-height:1.4em} .privacy{margin-top:13px;font-size:14px;line-height:1.6;color:var(--muted)} /* ---------- footer ---------- */ .ft{background:var(--ink);color:var(--ink-soft);padding:clamp(36px,3.8vw,46px) 0 62px} .ft-in{ max-width:var(--wrap);margin:0 auto;padding:0 var(--gut); display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap; } .ft-brand{display:flex;align-items:center;gap:14px} .ft-brand img{width:44px;height:44px} .ft-brand b{font:400 14.5px/1.3 var(--font-d);letter-spacing:.06em;text-transform:uppercase;color:var(--bone);display:block} .ft-brand span{font:600 10px/1.4 var(--font-b);letter-spacing:.19em;text-transform:uppercase;color:var(--sage-lt)} .ft-mid{display:flex;align-items:center;gap:2px} .ft-mid a{display:inline-flex;align-items:center;justify-content:center; width:44px;height:44px;color:var(--ink-soft);transition:color .22s} .ft-mid a:hover{color:var(--bronze-lt)} .ft-mid svg{width:19px;height:19px} .ft-legal{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:14px} .ft-legal a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-soft);text-decoration:none;transition:color .22s} .ft-legal a:hover{color:var(--bronze-lt)} .ft-legal .dot{width:3px;height:3px;border-radius:50%;background:rgba(201,199,194,.4)} .ft-cr{ max-width:var(--wrap);margin:clamp(24px,2.8vw,32px) auto 0;padding:20px var(--gut) 0; border-top:1px solid rgba(201,199,194,.14);font-size:13.5px;color:var(--sage-lt); display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap; } /* ---------- annotation bar (mockup only) ---------- */ .anno{ position:fixed;left:0;right:0;bottom:0;z-index:200; background:rgba(31,31,35,.94);color:#EDEBE7; font:600 11px/1 var(--font-b);letter-spacing:.14em;text-transform:uppercase; padding:11px clamp(14px,3vw,26px); display:flex;align-items:center;justify-content:space-between;gap:14px; border-top:1px solid rgba(198,169,127,.4); } .anno span:last-child{color:var(--bronze-lt)} /* ---------- reveal ---------- */ .rv{opacity:0;transform:translateY(20px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)} .rv.in{opacity:1;transform:none} @keyframes forceVisible{to{opacity:1;transform:none}} /* No CSS forceVisible timer on .rv: it is a below-fold scroll-reveal class (IntersectionObserver adds .in in client.js), and a CSS-timed fallback here would force-reveal it before the reader scrolls to it, killing the reveal for anyone still above it at the timer's mark. client.js already carries the correct fallback — an 8s setTimeout that adds .in if IO never fires. */ @media (prefers-reduced-motion:reduce){ .rv{opacity:1;transform:none;transition:none;animation:none} .trace-hero{animation:none} } /* people do print these pages — give them something legible */ @media print{ .hdr,.anno,.skip,.burger,form,.hero-act,.btn,.trace{display:none!important} body{background:#fff;color:#000;font-size:11pt} body::before{display:none} .br,.ft{background:#fff!important;color:#000!important} .br h2,.br p,.ft-brand b{color:#000!important} .br-frame,.bio-frame,.sq{border-color:#999!important} section,.panel,.change li{break-inside:avoid} a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#444} } /* honour a user's request for more contrast */ @media (prefers-contrast:more){ :root{ --muted:#3E4A4D;--slate:#3B4553; --key:rgba(74,85,104,.72);--key-lt:rgba(245,244,242,.7); --hair:rgba(31,31,35,.32);--bronze-dk:#5A4A36; } .trace{stroke:var(--bronze-dk)} } @media (max-width:860px){ .triad{grid-template-columns:1fr} .pl{min-height:0} } @media (max-width:900px){ .panel-in{grid-template-columns:1fr;gap:24px} .panel-tx{max-width:none;order:1} .panel-fig{order:2} .panel--a .panel-fig,.panel--b .panel-fig{ width:min(100%,400px);margin:0 auto;transform:none;padding:9px 9px 26px; } .panel--a .panel-fig img,.panel--b .panel-fig img{aspect-ratio:3/2} } /* ============================================================ RESPONSIVE ============================================================ */ /* the CTA is the whole point of the full-width bar, so it stays; the nav gap flexes instead, and the burger arrives before the bar can crowd */ @media (max-width:1240px){ .hdr-in{gap:clamp(12px,1.6vw,22px)} .hdr-tel{gap:10px} } @media (max-width:1024px){ .fin{grid-template-columns:minmax(0,42fr) minmax(0,58fr)} .br-in{grid-template-columns:minmax(0,1fr) minmax(0,.6fr);gap:32px} .bio-in{grid-template-columns:minmax(0,.66fr) minmax(0,1fr)} } @media (max-width:900px){ .gate-grid{grid-template-columns:1fr 1fr;gap:20px} .sq:nth-child(3){grid-column:1/-1;aspect-ratio:16/7;margin-top:0} } /* --- MOBILE + LANDSCAPE PHONE --- */ /* a full-width bar carrying a 66px mark, six items, the number AND the CTA needs more room than the 1140-container version did — it hands over to the burger at 1300 rather than 768. Every common desktop width keeps the full bar. */ @media (max-width:1300px), (hover:none) and (pointer:coarse) and (max-height:500px){ .burger{display:block} .hdr-in{height:64px;gap:12px} .nav-wrap{margin-left:0} .nav{ position:fixed;left:0;right:0;top:64px;bottom:0; margin:0;padding:12px clamp(20px,2.6vw,46px) 90px; flex-direction:column;align-items:stretch;gap:0; background:var(--bone);overflow-y:auto; transform:translateX(100%); transition:transform .34s cubic-bezier(.22,1,.36,1); z-index:59; } .nav.open{transform:none} .nav > li{border-bottom:1px solid var(--hair)} .nav a{padding:17px 0;font-size:14px;letter-spacing:.12em;width:100%;justify-content:space-between} .nav > li > a::after{display:none} .nav .caret{transform:rotate(45deg);transition:transform .25s} .nav > li.open .caret{transform:rotate(-135deg)} .nav ul,.nav .sub-menu,.nav .dropdown{ position:static;opacity:1;transform:none;pointer-events:auto; border:0;background:transparent;min-width:0;padding:0 0 10px; max-height:0;overflow:hidden;transition:max-height .3s ease; } .nav > li.open > ul,.nav > li.open > .sub-menu,.nav > li.open > .dropdown{max-height:340px} .nav ul a{padding:11px 0 11px 16px;color:var(--slate)} .nav > li.has-sub::after{display:none} .hdr-tel{margin-left:0;padding-left:0;gap:10px;order:3} .hdr-tel .hdr-cta{display:none} .hdr-tel .num{font-size:14px} .brand{flex:0 1 auto;min-width:0;gap:10px} .brand img{width:54px;height:54px} .brand b{font-size:17px;letter-spacing:.035em;white-space:nowrap} .brand > span > span{display:none} .burger{order:4;margin-left:0;flex:0 0 auto} .hdr-in{justify-content:space-between} .hero{ min-height:0; padding:calc(64px + clamp(26px,7vw,42px)) 0 clamp(30px,7vw,44px); align-items:flex-start; } .hero-bg img{object-position:76% 52%} /* the copy fills the frame here, so the pool becomes an even lift */ .hero::before{ background:linear-gradient(to bottom,rgba(245,244,242,.92) 0%,rgba(245,244,242,.84) 70%,rgba(245,244,242,.6) 100%); } .hero h1{font-size:clamp(1.85rem,8.8vw,2.8rem)} .hero-copy{max-width:none} .hero-act{flex-direction:column;align-items:stretch;gap:14px} .hero-act .btn{justify-content:center;letter-spacing:.09em;padding:17px 18px;gap:.7em} .hero-act .tel{align-self:center} .gate-grid{grid-template-columns:1fr;gap:16px} .sq{aspect-ratio:16/6;margin-top:0 !important} .sq:nth-child(3){aspect-ratio:16/6} .thesis h2{max-width:none} .br-frame{padding:22px 18px} .br-in{grid-template-columns:1fr;gap:26px} .br-img{order:2;aspect-ratio:4/3} .br-img img{object-position:50% 34%} .bio{padding-bottom:0} .bio-frame{display:none} .bio-in{grid-template-columns:1fr;gap:26px;padding:0 var(--gut)} .bio-por{order:2;margin-bottom:0} .bio-por img{aspect-ratio:4/5;object-position:50% 22%} .bio-tx{order:1;padding-bottom:0} .fin{grid-template-columns:1fr} .fin-img{order:1;min-height:0;height:clamp(200px,34vh,300px)} .fin-tx{order:2;padding:clamp(34px,7vw,46px) var(--gut)} .reach{max-width:none} form{max-width:none} .f2{grid-template-columns:1fr} .fld--cap{max-width:none} .ft-cr{flex-direction:column;align-items:flex-start;gap:12px} .col > *,.change-tx,.out-lead > *,.out-close > *,.plate .fr{max-width:none} .ft-in{flex-direction:column;align-items:flex-start;gap:20px} } /* touch-device accessibility floor: nothing below 14px */ @media (hover:none) and (pointer:coarse){ .privacy,.out-close .note,.ft-cr,.ft-legal,.fld label,.anno, .cred,.trust li,.brand span,.ft-brand span,.br-cap,.hdr-cta, .nav a,.nav ul a,.pl-blurb,.pl-more{font-size:14px} /* .hdr.small .brand span (3 classes) is more specific than .brand span (2 classes) above, so the scrolled-header state would otherwise win at 10px on any touch viewport ≥560px (iPad portrait, landscape phones) where the 560px rule hasn't hidden the tagline yet. Match its specificity here. */ .hdr.small .brand span{font-size:14px} .nav a,.nav ul a{letter-spacing:.09em} .anno{letter-spacing:.07em} .fld label,.brand span,.ft-brand span,.cred,.br-cap,.hdr-cta,.pl-more{letter-spacing:.14em} .breath,.fin-img{background-attachment:scroll} } /* a phone cannot hold the wordmark, the number and the burger at once — the mark carries the identity, the number and the burger are functional */ @media (max-width:560px){ .brand > span{display:none} .brand img{width:54px;height:54px} .hdr-tel .num{font-size:15px} } @media (max-width:480px){ .hero h1{font-size:clamp(1.66rem,9.4vw,2.2rem)} .change-tx{font-size:clamp(1.1rem,5.5vw,1.34rem)} .anno{font-size:9.5px;letter-spacing:.05em;padding:9px 12px} } @media (max-width:480px) and (hover:none) and (pointer:coarse){ .anno{font-size:10px} } /* ===== final CTA — the close goes to ground, the form stays in the light ===== */ .fin.fin--band{ display:block;background:var(--slate); padding:clamp(56px,6.6vw,96px) 0 clamp(58px,6.8vw,100px); } .fin--band .fin-in{ max-width:var(--wrap);margin:0 auto;padding:0 var(--gut); display:grid;grid-template-columns:minmax(0,1fr) minmax(0,540px); /* stretch, not start: the card now matches the height of the copy beside it instead of stopping wherever the form happens to end. The form is centred inside it so a taller card reads as deliberate rather than half-empty. */ gap:clamp(28px,3.4vw,54px);align-items:stretch; } .fin--band .fin-tx{padding:0;display:block} .fin--band .fin-tx h2{color:var(--bone);max-width:none;text-wrap:wrap} .fin--band .copy{color:#D8DCE2} .fin--band .copy strong{color:var(--bone)} .fin--band .reach{border-color:rgba(245,244,242,.24);max-width:none} .fin--band .reach a{color:var(--bone)} .fin--band .reach a svg{stroke:var(--bronze-lt)} .fin--band .reach a:hover{color:var(--bronze-lt)} .fin--band .reach .sep{background:rgba(245,244,242,.24)} .fin--band .fin-card{ background:var(--bone);border:1px solid rgba(139,115,85,.2); padding:clamp(26px,3vw,40px); box-shadow:0 26px 60px -42px rgba(0,0,0,.8); display:flex;flex-direction:column;justify-content:center; } .fin--band .fin-card form{max-width:none;margin:0} @media (max-width:980px){ .fin--band .fin-in{grid-template-columns:minmax(0,1fr)} .fin--band .fin-tx h2 .ln{display:inline} } /* ===== picture what changes — each one arrives on its own, lands, and stays. The focus walks down the stack the way it does in B2; the stack persists the way it does in B1. ===== */ .out .tally{ display:flex;flex-direction:column;gap:clamp(10px,1.3vw,17px); max-width:var(--wrap);margin:0 auto; padding:clamp(28px,3.4vw,46px) var(--gut) clamp(38px,4.4vw,60px); } .tally .th{ display:block;width:fit-content;max-width:min(100%,620px); font-size:clamp(1.06rem,1.66vw,1.36rem); padding:.88rem 1.5rem; font-family:var(--font-b);font-style:italic;font-weight:600; line-height:1.4;letter-spacing:-.002em; color:var(--bronze-dk);background:#fff; border:1px solid rgba(139,115,85,.16); border-radius:18px 18px 18px 6px; box-shadow:0 16px 32px -22px rgba(31,31,35,.45); opacity:0;transform:translateX(-14px) scale(.97); transition:opacity .38s ease,transform .46s cubic-bezier(.22,1,.36,1), color .55s ease,box-shadow .55s ease,background .55s ease; } /* they answer each other side to side, the way a thread does */ .tally .th:nth-child(odd){align-self:flex-start;rotate:-1.1deg} .tally .th:nth-child(even){ align-self:flex-end;rotate:.9deg; margin-right:clamp(0px,11vw,180px); border-radius:18px 18px 6px 18px; transform:translateX(14px) scale(.97); } .tally .th:nth-child(3){rotate:-.6deg} .tally .th:nth-child(5){rotate:-.85deg} .tally .th.in{opacity:1;transform:none;animation:.86s cubic-bezier(.33,.68,.35,1) .18s both chipShake} .tally .th.hot{color:var(--ink);background:#fff;box-shadow:0 22px 44px -24px rgba(31,31,35,.6)} @keyframes chipShake{ 0%{transform:translateX(0) rotate(0deg)} 30%{transform:translateX(-3px) rotate(-.7deg)} 60%{transform:translateX(2px) rotate(.4deg)} 82%{transform:translateX(-1px) rotate(-.15deg)} 100%{transform:translateX(0) rotate(0deg)} } @media (max-width:640px){ .tally .th,.tally .th:nth-child(even){ align-self:stretch;rotate:0deg;max-width:100%;margin-right:0; border-radius:18px 18px 18px 6px; font-size:1.02rem;padding:.74rem 1.15rem; } } @media (prefers-reduced-motion:reduce){ .tally .th{opacity:1;transform:none;animation:none;transition:none} .tally .th.hot{color:var(--bronze-dk);background:#FCFBF8;box-shadow:0 16px 32px -22px rgba(31,31,35,.45)} } /* ===== tools + bio — the page already lays photographs down as prints beside the scenarios; these two sections speak the same language ===== */ .br.br--pin{padding:clamp(56px,6.2vw,88px) 0 clamp(60px,6.6vw,94px)} .br--pin .br-in{ max-width:var(--wrap);margin:0 auto;padding:0 var(--gut); display:grid;grid-template-columns:minmax(0,1fr) minmax(0,330px); gap:clamp(26px,3.4vw,50px);align-items:stretch; } .br--pin .br-plate{ background:var(--bone);padding:clamp(28px,3.4vw,48px); box-shadow:0 30px 70px -48px rgba(0,0,0,.9); } .br--pin h2{color:var(--ink)} .br--pin p{color:var(--slate)} .br--pin p:last-of-type{color:var(--slate)} .br--pin .br-print{ margin:0; position:relative;overflow:hidden; background:#fff; border:10px solid #fff;border-bottom-width:30px; rotate:2.2deg; box-shadow:0 22px 44px -26px rgba(0,0,0,.85); } .br--pin .br-print picture{display:contents} .br--pin .br-print img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:52% 30%} .br--pin .br-cap{color:var(--muted);margin-top:13px;text-align:center} .bio.bio--pin{background:#EAE6DE;padding:clamp(56px,6.2vw,88px) 0 0} .bio--pin .bio-in{ max-width:var(--wrap);margin:0 auto;padding:0 var(--gut); display:grid;grid-template-columns:minmax(0,410px) minmax(0,1fr); gap:clamp(30px,4.2vw,66px);align-items:center; } .bio--pin .bio-print{ margin:0;background:#fff;padding:11px 11px 34px; rotate:-2.4deg; box-shadow:0 26px 52px -28px rgba(31,31,35,.6); } .bio--pin .bio-print picture{display:contents} .bio--pin .bio-print img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%} .bio--pin .bio-side{display:block} .bio--pin .bio-tx{padding:0} .bio--pin .bio-tx p + p{margin-top:1.34em} .bio-act{margin-top:clamp(28px,3.2vw,38px)} /* the credentials run as a stripe across the foot of the section */ .bio--pin .trust{ list-style:none;margin:clamp(44px,5vw,72px) 0 0; padding:clamp(17px,1.9vw,25px) var(--gut); border-top:1px solid rgba(139,115,85,.3); background:#E4DFD4; display:flex;flex-wrap:wrap;justify-content:center;align-items:center; gap:clamp(9px,1.4vw,16px) clamp(20px,3.4vw,54px); } .bio--pin .trust li{ display:inline-flex;align-items:center;gap:9px; font:600 12.5px/1.5 var(--font-b);letter-spacing:.1em; text-transform:uppercase;color:var(--slate); } .bio--pin .trust svg{ width:14px;height:14px;flex:0 0 auto; stroke:var(--bronze-dk);stroke-width:2.6;fill:none; stroke-linecap:round;stroke-linejoin:round; } /* the global touch floor is outranked by the scoped rule above — restate it here */ @media (hover:none) and (pointer:coarse){ .bio--pin .trust li{font-size:14px;letter-spacing:.09em} .bio--pin .trust{gap:11px clamp(18px,4vw,40px)} } @media (max-width:880px){ .br--pin .br-in,.bio--pin .bio-in{grid-template-columns:minmax(0,1fr)} /* stacked, the row no longer supplies a height — let the ratio do it */ .br--pin .br-in{align-items:start} .bio--pin .bio-print{rotate:0deg;max-width:400px;margin-left:auto;margin-right:auto} .br--pin .br-print{rotate:0deg} .br--pin .br-print{position:relative;aspect-ratio:4/5;margin:0;width:min(100%,400px);justify-self:center} .br--pin .br-print img{position:absolute;inset:0;width:100%;height:100%} } /* ═══════════ B1 — impeccable-audit changes ═══════════ */ /* 1. touch floor: the house rule is nothing under 14px on a touch device, and every button label sat at 12.5px */ @media (hover:none) and (pointer:coarse){ .btn,.btn--inv{font-size:14px;letter-spacing:.12em} } /* 2. the client's SECONDARY #7A8A8E was on the page zero times. The brief puts it on one pain panel as a tinted ground, which is also the rhythm break three identical panels were missing. */ .panel--b{background:#E3E8E7} .panel--b .panel-fig{background:#E3E8E7} /* 3. the brief calls Picture What Changes "the page's warmest moment before the pivot" and specifies a bronze-tinted wash. It was sitting on plain bone. */ .out{background:#EFE7DB} .out .trace{stroke:var(--bronze-dk)} /* 4. a conversation is reachable from the middle of the page, not only from the hero and the footer */ .mid-cta{ grid-column:1;margin-top:clamp(28px,3.2vw,38px);padding:0; display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,2vw,26px); } .mid-tel{ font:600 15.5px/1 var(--font-b);color:var(--ink);text-decoration:none; border-bottom:1px solid var(--bronze);padding:6px 0; display:inline-flex;align-items:center;min-height:44px;transition:color .22s,border-color .22s; } .mid-tel:hover{color:var(--bronze-dk);border-color:var(--bronze-dk)} /* 5. the drawer gets the same two ways in */ .nav-act{display:none} @media (max-width:1240px){ .nav-act{display:block;margin-top:clamp(16px,2.4vw,24px);padding-top:clamp(16px,2.4vw,24px); border-top:1px solid var(--hair)} .nav-act .btn{width:100%;justify-content:center} .nav-act .nav-tel{ display:flex;align-items:center;justify-content:center;min-height:44px;margin-top:10px; font:600 15px/1 var(--font-b);color:var(--ink);text-decoration:none; } } /* 6. mobile hero art direction: the subject sat small and low with the top half of the frame empty sky */ @media (max-width:640px){ .hero-bg img{object-position:64% 62%} } /* the mid-page CTA is the hero's CTA repeated, so it carries the same weight */ .mid-cta .btn{background:var(--slate);color:var(--bone);border-color:var(--slate)} .mid-cta .btn:hover,.mid-cta .btn:focus-visible{background:transparent;color:var(--slate)} /* the drawer CTA likewise */ @media (max-width:1240px){ .nav-act .btn{background:var(--slate);color:var(--bone);border-color:var(--slate)} .nav-act .btn:hover,.nav-act .btn:focus-visible{background:transparent;color:var(--slate)} } /* ============================================================================ WORDPRESS INTEGRATION + INNER PAGES The homepage above is the mockup, ported. Everything below carries the same design language onto the pages the mockup never showed: one bone ground, the keyline, the print frame, the trace as the only separator. ============================================================================ */ /* Rule #4 - every inner-page template relies on .container */ .container{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)} /* ── inner-page hero ─────────────────────────────────────────────────────── A CSS background, not an : tpa-base/inc/page-overrides.php lets the client swap this from the page's Featured Image with an !important rule on .inner-hero / .inner-hero-bg, and that override cannot reach an tag. The title sits BELOW the photograph on bone, with the trace between them - the same order the homepage hero uses, and no type over a photograph. */ .inner-hero{ position:relative;width:100%; /* +10% on every stop of the clamp, so the band grows by the same amount at phone, tablet and desktop rather than only at the ends. */ height:clamp(254px,38.7vw,508px); background:var(--bone-dp) center/cover no-repeat; overflow:hidden; } .inner-hero-bg{position:absolute;inset:0;background:inherit} /* The header is fixed and transparent until you scroll, so at rest it sits directly on this photograph and the nav loses contrast against a light frame - the CTA keyline in particular. Lift the top of the band with the same measured bone wash the homepage hero uses behind its type. It is the site's own device, not a scrim: a flat black overlay would desaturate the picture. */ .inner-hero::before{ content:"";position:absolute;inset:0 0 auto 0;height:150px;z-index:1;pointer-events:none; background:linear-gradient(to bottom, rgba(245,244,242,.94) 0%, rgba(245,244,242,.82) 46%, rgba(245,244,242,0) 100%); } .inner-hero::after{ content:"";position:absolute;inset:auto 0 0 0;height:38%; background:linear-gradient(to bottom,rgba(245,244,242,0),rgba(245,244,242,.55)); pointer-events:none; } .inner-head{padding:clamp(28px,3.6vw,46px) 0 0;background:var(--bone)} /* The title shares the BODY's measure, not the page wrap. .service-body (1000px) is centred inside .container (--wrap 1140px), which insets the body copy a further 30px; a title capped at --wrap therefore hangs 30px to its left on any viewport above ~1080px. Matching the body measure here puts the h1, the kicker and every paragraph below them on one left edge at every width. */ .inner-hero-content{ max-width:calc(var(--service-body-max,1000px) + 2 * var(--gut)); margin:0 auto;padding:0 var(--gut); } /* The page title IS the AP mark, enlarged: the page's name takes the place of the initials, reversed out white on the mark's own slate ground. White on --slate measures 7.52:1 - AAA at this size. The card's LEFT EDGE carries the body measure: the card is the object on the page, so it is the card that lines up with the copy beneath it, not the glyphs inside it. THE KEYLINE RIDES THE OUTER EDGE. One inset shadow at 2px in --sage (#7A8A8E, the palette's secondary) draws the card's own perimeter - not a rule held inside it, which reads as a second box. 2px, not 1: the mark carries its keyline at 1px on a 504px square, so against a card a fraction of that size a single pixel reads thinner than the logo's does. Matching the weight optically means drawing it heavier than the artwork does literally. 2.06:1 on slate: soft on purpose, and purely decorative, so it carries no text-contrast duty. A shadow rather than a border so it cannot add to the box, and rather than a pseudo-element because ::before/::after are both spoken for by the leading trim below. PADDING IS THE VISIBLE GAP, because of that trim: .34em over the caps, .40em under the baseline, .27em down the sides. The mark's own ratio is far tighter (.176 of the cap), but two things make a literal transfer unwearable at text sizes: Tenor Sans drops p/y/g/j/q a full .25em below the baseline, deeper than the mark's entire gap - .40em is what holds the deepest glyph the face can make clear of the edge - and CSS pads to the glyph box, so the sidebearing each letter carries inside it (0.8px for "T", 6.4px for "I" at 40px) lands on top of whatever is set here. These values keep the mark's proportion - sides and top near equal, a little more under the baseline - at a weight that reads. */ .inner-hero-content h1,.inner-page-title{ display:inline-block; font-family:var(--font-d);font-weight:400;line-height:1.16;letter-spacing:.012em; /* The page title is the largest type on the page. Every section head below it runs clamp(1.88rem,3.85vw,3rem); this sits ~12% above that at each stop, so the title never reads as the smaller of the two at any viewport. */ font-size:clamp(2.1rem,4.3vw,3.35rem); color:#fff;background:var(--slate); box-shadow:inset 0 0 0 2px var(--sage); /* No ch clamp. A clamp fixes the card at the clamp width and lets a shorter line float inside it, so the gap past the last word never matches the gap before the first. Shrink-to-fit hugs the longest line instead; the wrap itself is decided in PHP by tpa_annapsaute_title_break(), which ships a
in the markup - so a long title still breaks, and the card still hugs. */ margin:0;max-width:100%;text-wrap:balance; padding:.34em .27em .40em; } /* Leading trim: strip the ascent standing above the caps and the descent below the baseline, so the padding above is the gap you actually see. display:table keeps the negative margins from collapsing. Recompute both if the display face or the line-height changes. */ .inner-hero-content h1::before,.inner-page-title::before{content:"";display:table;margin-bottom:-.2175em} .inner-hero-content h1::after,.inner-page-title::after{content:"";display:table;margin-top:-.2425em} .inner-head .trace{margin-top:clamp(6px,1.4vw,14px)} .inner-head .kicker{ font:600 11.5px/1 var(--font-b);letter-spacing:.17em;text-transform:uppercase; color:var(--muted);margin:0 0 clamp(12px,1.6vw,18px); } /* ── the inner-page body ─────────────────────────────────────────────────── Section spacing is declared ONCE, between siblings, and keyed on the .svc-block wrapper rather than on element types - so a text-only block, an image block, a heading-less block and a full-bleed band are all identical by construction. A band pays half the gap internally and takes half at its seams, which is what makes a colour boundary measure the same as a plain one instead of 1.5x. */ :root{--sec-gap:clamp(46px,7vw,84px);--sec-half:calc(var(--sec-gap)/2)} .inner-content{padding:clamp(34px,4.6vw,60px) 0 clamp(52px,6.4vw,88px);background:var(--bone)} .service-body{max-width:var(--service-body-max,1000px);margin:0 auto} .service-body > .svc-block{margin:0} .service-body > .svc-block + .svc-block{margin-top:var(--sec-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 > .svc-block.it-band, .service-body > .svc-block.about-band{ margin-inline:calc(50% - 50vw);width:100vw; background:#EFEDE8; padding:var(--sec-half) max(var(--gut),calc(50vw - var(--service-body-max,1000px)/2)); border-top:1px solid rgba(139,115,85,.22); border-bottom:1px solid rgba(139,115,85,.22); } .service-body > .svc-block + :is(.it-band,.about-band){margin-top:var(--sec-half)} .service-body > :is(.it-band,.about-band) + .svc-block{margin-top:var(--sec-half)} .service-body > :is(.it-band,.about-band) + :is(.it-band,.about-band){margin-top:0;border-top:0} /* a relief block is the page ground showing through between two bands, so it takes the FULL gap like any plain block - never add it to the :is() lists */ .service-body > .svc-block.it-relief{background:transparent} .service-body h2{ font-family:var(--font-d);font-weight:400; font-size:clamp(1.88rem,3.85vw,3rem); /* one scale, every section */ line-height:1.1;letter-spacing:.004em;color:var(--ink); margin:0 0 .5em;text-wrap:balance; } .service-body h3{ font-family:var(--font-d);font-weight:400; font-size:clamp(1.16rem,1.9vw,1.44rem);line-height:1.24;letter-spacing:.004em; color:var(--ink);margin:1.7em 0 .55em; } .service-body p,.service-body li{font-size:16.8px;line-height:1.8;color:var(--slate)} .service-body p + p{margin-top:1.05em} .service-body strong{color:var(--ink);font-weight:600} .service-body em{font-style:italic} .service-body a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--bronze); padding-bottom:1px;transition:color .22s,border-color .22s} .service-body a:hover{color:var(--bronze-dk);border-color:var(--bronze-dk)} .service-body ul,.service-body ol{margin:1.1em 0;padding-left:1.15em} .service-body li + li{margin-top:.5em} .service-body li::marker{color:var(--bronze)} /* a standalone emphatic sentence: plain bold at body size, NOT a display line */ .service-body .it-strong{font-weight:700;font-style:normal;color:var(--ink)} /* the first subheadline. Same font, size, weight, colour AND alignment as every other body H2 - and left-aligned, like every section under it. */ .inner-lead{margin:0;text-align:left} .inner-lead h2{ font-family:var(--font-d);font-style:normal;font-weight:400;color:var(--ink); font-size:clamp(1.88rem,3.85vw,3rem);line-height:1.1; } /* ── image beside text (Rule #7 / #7b) ───────────────────────────────────── The COPY sets the height and the image fills it. An in-flow in an align-items:stretch grid sizes the row to its own intrinsic height, which is what produces a towering photograph beside three lines of text. Taking it out of flow makes the copy authoritative at any copy length. */ .svc-img-section{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr); gap:clamp(24px,3.4vw,48px);align-items:stretch; min-height:clamp(240px,26vw,340px);margin:0; } .svc-img-section--reverse .svc-text-col{order:2} .svc-img-section--reverse .svc-img-col{order:1} .svc-text-col{min-width:0} .svc-text-col > h2:first-child{margin-top:0} .svc-img-col{min-width:0;position:relative;background:var(--bone-dp)} .svc-img-col picture{display:contents} .svc-img-col img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block; filter:saturate(.88) contrast(1.02); } /* the print frame, drawn as a BORDER so an absolutely-positioned image cannot spill through it - padding would be ignored by inset:0 */ .svc-img-col{ border:9px solid #fff;border-bottom-width:22px; box-shadow:0 20px 42px -28px rgba(31,31,35,.55); } @media (max-width:820px){ .svc-img-section{grid-template-columns:1fr;min-height:0} .svc-img-section--reverse .svc-text-col, .svc-img-section--reverse .svc-img-col{order:0} .svc-img-col{position:relative} .svc-img-col img{position:relative;inset:auto;aspect-ratio:4/3;height:auto} } /* a single body image with no text beside it */ .svc-figure{margin:0;background:#fff;border:9px solid #fff;border-bottom-width:22px; box-shadow:0 20px 42px -28px rgba(31,31,35,.55)} .svc-figure picture{display:contents} .svc-figure img{display:block;width:100%;height:auto} /* ── About: the bio band ─────────────────────────────────────────────────── The one place a visitor decides whether they want to sit with this person, so it is visibly a different KIND of thing from the sections above it. */ .about-band{background:#EAE6DE !important} .about-grid{ display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:clamp(26px,3.8vw,58px);align-items:center; } .about-por{margin:0;background:#fff;padding:11px 11px 32px;rotate:-2.2deg; box-shadow:0 26px 52px -30px rgba(31,31,35,.6)} .about-por picture{display:contents} .about-por img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%} .about-creds h2{margin-bottom:.6em} .about-creds ul{list-style:none;margin:0;padding:0} .about-creds li{ display:flex;align-items:flex-start;gap:11px; font:600 13px/1.5 var(--font-b);letter-spacing:.09em;text-transform:uppercase; color:var(--slate);padding:13px 0;border-top:1px solid rgba(139,115,85,.28); } .about-creds li:last-child{border-bottom:1px solid rgba(139,115,85,.28)} .about-creds li::before{ content:"";flex:0 0 auto;width:7px;height:7px;margin-top:.42em; border:1px solid var(--bronze-dk); } @media (max-width:760px){ .about-grid{grid-template-columns:1fr} .about-por{rotate:0deg;max-width:340px;margin-inline:auto} } /* ── FAQ ─────────────────────────────────────────────────────────────────── Collapsed uniform strips, not an all-open ragged grid. Every strip is the same shape closed; the trace under an open answer is the only ornament. */ .faq-wrap{max-width:860px;margin:0 auto} .faq-cat{ font:600 11.5px/1 var(--font-b);letter-spacing:.17em;text-transform:uppercase; color:var(--muted);margin:clamp(38px,4.4vw,58px) 0 clamp(14px,1.6vw,20px); padding-bottom:11px;border-bottom:1px solid rgba(139,115,85,.3); } .faq-cat:first-child{margin-top:0} .faq-item{border-bottom:1px solid var(--hair)} .faq-q{ width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px; background:none;border:0;cursor:pointer;text-align:left; padding:clamp(19px,2.1vw,25px) 4px;min-height:44px; font-family:var(--font-d);font-weight:400;color:var(--ink); font-size:clamp(1.06rem,1.62vw,1.24rem);line-height:1.32;letter-spacing:.004em; transition:color .24s; } .faq-q:hover{color:var(--bronze-dk)} .faq-q .mark{flex:0 0 auto;position:relative;width:18px;height:18px;border:0;background:none;transition:none} .faq-q .mark::before,.faq-q .mark::after{ content:"";position:absolute;background:var(--bronze-dk); transition:opacity .45s cubic-bezier(.22,1,.36,1),transform .45s cubic-bezier(.22,1,.36,1),background .28s; } /* Just a plus that loses its upright - no box, no 90deg spin. The bordered square filling with ink read as a checkbox being ticked, not as open/close. */ .faq-q .mark::before{left:0;right:0;top:8px;height:2px} .faq-q .mark::after{top:0;bottom:0;left:8px;width:2px} .faq-q[aria-expanded="true"] .mark::after{opacity:0;transform:scaleY(0)} .faq-q[aria-expanded="true"] .mark::before{background:var(--ink)} /* .55s, not .38s: at hover speed the old timing snapped, and the snap is more noticeable on the way out than on the way in. Same ease-out curve - it keeps most of its travel early, so the panel still feels responsive to the pointer rather than laggy, it just settles instead of stopping. */ .faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.22,1,.36,1)} .faq-item.open .faq-a{grid-template-rows:1fr} /* The question carries 4px of inset from its button padding; the answer had none, so every answer sat 4px left of the question above it. */ .faq-a > div{overflow:hidden;padding-inline:4px} .faq-a p{font-size:16.6px;line-height:1.8;color:var(--slate);margin:0 0 clamp(18px,2vw,26px)} .faq-a p + p{margin-top:1.05em} .faq-a a{color:var(--ink);border-bottom:1px solid var(--bronze);text-decoration:none} @media (prefers-reduced-motion:reduce){ .faq-a{transition:none} .faq-q .mark{transition:none} } /* ── Contact ─────────────────────────────────────────────────────────────── The Contact page IS the CTA, so it carries no closing section. */ .ct-grid{ display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr); gap:clamp(30px,4.4vw,64px);align-items:start; } .ct-side h2{margin-bottom:.55em} .ct-rows{margin:0;padding:0;list-style:none;border-top:1px solid rgba(139,115,85,.28)} .ct-rows li{padding:clamp(15px,1.8vw,21px) 0;border-bottom:1px solid rgba(139,115,85,.28)} .ct-lab{ display:block;font:600 11px/1 var(--font-b);letter-spacing:.17em;text-transform:uppercase; color:var(--muted);margin-bottom:9px; } .ct-val,.ct-rows a{ font:500 16.4px/1.6 var(--font-b);color:var(--ink);text-decoration:none; display:inline-flex;align-items:center;min-height:44px; } .ct-rows a{transition:color .22s} .ct-rows a:hover{color:var(--bronze-dk)} .ct-val{display:block;min-height:0} .ct-hours{display:flex;flex-wrap:wrap;gap:4px 18px;font:500 16px/1.7 var(--font-b);color:var(--ink)} .ct-hours dt{font-weight:600;color:var(--slate);margin:0;flex:0 0 auto} .ct-hours dd{margin:0} .ct-card{ background:#fff;border:1px solid rgba(139,115,85,.24); padding:clamp(24px,3vw,40px); box-shadow:0 26px 60px -46px rgba(31,31,35,.7); } .ct-card h2{font-size:clamp(1.32rem,2.2vw,1.72rem);margin-bottom:.6em} .ct-note{font:500 13.5px/1.6 var(--font-b);color:var(--muted);margin-top:16px;text-align:center} @media (max-width:860px){ .ct-grid{grid-template-columns:1fr} } /* ── Blog ────────────────────────────────────────────────────────────────── The reading column again - the blog is not second-class. */ .blog-list{max-width:var(--col);margin:0 auto} .blog-item{padding:clamp(28px,3.4vw,44px) 0;border-bottom:1px solid var(--hair)} .blog-item:first-child{padding-top:0} .blog-meta{font:600 11px/1 var(--font-b);letter-spacing:.17em;text-transform:uppercase;color:var(--muted)} .blog-card__title{ font-family:var(--font-d);font-weight:400;font-size:clamp(1.34rem,2.4vw,1.84rem); line-height:1.18;letter-spacing:.004em;margin:13px 0 12px; } .blog-card__title a{color:var(--ink);text-decoration:none;transition:color .22s} .blog-card__title a:hover{color:var(--bronze-dk)} .blog-item p{font-size:16.6px;line-height:1.8;color:var(--slate);margin:0} /* The intro is real paragraphs now, so it needs paragraph spacing - and only BETWEEN them, so the last one still sits tight to "Continue reading". */ .blog-intro p + p{margin-top:.9em} .blog-thumb{display:block;margin:0 0 clamp(18px,2.2vw,26px);background:var(--bone-dp); aspect-ratio:16/9;overflow:hidden} .blog-thumb img{width:100%;height:100%;object-fit:cover;display:block; transition:transform .7s cubic-bezier(.22,1,.36,1)} .blog-thumb:hover img{transform:scale(1.03)} @media (prefers-reduced-motion:reduce){.blog-thumb img{transition:none}.blog-thumb:hover img{transform:none}} .blog-more{ display:inline-flex;align-items:center;gap:9px;margin-top:16px;min-height:44px; font:600 12px/1 var(--font-b);letter-spacing:.15em;text-transform:uppercase; color:var(--ink);text-decoration:none;border-bottom:1px solid var(--bronze); transition:color .22s,border-color .22s; } .blog-more:hover{color:var(--bronze-dk);border-color:var(--bronze-dk)} .blog-nav{margin-top:clamp(34px,4vw,52px)} .blog-nav ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;justify-content:center} .blog-nav a,.blog-nav span{ display:inline-flex;align-items:center;justify-content:center; min-width:44px;min-height:44px;padding:0 12px; border:1px solid var(--key);text-decoration:none;color:var(--ink); font:600 13px/1 var(--font-b); } .blog-nav .current{background:var(--ink);color:var(--bone);border-color:var(--ink)} .post-body{max-width:680px;margin:0 auto} .post-back{ display:inline-flex;align-items:center;gap:8px;min-height:44px; font:600 11.5px/1 var(--font-b);letter-spacing:.15em;text-transform:uppercase; color:var(--muted);text-decoration:none;transition:color .22s; } .post-back:hover{color:var(--bronze-dk)} .post-body h1{ font-family:var(--font-d);font-weight:400;font-size:clamp(1.72rem,3.4vw,2.6rem); line-height:1.12;letter-spacing:.004em;margin:16px 0 0; } .post-body > p,.post-body li{font-size:18px;line-height:1.82;color:var(--slate)} .post-body > p + p{margin-top:1.15em} .post-body h2{font-family:var(--font-d);font-weight:400;font-size:clamp(1.3rem,2.2vw,1.68rem); line-height:1.2;margin:1.9em 0 .5em;color:var(--ink)} .post-body blockquote{ margin:1.7em 0;padding:0 0 0 clamp(18px,2.4vw,30px); border-left:0; /* no left-stripe accents */ font-family:var(--font-b);font-style:italic;font-weight:600; font-size:clamp(1.16rem,2vw,1.42rem);line-height:1.42;color:var(--ink); } .post-body blockquote::before{ content:"";display:block;width:54px;height:1px;background:var(--bronze);margin:0 0 18px; } .post-body > p:first-of-type::first-letter{ font-family:var(--font-d);font-weight:400;float:left; font-size:3.35em;line-height:.82;padding:.06em .1em 0 0;color:var(--ink); } /* ── 404 ─────────────────────────────────────────────────────────────────── The one page the design is allowed to wink. Never blame the visitor. */ .nf{padding:clamp(48px,7vw,96px) 0 clamp(56px,7vw,104px);background:var(--bone)} .nf-in{max-width:640px;margin:0 auto;padding:0 var(--gut);text-align:left} .nf h1{font-family:var(--font-d);font-weight:400;font-size:clamp(1.88rem,3.85vw,3rem); line-height:1.1;letter-spacing:.004em;margin:0 0 .55em} .nf p{font-size:17px;line-height:1.8;color:var(--slate)} .nf p + p{margin-top:1.05em} .nf-act{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,2vw,26px);margin-top:clamp(28px,3.2vw,38px)} .nf-tel{ font:600 15.5px/1 var(--font-b);color:var(--ink);text-decoration:none; padding:6px 0; display:inline-flex;align-items:center;min-height:44px;transition:color .22s; } .nf-tel:hover{color:var(--bronze-dk)} /* ── legal pages: long documents, never faded in ──────────────────────────── */ body.page-privacy-policy .rv, body.page-privacy-policy .fade-in, body.page-terms-and-conditions .rv, body.page-terms-and-conditions .fade-in{ opacity:1 !important;transform:none !important;animation:none !important;transition:none !important; } body.page-privacy-policy .service-body h2, body.page-terms-and-conditions .service-body h2{font-size:clamp(1.24rem,2vw,1.56rem)} body.page-privacy-policy .service-body > .svc-block + .svc-block, body.page-terms-and-conditions .service-body > .svc-block + .svc-block{margin-top:clamp(26px,3vw,40px)} /* ── WPForms: the child's ONLY job is the --form-* tokens in style.css. These are layout-only, no colour, so the fleet-wide parent hook still owns every visual decision. ──────────────────────────────────────────────────── */ .wpforms-container{max-width:none} .wpforms-container form{margin:0} .ct-card .wpforms-container,.fin-card .wpforms-container{margin:0} /* ── scroll-reveal safety net ────────────────────────────────────────────── GROUP 2 only: elements that never animate but must never be stranded if JS fails. Below-fold .rv elements are deliberately NOT here - forceVisible would paint them before the reader reaches them and kill the reveal. Their fallback is the 8s setTimeout in client.js. */ @keyframes forceVisible{ to{opacity:1;transform:none} } .inner-content,.ct-grid,.faq-wrap,.blog-list,.post-body{ animation:forceVisible .01s 8s forwards; } .rv.in{opacity:1;transform:none;animation:none} /* ── mobile responsive invariants - DO NOT REMOVE (validator Check 15) ───── */ html,body{overflow-x:clip} @media (max-width:768px){ .brand{min-width:0;flex:1 1 auto} .brand-text,.brand-text small{white-space:normal;min-width:0} .burger,.mobile-toggle{flex-shrink:0;margin-left:auto} .nav > li{white-space:normal} .nav-links > li{white-space:normal} .sub-menu,.sub-menu li,.sub-menu a, .dropdown-menu,.dropdown-menu li,.dropdown-menu a{white-space:normal} } /* the drawer's submenu
    carries BOTH class families, because which walker emits it has flipped site-by-site across the fleet. Target both, always. */ .nav .sub-menu,.nav .dropdown-menu, .mobile-nav-links,.mobile-nav-links ul, .mobile-nav-links .sub-menu,.mobile-nav-links .dropdown-menu{ list-style:none !important; } .nav .sub-menu li,.nav .dropdown-menu li, .mobile-nav-links li, .mobile-nav-links .sub-menu li,.mobile-nav-links .dropdown-menu li{list-style:none !important} /* Parent dropdown rows are wayfinding, not destinations. pointer-events:none keeps the click from jumping to "#" while :hover on the
  • still opens the menu and the anchor stays keyboard-focusable. Desktop only - the drawer needs the very same anchor to be tappable. */ @media (min-width:1301px){ .nav > li.has-sub > a,.nav > li.dropdown > a{cursor:default} } /* ── touch-device accessibility floor (validator Check 18) ───────────────── NEVER put `display` in here - it resurrects elements the mobile block hid. The mockup's own floor block is above; this adds the two families it did not name: the UA-default