/* ───────────────────────────────────────────────────────────────────────────── MOHR — shared brand system: tokens, type roles, layout, components. Loaded by every page so the palette, type and component styles stay identical. Page-specific styles live alongside (e.g. assets/pricing.css). ───────────────────────────────────────────────────────────────────────────── */ :root{ /* brand palette */ --evergreen:#153A2E; --porcelain:#F4F2EC; --brass:#B0895A; /* jewellery only — never as readable text */ --brass-light:#C9A87B; /* accent text on dark surfaces (AA on evergreen) */ --sage:#E4E7DF; --ink:#1B1C18; --slate:#4F544A; /* secondary text, deepened from #5D6259 for AA comfort */ /* type roles */ --display:'Fraunces', Georgia, 'Times New Roman', serif; /* headlines */ --body:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* body + UI */ --accent:'Space Grotesk', 'Inter', system-ui, sans-serif; /* labels, caps */ --maxw:1180px; --prose:44rem; --pad:clamp(1.5rem, 5vw, 4rem); --section-y:clamp(5.5rem, 12vh, 9.5rem); --radius:18px; /* softened, Great-Many-ish warmth */ --radius-sm:12px; --ease:cubic-bezier(.2,.7,.2,1); } *{box-sizing:border-box;} html{ scroll-behavior:smooth;-webkit-text-size-adjust:100%; /* Sitewide guard against horizontal overflow. overflow on is not propagated to the viewport, so body's overflow-x below clips body's own box but cannot stop an over-wide descendant from growing the document — and once the document is wider than the viewport, iOS Safari shrink-to-fits the entire page to make it fit, which reads as a randomly zoomed-out site. The root element's overflow IS propagated, so this is the declaration that actually holds. clip rather than hidden: it does not turn the viewport into a scroll container, so the sticky header and smooth scrolling are untouched. */ overflow-x:clip; /* Pin Fraunces' quirk axes to zero and inherit that everywhere: WONK 0 = no wonky/curled letterforms, SOFT 0 = crisp terminals, not wobbly ones. Both axes are absent from Inter and Space Grotesk, which simply ignore them. */ font-variation-settings:'SOFT' 0,'WONK' 0; /* No swashes, no discretionary ligatures, no stylistic alternates — the features that introduce loops, tails and squiggles into individual letters. */ font-feature-settings:'swsh' 0,'dlig' 0,'salt' 0,'hist' 0,'ss01' 0,'ss02' 0; font-synthesis:weight small-caps; /* never fake an italic/oblique slant */ } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} } body{ margin:0;background:var(--porcelain);color:var(--ink); font-family:var(--body); font-size:clamp(1rem,.6vw + .9rem,1.125rem);line-height:1.65; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip; } body::before{ content:"";position:fixed;inset:0;pointer-events:none;z-index:9999; opacity:.022;mix-blend-mode:multiply; background-image:radial-gradient(var(--ink) .5px, transparent .5px);background-size:3px 3px; } a{color:inherit;} ::selection{background:var(--brass);color:var(--porcelain);} /* ── type ─────────────────────────────────────────────── */ .eyebrow{ font-family:var(--accent);font-size:.72rem;font-weight:600;text-transform:uppercase; letter-spacing:.24em;color:var(--slate); display:inline-flex;align-items:center;gap:.7em;margin:0 0 1.4rem; } .eyebrow::before{ content:"";width:6px;height:6px;border-radius:50%;background:var(--brass); box-shadow:0 0 0 3px color-mix(in srgb, var(--brass) 22%, transparent);flex:0 0 auto; } h1,h2,h3{font-family:var(--display);font-weight:400;font-style:normal;margin:0;color:var(--ink); line-height:1.03;letter-spacing:-.018em;font-optical-sizing:auto;} h2{font-size:clamp(2rem,4.6vw,3.4rem);} .lede{font-size:clamp(1.12rem,1.4vw,1.35rem);color:var(--slate);max-width:var(--prose);line-height:1.6;} .fine{font-size:.88rem;color:var(--slate);letter-spacing:.01em;} /* Emphasis is carried by colour + weight in the display serif — never by a slant. */ em.serif{font-family:var(--display);font-style:normal;font-weight:500;color:var(--evergreen);} /* Space Grotesk — the technical layer: labels, eyebrows, micro-caps. Declared after the rules above so it wins on source order. */ .eyebrow,.nav__tag,.mech__abbr,.diff__vs,.tier__label,.tier__flag, .field label,.trust__item{ font-family:var(--accent);font-style:normal; } /* ── layout ───────────────────────────────────────────── */ .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);} section{padding-block:var(--section-y);position:relative;} .panel-sage{background:var(--sage);} .panel-green{background:var(--evergreen);color:var(--porcelain);} .panel-green h2,.panel-green h3{color:var(--porcelain);} .panel-green .eyebrow{color:color-mix(in srgb,var(--porcelain) 78%,transparent);} .divider-hair{height:1px;background:color-mix(in srgb,var(--ink) 12%,transparent);border:0;margin:0;} /* ── logo ─────────────────────────────────────────────── */ /* The MOHR wordmark ships as one transparent PNG cropped to its own bounds, so height alone controls it — width follows the 644×144 aspect ratio. */ .logo{display:block;flex:0 0 auto;width:auto;height:1.55rem;user-select:none;} .logo--sm{height:1.25rem;} .logo--xs{height:.95rem;} /* ── header ───────────────────────────────────────────── */ header.site{ position:sticky;top:0;z-index:100;backdrop-filter:saturate(1.1) blur(8px); background:color-mix(in srgb,var(--porcelain) 80%,transparent); border-bottom:1px solid transparent;transition:border-color .4s var(--ease),background .4s var(--ease); } header.site.scrolled{border-bottom-color:color-mix(in srgb,var(--ink) 9%,transparent);} .nav{display:flex;align-items:center;justify-content:space-between;padding-block:1.05rem;gap:1rem;} .nav__tag{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);font-weight:500;display:none;} @media(min-width:860px){.nav__tag{display:block;}} .nav__brand{display:inline-flex;text-decoration:none;flex:0 0 auto;} .nav__end{display:flex;align-items:center;gap:clamp(1rem,2.4vw,1.9rem);} /* Nav links use the Space Grotesk technical layer, underscored in brass on hover/current. */ .nav__link{ font-family:var(--accent);font-size:.74rem;font-weight:600;text-transform:uppercase; letter-spacing:.18em;color:var(--slate);text-decoration:none;position:relative; padding-block:.4rem;white-space:nowrap;transition:color .3s var(--ease); } .nav__link::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--brass); transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease); } .nav__link:hover{color:var(--evergreen);} .nav__link:hover::after,.nav__link[aria-current="page"]::after{transform:scaleX(1);} .nav__link[aria-current="page"]{color:var(--evergreen);} /* secondary nav links: kept off the narrowest headers so the bar never crowds */ .nav__link--md{display:none;} @media(min-width:620px){.nav__link--md{display:inline-block;}} /* ── buttons ──────────────────────────────────────────── */ .btn{ font-family:var(--body);font-weight:600;font-size:.98rem;letter-spacing:.01em;border:0;cursor:pointer; border-radius:100px;padding:1.02rem 1.7rem;display:inline-flex;align-items:center;gap:.7em;line-height:1;text-decoration:none; transition:transform .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease),color .3s var(--ease); } .btn__dot{width:7px;height:7px;border-radius:50%;background:var(--brass);flex:0 0 auto;transition:transform .3s var(--ease);} .btn--primary{background:var(--evergreen);color:var(--porcelain);box-shadow:0 1px 0 color-mix(in srgb,var(--ink) 30%,transparent);} .btn--primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px color-mix(in srgb,var(--evergreen) 80%,transparent);} .btn--primary:hover .btn__dot{transform:scale(1.5);} .btn--ghost{background:transparent;color:var(--evergreen);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--evergreen) 34%,transparent);} .btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--evergreen);transform:translateY(-2px);} .btn--onGreen{background:var(--porcelain);color:var(--evergreen);} .btn--onGreen:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(0,0,0,.5);} .btn--sm{padding:.7rem 1.15rem;font-size:.9rem;} :focus-visible{outline:2.5px solid var(--brass);outline-offset:3px;border-radius:4px;} /* ── hero ─────────────────────────────────────────────── */ .hero{padding-top:clamp(2.5rem,7vh,5rem);padding-bottom:clamp(3rem,7vh,5rem);overflow:hidden;} .hero__grid{display:grid;grid-template-columns:1fr;gap:clamp(2.5rem,5vw,4rem);align-items:center;} @media(min-width:940px){.hero__grid{grid-template-columns:1.15fr .85fr;}} .hero h1{font-size:clamp(2.9rem,7.4vw,5.6rem);letter-spacing:-.028em;} .hero h1 .soft{color:var(--evergreen);} .hero__lede{margin:1.7rem 0 2.3rem;max-width:34rem;} .hero__cta{display:flex;flex-wrap:wrap;gap:1rem 1.2rem;align-items:center;} .hero__tagline{font-family:var(--accent);font-style:normal;font-size:.94rem;font-weight:500; letter-spacing:.01em;color:var(--slate);} .hero__aperture{justify-self:center;} /* honest proof strip (Great-Many-style, no invented numbers) */ .trust{border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent); margin-top:clamp(2.6rem,5vw,3.6rem);padding-top:1.5rem;display:flex;flex-wrap:wrap;gap:.9rem 2.4rem;} .trust__item{display:flex;align-items:center;gap:.6em;font-size:.92rem;color:var(--slate);font-weight:500;letter-spacing:.01em;} .trust__item .t-dot{width:6px;height:6px;border-radius:50%;background:var(--brass);flex:0 0 auto;} /* aperture instrument (signature) */ .aperture{display:block;width:min(78vw,360px);height:auto;} .aperture .ring{fill:none;stroke:var(--evergreen);} .aperture .ring--faint{stroke:color-mix(in srgb,var(--evergreen) 48%,transparent);} .aperture .tick{stroke:var(--brass);stroke-width:1.4;} .aperture .halo{fill:none;stroke:color-mix(in srgb,var(--brass) 42%,transparent);stroke-width:1;} .aperture .dot{fill:var(--brass);} .aperture .sweep{transform-origin:130px 130px;} @keyframes focusIn{0%{opacity:0;transform:scale(1.08);filter:blur(2px);}100%{opacity:1;transform:scale(1);filter:blur(0);}} @keyframes spin{to{transform:rotate(360deg);}} @keyframes breathe{0%,100%{transform:scale(1);}50%{transform:scale(1.015);}} .aperture-anim{transform-origin:center;animation:focusIn 1.3s var(--ease) both, breathe 7s ease-in-out 1.3s infinite;} .aperture-anim .sweep{animation:spin 26s linear infinite;} .aperture-anim .r1{animation:focusIn 1s var(--ease) .05s both;} .aperture-anim .r2{animation:focusIn 1s var(--ease) .18s both;} .aperture-anim .r3{animation:focusIn 1s var(--ease) .32s both;} .aperture-anim .dot{animation:focusIn .9s var(--ease) .55s both;} /* ── empathy ──────────────────────────────────────────── */ .empathy{max-width:52rem;} .empathy p{font-family:var(--display);font-weight:300;font-size:clamp(1.4rem,2.9vw,2.05rem); line-height:1.4;color:var(--ink);letter-spacing:-.01em;margin:0;} .empathy p .muted{color:var(--slate);} .empathy .signoff{font-family:var(--body);font-size:1rem;font-weight:400;color:var(--slate);margin-top:2rem;line-height:1.6;} /* ── the turn ─────────────────────────────────────────── */ .turn__grid{display:grid;gap:clamp(2rem,4vw,3.5rem);grid-template-columns:1fr;align-items:start;} @media(min-width:860px){.turn__grid{grid-template-columns:1fr 1fr;}} .turn h2 .accent{color:var(--evergreen);font-style:normal;} /* colour, not a slant */ .turn__note{border-left:2px solid var(--brass);padding-left:1.4rem;} /* ── mechanism ────────────────────────────────────────── */ .mech__head{max-width:46rem;margin-bottom:clamp(2.5rem,5vw,4rem);} .mech__grid{display:grid;gap:1px;background:color-mix(in srgb,var(--porcelain) 22%,transparent); border:1px solid color-mix(in srgb,var(--porcelain) 22%,transparent);border-radius:var(--radius);overflow:hidden;} @media(min-width:680px){.mech__grid{grid-template-columns:1fr 1fr;}} .mech{background:var(--evergreen);padding:clamp(1.6rem,3vw,2.4rem);position:relative;} .mech__mark{display:flex;align-items:center;gap:.65em;margin-bottom:1rem;} .mech__mark .m-dot{width:8px;height:8px;border-radius:50%;background:var(--brass); box-shadow:0 0 0 4px color-mix(in srgb,var(--brass) 18%,transparent);} .mech__abbr{font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase; color:color-mix(in srgb,var(--porcelain) 78%,transparent);} .mech h3{font-size:1.5rem;margin-bottom:.55rem;letter-spacing:-.01em;color:var(--porcelain);} .mech p{color:color-mix(in srgb,var(--porcelain) 88%,transparent);font-size:1rem;line-height:1.6;margin:0;} .mech__proof{margin-top:clamp(2.2rem,4vw,3rem);max-width:44rem;} .mech__proof p{font-family:var(--display);font-style:normal;font-weight:400;font-size:clamp(1.15rem,2vw,1.5rem); color:var(--evergreen);line-height:1.45;margin:0;letter-spacing:-.01em;} /* ── results: before & after ────────────────────────────── Six supplied clinical pairs. Each figure is one patient: two square panels split by a brass hairline, labelled, with a caption that tells the viewer what to look at. The featured pair carries viewfinder corner marks — the aperture motif, reused as registration marks. */ .results{scroll-margin-top:4.5rem;} .results__head{max-width:46rem;margin-bottom:clamp(2.5rem,5vw,4rem);} .results h2 .accent{color:var(--brass-light);font-style:normal;} /* colour, not a slant */ .results__lede{margin-top:1.3rem;color:color-mix(in srgb,var(--porcelain) 84%,transparent);} .ba{ margin:0;border-radius:var(--radius);overflow:hidden; background:color-mix(in srgb,var(--ink) 22%,var(--evergreen)); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--porcelain) 14%,transparent); transition:transform .5s var(--ease),box-shadow .5s var(--ease); } @media(hover:hover){ .ba:hover{transform:translateY(-3px); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brass) 52%,transparent), 0 26px 50px -34px rgba(0,0,0,.7);} } /* the pair: two squares, hairline-split in brass */ .ba__pair{display:grid;grid-template-columns:1fr 1fr;gap:1px;position:relative; background:color-mix(in srgb,var(--brass) 62%,transparent);} .ba__pane{position:relative;overflow:hidden;background:var(--evergreen);} .ba__pane img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;} .ba__tag{ position:absolute;top:.75rem;left:.75rem;z-index:2; font-family:var(--accent);font-size:.62rem;font-weight:700;letter-spacing:.18em; text-transform:uppercase;padding:.44em .82em;border-radius:100px;color:var(--porcelain); background:color-mix(in srgb,var(--ink) 64%,transparent); backdrop-filter:blur(6px) saturate(1.2); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--porcelain) 22%,transparent); } .ba__tag--after{color:var(--ink);background:var(--brass);box-shadow:none;} /* ink on brass = AA */ .ba__cap{display:flex;flex-wrap:wrap;gap:.4rem 1.3rem;align-items:baseline; padding:clamp(.95rem,2vw,1.3rem) clamp(1rem,2.2vw,1.45rem);} .ba__region{display:inline-flex;align-items:center;gap:.6em;flex:0 0 auto; font-family:var(--accent);font-size:.68rem;font-weight:600;letter-spacing:.2em; text-transform:uppercase;color:var(--brass-light);} .ba__region::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brass);flex:0 0 auto;} .ba__note{margin:0;flex:1 1 14rem;font-size:.92rem;line-height:1.5;color:color-mix(in srgb,var(--porcelain) 78%,transparent);} /* featured pair — viewfinder registration marks, clear of both labels */ .ba--feature .ba__pair::before,.ba--feature .ba__pair::after{ content:"";position:absolute;width:26px;height:26px;z-index:2;pointer-events:none; border:1.5px solid color-mix(in srgb,var(--brass) 82%,transparent); } .ba--feature .ba__pair::before{top:10px;right:10px;border-left:0;border-bottom:0;} .ba--feature .ba__pair::after{bottom:10px;left:10px;border-right:0;border-top:0;} .results__grid{display:grid;grid-template-columns:1fr; gap:clamp(1.1rem,2.2vw,1.6rem);margin-top:clamp(1.1rem,2.2vw,1.6rem);} @media(min-width:820px){ .results__grid{grid-template-columns:1fr 1fr;} .ba--wide{grid-column:1/-1;} } @media(max-width:560px){ .ba__tag{font-size:.55rem;letter-spacing:.13em;top:.5rem;left:.5rem;padding:.38em .62em;} .ba--feature .ba__pair::before,.ba--feature .ba__pair::after{width:18px;height:18px;} } .results__foot{margin-top:clamp(2.2rem,4vw,3rem);padding-top:1.9rem; border-top:1px solid color-mix(in srgb,var(--porcelain) 16%,transparent); display:flex;flex-wrap:wrap;gap:1.5rem 2.5rem;align-items:center;justify-content:space-between;} .results__foot .fine{margin:0;max-width:38rem;color:color-mix(in srgb,var(--porcelain) 72%,transparent);} /* ── why mohr ─────────────────────────────────────────── */ .why__grid{display:grid;gap:clamp(2rem,3.5vw,3rem);grid-template-columns:1fr;margin-top:clamp(2.5rem,5vw,3.5rem);} @media(min-width:820px){.why__grid{grid-template-columns:repeat(3,1fr);}} .diff{position:relative;padding-top:1.8rem;} .diff::before{content:"";position:absolute;top:0;left:0;width:40px;height:2px;background:var(--brass);} .diff__vs{font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--slate);margin-bottom:.8rem;} .diff h3{font-size:1.55rem;color:var(--evergreen);margin-bottom:.7rem;letter-spacing:-.01em;} .diff p{font-size:1rem;color:var(--slate);margin:0;line-height:1.6;} /* ── offer ────────────────────────────────────────────── */ .offer__head{max-width:46rem;margin-bottom:clamp(2.5rem,5vw,3.5rem);} .offer__grid{display:grid;gap:1.4rem;grid-template-columns:1fr;} @media(min-width:800px){.offer__grid{grid-template-columns:1.05fr .95fr;align-items:stretch;}} .tier{border-radius:var(--radius);padding:clamp(1.8rem,3.4vw,2.6rem);display:flex;flex-direction:column;} .tier--signature{background:var(--evergreen);color:var(--porcelain);position:relative;overflow:hidden;} .tier--essential{background:var(--porcelain);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 16%,transparent);} .tier__flag{display:inline-flex;align-items:center;gap:.55em;align-self:flex-start; font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--ink);background:var(--brass);padding:.5em .95em;border-radius:100px;margin-bottom:1.3rem;} /* ink on brass = AA */ .tier__label{font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase; color:color-mix(in srgb,var(--porcelain) 80%,transparent);margin-bottom:.7rem;} .tier--essential .tier__label{color:var(--slate);} .tier__name{font-family:var(--display);font-size:1.9rem;line-height:1.05;margin-bottom:1.1rem;color:var(--porcelain);} .tier--essential .tier__name{color:var(--evergreen);} .tier__price{display:flex;align-items:baseline;gap:.5rem;margin-bottom:.3rem;flex-wrap:wrap;} .tier__price b{font-family:var(--display);font-weight:500;font-size:clamp(2.4rem,4.5vw,3.2rem);letter-spacing:-.02em;line-height:1;} .tier__per{font-size:.92rem;color:color-mix(in srgb,var(--porcelain) 80%,transparent);} .tier--essential .tier__per{color:var(--slate);} .tier__proto{font-size:.94rem;color:color-mix(in srgb,var(--porcelain) 84%,transparent);margin:0 0 1.5rem;} .tier--essential .tier__proto{color:var(--slate);} .tier__list{list-style:none;padding:0;margin:0 0 1.8rem;display:flex;flex-direction:column;gap:.7rem;} .tier__list li{display:flex;gap:.7em;align-items:flex-start;font-size:.98rem;line-height:1.45;color:color-mix(in srgb,var(--porcelain) 92%,transparent);} .tier__list li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brass);margin-top:.55em;flex:0 0 auto;} .tier--essential .tier__list li{color:var(--ink);} .tier__foot{margin-top:auto;} .offer__anchor{margin-top:clamp(2.5rem,4vw,3.5rem);display:flex;flex-wrap:wrap;gap:1.5rem 2.5rem; align-items:baseline;justify-content:space-between;border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent);padding-top:2rem;} .scarcity{display:flex;align-items:center;gap:.8em;font-size:.98rem;color:var(--slate);} .scarcity .pulse{width:9px;height:9px;border-radius:50%;background:var(--brass);flex:0 0 auto; box-shadow:0 0 0 0 color-mix(in srgb,var(--brass) 60%,transparent);animation:pulse 2.6s infinite;} .scarcity b{color:var(--ink);font-weight:600;} @keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brass) 55%,transparent);}70%{box-shadow:0 0 0 10px transparent;}100%{box-shadow:0 0 0 0 transparent;}} /* ── steps: what happens after you reserve (Great-Many-style, real sequence) ── */ .steps__head{max-width:44rem;margin-bottom:clamp(2.2rem,4.5vw,3.2rem);} .steps__grid{display:grid;gap:clamp(1.6rem,3vw,2.4rem);grid-template-columns:1fr;} @media(min-width:760px){.steps__grid{grid-template-columns:repeat(3,1fr);}} .step{padding-top:1.6rem;border-top:1.5px solid color-mix(in srgb,var(--ink) 14%,transparent);position:relative;} .step__n{font-family:var(--display);font-size:2.2rem;color:var(--evergreen);line-height:1;display:flex;align-items:center;gap:.4em;margin-bottom:.9rem;} .step__n .s-dot{width:7px;height:7px;border-radius:50%;background:var(--brass);} .step h3{font-size:1.3rem;color:var(--evergreen);margin-bottom:.5rem;letter-spacing:-.01em;} .step p{font-size:.98rem;color:var(--slate);margin:0;line-height:1.55;} /* ── reassurance ──────────────────────────────────────── */ .reassure{text-align:center;} .reassure__line{font-family:var(--display);font-weight:300;font-size:clamp(1.8rem,4.6vw,3.3rem); line-height:1.18;letter-spacing:-.02em;max-width:22ch;margin:0 auto;color:var(--porcelain);} .reassure__line b{font-weight:500;color:var(--brass-light);font-style:normal;} /* brass-light = AA on evergreen */ .reassure__sub{margin:2rem auto 0;max-width:40rem;color:color-mix(in srgb,var(--porcelain) 88%,transparent);font-size:1.08rem;} /* ── final CTA / form ─────────────────────────────────── */ .final__grid{display:grid;gap:clamp(2.5rem,5vw,4.5rem);grid-template-columns:1fr;align-items:start;} @media(min-width:900px){.final__grid{grid-template-columns:1fr 1fr;}} .final h2{font-size:clamp(2.2rem,4.8vw,3.6rem);} .final__lede{margin-top:1.4rem;} .final__reassure{margin-top:2rem;display:flex;flex-direction:column;gap:.9rem;} .final__reassure div{display:flex;gap:.75em;align-items:flex-start;font-size:1rem;color:var(--slate);} .final__reassure div::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brass);margin-top:.55em;flex:0 0 auto;} .card{background:var(--porcelain);border-radius:var(--radius); box-shadow:0 30px 60px -40px color-mix(in srgb,var(--evergreen) 60%,transparent), inset 0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent); padding:clamp(1.7rem,3.4vw,2.6rem);} .card__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.5rem;} .card__title{font-family:var(--display);font-size:1.4rem;color:var(--evergreen);line-height:1.1;} /* Lead-in copy above the booking button, where the form used to be. */ .card__intro{color:var(--slate);font-size:1rem;line-height:1.6;margin:0 0 1.4rem;} .field{margin-bottom:1.05rem;} .field label{display:block;font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);margin-bottom:.5rem;} .field input{width:100%;font-family:var(--body);font-size:1.02rem;color:var(--ink);background:var(--porcelain); border:1.5px solid color-mix(in srgb,var(--ink) 20%,transparent);border-radius:var(--radius-sm);padding:.9rem 1rem; transition:border-color .25s var(--ease),box-shadow .25s var(--ease);} .field input::placeholder{color:color-mix(in srgb,var(--slate) 78%,transparent);} .field input:focus{outline:none;border-color:var(--evergreen);box-shadow:0 0 0 3px color-mix(in srgb,var(--evergreen) 14%,transparent);} .field.invalid input{border-color:#a8442f;} .field__err{font-size:.82rem;color:#8a3320;margin-top:.4rem;display:none;} .field.invalid .field__err{display:block;} .card .btn--primary{width:100%;justify-content:center;margin-top:.4rem;} .deposit-line{display:flex;gap:.8em;align-items:flex-start;margin-top:1.3rem;padding-top:1.3rem; border-top:1px solid color-mix(in srgb,var(--ink) 10%,transparent);} .deposit-line svg{flex:0 0 auto;margin-top:.15em;} .deposit-line p{margin:0;font-size:.92rem;color:var(--slate);line-height:1.55;} .deposit-line b{color:var(--ink);font-weight:600;} .card__success{display:none;text-align:center;padding:1rem 0;} .card.done .card__form{display:none;} .card.done .card__success{display:block;animation:focusIn .7s var(--ease) both;} .success__mark{width:64px;height:64px;margin:0 auto 1.3rem;} .card__success h3{font-family:var(--display);font-size:1.7rem;color:var(--evergreen);margin-bottom:.7rem;} .card__success p{color:var(--slate);max-width:30rem;margin:0 auto .4rem;font-size:1rem;} .integration-note{margin-top:1.6rem;font-size:.76rem;color:var(--slate);letter-spacing:.03em; background:var(--sage);border-radius:var(--radius-sm);padding:.7rem .9rem;font-family:var(--accent);} .integration-note code{font-size:.74rem;color:var(--evergreen);} /* ── footer ───────────────────────────────────────────── */ footer.site{padding-block:3.2rem;border-top:1px solid color-mix(in srgb,var(--ink) 10%,transparent);} .foot{display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center;justify-content:space-between;} .foot__meta{font-size:.86rem;color:var(--slate);max-width:34rem;line-height:1.55;} .foot__nav{display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:1.15rem;} .foot__legal{font-size:.78rem;color:var(--slate);} /* the fuller footer, used by the pages that take money or confirm a booking: address, policies and the medical disclaimer all have to be present */ .foot--legal{display:grid;grid-template-columns:1fr;gap:2rem clamp(2rem,5vw,4rem);} @media(min-width:820px){.foot--legal{grid-template-columns:1.2fr 1fr;}} .foot__contact{margin:.9rem 0 0;font-size:.9rem;color:var(--slate);line-height:1.75;font-style:normal;} .foot__contact a{color:var(--evergreen);text-underline-offset:3px;} .foot__disclaimer{ grid-column:1/-1;margin:0;padding-top:1.6rem; border-top:1px solid color-mix(in srgb,var(--ink) 10%,transparent); font-size:.78rem;color:var(--slate);line-height:1.7;max-width:60rem; } /* ── reveal ───────────────────────────────────────────── */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease);} .reveal.in{opacity:1;transform:none;} .reveal.d1{transition-delay:.08s;} .reveal.d2{transition-delay:.16s;} .reveal.d3{transition-delay:.24s;} @media (prefers-reduced-motion:reduce){ *{animation:none !important;} .reveal{opacity:1;transform:none;transition:none;} .aperture-anim,.aperture-anim *{animation:none !important;opacity:1 !important;} }