:root {
/* Brand palette (from the logo) */
--blue: #2f93e8;
--blue-deep: #1f6fc0;
--amber: #f5a01a;
--amber-deep: #d9851a;
--navy: #15263b;
--teal: #28c2b2;
--teal-deep: #0c7f72;
/* Warm "drawing paper" neutrals — shifted warm so it reads crafted, not techy-cold */
--paper: #f1ede3;
--paper-2: #fbf9f3;
--ink: #15263b;
--ink-soft: #5d6878;
--line: #d9d2c2; /* warm ruled-line colour */
--line-strong: #c3bba6;
/* Action colour = blue */
--action: var(--blue);
--action-deep: var(--blue-deep);
--radius: 14px;
--font-head: "Plus Jakarta Sans", system-ui, sans-serif;
--font-body: "Hanken Grotesk", system-ui, sans-serif;
--mono: "Space Mono", monospace;
--maxw: 1160px;
}
* { box-sizing: border-box; }
/* clip horizontal overflow on the ROOT scroller (mobile scrolls , not , so
clipping body alone doesn't stop the page drifting sideways). clip (not hidden) keeps
the sticky nav working; overflow-y stays visible so vertical scroll is untouched. */
/* No background on html: leaving it transparent lets the BODY background propagate
to the canvas on desktop browsers, so the two-tone overscroll (below) works there
too. iOS ignores html for the rubber-band and samples the body directly. */
html { scroll-behavior: smooth; overflow-x: clip; }
body {
margin: 0; color: var(--ink);
/* Navy body = one-colour rubber-band overscroll, navy top and bottom (iOS samples
the body background for the bounce). The paper "drawing board" lives on .page,
whose top edge blends down from this same navy — so the top bounce dissolves into
the page instead of meeting a hard navy/paper line. */
background-color: var(--navy);
font-family: var(--font-body); font-size: 17px; line-height: 1.55;
-webkit-font-smoothing: antialiased; overflow-x: clip; overscroll-behavior-x: none;
}
/* The paper "drawing board" + faint engineering grid live on the content wrapper,
NOT the body. iOS Safari samples the BODY background for the rubber-band overscroll
(it ignores html), so a navy body is the only way to make the footer bleed off-screen
at the bottom. The navy top overscroll then matches the navy browser bar, framing the
paper content. The wrapper covers header + main; the footer is navy on the navy body. */
.page {
background-color: var(--paper);
background-image:
/* top edge starts navy (matching the rubber-band) and blends down into the paper
within ~150px, so the top overscroll dissolves into the page behind the navbar */
linear-gradient(to bottom, var(--navy), var(--paper) 150px),
linear-gradient(rgba(21,38,59,.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(21,38,59,.035) 1px, transparent 1px);
background-size: 100% 150px, 26px 26px, 26px 26px;
background-repeat: no-repeat, repeat, repeat;
background-position: top, top left, top left;
}
h1, h2, h3 { font-family: var(--font-head); margin: 0; line-height: 1.04; letter-spacing: -0.018em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: var(--amber); color: var(--navy); }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
/* ── spec label: the reclaimed "eyebrow" — a deliberate drawing annotation,
not slapped on every section. Mono, with a leading amber tick. ── */
.spec {
font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--ink-soft); display: inline-flex; align-items: center; gap: 10px;
}
.spec::before { content: ""; width: 22px; height: 2px; background: var(--amber); flex: none; }
/* ── buttons ── */
.btn {
display: inline-flex; align-items: center; gap: 9px; cursor: pointer; white-space: nowrap;
font-family: var(--font-head); font-weight: 700; font-size: 16px;
padding: 14px 22px; border-radius: 10px; border: 2px solid var(--action);
background: var(--action); color: #fff;
box-shadow: inset 0 1px 0 rgba(255,255,255,.28),
0 6px 18px rgba(47,147,232,.28), 0 2px 5px rgba(0,0,0,.14);
position: relative;
transition: transform .14s ease, box-shadow .14s ease, background .14s ease, color .14s ease;
}
.btn:active { transform: translateY(1px); }
/* gradient bevel: overlays the solid border with light-top / dark-bottom chamfer */
.btn::after {
content: ""; position: absolute; inset: -2px; border-radius: 12px;
border: 2px solid transparent;
background: transparent padding-box,
linear-gradient(to bottom, rgba(255,255,255,.45) 0%, rgba(0,0,0,.28) 100%) border-box;
pointer-events: none;
}
/* inner frosted surface: catch-light on the top half */
.btn::before {
content: ""; position: absolute; inset: 1px 2px 50% 2px; border-radius: 7px;
background: linear-gradient(to bottom, rgba(255,255,255,.2), transparent);
filter: blur(0.5px); pointer-events: none;
}
.btn-primary {
background: var(--action); color: #fff;
box-shadow: inset 0 1px 0 rgba(255,255,255,.28),
0 6px 18px rgba(47,147,232,.28), 0 2px 5px rgba(0,0,0,.14);
}
.btn-primary:hover {
background: var(--action-deep);
box-shadow: inset 0 1px 0 rgba(255,255,255,.2),
0 10px 26px rgba(47,147,232,.36), 0 3px 7px rgba(0,0,0,.18);
transform: translateY(-2px);
}
.btn-ghost {
background: var(--ink); color: var(--paper); border-color: var(--ink);
box-shadow: inset 0 1px 0 rgba(255,255,255,.16),
0 6px 18px rgba(21,38,59,.24), 0 2px 5px rgba(0,0,0,.14);
}
.btn-ghost:hover {
background: var(--blue-deep); border-color: var(--blue-deep); color: #fff;
box-shadow: inset 0 1px 0 rgba(255,255,255,.2),
0 10px 26px rgba(47,147,232,.3), 0 3px 7px rgba(0,0,0,.18);
transform: translateY(-2px);
}
.btn-amber {
background: var(--amber); border-color: var(--amber); color: var(--navy);
box-shadow: inset 0 1px 0 rgba(255,255,255,.45),
0 6px 18px rgba(245,160,26,.32), 0 2px 5px rgba(0,0,0,.12);
}
.btn-amber:hover {
background: var(--amber-deep); border-color: var(--amber-deep);
box-shadow: inset 0 1px 0 rgba(255,255,255,.3),
0 10px 26px rgba(245,160,26,.4), 0 3px 7px rgba(0,0,0,.15);
transform: translateY(-2px);
}
.btn-teal {
background: var(--teal); border-color: var(--teal); color: var(--navy);
box-shadow: inset 0 1px 0 rgba(255,255,255,.4),
0 6px 18px rgba(14,194,178,.28), 0 2px 5px rgba(0,0,0,.12);
}
.btn-teal:hover {
background: var(--teal-deep); border-color: var(--teal-deep); color: #fff;
box-shadow: inset 0 1px 0 rgba(255,255,255,.2),
0 10px 26px rgba(14,194,178,.35), 0 3px 7px rgba(0,0,0,.15);
transform: translateY(-2px);
}
/* ── nav ── */
header.nav { position: sticky; top: 0; z-index: 50; padding: 12px 16px; }
.nav-in {
display: flex; align-items: center; justify-content: space-between;
height: 68px; padding: 0 14px 0 22px; border-radius: 12px;
background: var(--paper-2); /* fallback for browsers without color-mix (older iOS WebKit) */
background: color-mix(in oklab, var(--paper-2) 86%, transparent);
-webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
border: 2px solid var(--ink); box-shadow: 0 8px 20px -5px rgba(21,38,59,.30), 0 2px 5px rgba(21,38,59,.14);
}
.logo { display: flex; align-items: center; gap: 14px; -webkit-tap-highlight-color: transparent; }
.logo .logo-mark { height: 48px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a.minor { font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--ink-soft); }
.nav-links a.minor:hover { color: var(--ink); }
.nav-cta { padding: 8px 12px 6px; font-size: 13px; line-height: 1; transform: translateY(-2px); }
.nav-cta:hover { transform: translateY(-4px); }
/* ── hero ──────────────────────────────────────────────────────────
Light "drawing board": copy left, REAL work (live AWGas laptop) right,
framed like a spec with amber registration ticks. No dark gradient. */
.hero { position: relative; padding: 54px 0 64px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 56px; align-items: center; }
/* Extruded "solid block" headline — chiselled navy letters lifted off a stepped blue
edge, on the warm paper. The accent phrase extrudes in amber off a bronze edge, so the
brand colour is baked into the lettering (and it suits the "built, solid" theme). */
.hero h1 {
font-size: clamp(38px, 5.4vw, 62px); font-weight: 900; color: var(--blue);
margin-top: 18px; letter-spacing: -0.02em; text-wrap: balance;
text-shadow:
1px 1px 0 #1f6fc0,
2px 2px 0 #17436f,
3px 3px 0 #0f2c4a,
4px 4px 0 #0a1c30,
5px 9px 16px rgba(8,18,33,.35);
}
.hero h1 em {
font-style: normal; color: var(--amber);
text-shadow:
1px 1px 0 #b9700f,
2px 2px 0 #9c5d0c,
3px 3px 0 #844e0a,
4px 4px 0 #6c3f08,
5px 9px 16px rgba(21,38,59,.30);
}
/* Kinetic drop-in for the hero headline — each word rises into place on load.
Mirrors the k-hero effect on whats-included; shared here so both pages use it. */
.kword { display: inline-block; opacity: 0; transform: translateY(.6em);
animation: kdrop .6s cubic-bezier(.23,.7,.32,1.15) forwards; }
@keyframes kdrop { to { opacity: 1; transform: none; } }
.hero .lede { font-size: 19px; color: var(--ink-soft); margin-top: 22px; max-width: 32em; }
.hero-cta { display: flex; gap: 13px; margin-top: 28px; flex-wrap: wrap; }
/* promises as a "spec ticklist" — ruled box, like a checked-off job sheet */
.promises {
margin-top: 30px; border: 2px solid var(--ink); border-radius: 12px; background: var(--paper-2);
box-shadow: 5px 6px 0 rgba(21,38,59,.10); overflow: hidden; max-width: 440px;
}
.promises .row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; font-weight: 600; font-size: 15px; }
.promises .row + .row { border-top: 1.5px dashed var(--line-strong); }
.promises .mk { width: 22px; height: 22px; border-radius: 6px; background: var(--amber); color: var(--navy); display: grid; place-items: center; font-size: 13px; font-weight: 900; flex: none; }
/* hero artwork: the laptop sits in a "drawing frame" with corner registration ticks.
A soft ambient glow behind it keeps the laptop from sitting flat on the grid paper —
same blue the laptop's own drop-shadow already extrudes in, just diffused wider. */
.hero-art { position: relative; }
.hero-art::before {
content: ""; position: absolute; inset: -15% -8% -6%; z-index: -1;
background: radial-gradient(58% 62% at 50% 42%, rgba(47,147,232,.16), transparent 72%);
pointer-events: none;
}
.frame { position: relative; padding: 14px; transition: transform .28s ease; }
.hero-art:hover .frame { transform: translateY(-5px); }
.hero-art:hover .laptop-body { filter: drop-shadow(9px 12px 0 rgba(47,147,232,.4)); }
.laptop-body { transition: filter .28s ease; }
.frame::before, .frame::after { content: ""; position: absolute; width: 16px; height: 16px; pointer-events: none; }
.frame::before { top: 0; left: 0; border-top: 3px solid var(--amber); border-left: 3px solid var(--amber); }
.frame::after { top: 0; right: 0; border-top: 3px solid var(--amber); border-right: 3px solid var(--amber); }
.frame .tick-bl { position: absolute; bottom: 0; left: 0; width: 16px; height: 16px; border-bottom: 3px solid var(--amber); border-left: 3px solid var(--amber); pointer-events: none; }
.frame .tick-br { position: absolute; bottom: 0; right: 0; width: 16px; height: 16px; border-bottom: 3px solid var(--amber); border-right: 3px solid var(--amber); pointer-events: none; }
.hero-cap { margin-top: 14px; text-align: center; }
.hero-badge {
position: absolute; top: -14px; right: -10px; z-index: 3; background: var(--navy); color: #fff;
border-radius: 11px; padding: 9px 14px; transform: rotate(2.5deg); box-shadow: 4px 5px 0 var(--amber);
}
.hero-badge .big { font-family: var(--font-head); font-weight: 900; font-size: 15px; display: flex; align-items: center; gap: 7px; letter-spacing: .04em; }
.hero-badge .sm { font-size: 11px; color: #b9c6d6; font-weight: 600; }
/* pulsing "on air" dot — the universal sign the thing is really live */
.hero-badge .dot {
width: 9px; height: 9px; border-radius: 50%; background: #34d27b; flex: none;
box-shadow: 0 0 0 0 rgba(52,210,123,.55); animation: livepulse 2s ease-out infinite;
}
@keyframes livepulse {
0% { box-shadow: 0 0 0 0 rgba(52,210,123,.55); }
70% { box-shadow: 0 0 0 9px rgba(52,210,123,0); }
100% { box-shadow: 0 0 0 0 rgba(52,210,123,0); }
}
/* ── trades band (hazard-tape marquee) ── */
/* full-bleed by being a normal full-width block — NOT 100vw, which includes the scrollbar
width and lets the whole page be dragged sideways a few pixels */
.marquee { background: var(--navy); color: #fff; overflow: hidden; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.marquee .track { display: inline-flex; white-space: nowrap; will-change: transform; animation: scroll 30s linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
@keyframes scroll { to { transform: translateX(-50%); } }
.marquee .item { font-family: var(--font-head); font-weight: 800; font-size: 18px; text-transform: uppercase; letter-spacing: 0.03em; padding: 14px 0; display: inline-flex; align-items: center; }
.marquee .item > span { padding: 0 24px; }
.marquee .item .star { color: var(--amber); font-size: 12px; padding: 0; }
/* ── generic section frame ── */
.sec { padding: 84px 0; position: relative; }
/* Coloured sections sit as inset rounded panels on the grid paper — same shape
language as the nav bar (rounded square, 2px ink border, pressed shadow).
The paper gap between panels IS the section divider; no drawn rules needed. */
.panel {
width: min(100% - 32px, 1400px);
margin-inline: auto;
margin-block: 20px;
border: 2px solid var(--ink);
border-radius: 20px;
overflow: clip; /* clips the brick wall + CTA dot field to the radius */
box-shadow: 0 5px 0 rgba(21,38,59,.10);
}
.sec-dark { background: var(--navy); color: #fff; }
/* Brighter sections carry the same engineering grid as the body (slightly stronger,
to read on the brighter paper) so the texture never cuts out at a section change —
only the paper tint shifts. */
.sec-paper2 {
background-color: var(--paper-2);
background-image:
linear-gradient(rgba(21,38,59,.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(21,38,59,.045) 1px, transparent 1px);
background-size: 26px 26px;
}
/* ── section seam: a slim course of bricks ──────────────────────────
Sits between light sections in place of the old full-bleed navy rules.
Two thin running-bond courses — mostly muted mortar tones with the odd
amber / blue / teal brick — echoing the case-study brick wall. One SVG
tile (392px = 8 brick modules) repeated on x; gaps show the paper through. */
.seam {
height: 19px;
/* slightly narrower than the panels so it reads as a course laid under the Mark panel */
width: min(100% - 64px, 1340px);
margin-inline: auto;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='392'%20height='19'%3E%3Crect%20x='0'%20width='46'%20height='8'%20rx='1.5'%20fill='%23c9bfa8'/%3E%3Crect%20x='49'%20width='46'%20height='8'%20rx='1.5'%20fill='%23c2b79e'/%3E%3Crect%20x='98'%20width='46'%20height='8'%20rx='1.5'%20fill='%23f5a01a'/%3E%3Crect%20x='147'%20width='46'%20height='8'%20rx='1.5'%20fill='%23c9bfa8'/%3E%3Crect%20x='196'%20width='46'%20height='8'%20rx='1.5'%20fill='%23c2b79e'/%3E%3Crect%20x='245'%20width='46'%20height='8'%20rx='1.5'%20fill='%23c9bfa8'/%3E%3Crect%20x='294'%20width='46'%20height='8'%20rx='1.5'%20fill='%230c7f72'/%3E%3Crect%20x='343'%20width='46'%20height='8'%20rx='1.5'%20fill='%23c2b79e'/%3E%3Crect%20x='-24.5'%20y='11'%20width='46'%20height='8'%20rx='1.5'%20fill='%23c2b79e'/%3E%3Crect%20x='24.5'%20y='11'%20width='46'%20height='8'%20rx='1.5'%20fill='%23c9bfa8'/%3E%3Crect%20x='73.5'%20y='11'%20width='46'%20height='8'%20rx='1.5'%20fill='%23c2b79e'/%3E%3Crect%20x='122.5'%20y='11'%20width='46'%20height='8'%20rx='1.5'%20fill='%23c9bfa8'/%3E%3Crect%20x='171.5'%20y='11'%20width='46'%20height='8'%20rx='1.5'%20fill='%232f93e8'/%3E%3Crect%20x='220.5'%20y='11'%20width='46'%20height='8'%20rx='1.5'%20fill='%23c2b79e'/%3E%3Crect%20x='269.5'%20y='11'%20width='46'%20height='8'%20rx='1.5'%20fill='%23c9bfa8'/%3E%3Crect%20x='318.5'%20y='11'%20width='46'%20height='8'%20rx='1.5'%20fill='%23c2b79e'/%3E%3Crect%20x='367.5'%20y='11'%20width='46'%20height='8'%20rx='1.5'%20fill='%23c2b79e'/%3E%3C/svg%3E");
background-repeat: repeat-x;
background-size: 392px 19px;
}
.sec-head { max-width: 640px; }
.sec-head h2 { font-size: clamp(29px, 3.8vw, 43px); font-weight: 800; margin-top: 14px; }
.sec-head p { color: var(--ink-soft); font-size: 18px; margin-top: 14px; }
.sec-dark .sec-head p { color: #b9c6d6; }
/* ── "I'm Mark" band ── (the band itself is a .sec-paper2 in the HTML) */
.mark-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 52px; align-items: center; }
.mark-photo { position: relative; }
/* photo slot — styled placeholder until [PHOTO] is supplied; swap inner note for an ![]()
*/
.photo-slot {
aspect-ratio: 4 / 5; border: 2px solid var(--ink); border-radius: 14px; overflow: hidden;
background:
repeating-linear-gradient(45deg, transparent 0 13px, rgba(21,38,59,.05) 13px 14px),
var(--paper);
display: grid; place-items: center; text-align: center; box-shadow: 8px 10px 0 rgba(47,147,232,.30);
}
.photo-slot img { width: 100%; height: 100%; object-fit: cover; }
.photo-slot .ph-note { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); padding: 16px; line-height: 1.7; }
.photo-stamp {
position: absolute; bottom: -16px; left: -16px; background: var(--amber); color: var(--navy);
font-family: var(--font-head); font-weight: 900; font-size: 14px; padding: 10px 14px; border-radius: 10px;
border: 2px solid var(--ink); transform: rotate(-3deg);
}
.mark-copy h2 { font-size: clamp(27px, 3.4vw, 40px); font-weight: 800; }
.mark-copy p { color: var(--ink-soft); font-size: 17.5px; margin-top: 18px; max-width: 40em; }
.mark-copy p strong { color: var(--ink); }
.sign { font-family: var(--mono); color: var(--ink-soft); font-size: 13px; margin-top: 22px; letter-spacing: .04em; }
/* "Why BuildHub" spec card — stands in for the founder photo until there's a real one;
job-sheet styling, navy with amber ticks (echoes the recommended pricing card). */
.whycard { background: var(--navy); color: #fff; border: 2px solid var(--ink); border-radius: 14px;
padding: 26px 26px 24px; box-shadow: 9px 11px 0 var(--amber); }
.whycard ul { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.whycard li { display: flex; gap: 12px; align-items: center; font-weight: 600; font-size: 16px; color: #eaf1f8; }
.whycard li::before { content: "\2713"; flex: none; width: 22px; height: 22px; border-radius: 6px;
background: var(--amber); color: var(--navy); display: grid; place-items: center; font-size: 13px; font-weight: 900; }
.whycard-foot { margin-top: 22px; padding-top: 16px; border-top: 1.5px dashed rgba(255,255,255,.18);
font-family: var(--mono); font-size: 13px; color: #b9c6d6; letter-spacing: .04em; }
/* ── services — editorial spec list, not 4 identical cards ── */
#services { padding-top: 48px; padding-bottom: 42px; }
#services .sec-head p { margin-top: 10px; }
.svc-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; margin-top: 10px; }
.svc { display: grid; grid-template-columns: auto 1fr; gap: 18px; padding: 30px 0; align-items: start; border-top: 2px solid var(--ink); }
.svc .no { font-family: var(--mono); font-weight: 700; font-size: 15px; color: var(--amber-deep); padding-top: 5px; }
.svc .ic { width: 50px; height: 50px; border-radius: 12px; display: grid; place-items: center; overflow: hidden; background: #fff; box-shadow: 0 6px 14px rgba(21,38,59,.16); border: 1.5px solid var(--line); margin-bottom: 14px; }
.svc .ic img { width: 70%; height: 70%; object-fit: contain; }
.svc .ic--cloudflare img { width: 68%; height: 68%; }
.svc h3 { font-size: 20px; font-weight: 800; }
.svc p { font-size: 15px; color: var(--ink-soft); margin-top: 9px; }
/* ── AWGas case study (dark showcase) ── */
.case-grid { display: grid; grid-template-columns: 1fr 0.92fr; gap: 54px; align-items: center; }
.case-copy h2 { font-size: clamp(28px, 3.6vw, 42px); font-weight: 800; color: #fff; }
.case-copy > p { color: #b9c6d6; font-size: 17.5px; margin-top: 16px; max-width: 38em; }
/* real stats as approval "stamps" */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 26px 0; max-width: 420px; }
.stat { border: 2px solid rgba(255,255,255,.16); border-radius: 12px; padding: 14px 16px; background: rgba(255,255,255,.03); }
.stat .n { font-family: var(--font-head); font-weight: 900; font-size: 26px; color: var(--amber); }
.stat .l { font-size: 13px; color: #b9c6d6; margin-top: 2px; }
.case-chips { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 4px; }
.case-chips .chip { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: #fff; padding: 6px 12px; border: 1.5px solid rgba(255,255,255,.22); border-radius: 99px; }
/* real customer review */
.review { margin-top: 26px; border-left: 4px solid var(--amber); padding: 6px 0 6px 20px; max-width: 40em; }
.review .stars { color: var(--amber); letter-spacing: 3px; font-size: 15px; }
.review blockquote { margin: 8px 0 0; font-size: 19px; line-height: 1.5; color: #eaf1f8; font-weight: 500; }
.review .who { margin-top: 12px; font-family: var(--mono); font-size: 13px; color: #b9c6d6; letter-spacing: .04em; }
.review .ph-note { color: var(--amber); }
/* device frames (laptop + phone) — reused, restyled to the spec look */
.laptop-body { position: relative; background: var(--navy); border: 2px solid var(--ink); border-radius: 12px 12px 5px 5px; padding: 9px 9px 10px; margin-bottom: 11px; filter: drop-shadow(8px 10px 0 rgba(47,147,232,.32)); }
.laptop-body::after { content: ""; position: absolute; left: 50%; bottom: -11px; transform: translateX(-50%); width: 116%; height: 11px; background: var(--navy); border: 2px solid var(--ink); border-top: 0; border-radius: 0 0 10px 10px; }
.laptop-screen { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; background: #fff; }
.laptop-screen iframe { position: absolute; top: 0; left: 0; z-index: 1; width: 1200px; height: 750px; border: 0; transform-origin: top left; pointer-events: none; display: block; }
.laptop-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
figure.device { margin: 0; }
.device-cap { display: block; text-align: center; margin-top: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.sec-dark .device-cap { color: #8da0b6; }
.phone { width: 210px; margin: 0 auto; }
.phone-frame { position: relative; background: var(--navy); border: 2px solid var(--ink); border-radius: 30px; padding: 12px 9px 9px; box-shadow: 8px 10px 0 rgba(245,160,26,.40); }
.phone-frame::before { content: ""; position: absolute; top: 5px; left: 50%; transform: translateX(-50%); width: 42px; height: 4px; border-radius: 99px; background: rgba(255,255,255,.22); }
.phone-screen { position: relative; width: 186px; height: 402px; border-radius: 22px; overflow: hidden; background: #fff; margin: 0 auto; }
.phone-screen iframe { position: absolute; top: 0; left: 0; width: 390px; height: 844px; border: 0; transform-origin: top left; transform: scale(0.4769); pointer-events: none; }
/* tap target over the phone screen → opens the real AWGas site (iframe is inert) */
.phone-screen .phone-link { position: absolute; inset: 0; z-index: 2; cursor: pointer; }
/* same tap-target trick over the hero laptop screen */
.laptop-screen .laptop-link { position: absolute; inset: 0; z-index: 2; cursor: pointer; }
/* ── brick wall behind the AWGas phone ──────────────────────────────
Brand blocks that lay themselves up bottom-to-top as you scroll the case study
(driven by PAGE scroll, like the reveals — independent of the phone's own scroll).
On the dark section we use a steel-blue base with blue + hi-vis amber accents so the
bricks read against the navy. JS builds + drives them; reduced-motion shows it built. */
/* brick wall fills the WHOLE case-study section, falling in behind all its content */
#work { position: relative; overflow: hidden; }
#work > .wrap { position: relative; z-index: 1; } /* text + phone sit in front of the wall */
#work .case-copy { position: relative; text-shadow: 0 2px 10px rgba(6,14,26,.9); }
/* soft dark pool behind the copy so it stays readable even with colourful bricks behind it */
#work .case-copy::before { content: ""; position: absolute; inset: -12px -24px; z-index: -1; border-radius: 18px;
background: radial-gradient(130% 120% at 30% 42%, rgba(10,20,34,.74), rgba(10,20,34,.30) 66%, transparent); }
.brickwall { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* flat solid face lifted off a hard, stepped dark edge — mirrors the hero headline's 3D extrude
(amber bricks extrude in bronze, just like the hero's accent words) */
.brick { position: absolute; border-radius: 3px; background: #28486b; opacity: 0; will-change: transform, opacity;
box-shadow: 1px 1px 0 #1c3a57, 2px 2px 0 #15293d, 3px 3px 0 #0e1c2b, 4px 6px 9px rgba(6,14,24,.42); }
.brick.blue { background: var(--blue);
box-shadow: 1px 1px 0 #1f6fc0, 2px 2px 0 #17436f, 3px 3px 0 #0f2c4a, 4px 6px 9px rgba(6,14,24,.42); }
.brick.amber { background: var(--amber);
box-shadow: 1px 1px 0 #b9700f, 2px 2px 0 #9c5d0c, 3px 3px 0 #6c3f08, 4px 6px 9px rgba(6,14,24,.42); }
.brick.teal { background: #28c2b2;
box-shadow: 1px 1px 0 #1f9e92, 2px 2px 0 #167a72, 3px 3px 0 #0e544f, 4px 6px 9px rgba(6,14,24,.42); }
/* ── pricing ── */
.pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; margin-top: 16px; }
.pkg {
background: var(--paper-2); border: 2px solid var(--ink); border-radius: 14px;
padding: 28px 24px; display: flex; flex-direction: column; gap: 15px; position: relative;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.9), inset 0 3px 10px rgba(255,255,255,.55),
0 8px 26px rgba(21,38,59,.13), 0 2px 6px rgba(21,38,59,.08);
}
/* gradient bevel on the ink border: catches light at top, shadows at bottom */
.pkg::after {
content: ""; position: absolute; inset: -2px; border-radius: 16px;
border: 2px solid transparent;
background: transparent padding-box,
linear-gradient(to bottom, rgba(255,255,255,.4) 0%, rgba(0,0,0,.22) 100%) border-box;
pointer-events: none;
}
/* recommended tier: navy, lifted, amber glow underneath */
.pkg.pick {
background: var(--navy); color: #fff;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.15),
0 10px 32px rgba(245,160,26,.38), 0 3px 8px rgba(0,0,0,.25);
}
.pkg.pick::after {
background: transparent padding-box,
linear-gradient(to bottom, rgba(255,255,255,.25) 0%, rgba(0,0,0,.3) 100%) border-box;
}
.pkg.pick h3, .pkg.pick .price { color: #fff; }
.pkg.pick .pkg-sub, .pkg.pick li { color: #c4d2e2; }
.pkg .tag { position: absolute; top: -13px; left: 24px; background: var(--amber); color: var(--navy); font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 5px 12px; border-radius: 7px; border: 2px solid var(--ink); }
.pkg h3 { font-size: 22px; font-weight: 800; }
.pkg .pkg-sub { font-size: 14px; color: var(--ink-soft); margin-top: -7px; }
.pkg .price { font-family: var(--font-head); font-weight: 900; font-size: 38px; }
/* note on its own line — stops "£25/mo first-year care" wrapping mid-phrase */
.pkg .price small { display: block; margin-top: 3px; font-size: 15px; font-weight: 600; color: var(--ink-soft); }
.pkg.pick .price small { color: #c4d2e2; }
.pkg .rule { height: 2px; background: var(--line); }
.pkg.pick .rule { background: rgba(255,255,255,.18); }
.pkg ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.pkg li { font-size: 14.5px; display: flex; gap: 10px; align-items: flex-start; color: var(--ink-soft); }
.pkg li::before { content: "✓"; color: var(--amber-deep); font-weight: 900; flex: none; }
.pkg.pick li::before { color: var(--amber); }
.pkg .btn { justify-content: center; }
.pkg-note { text-align: center; margin-top: 26px; font-size: 14.5px; color: var(--ink-soft); }
/* Paint-swatch square beside tier names on the what's-included cards;
mirrors the coloured code boxes on the homepage schedule. */
.pkg-chip { display: inline-block; width: 13px; height: 13px; border-radius: 4px; margin-right: 9px; }
.pkg-chip--blue { background: var(--blue); }
.pkg-chip--amber { background: var(--amber); }
.pkg-chip--teal { background: var(--teal-deep); }
/* Homepage tier schedule: the quick answer. The detailed comparison stays
on /whats-included, so this section only carries the differences that help
someone choose where to look next. */
.price-schedule {
margin-top: 22px; border: 2px solid var(--ink); border-radius: 14px;
overflow: hidden; background: var(--paper-2); box-shadow: 7px 8px 0 rgba(21,38,59,.09);
}
.price-row {
display: grid; grid-template-columns: minmax(220px, 1.2fr) minmax(210px, 1fr) minmax(175px, .72fr);
align-items: center; gap: 22px; min-height: 128px; padding: 22px 24px;
position: relative;
}
.price-row-pick { background: var(--navy); color: #fff; }
.price-name { display: flex; align-items: center; gap: 16px; min-width: 0; }
.price-code {
width: 38px; height: 38px; flex: none; display: grid; place-items: center;
border: 2px solid var(--line-strong); border-radius: 8px;
font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--ink-soft);
}
.price-row-pick .price-code { border-color: rgba(255,255,255,.28); color: var(--amber); }
/* Tier colour chips: the code box doubles as each tier's paint swatch. */
.price-row--blue .price-code { background: var(--blue); border-color: var(--blue-deep); color: var(--navy); }
.price-row--teal .price-code { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; }
.price-row--amber .price-code { background: var(--amber); border-color: var(--amber); color: var(--navy); }
.price-name h3 { font-size: 23px; }
.price-name p { margin-top: 5px; color: var(--ink-soft); font-size: 14px; line-height: 1.3; }
.price-row-pick .price-name p { color: #bdcada; }
.price-tag {
display: block; margin-bottom: 5px; color: var(--amber);
font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.price-scope { display: flex; flex-direction: column; gap: 3px; line-height: 1.25; }
.price-scope strong { font-family: var(--font-head); font-size: 15px; }
.price-scope span { color: var(--ink-soft); font-size: 13px; }
.price-row-pick .price-scope span { color: #bdcada; }
.price-figure {
white-space: nowrap; font-family: var(--font-head); font-size: 29px; font-weight: 900; letter-spacing: -.025em;
}
.price-figure small { display: block; margin-top: 2px; color: var(--ink-soft); font-size: 12px; font-weight: 600; letter-spacing: 0; white-space: normal; }
.price-row-pick .price-figure small { color: #bdcada; }
/* Struck-through previous price for a launch/intro offer. Inherits colour + dims, so it works on light and dark cards alike. */
.price-was { font-size: .5em; font-weight: 700; text-decoration: line-through; opacity: .55; margin-right: 6px; letter-spacing: 0; vertical-align: baseline; }
.launch-note {
display: inline-flex; align-items: center; gap: 10px; margin-top: 20px;
padding: 10px 14px; border: 2px solid var(--ink); border-radius: 10px;
background: var(--amber); color: var(--navy); box-shadow: 4px 5px 0 rgba(21,38,59,.16);
font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.launch-note::before {
content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--navy); flex: none;
}
.price-foot {
display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px 28px;
margin-top: 22px; color: var(--ink-soft); font-size: 14.5px; text-align: center;
}
.price-foot a { color: var(--blue-deep); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.price-detail-link {
width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px;
padding: 4px 0; border: 0; border-radius: 0;
background: transparent; box-shadow: none;
font-family: var(--font-head); font-size: 17px; text-decoration: none !important;
transition: color .14s ease;
}
.price-detail-link:hover { color: var(--ink); }
.price-detail-link:active { color: var(--blue); }
/* ── final CTA ── */
.cta { background: var(--navy); color: #fff; position: relative; overflow: hidden; }
.cta::before { content: ""; position: absolute; inset: -25% 0; pointer-events: none; z-index: 0; background-image: radial-gradient(circle at 1px 1px, rgba(150,210,255,.10) 1px, transparent 0); background-size: 28px 28px; transform: translateY(var(--py, 0px)); will-change: transform; }
.cta-in { position: relative; z-index: 1; padding: 60px 28px; text-align: center; }
.cta h2 { font-size: clamp(31px, 4.4vw, 52px); font-weight: 800; color: #fff; }
.cta p { color: #b9c6d6; font-size: 18px; margin-top: 16px; max-width: 34em; margin-left: auto; margin-right: auto; }
.cta-row { display: flex; justify-content: center; gap: 13px; margin-top: 30px; flex-wrap: wrap; }
.cta .btn {
box-shadow: inset 0 1px 0 rgba(255,255,255,.25),
0 8px 24px rgba(0,0,0,.24), 0 2px 6px rgba(0,0,0,.18);
}
.cta-email { margin-top: 14px; font-family: var(--mono); font-size: 14.5px; letter-spacing: .02em; }
.cta-email a { color: var(--amber); font-weight: 700; }
.cta-email a:hover { text-decoration: underline; }
.cta .micro { margin-top: 10px; font-family: var(--mono); font-size: 13px; color: #93a3b6; letter-spacing: .04em; }
/* ── CTA doubles as the page footer ──
The navy panel is the literal