, so the hero is pulled up
by exactly one header height (once, not twice) and its own top padding
is restored so content still clears the nav. ---- */
.home .hero--video { margin-top: calc(var(--header-h) * -1); padding-top: calc(var(--header-h) + clamp(2.2rem, 5vw, 4rem)); }
/* ---- [C] (retired 2026-07-25) Homepage transparent/7%-tint header removed:
every page now uses the shared solid black header defined at the end of
this file. Restore from gridshift-before-nav-standardisation.zip. ---- */
/* ---- [D] Three brand-coloured periods (words keep their colour) ---- */
.pd--blue { color: var(--green); }
.pd--teal { color: var(--mint); }
.pd--purple { color: var(--purple); }
/* ---- [E] Footer: brand column, social placeholders, information column ---- */
.footer__top { grid-template-columns: 1.6fr .7fr .7fr; }
.footer__social { display: flex; gap: .55rem; margin-top: 1.2rem; }
.footer__social-item {
display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.22);
color: rgba(255,255,255,.75);
transition: color .25s var(--ease), border-color .25s var(--ease);
}
.footer__social-item svg { width: 18px; height: 18px; }
a.footer__social-item:hover, a.footer__social-item:focus-visible { color: var(--mint); border-color: var(--mint); }
.footer__social li span.footer__social-item { cursor: default; opacity: .8; } /* placeholder state, not a link */
/* ---- [F] Legal pages: readable measure, quiet hierarchy ---- */
.legal { max-width: 74ch; }
.legal h2 { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.2rem, 1rem + .8vw, 1.55rem); margin-top: 2.2rem; }
.legal p { margin-top: .8rem; color: var(--ink-72); }
.legal__intro { font-size: 1.08rem; color: var(--ink) !important; }
.legal__list { margin-top: .9rem; display: grid; gap: .5rem; }
.legal__list li { position: relative; padding-left: 1.25rem; color: var(--ink-72); }
.legal__list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; background: var(--mint); }
.legal__updated { margin-top: 1.1rem; font-family: var(--f-body); font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-55); }
.legal a { color: var(--green-deep); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--green); }
@media (max-width: 820px) { .footer__top { grid-template-columns: 1fr; } }
/* =====================================================================
SERVICE-PAGE VARIANT (2026-07-25) — scoped to body.svc-page ONLY, so the
homepage (body.home) and every other page are untouched.
Rollback: gridshift-before-service-page-pass.zip
===================================================================== */
/* ---- [S1] Solid near-black header, white nav + white logo ---- */
.svc-page .site-header { background: var(--ink); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid rgba(255,255,255,.1); }
.svc-page .site-header.is-scrolled { background: var(--ink); box-shadow: 0 6px 24px rgba(35,31,32,.18); }
.svc-page .nav__menu a:not(.btn) { color: #fff; }
.svc-page .nav__menu a:not(.btn):hover, .svc-page .nav__menu a[aria-current="page"] { color: var(--mint); }
.svc-page .nav__menu a:not(.btn)::after { background: var(--mint); }
.svc-page .nav__dropbtn { color: #fff; }
.svc-page .hasdrop:hover .nav__dropbtn, .svc-page .hasdrop.is-open .nav__dropbtn,
.svc-page .nav__dropbtn:focus-visible, .svc-page .hasdrop.is-current .nav__dropbtn { color: var(--mint); }
.svc-page .nav__toggle { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); }
.svc-page .nav__bars, .svc-page .nav__bars::before, .svc-page .nav__bars::after { background: #fff; }
.svc-page .nav__toggle[aria-expanded="true"] .nav__bars { background: transparent; }
.svc-page .nav__panel { color: var(--ink); } /* dropdown stays solid white with ink text */
.svc-page :focus-visible { outline-color: var(--mint); }
/* ---- [S2] Buttons match the homepage system exactly ---- */
.svc-page .btn { border-radius: 0; }
.svc-page .btn--lg { padding: .85rem 1.8rem; font-size: 1.02rem; }
.svc-page .btn:not(.btn--lg):not(.btn--sm) { padding: .74rem 1.45rem; }
.svc-page .btn--sm { padding: .55rem 1rem; }
/* ---- [S3] Hero: no icon/buttons any more, so rebalance and set one H1 scale ---- */
.svc-page .page-hero { padding-block: clamp(2.6rem, 5vw, 4.4rem) clamp(2rem, 3.5vw, 3rem); }
.svc-page .page-hero__title { font-size: clamp(2.4rem, 1.2rem + 4vw, 4.2rem); margin-top: .7rem; }
.svc-page .page-hero__lead { margin-top: 1.1rem; max-width: 54ch; }
.svc-page .svc-hero2 { align-items: center; }
/* ---- [S4] "What it helps with" statement in full near-black
(root cause: .philo is a inside .philo-grid, which set colour to
--ink-72, so the statement rendered at 72% opacity) ---- */
.svc-page .philo { color: var(--ink); }
/* ---- [S5] Section rhythm after the removals; nothing crowds the footer ---- */
.svc-page .section--tight { padding-block: clamp(2.4rem, 4vw, 3.4rem); }
.svc-page .section { padding-block: clamp(2.4rem, 4vw, 3.6rem); }
.svc-page main > .section:last-of-type { padding-bottom: clamp(3rem, 5vw, 4.4rem); }
.svc-page .cta { padding-block: clamp(3rem, 5vw, 4.4rem); }
/* ---- [S6] Native scrolling: no smooth-scroll easing, lighter reveals ---- */
html:has(body.svc-page) { scroll-behavior: auto; } /* native wheel/anchor speed on service pages */
.js .svc-page .reveal { transform: translateY(8px); transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); }
/* =====================================================================
SERVICE CARDS → SUPPLIED ICONS (2026-07-25; homepage only)
Rollback: gridshift-before-icon-cards.zip
The photo panel and the small line-icon are gone from the markup; each
card is now [icon] [heading + description + arrow]. Card shape, size,
grid, colours, type and links are unchanged.
===================================================================== */
.scard a { grid-template-columns: 104px 1fr; align-items: stretch; }
.scard__ico-wrap {
display: flex; align-items: center; justify-content: center;
min-height: 104px; /* matches the old visual block, so card height is unchanged */
padding: .55rem;
background: var(--surface); /* icons are supplied on white — no visible plate */
border-right: 1px solid var(--line);
}
/* One box for every icon + contain: identical source canvases (1145×1276)
normalise optically at a single size; nothing is cropped or stretched. */
.scard__ico-img {
width: 100%; height: 100%; max-width: 66px; max-height: 74px;
object-fit: contain; display: block;
transition: transform .3s var(--ease);
}
.scard a:hover .scard__ico-img { transform: translateY(-1px); } /* restrained; card itself does not move */
.scard__body { justify-content: center; }
@media (max-width: 640px) {
.scard a { grid-template-columns: 88px 1fr; }
.scard__ico-wrap { min-height: 92px; }
.scard__ico-img { max-width: 56px; max-height: 62px; }
}
/* ---- What we do: more air between the check icon and its text ---- */
.wwd2__list li { gap: clamp(1.15rem, 1.9vw, 1.9rem); } /* was 1rem — one shared rule, all six rows */
@media (max-width: 640px) { .wwd2__list li { gap: 1.05rem; } } /* keeps text from compressing on narrow screens */
/* ---- Type statement: single line, tighter section ---- */
.typestate { padding-block: clamp(2.2rem, 4.5vw, 3.6rem); }
.typestate__t { font-size: clamp(1.9rem, 1rem + 3.4vw, 4rem); white-space: nowrap; }
/* MOBILE FIX: at 1.9rem the line is ~411px wide, which overflows every phone
viewport and gets clipped by body{overflow-x:hidden}. Allow it to wrap onto
three lines below 620px; the phrase still reads as three statements. */
@media (max-width: 620px) {
.typestate__t { white-space: normal; font-size: clamp(1.5rem, 1rem + 3vw, 1.9rem); line-height: 1.25; }
}
@media (max-width: 640px) { .typestate__t { white-space: normal; font-size: clamp(1.7rem, 8vw, 2.4rem); } }
/* Header over the video (homepage only, via body.has-vhero): transparent at
top with white links; solid dark bar once scrolled (inverse logo works in
both states). The dropdown panel keeps its solid white background. */
body.has-vhero .site-header { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.has-vhero .site-header.is-scrolled {
background: rgba(28,25,26,.9);
backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px);
border-bottom-color: rgba(255,255,255,.12);
}
body.has-vhero .nav__menu a:not(.btn) { color: #fff; }
body.has-vhero .nav__menu a:not(.btn):hover { color: var(--mint); }
body.has-vhero .nav__menu a[aria-current="page"] { color: var(--mint); }
body.has-vhero .nav__dropbtn { color: #fff; }
body.has-vhero .hasdrop:hover .nav__dropbtn,
body.has-vhero .hasdrop.is-open .nav__dropbtn,
body.has-vhero .nav__dropbtn:focus-visible,
body.has-vhero .hasdrop.is-current .nav__dropbtn { color: var(--mint); }
body.has-vhero .nav__toggle { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.45); }
body.has-vhero .nav__bars, body.has-vhero .nav__bars::before, body.has-vhero .nav__bars::after { background: #fff; }
body.has-vhero .nav__toggle[aria-expanded="true"] .nav__bars { background: transparent; }
/* ---- [R7] Service-hero variation: 4 alternating pages run image-left ---- */
.svc-hero2--flip { grid-template-columns: .92fr 1.08fr; }
.svc-hero2--flip .page-hero__inner { order: 2; }
.svc-hero2--flip .img-slot--hero { order: 1; }
@media (max-width: 900px) {
.svc-hero2--flip .page-hero__inner { order: 1; }
.svc-hero2--flip .img-slot--hero { order: 2; }
}
/* =====================================================================
SHARED SITE HEADER (2026-07-25) — the Website Design service-page
header, promoted to the single site-wide standard. Unscoped and placed
last, so it wins on every page (homepage included). The old
body.home transparent variant is retired; body.svc-page rules below
are now redundant but harmless duplicates of these values.
Rollback: gridshift-before-nav-standardisation.zip
===================================================================== */
.site-header {
background: var(--ink);
backdrop-filter: none; -webkit-backdrop-filter: none;
border-bottom: 1px solid rgba(255,255,255,.1);
z-index: 1000;
}
.site-header.is-scrolled { background: var(--ink); box-shadow: 0 6px 24px rgba(35,31,32,.18); border-bottom-color: rgba(255,255,255,.1); }
.header__inner::before { content: none; } /* kills the old homepage tint layer */
.nav__menu a:not(.btn) { color: #fff; }
.nav__menu a:not(.btn):hover { color: var(--mint); }
.nav__menu a:not(.btn)::after { background: var(--mint); }
.nav__menu a[aria-current="page"] { color: var(--mint); } /* current page stays readable on black */
.nav__menu a[aria-current="page"]::after { background: var(--mint); }
.nav__dropbtn { color: #fff; }
.hasdrop:hover .nav__dropbtn, .hasdrop.is-open .nav__dropbtn,
.nav__dropbtn:focus-visible, .hasdrop.is-current .nav__dropbtn { color: var(--mint); }
.nav__toggle { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); }
.nav__bars, .nav__bars::before, .nav__bars::after { background: #fff; }
.nav__toggle[aria-expanded="true"] .nav__bars { background: transparent; }
.nav__panel { color: var(--ink); } /* dropdown stays solid white with ink text */
/* square nav CTA on every page (matches the service-page treatment) */
.nav__cta .btn { border-radius: 0; padding: .55rem 1rem; }
.site-header :focus-visible { outline-color: var(--mint); }
/* =====================================================================
WHAT WE DO — checklist group offset (2026-07-25). Final rule in the
file, so nothing can override it. One shared rule moves all six
complete groups (tick + label) right together; the tick travels with
its text because the padding is on the list, not the text node.
===================================================================== */
.wwd2 .wwd2__list { padding-left: 56px; } /* desktop */
@media (max-width: 1100px) { .wwd2 .wwd2__list { padding-left: 40px; } } /* laptop/tablet landscape */
@media (max-width: 920px) { .wwd2 .wwd2__list { padding-left: 24px; } } /* stacked: keep a light indent */
@media (max-width: 560px) { .wwd2 .wwd2__list { padding-left: 0; } } /* phones: full width, no squeeze */
/* =====================================================================
HOMEPAGE HEADER EXCEPTION (restored 2026-07-25 from
gridshift-before-nav-standardisation.zip — verbatim previous rules).
Every internal page keeps the shared solid black header above; the
homepage alone returns to the transparent treatment over the hero
video, with a 7% BLACK BACKGROUND painted by a pseudo-element BEHIND
the header content, so the logo, links, dropdown trigger, CTA and
hamburger all stay 100% opaque (no opacity on the header element).
Rollback: gridshift-before-homepage-header-exception.zip
===================================================================== */
.home .site-header { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; box-shadow: none; }
.home .header__inner { position: relative; }
.home .header__inner::before { /* the tint lives behind the content, so nothing fades */
content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--gutter) * -1); right: calc(var(--gutter) * -1);
background: rgba(0, 0, 0, 0.07); pointer-events: none;
}
.home .site-header.is-scrolled { background: transparent; box-shadow: none; }
.home .site-header.is-scrolled .header__inner::before { background: rgba(0,0,0,.55); } /* readable once over page content */
/* FIX (2026-07-25): the previous rule gave .nav__menu position:relative, which made
the right-aligned
the containing block for .nav__panel (left:0;right:0) — the
dropdown therefore opened pinned to the far right. The tint is now pushed behind
the content with z-index:-1 instead, so NO nav element is positioned and the panel
resolves against .header__inner again. */
.home .header__inner::before { z-index: -1; }
/* white nav text + icons on the homepage (unchanged from the previous version) */
.home .nav__menu a:not(.btn) { color: #fff; }
.home .nav__menu a:not(.btn):hover, .home .nav__menu a[aria-current="page"] { color: var(--mint); }
.home .nav__dropbtn { color: #fff; }
.home .hasdrop:hover .nav__dropbtn, .home .hasdrop.is-open .nav__dropbtn,
.home .nav__dropbtn:focus-visible, .home .hasdrop.is-current .nav__dropbtn { color: var(--mint); }
.home .nav__toggle { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); }
.home .nav__bars, .home .nav__bars::before, .home .nav__bars::after { background: #fff; }
.home .nav__toggle[aria-expanded="true"] .nav__bars { background: transparent; }
/* dropdown panel keeps its solid white background and ink text; the open
mobile overlay keeps its own solid dark panel — neither is tinted */
.home .nav__panel { color: var(--ink); }
/* ---- Centre "Brand. Website. Marketing." in its section (2026-07-25) ---- */
.typestate__t { text-align: center; margin-inline: auto; }
/* ---- Services dropdown: supplied service icons (2026-07-25).
Sized for the menu (not the homepage card size); SEO keeps its inline SVG
and its existing tile styling, so both variants sit on the same baseline. ---- */
.megalink__img { width: 26px; height: 26px; object-fit: contain; display: block; }
/* white plate behind the supplied (white-background) icons; :has() is well
supported now, and without it the icon simply keeps the default tile — no breakage */
.megalink__ico:has(.megalink__img) { background: #fff; border-color: var(--line); padding: 3px; }
.megalink:hover .megalink__ico:has(.megalink__img),
.megalink:focus-visible .megalink__ico:has(.megalink__img) { background: #fff; }
/* ---- Homepage now ends on the type statement (contact section removed
2026-07-25). Give the last section the standard section-bottom rhythm so the
footer follows deliberately, using the existing clamp scale. ---- */
.home main > .typestate:last-of-type { padding-bottom: clamp(3.2rem, 5.5vw, 4.8rem); }
/* =====================================================================
MARKETING PACKAGES PAGE (body.pkg-page) — 2026-07-27 art-direction pass
Five parts: 1 hero · 2 benefits · 3 package frame · 4 custom band ·
5 page calm. Scoped to .pkg-page or to classes used only on
packages.html. Delete a part to revert that section.
===================================================================== */
/* ---- 1. HERO ---- */
.pkg-hero {
padding-block: 0; min-height: 66vh;
display: grid; align-items: center; background: var(--ink);
}
.pkg-hero__media { position: absolute; inset: 0; overflow: hidden; }
.pkg-hero__media img {
display: block; width: 100%; height: 100%;
object-fit: cover; object-position: 62% 38%; /* crop away the flat lower band */
}
.pkg-hero__overlay {
position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.46) 52%, rgba(0,0,0,.3) 100%);
}
.pkg-hero .page-hero__inner {
position: relative; z-index: 1;
max-width: 940px; /* matches .home .hero__copy */
padding-block: clamp(3rem, 7vw, 5rem);
}
/* quiet registration mark: a hairline with a teal tick, set on the copy edge */
.pkg-hero__reg { display: block; width: 84px; height: 1px; background: rgba(255,255,255,.45); position: relative; margin-bottom: 1.6rem; }
.pkg-hero__reg::after { content: ""; position: absolute; left: 0; top: -3px; width: 7px; height: 7px; background: var(--mint); }
.pkg-hero .page-hero__title {
margin-top: 0; color: var(--white);
font-size: clamp(2.3rem, 1rem + 4.6vw, 4.4rem); /* matches .home .hero__title */
text-shadow: 0 1px 14px rgba(0,0,0,.35);
}
.pkg-hero .page-hero__title .ln { display: block; }
.pkg-hero .page-hero__lead {
margin-top: 1.4rem; max-width: 46ch;
color: rgba(255,255,255,.94); text-shadow: 0 1px 10px rgba(0,0,0,.3);
}
.pkg-hero .hero__actions { margin-top: 2rem; gap: .7rem; }
/* compact rectangular hero buttons: 45px, one step above the 41px package CTAs */
.pkg-hero__btn, .shift-hero__btn {
font-family: var(--f-body); font-weight: 600; font-size: .92rem; line-height: 1.15;
padding: .8rem 1.45rem; border-radius: 3px; box-shadow: none;
}
.pkg-hero__btn:hover, .shift-hero__btn:hover { box-shadow: none; transform: translateY(-1px); }
/* a 3px brand bar closes the hero and hands off to the page */
.pkg-hero__edge { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--green) 0 38%, var(--mint) 38% 62%, var(--purple) 62% 100%); }
@media (max-width: 1024px) { .pkg-hero { min-height: 60vh; } }
@media (max-width: 760px) {
.pkg-hero { min-height: 66svh; }
.pkg-hero__overlay { background: rgba(0,0,0,.54); }
.pkg-hero__media img { object-position: 58% 42%; }
.pkg-hero .page-hero__title .ln { display: inline; }
}
/* ---- 2. BENEFITS: heading holds a third, four items in a ruled 2x2 ---- */
.pkg-why__grid {
display: grid; grid-template-columns: minmax(200px, 30%) 1fr;
gap: clamp(1.6rem, 4vw, 3.5rem); align-items: start;
}
.pkg-why__h { font-size: clamp(1.7rem, 1.1rem + 1.9vw, 2.6rem); }
.pkg-why__list {
display: grid; grid-template-columns: repeat(2, 1fr);
border-top: 1px solid var(--ink);
}
.pkg-why__list li {
border-bottom: 1px solid var(--line);
padding: clamp(1.1rem, 2vw, 1.5rem) clamp(1.1rem, 2vw, 1.6rem) clamp(1.2rem, 2.2vw, 1.7rem) 0;
}
.pkg-why__list li:nth-child(even) { padding-left: clamp(1.1rem, 2vw, 1.6rem); padding-right: 0; border-left: 1px solid var(--line); }
.pkg-why__m { display: block; width: 9px; height: 9px; margin-bottom: .85rem; }
.pkg-why__m--a, .pkg-why__m--c { background: var(--green); }
.pkg-why__m--b, .pkg-why__m--d { background: var(--mint); }
.pkg-why__list h3 { font-family: var(--f-body); font-weight: 700; font-size: 1rem; line-height: 1.3; }
.pkg-why__list p { margin-top: .5rem; color: var(--ink-72); font-size: .93rem; line-height: 1.6; }
@media (max-width: 900px) {
.pkg-why__grid { grid-template-columns: 1fr; }
.pkg-why__list { grid-template-columns: 1fr; }
.pkg-why__list li, .pkg-why__list li:nth-child(even) { padding-inline: 0; border-left: 0; }
}
/* ---- 3. PACKAGES: four columns inside one shared frame ---- */
.pkg-head { max-width: 720px; }
/* Four separate boxes: no shared outer frame, no divider-only edges.
Each package carries the same 1px black border the group used to have,
and one shared grid gap does all the spacing. */
.pkgtable {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 24px; align-items: stretch;
}
.pkgtable__col {
position: relative; display: flex; flex-direction: column;
padding: clamp(1.4rem, 2vw, 1.9rem);
border: 1px solid var(--ink); background: var(--surface);
}
/* progression: colour density and name weight rise with the tier */
.pkgtable__rule { position: absolute; top: 0; left: 0; right: 0; height: 4px; } /* sits inside each box border */
.pkgtable__col--1 .pkgtable__rule { background: rgba(58,118,187,.4); }
.pkgtable__col--2 .pkgtable__rule { background: var(--green); }
.pkgtable__col--3 .pkgtable__rule { background: var(--mint); }
.pkgtable__col--4 .pkgtable__rule { background: var(--purple); }
.pkgtable__tier {
font-family: var(--f-body); font-weight: 700; font-size: .72rem;
letter-spacing: .16em; text-transform: uppercase; color: var(--ink-72); margin-top: .4rem;
}
.pkgtable__col--1 .pkgtable__tier { color: var(--ink-72); } /* neutral = quietest tier; --ink-55 was 3.7:1 */
.pkgtable__col--2 .pkgtable__tier { color: var(--green-deep); }
.pkgtable__col--3 .pkgtable__tier { color: #1d7f6c; }
.pkgtable__col--4 .pkgtable__tier { color: #7a4a8e; }
.pkgtable__name {
font-family: var(--f-body); font-size: clamp(1.02rem, .95rem + .3vw, 1.2rem);
letter-spacing: -.015em; line-height: 1.25; margin-top: .7rem; min-height: 2.5em;
}
.pkgtable__col--1 .pkgtable__name, .pkgtable__col--2 .pkgtable__name { font-weight: 600; }
.pkgtable__col--3 .pkgtable__name, .pkgtable__col--4 .pkgtable__name { font-weight: 700; }
.pkgtable__price {
margin-top: .6rem; padding-top: 1rem; border-top: 1px solid var(--line);
font-family: var(--f-body); font-weight: 700; font-size: clamp(1.28rem, 1.1rem + .5vw, 1.55rem);
letter-spacing: -.025em; color: var(--ink);
}
.pkgtable__price span {
display: block; margin-top: .2rem; font-weight: 500; font-size: .73rem;
letter-spacing: .02em; color: var(--ink-72);
}
.pkgtable__for { margin-top: .9rem; color: var(--ink-72); font-size: .9rem; line-height: 1.55; min-height: 4.65em; }
.pkgtable__list {
margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--line);
display: grid; gap: .55rem; margin-bottom: 1.4rem;
}
.pkgtable__list li { position: relative; padding-left: 1rem; font-size: .9rem; color: var(--ink-72); line-height: 1.5; }
.pkgtable__list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; background: var(--ink-38); }
.pkgtable__cta {
margin-top: auto; align-self: flex-start;
font-family: var(--f-body); font-weight: 600; font-size: .86rem; line-height: 1.15;
padding: .68rem 1.15rem; border-radius: 3px; box-shadow: none;
} /* computed height: 21.8px padding + 15.8px line + 3px border = 41px */
.pkgtable__cta:hover { box-shadow: none; background: #305F9A; transform: translateY(-1px); }
.pkg-fine { margin-top: clamp(1rem, 2vw, 1.4rem); font-size: .86rem; line-height: 1.6; color: var(--ink-72); max-width: 68ch; }
.pkg-fine--second { margin-top: .5rem; }
@media (max-width: 1100px) {
.pkgtable { grid-template-columns: repeat(2, 1fr); gap: 20px; }
.pkgtable__name { min-height: 0; }
.pkgtable__for { min-height: 3.1em; }
}
@media (max-width: 620px) {
.pkgtable { grid-template-columns: 1fr; gap: 18px; }
.pkgtable__for { min-height: 0; }
.pkgtable__cta { width: 100%; align-self: stretch; }
}
/* ---- 4. CUSTOM BAND: a fifth option without a fifth price card ---- */
.pkg-band { background: var(--paper-2); color: var(--ink); padding-block: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line-2); } /* soft grey: the footer is --ink and the two would merge */
.pkg-band__grid {
display: grid; grid-template-columns: minmax(220px, 30%) 1fr auto;
gap: clamp(1.2rem, 3vw, 2.4rem); align-items: center;
}
.pkg-band__h { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.25rem, 1rem + .9vw, 1.7rem); line-height: 1.2; }
.pkg-band__copy { color: var(--ink-72); font-size: .95rem; line-height: 1.6; max-width: 52ch; }
.pkg-band__cta {
font-family: var(--f-body); font-weight: 600; font-size: .86rem; line-height: 1.15;
padding: .68rem 1.15rem; border-radius: 3px; box-shadow: none; white-space: nowrap;
}
.pkg-band__cta:hover { box-shadow: none; transform: translateY(-1px); }
@media (max-width: 900px) {
.pkg-band__grid { grid-template-columns: 1fr; align-items: start; }
.pkg-band__cta { justify-self: start; }
}
/* ---- 5. page calm: no scroll-reveal on this page ---- */
.pkg-page .reveal { opacity: 1; transform: none; }
/* =====================================================================
NAVIGATION — even distribution after the Contact link was removed
(2026-07-26). One shared rule; no per-link margins, no absolute
positioning. All four text items already share padding .5rem .85rem
(.nav__menu a and .nav__dropbtn), so the flex gap alone sets rhythm.
===================================================================== */
.nav__menu { gap: .45rem; } /* text-to-text spacing = .45 + .85 + .85 = 2.15rem */
.nav__cta { margin-left: 1.4rem; } /* deliberate larger break before the CTA = 2.7rem */
/* =====================================================================
THE SHIFT PAGE (body.shift-page) — 2026-07-27 art-direction pass
Seven parts: 1 hero · 2 culture statement · 3 Studio Orbit team ·
4 approach · 5 process route · 6 signature field · 7 CTA + calm.
Scoped to .shift-page or to classes used only on the-shift.html.
===================================================================== */
/* ---- 1. HERO: same structure as the homepage, different composition.
The copy block is inset from the left rather than flush and the
registration mark is vertical, so the page does not read as a
clone of Marketing Packages. ---- */
.shift-hero {
padding-block: 0; min-height: 72vh;
display: grid; align-items: end; background: var(--ink);
}
.shift-hero__media { position: absolute; inset: 0; overflow: hidden; }
.shift-hero__media img {
display: block; width: 100%; height: 100%;
object-fit: cover; object-position: 34% 56%;
}
.shift-hero__overlay {
position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(90deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.4) 55%, rgba(0,0,0,.24) 100%);
}
.shift-hero .page-hero__inner {
position: relative; z-index: 1; max-width: none;
padding-block: clamp(3rem, 7vw, 5.5rem);
}
.shift-hero__copy { max-width: 880px; position: relative; padding-left: clamp(0px, 2.5vw, 42px); }
.shift-hero__reg { position: absolute; left: 0; top: .35rem; bottom: .35rem; width: 2px; background: rgba(255,255,255,.35); }
.shift-hero__reg::after { content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 34%; background: var(--mint); }
@media (max-width: 700px) { .shift-hero__reg { display: none; } }
.shift-hero .page-hero__title .ln { display: block; }
@media (max-width: 700px) { .shift-hero .page-hero__title .ln { display: inline; } }
.shift-hero .page-hero__title {
margin-top: 0; color: var(--white);
font-size: clamp(2.3rem, 1rem + 4.6vw, 4.4rem);
text-shadow: 0 1px 14px rgba(0,0,0,.35);
}
.shift-hero .page-hero__lead {
margin-top: 1.3rem; max-width: 44ch;
color: rgba(255,255,255,.94); text-shadow: 0 1px 10px rgba(0,0,0,.3);
}
.shift-hero .hero__actions { margin-top: 2rem; gap: .7rem; }
@media (max-width: 1024px) { .shift-hero { min-height: 62vh; } }
@media (max-width: 760px) {
.shift-hero { min-height: 70svh; align-items: center; }
.shift-hero__overlay { background: rgba(0,0,0,.5); }
.shift-hero__media img { object-position: 42% 48%; }
}
/* ---- 2. OUR TEAM — Claude Design version 2B ----
Recreated as live HTML/CSS from the approved 2B screen. Desktop follows 2B
(1200px reference); below 900px it follows the approved 2C mobile screen.
Approved values kept: #231F20 field, #F0F0F0 text, Libre Baskerville for the
heading and role names, Montserrat for everything else, teal/blue/purple
group accents, 4-3-3-1 people markers, oval portrait, Business Lead last and
quietest. Delete this part to revert the team section. */
.gsteam { background: var(--ink); color: var(--paper); padding-block: clamp(3.2rem, 6vw, 4.5rem); }
/* --- top row: oval portrait + heading, lead and Creative Lead --- */
.gsteam__top {
display: grid; align-items: start;
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas: "portrait intro" "portrait role";
column-gap: clamp(1.6rem, 4vw, 4.5rem);
margin-bottom: clamp(2.4rem, 5vw, 4rem);
}
.gsteam__portrait { grid-area: portrait; }
.gsteam__intro { grid-area: intro; }
.gsteam__role { grid-area: role; }
.gsteam__portrait {
flex: none; width: clamp(118px, 12vw, 154px); aspect-ratio: 154 / 196;
background: #2b2728; border-radius: 50%; overflow: hidden;
display: grid; place-items: center; text-align: center; padding: 1rem;
}
.gsteam__ph {
font-family: var(--f-body); font-size: .72rem; line-height: 1.45;
letter-spacing: .03em; color: rgba(240,240,240,.62);
}
/* once a portrait is in place the oval carries the image edge to edge.
Swapping the illustrated placeholder for a real photograph is a src
change; this rule needs no edit. */
.gsteam__portrait--filled { padding: 0; }
.gsteam__portrait--filled img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.gsteam__intro { padding-top: .5rem; }
.gsteam__mark { display: block; width: 36px; height: 2px; background: var(--mint); margin-bottom: 1.1rem; }
.gsteam__h {
font-family: var(--f-display); font-weight: 700;
font-size: clamp(1.5rem, 1.05rem + 1.35vw, 2.06rem);
line-height: 1.3; letter-spacing: -.005em; color: var(--paper);
max-width: 640px; margin: 0 0 1rem;
}
.gsteam__lead {
margin: 0 0 1.4rem; font-size: .875rem; line-height: 1.65;
color: rgba(240,240,240,.6); max-width: 520px;
}
.gsteam__role { display: flex; align-items: baseline; gap: .875rem; flex-wrap: wrap; }
.gsteam__rolename {
font-family: var(--f-display); font-weight: 700; font-size: 1.25rem;
line-height: 1.2; color: var(--paper); margin: 0;
}
.gsteam__rolerule { flex: none; width: 26px; height: 1px; background: var(--mint); }
.gsteam__roletxt { max-width: 330px; }
.gsteam__roletxt p { margin: 0; font-size: .8125rem; line-height: 1.6; color: rgba(240,240,240,.62); }
.gsteam__roletxt .gsteam__exp { margin-top: .56rem; font-size: .78rem; color: rgba(240,240,240,.58); }
/* --- divider with the purple registration diamond --- */
.gsteam__div { position: relative; height: 1px; background: rgba(240,240,240,.16); }
.gsteam__diamond {
position: absolute; left: -14px; top: -3px;
width: 7px; height: 7px; background: var(--purple); transform: rotate(45deg);
}
/* --- four capability groups, level, ruled, no cards --- */
.gsteam__grid {
display: grid; grid-template-columns: 1.15fr 1fr 1fr .85fr;
gap: clamp(1.4rem, 3vw, 2.5rem);
}
.gsteam__grp {
position: relative; padding: 2.6rem 0 0 1.375rem; box-sizing: border-box;
}
.gsteam__grp::before {
content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%;
background: rgba(240,240,240,.12);
}
.gsteam__grp::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 26px; }
.gsteam__grp--design::after { background: var(--mint); }
.gsteam__grp--mkt::after { background: var(--green); }
.gsteam__grp--dev::after { background: var(--purple); }
.gsteam__grp--biz::after { background: rgba(240,240,240,.3); }
/* people markers: a head and shoulders, no faces, no invented individuals */
.gsteam__people { display: flex; gap: 9px; align-items: flex-end; height: 18px; margin-bottom: 1rem; }
.gsteam__people i { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.gsteam__people i::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.gsteam__people i::after { content: ""; width: 13px; height: 6px; border-radius: 3px 3px 0 0; background: currentColor; }
.gsteam__grp--design .gsteam__people { color: var(--mint); }
.gsteam__grp--design .gsteam__people i::before { width: 9px; height: 9px; }
.gsteam__grp--design .gsteam__people i::after { width: 14px; height: 7px; border-radius: 4px 4px 0 0; }
.gsteam__grp--mkt .gsteam__people { color: var(--green); }
.gsteam__grp--dev .gsteam__people { color: var(--purple); }
.gsteam__grp--biz .gsteam__people { color: rgba(240,240,240,.45); }
.gsteam__gname {
font-family: var(--f-body); font-weight: 600; font-size: 1.25rem;
line-height: 1.25; color: var(--paper); margin: 0 0 .625rem; min-height: 2.75rem;
}
.gsteam__grp--mkt .gsteam__gname, .gsteam__grp--dev .gsteam__gname { font-size: 1.0625rem; }
.gsteam__grp--biz .gsteam__gname { font-size: .9375rem; font-weight: 500; color: rgba(240,240,240,.86); }
.gsteam__gdesc { margin: 0; font-size: .84rem; line-height: 1.6; color: rgba(240,240,240,.6); }
.gsteam__grp--mkt .gsteam__gdesc, .gsteam__grp--dev .gsteam__gdesc { font-size: .8125rem; }
.gsteam__grp--biz .gsteam__gdesc { font-size: .78rem; color: rgba(240,240,240,.5); }
/* --- tablet --- */
@media (max-width: 1100px) {
.gsteam__grid { grid-template-columns: 1fr 1fr; row-gap: clamp(1.8rem, 4vw, 2.6rem); }
.gsteam__gname { min-height: 0; }
}
/* --- mobile: the approved 2C screen. Heading and lead lead, then the
portrait and Creative Lead, then the four groups stacked and ruled. --- */
@media (max-width: 900px) {
/* 2C: heading and lead first, then the portrait beside the Creative Lead */
.gsteam__top {
grid-template-columns: 118px minmax(0, 1fr);
grid-template-areas: "intro intro" "portrait role";
column-gap: 1.25rem; margin-bottom: 2.25rem;
}
.gsteam__intro { padding-top: 0; }
.gsteam__h { max-width: none; }
.gsteam__lead { max-width: none; margin-bottom: 2rem; }
.gsteam__role { display: block; }
.gsteam__rolename { margin-bottom: .75rem; }
.gsteam__rolerule { display: block; margin-bottom: .75rem; }
.gsteam__roletxt { max-width: none; }
.gsteam__portrait { width: 118px; }
.gsteam__div { display: none; }
.gsteam__grid { grid-template-columns: 1fr; gap: 1.625rem; }
.gsteam__grp { padding: 1.25rem 0 0; border-top: 1px solid rgba(240,240,240,.14); }
.gsteam__grp::before, .gsteam__grp::after { content: none; }
}
@media (max-width: 560px) {
.gsteam__top { grid-template-columns: 104px minmax(0, 1fr); column-gap: 1rem; }
.gsteam__portrait { width: 104px; }
}
/* ---- 4. APPROACH: three editorial columns, thin dividers, no cards ---- */
.shift-head { max-width: 760px; }
.shift-approach__h { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem); }
.shift-cols {
display: grid; grid-template-columns: repeat(3, 1fr);
column-gap: clamp(1.4rem, 2.8vw, 2.6rem); row-gap: clamp(1.6rem, 3vw, 2.2rem);
border-top: 1px solid var(--ink);
padding-top: clamp(1.4rem, 2.8vw, 2rem);
}
.shift-cols li { border-left: 1px solid var(--line); padding-left: clamp(1rem, 1.8vw, 1.6rem); }
.shift-cols li:first-child { border-left: 0; padding-left: 0; }
.shift-cols__n { display: block; font-family: var(--f-body); font-weight: 700; font-size: .74rem; letter-spacing: .16em; color: var(--green-deep); margin-bottom: .7rem; } /* --mint was 2.25:1 on --paper */
.shift-cols h3 { font-family: var(--f-body); font-weight: 700; font-size: 1.02rem; line-height: 1.3; }
.shift-cols p { margin-top: .55rem; color: var(--ink-72); font-size: .95rem; line-height: 1.6; }
@media (max-width: 900px) {
.shift-cols { grid-template-columns: 1fr; }
.shift-cols li { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 1.1rem; }
.shift-cols li:first-child { border-top: 0; padding-top: 0; }
}
/* ---- 5. PROCESS: one continuous route with four stops ---- */
.proute {
position: relative; display: grid; grid-template-columns: repeat(4, 1fr);
column-gap: clamp(1.2rem, 2.6vw, 2.4rem); row-gap: clamp(1.6rem, 3vw, 2.2rem);
padding-top: 1.9rem;
}
.proute::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--ink); }
.proute li { position: relative; }
.proute__dot { position: absolute; top: -1.9rem; left: 0; width: 9px; height: 9px; background: var(--green); transform: translateY(-4px); }
.proute li:nth-child(2) .proute__dot { background: var(--mint); }
.proute li:nth-child(3) .proute__dot { background: var(--green); }
.proute li:nth-child(4) .proute__dot { background: var(--purple); }
.proute__n { display: block; font-family: var(--f-body); font-weight: 700; font-size: .74rem; letter-spacing: .16em; color: var(--ink-72); margin-bottom: .5rem; }
.proute h3 { font-family: var(--f-body); font-weight: 700; font-size: 1.05rem; }
.proute p { margin-top: .45rem; color: var(--ink-72); font-size: .95rem; line-height: 1.6; }
@media (max-width: 820px) {
.proute { grid-template-columns: 1fr; padding-top: 0; padding-left: 1.9rem; row-gap: 1.6rem; }
.proute::before { top: .45rem; bottom: .45rem; left: 4px; right: auto; width: 1px; height: auto; }
.proute__dot { top: .45rem; left: -1.9rem; transform: none; }
}
/* ---- 6. SIGNATURE FIELD ----
Soft grey, not near-black: the approved logo artwork is drawn in
#231f20 and would be invisible on a dark plane. */
.shift-sig { background: var(--paper-2); padding-block: clamp(2.6rem, 5vw, 4.5rem); }
.shift-sig__head { max-width: 640px; }
.shift-sig__head .s-title { font-size: clamp(1.7rem, 1.1rem + 1.9vw, 2.6rem); }
.shift-sig__line { margin-top: .9rem; color: var(--ink-72); font-size: 1rem; line-height: 1.6; }
.shift-page .img-slot-band { margin-block: clamp(1.6rem, 3vw, 2.4rem) 0; }
/* ---- 7. CTA + page calm ---- */
.shift-cta .cta__inner { text-align: left; max-width: 820px; margin-inline: 0; }
.shift-cta .cta__copy { margin: 1rem 0 0; }
.shift-cta .hero__actions { margin-top: 2rem; }
.shift-page .reveal { opacity: 1; transform: none; }
/* =====================================================================
SELECTED WORK — homepage image strip (2026-07-26, image-only revision)
A native horizontal scroll container (so touch and trackpad work for
free) holding two identical sets of nine images, with a JS-driven
auto-drift on top. No text, no captions, no controls. Delete this block
plus and the matching js/main.js block to
remove the feature entirely.
===================================================================== */
/* Sits between Services and the pinned image window, so it needs the same
solid background and raised stacking as #services-preview or .freveal's
negative top margin would show through it. */
#selected-work { position: relative; z-index: 2; background: var(--paper); }
/* Text and controls are gone, so the section is now just breathing room
around the strip: enough that it never touches its neighbours, not so
much that it reads as an empty band. */
.swork { padding-block: clamp(2.2rem, 4vw, 3.4rem); overflow: hidden; }
.swork__viewport {
overflow-x: auto; overflow-y: hidden;
scrollbar-width: none; -ms-overflow-style: none;
padding-inline: var(--gutter);
max-width: var(--container-wide); margin-inline: auto;
overscroll-behavior-x: contain;
}
.swork__viewport::-webkit-scrollbar { display: none; }
.swork__track { display: flex; width: max-content; }
.swork__set { display: flex; gap: clamp(1rem, 1.8vw, 1.75rem); padding-right: clamp(1rem, 1.8vw, 1.75rem); }
/* frames: identical width, aspect, crop and corner treatment.
Width, aspect ratio and gap are unchanged from the five-project version. */
.swork__img {
width: clamp(258px, 25vw, 372px); flex: none;
aspect-ratio: 4 / 5; overflow: hidden;
background: var(--paper-2); border-radius: 2px;
}
.swork__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* touch: snap, and show a slice of the next image */
@media (max-width: 900px) {
.swork__viewport { scroll-snap-type: x proximity; }
.swork__img { width: min(74vw, 320px); scroll-snap-align: start; }
}
@media (max-width: 560px) { .swork__img { width: 78vw; } }
/* reduced motion: the drift never starts (handled in JS); the strip stays
a manually scrollable row at the same dimensions */
@media (prefers-reduced-motion: reduce) {
.swork__viewport { scroll-behavior: auto; }
}
/* =====================================================================
GET IN TOUCH PAGE (body.gt-page) — 2026-07-26
Scoped to .gt-page or to classes used only on contact.html. Delete this
block plus contact.html's to revert the page.
===================================================================== */
.gt-intro { padding-bottom: 0; }
.gt-intro__inner { max-width: 720px; }
.gt-page .page-hero__title { margin-top: 0; font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.2rem); }
.gt-page .page-hero__lead { margin-top: 1rem; max-width: 52ch; }
.gt-body { padding-top: clamp(1.8rem, 3.5vw, 2.6rem); }
/* form is visually primary; the contact column is quieter and shorter */
.gt-page .contact-grid { grid-template-columns: 1.45fr .55fr; gap: clamp(2rem, 4vw, 3.5rem); }
.gt-page .form {
background: var(--surface); border: 1px solid var(--line-2);
border-radius: 3px; box-shadow: none;
padding: clamp(1.3rem, 3vw, 2rem);
display: grid; gap: 1.05rem;
}
.gt-page .form > .field { margin-bottom: 0; }
.gt-page .field label {
font-family: var(--f-body); font-weight: 600; font-size: .84rem;
letter-spacing: .01em; margin-bottom: .45rem; color: var(--ink);
}
.gt-page .field input, .gt-page .field select, .gt-page .field textarea {
border-radius: 2px; border-color: var(--line-2); background: var(--white);
padding: .78rem .9rem; font-family: var(--f-body); font-size: .97rem;
}
.gt-page .field textarea { min-height: 150px; }
.gt-page .field input:invalid:not(:placeholder-shown),
.gt-page .field textarea:invalid:not(:placeholder-shown) { border-color: var(--purple); }
/* submit: compact and rectangular, not full width on desktop */
.gt-page .form__submit {
width: auto; justify-self: start; margin-top: .3rem;
border-radius: 2px; box-shadow: none;
font-family: var(--f-body); font-weight: 600; font-size: .9rem; line-height: 1.15;
padding: .68rem 1.35rem;
}
.gt-page .form__submit:hover { box-shadow: none; background: #305F9A; }
.gt-page .form__submit[aria-busy="true"], .gt-page .form__submit:disabled { opacity: .65; cursor: default; }
.form__status { margin: 0; font-family: var(--f-body); font-size: .9rem; padding: .7rem .85rem; border-radius: 2px; }
.form__status--ok { color: #1d6f5e; background: var(--mint-tint); border: 1px solid rgba(42,181,154,.45); }
.form__status--err { color: #7a3f8c; background: var(--purple-tint); border: 1px solid rgba(146,95,167,.45); }
.gt-page .form__note {
margin: 0; text-align: left; font-family: var(--f-body);
font-size: .82rem; color: var(--ink-55); line-height: 1.6;
}
.gt-page .form__note a { color: var(--green-deep); }
/* direct contact: quiet blocks, not cards */
.gt-page .contact-aside { display: grid; gap: clamp(1.4rem, 2.6vw, 2rem); align-content: start; }
.gt-direct, .gt-social { border-top: 2px solid var(--ink); padding-top: 1rem; }
.gt-social { border-top-color: var(--line-2); }
.gt-direct__h { font-family: var(--f-body); font-weight: 700; font-size: .95rem; letter-spacing: -.01em; }
.gt-direct__email { margin-top: .6rem; font-family: var(--f-body); font-weight: 700; font-size: 1.02rem; word-break: break-word; }
.gt-direct__email a { color: var(--green-deep); }
.gt-direct__line { margin-top: .7rem; color: var(--ink-72); font-size: .92rem; line-height: 1.6; }
.gt-social .gt-direct__line { margin-top: .5rem; font-weight: 600; }
.gt-social .gt-direct__line a { color: var(--green-deep); }
/* mobile order: heading, copy, direct email + response time, form, Instagram */
@media (max-width: 860px) {
.gt-page .contact-grid { display: flex; flex-direction: column; gap: clamp(1.6rem, 4vw, 2.2rem); }
.gt-page .contact-aside { display: contents; }
.gt-direct { order: 1; }
.gt-page .form { order: 2; }
.gt-social { order: 3; }
.gt-page .form__submit { width: 100%; justify-self: stretch; }
}
/* =====================================================================
SERVICE PAGES (body.svc-page) — 2026-07-28 refresh
One shared system for all ten service pages: full-bleed image hero,
editorial sections, no cards. Per-page variation comes from an accent
colour (--svc-accent) and which sections run dark. Delete this block
to revert every service page's appearance at once.
===================================================================== */
.svc-page { --svc-accent: var(--green); --svc-on-dark: #8FB4E0; --svc-on-light: #2C588F; }
.svc-page.svc--teal { --svc-accent: var(--mint); --svc-on-dark: #2AB59A; --svc-on-light: #1D7F6C; }
.svc-page.svc--purple { --svc-accent: var(--purple); --svc-on-dark: #C29CD4; --svc-on-light: #7A4A8E; }
/* --svc-accent is used for decorative marks only. Text takes the on-dark or
on-light variant: the raw brand blue and purple are 3.5:1 on --ink and the
raw teal is 2.6:1 on white, none of which clear 4.5:1. */
/* ---- 1. FULL-BLEED HERO ---- */
.svch {
position: relative; overflow: hidden;
padding-block: 0; min-height: 66vh;
display: grid; align-items: end; background: var(--ink);
}
.svch__media { position: absolute; inset: 0; overflow: hidden; }
.svch__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.svch__overlay {
position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(90deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.46) 52%, rgba(0,0,0,.3) 100%);
}
.svch__inner { position: relative; z-index: 1; padding-block: clamp(2.8rem, 6vw, 4.5rem); }
.svch__copy { max-width: 820px; position: relative; padding-left: clamp(0px, 2.2vw, 36px); }
.svch__reg { position: absolute; left: 0; top: .4rem; bottom: .4rem; width: 2px; background: rgba(255,255,255,.3); }
.svch__reg::after { content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 32%; background: var(--svc-accent); }
@media (max-width: 700px) { .svch__reg { display: none; } }
.svch__label {
font-family: var(--f-body); font-weight: 600; font-size: .74rem;
letter-spacing: .18em; text-transform: uppercase; color: var(--svc-on-dark);
margin: 0 0 1rem;
}
.svch__title {
font-family: var(--f-display); font-weight: 700; margin: 0;
font-size: clamp(2.1rem, 1rem + 4.2vw, 3.9rem); line-height: 1.1;
letter-spacing: -.03em; color: var(--white); text-shadow: 0 1px 14px rgba(0,0,0,.35);
}
.svch__lead {
margin: 1.2rem 0 0; max-width: 46ch; font-size: clamp(1rem, .95rem + .3vw, 1.12rem);
line-height: 1.6; color: rgba(255,255,255,.94); text-shadow: 0 1px 10px rgba(0,0,0,.3);
}
.svch__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.9rem; }
.svch__btn {
font-family: var(--f-body); font-weight: 600; font-size: .9rem; line-height: 1.15;
padding: .78rem 1.4rem; border-radius: 3px; box-shadow: none;
}
.svch__btn:hover { box-shadow: none; transform: translateY(-1px); }
@media (max-width: 1024px) { .svch { min-height: 60vh; } }
@media (max-width: 760px) {
.svch { min-height: 66svh; }
.svch__overlay { background: rgba(0,0,0,.54); }
.svch__actions .btn { width: 100%; justify-content: center; }
}
.svch__title, .svcmid__h { text-wrap: pretty; }
/* ---- page calm: no scroll-reveal on service pages ---- */
.svc-page .reveal { opacity: 1; transform: none; }
/* =====================================================================
WIDTH + RHYTHM AUDIT (2026-07-28)
One shared width system so no commercial section reads as a narrow,
isolated block. Appended last so it wins. Delete this block to revert
the width corrections.
===================================================================== */
/* Reading widths. Commercial sections (pricing, packages, deliverables,
problems, team, related services, CTAs) never take a reading width; they
run to the wide container. --w-head matches the homepage .s-head, which
is the agreed scale reference. */
:root { --w-head: 820px; --w-read: 62ch; --w-legal: 74ch; }
/* Section heading blocks: one width everywhere, levelled UP to the
homepage value. Internal pages were previously 720px and 760px, which is
what made their headings read smaller than the homepage. */
.s-head, .shift-head, .pkg-head, .gt-intro__inner { max-width: var(--w-head); }
/* Legal pages keep a comfortable measure, but the heading block and the
body now share one left edge and one width. */
.legal { max-width: var(--w-legal); }
.legal-page .page-hero__inner { max-width: var(--w-legal); }
/* Contact: one contact column rather than two stacked blocks. */
.gt-direct__social { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .92rem; color: var(--ink-72); }
.gt-direct__social a { color: var(--green-deep); font-weight: 600; }
/* Spacing scale. Major editorial sections, standard content sections and
compact integrated sections, so a small block never carries full
major-section padding. */
/* =====================================================================
SERVICE PAGES — one middle section (2026-07-28)
Three visible sections per page: hero, this, footer. Everything the
service needs to say lives inside one as one continuous
composition, not several bands stacked in a wrapper.
Delete this block plus the earlier SERVICE PAGES block to revert.
===================================================================== */
.svcmid { padding-block: clamp(3.6rem, 7.5vw, 7.5rem); } /* 58 - 120px */
.svcmid--light { background: var(--surface); }
.svcmid--grey { background: var(--paper-2); }
.svcmid--dark { background: var(--ink); color: var(--paper); }
/* one grid holds the whole composition, so the parts stay tied together */
.svcmid__grid {
display: grid;
grid-template-columns: minmax(260px, 34%) minmax(0, 1fr);
column-gap: clamp(1.6rem, 4vw, 4rem);
row-gap: 0;
align-items: start;
}
/* top: heading left, overview right */
.svcmid__intro { grid-column: 1; }
.svcmid__rule { display: block; width: 44px; height: 2px; background: var(--svc-accent); margin-bottom: 1.2rem; }
.svcmid__h {
font-family: var(--f-display); font-weight: 700; margin: 0;
font-size: clamp(1.7rem, 1.1rem + 2vw, 2.7rem); line-height: 1.16; letter-spacing: -.025em;
}
.svcmid__ov {
grid-column: 2; margin: 0; max-width: 62ch;
font-size: clamp(1.02rem, .98rem + .3vw, 1.15rem); line-height: 1.75; color: var(--ink-72);
}
/* middle: the two content zones, tied to the same rule line */
.svcmid__cols {
grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr;
column-gap: clamp(1.6rem, 4vw, 4rem); row-gap: clamp(1.8rem, 3vw, 2.4rem);
margin-top: clamp(2.4rem, 5vw, 4rem);
border-top: 1px solid var(--line-2); padding-top: clamp(1.6rem, 3vw, 2.4rem);
}
.svcmid__col--use { border-left: 1px solid var(--line); padding-left: clamp(1.4rem, 3vw, 3rem); }
.svcmid__lab {
font-family: var(--f-body); font-weight: 700; font-size: .76rem;
letter-spacing: .18em; text-transform: uppercase; color: var(--ink-72); margin: 0 0 1.1rem;
}
.svcmid__list { columns: 2; column-gap: clamp(1.2rem, 2.5vw, 2.2rem); }
.svcmid__list li {
break-inside: avoid; padding: .5rem 0; border-bottom: 1px solid var(--line);
font-size: .95rem; line-height: 1.5; color: var(--ink);
}
.svcmid__scope { margin-top: 1.1rem; font-size: .84rem; line-height: 1.6; color: var(--ink-72); }
.svcmid__use { display: grid; gap: 1.15rem; }
.svcmid__use h3 { font-family: var(--f-body); font-weight: 700; font-size: 1rem; line-height: 1.3; margin: 0; }
.svcmid__use p { margin: .35rem 0 0; font-size: .93rem; line-height: 1.6; color: var(--ink-72); }
/* bottom: note, related links, closing line and the single CTA */
.svcmid__foot {
grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto;
column-gap: clamp(1.6rem, 4vw, 4rem); row-gap: 1.4rem; align-items: end;
margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line-2);
padding-top: clamp(1.6rem, 3vw, 2.2rem);
}
.svcmid__note { margin: 0 0 .9rem; font-size: .92rem; line-height: 1.65; color: var(--ink-72); max-width: 68ch; }
.svcmid__note a, .svcmid__rel a { color: var(--svc-on-light); text-decoration: underline; text-underline-offset: 3px; }
.svcmid__rel { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--ink-72); }
.svcmid__close { margin: .7rem 0 0; font-size: clamp(1rem, .96rem + .3vw, 1.12rem); line-height: 1.55; color: var(--ink); max-width: 46ch; }
.svcmid__cta { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.svcmid__all { font-family: var(--f-body); font-weight: 600; font-size: .88rem; color: var(--ink-72); text-decoration: underline; text-underline-offset: 3px; }
.svcmid__all:hover { color: var(--ink); }
/* dark variant, if a page ever uses it */
.svcmid--dark .svcmid__ov, .svcmid--dark .svcmid__use p, .svcmid--dark .svcmid__note,
.svcmid--dark .svcmid__rel, .svcmid--dark .svcmid__scope { color: rgba(240,240,240,.72); }
.svcmid--dark .svcmid__lab { color: rgba(240,240,240,.72); }
.svcmid--dark .svcmid__list li, .svcmid--dark .svcmid__close { color: var(--paper); border-color: rgba(240,240,240,.16); }
.svcmid--dark .svcmid__cols, .svcmid--dark .svcmid__foot { border-color: rgba(240,240,240,.24); }
.svcmid--dark .svcmid__col--use { border-color: rgba(240,240,240,.16); }
.svcmid--dark .svcmid__note a, .svcmid--dark .svcmid__rel a { color: var(--svc-on-dark); }
.svcmid--dark .svcmid__all { color: rgba(240,240,240,.72); }
/* ---- tablet ---- */
@media (max-width: 1000px) {
.svcmid__grid { grid-template-columns: 1fr; }
.svcmid__intro, .svcmid__ov { grid-column: 1; }
.svcmid__ov { margin-top: 1.2rem; max-width: none; }
.svcmid__list { columns: 1; }
}
/* ---- mobile: overview, include, useful, note and links, CTA ---- */
@media (max-width: 720px) {
.svcmid__cols { grid-template-columns: 1fr; }
.svcmid__col--use { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 1.6rem; }
.svcmid__foot { grid-template-columns: 1fr; align-items: start; }
.svcmid__cta { width: 100%; }
.svcmid__cta .btn { flex: 1 1 auto; justify-content: center; }
}
/* =====================================================================
MOBILE PASS (2026-07-28) — touch targets and small-screen safety.
Appended last so it wins. Delete this block to revert.
===================================================================== */
/* Compact buttons sit at 41px, which is under the 44px touch guidance.
They go full width on phones anyway, so lift the height there rather
than making them heavier on desktop. */
@media (max-width: 720px) {
.pkgtable__cta, .gt-page .form__submit, .pkg-band__cta, .svcmid__cta .btn {
padding-block: .82rem; min-height: 44px;
}
}
/* Prices and package names must never force a horizontal scroll. */
.pkgtable__price, .pkgtable__name { overflow-wrap: anywhere; }
/* Long email addresses and URLs in body copy wrap rather than push out. */
.gt-direct__email a, .footer__email a, .aside-email a { overflow-wrap: anywhere; }
/* Belt and braces: nothing inside the page grid may exceed the viewport. */
main img, main svg, main video { max-width: 100%; }
/* =====================================================================
SERVICES OVERVIEW REMOVED (2026-07-28)
The dropdown intro panel lost its "View all services" link, so it no
longer needs the trailing space that link occupied. Single-button CTA
groups keep their left alignment rather than stretching.
===================================================================== */
.nav__mega-intro { align-self: start; }
.nav__mega-copy:last-child { margin-bottom: .2rem; }
/* =====================================================================
TASTE + EMIL PASS (2026-07-29) — packages.html and the-shift.html ONLY
Every rule below is scoped to body.pkg-page or body.shift-page.
TO REVERT EVERYTHING: delete this entire block. Nothing else depends on it.
Brand tokens, fonts, colours, prices, package names and the scattered
logo animation are untouched by design.
===================================================================== */
/* --- 1. Press feedback (Emil: buttons must feel responsive) -----------
The stylesheet had ZERO :active states. A press produced no acknowledgement.
140ms is inside Emil's 100-160ms band for press feedback. Own transition
declaration so it does not fight the .btn hover transition. */
body.pkg-page .btn,
body.shift-page .btn {
transition: transform 140ms cubic-bezier(.16, 1, .3, 1),
background var(--t-fast) var(--ease),
box-shadow var(--t-fast) var(--ease),
color var(--t-fast) var(--ease),
border-color var(--t-fast) var(--ease);
}
body.pkg-page .btn:active,
body.shift-page .btn:active { transform: scale(.97); }
/* Text links get a lighter press than buttons: they have less mass. */
body.pkg-page .pkg-why__link:active,
body.shift-page .shift-cols__link:active { opacity: .62; }
/* --- 2. Hover gating (Emil: touch devices fire hover on tap) ---------- */
@media (hover: hover) and (pointer: fine) {
body.pkg-page .pkgtable__col:hover .pkgtable__name,
body.shift-page .gsteam__node:hover { transition: color 200ms var(--ease); }
}
/* --- 3. Tier enumeration retired (taste skill: no section-number
eyebrows; eyebrow count was 4 against an allowance of 2 for a
4-section page). The per-package colour cue is KEPT, moved to a
3px top edge on each box so the boxes stay differentiated without
counting themselves.
TO REVERT: delete rules 3a and 3b. The labels are hidden, not deleted,
so the words "Tier 01".."Tier 04" come straight back. */
body.pkg-page .pkgtable__tier { display: none; } /* 3a */
body.pkg-page .pkgtable__col { border-top-width: 3px; } /* 3b */
body.pkg-page .pkgtable__col--1 { border-top-color: var(--ink); }
body.pkg-page .pkgtable__col--2 { border-top-color: var(--green-deep); }
body.pkg-page .pkgtable__col--3 { border-top-color: #1d7f6c; }
body.pkg-page .pkgtable__col--4 { border-top-color: #7a4a8e; }
/* --- 4. Reduced motion: remove the movement, keep the colour feedback
(Emil: reduced motion means gentler, not zero) ---------------------- */
@media (prefers-reduced-motion: reduce) {
body.pkg-page .btn:active,
body.shift-page .btn:active { transform: none; }
body.pkg-page .btn,
body.shift-page .btn { transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
}
/* =====================================================================
FULL AUDIT PASS (2026-07-29) — site-wide. TO REVERT: delete this block.
===================================================================== */
/* Brand rule: no pill buttons. .btn carried border-radius:999px on all 17
pages while package CTAs were already 3px. Unified to 3px. */
.btn { border-radius: 3px; }
/* Press feedback, site-wide (140ms sits in the 100-160ms band). */
.btn {
transition: transform 140ms var(--ease-out),
background var(--t-fast) var(--ease),
box-shadow var(--t-fast) var(--ease),
color var(--t-fast) var(--ease),
border-color var(--t-fast) var(--ease);
}
.btn:active { transform: scale(.97); }
@media (hover: none) { .btn:hover { box-shadow: none; } }
@media (prefers-reduced-motion: reduce) {
.btn { transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.btn:active { transform: none; }
}
/* =====================================================================
ACCESSIBILITY + PERFORMANCE PASS (2026-07-29). TO REVERT: delete block.
White on brand teal #2AB59A = 2.57:1 and fails even large-text AA.
Brand teal preserved; the label darkens instead:
ink on #2AB59A = 6.35:1, ink on hover #23a189 = 5.07:1. Both pass AA.
===================================================================== */
.btn--mint { color: var(--ink); }
.btn--mint:hover { color: var(--ink); }
.btn--mint .arr { color: currentColor; }
/* =====================================================================
CONSISTENCY + TYPOGRAPHY PASS (2026-07-30). TO REVERT: delete block.
===================================================================== */
/* Packages hero was centred because .page-hero__inner set max-width:940px
on the element carrying .container (which has margin-inline:auto), so the
whole block centred: copy began at x=308px vs x=58px elsewhere at 1440px.
Mirrors the pattern .shift-hero already uses. */
.pkg-hero .page-hero__inner { max-width: none; text-align: left; }
.pkg-hero .page-hero__title { max-width: 880px; margin-inline: 0; }
.pkg-hero .page-hero__lead { max-width: 46ch; margin-inline: 0; }
.pkg-hero .hero__actions { justify-content: flex-start; }
.pkg-hero__reg { margin-inline: 0; }
.page-hero .page-hero__inner { text-align: left; }
.page-hero .page-hero__title,
.page-hero .page-hero__lead { margin-inline: 0; }
.gsteam__br { display: inline; }
h1, h2, h3,
.page-hero__title, .s-head h2, .gsteam__h, .pkgtable__name,
.svcmid__h, .proute__t, .shift-cols__h, .cta__title { text-wrap: balance; }
p, li, .page-hero__lead, .s-lead, .pkgtable__desc, .pkg-fine { text-wrap: pretty; }
.btn { white-space: nowrap; }
@media (max-width: 380px) { .btn { white-space: normal; } }
.pkgtable__price, .frow__price { white-space: nowrap; }
/* Service hero H1 scale crossed the packages/shift curve (3.2px smaller at
1440px but 1.6px larger at 390px). Unified. Contact keeps its own smaller
scale deliberately: form page, no image hero, different composition. */
.svc-page .page-hero__title { font-size: clamp(2.3rem, 1rem + 4.6vw, 4.4rem); }
/* =====================================================================
HOMEPAGE VIDEO SWAP (2026-07-30). TO REVERT: delete this block.
Hero poster rules only. The lower What We Do video was removed on
2026-07-30; the hero clip itself was later replaced (see 2026-07-30e).
===================================================================== */
.hero--video .hero__vid video { background: url("../img/herovideo-poster.jpg") center / cover no-repeat; }
@media (prefers-reduced-motion: reduce) {
.hero--video .hero__vid { background: url("../img/herovideo-poster.jpg") center / cover no-repeat var(--ink); }
}
/* What We Do returns to copy + checklist, two columns, original proportions. */
.wwd2 { grid-template-columns: 1.05fr .95fr; align-items: center; }
.wwd2__copy { display: block; }
.wwd2__list { margin-top: 0; }
@media (max-width: 920px) {
.wwd2 { grid-template-columns: 1fr; gap: 1.8rem; }
.wwd2__list { margin-top: .4rem; }
}
/* =====================================================================
THE SHIFT REWORK + SERVICE TICKS (2026-07-30). TO REVERT: delete block.
===================================================================== */
/* 1. Service pages: the homepage tick, same asset, size and colour. */
.svcmid__list li { display: flex; align-items: flex-start; gap: .7rem; }
.svcmid__check { width: 20px; height: 20px; flex: none; margin-top: .16em; color: var(--mint); }
/* 4. Process without numbers: sequence reads from the shared top rule and
column order. Overrides the earlier .proute dot/counter treatment. */
.proute { padding-top: 0; }
.proute::before { content: none; }
.proute > li { position: relative; padding-top: 1.4rem; border-top: 1px solid var(--line-2); }
.proute > li::before { content: ""; position: absolute; left: 0; top: -1px; width: 34px; height: 3px; background: var(--green); }
.proute > li:nth-child(2)::before { background: var(--mint); }
.proute > li:nth-child(3)::before { background: var(--purple); }
.proute > li:nth-child(4)::before { background: var(--green-deep); }
.proute h3 { font-family: var(--f-display); font-weight: 700; font-size: 1.22rem; margin: 0 0 .5rem; }
.proute p { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--ink-72); }
.proute__dot { display: none; }
@media (max-width: 900px) { .proute { grid-template-columns: repeat(2, 1fr); row-gap: 1.9rem; } }
@media (max-width: 560px) { .proute { grid-template-columns: 1fr; row-gap: 1.5rem; } }
@media (max-width: 820px) {
.proute { padding-left: 0; }
.proute > li { padding-top: 1.2rem; }
}
/* =====================================================================
THE SHIFT: OUR APPROACH + CULTURE (2026-07-30b)
TO REVERT: delete this block and restore the-shift.html from backup.
===================================================================== */
/* --- Our Approach: heading and direct-relationship message across the top */
.clead__head { max-width: var(--w-head); }
.clead__h {
font-family: var(--f-display); font-weight: 700;
font-size: clamp(1.9rem, 1.15rem + 2.4vw, 3.1rem);
line-height: 1.2; letter-spacing: -.015em; margin: .5rem 0 0;
}
.clead__lead { margin: 1.2rem 0 0; font-size: 1.06rem; line-height: 1.7; color: var(--ink-72); max-width: 66ch; }
/* --- Portrait + biography ------------------------------------------- */
.clead__body {
display: grid; grid-template-columns: auto minmax(0, 1fr);
gap: clamp(1.8rem, 4vw, 3.4rem); align-items: start;
}
.clead__portrait {
margin: 0; width: clamp(220px, 22vw, 290px); aspect-ratio: 29 / 38;
border-radius: 50%; overflow: hidden; /* refined vertical oval */
background: var(--paper-2); flex: none;
}
/* Source is a full-length 560x831 frame with the face in the upper third.
cover alone would show head to hip, so the image is scaled from a high
origin to bring head and shoulders up as the focal content. */
.clead__portrait img {
display: block; width: 100%; height: 100%;
object-fit: cover; object-position: 50% 0%;
}
.clead__role {
font-family: var(--f-body); font-weight: 700; font-size: .74rem;
letter-spacing: .16em; text-transform: uppercase; color: var(--ink-72);
margin: 0 0 1rem;
}
.clead__bio p + p { margin-top: 1rem; }
.clead__bio p:not(.clead__role) { font-size: 1rem; line-height: 1.75; color: var(--ink-72); max-width: 62ch; }
@media (max-width: 860px) {
.clead__body { grid-template-columns: 1fr; gap: clamp(1.4rem, 4vw, 2rem); }
.clead__portrait { width: clamp(190px, 46vw, 240px); }
.clead__band { margin-right: 0; } /* contained band on mobile, no bleed */
}
/* --- Culture: soft-grey plane, wide editorial split ------------------ */
.culture { background: var(--paper-2); }
.culture__grid {
display: grid; grid-template-columns: minmax(220px, 30%) minmax(0, 1fr);
gap: clamp(1.6rem, 4vw, 4rem); align-items: start;
}
.culture__h {
font-family: var(--f-display); font-weight: 700;
font-size: clamp(1.7rem, 1.1rem + 1.9vw, 2.6rem);
line-height: 1.24; margin: .5rem 0 0;
}
.culture__body p { margin: 0; font-size: 1.02rem; line-height: 1.75; color: var(--ink-72); max-width: 64ch; }
.culture__body p + p { margin-top: 1.1rem; }
.culture__pull {
font-family: var(--f-display); font-weight: 700;
font-size: clamp(1.12rem, 1rem + .55vw, 1.42rem) !important;
line-height: 1.45 !important; color: var(--ink) !important;
padding-left: 1.15rem; border-left: 3px solid var(--green);
margin-top: 1.4rem !important;
}
@media (max-width: 860px) {
.culture__grid { grid-template-columns: 1fr; gap: 1.4rem; }
}
.culture__head { min-width: 0; }
/* =====================================================================
INTRO, SCROLL REVEALS, PORTRAIT + SPACING (2026-07-30c)
TO REVERT: delete this block and the matching js/main.js section.
===================================================================== */
/* ---------- 2. Scroll reveals -------------------------------------- */
/* Content is visible by default. Only once JS confirms support does it
arm the hidden state, so a no-JS visitor sees everything normally. */
.js-reveal [data-reveal],
.js-reveal [data-reveal-group] > * {
opacity: 0; transform: translateY(16px);
transition: opacity 560ms cubic-bezier(.16,1,.3,1), transform 560ms cubic-bezier(.16,1,.3,1);
}
.js-reveal [data-reveal].is-in,
.js-reveal [data-reveal-group] > .is-in { opacity: 1; transform: none; }
.js-reveal [data-reveal-group] > * { transition-delay: calc(var(--i, 0) * 70ms); }
@media (prefers-reduced-motion: reduce) {
.js-reveal [data-reveal],
.js-reveal [data-reveal-group] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* ---------- 3. Portrait: horizontal centring only ------------------
object-position X is inert here: the source (560x831, ratio .674) is a
narrower ratio than the 29/38 oval, so cover scales by WIDTH and leaves
no horizontal overflow to reposition. The zoom transform is what creates
horizontal room, so the correction is a translateX on that transform.
Measured: subject centre sits at ~42-44% of frame width against a 50%
frame centre, i.e. 6-8% left. translateX(8%) moves the frame right by
8%/1.32 = 6.1% of image width. VERTICAL IS UNCHANGED: object-position Y
stays 0% and transform-origin Y stays 16%. */
.clead__portrait img {
object-position: 50% 0%;
transform: translateX(5%) scale(1.32);
transform-origin: 50% 16%;
}
/* ---------- 4. Banner: blue band with a teal offset edge ------------ */
.clead__band {
position: relative;
margin: clamp(1.6rem, 3vw, 2.4rem) 0 clamp(1.8rem, 3.5vw, 2.8rem);
margin-right: calc(var(--gutter) * -1); /* never 100vw: cannot scroll */
background: var(--green);
padding: clamp(.95rem, 1.9vw, 1.35rem) clamp(1.15rem, 2.4vw, 2rem);
border-radius: 6px 0 0 6px; /* slight left radius, square right */
}
/* the "shift": a thin teal strip stepped off the lower edge */
.clead__band::after {
content: ""; position: absolute; left: 6px; right: 0; bottom: -5px; height: 5px;
background: var(--mint); border-radius: 0 0 0 3px;
}
.clead__band__tx {
margin: 0; font-family: var(--f-body); font-weight: 600;
font-size: clamp(.95rem, .88rem + .3vw, 1.12rem);
line-height: 1.5; color: var(--white); max-width: 44ch;
}
@media (max-width: 860px) {
.clead__band { margin-right: 0; border-radius: 6px; }
.clead__band::after { right: 6px; border-radius: 0 0 3px 3px; }
}
/* ---------- 5. Spacing: Our Approach -> A Clear Process -------------
CAUSE: .clead used .section (--section-y = 72-144px) while #process uses
.section--tight (48-80px), so adjacent padding stacked to ~224px.
Fixed at source by trimming the two paddings, not with negative margin.
Desktop total 56+40 = 96px. Mobile 40+24 = 64px. */
.shift-page .clead { padding-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.shift-page #process { padding-top: clamp(1.5rem, 2.6vw, 2.5rem); }
/* ---------- 6. Spacing: Culture -> shattered logo -------------------
The removed statement took .shift-sig__head with it, so the band's old
top margin now separates nothing. Desktop 56+40 = 96px, mobile 40+32. */
.shift-page .culture { padding-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.shift-sig { padding-block: clamp(2rem, 3.5vw, 2.5rem) clamp(2.6rem, 5vw, 4.5rem); }
.shift-page .img-slot-band { margin-block: 0; }
/* =====================================================================
INTRO v2 + TICK-LIST REVEAL (2026-07-30d)
TO REVERT: delete this block and the matching js/main.js timings.
===================================================================== */
/* ---------- 1. Intro: ticks assemble, then the wordmark flashes in ----
The ![]()
is the complete approved logo (wordmark AND its ticks). The
inline SVG carries copies of the two real tick polygons at their exact
logo coordinates in the same viewBox, so when the wordmark flashes in
the shapes coincide precisely and the handoff is invisible.
TIMELINE ticks 0-420ms | wordmark flash 440-620ms | hold 620-1020ms
exit 1020-1270ms => overlay gone at ~1.27s */
.gsintro {
position: fixed; inset: 0; z-index: 9999;
display: grid; place-items: center;
background: #141112;
pointer-events: none; /* never blocks links */
animation: gsintro-out 250ms cubic-bezier(.16,1,.3,1) 1020ms both;
}
.gsintro__stage { position: relative; width: min(46vw, 340px); aspect-ratio: 696.45 / 225.96; }
.gsintro__logo,
.gsintro__ticks { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* wordmark: hidden while the ticks travel, then one brief flash to solid */
.gsintro__logo { opacity: 0; animation: gsintro-word 180ms steps(1,end) 440ms forwards; }
/* ticks: independent paths, no crossover. The teal tick rests LEFT of the
blue one in the real logo, so teal comes from the left and blue from the
right; sending blue from the left would drag it across teal. */
.gsintro__tick { opacity: 0; }
.gsintro__tick--teal { animation: gsintro-tick-teal 420ms cubic-bezier(.22,.9,.28,1) both; }
.gsintro__tick--blue { animation: gsintro-tick-blue 420ms cubic-bezier(.22,.9,.28,1) 60ms both; }
/* once the full logo is solid the temporary ticks retire behind it */
.gsintro__ticks { animation: gsintro-ticks-off 1ms linear 640ms forwards; }
@keyframes gsintro-tick-teal {
0% { opacity: 0; transform: translate(-150px, -48px) }
55% { opacity: 1 }
88% { transform: translate(4px, 2px) } /* small settle, no bounce */
100% { opacity: 1; transform: translate(0, 0) }
}
@keyframes gsintro-tick-blue {
0% { opacity: 0; transform: translate(150px, 40px) }
55% { opacity: 1 }
88% { transform: translate(-4px, -2px) }
100% { opacity: 1; transform: translate(0, 0) }
}
@keyframes gsintro-word {
0% { opacity: 0 }
40% { opacity: 1 }
60% { opacity: .35 } /* one restrained flicker */
100% { opacity: 1 }
}
@keyframes gsintro-ticks-off { to { opacity: 0 } }
@keyframes gsintro-out { to { opacity: 0; visibility: hidden } }
.gsintro.is-done { display: none; }
@media (prefers-reduced-motion: reduce) {
.gsintro { animation: gsintro-out 180ms linear 620ms both; }
.gsintro__logo { opacity: 1; animation: none; } /* static, readable */
.gsintro__ticks { display: none; } /* no travel, no flicker */
}
/* ---------- 2. Tick lists: reveal top to bottom ---------------------
Applies ONLY to lists using the approved checkmark_icon.svg tick:
.wwd2__list (homepage) and .svcmid__list (ten service pages).
Packages lists use a square ::before marker and are deliberately excluded.
Items start ABOVE their resting position and drop into place, so the
list assembles downward the way a list reads. */
.js-reveal [data-tick-list] > li {
opacity: 0; transform: translateY(-11px);
transition: opacity 620ms cubic-bezier(.16,1,.3,1), transform 620ms cubic-bezier(.16,1,.3,1);
transition-delay: calc(var(--i, 0) * 110ms);
}
.js-reveal [data-tick-list] > li.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.js-reveal [data-tick-list] > li {
opacity: 1 !important; transform: none !important; transition: none !important;
}
}
/* =====================================================================
HERO VIDEO -> HeroVideo.mp4 + VIEWPORT-HEIGHT HERO (2026-07-30e)
TO REVERT: delete this block; restore the hero