/* Made by tools/bundle-home-css.mjs from fonts.css, base.css, case.css, home.css, prices.css, home-hero.css, about.css, type.css. Edit those, then run it again. */
/* ===== fonts.css ===== */
/* Poppins, self-hosted (latin + latin-ext) so text paints without waiting on Google Fonts */
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 500; font-display: swap; src: url(../fonts/poppins-500i-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 500; font-display: swap; src: url(../fonts/poppins-500i-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 600; font-display: swap; src: url(../fonts/poppins-600i-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 600; font-display: swap; src: url(../fonts/poppins-600i-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/poppins-300-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/poppins-300-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/poppins-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/poppins-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/poppins-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/poppins-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/poppins-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/poppins-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/poppins-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/poppins-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/poppins-800-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/poppins-800-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Stand-in while Poppins loads: Arial resized to Poppins's proportions, so text takes the same space and nothing jumps when Poppins arrives. */
@font-face { font-family: "Poppins Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"); ascent-override: 93.62%; descent-override: 31.21%; line-gap-override: 8.92%; size-adjust: 112.16%; unicode-range: U+0-FF, U+100-2BA, U+2BB-2BC, U+2BD-2C5, U+2C6, U+2C7-2CC, U+2CE-2D7, U+2DA, U+2DC, U+2DD-2FF, U+304, U+308, U+329, U+131, U+152-153, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2000-206F, U+2020, U+20A0-20AB, U+20AC, U+20AD-20C4, U+2113, U+2122, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD; }
/* ===== base.css ===== */
/* Portfolio frame: white, Poppins, grey accents and highlighter-pen marks.
Client brand work sits inside this frame in .panel blocks that carry
the client's own tokens (see case.css + per-project css). */
:root {
--white: #ffffff;
--ink: #18181a;
--grey-1: #f5f5f4;
--grey-2: #ebebea;
--grey-3: #d6d6d4;
--grey-5: #8a8a87;
--grey-7: #4d4d4b;
--line: rgb(24 24 26 / 0.1);
/* Highlighter pens */
--hl-yellow: #fff04d;
--hl-orange: #ffb547;
--hl-blue: #7fd0ff;
--hl-pink: #ff9ed2;
--hl-green: #9df27a;
--hl-purple: #cbb8ff;
--font: "Poppins", "Poppins Fallback", ui-sans-serif, system-ui, sans-serif;
--gutter: clamp(16px, 4vw, 56px);
--max: 1320px;
--radius-s: 8px;
--radius-m: 16px;
--radius-l: 28px;
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--shadow: 0 1px 2px rgb(24 24 26 / 0.04), 0 12px 32px -12px rgb(24 24 26 / 0.18);
--z-nav: 50;
--z-lightbox: 80;
color-scheme: only light; /* light only: also opts out of browsers' forced dark modes */
--nav-bg: rgb(255 255 255 / 0.78);
--veil: rgb(255 255 255 / 0.94);
--hl-text: currentColor;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--white);
color: var(--ink);
font-family: var(--font);
font-size: 16px;
font-weight: 400;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.08; letter-spacing: -0.035em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.label {
display: inline-flex; align-items: center; gap: 10px;
font-size: 13px; font-weight: 500; color: var(--grey-5); letter-spacing: 0.01em;
}
.label::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.skip {
position: absolute; left: 12px; top: -60px; z-index: 100;
padding: 10px 16px; border-radius: var(--radius-s);
background: var(--ink); color: var(--white); text-decoration: none;
}
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* ---------- Highlighter ----------
word, optionally hl--orange / hl--blue / hl--pink.
The swipe draws in when .is-lit is added (case.js does this on scroll). */
.hl {
--pen: var(--hl-yellow);
color: var(--hl-text);
background: none;
padding: 0 0.12em;
margin: 0 -0.06em;
border-radius: 0.2em 0.35em 0.25em 0.4em;
background-image: linear-gradient(100deg, transparent 0.4%, var(--pen) 1.2%, var(--pen) 96%, transparent 99%);
background-repeat: no-repeat;
background-position: 0 60%;
background-size: 0% 72%;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
transition: background-size 0.9s var(--ease-out);
}
.hl.is-lit, .no-js .hl { background-size: 100% 72%; }
.hl--orange { --pen: var(--hl-orange); }
.hl--green { --pen: var(--hl-green); }
.hl--purple { --pen: var(--hl-purple); }
.hl--blue { --pen: var(--hl-blue); }
.hl--pink { --pen: var(--hl-pink); }
/* ---------- Nav ---------- */
/* anchor jumps (#who, #work...) land with clear space under the floating nav, so chapter labels never touch it */
html { scroll-padding-top: 48px; }
@media (max-width: 560px) { html { scroll-padding-top: 44px; } }
.site-nav {
position: fixed; inset: 12px 12px auto; z-index: var(--z-nav);
display: flex; align-items: center; justify-content: space-between; gap: 16px;
max-width: var(--max); margin-inline: auto;
padding: 10px 10px 10px 20px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--nav-bg);
backdrop-filter: blur(14px) saturate(1.4);
-webkit-backdrop-filter: blur(14px) saturate(1.4);
transition: transform 0.5s var(--ease-out);
}
.site-nav.is-hidden { transform: translateY(calc(-100% - 20px)); }
.site-nav a { text-decoration: none; }
.site-nav__mark { display: inline-grid; grid-template-columns: auto auto; align-items: center; column-gap: 10px; font-weight: 700; font-size: 20px; line-height: 1; letter-spacing: -0.025em; text-decoration: none; white-space: nowrap; }
/* JB mark: a yellow keyboard key with the Poppins Bold JB ligature on its top face.
Hover: the key top presses down into its skirt. */
.jb-mark { display: block; width: 38px; height: 38px; flex: none; }
.jb-mark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.jb-mark__cap { transition: transform 0.25s var(--ease-out); }
.site-nav__mark:hover .jb-mark__cap { transform: translateY(2.4px); }
.site-nav__mark > span:not(.jb-mark) { display: none; }
.site-nav__links { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 500; }
.site-nav__links a { padding: 8px 14px; border-radius: 999px; transition: background 0.2s; }
.site-nav__links a:hover { background: var(--grey-1); }
.site-nav__links .is-cta { background: var(--ink); color: var(--white); }
.site-nav__links .is-cta:hover { background: var(--grey-7); }
@media (max-width: 560px) {
.site-nav { inset: 10px 10px auto; padding: 7px 7px 7px 12px; gap: 8px; }
.site-nav__links a:not(.is-cta) { display: none; }
.site-nav__mark { font-size: 18px; column-gap: 9px; }
.site-nav__mark .jb-mark { width: 40px; height: 40px; }
.site-nav__links { gap: 6px; }
.site-nav__links .is-cta { padding: 8px 12px; font-size: 13px; white-space: nowrap; }
}
@media (max-width: 400px) {
.site-nav__mark { font-size: 17px; letter-spacing: -0.03em; }
.site-nav__mark .jb-mark { width: 38px; height: 38px; }
.site-nav__links { gap: 5px; }
.site-nav__links .is-cta { padding: 8px 10px; font-size: 12.5px; }
}
/* four page links (Work, Print, About, FAQs) only fit from ~640px up */
@media (max-width: 900px) { .site-nav__links a:not(.is-cta) { display: none; } }
/* ---------- Phone menu: burger + a full-screen sheet that wipes out from it ---------- */
.nav-burger { display: none; place-items: center; align-content: center; gap: 5px; width: 40px; height: 40px; flex: none; border: 1px solid var(--line); border-radius: 50%; background: var(--grey-1); color: var(--ink); cursor: pointer; padding: 0; transition: background 0.3s, color 0.3s; }
.nav-burger i { display: block; width: 16px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.45s var(--ease-spring); }
.site-nav.is-open .nav-burger { background: var(--hl-yellow); color: #18181a; border-color: transparent; }
.site-nav.is-open .nav-burger i:first-child { transform: translateY(3.5px) rotate(45deg); }
.site-nav.is-open .nav-burger i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
html.nav-locked { overflow: hidden; }
.nav-menu {
--ox: calc(100% - 40px); --oy: 40px;
position: fixed; inset: 0; z-index: calc(var(--z-nav) - 1); isolation: isolate; overflow-y: auto; overscroll-behavior: contain;
}
/* the white wipe: a small circle at the burger scaled up to cover the screen (a transform, so the
phone's GPU runs it; animating a clip-path repaints the whole screen every frame) */
.nav-menu::before {
content: ""; position: fixed; z-index: -1; left: var(--ox); top: var(--oy); width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%;
background: var(--white); transform: scale(0); transition: transform 0.5s cubic-bezier(.7, 0, .2, 1); will-change: transform;
}
.nav-menu.is-in::before { transform: scale(var(--k, 120)); transition-duration: 0.6s; }
.nav-menu__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; min-height: 100%; padding: 92px var(--gutter, 18px) calc(26px + env(safe-area-inset-bottom)); align-content: start; }
/* everything inside rises in, one after another */
.nm-pages a, .nm-work a, .nm-foot > * { opacity: 0; translate: 0 22px; transition: opacity 0.3s, translate 0.3s; }
.nav-menu.is-in .nm-pages a, .nav-menu.is-in .nm-work a, .nav-menu.is-in .nm-foot > * {
opacity: 1; translate: 0 0; transition: opacity 0.5s calc(0.18s + var(--i) * 0.045s), translate 0.7s var(--ease-spring) calc(0.18s + var(--i) * 0.045s);
}
.nm-pages { display: grid; justify-items: start; }
.nm-pages a { position: relative; isolation: isolate; padding: 2px 6px; margin-left: -6px; font-size: clamp(34px, 10.5vw, 46px); font-weight: 700; letter-spacing: -0.045em; line-height: 1.12; color: var(--ink); text-decoration: none; }
/* the highlighter swipes behind the current page and the one being pressed */
.nm-pages a::before { content: ""; position: absolute; inset: 18% -4px 8%; z-index: -1; border-radius: 4px 10px 6px 12px; background: var(--hl-yellow); transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease-out); }
.nm-pages a[aria-current="page"]::before, .nm-pages a:hover::before, .nm-pages a:focus-visible::before, .nm-pages a:active::before { transform: scaleX(1); }
.nm-pages a:focus-visible { outline: none; }
.nm-k { display: block; margin-bottom: 10px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey-5); }
/* projects: a sideways row of little phone screens on their brand colour */
.nm-work nav { display: flex; gap: 10px; margin-inline: calc(var(--gutter, 18px) * -1); padding: 4px var(--gutter, 18px) 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter, 18px); scrollbar-width: none; }
.nm-work nav::-webkit-scrollbar { display: none; }
.nm-work a { flex: 0 0 112px; display: grid; gap: 8px; scroll-snap-align: start; color: var(--ink); text-decoration: none; }
.nm-thumb { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; background: color-mix(in srgb, var(--dot) 30%, var(--white)); transition: translate 0.4s var(--ease-spring); }
.nm-thumb img { position: absolute; left: 50%; top: 12%; width: 70%; translate: -50% 0; aspect-ratio: 9 / 16; object-fit: cover; object-position: top; border-radius: 10px; border: 3px solid #18181a; background: #fff; box-shadow: 0 12px 20px -10px rgb(24 24 40 / 0.45); }
.nm-thumb--print img { top: 16%; width: 54%; aspect-ratio: 210 / 297; object-fit: cover; object-position: center; border: 0; border-radius: 3px; box-shadow: 0 10px 18px -8px rgb(24 24 40 / 0.45), 0 1px 2px rgb(24 24 40 / 0.2); }
.nm-thumb--print img:first-child { left: 38%; rotate: -9deg; }
.nm-thumb--print img:last-child { left: 62%; top: 20%; rotate: 7deg; }
.nm-work a b { font-size: 13.5px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.nm-work a[aria-current="page"] .nm-thumb { box-shadow: 0 0 0 3px var(--ink); }
.nm-work a:active .nm-thumb { translate: 0 -4px; }
.nm-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.nm-cta { display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px; border-radius: 999px; background: var(--ink); color: var(--white); font-size: 16px; font-weight: 600; text-decoration: none; }
.nm-call { display: flex; gap: 8px; }
.nm-call a { padding: 12px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
.nav-menu, .nav-menu.is-in { transition: none; }
.nm-pages a, .nm-work a, .nm-foot > *, .nav-menu.is-in .nm-pages a, .nav-menu.is-in .nm-work a, .nav-menu.is-in .nm-foot > * { transition: none; }
}
@media (max-width: 900px) {
.nav-burger { display: grid; }
}
/* ---------- Footer ---------- */
.site-foot {
margin-top: clamp(64px, 10vw, 140px);
padding: clamp(64px, 10vw, 120px) 0 28px;
background: var(--grey-1);
border-top: 1px solid var(--line);
}
.site-foot__big {
font-size: clamp(40px, 8vw, 116px); font-weight: 600; letter-spacing: -0.05em; line-height: 1;
}
.site-foot__big a { text-decoration: none; }
.site-foot__row {
display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px;
margin-top: clamp(48px, 8vw, 96px); padding-top: 20px;
border-top: 1px solid var(--line);
font-size: 14px; color: var(--grey-5);
}
.site-foot__row nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.site-foot__row a { text-decoration: none; }
.site-foot__row a:hover { color: var(--ink); }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 22px; border-radius: 999px; border: 1px solid var(--ink);
background: var(--ink); color: var(--white);
font-size: 15px; font-weight: 500; text-decoration: none; cursor: pointer;
transition: transform 0.25s var(--ease-spring), background 0.2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--grey-3); }
.btn--ghost:hover { border-color: var(--ink); }
/* ---------- Lightbox ---------- */
.lightbox {
position: fixed; inset: 0; z-index: var(--z-lightbox);
display: grid; place-items: center;
padding: clamp(16px, 4vw, 48px);
background: var(--veil);
opacity: 0; visibility: hidden;
transition: opacity 0.35s var(--ease-out), visibility 0.35s;
cursor: zoom-out;
}
.lightbox.is-open { opacity: 1; visibility: visible; backdrop-filter: blur(8px); }
.lightbox__frame { max-width: min(1400px, 100%); max-height: calc(100dvh - 64px); overflow: auto; border-radius: var(--radius-m); box-shadow: var(--shadow); }
.lightbox img { width: auto; max-height: calc(100dvh - 64px); margin: auto; }
.lightbox.is-tall img { max-height: none; width: min(1100px, 100%); }
.lightbox__close {
position: fixed; top: 16px; right: 16px;
width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line);
background: var(--white); cursor: pointer;
display: grid; place-items: center;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
.hl { background-size: 100% 72%; }
}
/* ---------- Phones: floating "start a project" bar ---------- */
.cta-bar { display: none; }
@media (max-width: 680px) {
.cta-bar {
position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: var(--z-nav);
display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 18px;
border-radius: 22px; background: var(--hl-yellow); color: #18181a;
box-shadow: 0 2px 0 #18181a, 0 18px 34px -16px rgb(24 24 40 / 0.45);
translate: 0 calc(100% + 30px); rotate: -1deg; transition: translate 0.55s var(--ease-spring), rotate 0.55s var(--ease-spring);
}
.cta-bar.is-on { translate: 0 0; rotate: 0deg; }
.cta-bar p { margin: 0; display: grid; gap: 1px; line-height: 1.2; }
.cta-bar b { font-size: clamp(15px, 4.3vw, 19px); font-weight: 700; letter-spacing: -0.025em; white-space: nowrap; }
.cta-bar p span { font-size: 14px; color: rgb(24 24 26 / 0.7); }
.cta-bar a { flex: none; padding: 11px 16px; border-radius: 999px; background: #18181a; color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.cta-bar a span { display: inline-block; transition: translate 0.3s var(--ease-out); }
.cta-bar a:active span { translate: 3px 0; }
}
@media (max-width: 680px) and (prefers-reduced-motion: reduce) { .cta-bar { transition: none; rotate: 0deg; } }
/* the floating bar is the call to action on phones, so the others step aside */
@media (max-width: 680px) {
.site-nav__links .is-cta, a.btn[href$="#contact"] { display: none !important; }
}
html.nav-locked .cta-bar { translate: 0 calc(100% + 30px); }
/* small "— Label" eyebrows above section headings are gone site-wide; labels that title a column (The brief, What I did) stay */
.label:has(+ h1), .label:has(+ h2) { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* ---------- Numbered section eyebrows ("01 Who it’s for") and the chapter pill that repeats them: hidden ---------- */
.chapter-no, .chapter-pill { display: none !important; }
.site-foot__row { flex-wrap: wrap; row-gap: 12px; min-width: 0; }
/* a contact button that should stay on phones (pages without their own contact form) */
@media (max-width: 680px) { a.btn.btn--keep[href$="#contact"] { display: inline-flex !important; } }
/* the open phone menu and its bar sit above everything on the page (the fan phones use z-index up to 50) */
.nav-menu { z-index: 900; }
.site-nav { z-index: 901; }
.site-nav.is-open { transform: none !important; }
/* ---------- Footer, structured: who I am, then Pages / Get in touch / Web design in / Guides, then the small print (columns: tools/footer.py) ---------- */
.site-foot__grid {
display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)); gap: 36px clamp(20px, 3vw, 48px);
margin-top: clamp(48px, 8vw, 96px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--line);
}
.sf-name { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); text-decoration: none; }
.sf-brand p { margin-top: 10px; max-width: 30ch; font-size: 15px; line-height: 1.55; color: var(--grey-7); }
.sf-h { margin-bottom: 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-5); }
.sf-col a { display: block; width: fit-content; padding: 5px 0; font-size: 15px; color: var(--ink); text-decoration: none; }
.sf-col a:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-foot__base {
display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px;
margin-top: clamp(36px, 5vw, 56px); padding-top: 18px; border-top: 1px solid var(--line);
font-size: 13.5px; color: var(--grey-5);
}
.site-foot__base span:last-child { display: flex; gap: 20px; }
.site-foot__base a { color: inherit; text-decoration: none; }
.site-foot__base a:hover { color: var(--ink); }
@media (max-width: 1100px) { .site-foot__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sf-brand { grid-column: 1 / -1; } }
@media (max-width: 700px) { .site-foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 380px) { .site-foot__grid { grid-template-columns: 1fr; } }
/* footer: WhatsApp as a proper button */
.sf-col a.sf-wa { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 10px 18px 10px 14px; border-radius: 999px; background: #25d366; color: #0b3d1f; font-weight: 600; text-decoration: none; }
.sf-col a.sf-wa:hover { background: #1fbf5b; text-decoration: none; }
/* ===== case.css ===== */
/* Case-study building blocks. Every project page uses these; the client's
brand comes in through the --p-* tokens set on by the project css. */
body {
--p-bg: #111;
--p-fg: #fff;
--p-muted: rgb(255 255 255 / 0.6);
--p-surface: rgb(255 255 255 / 0.06);
--p-accent: var(--hl-yellow);
--p-font: var(--font);
}
.section { padding-block: clamp(64px, 9vw, 128px); }
.section--tight { padding-block: clamp(40px, 6vw, 72px); }
.section-head { display: grid; gap: 18px; max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head h2 { font-size: clamp(32px, 4.6vw, 60px); }
.section-head p { color: var(--grey-7); font-size: 17px; max-width: 60ch; }
/* Brand panel: a rounded block in the client's colours */
.panel {
position: relative;
overflow: hidden;
border-radius: var(--radius-l);
background: var(--p-bg);
color: var(--p-fg);
font-family: var(--p-font);
isolation: isolate;
box-shadow: inset 0 0 0 1px var(--line);
}
[data-reveal] { opacity: 0; transform: translateY(28px); }
.no-js [data-reveal] { opacity: 1; transform: none; }
/* ---------- Hero ---------- */
.cs-hero { padding-top: clamp(110px, 14vw, 160px); }
.cs-hero__grid {
display: grid; gap: clamp(28px, 4vw, 56px);
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
align-items: center;
}
/* The device stage sits level with the headline, not down by the lede */
.cs-hero__grid > .stage { margin-top: -6%; }
@media (max-width: 900px) { .cs-hero__grid > .stage { margin-top: 0; } }
.cs-hero__intro { display: grid; gap: 22px; padding-bottom: 8px; }
.cs-hero h1 { font-size: clamp(50px, 7.2vw, 106px); letter-spacing: -0.055em; line-height: 0.95; }
.cs-hero__lede { font-size: clamp(17px, 1.5vw, 20px); color: var(--grey-7); max-width: 44ch; }
.cs-hero__stage { aspect-ratio: 7 / 6; display: grid; place-items: center; }
.cs-hero__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.meta {
display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px;
margin-top: clamp(32px, 5vw, 56px); padding-top: 22px;
border-top: 1px solid var(--line);
}
.meta div { display: grid; gap: 4px; align-content: start; }
.meta dt { font-size: 13px; color: var(--grey-5); }
.meta dd { margin: 0; font-size: 15px; font-weight: 500; }
@media (max-width: 900px) {
.cs-hero__grid { grid-template-columns: 1fr; }
.meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Credit pill: every project states who designed and built it */
.credit {
justify-self: start; display: inline-flex; align-items: center; gap: 10px;
padding: 7px 14px 7px 8px; border-radius: 999px;
background: var(--grey-1); border: 1px solid var(--line);
font-size: 13.5px; font-weight: 500;
}
.credit i {
width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
background: var(--hl-yellow); font-style: normal; font-size: 12px; font-weight: 700;
}
/* still being built: a soft pulsing dot instead of the tick */
.credit--dev i { position: relative; background: none; }
.credit--dev i::before, .credit--dev i::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #f59e0b; }
.credit--dev i::after { animation: credit-pulse 1.8s ease-out infinite; }
@keyframes credit-pulse { from { transform: scale(1); opacity: 0.6; } to { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .credit--dev i::after { animation: none; } }
/* ---------- Brief ---------- */
.brief { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.brief blockquote {
margin: 0; font-size: clamp(24px, 2.8vw, 38px); font-weight: 500; line-height: 1.3; letter-spacing: -0.025em;
}
.brief__body { display: grid; gap: 16px; color: var(--grey-7); }
@media (max-width: 900px) { .brief { grid-template-columns: 1fr; } }
/* ---------- Journey (concept -> final) ---------- */
.journey { display: grid; grid-template-columns: repeat(var(--steps, 3), minmax(0, 1fr)); gap: 18px; position: relative; }
.journey__step { display: grid; gap: 14px; align-content: start; }
.journey__art {
aspect-ratio: 4 / 3; border-radius: var(--radius-m); overflow: hidden;
display: grid; place-items: center; padding: 10%;
background: var(--grey-1); border: 1px solid var(--line);
transition: transform 0.5s var(--ease-spring);
}
.journey__step:hover .journey__art { transform: translateY(-6px) rotate(-0.6deg); }
.journey__art img, .journey__art svg { width: 100%; height: 100%; object-fit: contain; }
.journey__art[style*="--art-bg"] { background: var(--art-bg); border-color: transparent; }
/* Artwork that carries its own background fills the card edge to edge */
.journey__art.is-bleed { padding: 0; }
.journey__art.is-bleed img { object-fit: cover; }
/* Two lockups stacked, each on its own colour */
.journey__art.is-split { padding: 0; grid-template-rows: 1fr 1fr; place-items: stretch; }
.journey__art.is-split > span { display: grid; place-items: center; padding: 0 16%; background: var(--art-bg); }
.journey__art.is-split svg { height: auto; }
/* Logo with the network bleeding off the bottom-right corner */
.journey__art.is-system { position: relative; padding: 14%; }
.journey__art.is-system svg { height: auto; position: relative; z-index: 1; }
.journey__art.is-system img { position: absolute; right: -12%; bottom: -22%; width: 72%; height: auto; opacity: 0.6; }
.journey__step h3 { font-size: 18px; letter-spacing: -0.02em; display: flex; gap: 10px; align-items: baseline; }
.journey__step h3 span { font-size: 13px; font-weight: 500; color: var(--grey-5); }
.journey__step p { font-size: 15px; color: var(--grey-7); }
.journey__tag {
justify-self: start; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: var(--radius-s);
background: var(--hl-yellow);
}
@media (max-width: 800px) {
.journey { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.journey__step { scroll-snap-align: start; }
}
/* ---------- Idea cards ---------- */
.ideas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.idea { padding: 22px; border-radius: var(--radius-m); background: var(--grey-1); display: grid; gap: 8px; align-content: start; }
.idea b { font-size: 12px; font-weight: 600; color: var(--grey-5); }
.idea h3 { font-size: 19px; letter-spacing: -0.02em; }
.idea p { font-size: 14px; color: var(--grey-7); line-height: 1.6; }
@media (max-width: 900px) { .ideas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ---------- Logo stage with background switcher ---------- */
.logo-stage { padding: clamp(40px, 8vw, 110px) clamp(20px, 6vw, 80px); display: grid; place-items: center; min-height: 460px; transition: background 0.5s var(--ease-out), color 0.5s; }
.logo-stage__mark { width: min(680px, 100%); }
.logo-stage__switch {
position: absolute; left: 50%; bottom: 20px; translate: -50% 0;
display: flex; gap: 6px; padding: 6px; border-radius: 999px;
background: rgb(255 255 255 / 0.9); box-shadow: var(--shadow);
}
.logo-stage__switch button {
border: 0; cursor: pointer; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 500;
background: transparent; color: var(--ink); display: flex; gap: 8px; align-items: center;
}
.logo-stage__switch button i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--line); background: var(--sw); }
.logo-stage__switch button[aria-pressed="true"] { background: var(--ink); color: var(--white); }
/* ---------- Palette ---------- */
.palette { display: flex; gap: 10px; height: clamp(240px, 30vw, 380px); }
.swatch {
flex: var(--share, 1); min-width: 0;
border-radius: var(--radius-m); padding: 18px;
display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
background: var(--c); color: var(--on, #fff);
border: 1px solid var(--line);
transition: flex 0.6s var(--ease-out);
cursor: pointer; text-align: left;
}
.swatch:hover, .swatch:focus-visible { flex: calc(var(--share, 1) * 1.8); }
.swatch b { font-size: 15px; font-weight: 600; }
.swatch code { font-size: 13px; opacity: 0.75; font-family: inherit; }
.swatch .copied { font-size: 12px; opacity: 0; transition: opacity 0.2s; }
.swatch.is-copied .copied { opacity: 1; }
@media (max-width: 700px) {
/* Phones: a tidy two-column chip grid, the lead colour across the top */
.palette { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; height: auto; }
.swatch { min-height: 84px; padding: 14px 16px; }
.palette:not(.vsl-pastels):not(.np-accents):not(.bb-seasons) > .swatch:first-child { grid-column: 1 / -1; min-height: 132px; }
.palette:not(.vsl-pastels):not(.np-accents):not(.bb-seasons) > .swatch:last-child:nth-child(even),
.np-accents > .swatch:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* ---------- Type specimen ---------- */
.specimen { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: end; padding: clamp(28px, 5vw, 64px); }
.specimen__aa { font-size: clamp(120px, 20vw, 280px); line-height: 0.8; font-weight: 800; letter-spacing: -0.04em; }
.specimen__weights { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 24px; }
.specimen__weights span { padding: 14px 0; text-align: center; border-radius: var(--radius-s); background: var(--p-surface); font-size: 22px; }
.specimen__weights small { display: block; font-size: 11px; opacity: 0.55; margin-top: 4px; }
@media (max-width: 800px) { .specimen { grid-template-columns: 1fr; } }
/* ---------- Asset board (Figma-style canvas) ---------- */
.board {
position: relative;
border-radius: var(--radius-l);
background-color: var(--grey-1);
background-image: radial-gradient(circle, var(--grey-3) 1px, transparent 1.4px);
background-size: 22px 22px;
border: 1px solid var(--line);
padding: clamp(24px, 4vw, 48px);
overflow: hidden;
}
.board__bar {
display: flex; justify-content: space-between; align-items: center;
font-size: 12px; color: var(--grey-5); margin-bottom: 18px;
}
.board__bar span:first-child { font-weight: 600; color: var(--ink); }
.board__grid {
display: grid; gap: clamp(18px, 2.4vw, 32px);
grid-template-columns: repeat(12, minmax(0, 1fr));
align-items: start;
}
.frame { position: relative; grid-column: span var(--span, 4); margin-top: var(--drop, 0); }
.frame__name {
display: flex; justify-content: space-between; gap: 8px;
font-size: 11px; color: var(--grey-5); margin-bottom: 6px; padding-inline: 2px;
}
.frame__body {
position: relative; border-radius: 4px; overflow: hidden; background: var(--white);
box-shadow: var(--shadow);
outline: 1.5px solid transparent; outline-offset: 0;
transition: outline-color 0.15s;
cursor: zoom-in;
}
.frame__body img { width: 100%; }
/* Figma selection handles on hover */
.frame__body::before, .frame__body::after {
content: ""; position: absolute; width: 7px; height: 7px; background: #fff; border: 1.5px solid #0d99ff;
opacity: 0; transition: opacity 0.15s; z-index: 2;
}
.frame__body::before { top: -1px; left: -1px; }
.frame__body::after { bottom: -1px; right: -1px; }
.frame:hover .frame__body { outline-color: #0d99ff; }
.frame:hover .frame__body::before, .frame:hover .frame__body::after { opacity: 1; }
.frame:hover .frame__name { color: #0d99ff; }
.board__timeline {
position: relative; margin-top: clamp(24px, 4vw, 40px); height: 40px;
border-top: 1px solid var(--grey-3);
display: flex; justify-content: space-between; font-size: 10px; color: var(--grey-5);
font-variant-numeric: tabular-nums;
}
.board__timeline span { padding-top: 8px; position: relative; }
.board__timeline span::before { content: ""; position: absolute; top: -1px; left: 0; width: 1px; height: 6px; background: var(--grey-3); }
.board__playhead {
position: absolute; top: -10px; left: 0; width: 2px; height: 30px; background: #0d99ff; border-radius: 2px;
}
.board__playhead::before { content: ""; position: absolute; top: -6px; left: -5px; width: 12px; height: 12px; border-radius: 3px 3px 6px 6px; background: #0d99ff; }
@media (max-width: 800px) {
.board__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.frame { grid-column: span var(--span-sm, 1); margin-top: 0; }
}
/* ---------- Gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.gallery figure { margin: 0; grid-column: span var(--span, 2); border-radius: var(--radius-m); overflow: hidden; background: var(--grey-1); cursor: zoom-in; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.gallery figure:hover img { transform: scale(1.04); }
@media (max-width: 800px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gallery figure { grid-column: span var(--span-sm, 1); } }
/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: clamp(32px, 6vw, 72px); }
.stats div { display: grid; gap: 6px; border-top: 3px solid currentColor; padding-top: 16px; }
.stats strong { font-size: clamp(44px, 6vw, 84px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.stats span { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.75; }
@media (max-width: 700px) { .stats { grid-template-columns: 1fr; } }
/* ---------- Device stage ---------- */
.devices { position: relative; }
.devices__inner {
display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(20px, 3vw, 44px);
align-items: end; padding: clamp(28px, 5vw, 64px);
}
.laptop { width: 100%; }
.laptop__lid {
position: relative; aspect-ratio: 16 / 10;
padding: 2.2% 2.2% 3%;
background: #1c1c1e; border-radius: 18px 18px 6px 6px;
box-shadow: inset 0 0 0 1px #3a3a3c;
}
.laptop__lid::before { content: ""; position: absolute; top: 1%; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #333; }
.laptop__base {
height: 14px; margin: 0 -6%; border-radius: 0 0 16px 16px;
background: linear-gradient(#d4d4d6, #a8a8aa);
}
.laptop__base::before { content: ""; display: block; width: 16%; height: 6px; margin: 0 auto; border-radius: 0 0 8px 8px; background: #9a9a9c; }
.screen { position: relative; height: 100%; overflow: hidden; border-radius: 4px; background: var(--grey-1); }
.screen img { width: 100%; will-change: transform; }
/* Journey video: a recorded walk through the site, pinned to the top */
.screen video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* Modern iPhone: metal edge, thin black bezel, side buttons, rounded display
with the status bar and dynamic island inside it. Everything is sized in cqw
(the phone's own width) so it stays in proportion at any size. case.js wraps
the screen in .phone__display and adds the status bar. */
.phone {
--edge: 2px;
position: relative;
container-type: inline-size;
width: clamp(150px, 19vw, 250px); aspect-ratio: 71.6 / 147.6; /* a real iPhone body, bezel included */
border: var(--edge) solid transparent;
border-radius: 17% / 7.9%;
background:
linear-gradient(#0a0a0b, #0a0a0b) padding-box,
linear-gradient(140deg, #c4c4c8 0%, #55555a 26%, #a6a6ab 50%, #3d3d40 76%, #b2b2b6 100%) border-box;
box-shadow: 0 40px 60px -28px rgb(17 17 17 / 0.5), 0 12px 24px -12px rgb(17 17 17 / 0.3);
}
/* Side buttons */
.phone::before, .phone::after {
content: ""; position: absolute; width: 3px; border-radius: 2px;
background: linear-gradient(90deg, #6e6e73, #a1a1a6);
}
.phone::before { right: calc(-1 * var(--edge) - 3px); top: 27%; height: 13%; }
.phone::after { left: calc(-1 * var(--edge) - 3px); top: 21%; height: 6.5%; box-shadow: 0 9cqw 0 #8e8e93; }
.phone__display {
position: absolute; inset: 3.4cqw;
overflow: hidden;
border-radius: 13cqw;
display: flex; flex-direction: column;
background: var(--status-bg, #fff);
}
/* Dynamic island sits inside the display, over the status bar */
.phone__display::before {
content: ""; position: absolute; z-index: 3; top: 2.6cqw; left: 50%; width: 28cqw; height: 8cqw;
translate: -50% 0; border-radius: 999px; background: #000;
}
/* Status bar, coloured to match the top of the site (case.js samples it) */
.phone__status {
flex: 0 0 auto; height: 13cqw;
display: flex; align-items: center; justify-content: space-between;
padding: 0.6cqw 7.5cqw 0 9.5cqw;
background: var(--status-bg, #fff); color: var(--status-fg, #111);
font: 600 4cqw / 1 var(--font); letter-spacing: -0.01em;
}
.phone__status svg { height: 3.6cqw; width: auto; }
.phone .screen { flex: 1; border-radius: 0; }
@media (max-width: 800px) {
.devices__inner { grid-template-columns: 1fr; justify-items: center; }
.phone { width: 58%; }
}
/* ---------- Close-ups with a magnifier lens ---------- */
.closeups { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.closeup { grid-column: span var(--span, 6); margin: 0; display: grid; gap: 12px; align-content: start; }
.closeup__view {
position: relative; border-radius: var(--radius-m); overflow: hidden; background: var(--grey-1);
border: 1px solid var(--line); cursor: zoom-in;
}
.closeup__view img { width: 100%; }
.closeup p { font-size: 14px; color: var(--grey-7); }
.closeup p b { color: var(--ink); font-weight: 600; }
.lens {
position: absolute; width: 190px; height: 190px; border-radius: 50%;
pointer-events: none; opacity: 0; scale: 0.6;
border: 4px solid var(--white); box-shadow: var(--shadow), 0 0 0 1px var(--line);
background-repeat: no-repeat;
transition: opacity 0.2s, scale 0.3s var(--ease-spring);
translate: -50% -50%;
}
.closeup__view:hover .lens { opacity: 1; scale: 1; }
@media (hover: none) { .lens { display: none; } }
@media (max-width: 800px) { .closeup { grid-column: span 12; } }
/* ---------- Phone parade: several phones, each scrolling a page, with live
features popping out over the screens ---------- */
.parade { position: relative; padding: clamp(48px, 8vw, 110px) clamp(16px, 3vw, 48px); perspective: 1800px; }
.parade__row {
position: relative; z-index: 1;
display: flex; justify-content: center; align-items: flex-start; gap: clamp(14px, 2.6vw, 40px);
transform-style: preserve-3d; will-change: transform;
}
.parade .phone { width: clamp(150px, 15.5vw, 228px); flex: none; }
.parade .phone:nth-child(even) { margin-top: clamp(40px, 6vw, 90px); }
.parade__caption {
display: flex; justify-content: center; gap: clamp(14px, 2.6vw, 40px); margin-top: 18px;
font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--p-muted);
}
.parade__caption span { width: clamp(150px, 15.5vw, 228px); text-align: center; }
.pop {
position: absolute; z-index: 5; left: var(--x); top: var(--y); width: var(--w, auto);
filter: drop-shadow(0 24px 30px rgb(17 17 17 / 0.22));
pointer-events: auto;
}
.pop > * { rotate: var(--r, 0deg); }
@media (max-width: 800px) {
.parade { padding-inline: 0; }
.parade__row { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px 16px 48px; margin-bottom: -24px; transform: none !important; }
.parade .phone { width: 62vw; scroll-snap-align: center; }
.parade .phone:nth-child(even) { margin-top: 0; }
.parade__caption { display: none; }
.pop { zoom: 0.66; } /* zoom, not scale: GSAP resets the scale property when it animates the pop in */
.pop { left: var(--x-sm, var(--x)); top: var(--y-sm, var(--y)); } /* a pop can sit elsewhere on phones (--x-sm / --y-sm) */
.pop[data-pop-sm="hide"] { display: none; }
}
/* Phones: the parade as a deck (case.js). One phone at a time, centred; the rest wait hidden
in the same spot, and a caption pill with arrows sits underneath. Pop-outs stay on desktop. */
.parade__deck { display: none; }
@media (max-width: 800px) {
.parade.is-deck { padding-block: 36px 30px; }
.parade.is-deck .parade__row { display: grid; justify-content: center; overflow: visible; scroll-snap-type: none; padding: 8px 0 0; margin: 0; }
.parade.is-deck .phone { grid-area: 1 / 1; width: min(66vw, 300px); margin: 0 !important; }
.parade.is-deck .phone:not(.is-on):not(.is-leaving) { visibility: hidden; }
.parade.is-deck .phone.is-on { z-index: 2; }
.parade.is-deck .pop { display: none; }
.parade.is-deck .parade__deck { font-family: var(--font); letter-spacing: -0.01em; position: relative; z-index: 6; display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 22px; }
.parade__nav { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #18181a; cursor: pointer;
box-shadow: 0 10px 24px -12px rgb(24 24 40 / 0.5), 0 0 0 1px rgb(0 0 0 / 0.06); -webkit-tap-highlight-color: transparent; transition: scale 0.2s var(--ease-out); }
.parade__nav:active { scale: 0.9; }
.parade__nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.parade__now { position: relative; display: flex; align-items: center; gap: 9px; min-width: 0; max-width: 62vw; padding: 6px 16px 8px 6px; border-radius: 999px; background: #fff; overflow: hidden;
box-shadow: 0 14px 34px -14px rgb(24 24 40 / 0.45), 0 0 0 1px rgb(0 0 0 / 0.06); }
.parade__now b { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--pen, var(--hl-yellow)); color: #18181a; font-size: 11px; font-weight: 700; }
.parade__now strong { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; font-weight: 600; color: #18181a; }
.parade__now i { position: absolute; left: 18px; right: 18px; bottom: 4px; height: 2px; border-radius: 2px; background: rgb(0 0 0 / 0.1); overflow: hidden; }
.parade__now em { position: absolute; inset: 0; background: #18181a; transform-origin: 0 50%; transform: scaleX(0); }
}
/* Solo parade (one-page sites): one larger phone between a short side
column and the brand pieces, instead of a row of four */
.parade--solo {
display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center; gap: clamp(24px, 5vw, 80px);
padding-block: clamp(48px, 6vw, 84px);
}
.parade--solo .parade__row { grid-column: 2; }
.parade--solo .phone { width: clamp(220px, 21vw, 290px); }
.parade--solo .parade__side { grid-column: 1; justify-self: end; max-width: 300px; }
@media (max-width: 800px) {
.parade--solo { grid-template-columns: 1fr; gap: 8px; padding-block: 40px 32px; }
.parade--solo .parade__row { grid-column: 1; justify-content: center; overflow: visible; padding-bottom: 32px; }
.parade--solo .phone { width: min(66vw, 280px); }
.parade--solo .parade__side { grid-column: 1; grid-row: 2; justify-self: stretch; max-width: none; padding-inline: 20px; }
}
/* ---------- Next project ---------- */
.next {
display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap;
padding: clamp(28px, 5vw, 56px); border-radius: var(--radius-l); background: var(--grey-1);
text-decoration: none; transition: background 0.3s;
}
.next:hover { background: var(--grey-2); }
.next small { display: block; font-size: 13px; color: var(--grey-5); margin-bottom: 8px; }
.next strong { font-size: clamp(36px, 6vw, 80px); font-weight: 600; letter-spacing: -0.05em; line-height: 1; }
.next__arrow {
width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
background: var(--ink); color: var(--white); transition: transform 0.4s var(--ease-spring);
}
.next:hover .next__arrow { transform: rotate(-45deg) scale(1.08); }
/* ---------- Hero stage (standard hero for web work) ----------
Mac + phone overlapping on the right, both screens playing the site, a
highlighter squiggle behind in the brand colour, brand pieces around.
Set --stage-hl on the stage for the squiggle colour. */
.stage { position: relative; aspect-ratio: 1 / 0.84; isolation: isolate; }
.stage__hl { position: absolute; inset: -8% -6% -6%; width: 112%; height: 114%; z-index: -1; overflow: visible; pointer-events: none; }
.stage__hl path { fill: none; stroke: var(--stage-hl, var(--hl-yellow)); stroke-linecap: round; stroke-linejoin: round; mix-blend-mode: multiply; }
.stage__hl .thick { stroke-width: 74; opacity: 0.85; }
.stage__hl .thin { stroke-width: 26; opacity: 0.7; }
.stage .laptop { position: absolute; left: 0; top: 12%; width: 84%; z-index: 1; filter: drop-shadow(0 30px 40px rgb(24 24 26 / 0.22)); }
.stage .phone { position: absolute; right: 2%; bottom: 0; width: 25%; z-index: 3; }
.stage .pop { z-index: 4; }
@media (max-width: 900px) {
/* Phones: Mac centred, phone bigger so it overlaps more */
.stage { margin-top: 12px; aspect-ratio: 1 / 0.92; }
.stage .laptop { left: 6%; width: 88%; top: 10%; }
.stage .phone { width: 34%; right: -1%; bottom: 0; }
}
/* Project pages: every highlighter pen uses the project's brand colour.
Set --project-pen on in the project css. */
body[data-pen] .hl { --pen: var(--project-pen); }
/* Soft brand-coloured glow behind the hero devices (replaces the squiggle).
Uses --stage-hl on the .stage. */
.stage__glow { position: absolute; inset: 2% 4% -2%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--stage-hl, var(--hl-yellow)) 70%, transparent), color-mix(in srgb, var(--stage-hl, var(--hl-yellow)) 22%, transparent) 62%, transparent); filter: blur(12px); pointer-events: none; }
/* Highlighter scribble behind the hero devices: thick, see-through marker strokes */
.stage__scribble { position: absolute; inset: 0 -2% 2% -4%; width: 106%; height: 98%; z-index: -1; overflow: visible; pointer-events: none; }
.stage__scribble path { fill: none; stroke: var(--stage-hl, var(--hl-yellow)); stroke-width: 74; stroke-linecap: round; stroke-linejoin: round; opacity: 0.6; mix-blend-mode: multiply; }
.stage .stage__glow { opacity: 0.6; }
/* ---------- Brief + what I did (compact, under the hero) ----------
*/
.cs-brief { padding-block: clamp(36px, 5vw, 64px) 0; }
.cs-brief__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
.cs-brief__grid > div { display: grid; gap: 14px; align-content: start; }
.cs-brief__text { font-size: clamp(21px, 2.1vw, 28px); font-weight: 500; line-height: 1.35; letter-spacing: -0.02em; max-width: 30ch; }
.cs-brief__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.cs-brief__list li { display: grid; grid-template-columns: 28px 1fr; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 500; counter-increment: brief; }
.cs-brief__list { counter-reset: brief; }
.cs-brief__list li::before { content: counter(brief, decimal-leading-zero); font-size: 12px; font-weight: 700; color: var(--grey-5); padding-top: 3px; }
@media (max-width: 800px) { .cs-brief__grid { grid-template-columns: 1fr; } }
/* Phones: "What I did" folds away behind a bar with a count (case.js adds the button) */
.cs-brief__toggle { display: none; }
@media (max-width: 800px) {
.cs-brief__label:has(+ .cs-brief__toggle) { display: none; }
.cs-brief__toggle {
display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 18px; border: 1px solid var(--line); border-radius: 999px;
background: var(--grey-1); color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; text-align: left; cursor: pointer;
-webkit-tap-highlight-color: transparent; transition: background 0.3s, scale 0.2s var(--ease-out);
}
.cs-brief__toggle:active { scale: 0.98; }
.cs-brief__toggle em { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--ink); color: var(--white); font-style: normal; font-size: 11px; font-weight: 700; }
.cs-brief__toggle i { position: relative; width: 14px; height: 14px; margin-left: auto; }
.cs-brief__toggle i::before, .cs-brief__toggle i::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; border-radius: 2px; background: currentColor; transition: rotate 0.4s var(--ease-spring); }
.cs-brief__toggle i::after { rotate: 90deg; }
.cs-brief__toggle[aria-expanded="true"] i::after { rotate: 0deg; }
.cs-brief__list { display: grid; max-height: 0; overflow: hidden; opacity: 0; border-top-color: transparent; transition: max-height 0.5s var(--ease-out), opacity 0.35s; }
.is-open > .cs-brief__list { max-height: 1200px; opacity: 1; }
.is-open > .cs-brief__list li { animation: cs-brief-in 0.45s var(--ease-out) both; animation-delay: calc(var(--k, 0) * 50ms); }
@keyframes cs-brief-in { from { opacity: 0; translate: 0 8px; } }
}
/* ---------- Feature reel: every live feature in one pinned section ----------
case.js pins it, steps through slides on scroll and scales each feature to fit. */
.reel { padding-block: clamp(40px, 6vw, 80px); }
.reel__pin { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 56px); align-items: center; min-height: min(100svh, 900px); }
.reel__side .section-head { margin-bottom: 22px; }
.reel__side .section-head h2 { font-size: clamp(30px, 3.6vw, 50px); }
.reel__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.reel__list button { position: relative; width: 100%; display: grid; grid-template-columns: 34px 1fr; column-gap: 8px; text-align: left; padding: 14px 0; border: 0; border-bottom: 1px solid var(--line); background: none; cursor: pointer; color: var(--grey-5); font: inherit; }
.reel__list span { font-size: 12px; font-weight: 700; padding-top: 5px; }
.reel__list b { font-size: clamp(17px, 1.5vw, 21px); font-weight: 600; letter-spacing: -0.02em; transition: color 0.3s; }
.reel__list em { grid-column: 2; font-style: normal; font-size: 14px; color: var(--grey-7); max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.5s var(--ease-out), opacity 0.4s; }
.reel__list i { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.reel__list li.is-on button { color: var(--ink); }
.reel__list li.is-on em { max-height: 60px; opacity: 1; margin-top: 4px; }
.reel__list button:hover b { color: var(--ink); }
.reel__stage {
position: relative; display: grid; height: min(76svh, 700px); border-radius: var(--radius-l); overflow: hidden;
background: var(--reel-bg, var(--grey-1)); box-shadow: inset 0 0 0 1px var(--line);
}
.reel__slide { grid-area: 1 / 1; display: grid; place-items: center; padding: clamp(18px, 3vw, 40px); opacity: 0; visibility: hidden; transform: translateY(24px) scale(0.98); transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out), visibility 0.5s; }
.reel__slide.is-on { opacity: 1; visibility: visible; transform: none; }
.reel__fit { transform-origin: center; width: max-content; flex: none; }
.reel__fit > * { margin: 0 !important; }
.reel__label { display: none; }
@media (max-width: 900px) {
.reel__pin { grid-template-columns: 1fr; min-height: 0; }
.reel__list { display: none; }
.reel__stage { display: flex; height: auto; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding: 12px; background: none; box-shadow: none; border-radius: 0; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; }
.reel__slide { flex: 0 0 86%; opacity: 1; visibility: visible; transform: none; scroll-snap-align: center; border-radius: var(--radius-l); background: var(--reel-bg, var(--grey-1)); box-shadow: inset 0 0 0 1px var(--line); height: min(72svh, 560px); align-content: start; gap: 12px; padding: 18px; overflow: hidden; }
.reel__label { display: block; justify-self: start; font-size: 14px; font-weight: 600; }
.reel__label small { display: none; }
.reel .reel__label { color: #18181a; }
.reel__slide { grid-template-rows: auto 1fr; place-items: stretch; }
.reel__slide .reel__fit { align-self: center; justify-self: center; }
}
/* Reel stage: keep slides to the stage box so features scale to fit */
.reel__stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.reel__slide { min-width: 0; min-height: 0; overflow: hidden; }
@media (min-width: 901px) {
.reel__slide { position: relative; }
.reel__fit { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
}
@media (max-width: 900px) {
/* phones: features use their own responsive layout at full card width */
.reel__stage { align-items: flex-start; }
.reel__slide { display: block; height: auto; overflow: visible; }
.reel__label { margin-bottom: 14px; }
.reel__fit { width: 100% !important; transform: none !important; }
}
/* ---------- Device finish (applies to every laptop and phone on the site) ----------
Laptop: black glass bezel inside a thin aluminium rim, camera dot, a soft sheen across
the screen, brushed-aluminium base with a bright top edge. Phone: titanium-style edge
and a faint glass reflection over the display. Sizes still come from each section. */
.laptop__lid {
background: linear-gradient(180deg, #161618, #0a0a0b);
box-shadow: 0 0 0 1px #b9b9be, 0 0 0 2px #6d6d72, inset 0 0 0 1px #2a2a2d;
}
.laptop__lid::before { background: radial-gradient(circle at 40% 40%, #3a4a5a, #0d1117 60%); box-shadow: 0 0 0 1px #222; }
.laptop__lid::after {
content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
background: linear-gradient(118deg, rgb(255 255 255 / 0.13) 0%, rgb(255 255 255 / 0.04) 26%, transparent 42%);
}
.laptop__base {
position: relative;
background: linear-gradient(180deg, #f4f4f6 0%, #d9d9dc 22%, #bdbdc1 70%, #9d9da2 100%);
box-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 rgb(0 0 0 / 0.18), 0 1px 0 rgb(0 0 0 / 0.08);
}
.laptop__base::before { background: linear-gradient(180deg, #a9a9ae, #cfcfd3); box-shadow: inset 0 1px 1px rgb(0 0 0 / 0.18); }
.phone {
background:
linear-gradient(#060607, #060607) padding-box,
linear-gradient(140deg, #e2e2e6 0%, #6a6a70 20%, #d2d2d7 46%, #505055 72%, #d6d6db 100%) border-box;
box-shadow: 0 40px 60px -28px rgb(17 17 17 / 0.5), 0 12px 24px -12px rgb(17 17 17 / 0.3), inset 0 0 0 1px rgb(255 255 255 / 0.06);
}
.phone__display::after {
content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
background: linear-gradient(122deg, rgb(255 255 255 / 0.16) 0%, rgb(255 255 255 / 0.05) 24%, transparent 42%);
}
/* performance: the glow is already a soft radial gradient; the blur filter only added repaints */
.stage__glow { filter: none !important; }
/* ===== home.css ===== */
/* Home page. Story in chapters: hero, who it's for (concept mini-sites),
statement, skills, process, numbers, work, FAQs, contact. */
.home { --hand: "Caveat", "Comic Sans MS", cursive; }
@media (max-width: 900px) { .site-nav__links a:not(.is-cta) { display: none; } }
@media (max-width: 900px) { .nav-burger { display: grid; } }
.btn--big { padding: 17px 28px; font-size: 16px; }
.btn--big span { transition: translate 0.3s var(--ease-spring); }
.btn--big:hover span { translate: 4px 0; }
/* ---------- Doodles + handwritten notes ---------- */
.doodle { position: absolute; pointer-events: none; color: var(--ink); overflow: visible; }
.scribble-note {
position: absolute; z-index: 6; font-family: var(--hand); font-size: clamp(20px, 1.8vw, 26px); font-weight: 700; line-height: 1;
color: var(--ink); white-space: nowrap; rotate: -6deg; pointer-events: none;
}
.scribble-note svg { position: absolute; width: 70px; height: 46px; color: var(--ink); }
/* ===================== Hero ===================== */
.home-hero { padding-top: clamp(118px, 13vw, 168px); padding-bottom: clamp(40px, 5vw, 72px); }
.home-hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.home-hero__copy { position: relative; }
.hello-badge { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--grey-1); font-size: 13px; font-weight: 500; }
.hello-badge i { width: 9px; height: 9px; border-radius: 50%; background: #34c759; animation: ping 2s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgb(52 199 89 / 0.6); } 70%, 100% { box-shadow: 0 0 0 9px rgb(52 199 89 / 0); } }
.home-hero__title { margin-top: 22px; font-size: clamp(46px, 6.2vw, 98px); letter-spacing: -0.055em; line-height: 0.98; }
.home-hero__title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.home-hero__title .w > span { display: inline-block; }
.doodle--squiggle { position: relative; display: block; width: 150px; height: 30px; margin: 10px 0 0 2px; color: #ff5a36; }
.home-hero__lede { margin-top: 18px; font-size: clamp(17px, 1.45vw, 20px); color: var(--grey-7); max-width: 44ch; }
.home-hero__lede em { font-family: var(--hand); font-style: normal; font-size: 1.25em; line-height: 1; font-weight: 700; color: var(--ink); }
.home-hero__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
@media (max-width: 900px) { .home-hero__grid { grid-template-columns: 1fr; } }
/* Hero device scene */
.hero-stage { aspect-ratio: 1 / 0.8; }
.hero-glow { position: absolute; inset: 4% 6% 0; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 240 77 / 0.55), rgb(255 240 77 / 0.18) 60%, transparent); filter: blur(10px); }
.hero-stage .hero-laptop { left: 10%; top: 8%; width: 80%; }
.hero-stage .hero-phone--a { left: 2%; right: auto; bottom: 0; width: 17%; }
.hero-stage .hero-phone--b { right: 2%; bottom: 4%; width: 18%; }
.hero-laptop .screen { background: var(--grey-1); }
.slide { position: absolute; inset: 0; display: block; clip-path: inset(0 0 0 100%); transition: clip-path 0.9s cubic-bezier(0.77, 0, 0.18, 1); }
.slide.is-on { clip-path: inset(0 0 0 0); z-index: 1; }
.slide.is-leaving { clip-path: inset(0 0 0 0); z-index: 0; }
.slide img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: scale 6s linear; }
.slide.is-on img { scale: 1.06; }
.now-showing { position: absolute; left: 50%; bottom: -46px; translate: -50% 0; white-space: nowrap; display: inline-flex; gap: 6px; padding: 6px 14px; border-radius: 999px; background: var(--ink); color: var(--white); font-size: 12px; font-weight: 500; }
.now-showing b { font-weight: 700; }
.hero-float { cursor: grab; touch-action: none; }
.hero-float img { border-radius: 10px; pointer-events: none; }
.hero-float.is-dragging { cursor: grabbing; z-index: 20; }
.lime-sticker { aspect-ratio: 1; border-radius: 50%; background: #b3dd03; display: grid; place-items: center; box-shadow: inset 0 -5px 0 rgb(0 0 0 / 0.08); }
.lime-sticker img { width: 46%; border-radius: 0 !important; }
.sticker-svg { width: 100%; height: auto; aspect-ratio: 1; color: #18181a; }
.scribble-note--hero { right: 4%; top: -11%; }
.scribble-note--hero svg { right: -46px; top: 18px; rotate: 70deg; }
@media (max-width: 900px) { .hero-stage { margin-top: 30px; } .hero-stage .hero-laptop { left: 6%; width: 88%; } .scribble-note--hero { display: none; } }
/* ---------- Crossed tapes ---------- */
.tapes { position: relative; height: clamp(150px, 16vw, 210px); margin-block: clamp(20px, 3vw, 40px); overflow: hidden; }
.tape { position: absolute; left: -5%; right: -5%; top: 50%; padding: 16px 0; overflow: hidden; }
.tape--a { background: var(--ink); color: var(--white); rotate: -3deg; translate: 0 -70%; z-index: 2; }
.tape--b { background: var(--hl-yellow); color: #18181a; rotate: 2.5deg; translate: 0 -20%; }
.tape__track { display: flex; width: max-content; animation: tape 32s linear infinite; }
.tape--b .tape__track { animation-direction: reverse; animation-duration: 40s; }
.tape__track span { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; font-size: clamp(20px, 2.4vw, 32px); font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }
.tape__track span::after { content: "✦"; font-size: 0.7em; color: var(--hl-pink); }
.tape--b .tape__track span::after { color: #ff5a36; }
@keyframes tape { to { transform: translateX(-50%); } }
/* ---------- Chapter pill ---------- */
.chapter-pill { position: fixed; right: 16px; bottom: 16px; z-index: 40; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 999px; background: var(--nav-bg); border: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 13px; font-weight: 500; opacity: 0; translate: 0 10px; transition: opacity 0.4s, translate 0.4s var(--ease-out); }
.chapter-pill.is-on { opacity: 1; translate: 0 0; }
.chapter-pill.is-off { opacity: 0 !important; translate: 0 10px !important; }
.chapter-pill b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--hl-yellow); color: #18181a; font-size: 12px; font-weight: 700; }
@media (max-width: 560px) { .chapter-pill { display: none; } }
/* ---------- Chapter heads ---------- */
.chapter-head { display: grid; gap: 16px; max-width: 800px; margin-bottom: clamp(32px, 5vw, 60px); }
.chapter-head h2 { font-size: clamp(38px, 5.4vw, 76px); letter-spacing: -0.05em; }
.chapter-head p { font-size: clamp(16px, 1.4vw, 19px); color: var(--grey-7); max-width: 56ch; }
.chapter-head a { font-weight: 600; }
.chapter-no { justify-self: start; display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--grey-7); }
.chapter-no b { display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 999px; background: var(--ink); color: var(--white); font-size: 12px; font-weight: 700; }
/* ---------- Illustration slots (see docs/image-prompts.md) ---------- */
.illo { position: relative; margin: 0; display: grid; place-items: center; }
.illo img { width: 100%; height: 100%; object-fit: contain; }
.illo__doodle { width: 78%; height: 78%; color: var(--ink); overflow: visible; }
.illo.is-loaded .illo__doodle { display: none; }
/* ===================== 01 Who for: sector showcase =====================
A pinned section: scroll moves through sectors on the left while the
browser on the right plays a concept site for each, "used" by a fake cursor.
Prices and timers count with registered CSS custom properties. */
@property --beds { syntax: ""; inherits: true; initial-value: 2; }
@property --price { syntax: ""; inherits: true; initial-value: 18; }
@property --items { syntax: ""; inherits: true; initial-value: 0; }
@property --eta { syntax: ""; inherits: true; initial-value: 18; }
@property --bprice { syntax: ""; inherits: true; initial-value: 30; }
.sectors { position: relative; height: calc(var(--n) * 115vh + 100vh); }
.sectors__sticky { position: sticky; top: 0; height: 100dvh; display: flex; align-items: center; overflow: hidden; }
.sectors__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.sectors__side { display: grid; gap: 14px; align-content: center; }
.sectors__side h2 { font-size: clamp(34px, 4.2vw, 62px); letter-spacing: -0.05em; }
.sectors__intro { color: var(--grey-7); font-size: 16px; max-width: 42ch; }
.sector-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; }
.sector-list button {
width: 100%; display: grid; grid-template-columns: 34px 1fr; column-gap: 8px; align-items: baseline; text-align: left;
padding: 9px 0; border: 0; border-bottom: 1px solid var(--line); background: none; cursor: pointer; color: var(--grey-5);
transition: color 0.3s;
}
.sector__n { font-size: 12px; font-weight: 700; }
.sector__name { font-size: clamp(17px, 1.5vw, 21px); font-weight: 600; letter-spacing: -0.02em; justify-self: start; padding: 0 4px; margin-left: -4px; border-radius: 4px; background-image: linear-gradient(var(--hl-yellow), var(--hl-yellow)); background-repeat: no-repeat; background-size: 0% 70%; background-position: 0 70%; transition: background-size 0.6s var(--ease-out); }
.sector__line { grid-column: 2; font-size: 13.5px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.5s var(--ease-out), opacity 0.4s; }
.sector-list li.is-active button { color: var(--ink); }
.sector-list li.is-active .sector__name { background-size: 100% 70%; color: #18181a; }
.sector-list li.is-active .sector__line { max-height: 40px; opacity: 1; color: var(--grey-7); }
.sectors__progress { height: 3px; border-radius: 3px; background: var(--grey-2); overflow: hidden; margin-top: 6px; }
.sectors__progress i { display: block; height: 100%; width: 100%; background: var(--ink); transform-origin: left; transform: scaleX(var(--p, 0)); }
.sectors__stage { position: relative; perspective: 2200px; padding-bottom: 40px; }
.sector-laptop { position: relative; transform-style: preserve-3d; transform: rotateX(var(--rx, 7deg)) rotateY(var(--ry, -12deg)); transform-origin: 50% 80%; }
.sector-laptop__lid { position: relative; padding: 2% 2% 2.6%; border-radius: 22px 22px 8px 8px; background: #19191d; box-shadow: inset 0 0 0 1.5px #3c3c41, 0 50px 80px -40px rgb(24 24 26 / 0.55); }
.sector-laptop__lid::before { content: ""; position: absolute; top: 0.8%; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: #2e2e33; }
.sector-laptop__base { height: 18px; margin: 0 -7%; border-radius: 0 0 20px 20px; background: linear-gradient(#e4e4e6, #a8a8ac); box-shadow: 0 30px 40px -20px rgb(24 24 26 / 0.45); }
.sector-laptop__base::before { content: ""; display: block; width: 15%; height: 7px; margin: 0 auto; border-radius: 0 0 9px 9px; background: #96969a; }
.sector-laptop__url { position: absolute; left: 50%; bottom: -64px; translate: -50% 0; padding: 6px 14px; border-radius: 999px; background: var(--ink); color: var(--white); font-size: 12px; font-weight: 500; white-space: nowrap; z-index: 2; }
.sector-laptop .browser__view { border-radius: 6px; overflow: hidden; }
.sector-3d { position: absolute; left: 0; top: -16%; width: 108%; height: 132%; z-index: 4; pointer-events: none; }
.browser { position: relative; border-radius: 18px; background: var(--white); border: 1px solid var(--line); box-shadow: 0 40px 80px -40px rgb(24 24 26 / 0.45), var(--shadow); overflow: hidden; }
.browser__bar { display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--grey-1); }
.browser__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--grey-3); }
.browser__bar i:nth-child(1) { background: #ff5f57; } .browser__bar i:nth-child(2) { background: #febc2e; } .browser__bar i:nth-child(3) { background: #28c840; }
.browser__url { margin-inline: auto; padding: 4px 16px; border-radius: 8px; background: var(--white); font-size: 12px; color: var(--grey-5); min-width: 40%; text-align: center; }
.browser__view { position: relative; aspect-ratio: 16 / 10.4; container-type: inline-size; background: #fff; }
.concept-tag { position: absolute; right: 18px; bottom: -14px; padding: 6px 12px; border-radius: 999px; background: var(--ink); color: var(--white); font-size: 12px; font-weight: 600; rotate: 2deg; }
.scene { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(18px) scale(0.98); transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out), visibility 0.5s; }
.scene.is-active { opacity: 1; visibility: visible; transform: none; }
.scene__label { display: none; }
/* Concept site: 1em = 1/72 of the frame width, so everything scales */
.cs { position: absolute; inset: 0; font-size: calc(100cqw / 72); color: var(--c); background: #fff; overflow: hidden; font-family: var(--font); }
.cs__page { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.cs__first { position: relative; height: 46.8em; padding: 0 3em; display: flex; flex-direction: column; overflow: hidden; }
.cs__first::before { content: ""; position: absolute; right: -10em; top: -8em; width: 46em; height: 46em; border-radius: 50%; background: var(--b); }
.cs__first > * { position: relative; }
/* Extra concept sections that scroll into view inside the laptop */
.cs h5 { font-size: 2.6em; font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; }
.cs-band { display: flex; align-items: center; justify-content: space-between; gap: 3em; margin: 0 3em; padding: 3em 3.4em; border-radius: 2.2em; background: var(--c); color: #fff; }
.cs-band p { font-size: 1.4em; opacity: 0.75; margin-top: 0.4em; }
.cs-stat { display: grid; gap: 0.3em; }
.cs-stat b { font-size: 4em; font-weight: 800; letter-spacing: -0.05em; line-height: 1; color: color-mix(in srgb, var(--a) 55%, #fff); }
.cs-stat span { font-size: 1.3em; opacity: 0.75; }
.cs__btn--light { background: #fff; color: var(--c); box-shadow: none; }
.cs-sec { padding: 5em 3em 4em; display: grid; gap: 2em; }
.cs-input { display: flex; justify-content: space-between; align-items: center; max-width: 40em; padding: 0.6em 0.6em 0.6em 1.6em; border-radius: 99em; border: 0.15em solid #e3e6ea; font-size: 1.4em; color: #8a8f98; }
.cs-input i { font-style: normal; padding: 0.7em 1.4em; border-radius: 99em; background: var(--a); color: #fff; font-weight: 700; }
.cs-steps { display: flex; gap: 2.4em; font-size: 1.35em; font-weight: 600; }
.cs-steps b { display: inline-grid; place-items: center; width: 1.8em; height: 1.8em; margin-right: 0.6em; border-radius: 50%; background: var(--b); color: var(--a); }
.cs-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6em; }
.cs-cards span { display: grid; gap: 0.5em; padding: 1em; border-radius: 1.6em; background: #fff; box-shadow: 0 1em 2.4em -1.2em rgb(0 0 0 / 0.25), 0 0 0 0.1em rgb(0 0 0 / 0.05); }
.cs-cards i { height: 9em; border-radius: 1em; background: linear-gradient(135deg, var(--b), color-mix(in srgb, var(--a) 35%, #fff)); }
.cs-cards b { font-size: 1.5em; font-weight: 800; letter-spacing: -0.02em; }
.cs-cards em { font-style: normal; font-size: 1.2em; opacity: 0.65; }
.cs-team { display: flex; gap: 3em; }
.cs-team span { display: grid; justify-items: center; gap: 0.4em; }
.cs-team i { width: 9em; height: 9em; border-radius: 50%; background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--a) 45%, #fff) 0 22%, transparent 23%), radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--a) 70%, #fff) 0 45%, transparent 46%), var(--b); }
.cs-team b { font-size: 1.5em; font-weight: 800; } .cs-team em { font-style: normal; font-size: 1.2em; opacity: 0.6; }
.cs-cta { margin: 1em 3em 4em; padding: 5em 3em; border-radius: 2.4em; background: var(--b); display: grid; justify-items: center; gap: 1.6em; text-align: center; }
.cs__nav { display: flex; align-items: center; gap: 2.2em; padding: 2em 0; font-size: 1em; }
.cs__logo { font-size: 1.9em; font-weight: 800; letter-spacing: -0.04em; color: var(--a); margin-right: auto; }
.cs__nav span { font-size: 1.25em; font-weight: 500; opacity: 0.75; }
.cs__cta { font-style: normal; font-size: 1.2em; font-weight: 700; padding: 0.7em 1.3em; border-radius: 99em; background: var(--c); color: #fff; }
.cs__hero { flex: 1; display: grid; grid-template-columns: 1.05fr 1fr; gap: 3em; align-items: center; padding-bottom: 3em; }
.cs__copy { display: grid; gap: 1.2em; align-content: center; }
.cs__copy small { font-size: 1.15em; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--a); }
.cs__copy h4 { font-size: 4em; font-weight: 800; line-height: 1.02; letter-spacing: -0.045em; }
.cs__copy p { font-size: 1.4em; opacity: 0.7; }
.cs__btn { justify-self: start; padding: 1em 1.8em; border-radius: 99em; background: var(--a); color: #fff; font-size: 1.35em; font-weight: 700; box-shadow: 0 0.6em 1.2em -0.6em var(--a); }
.cs__widget { position: relative; z-index: 1; padding: 2.2em; border-radius: 2em; background: #fff; box-shadow: 0 2em 4em -2em rgb(0 0 0 / 0.25), 0 0 0 0.1em rgb(0 0 0 / 0.05); display: grid; gap: 1em; font-size: 1em; }
.w-title { font-size: 1.5em; font-weight: 800; letter-spacing: -0.02em; }
.fake-cursor { position: absolute; z-index: 10; width: 3.4%; left: 70%; top: 85%; filter: drop-shadow(0 4px 6px rgb(0 0 0 / 0.3)); pointer-events: none; }
.scene .fake-cursor::after { content: ""; }
/* --- Window cleaner: instant quote --- */
.q-row { display: flex; justify-content: space-between; align-items: center; padding: 0.9em 0; border-bottom: 0.1em solid #eef0f3; font-size: 1.3em; font-weight: 600; }
.stepper { display: flex; align-items: center; gap: 0.7em; }
.stepper i { display: grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: 50%; background: var(--b); color: var(--a); font-style: normal; font-weight: 800; }
.q-beds { font-style: normal; min-width: 1em; text-align: center; counter-reset: beds var(--beds); }
.q-beds::after { content: counter(beds); }
.tgl { width: 3em; height: 1.7em; border-radius: 99em; background: #dfe3e8; position: relative; }
.tgl::after { content: ""; position: absolute; left: 0.2em; top: 0.2em; width: 1.3em; height: 1.3em; border-radius: 50%; background: #fff; box-shadow: 0 0.1em 0.3em rgb(0 0 0 / 0.2); }
.seg { display: flex; gap: 0.3em; padding: 0.25em; border-radius: 99em; background: #f1f3f6; font-size: 0.85em; }
.seg i { font-style: normal; padding: 0.35em 0.8em; border-radius: 99em; }
.seg i.on { background: #fff; box-shadow: 0 0.1em 0.3em rgb(0 0 0 / 0.12); }
.q-price { display: flex; align-items: baseline; gap: 0.6em; margin-top: 0.6em; padding: 1em 1.2em; border-radius: 1.2em; background: var(--c); color: #fff; }
.q-price small { font-size: 1.1em; opacity: 0.7; }
.q-num { font-size: 3.4em; font-weight: 800; letter-spacing: -0.04em; counter-reset: price var(--price); }
.q-num::before { content: "£" counter(price); }
.cs__glass { position: absolute !important; right: -1em; bottom: 1.5em; width: 13em; height: 10em; border-radius: 1em; overflow: hidden; background: linear-gradient(180deg, #bfe6ff, #eef9ff); rotate: 4deg; box-shadow: 0 1em 2em -1em rgb(0 0 0 / 0.3); z-index: 2; }
.cs__glass .pane { position: absolute; inset: 0.8em; border: 0.3em solid #fff; border-radius: 0.3em; background: linear-gradient(90deg, transparent 49%, #fff 49% 51%, transparent 51%), linear-gradient(transparent 49%, #fff 49% 51%, transparent 51%); }
.cs__glass .grime { position: absolute; inset: 0; background: radial-gradient(circle at 30% 40%, rgb(120 96 60 / 0.55), transparent 45%), radial-gradient(circle at 70% 70%, rgb(120 96 60 / 0.5), transparent 48%), rgb(160 140 100 / 0.42); }
.cs__glass .squeegee { position: absolute; top: 0.4em; bottom: 0.4em; width: 0.7em; border-radius: 0.4em; background: #18181a; left: -1em; }
.scene--window.is-active .cs { animation: quote 8s ease-in-out infinite; }
.scene--window.is-active .q-tgl { animation: tglBg 8s infinite; }
.scene--window.is-active .q-tgl::after { animation: tglKnob 8s var(--ease-spring) infinite; }
.scene--window.is-active .grime { animation: wipe 8s cubic-bezier(0.6, 0, 0.3, 1) infinite; }
.scene--window.is-active .squeegee { animation: squeegee 8s cubic-bezier(0.6, 0, 0.3, 1) infinite; }
.scene--window.is-active .fake-cursor { animation: curWindow 8s ease-in-out infinite; }
@keyframes quote { 0%, 26% { --beds: 2; --price: 18; } 32%, 52% { --beds: 3; --price: 22; } 60%, 92% { --beds: 3; --price: 29; } 100% { --beds: 2; --price: 18; } }
@keyframes tglBg { 0%, 54% { background: #dfe3e8; } 56%, 94% { background: var(--a); } 100% { background: #dfe3e8; } }
@keyframes tglKnob { 0%, 54% { translate: 0 0; } 58%, 94% { translate: 1.3em 0; } 100% { translate: 0 0; } }
@keyframes wipe { 0%, 70% { clip-path: inset(0 0 0 0); } 88%, 96% { clip-path: inset(0 0 0 100%); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes squeegee { 0%, 70% { left: -1em; opacity: 1; } 88% { left: calc(100% + 0.2em); opacity: 1; } 89%, 100% { opacity: 0; } }
@keyframes curWindow { 0% { left: 60%; top: 92%; } 22% { left: 89.5%; top: 44%; scale: 1; } 26% { scale: 0.8; } 29% { scale: 1; } 48% { left: 88%; top: 54.5%; scale: 1; } 52% { scale: 0.8; } 55% { scale: 1; } 75% { left: 72%; top: 72%; } 100% { left: 60%; top: 92%; } }
/* --- Property: pins drop, card slides in, viewing booked --- */
.chips-row { display: flex; gap: 0.6em; }
.chips-row i { font-style: normal; font-size: 1.15em; font-weight: 600; padding: 0.45em 0.9em; border-radius: 99em; border: 0.12em solid currentColor; opacity: 0.55; }
.chips-row i.on { background: var(--a); border-color: var(--a); color: #fff; opacity: 1; }
.cs__widget.prop { padding: 1em; gap: 0; }
.prop__map { position: relative; height: 16em; border-radius: 1.4em; background: #e9f3ef; overflow: hidden; background-image: linear-gradient(#dcebe5 0.15em, transparent 0.15em), linear-gradient(90deg, #dcebe5 0.15em, transparent 0.15em); background-size: 3em 3em; }
.prop__map .road { position: absolute; left: -10%; right: -10%; top: 55%; height: 1.4em; background: #fff; rotate: -12deg; }
.pin { position: absolute; z-index: 1; width: 2.2em; height: 2.2em; border-radius: 50% 50% 50% 0; rotate: -45deg; background: var(--a); border: 0.3em solid #fff; box-shadow: 0 0.4em 0.8em rgb(0 0 0 / 0.25); }
.pin.p1 { left: 22%; top: 24%; } .pin.p2 { left: 58%; top: 40%; background: #ffb547; } .pin.p3 { left: 76%; top: 16%; }
.prop__card { position: absolute; left: 1.8em; right: 1.8em; bottom: 1.8em; padding: 1em; border-radius: 1.2em; background: #fff; box-shadow: 0 1em 2em -1em rgb(0 0 0 / 0.3); display: grid; grid-template-columns: 5.4em 1fr; column-gap: 1em; align-items: center; }
.prop__img { grid-row: span 2; height: 4.4em; border-radius: 0.8em; background: var(--b); display: grid; place-items: center; }
.prop__img svg { width: 70%; }
.prop__card b { font-size: 1.7em; font-weight: 800; letter-spacing: -0.03em; }
.prop__card span { font-size: 1.15em; opacity: 0.7; }
.toast { position: absolute; left: 50%; top: 1.2em; translate: -50% 0; white-space: nowrap; padding: 0.8em 1.2em; border-radius: 99em; background: var(--c); color: #fff; font-size: 1.2em; font-weight: 700; display: flex; gap: 0.6em; align-items: center; opacity: 0; }
.toast::before { content: "✓"; display: grid; place-items: center; width: 1.4em; height: 1.4em; border-radius: 50%; background: #34c759; font-size: 0.8em; }
.scene--property.is-active .pin { animation: pinDrop 7s var(--ease-spring) infinite; }
.scene--property.is-active .pin.p2 { animation-delay: 0.25s; }
.scene--property.is-active .pin.p3 { animation-delay: 0.5s; }
.scene--property.is-active .prop__card { animation: cardIn 7s var(--ease-out) infinite; }
.scene--property.is-active .toast { animation: toastIn 7s var(--ease-spring) infinite; }
.scene--property.is-active .fake-cursor { animation: curProp 7s ease-in-out infinite; }
@keyframes pinDrop { 0%, 6% { translate: 0 -6em; opacity: 0; } 16%, 92% { translate: 0 0; opacity: 1; } 100% { translate: 0 -6em; opacity: 0; } }
@keyframes cardIn { 0%, 22% { translate: 0 120%; } 32%, 92% { translate: 0 0; } 100% { translate: 0 120%; } }
@keyframes toastIn { 0%, 56% { opacity: 0; translate: -50% -1em; } 62%, 88% { opacity: 1; translate: -50% 0; } 94%, 100% { opacity: 0; translate: -50% -1em; } }
@keyframes curProp { 0% { left: 40%; top: 92%; } 40% { left: 74%; top: 82%; scale: 1; } 46% { scale: 0.8; } 50% { scale: 1; } 70% { left: 70%; top: 86%; } 100% { left: 40%; top: 92%; } }
/* --- Café: add to order, bag count, ready bar, steam --- */
.menu-row { display: grid; grid-template-columns: 1fr auto auto; gap: 1em; align-items: center; padding: 0.9em 0; border-bottom: 0.1em solid #f3ece4; font-size: 1.3em; font-weight: 600; }
.menu-row em { font-style: normal; opacity: 0.7; }
.add { display: grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: 50%; background: var(--a); color: #fff; font-style: normal; font-weight: 800; }
.bag { display: flex; justify-content: space-between; align-items: center; padding: 0.9em 1.1em; border-radius: 1em; background: var(--c); color: #fff; font-size: 1.3em; font-weight: 700; margin-top: 0.4em; }
.bag__n { display: grid; place-items: center; min-width: 1.8em; height: 1.8em; border-radius: 99em; background: #fff; color: var(--c); counter-reset: items var(--items); }
.bag__n::after { content: counter(items); }
.ready { display: grid; gap: 0.5em; font-size: 1.15em; font-weight: 600; }
.ready i { height: 0.6em; border-radius: 99em; background: var(--b); position: relative; overflow: hidden; }
.ready i::after { content: ""; position: absolute; inset: 0; background: var(--a); transform: scaleX(0); transform-origin: left; }
.cup { position: absolute !important; left: 41%; bottom: 2em; top: auto; width: 9em; height: 9em; z-index: 2; display: grid; place-items: center; rotate: 8deg; }
.cup svg { width: 100%; height: 100%; color: #18181a; }
.cup .steam { position: absolute; top: 0.2em; left: 3.8em; width: 0.6em; height: 2.6em; border-left: 0.25em solid #18181a; border-radius: 50%; opacity: 0; animation: steam 2.6s ease-in-out infinite; }
.cup .steam:nth-child(2) { animation-delay: 0.8s; left: 5em; }
.cup .steam:nth-child(3) { animation-delay: 1.6s; left: 2.6em; }
@keyframes steam { 0% { opacity: 0; translate: 0 1.6em; } 40% { opacity: 0.7; } 100% { opacity: 0; translate: 0 -1em; } }
.scene--cafe.is-active .cs { animation: order 7s ease-in-out infinite; }
.scene--cafe.is-active .bag__n { animation: bump 7s var(--ease-spring) infinite; }
.scene--cafe.is-active .ready i::after { animation: ready 7s ease-in-out infinite; }
.scene--cafe.is-active .fake-cursor { animation: curCafe 7s ease-in-out infinite; }
@keyframes order { 0%, 22% { --items: 0; } 24%, 46% { --items: 1; } 48%, 94% { --items: 2; } 100% { --items: 0; } }
@keyframes bump { 0%, 22%, 30%, 46%, 54%, 100% { scale: 1; } 25%, 49% { scale: 1.4; } }
@keyframes ready { 0%, 52% { transform: scaleX(0); } 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes curCafe { 0% { left: 60%; top: 92%; } 18% { left: 90.5%; top: 33%; scale: 1; } 22% { scale: 0.8; } 25% { scale: 1; } 42% { left: 90.5%; top: 42.5%; scale: 1; } 46% { scale: 0.8; } 49% { scale: 1; } 70% { left: 75%; top: 80%; } 100% { left: 60%; top: 92%; } }
/* --- Salon: pick a slot, confirmation, snipping scissors --- */
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7em; }
.slots i { font-style: normal; text-align: center; padding: 0.8em 0; border-radius: 0.9em; border: 0.12em solid #f3d7e3; font-size: 1.25em; font-weight: 700; }
.slots i.gone { opacity: 0.3; text-decoration: line-through; }
.confirm { padding: 1em 1.2em; border-radius: 1em; background: var(--c); color: #fff; font-size: 1.3em; font-weight: 700; opacity: 0; }
.scissors { position: absolute !important; right: 1em; top: -0.5em; width: 7em; height: 7em; color: var(--a); z-index: 2; }
.scissors .blade { transform-origin: 30px 38px; animation: snip 1.2s ease-in-out infinite; }
.scissors .blade--b { animation-direction: reverse; }
@keyframes snip { 0%, 100% { rotate: -10deg; } 50% { rotate: 8deg; } }
.scene--salon.is-active .slots i.pick { animation: pick 7s infinite; }
.scene--salon.is-active .confirm { animation: confirmIn 7s var(--ease-spring) infinite; }
.scene--salon.is-active .fake-cursor { animation: curSalon 7s ease-in-out infinite; }
@keyframes pick { 0%, 34% { background: transparent; color: inherit; border-color: #f3d7e3; } 38%, 92% { background: var(--a); color: #fff; border-color: var(--a); } 100% { background: transparent; color: inherit; } }
@keyframes confirmIn { 0%, 44% { opacity: 0; translate: 0 1em; } 52%, 90% { opacity: 1; translate: 0 0; } 96%, 100% { opacity: 0; } }
@keyframes curSalon { 0% { left: 55%; top: 90%; } 30% { left: 72%; top: 58%; scale: 1; } 35% { scale: 0.8; } 38% { scale: 1; } 70% { left: 72%; top: 80%; } 100% { left: 55%; top: 90%; } }
/* --- Trades: van drives the route, ETA counts down --- */
.cs__btn--pulse { animation: pulseBtn 1.8s ease-out infinite; }
@keyframes pulseBtn { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--a) 60%, transparent); } 100% { box-shadow: 0 0 0 1.2em transparent; } }
.route { position: relative; height: 15em; border-radius: 1.4em; background: #f7efe8; background-image: radial-gradient(#ead9ca 0.15em, transparent 0.18em); background-size: 1.6em 1.6em; overflow: hidden; }
.route svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.route__line { fill: none; stroke: var(--a); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2 9; }
.van { position: absolute; width: 2.6em; height: 1.7em; border-radius: 0.4em; background: var(--c); left: 4%; top: 78%; translate: -50% -50%; box-shadow: 0 0.4em 0.8em rgb(0 0 0 / 0.3); }
.van::before, .van::after { content: ""; position: absolute; bottom: -0.4em; width: 0.7em; height: 0.7em; border-radius: 50%; background: #18181a; border: 0.15em solid #fff; }
.van::before { left: 0.3em; } .van::after { right: 0.3em; }
.route__home { position: absolute; right: 4%; top: 12%; width: 2.6em; height: 2.6em; border-radius: 50%; background: #fff; border: 0.3em solid var(--a); }
.eta { display: flex; align-items: baseline; gap: 0.6em; padding: 1em 1.2em; border-radius: 1em; background: var(--c); color: #fff; }
.eta span { font-size: 1.2em; opacity: 0.75; margin-right: auto; }
.eta__n { font-size: 3em; font-weight: 800; letter-spacing: -0.04em; counter-reset: eta var(--eta); }
.eta__n::after { content: counter(eta); }
.eta small { font-size: 1.2em; }
.scene--trades.is-active .cs { animation: eta 8s linear infinite; }
.scene--trades.is-active .van { animation: drive 8s ease-in-out infinite; }
.scene--trades.is-active .fake-cursor { animation: curTrades 8s ease-in-out infinite; }
@keyframes eta { 0%, 10% { --eta: 18; } 85%, 100% { --eta: 2; } }
@keyframes drive { 0%, 10% { left: 6%; top: 83%; } 30% { left: 30%; top: 60%; } 45% { left: 52%; top: 33%; } 65% { left: 72%; top: 55%; } 85%, 100% { left: 93%; top: 22%; } }
@keyframes curTrades { 0% { left: 40%; top: 92%; } 10% { left: 18%; top: 72%; scale: 1; } 14% { scale: 0.8; } 17% { scale: 1; } 60% { left: 30%; top: 80%; } 100% { left: 40%; top: 92%; } }
/* --- Florist: flowers pop into the bouquet, price climbs --- */
.bouquet { position: relative; height: 15em; border-radius: 1.4em; background: var(--b); overflow: hidden; }
.fl { position: absolute; width: 4em; height: 4em; border-radius: 50%; background: radial-gradient(circle, #ffd84d 0 22%, transparent 24%), conic-gradient(from 0deg, var(--fc) 0 12%, transparent 0 13%, var(--fc) 0 25%, transparent 0 26%, var(--fc) 0 38%, transparent 0 39%, var(--fc) 0 50%, transparent 0 51%, var(--fc) 0 63%, transparent 0 64%, var(--fc) 0 75%, transparent 0 76%, var(--fc) 0 88%, transparent 0 89%, var(--fc) 0); scale: 0; }
.fl.f1 { --fc: #ff7ab8; left: 34%; top: 14%; } .fl.f2 { --fc: #ffb547; left: 52%; top: 22%; } .fl.f3 { --fc: #b388ff; left: 22%; top: 30%; }
.fl.f4 { --fc: #7fd0ff; left: 44%; top: 36%; } .fl.f5 { --fc: #ff9ed2; left: 62%; top: 40%; }
.stems { position: absolute; left: 46%; bottom: 0; width: 3em; height: 5em; background: repeating-linear-gradient(90deg, #4c9a5a 0 0.25em, transparent 0.25em 0.6em); clip-path: polygon(0 0, 100% 0, 70% 100%, 30% 100%); }
.b-price { display: flex; align-items: baseline; justify-content: space-between; padding: 1em 1.2em; border-radius: 1em; background: var(--c); color: #fff; }
.b-price small { font-size: 1.2em; opacity: 0.75; }
.b-num { font-size: 3em; font-weight: 800; letter-spacing: -0.04em; counter-reset: bp var(--bprice); }
.b-num::before { content: "£" counter(bp); }
.scene--florist.is-active .cs { animation: bprice 8s ease-in-out infinite; }
.scene--florist.is-active .fl { animation: flPop 8s var(--ease-spring) infinite; }
.scene--florist.is-active .fl.f2 { animation-delay: 0.6s; } .scene--florist.is-active .fl.f3 { animation-delay: 1.2s; }
.scene--florist.is-active .fl.f4 { animation-delay: 1.8s; } .scene--florist.is-active .fl.f5 { animation-delay: 2.4s; }
.scene--florist.is-active .fake-cursor { animation: curFlorist 8s ease-in-out infinite; }
@keyframes bprice { 0%, 6% { --bprice: 30; } 45%, 90% { --bprice: 58; } 100% { --bprice: 30; } }
@keyframes flPop { 0%, 4% { scale: 0; rotate: -40deg; } 12%, 88% { scale: 1; rotate: 0deg; } 96%, 100% { scale: 0; } }
@keyframes curFlorist { 0% { left: 62%; top: 90%; } 15% { left: 66%; top: 32%; } 30% { left: 78%; top: 40%; } 45% { left: 70%; top: 50%; } 70% { left: 72%; top: 80%; } 100% { left: 62%; top: 90%; } }
/* Phones and small screens: no pinning, every concept stacks with its label */
@media (max-width: 860px) {
.sectors { height: auto; }
.sector-3d { display: none; }
.sector-laptop { transform: none; }
.sector-laptop__lid { padding: 0; background: none; box-shadow: none; }
.sector-laptop__lid::before, .sector-laptop__base, .sector-laptop__url { display: none; }
.sector-laptop .browser__view { overflow: visible; }
.sectors__sticky { position: static; height: auto; padding-block: 60px 20px; }
.sectors__grid { grid-template-columns: 1fr; }
.sector-list, .sectors__progress { display: none; }
.browser__view { aspect-ratio: auto; display: grid; gap: 0; }
.browser__bar { display: none; }
.browser { background: none; border: 0; box-shadow: none; overflow: visible; display: grid; gap: 24px; }
.browser__view { container-type: normal; background: none; gap: 28px; }
.scene { position: relative; inset: auto; opacity: 1; visibility: visible; transform: none; display: grid; gap: 10px; }
.scene__label { display: flex; gap: 10px; align-items: center; font-size: 17px; font-weight: 600; }
.scene__label b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--a); color: #fff; font-size: 11px; }
.scene .cs { position: relative; inset: auto; aspect-ratio: 16 / 10.4; border-radius: 16px; border: 1px solid var(--line); box-shadow: var(--shadow); font-size: calc((100vw - 2 * var(--gutter)) / 72); }
.concept-tag { position: static; justify-self: start; }
}
/* Marquee of more sectors */
.sector-strip { padding-top: 10px; }
.sector-strip p { font-family: var(--hand); font-size: 26px; font-weight: 700; rotate: -2deg; display: inline-block; }
.biz-wall { position: relative; overflow: hidden; padding-block: 14px 6px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.biz-pills { display: flex; gap: 10px; width: max-content; animation: tape 60s linear infinite; }
.biz-wall:hover .biz-pills { animation-play-state: paused; }
.biz-pills span { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; border: 1px solid var(--line); background: var(--grey-1); font-size: 16px; font-weight: 600; white-space: nowrap; }
.biz-pills span::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--c, var(--hl-yellow)); }
@media (prefers-reduced-motion: reduce) { .biz-pills { animation: none; flex-wrap: wrap; width: auto; } }
@keyframes wobble { 50% { rotate: 14deg; scale: 1.08; } }
/* ===================== Statement ===================== */
.statement { position: relative; padding-block: clamp(80px, 12vw, 180px); }
/* a full-width light grey band, to set the statement apart from the sections either side */
.statement { isolation: isolate; }
.statement::before { content: ""; position: absolute; z-index: -1; inset-block: 0; left: 50%; width: 100vw; translate: -50% 0; background: var(--grey-1); }
.statement__text { max-width: 1100px; font-size: clamp(32px, 4.8vw, 70px); font-weight: 600; line-height: 1.12; letter-spacing: -0.045em; }
.statement__text .sw { opacity: 0.14; }
.statement__text mark .sw { opacity: 1; }
.no-js .statement__text .sw { opacity: 1; }
.doodle--star-a { width: 70px; height: 70px; right: 6%; top: 18%; animation: wobble 5s ease-in-out infinite; }
.doodle--star-b { width: 44px; height: 44px; left: 2%; bottom: 14%; animation: wobble 4s ease-in-out infinite reverse; }
/* ===================== 02 Skills ===================== */
.skills-head { position: relative; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: end; gap: 24px; }
.illo--skills { aspect-ratio: 1; width: 100%; max-width: 280px; justify-self: end; margin-bottom: clamp(32px, 5vw, 60px); }
.scribble-note--skills { right: 30%; bottom: 46px; }
.scribble-note--skills svg { right: -70px; top: 0; rotate: 20deg; }
@media (max-width: 900px) { .skills-head { grid-template-columns: 1fr; } .illo--skills { display: none; } .scribble-note--skills { position: static; display: inline-block; margin: -20px 0 24px; rotate: -3deg; } .scribble-note--skills svg { display: none; } }
.skills-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.skill { display: grid; grid-template-rows: 280px auto; border-radius: var(--radius-l); background: var(--grey-1); border: 1px solid var(--line); overflow: hidden; transition: translate 0.4s var(--ease-spring), box-shadow 0.4s; }
.skill:hover { translate: 0 -4px; box-shadow: var(--shadow); }
.skill--wide { grid-column: span 2; }
.skill__demo { position: relative; padding: 24px; display: grid; align-content: center; overflow: hidden; background: radial-gradient(circle at 20% 15%, color-mix(in srgb, var(--tint) 70%, transparent), transparent 62%), color-mix(in srgb, var(--tint) 24%, var(--white)); }
.skill__demo--center { place-items: center; grid-auto-flow: column; justify-content: center; gap: 18px; }
.skill__copy { padding: 20px 24px 24px; }
.skill__no { font-size: 12px; font-weight: 700; color: var(--grey-5); }
.skill__copy h3 { font-size: 19px; letter-spacing: -0.02em; margin-top: 4px; }
.skill__copy p { font-size: 14px; color: var(--grey-7); margin-top: 4px; }
@media (max-width: 1100px) { .skills-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .skills-grid { grid-template-columns: 1fr; } .skill--wide { grid-column: auto; } }
.demo-btn { border: 0; cursor: pointer; padding: 16px 26px; border-radius: 999px; background: var(--ink); color: var(--white); font-size: 15px; font-weight: 600; will-change: transform; }
.demo-btn span { display: inline-block; pointer-events: none; }
.demo-like { position: relative; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); cursor: pointer; display: grid; place-items: center; }
.demo-like svg { width: 24px; height: 24px; fill: none; stroke: var(--ink); stroke-width: 1.6; transition: fill 0.2s, stroke 0.2s, scale 0.4s var(--ease-spring); }
.demo-like[aria-pressed="true"] svg { fill: #ff4f8b; stroke: #ff4f8b; scale: 1.15; }
.demo-like i { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-radius: 50%; pointer-events: none; }
.demo-toggle input { position: absolute; opacity: 0; }
.demo-toggle span { display: block; width: 58px; height: 34px; border-radius: 999px; background: var(--grey-3); position: relative; cursor: pointer; transition: background 0.3s; }
.demo-toggle span::after { content: ""; position: absolute; left: 4px; top: 4px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgb(0 0 0 / 0.2); transition: translate 0.45s var(--ease-spring); }
.demo-toggle input:checked + span { background: #34c759; }
.demo-toggle input:checked + span::after { translate: 24px 0; }
.demo-toggle input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.skills-grid .skill:first-child .skill__demo--center { grid-auto-flow: row; }
.demo-type { font-size: clamp(60px, 6vw, 92px); font-weight: 800; letter-spacing: -0.05em; line-height: 1; cursor: default; user-select: none; }
.demo-type span { display: inline-block; transition: color 0.2s; }
.demo-type span:hover { color: #ff5a36; }
.demo-pens { display: flex; gap: 8px; margin-bottom: 14px; }
.demo-pens button { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; background: var(--c); cursor: pointer; box-shadow: 0 0 0 1px var(--line); transition: scale 0.3s var(--ease-spring); }
.demo-pens button[aria-pressed="true"] { border-color: var(--ink); scale: 1.12; }
.demo-highlight { font-size: clamp(20px, 1.9vw, 25px); font-weight: 600; line-height: 1.4; letter-spacing: -0.02em; }
.demo-highlight .w { cursor: pointer; border-radius: 0.2em; }
.demo-resize { position: relative; width: 100%; max-width: 100%; min-width: 120px; resize: horizontal; overflow: hidden; container-type: inline-size; border: 1px solid var(--line); border-radius: 14px; background: var(--white); padding: 14px; box-shadow: var(--shadow); }
.demo-resize__inner { display: grid; gap: 10px; }
.mini-nav { display: flex; align-items: center; gap: 6px; }
.mini-nav i { width: 36px; height: 10px; border-radius: 4px; background: var(--ink); margin-right: auto; }
.mini-nav b { width: 26px; height: 7px; border-radius: 4px; background: var(--grey-3); }
.mini-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px; align-items: center; }
.mini-hero i { height: 12px; border-radius: 4px; background: var(--grey-3); grid-column: 1; }
.mini-hero i:first-child { height: 20px; width: 80%; background: var(--ink); }
.mini-hero span { grid-column: 2; grid-row: 1 / 3; height: 70px; border-radius: 8px; background: linear-gradient(135deg, var(--hl-yellow), var(--hl-pink)); }
.mini-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mini-cards span { height: 46px; border-radius: 8px; background: var(--grey-2); }
@container (max-width: 340px) { .mini-nav b { display: none; } .mini-hero { grid-template-columns: 1fr; } .mini-hero span { grid-column: 1; grid-row: auto; height: 56px; } .mini-cards { grid-template-columns: 1fr; } .mini-cards span { height: 24px; } }
.demo-resize__handle { position: absolute; right: 3px; bottom: 3px; width: 14px; height: 14px; pointer-events: none; background: linear-gradient(135deg, transparent 50%, var(--grey-5) 50% 60%, transparent 60% 70%, var(--grey-5) 70% 80%, transparent 80%); }
.demo-resize__w { position: absolute; right: 12px; top: 10px; font-size: 11px; font-weight: 600; color: var(--grey-5); font-variant-numeric: tabular-nums; }
.demo-product { position: relative; width: 170px; padding: 10px; border-radius: 18px; background: #fff; border: 1px solid var(--line); display: grid; gap: 7px; box-shadow: var(--shadow); }
.demo-product__img { position: relative; aspect-ratio: 1; border-radius: 12px; background: #f1e9fb; display: grid; place-items: center; overflow: hidden; }
.demo-product__blob { width: 58%; aspect-ratio: 1; border-radius: 42% 58% 55% 45% / 50% 40% 60% 50%; background: linear-gradient(135deg, #ff5d8f, #e73e80); animation: blob 6s ease-in-out infinite; }
@keyframes blob { 50% { border-radius: 58% 42% 45% 55% / 40% 60% 40% 60%; rotate: 20deg; } }
.demo-product__save { position: absolute; left: 8px; top: 8px; z-index: 1; font-size: 10px; font-weight: 800; color: #fff; background: #e73e80; padding: 4px 7px; border-radius: 999px; rotate: -8deg; }
.demo-product b { font-size: 13px; letter-spacing: -0.01em; color: #18181a; }
.demo-product__row { display: flex; justify-content: space-between; align-items: center; }
.demo-product__row strong { font-size: 17px; color: #c2185b; }
.demo-product__row button { border: 0; cursor: pointer; padding: 8px 15px; border-radius: 10px; background: #5c2a9d; color: #fff; font-weight: 600; font-size: 13px; box-shadow: 0 4px 0 #36146a; transition: translate 0.1s, box-shadow 0.1s; }
.demo-product__row button:active { translate: 0 3px; box-shadow: 0 1px 0 #36146a; }
.demo-product__count { position: absolute; right: -10px; top: -10px; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 999px; background: #18181a; color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; scale: 0; transition: scale 0.4s var(--ease-spring); }
.demo-product__count.is-on { scale: 1; }
.sprinkle { position: absolute; width: 6px; height: 12px; border-radius: 3px; pointer-events: none; z-index: 5; }
.demo-scroll__phone { width: 120px; aspect-ratio: 393 / 852; border-radius: 22px; padding: 5px; background: #0a0a0b; box-shadow: 0 20px 30px -14px rgb(0 0 0 / 0.5); rotate: -6deg; }
.demo-scroll__screen { height: 100%; border-radius: 17px; overflow: hidden; background: #fff; }
.demo-scroll__screen img { width: 100%; will-change: transform; }
/* ===================== 03 Process (sideways) ===================== */
.process { position: relative; overflow: hidden; }
.process__pin { min-height: 100dvh; display: flex; align-items: center; padding-block: 40px; }
.process__track { display: flex; gap: 20px; padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); will-change: transform; }
.process__intro { flex: 0 0 min(460px, 82vw); display: grid; gap: 16px; align-content: center; padding-right: 24px; }
.process__intro h2 { font-size: clamp(38px, 5vw, 70px); letter-spacing: -0.05em; }
.process__intro p { color: var(--grey-7); font-size: 17px; }
.process__hint { font-family: var(--hand); font-size: 24px; font-weight: 700; rotate: -3deg; justify-self: start; }
.step { flex: 0 0 min(380px, 80vw); min-height: 440px; padding: 30px; border-radius: var(--radius-l); background: color-mix(in srgb, var(--tint) 30%, var(--white)); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; position: relative; }
.step__no { font-size: 80px; font-weight: 800; letter-spacing: -0.05em; line-height: 1; color: color-mix(in srgb, var(--tint) 85%, var(--ink)); }
.step__icon { width: 110px; height: 90px; color: var(--ink); margin-top: auto; }
.step h3 { font-size: 26px; letter-spacing: -0.03em; }
.step p { color: var(--grey-7); font-size: 15.5px; }
.illo--desk { flex: 0 0 min(520px, 86vw); min-height: 440px; border-radius: var(--radius-l); background: var(--grey-1); }
@media (max-width: 800px) {
.process__pin { min-height: 0; display: block; }
.process__track { flex-direction: column; padding-inline: var(--gutter); transform: none !important; }
.process__intro, .step, .illo--desk { flex: none; width: 100%; min-height: 0; }
.process__hint { display: none; }
.illo--desk { aspect-ratio: 14 / 10; }
}
/* ===================== Numbers ===================== */
.numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding-block: clamp(40px, 6vw, 80px); }
.numbers div { padding-top: 18px; border-top: 3px solid var(--ink); display: grid; gap: 6px; }
.numbers strong { font-size: clamp(54px, 7vw, 104px); font-weight: 800; letter-spacing: -0.06em; line-height: 0.9; font-variant-numeric: tabular-nums; }
.numbers span { font-size: 14px; font-weight: 500; color: var(--grey-7); }
@media (max-width: 760px) { .numbers { grid-template-columns: 1fr 1fr; } }
/* ===================== 04 Work: stacked brand cards ===================== */
.work-print { justify-self: start; font-weight: 600; text-decoration: none; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); transition: background 0.3s; }
.work-print:hover { background: var(--grey-1); }
.work-stack { display: grid; gap: 24px; }
.feature {
position: sticky; top: calc(96px + var(--k, 0) * 14px);
display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 4vw, 56px); align-items: center;
min-height: min(620px, 78vh); padding: clamp(28px, 4vw, 56px); border-radius: var(--radius-l); overflow: hidden;
background: var(--brand); color: var(--brand-ink); text-decoration: none; isolation: isolate;
box-shadow: 0 -20px 60px -30px rgb(24 24 26 / 0.35), inset 0 0 0 1px rgb(255 255 255 / 0.06);
transform-origin: 50% 0;
}
.feature__tag { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; opacity: 0.8; }
.feature__tag b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--pen); color: #18181a; font-size: 11px; }
.feature h3 { font-size: clamp(44px, 6vw, 92px); letter-spacing: -0.055em; margin-top: 10px; }
.feature p { margin-top: 12px; font-size: 17px; opacity: 0.8; max-width: 38ch; }
.feature__link { display: inline-flex; gap: 8px; margin-top: 26px; padding: 13px 22px; border-radius: 999px; background: var(--pen); color: #18181a; font-weight: 600; font-size: 15px; transition: gap 0.3s var(--ease-spring); }
.feature:hover .feature__link { gap: 14px; }
.feature__visual { position: relative; aspect-ratio: 16 / 11; }
.feature__glow { position: absolute; inset: 0 4% -6%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--pen) 55%, transparent), transparent); filter: blur(14px); }
.feature__laptop { position: absolute; left: 0; top: 8%; width: 84%; transition: translate 0.7s var(--ease-out), rotate 0.7s var(--ease-out); }
.feature__laptop .screen img { height: 100%; object-fit: cover; object-position: top; }
.feature__phone .screen img { height: auto; } /* thumbnails carry width/height attributes; keep their own aspect */
.feature__phone { position: absolute !important; right: 2%; bottom: 0; width: 22% !important; transition: translate 0.7s var(--ease-out), rotate 0.7s var(--ease-out); }
.feature:hover .feature__laptop { translate: -8px -8px; rotate: -1.5deg; }
.feature:hover .feature__phone { translate: 10px -14px; rotate: 3deg; }
@media (max-width: 860px) {
.feature { position: sticky; top: calc(84px + var(--k, 0) * 10px); grid-template-columns: 1fr; min-height: 0; gap: 18px; padding: 24px 22px; }
.feature h3 { font-size: clamp(40px, 12vw, 60px); margin-top: 6px; }
.feature p { font-size: 15px; margin-top: 8px; }
.feature__link { margin-top: 16px; padding: 11px 18px; font-size: 14px; }
.feature__visual { aspect-ratio: 16 / 10.5; }
}
/* ===================== 05 FAQ: sticky intro + numbered accordion ===================== */
.faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 6vw, 110px); align-items: start; }
.faq__side { position: sticky; top: 120px; }
.faq__side .chapter-head { margin-bottom: 0; }
.faq__ask { display: grid; justify-items: start; gap: 2px; margin-top: clamp(32px, 4vw, 52px); padding-top: 22px; border-top: 1px solid var(--line); max-width: 360px; text-decoration: none; color: inherit; }
.faq__ask > span { font-size: 14px; color: var(--grey-5); }
.faq__ask b { display: inline-flex; align-items: baseline; gap: 10px; font-size: clamp(20px, 1.8vw, 25px); font-weight: 600; letter-spacing: -0.03em; }
.faq__ask i { font-style: normal; padding: 0 0.12em; margin: 0 -0.12em; border-radius: 0.2em 0.35em 0.25em 0.4em; background: linear-gradient(100deg, transparent 0.4%, var(--hl-yellow) 1.2%, var(--hl-yellow) 96%, transparent 99%) 0 60% / 0% 72% no-repeat; transition: background-size 0.6s var(--ease-out), color 0.3s; }
.faq__ask em { font-style: normal; transition: translate 0.35s var(--ease-spring); }
.faq__ask:hover i, .faq__ask:focus-visible i { background-size: 100% 72%; color: var(--hl-text); }
.faq__ask:hover em { translate: 6px 0; }
.faq__list { --qs: clamp(19px, 1.75vw, 25px); --qn: 56px; border-top: 1px solid var(--line); }
.qa { --pen: var(--hl-yellow); border-bottom: 1px solid var(--line); }
.qa:nth-child(4n+2) { --pen: var(--hl-blue); }
.qa:nth-child(4n+3) { --pen: var(--hl-orange); }
.qa:nth-child(4n+4) { --pen: var(--hl-pink); }
.qa__h { margin: 0; font: inherit; letter-spacing: normal; }
.qa__btn {
display: grid; grid-template-columns: var(--qn) minmax(0, 1fr) 36px; gap: 14px; align-items: start; width: 100%;
padding: clamp(22px, 2.4vw, 32px) 0; border: 0; background: none; text-align: left; cursor: pointer; border-radius: 6px;
}
.qa__btn:focus-visible { outline-offset: -2px; }
.qa__n { font-size: 13px; font-weight: 600; line-height: calc(var(--qs) * 1.3); letter-spacing: 0.04em; color: var(--grey-5); font-variant-numeric: tabular-nums; transition: color 0.3s; }
.qa__q { font-size: var(--qs); font-weight: 600; line-height: 1.3; letter-spacing: -0.03em; transition: translate 0.45s var(--ease-out); }
.qa__q span {
padding: 0 0.12em; margin: 0 -0.12em; border-radius: 0.2em 0.35em 0.25em 0.4em;
background: linear-gradient(100deg, transparent 0.4%, var(--pen) 1.2%, var(--pen) 96%, transparent 99%) 0 60% / 0% 72% no-repeat;
box-decoration-break: clone; -webkit-box-decoration-break: clone;
transition: background-size 0.8s var(--ease-out), color 0.3s;
}
.qa__icon { position: relative; justify-self: end; width: 36px; height: 36px; margin-top: calc((var(--qs) * 1.3 - 36px) / 2); border-radius: 50%; border: 1px solid var(--line); color: var(--ink); transition: rotate 0.6s var(--ease-spring), background-color 0.3s, border-color 0.3s, color 0.3s; }
.qa__icon::before, .qa__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; margin: -0.8px 0 0 -6px; border-radius: 2px; background: currentColor; }
.qa__icon::after { rotate: 90deg; }
.qa__btn:hover .qa__q { translate: 6px 0; }
.qa__btn:hover .qa__icon { border-color: var(--ink); }
.qa__btn:hover .qa__n { color: var(--ink); }
.qa.is-open .qa__n { color: var(--ink); }
.qa.is-open .qa__q { translate: 0 0; }
.qa.is-open .qa__q span { background-size: 100% 72%; color: var(--hl-text); }
.qa.is-open .qa__icon { rotate: 135deg; background-color: var(--ink); border-color: var(--ink); color: var(--white); }
.qa__panel { overflow: hidden; }
.no-js .qa__panel[hidden] { display: block; }
.qa__inner { padding: 0 52px clamp(26px, 2.6vw, 34px) calc(var(--qn) + 14px); }
.qa__inner p { max-width: 54ch; font-size: 16.5px; line-height: 1.7; color: var(--grey-7); }
.qa__inner a { color: var(--ink); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (max-width: 900px) {
.faq { grid-template-columns: 1fr; gap: 36px; }
.faq__side { position: static; }
.faq__ask { margin-top: 24px; }
}
@media (max-width: 560px) {
.faq__list { --qs: 18.5px; --qn: 30px; }
.qa__btn { gap: 12px; grid-template-columns: var(--qn) minmax(0, 1fr) 32px; }
.qa__icon { width: 32px; height: 32px; margin-top: calc((var(--qs) * 1.3 - 32px) / 2); }
.qa__inner { padding: 0 0 24px calc(var(--qn) + 12px); }
.qa__inner p { font-size: 15.5px; }
.qa__btn:hover .qa__q { translate: 0 0; }
}
/* ===================== 06 Contact ===================== */
.contact { position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); padding: clamp(28px, 5vw, 64px); border-radius: var(--radius-l); background: var(--hl-yellow); color: #18181a; }
.contact .chapter-no { color: #18181a; }
.contact .chapter-no b { background: #18181a; color: #fff; }
.illo--wave { position: absolute; right: 4%; top: -90px; width: 170px; aspect-ratio: 1; rotate: 6deg; }
.illo--wave .illo__doodle { color: #18181a; }
.contact__intro { display: grid; gap: 18px; align-content: start; }
.contact__intro h2 { font-size: clamp(36px, 4.6vw, 64px); letter-spacing: -0.05em; }
.contact .hl { --pen: #fff; color: #18181a; }
.contact__intro p { font-size: 17px; opacity: 0.8; }
.contact__email { justify-self: start; font-size: clamp(18px, 1.8vw, 24px); font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.contact__form { display: grid; gap: 14px; align-content: start; }
.chips { border: 0; padding: 0; margin: 0 0 4px; display: flex; flex-wrap: wrap; gap: 8px; }
.chips legend { font-size: 13px; font-weight: 600; margin-bottom: 10px; padding: 0; }
.chips input { position: absolute; opacity: 0; }
.chips span { display: inline-block; padding: 9px 16px; border-radius: 999px; border: 1.5px solid #18181a; font-size: 14px; font-weight: 500; cursor: pointer; transition: background 0.2s, color 0.2s, scale 0.3s var(--ease-spring); }
.chips input:checked + span { background: #18181a; color: #fff; scale: 1.04; }
.chips input:focus-visible + span { outline: 2px solid #18181a; outline-offset: 2px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: grid; gap: 6px; }
.field span { font-size: 13px; font-weight: 600; }
.field input, .field textarea { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1.5px solid rgb(24 24 26 / 0.25); background: #fff; color: #18181a; font: inherit; font-size: 16px; transition: border-color 0.2s, box-shadow 0.2s; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: #18181a; box-shadow: 0 0 0 4px rgb(24 24 26 / 0.12); }
.field [aria-invalid="true"] { border-color: #d92d20; }
.contact__error { min-height: 1.2em; font-size: 14px; font-weight: 600; color: #b42318; }
.contact__form .btn { justify-self: start; background: #18181a; color: #fff; border-color: #18181a; }
.contact__note { font-size: 13px; opacity: 0.7; }
.contact__intro .contact__where { font-size: 14px; opacity: 0.7; }
.contact__reach { display: flex; flex-wrap: wrap; gap: 8px; }
.contact__pill { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px currentColor; color: inherit; font-size: 15px; font-weight: 600; text-decoration: none; transition: background-color 0.2s, color 0.2s; }
.contact__pill:hover { background: var(--hl-yellow); color: #18181a; box-shadow: inset 0 0 0 1.5px #18181a; }
@media (max-width: 560px) { .contact__reach { display: grid; grid-template-columns: 1fr 1fr; } .contact__reach .contact__pill:first-child { grid-column: 1 / -1; } }
.confetti { position: fixed; z-index: 90; width: 8px; height: 14px; border-radius: 3px; pointer-events: none; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; padding-top: 80px; } .illo--wave { width: 120px; top: -50px; } }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
/* ===================== Footer marquee ===================== */
.site-foot--big { padding-top: 0; }
.foot-marquee { overflow: hidden; padding-block: clamp(40px, 6vw, 80px); border-bottom: 1px solid var(--line); }
.foot-marquee__track { display: flex; align-items: center; gap: 30px; width: max-content; animation: tape 26s linear infinite; }
.foot-marquee__track span { font-size: clamp(64px, 11vw, 170px); font-weight: 800; letter-spacing: -0.06em; line-height: 1; white-space: nowrap; }
.foot-marquee__track svg { width: clamp(50px, 7vw, 100px); height: clamp(50px, 7vw, 100px); color: var(--ink); }
.foot-marquee:hover .foot-marquee__track { animation-play-state: paused; }
/* ===================== Custom cursor ===================== */
.cursor { position: fixed; left: 0; top: 0; z-index: 95; pointer-events: none; display: none; }
.cursor span { display: grid; place-items: center; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 999px; background: var(--ink); color: var(--white); font-size: 0; font-weight: 700; transition: width 0.35s var(--ease-spring), height 0.35s var(--ease-spring), margin 0.35s var(--ease-spring), font-size 0.2s, background 0.3s; }
.cursor.is-label span { width: 86px; height: 86px; margin: -43px 0 0 -43px; font-size: 14px; background: var(--hl-yellow); color: #18181a; }
@media (hover: hover) and (pointer: fine) { .has-cursor .cursor { display: block; } }
/* ===================== Hero: a website that builds itself =====================
Phases on [data-builder]: sketch → design → build → phone (home.js runs the
loop). Skins set the brand colours via --ba (accent), --bb (tint), --bc (ink). */
.builder { position: relative; display: grid; justify-items: center; gap: 22px; padding-top: 10px; }
.builder[data-skin="0"] { --ba: #1677ff; --bb: #e6f1ff; --bc: #0b1f3a; }
.builder[data-skin="1"] { --ba: #c2410c; --bb: #fdeedd; --bc: #3b1d06; }
.builder[data-skin="2"] { --ba: #7c3aed; --bb: #f1eaff; --bc: #2a1252; }
.builder[data-skin="3"] { --ba: #db2777; --bb: #fde7f1; --bc: #4a0d26; }
.builder[data-skin="4"] { --ba: #ea580c; --bb: #fff0e5; --bc: #3d1405; }
.builder__frame {
position: relative; width: 100%; max-width: 720px; border-radius: 20px; overflow: hidden;
background: var(--white); border: 1px solid var(--line);
box-shadow: 0 50px 90px -40px rgb(24 24 26 / 0.45), 0 0 0 1px rgb(24 24 26 / 0.02);
}
.builder.is-phone .builder__frame { width: 270px; border-radius: 40px; border: 8px solid #111; box-shadow: 0 0 0 1.5px #77777c, 0 50px 80px -30px rgb(24 24 26 / 0.5); }
.builder__bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--grey-1); }
.builder__bar i { width: 10px; height: 10px; border-radius: 50%; }
.builder__bar i:nth-child(1) { background: #ff5f57; } .builder__bar i:nth-child(2) { background: #febc2e; } .builder__bar i:nth-child(3) { background: #28c840; }
.builder__url { margin-inline: auto; padding: 3px 14px; border-radius: 8px; background: var(--white); font-size: 11.5px; color: var(--grey-5); }
.builder.is-phone .builder__bar { justify-content: center; padding: 10px 0 8px; background: var(--white); border: 0; }
.builder.is-phone .builder__bar i { display: none; }
.builder.is-phone .builder__bar::before { content: ""; width: 70px; height: 20px; border-radius: 999px; background: #111; }
.builder.is-phone .builder__url { display: none; }
.builder__canvas { position: relative; container-type: inline-size; background: #fff; }
.bsite { font-size: calc(100cqw / 64); color: var(--bc); padding: 2.4em 2.8em 3em; display: grid; gap: 2.6em; font-family: var(--font); }
.builder.is-phone .bsite { font-size: calc(100cqw / 24); padding: 1.6em 1.4em 2em; gap: 1.8em; }
/* Elements: each one morphs from wireframe to designed */
.b-el { border: 0.14em dashed transparent; border-radius: 0.8em; transition: background-color 0.6s var(--ease-out), border-color 0.4s, color 0.5s, box-shadow 0.6s, transform 0.5s var(--ease-spring), opacity 0.4s; transition-delay: calc(var(--i, 0) * 45ms); }
.bsite__nav { display: flex; align-items: center; gap: 2em; padding: 0.6em 0.8em; border-color: transparent; }
.b-logo { font-size: 1.8em; font-weight: 800; letter-spacing: -0.04em; color: var(--ba); padding: 0.1em 0.4em; margin-right: auto; }
.b-links { display: flex; gap: 1.4em; }
.b-links i { width: 4.4em; height: 0.9em; border-radius: 99em; background: #e9ebef; }
.b-cta { font-size: 1.2em; font-weight: 700; padding: 0.7em 1.4em; border-radius: 99em; background: var(--bc); color: #fff; }
.bsite__hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2.6em; align-items: center; }
.bsite__copy { display: grid; gap: 1.3em; justify-items: start; }
.b-eyebrow { font-size: 1.15em; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ba); padding: 0.1em 0.3em; }
.b-h { font-size: 4.2em; font-weight: 800; line-height: 1.02; letter-spacing: -0.045em; padding: 0.05em 0.1em; min-height: 3.1em; }
.b-h span::after { content: ""; display: inline-block; width: 0.06em; height: 0.85em; margin-left: 0.05em; background: currentColor; vertical-align: -0.08em; opacity: 0; }
.builder.is-typing .b-h span::after { opacity: 1; animation: caret 0.8s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.b-p { font-size: 1.45em; opacity: 0.75; padding: 0.1em 0.2em; }
.b-btn { font-size: 1.4em; font-weight: 700; padding: 0.95em 1.7em; border-radius: 99em; background: var(--ba); color: #fff; box-shadow: 0 0.7em 1.4em -0.7em var(--ba); }
.b-img { aspect-ratio: 4 / 3.2; border-radius: 2em; background: var(--bb); display: grid; place-items: center; overflow: hidden; }
.b-img svg { width: 78%; height: 78%; color: #18181a; overflow: visible; transition: transform 0.7s var(--ease-spring), opacity 0.4s; }
.bsite__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6em; }
.b-card { display: grid; gap: 0.8em; padding: 0.9em; border-radius: 1.4em; background: #fff; box-shadow: 0 1em 2.4em -1.2em rgb(0 0 0 / 0.22), 0 0 0 0.1em rgb(0 0 0 / 0.05); }
.b-card i { height: 6.4em; border-radius: 1em; background: linear-gradient(135deg, var(--bb), color-mix(in srgb, var(--ba) 30%, #fff)); }
.b-card b { height: 0.9em; width: 70%; border-radius: 99em; background: #e9ebef; }
.builder.is-phone .bsite__hero { grid-template-columns: 1fr; }
.builder.is-phone .b-links { display: none; }
.builder.is-phone .bsite__cards { grid-template-columns: 1fr 1fr; }
.builder.is-phone .b-card:nth-child(3) { display: none; }
.builder.is-phone .b-h { font-size: 2.6em; min-height: 0; }
/* Sketch phase: grey dashed wireframe, no colour, no words */
.builder[data-phase="sketch"] .b-el { background: transparent !important; border-color: #b9bcc4; color: transparent !important; box-shadow: none !important; }
.builder[data-phase="sketch"] .bsite__nav { border-color: transparent; }
.builder[data-phase="sketch"] .b-links i { background: transparent; border: 0.14em dashed #b9bcc4; }
.builder[data-phase="sketch"] .b-img svg { opacity: 0; transform: scale(0.6); }
.builder[data-phase="sketch"] .b-card i, .builder[data-phase="sketch"] .b-card b { background: transparent; border: 0.12em dashed #d3d5da; }
.builder[data-phase="sketch"] .b-h span::after { opacity: 0; }
.b-note {
position: absolute; left: var(--x); top: var(--y); z-index: 3; pointer-events: none;
font-family: var(--hand); font-size: clamp(16px, 1.5vw, 22px); font-weight: 700; color: #ff5a36; rotate: -4deg;
opacity: 0; translate: 0 6px; transition: opacity 0.4s, translate 0.5s var(--ease-spring);
}
.builder[data-phase="sketch"] .b-note { opacity: 1; translate: 0 0; }
.builder[data-phase="sketch"] .b-note:nth-of-type(2) { transition-delay: 0.15s; }
.builder[data-phase="sketch"] .b-note:nth-of-type(3) { transition-delay: 0.3s; }
.builder[data-phase="sketch"] .b-note:nth-of-type(4) { transition-delay: 0.45s; }
/* Build phase extras */
.b-cursor { position: absolute; z-index: 5; width: 22px; left: 80%; top: 90%; opacity: 0; filter: drop-shadow(0 3px 5px rgb(0 0 0 / 0.3)); pointer-events: none; }
.b-toast {
position: absolute; z-index: 5; left: 50%; bottom: 6%; translate: -50% 20px; opacity: 0; white-space: nowrap;
display: inline-flex; gap: 8px; align-items: center; padding: 9px 16px; border-radius: 999px; background: var(--bc); color: #fff; font-size: 13px; font-weight: 600;
}
.b-toast::before { content: "✓"; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #34c759; font-size: 10px; }
.b-toast.is-on { opacity: 1; translate: -50% 0; transition: opacity 0.3s, translate 0.5s var(--ease-spring); }
/* Steps under the frame */
.builder__steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.builder__steps li { position: relative; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--grey-5); border: 1px solid var(--line); transition: color 0.3s, background 0.3s, border-color 0.3s; }
.builder__steps li.is-on { background: var(--hl-yellow); color: #18181a; border-color: transparent; }
.builder__steps li.is-done { color: var(--ink); }
@media (max-width: 900px) { .builder { margin-top: 24px; } .b-note { display: none; } }
/* Builder: a fixed stage so the page doesn't jump between phases */
.builder { min-height: 640px; align-content: start; }
.builder.is-phone .builder__frame { height: 560px; }
.builder.is-phone .b-logo { white-space: nowrap; font-size: 1.4em; }
@media (max-width: 900px) { .builder { min-height: 0; } .builder.is-phone .builder__frame { height: 520px; } }
/* Rotating extra sectors under the intro */
.sectors__more { font-size: 15px; color: var(--grey-7); }
.flipword { display: inline-block; font-weight: 700; color: var(--ink); background: linear-gradient(var(--hl-orange), var(--hl-orange)) 0 70% / 100% 60% no-repeat; padding: 0 3px; }
/* Contact as a full-bleed band */
.contact-band { background: var(--hl-yellow); color: #18181a; padding-block: clamp(72px, 10vw, 140px); margin-top: clamp(60px, 8vw, 120px); }
.contact-band .contact { background: none; border-radius: 0; padding-block: 0; }
.contact-band .illo--wave { top: -150px; }
.home .site-foot { margin-top: 0; }
a.foot-marquee { display: block; text-decoration: none; color: inherit; }
a.foot-marquee:hover span { color: transparent; -webkit-text-stroke: 2px var(--ink); }
/* ===================== 02 Skills: one product, made to feel good ===================== */
.feel { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); min-width: 0; gap: clamp(28px, 4vw, 64px); align-items: center; }
.feel .chapter-head { margin-bottom: 26px; }
.feel-tabs { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.feel-tabs button {
width: 100%; display: grid; grid-template-columns: 34px 1fr; column-gap: 8px; text-align: left; position: relative;
padding: 14px 0; border: 0; border-bottom: 1px solid var(--line); background: none; cursor: pointer; color: var(--grey-5);
}
.feel-tabs__n { font-size: 12px; font-weight: 700; padding-top: 4px; }
.feel-tabs b { font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; letter-spacing: -0.02em; transition: color 0.3s; }
.feel-tabs em { grid-column: 2; font-style: normal; font-size: 14px; color: var(--grey-7); max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.5s var(--ease-out), opacity 0.4s; }
.feel-tabs__bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.feel-tabs button[aria-selected="true"] { color: var(--ink); }
.feel-tabs button[aria-selected="true"] em { max-height: 48px; opacity: 1; margin-top: 4px; }
.feel-tabs button:hover b { color: var(--ink); }
.feel__stage { position: relative; display: grid; justify-items: center; }
.feel__stage::before { content: ""; position: absolute; inset: 6% 2% -4%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 158 210 / 0.45), transparent); filter: blur(16px); }
.feel-device { width: 100%; border-radius: 20px; overflow: hidden; background: var(--white); border: 1px solid var(--line); box-shadow: 0 50px 90px -40px rgb(24 24 26 / 0.45); }
.feel-device__bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--grey-1); }
.feel-device__bar i { width: 10px; height: 10px; border-radius: 50%; }
.feel-device__bar i:nth-child(1) { background: #ff5f57; } .feel-device__bar i:nth-child(2) { background: #febc2e; } .feel-device__bar i:nth-child(3) { background: #28c840; }
.feel-device__bar span { margin-inline: auto; padding: 3px 14px; border-radius: 8px; background: var(--white); font-size: 11.5px; color: var(--grey-5); }
.feel-device__view { position: relative; width: 100%; margin-inline: auto; container-type: inline-size; overflow: hidden; background: #f4f2f8; }
/* The product page (1em = 1/64 of its width) */
.pp { --pa: #5c2a9d; --pb: #f1e9fb; --pc: #1a1230; --pk: #e73e80; font-size: calc(100cqw / 64); background: #fff; color: var(--pc); padding: 2em 2.6em 2.6em; display: grid; gap: 2.4em; transition: background 0.6s, color 0.6s; }
.pp__nav { display: flex; align-items: center; gap: 2em; font-size: 1.25em; font-weight: 500; }
.pp__logo { font-size: 1.5em; font-weight: 800; letter-spacing: -0.04em; color: var(--pa); margin-right: auto; transition: color 0.6s; }
.pp__basket { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.5em 1em; border-radius: 99em; background: var(--pb); font-weight: 700; transition: background 0.6s; }
.pp__basket i { font-style: normal; display: grid; place-items: center; min-width: 1.7em; height: 1.7em; border-radius: 99em; background: var(--pk); color: #fff; font-size: 0.85em; }
.pp__main { display: grid; grid-template-columns: 1fr 1fr; gap: 3em; align-items: center; }
.pp__gallery { position: relative; aspect-ratio: 1 / 0.92; border-radius: 2.4em; background: var(--pb); display: grid; place-items: center; transition: background 0.6s; }
.pp__blob { width: 52%; aspect-ratio: 1; border-radius: 42% 58% 55% 45% / 50% 40% 60% 50%; background: linear-gradient(135deg, #ff6fa1, var(--pk)); box-shadow: 0 2em 3em -1.5em rgb(231 62 128 / 0.6); }
.pp__save { position: absolute; left: 1.6em; top: 1.6em; padding: 0.5em 0.9em; border-radius: 99em; background: var(--pk); color: #fff; font-size: 1.1em; font-weight: 800; rotate: -8deg; }
.pp__thumbs { position: absolute; bottom: 1.4em; left: 50%; translate: -50% 0; display: flex; gap: 0.7em; }
.pp__thumbs i { width: 3.6em; height: 3.6em; border-radius: 0.9em; background: #fff; box-shadow: 0 0.4em 0.8em rgb(0 0 0 / 0.08); }
.pp__info { display: grid; gap: 1.2em; justify-items: start; }
.pp__brand { font-size: 1.1em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pa); }
.pp__title { font-size: 3.4em; font-weight: 800; line-height: 1.02; letter-spacing: -0.045em; }
.pp__stars { font-size: 1.2em; color: inherit; opacity: 0.8; }
.pp__star-row { color: #f5b301; letter-spacing: 0.1em; }
.pp__price { display: flex; align-items: baseline; gap: 0.8em; }
.pp__price strong { font-size: 3em; font-weight: 800; letter-spacing: -0.04em; color: var(--pk); }
.pp__price s { font-size: 1.4em; opacity: 0.5; }
.pp__sizes { display: flex; gap: 0.6em; }
.pp__sizes i { font-style: normal; padding: 0.6em 1.1em; border-radius: 99em; border: 0.12em solid #e6e1ee; font-size: 1.15em; font-weight: 600; }
.pp__sizes i.on { border-color: var(--pa); color: var(--pa); }
.pp__add { border: 0; font: inherit; font-size: 1.5em; font-weight: 700; padding: 1em 2.2em; border-radius: 1em; background: var(--pa); color: #fff; box-shadow: 0 0.35em 0 color-mix(in srgb, var(--pa) 60%, #000); cursor: default; transition: background 0.6s; position: relative; }
.pp__ship { font-size: 1.2em; opacity: 0.85; }
.pp__more { display: grid; gap: 1.2em; overflow: hidden; }
.pp__more b { font-size: 1.6em; letter-spacing: -0.02em; }
.pp__row { display: flex; gap: 1.4em; width: max-content; }
.pp__row span { width: 13em; height: 9em; border-radius: 1.4em; background: var(--pb); transition: background 0.6s; }
.pp__row span:nth-child(3n+2) { background: #fde3ee; } .pp__row span:nth-child(3n) { background: #e0f2ff; }
@container (max-width: 420px) {
.pp { font-size: calc(100cqw / 26); padding: 1.4em 1.4em 2em; gap: 1.6em; }
.pp__nav span:not(.pp__basket) { display: none; }
.pp__main { grid-template-columns: 1fr; gap: 1.6em; }
.pp__title { font-size: 2.6em; }
.pp__row span { width: 9em; height: 7em; }
}
/* Overlays */
.pp-toast { position: absolute; left: 50%; top: 18px; translate: -50% -14px; opacity: 0; white-space: nowrap; display: inline-flex; gap: 8px; align-items: center; padding: 9px 16px; border-radius: 999px; background: #1a1230; color: #fff; font-size: 13px; font-weight: 600; z-index: 4; }
.pp-toast::before { content: "✓"; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #34c759; font-size: 10px; }
.pp-toast.is-on { opacity: 1; translate: -50% 0; transition: opacity 0.3s, translate 0.5s var(--ease-spring); }
.pp-cursor { position: absolute; z-index: 5; width: 22px; left: 85%; top: 90%; opacity: 0; filter: drop-shadow(0 3px 5px rgb(0 0 0 / 0.3)); pointer-events: none; }
.pp-ripple { position: absolute; z-index: 1; width: 40px; height: 40px; border-radius: 50%; background: #120d1f; left: 90%; top: 6%; translate: -50% -50%; scale: 0; pointer-events: none; }
.pp-handle { position: absolute; top: 0; bottom: 0; right: 0; width: 22px; display: grid; place-items: center; cursor: ew-resize; opacity: 0; transition: opacity 0.3s; z-index: 3; touch-action: none; }
.pp-handle i { width: 6px; height: 54px; border-radius: 6px; background: var(--ink); box-shadow: 0 0 0 3px var(--white); }
.feel-device[data-mode="fit"] .pp-handle { opacity: 1; }
.pp-sprinkle { position: absolute; width: 6px; height: 12px; border-radius: 3px; z-index: 4; pointer-events: none; }
/* Mode: clear (focus on what matters) */
.pp-dim, .pp__title, .pp__nav { transition: opacity 0.5s, filter 0.5s; }
.feel-device[data-mode="clear"].is-focus .pp-dim { opacity: 0.25; filter: grayscale(1); }
.pp-key { position: relative; z-index: 0; }
.pp-key::after { content: ""; position: absolute; inset: -0.15em -0.3em; z-index: -1; border-radius: 0.3em; background: #fff04d; transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease-out); }
.pp__add.pp-key::after { inset: -0.5em; border-radius: 1.3em; }
.feel-device[data-mode="clear"].is-focus .pp-key::after { transform: scaleX(1); }
.feel-device[data-mode="clear"].is-focus .pp-key:nth-of-type(n)::after { transition-delay: 0.15s; }
/* Mode: yours (dark + brand swap) */
.pp.is-dark { background: #120d1f; color: #f3eefc; --pb: #241a3a; }
.pp.is-dark .pp__thumbs i { background: #2e2348; }
.pp.is-dark .pp__sizes i { border-color: #3a2f55; }
.pp.skin-b { --pa: #0f766e; --pk: #f97316; --pb: #dcf3ef; }
.pp.skin-c { --pa: #1d4ed8; --pk: #e11d48; --pb: #e0e9ff; }
.pp.is-dark.skin-b { --pb: #12302c; } .pp.is-dark.skin-c { --pb: #172347; }
@media (max-width: 900px) {
.feel { grid-template-columns: minmax(0, 1fr); }
.feel__side, .feel__stage { min-width: 0; }
.feel-tabs { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; border-top: 0; gap: 8px; padding-bottom: 6px; }
.feel-tabs button { grid-template-columns: auto; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; }
.feel-tabs__n, .feel-tabs em { display: none; }
.feel-tabs b { font-size: 14px; }
.feel-tabs button[aria-selected="true"] { background: var(--ink); color: var(--white); }
.feel-tabs__bar { display: none; }
}
.pp__add.pp-key::after { display: none; }
.pp__add { transition: background 0.6s, box-shadow 0.5s var(--ease-out); }
.feel-device[data-mode="clear"].is-focus .pp__add { box-shadow: 0 0.35em 0 color-mix(in srgb, var(--pa) 60%, #000), 0 0 0 0.45em #fff04d; }
.feel .chapter-head h2 { font-size: clamp(34px, 4vw, 58px); }
/* ===================== 03 Process: unboxed timeline ===================== */
.steps2 { position: relative; list-style: none; margin: 0; padding: 30px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); }
.steps2__line { position: absolute; left: 0; right: 0; top: 37px; height: 2px; background: var(--grey-2); }
.steps2__line i { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(var(--p, 0)); }
.step2 { position: relative; display: grid; gap: 12px; align-content: start; padding-top: 30px; }
.step2__dot { position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--white); border: 2px solid var(--ink); transition: background 0.3s, transform 0.4s var(--ease-spring); }
.step2.is-on .step2__dot { background: var(--hl-yellow); transform: scale(1.35); }
.step2__no { font-size: clamp(64px, 7vw, 108px); font-weight: 800; letter-spacing: -0.06em; line-height: 0.9; color: transparent; -webkit-text-stroke: 1.5px var(--grey-3); transition: color 0.5s, -webkit-text-stroke-color 0.5s; }
.step2.is-on .step2__no { color: var(--ink); -webkit-text-stroke-color: var(--ink); }
.step2__icon { width: 92px; height: 76px; color: var(--ink); }
.step2 h3 { font-size: clamp(21px, 1.9vw, 26px); letter-spacing: -0.03em; }
.step2 p { color: var(--grey-7); font-size: 15.5px; max-width: 32ch; }
.step2__card { display: contents; }
/* Phones: a swipeable row of step cards; the line runs dot to dot and fills as you go */
@media (max-width: 800px) {
.steps2 {
--gap: 12px; display: flex; gap: var(--gap); padding: 6px var(--gutter) 4px; margin-inline: calc(var(--gutter) * -1);
overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.steps2::-webkit-scrollbar { display: none; }
.steps2__line { display: none; }
.step2 { flex: 0 0 min(80%, 330px); display: block; padding-top: 34px; scroll-snap-align: start; }
.step2::before, .step2::after { content: ""; position: absolute; top: 7px; left: 30px; width: calc(100% + var(--gap)); height: 2px; background: var(--grey-2); }
.step2::after { background: var(--ink); transform-origin: left; transform: scaleX(var(--f, 0)); }
.step2:last-child::before, .step2:last-child::after { display: none; }
.step2__dot { z-index: 1; left: 22px; top: 0; }
.step2__card { display: grid; gap: 10px; align-content: start; height: 100%; padding: 24px 22px 26px; border: 1px solid var(--line); border-radius: var(--radius-l); transition: border-color 0.4s; }
.step2.is-on .step2__card { border-color: color-mix(in srgb, var(--ink) 22%, transparent); }
.step2__no { font-size: 58px; }
.step2__icon { width: 74px; height: 62px; margin-top: 4px; }
.step2 h3 { font-size: 21px; }
.step2 p { font-size: 15px; }
}
/* ===================== 02 What I do: illustrated service list ===================== */
.services { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.services__head { position: sticky; top: 110px; margin-bottom: 0; }
.services__head .btn { justify-self: start; margin-top: 8px; }
.services__list { border-top: 1px solid var(--line); }
.service {
position: relative; display: grid; grid-template-columns: 40px 96px minmax(0, 1fr) auto; gap: 20px; align-items: center;
padding: 22px 6px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none;
transition: padding 0.5s var(--ease-out);
}
.service:hover { padding-left: 16px; }
.service__n { font-size: 13px; font-weight: 700; color: var(--grey-5); }
.service__illo { width: 96px; aspect-ratio: 4 / 3; transition: transform 0.5s var(--ease-spring); }
.service__illo .illo__doodle { width: 100%; height: 100%; }
.service:hover .service__illo { transform: rotate(-6deg) scale(1.12); }
.service h3 { font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.035em; }
.service h3 span { background: linear-gradient(var(--hl-yellow), var(--hl-yellow)) 0 72% / 0% 62% no-repeat; padding: 0 3px; margin-left: -3px; transition: background-size 0.6s var(--ease-out); }
.service:nth-child(2) h3 span { background-image: linear-gradient(var(--hl-blue), var(--hl-blue)); }
.service:nth-child(3) h3 span { background-image: linear-gradient(var(--hl-orange), var(--hl-orange)); }
.service:nth-child(4) h3 span { background-image: linear-gradient(var(--hl-pink), var(--hl-pink)); }
.service:nth-child(5) h3 span { background-image: linear-gradient(#c7f016, #c7f016); }
.service:hover h3 span { background-size: 100% 62%; color: #18181a; }
.service p { color: var(--grey-7); font-size: 15.5px; margin-top: 4px; max-width: 46ch; }
.service__go { font-size: 22px; transition: translate 0.3s var(--ease-spring); }
.service:hover .service__go { translate: 6px 0; }
@media (max-width: 900px) {
.services { grid-template-columns: 1fr; }
.services__head { position: static; }
.service { grid-template-columns: 72px minmax(0, 1fr) auto; }
.service__n { display: none; }
.service__illo { width: 72px; }
}
/* ===================== 01 Who for: illustrated business cards ===================== */
.who-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; perspective: 1400px; }
.who-card { position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: var(--radius-l); overflow: hidden; background: var(--grey-1); border: 1px solid var(--line); transform-style: preserve-3d; transition: box-shadow 0.4s; }
.who-card:hover { box-shadow: var(--shadow); }
.who-card .illo { aspect-ratio: 4 / 3; background: color-mix(in srgb, var(--tint) 45%, var(--white)); }
.who-card .illo img { object-fit: cover; }
/* Each panel shows what I'd build for that business: a small concept homepage,
live HTML on a phone, with one flat prop beside it. The stage disc and cast
shadow follow the card tint. */
.who-card .illo { --stage: rgb(255 255 255 / 0.5); --cast: color-mix(in srgb, var(--tint) 50%, #3b2a4a); --cast-o: 0.28; }
.illo__art .ia-bd { fill: var(--stage); }
.illo__art .ia-sh { fill: var(--cast); opacity: var(--cast-o); }
.illo__art text { font-family: var(--font); }
/* Stage: the panel is the size container, so phone and prop scale together */
.who-card .illo.mini { display: block; container-type: inline-size; overflow: hidden; isolation: isolate; }
.mini { --px: 9cqw; --tilt: -3deg; --bdx: 5cqw; }
.mini--r { --px: 37cqw; --tilt: 3deg; --bdx: 33cqw; }
.mini__bd { position: absolute; top: 6cqw; left: var(--bdx); width: 62cqw; aspect-ratio: 1; border-radius: 50%; background: var(--stage); }
.who-card .mini__phone {
--edge: 0.5cqw;
position: absolute; top: 7cqw; left: var(--px); width: 54cqw;
rotate: var(--tilt);
box-shadow: 0 5cqw 8cqw -3cqw rgb(24 24 40 / 0.34), 0 1.4cqw 3cqw -1cqw rgb(24 24 40 / 0.22);
transition: translate 0.8s var(--ease-spring);
}
.who-card:hover .mini__phone { translate: 0 -1.6cqw; }
.mini__acc { position: absolute; z-index: 2; bottom: 2.5cqw; width: var(--aw, 24cqw); height: auto; overflow: visible; transition: translate 0.8s var(--ease-spring); }
.mini--l .mini__acc { right: var(--ax, 5cqw); }
.mini--r .mini__acc { left: var(--ax, 5cqw); }
.mini--window { --aw: 26cqw; --ax: 2cqw; }
.mini--property { --aw: 20cqw; --ax: 6cqw; }
.mini--cafe { --aw: 32cqw; --ax: 2cqw; }
.mini--salon { --aw: 23cqw; --ax: 6cqw; }
.mini--trades { --aw: 23cqw; --ax: 6cqw; }
.mini--florist { --aw: 23cqw; --ax: 6cqw; }
/* On the browser cards the prop stands small at the window's lower corner, clear of the page */
.mini--desk { --ax: 1.5cqw; }
.who-card .mini--desk .mini__bw { left: 13cqw; }
.mini--desk.mini--property { --aw: 13cqw; }
.mini--desk.mini--salon { --aw: 14cqw; }
.mini--desk.mini--florist { --aw: 14cqw; }
/* Desktop concepts sit in a slim browser window */
.who-card .mini__bw {
position: absolute; top: 8cqw; left: 11cqw; width: 85cqw; height: 80cqw;
container-type: inline-size; display: flex; flex-direction: column;
border-radius: 1.8cqw 1.8cqw 0 0; overflow: hidden; background: #fff;
box-shadow: 0 0 0 0.2cqw rgb(24 24 26 / 0.06), 0 5cqw 8cqw -3cqw rgb(24 24 40 / 0.34), 0 1.4cqw 3cqw -1cqw rgb(24 24 40 / 0.2);
transition: translate 0.8s var(--ease-spring);
}
.who-card:hover .mini__bw { translate: 0 -1.4cqw; }
.bw__bar { position: relative; flex: none; display: flex; align-items: center; height: 4.4cqw; padding: 0 1.8cqw; background: #f3f3f1; border-bottom: 0.2cqw solid #e5e5e2; }
.bw__dots { display: flex; gap: 0.8cqw; }
.bw__dots i { width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: #ff5f57; }
.bw__dots i:nth-child(2) { background: #febc2e; }
.bw__dots i:nth-child(3) { background: #28c840; }
.bw__url { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: flex; align-items: center; gap: 0.6cqw; height: 2.7cqw; padding: 0 2.6cqw; border-radius: 999px; background: #fff; box-shadow: 0 0 0 0.15cqw #e5e5e2; font: 500 1.25cqw / 1 var(--font); color: #77777d; white-space: nowrap; }
.bw__url svg { width: 1.25cqw; fill: none; stroke: currentColor; stroke-width: 1.6; }
.mini__bw .ms { flex: 1; }
/* The mini sites. Each is its own brand: palette, type, art and widget.
Phones size in cqw of the phone; browser sites in cqw of the window. */
.ms { position: relative; display: flex; flex-direction: column; overflow: hidden; text-align: left; line-height: 1.3; -webkit-font-smoothing: antialiased; }
.ms svg { display: block; flex: none; }
.ms i { font-style: normal; }
.ms-swap { display: inline-block; height: 1.3em; overflow: hidden; line-height: 1.3em; vertical-align: top; }
.ms-swap__in { display: flex; flex-direction: column; align-items: center; translate: 0 calc(var(--i, 0) * -1.3em); transition: translate 0.55s var(--ease-spring); }
.ms-swap__in > span { display: flex; align-items: center; gap: 0.5em; height: 1.3em; }
.ms-swap svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ms-tap { position: absolute; z-index: 6; left: 0; top: 0; width: 9cqw; height: 9cqw; margin: -4.5cqw 0 0 -4.5cqw; border-radius: 50%; background: rgb(120 120 128 / 0.35); box-shadow: 0 0 0 0.4cqw rgb(255 255 255 / 0.5); pointer-events: none; opacity: 0; }
.mini__bw .ms-tap { width: 4.6cqw; height: 4.6cqw; margin: -2.3cqw 0 0 -2.3cqw; box-shadow: 0 0 0 0.25cqw rgb(255 255 255 / 0.5); }
.ms-bag { position: relative; display: grid; place-items: center; width: 7cqw; height: 7cqw; }
.ms-bag svg { width: 5cqw; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.ms-bag__n { position: absolute; top: 0; right: -0.6cqw; display: grid; place-items: center; min-width: 3.6cqw; height: 3.6cqw; border-radius: 999px; background: var(--badge, #18181a); color: #fff; font: 700 2.3cqw / 1 var(--font); scale: 0; transition: scale 0.45s var(--ease-spring); }
.ms-bag.is-on .ms-bag__n { scale: 1; }
/* Gleam window cleaning: crisp blue and white, friendly rounded sans */
.gl { --b: #1668ff; --n: #0b2a5b; gap: 3cqw; padding: 0.6cqw 5cqw 6cqw; background: #fff; color: var(--n); font-family: "Nunito", var(--font); }
.gl-nav { display: flex; align-items: center; justify-content: space-between; min-height: 7cqw; }
.gl-logo { display: flex; align-items: center; gap: 1.6cqw; font-size: 5.6cqw; font-weight: 900; letter-spacing: -0.04em; }
.gl-logo i { width: 5cqw; height: 5cqw; border-radius: 50% 0 50% 50%; rotate: -45deg; background: linear-gradient(135deg, #6cc2ff, var(--b)); box-shadow: inset -0.7cqw 0.7cqw 0 rgb(255 255 255 / 0.35); }
.gl-burger { display: grid; gap: 1.1cqw; width: 5cqw; }
.gl-burger i { height: 0.7cqw; border-radius: 1cqw; background: var(--n); }
.gl-burger i + i { width: 62%; }
.gl-head { display: grid; gap: 1.6cqw; }
.gl-rate { display: flex; align-items: center; gap: 1.4cqw; font-size: 2.9cqw; font-weight: 800; color: #5a6b85; }
.gl-stars { display: flex; gap: 0.3cqw; }
.gl-stars svg { width: 2.8cqw; fill: #ffb800; }
.gl-h { font-size: 10.6cqw; font-weight: 900; line-height: 0.96; letter-spacing: -0.05em; }
.gl-h em { font-style: normal; color: var(--b); }
.gl-pic { position: relative; display: block; height: 30cqw; border-radius: 4.4cqw; overflow: hidden; }
.gl-pic svg { width: 100%; height: 100%; }
.gl-pic__tag { position: absolute; left: 2.4cqw; top: 2.4cqw; display: flex; align-items: center; gap: 1cqw; padding: 1cqw 2.2cqw 1cqw 1.6cqw; border-radius: 999px; background: #fff; font-size: 2.6cqw; font-weight: 800; box-shadow: 0 0.6cqw 1.6cqw rgb(11 42 91 / 0.12); }
.gl-pic__tag i { width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: #2bd18b; }
.gl-quote { position: relative; z-index: 1; display: grid; gap: 1.8cqw; margin: -12cqw 2cqw 0; padding: 3.6cqw; border-radius: 5cqw; background: #fff; box-shadow: 0 0 0 0.25cqw #e6eefa, 0 3cqw 6cqw -2cqw rgb(11 42 91 / 0.3); }
.gl-quote__top { display: flex; align-items: baseline; justify-content: space-between; font-size: 2.6cqw; font-weight: 700; color: #7a8aa3; }
.gl-quote__top b { font-size: 3.9cqw; font-weight: 900; color: var(--n); letter-spacing: -0.02em; }
.gl-quote__row { display: flex; align-items: baseline; justify-content: space-between; font-size: 3cqw; font-weight: 700; color: #5a6b85; }
.gl .ms-quote__n { font-size: 4.6cqw; font-weight: 900; color: var(--b); }
.gl .ms-quote__track { --p: 50; position: relative; display: block; height: 2.2cqw; margin: 0.8cqw 1.8cqw 0; border-radius: 999px; background: #e7effb; }
.gl .ms-quote__fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * 1%); border-radius: inherit; background: linear-gradient(90deg, #6cc2ff, var(--b)); }
.gl .ms-quote__knob { position: absolute; top: 50%; left: calc(var(--p) * 1%); width: 6.2cqw; height: 6.2cqw; margin: -3.1cqw 0 0 -3.1cqw; border: 1cqw solid var(--b); border-radius: 50%; background: #fff; box-shadow: 0 0.8cqw 2cqw rgb(22 104 255 / 0.4); }
.gl-quote__scale { display: flex; justify-content: space-between; padding: 0 0.6cqw; font-size: 2.4cqw; font-weight: 800; color: #9aa8bd; }
.gl-quote__scale i { width: 2.4cqw; text-align: center; }
.gl-quote__foot { display: flex; align-items: center; justify-content: space-between; padding-top: 2.4cqw; border-top: 0.25cqw dashed #dfe7f3; }
.gl-price { display: flex; align-items: center; gap: 1.6cqw; }
.gl .ms-quote__amt { font-size: 8.6cqw; font-weight: 900; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.gl-price small { font-size: 2.4cqw; font-weight: 700; line-height: 1.2; color: #7a8aa3; }
.gl-btn { display: inline-flex; align-items: center; gap: 1cqw; padding: 2.6cqw 3.6cqw 2.6cqw 4cqw; border-radius: 999px; background: var(--b); color: #fff; font-size: 3.4cqw; font-weight: 900; box-shadow: 0 1.2cqw 2.4cqw -1cqw rgb(22 104 255 / 0.6); }
.gl-btn svg { width: 3.4cqw; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.gl-peek { display: flex; gap: 3.4cqw; padding-top: 0.6cqw; font-size: 2.8cqw; font-weight: 800; }
.gl-peek span { display: flex; align-items: center; gap: 1.2cqw; }
.gl-peek i { position: relative; width: 3.8cqw; height: 3.8cqw; border-radius: 50%; background: #e3eeff; }
.gl-peek i::after { content: ""; position: absolute; left: 1.35cqw; top: 0.7cqw; width: 0.9cqw; height: 1.8cqw; border: solid var(--b); border-width: 0 0.55cqw 0.55cqw 0; rotate: 45deg; }
/* Little Crumb bakery: warm cream, Fraunces, terracotta */
.lc { --t: #c4532d; --br: #3b2417; --cr: #f5ecdd; --badge: var(--t); gap: 3cqw; padding: 0.6cqw 5cqw 6cqw; background: var(--cr); color: var(--br); font-family: "DM Sans", var(--font); }
.mini__phone:has(.lc) { --status-bg: #f5ecdd; --status-fg: #3b2417; }
.lc-nav { display: flex; align-items: center; justify-content: space-between; min-height: 7.4cqw; }
.lc-logo { display: flex; align-items: center; gap: 1.6cqw; font-family: "Fraunces", serif; font-size: 4.7cqw; font-weight: 600; letter-spacing: -0.02em; }
.lc-logo i { display: grid; place-items: center; width: 6.6cqw; height: 6.6cqw; border-radius: 50%; background: var(--t); color: var(--cr); font-family: "Fraunces", serif; font-style: italic; font-weight: 500; font-size: 3.3cqw; letter-spacing: -0.04em; }
.lc-h { font-family: "Fraunces", serif; font-size: 9.8cqw; font-weight: 600; line-height: 0.98; letter-spacing: -0.035em; }
.lc-h em { font-style: italic; font-weight: 500; color: var(--t); }
.lc-pic { position: relative; display: block; height: 27cqw; border-radius: 40cqw 40cqw 3cqw 3cqw / 16cqw 16cqw 3cqw 3cqw; overflow: hidden; }
.lc-pic svg { width: 100%; height: 100%; }
.lc-pic__tag { position: absolute; right: 2.4cqw; bottom: 2.4cqw; padding: 1cqw 2.4cqw; border-radius: 999px; background: var(--cr); font-size: 2.6cqw; font-weight: 700; }
.lc-menu { display: grid; gap: 2cqw; padding-top: 0.4cqw; }
.lc-row { display: grid; grid-template-columns: auto 1fr auto 6cqw; align-items: center; gap: 1.6cqw; font-size: 3.2cqw; }
.lc-row__name { font-family: "Fraunces", serif; font-size: 3.8cqw; font-weight: 600; letter-spacing: -0.015em; }
.lc-row > i { height: 0; border-bottom: 0.4cqw dotted #bfa98a; translate: 0 0.9cqw; }
.lc-row b { font-weight: 700; font-variant-numeric: tabular-nums; }
.lc-add { position: relative; width: 6cqw; height: 6cqw; border-radius: 50%; box-shadow: inset 0 0 0 0.3cqw var(--br); transition: background 0.35s, box-shadow 0.35s; }
.lc-add i { position: absolute; inset: 0; transition: rotate 0.5s var(--ease-spring); }
.lc-add i::before, .lc-add i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 2.4cqw; height: 0.5cqw; margin: -0.25cqw 0 0 -1.2cqw; border-radius: 1cqw; background: var(--br); transition: background 0.35s; }
.lc-add i::after { rotate: 90deg; }
.lc-add.is-on { background: var(--t); box-shadow: inset 0 0 0 0.3cqw var(--t); }
.lc-add.is-on i { rotate: 180deg; }
.lc-add.is-on i::before, .lc-add.is-on i::after { background: var(--cr); }
.lc-go { display: flex; align-items: center; justify-content: center; margin-top: 0.4cqw; padding: 3cqw; border-radius: 2cqw; background: var(--br); color: var(--cr); font-size: 3.5cqw; font-weight: 700; }
.ms-cafe__tot:empty { display: none; }
/* Brightline Electrical: safety yellow on charcoal, bold condensed */
.bl { --y: #ffd400; --c: #1b1d21; gap: 3cqw; padding: 0.6cqw 5cqw 6cqw; background: var(--c); color: #fff; font-family: "DM Sans", var(--font); }
.mini__phone:has(.bl) { --status-bg: #1b1d21; --status-fg: #fff; }
.bl-nav { display: flex; align-items: center; justify-content: space-between; min-height: 7.4cqw; }
.bl-logo { display: flex; align-items: center; gap: 1.4cqw; font-family: "Barlow Condensed", var(--font); font-size: 5.6cqw; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; }
.bl-logo i { display: grid; place-items: center; width: 5.8cqw; height: 5.8cqw; border-radius: 1.2cqw; background: var(--y); }
.bl-logo svg { width: 3.8cqw; fill: var(--c); }
.bl-ring { display: grid; place-items: center; width: 7cqw; height: 7cqw; border-radius: 50%; box-shadow: inset 0 0 0 0.3cqw rgb(255 255 255 / 0.22); }
.bl-ring svg { width: 3.4cqw; fill: var(--y); }
.bl-hero { display: grid; grid-template-columns: 1fr 28cqw; align-items: end; gap: 2cqw; }
.bl-copy { display: grid; justify-items: start; }
.bl-live { display: inline-flex; align-items: center; gap: 1.4cqw; margin-bottom: 2.4cqw; font-size: 2.6cqw; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #c8ccd2; }
.bl-live i { width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: #3ddc6a; box-shadow: 0 0 0 0.8cqw rgb(61 220 106 / 0.2); }
.bl-h { font-family: "Barlow Condensed", var(--font); font-size: 14cqw; font-weight: 800; line-height: 0.86; text-transform: uppercase; }
.bl-h em { font-style: normal; color: var(--y); }
.bl-board { width: 100%; height: auto; }
.bl-hazard { height: 2cqw; margin: 0 -5cqw; background: repeating-linear-gradient(-45deg, var(--y) 0 2.2cqw, #111215 2.2cqw 4.4cqw); }
.bl-cta { display: flex; gap: 2cqw; }
.bl-call { flex: 1.25; display: flex; align-items: center; justify-content: center; gap: 1.4cqw; padding: 2.8cqw 0; border-radius: 1.2cqw; background: var(--y); color: var(--c); font-family: "Barlow Condensed", var(--font); font-size: 4.8cqw; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; }
.bl-call svg { width: 3.6cqw; fill: var(--c); }
.bl-ghost { flex: 1; display: flex; align-items: center; justify-content: center; border-radius: 1.2cqw; box-shadow: inset 0 0 0 0.35cqw rgb(255 255 255 / 0.45); font-family: "Barlow Condensed", var(--font); font-size: 4.6cqw; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; }
.bl-rev { display: grid; gap: 1.8cqw; padding: 3.4cqw 3.4cqw 3.4cqw 4.4cqw; border-radius: 1.6cqw; background: #26292e; box-shadow: inset 1cqw 0 0 var(--y); }
.bl-rev__top { display: flex; align-items: center; gap: 2.2cqw; }
.bl-rev__top > b { font-family: "Barlow Condensed", var(--font); font-size: 9cqw; font-weight: 800; line-height: 0.9; }
.bl-rev__meta { display: grid; gap: 0.6cqw; font-size: 2.6cqw; color: #aeb3ba; }
.bl .ms-stars { display: flex; gap: 0.5cqw; }
.bl .ms-stars svg { width: 3.6cqw; fill: var(--y); }
.bl-rev__q { font-size: 3.2cqw; line-height: 1.4; color: #eceef0; }
.bl-rev__by { font-size: 2.4cqw; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #8d939b; }
.bl-trust { display: flex; gap: 3.4cqw; font-size: 2.6cqw; font-weight: 600; color: #aeb3ba; }
.bl-trust i::before { content: ""; display: inline-block; width: 1.5cqw; height: 1.5cqw; margin-right: 1.1cqw; background: var(--y); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
/* Harbour Lettings: deep navy and brass, an elegant sans */
.hb { --nv: #0f1f3a; --br: #c4a15f; --cr: #f6f1e8; padding: 0 4.6cqw; background: var(--nv); color: #fff; font-family: "Jost", var(--font); }
.hb-nav { display: flex; align-items: center; gap: 4cqw; height: 7cqw; border-bottom: 0.15cqw solid rgb(255 255 255 / 0.1); }
.hb-logo { display: flex; align-items: center; gap: 1.2cqw; }
.hb-logo i { display: grid; place-items: center; width: 3.6cqw; height: 3.6cqw; border: 0.18cqw solid var(--br); border-radius: 50%; color: var(--br); font-size: 1.8cqw; font-weight: 500; }
.hb-logo span { display: grid; font-size: 1.8cqw; font-weight: 600; line-height: 1.15; letter-spacing: 0.24em; text-transform: uppercase; }
.hb-logo small { font-size: 0.95cqw; font-weight: 400; letter-spacing: 0.22em; color: rgb(255 255 255 / 0.55); }
.hb-links { display: flex; gap: 2.8cqw; margin-left: auto; font-size: 1.45cqw; font-weight: 500; color: rgb(255 255 255 / 0.8); }
.hb-navbtn { padding: 1cqw 1.8cqw; border: 0.15cqw solid var(--br); border-radius: 0.4cqw; color: var(--br); font-size: 1.35cqw; font-weight: 500; letter-spacing: 0.04em; }
.hb-hero { display: grid; grid-template-columns: 1fr 38cqw; gap: 5cqw; align-items: center; padding-top: 4.6cqw; }
.hb-main { display: grid; justify-items: start; gap: 1.8cqw; }
.hb-eyebrow { display: flex; align-items: center; gap: 1.2cqw; font-size: 1.25cqw; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--br); }
.hb-eyebrow::before { content: ""; width: 3cqw; height: 0.15cqw; background: var(--br); }
.hb-h { font-size: 6.6cqw; font-weight: 400; line-height: 0.98; letter-spacing: -0.03em; }
.hb-h em { font-style: normal; font-weight: 500; color: var(--br); }
.hb-sub { max-width: 32ch; font-size: 1.6cqw; line-height: 1.5; color: rgb(255 255 255 / 0.68); }
.hb-search { display: flex; align-items: center; gap: 1.2cqw; width: 100%; margin-top: 0.8cqw; padding: 0.7cqw 0.7cqw 0.7cqw 1.8cqw; border-radius: 0.6cqw; background: #fff; color: #5b6474; font-size: 1.5cqw; }
.hb-search svg { width: 1.7cqw; fill: none; stroke: var(--nv); stroke-width: 1.8; stroke-linecap: round; }
.hb-search i { margin-left: auto; padding: 1cqw 2.2cqw; border-radius: 0.4cqw; background: var(--br); color: var(--nv); font-size: 1.4cqw; font-weight: 600; }
.hb-stats { display: flex; gap: 3.4cqw; margin-top: 1.2cqw; }
.hb-stats span { display: grid; font-size: 1.2cqw; color: rgb(255 255 255 / 0.58); }
.hb-stats b { font-size: 2.6cqw; font-weight: 500; letter-spacing: -0.02em; color: #fff; }
.hb-card { display: block; border-radius: 1.2cqw; overflow: hidden; background: var(--cr); color: var(--nv); box-shadow: 0 3cqw 5cqw -2cqw rgb(0 0 0 / 0.55); }
.hb .ms-list__photo { position: relative; display: block; height: 22cqw; overflow: hidden; }
.hb .ms-list__slides { display: flex; width: 200%; height: 100%; transition: translate 0.8s var(--ease-out); }
.hb .ms-list__slides svg { width: 50%; height: 100%; }
.hb .ms-list.is-2 .ms-list__slides { translate: -50% 0; }
.hb-badge { position: absolute; left: 1.4cqw; top: 1.4cqw; padding: 0.5cqw 1.2cqw; border-radius: 0.3cqw; background: var(--nv); color: #fff; font-size: 1.1cqw; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; }
.hb .ms-list__heart { position: absolute; right: 1.4cqw; top: 1.4cqw; display: grid; place-items: center; width: 3.6cqw; height: 3.6cqw; border-radius: 50%; background: rgb(255 255 255 / 0.94); }
.hb .ms-list__heart svg { width: 1.9cqw; fill: transparent; stroke: var(--nv); stroke-width: 1.6; transition: fill 0.3s, stroke 0.3s; }
.hb .ms-list.is-fav .ms-list__heart svg { fill: #d9465f; stroke: #d9465f; }
.hb .ms-list__dots { position: absolute; left: 50%; bottom: 1.3cqw; display: flex; gap: 0.6cqw; translate: -50% 0; }
.hb .ms-list__dots i { width: 0.9cqw; height: 0.9cqw; border-radius: 999px; background: rgb(255 255 255 / 0.6); transition: width 0.4s var(--ease-out), background 0.4s; }
.hb .ms-list:not(.is-2) .ms-list__dots i:first-child, .hb .ms-list.is-2 .ms-list__dots i:last-child { width: 2.4cqw; background: #fff; }
.hb-card__body { display: grid; gap: 0.7cqw; padding: 2cqw 2.2cqw 2.2cqw; }
.hb-card__row { display: flex; align-items: baseline; justify-content: space-between; }
.hb-price { font-size: 3cqw; font-weight: 500; letter-spacing: -0.02em; }
.hb-price small { margin-left: 0.4cqw; font-size: 1.3cqw; font-weight: 400; color: #6b7385; }
.hb-avail { display: flex; align-items: center; gap: 0.6cqw; font-size: 1.2cqw; font-weight: 500; color: #3d7a54; }
.hb-avail::before { content: ""; width: 0.8cqw; height: 0.8cqw; border-radius: 50%; background: currentColor; }
.hb-addr { font-size: 1.45cqw; color: #4b5468; }
.hb-feats { display: flex; gap: 1.6cqw; padding-bottom: 1.2cqw; border-bottom: 0.15cqw solid #e5ddcf; font-size: 1.3cqw; color: #4b5468; }
.hb-feats i + i::before { content: "·"; margin-right: 1.6cqw; color: var(--br); }
.hb-btn { display: flex; justify-content: center; margin-top: 0.8cqw; padding: 1.3cqw; border-radius: 0.5cqw; background: var(--nv); color: #fff; font-size: 1.5cqw; font-weight: 500; letter-spacing: 0.03em; }
.hb-btn svg { stroke: var(--br); }
/* Fringe studio: black, blush and an editorial serif */
.fr { --bl: #f2d4cf; --k: #0f0e0e; padding: 0 4.6cqw; background: var(--k); color: #f6eeea; font-family: "DM Sans", var(--font); }
.fr-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 7cqw; border-bottom: 0.15cqw solid rgb(255 255 255 / 0.12); }
.fr-links, .fr-navr { display: flex; align-items: center; gap: 2.6cqw; font-size: 1.25cqw; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(246 238 234 / 0.72); }
.fr-navr { justify-content: flex-end; gap: 2.2cqw; }
.fr-logo { font-family: "Instrument Serif", serif; font-size: 3.6cqw; line-height: 1; letter-spacing: -0.01em; }
.fr-logo i { margin-left: 0.5cqw; font-style: italic; font-size: 1.9cqw; color: var(--bl); }
.fr-navbtn { padding: 1cqw 1.8cqw; background: var(--bl); color: var(--k); letter-spacing: 0.14em; }
.fr-hero { display: grid; grid-template-columns: 1fr 19cqw 31cqw; gap: 3cqw; align-items: center; padding-top: 4.4cqw; }
.fr-main { display: grid; justify-items: start; gap: 1.6cqw; }
.fr-kicker { font-size: 1.2cqw; letter-spacing: 0.26em; text-transform: uppercase; color: var(--bl); }
.fr-h { font-family: "Instrument Serif", serif; font-size: 7.8cqw; line-height: 0.9; letter-spacing: -0.025em; }
.fr-h em { font-style: italic; color: var(--bl); }
.fr-sub { max-width: 22ch; font-size: 1.55cqw; line-height: 1.5; color: rgb(246 238 234 / 0.68); }
.fr-rate { display: flex; align-items: baseline; gap: 0.8cqw; padding-top: 1.2cqw; border-top: 0.15cqw solid rgb(255 255 255 / 0.16); font-size: 1.25cqw; color: rgb(246 238 234 / 0.6); }
.fr-rate b { font-family: "Instrument Serif", serif; font-size: 3cqw; font-weight: 400; color: #fff; }
.fr-pic { display: block; height: 31cqw; border-radius: 10cqw 10cqw 0 0; overflow: hidden; }
.fr-pic svg { width: 100%; height: 100%; }
.fr-book { display: grid; gap: 1.5cqw; padding: 2.4cqw; background: var(--bl); color: var(--k); }
.fr-book__h { display: flex; align-items: baseline; justify-content: space-between; font-size: 1.25cqw; color: #6f5552; }
.fr-book__h b { font-family: "Instrument Serif", serif; font-size: 2.5cqw; font-weight: 400; color: var(--k); }
.fr-days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8cqw; }
.fr-days i { display: grid; justify-items: center; padding: 0.8cqw 0; border: 0.15cqw solid rgb(15 14 14 / 0.18); font-family: "Instrument Serif", serif; font-size: 2.4cqw; line-height: 1; }
.fr-days small { margin-bottom: 0.3cqw; font-family: "DM Sans", var(--font); font-size: 0.95cqw; letter-spacing: 0.14em; text-transform: uppercase; color: #6f5552; }
.fr-days .is-on { border-color: var(--k); background: var(--k); color: var(--bl); }
.fr-days .is-on small { color: rgb(242 212 207 / 0.7); }
.fr-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8cqw; }
.fr-slots i { padding: 0.9cqw 0; border: 0.15cqw solid rgb(15 14 14 / 0.25); font-size: 1.35cqw; font-weight: 500; text-align: center; transition: background 0.35s, color 0.35s, border-color 0.35s; }
.fr-slots .is-off { border-style: dashed; color: rgb(15 14 14 / 0.3); text-decoration: line-through; }
.fr-slots .is-on { border-color: var(--k); background: var(--k); color: var(--bl); }
.fr-btn { display: flex; justify-content: center; padding: 1.3cqw; background: var(--k); color: var(--bl); font-size: 1.3cqw; letter-spacing: 0.14em; text-transform: uppercase; transition: background 0.35s, color 0.35s; }
.fr .ms-book.is-empty .fr-btn { background: rgb(15 14 14 / 0.1); color: rgb(15 14 14 / 0.45); }
/* Petal & Stem: soft sage, a garden serif and a script accent */
.ps { --g: #2f4a36; --sg: #e7ede1; --ro: #c26d76; --badge: var(--ro); padding: 0 4.6cqw; background: var(--sg); color: var(--g); font-family: "DM Sans", var(--font); }
.ps-bar { margin: 0 -4.6cqw; padding: 0.9cqw; background: var(--g); color: #e7ede1; font-size: 1.15cqw; letter-spacing: 0.06em; text-align: center; }
.ps-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 7cqw; border-bottom: 0.15cqw solid rgb(47 74 54 / 0.15); }
.ps-links, .ps-navr { display: flex; align-items: center; gap: 2.4cqw; font-size: 1.4cqw; font-weight: 500; }
.ps-navr { justify-content: flex-end; }
.ps-logo { font-family: "Cormorant Garamond", serif; font-size: 3.2cqw; font-weight: 600; letter-spacing: 0.01em; }
.ps-logo em { margin: 0 0.2cqw; font-family: "Great Vibes", cursive; font-style: normal; font-weight: 400; font-size: 3.8cqw; color: var(--ro); }
.ps .ms-bag { width: 3.6cqw; height: 3.6cqw; }
.ps .ms-bag svg { width: 2.4cqw; }
.ps .ms-bag__n { top: -0.2cqw; right: -0.4cqw; min-width: 1.9cqw; height: 1.9cqw; font-size: 1.1cqw; }
.ps-hero { display: grid; grid-template-columns: 1fr 35cqw; gap: 5cqw; align-items: center; padding-top: 4.4cqw; }
.ps-main { display: grid; justify-items: start; }
.ps-h { font-family: "Cormorant Garamond", serif; font-size: 6.8cqw; font-weight: 500; line-height: 0.95; letter-spacing: -0.015em; }
.ps-script { margin: -0.2cqw 0 1.8cqw 4cqw; font-family: "Great Vibes", cursive; font-size: 8.6cqw; line-height: 0.95; color: var(--ro); }
.ps-sub { max-width: 30ch; margin-bottom: 2.4cqw; font-size: 1.5cqw; line-height: 1.55; color: #4d6553; }
.ps-cta { padding: 1.3cqw 2.8cqw; border-radius: 999px; box-shadow: inset 0 0 0 0.18cqw var(--g); font-size: 1.45cqw; font-weight: 500; }
.ps-card { display: block; border-radius: 1.2cqw; overflow: hidden; background: #fbf8f2; box-shadow: 0 2.4cqw 4cqw -2cqw rgb(47 74 54 / 0.35); }
.ps-photo { position: relative; display: block; height: 24cqw; overflow: hidden; background: radial-gradient(60% 70% at 50% 45%, #fdf3ee, transparent 70%), linear-gradient(160deg, #f6dcd5, #eec4bb); }
.ps .ms-prod__bq { position: absolute; left: 50%; top: 5%; width: auto; height: 112%; translate: -50% 0; }
.ps-tag { position: absolute; left: 1.4cqw; top: 1.4cqw; padding: 0.5cqw 1.2cqw; border-radius: 999px; background: #fbf8f2; font-size: 1.1cqw; font-weight: 500; letter-spacing: 0.04em; }
.ps-card__body { display: grid; gap: 1.3cqw; padding: 1.8cqw 2cqw 2cqw; }
.ps-card__row { display: flex; align-items: baseline; justify-content: space-between; }
.ps-card__row b:first-child { font-family: "Cormorant Garamond", serif; font-size: 2.6cqw; font-weight: 600; }
.ps .ms-prod__price { font-size: 1.8cqw; font-weight: 500; font-variant-numeric: tabular-nums; }
.ps-size { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 0.4cqw; border-radius: 999px; background: #eef2e8; font-size: 1.3cqw; }
.ps-size i { position: relative; z-index: 1; padding: 0.7cqw 0; color: #6c8371; text-align: center; transition: color 0.3s; }
.ps-size .is-on { color: var(--g); font-weight: 500; }
.ps-size .ms-size__pill { position: absolute; z-index: 0; inset: 0.4cqw auto 0.4cqw 0.4cqw; width: calc(50% - 0.4cqw); padding: 0; border-radius: 999px; background: #fff; box-shadow: 0 0.3cqw 0.8cqw rgb(47 74 54 / 0.15); transition: translate 0.55s var(--ease-spring); }
.ps-size.is-2 .ms-size__pill { translate: 100% 0; }
.ps-btn { display: flex; align-items: center; justify-content: center; gap: 1cqw; padding: 1.3cqw; border-radius: 999px; background: var(--g); color: #f3f1e8; font-size: 1.45cqw; font-weight: 500; }
.ps-btn svg { width: 2cqw; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
/* Below-the-fold peeks on the browser sites */
.hb-peek { display: grid; gap: 1.6cqw; margin: 5cqw -4.6cqw 0; padding: 3cqw 4.6cqw; background: var(--cr); color: var(--nv); }
.hb-peek__h { display: flex; align-items: baseline; justify-content: space-between; }
.hb-peek__h b { font-size: 2.6cqw; font-weight: 500; letter-spacing: -0.02em; }
.hb-peek__h i { font-size: 1.3cqw; color: #7a6a4c; border-bottom: 0.15cqw solid var(--br); }
.hb-peek__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; }
.hb-peek__row i { position: relative; height: 15cqw; border-radius: 0.8cqw; overflow: hidden;
background:
repeating-linear-gradient(90deg, transparent 0 18%, #2b4563 18% 30%, transparent 30% 42%) 50% 34% / 70% 22% no-repeat,
repeating-linear-gradient(90deg, transparent 0 18%, #2b4563 18% 30%, transparent 30% 42%) 50% 74% / 70% 22% no-repeat,
linear-gradient(var(--f, #efe5d3), var(--f, #efe5d3)) 50% 100% / 76% 84% no-repeat,
linear-gradient(170deg, #bcd6ea, #f1e7d5); }
.hb-peek__row i:nth-child(2) { --f: #c27a5b; }
.hb-peek__row i:nth-child(3) { --f: #dfe3e6; }
.hb-peek__row span { position: absolute; left: 1cqw; bottom: 1cqw; padding: 0.5cqw 1cqw; border-radius: 0.3cqw; background: #fff; font-size: 1.1cqw; font-weight: 500; }
.fr-peek { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.4cqw; margin-top: 6cqw; }
.fr-peek > span { display: grid; gap: 0.4cqw; padding-top: 1.4cqw; border-top: 0.15cqw solid rgb(242 212 207 / 0.35); }
.fr-peek b { font-family: "Instrument Serif", serif; font-size: 2.5cqw; font-weight: 400; }
.fr-peek i { font-size: 1.2cqw; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bl); }
.ps-peek { display: grid; gap: 1.6cqw; margin-top: 5.4cqw; }
.ps-peek > b { font-family: "Cormorant Garamond", serif; font-size: 3cqw; font-weight: 600; }
.ps-peek__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6cqw; }
.ps-peek__row i { display: flex; align-items: flex-end; height: 13cqw; padding: 1.2cqw; border-radius: 1cqw; font-size: 1.3cqw; font-weight: 500;
background:
radial-gradient(circle at 50% 40%, var(--c, #f5b84a) 0 1.3cqw, transparent 1.4cqw),
radial-gradient(circle at 50% 40%, var(--p, #fff) 0 3.2cqw, transparent 3.3cqw),
var(--bg, #f6dcd5); }
.ps-peek__row i:nth-child(2) { --bg: #dfe8d6; --p: #f1c9c1; --c: #c26d76; }
.ps-peek__row i:nth-child(3) { --bg: #e3ecf4; --p: #fff6c8; --c: #f0a63a; }
.ps-peek__row i:nth-child(4) { --bg: #f3e6d8; --p: #ffffff; --c: #2f4a36; }
.who-card__body { padding: 22px 24px 24px; display: grid; gap: 8px; align-content: start; }
.who-card h3 { font-size: clamp(20px, 1.9vw, 26px); letter-spacing: -0.03em; }
.who-card p { color: var(--grey-7); font-size: 15px; }
.who-card__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.who-card__chips span { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--tint) 35%, var(--white)); color: var(--ink); }
.who-more { margin-top: 36px; font-size: clamp(22px, 2.4vw, 32px); font-weight: 500; letter-spacing: -0.02em; color: var(--grey-7); }
.who-more a { margin-left: 8px; font-weight: 600; color: var(--ink); }
@media (max-width: 900px) { .who-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .who-grid { grid-template-columns: 1fr; } }
/* Work cards: soft contact shadows so the devices sit on the brand colour */
.feature__laptop .laptop__base { position: relative; }
.feature__laptop .laptop__base::after, .feature__visual::after {
content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%;
background: radial-gradient(closest-side, rgb(0 0 0 / 0.34), rgb(0 0 0 / 0.12) 55%, transparent);
filter: blur(5px); transition: opacity 0.7s var(--ease-out), scale 0.7s var(--ease-out);
}
.feature__laptop .laptop__base::after { left: 0; right: 0; top: 30%; height: 220%; }
.feature__visual::after { right: -1%; width: 26%; bottom: -5%; height: 9%; }
.feature:hover .laptop__base::after, .feature:hover .feature__visual::after { opacity: 0.6; scale: 0.92; }
/* A soft light behind the top of the devices, in a lighter tint of the brand, so the colour glows */
.feature__glow {
inset: -18% -6% 18% 4%;
background:
radial-gradient(42% 46% at 52% 30%, rgb(255 255 255 / 0.55), transparent 70%),
radial-gradient(closest-side, color-mix(in srgb, var(--pen) 60%, transparent), transparent);
filter: blur(22px);
animation: feature-glow 7s ease-in-out infinite alternate;
}
@keyframes feature-glow { to { translate: 3% 2%; scale: 1.06; } }
@media (prefers-reduced-motion: reduce) { .feature__glow { animation: none; } }
.feature__laptop .laptop__base::after { top: 40%; height: 260%; background: radial-gradient(closest-side, rgb(0 0 0 / 0.42), rgb(0 0 0 / 0.16) 55%, transparent); }
.feature__visual::after { bottom: -6%; height: 11%; background: radial-gradient(closest-side, rgb(0 0 0 / 0.45), rgb(0 0 0 / 0.16) 55%, transparent); }
/* ---------- Who cards: each concept is a real site, scaled into its frame ---------- */
.who-frame { position: relative; overflow: hidden; container-type: size; background: #fff; }
.who-frame iframe {
position: absolute; left: 0; top: 0; border: 0; pointer-events: none;
width: calc(var(--vw) * 1px); height: calc(var(--vh) * 1px);
transform-origin: 0 0; scale: calc(100cqw / (var(--vw) * 1px));
}
.who-card .mini__phone .screen.who-frame { flex: 1; }
.who-frame--desk { flex: 1; min-height: 0; }
.who-card .mini__bw .bw__url { display: grid; place-items: center; font: 500 1.6cqw/1 var(--font); color: #7a7a80; letter-spacing: 0; }
/* ---------- Who cards v3: no props; phones centred and upright, desktop sites in a laptop ---------- */
.who-card .mini__bd { left: 50%; top: 50%; width: 70cqw; translate: -50% -50%; opacity: 0.7; }
.who-card .mini__phone { left: 50%; top: 9cqw; width: 46cqw; rotate: 0deg; translate: -50% 0; }
.who-card:hover .mini__phone { translate: -50% -1.6cqw; }
.who-card .mini__laptop { position: absolute; left: 50%; top: 12cqw; width: 86cqw; translate: -50% 0; transition: translate 0.8s var(--ease-spring); filter: drop-shadow(0 4cqw 5cqw rgb(24 24 40 / 0.3)); }
.who-card:hover .mini__laptop { translate: -50% -1.4cqw; }
.mini__laptop .laptop__lid { aspect-ratio: 16 / 10; padding: 1.6cqw 1.6cqw 2.2cqw; border-radius: 2.4cqw 2.4cqw 0.8cqw 0.8cqw; }
.mini__laptop .laptop__lid::before { width: 0.7cqw; height: 0.7cqw; margin-left: -0.35cqw; top: 0.5cqw; }
.mini__laptop .screen.who-frame { position: relative; width: 100%; height: 100%; border-radius: 0.6cqw; }
.mini__laptop .laptop__base { height: 2cqw; margin: 0 -7%; border-radius: 0 0 2cqw 2cqw; }
.mini__laptop .laptop__base::before { height: 0.8cqw; }
/* ---------- Work cards: small brand pieces popping out around the devices ----------
Ported, scaled down, from each project page's hero pops. Sizes are in em off a
container-relative root, so every piece keeps the same scale as the devices. */
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 300 900; font-display: swap; src: url(../projects/gosweet/fonts/Rubik.woff2) format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(../projects/gosweet/fonts/PlusJakartaSans.woff2) format("woff2"); }
.feature__visual { container-type: inline-size; }
.wp-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.wpop {
position: absolute; z-index: 4; left: var(--x); top: var(--y); width: var(--w, auto);
font-size: clamp(6px, 1.3cqw, 9.5px); line-height: 1.3; letter-spacing: 0; pointer-events: none;
filter: drop-shadow(0 0.25em 0.3em rgb(10 10 20 / 0.16)) drop-shadow(0 1.6em 1.8em rgb(10 10 20 / 0.26));
}
.wpop > * { display: block; rotate: var(--r, 0deg); animation: wpop-float var(--d, 3.2s) ease-in-out infinite alternate; }
.wpop:nth-of-type(odd) > * { animation-delay: -1.4s; }
@keyframes wpop-float { from { translate: 0 0.4em; } to { translate: 0 -0.6em; } }
.wpop img { display: block; width: 100%; }
/* PATCH: enamel badge, business card, ambassadors chip */
.wp-stk { aspect-ratio: 1; }
.wp-stk svg { display: block; width: 100%; height: 100%; overflow: visible; }
.wp-stk__key { fill: none; stroke: #111318; stroke-width: 1.1; opacity: 0.9; }
.wp-stk__ring { transform-box: view-box; transform-origin: 100px 100px; animation: wp-spin 48s linear infinite; fill: #111318; }
.wp-stk__ring text { font-family: "Montserrat", var(--font); font-weight: 800; font-size: 13.5px; letter-spacing: 0.1em; }
.wp-stk__a { fill: #111318; }
@keyframes wp-spin { to { transform: rotate(360deg); } }
.wp-bc { aspect-ratio: 240.9 / 155.9; border-radius: 2px; overflow: hidden; background: #1b1c1c; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 0 0 1px rgb(255 255 255 / 0.1); }
.wp-bc img { height: 100%; object-fit: cover; }
.wp-patch-chip { display: grid !important; justify-items: start; gap: 0.5em; padding: 1.2em 1.5em 1.3em; border-radius: 1.3em; background: #b3dd03; color: #111318; font-family: "Montserrat", var(--font); white-space: nowrap; }
.wp-patch-chip strong { font-size: 2.9em; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.wp-patch-chip span { font-size: 0.95em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.3; }
/* Birth-hood: package-finder result, scalloped sticker, sparkle */
.wp-bh-card { padding: 1.3em 1.3em 1.4em; border-radius: 1.5em; background: #fff; color: #111; }
.wp-bh-card__eye { display: block; font-size: 0.8em; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #b83f93; }
.wp-bh-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6em; margin-top: 0.5em; }
.wp-bh-card__head b { font-size: 1.75em; font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
.wp-bh-card__head i { font-style: normal; font-size: 1.35em; white-space: nowrap; font-weight: 700; color: #b83f93; }
.wp-bh-card__tag { display: block; margin-top: 0.4em; font-size: 0.78em; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #767676; }
.wp-bh-card__list { display: grid; gap: 0.4em; margin-top: 0.9em; font-size: 1em; line-height: 1.35; }
.wp-bh-card__list span { display: flex; gap: 0.5em; }
.wp-bh-card__list em { font-style: normal; font-weight: 800; color: #b83f93; }
.wp-bh-card__btn { display: block; margin-top: 1.1em; padding: 0.8em 0.4em; background: #111; color: #fff; border-radius: 2px; text-align: center; font-size: 0.72em; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.wp-bh-scallop { position: relative; display: grid !important; gap: 0.25em; padding: 1.7em 2em 1.8em; color: #111; font-size: 1.15em; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.wp-bh-scallop > span { position: relative; z-index: 1; display: flex; align-items: center; gap: 0.5em; }
.wp-bh-scallop > span::before { content: ""; width: 0.55em; height: 0.55em; background: #b83f93; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.wp-bh-scallop::before, .wp-bh-scallop::after {
content: ""; position: absolute; inset: 0; border-radius: 1.8em; --sr: 0.9em;
background:
linear-gradient(var(--f), var(--f)) center / calc(100% - 2 * var(--sr)) calc(100% - 2 * var(--sr)) no-repeat,
radial-gradient(circle var(--sr) at center, var(--f) 99%, #0000) top / calc(2 * var(--sr)) calc(2 * var(--sr)) repeat-x,
radial-gradient(circle var(--sr) at center, var(--f) 99%, #0000) bottom / calc(2 * var(--sr)) calc(2 * var(--sr)) repeat-x,
radial-gradient(circle var(--sr) at center, var(--f) 99%, #0000) left / calc(2 * var(--sr)) calc(2 * var(--sr)) repeat-y,
radial-gradient(circle var(--sr) at center, var(--f) 99%, #0000) right / calc(2 * var(--sr)) calc(2 * var(--sr)) repeat-y;
}
.wp-bh-scallop::before { --f: #b83f93; transform: translate(0.5em, 0.6em); }
.wp-bh-scallop::after { --f: #fff; }
.wp-bh-spark { display: grid !important; place-items: center; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0.25em #f7d4ee; }
.wp-bh-spark svg { width: 58%; height: 58%; fill: #b83f93; animation: wp-twinkle 3s ease-in-out infinite; }
@keyframes wp-twinkle { 50% { transform: scale(0.82) rotate(18deg); } }
/* GoSweet: product card, SAVE roundel, free-delivery progress */
.wp-gs-card { overflow: hidden; border-radius: 1.6em; background: #fff; color: #1a1230; font-family: "Plus Jakarta Sans", var(--font); border: 1px solid #ebe3f7; }
.wp-gs-card__tile { display: block; margin: 0.8em 0.8em 0; aspect-ratio: 1; border-radius: 1.1em; overflow: hidden; background: #faf6ff; }
.wp-gs-card__tile img { height: 100%; object-fit: cover; }
.wp-gs-card__words { display: block; padding: 1em 1.2em 1em; }
.wp-gs-card__words small { display: block; font-size: 0.82em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #6b6478; }
.wp-gs-card__words b { display: block; margin-top: 0.2em; font-size: 1.22em; font-weight: 700; line-height: 1.25; }
.wp-gs-card__buy { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; padding: 1em 1.1em 1.2em; background: #faf8fc; border-top: 1px solid #ebe3f7; }
.wp-gs-card__price { display: grid; gap: 0.2em; }
.wp-gs-card__price strong { font: 700 1.7em/1 "Rubik", var(--font); color: #c2185b; }
.wp-gs-card__price s { font-size: 0.9em; color: #9189a0; }
.wp-gs-card__add { padding: 0.85em 1em; border-radius: 0.9em; background: #5c2a9d; color: #fff; font-size: 1em; font-weight: 700; white-space: nowrap; box-shadow: 0.22em 0.22em 0 #36146a; }
.wp-gs-roundel { display: grid !important; place-content: center; aspect-ratio: 1; border-radius: 50%; background: #e73e80; color: #fff; text-align: center; font: 800 2.7em/1 "Plus Jakarta Sans", var(--font); letter-spacing: -0.02em; box-shadow: 0 0 0 0.16em #fff; }
.wp-gs-roundel small { display: block; margin-bottom: 0.12em; font-size: 0.36em; letter-spacing: 0.12em; text-transform: uppercase; }
.wp-gs-ship { padding: 1.1em 1.3em 1.3em; border-radius: 1.3em; background: #fff; color: #1a1230; font-family: "Plus Jakarta Sans", var(--font); }
.wp-gs-ship__t { display: flex; align-items: center; gap: 0.7em; font-size: 1.15em; font-weight: 600; line-height: 1.3; }
.wp-gs-ship__t svg { flex: none; width: 1.4em; height: 1.4em; fill: #5c2a9d; }
.wp-gs-ship b { color: #5c2a9d; font-weight: 800; }
.wp-gs-ship__bar { position: relative; display: block; height: 0.8em; margin-top: 0.8em; border-radius: 1em; background: #f1e9fb; overflow: hidden; }
.wp-gs-ship__bar i { position: absolute; inset: 0 20% 0 0; border-radius: inherit; background: #5c2a9d; }
/* Nic Pouches: product card, Nic Points tier, strength chip */
.wp-np-card { padding: 0.7em 0.7em 0.9em; border-radius: 1.4em; background: #fff; color: #1d1d1f; font-family: "Archivo", var(--font); }
.wp-np-card__media { position: relative; display: block; aspect-ratio: 1 / 0.88; border-radius: 1em; background: #f4f4f4; }
.wp-np-card__media img { height: 100%; object-fit: contain; padding: 4%; }
.wp-np-pouch { position: absolute; top: 0.7em; right: 0.7em; display: grid; place-items: center; width: 4.4em; height: 2.7em; }
.wp-np-pouch svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: #fff; stroke: #ffb21a; stroke-width: 1; vector-effect: non-scaling-stroke; }
.wp-np-pouch > span { position: relative; display: flex; align-items: baseline; }
.wp-np-pouch b { font-size: 1.1em; font-weight: 700; font-stretch: 88%; }
.wp-np-pouch small { font-size: 0.8em; font-weight: 600; color: #717680; }
.wp-np-card__brand { display: block; margin: 0.7em 0.4em 0; font-size: 0.95em; font-weight: 800; font-stretch: 80%; letter-spacing: 0.07em; text-transform: uppercase; color: #717680; }
.wp-np-card__name { display: block; margin: 0.1em 0.4em 0; font-size: 1.3em; font-weight: 600; }
.wp-np-card__chips { display: flex !important; gap: 0.45em; margin: 0.7em 0.4em 0; }
.wp-np-card__chips i { flex: 1; display: grid; place-items: center; height: 2.4em; border-radius: 0.6em; background: #fafafa; box-shadow: inset 0 0 0 1px #e9eaeb; font-style: normal; font-size: 1em; font-weight: 500; }
.wp-np-card__chips i.on { background: #fff3da; color: #855800; box-shadow: inset 0 0 0 1px #ffb21a; font-weight: 600; }
.wp-np-card__price { display: flex !important; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.2em 0.4em; margin: 0.8em 0.4em 0; white-space: nowrap; }
.wp-np-card__price small { font-size: 0.9em; color: #717680; }
.wp-np-card__price b { margin: 0 0.15em; font-size: 1.45em; font-weight: 700; font-stretch: 92%; }
.wp-np-card__price em { font-style: normal; font-size: 0.95em; font-weight: 700; color: #106b45; }
.wp-np-tier { border-radius: 1.6em; background: #fff; color: #1d1d1f; font-family: "Archivo", var(--font); }
.wp-np-tier__top { position: relative; display: block; padding: 1.2em 7em 1.1em 1.3em; border-radius: 1.6em 1.6em 0 0; background: linear-gradient(135deg, #fef4e1 0%, #ffe6ac 52%, #cea442 100%); }
.wp-np-tier__top b { display: block; font: 700 2em/1.05 "Bricolage Grotesque", "Archivo", sans-serif; letter-spacing: -0.02em; }
.wp-np-tier__top small { display: block; font-size: 1.1em; font-weight: 600; color: #5e4a19; }
.wp-np-tier__top img { position: absolute; top: -1.8em; right: 0.6em; width: 6.6em; rotate: -9deg; filter: drop-shadow(0 1em 1em rgb(0 30 70 / 0.3)); }
.wp-np-tier__stub { display: grid; gap: 0.6em; padding: 1em 1.3em 1.2em; }
.wp-np-tier__rate { font-size: 1.05em; line-height: 1.35; color: #414651; }
.wp-np-tier__rate b { margin-right: 0.15em; font: 800 2.4em/1 "Bricolage Grotesque", "Archivo", sans-serif; letter-spacing: -0.02em; color: #856823; vertical-align: -0.12em; }
.wp-np-tier__spend { padding-top: 0.6em; border-top: 1px solid #ffe6ac; font-size: 1em; font-weight: 700; }
.wp-np-chip { display: inline-flex !important; align-items: center; gap: 0.8em; padding: 0.85em 1.4em; border-radius: 999px; background: #fff; color: #1d1d1f; font: 400 1.15em/1 "Archivo", var(--font); white-space: nowrap; }
.wp-np-chip b { font-weight: 800; }
.wp-np-meter { display: inline-flex; gap: 0.25em; }
.wp-np-meter i { width: 0.6em; height: 0.6em; border-radius: 50%; background: #d5d7da; }
.wp-np-meter i.on { background: #ffb21a; }
/* VSL Trade: consultation step, app tile, next-day chip */
.wp-vsl-step { padding: 1.3em 1.4em 1.4em; border-radius: 1.6em; background: #fff; color: #0d1110; font-family: "Montserrat", var(--font); }
.wp-vsl-step__pill { display: inline-block; padding: 0.25em 0.85em; border-radius: 99px; background: #43b02a; color: #fff; font-size: 1em; font-weight: 800; }
.wp-vsl-step__bar { display: block; height: 0.6em; margin: 0.9em 0 1em; border-radius: 99px; background: #e6ebe6; overflow: hidden; }
.wp-vsl-step__bar i { display: block; width: 25%; height: 100%; border-radius: inherit; background: #43b02a; }
.wp-vsl-step b { display: block; font-size: 1.5em; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
.wp-vsl-step__opt { display: flex; align-items: center; gap: 0.6em; margin-top: 0.8em; padding: 0.7em 0.8em; border-radius: 0.8em; background: #edf7e9; box-shadow: inset 0 0 0 1.5px #43b02a; font-size: 0.95em; font-weight: 600; line-height: 1.3; }
.wp-vsl-step__opt i { flex: none; width: 1.1em; height: 1.1em; border-radius: 50%; border: 0.32em solid #43b02a; background: #fff; }
.wp-vsl-app { display: block; }
.wp-vsl-app__ic { display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 23%; background: radial-gradient(100% 120% at 20% 0%, #5fc444 0%, #43b02a 45%, #2a7a1f 100%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18); }
.wp-vsl-app__ic svg { width: 54%; height: 54%; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wp-vsl-chip { display: flex !important; align-items: center; gap: 1em; padding: 0.9em 1.5em 0.9em 0.9em; border-radius: 1.2em; background: #fff; color: #0d1110; font-family: "Montserrat", var(--font); white-space: nowrap; }
.wp-vsl-chip__ic { flex: none; display: grid; place-items: center; width: 3.4em; height: 3.4em; border-radius: 0.9em; background: #43b02a; }
.wp-vsl-chip__ic svg { width: 1.8em; height: 1.8em; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wp-vsl-chip b { display: block; font-size: 1.25em; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.wp-vsl-chip span:last-child { font-size: 0.9em; font-weight: 500; line-height: 1.35; color: #5b645b; }
/* Birdie Blooms: shop card, B sticker, seasonal colour chip */
.wp-bb-card { display: grid !important; gap: 0.7em; padding: 0.8em 0.8em 1.1em; border-radius: 1em; background: #e0662c; color: #2b1a16; font-family: "Newsreader", Georgia, serif; }
.wp-bb-card__img { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 0.5em; }
.wp-bb-card__img img { height: 100%; object-fit: cover; }
.wp-bb-card__row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5em; }
.wp-bb-card__row b { font-size: 1.55em; font-weight: 400; line-height: 1.1; letter-spacing: -0.01em; }
.wp-bb-card__row span { font-size: 1.3em; }
.wp-bb-card__btn { justify-self: start; display: inline-flex; align-items: center; gap: 0.6em; padding: 0.8em 1.1em 0.6em; border-radius: 99px; background: #2b1a16; color: #e0662c; font: 700 0.85em/1 "Josefin Sans", var(--font); letter-spacing: 0.12em; text-transform: uppercase; }
.wp-bb-card__btn svg { width: 1.2em; height: 1.2em; margin-top: -0.2em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wp-bb-sticker { position: relative; display: grid !important; place-items: center; aspect-ratio: 1; border-radius: 50%; background: #e0662c; color: #2b1a16; border: 2px solid #2b1a16; box-shadow: 0.4em 0.5em 0 #2b1a16; }
.wp-bb-sticker__ring { position: absolute; inset: 5%; width: 90%; height: 90%; animation: wp-spin 22s linear infinite; }
.wp-bb-sticker__ring text { font: 700 13px "Josefin Sans", var(--font); letter-spacing: 0.24em; fill: currentColor; }
.wp-bb-b { width: 26%; aspect-ratio: 597 / 817; background: currentColor; -webkit-mask: url("../projects/birdie-blooms/monogram.svg") center / contain no-repeat; mask: url("../projects/birdie-blooms/monogram.svg") center / contain no-repeat; }
.wp-bb-chip { display: inline-flex !important; align-items: center; gap: 0.9em; padding: 0.8em 1.4em 0.7em 0.9em; border-radius: 99px; background: #fbf7f0; color: #2b1a16; border: 2px solid #2b1a16; box-shadow: 0.35em 0.4em 0 #2b1a16; font: 700 1em/1 "Josefin Sans", var(--font); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.wp-bb-chip__dots { display: flex; gap: 0.4em; margin-top: -0.2em; }
.wp-bb-chip__dots i { width: 1.3em; height: 1.3em; border-radius: 50%; border: 2px solid #2b1a16; background: var(--c); }
.wp-bb-chip__dots i.on { box-shadow: 0 0 0 2px #fbf7f0, 0 0 0 4px #2b1a16; }
.wp-bb-chip > span:last-child { display: grid; gap: 0.35em; }
.wp-bb-chip small { font-size: 0.75em; opacity: 0.7; }
.wp-bb-chip b { font-size: 1.15em; }
/* SCCC Heritage: decade card, cricket ball, years tag */
.wp-sc-card { position: relative; aspect-ratio: 1; overflow: hidden; background: #222; }
.wp-sc-card img { height: 100%; object-fit: cover; scale: 1.1; }
.wp-sc-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgb(0 0 0 / 0.6), transparent 70%); }
.wp-sc-card__slip { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 34%; background: #1a472a; clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 100%); }
.wp-sc-card__txt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 1.2em; color: #fff; }
.wp-sc-card__txt b { display: block; font: 400 1.45em/1.08 "Archivo Black", "Archivo", sans-serif; }
.wp-sc-card__txt span { display: block; margin-top: 0.3em; font: 0.95em/1.3 "Archivo", sans-serif; opacity: 0.9; }
.wp-sc-ball { aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 0.3em solid #fff; background: #fff; }
.wp-sc-ball img { height: 100%; object-fit: cover; animation: wp-spin 30s linear infinite; }
.wp-sc-tag { display: grid !important; justify-items: start; gap: 0.15em; padding: 1em 1.4em 1.1em; background: #f8f6f3; color: #8b1538; border-left: 0.45em solid #1a472a; }
.wp-sc-tag small { font: 600 0.8em/1 "Archivo", sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: #222; opacity: 0.7; }
.wp-sc-tag b { font: 400 3.2em/1 "Archivo Black", "Archivo", sans-serif; letter-spacing: -0.01em; }
.wp-sc-tag span { font: italic 1.05em/1.2 Georgia, serif; color: #222; }
/* Beetle Eyes: taped polaroid, No. 9 stamp, Curious Magpie label */
.wp-be-polaroid { position: relative; padding: 0.5em 0.5em 0; background: #fff; border-radius: 2px; }
.wp-be-polaroid img { aspect-ratio: 1; object-fit: cover; filter: saturate(0.9) contrast(1.02); }
.wp-be-polaroid span { display: block; padding: 0.5em 0 0.7em; text-align: center; font: italic 1.05em/1.2 "Fraunces", Georgia, serif; color: #5a3a32; }
.wp-be-polaroid::before, .wp-be-polaroid::after {
content: ""; position: absolute; top: -0.7em; z-index: 2; width: 42%; height: 1.7em;
background:
repeating-linear-gradient(135deg, rgb(255 255 255 / 0.14) 0 2px, transparent 2px 5px),
linear-gradient(90deg, rgb(224 196 199 / 0.5) 0%, rgb(224 196 199 / 0.92) 14%, rgb(224 196 199 / 0.92) 86%, rgb(224 196 199 / 0.5) 100%);
box-shadow: 0 0.2em 0.5em rgb(28 29 24 / 0.18);
}
.wp-be-polaroid::before { left: -14%; rotate: -24deg; }
.wp-be-polaroid::after { right: -14%; rotate: 24deg; }
.wp-be-stamp { container-type: inline-size; background: #e0c4c7; color: #5a3a32; border: 1px solid rgb(184 122 130 / 0.35); text-align: center; }
.wp-be-stamp strong { display: block; padding: 13cqw 6cqw 0; margin-bottom: 0.3em; font: 600 21cqw/1 "Fraunces", Georgia, serif; letter-spacing: -0.01em; }
.wp-be-stamp span { display: block; padding: 0 6cqw 12cqw; font: italic 300 11cqw/1.35 "Fraunces", Georgia, serif; color: #3d2622; }
.wp-be-tag { padding: 0.8em 1.3em 0.9em; background: #e0c4c7; color: #5a3a32; border: 1px solid rgb(184 122 130 / 0.35); font: italic 1.35em/1.2 "Fraunces", Georgia, serif; white-space: nowrap; }
.wp-be-tag strong { display: block; margin-bottom: 0.25em; font: normal 600 0.47em/1 var(--font); letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.7; }
/* Phones: one piece per card, a touch larger, the rest hidden */
@media (max-width: 860px) {
.wpop { font-size: calc(clamp(3.5px, 1.3cqw, 8px) * var(--sf, 1)); left: var(--sx, var(--x)); top: var(--sy, var(--y)); }
.wpop:not([data-sm]) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.wpop > *, .wp-stk__ring, .wp-bb-sticker__ring, .wp-sc-ball img, .wp-bh-spark svg { animation: none; }
}
/* Who cards on phones: a swipeable row, phones a touch bigger */
@media (max-width: 560px) {
.who-grid {
display: flex; gap: 12px; padding: 6px var(--gutter) 10px; margin-inline: calc(var(--gutter) * -1);
overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
scrollbar-width: none; -webkit-overflow-scrolling: touch; perspective: none;
}
.who-grid::-webkit-scrollbar { display: none; }
.who-card { flex: 0 0 84%; scroll-snap-align: start; }
.who-card .mini__phone { width: 54cqw; top: 7cqw; }
.who-card .mini__laptop { width: 92cqw; top: 10cqw; }
}
/* phones: the tapes cross in a steeper X with more room, so both read instead of one hiding the other */
@media (max-width: 700px) {
.tapes { height: 250px; }
.tape { left: -20%; right: -20%; padding: 13px 0; }
.tape--a { rotate: -9deg; translate: 0 -50%; }
.tape--b { rotate: 9deg; translate: 0 -50%; }
}
@media (max-width: 560px) { .tapes { position: relative; z-index: 2; margin-top: -110px; } }
/* Price cards live in prices.css (shared with the location pages) */
.home-prices__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 60px; align-items: end; }
.home-prices__head h2 { font-size: clamp(38px, 5vw, 68px); letter-spacing: -0.05em; line-height: 1; }
.home-prices__head p { color: var(--grey-7); font-size: 17px; line-height: 1.6; max-width: 44ch; }
@media (max-width: 900px) { .home-prices__head { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .faq__ask { display: none; } }
/* Phone sites leave a 54px strip for a status bar; the phone frame draws its own, so slide the site up under it */
.who-card .mini__phone .who-frame iframe { top: calc(-54 / 390 * 100cqw); }
/* Work stack: the card behind dims with a cheap overlay (a scrubbed CSS filter was janky and painted black on phones) */
.feature { --dim: 0; }
@media (min-width: 861px) { .feature { will-change: transform; } }
.feature::after { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; background: #000; opacity: var(--dim); pointer-events: none; }
/* Phones: the sticky cards just stack (no scrub, see home.js). Keep each card cheap to paint so a
fast flick never shows half-rastered tiles: one small static shadow, no big blurred or animated
glow, paint contained to the card, and no dim overlay layer. */
@media (max-width: 860px) {
.feature { box-shadow: 0 -10px 24px -18px rgb(24 24 26 / 0.45), inset 0 0 0 1px rgb(255 255 255 / 0.06); contain: paint; }
.feature::after { content: none; }
.feature__glow { filter: none; animation: none; inset: -24% -12% 10% -2%; opacity: 0.85; }
}
/* Phones: sticky stack is back; cards three deep behind the top one are hidden (see home.js / work.js) */
.work-stack .feature.is-buried { visibility: hidden; }
/* What's in my Fridge card: three phones in a tight fan; bigger on phones so they fill the card */
@media (max-width: 860px) {
.feature__visual:has(.wf-fan) { aspect-ratio: 1 / 0.93; margin-inline: -6px; }
.wf-fan .phone:nth-child(1) { left: 5% !important; top: 11% !important; width: 31% !important; }
.wf-fan .phone:nth-child(2) { left: 64% !important; top: 11% !important; width: 31% !important; }
.wf-fan .phone:nth-child(3) { left: 31.5% !important; top: 1% !important; width: 37% !important; }
}
/* "Need print? I do that too." bar under the work stack */
.print-bar { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 28px; margin-top: 28px; padding: 22px 26px; border-radius: var(--radius-l); background: #fbf6ec; box-shadow: 0 0 0 1px var(--line); text-decoration: none; color: var(--ink); overflow: hidden; }
.print-bar__copy { display: grid; gap: 4px; }
.print-bar__copy b { font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; }
.print-bar__copy > span { font-size: 15px; color: var(--grey-7); }
.print-bar__pile { position: relative; display: flex; align-items: center; height: 96px; }
.print-bar__pile img { height: 92px; width: auto; margin-left: -26px; border-radius: 6px; background: #fff; box-shadow: 0 10px 22px -12px rgb(24 24 26 / 0.45), 0 0 0 1px rgb(24 24 26 / 0.06); rotate: calc((var(--i) - 3) * 3deg); transition: translate 0.4s var(--ease-out), rotate 0.4s var(--ease-out); }
.print-bar__pile img:first-child { margin-left: 0; }
.print-bar:hover .print-bar__pile img { translate: calc((var(--i) - 3) * 5px) -6px; }
.print-bar__go { display: inline-flex; gap: 8px; padding: 12px 18px; border-radius: 999px; background: #18181a; color: #fff; font-weight: 600; font-size: 14.5px; white-space: nowrap; }
@media (max-width: 860px) {
.print-bar { grid-template-columns: 1fr; gap: 16px; padding: 20px; margin-top: 20px; }
.print-bar__pile { height: 84px; justify-content: flex-start; }
.print-bar__pile img { height: 78px; margin-left: -22px; }
.print-bar__go { justify-self: start; }
.print-bar__pile img:nth-child(n+5) { display: none; }
}
.print-bar__pile img.is-cut { background: none; box-shadow: none; border-radius: 0; filter: drop-shadow(0 8px 10px rgb(24 24 26 / 0.3)); }
/* the pile fans out as it comes into view (all sizes), and spreads a little more on hover */
.print-bar__pile img { translate: calc((3 - var(--i)) * 14px) 0; rotate: 0deg; opacity: 0; transition: translate 0.7s var(--ease-out) calc(var(--i) * 60ms), rotate 0.7s var(--ease-out) calc(var(--i) * 60ms), opacity 0.4s calc(var(--i) * 60ms); }
.print-bar.is-in .print-bar__pile img { translate: 0 0; rotate: calc((var(--i) - 3) * 3deg); opacity: 1; }
.print-bar.is-in:hover .print-bar__pile img { translate: calc((var(--i) - 3) * 5px) -6px; }
@media (prefers-reduced-motion: reduce) { .print-bar__pile img { opacity: 1; translate: none; transition: none; rotate: calc((var(--i) - 3) * 3deg); } }
/* One size for lead/body copy under headings, hero included (matches .chapter-head p) */
html body .bt-who, html body .pf-hero__lede, html body .home-prices__head p, html body .ha__story, html body .contact__intro > p:not(.contact__where) { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.7; }
/* phones: the "…and gyms too" line stands on its own (the yellow bar is the call to action) */
@media (max-width: 700px) { .who-more a { display: none; } }
/* the line under "Need print?" a size up */
.print-bar__copy > span { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.5; }
/* How it works on a light grey band, edge to edge, to separate it from the work above */
.process2 { position: relative; isolation: isolate; padding-block: clamp(56px, 8vw, 104px); }
.process2::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; translate: -50% 0; background: var(--grey-1); }
.process2 .steps2__line { background: var(--grey-3); }
.process2 .step2__no { -webkit-text-stroke-color: #c4c4c1; }
@media (max-width: 800px) {
.process2 .step2__card { background: var(--white); }
.process2 .step2::before { background: var(--grey-3); }
}
/* phones: the print pile sized to the block, so the covers run edge to edge */
@media (max-width: 860px) {
.print-bar__pile { --ph: calc((100vw - 2 * var(--gutter, 18px) - 40px + 54px) / 4.12); height: calc(var(--ph) + 10px); margin-inline: -4px; }
.print-bar__pile img { height: var(--ph); margin-left: -18px; }
}
@media (min-width: 481px) and (max-width: 860px) { .print-bar__pile { --ph: calc((100vw - 2 * var(--gutter, 18px) - 40px + 54px) / 4.5); } }
/* performance: the glow is already a soft radial gradient; a blur filter on a big animated layer
made the browser repaint it every frame (scrolling the work cards dropped to ~30fps) */
.feature__glow { filter: none !important; }
/* --dim only matters on the card itself: not inherited, so scrubbing it doesn't restyle the whole card */
@property --dim { syntax: ''; inherits: false; initial-value: 0; }
/* the cut-out Redbacks leaflets end the pile, a size up so the red reads */
.print-bar__pile img.is-big { height: 120px; margin-left: -14px; }
@media (max-width: 860px) { .print-bar__pile img.is-big { height: 100px; } }
@media (max-width: 560px) { .print-bar__pile img.is-big { height: calc(var(--ph) * 1.25); } }
/* Who cards: a picture of each site's first screen shows straight away; the live site fades in over it once loaded */
.who-poster { position: absolute; left: 0; top: 0; z-index: 0; width: 100%; height: auto; pointer-events: none; }
.who-frame iframe { z-index: 1; opacity: 0; transition: opacity 0.45s ease; }
.who-frame iframe.is-ready { opacity: 1; }
/* ===== prices.css ===== */
/* Price cards: home page and location pages. Four service cards with "from" prices per option; a swipe row on phones */
.hp-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: clamp(30px, 4vw, 52px); }
.hp-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 26px 24px 24px; border-radius: var(--radius-l); text-decoration: none; color: #18181a;
background: color-mix(in srgb, var(--pen) 24%, var(--white)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pen) 60%, transparent);
transition: translate 0.4s var(--ease-spring), box-shadow 0.4s; }
.hp-card:hover { translate: 0 -6px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pen) 60%, transparent), 0 30px 50px -30px rgb(24 24 26 / 0.35); }
.hp-card--pop { background: var(--pen); }
.hp-card--pop::before { content: none; display: none; /* was a "Most popular" badge */ position: absolute; top: -12px; right: 20px; z-index: 1; padding: 5px 10px; border-radius: 999px; background: #18181a; color: #fff; font-size: 11.5px; font-weight: 600; }
.hp-card h3 { display: flex; align-items: center; gap: 10px; font-size: 22px; letter-spacing: -0.03em; }
.hp-card h3::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--pen); box-shadow: inset 0 0 0 1.5px #18181a; }
.hp-card__lead { font-size: 15px; line-height: 1.5; opacity: 0.75; }
.hp-tiers { display: grid; margin: 0; padding: 0; list-style: none; border-radius: 16px; background: rgb(255 255 255 / 0.72); }
.hp-tiers li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 16px; }
.hp-tiers li + li { border-top: 1px solid rgb(24 24 26 / 0.08); }
.hp-tiers span { display: grid; gap: 1px; font-size: 15px; font-weight: 600; letter-spacing: -0.015em; }
.hp-tiers small { font-size: 12.5px; font-weight: 500; letter-spacing: 0; opacity: 0.6; }
.hp-tiers b { white-space: nowrap; font-size: 19px; font-weight: 700; letter-spacing: -0.04em; }
.hp-tiers b::before { content: "from "; font-size: 11px; font-weight: 600; letter-spacing: 0; opacity: 0.55; }
.hp-incl { display: grid; gap: 7px; margin: 2px 0 0; padding: 0; list-style: none; font-size: 14px; font-weight: 500; }
.hp-incl li::before { content: "✓"; margin-right: 9px; font-weight: 700; }
/* the small print under the cards: neat ticked pills that wrap cleanly, no stray dots */
.hp-extras { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; font-size: 14px; color: var(--grey-7); }
.hp-extras span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px 7px 10px; border-radius: 999px; background: var(--grey-1); white-space: nowrap; }
.hp-extras span::before { content: ""; width: 14px; height: 14px; flex: none; background: var(--ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (max-width: 1180px) { .hp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* phones: a sideways swipe row, one card and a peek of the next */
@media (max-width: 700px) {
.hp-cards { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
margin-inline: calc(-1 * var(--gutter, 18px)); padding: 6px var(--gutter, 18px) 14px; scroll-padding-inline: var(--gutter, 18px); }
.hp-cards::-webkit-scrollbar { display: none; }
.hp-card { flex: 0 0 84%; scroll-snap-align: start; }
.hp-card:hover { translate: none; }
.hp-extras { font-size: 13px; gap: 6px; }
.hp-extras span { padding: 6px 11px 6px 9px; }
}
.hp-dots { display: none; }
@media (max-width: 700px) {
.hp-dots { display: flex; justify-content: center; gap: 7px; margin-top: 4px; }
.hp-dots i { width: 7px; height: 7px; border-radius: 999px; background: var(--grey-3); transition: width 0.3s var(--ease-out), background 0.3s; }
.hp-dots i.is-on { width: 22px; background: var(--ink); }
}
/* the bundle row: highlighted, tagged, with the full price struck through */
.hp-tiers li.is-deal { margin: 6px; padding: 13px 12px; border-radius: 12px; background: #18181a; color: #fff; }
.hp-tiers li.is-deal + li, .hp-tiers li + li.is-deal { border-top: 0; }
.hp-tiers li.is-deal small { opacity: 0.7; }
.hp-tiers li.is-deal em { justify-self: start; margin-bottom: 4px; padding: 3px 9px; border-radius: 999px; background: var(--hl-yellow); color: #18181a; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; }
.hp-tiers li.is-deal b { display: grid; justify-items: end; line-height: 1.05; }
.hp-tiers li.is-deal b::before { display: none; }
.hp-tiers li.is-deal s { font-size: 13px; font-weight: 600; opacity: 0.55; letter-spacing: 0; }
/* ---- Price cards, refined: coloured header with the headline price, white body, button footer ---- */
.hp-card { gap: 0; padding: 0; overflow: hidden; background: var(--white); box-shadow: 0 0 0 1px var(--line), 0 18px 40px -28px rgb(24 24 26 / 0.35); }
.hp-card:hover { box-shadow: 0 0 0 1px var(--line), 0 34px 60px -30px rgb(24 24 26 / 0.45); }
.hp-card__top { display: grid; gap: 8px; padding: 24px 24px 22px; background: color-mix(in srgb, var(--pen) 45%, var(--white)); }
.hp-card h3 { font-size: 18px; }
.hp-card h3::before { width: 10px; height: 10px; background: var(--pen); }
.hp-card .hp-card__price { display: flex; align-items: baseline; gap: 6px; margin: 4px 0 2px; font-size: clamp(38px, 3.2vw, 48px); font-weight: 700; letter-spacing: -0.055em; line-height: 1; }
.hp-card .hp-card__price small { font-size: 13px; font-weight: 600; letter-spacing: 0; opacity: 0.6; }
.hp-card .hp-card__price em { font-style: normal; font-size: 15px; font-weight: 600; letter-spacing: 0; opacity: 0.65; margin-left: -2px; }
.hp-card__lead { font-size: 14.5px; opacity: 0.78; min-height: 4.6em; }
.hp-tiers { margin: 8px 18px 0; border-radius: 0; background: none; }
.hp-tiers li { padding: 14px 6px; align-items: start; }
.hp-tiers li + li { border-top: 1px solid var(--line); }
.hp-tiers span { font-size: 15px; }
.hp-tiers small { font-size: 12.5px; }
.hp-tiers b { font-size: 17px; padding-top: 1px; }
.hp-tiers b::before { content: none; }
.hp-tiers li.is-deal { margin: 6px -4px; padding: 14px 12px; }
.hp-incl { margin: 6px 24px 0; padding: 16px 0 0; border-top: 1px dashed var(--grey-3); color: var(--grey-7); font-size: 13.5px; }
.hp-incl li::before { color: var(--ink); }
.hp-incl { margin-bottom: 22px; }
@media (max-width: 700px) { .hp-card__lead { min-height: 0; } }
/* one-page site with its logo bundle, as one block */
.hp-tiers li.is-combo { display: grid; gap: 0; margin: 4px -6px 8px; padding: 0; border-radius: 14px; border-top: 0; overflow: hidden; background: color-mix(in srgb, var(--pen) 45%, var(--white)); box-shadow: inset 0 0 0 1px rgb(24 24 26 / 0.08); }
.hp-tiers li.is-combo + li { border-top: 0; }
.hp-tiers li.is-combo > div { display: flex; justify-content: space-between; align-items: start; gap: 12px; padding: 13px 12px; }
.hp-tiers li.is-combo > .is-deal { margin: 0 6px 6px; border-radius: 10px; background: #18181a; color: #fff; }
.hp-tiers li.is-combo > .is-deal small { opacity: 0.7; }
.hp-tiers li.is-combo > .is-deal em { justify-self: start; margin-bottom: 4px; padding: 3px 9px; border-radius: 999px; background: var(--hl-yellow); color: #18181a; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; }
.hp-tiers li.is-combo > .is-deal b { display: grid; justify-items: end; line-height: 1.05; }
.hp-tiers li.is-combo > .is-deal s { font-size: 13px; font-weight: 600; opacity: 0.55; letter-spacing: 0; }
/* Phones: a tighter card, same content */
@media (max-width: 700px) {
.hp-card__top { gap: 4px; padding: 18px 18px 16px; }
.hp-card .hp-card__price { font-size: 36px; margin: 2px 0 0; }
.hp-card__lead { font-size: 13.5px; line-height: 1.45; }
.hp-tiers { margin: 4px 14px 0; }
.hp-tiers li { padding: 10px 4px; }
.hp-tiers span { font-size: 14px; }
.hp-tiers small { font-size: 12px; line-height: 1.35; }
.hp-tiers b { font-size: 15.5px; }
.hp-tiers li.is-combo { margin: 4px -4px 6px; }
.hp-tiers li.is-combo > div { padding: 10px 10px; }
.hp-tiers li.is-combo > .is-deal { margin: 0 5px 5px; }
.hp-tiers li.is-combo > .is-deal span { display: block; }
.hp-tiers li.is-combo > .is-deal em, .hp-tiers li.is-deal em { display: inline-block; margin: 0 6px 0 0; vertical-align: 2px; padding: 2px 7px; font-size: 10px; }
.hp-tiers li.is-combo > .is-deal small { display: block; }
.hp-incl { margin: 4px 18px 0; padding-top: 12px; gap: 5px; font-size: 13px; }
.hp-incl { margin-bottom: 0; }
}
/* Phones: drop the tick list so each card fits on one screen (the full detail is on the prices pages) */
@media (max-width: 700px) {
.hp-incl { display: none; }
}
/* Phones: a clear order in the coloured header (service, then price, then the line about it),
and the row prices a step quieter than the headline price */
@media (max-width: 700px) {
.hp-cards { align-items: flex-start; }
.hp-card__top { gap: 0; padding: 20px 20px 18px; }
.hp-card h3 { font-size: 24px; font-weight: 700; letter-spacing: -0.04em; line-height: 1.1; }
.hp-card h3::before { width: 11px; height: 11px; }
.hp-card .hp-card__price { margin: 12px 0 0; font-size: 34px; }
.hp-card .hp-card__price small { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.hp-card__lead { margin-top: 8px; font-size: 13.5px; opacity: 0.7; }
.hp-tiers span { font-weight: 600; }
.hp-tiers b { font-weight: 600; opacity: 0.85; }
.hp-tiers li.is-deal b, .hp-tiers li.is-combo > .is-deal b { opacity: 1; font-weight: 700; }
}
/* Desktop gets the same order: service name, then the price, then the line about it */
@media (min-width: 701px) {
.hp-card__top { gap: 0; }
.hp-card h3 { font-size: clamp(22px, 1.9vw, 26px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.1; }
.hp-card h3::before { width: 11px; height: 11px; }
.hp-card .hp-card__price { margin: 14px 0 0; }
.hp-card .hp-card__price small { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.hp-card__lead { margin-top: 10px; opacity: 0.7; }
.hp-tiers b { font-weight: 600; opacity: 0.85; }
.hp-tiers li.is-deal b, .hp-tiers li.is-combo > .is-deal b { opacity: 1; font-weight: 700; }
}
/* Header, tidied: the name, then "From" sitting small above the price, then one plain line about it */
.hp-card .hp-card__price { display: grid; gap: 4px; justify-items: start; }
.hp-card .hp-card__price small { text-transform: capitalize; letter-spacing: 0; font-size: 13px; font-weight: 500; opacity: 0.6; }
.hp-card .hp-card__price em { grid-column: 2; grid-row: 2; align-self: end; margin: 0 0 4px 4px; }
.hp-card__lead { text-wrap: wrap; max-width: none; }
@media (max-width: 700px) { .hp-card .hp-card__price { margin-top: 14px; } .hp-card__lead { margin-top: 10px; } }
/* the one-page + logo block a paler shade than the coloured header, so it reads as its own section */
.hp-tiers li.is-combo { background: color-mix(in srgb, var(--pen) 18%, var(--white)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pen) 55%, transparent); }
/* phones: every card in the swipe row the same height, buttons lined up along the bottom */
@media (max-width: 700px) {
.hp-cards { align-items: stretch; }
.hp-tiers { margin-bottom: 12px; }
}
/* "From" on its own line, then the price with "/page" sitting beside it */
.hp-card .hp-card__price { grid-template-columns: auto 1fr; align-items: baseline; }
.hp-card .hp-card__price small { grid-column: 1 / -1; }
.hp-card .hp-card__price em { grid-column: 2; grid-row: 2; align-self: baseline; margin: 0 0 0 4px; }
/* Websites card: add-ons listed under the three sizes */
.hp-addons { margin: 6px 24px 22px; padding: 14px 0 0; border-top: 1px dashed var(--grey-3); }
.hp-addons p { margin: 0 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-5); }
.hp-addons ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.hp-addons li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; color: var(--grey-7); }
.hp-addons b { flex: none; font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
@media (max-width: 560px) { .hp-addons { margin: 4px 18px 18px; } .hp-addons li, .hp-addons b { font-size: 13.5px; } }
/* the combo block's single column always fills the card (it sized to its content once the labels got shorter) */
.hp-tiers li.is-combo { grid-template-columns: minmax(0, 1fr); }
/* "from" before a tier price: small and quiet */
.hp-tiers b i { margin-right: 3px; font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: 0; opacity: 0.55; }
.hp-addons__note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--grey-5); }
.hp-addons__note b { color: var(--grey-7); font-weight: 600; }
.hp-addons p.hp-addons__note { margin: 10px 0 0; text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 400; color: var(--grey-5); }
/* "Need the lot?" bar under the prices: one long thin strip, logo to website, straight to a quote */
.lot-bar { display: flex; align-items: center; gap: 18px 28px; margin-top: 18px; padding: 14px 14px 14px 30px; border-radius: 999px; background: #18181a; color: #fff; text-decoration: none; box-shadow: 0 20px 40px -26px rgb(24 24 26 / 0.6); transition: translate 0.4s var(--ease-out), box-shadow 0.4s; }
.lot-bar:hover { translate: 0 -2px; box-shadow: 0 26px 44px -24px rgb(24 24 26 / 0.65); }
.lot-bar__copy { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 22px; flex: 1; min-width: 0; }
.lot-bar__copy b { color: #fff; font-size: clamp(20px, 1.7vw, 24px); font-weight: 700; letter-spacing: -0.03em; white-space: nowrap; }
.lot-bar__copy .hl { color: #18181a; }
.lot-bar__list { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.lot-bar__list i { font-style: normal; font-size: 13.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: rgb(255 255 255 / 0.1); color: rgb(255 255 255 / 0.88); white-space: nowrap; }
.lot-bar__go { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 999px; background: var(--hl-yellow); color: #18181a; font-size: 15px; font-weight: 700; white-space: nowrap; }
.lot-bar__go span { transition: translate 0.3s var(--ease-out); }
.lot-bar:hover .lot-bar__go span { translate: 3px 0; }
@media (max-width: 860px) {
.lot-bar { flex-direction: column; align-items: stretch; gap: 14px; padding: 20px 18px 18px; border-radius: 22px; }
.lot-bar__copy { flex-direction: column; align-items: flex-start; gap: 10px; }
.lot-bar__list i { font-size: 13px; padding: 5px 10px; }
.lot-bar__go { justify-content: center; padding: 14px 20px; }
}
/* Phones: the tick lists stay hidden, except the amends line on logos and print */
@media (max-width: 700px) {
.hp-incl:has(.is-key) { display: grid; margin-bottom: 0; }
.hp-incl li:not(.is-key) { display: none; }
}
/* Cards are boxes now, with the button as the link; the button's hit area covers the whole card */
.hp-card { cursor: pointer; }
/* Add-ons tucked away behind a chevron (sits above the card's link so it opens instead of navigating) */
details.hp-addons { position: relative; z-index: 2; cursor: default; }
.hp-addons summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -6px -6px 0; padding: 6px; border-radius: 8px; list-style: none; cursor: pointer;
font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-5); }
.hp-addons summary::-webkit-details-marker { display: none; }
.hp-addons summary:hover { color: var(--ink); background: var(--grey-1); }
.hp-addons summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.hp-addons summary svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: rotate 0.3s var(--ease-out); }
.hp-addons[open] summary svg { rotate: 180deg; }
.hp-addons[open] summary { margin-bottom: 6px; }
.hp-addons[open] > ul, .hp-addons[open] > .hp-addons__note { animation: hp-addons-in 0.35s var(--ease-out); }
@keyframes hp-addons-in { from { opacity: 0; translate: 0 -6px; } }
@media (prefers-reduced-motion: reduce) { .hp-addons[open] > * { animation: none; } }
/* ===== home-hero.css ===== */
/* Home hero (big type) + phone-fan section. Ported from the old hero test pages (removed) by tools/port_hero.py */
/* ============ Big type hero ============ */
.bt-hero {
position: relative; isolation: isolate; overflow: hidden;
min-height: 100dvh;
display: flex; flex-direction: column; justify-content: center;
padding: clamp(100px, 13vh, 130px) 0 clamp(32px, 5vh, 56px);
}
.bt-bt { --F: clamp(64px, min(13.2vw, 21.5vh), 214px); }
.bt-kicker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; font-weight: 500; color: var(--grey-7); margin-bottom: clamp(14px, 2.6vh, 28px); }
.bt-kicker b { font-weight: 600; color: var(--ink); }
.bt-kicker .bt-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #22b35e; flex: none; }
.bt-kicker .bt-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #22b35e; opacity: 0; animation: ping 2.4s var(--ease-out) infinite; }
.bt-kicker .bt-sep { width: 18px; height: 1px; background: var(--grey-3); }
@keyframes ping { 0% { transform: scale(0.5); opacity: 0.7; } 100% { transform: scale(1.6); opacity: 0; } }
/* The stage is sized in em of the headline, so the pieces stay tucked
against the same letters at every screen size. */
.bt-stage { position: relative; font-size: var(--F); }
.bt-title { position: relative; z-index: 2; margin: 0; font-size: 1em; font-weight: 700; line-height: 0.9; letter-spacing: -0.055em; text-wrap: initial; }
.bt-title .bt-ln { display: block; white-space: nowrap; overflow: hidden; padding: 0.02em 0.08em 0.1em; margin: -0.02em -0.08em -0.1em; }
.bt-title .bt-ln > span { display: inline-block; }
.bt-title .bt-ln--2 { padding-left: calc(var(--in2) + 0.08em); }
.bt-title .bt-ln--3 { padding-left: calc(var(--in3) + 0.08em); }
.bt-stage { --in2: 1.62em; --in3: 1.3em; }
.bt-title .hl { padding: 0 0.06em; margin: 0 -0.03em; background-position: 0 66%; }
.bt-title .hl.is-lit { background-size: 100% 62%; }
.hl--mint { --pen: #a8f0c6; }
/* Pieces: outer = parallax, .bt-fl = float, .bt-pc = rotation + look */
.bt-piece { position: absolute; left: var(--x); top: var(--y); width: var(--w); z-index: 3; will-change: transform; }
.bt-piece.is-behind { z-index: 1; }
.bt-piece .bt-fl { display: block; }
.bt-piece .bt-pc { display: block; rotate: var(--r); transition: rotate 0.6s var(--ease-spring), scale 0.6s var(--ease-spring); }
.bt-piece a.bt-pc { text-decoration: none; }
.bt-piece:hover .bt-pc { scale: 1.04; rotate: calc(var(--r) * 0.4); }
.bt-pc img { width: 100%; }
.bt-lift { box-shadow: 0 2px 4px rgb(24 24 26 / 0.06), 0 26px 44px -16px rgb(24 24 26 / 0.34); }
.bt-card img { border-radius: 0.06em; }
.bt-card { border-radius: 0.06em; background: #fff; }
.bt-polaroid { position: relative; margin: 0; padding: 0.055em 0.055em 0; background: #fff; border-radius: 3px; }
.bt-polaroid img { aspect-ratio: 1 / 1.02; object-fit: cover; object-position: 50% 30%; }
.bt-polaroid figcaption { font: 700 0.13em / 1 Caveat, cursive; color: #2c2c2c; text-align: center; padding: 0.45em 0 0.6em; }
.bt-tape { position: absolute; left: 50%; top: -0.05em; width: 0.42em; height: 0.12em; translate: -50% 0; rotate: 3deg; background: rgb(255 240 77 / 0.75); box-shadow: 0 1px 2px rgb(0 0 0 / 0.06); }
.bt-sticker { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: #b3dd03; color: #111318; box-shadow: inset 0 -0.03em 0 rgb(0 0 0 / 0.08), 0 20px 34px -14px rgb(60 80 0 / 0.45); }
.bt-sticker__ring { position: absolute; inset: 7%; width: 86%; height: 86%; animation: spin 16s linear infinite; }
.bt-sticker__ring text { font: 800 11.5px var(--font); letter-spacing: 0.3em; fill: currentColor; }
.bt-sticker__a { width: 40%; }
@keyframes spin { to { transform: rotate(360deg); } }
.bt-phone {
--edge: 2px;
position: relative; display: block; container-type: inline-size; aspect-ratio: 393 / 852;
border: var(--edge) solid transparent; border-radius: 17% / 7.9%;
background: linear-gradient(#0a0a0b, #0a0a0b) padding-box, linear-gradient(140deg, #c4c4c8 0%, #55555a 26%, #a6a6ab 50%, #3d3d40 76%, #b2b2b6 100%) border-box;
box-shadow: 0 40px 50px -26px rgb(17 17 17 / 0.5), 0 12px 24px -12px rgb(17 17 17 / 0.3);
}
.bt-phone::before { content: ""; position: absolute; right: calc(-1 * var(--edge) - 3px); top: 27%; height: 13%; width: 3px; border-radius: 2px; background: #8e8e93; }
.bt-phone__display { position: absolute; inset: 3.4cqw; overflow: hidden; border-radius: 13cqw; display: flex; flex-direction: column; background: #0f1014; }
.bt-phone__display::before { content: ""; position: absolute; z-index: 3; top: 2.6cqw; left: 50%; width: 28cqw; height: 8cqw; translate: -50% 0; border-radius: 999px; background: #000; }
.bt-phone__status { flex: 0 0 auto; height: 13cqw; display: flex; align-items: center; justify-content: space-between; padding: 0.6cqw 7.5cqw 0 9.5cqw; color: #fff; font: 600 4.2cqw / 1 var(--font); }
.bt-phone__status svg { height: 3.6cqw; width: auto; }
.bt-phone .bt-screen { position: relative; display: block; flex: 1; overflow: hidden; }
.bt-phone .bt-screen img { display: block; width: 100%; will-change: transform; }
.bt-tag { position: absolute; left: 50%; bottom: -0.2em; translate: -50% 0; white-space: nowrap; font: 600 clamp(11px, 0.068em, 13px) / 1 var(--font); letter-spacing: 0.01em; padding: 0.55em 0.9em; border-radius: 999px; background: var(--ink); color: var(--white); opacity: 0; transition: opacity 0.25s, translate 0.35s var(--ease-out); pointer-events: none; }
.bt-piece:hover .bt-tag, .bt-piece:focus-within .bt-tag { opacity: 1; translate: -50% 0.25em; }
/* Desktop placement (em of the headline) */
.bt-p-sticker { --x: 4.12em; --y: -0.3em; --w: 0.62em; --r: -12deg; }
.bt-p-gs { --x: 4.95em; --y: -0.22em; --w: 0.74em; --r: 7deg; }
.bt-p-np { --x: 5.82em; --y: 0.02em; --w: 0.62em; --r: -5deg; }
.bt-p-bh { --x: 0.02em; --y: 0.98em; --w: 1.1em; --r: -6deg; }
.bt-p-phone { --x: 5.93em; --y: 1.24em; --w: 0.6em; --r: 8deg; }
/* ---------- Bottom row ---------- */
.bt-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 40px; flex-wrap: wrap; margin-top: clamp(26px, 5vh, 54px); position: relative; z-index: 4; }
.bt-who { max-width: 31em; font-size: clamp(15px, 1.2vw, 18px); color: var(--grey-7); line-height: 1.6; }
.bt-who strong { color: var(--ink); font-weight: 600; }
.bt-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.bt-ctas .btn { padding: 15px 24px; }
.bt-ctas .btn span { transition: transform 0.3s var(--ease-spring); }
.bt-ctas .btn:hover span { transform: translateX(3px); }
/* ---------- Strip below ---------- */
.bt-strip { border-top: 1px solid var(--line); padding: 22px 0 28px; }
.bt-strip .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px 28px; flex-wrap: wrap; }
.bt-strip ul { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 0; padding: 0; list-style: none; font-size: 15px; font-weight: 500; color: var(--grey-7); }
.bt-strip li { display: inline-flex; align-items: center; gap: 10px; }
.bt-strip li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.bt-strip p { font-size: 13px; color: var(--grey-5); }
/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
.bt-bt { --F: clamp(56px, 12.4vw, 140px); }
}
/* ---------- Phone: headline stacks tight, pieces fan out in a band under it ---------- */
@media (max-width: 700px) {
.bt-hero { justify-content: flex-start; padding-top: 92px; padding-bottom: 28px; }
.bt-bt { --F: min(18.6vw, 84px); }
.bt-kicker { font-size: 12.5px; gap: 8px; margin-bottom: 14px; }
.bt-kicker .bt-sep, .bt-kicker .bt-loc { display: none; }
.bt-stage { --in2: 0.5em; --in3: 0.18em; padding-bottom: 2.45em; }
.bt-p-sticker { --x: 3.45em; --y: -0.22em; --w: 0.82em; --r: -12deg; }
.bt-p-gs { --x: -0.04em; --y: 2.98em; --w: 1.08em; --r: -9deg; }
.bt-p-bh { --x: 0.86em; --y: 2.86em; --w: 1.56em; --r: 4deg; }
.bt-p-np { --x: 2.3em; --y: 3.08em; --w: 1.02em; --r: 8deg; }
.bt-p-phone { --x: 3.6em; --y: 2.84em; --w: 0.9em; --r: 9deg; }
.bt-p-sticker, .bt-p-phone { z-index: 3; }
.bt-p-gs, .bt-p-np { z-index: 2; }
.bt-foot { margin-top: 18px; gap: 18px; }
.bt-who { font-size: 15px; }
.bt-ctas .btn { padding: 13px 18px; font-size: 14px; }
.bt-tag { display: none; }
.bt-strip ul { font-size: 13.5px; gap: 4px 16px; }
}
@media (prefers-reduced-motion: reduce) {
.bt-sticker__ring { animation: none; }
.bt-piece { will-change: auto; }
}
/* ---- phone fan ---- */
/* ---------- Hero layout ---------- */
main { overflow-x: clip; }
.pf-hero {
position: relative;
min-height: 100dvh;
display: grid; align-items: center;
max-width: var(--max); margin-inline: auto;
padding: 104px var(--gutter) 36px;
}
.pf-hero__grid {
display: grid; align-items: center;
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
gap: clamp(16px, 3vw, 48px);
}
.pf-hero__copy { position: relative; z-index: 2; }
.pf-badge {
display: inline-flex; align-items: center; gap: 10px;
padding: 7px 14px 7px 10px; border-radius: 999px;
border: 1px solid var(--line); background: var(--grey-1);
font-size: 13px; font-weight: 500;
}
.pf-badge i { width: 9px; height: 9px; border-radius: 50%; background: #34c759; animation: ping 2s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgb(52 199 89 / 0.6); } 70%, 100% { box-shadow: 0 0 0 9px rgb(52 199 89 / 0); } }
.pf-hero__title {
margin-top: 22px;
font-size: clamp(40px, 4.5vw, 70px);
line-height: 1; letter-spacing: -0.052em;
}
.pf-hero__title .hl { white-space: nowrap; }
.pf-hero__lede { margin-top: 22px; max-width: 42ch; font-size: clamp(16px, 1.3vw, 19px); color: var(--grey-7); line-height: 1.6; }
.pf-hero__lede b { color: var(--ink); font-weight: 600; }
.pf-hero__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.pf-btn--big { padding: 16px 26px; font-size: 16px; }
.pf-hero__note { margin-top: 22px; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--grey-5); }
.pf-hero__note svg { width: 18px; height: 18px; flex: none; }
/* ---------- The fan ---------- */
.pf-fan {
--pw: clamp(168px, 14.2vw, 220px);
position: relative;
height: clamp(560px, 76vh, 700px);
touch-action: pan-y;
user-select: none; -webkit-user-select: none;
}
.pf-scribble {
position: absolute; z-index: 0; pointer-events: none;
left: 50%; top: 46%; width: 128%; max-width: 860px; translate: -50% -50%;
overflow: visible;
}
.pf-scribble path {
fill: none; stroke: var(--hl-yellow); stroke-width: 86; stroke-linecap: round; stroke-linejoin: round;
mix-blend-mode: multiply; opacity: 0.85;
}
.pf-card {
position: absolute; left: 50%; bottom: 92px;
width: var(--pw); margin-left: calc(var(--pw) / -2);
transform-origin: 50% 135%;
text-decoration: none; color: inherit;
-webkit-tap-highlight-color: transparent;
outline: none;
}
.pf-card__lift { position: relative; display: block; will-change: transform; }
/* Realistic iPhone: titanium rim, thin black bezel, dynamic island, status bar, home bar */
.pf-phone {
position: relative; display: block;
aspect-ratio: 71.6 / 147.6;
padding: calc(var(--pw) * 0.03);
border-radius: calc(var(--pw) * 0.17);
background: #0a0a0b;
box-shadow:
0 0 0 1.5px #6e6e73,
0 0 0 3px #2b2b2e,
inset 0 0 0 1px #3a3a3e,
0 34px 60px -24px rgb(24 24 26 / 0.45),
0 12px 24px -12px rgb(24 24 26 / 0.3);
transition: box-shadow 0.4s var(--ease-out);
}
.pf-phone::before, .pf-phone::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: #4a4a4f; }
.pf-phone::before { left: -4.5px; top: 19%; height: 5%; box-shadow: 0 calc(var(--pw) * 0.13) 0 #4a4a4f, 0 calc(var(--pw) * 0.25) 0 #4a4a4f; }
.pf-phone::after { right: -4.5px; top: 27%; height: 11%; }
.pf-screen {
position: relative; display: block; height: 100%; overflow: hidden;
border-radius: calc(var(--pw) * 0.14);
background: var(--sb, #fff);
isolation: isolate;
}
.pf-screen__page { position: absolute; left: 0; right: 0; top: calc(var(--pw) * 0.13); }
.pf-screen__page img { width: 100%; height: auto; }
.pf-sb {
position: absolute; inset: 0 0 auto; z-index: 2;
height: calc(var(--pw) * 0.13);
display: flex; align-items: center; justify-content: space-between;
padding: calc(var(--pw) * 0.012) calc(var(--pw) * 0.075) 0 calc(var(--pw) * 0.1);
background: var(--sb, #fff); color: var(--sbt, #111);
font-size: calc(var(--pw) * 0.056); font-weight: 600; letter-spacing: -0.01em; line-height: 1;
}
.pf-sb__icons { display: flex; align-items: center; gap: calc(var(--pw) * 0.016); }
.pf-sb__icons svg { height: calc(var(--pw) * 0.042); width: auto; fill: currentColor; }
.pf-island {
position: absolute; z-index: 3; left: 50%; top: calc(var(--pw) * 0.026);
width: 31%; height: calc(var(--pw) * 0.086); translate: -50% 0;
border-radius: 999px; background: #000;
}
.pf-homebar {
position: absolute; z-index: 3; left: 50%; bottom: calc(var(--pw) * 0.022);
width: 34%; height: 4px; translate: -50% 0; border-radius: 4px;
background: var(--hb, rgb(0 0 0 / 0.82));
}
/* Project tag: pops above the lifted phone, counter-rotated so it reads level */
.pf-tag {
position: absolute; left: 50%; bottom: calc(100% + 16px);
display: grid; justify-items: center; gap: 4px;
white-space: nowrap; text-align: center;
/* nudge outward and up on tilted phones so the raised corner never clips it */
translate: calc(-50% + var(--n, 0) * 2.2px) calc(var(--na, 0) * -1.1px);
rotate: calc(var(--a, 0deg) * -1);
opacity: 0; scale: 0.85; transform-origin: 50% 100%;
transition: opacity 0.3s var(--ease-out), scale 0.45s var(--ease-spring);
pointer-events: none;
}
.pf-tag strong {
font-size: 22px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.15;
color: #18181a;
padding: 0 0.22em;
background: linear-gradient(100deg, transparent 0.5%, var(--pen) 2%, var(--pen) 96%, transparent 99.5%) no-repeat 0 62% / 0% 78%;
border-radius: 0.2em 0.35em 0.25em 0.4em;
transition: background-size 0.55s var(--ease-out) 0.08s;
}
.pf-tag span { font-size: 12px; font-weight: 500; color: var(--grey-7); }
.pf-card.is-active .pf-tag { opacity: 1; scale: 1; }
.pf-card.is-active .pf-tag strong { background-size: 100% 78%; }
.pf-card.is-active .pf-phone { box-shadow: 0 0 0 1.5px #6e6e73, 0 0 0 3px #2b2b2e, inset 0 0 0 1px #3a3a3e, 0 50px 80px -28px rgb(24 24 26 / 0.55), 0 16px 30px -12px rgb(24 24 26 / 0.35); }
.pf-card:focus-visible .pf-phone { outline: 3px solid var(--ink); outline-offset: 6px; }
/* Phone-width caption (project name under the fan) */
.pf-deck-cap { display: none; }
/* ---------- Strip below ---------- */
.pf-strip { border-top: 1px solid var(--line); background: var(--grey-1); }
.pf-strip__in {
max-width: var(--max); margin-inline: auto; padding: 20px var(--gutter);
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px;
font-size: 14px; color: var(--grey-7);
}
.pf-strip__list { display: flex; flex-wrap: wrap; gap: 6px 22px; font-weight: 500; color: var(--ink); }
.pf-strip__list span { display: inline-flex; align-items: center; gap: 8px; }
.pf-strip__list span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dot); }
.pf-strip a { color: var(--ink); font-weight: 500; text-underline-offset: 4px; }
/* ---------- Phone width: a tighter fan of big phones (the outer ones bleed off the edges), one lifted ---------- */
@media (max-width: 860px) {
.pf-hero { padding-top: 92px; align-items: start; }
.pf-hero__grid { grid-template-columns: 1fr; gap: 8px; }
.pf-hero__note { display: none; }
.pf-fan { --pw: min(38vw, 230px); height: auto; aspect-ratio: auto; padding-top: 18px; }
.pf-fan__stage { position: relative; height: calc(var(--pw) * 2.06 + var(--pw) * 0.62 + 34px); }
.pf-card { bottom: calc(var(--pw) * 0.5); transform-origin: 50% 150%; }
.pf-tag { display: none; }
.pf-scribble { top: 50%; width: 200%; }
.pf-deck-cap { display: flex; justify-content: center; margin-top: 6px; }
.pf-deck-cap__name {
display: inline-flex; align-items: baseline; gap: 6px;
font-size: 22px; font-weight: 700; letter-spacing: -0.035em; color: var(--ink); text-decoration: none; line-height: 1.2;
}
.pf-deck-cap__name mark {
color: #18181a; background: linear-gradient(100deg, transparent 0.5%, var(--pen) 2%, var(--pen) 96%, transparent 99.5%) no-repeat 0 62% / 100% 78%;
padding: 0 0.22em; border-radius: 0.2em 0.35em 0.25em 0.4em;
}
.pf-deck-cap__name span { font-size: 18px; font-weight: 600; transition: transform 0.3s var(--ease-spring); }
.pf-deck-cap__name:hover span { transform: translateX(3px); }
}
@media (max-width: 560px) {
.pf-hero__title { font-size: clamp(36px, 10.4vw, 46px); margin-top: 18px; }
.pf-hero__lede { margin-top: 16px; font-size: 16px; }
.pf-hero__ctas { margin-top: 22px; }
.pf-hero__ctas { flex-wrap: nowrap; gap: 8px; }
.pf-hero__ctas .btn { flex: 1 1 auto; justify-content: center; padding: 14px 16px; font-size: 15px; white-space: nowrap; }
.pf-strip__in { font-size: 13px; }
}
@media (min-width: 861px) { .pf-fan__stage { position: absolute; inset: 0; } }
/* ---- "Websites that grow your business." refit (longer last line) ---- */
.bt-bt { --F: clamp(54px, min(10.4vw, 17vh), 170px); }
.bt-stage { --in2: 2.2em; --in3: 1.15em; }
.bt-p-sticker { --x: 4.6em; --y: -0.28em; --w: 0.6em; --r: -12deg; }
.bt-p-gs { --x: 5.35em; --y: -0.24em; --w: 0.72em; --r: 7deg; }
.bt-p-np { --x: 6.2em; --y: -0.04em; --w: 0.6em; --r: -5deg; }
.bt-p-bh { --x: 0em; --y: 0.96em; --w: 1.02em; --r: -6deg; }
.bt-p-phone { --x: 7.12em; --y: 0.62em; --w: 0.55em; --r: 8deg; }
@media (max-width: 1100px) { .bt-bt { --F: clamp(48px, 9.4vw, 112px); } }
@media (max-width: 560px) {
.bt-bt { --F: min(12.8vw, 60px); }
.bt-stage { --in2: 0.5em; --in3: 0em; }
}
/* Fan section title: keep the highlight phrase together */
.pf-hero__title { text-wrap: balance; }
.pf-hero__title .hl { white-space: nowrap; }
/* Big type only (no floating pieces): sized to its container so all three
lines always fit. The widest line is ~8em with the desktop indents. */
.bt-hero .wrap { container-type: inline-size; }
.bt-hero .bt-stage { font-size: min(calc(100cqi / 8.1), 21vh, 210px); padding-bottom: 0; }
@media (max-width: 560px) { .bt-hero .bt-stage { font-size: calc(100cqi / 6.95); } }
/* Never crop the headline: the reveal uses clip-path instead of overflow */
.bt-title .bt-ln { overflow: visible; }
.bt-hero .bt-stage { font-size: var(--fit, min(calc(100cqi / 8.4), 20vh, 200px)); }
/* Availability card, top right beside "Websites" */
.bt-hero .wrap { padding-top: 24px; }
.bt-avail {
position: absolute; z-index: 3; right: 0; top: 0.06em; width: min(300px, 26%);
display: grid; gap: 10px; padding: 20px 22px 22px; border-radius: 20px;
background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow);
font-size: 15px; letter-spacing: 0; line-height: 1.5;
}
.bt-avail__status { display: flex; align-items: center; gap: 9px; font-weight: 600; }
.bt-avail .bt-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: #34c759; flex: none; }
.bt-avail__what { color: var(--grey-7); font-size: 14.5px; }
.bt-avail__meta { color: var(--grey-5); font-size: 13px; }
.bt-avail__btn { justify-self: start; margin-top: 4px; padding: 11px 18px; font-size: 14px; }
@media (max-width: 1100px) { .bt-avail { position: static; width: auto; max-width: 420px; margin-bottom: 26px; } }
/* keep the rise-in mask vertical only, so wide words are never cut sideways */
.bt-title .bt-ln { clip-path: inset(-0.35em -2em -0.3em -2em); }
/* Slim availability card: one tidy row that fits beside "Websites" */
.bt-avail { top: 0.12em; width: auto; max-width: none; display: flex; align-items: center; gap: 16px; padding: 12px 12px 12px 18px; border-radius: 999px; }
.bt-avail__what { display: none; }
.bt-avail__status { font-size: 14.5px; white-space: nowrap; }
.bt-avail__meta { display: none; }
.bt-avail__btn { margin: 0; padding: 10px 16px; font-size: 13.5px; white-space: nowrap; }
@media (max-width: 1100px) { .bt-avail { position: static; display: inline-flex; margin-bottom: 22px; } }
@media (max-width: 560px) {
.bt-hero .bt-stage { display: flex; flex-direction: column; }
.bt-avail { order: 2; align-self: flex-start; margin: 22px 0 0; }
}
/* Faded laptop behind the headline, slowly scrolling real sites */
.bt-hero { position: relative; isolation: isolate; overflow: hidden; }
.bt-hero > .wrap { position: relative; z-index: 1; }
.bt-ghost {
position: absolute; z-index: 0; right: -6%; top: 50%; width: min(980px, 68vw); translate: 0 -46%;
opacity: 0.2; pointer-events: none; rotate: -4deg;
-webkit-mask-image: radial-gradient(120% 95% at 72% 40%, #000 30%, transparent 78%);
mask-image: radial-gradient(120% 95% at 72% 40%, #000 30%, transparent 78%);
filter: saturate(0.85);
}
.bt-ghost .laptop__lid { box-shadow: none; }
.bt-ghost__screen { position: relative; aspect-ratio: auto; height: 100%; }
.bt-ghost__screen img { position: absolute; left: 0; top: 0; width: 100%; height: auto; opacity: 0; transition: opacity 1.4s ease; will-change: transform; }
.bt-ghost__screen img.is-on { opacity: 1; }
@media (max-width: 900px) { .bt-ghost { width: 120vw; right: -40vw; top: 34%; opacity: 0.14; } }
.bt-ghost { opacity: 0.17; -webkit-mask-image: radial-gradient(110% 80% at 70% 34%, #000 28%, transparent 72%); mask-image: radial-gradient(110% 80% at 70% 34%, #000 28%, transparent 72%); }
/* ===================== Phone hero ===================== */
@media (max-width: 560px) {
.bt-hero { min-height: 100svh; padding-top: 96px; padding-bottom: 0; display: flex; flex-direction: column; }
.bt-hero > .wrap { padding-top: 8px; }
.bt-hero .bt-stage { display: flex; flex-direction: column; font-size: min(18.6vw, 88px) !important; }
/* four left-aligned lines: Websites / that grow / your / business. */
.bt-stage { --in2: 0em; --in3: 0em; }
.bt-title { line-height: 0.92; }
.bt-title .bt-ln { white-space: normal; padding-left: 0.04em !important; }
.bt-title .bt-ln--3 mark { display: inline-block; margin-top: 0.02em; }
/* small availability chip above the headline, no button */
.bt-avail { order: -1; align-self: flex-start; margin: 0 0 18px; padding: 7px 14px 7px 12px; gap: 8px; box-shadow: none; background: var(--grey-1); }
.bt-avail__btn { display: none; }
.bt-avail__status { font-size: 13px; }
.bt-foot { margin-top: 22px; }
.bt-who { font-size: 16px; }
.bt-ctas { margin-top: 18px; }
/* faded laptop peeks up from the bottom instead of sitting behind the words */
.bt-ghost { top: auto; bottom: -4svh; right: -30vw; width: 135vw; translate: 0 0; rotate: -7deg; opacity: 0.22;
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 40%, #000 70%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0%, #000 40%, #000 70%, transparent 100%); }
}
@media (max-width: 560px) {
.bt-title { line-height: 0.96; }
.bt-ghost { bottom: -30svh; right: -38vw; width: 150vw; opacity: 0.26;
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 75%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 75%, transparent 100%); }
.bt-ctas { position: relative; z-index: 2; }
}
/* Brand-colour glow behind the faded laptop (changes with the project) */
.bt-ghost__glow { position: absolute; z-index: 0; right: 4%; top: 18%; width: 52vw; aspect-ratio: 1.3; border-radius: 50%; pointer-events: none;
background: radial-gradient(closest-side, var(--glow, #ff9ed2), transparent); opacity: 0.32; filter: blur(30px); transition: background 1.2s ease; }
.bt-ghost { opacity: 0.26; }
/* Proof bar */
.bt-proof { margin-top: clamp(26px, 4vh, 48px); padding-top: 18px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 18px 28px; flex-wrap: wrap; font-size: 14px; color: var(--grey-7); }
.bt-now { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 999px; background: var(--grey-1); border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: 13.5px; transition: background 0.3s; }
.bt-now:hover { background: var(--grey-2); }
.bt-now span:nth-child(2) { color: var(--grey-5); }
.bt-now__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--glow, #ff9ed2); transition: background 0.6s; box-shadow: 0 0 0 3px color-mix(in srgb, var(--glow, #ff9ed2) 35%, transparent); }
.bt-facts { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px 26px; flex-wrap: wrap; }
.bt-facts li { position: relative; }
.bt-facts li + li::before { content: ""; position: absolute; left: -14px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: var(--grey-3); }
.bt-facts b { color: var(--ink); font-weight: 700; }
.bt-cue { margin-left: auto; font-weight: 600; color: var(--ink); text-decoration: none; display: inline-flex; gap: 6px; }
.bt-cue span { display: inline-block; animation: bt-cue 1.8s ease-in-out infinite; }
@keyframes bt-cue { 50% { transform: translateY(4px); } }
@media (max-width: 860px) { .bt-cue { margin-left: 0; } }
@media (max-width: 560px) { .bt-proof { gap: 12px; } .bt-facts { gap: 4px 22px; font-size: 13.5px; } .bt-ghost__glow { width: 120vw; right: -30vw; top: auto; bottom: 0; } }
@media (prefers-reduced-motion: reduce) { .bt-cue span { animation: none; } }
@media (max-width: 560px) {
.bt-facts { display: none; }
.bt-proof { flex-wrap: nowrap; justify-content: space-between; }
.bt-now { font-size: 13px; }
.bt-cue { margin-left: auto; font-size: 14px; white-space: nowrap; }
}
@media (max-width: 560px) { .bt-cue { display: none; } }
@media (max-width: 560px) { .bt-proof { display: none; } }
.pf-hi { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.pf-hi__wave { display: inline-block; transform-origin: 70% 80%; animation: pf-wave 2.6s ease-in-out 1s infinite; }
@keyframes pf-wave { 0%, 60%, 100% { rotate: 0deg; } 10%, 30% { rotate: 16deg; } 20%, 40% { rotate: -8deg; } }
@media (prefers-reduced-motion: reduce) { .pf-hi__wave { animation: none; } }
/* =====================================================================
HERO BACKDROP: the faded laptop on desktop; on phones the work wall
(.bt-g1, swapped in by home-hero.js).
===================================================================== */
.bt-hero[data-ghost] .btn--ghost { background: var(--white); } /* stays readable over any backdrop */
.bt-hero > .bt-g1 { position: absolute; z-index: 0; pointer-events: none; }
/* ---------------------------------------------------------------------
Option 1 · Work wall
Three slow columns of real phone screens (the phone fan's captures),
tilted, scrolling in opposite directions, faded at every edge.
--------------------------------------------------------------------- */
.bt-g1 {
--cw: clamp(130px, 11vw, 176px);
right: -2vw; top: 0; bottom: 0; width: calc(var(--cw) * 3 + 44px + 14vw);
opacity: 0.3; filter: saturate(0.8);
mask-image: linear-gradient(to bottom, transparent 4%, #000 26%, #000 58%, transparent 84%), linear-gradient(to right, transparent 0%, #000 42%);
mask-composite: intersect;
}
.bt-g1__tilt { position: absolute; right: 0; top: -20%; bottom: -20%; display: flex; gap: 22px; rotate: 9deg; transform-origin: 50% 50%; }
.bt-g1__col { width: var(--cw); height: 100%; overflow: hidden; }
.bt-g1__col:nth-child(2) { margin-top: -12%; }
.bt-g1__track { will-change: transform; }
/* where each strip starts before the script takes over (set per strip in the markup; phones have their own) */
.bt-g1__track { transform: translateY(var(--y, 0%)); }
@media (max-width: 560px) { .bt-g1__track { transform: translateY(var(--ym, var(--y, 0%))); } }
/* a brand change: the next site's strip fades in over the current one */
.bt-g1__col { position: relative; }
.bt-g1__track.is-next { position: absolute; left: 0; right: 0; top: 0; }
.bt-g1__shot { display: block; aspect-ratio: 9 / 19.5; margin-bottom: 22px; border-radius: calc(var(--cw) * 0.12); overflow: hidden; background: var(--grey-2); box-shadow: 0 0 0 1px var(--line); }
.bt-g1__shot img { width: 100%; height: 100%; object-fit: cover; }
/* desktop: all three columns sit inside the right edge, a touch stronger than on phones */
@media (min-width: 561px) {
/* more of the phones on show, like the phone layout: bigger, stronger, only the edges feathered */
.bt-g1 { --cw: clamp(150px, 13vw, 210px); right: 3vw; opacity: 0.5;
mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 66%, transparent 86%), linear-gradient(to right, transparent 0%, #000 20%);
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 66%, transparent 86%), linear-gradient(to right, transparent 0%, #000 20%);
-webkit-mask-composite: source-in; mask-composite: intersect; }
}
@media (min-width: 561px) and (max-width: 1100px) { .bt-g1 { right: -4vw; } }
/* phones: the wall sinks to the band under the buttons */
@media (max-width: 560px) {
.bt-g1 { --cw: 30vw; top: auto; bottom: 0; right: -14vw; width: 118vw; height: 40svh; opacity: 0.3;
mask-image: linear-gradient(to bottom, transparent 0%, #000 55%); mask-composite: add; }
.bt-g1__tilt { gap: 14px; left: 0; justify-content: center; }
.bt-g1__shot { margin-bottom: 14px; }
}
@media (max-width: 680px) { .pf-hero__ctas { display: none; } }
/* phones: the faded laptop sits up under the button, filling the space, rather than mostly off the bottom */
@media (max-width: 560px) {
.bt-hero .bt-ghost {
top: calc(100% - 470px); translate: 0 0; opacity: 0.46;
/* soft top edge: it fades up into the page behind the button instead of starting on a line */
-webkit-mask-image: linear-gradient(to bottom, transparent 2%, #000 24%, #000 32%, transparent 52%), radial-gradient(120% 90% at 55% 42%, #000 38%, transparent 76%);
mask-image: linear-gradient(to bottom, transparent 2%, #000 24%, #000 32%, transparent 52%), radial-gradient(120% 90% at 55% 42%, #000 38%, transparent 76%);
-webkit-mask-composite: source-in; mask-composite: intersect;
}
}
/* desktop: the scrolling site behind the headline a little stronger */
@media (min-width: 561px) { .bt-hero .bt-ghost { opacity: 0.28; } }
/* phones: no laptop frame behind the hero (its lid edge and base read as hard grey lines),
just the scrolling site itself, feathered out on every side */
@media (max-width: 560px) {
.bt-hero .bt-ghost .laptop__base, .bt-hero .bt-ghost .laptop__lid::before { display: none; }
.bt-hero .bt-ghost .laptop__lid { background: none; box-shadow: none; padding: 0; border: 0; }
.bt-hero .bt-ghost .screen { border-radius: 0; box-shadow: none; }
.bt-hero .bt-ghost__glow { display: none; }
}
/* phones: the wall fades out at the bottom too (no hard edge), and the crossed tapes ride up into
that faded band instead of leaving a gap under the hero */
@media (max-width: 560px) {
.bt-g1 { mask-image: linear-gradient(to bottom, transparent 0%, #000 34%, #000 58%, transparent 92%); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 34%, #000 58%, transparent 92%); }
}
/* phones: the wall runs on below the hero, behind the crossed tapes, and fades out there,
so there's no cut-off edge (the hero clips sideways only) */
@media (max-width: 560px) {
.bt-hero { overflow: visible; overflow-x: clip; }
.bt-g1 { bottom: -230px; height: calc(40svh + 230px);
mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 55%, transparent 88%); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 55%, transparent 88%); }
}
.bt-ghost__screen picture { display: contents; }
/* work wall: each column is one continuous page strip, rounded like a phone screen */
.bt-g1__col { border-radius: calc(var(--cw) * 0.12); box-shadow: 0 0 0 1px var(--line); background: var(--grey-2); }
.bt-g1__page { display: block; width: 100%; height: auto; }
/* Headline a touch smaller (about 8%) on every screen */
.bt-hero .bt-stage { font-size: var(--fit, min(calc(100cqi / 9.1), 18.4vh, 184px)); }
@media (max-width: 560px) { .bt-hero .bt-stage { font-size: min(17.1vw, 81px) !important; } }
/* phones: the intro and button sit on clean white; the work wall only starts below the button */
@media (max-width: 560px) {
.bt-hero { padding-top: 84px; }
.bt-g1 { height: calc(24svh + 230px);
mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 55%, transparent 88%); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 55%, transparent 88%); }
}
.pf-hi + .pf-hero__title { margin-top: 0; }
/* Phone fan: a small picture of each site's top screen shows first; the long scrolling page loads over it */
.pf-screen__page .pf-poster { position: absolute; left: 0; top: 0; width: 100%; height: auto; z-index: 0; }
.pf-screen__page img:not(.pf-poster) { position: relative; z-index: 1; }
/* The H1 sits quietly in the row under the hero, where the services list was (the tapes below still show the list) */
html:root main h1.bt-place { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: 0; color: var(--grey-7); text-wrap: wrap; }
h1.bt-place span { white-space: nowrap; }
/* Phones: the row moves above the slogan, with no line (Google reads the phone version first, so it must show) */
@media (max-width: 560px) {
.bt-hero > .wrap { display: flex; flex-direction: column; }
.bt-hero .bt-proof { display: flex; order: -1; margin: 0 0 clamp(12px, 2.2vh, 24px); padding: 0; border-top: 0; }
html:root main h1.bt-place { font-size: 12.5px; }
}
/* ===== about.css ===== */
/* About: the full story page (projects/about.html, .ab-*) and the short
"About" block low on the home page (index.html #about, .ha-*).
Loads after base.css + case.css. Line icons share one stroke style. */
/* ---------- Line icons ---------- */
.ab-ch__node svg, .ab-tile__icon svg, .ab-way__icon svg, .ha-fact__icon svg {
fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible;
}
/* about.js inlines each icon and draws its strokes in once seen */
.is-drawable > * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease-out); }
.is-drawable > :nth-child(2) { transition-delay: 0.15s; }
.is-drawable > :nth-child(3) { transition-delay: 0.3s; }
.is-drawable > :nth-child(4) { transition-delay: 0.45s; }
.is-drawable.is-drawn > * { stroke-dashoffset: 0; }
/* ---------- Hero ---------- */
.ab-hero { padding-top: clamp(110px, 13vw, 160px); }
.ab-hero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.ab-hero__intro { display: grid; gap: 22px; justify-items: start; }
.ab-hero h1 { font-size: clamp(46px, 6.4vw, 96px); letter-spacing: -0.055em; line-height: 0.98; }
.ab-hero__lede { font-size: clamp(17px, 1.5vw, 20px); color: var(--grey-7); max-width: 46ch; }
.ab-status {
display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border-radius: 999px;
background: var(--grey-1); border: 1px solid var(--line); font-size: 13.5px; font-weight: 500;
}
.ab-status i { position: relative; width: 10px; height: 10px; border-radius: 50%; background: #3ccf6e; }
.ab-status i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #3ccf6e; opacity: 0; animation: ab-ping 2.4s var(--ease-out) infinite; }
@keyframes ab-ping { 0% { opacity: 0.7; scale: 0.6; } 100% { opacity: 0; scale: 1.6; } }
.ab-collage { position: relative; aspect-ratio: 1; width: 100%; max-width: 560px; justify-self: center; isolation: isolate; }
.ab-scribble { position: absolute; inset: 4% -4%; width: 108%; height: 92%; z-index: -1; overflow: visible; pointer-events: none; }
.ab-scribble path { fill: none; stroke: var(--hl-yellow); stroke-width: 88; stroke-linecap: round; stroke-linejoin: round; opacity: 0.8; mix-blend-mode: multiply; }
.ab-piece {
position: absolute; left: var(--x); top: var(--y); width: var(--w); rotate: var(--r);
display: block; text-decoration: none; color: inherit;
transition: rotate 0.6s var(--ease-spring), scale 0.6s var(--ease-spring);
}
a.ab-piece:hover, a.ab-piece:focus-visible { rotate: 0deg; scale: 1.05; z-index: 6; }
.ab-piece--logo { aspect-ratio: 1.45; border-radius: 18px; background: var(--bg); display: grid; place-items: center; padding: 0 11%; box-shadow: 0 2px 4px rgb(20 20 30 / 0.08), 0 26px 50px -24px rgb(20 20 30 / 0.55); }
.ab-piece--logo img { width: 100%; height: auto; }
.ab-piece--paper img { width: 100%; aspect-ratio: 0.707; object-fit: cover; border-radius: 3px; box-shadow: 0 2px 4px rgb(20 20 30 / 0.1), 0 24px 44px -20px rgb(20 20 30 / 0.5); }
/* Name badge until John adds a portrait */
.ab-portrait {
margin: 0; z-index: 3; aspect-ratio: auto; border-radius: 26px; overflow: hidden;
display: grid; grid-template-rows: 1fr auto;
background: #fff; color: #18181a; border: 1px solid rgb(24 24 26 / 0.08);
box-shadow: 0 2px 4px rgb(20 20 30 / 0.06), 0 40px 70px -30px rgb(20 20 30 / 0.5);
}
.ab-portrait__mono {
position: relative; display: flex; align-items: center; justify-content: center; gap: 0.02em;
font-size: clamp(76px, 9vw, 132px); font-weight: 800; letter-spacing: -0.07em; line-height: 1;
background: radial-gradient(120% 90% at 30% 10%, #fffbe0, #fff 60%);
}
.ab-portrait__mono span:last-child {
padding: 0 0.08em; border-radius: 0.12em 0.2em 0.14em 0.22em;
background: linear-gradient(100deg, transparent 2%, var(--hl-pink) 6%, var(--hl-pink) 94%, transparent 98%) 0 62% / 100% 70% no-repeat;
}
.ab-portrait__img { display: block; width: 100%; height: auto; aspect-ratio: 864 / 1160; object-fit: cover; object-position: 50% 0; }
.ab-portrait figcaption { display: grid; gap: 2px; padding: 14px 18px 16px; border-top: 1px dashed rgb(24 24 26 / 0.14); }
.ab-portrait figcaption b { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; }
.ab-portrait figcaption span { font-size: 12.5px; color: #6b6b70; }
.ab-hero .meta { margin-top: clamp(40px, 6vw, 72px); }
@media (max-width: 900px) {
.ab-hero__grid { grid-template-columns: 1fr; }
.ab-collage { max-width: 440px; }
}
/* ---------- The story so far ---------- */
.ab-story { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(56px, 8vw, 110px); }
.ab-story__line { position: absolute; left: 27px; top: 28px; bottom: 28px; width: 2px; border-radius: 2px; background: var(--line); }
.ab-story__line i { position: absolute; inset: 0; border-radius: inherit; background: var(--ink); transform-origin: top; }
.ab-ch {
display: grid; grid-template-columns: 56px minmax(0, 5fr) minmax(0, 6fr); gap: 0 clamp(20px, 3.4vw, 56px); align-items: start;
}
.ab-ch__node {
position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%;
display: grid; place-items: center; background: var(--white); color: var(--ink); border: 1.5px solid var(--grey-3);
transition: background 0.5s var(--ease-out), border-color 0.5s, color 0.5s, scale 0.5s var(--ease-spring);
}
.ab-ch__node svg { width: 26px; height: 26px; }
.ab-ch.is-on .ab-ch__node { background: var(--pen); border-color: transparent; color: #18181a; scale: 1.08; }
.ab-ch__copy { display: grid; gap: 12px; align-content: start; padding-top: 4px; }
.ab-ch__tag { font-size: 13px; font-weight: 600; color: var(--grey-5); letter-spacing: 0.01em; }
.ab-ch h3 { font-size: clamp(26px, 2.8vw, 40px); letter-spacing: -0.045em; line-height: 1.05; }
.ab-ch p { color: var(--grey-7); font-size: 17px; max-width: 46ch; }
.ab-ch--short .ab-ch__copy { grid-column: 2 / -1; }
.ab-ch__shots { display: flex; align-items: center; justify-content: center; padding: 18px 0 8px; }
.ab-shot {
position: relative; flex: 0 0 auto; width: var(--w, 30%); margin-left: -5%;
rotate: var(--r, 0deg); translate: 0 var(--y, 0px);
text-decoration: none; color: var(--ink);
transition: rotate 0.6s var(--ease-spring), translate 0.6s var(--ease-spring), scale 0.6s var(--ease-spring);
}
.ab-shot:first-child { margin-left: 0; }
.ab-shot img {
width: 100%; aspect-ratio: var(--ar, 1.6); object-fit: cover; border-radius: 10px; background: var(--grey-1);
box-shadow: 0 2px 4px rgb(20 20 30 / 0.08), 0 22px 40px -20px rgb(20 20 30 / 0.5);
}
.ab-shot--paper img { border-radius: 3px; }
/* website fold in a slim browser frame */
.ab-shot--web img { aspect-ratio: 1.6; object-position: top; border-radius: 0 0 10px 10px; }
.ab-shot--web::before {
content: ""; display: block; height: 14px; border-radius: 10px 10px 0 0; background: #ececef;
background-image: radial-gradient(circle, #ff6159 2.6px, transparent 3px), radial-gradient(circle, #ffbd2e 2.6px, transparent 3px), radial-gradient(circle, #28c941 2.6px, transparent 3px);
background-size: 10px 14px; background-repeat: no-repeat; background-position: 8px 0, 18px 0, 28px 0;
}
.ab-shot--logo img { object-fit: contain; padding: 0 16%; background: var(--bg); }
.ab-shot span {
position: absolute; left: 50%; bottom: -34px; translate: -50% 6px; white-space: nowrap;
padding: 4px 10px; border-radius: 999px; background: var(--ink); color: var(--white);
font-size: 12px; font-weight: 600; opacity: 0; pointer-events: none;
transition: opacity 0.25s, translate 0.35s var(--ease-out);
}
.ab-shot:hover, .ab-shot:focus-visible { z-index: 5; rotate: 0deg; translate: 0 calc(var(--y, 0px) - 12px); scale: 1.06; }
.ab-shot:hover span, .ab-shot:focus-visible span { opacity: 1; translate: -50% 0; }
@media (max-width: 900px) {
.ab-ch { grid-template-columns: 44px minmax(0, 1fr); gap: 0 18px; }
.ab-ch__node { width: 44px; height: 44px; }
.ab-ch__node svg { width: 21px; height: 21px; }
.ab-story__line { left: 21px; top: 22px; bottom: 22px; }
.ab-ch__shots { grid-column: 2; padding-top: 26px; justify-content: flex-start; }
.ab-ch p { font-size: 16px; }
}
@media (max-width: 560px) {
.ab-shot:nth-child(4) { display: none; }
.ab-shot { width: calc(var(--w, 30%) * 1.25); margin-left: -7%; }
.ab-shot--web::before { height: 10px; background-size: 8px 10px; background-position: 6px 0, 13px 0, 20px 0; background-image: radial-gradient(circle, #ff6159 1.8px, transparent 2.2px), radial-gradient(circle, #ffbd2e 1.8px, transparent 2.2px), radial-gradient(circle, #28c941 1.8px, transparent 2.2px); }
}
/* ---------- What I do ---------- */
.ab-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); }
.ab-tile {
display: grid; gap: 12px; align-content: start; padding: clamp(22px, 2vw, 28px);
border-radius: 22px; background: var(--grey-1); border: 1px solid var(--line);
transition: translate 0.5s var(--ease-spring), background 0.3s;
}
.ab-tile:hover { translate: 0 -6px; }
.ab-tile__icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--pen); color: #18181a; margin-bottom: 8px; transition: rotate 0.6s var(--ease-spring); }
.ab-tile:hover .ab-tile__icon { rotate: -10deg; }
.ab-tile__icon svg { width: 27px; height: 27px; }
.ab-tile h3 { font-size: clamp(19px, 1.5vw, 22px); letter-spacing: -0.03em; }
.ab-tile p { font-size: 15px; color: var(--grey-7); line-height: 1.55; }
.ab-tags { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ab-tags li { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); }
@media (max-width: 1180px) { .ab-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } .ab-tile { grid-column: span 2; } .ab-tile:nth-child(4) { grid-column: 2 / span 2; } }
@media (max-width: 760px) { .ab-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ab-tile, .ab-tile:nth-child(4) { grid-column: auto; } .ab-tile:last-child { grid-column: 1 / -1; } }
@media (max-width: 460px) {
.ab-tiles { grid-template-columns: 1fr; gap: 10px; }
.ab-tile { grid-template-columns: 48px minmax(0, 1fr); gap: 4px 16px; padding: 18px; border-radius: 18px; }
.ab-tile__icon { grid-row: span 3; width: 48px; height: 48px; margin: 0; }
.ab-tile__icon svg { width: 23px; height: 23px; }
}
/* ---------- How I work ---------- */
.ab-how { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 6vw, 110px); align-items: start; }
.ab-how__head { position: sticky; top: 120px; margin-bottom: 0; }
.ab-ways { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ab-way { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 20px; align-items: start; padding: clamp(22px, 2.6vw, 34px) 0; border-bottom: 1px solid var(--line); }
.ab-way__icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--grey-3); transition: background 0.4s, border-color 0.4s, color 0.4s; }
.ab-way:hover .ab-way__icon { background: var(--hl-yellow); border-color: transparent; color: #18181a; }
.ab-way__icon svg { width: 24px; height: 24px; }
.ab-way h3 { font-size: clamp(21px, 1.9vw, 27px); letter-spacing: -0.035em; margin-bottom: 6px; padding-top: 10px; }
.ab-way p { color: var(--grey-7); font-size: 16px; max-width: 48ch; }
@media (max-width: 900px) { .ab-how { grid-template-columns: 1fr; } .ab-how__head { position: static; } }
@media (max-width: 560px) { .ab-way { grid-template-columns: 44px minmax(0, 1fr); gap: 16px; } .ab-way__icon { width: 44px; height: 44px; } .ab-way h3 { padding-top: 6px; } }
/* ---------- Brands (a calm text list, no logos) ---------- */
.ab-brands { border-top: 1px solid var(--line); }
.ab-brands__row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 12px clamp(20px, 4vw, 60px); padding: clamp(22px, 3vw, 36px) 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.ab-brands__label { font-size: 14px; font-weight: 600; color: var(--grey-5); }
.ab-brands__names { font-size: clamp(20px, 2.1vw, 30px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.35; }
.ab-brands__names a {
text-decoration: none; padding: 0 0.1em; margin: 0 -0.1em; border-radius: 0.2em 0.35em 0.25em 0.4em;
background: linear-gradient(100deg, transparent 0.4%, var(--hl-yellow) 1.2%, var(--hl-yellow) 96%, transparent 99%) 0 62% / 0% 70% no-repeat;
box-decoration-break: clone; -webkit-box-decoration-break: clone;
transition: background-size 0.5s var(--ease-out), color 0.3s;
}
.ab-brands__names a:hover, .ab-brands__names a:focus-visible { background-size: 100% 70%; color: var(--hl-text); }
.ab-sep { font-style: normal; font-weight: 400; color: var(--grey-3); margin: 0 0.1em 0 0.4em; }
@media (max-width: 700px) { .ab-brands__row { grid-template-columns: 1fr; } }
/* ---------- Home: the short About block (index.html #about) ---------- */
.ha__head { max-width: 980px; }
.ha { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 6vw, 110px); align-items: start; }
.ha__intro { display: grid; gap: clamp(24px, 3vw, 36px); align-content: start; }
.ha__story { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.6; letter-spacing: -0.01em; color: var(--grey-7); max-width: 42ch; }
.ha-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.ha-fact { display: grid; gap: 8px; align-content: start; padding-top: 22px; border-top: 1px solid var(--line); }
.ha-fact__icon { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: var(--pen); color: #18181a; margin-bottom: 6px; transition: rotate 0.6s var(--ease-spring); }
.ha-fact:hover .ha-fact__icon { rotate: -10deg; }
.ha-fact__icon svg { width: 24px; height: 24px; }
.ha-fact b { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.ha-fact > span:last-child { font-size: 14.5px; color: var(--grey-7); line-height: 1.5; }
.ha__more { justify-self: start; display: inline-flex; align-items: baseline; gap: 10px; font-size: clamp(20px, 1.8vw, 25px); font-weight: 600; letter-spacing: -0.03em; text-decoration: none; color: inherit; }
.ha__more i {
font-style: normal; padding: 0 0.12em; margin: 0 -0.12em; border-radius: 0.2em 0.35em 0.25em 0.4em;
background: linear-gradient(100deg, transparent 0.4%, var(--hl-blue) 1.2%, var(--hl-blue) 96%, transparent 99%) 0 60% / 0% 72% no-repeat;
transition: background-size 0.6s var(--ease-out), color 0.3s;
}
.ha__more em { font-style: normal; transition: translate 0.35s var(--ease-spring); }
.ha__more:hover i, .ha__more:focus-visible i { background-size: 100% 72%; color: var(--hl-text); }
.ha__more:hover em { translate: 6px 0; }
@media (max-width: 900px) {
.ha { display: flex; flex-direction: column; gap: 32px; }
.ha__intro { display: contents; }
.ha__more { order: 3; }
}
@media (max-width: 640px) {
.ha-facts { grid-template-columns: 1fr; gap: 0; }
.ha-fact { grid-template-columns: 44px minmax(0, 1fr); gap: 2px 16px; padding: 16px 0; }
.ha-fact__icon { grid-row: span 2; width: 44px; height: 44px; margin: 0; }
.ha-fact__icon svg { width: 21px; height: 21px; }
}
@media (prefers-reduced-motion: reduce) {
.ab-status i::after { animation: none; }
.is-drawable > * { stroke-dashoffset: 0; }
}
/* Dark mode: a hairline so the dark PATCH tile doesn't melt into the page */
/* ---------- Story as a central timeline: line down the middle, chapters alternate sides ---------- */
@media (min-width: 801px) {
.ab-story { gap: clamp(8px, 2vw, 24px); }
.ab-story__line { left: 50%; translate: -1px 0; }
.ab-ch { grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); gap: 0 clamp(28px, 4vw, 64px); }
.ab-ch__node { grid-column: 2; grid-row: 1; }
.ab-ch .ab-ch__copy, .ab-ch--short .ab-ch__copy { grid-row: 1; grid-column: 1; justify-items: end; text-align: right; }
.ab-ch .ab-ch__copy p { margin-left: auto; }
.ab-ch:nth-child(even of .ab-ch) .ab-ch__copy { grid-column: 3; justify-items: start; text-align: left; }
.ab-ch:nth-child(even of .ab-ch) .ab-ch__copy p { margin-left: 0; }
}
/* ===== type.css ===== */
/* One type scale for the whole site. Loaded last on every page, so these sizes win.
Phones get the low end, desktops the high end, scaling smoothly in between.
Designed pieces keep their own sizes: the home hero, the work-card project names,
type specimens, mock app/site screens, price figures and pull quotes. */
:root {
--t-h1: clamp(50px, 7.2vw, 104px);
--t-h2: clamp(32px, 4.2vw, 60px);
--t-h3: clamp(20px, 1.8vw, 26px);
--t-body: clamp(16px, 1.25vw, 18px);
}
/* H1: every page title (not the home hero, which is sized to fill its screen) */
:root main h1:not(.bt-title) { font-size: var(--t-h1); line-height: 0.98; }
/* H2: section headings */
:root :is(.chapter-head, .contact__intro, .cp-head, .home-prices__head, .lp-cta, .lp-sec, .pr-feature__text,
.section-head, .sv-head, .svc__body, .wf-deep__copy, .wf-deephead, .wf-feat__copy, .wf-get__copy,
.wk-print__text, .pf-hero__copy, main > section > .wrap, .sv-sec) > h2,
:root main h2.pf-hero__title { font-size: var(--t-h2); line-height: 1.04; }
/* H3: card and block titles */
:root :is(.ab-tile, .ab-way, .ab-ch__copy, .hp-card__top, .lp-svc, .lp-steps li, .pm-svc, .service__text,
.step2__card, .who-card__body, .bb-more, .bb-sub, .bb-logos-head, .sc-roll__head, .legal__body) h3,
:root .legal__body h2 { font-size: var(--t-h3); line-height: 1.2; }
/* Body: intros and running text, all one size */
:root :is(.cs-hero__lede, .lp-hero__lede, .sv-hero__lede, .wk-hero__lede, .ab-hero__lede, .pf-hero__lede,
.bt-who, .ha__story, .legal__lede, .lp-sec__lede, .svc__lede, .wf-sub, .bb-guide__lead, .cs-brief__text,
.lp-more, .sv-who-more, .legal__note),
:root :is(.chapter-head, .contact__intro, .cp-head, .feature__copy, .home-prices__head, .job__about, .lp-cta,
.lp-faq__q, .lp-svc, .lp-sec, .lp-steps li, .pm-svc, .pr-feature__text, .service__text, .step2__card, .sv-head,
.sv-q, .who-card__body, .wk-print__text, .ab-ch__copy, .ab-tile, .ab-way, .wf-get__copy, .legal__body,
.bb-status__copy, .bb-pick__body, .svc__more > div, .qa__inner, .be-faq__list) > p:not([class]) { font-size: var(--t-body); line-height: 1.65; }
:root .qa__inner p, :root .lp-faq__q p, :root .sv-q p { font-size: var(--t-body); }
/* stragglers with stronger page rules */
html:root .wf-tl .wf-sub, html:root .wf-sub, html:root .lp-sec > div > p:not([class]) { font-size: var(--t-body); line-height: 1.65; }
html:root .wf-tl .wf-cook .wf-feat__copy > h2, html:root .wf-feat__copy > h2 { font-size: var(--t-h2); }
/* desktop case-study heroes: the title sits in a narrow column, so it runs smaller to stay within about four lines */
@media (min-width: 901px) { html:root main .cs-hero h1 { font-size: clamp(50px, 5.2vw, 78px); } }