/* ========================================================= ATON CLINIC - Design System Warm · professional · reliable · personalized The brand gold stays, but it is used as a quiet accent rather than a luxury signal. Soft edges, warm neutrals, sentence case, and plenty of air do the reassuring. ========================================================= */ :root{ /* ---- Brand: sampled from the Aton Clinic logo + concept artwork ---- */ /* the ramp is sampled from Logo.jpg itself: its mid-tone gold sits at hue ~40deg with ~85% saturation, its highlights lift to ~46deg and its shadows drop to ~38deg. Lightness is unchanged at every step from the previous ramp, so contrast and legibility are at least as good as before - only the hue and the saturation moved, to match the logo's richer gold. */ --gold-light:#F2D05F; --gold:#DE9A12; --gold-deep:#876606; /* the logo's gold only exists as a bright metallic sweep - flat colour at a text-safe darkness always reads bronze. So filled buttons carry the sweep itself, with the dark ink label the logo's own gold demands. */ /* brightened 2026-09-08 by request: the softened ramp (#EFCE73 -> #D3A038) read as antique brass and receded against the ivory page. Saturation is pushed up and the low stop lifted out of brown, so the pill reads as a clean, bright gold that catches the eye. The sweep stays narrow, so it is brighter without going back to the hard metallic edge. */ --gold-metal:linear-gradient(160deg,#FFDE6B 0%,#F7C21F 48%,#EDA606 100%); --gold-metal-hover:linear-gradient(160deg,#FFD24E 0%,#F0B50C 48%,#DE9800 100%); --gold-line:linear-gradient(90deg,transparent,var(--gold),transparent); --white:#FFFFFF; --ivory:#F4EDE4; --ivory-soft:#FBF7F1; /* a shade deeper than --ivory, so the CTA band reads as its own panel */ --cream:#F2E6D2; /* warm charcoal rather than near-black - reads human, not corporate */ --ink:#332C24; --ink-soft:#4A4239; --body:#5F574C; --muted:#665F57; --line:#E9E1D4; --line-gold:rgba(222,154,18,.26); --dark:#2B241B; /* ---- Type: Manrope for display, Karla for everything functional ---- */ --f-ui:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; --f-display:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; /* ---- Spacing scale (4px base) - nothing off this scale ---- */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:40px; --s-8:48px; --s-9:64px; --s-10:80px; --s-11:96px; --s-12:120px; --s-13:160px; --container:1320px; /* the max shrinks 48 -> 40 so the page runs wider; the 24px floor keeps small screens off the edge */ --gutter:clamp(var(--s-6),4vw,var(--s-7)); /* was clamp(96px,11vw,160px), which put 317px between sections at 1440 and read as a hole rather than a break. Roughly a third off, floor and ceiling both stepped down one place on the scale. */ --section-y:clamp(var(--s-9),6.5vw,var(--s-11)); --radius:10px; --radius-lg:18px; --radius-pill:999px; --shadow-soft:0 24px 64px -48px rgba(46,40,34,.34); --ease:cubic-bezier(.22,.61,.36,1); } /* ---------- Reset ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:120px} body{ margin:0; background:var(--white); color:var(--body); font-family:var(--f-ui); font-size:17.5px; line-height:1.8; font-weight:400; letter-spacing:0; font-feature-settings:"kern" 1,"liga" 1; -webkit-font-smoothing:antialiased; /* is deliberately left `visible` so this propagates to the viewport: that is also what lets the drawer's scroll lock work, and it keeps the sticky header working (overflow on would break both). */ overflow-x:clip; } img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} ul,ol{margin:0;padding:0;list-style:none} p{margin:0 0 var(--s-4);text-wrap:pretty} p:last-child{margin-bottom:0} h1,h2,h3,h4{ margin:0;font-weight:400;color:var(--ink);font-family:var(--f-display); line-height:1.2;letter-spacing:0;text-wrap:balance; } li{text-wrap:pretty} table{border-collapse:collapse;width:100%} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} :focus-visible{outline:1px solid var(--gold-deep);outline-offset:4px} .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)} .center{text-align:center} .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* ---------- Typography helpers ---------- */ .eyebrow{ font-family:var(--f-ui); font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase; line-height:1.55; color:var(--gold-deep);margin:0 0 var(--s-4); } /* Aurae marks each section label with a small dot. It hangs off the first line rather than the middle of the block, so a two-line label reads correctly; the offset centres the 7px dot in a 1.55em line box. */ .eyebrow--dot{display:inline-flex;align-items:flex-start;gap:var(--s-3)} .eyebrow--dot::before{ content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--gold); /* not rhythm: 7px is the dot's own diameter, used to centre it on line one */ margin-top:calc((1.55em - 7px) / 2); } /* sized so the mark reads as a superscript in both the serif and the sans */ .tm{font-size:.58em;vertical-align:.48em;letter-spacing:0;font-weight:inherit} .h2{ font-size:clamp(35px,4.2vw,54px); font-weight:400;letter-spacing:0;line-height:1.16; } .lead{ font-size:clamp(19px,1.7vw,22px);color:var(--ink-soft);font-weight:400; line-height:1.6;text-wrap:balance; } /* ---- Table of contents: the bordered, collapsible box from the source doc. Sits above the first section head, left-aligned and capped narrow so it reads as an index card rather than a content block. ---- */ .pgtoc{ max-width:420px;margin:0 0 var(--s-9); background:var(--white);border:1px solid var(--line);border-radius:var(--radius); } .pgtoc__sum{ display:flex;align-items:center;justify-content:space-between;gap:var(--s-4); padding:var(--s-5) var(--s-6);cursor:pointer;list-style:none; border-bottom:1px solid transparent; } .pgtoc__sum::-webkit-details-marker{display:none} .pgtoc[open] .pgtoc__sum{border-bottom-color:var(--line)} .pgtoc__t{font-family:var(--f-display);font-weight:700;font-size:20px;color:var(--ink)} .pgtoc__chev{ flex:none;width:12px;height:12px;border-right:2px solid var(--ink-soft); border-bottom:2px solid var(--ink-soft);transform:rotate(45deg) translate(-3px,-3px); transition:transform .2s ease; } .pgtoc[open] .pgtoc__chev{transform:rotate(-135deg) translate(-2px,-2px)} .pgtoc__list,.pgtoc__sub{list-style:none;margin:0;padding:0;counter-reset:toc} .pgtoc__list{padding:var(--s-5) var(--s-6) var(--s-6)} .pgtoc__list>li{counter-increment:toc} .pgtoc__list>li>a{display:block;font-weight:600;color:var(--ink)} .pgtoc__list>li>a::before{content:counter(toc) ". ";color:var(--muted);font-weight:400} .pgtoc__sub{margin-top:var(--s-3);padding-left:var(--s-5)} .pgtoc__sub li{counter-increment:toc;margin-top:var(--s-2)} .pgtoc__sub li::before{content:"1." counter(toc) " ";color:var(--muted);font-size:15px} .pgtoc__sub a{color:var(--body);font-size:16px} .pgtoc a{text-decoration:none} .pgtoc a:hover,.pgtoc a:focus-visible{color:var(--gold-deep);text-decoration:underline} @media (max-width:640px){ .pgtoc{max-width:none;margin-bottom:var(--s-8)} .pgtoc__sum{padding:var(--s-4) var(--s-5)} .pgtoc__list{padding:var(--s-4) var(--s-5) var(--s-5)} } .sechead{max-width:700px;margin:0 auto var(--s-10);text-align:center} .sechead .eyebrow--dot{justify-content:center} .sechead__lead{margin-top:var(--s-5);font-size:17.5px} /* wider so a long heading stays on one line; the lead paragraph is re-capped below */ .sechead--wide{max-width:960px} .sechead--wide .h2{text-wrap:nowrap} .sechead--wide .sechead__lead{max-width:700px;margin-inline:auto} /* About > "Why we practise this way": at the 700px default the paragraph broke to four lines with "term answer." alone on the last. 880px is wide enough that the 255 characters fit in three lines and too narrow for two; text-wrap:balance then evens the three out instead of leaving a short tail. */ /* a head that IS the whole section clears 80px for content that is not there */ .sechead:only-child{margin-bottom:0} .sechead--lead-wide{max-width:880px} .sechead--lead-wide .sechead__lead{text-wrap:balance} /* Jennie, 2026-09-07: the modifier was `text-wrap:nowrap` so a short head kept its emphasis inline. The long "Why we do it" heads then ran off the page edge, so it now wraps and balances instead: the emphasis still never gets a row to itself, but a head too wide for the column breaks into even lines rather than overflowing. The name is kept because nineteen pages reference it. */ .h2--oneline{text-wrap:balance;overflow-wrap:break-word} .h2--oneline em{display:inline} /* Su, 2026-09-17 r12: a short "Overview" head (5-7 words) should read as ONE line, the way "Testing Options" already does. `h2--oneline` only balances the wrap - what forced the break was the 880px cap on the header itself, so the header is released to the full container and the head asked not to wrap. The lead paragraph keeps its 880px measure underneath. Below 1180px there is no longer room for these heads on one line, so they balance over two again. */ @media (min-width:1180px){ .sechead--headline{max-width:none} .sechead--headline .h2{white-space:nowrap} .sechead--headline .sechead__lead{max-width:880px;margin-inline:auto} } .sechead--row{ max-width:none;display:flex;align-items:flex-end;justify-content:space-between; gap:var(--s-6);text-align:left;flex-wrap:wrap; } /* ---------- Buttons - soft, sentence case, plain-spoken ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2); font-family:var(--f-ui);font-size:15px;font-weight:500; letter-spacing:.01em; /* borderless by request, 2026-09-07: buttons are defined by their fill alone. The padding is bumped by the 1px the border used to occupy so the pill keeps its old size. */ padding:calc(var(--s-3) + 1px) calc(var(--s-6) + 1px);border-radius:var(--radius-pill); border:0; transition:background .4s var(--ease),color .4s var(--ease); white-space:nowrap; } .btn--primary{background:var(--gold-metal);color:var(--dark)} .btn--primary:hover{background:var(--gold-metal-hover);color:var(--dark)} /* the secondary button used to be an outline, so with the border gone it needs a fill of its own or it collapses into a plain text link */ .btn--ghost{background:rgba(222,154,18,.13);color:var(--gold-deep)} .btn--ghost:hover{background:rgba(222,154,18,.22);color:var(--gold-deep)} .btn--lg{padding:var(--s-4) var(--s-7);font-size:16px} .link-more{ display:inline-flex;align-items:center;gap:var(--s-2); font-size:15px;font-weight:500;letter-spacing:0; color:var(--gold-deep);padding-bottom:var(--s-1); border-bottom:1px solid var(--line-gold); transition:gap .4s var(--ease),border-color .4s var(--ease); } .link-more:hover{gap:var(--s-3);border-color:var(--gold-deep)} /* ---------- Header ---------- */ .header{ position:sticky;top:0;z-index:60; background:rgba(255,255,255,.95); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:border-color .55s var(--ease); } .header.is-stuck{border-color:var(--line-gold)} .header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s-6);min-height:96px} .brand img{height:74px;width:auto} .nav{display:flex;align-items:center;gap:var(--s-8)} .nav__list{display:flex;align-items:center;gap:var(--s-6)} .nav__list > li > a{ position:relative;display:inline-block;padding:var(--s-2) 0; font-size:16px;font-weight:500;letter-spacing:.005em;color:var(--ink-soft); transition:color .45s var(--ease); } .nav__list > li > a::after{ content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold); transition:width .55s var(--ease); } .nav__list > li > a:hover{color:var(--gold-deep)} .nav__list > li > a:hover::after,.nav__list > li.is-active > a::after{width:100%} /* ---------- Services mega menu ---------- */ /* Now that Services has a page of its own, the label is a plain link and the chevron beside it is the control that opens the panel. Keeping both jobs on one anchor meant the script had to swallow the click to open the menu, and on a touch device or a narrow window the link could never be followed. */ .nav__has-sub{position:static;display:flex;align-items:center;gap:0} .nav__chev{ appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;margin:0; flex:none;display:grid;place-items:center; width:22px;height:22px;cursor:pointer;color:inherit; } /* the mark is a pseudo-element so the button can carry a real touch target without the borders growing into a 44px square */ .nav__chev::before{ content:"";width:6px;height:6px; border-right:1px solid currentColor;border-bottom:1px solid currentColor; rotate:45deg; /* The ink of this square is only its right and bottom edges, so its optical centre sits 2.1px off the box centre, on the side the arrow points to. Centring the box therefore is not centring the mark: each state has to be pushed back the other way, and the two states need opposite signs. */ translate:0 -2px; transition:rotate .4s var(--ease),translate .4s var(--ease); } .nav__has-sub:hover .nav__chev,.nav__chev:hover{color:var(--gold-deep)} .nav__has-sub:hover .nav__chev::before, .nav__has-sub:focus-within .nav__chev::before{rotate:225deg;translate:0 1px} .nav__mega{ position:absolute;top:100%;left:0;right:0; background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line); box-shadow:var(--shadow-soft); opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s; /* grace period: the panel only starts closing .25s after the pointer leaves, so a slow diagonal move from the label to a column does not lose it */ transition-delay:.25s; } /* .is-open is set by script for touch devices, which never fire :hover - on an iPad in landscape the desktop nav shows, so hover alone would strand it */ .nav__has-sub:hover .nav__mega, .nav__has-sub:focus-within .nav__mega, .nav__has-sub.is-open .nav__mega{opacity:1;visibility:visible;transform:none;transition-delay:0s} .nav__has-sub.is-open .nav__chev::before{rotate:225deg;translate:0 1px} /* The label sits mid-way up a 96px header while the panel opens at the header's bottom edge, so the strip between them belonged to nobody: the pointer left the item on the way down and the menu shut. Stretching the desktop nav items to the full header height makes the hover target reach the panel. */ @media (min-width:961px){ .nav{align-self:stretch;align-items:stretch} .nav__list{align-items:stretch} .nav__list > li{display:flex;align-items:center} .nav__cta{align-self:center} } /* A clean intro bar across the top, then three even service columns: screening (wider, two sub-columns) beside the two shorter groups. */ .nav__mega-inner{ width:100%;max-width:var(--container);margin-inline:auto;padding:var(--s-6) var(--gutter); } .nav__mega-head{ display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-5); padding-bottom:var(--s-4);margin-bottom:var(--s-5); border-bottom:1px solid var(--line);flex-wrap:wrap; } .nav__intro-copy{max-width:64ch} .nav__intro-t{ font-family:var(--f-display);font-size:21px;font-weight:400; color:var(--ink);margin:0 0 var(--s-1); } .nav__intro-d{font-size:14px;line-height:1.5;color:var(--body);margin:0} .nav__intro-cta{flex:none} .nav__cols{display:grid;grid-template-columns:2.5fr 1fr 1fr;gap:var(--s-4)} /* each service area is its own soft card */ .nav__group{ background:var(--ivory-soft);border:1px solid var(--line);border-radius:var(--radius-lg); padding:var(--s-6);transition:border-color .35s var(--ease),background .35s var(--ease); } .nav__group:hover{border-color:var(--line-gold);background:#fff} .nav__group-head{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-3)} .nav__group-icon{ flex:none;width:40px;height:40px;border-radius:var(--radius-pill); display:grid;place-items:center; color:var(--gold-deep);background:rgba(222,154,18,.1);border:1px solid var(--line-gold); } .nav__group-icon svg{width:21px;height:21px} .nav__group-t{ font-family:var(--f-ui);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase; color:var(--gold-deep);margin:0; } .nav__group-t a:hover{color:var(--ink)} .nav__group-d{ font-size:13.5px;line-height:1.45;color:var(--muted); margin:0 0 var(--s-3);padding-bottom:var(--s-3);border-bottom:1px solid var(--line); } .nav__group ul{display:grid;gap:0;align-items:start} .nav__group .nav__list-2{grid-template-columns:1fr 1fr;gap:0 var(--s-4)} .nav__group .nav__list-2 a{font-size:13.5px;white-space:nowrap} .nav__group ul a{ position:relative;display:block;font-size:14.5px;line-height:1.35;color:var(--body); padding:var(--s-1) 0 var(--s-1) var(--s-4);transition:color .35s var(--ease) } .nav__group ul a::before{ content:"";position:absolute;left:0;top:.62em;width:5px;height:5px; border-radius:50%;background:var(--gold-light); } .nav__group ul a:hover{color:var(--gold-deep)} .nav__group ul a:hover::before{background:var(--gold-deep)} /* icon geometry rather than layout spacing, so the 6px bar gap is off-scale */ .burger{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;gap:6px;align-items:flex-end} .burger span{display:block;height:1px;width:26px;background:var(--ink);transition:transform .55s var(--ease),opacity .35s var(--ease),width .55s var(--ease)} .burger span:nth-child(2){width:18px} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){width:26px;transform:translateY(-7px) rotate(-45deg)} .nav-scrim{position:fixed;inset:0;background:rgba(28,25,23,.42);z-index:55;opacity:0;transition:opacity .55s var(--ease)} .nav-scrim.is-open{opacity:1} /* ---------- Sections ---------- */ .section{padding-block:var(--section-y)} .section--ivory{background:var(--ivory-soft)} /* ---------- Hero - full-bleed cinematic ---------- */ .hero{ position:relative;isolation:isolate;overflow:hidden; display:flex;flex-direction:column; min-height:clamp(600px,84vh,900px); background:var(--ivory-soft); } .hero__media{position:absolute;inset:0;z-index:0} /* is inline by default, so it has to become a block or the image inside it has no height to resolve its 100% against */ .hero__media picture{display:block;width:100%;height:100%} /* --hero-pos lets one hero shift its framing without a specificity fight with the narrow-viewport override below (which reads --hero-pos-sm instead) */ .hero__media img{width:100%;height:100%;object-fit:cover;object-position:var(--hero-pos,70% center)} /* the homepage photo puts the pair on the right and plain wall on the left, so it sits further left than the default to keep that wall under the copy column */ .hero--home{--hero-pos:56% center} /* the hero dissolves into the section below rather than stopping at a hard edge */ .hero::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:var(--s-11);z-index:1; background:linear-gradient(180deg,rgba(251,247,241,0),var(--ivory-soft)); pointer-events:none; } /* Directional overlay: solid only behind the copy column, image reads clearly beyond */ .hero__veil{ position:absolute;inset:0; background:linear-gradient(to right, rgba(251,247,241,.82) 0%, rgba(251,247,241,.80) 30%, rgba(251,247,241,.62) 42%, rgba(251,247,241,.22) 56%, rgba(251,247,241,.04) 68%, rgba(251,247,241,0) 80%); } .hero__body{ position:relative;z-index:2;flex:1;display:flex;align-items:center; padding-block:clamp(var(--s-9),9vh,var(--s-12)) var(--s-8); } /* A label, three words, a rule, one line, one action. Nothing else. */ .hero__copy{max-width:min(520px,48%);animation:heroIn 1.4s var(--ease) both .05s} /* Su, 2026-09-17 r9: CDSA sets "(CDSA)" beside "Analysis", which makes that the widest line in the hero. This column is given the room to hold it unbroken. */ .hero__copy--wide{max-width:min(680px,58%)} /* the copy block is vertically centred, so opening this gap lifts the label and sets it apart from the 74px title. The extra nudge is a translate rather than more margin, so the label rises without dragging the title down too. */ .hero__copy .eyebrow{margin-bottom:var(--s-7);translate:0 -12px} .hero__title{ font-size:clamp(46px,5.4vw,74px);font-weight:400; letter-spacing:-.01em;line-height:1.08; } .hero__title em{display:block;font-style:normal;color:var(--gold-deep)} /* Jennie, 2026-09-08: the acronym is set at full title size, so it used to take a line of its own. Su, 2026-09-17 r9: she asked for it beside "Analysis" instead. It stays on that line as one unbreakable unit; the hero column widens for it below. */ .hero__title .abbr{white-space:nowrap} /* Su, 2026-09-17 r12: on myDNA the gold word belongs beside "myDNA", not on a line of its own - so the em goes inline and the pair is unbreakable. The rest of the title still breaks where its own
says. */ .hero__title--emline em{display:inline} .hero__title--emline .pair{white-space:nowrap} .hero__rule{ display:block;width:56px;height:1px;background:var(--gold); margin:var(--s-7) 0 var(--s-6);opacity:.7; } .hero__promise{ margin:0 0 var(--s-8); font-size:clamp(17px,1.4vw,19px);font-weight:400; line-height:1.7;color:var(--ink-soft); } .hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4) var(--s-8)} /* emblem on the left, its two lines set beside it */ .hero__badge{ margin:0;display:flex;align-items:center;gap:var(--s-3); font-size:14.5px;font-weight:500;letter-spacing:.005em;line-height:1.35; color:var(--ink-soft); } .hero__badge img{flex:none;height:42px;width:auto} @keyframes heroIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}} /* ---------- Accreditation strip (sits directly under the hero) ---------- */ /* a slim band tied to the About block rather than a section of its own, so it keeps tighter padding - but symmetric, or the logos sit off-centre in it */ .strip{background:transparent;padding-block:var(--s-9);border-top:0;border-bottom:1px solid var(--line)} .strip__intro{ margin:0 0 var(--s-7);text-align:center;font-size:15px;color:var(--muted); } /* ---------- About, after Aurae: label left / heading right, a ghost word behind, then copy + two staggered captioned images ---------- */ .about{position:relative;overflow:hidden;padding-bottom:clamp(48px,6vw,var(--s-10))} .about__in{position:relative;z-index:1} .about__top{ display:grid;grid-template-columns:1fr 1.15fr;gap:var(--s-8); align-items:start;margin-bottom:var(--s-9); } .about__t{ font-size:clamp(34px,4.4vw,58px);font-weight:400;line-height:1.12;margin:0; } /* the oversized word sitting behind the whole block */ .about__ghost{ position:absolute;left:50%;top:30%;translate:-50% 0;z-index:0; font-family:var(--f-display);font-size:clamp(140px,20vw,300px);line-height:1; color:rgba(222,154,18,.055);white-space:nowrap;pointer-events:none;user-select:none; } .about__grid{ position:relative;z-index:1; display:grid;grid-template-columns:.95fr 1.12fr 1fr; gap:clamp(var(--s-6),3.2vw,var(--s-8));align-items:start; } .about__copy{align-self:end;padding-bottom:var(--s-6)} .about__copy > p{max-width:38ch} /* these columns are grid items, so the paragraph's own 16px bottom margin does not collapse into this one - --s-5 lands the measured gap on the 40px every other "paragraph then button" pair on the site uses */ .about__copy .btn{margin-top:var(--s-5)} /* the "/About Aton" kicker, set to match .about__t exactly */ .about__copy .slash{ font-family:var(--f-display);font-size:clamp(34px,4.4vw,58px); font-weight:400;line-height:1.12;color:var(--ink);margin:0 0 var(--s-5); } /* the inset keeps both figures at the smaller size that was asked for while the figure itself still fills its grid track */ .about__fig{margin:0;display:grid;gap:var(--s-4);padding-inline:var(--s-7)} .about__fig img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius)} .about__fig figcaption strong{ display:block;font-family:var(--f-display);font-size:clamp(21px,1.9vw,25px); font-weight:400;color:var(--ink);line-height:1.25; } .about__fig figcaption span{display:block;font-size:15px;color:var(--muted);margin-top:var(--s-1)} /* nudged right so the gaps either side of it read evenly; translate rather than margin so the figure keeps its width */ .about__fig--a{translate:var(--s-5) 0} /* the second figure just sits lower than the first; both caption below image */ .about__fig--b{margin-top:var(--s-9)} .about__fig--b img{aspect-ratio:3/2} /* two-column variant: no section headline, one figure only */ .about__top--solo{grid-template-columns:1fr;margin-bottom:var(--s-7)} .about__grid--duo{grid-template-columns:1.02fr .98fr;gap:clamp(var(--s-7),4vw,var(--s-9))} .about__grid--duo .about__copy{align-self:center;padding-bottom:0} .about__grid--duo .about__copy > p{max-width:46ch} .about__grid--duo .about__copy > p + p{margin-top:var(--s-4)} .about__grid--duo .about__fig{padding-inline:0} .about__grid--duo .about__fig--a{translate:none} .btn__arrow{font-size:1.05em;line-height:1} .stats{ display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5); margin:var(--s-10) 0 0;padding-top:var(--s-7);border-top:1px solid var(--line); } .stat__k{font-family:var(--f-display);font-size:clamp(38px,3.8vw,50px);font-weight:400;letter-spacing:0;font-variant-numeric:lining-nums tabular-nums;color:var(--gold-deep);line-height:1} .stat__l{margin:var(--s-2) 0 0;font-size:14px;color:var(--muted);line-height:1.6} /* ---------- How we work - image beside the five DICE pillars as steps ---------- */ .howwork__head{ display:flex;align-items:flex-end;justify-content:space-between; gap:var(--s-6);flex-wrap:wrap;margin-bottom:var(--s-10); } .howwork__intro .eyebrow{margin-bottom:var(--s-4)} .howwork__cta{flex:none} /* About page: the intro paragraph sits in the head's right-hand slot, where the "Explore services" button used to be, instead of running full width beneath it. Baselines align because the head is already flex-end. */ .howwork__head--lead{align-items:flex-end} .howwork__lead{ flex:0 1 46ch;max-width:46ch;margin:0; color:var(--ink-soft);line-height:1.75; } /* below the two-column width the paragraph wraps under the heading and takes the full measure back, rather than being squeezed beside a 50px title */ @media (max-width:1000px){ .howwork__head--lead{align-items:flex-start} .howwork__lead{flex-basis:100%;max-width:64ch} } .howwork__body{ display:grid;grid-template-columns:0.92fr 1.08fr; gap:clamp(32px,5vw,var(--s-11));align-items:start; } /* the photo holds while the five steps scroll past it */ .howwork__aside{position:sticky;top:112px} .howwork__media{ position:relative;margin:0;border-radius:var(--radius-lg);overflow:hidden; box-shadow:var(--shadow-soft); /* the photo swaps between steps - a dark backing means the crossfade dips through the same tone as the overlay rather than flashing the ivory page */ background:#2b241b; } .howwork__media img{ display:block;width:100%;height:clamp(420px,58vh,560px);object-fit:cover; object-position:50% 38%; transition:opacity .28s ease; } .howwork__media.is-swapping img{opacity:0} /* inset hairline, the same device the concept figure uses */ .howwork__media::after{ content:"";position:absolute;inset:var(--s-3);pointer-events:none; border:1px solid rgba(255,255,255,.42);border-radius:calc(var(--radius-lg) - 6px); } /* readability shelf under the step marker - the lower third of this photo is a pale bench, so the base of the ramp has to carry most of the contrast */ .howwork__media::before{ content:"";position:absolute;inset:auto 0 0 0;height:58%;pointer-events:none; background:linear-gradient(to top, rgba(43,36,27,.93) 0%, rgba(43,36,27,.80) 18%, rgba(43,36,27,.42) 44%, rgba(43,36,27,.12) 70%, transparent 100%); } .howwork__now{ position:absolute;left:var(--s-6);right:var(--s-6);bottom:var(--s-7);z-index:2; display:flex;align-items:baseline;gap:var(--s-4);color:#fff; } .howwork__now-n{ font-family:var(--f-display);font-size:clamp(44px,4.6vw,64px);line-height:.9; font-variant-numeric:lining-nums tabular-nums;color:var(--gold-light); } .howwork__now-t{ font-family:var(--f-display);font-size:clamp(24px,2.2vw,32px);line-height:1.1; } .howwork__now-n,.howwork__now-t{transition:opacity .28s ease,transform .28s ease} .howwork__now.is-swapping .howwork__now-n, .howwork__now.is-swapping .howwork__now-t{opacity:0;transform:translateY(6px)} .howwork__bar{ position:absolute;left:var(--s-6);right:var(--s-6);bottom:var(--s-5);z-index:2; height:2px;background:rgba(255,255,255,.28);border-radius:2px;overflow:hidden; } .howwork__bar i{ display:block;height:100%;width:20%;background:var(--gold-light); transition:width .45s cubic-bezier(.4,0,.2,1); } .howwork__steps{display:flex;flex-direction:column} .wstep{ display:flex;gap:var(--s-6);align-items:flex-start; padding-block:clamp(24px,2.6vw,var(--s-8)); } .wstep + .wstep{border-top:1px solid var(--line)} .wstep:first-child{padding-top:0} .wstep:last-child{padding-bottom:0} .wstep__icon{ flex:none;width:56px;height:56px;border-radius:var(--radius-pill); display:grid;place-items:center; color:var(--gold-deep);background:rgba(222,154,18,.09); border:1px solid var(--line-gold); transition:background .35s ease,color .35s ease,border-color .35s ease; } .wstep__icon svg{width:28px;height:28px} /* the step being read lights up in step with the marker on the photo */ .wstep.is-now .wstep__icon{ background:var(--gold-deep);border-color:var(--gold-deep);color:#fff; } .wstep.is-now .wstep__t{color:var(--gold-deep);transition:color .35s ease} .wstep__t{ font-family:var(--f-display);font-size:clamp(24px,2vw,30px); line-height:1.15;margin:0 0 var(--s-2); } .wstep__p{margin:0;font-size:16.5px;line-height:1.75;color:var(--body)} /* per-step photo: hidden while the sticky photo beside the list is doing the job, shown once the layout stacks (see the 960px block) */ .wstep__photo{display:none} /* ---------- Our approach - framed concept chart beside a grid of the eight focus areas ---------- */ /* the chart sets the height; the cards stretch to meet it so both columns finish on the same line */ .approach{ display:grid;grid-template-columns:0.95fr 1.15fr; gap:clamp(24px,3vw,var(--s-8));align-items:stretch; } .approach__media{ margin:0;position:relative;border-radius:var(--radius-lg);overflow:hidden; background:var(--ivory-soft);border:1px solid var(--line); display:grid;place-items:center;padding:clamp(16px,2vw,var(--s-6)); } .approach__media::after{ content:"";position:absolute;inset:var(--s-4); border:1px solid var(--line-gold);border-radius:calc(var(--radius-lg) - 6px); pointer-events:none; } .approach__media img{width:100%;height:auto;max-height:100%;object-fit:contain} .approach__grid{ display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr; gap:clamp(12px,1.4vw,var(--s-4)); } /* icon in its own column with the label and line beside it, so each card reads as one horizontal unit rather than a stack */ .acard{ display:grid;grid-template-columns:auto 1fr; column-gap:var(--s-4);row-gap:var(--s-1);align-content:center; padding:clamp(16px,1.6vw,var(--s-5)); background:var(--white);border:1px solid var(--line);border-radius:var(--radius); transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease); } .acard:hover{transform:translateY(-3px);border-color:var(--line-gold);box-shadow:var(--shadow-soft)} .acard__icon{ grid-column:1;grid-row:1 / span 2;align-self:center; /* 2026-09-07: badge 58 -> 76px on Jennie's second pass; the glyph inside grows with it so the icon, not the circle, is what got bigger */ width:76px;height:76px;flex:0 0 76px;border-radius:var(--radius-pill); display:grid;place-items:center;line-height:0; color:var(--gold-deep);background:rgba(222,154,18,.09);border:1px solid var(--line-gold); } .acard__icon svg{width:44px;height:44px;display:block} /* supplied brand icons come as gold WebP art, trimmed to their artwork and re-centred on a square canvas, so contain-fitting a square box centres them exactly and every icon reads at the same optical size */ .acard__icon img{width:48px;height:48px;object-fit:contain;display:block} .acard h3{ grid-column:2;grid-row:1; font-family:var(--f-display);font-size:clamp(21px,1.6vw,24px);line-height:1.15;margin:0; } .acard p{grid-column:2;grid-row:2;margin:0;font-size:15px;line-height:1.6;color:var(--body)} /* ---------- Services, after Aurae: a split header, then one row per area that opens to reveal everything inside it ---------- */ .svc-head{ display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,5vw,var(--s-10)); align-items:stretch;margin-bottom:var(--s-10); } .svc-head__t{ font-size:clamp(32px,3.8vw,48px);font-weight:400;line-height:1.16;margin-bottom:var(--s-5); } /* Aurae mixes an upright and an italic cut in the same heading */ .svc-head__t em{font-style:italic;color:var(--gold-deep)} .svc-head__d{max-width:46ch;margin-bottom:var(--s-7)} /* Su, 2026-09-15: the Overview points now sit in the copy column as a .deflist instead of a card row underneath, so the list is the last thing in the column */ .svc-head__copy .deflist{margin-bottom:0} /* that margin existed to clear the card row underneath; with nothing after it the section ended on a band of empty space */ .svc-head:last-child{margin-bottom:0} /* the figure takes its height from the text column beside it, so the image lines up top (with the eyebrow) and bottom (with the button) */ .svc-head__media{position:relative;margin:0;min-height:340px} /* radius on the image, not the figure - the badge has to overhang the edge */ .svc-head__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:var(--radius-lg)} /* the circular stat that overlaps the image */ .svc-head__badge{ position:absolute;left:calc(var(--s-6) * -1);bottom:var(--s-7); display:grid;place-items:center;text-align:center; width:132px;height:132px;border-radius:50%; background:var(--cream);border:1px solid var(--line-gold); font-size:13px;line-height:1.35;color:var(--ink-soft);padding:var(--s-3); } .svc-head__badge strong{ display:block;font-family:var(--f-display);font-size:34px;font-weight:400; color:var(--gold-deep);line-height:1;margin-bottom:var(--s-1); } .rows{border-top:1px solid var(--line)} .row{border-bottom:1px solid var(--line)} .row summary{ list-style:none;cursor:pointer;position:relative; display:grid;grid-template-columns:auto 1.15fr 1.35fr auto auto; align-items:center;gap:var(--s-6); padding:var(--s-7) 0; transition:color .3s var(--ease); } .row summary::-webkit-details-marker{display:none} .row__n{ font-family:var(--f-display);font-size:17px;font-variant-numeric:lining-nums tabular-nums; color:var(--gold); } .row__name{font-family:var(--f-display);font-size:clamp(24px,2.4vw,32px);color:var(--ink);line-height:1.15} .row__tag{font-size:15.5px;color:var(--muted)} /* every row is its own grid, so this column has to be a fixed width - left on `auto` it sizes to its own text ("13 tests" vs "5 therapies") and shifts the flexible columns, which knocks the tags out of line from row to row */ .row__count{ font-size:14px;color:var(--gold-deep);white-space:nowrap; min-width:92px;text-align:right; } .row__mark{ position:relative;width:34px;height:34px;border-radius:50%; border:1px solid var(--line-gold);flex:none; transition:background .3s var(--ease),border-color .3s var(--ease); } .row__mark::before,.row__mark::after{ content:"";position:absolute;left:50%;top:50%;background:var(--gold-deep); translate:-50% -50%;transition:opacity .3s var(--ease),background .3s var(--ease); } .row__mark::before{width:11px;height:1px} .row__mark::after{width:1px;height:11px} .row[open] .row__mark::after{opacity:0} .row[open] .row__mark{background:var(--gold-deep);border-color:var(--gold-deep)} .row[open] .row__mark::before{background:#fff} .row summary:hover .row__name{color:var(--gold-deep)} .row summary:hover .row__mark{border-color:var(--gold)} .row__body{padding:0 0 var(--s-8);display:grid;grid-template-columns:0.8fr 2.2fr;gap:var(--s-8)} .row__d{margin:0;font-size:16.5px;line-height:1.8;color:var(--ink-soft)} .row__list{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3) var(--s-6);align-items:start} .row__list li{ position:relative;padding-left:var(--s-5); font-size:15px;line-height:1.5;color:var(--body); } .row__list li::before{ content:"";position:absolute;left:0;top:.62em;width:5px;height:5px; border-radius:50%;background:var(--gold-light); } .row__fig{grid-column:1;margin:var(--s-5) 0 0} .row__fig img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)} .row__body .link-more{grid-column:2;margin-top:var(--s-2)} /* ---------- Enquiry: contact details as an aside beside the form ---------- */ .contact-grid{ display:grid;grid-template-columns:0.86fr 1.14fr; gap:clamp(32px,4.5vw,var(--s-11));align-items:start; } .contact-aside__lead{margin-top:var(--s-5);margin-bottom:var(--s-8);max-width:40ch} /* homepage: the address / hours / WhatsApp block was removed from the aside, so the lead is the last thing in the column and needs no trailing gap */ .contact-aside--lean .contact-aside__lead{margin-bottom:0;max-width:32ch} /* the lean aside sits top-aligned with the form card beside it: the eyebrow starts level with the card's top edge, so the two columns share one line */ @media (min-width:961px){ .contact-grid > .contact-aside--lean{align-self:start} } /* two by two rather than one long column, so the details sit beside the form card instead of running a long way past its foot */ .contact-list{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-7) var(--s-5);align-items:start} .contact-item{display:flex;gap:var(--s-4);align-items:flex-start} .contact-item__icon{ flex:none;width:36px;height:36px;border-radius:var(--radius-pill); display:grid;place-items:center; color:var(--gold-deep);background:rgba(222,154,18,.09);border:1px solid var(--line-gold); } .contact-item__icon svg{width:18px;height:18px} /* the social circles sit one level down from the row icon, so they are stepped smaller than it. Scoped here, since the footer set stays at its own size. */ .contact-item .social a{width:30px;height:30px} .contact-item .social svg{width:15px;height:15px} .contact-item__t{ font-family:var(--f-ui);font-size:14px;font-weight:600;letter-spacing:.005em; color:var(--gold-deep);margin-bottom:var(--s-2); } .contact-item__link,.contact-item__p{ display:block;margin:0;color:var(--ink-soft);line-height:1.8;font-size:16px; } .contact-item__link{transition:color .4s var(--ease)} .contact-item__link:hover{color:var(--gold-deep)} .contact-item__muted{color:var(--muted);font-size:15px} .enquiry__form{ background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg); box-shadow:var(--shadow-soft); padding:clamp(24px,2.6vw,var(--s-7)); } /* two fields to a row now the card is wider */ .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s-5)} .field--full{grid-column:1 / -1} .form__submit{text-align:center;margin-top:var(--s-2)} .field{margin-bottom:var(--s-4)} .field label{ display:block;font-size:14.5px;font-weight:500;color:var(--ink);margin-bottom:var(--s-2); } .field__opt{font-weight:400;color:var(--muted)} .field input,.field select,.field textarea{ width:100%;font:inherit;font-size:16px;color:var(--ink); background:var(--ivory-soft); border:1px solid var(--line);border-radius:var(--radius); padding:var(--s-3) var(--s-4); transition:border-color .3s var(--ease),background .3s var(--ease); } .field textarea{resize:vertical;min-height:84px} .field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:.7} .field input:focus,.field select:focus,.field textarea:focus{ outline:none;background:#fff;border-color:var(--gold); } .field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#A6402A} .field__err{margin:var(--s-2) 0 0;font-size:14px;color:#8C3520} .form__note{margin:var(--s-4) 0 0;font-size:14px;color:var(--muted);line-height:1.6} .form__status{margin:0;font-size:15px;color:var(--gold-deep)} .form__status:not(:empty){margin-top:var(--s-3)} /* ---------- Concern chips: one tap fills the topic and opening line. Kept compact so they read as a quiet quick-pick, not a second form ---------- */ .chips{margin-bottom:var(--s-6)} .chips__q{ font-family:var(--f-ui);font-size:14px;font-weight:600;letter-spacing:.005em; color:var(--gold-deep);margin:0 0 var(--s-3); } .chips__list{display:flex;flex-wrap:wrap;gap:var(--s-2)} .chip{ font-family:var(--f-ui);font-size:13.5px;font-weight:500;line-height:1.2;color:var(--ink-soft); /* borderless like the rest of the buttons - the fill is deepened from --ivory-soft so the chip still separates from the panel behind it */ padding:calc(var(--s-2) + 1px) calc(var(--s-4) + 1px);border-radius:var(--radius-pill); background:var(--ivory);border:0; transition:background .3s var(--ease),color .3s var(--ease); } .chip:hover{background:rgba(222,154,18,.16);color:var(--ink)} .chip.is-on{background:var(--gold-deep);color:#fff} /* ---------- FAQ - the ask stays put on the left while the questions scroll ---------- */ .faq{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(40px,5vw,var(--s-11));align-items:start} .faq__aside{position:sticky;top:112px} .faq__t{margin-bottom:var(--s-5)} .faq__lead{margin:0 0 var(--s-7);max-width:34ch;color:var(--ink-soft)} /* questions are numbered, matching the 01./02. device used in services */ .faq__list{counter-reset:faq} .faq__item{border-bottom:1px solid var(--line)} .faq__item:first-child{border-top:1px solid var(--line)} .faq__item summary{ list-style:none;cursor:pointer;position:relative; display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:var(--s-5); padding:var(--s-6) 0; /* Su, 2026-09-15: was clamp(21px,1.9vw,25px) - too big against the rest of the page. Brought down to sit just under the .deflist headings she referenced. */ font-family:var(--f-display);font-size:clamp(17px,1.45vw,20px);font-weight:500;letter-spacing:0;color:var(--ink); transition:color .3s var(--ease); } .faq__item summary::-webkit-details-marker{display:none} .faq__item summary::before{ counter-increment:faq;content:counter(faq,decimal-leading-zero); font-size:15px;font-variant-numeric:lining-nums tabular-nums;color:var(--gold); } .faq__item summary:hover{color:var(--gold-deep)} /* a plus that becomes a minus, the same mark the services rows use */ .faq__item summary::after{ content:"";width:11px;height:11px;align-self:center; background: linear-gradient(var(--gold-deep),var(--gold-deep)) center/11px 1.5px no-repeat, linear-gradient(var(--gold-deep),var(--gold-deep)) center/1.5px 11px no-repeat; transition:rotate .35s var(--ease),opacity .35s var(--ease); } /* open: drop the upright bar so the plus reads as a minus */ .faq__item[open] summary::after{background-size:11px 1.5px,0 0} /* the indent is the numeral column's width, so answers line up under the question text rather than under its number - an alignment offset, not rhythm */ .faq__a{padding:0 var(--s-8) var(--s-7) calc(var(--s-5) + 22px)} .faq__a p{margin:0;max-width:68ch} .faq__a a{color:var(--gold-deep);border-bottom:1px solid var(--line-gold)} /* ---------- Programs - full-bleed photo cards with the label over a soft bottom gradient ---------- */ .programs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(var(--s-5),2.4vw,var(--s-6))} .program{ position:relative;display:flex;overflow:hidden; border-radius:var(--radius-lg);min-height:clamp(420px,40vw,520px); box-shadow:var(--shadow-soft);isolation:isolate; } .program__img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2; transition:transform 1.4s var(--ease); } .program:hover .program__img{transform:scale(1.05)} /* darken only the lower half so the photo stays clearly visible up top */ .program::after{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(to top, rgba(31,25,17,.92) 0%,rgba(31,25,17,.72) 30%, rgba(31,25,17,.18) 58%,rgba(31,25,17,0) 78%); } .program__body{ margin-top:auto;padding:clamp(24px,2.4vw,var(--s-7));color:#fff; } .program__n{ display:block;font-family:var(--f-display);font-size:26px;font-weight:400; font-variant-numeric:lining-nums tabular-nums;color:var(--gold-light); margin-bottom:var(--s-3); } .program__t{color:#fff;font-size:clamp(24px,2vw,28px);letter-spacing:0;margin-bottom:var(--s-3)} .program__d{margin:0;font-size:15px;line-height:1.7;color:rgba(255,255,255,.86)} .programs + .center{margin-top:var(--s-10)} /* Accreditation bar: one line, equal cells, a short gold hairline between each */ .logos{ display:flex;flex-wrap:wrap;align-items:center;row-gap:var(--s-8); } .logos li{ flex:1 1 0;min-width:0;position:relative; display:flex;align-items:center;justify-content:center; padding-inline:var(--s-3); } .logos li + li::before{ content:"";position:absolute;left:0;top:50%;translate:0 -50%; width:1px;height:var(--s-6);background:var(--line-gold); } .logos img{ width:100%;height:52px;object-fit:contain;object-position:center; transition:transform .7s var(--ease); } .logos img:hover{transform:scale(1.03)} /* ---------- CTA band - a light warm panel, not a dark slab ---------- */ .cta{ position:relative;color:var(--body); /* the same rhythm as every other band, so this one doesn't sit tighter */ padding-block:var(--section-y); background:var(--cream); border-block:1px solid var(--line-gold); } /* white variant (contact page) */ .cta--plain{background:var(--white);border-block-color:var(--line)} /* ---- the one standard CTA, identical on every page (Su, 2026-09-15) ---- The clinic photograph runs as the band's own background instead of sitting in a panel beside the copy, so the invitation reads the same everywhere. The wash follows .quoteband: this site lays light over its photographs rather than a dark slab, which is also what keeps the ink type legible whatever part of the photo a given viewport crops to. */ .cta--band{ background: linear-gradient(to right, rgba(251,247,241,.90) 0%, rgba(251,247,241,.88) 42%, rgba(248,242,233,.76) 62%, rgba(244,237,228,.62) 100%), url("../img/cta-consultation-v2.jpg") center/cover no-repeat; border-block:1px solid var(--line-gold); } /* the copy sits in the open half of the photograph, so the consultation it shows is never covered by the type */ .cta__band{max-width:540px} .cta__band .cta__t{max-width:16ch;font-size:clamp(30px,3.2vw,44px)} .cta__band .cta__d{margin-top:var(--s-5);max-width:44ch} .cta__band .cta__actions{margin-top:var(--s-7)} /* stacked widths crop the photo to the figures, so the wash goes flat and strong and the copy centres on it */ @media (max-width:860px){ .cta--band{ background: linear-gradient(rgba(251,247,241,.90),rgba(244,237,228,.86)), url("../img/cta-consultation-v2.jpg") center/cover no-repeat; } .cta__band{max-width:560px;margin-inline:auto;text-align:center} .cta__band .cta__t{margin-inline:auto;max-width:20ch} .cta__band .cta__d{margin-inline:auto} .cta__band .cta__actions{justify-content:center} } @media (max-width:600px){ .cta__band .cta__t{font-size:27px;line-height:1.2} } /* one contained invitation card. The copy runs as a full-width row across the top and the photo follows beneath as a wide strip, so this reads differently from the image-beside-text split the About / How we work / Our approach sections already use */ .cta__card{ background:var(--white);border:1px solid var(--line-gold); border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-soft); } .cta__copy{padding:clamp(32px,3.6vw,var(--s-10))} /* the headline is set against its supporting line, both aligned on their last line so the paragraph finishes level with the foot of the heading */ .cta__head{ display:grid;grid-template-columns:1.02fr .98fr; gap:var(--s-6) clamp(var(--s-8),5vw,var(--s-10)); align-items:end;margin-top:var(--s-5); } .cta__t{color:var(--ink);font-size:clamp(32px,3.9vw,52px);font-weight:400;letter-spacing:0;line-height:1.1;max-width:15ch} .cta__d{margin:0;max-width:46ch;color:var(--ink-soft)} /* the buttons take their own row beneath both columns. Kept out of the right column because at 1024 the pair needs 435px and that column offers 393, so they wrapped to two rows there */ .cta__actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-8)} /* the three reassurances, read as a line of facts instead of pills stacked over the photo */ .cta__trust{ display:grid;grid-template-columns:repeat(2,auto);justify-content:start; gap:var(--s-3) var(--s-7); margin-top:var(--s-7);padding-top:var(--s-6);border-top:1px solid var(--line); } .cta__trust li{ display:flex;align-items:center;gap:var(--s-2); font-size:14.5px;font-weight:500;color:var(--ink); } .cta__trust li::before{ content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--gold); } /* ---- split variant: copy beside the photo, kept for the home page ---- The stacked band above is the default; this restores the original image-beside-text arrangement for cards carrying the modifier. */ .cta__card--split{display:grid;grid-template-columns:1.06fr .94fr} .cta__card--split .cta__copy{align-self:center} /* the head row collapses, so the heading and its paragraph stack as they did before rather than sitting side by side in a column that is now half as wide */ .cta__card--split .cta__head{display:block;margin-top:var(--s-5)} .cta__card--split .cta__t{font-size:clamp(32px,3.4vw,44px);line-height:1.16;max-width:18ch} .cta__card--split .cta__d{margin-top:var(--s-5)} .cta__card--split .cta__actions{margin-top:var(--s-7)} /* the photo fills its column rather than running as a fixed-ratio strip */ .cta__card--split .cta__panel{min-height:340px} .cta__card--split .cta__panel img{aspect-ratio:auto;height:100%;object-position:50% 50%} /* ---- overlap variant: the photo runs wide and the invitation floats on it ---- A third arrangement alongside the stacked band and the side-by-side split, so the three pages do not all use the same shape. The copy keeps its own white card, so the type never sits on the photograph. */ .cta__card--overlap{ position:relative;display:grid;grid-template-columns:minmax(0,1fr); background:none;border:0;border-radius:0;box-shadow:none;overflow:visible; } .cta__card--overlap .cta__panel{ grid-area:1/1;border-radius:var(--radius-lg);overflow:hidden; border:1px solid var(--line-gold); } /* the min-height guarantees the photo is always taller than the floating card, so the card can never grow to fill it */ .cta__card--overlap .cta__panel img{aspect-ratio:16/7;min-height:460px;object-fit:cover;object-position:50% 30%} /* centred on the photo's height and inset from its left edge */ .cta__card--overlap .cta__copy{ grid-area:1/1;z-index:1;justify-self:start;align-self:center; width:min(480px,44%);margin-inline-start:clamp(20px,3vw,48px); padding:clamp(26px,2.6vw,var(--s-7)); background:var(--white);border:1px solid var(--line-gold); border-radius:var(--radius-lg);box-shadow:var(--shadow-soft); } /* the head row collapses: there is no width here for a heading beside its paragraph, so the two stack inside the card */ .cta__card--overlap .cta__head{display:block;margin-top:var(--s-4)} .cta__card--overlap .cta__t{font-size:clamp(27px,2.4vw,38px);line-height:1.14;max-width:16ch} .cta__card--overlap .cta__d{margin-top:var(--s-4);font-size:16px} .cta__card--overlap .cta__actions{margin-top:var(--s-6)} /* the pair needs 435px at the full 48px side padding and the card offers 423, so the buttons wrapped to two rows, which grew the card until it swallowed the photo. Trimmed so they hold one line right down to where the layout stacks */ .cta__card--overlap .cta__actions .btn{padding-inline:var(--s-5)} /* the shelf is cut back to the free part of the photo, so it starts clear of the floating card rather than running underneath it */ .cta__card--overlap .cta__note{ left:auto;right:0;width:48%; border-left:1px solid var(--line-gold); border-top-left-radius:var(--radius-lg); font-size:clamp(18px,1.5vw,22px); } /* 1180 rather than 960: below this the card is wider than the photo is tall and its right edge reaches the quote shelf, so the float has to give way earlier than the page's usual tablet breakpoint */ @media (max-width:1180px){ /* no room to float at this width, so the card and the photo stack - but as ONE panel, not two detached boxes. The outer card takes the border, radius and shadow back, and the copy and photo sit inside it flush against each other */ .cta__card--overlap{ display:block; background:var(--white);border:1px solid var(--line-gold); border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-soft); } .cta__card--overlap .cta__copy{ width:auto;margin:0; background:none;border:0;border-radius:0;box-shadow:none; padding:clamp(28px,4.4vw,var(--s-9)); } .cta__card--overlap .cta__panel{border:0;border-radius:0} .cta__card--overlap .cta__panel img{min-height:0;aspect-ratio:16/9} .cta__card--overlap .cta__note{ left:0;right:0;width:auto;border-left:0;border-top-left-radius:0; } } /* phones: the stacked photo added a screen and a half of scrolling between the button and whatever follows, so the card is copy + button only here. Desktop and tablet keep the photo (requested 2026-09-02) */ @media (max-width:720px){ .cta__card--overlap .cta__panel{display:none} } @media (max-width:600px){ /* 4/3 leaves only 149px of photo above a 96px quote shelf on a 326px card, so the two faces all but vanish. Portrait gives them room, matching the stacked band's phone treatment */ .cta__card--overlap .cta__panel img{aspect-ratio:4/5} } /* the photo spans the full card as a wide strip beneath the copy, with the line the clinic is known for sitting on a solid shelf at its base */ .cta__panel{position:relative;margin:0} .cta__panel img{display:block;width:100%;aspect-ratio:16/5.4;object-fit:cover;object-position:50% 32%} .cta__note{ position:absolute;left:0;right:0;bottom:0;margin:0; background:rgba(255,255,255,.95);backdrop-filter:blur(10px); border-top:1px solid var(--line-gold); padding:var(--s-5) clamp(var(--s-5),2.4vw,var(--s-6)); font-family:var(--f-display);font-size:clamp(20px,1.8vw,24px); font-weight:400;letter-spacing:0;line-height:1.3;color:var(--gold-deep); } /* ---------- Footer - ivory so it separates from the white FAQ above ---------- */ .footer{background:var(--ivory);color:var(--body);padding-top:var(--section-y);font-size:15px;border-top:1px solid var(--line-gold)} .footer__inner{ display:grid;grid-template-columns:1.4fr 1fr 1.2fr 1.3fr;gap:var(--s-8) clamp(32px,4vw,var(--s-9)); padding-bottom:clamp(var(--s-8),6vw,var(--s-10)); } .footer__brand img{height:88px;width:auto} .footer__tag{margin-top:var(--s-5);font-family:var(--f-display);font-size:21px;font-weight:400;line-height:1.45;letter-spacing:0;color:var(--gold-deep);max-width:26ch} .footer__h{ font-family:var(--f-ui);font-size:14px;font-weight:600;letter-spacing:.005em; color:var(--ink);margin-bottom:var(--s-4); } .footer__col ul{display:grid;gap:var(--s-3)} .footer__col a{transition:color .45s var(--ease)} .footer__col a:hover{color:var(--gold-deep)} .footer address{font-style:normal;line-height:1.9} .footer__hours{margin-top:var(--s-4);color:var(--muted);line-height:1.9} .footer__bar{ display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap; padding-block:var(--s-6);border-top:1px solid var(--line-gold); font-size:14px; } .footer__bar p{margin:0} .footer__bar a:hover{color:var(--gold-deep)} /* ---------- Floating WhatsApp ---------- */ .wa-float{ position:fixed;right:var(--s-5);bottom:var(--s-5);z-index:70; width:52px;height:52px;border-radius:50%; display:grid;place-items:center; background:#25D366;border:1px solid #25D366; transition:background .55s var(--ease),border-color .55s var(--ease); } .wa-float:hover{background:#1DA851;border-color:#1DA851} .wa-float svg{width:26px;height:26px;fill:#fff;stroke:none} /* ---------- Reveal ---------- */ .reveal{opacity:0;transform:translateY(18px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)} .reveal.is-in{opacity:1;transform:none} /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width:1080px){ .nav__cols{grid-template-columns:1fr 1fr;gap:var(--s-7)} .nav__group--wide{grid-column:1 / -1} } @media (max-width:960px){ html{scroll-padding-top:96px} .header__inner{min-height:76px} .brand img{height:48px} .burger{display:flex;position:relative;z-index:59} /* backdrop-filter on the header makes it the containing block for any fixed descendant, which tethers the drawer to the header instead of the viewport. The drawer covers the screen here, so the blur buys nothing - drop it. */ .header{backdrop-filter:none;background:#fff} .nav{ position:fixed;top:0;right:0;z-index:58; overscroll-behavior:contain; width:min(86vw,360px);height:100dvh; background:#fff;border-left:1px solid var(--line); flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0; padding:var(--s-10) var(--s-6) var(--s-7);overflow-y:auto; transform:translateX(100%);transition:transform .6s var(--ease),visibility .6s; /* hidden when closed so the off-canvas drawer neither adds page width nor keeps 21 links in the keyboard tab order */ visibility:hidden; } .nav.is-open{transform:translateX(0);visibility:visible} .nav__list{flex-direction:column;align-items:stretch;gap:0} .nav__list > li > a{padding:var(--s-4) 0;font-size:16px;border-bottom:1px solid var(--line);display:block} .nav__list > li > a::after{display:none} /* In the drawer the label still navigates; the chevron beside it collapses the group so 21 items don't bury Contact Us. Link and button share one wrapping flex row and the expanded panel takes the full line below them - positioning the button absolutely instead would centre it against the whole open group rather than against its own row. */ .nav__has-sub{position:static;display:flex;flex-wrap:wrap;align-items:stretch} .nav__list > li.nav__has-sub > a{flex:1;padding-right:var(--s-4)} .nav__chev{ width:44px;height:auto;align-self:stretch; border-bottom:1px solid var(--line); /* the link's rule now stops short */ } /* a hover state is meaningless here and would fire on the way past */ .nav__has-sub:hover .nav__chev::before, .nav__has-sub:focus-within .nav__chev::before{rotate:45deg;translate:0 -2px} .nav__has-sub.is-open .nav__chev::before{rotate:225deg;translate:0 1px} .nav__mega{flex-basis:100%} .nav__mega{ display:none; position:static;opacity:1;visibility:visible;transform:none; border:0;box-shadow:none;background:transparent; } .nav__has-sub.is-open .nav__mega{display:block} .nav__mega-inner{ display:block;padding:var(--s-4) 0 var(--s-2);max-width:none; } .nav__mega-head{display:none} .nav__cols{display:block} /* drop the card treatment in the drawer - it reads as a plain list there */ .nav__group{background:transparent;border:0;border-radius:0;padding:0} .nav__group:hover{background:transparent} .nav__group-icon{display:none} .nav__group-head{margin-bottom:var(--s-3)} .nav__group .nav__list-2{grid-template-columns:1fr} .nav__group-d{display:none} .nav__group + .nav__group{margin-top:var(--s-6)} .nav__group-t{font-size:12px} .nav__group ul a{font-size:14px;color:var(--body);padding:var(--s-2) 0 var(--s-2) var(--s-4)} /* the dot is positioned from the top of the padding box, so the row padding added here pushed every bullet above its own line - carry the padding into the offset so the dot sits on the first line of the label */ .nav__group ul a::before{top:calc(var(--s-2) + .5em)} .nav__cta{margin-top:var(--s-7);width:100%} /* Hero keeps the photo as a full-bleed background with the copy over it. The copy is tall on a phone, so the image is oversized and anchored to its top: that pushes the two figures into the bottom third, leaving the plain wall behind the text where a light scrim can do its work. */ .hero{min-height:clamp(560px,76vh,720px)} .hero__body{align-items:flex-start;padding-block:var(--s-9) var(--s-8)} /* a tablet frame is wide, so the plain portrait scales by width and runs long - anchoring high keeps the pair in view rather than cropping to their heads */ .hero__media img{object-position:var(--hero-pos-sm,center 30%)} /* the copy now sits on plain wall, so the veil can stay light and let more of the room read through; it releases entirely over the figures */ /* fade from the left so the copy column stays legible and the figures on the right read clearly */ .hero__veil{ background:linear-gradient(to right, rgba(251,247,241,.84) 0%, rgba(251,247,241,.78) 40%, rgba(251,247,241,.50) 56%, rgba(251,247,241,.16) 72%, rgba(251,247,241,0) 88%); } /* left-aligned, like the desktop hero and every section below it - centring only the headline left the button and badge reading against a centred block, which is what made the hero look misaligned */ .hero__copy{max-width:none;margin-top:0} .hero__actions{justify-content:flex-start} .enquiry{grid-template-columns:1fr;gap:var(--s-9)} .svc-head{grid-template-columns:1fr;gap:var(--s-8)} .svc-head__media{max-width:560px;margin-inline:auto;width:100%;aspect-ratio:4/3;min-height:0} .svc-head__badge{left:var(--s-4);width:112px;height:112px;font-size:12px} /* the tag is dropped here, leaving number | name | count | mark - four items, so the track list has to stay four wide or the mark wraps to its own row */ .row summary{grid-template-columns:auto 1fr auto auto;gap:var(--s-4) var(--s-5)} .row__tag{display:none} .row__body{grid-template-columns:1fr;gap:var(--s-6)} .row__body .link-more{grid-column:1} .approach{grid-template-columns:1fr;gap:var(--s-8)} .approach__media{max-width:560px;margin-inline:auto;width:100%} .about__top{grid-template-columns:1fr;gap:var(--s-5);margin-bottom:var(--s-8)} .about__grid{grid-template-columns:1fr 1fr;gap:var(--s-7)} .about__copy{grid-column:1 / -1;align-self:auto;padding-bottom:0;margin-bottom:var(--s-6)} .about__copy > p{max-width:none} .about__fig{padding-inline:0} .about__fig--a{translate:none} .about__fig--b{margin-top:var(--s-8)} .about__ghost{top:58%;bottom:auto;font-size:clamp(110px,20vw,200px)} /* .msg is stacked in its own block beside the .msg base rules further down - those are later in the file at equal specificity, so a mobile override up here never wins. Do not move it back. */ .about__grid--duo{grid-template-columns:1fr;gap:var(--s-7)} .about__grid--duo .about__copy{margin-bottom:0} .about__grid--duo .about__copy > p{max-width:62ch} .about__grid--duo .about__fig{max-width:640px} .programs{grid-template-columns:1fr 1fr} .contact-grid{grid-template-columns:1fr;gap:var(--s-8)} .contact-aside__lead{max-width:52ch} .howwork__body{grid-template-columns:1fr;gap:var(--s-8)} /* stacked: nothing tracks scroll at this width, so one shared photo above the list would show Detect against all five pillars - drop it and give each step its own image instead */ .howwork__aside{display:none} .wstep__photo{ display:block;width:100%;height:clamp(200px,32vh,280px);object-fit:cover; object-position:50% 45%;margin-top:var(--s-5); border-radius:var(--radius-lg);box-shadow:var(--shadow-soft); } /* nothing tracks the steps once they stack, so no step is "current" - keep every icon in its resting state even if the class survives a resize */ .wstep.is-now .wstep__icon{ background:rgba(222,154,18,.09);border-color:var(--line-gold);color:var(--gold-deep); } .wstep.is-now .wstep__t{color:var(--ink)} /* the aside can't stay sticky once it sits above the questions */ .faq{grid-template-columns:1fr;gap:var(--s-8)} .faq__aside{position:static} .faq__lead{max-width:none} /* the headline stacks over its supporting column, so both run full width and the strip deepens to keep the two faces readable at this size */ .cta__head{grid-template-columns:minmax(0,1fr);gap:var(--s-6)} .cta__t{max-width:20ch} .cta__panel img{aspect-ratio:16/7} /* minmax(0,…) rather than 1fr: an auto-min track refuses to shrink below its content's min-content width, which pushed the card past the screen at 390 */ .cta__card--split{grid-template-columns:minmax(0,1fr)} .cta__card--split .cta__panel{min-height:0} .cta__card--split .cta__panel img{aspect-ratio:4/5;height:auto} /* bar wraps to 3 per row. Divider dropped at each row start. 7 logos leave the last one alone on row three, where a 33% cell parks it hard left - auto side margins centre that final row */ .logos li{flex:0 0 33.3333%} .logos li:nth-child(3n+1)::before{display:none} .logos li:last-child{margin-inline:auto} .logos img{height:48px} .sechead--row{align-items:flex-start} .sechead{margin-bottom:var(--s-10)} } @media (max-width:720px){ body{font-size:16px} .sechead--wide .h2{text-wrap:balance} /* the rest of the page reads off one left margin on a phone, and a centred six-line paragraph starts every line at a different point - so the section heads go left here too. Desktop keeps its centred heads. */ .sechead{text-align:left;max-width:none;margin-inline:0} .sechead .eyebrow--dot{justify-content:flex-start} .sechead--wide .sechead__lead{max-width:none;margin-inline:0} /* long labels may wrap on a phone - nowrap is what forced the CTA card wider than the screen, since "Schedule your consultation" cannot be broken */ .btn{white-space:normal;text-align:center} .btn--lg{padding-inline:var(--s-5)} .cta__copy{padding:clamp(24px,6vw,var(--s-6))} /* a wide strip is only 162px deep on a 324px card, and the quote shelf alone is 101px of that - so the photo turns portrait here to keep both faces clear of the shelf */ .cta__panel img{aspect-ratio:4/5} .programs{grid-template-columns:1fr;gap:var(--s-9)} .row__list{grid-template-columns:1fr} /* count goes too, so back down to three tracks */ .row__count{display:none} .row summary{grid-template-columns:auto 1fr auto;padding-block:var(--s-6)} .howwork__head{align-items:flex-start} .howwork__cta{width:100%} /* on a phone the icon column stole ~64px from every line of copy and left a tall empty gutter down the left of each step. The icon now pairs with the step name on its own row, and the paragraph and photo run the full width */ .wstep{ display:grid;grid-template-columns:48px minmax(0,1fr); column-gap:var(--s-4);row-gap:var(--s-3);align-items:center; } .wstep__body{display:contents} .wstep__icon{grid-column:1;grid-row:1;width:48px;height:48px} .wstep__icon svg{width:24px;height:24px} /* the copy and the photo are grid items now, and a grid item's automatic minimum is its content width - the photo's intrinsic 1920px would push the whole step past the screen without min-width:0 */ .wstep__t{grid-column:2;grid-row:1;margin:0;min-width:0} .wstep__p{grid-column:1 / -1;min-width:0} .wstep__photo{grid-column:1 / -1;min-width:0;max-width:100%;margin-top:var(--s-1)} .hero__actions{flex-direction:column;align-items:flex-start;gap:var(--s-6)} /* pull the badge/button group up a little on the stacked layout */ .hero__promise{margin-bottom:var(--s-5)} /* on the stacked phone layout, show the MOH badge above the button */ .hero__badge{order:1} .hero__actions .btn{order:2} /* the badge stays a horizontal pair even when the actions stack */ .cta__actions .btn{width:100%} .cta__trust{grid-template-columns:1fr;gap:var(--s-3)} .form-grid{grid-template-columns:1fr} .form__submit .btn{width:100%} .faq__item summary{font-size:17px;gap:var(--s-4)} .faq__a{padding:0 0 var(--s-7) calc(var(--s-4) + 20px)} .stats{grid-template-columns:1fr 1fr;gap:var(--s-6) var(--s-5)} .about__grid{grid-template-columns:1fr;gap:var(--s-6)} .about__fig--b{margin-top:0} .about__ghost{display:none} .approach__grid{grid-template-columns:1fr} .footer__inner{grid-template-columns:1fr 1fr} .footer__brand{grid-column:1 / -1} .footer__bar{justify-content:center;text-align:center} .logos img{height:46px} } @media (max-width:600px){ /* crop some of the empty floor at the bottom and lift the figures up */ .hero{min-height:clamp(520px,66vh,640px)} .hero__media img{object-position:var(--hero-pos-sm,center 30%)} /* Display type steps down on a phone. The scale was drawn for a narrow serif; Manrope sets much wider at the same size, which pushed these headings to 4-6 lines on a 390px screen. */ .h2,.about__t,.svc-head__t{font-size:28px;line-height:1.2} .cta__t{font-size:26px;line-height:1.2} /* this used to be a kicker under a separate "About Us" headline, so it was stepped down to 19px to avoid two equal titles stacked. Since 2026-09-16 it IS the section heading, so it takes the same 28px as every other h2. */ .about__copy .slash{font-size:28px;line-height:1.2;margin-bottom:var(--s-4)} } @media (max-width:480px){ .hero__actions{align-items:stretch} .hero__actions .btn{width:100%} .logos li{flex:0 0 50%} .logos li:nth-child(3n+1)::before{display:block} .logos li:nth-child(odd)::before{display:none} /* seven logos across two columns leave the last one alone on its row, where a 50% cell parks it hard left - auto side margins centre that final row */ .logos li:last-child{margin-inline:auto} .logos img{height:44px} /* single-column footer. Rows inside a list have to read tighter than the gap between groups, or the columns lose their grouping when stacked. */ .footer{padding-top:clamp(48px,11vw,64px)} .footer__inner{grid-template-columns:1fr;gap:var(--s-7);padding-bottom:var(--s-8)} .footer__col ul{gap:var(--s-1)} .footer__col ul a{line-height:1.45} .footer__tag{margin-top:var(--s-5)} .wa-float{width:48px;height:48px;right:var(--s-4);bottom:var(--s-4)} .wa-float svg{width:22px;height:22px} } /* ---------- Touch devices ---------- Fingers are not cursors: anything tappable needs roughly 44px. These rules are keyed to the pointer, not the width, so the desktop design is untouched and an iPad gets them in both orientations. */ @media (hover:none){ /* the underline stays where it is; a pseudo-element grows the hit area only */ .link-more,.footer__bar a,.faq__a a{position:relative} .link-more::after,.footer__bar a::after,.faq__a a::after{ content:"";position:absolute;left:-8px;right:-8px;top:50%; height:44px;translate:0 -50%; } .chip{display:inline-flex;align-items:center;min-height:44px;padding:var(--s-3) var(--s-5)} .nav__list > li > a{padding-block:var(--s-3)} /* the desktop menu is deliberately tight; a finger still needs ~44px. These must match `.nav__group ul a` / `.footer__col ul a` selector weight or the base padding wins and the rule silently does nothing. */ .nav__group ul a{padding-block:var(--s-3)} /* the bullet offset has to follow the padding this rule just changed, or the dots float above their labels again on touch screens */ .nav__group ul a::before{top:calc(var(--s-3) + .5em)} /* an overlay carries the 44px target so the visible row can stay compact. `.social` is a ul inside .footer__col too, so it must be excluded: the inline-block + padding here beat its own `display:grid;place-items:center` and pushed the icon out of its circle on touch screens. */ .footer__col ul:not(.social) a{position:relative;display:inline-block;padding-block:var(--s-1)} .footer__col ul:not(.social) a::after{ content:"";position:absolute;left:0;right:0;top:50%;height:44px;translate:0 -50%; } .social a{width:44px;height:44px} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} .reveal{opacity:1;transform:none} } /* ---------- Social links ---------- */ .footer__col .social{display:flex;gap:var(--s-3);margin-top:var(--s-5)} .social a{ display:grid;place-items:center;width:38px;height:38px;border-radius:50%; border:1px solid var(--line-gold);color:var(--gold-deep); transition:color .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease); } .social a:hover{color:#fff;background:var(--gold-deep);border-color:var(--gold-deep)} .social svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} /* ========================================================= ABOUT PAGE Reuses the homepage system; only the pieces that page does not already have are defined here. ========================================================= */ /* a page hero is an introduction, not a landing screen, so it runs shorter. Two classes deep so it also wins inside the responsive blocks below. */ .hero.hero--page{min-height:clamp(520px,62vh,680px)} /* the founder's words, standing as their own band between two sections */ .quoteband{ /* reading-nook photo behind a translucent cream wash so the quote stays legible */ background: linear-gradient(rgba(242,230,210,.82),rgba(242,230,210,.82)), url("../img/quote-bg-v2.webp") center/cover no-repeat; border-block:1px solid var(--line-gold); padding-block:clamp(var(--s-10),9vw,var(--s-12)); } .pullquote{ margin:0 auto;max-width:760px;text-align:center; } .pullquote blockquote{ margin:0;font-family:var(--f-display); font-size:clamp(24px,2.6vw,34px);line-height:1.3;color:var(--ink); text-wrap:balance; } .pullquote blockquote::before, .pullquote blockquote::after{content:"\201C";color:var(--gold);font-size:1em} .pullquote blockquote::after{content:"\201D"} .pullquote figcaption{ margin-top:var(--s-5);font-size:13px;font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:var(--gold-deep); } /* A statement band: a heading and one line, centred, nothing else. Same shape as .quoteband above but on plain ground - Su asked for that design "with the background blank", so the photograph and its cream wash are gone and only the gold hairlines are left to keep the band from merging into the plain sections either side of it. (Preventive Functional Check Up, Su 2026-09-17.) */ .statement{border-block:1px solid var(--line-gold)} .statement__in{max-width:920px;margin-inline:auto;text-align:center} .statement__in .h2{margin:0 0 var(--s-6)} /* the size Su pointed at: the .pullquote blockquote, not a lead paragraph */ .statement__p{ margin:0;font-family:var(--f-display); font-size:clamp(23px,2.6vw,34px);line-height:1.35;color:var(--body); text-wrap:balance; } @media (max-width:720px){ /* every other head on a phone is left-aligned, and 34px of centred type over four lines reads as a poster rather than a paragraph */ .statement__in{text-align:left} .statement__p{font-size:clamp(20px,5vw,24px);line-height:1.45;text-wrap:normal} } /* a closing line under a section's content */ .section__note{ max-width:70ch;margin:var(--s-9) auto 0;text-align:center;color:var(--ink-soft); } .section__note--lead{margin:0 auto var(--s-10)} /* inside a left-aligned section head, the note follows it rather than centring */ .howwork .section__note{margin-inline:0;text-align:left;max-width:64ch} /* the numbered journey rows: the same hairline rhythm as the service rows, without the disclosure behaviour */ .row__step{ display:grid;grid-template-columns:auto 1fr;align-items:baseline; gap:var(--s-5);padding:var(--s-7) 0; } .row__step .row__d{margin:var(--s-2) 0 0;max-width:62ch;color:var(--body)} @media (max-width:960px){ .creds{gap:var(--s-4)} .quoteband{padding-block:clamp(var(--s-9),9vw,var(--s-10))} } @media (max-width:720px){ .creds{grid-template-columns:1fr} .stats{grid-template-columns:1fr;gap:var(--s-6);margin-top:var(--s-9)} .pullquote{text-align:left} .section__note{text-align:left;margin-top:var(--s-8)} .section__note--lead{margin-bottom:var(--s-8)} .row__step{gap:var(--s-4);padding:var(--s-6) 0} } /* ========================================================= CONTACT PAGE ========================================================= */ .contact-grid--split{align-items:stretch} /* framed Google-map panel, same soft frame as the concept media */ .contact-actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-4)} /* WhatsApp keeps its own brand green so the action reads instantly */ .btn--wa{background:#25D366;color:#fff} .btn--wa:hover{background:#1DA851} /* opening hours - one calm row per day */ .hours{margin:var(--s-2) 0 0;max-width:380px} .hours__row{ display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-5); padding:var(--s-3) 0;border-bottom:1px solid var(--line);font-size:15.5px; } .hours__row:last-child{border-bottom:0} .hours__day{color:var(--ink);font-weight:500} .hours__time{color:var(--body);font-variant-numeric:tabular-nums} .hours__row--closed .hours__day,.hours__row--closed .hours__time{color:var(--muted)} /* inline social row (reuses the round .social a chips) */ .social--inline{display:flex;gap:var(--s-3);margin-top:var(--s-3)} @media (max-width:960px){ } /* ---------- About page: section shapes ---------- Each block gets a different form so the page does not read as one long run of card grids: copy+photo, quote+pillars, a slim fact band, a list. */ /* copy beside a single photo */ .split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,5vw,var(--s-11));align-items:center} .split__copy .h2{margin-bottom:var(--s-5)} .split__lead{margin-bottom:var(--s-5)} .split__copy > p{max-width:52ch} .split__copy .btn{margin-top:var(--s-5)} .split__media{margin:0} /* square rather than 4:5 portrait: at 4:5 the photo ran 170px past the copy beside it, which left the column looking bottom-heavy */ .split__media img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius-lg)} /* long-form message / biography: heading column left, running copy right */ .msg__in{ display:grid;grid-template-columns:.82fr 1.18fr; gap:clamp(40px,5vw,var(--s-10));align-items:start; } .msg__side{position:sticky;top:120px} .msg__side .h2{margin-bottom:var(--s-6)} .msg__fig{margin:0;display:grid;gap:var(--s-4)} .msg__fig img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-lg)} /* v3: the founder's own portrait is a 2:3 headshot — the 4/3 crop cut his head off, so the portrait variant keeps an upright frame at every width. */ .msg__fig--portrait img{aspect-ratio:3/4;object-position:50% 20%;background:var(--ivory-soft)} /* v3 (Jennie 21 Sep): the full-column portrait towered over the message and left the copy floating at the top. Smaller portrait, and both columns centred against each other instead of the sticky/padded-down arrangement. The heading sits on its own row above both, so photo and message start on one line. */ .msg--portrait .msg__in{grid-template-columns:340px 1fr;align-items:start;row-gap:var(--s-7)} .msg__head{grid-column:1/-1} .msg__head .h2{margin:0} .msg--portrait .msg__side{position:static} .msg--portrait .msg__fig--portrait{max-width:340px} .msg--portrait .msg__fig--portrait img{aspect-ratio:4/5;object-position:50% 25%} .msg--portrait .msg__body{padding-top:0} /* v3 (Jennie 21 Sep, 2nd pass): heading moved over the copy column so the paragraphs share its left edge; portrait spans both rows on the left, and the copy is held to a narrower measure. */ .msg--portrait .msg__in{grid-template-areas:"side head" "side body";row-gap:var(--s-6)} .msg--portrait .msg__head{grid-area:head} .msg--portrait .msg__side{grid-area:side} .msg--portrait .msg__body{grid-area:body;max-width:600px} .msg--portrait .msg__body > p{max-width:none} /* v3 (Jennie 21 Sep, 3rd pass): bigger portrait, and the photo + copy pair is centred as one block in the container instead of hugging the left edge. */ .msg--portrait .msg__in{grid-template-columns:minmax(0,440px) minmax(0,600px);justify-content:center} .msg--portrait .msg__fig--portrait{max-width:440px} /* v3 (Jennie 21 Sep, 4th pass): run the pair edge to edge of the container so the portrait and copy line up with the sections above and below it. */ .msg--portrait .msg__in{grid-template-columns:minmax(0,480px) minmax(0,1fr);justify-content:stretch;column-gap:clamp(40px,6vw,var(--s-12))} .msg--portrait .msg__fig--portrait{max-width:none} .msg--portrait .msg__body{max-width:none} /* v3 (Jennie 21 Sep, 5th pass): heading-to-copy gap = 24px like the .split heading above. Rows auto|1fr so the tall portrait's extra height goes to the body row instead of opening a gap under the heading. */ @media (min-width:961px){ .msg--portrait .msg__in{grid-template-rows:auto 1fr;row-gap:var(--s-5)} } .msg__fig figcaption strong{ display:block;font-family:var(--f-display);font-size:21px; font-weight:400;color:var(--ink);line-height:1.25; } .msg__fig figcaption span{display:block;font-size:15px;color:var(--muted);margin-top:var(--s-1);line-height:1.5} .msg__fig figcaption span + span{margin-top:2px} /* the copy column is shorter than the heading + portrait beside it, so starting both at the very top left a block of dead space under the copy. Dropping the copy down by ~a heading's worth centres the two columns against each other and reads as deliberate alignment with the photograph. */ .msg__body{padding-top:clamp(24px,6vw,88px)} .msg__body > p{max-width:66ch} .msg__body > p + p{margin-top:var(--s-5)} .msg__body .lead{margin-bottom:var(--s-5)} .msg__sub{ font-family:var(--f-display);font-size:clamp(21px,2vw,26px);font-weight:400; line-height:1.3;color:var(--ink);margin:var(--s-8) 0 var(--s-4); } /* Tablet and phone: the .82fr/1.18fr pair is far too narrow to hold a heading and a column of running copy side by side - it was setting one or two words per line. Stack it: heading, portrait, then the message full width. This block MUST live after the desktop .msg rules above; the same overrides in the shared max-width:960px block near the top of the file lose to them on source order. */ @media (max-width:960px){ .msg__in{grid-template-columns:1fr;gap:var(--s-7)} .msg__side{position:static;top:auto} .msg__side .h2{margin-bottom:var(--s-6)} .msg__fig{max-width:520px} .msg__body{padding-top:0} .msg__body > p{max-width:none} .msg__body .readmore > p{max-width:none} .msg--portrait .msg__in{grid-template-columns:1fr;grid-template-areas:"head" "side" "body"} .msg--portrait .msg__body{max-width:none} } @media (max-width:600px){ /* the forced break reads as a widow once the column is full width */ .msg__side .h2 br{display:none} .msg__fig{max-width:none} .msg__fig img{aspect-ratio:3/2} .msg__fig--portrait{max-width:420px} .msg__fig--portrait img{aspect-ratio:3/4} .msg__sub{margin-top:var(--s-7)} } /* --- Qualifications band (about > "Where the practice came from") -------- Full width under the career cards rather than stacked in a narrow side column: the old two-column layout ran the list down one side and left a block of dead space beside it. Label left, list in two columns right. */ .quals{ margin-top:var(--s-9);padding-top:var(--s-7);border-top:1px solid var(--line); display:grid;grid-template-columns:minmax(150px,.22fr) 1fr; gap:clamp(24px,3vw,var(--s-8));align-items:start; } .quals__t{ font-family:var(--f-display);font-size:clamp(19px,1.5vw,22px);font-weight:400; color:var(--ink);margin:0;line-height:1.3; } .quals__list{ list-style:none;margin:0;padding:0;display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-4) clamp(24px,2.5vw,var(--s-6)); } .quals__list li{ position:relative;padding-left:var(--s-5); font-size:15.5px;line-height:1.6;color:var(--body); } .quals__list li::before{ content:"";position:absolute;left:0;top:.62em; width:6px;height:6px;border-radius:50%;background:var(--gold); } @media (max-width:960px){ .quals{grid-template-columns:1fr;gap:var(--s-5);margin-top:var(--s-8)} } @media (max-width:720px){ .quals__list{grid-template-columns:1fr;gap:var(--s-3)} } /* --- "Read more" disclosure --------------------------------------------- The markup ships expanded so the copy is indexable and works without JS; main.js adds .readmore--js and the button, which is what collapses it. */ .readmore{margin-top:var(--s-5)} .readmore > p{max-width:66ch} .readmore > p + p{margin-top:var(--s-5)} .readmore--js{ position:relative;overflow:hidden; max-height:var(--readmore-h,none); transition:max-height .45s cubic-bezier(.22,.61,.36,1); } /* fade the cut edge so it reads as "there is more", not as a broken column */ .readmore--js:not(.is-open)::after{ content:"";position:absolute;inset:auto 0 0 0;height:96px;pointer-events:none; background:linear-gradient(to bottom,rgba(0,0,0,0),var(--ivory-soft)); } .readmore__btn{ display:inline-flex;align-items:center;gap:var(--s-2); margin-top:var(--s-5);padding:0;border:0;background:none;cursor:pointer; font-family:inherit;font-size:15.5px;letter-spacing:.02em; color:var(--ink);border-bottom:1px solid var(--line-gold); padding-bottom:4px;transition:color .2s ease,border-color .2s ease; } .readmore__btn:hover{color:var(--gold);border-bottom-color:var(--gold)} .readmore__btn .readmore__ic{ display:inline-block;font-size:13px;line-height:1; transition:transform .3s ease; } .readmore__btn[aria-expanded="true"] .readmore__ic{transform:rotate(180deg)} @media (prefers-reduced-motion: reduce){ .readmore--js,.readmore__btn .readmore__ic{transition:none} } /* two definitions side by side, so neither reads as one long block */ .defs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,var(--s-8));margin-top:var(--s-8)} .defs__card{ padding:var(--s-7) var(--s-7) var(--s-7) var(--s-7); background:var(--ivory-soft);border-radius:var(--radius-lg); border-top:2px solid var(--line-gold); } /* the heading sits beside a small gold badge, matching the mega-menu icons */ .defs__head{display:flex;align-items:center;gap:var(--s-4);margin:0 0 var(--s-4)} .defs__icon{ flex:none;width:44px;height:44px;border-radius:var(--radius-pill); display:grid;place-items:center; color:var(--gold-deep);background:rgba(222,154,18,.1);border:1px solid var(--line-gold); } .defs__icon svg{width:23px;height:23px} .defs__card h3{ font-family:var(--f-display);font-size:clamp(20px,1.7vw,24px);font-weight:400; line-height:1.3;color:var(--ink);margin:0; } .defs__card p{margin:0;font-size:16px;line-height:1.75;color:var(--body)} @media (max-width:860px){ .defs{grid-template-columns:1fr;margin-top:var(--s-7)} .defs__card{padding:var(--s-6)} .defs__head{gap:var(--s-3)} .defs__icon{width:40px;height:40px} .defs__icon svg{width:21px;height:21px} } /* a section head that sits left with its supporting line alongside */ .sechead__aside{margin:0;max-width:46ch;color:var(--ink-soft);font-size:17px;line-height:1.7} /* the four principles: hairline columns rather than four boxes */ .pillars{ display:grid;grid-template-columns:repeat(4,1fr);gap:0; margin-top:var(--s-10);border-top:1px solid var(--line-gold); } .pillars li{padding:var(--s-7) var(--s-6) 0 0} .pillars li + li{padding-left:var(--s-6);border-left:1px solid var(--line)} .pillars h3{ font-family:var(--f-display);font-size:clamp(19px,1.5vw,22px); line-height:1.25;margin:0 0 var(--s-3); } .pillars p{margin:0;font-size:15px;line-height:1.65;color:var(--body)} /* a slim full-width band - a change of pace between two tall sections */ .factband{background:var(--cream);border-block:1px solid var(--line-gold);padding-block:var(--s-10)} /* a narrower first column and a wider gutter carry the figures further right, away from the sentence */ .factband__in{ display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr); gap:clamp(40px,7vw,var(--s-12));align-items:center; } .factband__lead{margin:0;max-width:30ch;font-family:var(--f-display);font-size:clamp(20px,1.9vw,25px);line-height:1.35;color:var(--ink)} .stats--band{margin:0;padding-top:0;border-top:0;grid-template-columns:repeat(2,auto);justify-self:end;gap:var(--s-9)} /* credentials as a reading list, not eight boxes */ /* credentials as logo cards */ /* two-group card: logo + organisation paired at the top, then a divider, then the credential title and description grouped together below */ /* centred certificate card: crest, dotted rule, awarding body, divider, credential title, then the plain-English line -- three to a row */ .credgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)} .credcard{ display:flex;flex-direction:column;align-items:center;text-align:center; background:linear-gradient(180deg,var(--white) 0%,var(--ivory-soft) 100%); border:1px solid var(--line-gold);border-radius:24px; padding:clamp(26px,2.4vw,var(--s-8)) clamp(20px,2vw,var(--s-7)); box-shadow:var(--shadow-soft),inset 0 0 0 6px var(--white),inset 0 0 0 7px rgba(222,154,18,.14); transition:border-color .35s var(--ease),transform .35s var(--ease); } .credcard:hover{border-color:var(--gold);transform:translateY(-3px)} .credcard__logo{ box-sizing:border-box; width:96px;height:96px;border-radius:50%;display:grid;place-items:center;padding:13px;margin:0; border:1px solid var(--line-gold);background:var(--white); } .credcard__logo img{max-height:100%;max-width:100%;width:auto;object-fit:contain} /* a wide horizontal lockup (A4M/MMI) is squeezed by the 13px ring padding; give it the side room back so it reads at the same size as the squarer crests */ .credcard__logo--wide{padding:13px 5px} .credcard__logo--text{ font-family:var(--f-display);font-size:14px;font-weight:600;letter-spacing:.03em;color:var(--gold-deep); } .credcard__logo.is-empty::after{content:"";width:32px;height:1px;background:var(--line-gold)} .credcard__org{ margin:0;max-width:32ch; font-size:14.5px;font-weight:600;letter-spacing:.01em;color:var(--gold-deep);line-height:1.45; } /* hairline with a centred dot, sitting between the crest and the awarding body */ .credcard__org::before{ content:"";display:block;width:min(78%,190px);height:9px;margin:var(--s-5) auto var(--s-4); background: radial-gradient(circle,var(--gold) 0 3px,transparent 3.5px) center/9px 9px no-repeat, linear-gradient(90deg,transparent,var(--line-gold) 18%,var(--line-gold) 82%,transparent) center/100% 1px no-repeat; } .credcard__t{ width:100%;font-family:var(--f-display);font-size:clamp(19px,1.45vw,22px); line-height:1.28;margin:var(--s-5) 0 var(--s-3);padding-top:var(--s-5);border-top:1px solid var(--line); } .credcard__d{margin:0;max-width:34ch;font-size:14px;line-height:1.6;color:var(--body)} @media (max-width:960px){ .split{grid-template-columns:1fr;gap:var(--s-8)} .split__media img{aspect-ratio:16/10} .split__copy > p{max-width:none} .pillars{grid-template-columns:1fr 1fr} .pillars li{padding:var(--s-6) var(--s-5) var(--s-6) 0} .pillars li + li{padding-left:var(--s-5)} .pillars li:nth-child(odd){padding-left:0;border-left:0} .pillars li:nth-child(n+3){border-top:1px solid var(--line)} /* stacked: the figures sit under the sentence, so they go back to the left margin like everything else on a narrow screen */ .factband__in{grid-template-columns:1fr;gap:var(--s-7)} .stats--band{justify-self:start} } @media (max-width:1080px){ .credgrid{grid-template-columns:repeat(2,1fr)} } @media (max-width:640px){ .credgrid{grid-template-columns:1fr} .credcard{max-width:420px;margin-inline:auto} } @media (max-width:720px){ .pillars{grid-template-columns:1fr;margin-top:var(--s-8)} .pillars li,.pillars li + li{padding:var(--s-5) 0;border-left:0} .pillars li + li{border-top:1px solid var(--line)} .pillars li:nth-child(n+3){border-top:1px solid var(--line)} .factband{padding-block:var(--s-9)} .stats--band{grid-template-columns:1fr;gap:var(--s-6)} .sechead__aside{max-width:none} } /* a long heading must not shove its supporting line onto the next row */ .sechead--row > *:first-child{min-width:0} .sechead--row .sechead__aside{flex:0 1 46ch} /* ---------- Interior page header (no full-bleed photo) ---------- Split rather than centred: the title takes the left column while the supporting line and the actions sit in the right, so the header works across the page width instead of running tall down the middle. The split echoes .sechead--row, which the sections below already use. */ /* one column: the explicit placements are dropped so nothing leaves a hole */ @media (max-width:900px){ } @media (max-width:600px){ } /* ---------- Contact: full-width map + info card row ---------- */ /* left column stacks the two short cards to balance the tall hours card */ .infocol{display:grid;gap:var(--s-5)} @media (max-width:900px){ } /* ---------- Contact: map beside a single contact panel ---------- */ .visit__split{ display:grid;grid-template-columns:1.15fr .85fr; gap:var(--s-5);align-items:stretch; } .visit__map{ position:relative;border-radius:var(--radius-lg);overflow:hidden; border:1px solid var(--line);box-shadow:var(--shadow-soft); background:var(--ivory-soft);min-height:clamp(480px,52vw,600px); } .visit__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .visit__panel{ background:var(--ivory-soft);border:1px solid var(--line);border-radius:var(--radius-lg); padding:clamp(24px,2.2vw,var(--s-7)); } .visit__panel .contact-list{gap:var(--s-6)} .visit__panel .contact-item + .contact-item{padding-top:var(--s-6);border-top:1px solid var(--line)} .visit__panel .hours{max-width:none} @media (max-width:900px){ .visit__split{grid-template-columns:1fr} .visit__map{min-height:0} .visit__map iframe{position:static;height:clamp(300px,60vw,400px)} } /* ---------- Contact page ---------- Copy and a 2x2 detail grid on the left, a form panel on the right, and a full-bleed map beneath. The panel uses underline fields, so those rules are scoped to .form-line and leave the homepage form alone. */ .contactmain__in{ display:grid;grid-template-columns:0.82fr 1.18fr; gap:clamp(32px,4vw,var(--s-10));align-items:start; } .slashline{ margin:0 0 var(--s-5);font-size:13px;font-weight:600;letter-spacing:.1em; color:var(--gold-deep); } .contactmain__t{ font-size:clamp(34px,4.2vw,54px);font-weight:400;line-height:1.12; letter-spacing:-.01em;margin:0 0 var(--s-5);max-width:16ch; } .contactmain__lead{margin:0 0 var(--s-10);max-width:50ch;color:var(--ink-soft);font-size:17px;line-height:1.7} .detailgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8) var(--s-7)} .detailgrid__t{ font-family:var(--f-ui);font-size:16px;font-weight:600;color:var(--ink); margin:0 0 var(--s-3); } .detailgrid__d{margin:0;font-size:15.5px;line-height:1.8;color:var(--body)} .detailgrid__d a{color:var(--body);transition:color .35s var(--ease)} .detailgrid__d a:hover{color:var(--gold-deep)} .detailgrid__muted{color:var(--muted)} .social--inline{display:flex;gap:var(--s-3);margin:0} /* the form panel */ .formpanel{ background:var(--ivory-soft);border:1px solid var(--line); border-radius:var(--radius-lg);padding:clamp(28px,3vw,var(--s-8)); } /* the contact page runs this panel on white, where its ivory reads as a card. The home page runs the same section on an ivory band whose value is identical to the panel's, so there the panel takes white instead and the card survives. */ .section--ivory .formpanel{background:var(--white)} .formpanel__t{font-family:var(--f-display);font-size:clamp(28px,2.6vw,36px);line-height:1.15;margin:0 0 var(--s-3)} .formpanel__d{margin:0 0 var(--s-8);font-size:17px;line-height:1.6;color:var(--muted)} .formpanel .chips{margin-bottom:var(--s-7)} /* underline fields, as in the reference */ .form-line .field{margin-bottom:var(--s-7)} .form-line .field label{font-size:15px;font-weight:500;color:var(--muted);margin-bottom:var(--s-2)} .form-line .field input, .form-line .field select, .form-line .field textarea{ background:transparent;border:0;border-bottom:1px solid var(--line-gold); border-radius:0;padding:var(--s-4) 0;font-size:18px; } .form-line .field textarea{min-height:84px} .form-line .field input:focus, .form-line .field select:focus, .form-line .field textarea:focus{background:transparent;border-bottom-color:var(--gold-deep)} .form-line .field input[aria-invalid="true"], .form-line .field textarea[aria-invalid="true"]{border-bottom-color:#A6402A} .formpanel__foot{display:flex;align-items:center;gap:var(--s-5);flex-wrap:wrap;margin-top:var(--s-7)} .formpanel__foot .btn__arrow{font-size:1.2em;line-height:1} /* the map sits inside the container and keeps the card radius, rather than running edge to edge */ /* carries the same ivory as the section above so the cream runs unbroken from the hero down past the map, instead of stopping at a white seam */ .mapsection{background:var(--ivory-soft);padding-bottom:var(--section-y)} .mapframe{ margin:0;overflow:hidden;border-radius:var(--radius-lg); border:1px solid var(--line);box-shadow:var(--shadow-soft); } .mapframe iframe{display:block;width:100%;height:clamp(380px,44vw,580px);border:0} @media (max-width:960px){ .contactmain__in{grid-template-columns:1fr;gap:var(--s-9)} .contactmain__t{max-width:none} .contactmain__lead{margin-bottom:var(--s-8)} } @media (max-width:600px){ /* one column each is too narrow for the address to set here */ .contact-list{grid-template-columns:1fr;gap:var(--s-6)} .detailgrid{grid-template-columns:1fr;gap:var(--s-7)} .formpanel__foot .btn{width:100%} } /* the look-inside strip that sits below the map */ /* copy on the left, one photo on the right. Both columns stretch to the same height and the button is pushed to the foot of the copy, so the picture starts and finishes level with the text rather than floating against a short column */ .inside__in{ display:grid;grid-template-columns:1.02fr .98fr; gap:clamp(32px,4vw,var(--s-10));align-items:stretch; } .inside__copy{display:flex;flex-direction:column;align-items:flex-start} .inside__t{margin:0 0 var(--s-5);max-width:16ch} .inside__lead{margin:0 0 var(--s-8);max-width:46ch;color:var(--ink-soft);font-size:17px;line-height:1.7} .inside__list{margin:0 0 var(--s-8);padding:0;list-style:none;display:grid;gap:var(--s-5)} .inside__list li{ display:flex;gap:var(--s-4);align-items:flex-start; font-size:16px;line-height:1.6;color:var(--ink); } .inside__list li::before{ content:"";flex:none;width:7px;height:7px;margin-top:.5em; border-radius:50%;background:var(--gold); } .inside__copy .btn{margin-top:auto} /* Contact > "What to Expect" / "Privacy & Confidentiality": prose in the same two-column frame as .inside, but body copy instead of a bulleted list */ .expect__p{margin:0 0 var(--s-5);max-width:52ch;color:var(--ink-soft);font-size:17px;line-height:1.7} .expect__p:last-child{margin-bottom:0} .expect__h{ margin:var(--s-7) 0 var(--s-5);font-family:var(--f-display);font-weight:500; font-size:clamp(22px,2.2vw,27px);line-height:1.25;color:var(--ink); } /* Contact > "What to Expect": the photograph leads on the left and the copy sits on the right. The image is absolutely filled inside its figure so the row height is set by the text alone - as a normal-flow portrait crop it kept its own proportions and ran on well past the end of the last paragraph. */ #expect .inside__in{grid-template-columns:.98fr 1.02fr} #expect .inside__fig{order:1;position:relative;height:auto} #expect .inside__copy{order:2} #expect .inside__fig img{position:absolute;inset:0;height:100%;min-height:0} @media (max-width:960px){ /* stacked on a phone the copy reads first, so the source order returns */ #expect .inside__in{grid-template-columns:1fr} #expect .inside__fig,#expect .inside__copy{order:0} #expect .inside__fig{position:static} #expect .inside__fig img{position:static;height:auto} } .inside__fig{margin:0;height:100%} .inside__fig img{ width:100%;height:100%;min-height:clamp(320px,36vw,520px);object-fit:cover; border-radius:var(--radius-lg);border:1px solid var(--line); } @media (max-width:960px){ .inside__in{grid-template-columns:1fr;gap:var(--s-8)} .inside__t{max-width:none} /* stacked, so there is no second column to match: the button sits on its own rhythm instead of being pushed to the foot of the column */ .inside__copy .btn{margin-top:0} .inside__fig img{min-height:0;height:auto;aspect-ratio:16/10} } @media (max-width:600px){ .inside__copy .btn{width:100%} .inside__fig img{aspect-ratio:4/3} } /* The About hero is a landscape photo, not the portrait crop the homepage uses, so the shared mobile framing does not suit it. Weighting the crop to the bright desk side keeps the copy off the dark scrubs, where measured contrast fell to about 2:1 no matter how heavy the veil was. */ @media (max-width:960px){ /* sized so the copy fills most of the hero and the photograph reads as a band beneath it - at 92vh the picture ran on for half a screen of empty desk below the promise line */ /* ceiling trimmed 620 -> 560: on a tablet the copy stopped ~156px above the foot of the hero, against ~41px on desktop. Phones are unaffected, since 66vh there already resolves below the new ceiling. */ .hero.hero--page{min-height:clamp(470px,66vh,560px)} .hero--page .hero__media img{object-position:22% center} /* the copy now runs to about 80% of this shorter hero, so the veil holds further down before releasing - it was easing off right under the promise */ .hero--page .hero__veil{ background:linear-gradient(to bottom, rgba(251,247,241,.88) 0%, rgba(251,247,241,.84) 68%, rgba(251,247,241,.74) 82%, rgba(251,247,241,.24) 92%, rgba(251,247,241,0) 99%); } } /* Page heroes on phones: one treatment for all of them (Su, 2026-09-17 r7). About, Services and Contact used to drop their photo to a full-width band pinned under the copy, because each is a wide shot whose subjects sit near the edges and a phone-shaped cover crop can only show about a third of the frame. Su asked for the Home/service-page pattern everywhere instead: the picture stays a full-bleed background behind the copy, and the crop stops mattering because the photo is faded well back. `.hero--page` already carries that treatment (cover crop plus the heavy top-down veil below), so the three pages simply stopped being `.hero--band` and this block is what lowers the photo. Peptide Therapy keeps its own crop only - compounding.jpg is portrait. */ @media (max-width:600px){ /* the veil alone left the busiest frames (the About desk, the Services interior) still reading as detail behind the title. Fading the picture itself is what Su asked for - it settles to texture on the ivory ground the hero sits on, and the crop is no longer something that can go wrong. */ .hero--page .hero__media img{opacity:.85} } /* ---------- The Protocol: pillar tabs beside a detail panel ---------- Each pillar carries a lot of copy, so only one is shown at a time. The existing tablist script drives this - the class names match what it binds. */ .dice{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:clamp(24px,3vw,var(--s-8));align-items:start} .dice__tabs{display:grid;gap:var(--s-3);position:sticky;top:112px} .dice__tab{ display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s-4); width:100%;text-align:left;padding:var(--s-5); background:var(--white);border:1px solid var(--line);border-radius:var(--radius); font-family:var(--f-display);font-size:19px;color:var(--ink); transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease); } .dice__tab:hover{border-color:var(--gold)} .dice__tab-n{ font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--gold); font-variant-numeric:lining-nums tabular-nums;font-family:var(--f-ui); } .dice__tab-mark{ width:8px;height:8px;border-right:1px solid currentColor;border-bottom:1px solid currentColor; rotate:-45deg;opacity:.35;transition:opacity .35s var(--ease),translate .35s var(--ease); } .dice__tab.is-active{background:var(--gold-deep);border-color:var(--gold-deep);color:#fff} .dice__tab.is-active .dice__tab-n{color:var(--gold-light)} .dice__tab.is-active .dice__tab-mark{opacity:1;translate:2px 0} .dice__panel{ background:var(--white);border:1px solid var(--line-gold);border-radius:var(--radius-lg); padding:clamp(24px,3vw,var(--s-8));box-shadow:var(--shadow-soft); } /* Sized to sit level with the title and tagline together. Deliberately a fixed size, not stretched: stretching fed back on itself, because a wider circle narrows the text, which wraps taller, which grows the circle again. */ /* Su, 2026-09-17 r8: the pillar name sits beside the circle, but the sentence under it used to start at the name's left edge - a second text margin inside one card, with the benefit note below already running full width. The head is a grid now: icon and name share row 1, the sentence spans both columns on row 2, so card copy has one left margin. `display:contents` on the wrapper div keeps the markup as it was. */ .dice__panel-head{ display:grid;grid-template-columns:auto minmax(0,1fr); align-items:center;column-gap:var(--s-6);row-gap:var(--s-4); margin-bottom:var(--s-5); } .dice__panel-head > div{display:contents} .dice__panel-icon{ grid-column:1;grid-row:1; flex:none;width:108px;height:108px;border-radius:var(--radius-pill); display:grid;place-items:center; color:var(--gold-deep);background:rgba(222,154,18,.09);border:1px solid var(--line-gold); } .dice__panel-icon svg{width:38px;height:38px} .dice__panel-t{grid-column:2;grid-row:1;font-family:var(--f-display);font-size:clamp(26px,2.4vw,34px);line-height:1.15;margin:0} /* Su, 2026-09-17 r9: the lead was capped at 56ch, so on a desktop it broke a line early and left a gap to the right of the panel. It now runs to the end of the container, like the .dice__benefit line under it. */ .dice__lead{grid-column:1 / -1;grid-row:2;margin:0;font-size:17px;line-height:1.65;color:var(--ink-soft)} /* Su, 2026-09-17 r11: on a desktop the sentence moves up beside the circle, so the name and the sentence share column 2 and the circle spans both rows. The photograph itself is untouched. Below 960px nothing changes: the sentence still spans the full width under the circle. */ @media (min-width:961px){ .dice__panel-icon{grid-row:1 / span 2;align-self:center} .dice__lead{grid-column:2;grid-row:2} .dice__panel-head{align-items:center;row-gap:var(--s-3)} } .dice__benefit{ margin:0 0 var(--s-6);padding:var(--s-4) var(--s-5); background:var(--ivory-soft);border-left:2px solid var(--gold);border-radius:var(--radius); font-size:15.5px;line-height:1.65;color:var(--ink-soft); } .dice__benefit span{ display:inline-block;margin-right:var(--s-3); padding:3px 10px;border-radius:999px; background:var(--gold);color:#fff; font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase; vertical-align:2px; } /* The three detail blocks are outlined cards. No dividing rule above them any more: the boxes already separate themselves from the benefit line. */ .dice__cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)} .dice__cols > div{ padding:var(--s-5);border:1px solid var(--line);border-radius:var(--radius); background:var(--white); } .dice__cols-wide{grid-column:1 / -1} .dice__cols h4{ font-family:var(--f-ui);font-size:13px;font-weight:600;letter-spacing:.06em; text-transform:uppercase;color:var(--ink);margin:0 0 var(--s-3); } .dice__cols p{margin:0;font-size:15.5px;line-height:1.7;color:var(--body)} @media (max-width:960px){ /* the tabs become a scrolling row above the panel */ .dice{grid-template-columns:1fr;gap:var(--s-6)} .dice__tabs{ position:static;grid-auto-flow:column;grid-auto-columns:max-content; gap:var(--s-2);overflow-x:auto;padding-bottom:var(--s-2); scrollbar-width:none; } .dice__tabs::-webkit-scrollbar{display:none} .dice__tab{padding:var(--s-3) var(--s-5);font-size:17px;border-radius:var(--radius-pill)} .dice__tab-mark{display:none} } @media (max-width:720px){ .dice__cols{grid-template-columns:1fr;gap:var(--s-4)} .dice__cols > div{padding:var(--s-4)} .dice__panel-head{gap:var(--s-5)} .dice__panel-icon{width:80px;height:80px} .dice__panel-icon svg{width:34px;height:34px} } /* a pillar whose badge carries a photograph rather than a line icon */ .dice__panel-icon--img{padding:0;background:none;overflow:hidden} /* aspect-ratio pins the slot square, so a portrait source is cropped by object-fit rather than stretching the circle out of shape */ .dice__panel-icon--img img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:inherit} /* ---------- Services page ---------- Each area runs its heading across the full width, then its services three across beneath it. The card counts were chosen to fill their rows: thirteen tests leave two slots in the last row, which a photograph spanning two columns takes, and five therapies leave one, which a single photograph takes. No filler tile, and no ragged foot. */ /* the numeral and the description start on the same line: bottom-aligning the two columns left "01" sitting a long way below the first line of the sentence beside it. The small negative margin cancels the paragraph's half-leading, which is deeper than the numeral's, so the two read as one line optically. */ /* --s-10, not --s-9: every other section head on the site clears its content by 80px, and the three category heads here were the only ones at 64. */ .cathead{margin-bottom:var(--s-10);align-items:flex-start} /* the description carries its own class rather than .sechead__aside: that rule sets flex:0 1 46ch, which is a width in the header's row but became a 391px HEIGHT once it sat inside this column, stretching the header to 540px */ .cathead__aside{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-5);flex:0 1 46ch;margin-top:-.36em} .cathead__d{margin:0;color:var(--ink-soft);font-size:17px;line-height:1.7} /* the icon disc and the "Area one" eyebrow were replaced by a plain numeral; .cat__icon is kept because the nav mega-menu still uses the same disc */ .cat__icon{ width:52px;height:52px;border-radius:50%;display:grid;place-items:center; margin-bottom:var(--s-5); color:var(--gold-deep);background:rgba(222,154,18,.09);border:1px solid var(--line-gold); } .cat__icon svg{width:22px;height:22px} .cat__n{ margin:0 0 var(--s-4);font-family:var(--f-display);font-size:34px;font-weight:400; line-height:1;font-variant-numeric:lining-nums tabular-nums;color:var(--gold-light); } .cat__t{margin:0} /* the count sits beside the numeral rather than under the description: "01 / TOTAL 13 TESTS AVAILABLE" on one line, baselines shared so the small uppercase text sits on the foot of the numeral instead of its middle */ /* the two are SPANS inside one paragraph, not two paragraphs in a wrapper: a stale cached copy of this stylesheet would leave block-level children stacking, which is exactly how the count ended up under the numeral again */ .cat__line{ display:flex;flex-wrap:nowrap;align-items:baseline; gap:var(--s-4);margin:0 0 var(--s-4); } .cat__line .cat__n{margin:0;flex:0 0 auto} .cat__count{ margin:0; font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-deep); } /* separator is a real character in the markup, not a ::before rule, so it still reads "01 / Total ..." even if a browser is holding an old copy of this file */ .cat__sep{ flex:0 0 auto;font-size:15px;line-height:1;color:var(--gold); } /* the services themselves */ .svclist{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5);counter-reset:svc} .svccard{ display:flex;flex-direction:column; background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg); padding:clamp(20px,1.7vw,var(--s-6)); transition:border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease); } .svccard:hover{border-color:var(--line-gold);transform:translateY(-3px);box-shadow:var(--shadow-soft)} .svccard__t{ margin:0 0 var(--s-3); font-family:var(--f-display);font-size:clamp(17px,1.35vw,19.5px);font-weight:500;line-height:1.3; } /* the number sits on its own line above the name: in a narrow card, set beside it, it would push a two-word name onto three lines. Numbered by the list rather than by hand, so reordering an area cannot mislabel it. */ .svccard__t::before{ counter-increment:svc;content:counter(svc,decimal-leading-zero); display:block;margin-bottom:var(--s-4); font-size:12.5px;font-variant-numeric:lining-nums tabular-nums;color:var(--gold); } .svccard__d{margin:0;font-size:14.5px;line-height:1.65;color:var(--body)} /* on a white section the tint moves from the section to the cards */ .svclist--onwhite .svccard{background:var(--ivory-soft)} /* a card that opens its own detail page: the whole tile is the link, with a quiet arrow so it reads as clickable next to the plain cards */ a.svccard{color:inherit} .svccard__go{ margin-top:auto;padding-top:var(--s-4); font-size:13.5px;color:var(--gold-deep);display:inline-flex;align-items:center;gap:var(--s-2); } .svccard__go span{transition:translate .3s var(--ease)} .svccard--link:hover .svccard__go span{translate:4px 0} .svccard--link:hover .svccard__t{color:var(--gold-deep)} /* A photograph taking a card's place, squaring off the last row. The image is taken out of flow so it contributes no height of its own: left in flow it rendered at its natural 1600x1068, which set the row to 627px and stretched the card beside it into a tall empty box. */ .svccard--media{ /* a
still carries the UA's 1em/40px margin here, which left the photograph 80px narrower than the cards and knocked it off their row */ margin:0; position:relative;padding:0;overflow:hidden; border-color:var(--line-gold);min-height:220px; } .svccard--media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .svclist__wide{grid-column:span 2} /* the line about assessment - deliberately quiet, but it belongs on the page */ /* runs the full container width, so its rule lines up with the grid above it rather than stopping two thirds of the way across */ .svcnote{ display:flex;gap:var(--s-4);align-items:flex-start; margin:var(--s-10) 0 0;padding-top:var(--s-6);border-top:1px solid var(--line); font-size:14.5px;line-height:1.7;color:var(--muted); } .svcnote svg{flex:none;width:18px;height:18px;margin-top:2px;color:var(--gold)} /* the three areas as a way in, directly under the page introduction */ .areas{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5);margin-top:var(--s-10)} .area{ display:flex;flex-direction:column;gap:var(--s-3); padding:var(--s-6);border:1px solid var(--line-gold);border-radius:var(--radius-lg); background:var(--cream); transition:transform .35s var(--ease),box-shadow .35s var(--ease); } .area:hover{transform:translateY(-3px);box-shadow:var(--shadow-soft)} .area__n{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-deep)} .area__t{margin:0;font-family:var(--f-display);font-size:clamp(20px,1.7vw,24px);font-weight:500;line-height:1.25} .area__d{margin:0;font-size:14.5px;line-height:1.65;color:var(--body)} .area__go{ margin-top:auto;padding-top:var(--s-4); font-size:14px;color:var(--gold-deep);display:inline-flex;align-items:center;gap:var(--s-2); } .area__go span{transition:translate .3s var(--ease)} .area:hover .area__go span{translate:4px 0} @media (max-width:960px){ /* left at --s-10 to match every other section head at this width; the old --s-8 made these three category heads the only tightened ones on the site */ .cathead{margin-bottom:var(--s-10)} /* wrapped onto its own row here, so there is no numeral to line up with */ .cathead__aside{flex-basis:100%;margin-top:0} /* two across: thirteen plus a one-column photograph is fourteen, which is seven full rows, so the wide span has to give way here */ .svclist{grid-template-columns:1fr 1fr} .svclist__wide{grid-column:span 1} .areas{grid-template-columns:1fr;gap:var(--s-4);margin-top:var(--s-8)} } @media (max-width:720px){ .svclist{grid-template-columns:1fr} .svccard--media{min-height:0;aspect-ratio:16/10} .svcnote{margin-top:var(--s-8)} } /* four numbered steps across, where the three-column default would leave one card stranded alone on a second row. Declared after the .svclist breakpoints above so narrow widths fall back to the same two-then-one columns. */ .svclist--steps{grid-template-columns:repeat(4,1fr)} @media (max-width:1080px){.svclist--steps{grid-template-columns:1fr 1fr}} @media (max-width:720px){.svclist--steps{grid-template-columns:1fr}} /* a single photograph where the stepped pair used to be. Nothing hangs off the foot any more, so the reserved padding, the 74% inset and the portrait crop all come off - doubled class and the descendant selectors are what carry it past the width and padding overrides further down the file. */ .signal__media.signal__media--one{padding-bottom:0} .signal__media--one .signal__fig--a{width:100%} .signal__media--one .signal__fig--a img{aspect-ratio:4/3;height:auto;min-height:0} /* a link that follows a section's own content rather than its heading */ .sec-more{margin:var(--s-8) 0 0} /* ========================================================= SERVICE DETAIL PAGE A single service, read as one page: a contents card holds its place on the left while the write-up scrolls on the right. Reuses the page hero, the CTA and the footer. ========================================================= */ .svcdetail{ display:grid;grid-template-columns:.62fr 1.38fr; gap:clamp(40px,5vw,var(--s-11));align-items:start; } /* a small breadcrumb sits above the page-hero title */ .crumbs{ display:inline-flex;align-items:center;gap:var(--s-2);flex-wrap:wrap; font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase; color:var(--gold-deep);margin:0 0 var(--s-5); } .crumbs a{color:var(--gold-deep);opacity:.75;transition:opacity .3s var(--ease)} .crumbs a:hover{opacity:1} .crumbs span[aria-hidden]{opacity:.5} .crumbs .crumbs__here{color:var(--ink-soft);opacity:1;font-weight:500} /* the contents card - the site's ivory-soft panel, numbered like services/FAQ */ .toc{ position:sticky;top:112px; background:var(--ivory-soft);border:1px solid var(--line); border-radius:var(--radius-lg);padding:var(--s-7) var(--s-6); } .toc__h{ font-family:var(--f-ui);font-size:13px;font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:var(--gold-deep);margin:0 0 var(--s-3); } .toc__list{counter-reset:toc} .toc__list li{border-top:1px solid var(--line)} .toc__list li:first-child{border-top:0} .toc__list a{ display:flex;gap:var(--s-3);align-items:baseline;padding:var(--s-4) 0; font-size:16px;line-height:1.4;color:var(--ink-soft); transition:color .3s var(--ease); } .toc__list a::before{ counter-increment:toc;content:counter(toc,decimal-leading-zero); font-size:13px;color:var(--gold);font-variant-numeric:lining-nums tabular-nums;flex:none; } .toc__list a:hover{color:var(--gold-deep)} /* the write-up */ .svcbody__lead{ font-size:clamp(19px,1.7vw,22px);line-height:1.6;color:var(--ink); font-weight:400;margin:0 0 var(--s-9);text-wrap:balance; } .svcblock{padding-top:var(--s-8);border-top:1px solid var(--line)} .svcblock + .svcblock{margin-top:var(--s-8)} .svcblock__t{ font-family:var(--f-display);font-weight:500;line-height:1.2;letter-spacing:0; font-size:clamp(22px,2.2vw,29px);color:var(--ink);margin:0 0 var(--s-5); } .svcblock p{margin:0 0 var(--s-4);max-width:66ch;color:var(--ink-soft)} .svcblock p:last-child{margin-bottom:0} /* a plain list used inside a block (e.g. what a session covers) */ .svcticks{display:grid;gap:var(--s-3);margin:var(--s-2) 0 0} .svcticks li{ position:relative;padding-left:calc(var(--s-5) + 6px); color:var(--ink-soft);max-width:60ch; } .svcticks li::before{ content:"";position:absolute;left:0;top:.62em; width:7px;height:7px;border-radius:50%;background:var(--gold); } /* back to the full list, below the write-up */ .svcback{margin-top:var(--s-9);padding-top:var(--s-7);border-top:1px solid var(--line)} /* Jennie, 2026-09-07: "remove the line between the cards and button" - on the peptide page the cards already close on their own edges, so the rule read as a second border under them. The other service pages keep it. */ .page-svc .svcback{padding-top:var(--s-6);border-top:0} /* credentials on a service page: the same list as the About page, but read as hairline rows rather than eight crested cards, so it supports the therapy rather than competing with it */ .credlist{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(32px,5vw,var(--s-11)); } .credlist li{padding:var(--s-6) 0;border-top:1px solid var(--line)} .credlist__org{ margin:0 0 6px;font-size:13px;font-weight:600;letter-spacing:.06em; text-transform:uppercase;color:var(--gold-deep);line-height:1.5; } .credlist__t{ margin:0;font-family:var(--f-display);font-weight:500; font-size:clamp(17px,1.25vw,19.5px);line-height:1.35;color:var(--ink); } .credlist__note{margin:var(--s-8) 0 0;padding-top:var(--s-7);border-top:1px solid var(--line)} @media (max-width:760px){ .credlist{grid-template-columns:1fr} } @media (max-width:960px){ .svcdetail{grid-template-columns:1fr;gap:var(--s-8)} /* once the card sits above the write-up it cannot stay stuck */ .toc{position:static} } /* ========================================================= SERVICE PAGES · IMAGE ARRANGEMENTS A service page that leads with photography instead of a contents card needs more than one way to place a picture, or the page becomes a column of identical two-up rows. Four arrangements, used once each, in this order: .headmedia + .figduo - section head beside a stepped pair .figstrip - three staggered frames with captions .figband - one full-bleed photograph with a caption (.split and .inside__fig above supply the other two.) ========================================================= */ /* --- a section head with a picture pair alongside it --- */ .headmedia{ display:grid;grid-template-columns:1fr 1fr; gap:clamp(40px,5vw,var(--s-10));align-items:center; margin-bottom:clamp(var(--s-9),7vw,var(--s-11)); } .headmedia__copy .h2{margin-bottom:var(--s-5)} .headmedia__copy .sechead__lead{margin:0;max-width:46ch;color:var(--ink-soft);font-size:17px;line-height:1.7} /* two photographs stepped out of line: the larger one sets the block, the smaller overlaps its bottom-left corner. The padding on the figure is what reserves room for the overlap, so nothing collides with the copy beside it. */ .figduo{ position:relative;margin:0; padding-left:clamp(32px,7vw,88px);padding-bottom:clamp(32px,5vw,64px); } .figduo img{border-radius:var(--radius-lg);border:1px solid var(--line)} .figduo__a{width:100%;aspect-ratio:4/3;object-fit:cover} .figduo__b{ position:absolute;left:0;bottom:0;width:52%;aspect-ratio:1/1;object-fit:cover; border:6px solid var(--ivory);box-shadow:var(--shadow-soft); } /* --- three frames, the middle one dropped, each with its own caption --- */ .figstrip{ display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(var(--s-4),2vw,var(--s-6)); margin-top:clamp(var(--s-9),7vw,var(--s-11)); } .figstrip figure{margin:0} /* the outer two sit high and the middle one drops, so the row reads as an arrangement rather than a filmstrip */ .figstrip figure:nth-child(2){margin-top:clamp(24px,4vw,56px)} .figstrip img{ width:100%;aspect-ratio:4/5;object-fit:cover; border-radius:var(--radius-lg);border:1px solid var(--line); } .figstrip figcaption{ margin-top:var(--s-4);max-width:34ch; font-size:15px;line-height:1.6;color:var(--muted); } /* --- one photograph across the full width of the viewport --- */ .figband{position:relative;margin:0} .figband img{width:100%;aspect-ratio:21/9;object-fit:cover} .figband figcaption{ position:absolute;left:clamp(var(--s-5),6vw,var(--s-11));bottom:clamp(var(--s-5),4vw,var(--s-8)); max-width:min(42ch,calc(100% - 2 * clamp(var(--s-5),6vw,var(--s-11)))); padding:var(--s-6) var(--s-7);border-radius:var(--radius-lg); background:rgba(255,255,255,.94);border:1px solid var(--line); box-shadow:var(--shadow-soft);color:var(--ink-soft); font-size:16px;line-height:1.7; } .figband__k{ display:block;margin-bottom:var(--s-2); font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase; color:var(--gold-deep); } /* .svcticks carries no bottom margin and .expect__p no top margin, so a paragraph closing a tick list would otherwise sit on top of it */ .expect__p--after-ticks{margin-top:var(--s-5)} @media (max-width:960px){ .headmedia{grid-template-columns:1fr;gap:var(--s-8);margin-bottom:var(--s-9)} .figduo{padding-left:clamp(24px,6vw,64px)} .figstrip{grid-template-columns:1fr 1fr;gap:var(--s-5)} /* with two per row the stagger would strand the third frame, so it goes flat and the last picture runs full width instead */ .figstrip figure:nth-child(2){margin-top:0} .figstrip figure:nth-child(3){grid-column:1 / -1} .figstrip figure:nth-child(3) img{aspect-ratio:16/9} .figband img{aspect-ratio:16/9} .figband figcaption{padding:var(--s-5) var(--s-6);font-size:15px} } @media (max-width:600px){ /* stacked, the overlap has no room to work: the pair becomes two frames */ .figduo{padding:0} .figduo__b{ position:static;width:100%;aspect-ratio:16/9;margin-top:var(--s-4); border-width:1px;box-shadow:none; } .figstrip{grid-template-columns:1fr} .figstrip figure:nth-child(3) img{aspect-ratio:4/5} .figstrip img{aspect-ratio:4/3} /* over a short phone-width crop there is no clean space to sit in, so the caption drops below the picture */ .figband img{aspect-ratio:4/3} .figband figcaption{ position:static;max-width:none;margin:0 auto;width:calc(100% - 2 * var(--gutter)); margin-top:calc(-1 * var(--s-7)); } } /* ========================================================= PEPTIDE THERAPY - page-scoped layout Every other treatment page opens on a full-bleed photograph and runs the same shared closers underneath it. This page is meant to read as its own thing, so the shared blocks are re-laid-out under .page-svc rather than duplicated. 2026-09-07, Jennie: the same design language was rolled out to the other six treatment pages, so .page-svc is now carried by all seven and only .hero--peptide (a crop for one photograph) stays page-specific. ========================================================= */ /* ---- 1 - Hero. This page used to open on a split hero (copy on ivory, the photograph as a framed panel off the right edge). Jennie, 2026-09-07: the image is a background here, like every other page, so the shared .hero--page treatment does the whole job now. compounding.jpg is the only portrait frame (1600x2400) used as a hero on the site, so the crop needs saying out loud. On a wide screen the shared default (70% center) takes a band through the middle of the jar, which is the part of the picture worth showing. On a phone the frame is portrait too, so almost the whole photograph is in view and the crop is anchored high to keep the copy over the soft out-of-focus top rather than across the jar. ---- */ .hero--peptide{--hero-pos-sm:center 6%} /* below 960px the shared sheet hard-codes .hero--page to 22% center, which would drop the jar back under the copy, so the page's own crop is restated at a specificity that beats it */ @media (max-width:960px){ .hero--peptide .hero__media img{object-position:var(--hero-pos-sm)} } /* Jennie, 2026-09-07: "hero section background image can make it full." The photograph was a panel filling the right 46% of the hero, with the copy on plain ivory beside it; it now runs the full width of the hero on every screen, the same full-bleed treatment as the other pages. The veil comes back with it, because the copy crosses the picture again and needs the ivory wash under it, and the crop is set at center 46%: the source is the only portrait frame (1600x2400) used as a hero on the site, so a wide band through it is a close crop whatever you do, and 46% is the one that holds the jar mouth and the capsules in frame without slicing the gloved hands off at the bottom. */ @media (min-width:961px){ .hero--peptide{--hero-pos:center 46%} } /* ---- 2 - What to expect: a vertical timeline on a gold rail, where the other pages set the same four steps as four columns ---- */ .page-svc .pillars{ grid-template-columns:1fr;gap:0; margin-top:var(--s-9);border-top:0;counter-reset:pil; } .page-svc .pillars li, .page-svc .pillars li + li{ position:relative;border:0;border-left:1px solid var(--line-gold); padding:0 0 var(--s-9) clamp(var(--s-8),5vw,var(--s-10)); } .page-svc .pillars li:last-child{padding-bottom:0;border-left-color:transparent} .page-svc .pillars li::before{ counter-increment:pil;content:counter(pil,decimal-leading-zero); position:absolute;left:0;top:-6px;translate:-50% 0; display:grid;place-items:center;width:46px;height:46px;border-radius:50%; background:var(--white);border:1px solid var(--line-gold); font-family:var(--f-display);font-size:14px;color:var(--gold-deep); font-variant-numeric:lining-nums tabular-nums; } .page-svc .pillars h3{font-size:clamp(20px,1.7vw,24px);margin-bottom:var(--s-3)} .page-svc .pillars p{max-width:64ch;font-size:16px} @media (max-width:600px){ /* at phone width a 46px medallion straddling the rail leaves the copy about three words a line, so the number sits above the step instead */ .page-svc .pillars li, .page-svc .pillars li + li{padding:0 0 var(--s-8);border-left:0} .page-svc .pillars li::before{position:static;translate:none;margin-bottom:var(--s-4)} } /* ---- 3 & 4 - Removed, Jennie 2026-09-07 ("consistent with Home and About"). This page carried two deliberate departures from the rest of the site: "Why here" rendered as a hairline index instead of the shared .svccard grid, and the experience band inverted to the dark surface that appears nowhere else. Both are gone, so those two blocks are now the same as they are on every other page. Do not reintroduce them without being asked. ---- */ /* ========================================================= TREATMENT PAGE section shapes, from Jennie's 2026-09-07 mockups. Written for Peptide Therapy first; on 2026-09-07 Jennie asked for the Preventive Check Up, NAD+, MSC, Exosomes, NK Cell and Bio-identical Hormone pages to follow the same design language, so all seven now carry .page-svc and share these shapes. Anything that re-styles a block used OUTSIDE the treatment pages keeps the .page-svc prefix so it cannot leak to Home, About, Services or Contact. ========================================================= */ /* ---- "What it is": Jennie, 2026-09-07 - "too many words, use a different layout". Was a .split (three paragraphs of copy left, photograph right with a note card floated over it). Now the shared centred .sechead carries the definition in one lead, and the three facts that were buried in those paragraphs sit as short items beside the photograph. Same head pattern as About's "Why we practise this way". ---- */ .defsplit{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,var(--s-10));align-items:stretch; } /* the photo is absolutely positioned so its own aspect ratio never drives the row height: a portrait source (e.g. 867x1300) used to make the figure far taller than the copy beside it. The row is now sized by .defsplit__body and the photo crops to whatever that height is. */ .defsplit__fig{margin:0;position:relative;min-height:420px} .defsplit__fig img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; border-radius:var(--radius-lg);border:1px solid var(--line); } .defsplit__body{display:flex;flex-direction:column;justify-content:center} .deflist{list-style:none;margin:0 0 var(--s-8);padding:0} /* Su, r16: the rebuilt Longevity / Functional lists carry a bullet list inside each item, so the rule and the padding have to stay on the direct children — left on `.deflist li` every bullet drew its own divider. */ .deflist > li{padding:var(--s-6) 0;border-top:1px solid var(--line)} .deflist > li:first-child{padding-top:0;border-top:0} .deflist > li:last-child{padding-bottom:0} .deflist h3{ margin:0 0 var(--s-3);font-family:var(--f-display);font-weight:400; font-size:clamp(20px,1.7vw,24px);line-height:1.25;color:var(--ink); } .deflist p{margin:0;font-size:16.5px;line-height:1.75;color:var(--ink-soft)} .defsplit__body .btn{align-self:flex-start} /* Su, 2026-09-15: Overview now uses .defsplit with no button under the list — without this the list keeps a button-sized gap under it. */ .defsplit__body .deflist:last-child{margin-bottom:0} /* Su, 2026-09-17 r10: where the list runs past three points the photograph stretched to the full height of the copy, which made it far taller than the one on the Preventive Check Up page. Here it takes that page's height instead and pins while the list scrolls past it, the same device the home page uses for the D.I.C.E. steps. */ .defsplit--sticky{align-items:start} .defsplit--sticky .defsplit__fig{ position:sticky;top:112px;min-height:0; height:clamp(420px,58vh,560px); } .defsplit--sticky .defsplit__body{justify-content:flex-start} /* ---- "In the body": a centred head, then one wide frame beside a small one, each carrying a quiet label instead of a caption ---- */ .figrow{ display:grid;grid-template-columns:minmax(0,1.85fr) minmax(0,1fr); gap:clamp(var(--s-4),2.4vw,var(--s-7));align-items:start; margin-bottom:clamp(var(--s-8),5vw,var(--s-10)); } .figrow figure{position:relative;margin:0} .figrow img{ width:100%;object-fit:cover; border-radius:var(--radius-lg);border:1px solid var(--line); } .figrow__main img{aspect-ratio:16/9} .figrow__side img{aspect-ratio:4/3} /* the label sits inside the wide frame, where there is room for it, and under the small one, where there is not */ /* a translucent plate rather than bare white type: the photograph behind it is a bright lab shot, and plain white would fall under 4.5:1 on it */ .figrow__main figcaption{ position:absolute;top:clamp(18px,2.2vw,var(--s-6));left:clamp(18px,2.2vw,var(--s-6)); padding:var(--s-4) var(--s-5);border-radius:var(--radius); background:rgba(255,255,255,.88);backdrop-filter:blur(2px); border:1px solid rgba(255,255,255,.6); font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase; line-height:1.9;color:var(--ink-soft); } .figrow__side figcaption{ margin-top:var(--s-4);padding-top:var(--s-4); border-top:1px solid var(--line-gold); font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase; line-height:1.9;color:var(--muted);text-align:right; } /* six roles, three to a row, where the shared grid runs two */ .page-svc .approach__grid{grid-template-columns:repeat(3,1fr)} .page-svc .acard__icon{width:56px;height:56px;flex-basis:56px} .page-svc .acard__icon svg{width:30px;height:30px} .page-svc .acard h3{font-size:clamp(19px,1.4vw,21px)} /* ---- "The groups": Jennie, 2026-09-07 - "relayout this section, very messy". The head was a ghosted gold photograph bleeding in from the right under a gradient mask, a shape that appears nowhere else on the site. It is now the .svc-head pattern Home uses for "Three areas of care" - copy left, framed photograph right - so the section opens the same way Home does. The accordion rows underneath are the shared .rows block, identical to Home's; only the two rules below are page-specific, because these four rows carry three list items each where Home's carry thirteen, and the shared two-column list left a ragged single item stranded on its own line. ---- */ .page-svc .row__list{grid-template-columns:1fr} /* Jennie, 2026-09-07 - "align it". Two separate faults put four columns of type on four different left edges: - the open row summary and the panel that drops out of it were two unrelated grids, so the tag line and the bullets under it never started on the same edge, and neither did the row name and its sentence; - the name track was declared `1.15fr`, whose implied minimum is min-content. "Antimicrobial peptides" is wider than its share, so it pushed the track out and shifted that row's tag 8px right of the row above it. Both grids now use one identical track list, and every track is minmax(0,...) so a long name wraps inside its column instead of moving the ones beside it. The name steps down a size to buy the tags room to stay on one line. */ @media (min-width:961px){ .page-svc .row summary, .page-svc .row__body{ display:grid; grid-template-columns: minmax(0,auto) minmax(0,1.05fr) minmax(0,1.45fr) 124px 34px; gap:var(--s-6); } .page-svc .row__name{font-size:clamp(22px,2vw,29px)} .page-svc .row__d{grid-column:2} .page-svc .row__list{grid-column:3 / -1} /* the panel keeps the summary's tracks but has nothing to put in the number column, so the number's own width is what holds the sentence in line with the name above it */ .page-svc .row__body::before{ content:"01";visibility:hidden;height:0; font-family:var(--f-display);font-size:17px; font-variant-numeric:lining-nums tabular-nums; } } /* the closing "A targeted approach for real potential" callout was removed on the same instruction; its styles went with it */ /* ---- "Why it works this way": copy left, two frames stepped apart on the right, with a drawn arc and a caption in the gap between them ---- */ .signal__in{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(32px,5vw,var(--s-11));align-items:center; } /* a shade smaller than the shared .h2 and balanced rather than hard-broken: at 54px this heading does not fit the column it sits in, and a
in the markup only produced a ragged four lines instead of an even three */ .signal__t{margin:0 0 var(--s-6);font-size:clamp(33px,3.5vw,46px);text-wrap:balance} .signal__kicker{ display:flex;align-items:center;gap:var(--s-4); margin:var(--s-8) 0 0; font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--muted); } .signal__kicker::before{content:"";width:72px;height:1px;background:var(--gold);flex:none} .signal__media{position:relative;padding:0 0 clamp(40px,6vw,80px) 0} .signal__fig{margin:0} .signal__fig img{ width:100%;object-fit:cover; border-radius:var(--radius-lg);border:1px solid var(--line); } .signal__fig--a{width:74%} .signal__fig--a img{aspect-ratio:4/5} /* the smaller frame overlaps the corner of the larger one and hangs past its foot - the reserved padding on .signal__media is what it hangs into */ .signal__fig--b{ position:absolute;right:0;bottom:0;width:46%; border-radius:var(--radius-lg); box-shadow:var(--shadow-soft); } .signal__fig--b img{aspect-ratio:1/1;border:6px solid var(--ivory-soft)} /* Jennie, 2026-09-07: "remove this design" - the drawn quarter-circle arc and the "Science guides a healthier you" line set inside it are gone, markup and styles. Nothing else on the site draws a shape like that. With the corner they occupied now empty, the tall frame widens from 74% to 84% so the column does not carry a quarter of blank space where the arc used to be. The two frames still step past each other; only the drawn decoration is gone. */ .signal__fig--a{width:84%} /* ---- "Who it is for": its own section now, photograph left and the four hopes as small icon cards beside the copy ---- */ .whofor__in{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:clamp(32px,5vw,var(--s-10));align-items:center; } .whofor__fig{margin:0} .whofor__fig img{ width:100%;aspect-ratio:4/5;object-fit:cover; border-radius:var(--radius-lg);border:1px solid var(--line); } .whofor__t{margin:var(--s-3) 0 var(--s-5)} .whocards{ list-style:none;margin:var(--s-6) 0 0;padding:0; display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4); } /* Jennie, 2026-09-07: the icon sat on its own line with the sentence beneath it, leaving the space to its right empty. Icon and copy now share one row. */ .whocard{ display:grid;grid-template-columns:42px minmax(0,1fr); gap:var(--s-4);align-items:center;align-content:center; padding:clamp(16px,1.6vw,var(--s-5)); background:var(--white);border:1px solid var(--line);border-radius:var(--radius); } .whocard__icon{ width:42px;height:42px;border-radius:var(--radius-pill); display:grid;place-items:center;line-height:0; color:var(--white);background:var(--gold); } .whocard__icon svg{width:22px;height:22px;display:block} .whocard p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-soft)} /* ---- "What to expect": the head, a rule and a photograph hold the left column while the numbered timeline runs down the right. Jennie, 2026-09-07: the "Science-led care. A brighter tomorrow." kicker under the photograph was removed, and the photograph now takes its height from the timeline instead of a fixed crop, so the two columns start and finish on the same lines. ---- */ .expect__in{ display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(32px,5vw,var(--s-11));align-items:stretch; } .expect__aside{display:flex;flex-direction:column} .expect__lead{margin:var(--s-5) 0 0;max-width:40ch;color:var(--ink-soft);font-size:17px;line-height:1.7} .expect__rule{display:block;width:72px;height:1px;margin:var(--s-7) 0;background:var(--gold);flex:none} .expect__fig{margin:0;flex:1 1 auto;display:flex;min-height:0} .expect__fig img{ width:100%;aspect-ratio:4/3;object-fit:cover; border-radius:var(--radius-lg);border:1px solid var(--line); } /* the timeline is already a single gold-railed column on this page, so here it only loses the top margin that assumed a full-width head above it */ .page-svc .expect__in .pillars{margin-top:var(--s-2)} /* Su, 2026-09-17 r10: a button in the head of "What to expect", sitting at the top of the right-hand column so it lines up with the heading beside it. The two columns become two explicit rows for it: the aside spans both, the button takes the top of the second column and the timeline the rest. */ .page-svc .expect__in{grid-template-rows:auto 1fr} .page-svc .expect__aside{grid-column:1;grid-row:1 / span 2} .expect__cta{grid-column:2;grid-row:1;justify-self:end;align-self:start;flex:none} .page-svc .expect__in .pillars{grid-column:2;grid-row:2} @media (max-width:1000px){ .figrow{grid-template-columns:1fr;gap:var(--s-5)} .figrow__side{max-width:62%;margin-left:auto} .figrow__main img,.figrow__side img{aspect-ratio:16/10} } @media (max-width:960px){ .signal__in,.whofor__in,.expect__in{grid-template-columns:1fr;gap:var(--s-8)} /* stacked there is only one column, so the head, the button and the timeline simply run in source order and the button goes back to the left edge */ .page-svc .expect__in{grid-template-rows:none} .page-svc .expect__aside,.page-svc .expect__in .pillars, .expect__cta{grid-column:1;grid-row:auto} .expect__cta{justify-self:start} .signal__t{max-width:none} .signal__media{padding-bottom:clamp(32px,8vw,64px)} .signal__fig--a{width:80%} .signal__fig--a img{aspect-ratio:4/3} .signal__fig--b{width:44%} .whofor__fig img{aspect-ratio:16/10} .page-svc .approach__grid{grid-template-columns:1fr 1fr} /* stacked, the photograph goes above the three facts at its own aspect rather than stretching to a column that is no longer beside it */ .defsplit{grid-template-columns:1fr;gap:var(--s-8)} .defsplit__fig{position:static;min-height:0} .defsplit--sticky .defsplit__fig{position:static;height:auto} .defsplit__fig img{position:static;height:auto;aspect-ratio:16/10} /* the shared .row__body two-column split is too narrow to hold a sentence beside a list at this width */ .page-svc .row__body{grid-template-columns:1fr} } @media (max-width:720px){ .whocards{grid-template-columns:1fr} } @media (max-width:600px){ .page-svc .approach__grid{grid-template-columns:1fr} .figrow__side{max-width:none;margin-left:0} /* at phone width the label drops below the frame, so it stops being a plate over the photograph and becomes a caption like the one beside it */ .figrow__main figcaption{ position:static;margin-top:var(--s-4);padding:var(--s-4) 0 0; background:none;backdrop-filter:none; border:0;border-top:1px solid var(--line-gold);border-radius:0; color:var(--muted); } /* stacked, the two labels sit under identical frames, so they read as one pair only if they start on the same edge */ .figrow__side figcaption{text-align:left} } /* ========================================================= PEPTIDE THERAPY - image alignment pass (Jennie, 2026-09-07) Every picture block on the page was sized by its own aspect ratio and then centred in its row, so no photo edge lined up with the copy beside it. Each rule below ties a frame to the content it belongs to: same top, same bottom, same baseline. Scoped to widths where the two columns are actually side by side - below that the sections stack and there is nothing to align to. ========================================================= */ @media (min-width:1001px){ /* "In the body": the small frame ran 66px short of the wide one. It now stretches to the same height, so both frames close on one line and the label under it sits level with the foot of the big photograph. */ .figrow{align-items:stretch} .figrow__side{display:flex;flex-direction:column} .figrow__side img{flex:1 1 0;min-height:0;height:auto;aspect-ratio:auto} } @media (min-width:961px){ /* "Why it works this way": the tall frame started 33px above the eyebrow. Jennie, 2026-09-07: "image (right side) make it smaller, can align with left side texts". The frames were sized by their own 4/5 crop, so the pair ran about 190px past the last line of copy beside them. The media column now takes its height from the copy column instead: the tall frame fills whatever is left after the reserved overhang, and the small frame - which hangs into that overhang - finishes exactly on the kicker line. Same top, same bottom, and the picture is smaller by the difference. */ .signal__in{align-items:stretch} .signal__media{display:flex;flex-direction:column} .signal__fig--a{display:flex;min-height:0;flex:1 1 auto} .signal__fig--a img{height:100%;min-height:260px;aspect-ratio:auto} /* "Who it is for": the photograph was centred and finished short of the copy at both ends; it now runs the full height of the column beside it. */ .whofor__in{align-items:stretch} .whofor__fig{display:flex} .whofor__fig img{height:100%;min-height:520px;aspect-ratio:auto} /* "What to expect": a fixed crop could only ever approximate the depth of the timeline beside it. The frame now fills whatever the head and rule leave of the left column, so both columns finish on one line at any width. Jennie, 2026-09-07 - it was still 21px out. Two reasons, both fixed here: the timeline is a grid, so with the row stretched its last step inherited a stretched track and the copy stopped short of the box it sat in; and the frame's 340px floor made the left column the taller of the two at 1440px, which pushed the photograph past the last line of text rather than up to it. */ /* Jennie, 2026-09-07: "right side move down a bit, same align with the image (left side)". Packed to the top, the timeline used up less depth than the photograph beside it and stopped ~85px above its foot. Packed to the end, the slack goes above the first step instead, so the last line of "Review" finishes level with the bottom of the photograph. */ .page-svc .expect__in .pillars{align-content:end} /* the floor has to stay below the depth the timeline actually leaves, or the left column becomes the taller of the two again and the photograph drops past the last line of the timeline instead of finishing level with it */ .page-svc .expect__fig img{height:100%;min-height:200px;aspect-ratio:auto} } /* "The groups" strip: the middle photograph was dropped 56px below its neighbours, which put its caption on a second baseline. All three frames now share one top edge and one caption line. */ .page-svc .figstrip figure:nth-child(2){margin-top:0} /* ---------- Jennie, 2026-09-08: text wrapping on the service inner pages ---------- "text-wrap: balance for all titles and headings, text-wrap: pretty for all body content and paragraphs." The base sheet already balances h1-h4 and prettifies p/li everywhere; these two blocks close the gaps on the service pages, where a good deal of the type is carried by spans, dt/dd, summary and figcaption rather than by heading and paragraph tags. Scoped to .page-svc so no other page moves. Two earlier per-block exceptions are deliberately overridden here, on the service pages only: - .sechead--wide .h2 was `nowrap` (keep a long section head on one line); a head too wide for its column now breaks into even lines instead. No live service page uses that modifier today, so this only guards future markup. - .sechead--lead-wide .sechead__lead was `balance`; it is a paragraph, so it is `pretty` here. Both keep their original behaviour on Home, About and Contact. */ /* Titles and headings */ .page-svc h1, .page-svc h2, .page-svc h3, .page-svc h4, .page-svc h5, .page-svc h6, .page-svc .h2, .page-svc .sechead--wide .h2, .page-svc .eyebrow, .page-svc summary, .page-svc .faq__q, .page-svc .row__name, .page-svc .row__n, .page-svc .row__tag, .page-svc .stat__k, .page-svc .figband__k, .page-svc .signal__kicker, .page-svc .svccard__t, .page-svc .expect__h, .page-svc .footer__h{ text-wrap:balance; } /* Body content and paragraphs */ .page-svc p, .page-svc li, .page-svc dd, .page-svc td, .page-svc th, .page-svc blockquote, .page-svc figcaption, .page-svc .lead, .page-svc .sechead__lead, .page-svc .sechead--lead-wide .sechead__lead, .page-svc .sechead__aside, .page-svc .faq__a, .page-svc .faq__lead, .page-svc .expect__lead, .page-svc .expect__p, .page-svc .factband__lead, .page-svc .hero__promise, .page-svc .hero__body, .page-svc .svc-head__d, .page-svc .svccard__d, .page-svc .row__d, .page-svc .cta__d, .page-svc .stat__l, .page-svc .section__note{ text-wrap:pretty; } /* ---------- Home, 2026-09-16 (Su) ----------------------------------------- */ /* 1. The section label used to sit in a full-width block of its own above the About grid, which put 40px+ between it and "About Us" while every other section head on the site runs 16px. It now sits inside the copy column, directly above the heading, so the pair matches the D.I.C.E. head. */ .about__grid--duo .about__copy .eyebrow{margin-bottom:var(--s-4)} /* 2. "What is Functional Medicine?": the lead was asked for as two lines. The 700px cap the centred heads use breaks this sentence into three, so this one runs wider and balances the pair. */ .sechead__lead--two{max-width:920px;margin-inline:auto;text-wrap:balance} .sechead--wide .sechead__lead--two{max-width:920px} /* 3. Featured Programs moved up to where "What we offer" was, and has to read as one block on a laptop screen. The cards were 520px tall against a ~200px head, which pushed the third row of copy and the button below the fold; 430px puts the whole section - label, heading, three cards and the button - inside a 900px viewport. */ #programs .programs{--program-h:clamp(340px,26vw,430px)} #programs .program{min-height:var(--program-h)} #programs .sechead{margin-bottom:var(--s-8)} #programs .programs + .center{margin-top:var(--s-7)} /* ---------- Home, 2026-09-16 round 2 (Su) --------------------------------- */ /* 4. About block (2026-09-17, Su): the paragraphs are LEFT aligned, not justified, and the copy column is narrowed so the text never runs up against the photo - the column gap is now a fixed, generous track rather than a 4vw squeeze. The photo top-aligns with the heading (not the label); the offset is the label's own line box plus its 16px margin. The button lives in its own grid cell under the copy - same place on a laptop, but on a phone the photo can sit between the two. Because the copy runs longer than the photo, the photo is sticky: it holds at the top of the viewport while you read, and releases when the "Read the full story" row scrolls past, the same behaviour as the "How we work" section. */ .about__grid--duo{ align-items:start; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas:"copy fig" "cta fig"; grid-template-rows:auto 1fr; column-gap:clamp(var(--s-8),6vw,120px); row-gap:0; } .about__grid--duo .about__copy{grid-area:copy;align-self:start} .about__grid--duo .about__cta{grid-area:cta;margin-top:var(--s-5)} .about__grid--duo .about__fig{ grid-area:fig; margin-top:calc(13px * 1.55 + var(--s-4)); position:sticky; top:112px; align-self:start; } .about__grid--duo .about__copy > p{ max-width:none; text-align:left; hyphens:none; } @media (max-width:960px){ /* stacked: copy, photo, button - the photo and the button swap places, as asked, so the phone reads title > copy > photo > "Read the full story" */ .about__grid--duo{grid-template-columns:1fr;grid-template-areas:"copy" "fig" "cta";grid-template-rows:auto;row-gap:var(--s-7)} .about__grid--duo .about__fig{margin-top:0;position:static} .about__grid--duo .about__cta{margin-top:0} /* 5. D.I.C.E.: on a phone the "Learn more" button sat directly under the heading, before anyone had read a single pillar. The head's two halves become items of the section container here so the button can drop to the end of the list, below Energize. Scoped away from the About page, whose head carries a paragraph rather than a button. */ .howwork .container{display:flex;flex-direction:column} .howwork__head:not(.howwork__head--lead){display:contents} .howwork__head:not(.howwork__head--lead) .howwork__intro{order:1;margin-bottom:var(--s-8)} .howwork__body{order:2} .howwork__head:not(.howwork__head--lead) .howwork__cta{order:3;margin-top:var(--s-8);align-self:flex-start} } /* justification needs a measure to work with - on a phone it opens rivers */ /* 6. Google reviews, between Featured Programs and the CTA band. Cards carry the site's own card treatment (white, hairline, 18px radius, soft shadow); the track scroll-snaps so five reviews fit three-up without a library. */ .revs{position:relative;display:flex;align-items:center;gap:var(--s-4)} .revs__track{ display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2 * var(--s-6)) / 3); gap:var(--s-6);overflow-x:auto;scroll-snap-type:x mandatory; scroll-behavior:smooth;scrollbar-width:none; /* room for the cards' shadow, which a clipped scroller would cut off */ padding:var(--s-2) var(--s-1) var(--s-5);margin:calc(var(--s-2) * -1) calc(var(--s-1) * -1) calc(var(--s-5) * -1); } .revs__track::-webkit-scrollbar{display:none} .rev{ scroll-snap-align:start;display:flex;flex-direction:column; background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg); padding:var(--s-6);box-shadow:var(--shadow-soft); } .rev__top{display:flex;align-items:center;gap:var(--s-4)} .rev__avatar{ flex:none;width:44px;height:44px;border-radius:50%; display:grid;place-items:center; background:rgba(222,154,18,.12);color:var(--gold-deep); font-family:var(--f-display);font-size:19px;line-height:1; } .rev__who{min-width:0;flex:1 1 auto} .rev__name{ display:block;font-family:var(--f-display);font-size:18px;font-weight:400; color:var(--ink);line-height:1.3; } .rev__date{display:block;font-size:14px;color:var(--muted);line-height:1.5} .rev__src{flex:none;display:block;line-height:0} .rev__stars{margin:var(--s-4) 0 var(--s-3);color:var(--gold);font-size:17px;letter-spacing:.14em;line-height:1} .rev__p{ margin:0;font-size:16.5px;line-height:1.75;color:var(--body); display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;overflow:hidden; } .revs__nav{ flex:none;width:44px;height:44px;border-radius:50%; display:grid;place-items:center; border:1px solid var(--line);background:var(--white);color:var(--ink-soft); transition:border-color .2s var(--ease),color .2s var(--ease),opacity .2s var(--ease); } .revs__nav:hover{border-color:var(--line-gold);color:var(--gold-deep)} .revs__nav[disabled]{opacity:.35;cursor:default} .revs__more{margin-top:var(--s-7)} @media (max-width:960px){ .revs__track{grid-auto-columns:calc((100% - var(--s-6)) / 2)} } @media (max-width:720px){ /* one card per screen, arrows below the track so the card keeps the width */ .revs{display:block} .revs__track{grid-auto-columns:88%;gap:var(--s-5)} .revs__nav{display:none} .rev__p{-webkit-line-clamp:9} } /* ---------- Su, 2026-09-17 ---------------------------------------------- */ /* 9. REVERTED 2026-09-17 (Su, round 6). The phone hero had been turned into a band pinned to the foot of the section with the copy on plain ivory above it; Su asked for the original full-bleed photo-behind-the-copy hero back, so that block is gone and the shared `.hero` phone rules above apply again. The only thing kept from it is the crop: the frame is nudged so the two figures sit further right, clear of the headline. object-position's X is the point of the IMAGE that meets the same point of the box, so a SMALLER number moves the picture to the right. 50% -> 38%. Phones only. */ @media (max-width:600px){ .hero--home{--hero-pos-sm:38% 30%} } /* Services groups as dropdowns in the mobile drawer (Su, 2026-09-17). The drawer used to list all 21 services in one run, so "Services" opened a screen and a half of links. Each category is now a closed row with its own chevron; the label itself is still a link to that category on the services page, and only the chevron opens the list. The button is created by main.js, so it has to be hidden wherever the mega menu is the desktop panel. */ .nav__group-chev{display:none} @media (max-width:960px){ .nav__group-head{ display:flex;align-items:center;gap:var(--s-3); margin-bottom:0;border-bottom:1px solid var(--line); } /* the label takes the row, so the whole width reads as one control even though the chevron is the only thing that opens it */ .nav__group-t{flex:1;min-width:0} .nav__group-t a{display:block;padding-block:var(--s-4)} .nav__group-chev{ appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;margin:0; flex:none;display:grid;place-items:center; width:44px;align-self:stretch;cursor:pointer;color:inherit; } /* same mark, same optical correction, as the Services chevron in the top row */ .nav__group-chev::before{ content:"";width:6px;height:6px; border-right:1px solid currentColor;border-bottom:1px solid currentColor; rotate:45deg;translate:0 -2px; transition:rotate .4s var(--ease),translate .4s var(--ease); } .nav__group.is-open .nav__group-chev::before{rotate:225deg;translate:0 1px} .nav__group > ul{display:none} .nav__group.is-open > ul{display:grid;padding:var(--s-3) 0 var(--s-5)} /* the two-column desktop list keeps its labels on one line; in a 390px drawer that pushed the longest test name off the right edge */ .nav__group .nav__list-2 a{white-space:normal} /* the rows now carry their own hairline, so the old gap between groups would read as a break in the list */ .nav__group + .nav__group{margin-top:0} } /* Home, phone: the pillar name sits beside its icon, and the paragraph runs the full width from the container edge (Su, 2026-09-17 r8 - she sent the reference shot herself: icon + name on one row, sentence left-aligned to the same margin as "The D.I.C.E. Protocol" above it, not indented under the name. r7 had aligned it under the name instead; this puts it back.) The photo also spans both columns. */ @media (max-width:720px){ .wstep{ grid-template-columns:48px minmax(0,1fr); column-gap:var(--s-4);row-gap:var(--s-3);align-items:center; } .wstep__icon{grid-column:1;grid-row:1} .wstep__t{grid-column:2;grid-row:1} .wstep__p{grid-column:1 / -1;grid-row:2} .wstep__photo{grid-column:1 / -1;grid-row:3} } /* 10. D.I.C.E. on a phone: each pillar already carries its own photo, so the hairline between one pillar and the next was a second divider doing the same job as the picture edge. Dropped below 720px. */ @media (max-width:720px){ .wstep + .wstep{border-top:0} } /* 11. Section heads on a phone cleared 80px before their content, which on the tall stacked layout reads as a hole between the paragraph and the picture under it. 48px - the value Featured Programs already used, and the one Su pointed at as the reference - now applies to every section head on a phone. */ @media (max-width:720px){ .sechead{margin-bottom:var(--s-8)} } /* the About section clips the giant ghost watermark. `overflow:hidden` makes it a scroll container, which silently disables the sticky photo above; `overflow:clip` clips without that side effect. Older engines ignore the value and keep the `hidden` declared earlier in this sheet. */ .about{overflow:clip} /* ---- About page, Su 2026-09-17 ------------------------------------------ */ /* 17. On a phone the "See what we treat" button sat between the copy and the photograph, so the photo was the last thing on the block. The copy column becomes a set of flex items here so the photo can take order 2 and the button order 3: copy > photo > button. */ @media (max-width:720px){ /* `align-items:center` is inherited from the desktop `.split` grid, where it vertically centres the copy against the photo. Once this is a column, that same value centres every child HORIZONTALLY - and because `display:contents` turns the eyebrow and the heading into flex items, they shrank to their text and sat centred over left-aligned paragraphs (Su, 2026-09-17). */ .split{display:flex;flex-direction:column;gap:0;align-items:stretch} .split__copy .h2,.split__copy .eyebrow{text-align:left} .split__copy{display:contents} .split__copy .btn{order:3;align-self:flex-start;margin-top:var(--s-6)} .split__media{order:2;margin-top:var(--s-7)} } /* 19. "Why we practise this way": the gold rule above the four principles read as a stray line under the paragraph once the principles stacked, since each principle already carries its own divider. Dropped on phones, and the head clears less. */ @media (max-width:720px){ .pillars{border-top:0;margin-top:var(--s-5)} .pillars li:first-child{padding-top:0} } /* 20. D.I.C.E.: 80px between the intro paragraph and the "01 Detect" tab row on a phone. 40px, so the tabs read as part of the same block. */ @media (max-width:720px){ .howwork__head{margin-bottom:var(--s-7)} } /* 21. REVISED 2026-09-17 (Su, round 6): it is the WIDTH that has to match, not the height. `grid-auto-rows:1fr` is gone, so each card is back to its own natural length. What made the column step in and out was the stacked layout below 640px: `margin-inline:auto` on a grid item cancels the stretch and sizes the box to its own text, so a card with a short credential name came out ~90px narrower than its neighbour. `width:100%` restores the stretch; the 420px cap and the centring still apply. */ @media (max-width:640px){ .credcard{width:100%} } /* A hairline between two sections that share the same ivory ground, so the join reads as a break instead of one continuous block. Same gold rule the four principles above it use. (Su, 2026-09-17: above "The protocol".) */ .sec-rule{ display:block;height:1px;background:var(--line-gold); margin-bottom:clamp(40px,6vw,var(--s-10)); } /* Su, 2026-09-17 r9: the same hairline used as a separator between "Overview" and "What comes of it" on the service pages, desktop and phone. It sits between two sections that already carry their own padding, so it adds none. */ .sec-rule--mid{margin:0} /* About, the "Why we practise this way" -> "The protocol" join (Su, 2026-09-17 r7: too much space, desktop and mobile). Three separate clearances were stacking there - the first section's bottom padding, the second's top padding and the hairline's own margin - about 270px of empty ivory at 1440 and 170px on a phone, and the four principles carry no bottom padding of their own, so all of it read as one hole. The two sections now meet, and the hairline alone carries the gap: one section's worth of space above it, half of one below. */ .sec-join{padding-bottom:clamp(var(--s-7),4vw,var(--s-9))} .sec-join .pillars li{padding-bottom:var(--s-7)} .sec-join--after{padding-top:0} .sec-join--after .sec-rule{ margin-top:0; margin-bottom:clamp(var(--s-7),4vw,var(--s-9)); } /* r8, same join, two follow-ups from Su. (a) DESKTOP, "adjust the white part". r7 gave the clearance above the rule to the rule's own margin-top. Both sections are ivory, but `.sec-join--after` has no top padding, so that margin collapsed OUT of #dice and landed between the two boxes - about 95px of page white cutting one ivory block in two, with the four principles ending flush on the edge of it. That clearance is the first section's bottom padding now, where it is ivory, and the principles clear their own ground as well. (b) PHONE, "shorten the distance", against the spacing above "Our journey" as the reference. Text to hairline is ~56px now and hairline to "The protocol" ~63px; they were ~82 and ~55. */ @media (max-width:720px){ .sec-join{padding-bottom:var(--s-6)} .sec-join .pillars li{padding-bottom:var(--s-5)} .sec-join--after .sec-rule{margin-bottom:var(--s-7)} } /* a section that carries one line - the back-link left behind on the CDSA page when "Why it is run as a medical assessment" came out (Su, r8 item 16) */ .section--tight{padding-block:var(--s-8)} .section--tight .svcback{margin-top:0} /* ---- Services page, Su 2026-09-17 --------------------------------------- */ /* 27. Category heads: the description was pulled up -.36em, so its first line sat above the "01 / TOTAL 13 TESTS AVAILABLE" row beside it instead of on the same line. The pull is removed and replaced with the offset that puts the paragraph's first baseline on the numeral's baseline. */ @media (min-width:961px){ .cathead__aside{margin-top:7px} } /* ---- Service pages, Su 2026-09-17 (r13) ---------------------------------- */ /* SIBO "What it is": the lead sits in `.sechead--lead-wide`, whose 880px measure broke this sentence over three lines. She asked for two. The header is released to the container and the paragraph runs to 1080px, balanced so both lines are even. Below 1180px nothing changes - the sentence needs the narrower measure there. */ @media (min-width:1180px){ .sechead--lead-two{max-width:none} .sechead--lead-two .sechead__lead{max-width:1080px;margin-inline:auto;text-wrap:balance} } /* ---- Service pages, Su 2026-09-17 (r16) ---------------------------------- */ /* The accordion that sat on the Longevity & Well Being and Functional Medicine pages is now the Medical Screening layout: a centred .sechead, then the photograph beside a static .deflist. Nothing opens any more, so the numbers and the +/- control are gone; the gold label stays beside the heading and the row's one-line gloss sits under it. */ .deflist h3{display:flex;align-items:baseline;gap:var(--s-4);justify-content:space-between} .deflist__badge{ font-family:var(--f-body);font-size:13.5px;line-height:1.4; color:var(--gold-deep);white-space:nowrap;flex:none; } .deflist p.deflist__tag{margin:0 0 var(--s-3);font-size:15px;color:var(--muted)} .deflist__points{ list-style:none;margin:var(--s-4) 0 0;padding:0; display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2) var(--s-6);align-items:start; } .deflist__points li{ position:relative;padding-left:var(--s-5); font-size:15px;line-height:1.5;color:var(--body); } .deflist__points li::before{ content:"";position:absolute;left:0;top:.62em;width:5px;height:5px; border-radius:50%;background:var(--gold-light); } .deflist .link-more{display:inline-block;margin-top:var(--s-4)} /* the copy column is half the container here, so two bullet columns only work on a wide screen */ @media (max-width:1100px){ .deflist__points{grid-template-columns:1fr} } @media (max-width:560px){ .deflist h3{flex-direction:column;gap:var(--s-2)} .deflist__badge{order:-1} } /* ---- SIBO Breath Test hero, Su r20 -------------------------------------- Her replacement photograph puts the patient on the right third and leaves the left two thirds as plain wall - which is what makes the desktop hero work, the copy sits on the empty side. Below 960px the shared sheet crops .hero--page to 22% center, so the phone showed the wall and nothing else. The page's own crop is restated here, at a specificity that beats it. */ .hero--sibo{--hero-pos-sm:78% center} @media (max-width:960px){ .hero--sibo .hero__media img{object-position:var(--hero-pos-sm)} } /* ---------- draft-v2 (Harry, 2026-09-18): Overview as four cards, no photo ---------- */ .ovcards{ list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,var(--s-5)); } .ovcard{ display:flex;flex-direction:column;gap:var(--s-3); padding:clamp(22px,2.2vw,var(--s-7)) clamp(20px,1.9vw,var(--s-6)); background:var(--ivory-soft);border:1px solid var(--line);border-radius:var(--radius-lg); transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease); } .ovcard:hover{transform:translateY(-3px);border-color:var(--line-gold);box-shadow:var(--shadow-soft)} .ovcard__n{ font-family:var(--f-display);font-size:15px;letter-spacing:.08em;color:var(--gold-deep); padding-bottom:var(--s-3);border-bottom:1px solid var(--line-gold);align-self:stretch; } .ovcard h3{font-family:var(--f-display);font-size:clamp(20px,1.5vw,23px);line-height:1.2;margin:0} .ovcard p{margin:0;font-size:15.5px;line-height:1.65;color:var(--body)} @media (max-width:1080px){.ovcards{grid-template-columns:repeat(2,1fr)}} @media (max-width:600px){.ovcards{grid-template-columns:1fr}} /* Harry, 2026-09-18 (draft-v2): Contact is now form + map only. Map band goes white so hero/form (ivory), map (white) and footer (ivory) alternate instead of one flat block. */ .mapsection--white{background:#fff;padding-top:var(--section-y)} /* Jennie, 2026-09-21: on small phones the 46px floor pushed long single words ("Neurotransmitter", "Comprehensive", "Mesenchymal") past the screen edge. Below 480px the hero title now scales with the viewport instead. */ @media (max-width:480px){ .hero__title{font-size:clamp(28px,10vw,46px)} } /* Jennie, 2026-09-21: "All Longevity & / Well Being Therapies" is a fixed two-line label with a tight line gap so it still reads as one button. Left-aligned by request (Jennie, 2026-09-21, comment 1100630000146521). */ .btn__lbl{display:block;text-align:left;line-height:1.3;white-space:nowrap} @media (max-width:720px){.expect__cta{line-height:1.3;text-align:left}} .btn__lbl .br-m{display:none} @media (max-width:720px){.btn__lbl .br-m{display:inline}} /* "All … Therapies" button: standard single-line pill on phones, same 46px height as every other button (Jennie, 2026-09-21, comment 1100630000146576). It was wrapping to two lines because the desktop padding left it ~1px too wide. The Longevity label only falls back to two lines below 360px, where it cannot fit. */ @media (max-width:720px){ .expect__cta{white-space:nowrap;padding-inline:20px;font-size:14px;letter-spacing:0;gap:6px} .btn__lbl .br-m{display:none} } @media (max-width:380px){ .expect__cta{font-size:13px;padding-inline:18px} } @media (max-width:359px){ .btn__lbl .br-m{display:inline} } .expect__cta{line-height:1.3} /* ---------- Jennie, 2026-09-22: reviews one at a time, full width ---------- */ .revs__track{grid-auto-columns:100%} .rev{position:relative;align-items:center;justify-content:center;text-align:center;padding:var(--s-7) var(--s-8)} .rev__top{flex-direction:column;gap:var(--s-3)} .rev__avatar{width:64px;height:64px;font-size:26px} .rev__src{position:absolute;top:var(--s-6);right:var(--s-6)} .rev__p{-webkit-line-clamp:unset;display:block;max-width:860px;font-size:18px} @media (max-width:960px){ .revs__track{grid-auto-columns:100%} } @media (max-width:720px){ /* arrows stay, on their own row under the card */ .revs{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-4)} .revs__track{order:-1;flex:1 1 100%;grid-auto-columns:100%;gap:var(--s-5)} .revs__nav{display:grid} .rev{padding:var(--s-6) var(--s-5)} .rev__src{top:var(--s-5);right:var(--s-5)} .rev__p{font-size:16.5px} }