/* ============================================================
Perfect Outdoors — Shared stylesheet
One edit here updates all 7 pages instantly.
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');
:root {
--ink: #1a1a1a;
--text: #222222;
--muted: #6b6b6b;
--line: #e5e5e5;
--bg: #ffffff;
--soft: #f6f6f4;
--accent: #1a1a1a;
--accent-hover: #000000;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: 'Poppins', -apple-system, sans-serif;
font-weight: 400;
color: var(--text);
background: var(--bg);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
/* ---- Top notification bar ---- */
.topbar {
background: var(--ink);
color: #fff;
font-size: 13px;
padding: 10px 0;
text-align: center;
font-weight: 400;
letter-spacing: 0.02em;
}
.topbar a { font-weight: 600; border-bottom: 1px solid rgba(255,255,255,0.4); padding-bottom: 1px; }
/* ---- Header / Nav ---- */
header.site {
background: #fff;
border-bottom: 1px solid var(--line);
position: sticky;
top: 0;
z-index: 50;
}
.nav {
max-width: 1280px;
margin: 0 auto;
padding: 18px 28px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.logo {
font-weight: 700;
font-size: 20px;
letter-spacing: -0.01em;
color: var(--ink);
flex-shrink: 0;
}
.logo span { font-weight: 300; }
.nav-links {
display: flex;
gap: 32px;
flex: 1;
justify-content: center;
}
.nav-links a {
font-size: 14px;
font-weight: 500;
color: var(--ink);
position: relative;
padding: 4px 0;
transition: opacity 0.15s;
}
.nav-links a:hover { opacity: 0.6; }
.nav-links a.active::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -2px;
height: 2px;
background: var(--ink);
}
.nav-cta {
background: var(--ink);
color: #fff;
padding: 11px 22px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
border-radius: 2px;
transition: background 0.15s;
}
.nav-cta:hover { background: var(--accent-hover); }
.nav-phone {
font-size: 14px;
font-weight: 600;
color: var(--ink);
display: flex;
align-items: center;
gap: 6px;
}
/* ---- Hero (full-viewport with dark overlay) ---- */
.hero {
position: relative;
min-height: 88vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #fff;
padding: 80px 24px;
background-color: #000;
}
.hero-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
z-index: 0;
}
.hero-bg::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0,0,0,0.45);
}
.hero-inner {
position: relative;
z-index: 1;
max-width: 900px;
}
.hero-eyebrow {
text-transform: uppercase;
letter-spacing: 0.22em;
font-size: 11px;
font-weight: 600;
margin-bottom: 22px;
color: rgba(255,255,255,0.85);
}
h1 {
font-size: clamp(36px, 6vw, 72px);
line-height: 1.05;
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: 22px;
color: #fff;
}
.hero p.lede {
font-size: clamp(16px, 1.4vw, 19px);
font-weight: 300;
max-width: 680px;
margin: 0 auto 38px;
color: rgba(255,255,255,0.92);
line-height: 1.55;
}
.hero-ctas {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
}
/* Subpage hero variant — shorter */
.hero.subpage { min-height: 52vh; }
.hero.subpage h1 { font-size: clamp(32px, 4.5vw, 56px); }
.btn {
display: inline-block;
padding: 15px 32px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
border-radius: 2px;
transition: all 0.15s;
border: 2px solid transparent;
}
.btn-primary { background: #fff; color: var(--ink); border-color: #fff; }
.btn-primary:hover { background: transparent; color: #fff; }
.btn-ghost { background: transparent; color: #fff; border-color: #fff; }
.btn-ghost:hover { background: #fff; color: var(--ink); }
.btn-dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-dark:hover { background: transparent; color: var(--ink); }
/* ---- Trust strip ---- */
.trust-strip {
background: var(--soft);
padding: 22px 24px;
text-align: center;
font-size: 13px;
font-weight: 500;
border-bottom: 1px solid var(--line);
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 28px;
align-items: center;
}
.trust-strip .item { color: var(--muted); }
.trust-strip .item strong { color: var(--ink); margin-right: 4px; }
.stars { color: #f5b500; letter-spacing: 0.08em; }
/* ---- Section base ---- */
section.block {
padding: 90px 24px;
}
section.block.soft { background: var(--soft); }
.container {
max-width: 1280px;
margin: 0 auto;
}
.section-head {
text-align: center;
max-width: 720px;
margin: 0 auto 60px;
}
.section-head .eyebrow {
text-transform: uppercase;
letter-spacing: 0.22em;
font-size: 11px;
font-weight: 600;
color: var(--muted);
margin-bottom: 14px;
}
h2 {
font-size: clamp(28px, 3.4vw, 44px);
line-height: 1.15;
font-weight: 700;
letter-spacing: -0.015em;
margin-bottom: 18px;
color: var(--ink);
}
h3 {
font-size: 22px;
font-weight: 600;
letter-spacing: -0.01em;
margin-bottom: 10px;
color: var(--ink);
}
.section-head p {
font-size: 17px;
color: var(--muted);
font-weight: 300;
}
/* ---- Product grid ---- */
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2px;
background: var(--line);
}
.product-card {
background: #fff;
display: block;
position: relative;
overflow: hidden;
transition: transform 0.3s;
}
.product-card-img {
aspect-ratio: 4/3;
background-size: cover;
background-position: center;
transition: transform 0.6s ease;
}
.product-card:hover .product-card-img { transform: scale(1.05); }
.product-card-body {
padding: 28px 28px 32px;
}
.product-card h3 { margin-bottom: 8px; }
.product-card p {
color: var(--muted);
font-size: 14px;
margin-bottom: 14px;
}
.product-card .arrow {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink);
}
.product-card .arrow::after { content: " →"; transition: transform 0.2s; display: inline-block; }
.product-card:hover .arrow::after { transform: translateX(4px); }
/* ---- Feature grid (icons + text) ---- */
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 48px;
}
.feature {
text-align: center;
}
.feature .feature-icon {
width: 56px; height: 56px;
margin: 0 auto 18px;
background: var(--soft);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
.feature h3 { font-size: 18px; }
.feature p { color: var(--muted); font-size: 14.5px; }
/* ---- Two-column split ---- */
.split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
align-items: stretch;
}
.split-img {
min-height: 460px;
background-size: cover;
background-position: center;
}
.split-text {
padding: 80px 60px;
display: flex;
flex-direction: column;
justify-content: center;
background: var(--soft);
}
.split-text h2 { margin-bottom: 22px; }
.split-text p {
color: var(--text);
font-size: 16px;
font-weight: 300;
margin-bottom: 16px;
}
.split-text ul {
list-style: none;
margin: 16px 0 28px;
padding: 0;
}
.split-text ul li {
padding: 10px 0;
border-bottom: 1px solid var(--line);
font-size: 15px;
position: relative;
padding-left: 26px;
}
.split-text ul li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--ink);
font-weight: 700;
}
/* ---- CTA strip ---- */
.cta-strip {
background: var(--ink);
color: #fff;
padding: 80px 24px;
text-align: center;
}
.cta-strip h2 {
color: #fff;
margin-bottom: 16px;
}
.cta-strip p {
color: rgba(255,255,255,0.75);
font-size: 17px;
font-weight: 300;
max-width: 580px;
margin: 0 auto 32px;
}
/* ---- Form (contact page) ---- */
.contact-grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 80px;
max-width: 1100px;
margin: 0 auto;
}
.contact-info h2 { margin-bottom: 24px; }
.contact-info p { color: var(--muted); margin-bottom: 28px; }
.info-block {
padding: 18px 0;
border-bottom: 1px solid var(--line);
}
.info-block strong {
display: block;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--muted);
margin-bottom: 4px;
}
.info-block .val { font-size: 17px; font-weight: 500; color: var(--ink); }
form.enquiry { display: flex; flex-direction: column; gap: 16px; }
form.enquiry label {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--muted);
}
form.enquiry input, form.enquiry select, form.enquiry textarea {
font-family: inherit;
font-size: 15px;
padding: 12px 14px;
border: 1px solid var(--line);
border-radius: 2px;
background: #fff;
color: var(--ink);
}
form.enquiry textarea { min-height: 120px; resize: vertical; }
form.enquiry input:focus, form.enquiry select:focus, form.enquiry textarea:focus {
outline: none;
border-color: var(--ink);
}
form.enquiry button {
background: var(--ink);
color: #fff;
padding: 16px 28px;
border: none;
border-radius: 2px;
font-family: inherit;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
margin-top: 10px;
transition: background 0.15s;
}
form.enquiry button:hover { background: var(--accent-hover); }
/* ---- Footer ---- */
footer.site {
background: var(--ink);
color: rgba(255,255,255,0.7);
padding: 64px 24px 24px;
}
.footer-inner {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 48px;
margin-bottom: 40px;
}
footer.site h4 {
color: #fff;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 18px;
}
footer.site a {
display: block;
font-size: 14px;
color: rgba(255,255,255,0.7);
padding: 4px 0;
font-weight: 300;
}
footer.site a:hover { color: #fff; }
footer.site .about-col p {
font-size: 14px;
font-weight: 300;
line-height: 1.7;
color: rgba(255,255,255,0.6);
}
.legal {
border-top: 1px solid rgba(255,255,255,0.1);
padding-top: 22px;
text-align: center;
font-size: 12px;
color: rgba(255,255,255,0.45);
}
.legal .demo-tag {
background: #b04a1f;
color: #fff;
padding: 3px 10px;
border-radius: 2px;
margin-left: 10px;
font-weight: 600;
letter-spacing: 0.04em;
}
/* ---- Responsive ---- */
@media (max-width: 920px) {
.nav-links { display: none; }
.nav-phone { display: none; }
.split { grid-template-columns: 1fr; }
.split-text { padding: 50px 28px; }
.contact-grid { grid-template-columns: 1fr; gap: 40px; }
.footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
section.block { padding: 60px 20px; }
}
/* ============================================================
Social Blitz — additions on top of the Perfect Outdoors base
(same tokens, same monochrome/Poppins language, flat — no shadows)
============================================================ */
/* ---- Dark gradient hero (no photo dependency — cross-industry neutral) ---- */
.hero.sb {
background-color: #0a0a0a;
background-image:
radial-gradient(120% 130% at 50% -10%, #2c2c2c 0%, #161616 52%, #0a0a0a 100%);
}
.hero.sb .hero-bg::after { background: none; }
.hero .hero-eyebrow .dot { color: #f5b500; }
/* ---- Service cards (text-led variant of product-card) ---- */
.service-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 2px;
background: var(--line);
}
.service-card {
background: #fff;
padding: 38px 32px 34px;
display: flex;
flex-direction: column;
transition: background 0.2s;
}
.service-card:hover { background: var(--soft); }
.service-card .num {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.14em;
color: var(--muted);
margin-bottom: 20px;
}
.service-card h3 { margin-bottom: 10px; }
.service-card p { color: var(--muted); font-size: 14.5px; margin-bottom: 18px; flex: 1; }
.service-card .arrow {
font-size: 13px; font-weight: 600; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--ink);
}
.service-card .arrow::after { content: " →"; }
/* ---- Stat row (Outcomes) ---- */
.stat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 2px;
background: var(--line);
border: 1px solid var(--line);
}
.stat {
background: #fff;
padding: 44px 30px;
text-align: center;
}
.stat .big {
font-size: clamp(38px, 5vw, 56px);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--ink);
line-height: 1;
margin-bottom: 10px;
}
.stat .lab { font-weight: 600; color: var(--ink); font-size: 15px; margin-bottom: 4px; }
.stat .sub { color: var(--muted); font-size: 13px; }
/* ---- Pricing ---- */
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
gap: 24px;
align-items: start;
}
.price-card {
border: 1px solid var(--line);
border-radius: 3px;
background: #fff;
padding: 38px 32px;
display: flex;
flex-direction: column;
}
.price-card.featured { border: 2px solid var(--ink); }
.price-tag-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.price-card .tier { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.price-card .badge {
background: var(--ink); color: #fff; font-size: 10px; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 10px; border-radius: 2px;
}
.price-card .name { font-size: 22px; font-weight: 600; color: var(--ink); margin-bottom: 16px; }
.price-card .price { font-size: 46px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); line-height: 1; }
.price-card .price span { font-size: 16px; font-weight: 400; color: var(--muted); }
.price-card .blurb { color: var(--muted); font-size: 14px; margin: 18px 0 22px; }
.price-card ul { list-style: none; margin: 0 0 28px; padding: 0; flex: 1; }
.price-card ul li {
padding: 9px 0 9px 26px; border-bottom: 1px solid var(--line);
font-size: 14px; position: relative;
}
.price-card ul li::before { content: "✓"; position: absolute; left: 0; color: var(--ink); font-weight: 700; }
.price-note { text-align: center; color: var(--muted); font-size: 14px; margin-top: 32px; }
.price-note strong { color: var(--ink); }
/* ---- Bundle mini-cards ---- */
.bundle-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 12px; }
.bundle {
border: 1px solid var(--line); border-radius: 3px; padding: 26px 24px; background: #fff;
}
.bundle.featured { border: 2px solid var(--ink); }
.bundle .btier { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.bundle .line { display: flex; justify-content: space-between; font-size: 14px; padding: 6px 0; color: var(--text); }
.bundle .line.total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 12px; font-weight: 700; color: var(--ink); }
.bundle .line .v { font-weight: 600; }
/* center a section head's button */
.center-cta { text-align: center; margin-top: 48px; }
/* ============================================================
Social Blitz — "guts" ported from the symphonious-gumdrop site
(moving image-wall hero, marquee, steps, testimonials, FAQ,
floating CTA, mobile nav, scroll reveals) — re-skinned into the
Perfect Shutters monochrome / Poppins language.
============================================================ */
/* ---- Moving image-wall hero ---- */
#hero { position: relative; height: 100vh; min-height: 640px; width: 100%; overflow: hidden; background: #080808; }
.hero-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.60); z-index: 10; pointer-events: none; }
.hero-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 65% 65% at center, transparent 0%, rgba(0,0,0,0.5) 100%); z-index: 11; pointer-events: none; }
.hero-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 20; text-align: center; width: 100%; padding: 0 2rem; pointer-events: none; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); padding: 0.4rem 1rem; border-radius: 100px; margin-bottom: 28px; }
.hero-eyebrow-dot { width: 6px; height: 6px; background: #f5b500; border-radius: 50%; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } }
.hero-eyebrow-txt { font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.72); }
.hero-h { font-size: clamp(34px, 6vw, 72px); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; color: #fff; margin-bottom: 34px; text-shadow: 0 2px 40px rgba(0,0,0,0.5); }
.hero-h .hl-dim { color: rgba(255,255,255,0.45); font-weight: 700; }
.hero-sub { color: rgba(255,255,255,0.75); max-width: 560px; margin: 14px auto 30px; font-size: 17px; line-height: 1.55; }
.hero-h .hl-og { color: #fff; }
.hero-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; pointer-events: all; }
.hero-cols { display: flex; width: 100%; height: 100%; gap: 3px; }
.hero-col { flex: 1; overflow: hidden; min-width: 0; }
.hero-track { display: flex; flex-direction: column; gap: 3px; will-change: transform; animation: colUp 40s linear infinite; }
.hero-track.dn { animation-name: colDn; }
.hero-track.s1 { animation-duration: 40s; } .hero-track.s2 { animation-duration: 30s; }
.hero-track.s3 { animation-duration: 22s; } .hero-track.s4 { animation-duration: 48s; }
.hero-track.s5 { animation-duration: 35s; } .hero-track.s6 { animation-duration: 26s; }
.hero-track.s7 { animation-duration: 55s; }
@keyframes colUp { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } }
@keyframes colDn { 0% { transform: translateY(-50%); } 100% { transform: translateY(0); } }
.hci { width: 100%; height: 280px; object-fit: cover; display: block; }
/* ---- Marquee ---- */
#marquee { background: var(--soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 14px 0; overflow: hidden; }
.mq-track { display: flex; width: max-content; animation: marqueeSlide 32s linear infinite; }
.mq-track:hover { animation-play-state: paused; }
@keyframes marqueeSlide { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.mq-item { display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); padding: 0 26px; white-space: nowrap; }
.mq-item::after { content: "✦"; color: var(--muted); margin-left: 26px; font-size: 9px; }
/* ---- Promo strip ---- */
#promo-strip { background: var(--ink); color: #fff; text-align: center; padding: 13px 24px; font-size: 14px; font-weight: 300; }
#promo-strip .pill { background: rgba(255,255,255,0.12); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 10px; border-radius: 100px; margin-right: 12px; }
#promo-strip strong { font-weight: 600; }
/* ---- Steps (How it works) ---- */
.steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2px; background: var(--line); }
.flow2 { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 28px; }
.flow-panel { background: #fff; border: 1px solid var(--line); padding: 56px 44px; }
.flow-panel .flow-label { font-size: 12.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand); margin-bottom: 16px; }
.flow-panel h3 { font-size: 30px; margin-bottom: 12px; letter-spacing: -0.5px; }
.flow-panel p { color: var(--muted); font-size: 16px; line-height: 1.55; max-width: 380px; }
.flow-dark { background: var(--ink); border-color: var(--ink); }
.flow-dark h3 { color: #fff; }
.flow-dark p { color: rgba(255,255,255,0.72); }
.flow-arrow { align-self: center; font-size: 44px; color: var(--brand); font-weight: 700; }
@media (max-width: 760px) { .flow2 { grid-template-columns: 1fr; } .flow-arrow { transform: rotate(90deg); justify-self: center; } }
.step { background: #fff; padding: 42px 32px; }
.step .step-num { font-size: 13px; font-weight: 700; letter-spacing: 0.16em; color: var(--muted); margin-bottom: 18px; }
.step h3 { margin-bottom: 10px; }
.step p { color: var(--muted); font-size: 14.5px; }
/* ---- Service cards: number badge over the photo window + tag ---- */
.product-card .pc-num { position: absolute; top: 14px; left: 14px; z-index: 2; background: rgba(0,0,0,0.62); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; padding: 5px 11px; border-radius: 2px; }
.product-card .tag { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); padding: 4px 11px; border-radius: 2px; }
/* ---- Testimonials ---- */
.quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.quote { border: 1px solid var(--line); border-radius: 3px; padding: 34px 30px; background: #fff; display: flex; flex-direction: column; }
.quote .stars { font-size: 14px; margin-bottom: 16px; }
.quote p { font-size: 15px; color: var(--text); font-weight: 300; line-height: 1.6; margin-bottom: 22px; flex: 1; }
.quote .who { font-weight: 600; color: var(--ink); font-size: 15px; }
.quote .who span { display: block; font-weight: 400; color: var(--muted); font-size: 13px; margin-top: 2px; }
/* ---- FAQ accordion ---- */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 4px; cursor: pointer; font-weight: 600; font-size: 17px; color: var(--ink); }
.faq-icon { flex-shrink: 0; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; transition: transform 0.2s, background 0.2s, color 0.2s; }
.faq-item.open .faq-icon { background: var(--ink); color: #fff; transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.35s ease; color: var(--muted); font-size: 15px; line-height: 1.65; }
.faq-item.open .faq-a { max-height: 800px; padding: 0 4px 26px; }
/* ---- Floating CTA ---- */
#float-cta { position: fixed; bottom: 24px; right: 24px; z-index: 90; background: var(--ink); color: #fff; padding: 14px 26px; border-radius: 3px; font-weight: 600; font-size: 14px; letter-spacing: 0.02em; opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity 0.3s, transform 0.3s; }
#float-cta.visible { opacity: 1; transform: none; pointer-events: all; }
/* ---- Mobile nav ---- */
.nav-ham { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 6px; }
.nav-ham span { width: 24px; height: 2px; background: var(--ink); display: block; transition: transform 0.25s, opacity 0.25s; }
.nav-ham.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-ham.open span:nth-child(2) { opacity: 0; }
.nav-ham.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
#mob-menu { position: fixed; inset: 0; background: #fff; z-index: 80; transform: translateX(100%); transition: transform 0.3s ease; display: flex; flex-direction: column; padding: 110px 32px 40px; gap: 4px; }
#mob-menu.open { transform: none; }
#mob-menu a { font-size: 20px; font-weight: 600; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
#mob-menu .btn { margin-top: 24px; text-align: center; }
/* ---- Scroll reveals ---- */
.r { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.r.in { opacity: 1; transform: none; }
@media (max-width: 920px) {
.nav-ham { display: flex; }
.hero-col:nth-child(n+5) { display: none; }
.quote-grid { grid-template-columns: 1fr; }
}
/* ============================================================
COLOUR PASS — bring the photos back to full colour and
restore Social Blitz orange as the brand accent over the
Perfect Shutters layout.
============================================================ */
:root { --brand: #ff4f00; --brand-hover: #e04400; }
/* full-colour moving hero wall */
.hci { filter: none; }
/* orange accents on the calls-to-action + highlights */
.nav-cta { background: var(--brand); }
.nav-cta:hover { background: var(--brand-hover); }
.btn-dark { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-dark:hover { background: transparent; color: var(--brand); }
.hero-eyebrow-dot { background: var(--brand); }
.hero-h .hl-og { color: var(--brand); }
.product-card .pc-num { background: var(--brand); }
.product-card .arrow { color: var(--brand); }
.service-card .arrow { color: var(--brand); }
.step .step-num { color: var(--brand); }
.feature .feature-icon { background: rgba(255,79,0,0.10); }
.stat .big { color: var(--brand); }
.quote .stars, .trust-strip .stars { color: var(--brand); }
.price-card.featured { border-color: var(--brand); }
.price-card .badge { background: var(--brand); }
.bundle.featured { border-color: var(--brand); }
.faq-item.open .faq-icon { background: var(--brand); border-color: var(--brand); }
.section-head .eyebrow, .eyebrow { color: var(--brand); }
form.enquiry button { background: var(--brand); }
form.enquiry button:hover { background: var(--brand-hover); }
form.enquiry input:focus, form.enquiry select:focus, form.enquiry textarea:focus { border-color: var(--brand); }
#float-cta { background: var(--brand); }
#promo-strip .pill { background: var(--brand); }
/* Services: fixed 3-up grid so six cards sit 3×2 with no empty cell */
#services .product-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 880px) { #services .product-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { #services .product-grid { grid-template-columns: 1fr; } }
/* De-dross the results stats: strip the boxed cards / grid lines,
leave a clean open stat row (no borders, no white cells). */
#results .stat-grid { background: transparent; border: none; gap: 40px 0; }
#results .stat { background: transparent; padding: 12px 24px; }
#results .stat .big { margin-bottom: 14px; }
@media (max-width: 880px) { #results .stat-grid { gap: 36px 0; } }
/* ---- Selected Work (website references) ---- */
.work-grid .product-card-img { aspect-ratio: 16/10; }
.work-grid .work-domain { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--brand); margin: -2px 0 10px; }
.work-grid .product-card-body { padding: 22px 24px 26px; }
.work-grid .product-card p { font-size: 13.5px; line-height: 1.55; }
@media (min-width: 1000px) { .work-grid { grid-template-columns: repeat(4, 1fr); } }
/* ============================================================
PRICING — elevate. Dark featured card, depth, hover lift,
orange check-discs. Scoped to #packages so nothing else moves.
============================================================ */
#packages .pricing-grid { gap: 28px; align-items: stretch; padding-top: 10px; }
#packages .price-card {
border-radius: 14px;
border: 1px solid var(--line);
padding: 42px 34px;
background: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
#packages .price-card:hover { transform: translateY(-8px); box-shadow: 0 24px 50px rgba(0,0,0,0.12); }
/* Featured (Silver) — dark, raised, the focal point */
#packages .price-card.featured {
background: var(--ink);
border-color: var(--ink);
transform: scale(1.05);
box-shadow: 0 30px 70px rgba(0,0,0,0.30);
z-index: 2;
}
#packages .price-card.featured:hover { transform: scale(1.05) translateY(-8px); box-shadow: 0 40px 80px rgba(0,0,0,0.36); }
#packages .price-card.featured .tier { color: rgba(255,255,255,0.55); }
#packages .price-card.featured .name { color: #fff; }
#packages .price-card.featured .price { color: #fff; }
#packages .price-card.featured .price span { color: rgba(255,255,255,0.55); }
#packages .price-card.featured .blurb { color: rgba(255,255,255,0.65); }
#packages .price-card.featured ul li { color: rgba(255,255,255,0.92); border-bottom-color: rgba(255,255,255,0.12); }
#packages .price-card.featured .btn-dark { background: var(--brand); border-color: var(--brand); color: #fff; }
#packages .price-card.featured .btn-dark:hover { background: #fff; color: var(--ink); border-color: #fff; }
/* Price typography lift */
#packages .price-card .tier { letter-spacing: 0.16em; }
#packages .price-card .name { font-size: 24px; margin-bottom: 18px; }
#packages .price-card .price { font-size: 54px; letter-spacing: -0.03em; }
/* Orange check-discs instead of bare ticks */
#packages .price-card ul li { padding: 11px 0 11px 32px; font-size: 14.5px; }
#packages .price-card ul li::before {
content: "✓";
position: absolute; left: 0; top: 12px;
width: 19px; height: 19px; border-radius: 50%;
background: var(--brand); color: #fff;
font-size: 11px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
}
/* Make the CTA on the two light cards quieter so the dark card's CTA leads */
#packages .price-card:not(.featured) .btn-dark { background: #fff; color: var(--ink); border-color: var(--ink); }
#packages .price-card:not(.featured) .btn-dark:hover { background: var(--ink); color: #fff; }
@media (max-width: 1000px) {
#packages .price-card.featured { transform: none; }
#packages .price-card.featured:hover { transform: translateY(-8px); }
}
/* ============================================================
PRICING v2 — bold dark band with an orange glow. Side plans
become dark glass; the popular plan inverts to a bright white
card that lifts off the black. Ties the section to the hero.
============================================================ */
#packages { background: #0c0c0c; position: relative; overflow: hidden; }
#packages > .container { position: relative; z-index: 1; }
#packages::before {
content: ""; position: absolute; top: -10%; left: 50%; transform: translateX(-50%);
width: 1000px; height: 680px; pointer-events: none;
background: radial-gradient(ellipse at center, rgba(255,79,0,0.20), rgba(255,79,0,0.05) 45%, transparent 70%);
}
#packages .section-head .eyebrow { color: var(--brand); }
#packages .section-head h2 { color: #fff; }
#packages .section-head p { color: rgba(255,255,255,0.6); }
/* side plans → dark glass */
#packages .price-card {
background: rgba(255,255,255,0.045);
border: 1px solid rgba(255,255,255,0.10);
box-shadow: none;
}
#packages .price-card .tier { color: rgba(255,255,255,0.5); }
#packages .price-card .name { color: #fff; }
#packages .price-card .price { color: #fff; }
#packages .price-card .price span { color: rgba(255,255,255,0.5); }
#packages .price-card .blurb { color: rgba(255,255,255,0.62); }
#packages .price-card ul li { color: rgba(255,255,255,0.88); border-bottom-color: rgba(255,255,255,0.10); }
#packages .price-card:not(.featured) .btn-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,0.45); }
#packages .price-card:not(.featured) .btn-dark:hover { background: #fff; color: #111; border-color: #fff; }
#packages .price-card:hover { box-shadow: 0 24px 50px rgba(0,0,0,0.5); border-color: rgba(255,255,255,0.2); }
/* popular plan → bright white, inverted, the focal pop */
#packages .price-card.featured {
background: #fff;
border: none;
transform: scale(1.06);
box-shadow: 0 30px 80px rgba(0,0,0,0.55);
}
#packages .price-card.featured:hover { transform: scale(1.06) translateY(-8px); box-shadow: 0 40px 90px rgba(0,0,0,0.6); }
#packages .price-card.featured .tier { color: var(--muted); }
#packages .price-card.featured .name { color: var(--ink); }
#packages .price-card.featured .price { color: var(--ink); }
#packages .price-card.featured .price span { color: var(--muted); }
#packages .price-card.featured .blurb { color: var(--muted); }
#packages .price-card.featured ul li { color: var(--text); border-bottom-color: var(--line); }
#packages .price-card.featured .btn-dark { background: var(--brand); border-color: var(--brand); color: #fff; }
#packages .price-card.featured .btn-dark:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
/* footer note on dark */
#packages .price-note { color: rgba(255,255,255,0.55); }
#packages .price-note strong { color: #fff; }
#packages .price-note a { color: #fff; border-bottom-color: rgba(255,255,255,0.55) !important; }
/* ============================================================
PRICING v3 — editorial rate-card. No boxes. Hairline-separated
full-width rows: identity left · inclusions middle · price right.
============================================================ */
#packages { background: var(--bg); }
#packages::before { display: none; }
#packages .section-head h2 { color: var(--ink); }
#packages .section-head p { color: var(--muted); }
.plans { max-width: 1120px; margin: 0 auto; border-top: 1px solid var(--line); }
.plan {
display: grid;
grid-template-columns: 1.05fr 1.5fr 0.85fr;
gap: 48px;
align-items: center;
padding: 44px 28px;
border-bottom: 1px solid var(--line);
position: relative;
transition: background 0.2s ease;
}
.plan:hover { background: var(--soft); }
.plan.featured { background: linear-gradient(90deg, rgba(255,79,0,0.05), rgba(255,79,0,0) 60%); }
.plan.featured::after {
content: "Most Popular";
position: absolute; top: 20px; right: 24px;
background: var(--brand); color: #fff;
font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
padding: 4px 11px; border-radius: 100px;
}
.plan-head .tier { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.plan-name { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); line-height: 1; margin-bottom: 14px; }
.plan-desc { font-size: 14px; color: var(--muted); line-height: 1.55; max-width: 280px; }
.plan-feats { list-style: none; columns: 2; column-gap: 30px; padding: 0; margin: 0; }
.plan-feats li { font-size: 13.5px; color: var(--text); padding: 7px 0 7px 24px; position: relative; break-inside: avoid; }
.plan-feats li::before {
content: "✓"; position: absolute; left: 0; top: 7px;
width: 16px; height: 16px; border-radius: 50%;
background: var(--brand); color: #fff; font-size: 9px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
}
.plan-cta { text-align: right; }
.plan-price { font-size: 46px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); line-height: 1; margin-bottom: 16px; }
.plan-price span { font-size: 15px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.plan.featured .plan-price { color: var(--brand); }
.plan-cta .btn { display: inline-block; min-width: 170px; }
@media (max-width: 880px) {
.plan { grid-template-columns: 1fr; gap: 22px; padding: 36px 8px; text-align: left; }
.plan-cta { text-align: left; }
.plan-desc { max-width: none; }
.plan.featured::after { top: 16px; right: 8px; }
}
/* ============================================================
PRICING v4 — Option C wired in: dark band, interactive
auto-slideshow with shuffled transitions. Scoped to #packages.
============================================================ */
#packages { background: #0c0c0c; position: relative; overflow: hidden; }
#packages::before {
content: ""; position: absolute; top: -10%; left: 50%; transform: translateX(-50%);
width: 1000px; height: 680px; pointer-events: none; display: block;
background: radial-gradient(ellipse at center, rgba(255,79,0,0.18), transparent 70%);
}
#packages .bld { max-width: 760px; margin: 0 auto; position: relative; z-index: 1; text-align: center; }
#packages .bld .eyebrow { color: var(--brand); }
#packages .bld h2 { color: #fff; }
#packages .bld > p { color: rgba(255,255,255,0.6); }
#packages .nav-dots { display: flex; justify-content: center; gap: 34px; margin: 42px 0 6px; }
#packages .nav-dots span { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.4); cursor: pointer; position: relative; padding-bottom: 12px; transition: color 0.3s; }
#packages .nav-dots span.on { color: #fff; }
#packages .nav-dots span::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform 0.3s; }
#packages .nav-dots span.on::after { transform: scaleX(1); }
#packages .stage { position: relative; margin-top: 34px; min-height: 300px; perspective: 1400px; }
#packages .panel { background: #fff; border-radius: 18px; padding: 44px 40px; text-align: left; display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; box-shadow: 0 30px 80px rgba(0,0,0,0.5); }
#packages .ptier { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
#packages .pname { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin: 4px 0 10px; }
#packages .pdesc { color: var(--muted); font-size: 14px; max-width: 380px; margin-bottom: 18px; }
#packages .pfeats { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 26px; }
#packages .pfeats li { font-size: 13px; padding: 5px 0 5px 22px; position: relative; break-inside: avoid; color: var(--text); }
#packages .pfeats li::before { content: "✓"; position: absolute; left: 0; top: 5px; width: 15px; height: 15px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 8px; display: flex; align-items: center; justify-content: center; }
#packages .pright { text-align: center; }
#packages .pprice { font-size: 54px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); line-height: 1; }
#packages .pprice span { font-size: 15px; font-weight: 400; color: var(--muted); }
#packages .pcta { display: inline-block; margin-top: 16px; background: var(--brand); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 14px 30px; border-radius: 4px; white-space: nowrap; }
#packages .progress { height: 3px; background: rgba(255,255,255,0.12); border-radius: 3px; max-width: 560px; margin: 30px auto 0; overflow: hidden; }
#packages .progress i { display: block; height: 100%; width: 100%; background: var(--brand); transform-origin: left; transform: scaleX(0); }
#packages .progress i.run { animation: bar var(--dur) linear forwards; }
#packages .pk-note { color: rgba(255,255,255,0.55); margin-top: 40px; }
#packages .pk-note strong { color: #fff; }
#packages .pk-note a { color: #fff; border-bottom: 1px solid rgba(255,255,255,0.5); }
@keyframes bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fxSlideL { from { opacity: 0; transform: translateX(70px); } to { opacity: 1; transform: none; } }
@keyframes fxFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fxZoom { from { opacity: 0; transform: scale(0.88); } to { opacity: 1; transform: scale(1); } }
@keyframes fxFlip { from { opacity: 0; transform: rotateY(22deg) translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes fxUp { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } }
@keyframes fxBlur { from { opacity: 0; filter: blur(16px); } to { opacity: 1; filter: blur(0); } }
@media (max-width: 760px) { #packages .panel { grid-template-columns: 1fr; gap: 20px; padding: 34px 26px; } #packages .nav-dots { gap: 16px; } #packages .pright { text-align: left; } }
/* Square mosaic reveal transition */
#packages .panel { position: relative; }
#packages .tiles { position: absolute; inset: 0; border-radius: 18px; overflow: hidden; display: grid; pointer-events: none; z-index: 5; }
#packages .tiles b { background: #0c0c0c; animation: tileOut 0.42s ease forwards; }
@keyframes tileOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.35); } }
/* ============================================================
PRICING MATRIX — comparison table on the dark #packages band
============================================================ */
.pmatrix-wrap { max-width: 1060px; margin: 40px auto 0; overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; z-index: 1; padding-bottom: 4px; }
.pmatrix { width: 100%; min-width: 820px; border-collapse: collapse; color: rgba(255,255,255,0.82); }
.pmatrix th, .pmatrix td { padding: 15px 18px; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.10); font-size: 14px; vertical-align: middle; }
/* Header row — tier name, price, CTA */
.pmatrix thead th { border-bottom: 1px solid rgba(255,255,255,0.16); padding: 10px 18px 20px; vertical-align: bottom; }
.pmatrix .pm-corner { text-align: left; }
.pmatrix .pm-corner span { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.4); }
.pm-tier { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand); font-weight: 700; margin-bottom: 6px; }
.pm-price { font-size: 30px; font-weight: 700; color: #fff; line-height: 1; }
.pm-price span { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.45); }
.pm-price.pm-poa { font-size: 19px; font-weight: 600; letter-spacing: 0.01em; }
.pm-cta { display: inline-block; margin-top: 14px; padding: 9px 20px; border: 1px solid rgba(255,255,255,0.28); border-radius: 999px; color: #fff; text-decoration: none; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; transition: background 0.25s, border-color 0.25s, color 0.25s; }
.pm-cta:hover { background: #fff; color: #0c0c0c; border-color: #fff; }
.pm-cta-on { background: var(--brand); border-color: var(--brand); }
.pm-cta-on:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: #fff; }
.pm-flag { display: inline-block; margin-bottom: 10px; padding: 3px 11px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
/* Feature rows — first column pinned, left-aligned */
.pmatrix tbody th { text-align: left; font-weight: 500; color: rgba(255,255,255,0.92); position: sticky; left: 0; background: #0c0c0c; min-width: 210px; }
.pmatrix tbody tr:hover td, .pmatrix tbody tr:hover th { background: #141414; }
.pmatrix td.y { color: var(--brand); font-weight: 700; font-size: 16px; }
.pmatrix td.n { color: rgba(255,255,255,0.22); }
.pmatrix td.addon { color: rgba(255,255,255,0.55); font-size: 12.5px; font-style: italic; }
.pmatrix td em { color: rgba(255,255,255,0.45); font-style: normal; font-size: 12px; }
/* Highlighted "Most popular" column */
.pmatrix .pm-pop { background: rgba(255,79,0,0.06); }
.pmatrix thead th.pm-pop { background: rgba(255,79,0,0.10); border-top: 2px solid var(--brand); border-radius: 12px 12px 0 0; }
.pmatrix tbody tr:hover td.pm-pop { background: rgba(255,79,0,0.12); }
.pm-note { max-width: 760px; margin: 26px auto 0; text-align: center; }
/* Tailored call-out below the matrix */
.tailored-cta { max-width: 700px; margin: 38px auto 0; text-align: center; padding: 34px 24px 6px; border-top: 1px solid rgba(255,255,255,0.12); }
.tailored-eyebrow { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand); font-weight: 700; margin-bottom: 10px; }
.tailored-cta h3 { color: #fff; font-size: 25px; margin: 0 0 12px; }
.tailored-cta p { color: rgba(255,255,255,0.62); margin: 0 auto 22px; max-width: 600px; }
@media (max-width: 640px) {
.pmatrix th, .pmatrix td { padding: 12px 13px; font-size: 13px; }
.pm-price { font-size: 24px; }
.pmatrix tbody th { min-width: 165px; font-size: 12.5px; }
}
/* --- Three-pillar What We Deliver (2026-07-21) --- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-bottom: 56px; }
.pillar { background: transparent; border: 0; padding: 0; }
.pillar h3 { font-size: 27px; letter-spacing: -0.5px; margin-bottom: 8px; }
.pillar > p { color: var(--muted); font-size: 15.5px; margin-bottom: 22px; }
.pillar ul { list-style: none; }
.pillar li { position: relative; padding-left: 24px; font-size: 15px; line-height: 1.45; margin-bottom: 12px; color: var(--ink); }
.pillar li::before { content: "→"; position: absolute; left: 0; color: var(--brand); font-weight: 700; }
.pillar-dark { background: var(--ink); border-color: var(--ink); }
.pillar-dark h3 { color: #fff; }
.pillar-dark > p { color: rgba(255,255,255,0.65); }
.pillar-dark li { color: rgba(255,255,255,0.85); }
@media (max-width: 900px) { .pillars { grid-template-columns: 1fr; } }
.pillar .flow-label { font-size: 12.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand); margin-bottom: 14px; }
/* --- Website & Go-Live band (2026-07-21) --- */
.golive { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 28px; }
.golive-panel { background: var(--soft); border: 1px solid var(--line); padding: 44px 42px; }
.golive-panel .flow-label { font-size: 12.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand); margin-bottom: 14px; }
.golive-panel h3 { font-size: 25px; letter-spacing: -0.4px; margin-bottom: 10px; }
.golive-panel p { color: var(--muted); font-size: 15.5px; line-height: 1.55; }
.golive-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.badge-chip { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); padding: 10px 18px; font-size: 14px; font-weight: 600; color: var(--ink); border-radius: 3px; }
@media (max-width: 900px) { .golive { grid-template-columns: 1fr; } }
/* --- Get started: two steps + payoff (2026-07-21) --- */
.startline { display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 0; border: 1px solid var(--line); background: #fff; }
.sl-step { padding: 44px 38px; border-right: 1px solid var(--line); }
.sl-step:last-child { border-right: 0; }
.sl-num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--brand); color: var(--brand); font-weight: 700; font-size: 15px; margin-bottom: 18px; }
.sl-step h3 { font-size: 23px; letter-spacing: -0.3px; margin-bottom: 8px; }
.sl-step p { color: var(--muted); font-size: 15.5px; line-height: 1.5; }
.sl-payoff { background: var(--ink); }
.sl-payoff .sl-num { background: var(--brand); border-color: var(--brand); color: #fff; }
.sl-payoff h3 { color: #fff; }
.sl-payoff p { color: rgba(255,255,255,0.78); }
.sl-tick { color: var(--brand); font-weight: 700; margin-right: 8px; }
@media (max-width: 860px) { .startline { grid-template-columns: 1fr; } .sl-step { border-right: 0; border-bottom: 1px solid var(--line); } }
/* --- The shop window: the problem section (2026-07-21) --- */
#shopwindow { background: var(--bg); }
.sw-wrap { max-width: 760px; margin: 0 auto; text-align: center; }
.sw-h { color: var(--ink); font-size: clamp(30px, 4.2vw, 52px); line-height: 1.1; margin-bottom: 26px; }
.sw-h .sw-em { color: var(--brand); }
/* --- Build standard: why the website is actually good (2026-07-21) --- */
.buildstd { margin-top: 28px; border: 1px solid var(--line); background: #fff; padding: 44px; display: grid; grid-template-columns: 300px 1fr; gap: 44px; align-items: start; }
.buildstd .flow-label { font-size: 12.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand); margin-bottom: 12px; }
.bs-head p { color: var(--muted); font-size: 15.5px; line-height: 1.55; }
.bs-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 34px; }
.bs-list li { position: relative; padding-left: 26px; }
.bs-list li::before { content: "✓"; position: absolute; left: 0; top: 1px; color: var(--brand); font-weight: 700; }
.bs-list strong { display: block; font-size: 15.5px; margin-bottom: 3px; color: var(--ink); }
.bs-list span { color: var(--muted); font-size: 14.5px; line-height: 1.5; }
@media (max-width: 900px) { .buildstd { grid-template-columns: 1fr; gap: 28px; padding: 34px; } .bs-list { grid-template-columns: 1fr; } }
/* Grid children default to min-width:auto, so a wide inflexible child (the FB/IG
chips) can push a column past the viewport on phones. Pin them to 0 and let
the badges wrap. */
.golive-panel, .pillar, .sl-step, .flow-panel, .buildstd > * { min-width: 0; }
.golive-badges { flex-wrap: wrap; }
.bs-h { font-size: 24px; letter-spacing: -0.4px; margin: 0 0 10px; }
/* Emphasis on the load-bearing words in section headings */
h2 .em { color: var(--brand); }
/* --- Pricing equation (replaced the tier matrix, 2026-07-21) --- */
.equation { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; margin: 8px 0 18px; }
.eq-part { background: #fff; border: 1px solid var(--line); padding: 26px 38px; min-width: 190px; text-align: center; }
.eq-word { font-size: 26px; font-weight: 700; letter-spacing: -0.5px; color: var(--ink); }
.eq-op { font-size: 30px; font-weight: 700; color: var(--muted); }
.eq-result { background: var(--ink); border-color: var(--ink); }
.eq-result .eq-word { color: var(--brand); }
.eq-sub { text-align: center; color: var(--muted); font-size: 16.5px; margin-bottom: 38px; }
.price-cta { text-align: center; }
.price-cta .price-note { color: var(--muted); font-size: 14px; margin-top: 20px; }
@media (max-width: 720px) { .equation { gap: 14px; } .eq-part { min-width: 0; width: 100%; padding: 20px; } .eq-op { width: 100%; text-align: center; } }
.eq-result { min-width: 300px; }
.eq-result .eq-word { font-size: 23px; line-height: 1.25; display: block; }
/* --- Pricing on the dark canvas (rebuilt 2026-07-21) --- */
#packages .section-head h2 { color: #fff; }
#packages .section-head p { color: rgba(255,255,255,0.66); }
#packages .section-head .eyebrow { color: var(--brand); }
#packages .equation { margin: 14px 0 20px; gap: 20px; }
#packages .eq-part {
background: transparent;
border: 1.5px solid rgba(255,255,255,0.22);
padding: 30px 40px;
min-width: 200px;
}
#packages .eq-word { color: #fff; }
#packages .eq-op { color: rgba(255,255,255,0.4); }
#packages .eq-result {
background: var(--brand);
border-color: var(--brand);
min-width: 320px;
}
#packages .eq-result .eq-word { color: #fff; font-size: 24px; }
#packages .eq-sub { color: rgba(255,255,255,0.6); }
#packages .price-cta .btn-primary { background: #fff; color: var(--ink); border-color: #fff; }
#packages .price-cta .btn-primary:hover { background: transparent; color: #fff; }
#packages .price-note { color: rgba(255,255,255,0.42); }
/* ============================================================
PALETTE — 2026-07-21 (rev 2)
The dark grounds go back to graphite. --ink paints 67 things on
this page — hero, shop window, dark pillar, payoff step, buttons,
nav — so tinting it blue tinted the whole site.
Colour now lives in a set of accents used one per surface, on
purpose: orange leads, petrol / teal / ochre carry a pillar each
and their matching section heading. Never as decoration.
============================================================ */
:root {
--ink: #1a1a1a; /* graphite — the dark ground, as approved */
--ink-deep: #101010; /* one step darker, for the hero + pricing ground */
--accent: #1a1a1a;
--accent-hover: #000000;
--petrol: #1D5C74; /* accent: the software pillar */
--teal: #2F8F83; /* accent: the service pillar */
--ochre: #E0A526; /* accent: work + FAQ */
--soft: #f6f6f4;
--line: #e5e5e5;
}
/* dark grounds move off pure black */
#packages { background: var(--ink-deep); }
#packages .tiles b { background: var(--ink-deep); }
#hero { background-color: var(--ink-deep); }
/* the three pillars each carry their own tone — the colour encodes
"three distinct things", it isn't decoration */
.pillar:nth-of-type(1) .flow-label { color: var(--brand); }
.pillar:nth-of-type(2) .flow-label { color: var(--teal); }
.pillar:nth-of-type(3) .flow-label { color: var(--petrol); }
.pillar:nth-of-type(1) li::before { color: var(--brand); }
.pillar:nth-of-type(2) li::before { color: #7FD4C8; }
.pillar:nth-of-type(3) li::before { color: var(--petrol); }
.pillar-dark { background: var(--ink); border-color: var(--ink); }
/* getting-started: the two asks stay quiet, the payoff carries the teal */
.sl-payoff { background: var(--ink); }
.sl-payoff .sl-num { background: var(--teal); border-color: var(--teal); }
/* build-standard ticks in teal so the orange stays reserved for actions */
.bs-list li::before { color: var(--teal); }
.buildstd { background: var(--soft); border-color: var(--line); }
/* go-live band: the platform panel gets the teal edge */
/* ---- Kill the numbered discs: who does what is the real information ---- */
.sl-tag {
display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.2em;
text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--line);
padding-bottom: 7px; margin-bottom: 20px;
}
.sl-tag-us { color: #8FD8CD; border-bottom-color: var(--teal); }
/* ---- Break the grid rhythm: uneven padding so the eye can't predict it ---- */
.startline { grid-template-columns: 0.92fr 0.92fr 1.24fr; }
.sl-step:nth-child(1) { padding: 46px 34px 46px 44px; }
.sl-step:nth-child(2) { padding: 58px 34px 40px; }
.sl-payoff { padding: 46px 52px 54px 46px; }
/* The three things step down the page instead of sitting in a row:
right, then centre, then left. Reads as a journey, and the white space
between them does the separating that the boxes used to do. */
.pillars { grid-template-columns: 1fr; gap: 0; position: relative; }
.pillar { max-width: 460px; }
.pillar:nth-of-type(1) { margin-left: auto; text-align: right; }
.pillar:nth-of-type(2) { margin: 72px auto; text-align: center; }
.pillar:nth-of-type(3) { margin-right: auto; text-align: left; }
@media (max-width: 760px) {
.pillar, .pillar:nth-of-type(1), .pillar:nth-of-type(2), .pillar:nth-of-type(3) {
margin: 0 0 44px; text-align: left; max-width: none;
}
.pillar:last-child { margin-bottom: 0; }
}
.golive { grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 0; align-items: start; }
/* the website panel reads from the right — arrows flip to the right edge
with it, or the bullets point away from their own text */
.golive-panel:nth-of-type(1) { text-align: right; }
.golive-panel:nth-of-type(1) .panel-list li { padding-left: 0; padding-right: 24px; }
.golive-panel:nth-of-type(1) .panel-list li::before { left: auto; right: 0; }
@media (max-width: 900px) {
.golive-panel:nth-of-type(1) { text-align: left; }
.golive-panel:nth-of-type(1) .panel-list li { padding-left: 24px; padding-right: 0; }
.golive-panel:nth-of-type(1) .panel-list li::before { left: 0; right: auto; }
}
.buildstd { grid-template-columns: 280px 1fr; padding: 40px 46px 48px 42px; }
/* ---- Spread the palette: each accent has a job, no two neighbours match ---- */
#shopwindow .sw-em { color: var(--brand); }
/* ---- Alan's sum: the problem stated as arithmetic. States the cost in the
negative here; the equation further down states the payoff in the
positive. Muted and outlined here, solid and bright there. ---- */
/* One line, set at display scale. It is the whole argument of the section,
so it gets the room a headline gets — not caption size. */
.sw-line {
font-size: clamp(21px, 2.9vw, 36px); font-weight: 700;
letter-spacing: -0.03em; line-height: 1.25; color: var(--ink);
max-width: 720px; margin: 0 auto;
border: 0; padding: 0;
}
.sw-line .sw-em { color: var(--brand); }
/* the why, under the claim — quieter, so the sentence above still lands first */
.sw-sub {
font-size: 17.5px; line-height: 1.65; color: var(--muted);
max-width: 640px; margin: 22px auto 0;
}
/* bullets inside the go-live panels match the arrow bullets in the pillars */
.panel-list { list-style: none; margin-top: 16px; }
.panel-list li { position: relative; padding-left: 24px; font-size: 15px; line-height: 1.45; margin-bottom: 10px; color: var(--ink); }
.panel-list li::before { content: "\2192"; position: absolute; left: 0; color: var(--brand); font-weight: 700; }
/* the answer to the section's question — sits just under it, at a size that
says "this is the point", not "this is a subtitle" */
.sw-answer {
font-size: clamp(19px, 2.2vw, 27px); font-weight: 700;
letter-spacing: -0.02em; line-height: 1.3; color: var(--ink);
max-width: 640px; margin: 18px auto 0;
}
#getstarted h2 .em { color: var(--teal); }
#work h2 .em { color: var(--ochre); }
#testimonials h2 .em { color: var(--teal); }
#faq h2 .em { color: var(--ochre); }
#apply h2 .em { color: var(--teal); }
#packages .section-head .eyebrow { color: #F2B441; }
#howwework .flow-panel .flow-label { color: var(--teal); }
.flow-arrow { color: var(--ochre); }
/* ---- Mobile must win: these come last so the uneven desktop grids above
cannot override the single-column breakpoints ---- */
@media (max-width: 900px) {
.startline, .pillars, .golive { grid-template-columns: 1fr !important; }
.buildstd { grid-template-columns: 1fr !important; padding: 32px !important; }
.sl-step, .sl-payoff, .golive-panel { padding: 32px 26px !important; }
}
@media (max-width: 620px) {
.sl-step, .sl-payoff, .pillar, .golive-panel, .golive-connect, .buildstd { padding: 28px 22px !important; }
}
/* ============================================================
THE METHOD — a month of content, shown as a month.
The product is rhythm, so the section that explains the work
should look like a schedule, not like three more text boxes.
============================================================ */
.month { max-width: 1000px; margin: 0 auto; }
.month-head {
display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px;
margin-bottom: 10px;
}
.month-head span {
font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--muted); text-align: center;
}
.month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.mc {
min-height: 74px; border: 1px solid var(--line); background: #fff;
display: flex; align-items: center; justify-content: center; padding: 6px;
}
.pill {
font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
padding: 6px 10px; color: #fff; white-space: nowrap;
}
.p-reel { background: var(--brand); }
.p-still { background: var(--teal); }
.p-carousel { background: var(--petrol); }
.month-key {
display: flex; flex-wrap: wrap; align-items: center; gap: 22px;
margin-top: 20px; font-size: 14px; color: var(--muted);
}
.month-key span { display: inline-flex; align-items: center; gap: 8px; }
.dot { width: 11px; height: 11px; display: inline-block; }
.d-reel { background: var(--brand); }
.d-still { background: var(--teal); }
.d-carousel { background: var(--petrol); }
.month-note { margin-left: auto; font-style: italic; }
.method {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
max-width: 1000px; margin: 64px auto 0;
}
.method-step h3 { font-size: 21px; letter-spacing: -0.3px; margin-bottom: 8px; }
.method-step p { color: var(--muted); font-size: 15.5px; line-height: 1.55; }
@media (max-width: 860px) {
.month-head { display: none; }
.month-grid { grid-template-columns: repeat(7, 1fr); gap: 4px; }
.mc { min-height: 38px; padding: 3px; }
/* the labels can't fit at phone width — the colour still carries the pattern */
.pill { font-size: 0; padding: 0; width: 14px; height: 14px; }
.month-note { margin-left: 0; }
.method { grid-template-columns: 1fr; gap: 30px; margin-top: 44px; }
}
/* Posts land day by day rather than all at once — the delay is set per pill
in DOM order, so the month fills the way a month actually fills. */
.pill { opacity: 0; transform: translateY(8px) scale(0.94); transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1); }
.month.filled .pill { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.pill { opacity: 1; transform: none; transition: none; }
}
/* Team band — the faces go back on the page, full width, above the method */
.team-band {
background-image: url('https://images.unsplash.com/photo-1521737604893-d14cc237f11d?w=1800&h=800&fit=crop&auto=format');
background-size: cover; background-position: center 38%;
height: clamp(260px, 34vw, 460px);
}
/* ---- Mobile: the two call-to-actions were fighting the content ----
The nav button was wide enough to squeeze the logo and the burger, and
the floating button sat on top of body copy mid-paragraph. On phones the
burger menu already carries a Book a Free Call, so the nav button goes,
and the floating one becomes a full-width bar pinned to the bottom edge
with room reserved for it, so it can never cover a line of text. */
@media (max-width: 620px) {
.nav-cta { display: none; }
#float-cta {
left: 14px; right: 14px; bottom: 14px;
text-align: center; padding: 15px 20px;
box-shadow: 0 6px 24px rgba(0,0,0,0.18);
}
body { padding-bottom: 78px; }
}
/* ---- Make it read as a calendar, not a mosaic ----
Every day carries its date, the weekday row stays on phones (single
letters), and the cell is laid out date-first with the post underneath. */
.mc {
flex-direction: column; align-items: flex-start; justify-content: flex-start;
gap: 6px; padding: 8px 8px 10px;
}
.md {
font-size: 12px; font-weight: 600; color: var(--muted); line-height: 1;
}
.month-grid .pill { align-self: flex-start; }
@media (max-width: 860px) {
.month-head { display: grid; }
.month-head span { font-size: 0; }
.month-head span::after {
content: attr(data-d); font-size: 11px; letter-spacing: 0.06em;
}
.mc { min-height: 52px; padding: 5px 5px 6px; gap: 4px; }
.md { font-size: 10.5px; }
.pill { width: 100%; height: 10px; }
}
/* ---- An actual calendar ----
Real month (July 2026), real weekday alignment, the spill days from June
and August greyed at the edges, and one continuous ruled grid rather than
detached tiles. The chrome is what makes it read as a calendar on sight. */
.month { border: 1px solid var(--line); background: var(--line); }
.month-head {
gap: 1px; margin-bottom: 0; background: var(--line);
border-bottom: 1px solid var(--line);
}
.month-head span { background: #fff; padding: 10px 0; }
.month-grid { gap: 1px; background: var(--line); }
.mc { border: 0; min-height: 92px; }
.mc.out { background: #fbfbfa; }
.mc.out .md { color: #c8c8c4; }
.md { font-size: 13px; }
@media (max-width: 860px) {
.mc { min-height: 54px; }
}
/* ---- Creating the content: the ask, and the answer to it ----
Two statements at display size. The imbalance is the point — what we ask
of them is one line, what we take on is everything else. */
.ask { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: start; max-width: 1000px; margin: 0 auto; }
.ask-big { font-size: clamp(24px, 3.2vw, 40px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.15; color: var(--ink); }
.ask-us .ask-big { color: var(--brand); }
.ask .flow-label { font-size: 12.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
@media (max-width: 860px) { .ask { grid-template-columns: 1fr; gap: 34px; } }
/* ---- Calendar sits smaller on the page — it's a supporting illustration,
not the hero of the section ---- */
.month { max-width: 720px; }
.mc { min-height: 62px; padding: 6px 7px 8px; gap: 4px; }
.md { font-size: 11.5px; }
.month-head span { padding: 8px 0; font-size: 10.5px; }
.pill { font-size: 11px; padding: 4px 7px; }
.month-key { font-size: 13px; gap: 16px; margin-top: 16px; }
@media (max-width: 860px) { .mc { min-height: 46px; } }
/* smaller again */
.month { max-width: 560px; }
.mc { min-height: 48px; padding: 5px 6px 6px; gap: 3px; }
.md { font-size: 10.5px; }
.month-head span { padding: 7px 0; font-size: 9.5px; }
.pill { font-size: 9.5px; padding: 3px 5px; }
.month-key { font-size: 12.5px; }
@media (max-width: 860px) { .mc { min-height: 42px; } }
/* ---- Calendar responsive labels, done in markup so no later rule can
re-break it: full weekday names on desktop, initials on phones;
post labels hidden on phones where they cannot fit. ---- */
.pill span { display: inline; }
@media (max-width: 860px) {
.month-head span { font-size: 10px; padding: 8px 0; }
.pill span { display: none; }
.pill { display: block; width: 100%; height: 9px; padding: 0; }
.mc { min-height: 50px; padding: 5px 4px 6px; }
.md { font-size: 11px; }
}
/* legend stays on one line inside the strip; the caveat sits under the
calendar instead of doubling the strip's height */
.month-key { flex-wrap: nowrap; justify-content: center; }
.month-note {
margin: 14px auto 0; text-align: center; font-style: italic;
font-size: 13.5px; color: var(--muted); max-width: 560px;
}
/* the real upload panel, shown as a screen rather than a floating png */
.ask { grid-template-columns: 1fr 1.05fr; align-items: center; }
.ask-sub { margin-top: 16px; font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 420px; }
.ask-shot img {
display: block; width: 100%; height: auto;
border: 1px solid var(--line); background: #fff;
box-shadow: 0 18px 44px rgba(0,0,0,0.09);
}
@media (max-width: 860px) { .ask { grid-template-columns: 1fr; } .ask-sub { max-width: none; } }
/* ============================================================
THE SPINE — 2026-07-21 (rev 3)
Alan's brief: the whole product told as one motion, in his order —
you send, we make it, you approve, it goes in the calendar, we
report back. It replaced four separate panels that told the same
story out of sequence (the calendar used to land BEFORE the upload,
so the payoff arrived before the ask).
The YOU / US tag is the load-bearing idea, not decoration: the
reader can see at a glance that only two of the five beats are
theirs. No numerals — they read as AI-generated on client work.
============================================================ */
.spine { max-width: 1080px; margin: 0 auto; }
.sp-beat {
display: grid; grid-template-columns: 1fr 1.05fr; gap: 60px;
align-items: center; margin-bottom: 104px;
}
.sp-beat:last-child { margin-bottom: 0; }
/* the visual swaps sides beat to beat so the page never settles into
a column the eye can predict */
.sp-beat.rev .sp-say { order: 2; }
.sp-beat.rev .sp-show { order: 1; }
/* the two beats that are pure statement get the full width and the
centre — they are the breath between the three that carry a visual */
.sp-beat.solo { grid-template-columns: 1fr; text-align: center; margin-bottom: 104px; }
.sp-beat.solo .sp-say { max-width: 720px; margin: 0 auto; }
.sp-beat.solo .sp-sub { margin-left: auto; margin-right: auto; }
.sp-tag {
display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.2em;
text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--line);
padding-bottom: 7px; margin-bottom: 20px;
}
.sp-tag-us { color: var(--teal); border-bottom-color: var(--teal); }
.sp-big {
font-size: clamp(23px, 3vw, 38px); font-weight: 800; letter-spacing: -0.035em;
line-height: 1.15; color: var(--ink);
}
.sp-sub {
margin-top: 16px; font-size: 16.5px; line-height: 1.6;
color: var(--muted); max-width: 460px;
}
.sp-shot {
display: block; width: 100%; height: auto;
border: 1px solid var(--line); background: #fff;
box-shadow: 0 18px 44px rgba(0,0,0,0.09);
}
/* the three formats carry the same colours as the pills in the calendar
below, so "reel / still / carousel" is already learned by the time the
month fills in */
.fmt { display: grid; gap: 14px; }
.fmt-card {
background: #fff; border: 1px solid var(--line); border-left-width: 5px;
padding: 20px 24px;
}
.fmt-name { display: block; font-size: 18px; font-weight: 700; letter-spacing: -0.2px; color: var(--ink); }
.fmt-note { display: block; margin-top: 5px; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.f-reel { border-left-color: var(--brand); }
.f-still { border-left-color: var(--teal); }
.f-carousel { border-left-color: var(--petrol); }
/* the calendar fills whatever column it is given rather than sitting
small and centred inside it */
.sp-show .month { max-width: 100%; margin: 0; }
.sp-show .month-note { margin-left: 0; margin-right: 0; text-align: left; max-width: none; }
@media (max-width: 900px) {
.sp-beat, .sp-beat.rev { grid-template-columns: 1fr !important; gap: 30px; margin-bottom: 68px; }
.sp-beat.rev .sp-say { order: 1; }
.sp-beat.rev .sp-show { order: 2; }
.sp-beat.solo { margin-bottom: 68px; }
.sp-sub { max-width: none; }
.sp-show .month-note { text-align: center; }
}
/* the right-aligned website panel was orphaning its last word ("asks")
onto a line of its own — balance the wrap instead of cutting the copy */
.panel-list li { text-wrap: balance; }
/* the spine lines are , not
, so they need the emphasis rule
spelled out — one orange word per beat, same grammar as the rest
of the page */
.sp-big .em { color: var(--brand); }
/* the highlight moves onto "Pick a plan" — that is the step that decides
it, so it gets the dark ground and the wider column. The padding and
the column width travel with the highlight, not with the position. */
.startline { grid-template-columns: 0.92fr 1.24fr 0.92fr; }
.sl-step:nth-child(2) { padding: 46px 52px 54px 46px; }
.sl-step:nth-child(3) { padding: 58px 34px 46px 40px; }
.sl-payoff .sl-tag { color: rgba(255,255,255,0.72); border-bottom-color: rgba(255,255,255,0.3); }
.sl-tag-us { color: var(--teal); border-bottom-color: var(--teal); }
/* ============================================================
THE WORDMARK — 2026-07-21
Was: both words in the nav's own weight, "Blitz" at 300 — the
lightest weight on the site — so the brand name read as a nav
link and the accent treatment in the brand profile was never
applied. Now built from the page's own typographic signature:
a short declarative phrase, one word in orange, ending in a
full stop. Same device as "Perfectly timed." and "That's it."
so the logo is the smallest instance of the brand's voice.
============================================================ */
.logo {
font-weight: 800;
font-size: 22px;
letter-spacing: -0.045em;
color: var(--ink);
line-height: 1;
}
.logo span { font-weight: 800; color: var(--brand); }
.logo i { font-style: normal; color: var(--brand); }
.logo-inv { color: #fff; }
@media (max-width: 620px) { .logo { font-size: 20px; } }
/* ---- The real wordmark (2026-07-21). Letterforms are outlined vector,
not live text, so it renders as Poppins with no font installed —
favicon, avatar, email signature, anyone else's machine. The
designer's original live-text files are kept in
brand/_original-from-designer/ for future edits. ---- */
.logo img { display: block; height: 26px; width: auto; }
footer .logo img { height: 30px; }
@media (max-width: 620px) { .logo img { height: 22px; } }
/* ============================================================
COLOUR BALANCE — 2026-07-21 (rev 4)
Orange was carrying every eyebrow, every heading emphasis and
all five spine beats, so the page read as one colour.
New rule, applied top to bottom:
ORANGE = actions and money only. Buttons, the price, and the
single differentiator word ("bespoke"). Nothing else.
PETROL = the problem, the client's own steps, the detail.
TEAL = the answer, our steps, the reassurance.
No two neighbouring sections carry the same accent.
============================================================ */
/* --- the problem: cool and serious --- */
#shopwindow .sw-em { color: var(--petrol); }
/* --- the answer: the turn to the positive --- */
#howwework h2 .em { color: var(--teal); }
#howwework .eyebrow { color: var(--teal); }
/* --- pricing: the eyebrow steps back so the number owns the orange --- */
#packages .section-head .eyebrow { color: var(--teal); }
/* --- included / going live: one accent per panel --- */
#included .golive-panel:nth-of-type(1) .flow-label { color: var(--petrol); }
#included .golive-panel:nth-of-type(1) .panel-list li::before { color: var(--petrol); }
#included .golive-panel:nth-of-type(2) .flow-label { color: var(--teal); }
#included .golive-panel:nth-of-type(2) .panel-list li::before { color: var(--teal); }
/* --- the spine: colour now carries the you/us idea instead of
decorating it. Their steps are petrol, ours are teal, and the
one differentiator word keeps the orange. --- */
#howdo .section-head .eyebrow { color: var(--petrol); }
#howdo h2 .em { color: var(--teal); }
.sp-beat .sp-tag { color: var(--petrol); border-bottom-color: var(--petrol); }
.sp-beat .sp-tag-us { color: var(--teal); border-bottom-color: var(--teal); }
.sp-beat .sp-big .em { color: var(--petrol); }
.sp-beat:has(.sp-tag-us) .sp-big .em { color: var(--teal); }
/* the one exception, deliberate: the differentiator keeps the orange */
.sp-beat .sp-big .em-brand { color: var(--brand); }
/* --- work: gold stars (stars are gold, not orange), petrol domains --- */
#work .section-head .eyebrow { color: var(--teal); }
#work h2 .em { color: var(--brand); }
#work .work-domain { color: var(--petrol); }
.quote .stars { color: var(--ochre); }
/* --- faq --- */
#faq .section-head .eyebrow { color: var(--petrol); }
#faq h2 .em { color: var(--petrol); }
.faq-item.open .faq-icon { background: var(--petrol); border-color: var(--petrol); }
/* --- getting started --- */
#getstarted .section-head .eyebrow { color: var(--teal); }
#getstarted h2 .em { color: var(--teal); }
/* --- contact: close on the brand colour, right before the CTA --- */
#apply .section-head .eyebrow, #apply .eyebrow { color: var(--brand); }
#apply h2 .em { color: var(--brand); }
/* ============================================================
ORANGE IS RESERVED FOR THE HERO — 2026-07-21 (rev 5), Alan's call.
The logo's orange "Blitz." and the hero's "Perfectly timed." now
form one coherent band at the top of the page; below it the story
is told entirely in petrol and teal, alternating so no two
neighbouring sections match.
The ONE exception is action: buttons stay orange, because orange
is how the page says "press this". Reversible in a line.
============================================================ */
/* the spine — explicit class, not :has(), so Safari can't get it wrong */
.sp-beat .sp-big .em { color: var(--petrol); }
.sp-beat.us .sp-big .em { color: var(--teal); }
/* pricing: the number moves to the light teal so it still leaps off
the near-black ground without reaching for orange */
#packages h2 .em { color: #8FD8CD; }
#packages .eq-result { background: var(--teal); border-color: var(--teal); }
#packages .price-cta .btn-primary { background: #fff; color: var(--ink); border-color: #fff; }
/* the calendar + format code loses its orange: reels take the ochre,
stills teal, carousels petrol — still three distinct, no orange */
.p-reel, .d-reel { background: var(--ochre); }
.f-reel { border-left-color: var(--ochre); }
/* selected work + contact come off orange */
#work h2 .em { color: var(--petrol); }
#apply .section-head .eyebrow, #apply .eyebrow { color: var(--teal); }
#apply h2 .em { color: var(--teal); }
/* small orange leftovers below the hero */
.work-grid .work-domain { color: var(--petrol); }
.faq-item.open .faq-icon { background: var(--petrol); border-color: var(--petrol); }
form.enquiry input:focus, form.enquiry select:focus, form.enquiry textarea:focus { border-color: var(--teal); }
/* the pricing band carried an orange radial glow — the last piece of
orange below the hero. Retuned to the teal so the section's warmth
comes from the accent it actually uses. */
#packages::before {
background: radial-gradient(ellipse at center, rgba(47,143,131,0.22), rgba(47,143,131,0.06) 45%, transparent 70%);
}
/* ============================================================
COLOUR — rev 6. Rev 5 went too far: reserving orange for the
hero left the whole page blue and green. The brief was an EVEN
spread of the three, so orange comes back as an equal third —
never the default, but present all the way down the page.
Rotation, top to bottom, no two neighbours alike:
hero ORANGE · problem PETROL · answer TEAL · pricing ORANGE ·
included PETROL+TEAL · spine (you PETROL / us TEAL, headline
and the differentiator ORANGE) · work ORANGE · faq PETROL ·
getting started TEAL · contact ORANGE
============================================================ */
/* pricing goes back to orange — it is the money section */
#packages h2 .em { color: var(--brand); }
#packages .eq-result { background: var(--brand); border-color: var(--brand); }
#packages::before {
background: radial-gradient(ellipse at center, rgba(255,79,0,0.20), rgba(255,79,0,0.05) 45%, transparent 70%);
}
/* the spine keeps the you/us logic in petrol and teal, but the
section headline and the one differentiator word carry orange so
the biggest section on the page is not colourless */
#howdo h2 .em { color: var(--brand); }
.sp-beat .sp-big .em-brand { color: var(--brand); }
/* reels go back to orange in both the calendar and the format cards —
it was always the natural code, and it puts orange mid-page */
.p-reel, .d-reel { background: var(--brand); }
.f-reel { border-left-color: var(--brand); }
/* work and contact close on orange */
#work h2 .em { color: var(--brand); }
#apply .section-head .eyebrow, #apply .eyebrow { color: var(--brand); }
#apply h2 .em { color: var(--brand); }
/* "look" is the hook of the whole section, so it takes the orange;
"assumption" and "doubt" stay petrol as the consequence pair.
Scoped by parent — the headline vs the line beneath it — so no
markup change was needed. */
#shopwindow .sw-h .sw-em { color: var(--brand); }
/* Alan's call: the whole problem section carries the orange —
"look", "assumption" and "doubt" together. */
#shopwindow .sw-em { color: var(--brand); }
/* Alan's call: pricing stays GREEN. The number takes the light mint so
it still leaps off the near-black, the sum block and the glow follow. */
#packages h2 .em { color: #8FD8CD; }
#packages .eq-result { background: var(--teal); border-color: var(--teal); }
#packages::before {
background: radial-gradient(ellipse at center, rgba(47,143,131,0.22), rgba(47,143,131,0.06) 45%, transparent 70%);
}
/* "yes" takes the orange — it is the reassurance the whole spine is
built around, same treatment as "bespoke". */
.sp-beat .sp-big .em-brand { color: var(--brand); }
/* the ask splits its two words: pictures green, videos orange —
the two things we want off their phone, given equal weight but
distinct colour so neither reads as an afterthought. */
.sp-beat .sp-big .em-green { color: var(--teal); }