.contact-next {
  display: flex;
flex-direction: column;
gap: 20px;
& ol { margin: 0; padding: 0; list-style: none; }
& li { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; padding-block: 18px; border-block-start: 1px solid var(--border-color-dark); }
& li:last-child { border-block-end: 1px solid var(--border-color-dark); }
& .contact-next__n { padding-block-start: 2px; font-size: 0.875rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--secondary); }
& b { display: block; margin-block-end: 4px; font-size: 1.0625rem; font-weight: 500; line-height: 1.35; }
& p { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--secondary); }
/* Project steps by default; the selected reason swaps the list. */
& .contact-next__list--general, & .contact-next__list--support, & .contact-next__list--seo { display: none; }
.contact:has(input[name="reason"][value="General contact"]:checked) & .contact-next__list--project,
.contact:has(input[name="reason"][value="SEO enquiry"]:checked) & .contact-next__list--project,
.contact:has(input[name="reason"][value="Support request"]:checked) & .contact-next__list--project { display: none; }
.contact:has(input[name="reason"][value="General contact"]:checked) & .contact-next__list--general { display: block; }
.contact:has(input[name="reason"][value="Support request"]:checked) & .contact-next__list--support { display: block; }
.contact:has(input[name="reason"][value="SEO enquiry"]:checked) & .contact-next__list--seo { display: block; }
& ol { animation: hh-fade 0.5s var(--ease-brand) both; }
}
.plans {
  inline-size: 100%;
max-inline-size: var(--measure);
margin-inline: auto;
/* Sits over the SEO add-on, which tucks underneath like the footer. */
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
@media (max-width: 1000px) { grid-template-columns: minmax(0, 1fr); }
}
.about__text {
  grid-column: 1 / span 6;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: clamp(48px, 5vw, 80px);
padding-inline-end: clamp(0px, 2vw, 40px);
@media (max-width: 1000px) { grid-column: 1 / -1; }
}
.health__top {
  display: grid;
grid-template-columns: var(--grid-12);
column-gap: 24px;
row-gap: 40px;
align-items: start;
}
.inclusions__item {
  display: flex;
align-items: center;
gap: 12px;
padding-block: 18px;
border-block-start: 1px solid var(--border-color-dark);
& .ticks__icon { margin-block-start: 0; }
}
.pgrid {
  display: grid;
grid-template-columns: var(--grid-12);
column-gap: 24px;
row-gap: clamp(48px, 5vw, 88px);
align-items: start;
counter-reset: pcount;
/* Card rhythm a b c d. All: first ten, then restart after the testimonial. */
& .pcard:nth-child(4n+1 of .pcard):nth-child(-n+10 of .pcard), & .pcard:nth-child(4n+11 of .pcard) { --col: 1 / span 7; --mt: 0px; --ratio: 16 / 11; }
& .pcard:nth-child(4n+2 of .pcard):nth-child(-n+10 of .pcard), & .pcard:nth-child(4n+12 of .pcard) { --col: 9 / span 4; --mt: clamp(96px, 12vw, 200px); --ratio: 4 / 5; }
& .pcard:nth-child(4n+3 of .pcard):nth-child(-n+10 of .pcard), & .pcard:nth-child(4n+13 of .pcard) { --col: 1 / span 4; --mt: clamp(-120px, -8vw, -40px); --ratio: 4 / 5; }
& .pcard:nth-child(4n+4 of .pcard):nth-child(-n+10 of .pcard), & .pcard:nth-child(4n+14 of .pcard) { --col: 6 / span 7; --mt: 0px; --ratio: 16 / 11; }
/* Filtered: hide other groups, restart the rhythm over the matches, hide the testimonial. */
.projects:has(input[name="sector"][value="Legal"]:checked) & .pcard:not([data-group="Legal"]) { display: none; }
.projects:has(input[name="sector"][value="Legal"]:checked) & .pcard[data-group="Legal"]:nth-child(4n+1 of [data-group="Legal"]) { --col: 1 / span 7; --mt: 0px; --ratio: 16 / 11; }
.projects:has(input[name="sector"][value="Legal"]:checked) & .pcard[data-group="Legal"]:nth-child(4n+2 of [data-group="Legal"]) { --col: 9 / span 4; --mt: clamp(96px, 12vw, 200px); --ratio: 4 / 5; }
.projects:has(input[name="sector"][value="Legal"]:checked) & .pcard[data-group="Legal"]:nth-child(4n+3 of [data-group="Legal"]) { --col: 1 / span 4; --mt: clamp(-120px, -8vw, -40px); --ratio: 4 / 5; }
.projects:has(input[name="sector"][value="Legal"]:checked) & .pcard[data-group="Legal"]:nth-child(4n+4 of [data-group="Legal"]) { --col: 6 / span 7; --mt: 0px; --ratio: 16 / 11; }
.projects:has(input[name="sector"][value="Health and fitness"]:checked) & .pcard:not([data-group="Health and fitness"]) { display: none; }
.projects:has(input[name="sector"][value="Health and fitness"]:checked) & .pcard[data-group="Health and fitness"]:nth-child(4n+1 of [data-group="Health and fitness"]) { --col: 1 / span 7; --mt: 0px; --ratio: 16 / 11; }
.projects:has(input[name="sector"][value="Health and fitness"]:checked) & .pcard[data-group="Health and fitness"]:nth-child(4n+2 of [data-group="Health and fitness"]) { --col: 9 / span 4; --mt: clamp(96px, 12vw, 200px); --ratio: 4 / 5; }
.projects:has(input[name="sector"][value="Health and fitness"]:checked) & .pcard[data-group="Health and fitness"]:nth-child(4n+3 of [data-group="Health and fitness"]) { --col: 1 / span 4; --mt: clamp(-120px, -8vw, -40px); --ratio: 4 / 5; }
.projects:has(input[name="sector"][value="Health and fitness"]:checked) & .pcard[data-group="Health and fitness"]:nth-child(4n+4 of [data-group="Health and fitness"]) { --col: 6 / span 7; --mt: 0px; --ratio: 16 / 11; }
.projects:has(input[name="sector"][value="Trades and industry"]:checked) & .pcard:not([data-group="Trades and industry"]) { display: none; }
.projects:has(input[name="sector"][value="Trades and industry"]:checked) & .pcard[data-group="Trades and industry"]:nth-child(4n+1 of [data-group="Trades and industry"]) { --col: 1 / span 7; --mt: 0px; --ratio: 16 / 11; }
.projects:has(input[name="sector"][value="Trades and industry"]:checked) & .pcard[data-group="Trades and industry"]:nth-child(4n+2 of [data-group="Trades and industry"]) { --col: 9 / span 4; --mt: clamp(96px, 12vw, 200px); --ratio: 4 / 5; }
.projects:has(input[name="sector"][value="Trades and industry"]:checked) & .pcard[data-group="Trades and industry"]:nth-child(4n+3 of [data-group="Trades and industry"]) { --col: 1 / span 4; --mt: clamp(-120px, -8vw, -40px); --ratio: 4 / 5; }
.projects:has(input[name="sector"][value="Trades and industry"]:checked) & .pcard[data-group="Trades and industry"]:nth-child(4n+4 of [data-group="Trades and industry"]) { --col: 6 / span 7; --mt: 0px; --ratio: 16 / 11; }
.projects:has(input[name="sector"][value="Professional services"]:checked) & .pcard:not([data-group="Professional services"]) { display: none; }
.projects:has(input[name="sector"][value="Professional services"]:checked) & .pcard[data-group="Professional services"]:nth-child(4n+1 of [data-group="Professional services"]) { --col: 1 / span 7; --mt: 0px; --ratio: 16 / 11; }
.projects:has(input[name="sector"][value="Professional services"]:checked) & .pcard[data-group="Professional services"]:nth-child(4n+2 of [data-group="Professional services"]) { --col: 9 / span 4; --mt: clamp(96px, 12vw, 200px); --ratio: 4 / 5; }
.projects:has(input[name="sector"][value="Professional services"]:checked) & .pcard[data-group="Professional services"]:nth-child(4n+3 of [data-group="Professional services"]) { --col: 1 / span 4; --mt: clamp(-120px, -8vw, -40px); --ratio: 4 / 5; }
.projects:has(input[name="sector"][value="Professional services"]:checked) & .pcard[data-group="Professional services"]:nth-child(4n+4 of [data-group="Professional services"]) { --col: 6 / span 7; --mt: 0px; --ratio: 16 / 11; }
.projects:has(input[name="sector"]:not([value="All"]):checked) & .pquote { display: none; }
@media (max-width: 1000px) {
  & .pcard { --col: 1 / -1 !important; --mt: 0px !important; --ratio: 16 / 11 !important; }
}
/* Phones: cards spaced by the page gutter. */
@media (max-width: 767px) { row-gap: var(--gutter); }
}
.mobile-menu {
  --ox: calc(100% - var(--gutter) - 24px);
--oy: 44px;
position: fixed;
inset: 0;
z-index: 60;
isolation: isolate;
overflow: hidden;
display: flex;
flex-direction: column;
padding: 12px var(--gutter) 36px;
background: var(--neutral);
color: var(--text-light);
visibility: hidden;
clip-path: circle(0px at var(--ox) var(--oy));
transition: clip-path 0.6s var(--ease-reveal), visibility 0s linear 0.6s;
&.is-open { visibility: visible; clip-path: circle(150vmax at var(--ox) var(--oy)); transition: clip-path 0.75s var(--ease-reveal); }
&::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 20%, transparent) 1.7px, transparent 2.2px) 0 0 / 15px 15px;
  mask-image: radial-gradient(120% 75% at 100% 100%, #000, transparent 70%);
}
& a:focus-visible { outline-color: var(--accent); }
@media (max-width: 640px) { --oy: 36px; }
@media (min-width: 1001px) { display: none; }
}
.svc-tick {
  flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
min-inline-size: 0;
min-block-size: 0;
inline-size: 32px;
block-size: 32px;
border-radius: 50%;
background: var(--accent);
color: var(--neutral);
& svg { inline-size: 15px; block-size: 15px; }
.svc-incl & { inline-size: 22px; block-size: 22px; margin-block-start: 2px; & svg { inline-size: 12px; block-size: 12px; } }
}
.card-white {
  background: #ffffff;
border-radius: var(--radius-l);
}
.yn-group {
  display: flex;
flex-direction: column;
}
.testimonial__figure {
  grid-column: 2 / span 10;
display: flex;
flex-direction: column;
gap: clamp(36px, 4vw, 56px);
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: none;
@media (max-width: 1000px) { grid-column: 1 / -1; }
}
.testimonial__cite {
  display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
margin: 0;
font-size: 1rem;
line-height: 1.5;
color: var(--text-dark);
& strong { font-weight: 600; }
& span { color: var(--secondary); }
}
.quote-band {
  --inset: var(--gutter);
position: relative;
isolation: isolate;
margin-block-start: var(--section-space-m);
&::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #ffffff;
  clip-path: inset(0 0 round var(--radius-l));
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    &::before { animation: hh-widen linear both; animation-timeline: view(); animation-range: entry 5% entry 75%; }
  }
}
}
.site-footer__side {
  grid-column: 10 / span 3;
display: flex;
flex-direction: column;
gap: 40px;
@media (max-width: 1000px) { grid-column: 7 / span 6; }
@media (max-width: 640px) { grid-column: 1 / -1; }
}
.gs-mini__btn {
  flex: none;
}
.gs-mini__price {
  font-size: 0.875rem;
line-height: 1.3;
color: color-mix(in srgb, var(--text-light) 75%, transparent);
font-variant-numeric: tabular-nums;
& b { font-weight: 600; color: var(--text-light); }
}
.svc-cases {
  display: flex;
flex-direction: column;
gap: clamp(56px, 6vw, 96px);
}
.svc-case__media {
  position: relative;
isolation: isolate;
overflow: hidden;
aspect-ratio: 4 / 3;
border-radius: var(--radius-l);
background: var(--base-ultra-light, #e9ebe8);
& img { position: absolute; inset: -6vh 0 auto; inline-size: 100%; block-size: calc(100% + 12vh); max-inline-size: none; object-fit: cover; }
}
.site-footer__top {
  display: grid;
grid-template-columns: var(--grid-12);
column-gap: 24px;
row-gap: 48px;
}
.gs-card {
  display: flex;
flex-direction: column;
gap: 28px;
padding: clamp(28px, 3.4vw, 48px);
&[hidden] { display: none; }
}
.mobile-menu__link {
  display: inline-flex;
align-items: center;
min-block-size: 56px;
font-family: var(--heading-font-family);
font-weight: 500;
font-size: clamp(2.25rem, 10vw, 3rem);
line-height: 1.1;
letter-spacing: -0.025em;
text-decoration: none;
color: var(--text-light);
&[aria-current] { color: var(--accent); }
&:hover { color: var(--text-light); }
&[aria-current]:hover { color: var(--accent); }
&:hover, &:focus-visible { text-decoration: none; }
}
.hero-ctas {
  grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.work-card__media {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-l);
  background: var(--tertiary);
  /* Brand tint: between the photo (z -2) and the bottom gradient (z 0). */
  &::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(135deg, color-mix(in oklch, var(--tint, var(--neutral)) 82%, transparent), color-mix(in oklch, var(--tint-2, var(--tint, var(--neutral))) 58%, transparent));
    pointer-events: none;
  }
  &::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    z-index: 0;
    block-size: 45%;
    background: linear-gradient(to top, color-mix(in srgb, var(--neutral) 42%, transparent), transparent);
    pointer-events: none;
  }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      animation: hh-open linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 35%;
    }
  }
  /* Phones: no fixed ratio; padding sizes the card around the inset video and caption. */
  @media (max-width: 640px) {
    aspect-ratio: unset;
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 40px 20px 20px;
  }
}
.thanks-step {
  display: grid;
grid-template-columns: 64px minmax(0, 1fr) auto;
column-gap: 24px;
align-items: start;
padding: 32px var(--step-x);
border-block-start: 1px solid var(--border-color-dark);
&:last-child { border-block-end: 1px solid var(--border-color-dark); }
& canvas { position: absolute; inset: 0; z-index: -1; display: none; inline-size: 100%; block-size: 100%; pointer-events: none; }
& h3 { margin: 0 0 8px; }
& p { margin: 0; max-inline-size: 52ch; font-size: clamp(1.05rem, 1rem + 0.2vw, 1.2rem); line-height: 1.55; color: var(--secondary); }
@media (max-width: 1000px) { grid-template-columns: 48px minmax(0, 1fr); }
}
.pquote {
  order: 19;
grid-column: 1 / -1;
& .testimonial { padding-inline: 0; }
}
.svc-case__note {
  margin: 0;
font-size: 0.875rem;
line-height: 1.5;
color: var(--secondary);
}
.gs-fine {
  margin: 0;
font-size: 0.8125rem;
line-height: 1.5;
color: color-mix(in srgb, var(--text-light) 65%, transparent);
}
.care-plans__intro {
  grid-column: 7 / span 6;
margin: 0;
@media (max-width: 1000px) { grid-column: 1 / -1; }
}
.care-never {
  /* 'A website is never finished' statement with its call to action (moved here from the About page's closing band). */
inline-size: 100%;
max-inline-size: var(--measure);
margin-inline: auto;
display: grid;
grid-template-columns: var(--grid-12);
column-gap: 24px;
& .statement { grid-column: 2 / span 10; text-wrap: balance; }
& .btn--primary { grid-column: 2 / span 10; justify-self: start; margin-block-start: clamp(28px, 3vw, 44px); }
@media (max-width: 1000px) { & .statement, & .btn--primary { grid-column: 1 / -1; } }
}
.form__label {
  font-size: 0.9375rem;
font-weight: 500;
color: var(--text-dark);
}
.work-card__btn {
  .work-card:hover &, .work-card:focus-visible & { background: var(--btn-background-hover); }
@media (max-width: 640px) { --btn-font-size: 0.875rem; --btn-padding-inline: 1.1429em; }
}
.hero__lede {
  grid-column: 1 / span 6;
margin: 0;
max-inline-size: 30ch;
font-size: var(--text-l);
line-height: 1.45;
color: var(--text-dark);
@media (max-width: 1000px) { grid-column: 1 / -1; }
}
.svc-duo__card {
  display: flex;
flex-direction: column;
overflow: hidden;
border-radius: var(--radius-l);
background: #ffffff;
}
.contact {
  inline-size: 100%;
max-inline-size: var(--measure);
margin-inline: auto;
display: grid;
grid-template-columns: var(--grid-12);
column-gap: 24px;
row-gap: 40px;
align-items: start;
}
.submit-card {
  grid-column: 5 / span 8;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: clamp(28px, 3.4vw, 48px);
& p { margin: 0; max-inline-size: 40ch; color: color-mix(in srgb, var(--text-light) 85%, transparent); }
@media (max-width: 1000px) { grid-column: 1 / -1; }
}
.studio__photo {
  position: relative;
  overflow: hidden;
  /* Content width (--measure), centred. */
inline-size: 100%;
max-inline-size: var(--measure);
margin: clamp(48px, 6vw, 96px) auto 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-l);
  background: var(--tertiary);
  min-block-size: 0;
  & img {
    /* Oversized for data-parallax="0.12" (up to 6vh either way). */
    position: absolute;
    inset: -7vh 0 auto;
    inline-size: 100%;
    block-size: calc(100% + 14vh);
    max-inline-size: none;
    object-fit: cover;
  }
  @media (max-width: 640px) {
    aspect-ratio: 4 / 3;
    border-radius: var(--radius);
  }
}
.cta {
  padding-block: 0 clamp(56px, 6vw, 104px);
}
.visually-hidden {
  position: absolute !important;
inline-size: 1px;
block-size: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.thanks-link {
  display: flex;
flex-direction: column;
justify-content: space-between;
gap: 48px;
min-block-size: 240px;
padding: clamp(28px, 3vw, 40px);
border-radius: var(--radius-l);
background: #ffffff;
color: inherit;
text-decoration: none;
transition: transform 0.35s var(--ease-brand);
& p { margin: 8px 0 0; max-inline-size: 32ch; color: var(--secondary); }
&:hover, &:focus-visible { transform: translateY(-4px); color: inherit; text-decoration: none; }
&:hover .service__go, &:focus-visible .service__go { background: var(--neutral); color: var(--accent); box-shadow: none; }
}
.projects {
  inline-size: 100%;
max-inline-size: var(--measure);
margin-inline: auto;
/* No bottom padding: the section's own padding and the CTA band's margin already space it (it was stacking a third gap). */
}
.mobile-menu__social {
  display: flex;
gap: 22px;
font-size: 0.9375rem;
& a { color: var(--text-light-muted); text-decoration: none; }
& a:hover { color: var(--text-light); }
& a:hover, & a:focus-visible { text-decoration: none; }
}
.svc-sectors {
  margin: 0;
padding: 0;
list-style: none;
font-family: var(--heading-font-family);
font-size: clamp(1.5rem, 1.05rem + 1.6vw, 2.6rem);
font-weight: 400;
line-height: 1.25;
letter-spacing: -0.02em;
text-wrap: pretty;
color: var(--text-dark);
& li { display: inline; }
& li:not(:last-child)::after { content: " / "; color: var(--accent); }
}
.testimonial {
  padding-block: clamp(88px, 9vw, 152px);
@media (max-width: 1000px) { padding-inline: calc(var(--gutter) + 24px); }
/* Phones: less air around the quote. */
@media (max-width: 767px) { padding-block: 56px; }
}
.care-why {
  inline-size: 100%;
max-inline-size: var(--measure);
margin-inline: auto;
display: grid;
grid-template-columns: var(--grid-12);
column-gap: 24px;
row-gap: 40px;
align-items: start;
}
.form__group {
  display: flex;
flex-direction: column;
gap: 28px;
animation: hh-fade 0.5s var(--ease-brand) both;
&[hidden] { display: none; }
}
.stats__item {
  /* Three across, figure over label, divided by a rule between columns. */
display: flex;
flex-direction: column;
gap: 12px;
padding-inline: clamp(16px, 2vw, 32px);
&:first-child { padding-inline-start: 0; }
& + & { border-inline-start: 1px solid var(--border-color-dark); }
@media (max-width: 640px) {
  padding-inline: 0;
  & + & { border-inline-start: 0; border-block-start: 1px solid var(--border-color-dark); margin-block-start: 20px; padding-block-start: 20px; }
}
}
.about__title {
  margin: 0;
font-size: var(--h2);
}
.care-plans__title {
  grid-column: 1 / span 6;
@media (max-width: 1000px) { grid-column: 1 / -1; }
}
.gs-mini__text {
  display: flex;
flex-direction: column;
gap: 2px;
min-inline-size: 0;
}
.site-header__bar--3 {
  top: 29.9px;
inline-size: 14px;
transform: translateX(calc(-50% - 5px));
/* Hover nudge: real pointers only and never while open (see bar 1). */
@media (hover: hover) { .site-header:not(.menu-open) .site-header__toggle:hover & { transform: translateX(calc(-50% - 1px)); } }
.menu-open & { top: 22.7px; inline-size: 24px; transform: translateX(-50%) rotate(-45deg); }
}
.cta-card {
  position: relative;
isolation: isolate;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: clamp(36px, 4vw, 56px);
inline-size: 100%;
margin-inline: auto;
padding: clamp(64px, 9vw, 152px) clamp(28px, 6vw, 104px);
border-radius: var(--radius-l);
background: var(--neutral);
color: var(--text-light);
& a:focus-visible { outline-color: var(--accent); }
}
.gs-options {
  display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
@media (max-width: 640px) { grid-template-columns: minmax(0, 1fr); }
}
.site-footer {
  /* Tucks up behind the rounded bottom of .site-main. */
margin-block-start: calc(var(--radius-l) * -1);
padding-block: var(--radius-l) 0;
padding-inline: var(--gutter);
background: var(--neutral);
color: var(--text-light);
& a:focus-visible { outline-color: var(--accent); }
/* Reveal: site.js adds .hh-footer-reveal when the footer fits on screen. The footer then sits pinned
   under .site-main (z-index 1), so the page slides away to uncover it; site.js drifts the content in. */
&.hh-footer-reveal { position: sticky; inset-block-end: 0; z-index: 0; overflow: hidden; }
}
.form__pill-tick {
  min-inline-size: 0;
min-block-size: 0;
inline-size: 8px;
block-size: 8px;
border-radius: 50%;
box-shadow: inset 0 0 0 1.5px currentColor;
opacity: 0.5;
transition: background-color var(--transition-duration) var(--transition-timing), opacity var(--transition-duration) var(--transition-timing);
.form__pill:has(input:checked) & { background: var(--accent); box-shadow: none; opacity: 1; }
}
.faq__icon {
  min-inline-size: 0;
min-block-size: 0;
position: relative;
flex: none;
inline-size: 36px;
block-size: 36px;
border-radius: 50%;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--neutral) 20%, transparent);
transition: background-color 0.25s ease-out, transform 0.35s var(--ease-brand);
&::before, &::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  inline-size: 12px;
  block-size: 1.8px;
  border-radius: 2px;
  background: var(--neutral);
  transform: translate(-50%, -50%);
  transition: transform 0.35s var(--ease-brand), background-color 0.25s;
}
&::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open]:not(.is-closing) & { background: var(--neutral); transform: rotate(180deg); }
.faq__item[open]:not(.is-closing) &::before { background: var(--accent); }
.faq__item[open]:not(.is-closing) &::after { background: var(--accent); transform: translate(-50%, -50%) rotate(0deg); }
}
.site-header__actions {
  display: flex;
align-items: center;
gap: 20px;
pointer-events: auto;
/* Phones/tablets: once scrolled, the HH mark and menu button sit in a pill like the desktop menu. */
@media (max-width: 1000px) {
  gap: 0;
  border-radius: var(--radius-circle);
  transition: background-color 0.35s ease-out, box-shadow 0.35s ease-out, padding 0.35s var(--ease-brand), margin 0.35s var(--ease-brand);
  /* Extra room inside the pill without moving the button: the right padding is cancelled by a matching negative margin. */
  .is-scrolled & { padding-inline: 8px; margin-inline-end: -8px; background: color-mix(in srgb, var(--neutral) 84%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: var(--box-shadow-float); }
  /* Menu open: only the pill's fill fades; its size stays put so the menu button doesn't move as it turns into the X. */
  .menu-open & { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
}
.health {
  inline-size: 100%;
max-inline-size: var(--measure);
margin-inline: auto;
display: flex;
flex-direction: column;
gap: clamp(48px, 5vw, 80px);
padding: clamp(32px, 5vw, 80px);
}
.cta-band {
  --inset: var(--gutter);
position: relative;
isolation: isolate;
margin-block-start: var(--section-space-m);
&::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #ffffff;
  clip-path: inset(0 0 round var(--radius-l));
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    &::before { animation: hh-widen linear both; animation-timeline: view(); animation-range: entry 5% entry 75%; }
  }
}
& .cta { padding-block: clamp(56px, 6vw, 104px); }
&[data-variant="dark"] { margin-block-start: 0; background: var(--neutral); }
& .cta-band__quote + .cta, & .cta-band__closing + .cta { padding-block-start: 0; }
& .cta-band__quote:has(+ .cta-band__closing) { padding-block-end: clamp(64px, 7vw, 112px); }
&[data-variant="dark"]::before { background: var(--body-bg-color); }
&[data-variant="plain"]::before { display: none; }
/* Phones: closer to the section above. */
@media (max-width: 767px) { margin-block-start: 40px; &[data-variant="dark"] { margin-block-start: 0; } }
/* Plain band (no light wrapper): the section above already gives the gap, so no extra top margin.
   Exception: the Projects grid section has no bottom padding, so the band keeps its margin there. */
@media (min-width: 768px) {
  &[data-variant="plain"] { margin-block-start: 0; }
  .page-section:has(> .projects) + &[data-variant="plain"] { margin-block-start: var(--section-space-m); }
  /* ...and an opening testimonial doesn't add its own top padding on top of that gap. */
  &[data-variant="plain"] > .cta-band__quote:first-child { padding-block-start: 0; }
}
}
.site-header {
  position: sticky;
inset-block-start: 0;
z-index: 20;
padding-inline: var(--gutter);
pointer-events: none;
&.menu-open { z-index: 70; }
}
.inclusions__list {
  grid-column: 5 / span 8;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: 24px;
list-style: none;
margin: 0;
padding: 0;
@media (max-width: 1000px) { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { grid-template-columns: minmax(0, 1fr); }
}
.site-main {
  /* Rounds into the footer: the footer tucks 24px up behind it. */
position: relative;
z-index: 1;
background: var(--body-bg-color);
border-radius: 0 0 var(--radius-l) var(--radius-l);

}
.site-footer__logo {
  display: block;
line-height: 0;
color: var(--text-light);
& svg { block-size: 39.6px; inline-size: auto; }
& .logo-slash { fill: var(--accent); }
&:hover, &:focus-visible { text-decoration: none; }
}
.pcard__media {
  position: relative;
isolation: isolate;
overflow: hidden;
aspect-ratio: var(--ratio, 16 / 11);
border-radius: var(--radius-l);
background: var(--base-ultra-light, #e9ebe8);
&::after { content: ""; position: absolute; inset: auto 0 0; z-index: 1; block-size: 50%; background: linear-gradient(to top, color-mix(in srgb, var(--neutral) 50%, transparent), transparent); pointer-events: none; }
& video.work-card__video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; aspect-ratio: auto; transform: none; border-radius: 0; box-shadow: none; background: none; object-fit: cover; z-index: 0; transition: transform 0.9s var(--ease-brand); }
}
.svc-facts {
  display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
@media (max-width: 640px) { grid-template-columns: minmax(0, 1fr); }
}
.gs-switch {
  flex: none;
position: relative;
min-inline-size: 0;
min-block-size: 0;
inline-size: 48px;
block-size: 28px;
border-radius: var(--radius-circle);
background: color-mix(in srgb, var(--neutral) 18%, transparent);
transition: background-color 0.2s ease-out;
&::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 22px; block-size: 22px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 3px color-mix(in srgb, var(--neutral) 25%, transparent); transition: transform 0.25s var(--ease-brand), background-color 0.2s ease-out; }
.gs-addon:has(input:checked) & { background: var(--neutral); }
.gs-addon:has(input:checked) &::after { transform: translateX(20px); background: var(--accent); }
}
.form__split {
  min-inline-size: 0;
min-block-size: 0;
block-size: 1px;
margin-block: 8px;
background: var(--border-color-dark);
}
.site-header__toggle {
  display: none;
position: relative;
inline-size: 48px;
block-size: 48px;
padding: 0;
border: 0;
background: transparent;
color: var(--text-dark);
border-radius: var(--radius-circle);
cursor: pointer;
transition: color 0.35s ease-out;
/* Light once it sits in the dark pill (scrolled) or over the open menu. */
.is-scrolled &, .menu-open & { color: var(--text-light); }
&:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
@media (max-width: 1000px) { display: inline-flex; }
}
.gs-mini {
  /* Phones and tablets: a slim summary pinned to the bottom while the form scrolls; hides once the full summary card is in view. */
position: fixed;
inset-inline: var(--gutter);
inset-block-end: calc(12px + env(safe-area-inset-bottom));
z-index: 40;
display: none;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 12px 12px 12px 20px;
border-radius: var(--radius-l);
background: var(--neutral);
color: var(--text-light);
box-shadow: 0 12px 32px color-mix(in srgb, var(--neutral) 30%, transparent);
translate: 0 calc(100% + 24px);
opacity: 0;
transition: translate 0.45s var(--ease-brand), opacity 0.3s ease-out;
&.is-on { translate: 0 0; opacity: 1; }
@media (max-width: 1000px) { display: flex; }
@media (prefers-reduced-motion: reduce) { transition: opacity 0.2s; translate: 0 0; }
}
.thanks-step__end {
  align-self: center;
@media (max-width: 1000px) { grid-column: 2; justify-self: start; margin-block-start: 20px; }
}
.site-header__menu {
  display: flex;
align-items: center;
gap: 2px;
list-style: none;
margin: 0;
padding: 5px;
/* Soft, see-through dark with a blur behind. */
background: color-mix(in srgb, var(--neutral) 84%, transparent);
-webkit-backdrop-filter: blur(16px) saturate(1.4);
backdrop-filter: blur(16px) saturate(1.4);
border-radius: var(--radius-circle);
transition: box-shadow 0.35s ease-out;
.is-scrolled & { box-shadow: var(--box-shadow-float); }
}
.testimonial__inner {
  display: grid;
grid-template-columns: var(--grid-12);
column-gap: 24px;
inline-size: 100%;
margin-inline: auto;
}
.nf-big {
  position: absolute;
inset-inline-end: max(0px, (100% - var(--measure)) / 2);
inset-block-end: clamp(40px, 5vw, 80px);
margin: 0;
font-family: var(--heading-font-family);
font-size: clamp(8rem, 4rem + 16vw, 22rem);
font-weight: 500;
line-height: 0.8;
letter-spacing: -0.05em;
color: transparent;
-webkit-text-stroke: 2px var(--accent);
pointer-events: none;
user-select: none;
animation: hh-fade 1s 0.3s var(--ease-brand) both;
@media (max-width: 1000px) { position: static; display: block; margin-block-start: clamp(40px, 8vw, 64px); font-size: clamp(7rem, 30vw, 12rem); }
}
.gs-summary__unit {
  margin-block-start: 8px;
font-size: 0.8125rem;
line-height: 1.35;
white-space: nowrap;
color: color-mix(in srgb, var(--text-light) 70%, transparent);
}
.contact__form {
  padding: clamp(28px, 4vw, 56px);
&[hidden] { display: none; }
/* Phones: edge to edge (no double gutter). */
@media (max-width: 640px) { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); border-radius: var(--radius-l); }
}
.ticks {
  display: flex;
flex-direction: column;
list-style: none;
margin: 0;
padding: 0;
}
.gs-summary__eyebrow {
  font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: color-mix(in srgb, var(--text-light) 62%, transparent);
}
.pcard__extra {
  max-block-size: 0;
overflow: hidden;
opacity: 0;
font-size: 0.875rem;
color: var(--accent);
transition: max-block-size 0.35s var(--ease-brand), opacity 0.25s ease-out;
&:empty { display: none; }
}
.hero__soft {
  font-weight: 400;
color: var(--secondary);
}
.ticks__item {
  display: flex;
align-items: flex-start;
gap: 12px;
padding-block: 12px;
font-size: 0.9375rem;
line-height: 1.45;
& + & { border-block-start: 1px solid var(--border-color-dark); }
}
.q-card {
  display: flex;
flex-direction: column;
gap: 18px;
padding: 32px;
text-decoration: none;
color: var(--text-light);
& p { margin: 0; color: color-mix(in srgb, var(--text-light) 85%, transparent); }
&:hover, &:focus-visible { color: var(--text-light); text-decoration: none; }
}
.sig-code {
  margin: 0;
max-block-size: 132px;
overflow: auto;
padding: 14px 16px;
border-radius: 12px;
background: #16181a;
color: rgba(244,245,243,.86);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 12.5px;
line-height: 1.55;
white-space: pre-wrap;
word-break: break-all;
}
.svc-card {
  display: flex;
flex-direction: column;
gap: 14px;
padding: clamp(24px, 2.6vw, 36px);
border-radius: var(--radius-l);
background: #ffffff;
& h3 { margin: 6px 0 0; }
& p { margin: 0; line-height: 1.55; color: var(--secondary); }
}
.gs-submit {
  --btn-width: 100%;
inline-size: 100%;
justify-content: center;
margin-block-start: 4px;
}
.thanks-step__tick {
  display: none;
align-items: center;
justify-content: center;
inline-size: 28px;
block-size: 28px;
margin-block-start: -4px;
border-radius: 50%;
background: var(--accent);
color: var(--neutral);
& svg { inline-size: 14px; block-size: 14px; }
}
.svc-cardlink__end {
  grid-column: 9 / span 4;
justify-self: end;
}
.form__foot {
  display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-block-start: 8px;
}
.faq__item {
  border-block-start: 1px solid var(--border-color-dark);
&:last-child { border-block-end: 1px solid var(--border-color-dark); }
}
.community__logo {
  /* Each logo sets its own height (--size) so the four read at a similar weight. */
display: block;
block-size: var(--size, 56px);
inline-size: auto;
max-inline-size: 82%;
object-fit: contain;
/* No rounded corners or clipping (the site-wide image style rounds them, which cut into logos that run to their edges). */
border-radius: 0;
overflow: visible;
transition: transform 0.5s var(--ease-brand);
@media (max-width: 640px) { block-size: calc(var(--size, 56px) * 0.8); }
}
.page-hero__foot {
  inline-size: 100%;
max-inline-size: var(--measure);
margin-inline: auto;
display: grid;
grid-template-columns: var(--grid-12);
column-gap: 24px;
row-gap: 24px;
align-items: end;
margin-block-start: clamp(40px, 5vw, 80px);
animation: hh-fade 1s 0.35s var(--ease-brand) both;
}
.lw-form {
  /* Compact option cards: body-font titles. */
& .gs-opt { padding: 18px 20px; }
& .gs-opt__top b { font-family: var(--text-font-family); font-size: 1rem; letter-spacing: 0; }
& .gs-addon { padding: 18px 20px; }
& .gs-notice p + p { margin-block-start: 8px; }
& .form__control:user-invalid { border-color: #b3261e; }
& .gs-opt:has(input:user-invalid) { box-shadow: inset 0 0 0 1px #b3261e; }
}
.gs-notice {
  display: flex;
gap: 16px;
padding: 22px 24px;
border-radius: 16px;
background: var(--body-bg-color);
animation: hh-fade 0.5s var(--ease-brand) both;
&[hidden] { display: none; }
& i { flex: none; display: inline-flex; align-items: center; justify-content: center; inline-size: 28px; block-size: 28px; border-radius: 50%; background: var(--accent); font-size: 0.875rem; font-style: normal; font-weight: 600; color: var(--neutral); }
& b { display: block; margin-block-end: 4px; font-weight: 500; }
& p { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--secondary); }
& p + p { margin-block-start: 8px; }
}
.title-l {
  margin: 0;
font-family: var(--heading-font-family);
font-weight: 500;
font-size: var(--h2);
line-height: 1;
letter-spacing: -0.03em;
text-wrap: balance;
color: var(--text-dark);
}
.site-header__inner {
  display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
inline-size: 100%;
margin-inline: auto;
block-size: 88px;
@media (max-width: 640px) { block-size: 72px; }
}
.svc-fact {
  display: flex;
flex-direction: column;
gap: 16px;
padding: clamp(28px, 3.4vw, 48px);
border-radius: var(--radius-l);
background: #ffffff;
& p { margin: 0; max-inline-size: 44ch; line-height: 1.6; color: var(--secondary); }
}
.submit-row {
  inline-size: 100%;
max-inline-size: var(--measure);
margin-inline: auto;
display: grid;
grid-template-columns: var(--grid-12);
column-gap: 24px;
}
.lw-chip {
  grid-column: 1 / -1;
justify-self: start;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 16px 8px 8px;
border-radius: var(--radius-circle);
background: #ffffff;
box-shadow: inset 0 0 0 1px var(--border-color-dark);
font-size: 0.875rem;
color: var(--secondary);
animation: hh-fade 0.5s var(--ease-brand) both;
&[hidden] { display: none; }
& i { display: inline-flex; align-items: center; justify-content: center; inline-size: 26px; block-size: 26px; border-radius: 50%; background: var(--accent); color: var(--neutral); }
& svg { inline-size: 13px; block-size: 13px; }
& b { font-weight: 500; color: var(--text-dark); }
}
.lw-email {
  /* The access email: one white pill (email + copy icon). Click anywhere on it to copy. */
position: relative;
display: inline-flex;
align-items: center;
gap: 2px;
vertical-align: middle;
margin-block: -4px;
padding: 2px 4px 2px 0;
border: 0;
border-radius: 8px;
background: #ffffff;
color: var(--text-dark);
font: inherit;
cursor: pointer;
transition: background-color 0.2s ease-out;
& code { font: 500 0.875rem/1 var(--text-font-family); color: var(--text-dark); background: none; padding: 6px 4px 6px 8px; }
&:hover, &:focus-visible { background: color-mix(in srgb, var(--accent) 22%, #ffffff); }
&:focus-visible { outline: 2px solid var(--neutral); outline-offset: 2px; }
/* 'Copied' bubble. */
&::after { content: "Copied"; position: absolute; inset-block-end: calc(100% + 6px); inset-inline-start: 50%; translate: -50% 4px; padding: 4px 8px; border-radius: 6px; background: var(--neutral); color: var(--text-light); font: 500 0.75rem/1 var(--text-font-family); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s ease-out, translate 0.2s ease-out; }
&[data-copied]::after { opacity: 1; translate: -50% 0; }
}
.form__help {
  margin: 0;
font-size: 0.875rem;
line-height: 1.45;
color: var(--secondary);
}
.legal {
  max-inline-size: 72ch;
margin-inline: auto;
/* Last section before the footer: leave room above the footer. */
padding-block-end: var(--section-space-m);
font-size: clamp(1.05rem, 1rem + 0.15vw, 1.125rem);
line-height: 1.65;
color: var(--text-dark);
& h2 { margin: clamp(40px, 4vw, 56px) 0 14px; }
& p { margin: 0 0 1em; }
& ul { margin: 0 0 1em; padding-inline-start: 1.25em; list-style: disc; }
& li > ul { margin: 0.5em 0 0; list-style: circle; }
& li { margin-block-end: 0.5em; }
& li::marker { color: var(--accent); }
& a { color: var(--text-dark); text-underline-offset: 3px; text-decoration-color: var(--accent); }
& b { font-weight: 600; }
}
.form__pill {
  position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
min-block-size: 44px;
padding-inline: 18px;
border-radius: var(--radius-circle);
background: #ffffff;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--neutral) 20%, transparent);
font-size: 0.9375rem;
font-weight: 500;
color: var(--text-dark);
cursor: pointer;
user-select: none;
transition: background-color var(--transition-duration) var(--transition-timing), color var(--transition-duration) var(--transition-timing), box-shadow var(--transition-duration) var(--transition-timing);
&:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--neutral) 40%, transparent); }
&:has(input:checked) { background: var(--neutral); color: var(--text-light); box-shadow: none; }
&:has(input:focus-visible) { outline: 2px solid var(--neutral); outline-offset: 3px; }
}
.stats {
  display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
list-style: none;
margin: 0;
padding: 0;
@media (max-width: 640px) { grid-template-columns: minmax(0, 1fr); }
}
.pcard__sector {
  font-size: 0.9375rem;
color: color-mix(in srgb, var(--text-light) 85%, transparent);
}
.service__row {
  display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.client-wall__item {
  position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
min-inline-size: 0;
min-block-size: 0;
padding-inline: 16px;
text-align: center;
font-family: var(--heading-font-family);
font-weight: 500;
font-size: clamp(0.95rem, 0.85rem + 0.35vw, 1.15rem);
line-height: 1.15;
letter-spacing: -0.01em;
color: color-mix(in srgb, var(--text-light) 78%, transparent);
opacity: 0;
transform: translateY(100%);
transition: none;
&.client-wall__item--on, &.client-wall__item--out {
  transition: transform 0.8s cubic-bezier(0.65, 0, 0.25, 1) calc(var(--i) * 110ms), opacity 0.6s ease calc(var(--i) * 110ms);
}
&.client-wall__item--on { opacity: 1; transform: none; }
&.client-wall__item--out { opacity: 0; transform: translateY(-100%); }
/* Client logos share one 320x128 canvas (balanced at export), so each fills the tile the same way. */
& img, & svg { display: block; inline-size: min(100%, 240px); block-size: auto; aspect-ratio: 320 / 128; }
}
.vc-tag {
  position: absolute;
inset-inline-start: 24px;
inset-block-end: 12px;
display: inline-flex;
align-items: center;
gap: 8px;
block-size: 32px;
padding: 0 14px;
border-radius: 999px;
background: var(--vc-ash);
color: var(--vc-paper);
font-size: 13px;
font-weight: 500;
&::before { content: ''; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--accent); }
}
.qsec__num {
  font-size: 0.875rem;
font-weight: 500;
font-variant-numeric: tabular-nums;
color: var(--secondary);
}
.q-card__go {
  display: inline-flex;
align-items: center;
gap: 10px;
font-weight: 500;
}
.gs-card__n {
  flex: none;
font-size: 0.875rem;
font-weight: 500;
font-variant-numeric: tabular-nums;
color: var(--secondary);
}
.hero-band {
  position: relative;
isolation: isolate;
}
.mobile-menu__top {
  flex-shrink: 0;
block-size: 56px;
margin-block-end: clamp(56px, 12vh, 120px);
}
.review-badge {
  display: inline-flex;
align-self: flex-start;
align-items: center;
gap: 16px;
padding: 14px 20px 14px 16px;
border: 1px solid var(--border-color-light);
border-radius: var(--radius);
color: var(--text-light);
text-decoration: none;
transition: border-color var(--transition-duration) var(--transition-timing);
&:hover { color: var(--text-light); border-color: color-mix(in srgb, var(--base) 40%, transparent); }
&:hover, &:focus-visible { text-decoration: none; }
}
.site-header__bar--2 {
  top: 22.7px;
inline-size: 25px;
transform: translateX(-50%);
.menu-open & { opacity: 0; transform: translateX(-50%) scaleX(0.2); }
}
.studio__statement {
  grid-column: 1 / span 11;
@media (max-width: 1000px) { grid-column: 1 / -1; }
}
.pcard__name {
  margin: 0;
font-family: var(--text-font-family);
font-weight: 500;
font-size: clamp(1rem, 0.92rem + 0.35vw, 1.25rem);
line-height: 1.3;
color: var(--text-light);
}
.legal__updated {
  margin: 0 0 clamp(28px, 3vw, 40px);
font-size: 0.875rem;
color: var(--secondary);
text-align: center;
}
.sig-btn {
  display: inline-flex;
align-items: center;
gap: 10px;
block-size: 44px;
padding: 0 18px;
border: 0;
border-radius: 999px;
background: #16181a;
color: #f4f5f3;
font: 500 15px/1 var(--text-font-family, inherit);
cursor: pointer;
transition: background-color 0.2s ease-out, color 0.2s ease-out, box-shadow 0.2s ease-out;
& svg { inline-size: 16px; block-size: 16px; flex: none; }
&:hover { background: #2c3034; }
&.is-copied { background: var(--accent); color: #16181a; }
&.sig-btn--ghost { background: transparent; color: #16181a; box-shadow: inset 0 0 0 1px rgba(22,24,26,.2); }
&.sig-btn--ghost:hover { background: #16181a; color: #f4f5f3; box-shadow: none; }
&.sig-btn--ghost.is-copied { background: var(--accent); color: #16181a; box-shadow: none; }
&:focus-visible { outline: 2px solid #16181a; outline-offset: 3px; }
}
.hl {
  /* Mint marker highlight behind a word or phrase. */
padding: 0 0.06em;
background: linear-gradient(transparent 60%, color-mix(in srgb, var(--accent) 60%, transparent) 60%, color-mix(in srgb, var(--accent) 60%, transparent) 92%, transparent 92%);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.site-header__cta {
  transition: background-color var(--transition-duration) var(--transition-timing), box-shadow 0.35s ease-out, opacity 0.35s ease-out, transform 0.35s var(--ease-brand);
.is-scrolled & { box-shadow: var(--box-shadow-float); }
@media (max-width: 1000px) { --btn-display: none; display: none; }
/* Desktop: fades up and out once scrolled, with the logo. */
@media (min-width: 1001px) { .is-scrolled & { opacity: 0; transform: translateY(-8px); pointer-events: none; } }
}
.health__includes {
  margin-block-end: 8px;
}
.svc-case {
  display: grid;
grid-template-columns: var(--grid-12);
column-gap: 24px;
row-gap: 32px;
align-items: center;
& .svc-case__media { grid-column: 1 / span 7; }
& .svc-case__body { grid-column: 9 / span 4; }
&.svc-case--flip .svc-case__media { grid-column: 6 / span 7; order: 2; }
&.svc-case--flip .svc-case__body { grid-column: 1 / span 4; order: 1; }
@media (max-width: 1000px) { & .svc-case__media, & .svc-case__body, &.svc-case--flip .svc-case__media, &.svc-case--flip .svc-case__body { grid-column: 1 / -1; order: 0; } }
}
.site-footer__contact {
  display: flex;
flex-direction: column;
gap: 6px;
margin: 0;
font-style: normal;
font-size: 0.9375rem;
line-height: 1.5;
color: var(--text-light-muted);
& a { color: var(--text-light); text-decoration: none; text-underline-offset: 4px; }
& a:hover, & a:focus-visible { color: var(--text-light); text-decoration: underline; text-decoration-color: var(--accent); }
}
.lw-badge {
  display: inline-flex;
align-items: center;
gap: 8px;
block-size: 30px;
padding-inline: 12px;
border-radius: var(--radius-circle);
background: color-mix(in srgb, var(--accent) 22%, transparent);
font-size: 0.8125rem;
font-weight: 500;
color: var(--text-dark);
&::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--accent); }
}
.community__head {
  grid-column: 1 / span 5;
display: flex;
flex-direction: column;
gap: 20px;
& .title-l { color: var(--text-light); }
& p { margin: 0; max-inline-size: 30ch; font-size: clamp(1.05rem, 1rem + 0.25vw, 1.25rem); color: color-mix(in srgb, var(--text-light) 62%, transparent); }
@media (max-width: 1000px) { grid-column: 1 / -1; }
}
.site-footer__legal {
  display: flex;
flex-wrap: wrap;
gap: 8px 28px;
}
.care-statement {
  /* One large statement: lead sentence in ink, the rest in the soft grey. */
grid-column: 1 / span 10;
margin: 0;
font-family: var(--heading-font-family);
font-weight: 400;
font-size: clamp(1.75rem, 1.1rem + 2vw, 3.25rem);
line-height: 1.12;
letter-spacing: -0.02em;
text-wrap: pretty;
color: var(--secondary);
& strong { font-weight: 500; color: var(--text-dark); }
@media (max-width: 1000px) { grid-column: 1 / -1; }
}
.svc-extras {
  margin: 28px 0 0;
color: var(--secondary);
& b { font-weight: 500; color: var(--text-dark); }
}
.lead-in {
  position: relative;
z-index: 1;
padding-block-end: var(--section-space-m);
background: var(--base);
border-radius: 0 0 var(--radius-l) var(--radius-l);
}
.vc-logo {
  display: block;
inline-size: 150px;
margin-block-end: clamp(24px, 4vw, 40px);
color: var(--vc-ash);
line-height: 0;
& svg { display: block; inline-size: 100%; block-size: auto; }
&:hover, &:focus-visible { text-decoration: none; }
}
.ticks__icon {
  flex: none;
inline-size: 16px;
block-size: 16px;
margin-block-start: 3px;
}
.page-hero__title {
  inline-size: 100%;
max-inline-size: var(--measure);
margin-inline: auto;
margin-block: 0;
font-size: clamp(3.125rem, 8.6vw, 9.5rem);
font-weight: 500;
line-height: 0.96;
letter-spacing: -0.035em;
.page-hero[data-variant="split"] & { font-size: clamp(3.1rem, 8vw, 8.5rem); }
}
.trust-card__stars {
  display: flex;
gap: 3px;
color: var(--neutral);
}
.thanks-steps {
  --step-x: clamp(28px, 3vw, 40px);
grid-column: 5 / span 8;
margin: 0;
padding: 0;
list-style: none;
@media (max-width: 1000px) { grid-column: 1 / -1; }
/* Highlighted step: the questionnaire after Contact, our assessment after the questionnaire, access after a care sign-up. */
:root:not([data-thanks="questionnaire"], [data-thanks="care"]) & .thanks-step--1, :is([data-thanks="questionnaire"], [data-thanks="care"]) & .thanks-step--2 {
  position: relative; isolation: isolate; overflow: hidden; margin-block-end: 8px;
  padding-block: clamp(28px, 3vw, 40px); border: 0; border-radius: var(--radius-l);
  background: var(--neutral); color: var(--text-light);
  & canvas { display: block; }
  & .thanks-step__n { color: color-mix(in srgb, var(--text-light) 62%, transparent); }
  & h3 { color: var(--text-light); }
  & p { color: color-mix(in srgb, var(--text-light) 80%, transparent); }
  & + .thanks-step { border-block-start: 0; }
}
/* After the questionnaire or a care sign-up, step 1 is done: dimmed, with a tick instead of its number. */
:is([data-thanks="questionnaire"], [data-thanks="care"]) & .thanks-step--1 {
  & h3, & p { opacity: 0.55; }
  & .thanks-step__num { display: none; }
  & .thanks-step__tick { display: inline-flex; }
}
}
.sig-card {
  display: flex;
flex-direction: column;
gap: 20px;
min-inline-size: 0;
padding: clamp(20px, 2.4vw, 28px);
border-radius: 24px;
background: #ffffff;
box-shadow: 0 1px 0 rgba(22,24,26,.04), 0 24px 60px -32px rgba(22,24,26,.22);
& h2 { margin: 0; font-family: var(--heading-font-family); font-weight: 500; font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.75rem); letter-spacing: -0.02em; }
& .sig-meta { margin: 4px 0 0; font-size: 14px; color: #5b5f63; }
}
.site-header__mark-item {
  /* Desktop, once scrolled: the HH mark slides into the left of the menu pill (the pill grows and stays centred). */
display: grid;
grid-template-columns: 0fr;
opacity: 0;
transition: grid-template-columns 0.5s var(--ease-brand), opacity 0.3s ease-out;
.is-scrolled & { grid-template-columns: 1fr; opacity: 1; transition-delay: 0s, 0.12s; }
@media (prefers-reduced-motion: reduce) { transition: none; }
}
.vc-halftone {
  position: absolute;
inset: 0 0 auto 0;
block-size: 62%;
z-index: -1;
pointer-events: none;
& canvas { inline-size: 100%; block-size: 100%; display: block; }
}
.community__org {
  /* A logo card that links to the organisation (new tab). */
display: grid;
place-items: center;
min-inline-size: 0;
min-block-size: clamp(132px, 13vw, 176px);
padding: 24px;
border-radius: var(--radius-l, 20px);
background: color-mix(in srgb, var(--text-light) 4%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-light) 12%, transparent);
transition: background-color 0.35s ease-out, box-shadow 0.35s ease-out;
&:hover, &:focus-visible { background: color-mix(in srgb, var(--text-light) 8%, transparent); box-shadow: inset 0 0 0 1px var(--accent); text-decoration: none; }
&:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
&:hover .community__logo, &:focus-visible .community__logo { transform: scale(1.04); }
}
.contact__aside {
  grid-column: 1 / span 4;
position: sticky;
inset-block-start: 120px;
display: flex;
flex-direction: column;
gap: 32px;
@media (max-width: 1000px) { grid-column: 1 / -1; position: static; order: 2; }
}
.vc-foot {
  margin: 28px 0 0;
text-align: center;
font-size: 14px;
color: var(--vc-muted);
& a { color: var(--vc-ash); font-weight: 500; text-underline-offset: 3px; }
}
.hero__line {
  display: block;
overflow: hidden;
padding-block-end: 0.06em;
margin-block-end: -0.06em;
& > span { display: block; animation: hh-rise 1s var(--ease-brand) both; }
&:nth-child(2) > span { animation-delay: 0.09s; }
}
.pcard {
  grid-column: var(--col, 1 / span 7);
margin-block-start: var(--mt, 0px);
display: flex;
flex-direction: column;
color: inherit;
text-decoration: none;
counter-increment: pcount;
&:hover, &:focus-visible { color: inherit; text-decoration: none; }
/* !important: GSAP (parallax) writes an inline scale: none on the image. */
&:hover .pcard__img, &:focus-visible .pcard__img { scale: 1.03 !important; }
&:hover .pcard__extra, &:focus-visible .pcard__extra { max-block-size: 24px; opacity: 1; }
/* No website: the card renders as a div (see the data source), so no Visit site button. */
&:not(a) .btn--primary { display: none; }
}
.gs-summary__num {
  font-family: var(--heading-font-family);
font-size: 2.25rem;
font-weight: 500;
line-height: 1;
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
color: var(--text-light);
}
.nf-code {
  display: inline-flex;
inline-size: max-content;
align-self: flex-start;
justify-self: start;
align-items: center;
gap: 10px;
block-size: 36px;
padding-inline: 16px;
margin-block-end: clamp(28px, 3vw, 44px);
/* Line up with the title, which is centred in the content column (var(--measure)). */
margin-inline-start: max(0px, (100% - var(--measure)) / 2);
border-radius: var(--radius-circle);
background: var(--neutral);
color: var(--text-light);
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0.04em;
animation: hh-pop 0.7s var(--ease-brand) both;
&::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--accent); }
}
.plan__btn {
  --btn-width: 100%;
}
.sig-page {
  /* Email signatures (/email-signatures/): internal tool page, noindex. Standalone like the business cards. */
position: relative;
min-block-size: 100vh;
padding: clamp(28px, 5vw, 64px) var(--gutter, 20px) clamp(56px, 7vw, 104px);
overflow: hidden;
isolation: isolate;
background: #f4f5f3;
color: #16181a;
}
.svc-cardlink {
  display: grid;
grid-template-columns: var(--grid-12);
column-gap: 24px;
row-gap: 24px;
align-items: end;
padding: clamp(32px, 4.4vw, 64px);
@media (max-width: 1000px) { & > * { grid-column: 1 / -1 !important; justify-self: start !important; } }
}
.lw-sub {
  display: flex;
flex-direction: column;
gap: 20px;
padding-block-start: 28px;
border-block-start: 1px solid var(--border-color-dark);
}
.hero__cta {
  grid-column: 10 / span 3;
justify-self: end;
@media (max-width: 1000px) { grid-column: 1 / -1; justify-self: start; }
}
.services {
  inline-size: 100%;
max-inline-size: var(--measure);
margin-inline: auto;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
column-gap: 24px;
row-gap: 56px;
margin-block-start: clamp(40px, 4vw, 64px);
@media (max-width: 1000px) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { grid-template-columns: minmax(0, 1fr); }
}
.cta-band__closing {
  /* Same full-width grid as the testimonial above, so the statement shares its left edge. */
inline-size: 100%;
margin-inline: auto;
display: grid;
grid-template-columns: var(--grid-12);
column-gap: 24px;
/* No section padding on top: it follows straight on from the quote. */
padding-block: 0 clamp(56px, 6vw, 96px);
}
.lw-rec {
  font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--secondary);
.gs-opt:has(input:checked) & { color: color-mix(in srgb, var(--text-light) 75%, transparent); }
}
:where([data-etch-element="container"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  max-inline-size: var(--content-width, 1366px);
  align-self: center; margin-inline: auto;
}
:where([data-etch-element="flex-div"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
}
:where([data-etch-element="iframe"]) {
  inline-size: 100%;
  height: auto;
 aspect-ratio: 16/9;
}
:where([data-etch-element="section"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.terms__head {
  grid-column: 1 / span 4;
@media (max-width: 1000px) { grid-column: 1 / -1; }
}
.site-header__logo {
  display: block;
line-height: 0;
color: var(--text-dark);
pointer-events: auto;
transition: opacity 0.35s ease-out, transform 0.35s var(--ease-brand), color 0.35s ease-out;
& svg { block-size: 33px; inline-size: auto; }
& .logo-slash { transition: fill 0.35s ease-out; }
/* Fades up and out once scrolled: the HH mark appears in the menu pill (desktop) or beside the menu button (phones/tablets) instead. */
.is-scrolled & { opacity: 0; transform: translateY(-8px); pointer-events: none; }
/* Menu open: the logo turns light. */
.menu-open & { opacity: 1; transform: none; pointer-events: auto; color: var(--text-light); transition-delay: 0s, 0s, 0.12s; }
.menu-open & .logo-slash { fill: var(--accent); }
&:hover, &:focus-visible { text-decoration: none; }
}
.vc-photo {
  position: relative;
display: block;
inline-size: 100%;
aspect-ratio: 1 / 1;
border-radius: 16px;
overflow: hidden;
background: var(--vc-paper-2);
& img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; max-inline-size: none; border-radius: 0; object-fit: cover; object-position: 50% 30%; }
}
.stats__figure {
  font-family: var(--heading-font-family);
font-weight: 400;
font-size: clamp(2.5rem, 1.4rem + 3.2vw, 5rem);
line-height: 0.9;
letter-spacing: -0.04em;
font-variant-numeric: tabular-nums;
color: var(--text-dark);
}
.about__soft {
  font-weight: 400;
color: var(--secondary);
}
.site-header__mark {
  display: flex;
align-items: center;
min-inline-size: 0;
overflow: hidden;
block-size: 38px;
color: var(--text-light);
text-decoration: none;
/* 18px each side of the slash: matches the slash-to-Home gap (Home's 16px padding + the menu's 2px gap). Spacing is on the glyph, not the link, so the item still collapses to nothing. */
gap: 18px;
& svg { flex: none; inline-size: auto; transform: translateX(-10px); transition: transform 0.5s var(--ease-brand); }
/* The mint slash sits evenly between the mark and Home, a touch taller than the mark. */
& .site-header__mark-glyph { block-size: 24px; margin-inline-start: 14px; }
& .site-header__mark-slash { block-size: 30px; }
.is-scrolled & svg { transform: none; }
& .logo-slash { fill: var(--accent); }
/* Hover keeps it as it is (base link hover styles would otherwise recolour it). */
&:hover, &:focus-visible { color: var(--text-light); background: none; text-decoration: none; }
&:hover .logo-slash, &:focus-visible .logo-slash { fill: var(--accent); }
}
.form__field {
  display: flex;
flex-direction: column;
gap: 8px;
min-inline-size: 0;
}
.sectors {
  grid-column: 5 / span 8;
margin: 0;
padding: 0;
list-style: none;
font-family: var(--heading-font-family);
font-weight: 400;
font-size: clamp(1.5rem, 1.05rem + 1.6vw, 2.6rem);
line-height: 1.25;
letter-spacing: -0.02em;
text-wrap: pretty;
color: var(--text-light);
& li { display: inline; }
& li:not(:last-child)::after { content: " / "; color: var(--accent); }
@media (max-width: 1000px) { grid-column: 1 / -1; }
}
.legal-band__halftone {
  position: absolute;
inset: -88px 0 0;
z-index: -1;
overflow: hidden;
pointer-events: none;
/* Fades out before the text starts. */
-webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent);
mask-image: linear-gradient(to bottom, #000 40%, transparent);
& canvas { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; }
}
.plan__amount {
  font-family: var(--heading-font-family);
font-weight: 500;
font-size: clamp(2.75rem, 2rem + 2.4vw, 4.25rem);
line-height: 1;
letter-spacing: -0.04em;
}
.studio {
  inline-size: 100%;
max-inline-size: var(--measure);
margin-inline: auto;
display: grid;
grid-template-columns: var(--grid-12);
column-gap: 24px;
row-gap: 40px;
align-items: start;
}
.nf-popular {
  /* Last section before the footer: leave room above the footer. */
padding-block-end: var(--section-space-m);
& h2 { margin-block-end: clamp(28px, 3vw, 44px); }
}
.who__top {
  inline-size: 100%;
max-inline-size: var(--measure);
margin-inline: auto;
display: grid;
grid-template-columns: var(--grid-12);
column-gap: 24px;
row-gap: 40px;
align-items: start;
}
.form__req {
  margin-inline-start: 2px;
color: var(--secondary);
}
.service {
  display: flex;
flex-direction: column;
gap: 20px;
}
.sig-preview {
  display: flex;
align-items: center;
min-block-size: 140px;
padding: 20px;
border-radius: 16px;
background: #ffffff;
box-shadow: inset 0 0 0 1px rgba(22,24,26,.12);
overflow: hidden;
& img { display: block; max-inline-size: 100%; block-size: auto; border-radius: 0; }
}
.work-card__title {
  margin: 0;
font-family: var(--text-font-family);
font-weight: 500;
font-size: clamp(1rem, 0.92rem + 0.35vw, 1.25rem);
line-height: 1.3;
letter-spacing: 0;
color: var(--text-light);
}
.hero__foot {
  display: grid;
grid-template-columns: var(--grid-12);
column-gap: 24px;
row-gap: 32px;
align-items: end;
margin-block-start: clamp(56px, 7vw, 112px);
animation: hh-fade 1s 0.35s var(--ease-brand) both;
}
.pfilters {
  order: -3;
grid-column: 1 / span 9;
margin: 0;
padding: 0;
border: 0;
min-inline-size: 0;
@media (max-width: 1000px) { grid-column: 1 / -1; }
}
.work__all {
  display: inline-flex;
align-self: center;
align-items: center;
gap: 20px;
block-size: clamp(72px, 7vw, 104px);
padding-inline: clamp(28px, 3vw, 44px);
/* Optical centring: Nohemi sits high in its line box (descender space), so nudge the text down 0.1em. */
padding-block-start: 0.2em;
border-radius: var(--radius-circle);
background: var(--tertiary);
color: var(--text-dark);
font-family: var(--heading-font-family);
font-weight: 400;
font-size: clamp(1.6rem, 1.2rem + 1.6vw, 3rem);
letter-spacing: -0.02em;
text-decoration: none;
transition: background-color 0.25s ease-out, color 0.25s ease-out;
& .btn__arrow { margin: 0; color: inherit; transition: color 0.25s ease-out; }
&:hover, &:focus-visible { background: var(--neutral); color: var(--text-light); text-decoration: none; }
&:hover .btn__arrow, &:focus-visible .btn__arrow { color: var(--accent); }
}
.who {
  margin-block-start: -24px;
padding-block: calc(var(--section-space-m) + 24px) clamp(72px, 8vw, 128px);
background: var(--neutral);
color: var(--text-light);
& .title-l { color: var(--text-light); }
/* Phones */
@media (max-width: 767px) { padding-block: calc(48px + 24px) 56px; }
}
.form-thanks {
  display: flex;
flex-direction: column;
gap: 12px;
padding: clamp(28px, 4vw, 56px);
& p { margin: 0; color: var(--secondary); }
&[hidden] { display: none; }
}
.faq__question {
  display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding-block: 24px;
list-style: none;
cursor: pointer;
font-family: var(--heading-font-family);
font-weight: 500;
font-size: clamp(1.1rem, 1rem + 0.4vw, 1.375rem);
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--text-dark);
&::-webkit-details-marker { display: none; }
&:hover .faq__icon { box-shadow: inset 0 0 0 1px var(--neutral); }
}
.vc-social {
  display: flex;
flex-wrap: wrap;
gap: 8px;
& a { display: inline-flex; align-items: center; block-size: 38px; padding: 0 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--vc-line-strong); font-size: 14px; font-weight: 500; color: var(--vc-ash); text-decoration: none; transition: background-color 0.2s ease-out, color 0.2s ease-out, box-shadow 0.2s ease-out; }
& a:hover, & a:focus-visible { background: var(--vc-ash); color: var(--vc-paper); box-shadow: none; text-decoration: none; }
}
.page-hero__intro {
  grid-column: 8 / span 5;
margin: 0;
font-size: clamp(1.05rem, 1rem + 0.25vw, 1.25rem);
line-height: 1.6;
color: var(--secondary);
@media (max-width: 1000px) { grid-column: 1 / -1; }
}
.addon__head {
  grid-column: 1 / span 4;
display: flex;
flex-direction: column;
gap: 18px;
& p { margin: 0; color: color-mix(in srgb, var(--text-light) 85%, transparent); }
@media (max-width: 1000px) { grid-column: 1 / -1; }
}
.svc-duo {
  display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
@media (max-width: 640px) { grid-template-columns: minmax(0, 1fr); }
}
.gs-summary__head {
  display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-block-start: -8px;
& h2 { margin: 0; padding-block-start: 6px; color: var(--text-light); }
}
.site-footer__privacy {
  color: var(--text-light-muted);
text-decoration: none;
&:hover { color: var(--text-light); text-decoration: underline; text-underline-offset: 4px; }
}
.svc-cs-intro {
  max-inline-size: 60ch;
margin: 0 0 clamp(40px, 4.4vw, 64px);
font-size: clamp(1.05rem, 1rem + 0.25vw, 1.25rem);
line-height: 1.6;
color: var(--secondary);
/* Sits close under the section title. */
.svc-block__title + & { margin-block-start: calc(20px - clamp(32px, 4vw, 56px)); }
}
.thanks {
  /* One page, four routes: html[data-thanks] is set in the head from the URL (contact, questionnaire, care, launch). */
& .for-q, & .for-care, & .for-launch { display: none; }
[data-thanks="questionnaire"] & .for-q, [data-thanks="care"] & .for-care, [data-thanks="launch"] & .for-launch { display: revert; }
:is([data-thanks="questionnaire"], [data-thanks="care"], [data-thanks="launch"]) & .for-contact, [data-thanks="care"] & .not-care { display: none; }
/* Launch details: a short confirmation, no steps. */
[data-thanks="launch"] & .thanks-next { display: none; }
}
.gs-section {
  /* Paint above the hero halftone that bleeds into this section. */
position: relative;
padding-block: 0 var(--section-space-m);
}
.nf-links {
  display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
& .thanks-link { min-block-size: 220px; }
/* The dark card: .thanks-link paints white, so restate the dark surface here. */
& .thanks-link.card-dark { background: var(--neutral); color: var(--text-light); }
& .thanks-link.card-dark p { color: color-mix(in srgb, var(--text-light) 80%, transparent); }
& .thanks-link.card-dark .service__go { color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-light) 24%, transparent); }
& .thanks-link.card-dark:hover .service__go, & .thanks-link.card-dark:focus-visible .service__go { background: var(--base); color: var(--neutral); }
@media (max-width: 1000px) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { grid-template-columns: minmax(0, 1fr); & .thanks-link { min-block-size: 0; gap: 32px; } }
}
.health__item {
  display: grid;
grid-template-columns: 48px minmax(0, 1fr);
gap: 4px 16px;
padding-block: 26px;
border-block-start: 1px solid var(--border-color-dark);
& p { margin: 0; font-size: 1rem; color: var(--secondary); }
}
.site-footer__brand {
  grid-column: 1 / span 5;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 28px;
@media (max-width: 1000px) { grid-column: 1 / -1; }
}
.gs-opt__price {
  font-size: 0.9375rem;
font-weight: 500;
}
.title-s {
  margin: 0;
font-family: var(--heading-font-family);
font-weight: 500;
font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.6rem);
line-height: 1.2;
letter-spacing: -0.015em;
color: var(--text-dark);
.card-dark & { color: var(--text-light); }
}
.gs-card__head {
  display: flex;
align-items: baseline;
gap: 16px;
& h2 { margin: 0; }
& p { margin: 6px 0 0; font-size: 0.9375rem; color: var(--secondary); }
}
.service__num {
  font-size: 0.875rem;
font-weight: 500;
font-variant-numeric: tabular-nums;
color: var(--secondary);
}
.svc-split {
  display: grid;
grid-template-columns: var(--grid-12);
column-gap: 24px;
row-gap: 32px;
align-items: start;
& > :first-child { grid-column: 1 / span 5; }
& > :nth-child(2) { grid-column: 7 / span 6; }
@media (max-width: 1000px) { & > :first-child, & > :nth-child(2) { grid-column: 1 / -1; } }
}
.faq-section {
  inline-size: 100%;
max-inline-size: var(--measure);
margin-inline: auto;
display: grid;
grid-template-columns: var(--grid-12);
column-gap: 24px;
row-gap: 32px;
}
.vc-name {
  margin: 0;
font-family: var(--heading-font-family);
font-weight: 500;
font-size: clamp(2rem, 1.6rem + 1.6vw, 2.6rem);
line-height: 1;
letter-spacing: -0.03em;
color: var(--vc-ash);
}
.site-header__mark-item--mobile {
  /* Phones/tablets only: the HH mark beside the menu button once scrolled (hidden again while the menu is open, where the full logo shows). */
@media (min-width: 1001px) { display: none; }
.menu-open.is-scrolled & { grid-template-columns: 0fr; opacity: 0; }
/* Even spacing either side of the slash (the menu icon sits 12px inside its button). */
& .site-header__mark-slash { margin-inline-end: 6px; }
}
.plan__price {
  display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 10px;
}
.sig-actions {
  display: flex;
flex-wrap: wrap;
gap: 10px;
}
.legal-band {
  /* Short halftone band behind the header, with the page title centred under it. */
position: relative;
isolation: isolate;
padding-block: clamp(140px, 14vw, 200px) clamp(40px, 5vw, 72px);
text-align: center;
& h1 { margin: 0; animation: hh-fade 0.8s var(--ease-brand) both; }
}
.hero {
  padding-block: clamp(96px, 13vw, 200px) var(--section-space-m);
}
.cf-turnstile {
  /* Turnstile widget: sits on its own line above the submit button. */
min-block-size: 65px;
}
.site-footer__inner {
  display: flex;
flex-direction: column;
gap: clamp(56px, 7vw, 104px);
inline-size: 100%;
margin-inline: auto;
padding-block: clamp(72px, 8vw, 120px) 40px;
}
.site-header__bar {
  position: absolute;
min-inline-size: 0;
min-block-size: 0;
inset-inline-start: 50%;
block-size: 2.6px;
border-radius: 2px;
background: currentColor;
transition: top 0.45s var(--ease-brand), width 0.45s var(--ease-brand), transform 0.45s var(--ease-brand), opacity 0.25s ease-out;
}
.soft {
  font-weight: 400;
color: var(--secondary);
}
.review-badge__label {
  display: block;
margin-block-start: 6px;
font-size: 0.8125rem;
color: var(--text-light-muted);
}
.qsec {
  inline-size: 100%;
max-inline-size: var(--measure);
margin-inline: auto;
display: grid;
grid-template-columns: var(--grid-12);
column-gap: 24px;
row-gap: 24px;
align-items: start;
}
.svc-quote {
  /* Testimonial inside the content column. */
& .testimonial__inner { max-inline-size: var(--measure); }
}
.plan__desc {
  min-block-size: 3.1em;
margin: 0;
color: var(--secondary);
@media (max-width: 1000px) { min-block-size: 0; }
}
.community {
  /* Dark, follows the client wall (which already has bottom padding). */
padding-block: clamp(48px, 5vw, 80px) clamp(88px, 9vw, 144px);
background: var(--neutral);
color: var(--text-light);
}
.vc-list {
  list-style: none;
margin: 0;
padding: 0;
& li + li { border-block-start: 1px solid var(--vc-line); }
}
.terms__body {
  grid-column: 5 / span 7;
@media (max-width: 1000px) { grid-column: 1 / -1; }
}
.form__row {
  display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
@media (max-width: 640px) { grid-template-columns: minmax(0, 1fr); }
}
.vc-body {
  display: flex;
flex-direction: column;
gap: 24px;
padding: 28px;
}
.addon__note {
  font-family: var(--heading-font-family);
font-size: 1.375rem;
letter-spacing: -0.01em;
}
.form__head {
  display: flex;
flex-direction: column;
gap: 8px;
margin-block-end: 8px;
}
.lw-submit-row {
  inline-size: 100%;
max-inline-size: var(--measure);
margin-inline: auto;
display: grid;
grid-template-columns: var(--grid-12);
column-gap: 24px;
}
.health__intro {
  grid-column: 1 / span 7;
display: flex;
flex-direction: column;
gap: 24px;
@media (max-width: 1000px) { grid-column: 1 / -1; }
}
.form__error {
  min-inline-size: 0;
min-block-size: 0;
padding: 12px 16px;
border-radius: 12px;
background: color-mix(in srgb, #b3261e 8%, transparent);
color: #b3261e;
font-size: 0.9375rem;
&[hidden] { display: none; }
}
.lw-secure {
  display: flex;
align-items: center;
gap: 8px;
margin: 0;
font-size: 0.875rem;
color: var(--secondary);
& svg { flex: none; inline-size: 15px; block-size: 15px; }
}
.vc-save {
  position: relative;
isolation: isolate;
overflow: hidden;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin: 0 12px 12px;
padding: 20px 20px 20px 24px;
border-radius: 16px;
background: var(--vc-ash);
color: var(--vc-paper);
text-decoration: none;
& canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; z-index: -1; pointer-events: none; display: block; }
& b { display: block; font-weight: 500; font-size: 17px; }
& small { display: block; margin-block-start: 2px; font-size: 14px; color: rgba(244,245,243,.75); }
& .vc-dl { flex: none; display: inline-flex; align-items: center; justify-content: center; inline-size: 48px; block-size: 48px; border-radius: 50%; background: var(--vc-paper); color: var(--vc-ash); transition: background-color 0.2s ease-out, transform 0.25s var(--ease-brand); }
& .vc-dl svg { inline-size: 20px; block-size: 20px; }
&:hover, &:focus-visible { color: var(--vc-paper); text-decoration: none; }
&:hover .vc-dl { background: var(--accent); transform: translateY(2px); }
}
.thanks-tag {
  display: inline-flex;
align-items: center;
gap: 8px;
block-size: 32px;
padding-inline: 14px;
border-radius: var(--radius-circle);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-light) 24%, transparent);
font-size: 0.8125rem;
font-weight: 500;
color: var(--text-light);
&::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--accent); }
}
.gs-seg {
  display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
padding: 4px;
border-radius: var(--radius-circle);
background: #ffffff;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--neutral) 20%, transparent);
& label { position: relative; display: flex; align-items: center; justify-content: center; min-block-size: 44px; border-radius: var(--radius-circle); font-size: 0.9375rem; font-weight: 500; cursor: pointer; transition: background-color 0.2s ease-out, color 0.2s ease-out; }
& label:hover { background: color-mix(in srgb, var(--neutral) 5%, transparent); }
& label:has(input:checked) { background: var(--neutral); color: var(--text-light); }
& label:has(input:focus-visible) { outline: 2px solid var(--neutral); outline-offset: 2px; }
@media (max-width: 1000px) { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 24px; }
}
.pcard__img {
  position: absolute;
/* Oversized for data-parallax="0.1" (up to 5vh either way). */
inset: -6vh 0 auto;
inline-size: 100%;
block-size: calc(100% + 12vh);
max-inline-size: none;
object-fit: cover;
/* Hover zoom uses scale (parallax owns transform). */
transition: scale 0.9s var(--ease-brand);
&:not([src]), &[src=""] { display: none; }
}
.statement {
  /* Large statement paragraph or heading (About studio intro, closing line). */
margin: 0;
font-family: var(--heading-font-family);
font-weight: 400;
font-size: clamp(2rem, 1.1rem + 3.4vw, 4.75rem);
line-height: 1.08;
letter-spacing: -0.03em;
text-wrap: pretty;
color: var(--text-dark);
}
.trust-card {
  display: flex;
align-items: center;
gap: 16px;
padding: 22px 24px;
border-radius: var(--radius);
background: #ffffff;
color: var(--text-dark);
text-decoration: none;
& b { font-family: var(--heading-font-family); font-weight: 500; font-size: 34px; line-height: 1; letter-spacing: -0.02em; }
& small { display: block; margin-block-start: 6px; font-size: 0.8125rem; color: var(--secondary); }
&:hover, &:focus-visible { color: var(--text-dark); text-decoration: none; }
}
.vc-row {
  display: grid;
grid-template-columns: 40px minmax(0, 1fr) auto;
align-items: center;
column-gap: 14px;
padding: 12px 0;
text-decoration: none;
color: inherit;
& .vc-icon { display: inline-flex; align-items: center; justify-content: center; inline-size: 40px; block-size: 40px; border-radius: 50%; background: var(--vc-paper); color: var(--vc-ash); transition: background-color 0.2s ease-out; }
& .vc-icon svg { inline-size: 18px; block-size: 18px; }
& small { display: block; font-size: 13px; color: var(--vc-muted); margin-block-end: 2px; }
& b { display: block; font-weight: 500; font-size: 16px; overflow-wrap: anywhere; }
& .vc-go { color: var(--vc-muted); transition: transform 0.2s ease-out, color 0.2s ease-out; }
&:hover, &:focus-visible { text-decoration: none; }
&:hover .vc-icon { background: var(--accent); }
&:hover .vc-go { color: var(--vc-ash); transform: translateX(3px); }
}
.plan {
  display: flex;
flex-direction: column;
gap: 28px;
padding: clamp(28px, 3vw, 44px);
& + & { border-inline-start: 1px solid var(--border-color-dark); }
@media (max-width: 1000px) { & + & { border-inline-start: 0; border-block-start: 1px solid var(--border-color-dark); } }
}
.gs-summary {
  grid-column: 9 / span 4;
/* &.card-dark: .card-dark sets position: relative and loads after this, so match it with higher specificity. */
&.card-dark { position: sticky; }
inset-block-start: 120px;
display: flex;
flex-direction: column;
gap: 24px;
padding: clamp(28px, 3vw, 40px);
@media (max-width: 1000px) { grid-column: 1 / -1; &.card-dark { position: relative; } }
/* Phones/tablets: no sticky offset (it pushed the card 120px down over the section padding). */
@media (max-width: 1000px) { inset-block-start: auto; }
}
.svc-timeline {
  position: relative;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
margin-block-start: clamp(36px, 4vw, 56px);
padding-block-start: 28px;
&::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 6px; block-size: 2px; background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 68%, color-mix(in srgb, var(--accent) 0%, transparent) 100%); }
& > div { position: relative; }
& > div::before { content: ""; position: absolute; inset-block-start: -28px; inset-inline-start: 0; inline-size: 14px; block-size: 14px; border-radius: 50%; background: var(--accent); }
& b { display: block; margin-block-end: 6px; font-family: var(--heading-font-family); font-size: 1.375rem; font-weight: 500; letter-spacing: -0.01em; }
& span { font-size: 0.9375rem; color: var(--secondary); }
@media (max-width: 640px) { grid-template-columns: minmax(0, 1fr); }
/* Phones: vertical, line and dots down the left. */
@media (max-width: 640px) { gap: 24px; padding-block-start: 0; padding-inline-start: 32px; &::before { inset-inline: 6px auto; inset-block: 8px 8px; inline-size: 2px; block-size: auto; background: linear-gradient(180deg, var(--accent) 0%, var(--accent) 68%, color-mix(in srgb, var(--accent) 0%, transparent) 100%); } & > div::before { inset-block-start: 6px; inset-inline-start: -32px; } }
}
.card-dark {
  position: relative;
isolation: isolate;
overflow: hidden;
background: var(--neutral);
color: var(--text-light);
border-radius: var(--radius-l);
& > canvas[data-halftone] { position: absolute; inset: 0; z-index: -1; display: block; inline-size: 100%; block-size: 100%; pointer-events: none; }
& a:focus-visible, & button:focus-visible { outline-color: var(--accent); }
}
.lw-known {
  display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 24px;
margin: 0;
& > div { display: flex; flex-direction: column; gap: 4px; padding-block: 16px; border-block-start: 1px solid var(--border-color-dark); }
& > div:nth-child(-n+2) { border-block-start: 0; padding-block-start: 0; }
& dt { font-size: 0.8125rem; color: var(--secondary); }
& dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
@media (max-width: 640px) { grid-template-columns: minmax(0, 1fr); & > div:nth-child(2) { border-block-start: 1px solid var(--border-color-dark); padding-block-start: 16px; } }
}
.svc-duo__img {
  position: relative;
isolation: isolate;
overflow: hidden;
aspect-ratio: 16 / 10;
background: var(--neutral);
& canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; display: block; }
& img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
}
.svc-case__list {
  margin: 0;
padding: 0;
list-style: none;
& li { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; padding-block: 12px; border-block-start: 1px solid var(--border-color-dark); line-height: 1.5; color: var(--secondary); }
& li:last-child { border-block-end: 1px solid var(--border-color-dark); }
& .svc-tick { inline-size: 22px; block-size: 22px; & svg { inline-size: 12px; block-size: 12px; } }
}
.gs-mini__title {
  font-family: var(--heading-font-family);
font-size: 1.0625rem;
font-weight: 500;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.work {
  /* Paint above the hero halftone that bleeds into this section. */
position: relative;
padding-block: 0;
}
.measure {
  /* Utility: hold a block to the centred inner-page column. */
inline-size: 100%;
max-inline-size: var(--measure);
margin-inline: auto;

}
.faq-section__list {
  grid-column: 5 / span 8;
@media (max-width: 1000px) { grid-column: 1 / -1; }
}
.form__legend {
  padding: 0;
margin-block-end: 12px;
font-size: 0.9375rem;
font-weight: 500;
color: var(--text-dark);
}
.prose {
  font-size: clamp(1.05rem, 1rem + 0.25vw, 1.25rem);
line-height: 1.6;
text-wrap: pretty;
color: var(--text-dark);
& p { margin: 0 0 1em; }
& p:last-child { margin-block-end: 0; }
}
.qsec__head {
  grid-column: 1 / span 4;
  position: sticky;
  inset-block-start: 120px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-block-start: 0;
  @media (max-width: 1000px) {
    grid-column: 1 / -1;
    position: static;
    padding-block-start: 0;
  }
}
.health__amount {
  font-family: var(--heading-font-family);
font-weight: 500;
font-size: clamp(3rem, 2.2rem + 2.4vw, 4.5rem);
line-height: 1;
letter-spacing: -0.04em;
}
.page-hero {
  padding-block: clamp(88px, 11vw, 176px) var(--section-space-m);
/* Phones: less space before the first section. */
@media (max-width: 767px) { padding-block-end: 48px; }
}
.title-m {
  margin: 0;
font-family: var(--heading-font-family);
font-weight: 500;
font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.75rem);
line-height: 1.08;
letter-spacing: -0.025em;
text-wrap: balance;
color: var(--text-dark);
.card-dark & { color: var(--text-light); }
}
.care-why__body {
  grid-column: 7 / span 6;
@media (max-width: 1000px) { grid-column: 1 / -1; }
}
.thanks-done {
  display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 56px;
block-size: 56px;
margin-block-end: clamp(28px, 3vw, 44px);
/* Line up with the title, which is centred in the content column (var(--measure)). */
margin-inline-start: max(0px, (100% - var(--measure)) / 2);
border-radius: 50%;
background: var(--accent);
color: var(--neutral);
animation: hh-pop 0.7s var(--ease-brand) both;
& svg { inline-size: 26px; block-size: 26px; }
}
.btn--compact {
  --btn-font-size: 0.9375rem;
--btn-padding-block: 0.9667em;
--btn-padding-inline: 1.3333em;
}
.review-badge__stars {
  display: flex;
gap: 3px;
color: var(--accent);
}
.work-card {
  display: block;
text-decoration: none;
color: inherit;
&:focus-visible { outline: 2px solid var(--text-dark); outline-offset: 4px; border-radius: var(--radius-l); }
&:hover, &:focus-visible { text-decoration: none; }
/* No website: the card renders as a div (see the data source), so no Visit site button. */
&:not(a) .work-card__btn { display: none; }
}
.page-band {
  position: relative;
isolation: isolate;
}
.svc-duo__body {
  display: flex;
flex-direction: column;
gap: 14px;
padding: clamp(28px, 3vw, 40px);
& p { margin: 0; font-size: clamp(1.05rem, 1rem + 0.2vw, 1.15rem); line-height: 1.6; color: var(--secondary); }
}
.hero-band__halftone {
  position: absolute;
inset: -88px 0 -420px;
z-index: -1;
pointer-events: none;
overflow: hidden;
& canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; display: block; }
}
.cta-card__dots {
  position: absolute;
inset: 0;
z-index: -1;
display: block;
inline-size: 100%;
block-size: 100%;
pointer-events: none;
}
.lw-detect {
  display: flex;
align-items: center;
gap: 8px;
margin: 0;
font-size: 0.875rem;
color: var(--secondary);
&::before { content: ""; flex: none; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--accent); }
&[hidden] { display: none; }
}
.hero__title {
  margin: 0;
font-size: var(--h1);
font-weight: 500;
}
.sig-legacy {
  /* Previous signature images, kept on the page only so Studio publishes them: old emails link to them via redirects from the retired WordPress URLs. Collapsed and lazy, so they never load unless opened. */
inline-size: 100%;
max-inline-size: 1100px;
margin: clamp(32px, 4vw, 56px) auto 0;
font-size: 14px;
color: #5b5f63;
& summary { cursor: pointer; inline-size: fit-content; }
& div { display: flex; flex-wrap: wrap; gap: 16px; margin-block-start: 16px; }
& img { display: block; inline-size: 240px; max-inline-size: 100%; block-size: auto; border-radius: 0; }
}
.service__head {
  display: flex;
flex-direction: column;
gap: 14px;
padding-block-end: 20px;
border-block-end: 1px solid var(--neutral);
color: inherit;
text-decoration: none;
&:hover, &:focus-visible { color: inherit; text-decoration: none; }
&:hover .service__go, &:focus-visible .service__go { background: var(--neutral); color: var(--accent); box-shadow: none; }
}
.gs-summary__price {
  flex: none;
text-align: end;
}
.qsec__body {
  grid-column: 5 / span 8;
padding: clamp(28px, 3.4vw, 48px);
@media (max-width: 1000px) { grid-column: 1 / -1; }
}
.gs-acct {
  /* &.form__fieldset: .form__fieldset (padding: 0, gap: 12px) loads after this, so match it with higher specificity. */
&.form__fieldset { gap: 20px; padding: 24px; }
border-radius: 16px;
background: var(--body-bg-color);
animation: hh-fade 0.5s var(--ease-brand) both;
&[hidden] { display: none; }
& legend { float: left; inline-size: 100%; margin: 0 0 4px; }
}
.pcard__meta {
  display: flex;
flex-direction: column;
gap: 2px;
min-inline-size: 0;
}
.form__error--dark {
  flex-basis: 100%;
background: color-mix(in srgb, #ff8a80 14%, transparent);
color: #ffb4ab;
}
.hero__services {
  /* Services under the hero statement: soft pills with the mint arrow (same family as the form pills), each linking to its page. */
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin: clamp(40px, 5vw, 72px) 0 0;
padding: 0;
list-style: none;
font-size: clamp(0.9rem, 0.86rem + 0.15vw, 1rem);
/* The fade sits on each pill, not the list: an animating ancestor stops the pills' backdrop blur. */
& li { display: flex; }
& a { animation: hh-fade 1s 0.5s var(--ease-brand) both; display: inline-flex; align-items: center; gap: 10px; min-block-size: 44px; padding-inline: 18px 16px; border-radius: var(--radius-circle); background: color-mix(in srgb, #ffffff 55%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--neutral) 10%, transparent); font-weight: 500; color: var(--text-dark); text-decoration: none; transition: background-color var(--transition-duration) var(--transition-timing), box-shadow var(--transition-duration) var(--transition-timing); }
/* Slide-through arrow, as on the buttons (.btn__arrow in the base stylesheet). */
& .btn__arrow { margin: 0; }
& a:hover { background: #ffffff; box-shadow: inset 0 0 0 1px var(--accent); }
/* No underline on hover (the base link styles add one). */
& a, & a:hover, & a:focus-visible { text-decoration: none !important; }
& a:focus-visible { outline: 2px solid var(--neutral); outline-offset: 3px; }
@media (max-width: 767px) { gap: 8px; & a { min-block-size: 40px; padding-inline: 16px 14px; } }
}
.site-footer__list {
  display: flex;
flex-direction: column;
gap: 12px;
list-style: none;
margin: 0;
padding: 0;
& a { font-size: 1rem; color: var(--text-light); opacity: 0.92; text-decoration: none; }
& a:hover { color: var(--text-light); opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
}
.who__head {
  grid-column: 1 / span 4;
@media (max-width: 1000px) { grid-column: 1 / -1; }
}
.hero__inner {
  inline-size: 100%;
margin-inline: auto;
}
.page-hero__soft {
  font-weight: 400;
color: var(--secondary);
.page-hero[data-variant="split"] & { font-size: 0.5em; line-height: 1.05; letter-spacing: -0.025em; margin-block-start: 0.25em; }
}
.qthanks {
  grid-column: 5 / span 8;
@media (max-width: 1000px) { grid-column: 1 / -1; }
}
.community__inner {
  inline-size: 100%;
max-inline-size: var(--measure);
margin-inline: auto;
display: grid;
grid-template-columns: var(--grid-12);
column-gap: 24px;
row-gap: 40px;
align-items: start;
}
.care-plans__soft {
  display: block;
font-weight: 400;
color: var(--secondary);
}
.vc-page {
  /* Digital business card (/ryan/, /cas/): standalone page, no site header or footer. Colours from the design. */
--vc-ash: #16181a; --vc-paper: #f4f5f3; --vc-paper-2: #e9ebe8; --vc-muted: #5b5f63; --vc-line: rgba(22,24,26,.12); --vc-line-strong: rgba(22,24,26,.2);
position: relative;
min-block-size: 100vh;
min-block-size: 100svh;
display: flex;
flex-direction: column;
align-items: center;
padding: clamp(28px, 5vw, 64px) 16px clamp(40px, 6vw, 80px);
overflow: hidden;
isolation: isolate;
background: var(--vc-paper);
color: var(--vc-ash);
}
.lw-known-head {
  display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.site-footer__tagline {
  margin: 0;
max-inline-size: 20ch;
font-family: var(--heading-font-family);
font-weight: 400;
font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
line-height: 1.2;
letter-spacing: -0.015em;
color: var(--text-light);
}
.btn__arrow {
  display: inline-block;
margin-inline-start: 0.75em;
color: var(--accent);
}
.faq-section__head {
  grid-column: 1 / span 4;
align-self: start;
position: sticky;
inset-block-start: 120px;
@media (max-width: 1000px) { grid-column: 1 / -1; position: static; }
}
.svc-incl {
  display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 24px;
margin: 0;
padding: 0;
list-style: none;
& li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; padding-block: 22px; border-block-start: 1px solid var(--border-color-dark); }
& li:nth-last-child(-n+2) { border-block-end: 1px solid var(--border-color-dark); }
& b { display: block; margin-block-end: 4px; font-size: 1.0625rem; font-weight: 500; }
& p { margin: 0; line-height: 1.55; color: var(--secondary); }
@media (max-width: 640px) { grid-template-columns: minmax(0, 1fr); & li:nth-last-child(2) { border-block-end: 0; } }
}
.gs-lines {
  margin: 0;
padding: 0;
list-style: none;
&[hidden] { display: none; }
& li { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding-block: 14px; border-block-start: 1px solid color-mix(in srgb, var(--text-light) 16%, transparent); font-size: 0.9375rem; line-height: 1.4; }
& li span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
& li.is-free span:last-child { color: var(--accent); }
}
.care-why__lead {
  grid-column: 1 / span 5;
@media (max-width: 1000px) { grid-column: 1 / -1; }
}
.review-badge__score {
  font-family: var(--heading-font-family);
font-weight: 500;
font-size: 34px;
line-height: 1;
letter-spacing: -0.02em;
}
.cta-band__closing-text {
  grid-column: 2 / span 10;
padding-block-start: clamp(48px, 5vw, 80px);
text-wrap: balance;
border-block-start: 1px solid var(--border-color-dark);
@media (max-width: 1000px) { grid-column: 1 / -1; }
}
.work-card__bg {
  /* Oversized for data-parallax="0.2" (up to 10vh either way) and the blur (24px each side). */
--bg-inset: -11vh -24px auto -24px;
--bg-height: calc(100% + 22vh);
--bg-width: calc(100% + 48px);
&.is-bg { max-inline-size: none; }
filter: blur(10px) saturate(1.05);
&:not([src]), &[src=""] { display: none; }
@media (max-width: 640px) { filter: blur(6px) saturate(1.05); }
}
.form__pill-input {
  position: absolute;
inline-size: 1px;
block-size: 1px;
margin: 0;
opacity: 0;
pointer-events: none;
}
.page-section--flush {
  padding-block-start: 0;
}
.ticks__item--extra {
  color: var(--secondary);
}
.pcount {
  /* Counts the cards still showing (hidden cards don't increment the counter). */
order: -2;
grid-column: 10 / span 3;
align-self: center;
justify-self: end;
font-size: 0.875rem;
font-variant-numeric: tabular-nums;
color: var(--secondary);
&::after { content: counter(pcount) " projects"; }
@media (max-width: 1000px) { grid-column: 1 / -1; justify-self: start; order: -2; }
}
.inclusions {
  inline-size: 100%;
max-inline-size: var(--measure);
margin-inline: auto;
display: grid;
grid-template-columns: var(--grid-12);
column-gap: 24px;
row-gap: 40px;
}
.svc-card__n {
  font-size: 0.875rem;
font-weight: 500;
font-variant-numeric: tabular-nums;
color: var(--secondary);
& + h3 { margin-block-start: 0; }
}
.thanks-links {
  display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
@media (max-width: 1000px) { grid-template-columns: minmax(0, 1fr); }
}
.lw-submit-card__row {
  display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 24px;
& p { margin: 0; max-inline-size: 40ch; color: color-mix(in srgb, var(--text-light) 85%, transparent); }
}
.lw-linkbtn {
  padding: 0;
border: 0;
background: none;
font: 500 0.875rem/1.4 var(--text-font-family);
color: var(--text-dark);
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
&:hover { color: var(--text-dark); text-decoration-color: var(--accent); }
}
.site-header__nav {
  pointer-events: auto;
@media (max-width: 1000px) { display: none; }
/* Centred on the header, so the pill stays centred as the mark slides in. */
@media (min-width: 1001px) { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; translate: -50% -50%; }
}
.mobile-menu__links {
  display: flex;
flex-direction: column;
gap: 4px;
list-style: none;
margin: auto 0 0;
padding: 0;
}
.svc-cards {
  display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
margin: 0;
padding: 0;
list-style: none;
@media (max-width: 1000px) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { grid-template-columns: minmax(0, 1fr); }
}
.work__inner {
  display: flex;
flex-direction: column;
gap: clamp(48px, 5vw, 80px);
inline-size: 100%;
margin-inline: auto;
}
.vc-role {
  margin: 8px 0 0;
color: var(--vc-muted);
font-size: 16px;
}
.contact__main {
  grid-column: 5 / span 8;
@media (max-width: 1000px) { grid-column: 1 / -1; }
}
.terms {
  inline-size: 100%;
max-inline-size: var(--measure);
margin-inline: auto;
display: grid;
grid-template-columns: var(--grid-12);
column-gap: 24px;
row-gap: 32px;
}
.thanks-step__n {
  padding-block-start: 6px;
font-size: 0.875rem;
font-weight: 500;
font-variant-numeric: tabular-nums;
color: var(--secondary);
}
.faq__answer {
  max-inline-size: 62ch;
margin: 0;
padding: 0 64px 28px 0;
font-size: 1.0625rem;
line-height: 1.6;
color: var(--secondary);
@media (max-width: 640px) { padding-inline-end: 0; }
& a { color: var(--text-dark); text-underline-offset: 3px; }
}
.gs__steps {
  grid-column: 1 / span 8;
display: flex;
flex-direction: column;
gap: 24px;
@media (max-width: 1000px) { grid-column: 1 / -1; }
}
.form__pills {
  display: flex;
flex-wrap: wrap;
gap: 10px;
}
.svc-fact__big {
  font-family: var(--heading-font-family);
font-size: clamp(2.2rem, 1.6rem + 2vw, 3.5rem);
font-weight: 500;
line-height: 1;
letter-spacing: -0.02em;
color: var(--text-dark);
& small { font-size: 0.4em; letter-spacing: 0; color: var(--secondary); }
}
.page-hero__lede {
  grid-column: 1 / span 6;
margin: 0;
max-inline-size: 34ch;
font-size: var(--text-l);
line-height: 1.45;
color: var(--text-dark);
.page-hero[data-variant="split"] & { max-inline-size: none; }
@media (max-width: 1000px) { grid-column: 1 / -1; }
.page-hero[data-variant="wide"] & { max-inline-size: 40ch; }
}
.addon__list {
  grid-column: 5 / span 5;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 24px;
& .ticks__item, & .ticks__item + .ticks__item { border-block-start: 0; padding-block: 8px; }
& .ticks__icon { color: var(--accent); }
@media (max-width: 1000px) { grid-column: 1 / -1; }
@media (max-width: 640px) { grid-template-columns: minmax(0, 1fr); }
}
.sig-help {
  inline-size: 100%;
max-inline-size: 1100px;
margin: clamp(32px, 4vw, 56px) auto 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
@media (max-width: 860px) { grid-template-columns: minmax(0, 1fr); }
& div { padding: 22px 24px; border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(22,24,26,.12); }
& h3 { margin: 0 0 8px; font-family: var(--heading-font-family); font-weight: 500; font-size: 1.15rem; letter-spacing: -0.01em; }
& p { margin: 0; font-size: 15px; line-height: 1.55; color: #5b5f63; }
}
.about__inner {
  display: grid;
grid-template-columns: var(--grid-12);
column-gap: 24px;
row-gap: 64px;
inline-size: 100%;
margin-inline: auto;
}
.q-card__arrow {
  color: var(--accent);
}
.about__copy {
  margin: 0;
max-inline-size: 34em;
font-size: clamp(1.1rem, 1rem + 0.4vw, 1.4rem);
line-height: 1.55;
color: var(--text-dark);
}
.lw-copy-btn {
  display: inline-flex;
align-items: center;
justify-content: center;
min-inline-size: 0;
min-block-size: 0;
inline-size: 24px;
block-size: 24px;
color: var(--secondary);
& svg { inline-size: 15px; block-size: 15px; }
.lw-email:hover &, .lw-email:focus-visible &, .lw-email[data-copied] & { color: var(--text-dark); }
}
.page-hero__line {
  display: block;
overflow: hidden;
padding-block-end: 0.16em;
margin-block-end: -0.16em;
& > span { display: block; animation: hh-rise 1s var(--ease-brand) both; }
&:nth-child(2) > span { animation-delay: 0.09s; }
}
.gs-opt {
  position: relative;
display: flex;
flex-direction: column;
gap: 6px;
padding: 20px 22px;
border-radius: 16px;
background: #ffffff;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--neutral) 20%, transparent);
color: var(--text-dark);
cursor: pointer;
transition: box-shadow 0.2s ease-out, background-color 0.2s ease-out, color 0.2s ease-out;
& small { font-size: 0.875rem; line-height: 1.45; color: var(--secondary); transition: color 0.2s ease-out; }
&:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--neutral) 45%, transparent); }
&:has(input:checked) { background: var(--neutral); color: var(--text-light); box-shadow: none; }
&:has(input:checked) small { color: color-mix(in srgb, var(--text-light) 75%, transparent); }
&:has(input:focus-visible) { outline: 2px solid var(--neutral); outline-offset: 3px; }
}
.plan__per {
  font-size: 0.9375rem;
color: var(--secondary);
}
.contact-section {
  /* Paint above the hero halftone that bleeds into this section. */
position: relative;
padding-block: 0 var(--section-space-m);
}
.svc-case__lead {
  margin: 0;
font-size: clamp(1.05rem, 1rem + 0.2vw, 1.15rem);
line-height: 1.6;
color: var(--text-dark);
}
.studio__body {
  grid-column: 7 / span 6;
margin-block-start: clamp(24px, 3vw, 48px);
@media (max-width: 1000px) { grid-column: 1 / -1; margin-block-start: 0; }
}
.service__go {
  display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
inline-size: 40px;
block-size: 40px;
border-radius: 50%;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--neutral) 20%, transparent);
font-size: 1.125rem;
color: var(--text-dark);
transition: background-color 0.25s ease-out, color 0.25s ease-out, box-shadow 0.25s ease-out;
}
.about {
  /* Paint above the hero halftone that bleeds into this section. */
position: relative;
padding-block-end: 0;
}
.small-print {
  inline-size: 100%;
max-inline-size: var(--measure);
margin-inline: auto;
margin-block-start: calc(20px - var(--container-gap));
font-size: 0.875rem;
color: var(--secondary);
}
.inclusions__head {
  grid-column: 1 / span 4;
display: flex;
flex-direction: column;
gap: 16px;
& p { margin: 0; color: var(--secondary); }
@media (max-width: 1000px) { grid-column: 1 / -1; }
}
.work-card__video {
  position: absolute;
inset-inline-start: 50%;
inset-block-start: 42%;
z-index: 1;
inline-size: 72%;
/* Matches Bunny output (16:9) so nothing is cropped. */
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: var(--radius);
/* Until the first frame paints (and on phones, until the first scroll): a soft 20% light panel with a
   small spinning loader in the middle. Both are background, so the video simply covers them once it plays. */
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='11' fill='none' stroke='%23ffffff' stroke-opacity='0.25' stroke-width='2.5'/%3E%3Cpath d='M14 3a11 11 0 0 1 11 11' fill='none' stroke='%23ffffff' stroke-opacity='0.9' stroke-width='2.5' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 14 14' to='360 14 14' dur='0.9s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") center / 28px no-repeat, color-mix(in srgb, #ffffff 20%, transparent);
box-shadow: var(--box-shadow-mockup);
transform: translate(-50%, -50%);
pointer-events: none;
&:not([data-src]), &[data-src=""] { display: none; }
@media (max-width: 640px) { position: relative; inset: auto; inline-size: 100%; transform: none; }
}
.mobile-menu__foot {
  display: flex;
flex-direction: column;
align-items: flex-start;
gap: 28px;
margin-block-start: 44px;
opacity: 0;
transform: translateY(24px);
transition: opacity 0.2s ease-out, transform 0.3s ease-in;
.is-open & { opacity: 1; transform: none; transition: opacity 0.5s ease-out 0.55s, transform 0.7s var(--ease-brand) 0.55s; }
}
.health__num {
  grid-row: span 2;
padding-block-start: 4px;
font-size: 0.875rem;
font-weight: 500;
font-variant-numeric: tabular-nums;
color: var(--secondary);
}
.cta-card__title {
  margin: 0;
max-inline-size: 12ch;
font-size: clamp(2.6rem, 7vw, 8rem);
font-weight: 500;
line-height: 0.96;
letter-spacing: -0.035em;
color: var(--text-light);
}
.page-section {
  /* Paint above the hero halftone that bleeds into this section. */
  position: relative;
  padding-block: var(--section-space-m);
/* Phones: tighter section rhythm (about 80px between sections). */
@media (max-width: 767px) { &.page-section { padding-block: 40px; } &.page-section--flush { padding-block-start: 0; } &.page-section--tight { padding-block-start: 24px; } }
/* Projects page: the CTA band's top margin is enough space below the grid (section padding + margin left a gap). */
&:has(> .projects) { padding-block-end: 0; }
/* Back-to-back sections share one gap instead of stacking two paddings (phones keep their tighter 40px rhythm above). */
@media (min-width: 768px) { & + .page-section { padding-block-start: 0; } }
}
.sig-grid {
  inline-size: 100%;
max-inline-size: 1100px;
margin-inline: auto;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
@media (max-width: 860px) { grid-template-columns: minmax(0, 1fr); }
}
.qform-section {
  /* Paint above the hero halftone that bleeds into this section. */
position: relative;
padding-block: 0 var(--section-space-m);
}
.cta-card__soft {
  font-weight: 400;
color: var(--accent);
}
.health__price {
  grid-column: 9 / span 4;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
padding: 28px;
border-radius: var(--radius);
background: var(--base);
& p { margin: 0; font-size: 0.9375rem; color: var(--secondary); }
@media (max-width: 1000px) { grid-column: 1 / -1; }
}
.lw-note-text {
  margin: 0;
font-size: 0.9375rem;
line-height: 1.55;
color: var(--secondary);
& + p { margin-block-start: 8px; }
}
.addon__cta {
  grid-column: 10 / span 3;
justify-self: end;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 16px;
text-align: right;
@media (max-width: 1000px) { grid-column: 1 / -1; justify-self: start; align-items: flex-start; text-align: left; }
}
.lw-copy {
  display: flex;
align-items: center;
gap: 12px;
font-size: 0.9375rem;
color: color-mix(in srgb, var(--text-light) 85%, transparent);
cursor: pointer;
& input { inline-size: 20px; block-size: 20px; margin: 0; accent-color: var(--accent); }
}
.svc-block {
  inline-size: 100%;
max-inline-size: var(--measure);
margin-inline: auto;
& > .svc-block__title { margin-block-end: clamp(32px, 4vw, 56px); }
}
.form {
  display: flex;
flex-direction: column;
gap: 28px;
}
.gs {
  inline-size: 100%;
max-inline-size: var(--measure);
margin-inline: auto;
display: grid;
grid-template-columns: var(--grid-12);
column-gap: 24px;
row-gap: 24px;
align-items: start;
}
.page-band__halftone {
  position: absolute;
inset: -88px 0 -320px;
z-index: -1;
overflow: hidden;
pointer-events: none;
& canvas { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; }
}
.svc-all {
  display: inline-flex;
align-items: center;
gap: 10px;
margin-block-start: 28px;
font-weight: 500;
color: var(--text-dark);
text-decoration: none;
&:hover, &:focus-visible { color: var(--text-dark); text-decoration: none; }
& .btn__arrow { margin: 0; color: var(--text-dark); }
}
.gs-opt__dot {
  flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
min-inline-size: 0;
min-block-size: 0;
inline-size: 20px;
block-size: 20px;
border-radius: 50%;
box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--neutral) 20%, transparent);
.gs-opt:has(input:checked) & { background: var(--accent); box-shadow: none; }
.gs-opt:has(input:checked) &::after { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--neutral); }
}
.pcard__cap {
  position: absolute;
z-index: 2;
inset: auto clamp(20px, 2.2vw, 32px) clamp(20px, 2.2vw, 32px);
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
color: var(--text-light);
& .btn--primary { flex: none; }
.pcard:nth-child(4n+2 of .pcard) &, .pcard:nth-child(4n+3 of .pcard) & { flex-direction: column; align-items: flex-start; gap: 14px; }
}
.gs-addon {
  display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 20px 22px;
border-radius: 16px;
background: #ffffff;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--neutral) 20%, transparent);
cursor: pointer;
& b { display: block; font-weight: 500; }
& small { display: block; margin-block-start: 4px; font-size: 0.875rem; line-height: 1.45; color: var(--secondary); }
&:has(input:focus-visible) { outline: 2px solid var(--neutral); outline-offset: 3px; }
}
.studio__head {
  grid-column: 1 / span 5;
@media (max-width: 1000px) { grid-column: 1 / -1; }
}
.testimonial__quote {
  margin: 0;
padding: 0;
border: 0;
background: none;
font-family: var(--heading-font-family);
font-weight: 400;
font-size: var(--h3);
line-height: 1.14;
letter-spacing: -0.02em;
text-indent: -0.42em;
text-wrap: pretty;
color: var(--text-dark);
}
.form__control {
  inline-size: 100%;
padding: 14px 16px;
font: 400 1rem/1.4 var(--text-font-family);
color: var(--text-dark);
background: #ffffff;
border: 1px solid color-mix(in srgb, var(--neutral) 20%, transparent);
border-radius: 12px;
appearance: none;
transition: border-color var(--transition-duration) var(--transition-timing), box-shadow var(--transition-duration) var(--transition-timing);
&::placeholder { color: #8a8f94; }
&:hover { border-color: color-mix(in srgb, var(--neutral) 36%, transparent); }
&:focus, &:focus-visible { outline: none; border-color: var(--neutral); box-shadow: 0 0 0 3px color-mix(in srgb, var(--neutral) 12%, transparent); }
&:is(input, select) { block-size: 52px; }
&:is(textarea) { min-block-size: 132px; resize: vertical; }
&:is(select) {
  padding-inline-end: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2316181a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
}
}
.svc-work {
  display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
/* Projects-page cards, in an even grid. */
& .pcard { --col: auto; --ratio: 4 / 3; }
/* One caption layout for every card (the Projects page alternates by position). */
& .pcard .pcard__cap.pcard__cap { flex-direction: column; align-items: flex-start; gap: 14px; }
&.svc-work--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1000px) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { &, &.svc-work--two { grid-template-columns: minmax(0, 1fr); } }
}
.site-header__link {
  display: flex;
align-items: center;
block-size: 38px;
padding-inline: 16px;
border-radius: var(--radius-circle);
font-size: 0.875rem;
font-weight: 500;
text-decoration: none;
color: color-mix(in srgb, var(--text-light) 72%, transparent);
transition: color var(--transition-duration) var(--transition-timing), background-color var(--transition-duration) var(--transition-timing);
&:hover { color: var(--text-light); background: color-mix(in srgb, var(--text-light) 6%, transparent); }
/* Current page: mint text only. */
&[aria-current] { color: var(--accent); }
&:focus-visible { outline-color: var(--accent); }
&:hover, &:focus-visible { text-decoration: none; }
}
.service__list {
  list-style: none;
margin: 0;
padding: 0;
& li { display: flex; align-items: center; gap: 12px; padding-block: 12px; font-size: 1rem; }
& li + li { border-block-start: 1px solid var(--border-color-dark); }
/* Mint check circle before each item (as in the design). */
& li::before {
  content: "";
  flex: none;
  inline-size: 18px;
  block-size: 18px;
  border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2316181a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 8.4l2.3 2.2 4.7-4.9'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}
}
.nf-hero {
  position: relative;
}
.vc-top {
  position: relative;
padding: 12px 12px 0;
}
.svc-statement {
  grid-column: 1 / span 11;
@media (max-width: 1000px) { grid-column: 1 / -1; }
}
.site-header__bar--1 {
  top: 15.5px;
inline-size: 14px;
transform: translateX(calc(-50% + 5px));
/* Hover nudge: real pointers only (phones keep :hover after a tap) and never while open, where it would undo the X. */
@media (hover: hover) { .site-header:not(.menu-open) .site-header__toggle:hover & { transform: translateX(calc(-50% + 1px)); } }
.menu-open & { top: 22.7px; inline-size: 24px; transform: translateX(-50%) rotate(45deg); }
}
.thanks-meantime {
  inline-size: 100%;
max-inline-size: var(--measure);
margin-inline: auto;
& > h2 { margin-block-end: clamp(28px, 3vw, 44px); }
/* Last section before the footer: leave room above the footer. */
padding-block-end: var(--section-space-m);
}
.about__body {
  display: flex;
flex-direction: column;
align-items: flex-start;
gap: 32px;
}
.vc {
  inline-size: 100%;
max-inline-size: 420px;
display: flex;
flex-direction: column;
border-radius: 24px;
background: #ffffff;
box-shadow: 0 1px 0 rgba(22,24,26,.04), 0 24px 60px -24px rgba(22,24,26,.22);
overflow: hidden;
animation: vc-rise 0.9s var(--ease-brand) both;
@media (prefers-reduced-motion: reduce) { animation: none; }
}
.health__list {
  display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: clamp(24px, 4vw, 64px);
list-style: none;
margin: 0;
padding: 0;
@media (max-width: 640px) { grid-template-columns: minmax(0, 1fr); }
}
.about__photo {
  grid-column: 7 / span 6;
  /* Desktop: match the text column's height so both edges line up. */
  position: relative;
  align-self: stretch;
  min-block-size: 320px;
  overflow: hidden;
  aspect-ratio: auto;
  margin: 0;
  border-radius: var(--radius-l);
  background: var(--tertiary);
  & img {
    /* Oversized for data-parallax="0.12" (up to 6vh either way). */
    position: absolute;
    inset: -7vh 0 auto;
    inline-size: 100%;
    block-size: calc(100% + 14vh);
    max-inline-size: none;
    object-fit: cover;
  }
  @media (max-width: 1000px) {
    grid-column: 1 / -1;
    position: relative;
    inset-block-start: auto;
    align-self: start;
    aspect-ratio: 7 / 5;
  }
/* Phones: no min height (with the 7:5 ratio it forced the photo wider than the screen). */
@media (max-width: 1000px) { min-block-size: 0; }
}
.qform {
  display: flex;
flex-direction: column;
gap: 24px;
&[hidden] { display: none; }
}
.svc-cardlink__text {
  grid-column: 1 / span 7;
display: flex;
flex-direction: column;
gap: 16px;
& p { margin: 0; max-inline-size: 52ch; font-size: clamp(1.05rem, 1rem + 0.25vw, 1.25rem); line-height: 1.6; color: color-mix(in srgb, var(--text-light) 82%, transparent); }
& a { color: var(--accent); text-underline-offset: 3px; }
}
.lw-submit-card {
  grid-column: 5 / span 8;
display: flex;
flex-direction: column;
gap: 24px;
padding: clamp(28px, 3.4vw, 48px);
@media (max-width: 1000px) { grid-column: 1 / -1; }
}
.page-section--tight {
  /* A follow-on section that leads straight on from the one above. */
padding-block-start: var(--section-space-s);
}
.form__support-note {
  display: none;
margin: 0;
.contact__form:has(input[name="reason"][value="Support request"]:checked) & { display: block; }
}
.thanks-next {
  inline-size: 100%;
max-inline-size: var(--measure);
margin-inline: auto;
display: grid;
grid-template-columns: var(--grid-12);
column-gap: 24px;
row-gap: 40px;
align-items: start;
& > h2 { grid-column: 1 / span 4; position: sticky; inset-block-start: 120px; }
@media (max-width: 1000px) { & > h2 { grid-column: 1 / -1; position: static; } }
}
.client-wall__tile {
  position: relative;
/* Clips the slide up/down between names; no box behind the logos. */
overflow: hidden;
block-size: clamp(96px, 9vw, 128px);
}
.client-wall {
  display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 12px;
margin: clamp(56px, 6vw, 96px) 0 0;
padding: 0;
list-style: none;
@media (max-width: 1000px) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.addon {
  inline-size: 100%;
max-inline-size: var(--measure);
margin-inline: auto;
display: grid;
grid-template-columns: var(--grid-12);
column-gap: 24px;
row-gap: 32px;
align-items: start;
padding: clamp(36px, 4.4vw, 64px);
/* Attached to the plans: cancel the section gap and tuck under their rounded bottom. */
margin-block-start: calc(-1 * (var(--container-gap) + var(--radius-l)));
padding-block-start: calc(clamp(36px, 4.4vw, 64px) + var(--radius-l));
border-start-start-radius: 0;
border-start-end-radius: 0;
}
.community__orgs {
  grid-column: 7 / span 6;
margin: 0;
padding: 0;
list-style: none;
/* Organisation logos, 2 x 2. */
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
& li { display: grid; min-inline-size: 0; }
@media (max-width: 1000px) { grid-column: 1 / -1; }
@media (max-width: 640px) { gap: 12px; }
}
.site-footer__links {
  grid-column: 7 / span 3;
@media (max-width: 1000px) { grid-column: 1 / span 6; }
@media (max-width: 640px) { grid-column: 1 / -1; }
}
.yn {
  display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 12px 24px;
margin: 0;
padding: 18px 0;
border: 0;
border-block-start: 1px solid var(--border-color-dark);
min-inline-size: 0;
&:first-child { border-block-start: 0; padding-block-start: 0; }
& > legend { float: left; inline-size: 100%; margin: 0; padding: 0; font-size: 0.9375rem; font-weight: 500; color: var(--text-dark); }
& .form__help { grid-column: 1 / -1; margin-block-start: -6px; }
/* Yes / No: segmented control. One white track, an ink thumb slides to the chosen side. */
& .form__pills {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 4px;
  border-radius: var(--radius-circle);
  background: #ffffff;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--neutral) 20%, transparent);
}
& .form__pills::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: 4px;
  inset-inline-start: 4px;
  inline-size: calc(50% - 4px);
  border-radius: var(--radius-circle);
  background: var(--neutral);
  opacity: 0;
  transform: scale(0.9);
  transition: transform 0.35s var(--ease-brand), opacity 0.2s ease-out;
}
& .form__pills:has(input:checked)::before { opacity: 1; transform: none; }
& .form__pills:has(.form__pill:last-child input:checked)::before { transform: translateX(100%); }
& .form__pill { min-inline-size: 76px; min-block-size: 38px; justify-content: center; background: transparent; box-shadow: none; }
& .form__pill:hover { box-shadow: none; background: color-mix(in srgb, var(--neutral) 5%, transparent); }
& .form__pill:has(input:checked) { background: transparent; color: var(--text-light); }
& .form__pill-tick { display: none; }
@media (max-width: 640px) { grid-template-columns: minmax(0, 1fr); }
}
.site-footer__base {
  display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 16px;
font-size: 0.875rem;
color: var(--text-light-muted);
}
.eyebrow {
  font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--secondary);
.card-dark & { color: var(--text-light-muted); }
}
.gs-opt__top {
  display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
& b { font-family: var(--heading-font-family); font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; }
}
.care-plans__head {
  inline-size: 100%;
max-inline-size: var(--measure);
margin-inline: auto;
margin-block-end: clamp(36px, 4vw, 56px);
/* Statement left, short intro right: same split as the section above. */
display: grid;
grid-template-columns: var(--grid-12);
column-gap: 24px;
row-gap: 24px;
align-items: start;
}
.form__fieldset {
  display: flex;
flex-direction: column;
gap: 12px;
min-inline-size: 0;
margin: 0;
padding: 0;
border: 0;
}
.svc-case__body {
  display: flex;
flex-direction: column;
gap: 18px;
& h3 { margin: 0; }
}
.stats__label {
  max-inline-size: 14ch;
font-family: var(--heading-font-family);
font-weight: 400;
font-size: var(--text-l);
line-height: 1.15;
letter-spacing: -0.01em;
text-wrap: balance;
color: var(--secondary);
}
.work-card__caption {
  position: absolute;
z-index: 2;
inset: auto clamp(20px, 2.4vw, 36px) clamp(20px, 2.4vw, 36px);
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
column-gap: 24px;
color: var(--text-light);
@media (max-width: 640px) { position: relative; inset: auto; }
}
.mobile-menu__item {
  opacity: 0;
transform: translateY(24px);
transition: opacity 0.2s ease-out, transform 0.3s ease-in;
.is-open & { opacity: 1; transform: none; transition: opacity 0.5s ease-out 0.25s, transform 0.7s var(--ease-brand) 0.25s; }
.is-open &:nth-child(2) { transition-delay: 0.3s; }
.is-open &:nth-child(3) { transition-delay: 0.35s; }
.is-open &:nth-child(4) { transition-delay: 0.4s; }
.is-open &:nth-child(5) { transition-delay: 0.45s; }
}
.sig-head {
  inline-size: 100%;
max-inline-size: 1100px;
margin: 0 auto clamp(32px, 4vw, 56px);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
& .vc-logo { margin-block-end: clamp(16px, 3vw, 32px); }
& h1 { margin: 0; font-family: var(--heading-font-family); font-weight: 500; font-size: clamp(2.4rem, 1.5rem + 3.8vw, 4.5rem); line-height: 1; letter-spacing: -0.03em; }
& p { margin: 0; max-inline-size: 60ch; font-size: clamp(1.05rem, 1rem + 0.25vw, 1.2rem); line-height: 1.55; color: #5b5f63; }
}