/* ==========================================================================
SS PARA LEGAL SERVICES - Design System
ssadvisers.com/paralegal-support
COLOUR IS LOCKED BY THE CLIENT.
Source: client-provided/24-08-2026/SS_Paralegal_Color_Kit.pdf §1 and §5.
Green, Gold and White/Ivory are the complete colour language. No red, no
blue, no black-dominant sections, no unrelated accents. Every gradient,
shadow and overlay is derived from the approved green family so the site
always reads visually as GREEN rather than black. The WhatsApp control is
the single functional exception (#25D366, white icon).
Do not nudge these values by eye. They are the client's issued kit.
CONTENTS
1 Tokens
2 Reset and base
3 Layout primitives
4 Typographic devices
5 Buttons
6 Availability strip
7 Header, mega panel, drawer
8 Opening frames
9 Page headers
10 Cards, pillars, steps, lists
11 Disclosure (FAQ)
12 Forms
13 Callouts and compliance
14 Footer
15 WhatsApp control
16 Motion
17 Utilities and print
========================================================================== */
/* --------------------------------------------------------------------------
1. TOKENS
-------------------------------------------------------------------------- */
:root {
/* ---- The locked kit, verbatim ---- */
--ss-green: #042B19; /* Primary Deep Green - hero, dark bands, footer */
--ss-green-secondary: #0A502C; /* Supporting Green - gradients, cards, depth */
--ss-gold: #D8AC54; /* Premium Gold - borders, icons, dividers */
--ss-gold-highlight: #EFC873; /* Highlight Gold - primary CTA, emphasis */
--ss-ivory: #F5F3EE; /* Warm White / Ivory - header, light sections */
--ss-white: #FFFFFF;
--ss-whatsapp: #25D366;
/* ---- Derived, all inside the approved green family ----
The kit forbids darkening toward black, so the deepest tone below is
still a legible green. Used only at the far edge of gradients. */
--green-lift: #0E6237;
--green-wash: #ECF1ED;
--green-line: #DCE4DD;
/* Gold as TEXT on a light surface. The kit's Premium Gold is an ink for
borders, icons and dividers on green; at small sizes on ivory it only
reaches 3.9:1, so gold emphasis text uses this darkened member of the same
family, which clears 4.5:1 on ivory, wash and white alike. Gold on green
is always the kit value. */
--gold-ink: #84601E;
/* ---- Ink ---- */
--ink: #042B19;
--ink-soft: #3A4A40; /* secondary copy on light, 8.5:1 on ivory */
--ink-faint: #5C6A61; /* fine print on light, 4.9:1 on ivory */
--on-green: #FFFFFF;
--on-green-soft: rgba(255, 255, 255, 0.84);
--on-green-faint: rgba(255, 255, 255, 0.64);
/* ---- Gold at low alpha, for hairlines and washes on green ---- */
--gold-line: rgba(216, 172, 84, 0.44);
--gold-faint: rgba(216, 172, 84, 0.18);
--gold-glow: rgba(239, 200, 115, 0.28);
/* ---- Type ---- */
--font-display: "Spectral", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
--font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
/* Floors are set for a 360px phone, ceilings for a 1440px desktop. The
floors were raised after review: at the old values body copy landed at
16px and secondary copy below that, which reads small on a handset. */
--t-display: clamp(2.7rem, 1.55rem + 4.6vw, 4.4rem);
--t-h1: clamp(2.3rem, 1.6rem + 3vw, 3.35rem);
--t-h2: clamp(1.85rem, 1.45rem + 1.75vw, 2.45rem);
--t-h3: clamp(1.3rem, 1.16rem + 0.6vw, 1.5rem);
--t-h4: clamp(1.12rem, 1.06rem + 0.26vw, 1.2rem);
--t-lead: clamp(1.14rem, 1.06rem + 0.36vw, 1.28rem);
--t-body: clamp(1.06rem, 1.02rem + 0.18vw, 1.12rem);
--t-small: 0.98rem;
--t-label: 0.82rem;
/* ---- Space ---- */
--space-band: clamp(4rem, 2.6rem + 6vw, 8rem);
--space-gutter: clamp(1.25rem, 0.7rem + 2.4vw, 2.5rem);
--shell: 1240px;
--shell-narrow: 800px;
/* ---- Radii and elevation (green-derived shadows, never neutral black) ---- */
--r-sm: 8px;
--r-md: 12px;
--r-lg: 18px;
--r-pill: 999px;
--shadow-sm: 0 1px 2px rgba(4, 43, 25, 0.04), 0 4px 14px rgba(4, 43, 25, 0.06);
--shadow-md: 0 2px 6px rgba(4, 43, 25, 0.06), 0 14px 38px rgba(4, 43, 25, 0.10);
/* ---- Motion ---- */
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
/* ---- Chrome heights, used for scroll offsets and safe areas ---- */
--strip-h: 42px;
--header-h: 72px;
}
@media (min-width: 1000px) {
:root { --header-h: 84px; }
}
@media (min-width: 900px) and (max-height: 840px) {
:root { --t-display: clamp(2.7rem, 1.55rem + 3.6vw, 3.7rem); }
}
/* --------------------------------------------------------------------------
2. RESET AND BASE
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
body {
margin: 0;
background: var(--ss-ivory);
color: var(--ink);
font-family: var(--font-body);
font-size: var(--t-body);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 700;
line-height: 1.12;
letter-spacing: -0.014em;
margin: 0 0 0.5em;
color: var(--ink);
text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -0.008em; }
h4 { font-size: var(--t-h4); letter-spacing: -0.004em; }
p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; }
ul, ol { margin: 0 0 1.15em; padding-left: 1.25em; }
li { margin-bottom: 0.4em; }
hr { border: 0; height: 1px; background: var(--green-line); margin: 2rem 0; }
::selection { background: var(--ss-gold-highlight); color: var(--ss-green); }
/* Links inside running text. Scoped to text containers so buttons, cards and
navigation keep their own colour - a blanket `a` rule outranks the component
classes and was rendering the primary CTA gold-on-gold. */
:is(p, li, dd, .lead, .fine, .compliance) a {
color: var(--ss-green-secondary);
text-underline-offset: 0.2em;
text-decoration-thickness: 1px;
}
:is(p, li, dd, .lead, .fine, .compliance) a:hover { color: var(--ss-green); }
.band--green :is(p, li, dd, .lead, .fine, .compliance) a { color: var(--ss-gold-highlight); }
.band--green :is(p, li, dd, .lead, .fine, .compliance) a:hover { color: var(--ss-white); }
:focus-visible {
outline: 3px solid var(--ss-gold-highlight);
outline-offset: 3px;
border-radius: 4px;
}
.band--ivory :focus-visible,
.band--wash :focus-visible,
.band--white :focus-visible,
.header :focus-visible,
.mega :focus-visible,
.drawer :focus-visible { outline-color: var(--gold-ink); }
.skip-link {
position: absolute;
left: 8px;
top: -100px;
z-index: 999;
background: var(--ss-gold-highlight);
color: var(--ss-green);
padding: 0.7rem 1.1rem;
font-weight: 600;
border-radius: var(--r-sm);
transition: top 0.16s var(--ease);
}
.skip-link:focus { top: 8px; }
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* --------------------------------------------------------------------------
3. LAYOUT PRIMITIVES
-------------------------------------------------------------------------- */
.shell {
width: 100%;
max-width: var(--shell);
margin-inline: auto;
padding-inline: var(--space-gutter);
}
.shell--narrow { max-width: var(--shell-narrow); }
.band { position: relative; padding-block: var(--space-band); }
.band--ivory { background: var(--ss-ivory); }
.band--wash { background: var(--green-wash); }
.band--white { background: var(--ss-white); }
/* Dark section. Never black corners: every stop is inside the green family. */
.band--green {
background:
radial-gradient(115% 85% at 84% 4%, rgba(14, 98, 55, 0.5) 0%, rgba(10, 80, 44, 0) 60%),
radial-gradient(95% 70% at 6% 98%, rgba(10, 80, 44, 0.5) 0%, rgba(10, 80, 44, 0) 64%),
linear-gradient(168deg, #073C22 0%, var(--ss-green) 48%, #032414 100%);
color: var(--on-green);
isolation: isolate;
}
.band--green h1, .band--green h2, .band--green h3, .band--green h4 { color: var(--ss-white); }
.band--green p { color: var(--on-green-soft); }
/* Guilloché - the security-print texture. Gold, very low opacity, dark bands
only. Derived from the gold token so it stays inside the locked language. */
.band--green::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: 0.55;
background-image: url("data:image/svg+xml;utf8,\
");
background-size: 96px 96px;
}
/* Gold hairline along the foot of every dark band. */
.band--green::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold-line) 18%, var(--gold-line) 82%, transparent);
pointer-events: none;
}
.split { display: grid; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; }
@media (min-width: 880px) {
.split { grid-template-columns: 1fr 1fr; }
.split--wide-first { grid-template-columns: 1.2fr 1fr; }
.split--wide-second { grid-template-columns: 1fr 1.2fr; }
.split--sidebar { grid-template-columns: 1.55fr 1fr; align-items: start; }
}
.stack > * + * { margin-top: 1.15rem; }
.grid { display: grid; gap: clamp(1rem, 0.5rem + 1.4vw, 1.5rem); grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }
/* A section's opening block: eyebrow, heading, lead. */
.section-head { max-width: 62ch; margin-bottom: clamp(2.25rem, 1.4rem + 2.4vw, 3.5rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head > :last-child { margin-bottom: 0; }
/* --------------------------------------------------------------------------
4. TYPOGRAPHIC DEVICES
-------------------------------------------------------------------------- */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 0.7rem;
font-weight: 600;
font-family: var(--font-mono);
font-size: var(--t-label);
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold-ink);
margin: 0 0 1.1rem;
line-height: 1.4;
}
.band--green .eyebrow { color: var(--ss-gold-highlight); }
.gold { color: var(--ss-gold-highlight); }
.band--ivory .gold, .band--wash .gold, .band--white .gold { color: var(--gold-ink); }
.lead { font-size: var(--t-lead); line-height: 1.62; color: var(--ink-soft); }
.band--green .lead { color: var(--on-green-soft); }
.fine { font-size: var(--t-small); color: var(--ink-faint); line-height: 1.62; }
.band--green .fine { color: var(--on-green-faint); }
/* --------------------------------------------------------------------------
5. BUTTONS
Colour Kit §2: Primary CTA = Highlight Gold fill, Deep Green text and icon.
Secondary CTA = Green fill, white text, fine gold border.
Every variant sets its own colour so no ancestor link rule can reach it.
-------------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
min-height: 52px;
padding: 0.85rem 1.6rem;
font-family: var(--font-body);
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.005em;
text-align: center;
text-decoration: none;
border: 1px solid transparent;
border-radius: var(--r-sm);
cursor: pointer;
transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease),
background-color 0.2s var(--ease), border-color 0.2s var(--ease),
color 0.2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn > svg { flex: none; }
.btn--primary,
.btn--primary:link,
.btn--primary:visited {
background: linear-gradient(165deg, var(--ss-gold-highlight) 0%, var(--ss-gold) 100%);
color: var(--ss-green);
border-color: rgba(132, 96, 30, 0.32);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 6px 20px rgba(216, 172, 84, 0.24);
}
.btn--primary:hover, .btn--primary:focus {
background: linear-gradient(165deg, #F7D68C 0%, var(--ss-gold-highlight) 100%);
color: var(--ss-green);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 12px 30px rgba(216, 172, 84, 0.34);
}
.btn--secondary,
.btn--secondary:link,
.btn--secondary:visited {
background: var(--ss-green);
color: var(--ss-white);
border-color: var(--gold-line);
}
.btn--secondary:hover, .btn--secondary:focus {
background: var(--ss-green-secondary);
color: var(--ss-white);
border-color: var(--ss-gold);
}
.btn--outline,
.btn--outline:link,
.btn--outline:visited {
background: transparent;
color: var(--ss-green);
border-color: rgba(4, 43, 25, 0.24);
}
.btn--outline:hover, .btn--outline:focus {
background: var(--ss-green);
color: var(--ss-white);
border-color: var(--ss-green);
}
.band--green .btn--outline,
.band--green .btn--outline:link,
.band--green .btn--outline:visited {
color: var(--ss-white);
border-color: var(--gold-line);
background: rgba(255, 255, 255, 0.04);
}
.band--green .btn--outline:hover, .band--green .btn--outline:focus {
background: rgba(255, 255, 255, 0.1);
color: var(--ss-white);
border-color: var(--ss-gold);
}
.btn--wa,
.btn--wa:link,
.btn--wa:visited {
background: var(--ss-green-secondary);
color: var(--ss-white);
border-color: var(--ss-gold);
box-shadow: 0 6px 20px rgba(4, 43, 25, 0.28);
}
.btn--wa:hover, .btn--wa:focus {
background: #0C5E34;
color: var(--ss-white);
border-color: var(--ss-gold-highlight);
}
.btn--sm { min-height: 44px; padding: 0.55rem 1.1rem; font-size: 0.93rem; }
.btn--lg { min-height: 60px; padding: 1rem 2rem; font-size: 1.06rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }
.btn-row--center { justify-content: center; }
/* Stacked, but capped and following the section's own alignment rather than
stretching edge to edge. Full-width buttons read as a mobile app sheet; the
client wants the CTA pair to sit as a centred block the way the statement
section does. align-items is what carries the alignment: flex-start keeps a
left-aligned text block's buttons under its copy, and --center centres them
with the heading above. */
@media (max-width: 519px) {
.btn-row { flex-direction: column; align-items: flex-start; }
.btn-row--center { align-items: center; }
.btn-row .btn { width: min(100%, 19.5rem); }
}
.link-arrow {
display: inline-flex;
align-items: center;
gap: 0.45rem;
min-height: 32px;
font-weight: 600;
font-size: 1rem;
text-decoration: none;
color: var(--ss-green-secondary);
}
.link-arrow::after { content: "→"; transition: transform 0.2s var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }
.band--green .link-arrow { color: var(--ss-gold-highlight); }
/* --------------------------------------------------------------------------
6. AVAILABILITY STRIP
Master Part 3: above the header, inside the mobile safe area, never cropped.
-------------------------------------------------------------------------- */
.strip {
background: var(--ss-green);
color: var(--ss-white);
padding: 0.5rem var(--space-gutter);
padding-top: calc(0.5rem + env(safe-area-inset-top, 0px));
text-align: center;
}
.strip__inner {
display: inline-flex;
align-items: center;
gap: 0.55rem;
font-family: var(--font-mono);
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
line-height: 1.4;
}
.strip__icon { color: var(--ss-gold); flex: none; }
.strip__inner i { font-style: normal; opacity: 0.5; margin-inline: 0.05em; }
/* --------------------------------------------------------------------------
7. HEADER, MEGA PANEL, DRAWER
Colour Kit §2: ivory background, brand and navigation in deep green,
supporting line in gold, Request Service visually distinct.
-------------------------------------------------------------------------- */
.header {
position: sticky;
top: 0;
z-index: 60;
background: rgba(245, 243, 238, 0.92);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid var(--green-line);
transition: box-shadow 0.25s var(--ease), background-color 0.25s var(--ease);
}
.header[data-scrolled="true"] {
background: rgba(245, 243, 238, 0.97);
box-shadow: 0 1px 0 var(--gold-faint), 0 10px 30px rgba(4, 43, 25, 0.07);
}
.header__inner {
max-width: var(--shell);
margin-inline: auto;
padding: 0.55rem var(--space-gutter);
min-height: var(--header-h);
display: flex;
align-items: center;
gap: clamp(0.75rem, 1.6vw, 2rem);
}
/* Brand lockup. flex:0 0 auto with min-width:0 keeps it from ever growing into
the navigation, which is what produced the overlap in the first build. */
.brand {
flex: 0 0 auto;
min-width: 0;
display: flex;
align-items: center;
gap: 0.7rem;
text-decoration: none;
color: var(--ink);
}
.brand__mark {
width: 44px; height: 44px;
flex: none;
object-fit: contain;
filter: drop-shadow(0 1px 2px rgba(4, 43, 25, 0.18));
}
@media (min-width: 1000px) { .brand__mark { width: 52px; height: 52px; } }
.brand__words { display: flex; flex-direction: column; min-width: 0; }
.brand__name {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(0.98rem, 0.72rem + 0.85vw, 1.24rem);
line-height: 1.12;
letter-spacing: 0.04em;
/* The kit gold reads 3.9:1 on ivory, which is below AA, so the wordmark uses
the deep gold reserved for gold type on light: it still reads as the
logo's metal but clears AA at 5.2:1 against the header's ivory. */
color: var(--gold-ink);
text-transform: uppercase;
white-space: nowrap;
}
.brand__pillars {
font-family: var(--font-display);
font-size: clamp(0.62rem, 0.54rem + 0.22vw, 0.78rem);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ss-green);
margin-top: 0.14rem;
white-space: nowrap;
}
.brand__pillars i { font-style: normal; opacity: 0.85; margin-inline: 0.12em; }
/* Navigation. Hidden until there is genuinely room; the mega panel keeps all
eleven service pages one click away at every width. */
.nav { display: none; }
@media (min-width: 1000px) {
.nav {
display: flex;
align-items: center;
justify-content: center;
flex: 1 1 auto;
min-width: 0;
gap: clamp(0.35rem, 0.6vw, 1rem);
}
.nav__item { display: flex; align-items: center; gap: 0.1rem; }
.nav__link {
position: relative;
display: inline-block;
font-size: 0.93rem;
font-weight: 500;
color: var(--ss-green);
text-decoration: none;
padding: 0.55rem;
border-radius: var(--r-sm);
white-space: nowrap;
transition: color 0.18s var(--ease);
}
.nav__link::after {
content: "";
position: absolute;
left: 0.55rem; right: 0.55rem;
bottom: 0.22rem;
height: 2px;
border-radius: 2px;
background: var(--ss-gold);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.24s var(--ease-out);
}
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { font-weight: 600; }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__disclose {
display: inline-grid;
place-items: center;
width: 32px; height: 32px;
padding: 0;
background: none;
border: 0;
border-radius: 50%;
color: var(--gold-ink);
cursor: pointer;
transition: transform 0.24s var(--ease), background-color 0.18s var(--ease);
}
.nav__disclose:hover { background: rgba(4, 43, 25, 0.06); }
.nav__disclose[aria-expanded="true"] { transform: rotate(180deg); }
}
.header__tools { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 0.6rem; }
/* Below 560px the brand lockup, a labelled CTA and the menu control cannot
share the row, so the CTA keeps its gold plate and drops to an icon-only
target; the label stays in the accessibility tree. Below 480px even that
does not fit beside the full brand name, and the drawer's own gold CTA plus
the persistent WhatsApp control carry the conversion path instead. */
@media (max-width: 479px) { .header__cta { display: none; } }
@media (max-width: 759px) {
.header__cta { padding-inline: 0; width: 46px; }
}
@media (max-width: 559px) {
:root { --header-h: 84px; }
.header__inner { padding-block: 0.4rem; }
.brand { gap: 0.5rem; }
.brand__mark { width: 64px; height: 64px; }
.header__cta-label {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
}
.burger {
width: 46px; height: 46px;
display: inline-grid;
place-items: center;
background: transparent;
border: 1px solid rgba(4, 43, 25, 0.18);
border-radius: var(--r-sm);
color: var(--ss-green);
cursor: pointer;
transition: background-color 0.18s var(--ease);
}
.burger:hover { background: rgba(4, 43, 25, 0.05); }
.burger__bars { display: block; width: 20px; height: 14px; position: relative; }
.burger__bars span {
position: absolute;
left: 0; right: 0;
height: 1.8px;
background: currentColor;
border-radius: 2px;
transition: transform 0.24s var(--ease), opacity 0.16s var(--ease);
}
.burger__bars span:nth-child(1) { top: 0; }
.burger__bars span:nth-child(2) { top: 6px; }
.burger__bars span:nth-child(3) { top: 12px; }
.burger[aria-expanded="true"] .burger__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bars span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* ---- Mega panel ---- */
.mega {
position: absolute;
left: 0; right: 0;
top: 100%;
background: var(--ss-ivory);
border-top: 1px solid var(--gold-faint);
border-bottom: 1px solid var(--green-line);
box-shadow: 0 26px 50px rgba(4, 43, 25, 0.12);
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity 0.22s var(--ease), transform 0.28s var(--ease-out), visibility 0.22s;
}
.mega[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
@media (max-width: 999px) { .mega { display: none; } }
.mega__inner {
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(240px, 1fr);
gap: clamp(1.5rem, 1rem + 1.6vw, 2.75rem);
padding-block: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem);
}
.mega__cols {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1.25rem, 0.8rem + 1.4vw, 2.25rem);
}
.mega__label {
font-family: var(--font-mono);
font-size: var(--t-label);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold-ink);
margin: 0 0 0.9rem;
padding-bottom: 0.65rem;
border-bottom: 1px solid var(--green-line);
}
.mega__list { list-style: none; margin: 0; padding: 0; }
.mega__list li { margin: 0; }
.mega__link {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.55rem 0.6rem;
margin-left: -0.6rem;
border-radius: var(--r-sm);
font-size: 0.97rem;
line-height: 1.35;
color: var(--ink);
text-decoration: none;
transition: background-color 0.16s var(--ease), color 0.16s var(--ease);
}
.mega__link svg { flex: none; color: var(--gold-ink); transition: color 0.16s var(--ease); }
.mega__link:hover { background: var(--ss-white); color: var(--ss-green-secondary); }
.mega__link:hover svg { color: var(--ss-gold); }
.mega__aside { padding-left: clamp(1.25rem, 1rem + 1vw, 2rem); border-left: 1px solid var(--green-line); }
.mega__promo {
display: flex;
align-items: flex-start;
gap: 0.7rem;
padding: 0.65rem 0.6rem;
margin-left: -0.6rem;
border-radius: var(--r-sm);
text-decoration: none;
transition: background-color 0.16s var(--ease);
}
.mega__promo:hover { background: var(--ss-white); }
.mega__promo-icon {
flex: none;
width: 32px; height: 32px;
display: grid;
place-items: center;
border: 1px solid rgba(216, 172, 84, 0.7);
border-radius: 50%;
color: var(--gold-ink);
}
.mega__promo strong { display: block; font-size: 0.97rem; font-weight: 600; color: var(--ss-green); line-height: 1.3; }
.mega__promo em { display: block; font-style: normal; font-size: 0.87rem; color: var(--ink-faint); margin-top: 0.15rem; line-height: 1.4; }
.mega__cta { margin-top: 1.25rem; }
/* ---- Mobile drawer ---- */
.drawer {
position: fixed;
inset: 0;
z-index: 80;
overflow: hidden;
background: rgba(4, 43, 25, 0.4);
opacity: 0;
visibility: hidden;
transition: opacity 0.24s var(--ease), visibility 0.24s;
}
.drawer[data-open="true"] { opacity: 1; visibility: visible; }
@media (min-width: 1000px) { .drawer, .burger { display: none; } }
.drawer__panel {
position: absolute;
inset: 0 0 0 auto;
width: min(420px, 100%);
background: var(--ss-ivory);
display: flex;
flex-direction: column;
transform: translateX(14px);
opacity: 0;
transition: transform 0.3s var(--ease-out), opacity 0.24s var(--ease);
}
.drawer[data-open="true"] .drawer__panel { transform: none; opacity: 1; }
.drawer__top {
flex: none;
display: flex;
align-items: center;
justify-content: space-between;
min-height: var(--header-h);
padding-top: env(safe-area-inset-top, 0px);
border-bottom: 1px solid var(--green-line);
}
.drawer__title {
font-family: var(--font-mono);
font-size: var(--t-label);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold-ink);
}
.drawer__close {
width: 44px; height: 44px;
display: grid;
place-items: center;
border: 1px solid rgba(4, 43, 25, 0.18);
border-radius: var(--r-sm);
background: transparent;
color: var(--ss-green);
cursor: pointer;
}
.drawer__scroll {
flex: 1 1 auto;
overflow-y: auto;
overscroll-behavior: contain;
padding-block: 1.25rem 2rem;
padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
}
.drawer__list { list-style: none; margin: 0; padding: 0; }
.drawer__list li { margin: 0; border-bottom: 1px solid var(--green-line); }
.drawer__link {
display: block;
padding: 0.95rem 0;
font-family: var(--font-display);
font-size: 1.22rem;
font-weight: 600;
color: var(--ss-green);
text-decoration: none;
}
.drawer__link[aria-current="page"] { color: var(--gold-ink); }
.drawer__group-label {
font-family: var(--font-mono);
font-size: var(--t-label);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold-ink);
margin: 1.9rem 0 0.5rem;
}
.drawer__sub { list-style: none; margin: 0; padding: 0; }
.drawer__sub li { margin: 0; }
.drawer__sub a {
display: block;
padding: 0.7rem 0;
font-size: 1.02rem;
color: var(--ink-soft);
text-decoration: none;
border-bottom: 1px solid rgba(220, 228, 221, 0.7);
}
.drawer__sub a:hover { color: var(--ss-green); }
.drawer__actions { display: grid; gap: 0.7rem; margin-top: 2rem; }
body[data-drawer="open"] { overflow: hidden; }
/* --------------------------------------------------------------------------
8. OPENING FRAMES
Master Part 4: three live responsive sections. Not posters, not a carousel,
no autoplay. Primary copy stays in the central crop-safe area. On mobile the
message comes first and the visual sits behind and below it.
-------------------------------------------------------------------------- */
.frame {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
min-height: calc(100svh - var(--header-h));
padding-block: clamp(3rem, 1.8rem + 4vw, 4.5rem);
overflow: hidden;
}
.frame--first { min-height: calc(100svh - var(--header-h) - var(--strip-h)); }
.frame__inner { position: relative; z-index: 2; width: 100%; }
/* Frame art is a decorative CSS background, not an ![]()
: the artwork is
supplied separately (see IMAGE-BRIEF.md), and a background that has not
landed yet degrades silently to the approved green gradient instead of
showing a broken-image box. Mobile art is portrait, desktop art landscape -
the master forbids stretching the mobile composition. */
.frame__art {
display: none;
position: absolute;
inset: 0;
z-index: 0;
background-size: cover;
background-position: center right;
background-repeat: no-repeat;
}
@media (min-width: 880px) {
.frame__art { display: block; background-image: var(--art-desktop, none); }
}
/* Opaque where the copy sits, close to clear where the artwork does. */
.frame__art::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(100deg, var(--ss-green) 4%, rgba(4, 43, 25, 0.9) 32%,
rgba(4, 43, 25, 0.42) 62%, rgba(4, 43, 25, 0.16) 100%);
}
.frame__copy { max-width: 40rem; }
@media (min-width: 880px) { .frame__copy { max-width: 34rem; } }
.frame h1, .frame h2 {
font-size: var(--t-display);
line-height: 1.03;
color: var(--ss-white);
letter-spacing: -0.022em;
margin-bottom: 0.5em;
}
.frame__next {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 0.6rem;
min-height: 44px;
padding: 0.6rem 0.9rem 0.6rem 0;
margin-top: clamp(1.75rem, 1rem + 2vw, 2.75rem);
font-family: var(--font-mono);
font-size: var(--t-label);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ss-gold-highlight);
text-decoration: none;
}
.frame__next svg { animation: nudge 2.8s var(--ease) infinite; }
.frame__next:hover { color: var(--ss-white); }
@keyframes nudge {
0%, 74%, 100% { transform: translateY(0); }
86% { transform: translateY(4px); }
}
/* Frame 2 audience list */
.audience { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem 1.5rem; max-width: 46rem; }
@media (min-width: 640px) { .audience { grid-template-columns: repeat(2, 1fr); } }
.audience li {
display: flex;
align-items: baseline;
gap: 0.7rem;
margin: 0;
font-size: clamp(1rem, 0.95rem + 0.3vw, 1.14rem);
line-height: 1.5;
color: var(--ss-white);
padding-bottom: 0.55rem;
border-bottom: 1px solid rgba(216, 172, 84, 0.16);
}
.audience li::before {
content: "";
flex: none;
width: 6px; height: 6px;
transform: rotate(45deg) translateY(-2px);
background: var(--ss-gold);
}
/* Frame 3 objective plate */
.objective {
display: inline-flex;
align-items: center;
gap: clamp(1rem, 0.6rem + 1.4vw, 1.75rem);
padding: clamp(1.15rem, 0.8rem + 1.2vw, 1.75rem) clamp(1.35rem, 0.9rem + 1.6vw, 2.25rem);
border: 1px solid var(--gold-line);
border-radius: var(--r-lg);
background: linear-gradient(150deg, rgba(10, 80, 44, 0.5), rgba(3, 33, 15, 0.5));
margin-top: 1.75rem;
}
.objective__figure {
font-family: var(--font-display);
font-size: clamp(3rem, 1.8rem + 4.4vw, 4.75rem);
font-weight: 700;
line-height: 0.9;
color: var(--ss-gold-highlight);
}
.objective__label {
font-family: var(--font-mono);
font-size: var(--t-label);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--on-green-soft);
line-height: 1.7;
max-width: 16ch;
}
/* --------------------------------------------------------------------------
9. PAGE HEADERS
-------------------------------------------------------------------------- */
.pagehead { position: relative; padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); overflow: hidden; }
.pagehead__inner { position: relative; z-index: 2; max-width: 47rem; }
.pagehead h1 { margin-bottom: 0.5em; }
.pagehead .lead { max-width: 58ch; }
.pagehead .btn-row { margin-top: 2.25rem; }
.crumbs {
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem 0.5rem;
margin: 0 0 1.6rem;
padding: 0;
font-family: var(--font-mono);
font-size: 0.8rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.crumbs li { margin: 0; display: flex; align-items: center; gap: 0.5rem; }
.crumbs li + li::before { content: "/"; color: rgba(216, 172, 84, 0.5); }
.crumbs a { color: var(--on-green-faint); text-decoration: none; transition: color 0.16s var(--ease); }
.crumbs a:hover { color: var(--ss-gold-highlight); }
.crumbs [aria-current] { color: var(--ss-gold-highlight); }
/* The pillar badge. It names what the page belongs to rather than repeating
the breadcrumb and the H1, which is what made the old page headers read
as if the page name were printed twice. */
.pagehead__tag {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.42rem 0.95rem 0.42rem 0.8rem;
margin-bottom: 1.4rem;
border: 1px solid var(--gold-line);
border-radius: var(--r-pill);
background: rgba(3, 33, 15, 0.42);
font-family: var(--font-mono);
font-size: var(--t-label);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ss-gold-highlight);
}
.pagehead__tag svg { flex: none; }
/* --------------------------------------------------------------------------
10. CARDS, PILLARS, STEPS, LISTS
-------------------------------------------------------------------------- */
.card {
position: relative;
display: flex;
flex-direction: column;
padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem);
background: var(--ss-white);
border: 1px solid var(--green-line);
border-radius: var(--r-md);
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: transform 0.26s var(--ease-out), box-shadow 0.26s var(--ease-out),
border-color 0.2s var(--ease);
}
.card::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 2px;
background: linear-gradient(90deg, var(--ss-gold), rgba(216, 172, 84, 0.1));
}
.card h3 { margin-bottom: 0.5rem; }
.card p { color: var(--ink-soft); font-size: 1.02rem; }
.card__foot { margin-top: auto; padding-top: 1.25rem; }
a.card { text-decoration: none; }
a.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(216, 172, 84, 0.55); }
.card--green {
background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.028));
border-color: var(--gold-faint);
box-shadow: none;
}
.card--green h3 { color: var(--ss-white); }
.card--green p { color: var(--on-green-soft); }
a.card--green:hover { border-color: var(--gold-line); box-shadow: 0 18px 40px rgba(3, 33, 15, 0.3); }
/* The engraved seal that holds every icon - the badge language of the brand. */
.seal {
position: relative;
width: 52px; height: 52px;
flex: none;
display: grid;
place-items: center;
margin-bottom: 1.15rem;
border-radius: 50%;
color: var(--gold-ink);
background: radial-gradient(circle at 32% 26%, #FBF6EA 0%, #F2EADB 62%, #E7DCC5 100%);
box-shadow: 0 0 0 1px rgba(216, 172, 84, 0.85), 0 0 0 4px rgba(216, 172, 84, 0.13),
0 2px 6px rgba(4, 43, 25, 0.1);
}
.seal::after {
content: "";
position: absolute;
inset: 4px;
border-radius: 50%;
border: 1px dashed rgba(132, 96, 30, 0.26);
}
.band--green .seal, .card--green .seal, .pillar .seal {
color: var(--ss-gold-highlight);
background: radial-gradient(circle at 32% 26%, rgba(14, 98, 55, 0.85) 0%, rgba(4, 43, 25, 0.95) 70%);
box-shadow: 0 0 0 1px var(--gold-line), 0 0 0 4px rgba(216, 172, 84, 0.1);
}
.band--green .seal::after, .card--green .seal::after, .pillar .seal::after { border-color: rgba(216, 172, 84, 0.32); }
.seal--sm { width: 42px; height: 42px; margin-bottom: 0.9rem; }
.seal--lg { width: 62px; height: 62px; }
/* Pillar block */
.pillar {
padding: clamp(1.5rem, 1.1rem + 1.3vw, 2.25rem);
border: 1px solid var(--gold-faint);
border-radius: var(--r-md);
background: linear-gradient(165deg, rgba(14, 98, 55, 0.36), rgba(4, 43, 25, 0.1));
transition: border-color 0.2s var(--ease), transform 0.26s var(--ease-out);
}
.pillar:hover { border-color: var(--gold-line); transform: translateY(-3px); }
.pillar__name {
font-family: var(--font-display);
font-size: clamp(1.38rem, 1.2rem + 0.75vw, 1.5rem);
font-weight: 700;
letter-spacing: 0.01em;
color: var(--ss-gold-highlight);
margin-bottom: 0.65rem;
}
/* Numbered stage cards */
.steps { display: grid; gap: clamp(1rem, 0.5rem + 1.2vw, 1.4rem); list-style: none; margin: 0; padding: 0; }
@media (min-width: 660px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step {
position: relative;
margin: 0;
padding: 1.6rem 1.5rem;
border: 1px solid var(--gold-faint);
border-radius: var(--r-md);
background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.026));
}
.step__no {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px; height: 34px;
margin-bottom: 0.9rem;
border: 1px solid var(--gold-line);
border-radius: 50%;
font-family: var(--font-mono);
font-size: 0.86rem;
color: var(--ss-gold-highlight);
}
.step h3 { font-size: 1.15rem; color: var(--ss-white); margin-bottom: 0.45rem; }
.step p { font-size: 1rem; color: var(--on-green-soft); margin: 0; }
.steps--light .step { background: var(--ss-white); border-color: var(--green-line); box-shadow: var(--shadow-sm); }
.steps--light .step__no { color: var(--gold-ink); border-color: rgba(216, 172, 84, 0.7); }
.steps--light .step h3 { color: var(--ink); }
.steps--light .step p { color: var(--ink-soft); }
/* The process chain, rendered as a designed element rather than a heading. */
.chain {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.6rem;
margin: 0 0 1.75rem;
padding: 0;
list-style: none;
}
.chain li {
margin: 0;
font-family: var(--font-mono);
font-size: clamp(0.8rem, 0.74rem + 0.2vw, 0.84rem);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ss-gold-highlight);
padding: 0.4rem 0.8rem;
border: 1px solid var(--gold-faint);
border-radius: var(--r-pill);
white-space: nowrap;
}
.chain__arrow { color: rgba(216, 172, 84, 0.55); flex: none; }
.band--ivory .chain li, .band--wash .chain li, .band--white .chain li {
color: var(--gold-ink);
border-color: rgba(216, 172, 84, 0.45);
background: var(--ss-white);
}
.band--ivory .chain__arrow, .band--wash .chain__arrow { color: rgba(132, 96, 30, 0.5); }
/* Tick lists */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
@media (min-width: 640px) { .ticks--2 { grid-template-columns: repeat(2, 1fr); } }
.ticks li { display: flex; align-items: flex-start; gap: 0.7rem; margin: 0; font-size: 1.02rem; line-height: 1.55; }
.ticks li::before {
content: "";
flex: none;
width: 19px; height: 19px;
margin-top: 0.2em;
border: 1px solid rgba(216, 172, 84, 0.8);
border-radius: 50%;
background: no-repeat center / 9px 7px
url("data:image/svg+xml;utf8,");
}
.band--green .ticks li::before {
border-color: var(--gold-line);
background-image: url("data:image/svg+xml;utf8,");
}
/* A definition-style list for named benefits. */
.deflist { display: grid; gap: 1.2rem; margin: 0; }
.deflist > div { padding-left: 1.15rem; border-left: 2px solid rgba(216, 172, 84, 0.5); }
.deflist dt { font-family: var(--font-display); font-size: 1.12rem; font-weight: 700; color: var(--ink); margin-bottom: 0.2rem; }
.deflist dd { margin: 0; font-size: 1rem; color: var(--ink-soft); line-height: 1.6; }
.band--green .deflist dt { color: var(--ss-white); }
.band--green .deflist dd { color: var(--on-green-soft); }
/* --------------------------------------------------------------------------
11. DISCLOSURE (FAQ)
-------------------------------------------------------------------------- */
.faq {
border: 1px solid var(--green-line);
border-radius: var(--r-md);
background: var(--ss-white);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.faq__item + .faq__item { border-top: 1px solid var(--green-line); }
/* Each question is a top-level topic on that page, so it is an h2; the button
inside carries the visual size. */
.faq__h { font-size: inherit; font-weight: inherit; letter-spacing: normal; }
.faq__q {
width: 100%;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1.25rem;
padding: 1.25rem clamp(1.1rem, 0.8rem + 1vw, 1.75rem);
background: none;
border: 0;
font-family: var(--font-display);
font-size: 1.14rem;
font-weight: 600;
line-height: 1.4;
color: var(--ink);
text-align: left;
cursor: pointer;
transition: background-color 0.16s var(--ease);
}
.faq__q:hover { background: var(--green-wash); }
.faq__sign {
flex: none;
width: 26px; height: 26px;
position: relative;
margin-top: 0.18rem;
border: 1px solid rgba(216, 172, 84, 0.8);
border-radius: 50%;
transition: background-color 0.2s var(--ease);
}
.faq__sign::before, .faq__sign::after {
content: "";
position: absolute;
inset: 50% 6px auto 6px;
height: 1.6px;
background: var(--gold-ink);
transform: translateY(-50%);
transition: transform 0.24s var(--ease), opacity 0.2s var(--ease);
}
.faq__sign::after { transform: translateY(-50%) rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__sign { background: rgba(216, 172, 84, 0.16); }
.faq__q[aria-expanded="true"] .faq__sign::after { opacity: 0; transform: translateY(-50%) rotate(0); }
.faq__a { display: none; padding: 0 clamp(1.1rem, 0.8rem + 1vw, 1.75rem) 1.4rem; max-width: 74ch; color: var(--ink-soft); }
.faq__a[data-open="true"] { display: block; }
html:not(.js) .faq__a { display: block; }
html:not(.js) .faq__sign { display: none; }
/* --------------------------------------------------------------------------
12. FORMS
Colour Kit §2: ivory fields, deep green labels, gold focus, green submit.
-------------------------------------------------------------------------- */
.field { margin-bottom: 1.4rem; }
.field--split { display: grid; gap: 1.4rem; }
@media (min-width: 660px) { .field--split { grid-template-columns: repeat(2, 1fr); } }
.label { display: block; font-size: 0.94rem; font-weight: 600; color: var(--ss-green); margin-bottom: 0.45rem; }
.label .req { color: var(--gold-ink); }
.hint { display: block; font-size: 0.88rem; color: var(--ink-faint); margin-top: 0.4rem; line-height: 1.5; }
.input, .select, .textarea, .file {
width: 100%;
min-height: 52px;
padding: 0.8rem 1rem;
font-family: inherit;
font-size: 1rem;
color: var(--ink);
background: var(--ss-ivory);
border: 1px solid var(--green-line);
border-radius: var(--r-sm);
transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease), background-color 0.16s var(--ease);
}
.textarea { min-height: 170px; resize: vertical; line-height: 1.6; }
.select {
appearance: none;
padding-right: 2.75rem;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 12px 8px;
}
.file { padding: 0.65rem 1rem; line-height: 1.6; cursor: pointer; }
.file::file-selector-button {
margin-right: 0.9rem;
padding: 0.55rem 1rem;
font: inherit;
font-size: 0.88rem;
font-weight: 600;
color: var(--ss-white);
background: var(--ss-green);
border: 1px solid var(--gold-line);
border-radius: var(--r-sm);
cursor: pointer;
transition: background-color 0.16s var(--ease);
}
.file::file-selector-button:hover { background: var(--ss-green-secondary); }
.input:hover, .select:hover, .textarea:hover, .file:hover { border-color: rgba(216, 172, 84, 0.55); }
.input:focus, .select:focus, .textarea:focus, .file:focus {
outline: none;
background: var(--ss-white);
border-color: var(--ss-gold);
box-shadow: 0 0 0 4px var(--gold-glow);
}
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 1px; }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--gold-ink); border-width: 2px; }
.error { display: none; margin-top: 0.45rem; font-size: 0.9rem; font-weight: 600; color: #6F4F14; }
.error[data-show="true"] { display: block; }
.check { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 1rem; line-height: 1.55; color: var(--ink-soft); }
.check input { flex: none; width: 24px; height: 24px; margin-top: 0.15rem; accent-color: var(--ss-green-secondary); }
fieldset { border: 0; margin: 0 0 2rem; padding: 0; }
legend {
padding: 0 0 0.9rem;
width: 100%;
font-family: var(--font-mono);
font-size: var(--t-label);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold-ink);
border-bottom: 1px solid var(--green-line);
margin-bottom: 1.4rem;
}
.panel {
padding: clamp(1.5rem, 1.1rem + 1.5vw, 2.5rem);
background: var(--ss-white);
border: 1px solid var(--green-line);
border-radius: var(--r-md);
box-shadow: var(--shadow-sm);
}
.form__note { margin-top: 1.75rem; padding-top: 1.35rem; border-top: 1px solid var(--green-line); }
/* --------------------------------------------------------------------------
13. CALLOUTS AND COMPLIANCE
-------------------------------------------------------------------------- */
.callout {
position: relative;
padding: clamp(1.35rem, 1rem + 1.1vw, 1.9rem);
padding-left: clamp(1.6rem, 1.2rem + 1.1vw, 2.15rem);
border: 1px solid rgba(216, 172, 84, 0.55);
border-radius: var(--r-md);
background: var(--green-wash);
}
.callout::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: var(--ss-gold);
}
.callout__title {
font-family: var(--font-mono);
font-size: var(--t-label);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold-ink);
margin-bottom: 0.65rem;
}
.band--green .callout {
background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.028));
border-color: var(--gold-faint);
}
.band--green .callout__title { color: var(--ss-gold-highlight); }
/* The approved compliance principle. Verbatim, unedited. */
.compliance {
display: flex;
align-items: flex-start;
gap: 0.7rem;
font-size: 0.95rem;
line-height: 1.6;
color: var(--ink-faint);
padding-top: 1.35rem;
margin-top: 2.5rem;
border-top: 1px solid var(--green-line);
}
.compliance svg { flex: none; margin-top: 0.15rem; color: var(--ss-gold); }
.band--green .compliance { color: var(--on-green-faint); border-top-color: var(--gold-faint); }
.compliance--center { max-width: 64ch; margin-inline: auto; }
/* --------------------------------------------------------------------------
14. FOOTER
-------------------------------------------------------------------------- */
.footer {
position: relative;
background: linear-gradient(175deg, #073C22 0%, var(--ss-green) 42%, #032414 100%);
color: var(--on-green-soft);
padding-block: clamp(3.5rem, 2.4rem + 3.6vw, 5rem) clamp(2.5rem, 2rem + 2vw, 3.5rem);
overflow: hidden;
isolation: isolate;
}
.footer::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
opacity: 0.45;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,\
");
background-size: 96px 96px;
}
.footer__top {
display: grid;
gap: clamp(2.25rem, 1.4rem + 2.6vw, 3.5rem);
padding-bottom: clamp(2.25rem, 1.6rem + 2vw, 3rem);
border-bottom: 1px solid var(--gold-faint);
}
@media (min-width: 940px) { .footer__top { grid-template-columns: 1.4fr 1fr 1.15fr; } }
.footer__brand { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.25rem; }
.footer__brand img { width: 54px; height: 54px; flex: none; }
.footer__brandname { display: block; font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; text-transform: uppercase; line-height: 1.15; color: var(--ss-white); }
.footer__pillars { display: block; font-family: var(--font-mono); font-size: 0.84rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ss-gold); margin-top: 0.32rem; }
.footer__h { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ss-gold); margin: 0 0 1rem; }
.footer__list, .footer__services, .footer__contact { list-style: none; margin: 0; padding: 0; }
.footer__list li, .footer__services li { margin-bottom: 0.55rem; }
.footer__list a, .footer__services a { color: var(--on-green-soft); text-decoration: none; font-size: 1rem; transition: color 0.16s var(--ease); }
.footer__list a:hover, .footer__services a:hover { color: var(--ss-gold-highlight); }
.footer__services { columns: 2; column-gap: 1.5rem; }
.footer__services li { break-inside: avoid; }
.footer__services a { font-size: 0.96rem; }
.footer__contact li { display: flex; align-items: flex-start; gap: 0.65rem; margin-bottom: 0.8rem; font-size: 1rem; }
.footer__contact svg { flex: none; color: var(--ss-gold); margin-top: 0.22rem; }
.footer__contact a { color: var(--on-green-soft); text-decoration: none; }
.footer__contact a:hover { color: var(--ss-gold-highlight); }
.footer__bottom { padding-top: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .footer__bottom { grid-template-columns: 1fr auto; align-items: end; } }
.footer__legal { display: flex; flex-wrap: wrap; gap: 0.5rem 1.35rem; list-style: none; margin: 0; padding: 0; }
.footer__legal a { color: var(--on-green-faint); text-decoration: none; font-size: 0.92rem; }
.footer__legal a:hover { color: var(--ss-gold-highlight); }
/* The footer is dark but is not a .band--green, so it needs the on-green
treatment for fine print explicitly. */
.footer .fine { color: var(--on-green-faint); }
.footer .compliance { color: var(--on-green-faint); border-top-color: var(--gold-faint); }
/* --------------------------------------------------------------------------
15. WHATSAPP CONTROL
Master Part 3: fixed bottom-right, device-safe spacing, original green,
white official icon, no visible number. Visible but never competing.
-------------------------------------------------------------------------- */
.wa {
position: fixed;
right: max(1rem, env(safe-area-inset-right, 0px));
bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
z-index: 70;
width: 56px; height: 56px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--ss-whatsapp);
color: var(--ss-white);
box-shadow: 0 6px 22px rgba(3, 33, 15, 0.3);
transition: transform 0.22s var(--ease-out), box-shadow 0.22s var(--ease), opacity 0.2s var(--ease);
}
.wa:hover { transform: scale(1.07); color: var(--ss-white); box-shadow: 0 10px 28px rgba(3, 33, 15, 0.38); }
.wa svg { width: 31px; height: 31px; }
@media (min-width: 900px) {
.wa { right: max(1.5rem, env(safe-area-inset-right, 0px)); bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); }
}
body[data-drawer="open"] .wa { opacity: 0; pointer-events: none; }
/* On the homepage the floating control waits until the hero CTAs have left
the screen, so it does not sit on top of WhatsApp Us. Scoped to .js so a
reader with JavaScript off still has the control. */
html.js.wa-gated .wa {
opacity: 0;
pointer-events: none;
visibility: hidden;
transform: scale(0.86);
}
html.js.wa-gated .wa.is-on {
opacity: 1;
pointer-events: auto;
visibility: visible;
transform: none;
}
html.js.wa-gated .wa.is-on:hover { transform: scale(1.07); }
/* Keep the last band clear of the floating control on small screens. */
@media (max-width: 899px) {
.footer { padding-bottom: calc(clamp(2.5rem, 2rem + 2vw, 3.5rem) + 72px + env(safe-area-inset-bottom, 0px)); }
}
/* --------------------------------------------------------------------------
16. MOTION
Scoped to .js so content is never hidden behind a script.
-------------------------------------------------------------------------- */
.js [data-reveal] {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.js [data-reveal][data-shown="true"] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.js [data-reveal] { opacity: 1; transform: none; }
}
/* --------------------------------------------------------------------------
17. UTILITIES AND PRINT
-------------------------------------------------------------------------- */
.center { text-align: center; }
.center .eyebrow { justify-content: center; }
.measure { max-width: 66ch; }
.measure--tight { max-width: 56ch; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-3 { margin-top: clamp(2rem, 1.4rem + 2vw, 3rem); }
.mx-auto { margin-inline: auto; }
@media print {
.strip, .header, .mega, .drawer, .wa, .frame__art, .btn-row, .frame__next { display: none !important; }
body { background: #fff; color: #000; }
.band { padding-block: 1.5rem; }
.band--green { background: #fff !important; color: #000 !important; }
.band--green::before, .band--green::after { display: none !important; }
.band--green :is(h1, h2, h3, p, li) { color: #000 !important; }
.faq__a { display: block !important; }
.card, .panel, .faq { box-shadow: none !important; border-color: #999 !important; }
}
/* --------------------------------------------------------------------------
18. BRAND FURNITURE
Composed CSS objects that give the dark bands a subject before the
commissioned artwork lands (see IMAGE-BRIEF.md). They are decorative: every
word inside them already appears as live text elsewhere on the page.
-------------------------------------------------------------------------- */
/* The pillar plate. Three stacked record cards, one per service pillar. */
.plate {
position: relative;
display: none;
width: 100%;
max-width: 30rem;
aspect-ratio: 5 / 4;
margin-inline: auto;
perspective: 1200px;
}
@media (min-width: 880px) { .plate { display: block; } }
.plate__card {
position: absolute;
left: 8%;
width: 74%;
border-radius: var(--r-md);
border: 1px solid var(--gold-line);
box-shadow: 0 22px 50px rgba(3, 33, 15, 0.42);
transform-origin: center;
}
.plate__card--back {
top: 2%;
height: 62%;
background: linear-gradient(155deg, rgba(14, 98, 55, 0.62), rgba(4, 43, 25, 0.9));
transform: rotate(-7deg) translateX(12%);
}
.plate__card--mid {
top: 16%;
height: 62%;
background: linear-gradient(155deg, rgba(10, 80, 44, 0.85), rgba(4, 43, 25, 0.95));
transform: rotate(-2.5deg) translateX(4%);
}
.plate__card--front {
top: 30%;
height: 62%;
padding: clamp(1rem, 0.6rem + 1.2vw, 1.5rem);
background: linear-gradient(158deg, #FBF9F4 0%, #F1EDE2 100%);
border-color: rgba(216, 172, 84, 0.9);
transform: rotate(2deg);
overflow: hidden;
}
.plate__card--front::before {
content: "";
position: absolute;
inset: 6px;
border: 1px solid rgba(132, 96, 30, 0.28);
border-radius: 7px;
pointer-events: none;
}
.plate__card--front::after {
content: "";
position: absolute;
inset: 0;
opacity: 0.5;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,\
");
background-size: 72px 72px;
}
.plate__label {
position: absolute;
right: clamp(1rem, 0.6rem + 1.2vw, 1.5rem);
top: clamp(0.85rem, 0.6rem + 1vw, 1.2rem);
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ss-gold-highlight);
z-index: 2;
}
.plate__card--front .plate__label {
right: auto;
top: auto;
left: clamp(1rem, 0.6rem + 1.2vw, 1.5rem);
bottom: clamp(0.9rem, 0.6rem + 1vw, 1.3rem);
color: var(--gold-ink);
}
.plate__seal {
position: absolute;
right: clamp(0.9rem, 0.6rem + 1vw, 1.4rem);
top: clamp(0.9rem, 0.6rem + 1vw, 1.4rem);
width: clamp(52px, 4.4vw, 68px);
z-index: 2;
}
.plate__seal img { width: 100%; height: auto; }
.plate__rules {
position: absolute;
left: clamp(1rem, 0.6rem + 1.2vw, 1.5rem);
top: clamp(1.4rem, 1rem + 1.4vw, 2.1rem);
display: grid;
gap: 0.55rem;
width: 46%;
z-index: 2;
}
.plate__rules i { display: block; height: 5px; border-radius: 3px; background: rgba(132, 96, 30, 0.22); }
.plate__rules i:nth-child(2) { width: 84%; }
.plate__rules i:nth-child(3) { width: 62%; }
/* Frame 1 becomes a two-column composition once there is room for it. */
.frame__grid { display: grid; gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: center; }
@media (min-width: 880px) { .frame__grid { grid-template-columns: 1.1fr 0.9fr; } }
/* A large, very quiet brand seal anchoring the right of a page header. */
.pagehead__seal {
position: absolute;
right: clamp(-90px, -4vw, -30px);
top: 50%;
transform: translateY(-50%);
width: min(400px, 34vw);
opacity: 0.075;
z-index: 1;
pointer-events: none;
filter: saturate(0.4);
}
@media (max-width: 879px) { .pagehead__seal { display: none; } }
/* Stacked prose blocks that each open with an eyebrow. The eyebrow carries no
leading rule any more, so separation comes from a hairline and real space. */
.svc-block + .svc-block {
margin-top: clamp(2.75rem, 2rem + 2.4vw, 4rem);
padding-top: clamp(2.75rem, 2rem + 2.4vw, 4rem);
border-top: 1px solid var(--green-line);
}
/* Screenshot mode. Applied only when the page is loaded with ?qa=1. */
html.qa { scroll-behavior: auto; }
html.qa .header { position: relative; }
/* Viewport-height frames would each become as tall as the capture window in a
full-page screenshot, so they are pinned to a realistic height instead. */
html.qa .frame { min-height: 620px; }
html.qa .wa { display: none; }
/* --------------------------------------------------------------------------
19. SMALL-SCREEN ADJUSTMENTS
These sit last on purpose: each one overrides a base rule declared earlier,
and at equal specificity the later rule wins. Every value here was set by
measuring the header across 320-1440px, not by eye.
-------------------------------------------------------------------------- */
/* The supporting line of the brand lockup is 33 characters of monospace. On a
360px row, beside a 46px menu control, ~10.5px is the arithmetic ceiling.
It steps up as soon as the header actually has room for it. */
@media (min-width: 640px) {
.brand__pillars { font-size: 0.78rem; letter-spacing: 0.1em; }
}
@media (min-width: 1000px) {
.brand__pillars { font-size: 0.82rem; letter-spacing: 0.12em; }
}
/* --------------------------------------------------------------------------
20. HERO FURNITURE FROM THE CLIENT'S UI/UX MOCKUP
The badge, the three assurance marks and the closing assurance line are the
client's own design. Their wording stays inside the approved compliance
language, and every claim they make is repeated in full elsewhere on the
site.
-------------------------------------------------------------------------- */
.frame__badge {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.45rem 1rem 0.45rem 0.85rem;
margin-bottom: 1.4rem;
border: 1px solid var(--gold-line);
border-radius: var(--r-pill);
background: rgba(3, 33, 15, 0.5);
font-family: var(--font-mono);
font-size: var(--t-label);
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ss-gold-highlight);
line-height: 1.4;
}
.frame__badge i { font-style: normal; opacity: 0.55; }
.frame__badge svg { flex: none; }
/* The artwork's own panel on phones. The master asks for the message first and
the supporting visual below it; the portrait art is composed with its subject
in the lower 45%, so the panel crops to that. */
.frame__panel {
position: relative;
margin: clamp(1.75rem, 1rem + 3vw, 2.5rem) 0 0;
aspect-ratio: var(--art-ratio, 16 / 11);
border-radius: var(--r-lg);
border: 1px solid var(--gold-line);
background-image: var(--art, none);
background-size: cover;
background-position: center var(--art-pos, 74%);
box-shadow: 0 18px 44px rgba(3, 33, 15, 0.42);
overflow: hidden;
}
.frame__panel::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(4, 43, 25, 0.5) 0%, rgba(4, 43, 25, 0) 34%,
rgba(4, 43, 25, 0) 78%, rgba(4, 43, 25, 0.34) 100%);
}
.frame__panel--wide { --art-ratio: 16 / 10; --art-pos: 60%; }
@media (min-width: 880px) { .frame__panel { display: none; } }
/* Law-Compliant / Confidential / Timely Support */
.assurances {
list-style: none;
margin: clamp(1.75rem, 1.1rem + 2.4vw, 2.5rem) 0 0;
padding: clamp(1.5rem, 1rem + 1.6vw, 2rem) 0 0;
border-top: 1px solid var(--gold-faint);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(0.5rem, 0.1rem + 1.4vw, 1.5rem);
max-width: 44rem;
}
.assurances li {
margin: 0;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.4rem;
}
.assurances li + li { border-left: 1px solid var(--gold-faint); }
.assurances svg { color: var(--ss-gold); width: 34px; height: 34px; }
.assurances span { display: none; }
.assurances b {
font-family: var(--font-mono);
font-weight: 500;
font-size: clamp(0.76rem, 0.7rem + 0.22vw, 0.84rem);
letter-spacing: 0.04em;
overflow-wrap: anywhere;
text-transform: uppercase;
color: var(--ss-gold-highlight);
line-height: 1.35;
}
.assurances span {
font-size: clamp(0.86rem, 0.8rem + 0.24vw, 0.95rem);
line-height: 1.45;
color: var(--on-green-soft);
text-wrap: balance;
}
.frame__assure {
display: flex;
align-items: center;
gap: 0.65rem;
margin: clamp(1.5rem, 1rem + 1.6vw, 2rem) 0 0;
padding-top: clamp(1.25rem, 0.9rem + 1.2vw, 1.5rem);
border-top: 1px solid var(--gold-faint);
font-family: var(--font-mono);
font-size: clamp(0.82rem, 0.76rem + 0.2vw, 0.88rem);
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1.6;
color: var(--ss-gold-highlight);
max-width: 44rem;
}
.frame__assure svg { flex: none; }
/* The strip carries the mockup's three availability marks; the two secondary
ones appear once the row can hold them without crowding. */
.strip__inner { display: inline-flex; align-items: center; gap: clamp(1rem, 3vw, 3.5rem); }
.strip__inner > span { display: inline-flex; align-items: center; gap: 0.5rem; }
.strip__inner > .strip__extra { display: none; }
@media (min-width: 780px) { .strip__inner > .strip__extra { display: inline-flex; } }
/* --------------------------------------------------------------------------
21. THE BRAND LOCKUP ON SMALL SCREENS
Sized against measured room, not a single clamp: the burger is 46px, the
gutter changes at 400px, and the Request control returns at 480px. Each
step below was checked for collision at the width it starts at.
-------------------------------------------------------------------------- */
.brand__name { font-size: 0.98rem; }
.brand__pillars { font-size: 0.62rem; letter-spacing: 0.02em; font-weight: 600; }
@media (min-width: 384px) {
.brand__name { font-size: 1.08rem; }
.brand__pillars { font-size: 0.7rem; }
}
@media (min-width: 440px) {
.brand__name { font-size: 1.14rem; }
.brand__pillars { font-size: 0.74rem; letter-spacing: 0.04em; }
}
@media (min-width: 640px) {
.brand__name { font-size: 1.18rem; }
.brand__pillars { font-size: 0.78rem; letter-spacing: 0.1em; }
}
@media (min-width: 1000px) {
.brand__name { font-size: 1.24rem; }
.brand__pillars { font-size: 0.82rem; letter-spacing: 0.12em; }
}
/* --------------------------------------------------------------------------
22. PAGE-HEADER ARTWORK
The opening frames hide their background on phones and show the artwork in
a panel instead. Page headers are short, so they keep the background at
every width, with a scrim that runs the way the copy does.
-------------------------------------------------------------------------- */
.pagehead .frame__art {
display: block;
background-image: var(--art-mobile, none);
background-position: center right;
}
@media (min-width: 880px) {
.pagehead .frame__art { background-image: var(--art-desktop, var(--art-mobile, none)); }
}
@media (max-width: 879px) {
.pagehead .frame__art { background-position: 72% center; }
.pagehead .frame__art::after {
background: linear-gradient(175deg, rgba(4, 43, 25, 0.95) 0%, rgba(4, 43, 25, 0.86) 46%,
rgba(4, 43, 25, 0.55) 78%, rgba(4, 43, 25, 0.35) 100%);
}
}
/* --------------------------------------------------------------------------
23. LABEL LEGIBILITY
The monospaced label voice sits at the small end of the scale by design, but
at 13px on a handset it was being reported as hard to read. These are the
labels people actually read rather than skim past.
-------------------------------------------------------------------------- */
.eyebrow { font-size: 0.88rem; letter-spacing: 0.15em; }
.pagehead__tag { font-size: 0.86rem; letter-spacing: 0.11em; }
.frame__badge { font-size: 0.86rem; letter-spacing: 0.11em; }
.crumbs { font-size: 0.84rem; letter-spacing: 0.08em; }
.callout__title { font-size: 0.86rem; }
.footer__h { font-size: 0.86rem; }
.strip__inner { font-size: 0.84rem; letter-spacing: 0.13em; }
legend { font-size: 0.86rem; }
.mega__label { font-size: 0.84rem; }
.drawer__group-label, .drawer__title { font-size: 0.84rem; }
.objective__label { font-size: 0.84rem; }
/* --------------------------------------------------------------------------
24. WIDTH OVERRIDES, LAST
Everything here adjusts a rule declared earlier in the file. Media queries
add no specificity, so position in the file is the only thing that decides
which wins. Keep this section at the bottom.
-------------------------------------------------------------------------- */
@media (max-width: 399px) { :root { --space-gutter: 1.05rem; } }
/* "Timely Support" is the longest of the three marks and was sitting hard
against the column edge; pulling the tracking in re-centres it. */
@media (max-width: 480px) { .assurances b { letter-spacing: 0.02em; } }
/* On a page header the buttons sit low, where the artwork is most visible.
The scrim keeps its lower half dense enough for them to stay crisp. */
@media (max-width: 879px) {
.pagehead .frame__art::after {
background: linear-gradient(175deg, rgba(4, 43, 25, 0.96) 0%, rgba(4, 43, 25, 0.9) 44%,
rgba(4, 43, 25, 0.72) 74%, rgba(4, 43, 25, 0.6) 100%);
}
}
/* The client's spec starts at 360px. Below that the brand lockup, at a size
worth reading, no longer shares a row with the menu control, so the lockup
steps down rather than the header clipping. */
@media (max-width: 359px) {
:root { --space-gutter: 0.85rem; --header-h: 78px; }
.brand { gap: 0.4rem; }
.brand__mark { width: 56px; height: 56px; }
.brand__name { font-size: 0.88rem; }
.brand__pillars { font-size: 0.56rem; letter-spacing: 0.01em; }
.burger { width: 42px; height: 42px; }
}
/* --------------------------------------------------------------------------
25. THE FIRST FOLD ON PHONES
The client's UI/UX mockup is a 900x1600 frame, exactly 9:16, so at a 375pt
phone width it is a single 667pt fold with the whole hero inside it: badge,
headline, paragraph, the three assurance marks, both calls to action and the
compliance line. Measured off the JPEG, it only fits because its body copy
runs at about 12.5px and its primary button at about 41pt, under the 44pt
tap target. We do not follow it that far down.
What we do follow is its composition. The mockup carries one full-bleed
image behind the copy; the earlier build stacked the artwork in its own
panel, which cost 263pt on its own, more than every type change combined.
Dropping the panel, taking the headline to ~33px and tightening the vertical
rhythm puts the whole hero inside the fold on a 390x844 handset, with the
compliance line breaking the fold on a 375x812 one, which is the right place
to lose it.
Scoped to `html:not(.hero-long)` so `?hero=long` leaves every rule above
this section untouched and renders the previous hero for comparison. Nothing
here depends on JavaScript: with none, the compact fold is what runs.
Only the opening frame is affected. Frames 2 and 3 keep their panels.
-------------------------------------------------------------------------- */
@media (max-width: 879px) {
/* Full-bleed portrait, composed like the client's UI/UX mockup: archival
still life and gold map on the right, copy on the left. Sized under cover
and pinned top-right so the whole cluster reads on a phone instead of a
tight crop of one object. */
html:not(.hero-long) .frame--first .frame__art {
display: block;
background-image: var(--art-mobile, none);
background-position: right -10px top -32px;
background-size: 86% auto;
}
/* Left-weighted scrim so the headline stays readable, the right-hand scene
can actually be seen, and the buttons sit on denser green. */
html:not(.hero-long) .frame--first .frame__art::after {
background:
linear-gradient(180deg, rgba(4, 43, 25, 0.10) 0%, rgba(4, 43, 25, 0.04) 38%,
rgba(4, 43, 25, 0.62) 64%, rgba(4, 43, 25, 0.84) 100%),
linear-gradient(105deg, rgba(4, 43, 25, 0.88) 0%, rgba(4, 43, 25, 0.70) 36%,
rgba(4, 43, 25, 0.18) 62%, rgba(4, 43, 25, 0.36) 100%);
}
html:not(.hero-long) .frame--first .frame__panel { display: none; }
html:not(.hero-long) .frame--first { padding-block: 1.35rem 1.5rem; }
html:not(.hero-long) .frame--first .frame__badge {
padding: 0.34rem 0.85rem 0.34rem 0.7rem;
margin-bottom: 0.85rem;
font-size: 0.8rem;
letter-spacing: 0.1em;
}
/* 34px at 390, against 43px before. Measured against the tightest handset in
the range rather than a round number: at 360x800 the compliance line still
lands 60pt clear of the fold, and the headline grows again on the wider
phones where the room actually exists. */
html:not(.hero-long) .frame--first h1 {
font-size: clamp(1.95rem, 1.08rem + 3.9vw, 2.75rem);
line-height: 1.07;
margin-bottom: 0.4em;
padding-right: 14%;
}
/* The paragraph keeps its full size. It is the one block on the fold that
gets read rather than scanned, and the mockup's ~12.5px is exactly the
economy we are not making. Only the leading tightens. A right inset
keeps it off the ivory certificate. */
html:not(.hero-long) .frame--first .lead {
line-height: 1.48;
margin-bottom: 0;
padding-right: 42%;
}
html:not(.hero-long) .frame--first .assurances {
margin-top: 1.1rem;
padding-top: 1.05rem;
gap: 0.45rem;
}
html:not(.hero-long) .frame--first .assurances li { gap: 0.4rem; }
html:not(.hero-long) .frame--first .assurances svg { width: 34px; height: 34px; }
/* 54pt clears the 44pt minimum with room to spare and buys back 12pt. */
html:not(.hero-long) .frame--first .btn-row { margin-top: 1.1rem; gap: 0.6rem; }
html:not(.hero-long) .frame--first .btn--lg {
min-height: 54px;
padding: 0.8rem 1.4rem;
}
html:not(.hero-long) .frame--first .frame__assure {
margin-top: 1rem;
padding-top: 0.85rem;
line-height: 1.45;
}
html:not(.hero-long) .frame--first .frame__next {
margin-top: 0.35rem;
min-height: 40px;
padding-bottom: 0;
}
}
/* 360x800 is the tightest fold we still treat as a first-class handset.
The extra right inset on the lead (to clear the still life) costs a line,
so the vertical rhythm steps down here to keep the compliance line on
the fold. */
@media (max-width: 379px) {
html:not(.hero-long) .frame--first { padding-block: 1.1rem 1.15rem; }
html:not(.hero-long) .frame--first h1 {
font-size: 1.78rem;
padding-right: 10%;
}
html:not(.hero-long) .frame--first .lead { padding-right: 38%; }
html:not(.hero-long) .frame--first .assurances {
margin-top: 0.8rem;
padding-top: 0.75rem;
}
html:not(.hero-long) .frame--first .btn-row { margin-top: 0.8rem; }
html:not(.hero-long) .frame--first .btn--lg {
min-height: 50px;
padding: 0.7rem 1.2rem;
}
html:not(.hero-long) .frame--first .frame__assure {
margin-top: 0.7rem;
padding-top: 0.6rem;
}
}
/* --------------------------------------------------------------------------
26. FRAMES 2 AND 3 ON PHONES
Same composition as the compact first fold: the portrait art sits full
bleed behind the copy, the stacked panel is dropped, and the next-section
cue is hidden so "Who We Serve" / "Three Working Days" are not named twice.
-------------------------------------------------------------------------- */
@media (max-width: 879px) {
.frame__next { display: none; }
/* These are content bands, not second heroes. Dropping the viewport
min-height removes the empty green above and below the copy; cover
on the portrait art removes the second, mismatched green patch. */
.frame--serve,
.frame--days {
min-height: 0;
justify-content: flex-start;
padding-block: 1.75rem 1.6rem;
}
html.qa .frame--serve,
html.qa .frame--days { min-height: 0; }
.frame--serve .frame__art,
.frame--days .frame__art {
display: block;
background-image: var(--art-mobile, none);
background-size: cover;
}
.frame--serve .frame__panel,
.frame--days .frame__panel { display: none; }
.frame--serve h2,
.frame--days h2 {
font-size: clamp(2.05rem, 1.15rem + 4vw, 2.7rem);
line-height: 1.08;
margin-bottom: 0.45em;
}
.frame--serve .frame__art { background-position: 92% 58%; }
.frame--serve .frame__art::after {
background:
linear-gradient(180deg, rgba(4, 43, 25, 0.18) 0%, rgba(4, 43, 25, 0.10) 58%,
rgba(4, 43, 25, 0.50) 100%),
linear-gradient(100deg, rgba(4, 43, 25, 0.90) 0%, rgba(4, 43, 25, 0.78) 52%,
rgba(4, 43, 25, 0.30) 80%, rgba(4, 43, 25, 0.32) 100%);
}
.frame--serve .audience {
max-width: 14.5rem;
gap: 0.35rem;
}
.frame--serve .audience li {
display: grid;
grid-template-columns: 6px 1fr;
align-items: baseline;
font-size: 1.02rem;
padding-bottom: 0.48rem;
}
.frame--days .frame__art { background-position: 70% 82%; }
.frame--days .frame__art::after {
background:
linear-gradient(180deg, rgba(4, 43, 25, 0.72) 0%, rgba(4, 43, 25, 0.38) 42%,
rgba(4, 43, 25, 0.22) 100%),
linear-gradient(105deg, rgba(4, 43, 25, 0.82) 0%, rgba(4, 43, 25, 0.48) 52%,
rgba(4, 43, 25, 0.18) 100%);
}
.frame--days .frame__copy { max-width: none; }
.frame--days .lead { margin-bottom: 0; }
.frame--days .objective { margin-top: 1.25rem; }
}
/* --------------------------------------------------------------------------
27. CLIENT MOCKUP HOMEPAGE OPENING
Frame 1: heading left + scroll cue. Frame 2: statement, trio, two buttons.
Corner boxes removed; a single L-bracket divider sits between Who We Serve
and Three Working Days.
-------------------------------------------------------------------------- */
/* `flex: 1` rather than a min-height calc. The old calc restated the viewport
maths but did not subtract .frame--first's own padding-block, so the inner
grew the section past the fold and pushed the scroll cue off screen at
1280x860. Filling the parent's content box gets it right at every size. */
.frame--first .frame__inner--hero {
display: flex;
flex: 1;
flex-direction: column;
justify-content: space-between;
}
/* The headline breaks on explicit
s, so the column only ever needs to be
as wide as its longest line. `width: fit-content` does that and still cannot
overflow the container. Two things it is deliberately not: a measure in `ch`,
which resolves against .frame__copy's inherited body font rather than the
display face, and `min(100%, max-content)`, which does not parse at all -
min() takes length-percentages, not intrinsic keywords, so the whole
declaration is dropped and the column silently falls back to full width. */
.frame--first .frame__copy { width: fit-content; max-width: 100%; }
/* Uppercase, per the client's mockup. The transform lives in CSS rather than
in the markup so the approved sentence stays readable and quotable in the
HTML source. Uppercase Spectral needs its tracking relaxed - the negative
value tuned for title case closes the counters up at display sizes. */
.frame--first h1 {
font-size: clamp(2.85rem, 1.1rem + 8.4vw, 5.4rem);
line-height: 1.04;
letter-spacing: -0.004em;
margin: 0;
padding-top: 0.35rem;
text-transform: uppercase;
}
.frame--first .gold { color: var(--ss-gold-highlight); }
/* The hairline under the headline is the mockup's, drawn rather than imaged so
it inherits the gold token and never ships as a raster. */
.frame--first .frame__copy::after {
content: "";
display: block;
height: 1px;
margin-top: clamp(1.1rem, 0.6rem + 1.6vw, 1.9rem);
background: linear-gradient(90deg, var(--ss-gold) 0%, rgba(216, 172, 84, 0.35) 55%, transparent 100%);
}
.scroll-cue {
align-self: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.7rem;
margin-top: 1.5rem;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ss-gold);
text-decoration: none;
z-index: 3;
}
.scroll-cue__ring {
width: 52px;
height: 52px;
display: grid;
place-items: center;
border: 1px solid var(--ss-gold);
border-radius: 50%;
color: var(--ss-gold-highlight);
box-shadow: 0 0 0 6px rgba(216, 172, 84, 0.08);
animation: cue-pulse 2.4s var(--ease) infinite;
}
.scroll-cue__ring svg { animation: nudge 2.8s var(--ease) infinite; }
.scroll-cue:hover { color: var(--ss-gold-highlight); }
@keyframes cue-pulse {
0%, 100% { box-shadow: 0 0 0 6px rgba(216, 172, 84, 0.08); transform: translateY(0); }
50% { box-shadow: 0 0 0 12px rgba(216, 172, 84, 0); transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
.scroll-cue__ring, .scroll-cue__ring svg { animation: none; }
}
.frame--intro {
min-height: calc(100svh - var(--header-h));
justify-content: flex-start;
padding-block: 1.35rem 1.5rem;
background: var(--ss-green);
}
/* Unlike the other frames this art runs on phones too - it is the section's
whole visual, not a desktop enhancement. The scrim is dense top and bottom,
where the statement and the buttons sit, and opens up across the middle so
the artwork is actually visible rather than veiled. */
.frame--intro .frame__art {
display: block;
background-image: var(--art-mobile, none);
background-position: center 62%;
background-size: cover;
}
@media (min-width: 880px) {
.frame--intro .frame__art {
background-image: var(--art-desktop, var(--art-mobile, none));
background-position: center 58%;
}
}
/* Many stops, small steps. The first version went 0.92 to 0.38 across 22% of
the height and the eye read the falloff as a hard horizontal line - exactly
the banding the artwork was regenerated to avoid. No two adjacent stops now
differ by more than 0.26, which is below the threshold where the ramp becomes
visible as an edge. */
.frame--intro .frame__art::after {
background:
linear-gradient(180deg,
rgba(4, 43, 25, 0.96) 0%,
rgba(4, 43, 25, 0.88) 12%,
rgba(4, 43, 25, 0.68) 26%,
rgba(4, 43, 25, 0.44) 38%,
rgba(4, 43, 25, 0.27) 50%,
rgba(4, 43, 25, 0.24) 66%,
rgba(4, 43, 25, 0.50) 78%,
rgba(4, 43, 25, 0.84) 90%,
rgba(4, 43, 25, 0.97) 100%);
}
.frame--intro .frame__inner--center {
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
justify-content: space-between;
text-align: center;
max-width: 40rem;
margin-inline: auto;
}
/* Two groups, pushed apart. The gap between them is the window the background
artwork shows through, so the subject in the image and the empty space in
the layout are the same region by construction rather than by luck. */
.frame--intro .frame__lede,
.frame--intro .frame__foot {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
/* A floor under the window so the artwork always has room to read, even on a
short handset where space-between alone would collapse it to nothing. */
.frame--intro .frame__lede { margin-bottom: clamp(7rem, 20vh, 16rem); }
/* The foot was sitting on the section's bottom padding, which put it right on
the fold. Space-between still pushes it down, this just stops it short. */
.frame--intro .frame__foot { margin-bottom: clamp(2rem, 7vh, 4.5rem); }
.frame__emblem-row {
display: flex;
align-items: center;
gap: 1rem;
width: min(100%, 18rem);
margin-bottom: 1.35rem;
}
.frame__hair {
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, var(--ss-gold));
}
.frame__emblem-row .frame__hair:last-child {
background: linear-gradient(90deg, var(--ss-gold), transparent);
}
.frame__emblem {
width: 64px;
height: 64px;
display: grid;
place-items: center;
flex: none;
border: 1px solid var(--ss-gold);
border-radius: 50%;
color: var(--ss-gold);
background: radial-gradient(circle at 50% 40%, rgba(216, 172, 84, 0.16), transparent 70%);
box-shadow: 0 0 24px rgba(216, 172, 84, 0.12);
}
.frame__statement {
margin: 0;
font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.28rem);
line-height: 1.5;
color: var(--on-green);
text-wrap: balance;
}
.frame__trio {
margin: 1.15rem 0 0;
font-family: var(--font-display);
font-size: clamp(0.82rem, 0.7rem + 0.5vw, 1.05rem);
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ss-gold);
white-space: nowrap;
}
.frame__trio i { font-style: normal; margin-inline: 0.35em; opacity: 0.9; }
.btn-row--split {
display: flex;
flex-direction: row;
justify-content: center;
align-items: stretch;
gap: 0.7rem;
margin-top: 1.15rem;
width: 100%;
}
/* These two are the page's primary conversion pair, so they get more weight
than a default .btn: a taller body, a real leading icon in its own plate,
and the trailing arrow pushed to the edge. The icons used to be hidden here
because the old cramped padding had no room for them. */
.btn-row--split .btn {
flex: 1 1 0;
min-width: 0;
gap: 0.5rem;
min-height: 58px;
padding: 0.8rem 0.85rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
border-radius: calc(var(--r-sm) + 2px);
}
/* The leading mark sits on its own translucent disc, which is what separates a
premium button from a link with an icon glued to it. */
.btn-row--split .btn > svg:first-child {
flex: none;
width: 30px;
height: 30px;
padding: 6px;
box-sizing: border-box;
border-radius: 50%;
}
.btn-row--split .btn > svg:last-child {
flex: none;
margin-left: auto;
opacity: 0.75;
transition: transform 0.2s var(--ease-out);
}
.btn-row--split .btn:hover > svg:last-child { transform: translateX(3px); opacity: 1; }
.btn-row--split .btn--primary > svg:first-child {
background: rgba(4, 43, 25, 0.14);
color: var(--ss-green);
}
/* WhatsApp's own green on the disc, the brand green on the body: the button
reads as WhatsApp without breaking the colour lock, which allows the
WhatsApp green only for WhatsApp itself. */
.btn-row--split .btn--wa > svg:first-child {
background: var(--ss-whatsapp);
color: #FFFFFF;
padding: 5px;
box-shadow: 0 2px 8px rgba(37, 211, 102, 0.35);
}
.btn-row--split .btn--wa {
background: linear-gradient(168deg, var(--ss-green-secondary) 0%, #073B21 100%);
border-color: var(--gold-line);
box-shadow: 0 1px 0 rgba(216, 172, 84, 0.18) inset, 0 8px 22px rgba(3, 33, 15, 0.34);
}
.btn-row--split .btn--wa:hover, .btn-row--split .btn--wa:focus {
background: linear-gradient(168deg, #0C5E34 0%, var(--ss-green-secondary) 100%);
border-color: var(--ss-gold);
box-shadow: 0 1px 0 rgba(216, 172, 84, 0.28) inset, 0 12px 30px rgba(3, 33, 15, 0.42);
}
/* Two columns on phones, per the client's mockup. REQUEST YOUR SERVICE is the
binding string: at 390px each column is 173px, so the mark, the label and the
arrow all have to fit inside that. Every number below is what buys the room -
a smaller mark, tighter tracking, a label that scales with the viewport, and
no trailing arrow. The row stays inside the shell so the buttons line up with
the paragraph and the trio line above them. */
@media (max-width: 479px) {
.btn-row--split {
flex-direction: row;
align-items: stretch;
gap: 0.45rem;
}
.btn-row--split .btn {
flex: 1 1 0;
width: auto;
gap: 0.34rem;
min-height: 52px;
padding: 0.6rem 0.5rem;
font-size: clamp(0.6rem, 2.6vw, 0.78rem);
letter-spacing: 0.012em;
}
.btn-row--split .btn > svg:first-child { width: 24px; height: 24px; padding: 5px; }
.btn-row--split .btn--wa > svg:first-child { padding: 4px; }
/* The trailing arrow comes off on phones. With it, the label has to drop to
about 9.3px at 360 to keep both columns inside the row; without it the same
label sits at 11.7px. The mark is what carries the premium read, the label
is what has to be legible, and the arrow is the one of the three that can
go. It returns at 480px where there is room for all three. */
.btn-row--split .btn > svg:last-child { display: none; }
}
.frame--first .frame__art,
.frame--serve .frame__art,
.frame--days .frame__art {
display: block;
}
.frame--first .frame__art {
background-image: var(--art-mobile, none);
background-size: cover;
background-position: 78% 42%;
}
.frame--first .frame__art::after {
background: linear-gradient(100deg, rgba(4, 43, 25, 0.55) 0%, rgba(4, 43, 25, 0.18) 38%,
transparent 62%);
}
@media (max-width: 879px) {
/* `center`, not the old 82% 38%. That offset was tuned to find a subject in
artwork that was not composed for this frame; the round-5 asset is built to
the exact zones, so any offset re-crops it and slides the cluster back into
the headline column. At 390x718 against a 9:16 source, cover trims about
14px of width - centred, that is 7px a side and the composition survives. */
html:not(.hero-long) .frame--first .frame__art,
.frame--first .frame__art {
display: block;
background-image: var(--art-mobile, none);
background-size: cover;
background-position: center center;
}
/* Lighter than before. The left column of the new artwork is already empty
green, so a 0.5 scrim only mutes it; 0.3 is enough to hold the headline.
The vertical pass keeps the very bottom dense for the scroll cue. */
html:not(.hero-long) .frame--first .frame__art::after,
.frame--first .frame__art::after {
background:
linear-gradient(180deg, transparent 0%, transparent 76%, rgba(4, 43, 25, 0.45) 92%,
rgba(4, 43, 25, 0.62) 100%),
linear-gradient(100deg, rgba(4, 43, 25, 0.3) 0%, rgba(4, 43, 25, 0.1) 42%,
transparent 66%);
}
/* The headline is the hero on a phone: six uppercase lines sized to run the
full measure and occupy the top half of the frame, with the leading opened
up so the block reads as a composed plate rather than a tight stack. The
old 0.94 leading at 43px left 318px of empty green between the last line
and the scroll cue; this fills it. 11.4vw is the ceiling that keeps
INFORMATION, the longest line, inside the measure at 375px; the 2.5rem
floor does the same job at 360px, where the vw term would undershoot. */
/* Composed like the client's mockup: copy in a left column, artwork in the
right third and across the lower half. The binding constraint is the word
INFORMATION - Spectral sets it about 7.8x its font size, so leaving a
usable right-hand column caps the headline near 8vw. That is smaller than
a full-width headline could be, and it is the price of the mockup layout. */
html:not(.hero-long) .frame--first h1,
.frame--first h1 {
font-size: clamp(1.78rem, 8.3vw, 2.45rem);
line-height: 1.26;
letter-spacing: -0.004em;
padding-top: 0;
padding-right: 0;
margin-bottom: 0;
}
/* 75% rather than 69%, because the two go together: INFORMATION sets at
about 7.8x its font size, so the column has to widen with the type or the
longest line wraps. At 8.3vw against a 75% column the worst case is 360px,
where the line lands 11px inside the measure. */
html:not(.hero-long) .frame--first .frame__copy,
.frame--first .frame__copy {
max-width: 75%;
padding-top: clamp(1.75rem, 7vh, 3.5rem);
}
/* The rule stops with the copy column rather than running the full width, so
it reads as an underline to the headline and not as a section divider. */
html:not(.hero-long) .frame--first .frame__copy::after,
.frame--first .frame__copy::after { margin-top: clamp(0.9rem, 2.4vh, 1.5rem); }
html:not(.hero-long) .frame--first .frame__inner--hero,
.frame--first .frame__inner--hero { justify-content: space-between; }
.frame--serve .frame__art {
background-image: var(--art-mobile, none);
background-size: cover;
background-position: center 72%;
}
.frame--serve .audience { max-width: 22rem; }
}
@media (min-width: 880px) {
.frame--first .frame__art { background-image: var(--art-desktop, none); background-position: right center; }
/* Uppercase at six lines is ~8% taller than the title-case original, which
pushed the scroll cue below the fold on a 1280x860 window. The vh term in
the middle of the clamp is what keeps the whole hero on one screen: on a
short laptop the height budget wins, on a tall monitor the width does, and
4.8rem caps it so the headline never outgrows the artwork beside it. */
.frame--first h1 {
font-size: clamp(3rem, min(5.4vw, 8.4vh), 4.8rem);
line-height: 1.02;
}
}
@media (max-width: 559px) {
.brand__name { font-size: 0.92rem; letter-spacing: 0.03em; }
.brand__pillars { font-size: 0.58rem; letter-spacing: 0.06em; color: var(--ss-green); }
}