/* ---------- Tokens ---------- */
:root {
--ink: #1c1c19;
--near-black: #301406;
--cream: #f4f0de;
--cream-soft: #faf8ee;
--white: #f6f6f6;
--moss: #5b6e33;
--moss-dark: #414f22;
--rust: #3d1b10;
--burnt: #c8631f;
--orange: #ff6a13;
--blue: #0e75bf;
--grey: #56554e;
/* Solid nav surface. Shared by the bar and the mobile dropdown panel so the
two halves can't drift apart into visibly different browns. */
--nav-solid: #1e1a17;
/* Helvetica, to match the printed flyers. Resolved from the reader's own
system on Apple devices; Arimo (metrically compatible, webfont) covers
Windows and Android, where no Helvetica exists. Both top out at Bold, so
display weights are 700 rather than 800/900 to avoid synthetic bold. */
--font-display: 'Helvetica Neue', Helvetica, 'Arimo', Arial, sans-serif;
--font-body: 'Inter', sans-serif;
--container: 1180px;
--gutter: clamp(1.5rem, 5vw, 4rem);
--edge-mask: linear-gradient(to bottom, var(--near-black) 0, transparent 70px, transparent calc(100% - 70px), var(--near-black) 100%);
/* Longer fade for sections carrying a full-bleed photo or video. 70px is
enough to hide a seam between two flat gradients, but a video edge needs
a much longer run-off before it stops reading as a hard line. */
--edge-mask-long: linear-gradient(to bottom, var(--near-black) 0, rgba(48,20,6,0.92) 70px, transparent 260px, transparent calc(100% - 260px), rgba(48,20,6,0.92) calc(100% - 70px), var(--near-black) 100%);
}
/* ---------- Reset ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
* { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
/* The canvas has to be dark, not cream. Every section paints its own dark
background, but iOS rubber-band overscroll and Chrome's collapsing URL bar
both expose the document canvas beyond the page, which showed as a light
band above and below the site. Set on html as well as body so it propagates
whichever element the browser takes the canvas colour from. */
html { background: var(--nav-solid); }
body {
font-family: var(--font-body);
background: var(--nav-solid);
color: var(--ink);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
/* `clip` rather than `hidden`: hidden would make body a scroll container and
break the sticky .about__photos. Nothing currently overflows sideways;
this is a guard. */
overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ol, ul { list-style: none; }
h1, h2, h3 {
font-family: var(--font-display);
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.05;
}
/* ---------- Film grain overlay ---------- */
.grain {
position: fixed;
inset: 0;
z-index: 999;
pointer-events: none;
opacity: 0.42;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch' result='noise'/%3E%3CfeColorMatrix in='noise' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.4 -0.7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-weight: 700;
font-size: 1rem;
letter-spacing: 0.01em;
text-transform: uppercase;
padding: 1rem 1.9rem;
border-radius: 3px;
border: 2px solid transparent;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
cursor: pointer;
white-space: nowrap;
}
.btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.btn--primary {
background: var(--orange);
color: var(--ink);
border-color: var(--orange);
}
.btn--primary:hover { background: transparent; color: var(--orange); }
.btn--cta {
background: transparent;
color: var(--cream);
border-color: var(--cream);
padding: 0.65rem 1.3rem;
font-size: 0.8rem;
border-radius: 3px;
}
.btn--cta:hover { background: var(--cream); color: var(--near-black); }
.btn--outline-light {
border-color: var(--orange);
color: var(--orange);
}
.btn--outline-light:hover { background: var(--orange); color: var(--ink); }
.btn--solid-dark {
background: var(--near-black);
color: var(--cream);
border-color: var(--near-black);
}
.btn--solid-dark:hover { background: transparent; color: var(--cream); border-color: var(--cream); }
/* ---------- CTA text link ---------- */
.cta-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-display);
font-weight: 700;
font-size: 1.15rem;
color: var(--orange);
border-bottom: 2px solid currentColor;
padding-bottom: 0.2rem;
margin-top: 3rem;
transition: opacity 0.15s ease;
}
.cta-link:hover { opacity: 0.7; }
.cta-link span { transition: transform 0.15s ease; }
.cta-link:hover span { transform: translateX(4px); }
.steps__cta { margin-top: 3rem; }
/* ---------- Eyebrow / heading utilities ---------- */
.eyebrow {
font-family: var(--font-display);
font-weight: 700;
font-size: 0.78rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--moss-dark);
margin-bottom: 1rem;
}
.eyebrow--light { color: rgba(255,255,255,0.85); }
.section__heading {
font-size: clamp(2.4rem, 7.5vw, 5.6rem);
/* 19ch, not 14: a ch is the width of "0", and capitals are far wider, so the
measure that suited sentence case holds far fewer letters in caps.
"STRAIGHTFORWARD" alone needs 18.4ch and was splitting mid-word. The wider
measure also restores the line structure the
s intend, which caps had
pushed onto extra lines. */
max-width: 19ch;
margin-bottom: 1rem;
overflow-wrap: break-word;
}
.section__heading--light { color: var(--cream); }
/* Section-level headings run in caps to match the printed flyers, and to carry
the weight the 800/900 faces gave before the move to Helvetica, which stops
at Bold. Caps set wider than sentence case, so the tracking is eased back
from the -0.01em the h1/h2/h3 rule applies. */
.hero__headline,
.section__heading,
.intro-bio__name,
.footer__heading {
text-transform: uppercase;
letter-spacing: -0.005em;
}
/* The smaller display-font headings run in caps too, matching the flyer's
bulleted lists. These sit in narrow columns, so tracking opens up slightly
rather than tightening: at this size caps need the room to stay legible. */
.pillar h3,
.step h3,
.included__item h4 {
text-transform: uppercase;
letter-spacing: 0.01em;
}
/* "STRAIGHTFORWARD" is by some way the longest word in any heading (18.4ch in
caps). On a narrow phone the 2.4rem floor leaves it wider than the screen,
so it split as "STRAIGHTFORW/ARD". Only this heading gets a lower floor;
above ~512px the vw term takes over and it matches every other heading. */
#pricing .section__heading {
font-size: clamp(1.9rem, 7.5vw, 5.6rem);
}
.section__subhead {
font-family: var(--font-body);
font-weight: 400;
font-size: clamp(1.05rem, 2vw, 1.25rem);
line-height: 1.5;
color: rgba(244,240,222,0.82);
max-width: 48ch;
margin-bottom: 2.5rem;
}
/* ---------- Nav ---------- */
.nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 500;
background: var(--nav-solid);
border-bottom: 1px solid rgba(244,240,222,0.1);
}
.nav__inner {
max-width: var(--container);
margin: 0 auto;
padding: 0.9rem var(--gutter);
display: flex;
align-items: center;
gap: 2rem;
}
.nav__mark {
display: flex;
align-items: center;
}
.nav__logo {
height: 40px;
width: auto;
display: block;
}
.nav__links {
display: flex;
gap: 1.8rem;
margin-left: auto;
font-weight: 600;
font-size: 0.9rem;
}
.nav__links a,
.nav__link-btn { color: var(--cream); opacity: 0.8; transition: opacity 0.2s; }
.nav__links a:hover,
.nav__link-btn:hover { opacity: 1; }
.nav__cta { margin-left: 0.5rem; }
/* Pro Bono is a button, not a link: it reveals a dialog rather than navigating,
so there is no URL for it to point at. Styled to sit level with the links. */
.nav__link-btn {
background: none;
border: none;
padding: 0;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
cursor: pointer;
text-align: left;
white-space: nowrap;
}
.nav__link-btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.nav__toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 32px; height: 32px;
background: none; border: none; cursor: pointer;
}
.nav__toggle span {
display: block; height: 2px; background: var(--cream); border-radius: 2px;
transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ---------- Hero ---------- */
/* Palette sampled directly from Website Media/grainy amber.jpg —
dark base (~#301406), dark olive corner (~#444812), bright olive-gold
bloom (~#8a9a2e), bright orange hotspot (~#f88c1e). Two large, roughly
equal-weight blooms (olive top-left, orange bottom-right) sized to
overlap through the middle so both colours stay readable at once,
instead of one tone dominating the section. */
.hero {
position: relative;
min-height: 100svh;
display: flex;
/* stretch, not flex-end: the content box fills the hero so its children can
be distributed over the full height instead of sitting as one block at
the bottom, which left the top of the section empty. */
align-items: stretch;
overflow: hidden;
background:
radial-gradient(125% 100% at 90% 88%, #f88c1e 0%, rgba(248,140,30,0.95) 34%, transparent 65%),
radial-gradient(125% 100% at 8% 8%, rgba(138,154,46,0.97), transparent 62%),
radial-gradient(70% 60% at 0% 0%, rgba(90,100,30,0.85), transparent 55%),
var(--near-black);
}
.hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(0deg, var(--near-black) 0%, rgba(48,20,6,0.55) 10%, rgba(48,20,6,0.12) 40%, transparent 68%);
}
.hero__content {
position: relative;
z-index: 2;
max-width: var(--container);
margin: 0 auto;
/* Top padding clears the fixed nav. The larger bottom padding gives the CTA
room beneath it so it does not sit hard against the foot of the hero. */
padding: 7rem var(--gutter) 8rem;
color: var(--cream);
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
/* Two auto margins below (on the eyebrow and the description) split the
hero's spare height in half: one half above the eyebrow, the other between
the headline and the description. That seats the headline near the middle
as the anchor and drops the description and button low, paired tightly. */
justify-content: flex-start;
text-align: center;
}
/* Scaled up to read as the top line of the headline rather than a label above
it. Weight is already 700, the same as the headline; what made it feel light
was the small size, the wide label tracking and the dimmed colour, so all
three are pulled toward the headline's treatment. */
.hero .eyebrow {
font-size: clamp(1.15rem, 3.1vw, 2.4rem);
letter-spacing: 0.02em;
line-height: 1.12;
/* Faded cream so it reads as a supporting line under the headline rather
than as part of it. Set as an alpha colour rather than `opacity` so it
tints only the text and creates no stacking context. */
color: rgba(244, 240, 222, 0.65);
/* No auto here: the eyebrow sits at the top of the content box, clear of the
nav by the container's top padding. The spare height is taken below it. */
margin-top: 0;
margin-bottom: 0.7em;
}
.hero__headline {
/* Sized as large as the three-line set allows, bounded at both ends by
"IN CAMBERWELL" having to hold one line. The 10vw term is capped by the
narrowest phones (375px leaves 327px usable); the 7.5rem ceiling by the
widest, where the container stops growing at 1180px and leaves 1052px
usable, so past ~125px that line wraps and the headline becomes four. */
font-size: clamp(2.3rem, 10vw, 7.5rem);
line-height: 0.98;
/* The three lines are set explicitly with
so "IN CAMBERWELL" holds
together. 16ch: in caps that line measures 15.3ch, the widest of the
three, and anything narrower wraps it back into four lines. */
max-width: 16ch;
/* One of the two autos that split the spare height. With the other on the
description, the headline is centred between the eyebrow above and the
description/button pair below, landing near the middle of the hero. */
margin-top: auto;
margin-bottom: 0;
overflow-wrap: break-word;
}
.hero__subhead {
font-size: clamp(1rem, 1.6vw, 1.2rem);
max-width: 34ch;
/* Matched to the eyebrow's fade so the two supporting lines sit at the same
level, below the headline's full-strength cream. */
color: rgba(244, 240, 222, 0.65);
/* The other half of the spare height sits here, dropping the description and
button low. The small bottom margin keeps them tight as one unit. */
margin-top: auto;
margin-bottom: 1.4rem;
}
.hero__ctas { display: flex; align-items: center; justify-content: center; gap: 1.2rem; flex-wrap: wrap; }
.hero__scroll {
position: absolute;
bottom: 1.8rem; left: var(--gutter);
z-index: 2;
font-family: var(--font-display);
font-weight: 700;
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(244,240,222,0.7);
transition: color 0.15s ease;
}
.hero__scroll:hover { color: var(--cream); }
/* ---------- Intro bio ---------- */
/* Deliberately small/byline-scale — sits between the hero and the first
full section, so it should read as a quick intro, not a section header. */
.intro-bio {
background: var(--near-black);
padding: clamp(2.6rem, 6vw, 4.2rem) var(--gutter);
border-bottom: 1px solid rgba(244,240,222,0.1);
}
.intro-bio__inner {
max-width: var(--container);
margin: 0 auto;
display: flex;
align-items: center;
gap: clamp(1.8rem, 4vw, 3rem);
}
.intro-bio__photo {
flex-shrink: 0;
width: clamp(150px, 18vw, 240px);
height: clamp(150px, 18vw, 240px);
border-radius: 50%;
object-fit: cover;
object-position: center 15%;
}
.intro-bio__label {
font-family: var(--font-display);
font-weight: 700;
font-size: 0.82rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--orange);
margin-bottom: 0.5rem;
}
.intro-bio__name {
font-size: clamp(1.6rem, 3vw, 2.2rem);
line-height: 1.1;
color: var(--cream);
margin-bottom: 0.8rem;
}
.intro-bio__body {
font-size: clamp(1rem, 1.6vw, 1.15rem);
line-height: 1.6;
color: rgba(244,240,222,0.8);
max-width: 66ch;
}
@media (max-width: 560px) {
.intro-bio__inner { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
.intro-bio__photo { width: 150px; height: 150px; }
}
/* ---------- Google reviews strip ---------- */
/* Deliberately a slim band rather than a section: same dark ground and padding
scale as the intro bio above it, so the two read as a pair. */
.reviews {
background: var(--near-black);
padding: clamp(1.8rem, 4vw, 2.6rem) 0 clamp(1.5rem, 3vw, 2.1rem);
border-bottom: 1px solid rgba(244,240,222,0.1);
}
.reviews__inner {
max-width: var(--container);
margin: 0 auto;
}
.reviews__label {
display: flex;
align-items: center;
gap: 0.45rem;
padding-inline: var(--gutter);
margin-bottom: 0.9rem;
}
/* Google's own four-colour mark, so the rating reads as verified rather than
self-reported. Left at its own colours rather than tinted to the palette. */
.reviews__g {
width: 14px;
height: 14px;
flex-shrink: 0;
}
/* A real scroll container, so swipe and trackpad work natively and the script
only has to drive scrollTo. The gutter padding sits on the track rather than
the section so cards can run to the screen edge as they scroll past. */
.reviews__track {
position: relative;
display: flex;
gap: 0.9rem;
overflow-x: auto;
padding-inline: var(--gutter);
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--gutter);
overscroll-behavior-x: contain;
scrollbar-width: none;
-ms-overflow-style: none;
}
.reviews__track::-webkit-scrollbar { display: none; }
.reviews__track:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.review {
flex: 0 0 auto;
width: clamp(248px, 78vw, 340px);
/* Fixed height keeps the strip uniform; the text clamp below does the rest.
When a card is expanded the script sets an explicit height in px so the
growth can be transitioned, since height cannot animate to auto. */
height: 196px;
scroll-snap-align: start;
display: flex;
flex-direction: column;
padding: 1.05rem 1.15rem;
border: 1px solid rgba(244,240,222,0.15);
border-radius: 5px;
background: rgba(18,12,7,0.5);
/* Clips the full text while a card animates shut. */
overflow: hidden;
transition: height 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.review__stars {
display: flex;
gap: 2px;
color: #f3b53f;
margin-bottom: 0.6rem;
}
.review__stars svg { width: 13px; height: 13px; display: block; }
.review__text {
font-style: italic;
font-size: 0.85rem;
line-height: 1.45;
color: rgba(244,240,222,0.82);
margin-bottom: 0.7rem;
/* Longer reviews truncate with an ellipsis so every card is the same height.
Five lines is what fits the 196px card at this size. */
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Expanded: drop the clamp so the full review shows. */
.review--open .review__text {
-webkit-line-clamp: unset;
overflow: visible;
}
/* Name and the read-more toggle share one row, so the toggle costs the card
no extra height. */
.review__foot {
margin-top: auto;
padding-top: 0.5rem;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem;
}
.review__name {
font-family: var(--font-display);
font-weight: 700;
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(244,240,222,0.55);
}
.review__more {
flex-shrink: 0;
padding: 0;
border: none;
background: none;
cursor: pointer;
font-family: var(--font-display);
font-weight: 700;
font-size: 0.68rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--orange);
border-bottom: 1px solid currentColor;
transition: opacity 0.15s ease;
}
.review__more:hover { opacity: 0.7; }
.review__more:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.reviews__dots {
display: flex;
justify-content: center;
gap: 0.25rem;
margin-top: 0.9rem;
padding-inline: var(--gutter);
}
/* The button is a 22px tap target; the visible dot is drawn inside it. */
.reviews__dot {
position: relative;
width: 22px;
height: 22px;
padding: 0;
border: none;
background: none;
cursor: pointer;
}
.reviews__dot::before {
content: "";
position: absolute;
top: 50%; left: 50%;
width: 7px; height: 7px;
border-radius: 50%;
background: rgba(244,240,222,0.3);
transform: translate(-50%, -50%);
transition: background 0.2s ease, transform 0.2s ease;
}
.reviews__dot[aria-current="true"]::before {
background: var(--orange);
transform: translate(-50%, -50%) scale(1.3);
}
.reviews__dot:focus-visible { outline: 3px solid var(--blue); outline-offset: 0; }
/* ---------- Sections ---------- */
.section {
position: relative;
padding: clamp(4.5rem, 9vw, 7.5rem) var(--gutter);
overflow: hidden;
}
.section > * { position: relative; z-index: 2; }
/* Content sections: dark, subtle gradient hint, grain keeps it textured.
Each uses --edge-mask so every section resolves to pure near-black at
its top/bottom border, and adjacent sections meet with zero visible seam. */
/* Each section pairs two large, roughly equal-weight blooms (olive-gold +
bright orange, sampled from grainy amber.jpg) sized to overlap through
the middle, so both tones stay visibly readable and blend together
rather than one colour dominating the frame. */
.section--cream {
background:
var(--edge-mask),
radial-gradient(120% 95% at 8% 0%, rgba(138,154,46,0.95), transparent 62%),
radial-gradient(115% 92% at 100% 100%, #f88c1e 0%, rgba(248,140,30,0.92) 30%, transparent 65%),
var(--near-black);
}
.section--moss {
background:
var(--edge-mask),
radial-gradient(115% 92% at 94% 0%, #f88c1e 0%, rgba(248,140,30,0.92) 30%, transparent 65%),
radial-gradient(120% 95% at 2% 100%, rgba(138,154,46,0.97), transparent 62%),
var(--near-black);
}
.section--white {
background:
var(--edge-mask),
radial-gradient(115% 88% at 55% 0%, #f88c1e 0%, rgba(248,140,30,0.88) 28%, transparent 62%),
radial-gradient(120% 95% at 4% 100%, rgba(138,154,46,0.95), transparent 62%),
var(--near-black);
}
.section--grey {
background:
var(--edge-mask),
radial-gradient(125% 98% at 50% 100%, #f88c1e 0%, rgba(248,140,30,0.92) 30%, transparent 65%),
radial-gradient(110% 88% at 92% 0%, rgba(138,154,46,0.92), transparent 60%),
var(--near-black);
}
.section--faq {
background:
var(--edge-mask),
radial-gradient(115% 90% at 4% 0%, #f88c1e 0%, rgba(248,140,30,0.9) 28%, transparent 64%),
radial-gradient(120% 95% at 98% 100%, rgba(138,154,46,0.97), transparent 62%),
var(--near-black);
}
/* Statement sections: richer, more visible gradient movement */
.section--location {
background:
var(--edge-mask),
radial-gradient(125% 98% at 6% 2%, rgba(138,154,46,0.97), transparent 64%),
radial-gradient(70% 60% at 0% 0%, rgba(90,100,30,0.88), transparent 55%),
radial-gradient(120% 95% at 94% 92%, #f88c1e 0%, rgba(248,140,30,0.95) 30%, transparent 65%),
var(--near-black);
}
.eyebrow, .pillars, .about, .pricing, .steps, .faq, .location__text, .location__photos, .location__map, .btn, .cta-link, .probono__subtitle, .probono__body {
max-width: var(--container);
margin-left: auto;
margin-right: auto;
}
.section__seal {
position: absolute;
top: clamp(1rem, 4vw, 2.5rem);
right: clamp(1rem, 4vw, 2.5rem);
width: clamp(90px, 12vw, 150px);
z-index: 1;
opacity: 0.9;
}
/* Asymmetric layout: a handful of key section headlines shift to the right
edge instead of always sitting flush left, echoing the flyer's offset
composition. The seal watermark moves to the opposite (left) corner on
these sections so it never collides with the right-set headline. */
#help > h2,
#help > .section__subhead {
margin-left: auto;
margin-right: 0;
text-align: right;
}
#pricing > .eyebrow,
#pricing > h2,
#pricing > .section__subhead {
margin-left: auto;
margin-right: 0;
text-align: right;
}
#pricing .section__seal,
#how .section__seal {
right: auto;
left: clamp(1rem, 4vw, 2.5rem);
}
/* ---------- Pillars ---------- */
.pillars {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.pillar {
padding: 2.2rem 1.6rem;
border: 1px solid rgba(244,240,222,0.15);
}
.pillar h3 {
color: var(--cream);
font-size: 1.3rem;
margin-bottom: 0.7rem;
}
.pillar p { color: rgba(244,240,222,0.72); font-size: 0.95rem; }
/* Thin-line icon badge, matching the discount icons' style (reused
wherever a small outline icon is needed above a title). */
.line-icon {
width: 26px;
height: 26px;
border-radius: 50%;
border: 1.25px solid rgba(244,240,222,0.5);
display: flex;
align-items: center;
justify-content: center;
color: var(--cream);
margin-bottom: 0.75rem;
transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.line-icon svg { width: 13px; height: 13px; }
@media (hover: hover) and (pointer: fine) {
.pillar:hover .line-icon,
.included__item:hover .line-icon {
transform: scale(1.08);
border-color: var(--orange);
color: var(--orange);
}
}
/* ---------- How It Works intro row ---------- */
.how__intro {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: clamp(1.5rem, 4vw, 3rem);
max-width: var(--container);
margin: 0 auto 3rem;
}
.how__intro-text { flex: 1; min-width: 0; }
.how__video-frame {
flex-shrink: 0;
width: clamp(180px, 23vw, 300px);
aspect-ratio: 1 / 1;
border-radius: 14px;
overflow: hidden;
position: relative;
}
/* Two things were darkening this tile: brightness(0.6) on the video itself and
a scrim on top at up to 0.6 alpha. Both are pulled back so the footage reads
clearly, keeping enough sepia and warmth for the lo-fi treatment. */
.how__video {
width: 100%;
height: 100%;
object-fit: cover;
filter: sepia(0.18) saturate(1.2) brightness(0.95) contrast(1.05);
}
.how__video-scrim {
position: absolute;
inset: 0;
background: linear-gradient(160deg, rgba(56,26,10,0.14), rgba(20,10,4,0.24));
}
@media (max-width: 760px) {
.how__intro { flex-direction: column; }
/* Stacked, the row's align-items: flex-start would pin the tile to the left
edge. align-self centres it and the wider cap lets it fill the screen. */
.how__video-frame {
width: min(100%, 460px);
align-self: center;
}
}
/* ---------- Steps ---------- */
.steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2.5rem;
}
.step { display: flex; flex-direction: column; gap: 1rem; }
.step__num {
font-family: var(--font-display);
font-weight: 700;
font-size: 1rem;
color: rgba(244,240,222,0.6);
border-bottom: 2px solid rgba(244,240,222,0.35);
padding-bottom: 0.6rem;
}
.step h3 { color: var(--cream); font-size: 1.2rem; margin-bottom: 0.5rem; }
.step p { color: rgba(244,240,222,0.78); font-size: 0.95rem; }
/* ---------- About ---------- */
/* EXPERIMENTAL: video-background treatment for review — remove this block
plus the about--video-bg elements in index.html to revert to the plain
gradient background used elsewhere. */
.about--video-bg { position: relative; }
.about__bg-video {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 25% 30%;
filter: grayscale(0.25) contrast(1.2) brightness(0.75) saturate(0.85);
}
/* Layer order matters here. The edge mask has to sit ON TOP of the darkening
gradient — underneath it, the semi-transparent scrim repaints the masked
edge and the section no longer resolves to --near-black at its border,
which is what produced a visible line against How It Works above.
The scrim is tinted with --near-black (48,20,6) rather than a colder
grey-black for the same reason: both sides of the seam must land on the
same colour. The olive bloom carries How It Works' bottom-left tone down
across the boundary so the gradient reads as continuous. */
.about__bg-scrim {
position: absolute;
inset: 0;
z-index: 1;
background:
var(--edge-mask-long),
radial-gradient(85% 45% at 4% 0%, rgba(138,154,46,0.45), transparent 62%),
linear-gradient(100deg, rgba(48,20,6,0.95) 0%, rgba(48,20,6,0.88) 38%, rgba(48,20,6,0.6) 68%, rgba(48,20,6,0.4) 100%);
}
.about {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: clamp(2rem, 5vw, 4rem);
align-items: start;
}
.about__text p { margin-bottom: 1.1rem; color: rgba(244,240,222,0.8); font-size: 1.02rem; }
.about__text p:last-of-type { margin-bottom: 0; }
.about__highlight {
font-weight: 700;
font-size: 1.15em;
color: var(--orange);
}
.about__photos { position: sticky; top: 6rem; }
.about__photos {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.about__photos figure {
position: relative;
border-radius: 0;
overflow: hidden;
aspect-ratio: 2/5;
background: var(--ink);
}
.about__photos img {
width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(0.3) contrast(1.15) brightness(0.97);
}
.about__photos figcaption {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 0.6rem 0.8rem;
font-family: var(--font-display);
font-weight: 700;
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--cream);
background: linear-gradient(0deg, rgba(0,0,0,0.65), transparent);
}
/* ---------- What's included ---------- */
.included {
max-width: var(--container);
margin: 0 auto 4rem;
}
.included__heading {
color: var(--cream);
font-size: 1.7rem;
margin-bottom: 0.6rem;
}
.included__intro {
font-size: 1rem;
color: rgba(244,240,222,0.85);
margin-bottom: 2rem;
}
.included__list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0 2.4rem;
}
.included__item {
padding: 1.6rem 0;
border-top: 1px solid rgba(244,240,222,0.15);
}
.included__item h4 {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.05rem;
color: var(--cream);
margin-bottom: 0.5rem;
}
.included__item p {
font-size: 0.9rem;
line-height: 1.4;
color: rgba(244,240,222,0.72);
}
/* ---------- Pricing ---------- */
.pricing {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
/* The whole card is the link, so it carries the pointer and the hover state. */
.price-card {
position: relative;
aspect-ratio: 3 / 4;
border-radius: 0;
overflow: hidden;
color: var(--cream);
background-size: cover;
background-position: center;
display: flex;
cursor: pointer;
transition: transform 0.25s ease, box-shadow 0.25s ease;
/* The title scales off the card's own width, not the viewport. Card width
changes with the grid's column count (3 / 2 / 1) independently of
breakpoints, so a vw-based clamp would mis-size at the switchover. */
container-type: inline-size;
}
/* The photo lives on its own layer rather than on the card, so a colour
treatment can be applied to the image alone. `filter` on the card itself
also tints its text, which is what gave Block of 4 an orange cast.
background-image: inherit picks up the per-card inline url(). */
.price-card::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background-image: inherit;
background-size: cover;
background-position: center;
}
.price-card::after {
content: "";
position: absolute;
inset: 0;
background: rgba(10,10,8,0.68);
z-index: 1;
transition: background 0.25s ease;
}
/* Hover: lift a little, lift the scrim so the photo comes forward, and draw an
inset orange rule. Inset rather than a border so nothing reflows, and the
scrim change does the "highlight" without washing out the grain.
Pointer-only, so touch devices never get a stuck hover after a tap.
Selectors are qualified with .pricing to outrank `.reveal.is-visible`, which
the scroll-reveal script puts on every card. That rule sets transform: none
and its own transition at the same specificity but later in the file, so an
unqualified .price-card:hover loses to it and the lift never renders. */
@media (hover: hover) and (pointer: fine) {
.pricing .price-card {
transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1),
box-shadow 0.28s ease;
}
.pricing .price-card::before { transition: filter 0.28s ease; }
.pricing .price-card::after { transition: background 0.28s ease; }
.pricing .price-card:hover {
transform: translateY(-5px) scale(1.025);
box-shadow: inset 0 0 0 3px var(--orange), 0 16px 34px rgba(10,6,3,0.5);
}
/* Scrim eases back and the photo brightens, so the image reads through. */
.pricing .price-card:hover::after { background: rgba(10,10,8,0.46); }
.pricing .price-card:hover::before { filter: brightness(1.18) contrast(1.04); }
/* Block of 4 carries the orange treatment on its photo. Restate it here with
the brightness folded in: a bare brightness() would replace the whole
filter and drop the colour grade on hover. */
.pricing .price-card--warm:hover::before {
filter: sepia(0.4) hue-rotate(8deg) saturate(1.3) brightness(1.24);
}
}
/* Tap affordance, shown only where there is no hover to do the job. */
.price-card__hint {
display: none;
margin-top: 0.9rem;
font-family: var(--font-display);
font-weight: 700;
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(244, 240, 222, 0.62);
}
@media (hover: none) {
.price-card__hint { display: block; }
}
.price-card:focus-visible {
outline: 3px solid var(--blue);
outline-offset: 3px;
}
.price-card__inner {
position: relative;
z-index: 2;
width: 100%;
padding: 1.6rem;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.price-card__tag {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
opacity: 0.85;
margin-bottom: 0.5rem;
}
/* Poster-scale title: the hero element of each card, sized off the card width
so it fills the measure at every column count. */
.price-card h3 {
/* Retuned for Switzer, which is appreciably narrower than the Archivo this
replaced and left ~100px of slack at the old size. The window is bounded
below by "FREE TASTER" (must stay too wide for one line, so every title
is two lines) and above by "TRAINING" (must not overshoot a one-column
card, or overflow-wrap splits it mid-word). 16cqi sits mid-window with
roughly 40px of margin at both ends across all three column counts. */
font-size: clamp(1.9rem, 16cqi, 4rem);
line-height: 0.9;
letter-spacing: -0.03em;
text-transform: uppercase;
color: var(--orange);
margin-bottom: 0.55rem;
overflow-wrap: break-word;
}
.price-card__amount {
font-family: var(--font-display);
font-weight: 700;
font-size: 2.3rem;
margin-bottom: 0.5rem;
}
.price-card__amount span { font-size: 1rem; font-weight: 700; opacity: 0.7; }
.price-card__desc { font-size: 0.9rem; line-height: 1.4; opacity: 0.92; max-width: 30ch; }
/* Orangey treatment for the Block of 4 photo. Targets the image layer only, so
the card's text stays the same cream as every other card. Carried on an
explicit class rather than :nth-child, which would silently land on the
wrong card if the pricing order ever changes. */
.price-card--warm::before {
filter: sepia(0.4) hue-rotate(8deg) saturate(1.3) brightness(1.05);
}
/* ---------- Discounts ---------- */
.discounts {
max-width: var(--container);
margin: 4rem auto 0;
padding-top: 3rem;
border-top: 1px solid rgba(244,240,222,0.18);
}
.discounts__heading {
color: var(--cream);
font-size: 1.7rem;
margin-bottom: 0.6rem;
}
.discounts__line {
font-size: 1rem;
color: rgba(244,240,222,0.85);
margin-bottom: 1.8rem;
}
.discounts__row {
display: flex;
flex-wrap: wrap;
gap: 2rem 2.6rem;
margin-bottom: 2rem;
}
.discounts__item {
display: flex;
align-items: center;
gap: 0.9rem;
font-weight: 600;
font-size: 0.95rem;
color: var(--cream);
}
.discounts__icon {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1.5px solid rgba(244,240,222,0.5);
display: flex;
align-items: center;
justify-content: center;
}
.discounts__icon svg { width: 20px; height: 20px; }
.discounts__note {
font-size: 0.9rem;
color: #f5ede0;
margin-bottom: 1.8rem;
}
/* ---------- FAQ ---------- */
.faq {
border-top: 1px solid rgba(244,240,222,0.15);
}
.faq__item {
border-bottom: 1px solid rgba(244,240,222,0.15);
}
.faq__question {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
padding: 1.6rem 0;
background: none;
border: none;
cursor: pointer;
text-align: left;
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.01em;
font-size: clamp(1.05rem, 2.2vw, 1.4rem);
color: var(--cream);
}
.faq__question:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.faq__icon {
position: relative;
width: 20px;
height: 20px;
flex-shrink: 0;
}
.faq__icon::before,
.faq__icon::after {
content: "";
position: absolute;
top: 50%; left: 50%;
background: var(--orange);
transition: transform 0.25s ease;
}
.faq__icon::before { width: 100%; height: 2px; transform: translate(-50%, -50%); }
.faq__icon::after { width: 2px; height: 100%; transform: translate(-50%, -50%); }
.faq__question[aria-expanded="true"] .faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.35s ease;
}
.faq__answer p {
padding-bottom: 1.8rem;
max-width: 62ch;
font-size: 1rem;
line-height: 1.6;
color: rgba(244,240,222,0.78);
}
.faq__question[aria-expanded="true"] + .faq__answer { max-height: 20rem; }
/* ---------- Location ---------- */
/* One wrapper holds every element in the section, so the eyebrow, heading,
body copy, address, photos, map and button all share a single left edge.
Previously the heading block was right-aligned while the body copy was
centre-constrained by the shared container rule, which read as scattered
fragments rather than one block. The children opt out of that rule's auto
margins here — the wrapper does the centring for all of them. */
.location__inner {
max-width: var(--container);
margin: 0 auto;
text-align: left;
}
.location__inner > * {
margin-left: 0;
margin-right: 0;
}
.section--location .eyebrow { color: var(--cream); }
.section--location .section__heading,
.section--location .location__text { color: var(--cream); }
.location__text {
font-size: 1.1rem;
max-width: 62ch;
margin-bottom: 1.4rem;
color: rgba(244,240,222,0.9);
}
.location__address {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.05rem;
letter-spacing: 0.02em;
color: var(--orange);
margin-bottom: 2.2rem;
}
.location__photos {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin-bottom: 2.5rem;
}
.location__photo {
width: 100%;
aspect-ratio: 4 / 3;
background-color: rgba(244,240,222,0.04);
background-size: cover;
background-position: center;
filter: grayscale(0.3) contrast(1.15);
}
.location__map {
margin-bottom: 2.5rem;
border: 2px solid var(--orange);
line-height: 0;
}
.location__map iframe {
width: 100%;
height: 380px;
border: 0;
display: block;
}
/* ---------- Pro Bono Coaching ---------- */
.section--probono {
background:
var(--edge-mask),
radial-gradient(115% 92% at 6% 0%, #f88c1e 0%, rgba(248,140,30,0.85) 30%, transparent 62%),
radial-gradient(120% 95% at 96% 100%, rgba(138,154,46,0.92), transparent 62%),
var(--near-black);
}
.probono__subtitle {
font-family: var(--font-display);
font-weight: 700;
font-size: 1rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--cream);
margin-bottom: 2.5rem;
}
.probono__body { max-width: 62ch; margin-bottom: 2.5rem; }
.probono__body p {
margin-bottom: 1.2rem;
color: rgba(244,240,222,0.85);
font-size: 1.02rem;
line-height: 1.6;
}
.probono__subhead {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.3rem;
color: var(--cream);
margin-top: 2.2rem;
margin-bottom: 1rem;
}
.probono__list { margin-bottom: 1.4rem; }
.probono__list li {
position: relative;
padding-left: 1.4rem;
margin-bottom: 0.7rem;
color: rgba(244,240,222,0.85);
font-size: 1.02rem;
line-height: 1.5;
}
.probono__list li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 7px;
height: 7px;
background: var(--orange);
border-radius: 50%;
}
/* ---------- Footer ---------- */
.footer {
position: relative;
background:
/* Ease the last stretch to the canvas colour so the page ends on exactly
the shade the browser paints beyond it, leaving no band on overscroll. */
linear-gradient(to bottom, transparent calc(100% - 140px), var(--nav-solid) 100%),
var(--edge-mask),
radial-gradient(90% 70% at 90% 0%, rgba(91,110,51,0.45), transparent 55%),
radial-gradient(85% 70% at 10% 30%, rgba(200,99,31,0.4), transparent 55%),
radial-gradient(100% 90% at 50% 100%, rgba(61,27,16,0.9), transparent 60%),
var(--near-black);
color: var(--cream);
/* env() resolves to 0 with the current viewport tag and only becomes nonzero
if viewport-fit=cover is ever added, so this is safe either way. */
padding: clamp(4.5rem, 9vw, 7.5rem) var(--gutter) calc(2.5rem + env(safe-area-inset-bottom, 0px));
text-align: center;
overflow: hidden;
}
.footer .eyebrow { margin-left: auto; margin-right: auto; }
.footer__heading {
font-size: clamp(2rem, 4vw, 3rem);
margin-bottom: 1rem;
}
.footer__text {
color: rgba(244,240,222,0.75);
max-width: 40ch;
margin: 0 auto 2.2rem;
font-size: 1.05rem;
}
.footer__cta { margin-bottom: 1.2rem; }
.footer__email {
display: block;
font-size: 0.95rem;
color: rgba(244,240,222,0.7);
text-decoration: underline;
text-underline-offset: 3px;
margin-bottom: 3.5rem;
}
.footer__bottom {
display: flex;
justify-content: center;
gap: 1.6rem;
flex-wrap: wrap;
font-size: 0.78rem;
color: rgba(244,240,222,0.45);
border-top: 1px solid rgba(244,240,222,0.12);
padding-top: 1.5rem;
}
/* ---------- Pro Bono dialog ---------- */
/* Pro Bono is no longer part of the scrolling page. It opens from the burger
menu as a native