/* Made by scripts/speed/bundle-home-css.mjs from fonts.css, base.css, case.css, case-plus.css, whats-in-my-fridge.css, home-extra.css, type.css, jb-credit.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; }
/* ===== 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", 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);
backdrop-filter: blur(8px);
opacity: 0; visibility: hidden;
transition: opacity 0.35s var(--ease-out), visibility 0.35s;
cursor: zoom-out;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.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 / Areas, then the small print ---------- */
.site-foot__grid {
display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 36px clamp(24px, 4vw, 56px);
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: 860px) { .site-foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sf-brand { grid-column: 1 / -1; } }
@media (max-width: 380px) { .site-foot__grid { grid-template-columns: 1fr; } }
/* footer: WhatsApp as a proper button */
.sf-col a.sf-wa { 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; }
@media (max-width: 860px) { .site-foot__grid nav[aria-label="Areas"] { grid-column: 1 / -1; } }
/* ===== 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: 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 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%);
}
/* ===== case-plus.css ===== */
/* Case study extras, shared by every project page (loads after case.css):
- .cp-film the real site in use: a desktop recording in a browser, set at an
angle in a tinted panel, with numbered steps that follow the film
- .cp-zooms close-up recordings of one part of the site, each with a title
- .cp-results what changed, as three big numbers
- .cp-quote what the client said
- .cp-more every other project, the next one first, and print work
- .contact-band the contact form (same as the home page)
Placeholders John still has to fill in carry data-todo, which shows them
striped so they can't go live unnoticed. */
.cp-head { display: grid; gap: 14px; max-width: 720px; margin-bottom: clamp(26px, 4vw, 44px); }
.cp-head h2 { font-size: clamp(32px, 4.4vw, 58px); letter-spacing: -0.05em; line-height: 1; }
.cp-head p { color: var(--grey-7); font-size: 17px; max-width: 54ch; }
[data-todo] { background: repeating-linear-gradient(-45deg, rgb(255 210 63 / 0.35) 0 8px, transparent 8px 16px); border-radius: 6px; }
/* ---------- Film: the site in use ---------- */
.cp-film__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 2vw, 24px); }
.cp-film__stage {
position: relative; border-radius: var(--radius-l); overflow: hidden; isolation: isolate;
padding: clamp(18px, 4.4vw, 70px) clamp(12px, 9vw, 150px);
background: radial-gradient(120% 90% at 20% 0%, color-mix(in srgb, var(--tint, #eee) 60%, #fff), var(--tint, #eee));
perspective: 1800px;
}
.cp-film__stage::before { /* soft highlighter swash behind the browser */
content: ""; position: absolute; z-index: -1; left: 8%; right: 8%; top: 46%; height: 34%;
background: var(--swash, rgb(255 255 255 / 0.55)); border-radius: 999px; rotate: -4deg; filter: blur(2px);
}
.cp-browser {
position: relative; border-radius: 14px; overflow: hidden; background: #fff;
box-shadow: 0 2px 4px rgb(20 20 30 / 0.06), 0 30px 60px -24px rgb(20 20 30 / 0.45), 0 70px 120px -60px rgb(20 20 30 / 0.4);
transform-origin: 50% 60%;
}
.cp-browser__bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: #f3f3f5; border-bottom: 1px solid #e6e6ea; }
.cp-browser__bar i { width: 10px; height: 10px; border-radius: 50%; background: #d9d9de; }
.cp-browser__bar i:nth-child(1) { background: #ff6159; } .cp-browser__bar i:nth-child(2) { background: #ffbd2e; } .cp-browser__bar i:nth-child(3) { background: #28c941; }
.cp-browser__bar span { margin: 0 auto; padding: 4px 14px; min-width: 40%; text-align: center; border-radius: 7px; background: #fff; color: #6b6b72; font-size: 11.5px; font-weight: 500; }
.cp-browser video { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; background: #fff; }
/* Mobile responsive step: the window narrows into a phone (case-plus.js) */
@property --ring { syntax: ""; inherits: false; initial-value: 0px; }
.cp-browser { margin-inline: auto; box-shadow: 0 0 0 var(--ring) #121214, 0 2px 4px rgb(20 20 30 / 0.06), 0 30px 60px -24px rgb(20 20 30 / 0.45), 0 70px 120px -60px rgb(20 20 30 / 0.4); }
.cp-browser video { height: 100%; }
.cp-browser__mobile { position: absolute; inset: 0; opacity: 0; overflow: hidden; background: #fff; }
.cp-browser__mobile img { display: block; width: 100%; height: auto; }
.cp-browser__island { position: absolute; z-index: 2; top: 3.2%; left: 50%; width: 30%; height: 3.4%; translate: -50% 0; border-radius: 999px; background: #121214; opacity: 0; scale: 0.6; }
.cp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; counter-reset: s; }
.cp-steps li { position: relative; }
.cp-steps button {
appearance: none; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%;
display: grid; grid-template-columns: 34px 1fr; gap: 4px 12px; padding: 14px 12px; border-radius: 16px;
transition: background 0.3s;
}
.cp-steps b { grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 12px; background: var(--grey-1); border: 1px solid var(--line); transition: background 0.3s, color 0.3s, border-color 0.3s; }
.cp-steps strong { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.cp-steps span { font-size: 14px; color: var(--grey-7); line-height: 1.5; }
.cp-steps i { position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; opacity: 0; transition: opacity 0.3s; }
.cp-steps i::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.cp-steps li.is-on button { background: var(--grey-1); }
.cp-steps li.is-on b { background: var(--pen, var(--hl-yellow)); border-color: transparent; color: #18181a; }
.cp-steps li.is-on i { opacity: 1; }
@media (max-width: 900px) {
.cp-film__grid { grid-template-columns: 1fr; }
.cp-film__stage { padding: 18px 14px; }
.cp-steps { grid-template-columns: 1fr; }
.cp-steps button { padding: 10px 8px; }
}
/* ---------- Zooms: close-ups of one part ---------- */
.cp-zooms { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.cp-zoom { margin: 0; display: grid; gap: 14px; align-content: start; }
.cp-zoom__stage {
position: relative; border-radius: var(--radius-l); overflow: hidden; aspect-ratio: 5 / 4; display: grid; place-items: center;
background: radial-gradient(110% 90% at 80% 0%, color-mix(in srgb, var(--tint, #eee) 55%, #fff), var(--tint, #eee));
}
.cp-zoom__stage video {
width: 84%; border-radius: 14px; background: #fff; display: block;
box-shadow: 0 2px 4px rgb(20 20 30 / 0.06), 0 26px 50px -22px rgb(20 20 30 / 0.45);
transition: transform 0.8s var(--ease-out);
}
.cp-zoom:hover .cp-zoom__stage video { transform: scale(1.03); }
.cp-zoom figcaption { display: grid; gap: 4px; padding-inline: 4px; }
.cp-zoom figcaption b { font-size: 18px; letter-spacing: -0.02em; font-weight: 600; }
.cp-zoom figcaption span { font-size: 15px; color: var(--grey-7); line-height: 1.55; max-width: 46ch; }
@media (max-width: 800px) { .cp-zooms { grid-template-columns: 1fr; } }
/* ---------- Results ---------- */
.cp-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cp-result { padding: clamp(22px, 3vw, 40px) clamp(10px, 2vw, 28px); display: grid; gap: 10px; align-content: start; }
.cp-result + .cp-result { border-left: 1px solid var(--line); }
.cp-result b { font-size: clamp(48px, 6.4vw, 92px); font-weight: 700; letter-spacing: -0.06em; line-height: 0.9; justify-self: start; }
.cp-result b .hl { padding-inline: 0.06em; }
.cp-result span { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.cp-result small { font-size: 13.5px; color: var(--grey-5); line-height: 1.5; }
@media (max-width: 800px) { .cp-results { grid-template-columns: 1fr; } .cp-result + .cp-result { border-left: 0; border-top: 1px solid var(--line); } }
/* ---------- Quote ---------- */
.cp-quote {
position: relative; display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 3vw, 40px); align-items: start;
padding: clamp(28px, 5vw, 72px); border-radius: var(--radius-l); background: var(--brand, #18181a); color: var(--brand-ink, #fff); overflow: hidden;
}
.cp-quote__mark { font-size: clamp(90px, 12vw, 180px); line-height: 0.7; font-weight: 700; color: var(--pen, var(--hl-yellow)); }
.cp-quote blockquote { margin: 0; font-size: clamp(22px, 2.6vw, 38px); line-height: 1.25; letter-spacing: -0.03em; font-weight: 500; max-width: 30ch; }
.cp-quote figcaption { margin-top: 22px; display: flex; align-items: center; gap: 12px; font-size: 15px; }
.cp-quote figcaption i { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; background: var(--pen, var(--hl-yellow)); color: #18181a; }
.cp-quote figcaption small { display: block; opacity: 0.7; font-size: 13px; }
@media (max-width: 700px) { .cp-quote { grid-template-columns: 1fr; } .cp-quote__mark { line-height: 0.5; } }
/* ---------- More work ---------- */
.cp-more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.cp-card { position: relative; display: grid; gap: 12px; align-content: start; text-decoration: none; color: inherit; }
.cp-card__art {
position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-m); overflow: hidden; isolation: isolate; background: var(--brand);
transition: transform 0.6s var(--ease-spring);
}
.cp-card__glow { position: absolute; inset: -20% -10% 30% 10%; z-index: -1; border-radius: 50%; background: radial-gradient(40% 45% at 55% 35%, rgb(255 255 255 / 0.4), transparent 70%); filter: blur(18px); }
/* laptop + phone: sized off the card, both with a soft contact shadow */
.cp-card__laptop { position: absolute; left: 7%; top: 17%; width: 74%; transition: translate 0.8s var(--ease-out), rotate 0.8s var(--ease-out); }
.cp-card__laptop .laptop__lid { border-radius: 8px 8px 3px 3px; padding: 2.4% 2.4% 3.2%; }
.cp-card__laptop .laptop__base { height: 7px; border-radius: 0 0 8px 8px; position: relative; }
.cp-card__laptop .laptop__base::before { height: 3px; }
.cp-card__laptop .laptop__base::after { content: ""; position: absolute; left: 4%; right: 4%; top: 60%; height: 300%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgb(0 0 0 / 0.4), transparent); filter: blur(4px); }
.cp-card__laptop .screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cp-card__phone.phone { position: absolute; right: 6%; bottom: 9%; width: 20%; transition: translate 0.8s var(--ease-out), rotate 0.8s var(--ease-out); box-shadow: 0 16px 24px -12px rgb(0 0 0 / 0.55); }
.cp-card__phone .screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cp-card:hover .cp-card__art { transform: translateY(-4px); }
.cp-card:hover .cp-card__laptop { translate: -4px -6px; rotate: -1.2deg; }
.cp-card:hover .cp-card__phone { translate: 6px -10px; rotate: 3deg; }
.cp-card__name { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-inline: 2px; }
.cp-card__name b { font-size: 18px; letter-spacing: -0.02em; font-weight: 600; }
.cp-card__name span { font-size: 13px; color: var(--grey-5); text-align: right; }
/* the next project: twice the size, with a label */
.cp-card--next { grid-column: span 2; grid-row: span 2; grid-template-rows: minmax(0, 1fr) auto; }
.cp-card--next .cp-card__art { aspect-ratio: auto; min-height: 320px; }
.cp-card--next .cp-card__laptop { left: 6%; top: 18%; width: 70%; }
.cp-card--next .cp-card__phone.phone { width: 19%; right: 7%; bottom: 10%; }
.cp-card__label { position: absolute; left: 22px; top: 18px; z-index: 2; padding: 6px 12px; border-radius: 999px; background: var(--white); color: var(--ink); font-size: 13px; font-weight: 600; }
.cp-card--next .cp-card__name b { font-size: clamp(26px, 3vw, 40px); letter-spacing: -0.04em; }
/* print work, as a yellow highlighter tile */
/* print work: real pieces laid on a yellow highlighter board */
.cp-card--print .cp-card__art { background: radial-gradient(90% 80% at 30% 20%, #fff7b0, var(--hl-yellow) 60%, #f3d93a); }
.cp-card--print .cp-card__art img {
position: absolute; top: 50%; left: 50%; height: auto; border-radius: 2px;
box-shadow: 0 1px 1px rgb(40 30 0 / 0.15), 0 14px 22px -10px rgb(40 30 0 / 0.45), 0 30px 40px -24px rgb(40 30 0 / 0.4);
transition: transform 0.8s var(--ease-spring);
}
.cp-card--print .cp-card__art img:nth-of-type(1) { width: 34% !important; transform: translate(-108%, -52%) rotate(-8deg); }
.cp-card--print .cp-card__art img:nth-of-type(2) { width: 34% !important; transform: translate(-50%, -46%) rotate(2deg); z-index: 2; }
.cp-card--print .cp-card__art img:nth-of-type(3) { width: 30% !important; transform: translate(8%, -50%) rotate(9deg); }
.cp-card--print:hover .cp-card__art img:nth-of-type(1) { transform: translate(-118%, -56%) rotate(-12deg); }
.cp-card--print:hover .cp-card__art img:nth-of-type(2) { transform: translate(-50%, -54%) rotate(0deg); }
.cp-card--print:hover .cp-card__art img:nth-of-type(3) { transform: translate(18%, -54%) rotate(13deg); }
@media (max-width: 900px) { .cp-more { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cp-card--next { grid-column: 1 / -1; grid-row: auto; } .cp-card--next .cp-card__art { min-height: 0; aspect-ratio: 16 / 10; } }
@media (max-width: 520px) { .cp-more { grid-template-columns: 1fr; } }
/* ---------- Contact band (same look as the home page) ---------- */
.contact-band { background: var(--hl-yellow); color: #18181a; padding-block: clamp(72px, 10vw, 140px); margin-top: clamp(60px, 8vw, 120px); }
.contact { position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); 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; }
body[data-pen] .contact .hl, .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; color: #18181a; 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; }
.confetti { position: fixed; z-index: 90; width: 8px; height: 14px; border-radius: 3px; pointer-events: none; }
.contact-band + .site-foot { margin-top: 0; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } .field-row { grid-template-columns: 1fr; } }
/* Steps run sideways under the film and follow it: the current one slides to the front */
.cp-steps { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px 2px 6px; scroll-padding-inline: 2px; }
.cp-steps::-webkit-scrollbar { display: none; }
.cp-steps li { flex: 0 0 clamp(220px, 22vw, 280px); scroll-snap-align: start; }
.cp-steps button { height: 100%; align-content: start; border: 1px solid var(--line); background: var(--white); transition: background 0.3s, border-color 0.3s, opacity 0.3s; opacity: 0.62; }
.cp-steps li.is-on button { opacity: 1; border-color: transparent; background: var(--grey-1); }
.cp-steps i { left: 14px; right: 14px; bottom: 8px; }
@media (max-width: 900px) {
.cp-film .wrap, .cp-film__stage { border-radius: var(--radius-m); }
.cp-film__stage { margin-inline: calc(-1 * var(--gutter) + 6px); padding: 14px 8px; }
.cp-browser__bar { height: 24px; padding: 0 9px; gap: 5px; }
.cp-browser__bar i { width: 7px; height: 7px; }
.cp-browser__bar span { font-size: 9.5px; padding: 2px 10px; }
.cp-steps li { flex-basis: 78%; }
}
/* Live film (data-live): the real site in an iframe, rendered at 1440x900 CSS and scaled
to the window, so it stays sharp at any size (case-plus.js, assets/live/driver.js) */
.cp-live { position: relative; aspect-ratio: var(--vw) / var(--vh); overflow: hidden; container-type: inline-size; background: #fff center top / cover no-repeat; }
.cp-live__frame {
position: absolute; left: 0; top: 0; border: 0; pointer-events: none; background: #fff;
width: calc(var(--vw) * 1px); height: calc(var(--vh) * 1px);
transform-origin: 0 0; scale: calc(100cqw / (var(--vw) * 1px));
transition: opacity 0.6s ease;
}
.cp-live__frame.is-in { opacity: 0; }
.cp-live__m { position: absolute; top: 0; border: 0; pointer-events: none; background: #fff; transform-origin: 0 0; }
/* Live parade (a parade .phone with data-live): the site runs in the phone's screen at 390px
CSS, scaled by --k (set by case-plus.js), crossfading between pages */
.lv-screen { position: absolute; inset: 0; overflow: hidden; background: #fff center top / cover no-repeat; }
.lv-screen__frame {
position: absolute; left: 0; top: 0; border: 0; pointer-events: none; background: #fff;
width: calc(var(--vw) * 1px); height: calc(var(--vh, 824) * 1px);
transform-origin: 0 0; scale: var(--k, 0.5);
transition: opacity 0.6s ease;
}
.lv-screen__frame.is-in { opacity: 0; }
/* Scroll-driven film (case-plus.js scrollFilm, 1024px and wider): the grid pins, the step
cards slide sideways with the scroll instead of scrolling as a row */
[data-cp-film].is-scrolly .cp-film__grid { overflow-x: clip; }
[data-cp-film].is-scrolly .cp-film__stage { padding-block: clamp(16px, 3.4vh, 44px); }
[data-cp-film].is-scrolly .cp-steps { position: relative; overflow: visible; scroll-snap-type: none; will-change: transform; }
/* Steps as a caption: only the current step shows, as a pill floating over the bottom of the film,
sliding in fresh each time the step changes, with a thin bar filling as it plays. No row of cards. */
[data-cp-film] .cp-film__grid { position: relative; }
[data-cp-film] .cp-steps, [data-cp-film].is-scrolly .cp-steps {
position: absolute; left: 50%; bottom: clamp(18px, 3.2vw, 44px); z-index: 6; display: block; width: max-content; max-width: calc(100% - 32px);
margin: 0; padding: 0; overflow: visible; translate: -50% 0 !important; transform: none !important; scroll-snap-type: none; pointer-events: none;
}
[data-cp-film] .cp-steps li { display: none; position: relative; min-width: 0; }
[data-cp-film] .cp-steps li.is-on { display: block; animation: cp-cap-in 0.55s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes cp-cap-in { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: none; } }
[data-cp-film] .cp-steps button {
display: flex; align-items: center; gap: 12px; height: auto; padding: 9px 20px 11px 9px; border: 0; border-radius: 999px; opacity: 1; pointer-events: auto;
background: var(--white) !important; box-shadow: 0 14px 34px -14px rgb(24 24 40 / 0.45), 0 0 0 1px var(--line); overflow: hidden;
}
[data-cp-film] .cp-steps b { display: grid; flex: none; width: 30px; height: 30px; border: 0; background: var(--pen, var(--hl-yellow)) !important; color: #18181a; font-size: 12px; }
[data-cp-film] .cp-steps span { display: none; }
[data-cp-film] .cp-steps strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; font-weight: 600; color: var(--ink); }
[data-cp-film] .cp-steps i { position: absolute; left: 22px; right: 22px; bottom: 4px; height: 2px; opacity: 1; border-radius: 2px; background: var(--line); }
[data-cp-film] .cp-steps i::after { background: var(--ink); }
@media (max-width: 760px) {
[data-cp-film] .cp-steps { bottom: 12px; }
[data-cp-film] .cp-steps button { padding: 6px 14px 8px 6px; gap: 9px; }
[data-cp-film] .cp-steps b { width: 24px; height: 24px; font-size: 11px; }
[data-cp-film] .cp-steps strong { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { [data-cp-film] .cp-steps li.is-on { animation: none; } }
/* the caption sits on the bottom edge of the film panel, clear of the site, always fully opaque */
[data-cp-film] .cp-steps, [data-cp-film].is-scrolly .cp-steps { bottom: -24px; z-index: 20; }
[data-cp-film] .cp-film__grid { padding-bottom: 30px; }
[data-cp-film] .cp-steps li.is-on button { opacity: 1 !important; }
@media (max-width: 760px) { [data-cp-film] .cp-steps, [data-cp-film].is-scrolly .cp-steps { bottom: -18px; } }
/* arrows either side of the caption pill: the film plays by itself, these step through it */
@media all {
[data-cp-film] .cp-film__nav {
position: absolute; bottom: -24px; z-index: 21; display: grid; place-items: center; width: 40px; height: 40px; 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 var(--line); -webkit-tap-highlight-color: transparent; transition: scale 0.2s var(--ease-out);
}
[data-cp-film] .cp-film__nav[data-d="-1"] { left: 4px; }
[data-cp-film] .cp-film__nav[data-d="1"] { right: 4px; }
[data-cp-film] .cp-film__nav:active { scale: 0.9; }
[data-cp-film] .cp-film__nav svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
[data-cp-film] .cp-steps { max-width: calc(100% - 104px); }
}
@media (max-width: 760px) { [data-cp-film] .cp-film__nav { bottom: -20px; } }
/* What's in my Fridge: three phones fanned like its home page card, big and running off the bottom */
.cp-card--app .cp-card__art { overflow: hidden; }
.cp-card--app .cp-card__phone.phone { right: auto; bottom: auto; }
.cp-card--app .cp-card__phone.phone:nth-of-type(1) { left: 5%; top: 16%; width: 31%; rotate: -9deg; }
.cp-card--app .cp-card__phone.phone:nth-of-type(2) { left: 64%; top: 16%; width: 31%; rotate: 9deg; }
.cp-card--app .cp-card__phone.phone:nth-of-type(3) { left: 31%; top: 6%; width: 38%; z-index: 2; }
.cp-card--app:hover .cp-card__phone.phone:nth-of-type(1) { translate: -6px -4px; rotate: -12deg; }
.cp-card--app:hover .cp-card__phone.phone:nth-of-type(2) { translate: 6px -4px; rotate: 12deg; }
.cp-card--app:hover .cp-card__phone.phone:nth-of-type(3) { translate: 0 -8px; rotate: 0deg; }
/* contact band: call, text and WhatsApp pills under the email */
.contact__reach { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.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: #18181a; text-decoration: none; font-weight: 600; font-size: 14.5px; }
.contact__pill:hover { background: #fff; }
@media (max-width: 560px) { .contact__reach { display: grid; grid-template-columns: 1fr 1fr; } .contact__reach .contact__pill:first-child { grid-column: 1 / -1; } }
/* ===== whats-in-my-fridge.css ===== */
/* What's in my Fridge: John's own web app. The portfolio frame (Poppins, white,
highlighter marks) with the app's own pieces rebuilt in HTML/CSS from its source:
Fraunces + Plus Jakarta Sans, warm paper, fresh green, amber and red.
Everything from the app is prefixed fa- so it never meets the site's own classes. */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../projects/whats-in-my-fridge/fonts/fraunces-normal.woff2) format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 400 700; font-display: swap; src: url(../projects/whats-in-my-fridge/fonts/fraunces-italic.woff2) format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../projects/whats-in-my-fridge/fonts/plusjakartasans-normal.woff2) format("woff2"); }
body { --project-pen: #b9e4c9; }
/* ---------- The app's tokens (src/index.css) ---------- */
.fa, .wf {
--fa-bg: #faf7f2; --fa-surface: #fffdf9; --fa-surface-2: #f3eee4;
--fa-ink: #1f1b16; --fa-ink-soft: #6b6358; --fa-ink-faint: #7c7264;
--fa-line: #e7e0d3; --fa-line-strong: #d8cfbe;
--fa-accent: #2f7d5a; --fa-accent-press: #28694c; --fa-accent-soft: #e6efe8; --fa-on-accent: #fdfdfb; --fa-leaf: #7bb497;
--fa-warn: #bf6432; --fa-warn-soft: #f8ebe0; --fa-danger: #b1433a; --fa-danger-soft: #f6e3e0;
--fa-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
--fa-display: "Fraunces", Georgia, serif;
}
.fa { font-family: var(--fa-sans); color: var(--fa-ink); line-height: 1.5; letter-spacing: 0; -webkit-font-smoothing: antialiased; }
.fa *, .fa *::before, .fa *::after { box-sizing: border-box; }
.fa [hidden], .fa[hidden] { display: none !important; }
:where(.fa) button { border: 0; background: none; font: inherit; color: inherit; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fa svg { display: block; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fa h1, .fa h3 { letter-spacing: normal; line-height: 1.2; }
/* mock-app titles were h4; now h3 so the heading order is right: keep text-wrap as it was */
.fa-meal h3, .wf-m-head h3, .wf-mcard h3, .wf-minilist h3 { text-wrap: inherit; }
/* A full app screen inside a .phone: laid out at 390px wide like the real app and
scaled to fit (whats-in-my-fridge.js), so the text stays real and sharp */
.fa-app {
position: absolute; left: 0; top: 0; width: 390px; height: 824px; overflow: hidden;
transform-origin: 0 0; background: var(--fa-bg);
background-image: radial-gradient(120% 80% at 50% -10%, #fffdf8 0%, var(--fa-bg) 55%);
display: flex; flex-direction: column;
}
.wf .phone__display { --status-bg: #fcfaf5; }
.wf .phone .screen { background: var(--fa-bg); }
.fa-body { flex: 1; padding: 8px 18px 0; position: relative; overflow: hidden; }
/* Header: leaf + the stacked wordmark */
.fa-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px 6px; }
.fa-brand { display: inline-flex; align-items: center; gap: 8px; line-height: 1; }
.fa-leaf { width: 22px; height: 22px; color: #2c7a57; }
.fa-leaf path { fill: currentColor; stroke: none; }
.fa-bt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.fa-bt small { font: italic 500 12px/1 var(--fa-display); color: #5a8a72; margin-bottom: 1px; }
.fa-bt b { font: 600 27px/1 var(--fa-display); letter-spacing: -0.02em; color: var(--fa-accent); }
.fa-head__r { display: flex; align-items: center; gap: 8px; }
.fa-round { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--fa-surface-2); color: var(--fa-ink-soft); border: 1px solid var(--fa-line); }
.fa-pill { font-size: 12.5px; font-weight: 600; color: var(--fa-ink-soft); background: var(--fa-surface-2); border: 1px solid var(--fa-line); padding: 6px 11px; border-radius: 999px; }
.fa-title { margin: 10px 0 2px; font: 600 30px/1.1 var(--fa-display); letter-spacing: -0.02em; }
.fa-sub { margin: 0 0 16px; font-size: 14px; color: var(--fa-ink-soft); }
/* Bottom nav */
.fa-nav {
position: absolute; left: 0; right: 0; bottom: 0; height: 74px; padding-bottom: 6px; z-index: 6;
display: grid; grid-template-columns: repeat(5, 1fr);
background: rgb(255 253 249 / 0.94); border-top: 1px solid var(--fa-line);
}
.fa-nav span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 12px; font-weight: 600; color: var(--fa-ink-faint); }
.fa-nav span.on { color: var(--fa-accent); }
.fa-nav i { display: inline-flex; position: relative; }
.fa-nav i.pulse { animation: fa-nav-pulse 0.42s ease-in-out 3; color: var(--fa-accent); }
@keyframes fa-nav-pulse { 50% { transform: scale(1.25); } }
/* Segmented toggle + chips */
.fa-seg { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--fa-surface-2); margin-bottom: 14px; }
.fa-seg span { flex: 1; text-align: center; padding: 8px 6px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--fa-ink-soft); }
.fa-seg span.on { background: var(--fa-surface); color: var(--fa-ink); box-shadow: 0 1px 3px rgb(0 0 0 / 0.08); }
.fa-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.fa-chip { border: 1px solid var(--fa-line-strong); background: var(--fa-surface); color: var(--fa-ink-soft); font-size: 13px; font-weight: 600; padding: 7px 13px; border-radius: 999px; white-space: nowrap; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.fa-chip.on { background: var(--fa-accent); color: var(--fa-on-accent); border-color: var(--fa-accent); }
.fa-chip em { font-style: normal; opacity: 0.65; margin-left: 3px; font-weight: 700; }
/* Buttons */
.fa-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 15px; border-radius: 14px; padding: 13px 18px; }
.fa-btn--primary { background: var(--fa-accent); color: var(--fa-on-accent); }
.fa-btn--ghost { background: var(--fa-surface); border: 1px solid var(--fa-line-strong); }
.fa-btn--block { width: 100%; }
.fa-btn.is-press { transform: scale(0.96); background: var(--fa-accent-press); }
/* Item row */
.fa-list { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; }
.fa-item {
display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; align-items: center;
padding: 13px 14px; border-radius: 14px; border: 1px solid var(--fa-line); background: var(--fa-surface);
transition: border-color 0.2s, background 0.3s, opacity 0.3s;
}
.fa-item.soon { border-color: #ecc7ab; background: linear-gradient(180deg, var(--fa-warn-soft), var(--fa-surface) 70%); }
.fa-item.expired { border-color: #e6b8b2; background: linear-gradient(180deg, var(--fa-danger-soft), var(--fa-surface) 70%); }
.fa-item__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fa-item__name { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fa-item__name small { font-size: inherit; color: var(--fa-ink-soft); font-weight: 500; }
.fa-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--fa-ink-soft); }
.fa-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--fa-line-strong); }
.fa-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 7px; background: var(--fa-surface-2); color: var(--fa-ink-soft); }
.fa-tag.dairy { background: #eef2fa; color: #46618c; }
.fa-tag.produce { background: #eaf3e8; color: #4a7a43; }
.fa-tag.meat { background: #f7ebe9; color: #9c5249; }
.fa-tag.bakery { background: #f4ecdd; color: #8a6a32; }
.fa-tag.drinks { background: #e7f1f3; color: #3f7480; }
.fa-exp { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fa-exp.soon { color: var(--fa-warn); }
.fa-exp.expired { color: var(--fa-danger); }
.fa-new { background: var(--fa-accent); color: var(--fa-on-accent); font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; padding: 2px 7px; border-radius: 999px; text-transform: uppercase; }
.fa-acts { display: flex; align-items: center; gap: 8px; margin-right: -4px; }
.fa-ibtn { width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--fa-line); background: var(--fa-surface); color: #4a86b8; display: grid; place-items: center; transition: background 0.2s, color 0.2s, transform 0.12s; }
.fa-used { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 11px; border-radius: 12px; border: 1px solid var(--fa-line); background: var(--fa-surface); color: var(--fa-ink-soft); font-weight: 600; font-size: 12px; line-height: 1; transition: background 0.22s, color 0.22s, border-color 0.22s, transform 0.12s; }
.fa-used svg { color: var(--fa-ink-faint); }
.fa-used .fa-tick, .fa-ibtn .fa-tick { display: none; }
.fa-used.on, .fa-ibtn.on { background: var(--fa-accent); color: var(--fa-on-accent); border-color: var(--fa-accent); }
.fa-used.on svg { color: var(--fa-on-accent); }
.fa-used.on .fa-ring, .fa-ibtn.on .fa-snow { display: none; }
.fa-used.on .fa-tick, .fa-ibtn.on .fa-tick { display: block; animation: fa-tick 0.24s ease; }
@keyframes fa-tick { 0% { transform: scale(0.5); } 60% { transform: scale(1.18); } }
.fa-used:active, .fa-ibtn:active { transform: scale(0.95); }
/* Banners */
.fa-banner { display: flex; gap: 10px; align-items: flex-start; background: var(--fa-warn-soft); border: 1px solid #ecc7ab; color: #7c4a23; border-radius: 14px; padding: 12px 14px; font-size: 13px; line-height: 1.45; }
.fa-staples { background: var(--fa-accent-soft); border: 1px solid #cfe5d6; border-radius: 14px; padding: 13px 14px 6px; }
.fa-staples__head { display: flex; gap: 9px; align-items: flex-start; color: var(--fa-accent-press); }
.fa-staples__head strong { display: block; font-size: 14px; font-weight: 700; }
.fa-staples__head p { margin: 1px 0 0; font-size: 12.5px; color: var(--fa-ink-soft); }
.fa-staple { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #d6e7dc; margin-top: 8px; }
.fa-staple + .fa-staple { margin-top: 0; }
.fa-staple__i { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fa-staple__i b { font-weight: 600; font-size: 14.5px; letter-spacing: -0.01em; }
.fa-staple__i small { font-size: 11.5px; color: var(--fa-ink-soft); }
.fa-staple-add { display: inline-flex; align-items: center; gap: 5px; background: var(--fa-accent); color: var(--fa-on-accent); border-radius: 999px; padding: 7px 12px; font-size: 13px; font-weight: 600; transition: transform 0.12s, background 0.2s; }
.fa-staple-add.done { background: var(--fa-surface); color: var(--fa-accent-press); box-shadow: inset 0 0 0 1px #cfe5d6; }
.fa-x { width: 30px; height: 30px; display: grid; place-items: center; color: var(--fa-ink-faint); }
/* Category header */
.fa-cat { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 14px; font: 500 17px/1.2 var(--fa-display); }
.fa-cat b { margin-left: auto; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; display: grid; place-items: center; background: rgb(255 255 255 / 0.75); font: 700 12px/1 var(--fa-sans); }
.fa-cat.new { background: var(--fa-accent); color: var(--fa-on-accent); }
.fa-cat.new b { background: rgb(255 255 255 / 0.22); }
.fa-cat.dairy { background: #eef2fa; color: #46618c; }
.fa-cat.produce { background: #eaf3e8; color: #4a7a43; }
.fa-cat.meat { background: #f7ebe9; color: #9c5249; }
.fa-cat.freezer { background: #e8f1f8; color: #2f6c9e; }
.fa-cat.bakery { background: #f4ecdd; color: #8a6a32; }
.fa-cat.drinks { background: #e7f1f3; color: #3f7480; }
/* Toast */
.fa-toast { position: absolute; left: 50%; bottom: 92px; z-index: 8; translate: -50% 0; display: flex; align-items: center; gap: 8px; white-space: nowrap; background: var(--fa-ink); color: #fff; padding: 11px 17px; border-radius: 999px; font-size: 14px; font-weight: 600; box-shadow: 0 14px 30px -10px rgb(0 0 0 / 0.4); }
.fa-toast svg { color: var(--fa-accent-soft); }
/* Scan */
.fa-drop { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 26px 18px; border: 1.5px dashed var(--fa-line-strong); border-radius: 20px; background: var(--fa-surface); }
.fa-art { width: 64px; height: 64px; border-radius: 18px; background: var(--fa-accent-soft); color: var(--fa-accent); display: grid; place-items: center; }
.fa-drop h3 { margin: 0; font: 600 19px/1.25 var(--fa-display); }
.fa-drop p { margin: 0; color: var(--fa-ink-soft); font-size: 14px; max-width: 30ch; }
.fa-photo { position: relative; height: 330px; border-radius: 20px; overflow: hidden; background: #e9dfcf; }
.fa-photo i { position: absolute; border-radius: 50%; filter: blur(16px); opacity: 0.9; }
.fa-photo__busy { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgb(255 253 249 / 0.62); font-weight: 600; font-size: 15px; }
.fa-spin { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--fa-accent-soft); border-top-color: var(--fa-accent); animation: fa-spin 0.8s linear infinite; }
@keyframes fa-spin { to { transform: rotate(1turn); } }
.fa-sweep { position: absolute; left: 0; right: 0; height: 90px; top: -90px; background: linear-gradient(180deg, transparent, rgb(255 255 255 / 0.35) 70%, rgb(255 255 255 / 0.85) 96%, transparent); }
.fa-label { font-size: 13px; font-weight: 600; color: var(--fa-ink-soft); margin: 0 0 8px; }
.fa-hint { margin: 8px 0 0; font-size: 12.5px; color: var(--fa-ink-soft); line-height: 1.4; }
.fa-confirm { margin-top: 14px; padding: 0 12px; border: 1px solid var(--fa-line); border-radius: 18px; background: var(--fa-surface); }
.fa-crow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--fa-line); }
.fa-crow:last-child { border-bottom: 0; }
.fa-check { width: 26px; height: 26px; border-radius: 8px; background: var(--fa-accent); color: var(--fa-on-accent); display: grid; place-items: center; }
.fa-crow b { display: block; font-weight: 600; font-size: 15px; }
.fa-crow small { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--fa-ink-soft); }
.fa-qty { width: 54px; height: 40px; border-radius: 10px; border: 1px solid var(--fa-line-strong); display: grid; place-items: center; font-size: 15px; background: var(--fa-surface); }
.fa-flag { display: inline-flex; align-items: center; gap: 4px; color: var(--fa-warn); font-weight: 600; }
.fa-dock { position: absolute; left: 18px; right: 18px; bottom: 90px; z-index: 5; display: flex; gap: 10px; }
.fa-dock .fa-btn--ghost { flex: none; }
/* Chat */
.fa-chat { display: flex; flex-direction: column; gap: 10px; }
.fa-bubble { max-width: 84%; padding: 11px 14px; border-radius: 17px; font-size: 14.5px; line-height: 1.5; }
.fa-bubble.me { align-self: flex-end; background: var(--fa-accent); color: var(--fa-on-accent); border-bottom-right-radius: 5px; }
.fa-bubble.ai { align-self: flex-start; background: var(--fa-surface); border: 1px solid var(--fa-line); border-bottom-left-radius: 5px; }
.fa-typing { display: inline-flex; gap: 4px; align-items: center; padding: 4px 2px; }
.fa-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--fa-ink-faint); animation: fa-blink 1.2s infinite ease-in-out; }
.fa-typing span:nth-child(2) { animation-delay: 0.2s; }
.fa-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes fa-blink { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.fa-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -2px; background: currentColor; animation: fa-caret 0.9s steps(1) infinite; }
@keyframes fa-caret { 50% { opacity: 0; } }
.fa-nudge { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--fa-warn-soft); border: 1px solid #ecc7ab; color: var(--fa-warn); font-size: 14px; }
.fa-nudge span { flex: 1; color: var(--fa-ink); font-weight: 500; }
.fa-nudge strong { color: var(--fa-warn); }
.fa-meals-intro { margin: 2px 0 0; font-size: 13px; color: var(--fa-ink-soft); }
.fa-meal { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--fa-line); background: var(--fa-surface); }
.fa-meal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.fa-meal h3 { flex: 1; min-width: 0; margin: 0 0 3px; font: 600 15px/1.3 var(--fa-display); letter-spacing: -0.01em; }
.fa-meal__acts { display: inline-flex; gap: 7px; flex: none; }
.fa-mini { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--fa-line-strong); background: var(--fa-surface); color: var(--fa-ink-soft); transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.12s; }
.fa-mini.on { background: var(--fa-accent-soft); color: var(--fa-accent-press); border-color: #cfe5d6; }
.fa-mini .fa-tick { display: none; }
.fa-mini.on .fa-tick { display: block; }
.fa-mini.on .fa-off { display: none; }
.fa-meal p { margin: 0 0 6px; font-size: 13.5px; line-height: 1.4; }
.fa-meal .fa-uses { margin: 0; font-size: 12px; color: var(--fa-ink-faint); }
.fa-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 9px; font-size: 12px; font-weight: 600; color: var(--fa-ink-soft); }
.fa-buy-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--fa-line-strong); background: var(--fa-surface); color: var(--fa-ink); transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.12s; }
.fa-buy-chip.on { background: var(--fa-accent-soft); color: var(--fa-accent-press); border-color: #cfe5d6; }
.fa-buy-chip .fa-tick { display: none; }
.fa-buy-chip.on .fa-tick { display: block; }
.fa-buy-chip.on .fa-plus { display: none; }
.fa-input { position: absolute; left: 14px; right: 14px; bottom: 86px; z-index: 5; display: flex; gap: 8px; align-items: center; padding: 6px 6px 6px 16px; border-radius: 999px; background: var(--fa-surface); border: 1px solid var(--fa-line-strong); color: var(--fa-ink-faint); font-size: 14.5px; }
.fa-input span { flex: 1; }
.fa-input b { width: 38px; height: 38px; border-radius: 50%; background: var(--fa-accent); color: var(--fa-on-accent); display: grid; place-items: center; }
/* Shopping list */
.fa-shop { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--fa-line); background: var(--fa-surface); transition: opacity 0.3s; }
.fa-shop + .fa-shop { margin-top: 8px; }
.fa-box { width: 26px; height: 26px; border-radius: 8px; border: 1.5px solid var(--fa-line-strong); background: var(--fa-surface); color: var(--fa-on-accent); display: grid; place-items: center; transition: background 0.18s, border-color 0.18s; }
.fa-box svg { opacity: 0; }
.fa-shop.done { opacity: 0.6; }
.fa-shop.done .fa-box { background: var(--fa-accent); border-color: var(--fa-accent); }
.fa-shop.done .fa-box svg { opacity: 1; animation: fa-tick 0.24s ease; }
.fa-shop b { font-weight: 600; font-size: 15.5px; letter-spacing: -0.01em; }
.fa-shop.done b { text-decoration: line-through; text-decoration-color: var(--fa-ink-faint); }
.fa-shop i { color: var(--fa-ink-faint); }
/* Install sheet bits */
.fa-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.fa-steps li { display: flex; gap: 12px; align-items: flex-start; }
.fa-steps .n { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--fa-accent-soft); color: var(--fa-accent-press); font-weight: 700; font-size: 13px; display: grid; place-items: center; transition: background 0.2s, color 0.2s; }
.fa-steps li.now .n { background: var(--fa-accent); color: var(--fa-on-accent); }
.fa-steps .t { font-size: 15px; line-height: 1.45; padding-top: 2px; }
.fa-steps .t b { font-weight: 700; }
.fa-inl { display: inline-flex; vertical-align: -3px; color: var(--fa-accent); margin: 0 1px; }
.fa-tile { width: 100%; aspect-ratio: 1; border-radius: 23%; background: var(--fa-accent); display: grid; place-items: center; box-shadow: 0 6px 14px rgb(38 104 75 / 0.35); overflow: hidden; }
.fa-tile svg { width: 100%; height: 100%; stroke: none; }
/* =================== Page layout (portfolio frame) =================== */
.wf-hero h1 { font-size: clamp(50px, 7.2vw, 106px); }
.wf-hero .cs-hero__lede { max-width: 46ch; }
.wf-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.wf-tags span { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 999px; background: var(--grey-1); border: 1px solid var(--line); font-size: 13.5px; font-weight: 500; }
.wf-tags span:first-child::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2f7d5a; box-shadow: 0 0 0 3px #d5ebdc; }
.wf-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.wf-get { background: #2f7d5a; border-color: #2f7d5a; }
.wf-get:hover { background: #28694c; }
.wf-get svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 680px) { .wf-ctas .btn { padding: 13px 18px; } }
/* Hero stage: three phones, upright and overlapping, with app pieces around them */
.wf-stage { aspect-ratio: 1 / 0.9; }
.wf-stage .phone { position: absolute; bottom: auto; right: auto; }
.wf-stage .wf-ph--l { left: 6%; top: 15%; width: 26%; z-index: 2; rotate: -7deg; }
.wf-stage .wf-ph--c { left: 35%; top: 3%; width: 30%; z-index: 3; }
.wf-stage .wf-ph--r { left: 68%; top: 15%; width: 26%; z-index: 2; rotate: 7deg; }
.wf-stage .stage__glow { inset: 6% 2% 0; }
.wf-pop-row { width: 100%; }
.wf-pop-row .fa-item { box-shadow: 0 2px 4px rgb(60 40 10 / 0.06); }
.wf-pop-logo { width: 100%; padding: 10px 14px 8px; border-radius: 16px; background: #fffdf9; border: 1px solid #e7e0d3; }
.wf-pop-logo img { display: block; width: 100%; height: auto; }
.wf-pop-toast { position: static !important; translate: none !important; }
@media (max-width: 900px) {
.wf-stage { aspect-ratio: 1 / 1.02; margin-top: 8px; }
.wf-stage .wf-ph--l { left: 1%; top: 17%; width: 31%; }
.wf-stage .wf-ph--c { left: 32%; top: 4%; width: 36%; }
.wf-stage .wf-ph--r { left: 68%; top: 17%; width: 31%; }
}
/* Phones: the hero walkthrough (whats-in-my-fridge.js). Each phone gets a stack of the
real screens; the centre one pushes between them, the pieces around it react. */
.wf-reel, .wf-cue, .wf-hero-now, .wf-deck-info { display: none; }
@media (max-width: 760px) {
.wf-stage.is-reel { margin-bottom: 14px; }
.wf-reel { display: block; position: absolute; inset: 0; overflow: hidden; background: #faf7f2; }
.wf-reel img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; visibility: hidden; will-change: transform, opacity; }
.wf-stage.is-reel .pop:has(.wf-pop-row) { --y-sm: 60% !important; }
.wf-hero-now.parade__now { display: flex; position: absolute; z-index: 6; left: 50%; top: calc(84% + 6px); translate: -50% 0; max-width: 78vw; box-shadow: 0 10px 24px -12px rgb(24 24 26 / 0.35), 0 0 0 1px rgb(24 24 26 / 0.06); visibility: hidden; }
.wf-cue { display: block; position: absolute; z-index: 5; right: -1%; top: 47%; width: 0; height: 0; }
.wf-cue > div { position: absolute; right: 0; top: 0; visibility: hidden; transform-origin: 100% 50%; filter: drop-shadow(0 14px 18px rgb(17 17 17 / 0.2)); }
.wf-cue__chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 7px 12px; border-radius: 999px; background: var(--fa-surface); border: 1px solid var(--fa-line-strong); color: var(--fa-ink); font-size: 12.5px; font-weight: 700; }
.wf-cue__chip svg { color: var(--fa-accent); }
.wf-cue__chip.is-on { background: var(--fa-accent); border-color: var(--fa-accent); color: var(--fa-on-accent); }
.wf-cue__chip.is-on svg { color: var(--fa-on-accent); }
.wf-cue__chip.is-warn { background: var(--fa-warn-soft); border-color: #ecc7ab; color: #7c4a23; }
.wf-cue__chip.is-warn svg { color: var(--fa-warn); }
.wf-cue .fa-buy-chip { white-space: nowrap; }
.wf-cue__meal { display: grid; gap: 2px; width: 172px; padding: 10px 12px; border-radius: 14px; background: var(--fa-surface); border: 1px solid var(--fa-line); }
.wf-cue__meal b { font: 600 14px/1.25 var(--fa-display); letter-spacing: -0.01em; }
.wf-cue__meal small { font-size: 11.5px; color: var(--fa-ink-soft); font-weight: 600; }
/* The screen deck: a line on what the screen does, and dots for where you are */
.parade.is-deck .wf-deck-info { display: grid; justify-items: center; gap: 10px; margin-top: 12px; padding-inline: 16px; text-align: center; }
.wf-deck-info p { margin: 0; min-height: 1.4em; font-size: 14px; color: var(--grey-7, #555); }
.wf-dots { display: flex; gap: 6px; }
.wf-dots { gap: 8px; }
.wf-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgb(24 24 26 / 0.18); transition: transform 0.4s cubic-bezier(.2,.8,.2,1), background-color 0.4s; }
.wf-dots i.on { transform: scale(1.45); background: #18181a; }
.parade.is-deck .phone .screen img { transform-origin: 50% 0; }
}
/* Chapter label used through the feature run */
.wf-step { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--grey-7); }
.wf-step b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--project-pen); color: #18181a; font-size: 11px; }
/* Intro to the feature run */
.wf-run-head { display: grid; gap: 18px; max-width: 820px; }
.wf-run-head h2 { font-size: clamp(36px, 5.4vw, 76px); letter-spacing: -0.045em; }
.wf-run-head p { color: var(--grey-7); font-size: 18px; max-width: 58ch; }
.wf-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.wf-jump a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; font-size: 14px; font-weight: 500; transition: background 0.2s, border-color 0.2s; }
.wf-jump a:hover { background: var(--grey-1); border-color: var(--grey-3); }
.wf-jump b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--grey-1); font-size: 10.5px; }
/* One feature: copy on one side, a live demo breaking out of a green panel on the other */
.wf-feat { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; padding-block: clamp(56px, 8vw, 120px); }
.wf-feat--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.wf-feat--flip .wf-feat__copy { order: 2; }
.wf-feat__copy { display: grid; gap: 20px; align-content: center; }
.wf-feat__copy h2 { font-size: clamp(32px, 4.2vw, 58px); }
.wf-feat__copy > p { color: var(--grey-7); font-size: 17px; max-width: 46ch; }
.wf-points { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 12px; max-width: 46ch; }
.wf-points li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; font-size: 15px; line-height: 1.55; color: var(--ink); }
.wf-points li::before { content: ""; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: #e6efe8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f7d5a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; }
.wf-replay { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); font-size: 13.5px; font-weight: 500; cursor: pointer; transition: background 0.2s; }
.wf-replay:hover { background: var(--grey-1); }
.wf-replay svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wf-demo { position: relative; isolation: isolate; min-height: clamp(520px, 52vw, 700px); display: grid; align-items: end; }
.wf-panel {
position: absolute; left: 0; right: 0; bottom: 0; top: 14%; z-index: -1; border-radius: var(--radius-l); overflow: hidden;
background: radial-gradient(110% 120% at 15% 0%, #e9f3ec 0%, #d9ebdf 55%, #c9e2d1 100%);
}
.wf-panel::before { content: ""; position: absolute; inset: 0; opacity: 0.55; background-image: radial-gradient(circle, #fff 1.5px, transparent 2px); background-size: 24px 24px; }
.wf-panel--warm { background: radial-gradient(110% 120% at 85% 0%, #fbf1e6 0%, #f5e4d2 55%, #efd6bf 100%); }
.wf-panel--deep { background: radial-gradient(110% 120% at 15% 0%, #3d8f69 0%, #2f7d5a 55%, #276848 100%); }
.wf-panel--deep::before { opacity: 0.16; }
.wf-demo .phone { position: absolute; z-index: 2; width: clamp(220px, 21vw, 290px); bottom: 8%; filter: drop-shadow(0 40px 50px rgb(20 60 40 / 0.25)); box-shadow: none; }
.wf-demo .phone.at-l { left: 9%; }
.wf-demo .phone.at-c { left: 50%; translate: -50% 0; }
.wf-demo .phone.at-r { right: 9%; }
.wf-pull { position: absolute; z-index: 4; width: var(--w, 320px); filter: drop-shadow(0 2px 3px rgb(30 50 40 / 0.08)) drop-shadow(0 30px 40px rgb(30 60 40 / 0.22)); }
.wf-pull > * { rotate: var(--r, 0deg); }
.wf-card { border-radius: 20px; background: var(--fa-surface); border: 1px solid var(--fa-line); padding: 16px; }
.wf-card__k { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; font: 600 11px/1 var(--fa-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fa-ink-faint); }
/* Small annotations pointing at a detail */
.wf-note {
position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: 8px; max-width: 220px;
padding: 8px 13px 8px 9px; border-radius: 999px; background: #18181a; color: #fff;
font: 500 12.5px/1.3 var(--font); letter-spacing: -0.005em; box-shadow: 0 14px 30px -12px rgb(0 0 0 / 0.5); white-space: nowrap;
}
.wf-note--tap i { position: relative; background: none; }
.wf-note--tap i::before, .wf-note--tap i::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--project-pen); }
.wf-note--tap i::after { animation: credit-pulse 1.6s ease-out infinite; }
.wf-note i { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--project-pen); color: #18181a; font: 700 10px/1 var(--font); font-style: normal; }
/* 01 Scan */
.wf-scan .wf-pull--flag { right: -1%; top: 16%; --w: clamp(280px, 25vw, 350px); --r: 4deg; }
.wf-scan .wf-note--a { left: 47%; top: 61%; }
/* 02 Receipt */
.wf-receipt-demo { min-height: clamp(520px, 50vw, 660px); }
.wf-receipt {
position: absolute; z-index: 2; left: 3%; bottom: 7%; width: clamp(230px, 21vw, 280px); padding: 26px 22px 30px;
background: #fffefa; color: #2b2925; font: 500 12.5px/1.75 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: 0.02em;
rotate: -4deg; box-shadow: 0 2px 3px rgb(60 40 10 / 0.08), 0 40px 50px -20px rgb(60 40 10 / 0.35);
-webkit-mask: radial-gradient(7px at 50% 100%, transparent 98%, #000) 0 100% / 14px 100% repeat-x;
mask: radial-gradient(7px at 50% 100%, transparent 98%, #000) 0 100% / 14px 100% repeat-x;
overflow: hidden;
}
.wf-receipt__top { text-align: center; margin-bottom: 12px; line-height: 1.5; }
.wf-receipt__top b { display: block; font-size: 15px; letter-spacing: 0.18em; }
.wf-receipt ol { list-style: none; margin: 0; padding: 10px 0; border-block: 1px dashed #b9b2a5; }
.wf-receipt li { display: flex; justify-content: space-between; gap: 10px; padding: 0 4px; border-radius: 4px; transition: background 0.25s, color 0.25s; }
.wf-receipt li.is-on { background: rgb(47 125 90 / 0.14); color: #1d5a3f; }
.wf-receipt li.is-skip { color: #a59d90; text-decoration: line-through; }
.wf-receipt__foot { padding-top: 10px; display: flex; justify-content: space-between; }
.wf-beam { position: absolute; left: -10%; right: -10%; height: 3px; top: 0; background: #2f7d5a; box-shadow: 0 0 18px 4px rgb(47 125 90 / 0.45); opacity: 0; }
.wf-found { position: absolute; z-index: 3; right: 0; top: 4%; width: clamp(270px, 25vw, 330px); }
.wf-found .wf-card { padding: 16px 14px 10px; }
.wf-found__date { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 9px 12px; border-radius: 12px; background: var(--fa-accent-soft); color: var(--fa-accent-press); font-size: 12.5px; font-weight: 600; }
.wf-frow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 2px; border-top: 1px solid var(--fa-line); }
.wf-frow small { display: block; font: 500 11px/1.3 ui-monospace, Menlo, monospace; color: var(--fa-ink-faint); letter-spacing: 0.02em; }
.wf-frow b { display: block; font-size: 14.5px; font-weight: 600; }
.wf-frow--skip b { color: var(--fa-ink-faint); font-weight: 500; font-size: 13px; }
.wf-receipt-demo .wf-note--a { left: 34%; bottom: 3%; }
/* 03 Use soon */
.wf-soon .phone { left: 7%; }
.wf-soon .wf-pull--rows { right: -2%; top: 4%; --w: clamp(300px, 27vw, 360px); --r: 2deg; }
.wf-soon .wf-pull--rows .fa-list { gap: 9px; }
.wf-soon .wf-pull--rows .fa-banner { margin-bottom: 9px; }
.wf-soon .wf-note--a { right: 10%; bottom: 10%; }
/* 04 Staples + list */
.wf-list-demo .wf-pull--staples { left: 3%; top: 2%; --w: clamp(280px, 25vw, 330px); --r: -3deg; }
.wf-list-demo .wf-pull--list { right: 3%; bottom: 7%; --w: clamp(280px, 25vw, 330px); --r: 2deg; }
.wf-list-demo .wf-card .fa-title { margin-top: 0; font-size: 24px; }
.wf-list-demo .fa-shop { padding: 10px 12px; }
.wf-list-demo .wf-tickhead { display: flex; align-items: center; gap: 8px; margin: 12px 0 8px; padding: 9px 12px; border-radius: 12px; background: var(--fa-surface-2); color: var(--fa-ink-soft); font: 500 15px/1.2 var(--fa-display); }
.wf-tickhead small { margin-left: auto; font: 600 11px/1.2 var(--fa-sans); color: var(--fa-accent-press); }
.wf-list-demo .wf-note--a { left: 5%; bottom: 8%; }
/* 05 Dinner */
.wf-dinner .wf-pull--meal { left: -2%; top: 6%; --w: clamp(280px, 25vw, 330px); --r: -3deg; }
.wf-dinner .phone { right: 8%; }
.wf-dinner .wf-note--a { left: 6%; bottom: 12%; }
/* 06 Home screen */
.wf-home-demo .wf-pull--steps { right: 2%; top: 10%; --w: clamp(270px, 24vw, 320px); --r: 3deg; }
.wf-home-demo .phone { left: 10%; }
.wf-hs { position: absolute; inset: 0; background: linear-gradient(180deg, #cfe0d6, #eef3ee); padding: 80px 30px 0; }
.wf-hs__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 22px; }
.wf-hs__app { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: #2a3b33; }
.wf-hs__ghost { width: 100%; aspect-ratio: 1; border-radius: 23%; background: rgb(255 255 255 / 0.55); }
.wf-hs__app .fa-tile { box-shadow: 0 8px 18px rgb(38 104 75 / 0.35); }
.wf-sheet { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 4; padding: 8px 10px 14px; border-radius: 26px; background: var(--fa-surface); box-shadow: 0 -10px 40px rgb(0 0 0 / 0.18); }
.wf-sheet__grip { width: 40px; height: 5px; border-radius: 999px; background: var(--fa-line-strong); margin: 4px auto 10px; }
.wf-sheet__row { display: flex; align-items: center; gap: 12px; padding: 13px 14px; font-size: 15px; font-weight: 600; color: var(--fa-ink-soft); border-radius: 13px; }
.wf-sheet__row + .wf-sheet__row { border-top: 1px solid var(--fa-line); }
.wf-sheet__row.hot { background: var(--fa-accent); color: var(--fa-on-accent); border-color: transparent; }
.wf-sheet__row svg { margin-left: auto; }
.wf-browser { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--fa-bg); }
.wf-browser__bar { margin-top: auto; display: flex; align-items: center; justify-content: space-around; padding: 14px 10px 30px; background: var(--fa-surface); border-top: 1px solid var(--fa-line); color: var(--fa-accent); }
.wf-browser__bar span { color: var(--fa-ink-faint); }
.wf-ring { position: absolute; inset: -9px; border: 2.5px solid var(--fa-accent); border-radius: 50%; }
/* Get the app */
.wf-get-band { position: relative; overflow: hidden; border-radius: var(--radius-l); background: #2f7d5a; color: #fff; padding: clamp(28px, 5vw, 72px); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); align-items: center; isolation: isolate; }
.wf-get-band::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.12; background-image: radial-gradient(circle, #fff 1.5px, transparent 2px); background-size: 24px 24px; }
.wf-get-band .label { color: rgb(255 255 255 / 0.7); }
.wf-get-band h2 { font-size: clamp(34px, 4.6vw, 64px); color: #fff; }
.wf-get-band .hl { --pen: #b9e4c9 !important; --hl-text: #18181a; color: #18181a; }
.wf-get__copy { display: grid; gap: 20px; align-content: start; }
.wf-get__copy > p { color: rgb(255 255 255 / 0.85); font-size: 17px; max-width: 44ch; }
.wf-get__row { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 6px; }
.wf-get__btn { background: #fff; color: #18181a; border-color: #fff; }
.wf-get__btn:hover { background: #f2f7f3; }
.wf-get__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wf-qr { display: flex; align-items: center; gap: 14px; }
.wf-qr__code { width: 112px; padding: 10px; border-radius: 18px; background: #fff; }
.wf-qr p { font-size: 13.5px; line-height: 1.45; color: rgb(255 255 255 / 0.85); max-width: 16ch; }
.wf-qr p b { color: #fff; font-weight: 600; }
.wf-guide { border-radius: 24px; background: var(--fa-surface); color: var(--fa-ink); padding: clamp(18px, 2.4vw, 28px); box-shadow: 0 40px 60px -30px rgb(0 0 0 / 0.45); }
.wf-guide h3 { font: 600 22px/1.2 var(--fa-display); letter-spacing: -0.01em; margin: 0 0 4px; }
.wf-guide > p { font-family: var(--fa-sans); font-size: 14px; color: var(--fa-ink-soft); margin: 0 0 16px; }
.wf-guide .fa-seg { margin-bottom: 18px; border-radius: 999px; }
.wf-guide .fa-seg button { flex: 1; padding: 9px 10px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--fa-ink-soft); }
.wf-guide .fa-seg button[aria-selected="true"] { background: var(--fa-surface); color: var(--fa-ink); box-shadow: 0 1px 3px rgb(0 0 0 / 0.08); }
.wf-guide__note { margin: 16px 0 0; font-size: 12.5px; color: var(--fa-ink-faint); font-family: var(--fa-sans); }
@media (max-width: 900px) {
.wf-get-band { grid-template-columns: 1fr; }
}
@media (max-width: 680px) { .wf-qr { display: none; } }
/* ---------- Up close: four small breakouts ---------- */
.wf-close { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); row-gap: clamp(56px, 7vw, 96px); }
.wf-break { position: relative; margin: 0; display: grid; gap: 18px; isolation: isolate; }
.wf-break__stage { position: relative; height: clamp(300px, 28vw, 380px); display: grid; place-items: center; }
.wf-break__stage > .wf-panel { top: 12%; }
.wf-break figcaption { display: grid; gap: 4px; padding-inline: 4px; }
.wf-break figcaption b { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; }
.wf-break figcaption span { font-size: 15px; color: var(--grey-7); line-height: 1.55; max-width: 46ch; }
.wf-mark { width: clamp(150px, 14vw, 190px); padding: 0; border: 0; background: none; border-radius: 27%; cursor: pointer; filter: drop-shadow(0 30px 30px rgb(20 60 40 / 0.3)); }
.wf-mark svg { width: 100%; height: auto; display: block; }
.wf-mark-word { position: absolute; bottom: 9%; display: flex; align-items: center; gap: 10px; }
.wf-mark-word .fa-leaf { width: 30px; height: 30px; }
.wf-mark-word .fa-bt small { font-size: 15px; }
.wf-mark-word .fa-bt b { font-size: 36px; }
.wf-fan { position: relative; width: min(88%, 380px); display: grid; }
.wf-fan .fa-item { grid-area: 1 / 1; box-shadow: 0 2px 4px rgb(60 40 10 / 0.06), 0 26px 40px -18px rgb(30 50 40 / 0.35); transition: translate 0.6s var(--ease-out), rotate 0.6s var(--ease-out); }
.wf-fan .fa-item:nth-child(1) { translate: 0 -110%; rotate: -4deg; }
.wf-fan .fa-item:nth-child(2) { z-index: 2; rotate: 1deg; }
.wf-fan .fa-item:nth-child(3) { translate: 0 110%; rotate: -2deg; }
.wf-fan:hover .fa-item { rotate: 0deg; }
.wf-navbox { position: relative; zoom: 1.15; width: min(92%, 410px); height: 74px; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 40px -18px rgb(20 60 40 / 0.4); }
.wf-navbox .fa-nav { border: 1px solid var(--fa-line); border-radius: 22px; background: var(--fa-surface); padding: 0; }
.wf-navbox .fa-nav span { cursor: pointer; transition: color 0.2s; }
.wf-dotto { position: absolute; z-index: 7; width: 12px; height: 12px; border-radius: 50%; background: var(--fa-accent); box-shadow: 0 0 0 4px rgb(255 255 255 / 0.9); opacity: 0; pointer-events: none; }
.wf-cats { display: grid; gap: 10px; width: min(80%, 330px); }
.wf-cats .fa-cat { box-shadow: 0 18px 30px -18px rgb(30 50 40 / 0.4); font-size: 18px; }
.wf-cats .fa-cat:nth-child(odd) { rotate: -1.5deg; }
.wf-cats .fa-cat:nth-child(even) { rotate: 1.2deg; translate: 18px 0; }
.wf-cats .fa-cat svg { width: 19px; height: 19px; }
/* ---------- Colour + type ---------- */
.wf-specimen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 14px; }
.wf-specimen > div { border-radius: var(--radius-l); padding: clamp(24px, 4vw, 48px); background: #faf7f2; box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 14px; align-content: start; }
.wf-specimen .aa { font: 600 clamp(90px, 11vw, 160px)/0.85 var(--fa-display); color: #2f7d5a; letter-spacing: -0.03em; }
.wf-specimen .aa--sans { font-family: var(--fa-sans); font-weight: 700; color: #1f1b16; letter-spacing: -0.04em; }
.wf-specimen h3 { font: 600 clamp(26px, 2.6vw, 34px)/1.15 var(--fa-display); letter-spacing: -0.02em; color: #1f1b16; }
.wf-specimen h3 em { font-style: italic; font-weight: 500; color: #5a8a72; }
.wf-specimen p { font-family: var(--fa-sans); font-size: 15px; color: #6b6358; max-width: 44ch; }
.wf-specimen small { font-size: 13px; color: var(--grey-5); }
@media (max-width: 800px) { .wf-specimen { grid-template-columns: 1fr; } }
/* ---------- Phones and narrow screens ---------- */
@media (max-width: 1100px) and (min-width: 901px) {
.wf-pull { zoom: 0.86; }
}
@media (max-width: 900px) {
.wf-feat, .wf-feat--flip { grid-template-columns: 1fr; gap: 28px; padding-block: 48px 64px; }
.wf-feat--flip .wf-feat__copy { order: 0; }
.wf-demo { min-height: 0; height: clamp(520px, 128vw, 640px); }
.wf-receipt-demo { height: clamp(560px, 140vw, 680px); }
.wf-panel { top: 10%; }
.wf-demo .phone { width: clamp(180px, 50vw, 250px); bottom: 5%; }
.wf-demo .phone.at-l, .wf-soon .phone, .wf-home-demo .phone { left: 5%; }
.wf-dinner .phone { right: 5%; }
.wf-pull { zoom: 0.72; }
.wf-scan .wf-pull--flag { right: -2%; top: 18%; }
.wf-soon .wf-pull--rows { right: -3%; top: 0; }
.wf-list-demo .wf-pull--staples { left: -1%; top: 0; }
.wf-list-demo .wf-pull--list { right: -1%; bottom: 4%; }
.wf-dinner .wf-pull--meal { left: -3%; top: 0; }
.wf-home-demo .wf-pull--steps { right: -2%; top: 4%; }
.wf-receipt { left: 3%; top: 4%; bottom: auto; width: 62%; font-size: 11.5px; padding: 20px 16px 24px; }
.wf-found { right: 2%; top: auto; bottom: 3%; zoom: 0.8; }
.wf-note { font-size: 11.5px; }
.wf-scan .wf-note--a { left: auto; top: auto; right: 3%; bottom: 6%; }
.wf-soon .wf-note--a { right: 3%; bottom: 6%; }
.wf-list-demo .wf-note--a, .wf-dinner .wf-note--a { display: none; }
.wf-receipt-demo .wf-note--a { display: none; }
.wf-close { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
.wf-pull { zoom: 0.64; }
.wf-found { zoom: 0.72; }
}
/* Phones: each demo composed for a 390 screen. Cards overlap the phone on purpose and
overhang the panel by a few pixels at most; nothing runs off the screen. */
@media (max-width: 760px) {
.wf-scan .wf-pull--flag { right: 1%; top: 17%; }
.wf-soon .wf-pull--rows { right: 1%; top: 1%; }
.wf-dinner .wf-pull--meal { left: 1%; top: 2%; }
.wf-home-demo .wf-pull--steps { right: 1%; top: 5%; }
.wf-receipt-demo { height: clamp(540px, 136vw, 660px); }
}
/* Reduced motion: everything sits in its finished state (the JS skips the timelines) */
@media (prefers-reduced-motion: reduce) {
.fa-spin, .fa-typing span, .fa-caret, .fa-nav i.pulse { animation: none !important; }
}
.wf-replay[hidden] { display: none; }
/* Softer palette, matching the app: warm cream with its food-group pastels; green kept for buttons and the logo */
body { --project-pen: #f1d9c7; }
.wf-panel--sand { background: radial-gradient(110% 120% at 85% 0%, #faf5ec 0%, #f4ecdd 60%, #ece1cc 100%); }
.wf-panel--blush { background: radial-gradient(110% 120% at 15% 0%, #fcf4f2 0%, #f7ebe9 60%, #f0dcd8 100%); }
.wf-panel--sky { background: radial-gradient(110% 120% at 85% 0%, #f6f8fd 0%, #eef2fa 60%, #dfe7f5 100%); }
.wf-panel--sage { background: radial-gradient(110% 120% at 15% 0%, #f5f9f3 0%, #eaf3e8 60%, #dcead9 100%); }
.wf-panel--teal { background: radial-gradient(110% 120% at 85% 0%, #f4f9fa 0%, #e7f1f3 60%, #d8e8ec 100%); }
.wf-panel--sand::before, .wf-panel--blush::before, .wf-panel--sky::before, .wf-panel--sage::before, .wf-panel--teal::before { opacity: 0.5; }
.wf-get-band { background: radial-gradient(120% 140% at 85% 0%, #fbf7f0 0%, #f3eee4 55%, #ece3d3 100%); color: var(--fa-ink, #1f1b16); }
.wf-get-band::before { background-image: radial-gradient(circle, #d8cfbe 1.5px, transparent 2px); opacity: 0.5; }
.wf-get-band .label { color: var(--fa-ink-soft, #6b6358); }
.wf-get-band .hl { --pen: #f1d9c7 !important; }
.wf-get-band h2 { color: var(--fa-ink, #1f1b16); }
.wf-get__copy > p, .wf-qr p { color: var(--fa-ink-soft, #6b6358); }
.wf-qr p b { color: var(--fa-ink, #1f1b16); }
.wf-get__btn { background: #2f7d5a; color: #fff; border-color: #2f7d5a; }
.wf-get__btn:hover { background: #28694c; }
.wf-qr__code { box-shadow: 0 0 0 1px #e7e0d3; }
.wf-guide { box-shadow: 0 30px 50px -30px rgb(60 40 20 / 0.3); }
/* ---------- Visual-first pass: bold titles, live phones, compact details ---------- */
/* Feature run: a step number, a big title, a tiny label, then the demo does the talking */
.wf-feat { padding-block: clamp(40px, 6vw, 96px); }
.wf-feat__copy { gap: 14px; }
.wf-feat__copy h2 { font-size: clamp(42px, 5.4vw, 80px); letter-spacing: -0.045em; line-height: 1; }
.wf-sub { margin: 0; font-size: 15px; font-weight: 500; color: var(--grey-7); }
.wf-run-head h2 { font-size: clamp(40px, 6vw, 84px); }
@media (max-width: 900px) {
.wf-feat, .wf-feat--flip { gap: 20px; padding-block: 36px 44px; }
}
/* Carousel phones: always crisp here (no blur on the phone that's leaving) */
.parade .phone { filter: none !important; }
/* A walkthrough over each screenshot: a flick that scrolls and bounces, then a tap */
.wf-live { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.wf-live__body { position: absolute; inset: 0; overflow: hidden; clip-path: inset(9.5% 0 9.5% 0); background: #faf7f2; }
.wf-live__body img { display: block; width: 100%; height: 100%; will-change: transform; }
.wf-live__ring { position: absolute; border: 0.7cqw solid #2f7d5a; border-radius: 3cqw; background: rgb(47 125 90 / 0.08); box-shadow: 0 0 0 1.4cqw rgb(47 125 90 / 0.14); }
.wf-live__ripple { position: absolute; width: 22cqw; height: 22cqw; margin: -11cqw 0 0 -11cqw; border-radius: 50%; background: rgb(47 125 90 / 0.35); }
.wf-live__finger { position: absolute; width: 10cqw; height: 10cqw; border-radius: 50%; background: rgb(24 24 26 / 0.22); border: 0.6cqw solid rgb(255 255 255 / 0.9); box-shadow: 0 1cqw 3cqw rgb(0 0 0 / 0.2); }
.wf-live__toast { position: absolute; left: 50%; bottom: 13%; translate: -50% 0; display: flex; align-items: center; gap: 1.6cqw; white-space: nowrap; padding: 2.4cqw 4cqw; border-radius: 99px; background: #1f1b16; color: #fff; font: 600 3.6cqw/1 var(--fa-sans); box-shadow: 0 2cqw 5cqw -1cqw rgb(0 0 0 / 0.35); }
.wf-live__toast svg { width: 3.8cqw; height: 3.8cqw; color: #b9e4c9; }
/* Get the app: the copy, and the QR code on its own beside it */
@media (min-width: 901px) { .wf-get-band { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); } }
.wf-qr--big { flex-direction: column; align-items: center; justify-self: center; text-align: center; gap: 16px; }
.wf-qr--big .wf-qr__code { width: clamp(150px, 14vw, 196px); box-shadow: 0 30px 50px -28px rgb(60 40 20 / 0.45), 0 0 0 1px #e7e0d3; }
.wf-qr--big p { max-width: 22ch; }
@media (max-width: 760px) {
/* 04 The usuals: the two cards stacked and centred, a slight overlap, the panel
cut to fit, and the toast below them */
.wf-list-demo { height: auto; display: flex; flex-direction: column; align-items: center; padding: 0 0 64px; }
.wf-list-demo .wf-panel { top: 30px; }
.wf-list-demo .wf-pull { position: relative; inset: auto; zoom: 0.8; --w: 330px; }
.wf-list-demo .wf-pull--staples { --r: -2deg; }
.wf-list-demo .wf-pull--list { margin-top: -4px; --r: 1.5deg; }
.wf-list-demo .wf-tickhead { white-space: nowrap; font-size: 14px; }
.wf-list-demo .wf-tickhead small { font-size: 10.5px; }
.wf-list-demo .fa-toast { left: 50% !important; bottom: 16px !important; font-size: 13px; }
}
/* ---------- The clever bits: four tiles, each a piece of the app at its own size,
scaled to fill the tile (data-fit), playing on a loop ---------- */
.wf-close { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.wf-break { gap: 12px; }
.wf-break figcaption b { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.wf-tile { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 26px; background: var(--fa-bg); box-shadow: inset 0 0 0 1px #e7e0d3, 0 30px 50px -34px rgb(60 40 20 / 0.45); isolation: isolate; }
.wf-tile__ui { position: absolute; left: 0; top: 0; width: 390px; transform-origin: 0 0; overflow: hidden; }
.wf-tile__ui .fa-title { margin: 6px 18px 12px; font-size: 32px; }
.wf-tile__ui .fa-seg { margin: 0 18px 14px; }
.wf-ttoast { bottom: 22px; }
@media (max-width: 1100px) { .wf-close { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
.wf-close { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; margin-inline: -16px; padding: 4px 16px 14px; scrollbar-width: none; }
.wf-close::-webkit-scrollbar { display: none; }
.wf-break { flex: 0 0 80%; scroll-snap-align: center; }
}
/* Step-by-step: the method sheet */
.wf-method { padding: 6px 22px 0; background: var(--fa-surface); }
.wf-grip { width: 44px; height: 5px; border-radius: 9px; background: var(--fa-line-strong); margin: 6px auto 14px; }
.wf-m-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.wf-m-head h3 { margin: 0; font: 600 25px/1.15 var(--fa-display); letter-spacing: -0.02em; }
.wf-serves { display: flex; align-items: center; gap: 10px; margin: 14px 0 6px; font-size: 14px; color: var(--fa-ink-soft); }
.wf-stepper { display: inline-flex; align-items: center; gap: 12px; }
.wf-stepper i { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--fa-line-strong); background: var(--fa-surface); color: var(--fa-accent-press); display: grid; place-items: center; font: 400 20px/1 var(--fa-sans); font-style: normal; }
.wf-stepper b { display: inline-block; min-width: 18px; text-align: center; font-size: 18px; color: var(--fa-ink); font-variant-numeric: tabular-nums; }
.wf-m-time { margin: 0 0 12px; font-size: 13.5px; color: var(--fa-ink-faint); }
.wf-method h4 { margin: 0 0 8px; font: 600 18px/1.2 var(--fa-display); }
.wf-steps { margin: 0; padding: 0; list-style: none; counter-reset: st; display: grid; gap: 7px; }
.wf-steps li { counter-increment: st; position: relative; padding: 10px 12px 10px 46px; border-radius: 14px; font-size: 14.5px; line-height: 1.4; color: var(--fa-ink-soft); background: var(--fa-surface-2); transition: background 0.35s, color 0.35s; }
.wf-steps li::before { content: counter(st); position: absolute; left: 12px; top: 9px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--fa-surface); color: var(--fa-ink-soft); font: 700 12px/1 var(--fa-sans); transition: background 0.35s, color 0.35s; }
.wf-steps li.on { background: var(--fa-accent-soft); color: var(--fa-ink); box-shadow: inset 3px 0 0 var(--fa-accent); }
.wf-steps li.on::before, .wf-steps li.done::before { background: var(--fa-accent); color: var(--fa-on-accent); }
.wf-steps li.done { color: var(--fa-ink-faint); }
.wf-safety { display: flex; gap: 6px; margin: 12px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--fa-ink-faint); }
.wf-safety svg { flex: none; margin-top: 2px; color: var(--fa-warn); }
/* Saved meals: a stack of cards */
.wf-mstack { position: relative; margin: 0 18px; height: 290px; }
.wf-mcard { position: absolute; left: 0; right: 0; top: 0; padding: 14px 15px 12px; border-radius: 18px; background: var(--fa-surface); border: 1px solid var(--fa-line); box-shadow: 0 2px 4px rgb(60 40 10 / 0.05), 0 18px 30px -18px rgb(60 40 10 / 0.35); transform-origin: 50% 0; }
.wf-mcard__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.wf-mcard h3 { margin: 0 0 4px; font: 600 17px/1.25 var(--fa-display); }
.wf-mcard p { margin: 0 0 5px; font-size: 13.5px; line-height: 1.4; }
.wf-mcard .fa-uses { font-size: 12px; color: var(--fa-ink-faint); }
.wf-mcard__foot { display: flex; align-items: center; gap: 7px; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--fa-line); }
.wf-cooked { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--fa-line-strong); font-size: 12.5px; font-weight: 600; color: var(--fa-ink-soft); transition: background 0.2s, color 0.2s; }
.wf-cooked.on { background: var(--fa-accent); color: var(--fa-on-accent); border-color: var(--fa-accent); }
.wf-mcard__foot small { margin-left: auto; font-size: 11.5px; color: var(--fa-ink-faint); white-space: nowrap; }
/* Freeze it */
.wf-freeze .fa-cat, .wf-fz-list { margin-inline: 16px; }
.wf-fz-cat { margin-top: 6px; font-size: 16px; padding: 9px 13px; }
.wf-fz-list { display: grid; gap: 8px; margin-block: 8px 10px; }
.wf-fz-list .fa-item { box-shadow: 0 1px 2px rgb(60 40 10 / 0.05); }
.wf-fz-slot { height: 0; }
.fa-tag.freezer-t { background: #e7f0f8; color: #3d6f99; }
.wf-freeze .fa-exp em { font-style: normal; }
/* Coach tips */
.wf-coachbox { position: relative; margin: 0 16px; height: 128px; }
.wf-coachbox .coach-tip { position: absolute; inset: 0 0 auto; display: flex; gap: 10px; align-items: flex-start; background: var(--fa-accent-soft); border: 1px solid #cfe5d6; border-left: 3px solid var(--fa-accent); border-radius: 14px; padding: 12px 12px 12px 13px; box-shadow: 0 10px 24px -14px rgb(30 60 40 / 0.45); }
.coach-ico { font-size: 19px; line-height: 1.25; flex: none; }
.coach-body { flex: 1; min-width: 0; }
.coach-title { display: block; font-size: 14.5px; font-weight: 700; color: var(--fa-ink); }
.coach-text { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: var(--fa-accent-press); }
.coach-x { flex: none; color: var(--fa-accent-press); opacity: 0.6; }
.wf-ghost { display: grid; gap: 9px; margin: 14px 16px 0; }
.wf-ghost i { height: 54px; border-radius: 14px; background: var(--fa-surface); border: 1px solid var(--fa-line); }
.wf-cdots { position: absolute; left: 0; right: 0; bottom: 86px; display: flex; justify-content: center; gap: 6px; }
.wf-cdots i { width: 7px; height: 7px; border-radius: 50%; background: var(--fa-line-strong); transition: background-color 0.3s, transform 0.3s; }
.wf-cdots i.on { background: var(--fa-accent); transform: scale(1.3); }
.wf-tnav span { transition: color 0.3s; }
/* Static fallbacks (reduced motion / no JS): the stack and the first tip */
.wf-mcard:nth-child(1) { z-index: 3; }
.wf-mcard:nth-child(2) { z-index: 2; transform: translateY(26px) scale(0.94); }
.wf-mcard:nth-child(3) { z-index: 1; transform: translateY(52px) scale(0.88); }
.wf-coachbox .coach-tip:not(:first-child) { visibility: hidden; }
.wf-freeze .fa-toast { font-size: 13px; }
/* Phone parade: desktop only. One tidy row, a bold caption under each phone;
hidden on phones, where the features below show the app in detail */
.wf-parade-sec { padding-block: clamp(24px, 4vw, 64px); }
.wf-parade { padding-block: clamp(36px, 5vw, 72px) clamp(28px, 4vw, 56px); }
.wf-parade .parade__row .phone:nth-child(even) { margin-top: 0; }
.wf-parade .parade__caption { margin-top: 22px; text-transform: none; letter-spacing: -0.01em; font-size: 15px; font-weight: 600; color: var(--ink, #18181a); }
@media (max-width: 760px) { .wf-parade-sec { display: none; } }
/* ---------- 05 Dinner: the centrepiece. Three acts, a phone in the middle,
a card either side that follows along ---------- */
.wf-cook { display: block; }
.wf-cook .wf-feat__copy { margin-bottom: 18px; }
.wf-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(18px, 2.4vw, 30px); }
.wf-acts span { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px 9px 7px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line); font-size: 14px; font-weight: 600; color: var(--grey-5, #888); overflow: hidden; transition: color 0.3s, box-shadow 0.3s; }
.wf-acts b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--grey-1); color: #18181a; font-size: 11px; transition: background-color 0.3s; }
.wf-acts span.on { color: #18181a; box-shadow: 0 0 0 1.5px #18181a; }
.wf-acts span.on b { background: var(--project-pen); }
.wf-acts i { position: absolute; left: 16px; right: 16px; bottom: 3px; height: 2px; border-radius: 2px; background: rgb(0 0 0 / 0.08); overflow: hidden; }
.wf-acts em { position: absolute; inset: 0; background: #18181a; transform-origin: 0 50%; transform: scaleX(0); }
.wf-cook__stage { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(16px, 2.2vw, 34px); align-items: center; }
.wf-cook__mid { position: relative; isolation: isolate; padding: clamp(24px, 3vw, 40px) clamp(22px, 3vw, 48px); }
.wf-cook__mid .wf-panel { top: 0; }
.wf-cook__ph.phone { position: relative; width: clamp(250px, 22vw, 310px); box-shadow: none; filter: drop-shadow(0 40px 50px rgb(20 60 40 / 0.25)); }
.wf-cook__col { display: grid; align-items: center; grid-row: 1; }
.wf-cook__col--l { grid-column: 1; }
.wf-cook__mid { grid-column: 2; grid-row: 1; }
.wf-cook__col--r { grid-column: 3; }
.wf-ccard { grid-area: 1 / 1; border-radius: 20px; background: var(--fa-surface); border: 1px solid var(--fa-line); padding: 16px 16px 14px; box-shadow: 0 2px 4px rgb(60 40 10 / 0.05), 0 30px 44px -26px rgb(30 50 40 / 0.4); visibility: hidden; }
.wf-ccard[data-act="1"] { visibility: visible; }
.wf-cook__col--l .wf-ccard { rotate: -1.2deg; }
.wf-cook__col--r .wf-ccard { rotate: 1.2deg; }
/* You have / Used up */
.wf-hrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--fa-line); }
.wf-hrow b { display: block; font-size: 14.5px; font-weight: 600; margin-bottom: 3px; }
.wf-hrow .fa-meta { gap: 6px; font-size: 12px; }
.wf-tickbox { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--fa-line-strong); display: grid; place-items: center; color: transparent; transition: background-color 0.25s, border-color 0.25s, color 0.25s; }
.wf-tickbox.on { background: var(--fa-accent); border-color: var(--fa-accent); color: #fff; }
.wf-usesup { padding: 4px 9px; border-radius: 999px; background: var(--fa-warn-soft); color: var(--fa-warn); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.wf-hused { padding: 6px 9px; font-size: 11px; }
[data-act="1"] .wf-hused, [data-act="3"] .wf-usesup, [data-act="3"] .wf-tickbox { display: none; }
[data-act="3"] .wf-hrow { grid-template-columns: minmax(0, 1fr) auto; }
/* You need: the chip and the list it drops onto */
.wf-minilist { border-radius: 14px; background: var(--fa-surface-2); padding: 12px; display: grid; gap: 7px; }
.wf-minilist h3 { margin: 0 0 2px; font: 600 17px/1.2 var(--fa-display); }
.wf-minilist .fa-shop { padding: 8px 10px; gap: 10px; grid-template-columns: auto minmax(0, 1fr); }
.wf-minilist .fa-shop + .fa-shop { margin-top: 0; }
.wf-minilist .fa-box { width: 20px; height: 20px; border-radius: 6px; }
.wf-minilist .fa-shop b { font-size: 14px; }
.fa-buy-chip em { font-style: normal; }
/* Ingredients, scaled by Cooking for */
.wf-ing { list-style: none; margin: 0 0 12px; padding: 0; }
.wf-ing li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 8px; margin: 0 -8px; border-bottom: 1px solid var(--fa-line); border-radius: 8px; font-size: 14px; transition: background-color 0.3s; }
.wf-ing li b { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--fa-accent-press); }
.wf-ing li.hl { background: var(--fa-accent-soft); }
.wf-ing--lg li { font-size: 15px; padding-block: 9px; }
/* How to make it: the step, big */
.wf-stepnum { display: flex; align-items: baseline; gap: 8px; }
.wf-stepnum b { font: 600 54px/1 var(--fa-display); color: var(--fa-accent); }
.wf-stepnum span { font-size: 14px; color: var(--fa-ink-soft); font-weight: 600; }
.wf-stepnum .wf-steptime { margin-left: auto; padding: 5px 10px; border-radius: 999px; background: var(--fa-surface-2); font-size: 12.5px; }
.wf-stepbar { display: flex; gap: 5px; margin: 12px 0 14px; }
.wf-stepbar i { flex: 1; height: 5px; border-radius: 5px; background: var(--fa-line); overflow: hidden; position: relative; }
.wf-stepbar i::after { content: ""; position: absolute; inset: 0; background: var(--fa-accent); transform-origin: 0 50%; transform: scaleX(var(--f, 0)); }
.wf-steptext { display: grid; min-height: 7.2em; }
.wf-steptext p { grid-area: 1 / 1; margin: 0; font: 500 21px/1.35 var(--fa-display); color: var(--fa-ink); visibility: hidden; }
.wf-steptext p:first-child { visibility: visible; }
.wf-steptext mark { background: var(--fa-accent-soft); color: var(--fa-accent-press); padding: 0 4px; border-radius: 6px; }
/* Cooked */
.wf-done { display: grid; gap: 8px; justify-items: start; padding: 4px 0 12px; }
.wf-done b { font: 600 19px/1.25 var(--fa-display); }
.wf-done small { font-size: 12.5px; color: var(--fa-ink-faint); }
.wf-leftover { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #e7f0f8; color: #3d6f99; font-size: 13.5px; font-weight: 600; }
/* Inside the phone: the method sheet slides up over the Ask screen */
.wf-msheet { position: absolute; left: 0; right: 0; top: 58px; bottom: 0; z-index: 7; padding: 4px 20px 0; border-radius: 26px 26px 0 0; background: var(--fa-surface); box-shadow: 0 -12px 40px rgb(0 0 0 / 0.16); visibility: hidden; }
.wf-msheet .wf-m-head h3 { font-size: 23px; }
.wf-update, .wf-writing { position: absolute; left: 20px; right: 20px; top: 148px; visibility: hidden; }
.wf-writing { display: flex; align-items: center; gap: 10px; color: var(--fa-ink-soft); font-size: 14px; }
.wf-recipe { position: absolute; left: 20px; right: 20px; top: 140px; bottom: 0; overflow: hidden; visibility: hidden; }
.wf-recipe h4 { margin: 4px 0 6px; font: 600 17px/1.2 var(--fa-display); }
.wf-steps--sm { gap: 6px; }
.wf-steps--sm li { font-size: 13.5px; padding: 9px 10px 9px 42px; }
.wf-steps--sm li::before { left: 10px; top: 8px; width: 22px; height: 22px; }
.wf-m-tip { display: flex; gap: 7px; margin: 10px 0; padding: 10px 12px; border-radius: 12px; background: var(--fa-accent-soft); color: var(--fa-accent-press); font-size: 13px; }
.wf-cook__toast { bottom: 92px; white-space: normal; width: 330px; justify-content: center; text-align: center; font-size: 13.5px; opacity: 0; }
.wf-cook__app .fa-meal { box-shadow: 0 2px 6px rgb(60 40 10 / 0.06); }
.wf-cook__saved { position: relative; }
.fa-mini.is-press, .fa-buy-chip.is-press, .wf-cooked.is-press, .wf-stepper i.is-press, .fa-btn.is-press { transform: scale(0.92); background: var(--fa-accent-soft); }
@media (max-width: 1100px) and (min-width: 761px) {
.wf-cook__stage { grid-template-columns: auto minmax(0, 1fr); }
.wf-cook__mid { grid-column: 1; grid-row: 1 / span 2; }
.wf-cook__col--l { grid-column: 2; grid-row: 1; }
.wf-cook__col--r { grid-column: 2; grid-row: 2; }
}
@media (max-width: 760px) {
.wf-cook__stage { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.wf-cook__mid, .wf-cook__col--l, .wf-cook__col--r { grid-column: 1; grid-row: auto; }
.wf-cook__mid { padding: 22px 0; display: grid; justify-items: center; }
.wf-cook__ph.phone { width: min(64vw, 260px); }
.wf-acts span { font-size: 12.5px; padding: 6px 12px 8px 6px; }
.wf-ccard { padding: 14px; }
.wf-steptext p { font-size: 19px; }
.wf-stepnum b { font-size: 44px; }
}
/* ---------- In detail: the standout features, one band each ---------- */
.wf-deephead { padding-block: clamp(36px, 5vw, 72px) 0; display: grid; gap: 10px; }
.wf-deephead h2 { font-size: clamp(42px, 5.4vw, 80px); letter-spacing: -0.045em; line-height: 1; }
.wf-deep { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding-block: clamp(28px, 4vw, 64px); }
.wf-deep--flip { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.wf-deep--flip .wf-deep__copy { order: 2; }
.wf-deep__copy { display: grid; gap: 14px; align-content: center; }
.wf-deep__copy h2 { font-size: clamp(40px, 4.6vw, 70px); letter-spacing: -0.045em; line-height: 1; }
.wf-step--in b { background: #18181a; color: #fff; }
.wf-step--in b svg { fill: none; stroke: currentColor; stroke-width: 2; }
.wf-deep__stage { position: relative; isolation: isolate; padding: clamp(40px, 4vw, 60px) clamp(18px, 3vw, 44px); }
.wf-deep__stage > .wf-panel { top: 0; }
.wf-call { position: absolute; z-index: 6; left: var(--x); top: var(--y); display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px 8px 9px; border-radius: 999px; background: #18181a; color: #fff; font: 500 12.5px/1.3 var(--font); white-space: nowrap; box-shadow: 0 14px 30px -12px rgb(0 0 0 / 0.5); }
.wf-call i { position: relative; width: 18px; height: 18px; flex: none; }
.wf-call i::before, .wf-call i::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--project-pen); }
.wf-call i::after { animation: credit-pulse 1.6s ease-out infinite; }
.wf-deep .wf-card { box-shadow: 0 2px 4px rgb(60 40 10 / 0.05), 0 30px 44px -26px rgb(30 50 40 / 0.4); }
/* Freshness */
.wf-fresh { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 16px; align-items: center; }
.wf-fresh__main { padding: 18px; rotate: -0.8deg; }
.wf-fresh__side { rotate: 1.2deg; }
.wf-fresh__now { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 10px; }
.wf-fresh__now b { font: 600 40px/1 var(--fa-display); letter-spacing: -0.02em; }
.wf-fpill { padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--fa-accent-soft); color: var(--fa-accent-press); transition: background-color 0.3s, color 0.3s; }
.wf-fpill.is-soon { background: var(--fa-warn-soft); color: var(--fa-warn); }
.wf-fpill.is-past { background: var(--fa-danger-soft); color: var(--fa-danger); }
.wf-fpill.is-frozen { background: #e7f0f8; color: #3d6f99; }
.wf-track { position: relative; height: 40px; margin: 0 6px; }
.wf-track::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 10px; border-radius: 10px; background: var(--fa-surface-2); box-shadow: inset 0 0 0 1px var(--fa-line); }
.wf-track__fill { position: absolute; left: 0; right: 0; top: 6px; height: 10px; border-radius: 10px; background: var(--fa-accent); transform-origin: 0 50%; transform: scaleX(0); transition: background-color 0.3s; }
.wf-track.is-soon .wf-track__fill { background: var(--fa-warn); }
.wf-track.is-past .wf-track__fill { background: var(--fa-danger); }
.wf-track.is-frozen .wf-track__fill { background: #4a86b8; }
.wf-track__dot { position: absolute; left: 0; top: 1px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--fa-accent), 0 4px 10px rgb(0 0 0 / 0.2); }
.wf-track i { position: absolute; top: 22px; width: 1px; height: 6px; background: var(--fa-line-strong); }
.wf-track i b { position: absolute; top: 7px; left: 0; translate: -50% 0; font: 600 10.5px/1 var(--fa-sans); color: var(--fa-ink-faint); }
.wf-track__ends { display: flex; justify-content: space-between; margin-top: 4px; font-size: 12.5px; font-weight: 600; color: var(--fa-ink-soft); }
.wf-track__ends span { display: inline-flex; align-items: center; gap: 5px; }
.wf-life { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wf-life li { display: flex; align-items: center; justify-content: space-between; padding: 7px 8px; margin: 0 -8px; border-radius: 10px; font-size: 13.5px; transition: background-color 0.3s; }
.wf-life li b { font-weight: 700; }
.wf-life li.on { background: var(--fa-accent-soft); }
/* Usuals */
.wf-learn { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: center; }
.wf-cal { rotate: -1deg; }
.wf-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.wf-cal__d { position: relative; aspect-ratio: 1; border-radius: 10px; background: var(--fa-surface-2); display: grid; place-items: start center; padding-top: 4px; transition: background-color 0.3s; }
.wf-cal__d small { font-size: 10px; font-weight: 700; color: var(--fa-ink-faint); }
.wf-cal__d::after { content: "Milk"; position: absolute; left: 50%; bottom: 5px; translate: -50% 0; font-size: 9.5px; font-weight: 700; color: #fff; opacity: 0; transition: opacity 0.3s; }
.wf-cal__d.on { background: #46618c; }
.wf-cal__d.on small { color: rgb(255 255 255 / 0.75); }
.wf-cal__d.on::after { opacity: 1; }
.wf-cal__count { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13.5px; color: var(--fa-ink-soft); font-weight: 600; }
.wf-cal__count b { font: 600 34px/1 var(--fa-display); color: var(--fa-ink); min-width: 22px; }
.wf-usual { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 999px; background: var(--fa-accent); color: #fff; font-size: 12.5px; font-weight: 700; }
.wf-learn__stack { display: grid; gap: 12px; rotate: 1deg; }
.wf-learn__stack .fa-item { box-shadow: 0 18px 30px -20px rgb(30 50 40 / 0.4); }
.wf-learn__stack .fa-staples { box-shadow: 0 18px 30px -20px rgb(30 50 40 / 0.4); }
/* The list files itself */
.wf-file { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; align-items: center; }
.wf-file__list { rotate: -1deg; }
.wf-file__list .fa-title { margin: 0; font-size: 26px; }
.wf-file__list .fa-shop { padding: 10px 12px; }
.wf-file__list .fa-shop.done b { color: var(--fa-ink-faint); text-decoration: line-through; }
.wf-file__dest { display: grid; gap: 10px; }
.wf-dest { box-shadow: 0 16px 26px -18px rgb(30 50 40 / 0.45); font-size: 18px; }
.wf-tickhead2 { display: inline-flex; justify-self: start; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; background: var(--fa-surface); border: 1px solid var(--fa-line); color: var(--fa-accent-press); font-size: 12.5px; font-weight: 700; }
.wf-fly { position: absolute; z-index: 8; left: 0; top: 0; padding: 7px 12px; border-radius: 999px; background: var(--fa-accent); color: #fff; font: 700 13px/1 var(--fa-sans); white-space: nowrap; pointer-events: none; box-shadow: 0 10px 20px -8px rgb(30 60 40 / 0.5); }
/* Offline + install */
.wf-off { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; }
.wf-off__phone { width: 300px; border-radius: 40px; border: 9px solid #111; background: var(--fa-bg); overflow: hidden; box-shadow: 0 40px 50px -28px rgb(30 20 20 / 0.5); }
.wf-off__bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 22px 6px; font-size: 14px; }
.wf-sig { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.wf-sig i { width: 3px; border-radius: 1px; background: #111; transition: background-color 0.3s; }
.wf-sig i:nth-child(1) { height: 4px; } .wf-sig i:nth-child(2) { height: 6px; } .wf-sig i:nth-child(3) { height: 9px; } .wf-sig i:nth-child(4) { height: 12px; }
.wf-sig.is-off i { background: #c9c3b8; }
.wf-off__body { padding: 6px 16px 22px; display: grid; gap: 8px; min-height: 330px; align-content: start; }
.wf-off__body .fa-title { margin: 4px 0 4px; font-size: 26px; }
.wf-sync { display: flex; gap: 9px; align-items: flex-start; padding: 11px 12px; border-radius: 13px; background: var(--fa-warn-soft); border: 1px solid #ecc7ab; color: var(--fa-warn); font-size: 12.5px; line-height: 1.4; }
.wf-sync span { color: var(--fa-ink); }
.wf-off .fa-shop.done b { color: var(--fa-ink-faint); text-decoration: line-through; }
.wf-off > .wf-net, .wf-off > .wf-a2hs { grid-column: 2; }
.wf-off { grid-template-rows: auto auto; }
.wf-off__phone { grid-row: 1 / span 2; }
.wf-net { display: grid; justify-items: start; align-self: end; }
.wf-net > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border-radius: 999px; font-size: 14px; font-weight: 700; box-shadow: 0 14px 26px -16px rgb(0 0 0 / 0.4); }
[data-netoff] { background: #fff; color: var(--fa-danger); }
[data-netoff] i { width: 9px; height: 9px; border-radius: 50%; background: var(--fa-danger); }
[data-neton] { background: var(--fa-accent); color: #fff; visibility: hidden; }
.wf-a2hs { align-self: start; max-width: 300px; padding: 8px 10px 12px; border-radius: 24px; background: var(--fa-surface); box-shadow: 0 30px 44px -26px rgb(0 0 0 / 0.4); rotate: 1.5deg; }
@media (max-width: 900px) {
.wf-deep, .wf-deep--flip { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-block: 22px 28px; }
.wf-deep--flip .wf-deep__copy { order: 0; }
.wf-deep__stage { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 22px 12px 18px; }
.wf-deep__stage > .fa { flex: 0 0 100%; margin-bottom: 8px; }
.wf-call { position: static; font-size: 12px; }
.wf-fresh, .wf-learn, .wf-file { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.wf-fresh__side { display: none; }
.wf-file { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 10px; }
.wf-file .fa-shop { padding: 8px 9px; gap: 8px; }
.wf-file .fa-shop b { font-size: 13.5px; }
.wf-file .fa-shop i { display: none; }
.wf-file .fa-box { width: 22px; height: 22px; }
.wf-dest { font-size: 15px; padding: 9px 10px; gap: 7px; }
.wf-file__dest .wf-card__k { font-size: 10px; }
.wf-tickhead2 { font-size: 11px; padding: 6px 9px; }
.wf-off { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.wf-off__phone { grid-row: auto; width: min(100%, 290px); }
.wf-off > .wf-net, .wf-off > .wf-a2hs { grid-column: 1; justify-self: center; }
.wf-a2hs { width: min(100%, 290px); }
}
/* ---------- Overlays: extra rebuilt pieces layered around each demo ---------- */
.wf-ov { position: absolute; z-index: 3; left: var(--x); top: var(--y); width: var(--w); pointer-events: none; filter: drop-shadow(0 18px 22px rgb(30 50 40 / 0.2)); }
.wf-ov > * { rotate: var(--r); }
.wf-ovchip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; background: var(--fa-surface); border: 1px solid var(--fa-line-strong); font-size: 13px; font-weight: 700; color: var(--fa-ink); white-space: nowrap; }
.wf-ovchip svg { color: var(--fa-accent); }
.wf-ovchip.is-green { background: var(--fa-accent); border-color: var(--fa-accent); color: #fff; }
.wf-ovchip.is-green svg { color: #fff; }
.wf-ovchip.is-blue { background: #e7f0f8; border-color: #c9dcee; color: #3d6f99; }
.wf-ovchip.is-blue svg { color: #4a86b8; }
.wf-ovchip.is-warn { background: var(--fa-warn-soft); border-color: #ecc7ab; color: #7c4a23; }
.wf-ovchip.is-warn svg { color: var(--fa-warn); }
.wf-ov .fa-item { padding: 11px 13px; }
.wf-ovphoto { position: relative; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: #e9dfcf; border: 4px solid #fff; }
.wf-ovphoto i { position: absolute; border-radius: 50%; filter: blur(12px); opacity: 0.9; }
.wf-box { position: absolute; border: 2px solid #fff; border-radius: 8px; box-shadow: 0 0 0 1px rgb(47 125 90 / 0.6); }
.wf-box em { position: absolute; left: -2px; top: -2px; translate: 0 -100%; padding: 2px 6px; border-radius: 6px 6px 6px 0; background: var(--fa-accent); color: #fff; font: 700 9.5px/1.3 var(--fa-sans); font-style: normal; white-space: nowrap; }
.wf-box.is-unsure { border-style: dashed; box-shadow: 0 0 0 1px rgb(191 100 50 / 0.6); }
.wf-box.is-unsure em { background: var(--fa-warn); }
@media (max-width: 760px) {
.wf-ov { left: var(--xs); top: var(--ys); zoom: 0.74; }
.wf-ov--desk { display: none; }
}
/* ---------- Tighter rhythm, and a thread joining the five steps ---------- */
.wf-feat { position: relative; padding-block: clamp(26px, 4vw, 64px); }
.wf .section { padding-block: clamp(40px, 6vw, 86px); }
.wf .section--tight { padding-block: clamp(26px, 4vw, 48px); }
.wf-hero + .wf-parade-sec { padding-top: 0; }
#snap { padding-top: clamp(20px, 3vw, 44px); }
/* the thread: a dashed line from one step to the next, with a dot where it lands */
.wf-feat + .wf-feat::before { content: ""; position: absolute; left: 50%; top: calc(-1 * clamp(14px, 2vw, 30px)); height: clamp(36px, 5vw, 70px); border-left: 2px dashed #d8cfbe; translate: -1px 0; }
.wf-feat + .wf-feat::after { content: ""; position: absolute; left: 50%; top: calc(clamp(36px, 5vw, 70px) - clamp(14px, 2vw, 30px)); width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--project-pen); box-shadow: 0 0 0 4px #fff; }
@media (max-width: 900px) {
.wf-feat, .wf-feat--flip { padding-block: 22px 26px; gap: 14px; }
.wf-feat + .wf-feat::before { left: 30px; top: -12px; height: 34px; }
.wf-feat + .wf-feat::after { left: 30px; top: 20px; }
.wf-feat + .wf-feat { padding-top: 40px; }
.wf .section { padding-block: 32px; }
.wf .section--tight { padding-block: 22px; }
}
/* ---------- In detail, take two: each band is one card, title ~38%, demo ~62% ---------- */
.wf-deepw { padding-block: clamp(8px, 1vw, 14px); }
.wf-deep, .wf-deep--flip { position: relative; isolation: isolate; grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); gap: clamp(20px, 3vw, 48px); align-items: center; padding: clamp(28px, 3.4vw, 52px); min-height: 560px; border-radius: var(--radius-l); overflow: hidden; }
.wf-deep--flip { grid-template-columns: minmax(0, 62fr) minmax(0, 38fr); }
.wf-deep::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.5; background-image: radial-gradient(circle, #fff 1.5px, transparent 2px); background-size: 24px 24px; pointer-events: none; }
.wf-deep--sky { background: radial-gradient(110% 120% at 85% 0%, #f6f8fd 0%, #eef2fa 60%, #dfe7f5 100%); }
.wf-deep--sage { background: radial-gradient(110% 120% at 15% 0%, #f5f9f3 0%, #eaf3e8 60%, #dcead9 100%); }
.wf-deep--sand { background: radial-gradient(110% 120% at 85% 0%, #faf5ec 0%, #f4ecdd 60%, #ece1cc 100%); }
.wf-deep--blush { background: radial-gradient(110% 120% at 15% 0%, #fcf4f2 0%, #f7ebe9 60%, #f0dcd8 100%); }
.wf-deep__copy { padding-inline: clamp(0px, 1vw, 12px); }
.wf-deep__stage { padding: 64px 0; }
.wf-deephead { padding-bottom: clamp(14px, 2vw, 24px); }
/* annotation chips with a leader line to the detail they mean (placed by the script) */
.wf-call { left: 0; top: 0; font-size: 14.5px; padding: 10px 16px 10px 11px; gap: 9px; }
.wf-call i { width: 20px; height: 20px; }
.wf-lead { position: absolute; left: var(--lx, 50%); top: var(--ly, 0); width: var(--ll, 0); height: 2px; background: #18181a; transform-origin: 0 50%; rotate: var(--la, 0deg); pointer-events: none; }
.wf-lead::after { content: ""; position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #18181a; box-shadow: 0 0 0 4px rgb(255 255 255 / 0.85); }
/* demos scaled up to fill their card */
.wf-off__phone { width: 330px; }
.wf-off__body { min-height: 430px; }
.wf-off__body .fa-shop { padding: 13px 14px; }
.wf-off .wf-net > span { font-size: 15px; padding: 12px 18px; }
.wf-a2hs { max-width: 330px; }
.wf-a2hs .wf-sheet__row { font-size: 16px; }
.wf-off { column-gap: 28px; }
.wf-learn__stack .fa-item, .wf-learn__stack .fa-staples { font-size: 1.04em; }
.wf-cal__d small { font-size: 11px; }
@media (max-width: 1100px) {
.wf-fresh { grid-template-columns: minmax(0, 1fr); }
.wf-fresh__side { display: none; }
.wf-off__phone { width: 290px; }
.wf-deep h2 { font-size: clamp(36px, 4.2vw, 56px); }
}
@media (max-width: 900px) {
.wf-deep, .wf-deep--flip { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 22px 14px 18px; gap: 10px; }
.wf-deep__stage { padding: 6px 0 0; }
.wf-call { font-size: 12.5px; padding: 8px 13px 8px 9px; }
.wf-lead { display: none; }
.wf-off__phone { width: min(100%, 290px); }
.wf-off__body { min-height: 330px; }
}
/* ==========================================================================
The timeline: the five steps and the standout features run down one line
in the middle (desktop), each item a demo on one side and its title on the
other, alternating. Phones: the same line and nodes on the left.
========================================================================== */
.wf-feat + .wf-feat::before, .wf-feat + .wf-feat::after { display: none; }
.wf-tl { position: relative; --tl-x: 50%; padding-block: clamp(12px, 2vw, 28px) clamp(24px, 3vw, 48px); }
.wf-tl__line { position: absolute; z-index: 0; left: var(--tl-x); top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #ebe4d8; pointer-events: none; }
.wf-tl__line i { position: absolute; inset: 0; background: linear-gradient(#2f7d5a, #7bb497); transform-origin: 50% 0; transform: scaleY(0); }
.wf-node { position: absolute; z-index: 4; left: var(--tl-x); top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 2px #18181a, 0 0 0 8px #fff; font: 700 13px/1 var(--font); color: #18181a; }
.wf-node svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.wf-node.is-lit { background: var(--project-pen); }
.wf-tl > section { position: relative; }
.wf-tl__head { text-align: center; display: grid; justify-items: center; padding-block: clamp(36px, 5vw, 64px) clamp(12px, 2vw, 24px); }
.wf-tl__head > :not(.wf-node) { position: relative; z-index: 2; background: #fff; padding-inline: 14px; }
.wf-tl__head h2 { padding-block: 6px; }
@media (min-width: 761px) {
/* each row: two equal sides of a centred column, the line between them */
.wf-tl .wf-feat:not(.wf-cook), .wf-tl .wf-deep { max-width: 1000px; margin-inline: auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 120px; align-items: center; padding-block: clamp(28px, 3.4vw, 56px); }
.wf-tl .wf-deepw { padding-block: 0; }
.wf-tl .wf-feat--flip:not(.wf-cook) .wf-feat__copy, .wf-tl .wf-deep--flip .wf-deep__copy { order: 2; }
.wf-tl .wf-feat:not(.wf-feat--flip) .wf-feat__copy, .wf-tl .wf-deep:not(.wf-deep--flip) .wf-deep__copy { justify-items: end; text-align: right; }
.wf-tl .wf-feat__copy h2, .wf-tl .wf-deep__copy h2 { font-size: clamp(38px, 4vw, 58px); }
/* the demos keep their compact phone composition, scaled up a touch */
.wf-tl .wf-demo { justify-self: center; width: 358px; zoom: 1.2; }
.wf-tl .wf-demo { min-height: 0; height: 520px; }
.wf-tl .wf-receipt-demo { height: 540px; }
.wf-tl .wf-panel { top: 10%; left: 6%; right: 6%; bottom: 2%; border-radius: 40% 46% 42% 48% / 38% 40% 44% 42%; opacity: 0.85; }
.wf-tl .wf-panel::before { display: none; }
.wf-tl .wf-demo .phone { width: 195px; bottom: 5%; }
.wf-tl .wf-demo .phone.at-l, .wf-tl .wf-soon .phone { left: 5%; }
.wf-tl .wf-pull { zoom: 0.64; }
.wf-tl .wf-scan .wf-pull--flag { right: 1%; top: 17%; }
.wf-tl .wf-soon .wf-pull--rows { right: 1%; top: 1%; }
.wf-tl .wf-receipt { left: 3%; top: 4%; bottom: auto; width: 62%; font-size: 11.5px; padding: 20px 16px 24px; }
.wf-tl .wf-found { right: 2%; top: auto; bottom: 3%; zoom: 0.72; }
.wf-tl .wf-note { font-size: 11.5px; }
.wf-tl .wf-scan .wf-note--a { left: auto; top: auto; right: 3%; bottom: 6%; }
.wf-tl .wf-soon .wf-note--a { right: 3%; bottom: 6%; }
.wf-tl .wf-list-demo .wf-note--a, .wf-tl .wf-receipt-demo .wf-note--a { display: none; }
.wf-tl .wf-ov { left: var(--xs); top: var(--ys); zoom: 0.74; }
.wf-tl .wf-ov--desk { display: none; }
.wf-tl .wf-list-demo { height: auto; display: flex; flex-direction: column; align-items: center; padding: 0 0 64px; }
.wf-tl .wf-list-demo .wf-panel { top: 30px; }
.wf-tl .wf-list-demo .wf-pull { position: relative; inset: auto; zoom: 0.8; --w: 330px; }
.wf-tl .wf-list-demo .wf-pull--staples { --r: -2deg; }
.wf-tl .wf-list-demo .wf-pull--list { margin-top: -4px; --r: 1.5deg; }
.wf-tl .wf-list-demo .wf-tickhead { white-space: nowrap; font-size: 14px; }
.wf-tl .wf-list-demo .wf-tickhead small { font-size: 10.5px; }
.wf-tl .wf-list-demo .fa-toast { left: 50% !important; bottom: 16px !important; font-size: 13px; }
/* standout features: no cards, the demo sits on its side with a soft blob behind */
.wf-tl .wf-deep { background: none; min-height: 0; border-radius: 0; overflow: visible; padding-inline: 0; gap: 0 120px; }
.wf-tl .wf-deep::before { display: none; }
.wf-tl .wf-deep__stage { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0; }
.wf-tl .wf-deep__stage::before { content: ""; position: absolute; z-index: -1; inset: 4% 2% 14%; border-radius: 44% 40% 46% 42% / 40% 44% 40% 46%; background: var(--blob, #eef2fa); opacity: 0.85; }
.wf-tl .wf-deep--sky { --blob: #e8eef9; } .wf-tl .wf-deep--sage { --blob: #e4efe1; } .wf-tl .wf-deep--sand { --blob: #f1e8d8; } .wf-tl .wf-deep--blush { --blob: #f5e5e2; }
.wf-tl .wf-deep__stage > .fa { flex: 0 0 100%; margin-bottom: 8px; }
.wf-tl .wf-call { position: static; font-size: 13px; padding: 8px 14px 8px 10px; }
.wf-tl .wf-lead { display: none; }
.wf-tl .wf-fresh, .wf-tl .wf-learn { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.wf-tl .wf-fresh__side { display: none; }
.wf-tl .wf-file { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 10px; }
.wf-tl .wf-file .fa-shop i { display: none; }
.wf-tl .wf-dest { font-size: 15px; padding: 9px 10px; gap: 7px; }
.wf-tl .wf-off { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.wf-tl .wf-off__phone { grid-row: auto; width: 270px; }
.wf-tl .wf-off__body { min-height: 320px; }
.wf-tl .wf-off > .wf-net, .wf-tl .wf-off > .wf-a2hs { grid-column: 1; justify-self: center; }
.wf-tl .wf-a2hs { width: 270px; }
/* the dinner centrepiece is a wider row: title and acts centred over the line */
.wf-tl .wf-cook { max-width: 1160px; margin-inline: auto; }
.wf-tl .wf-cook .wf-feat__copy { justify-items: center; text-align: center; position: relative; z-index: 2; }
.wf-tl .wf-cook .wf-feat__copy > *, .wf-tl .wf-acts span { position: relative; z-index: 2; }
.wf-tl .wf-cook .wf-feat__copy h2 { background: #fff; padding: 4px 12px; }
.wf-tl .wf-acts { justify-content: center; }
.wf-tl .wf-cook__mid { z-index: 2; }
.wf-tl .wf-cook .wf-node { top: 0; }
}
@media (min-width: 761px) and (max-width: 1040px) {
.wf-tl .wf-feat:not(.wf-cook), .wf-tl .wf-deep { column-gap: 80px; }
.wf-tl .wf-demo { zoom: 1; }
}
@media (max-width: 760px) {
.wf-tl { --tl-x: 18px; }
.wf-tl > section { padding-left: 40px !important; }
.wf-tl .wf-node { top: 34px; width: 34px; height: 34px; margin: 0 0 0 -17px; font-size: 11px; box-shadow: 0 0 0 2px #18181a, 0 0 0 5px #fff; }
.wf-tl .wf-deep, .wf-tl .wf-deep--flip { padding-inline: 10px; }
.wf-tl__head { text-align: left; justify-items: start; }
.wf-tl__head > :not(.wf-node) { padding-inline: 0; }
.wf-tl .wf-cook__ph.phone { width: min(58vw, 240px); }
}
.wf-tl__head .wf-node { top: 28px; }
.wf-tl__head { padding-top: clamp(84px, 8vw, 110px); }
.wf-recipe .wf-steps--sm li { font-size: 14.5px; }
.wf-recipe .wf-m-time { margin-bottom: 4px; }
/* Dinner on phones: one screen. A smaller phone on the left, this act's cards
overlapping it on the right, so both are in view together */
@media (max-width: 760px) {
.wf-tl .wf-cook__stage { display: grid; grid-template-columns: 40% 16% minmax(0, 1fr); grid-template-rows: auto auto; gap: 8px 0; align-items: center; }
.wf-tl .wf-cook__mid { grid-column: 1 / span 2; grid-row: 1 / span 2; padding: 10px 0; z-index: 1; }
.wf-tl .wf-cook__mid .wf-panel { inset: 0 -10px 0 -10px; }
.wf-tl .wf-cook__ph.phone { width: 100%; }
.wf-tl .wf-cook__col--l { grid-column: 2 / span 2; grid-row: 1; align-self: end; z-index: 3; }
.wf-tl .wf-cook__col--r { grid-column: 2 / span 2; grid-row: 2; align-self: start; z-index: 3; }
.wf-tl .wf-ccard { padding: 10px 10px 8px; border-radius: 15px; font-size: 13px; }
.wf-tl .wf-ccard .wf-card__k { margin-bottom: 6px; font-size: 9.5px; }
.wf-tl .wf-hrow { gap: 6px; padding: 5px 0; }
.wf-tl .wf-hrow b { font-size: 12.5px; margin-bottom: 1px; }
.wf-tl .wf-hrow .fa-meta { font-size: 10.5px; gap: 4px; }
.wf-tl .wf-hrow .fa-tag { display: none; }
.wf-tl .wf-tickbox { width: 18px; height: 18px; }
.wf-tl .wf-tickbox svg { width: 11px; height: 11px; }
.wf-tl .wf-usesup { font-size: 9.5px; padding: 3px 6px; }
.wf-tl .wf-hused { padding: 4px 6px; font-size: 9.5px; }
.wf-tl .wf-hused svg { width: 12px; height: 12px; }
.wf-tl .wf-ccard .fa-buy { font-size: 11px; margin-bottom: 8px !important; }
.wf-tl .wf-ccard .fa-buy-chip { font-size: 11px; padding: 4px 8px; }
.wf-tl .wf-minilist { padding: 8px; gap: 5px; }
.wf-tl .wf-minilist h3 { font-size: 14px; }
.wf-tl .wf-minilist .fa-shop { padding: 5px 7px; }
.wf-tl .wf-minilist .fa-shop b { font-size: 12px; }
.wf-tl .wf-ing { margin: 0; }
.wf-tl .wf-ing li, .wf-tl .wf-ing--lg li { font-size: 12.5px; padding: 4px 6px; margin: 0 -6px; }
.wf-tl .wf-stepnum b { font-size: 30px; }
.wf-tl .wf-stepnum span { font-size: 11.5px; }
.wf-tl .wf-stepnum .wf-steptime { font-size: 10.5px; padding: 3px 7px; }
.wf-tl .wf-stepbar { margin: 7px 0 8px; gap: 3px; }
.wf-tl .wf-stepbar i { height: 4px; }
.wf-tl .wf-steptext { min-height: 4.2em; }
.wf-tl .wf-steptext p { font-size: 15px; line-height: 1.3; }
.wf-tl .wf-done { padding-bottom: 8px; gap: 5px; }
.wf-tl .wf-done b { font-size: 14px; }
.wf-tl .wf-leftover { font-size: 11.5px; padding: 7px 9px; }
.wf-tl .wf-cook__col--l .wf-ccard { rotate: -1deg; }
.wf-tl .wf-cook__col--r .wf-ccard { rotate: 1deg; }
}
/* Offline: a real phone (the site's .phone frame), the chips tucked beside it */
.wf-off__ph.phone { position: relative; width: 260px; box-shadow: none; filter: drop-shadow(0 30px 40px rgb(30 20 20 / 0.28)); grid-row: 1 / span 2; }
.wf-off__body { display: block; min-height: 0; padding: 8px 18px 0; }
.wf-off__body .wf-sync { margin-bottom: 4px; font-size: 13px; }
.wf-off__body .fa-shop { padding: 12px 14px; margin-bottom: 8px; }
.wf-off__body .fa-shop + .fa-shop { margin-top: 0; }
.wf-tl .wf-off__ph.phone { width: 240px; grid-row: auto; }
.wf-tl .wf-off { grid-template-columns: auto auto; grid-template-rows: auto auto; justify-content: center; justify-items: start; column-gap: 0; }
.wf-tl .wf-off__ph.phone { grid-column: 1; grid-row: 1 / span 2; }
.wf-tl .wf-off > .wf-net { grid-column: 2; grid-row: 1; justify-self: start; align-self: end; margin: 0 0 14px -44px; position: relative; z-index: 3; }
.wf-tl .wf-off > .wf-a2hs { grid-column: 2; grid-row: 2; justify-self: start; align-self: start; width: 210px; margin-left: -60px; position: relative; z-index: 3; }
.wf-tl .wf-a2hs .wf-sheet__row { font-size: 13.5px; padding: 10px 11px; }
@media (max-width: 760px) {
.wf-tl .wf-off__ph.phone { width: 52vw; max-width: 220px; }
.wf-tl .wf-off > .wf-a2hs { width: 46vw; max-width: 200px; margin-left: -40px; }
.wf-tl .wf-off > .wf-net { margin-left: -30px; }
.wf-tl .wf-off .wf-net > span { font-size: 12px; padding: 8px 12px; }
.wf-tl .wf-a2hs .wf-sheet__row { font-size: 12px; padding: 8px 9px; }
}
@media (max-width: 760px) {
.wf-tl .wf-cook .wf-feat__copy { margin-bottom: 8px; }
.wf-tl .wf-acts { flex-wrap: nowrap; gap: 5px; margin-bottom: 10px; }
.wf-tl .wf-acts span { font-size: 11.5px; padding: 5px 9px 7px 5px; gap: 5px; white-space: nowrap; }
.wf-tl .wf-acts b { width: 19px; height: 19px; font-size: 10px; }
.wf-tl .wf-acts i { left: 10px; right: 10px; }
}
/* the shopping photo: a real one, crisp */
.wf-ovphoto img, .fa-photo__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wf-ovphoto { aspect-ratio: 640 / 464; }
.fa-photo { background: #efe7da; }
.wf-box em { left: 3px; top: 3px; translate: none; border-radius: 5px; font-size: 9px; padding: 1px 5px; }
/* ---------- Hierarchy: section headings stay big; titles inside the timeline are
smaller, with a thin underline in their colour instead of the marker ---------- */
.wf-tl .wf-feat__copy h2, .wf-tl .wf-deep__copy h2 { font-size: clamp(28px, 3.3vw, 48px); letter-spacing: -0.035em; line-height: 1.05; }
.wf-tl .wf-cook .wf-feat__copy h2 { font-size: clamp(30px, 3.6vw, 52px); }
.wf-tl .wf-feat__copy .hl, .wf-tl .wf-deep__copy .hl { padding: 0; margin: 0; border-radius: 0; background-position: 0 96%; background-size: 0% 0.2em; }
.wf-tl .wf-feat__copy .hl.is-lit, .wf-tl .wf-deep__copy .hl.is-lit, .no-js .wf-tl .wf-feat__copy .hl, .no-js .wf-tl .wf-deep__copy .hl { background-size: 100% 0.2em; }
.wf-tl .wf-feat__copy .wf-sub, .wf-tl .wf-deep__copy .wf-sub { font-size: 14.5px; }
/* the standout heading: room around it and a short rule before the first item */
.wf-tl__head { padding-bottom: clamp(28px, 3vw, 44px); }
.wf-tl__head::after { content: ""; position: relative; z-index: 2; display: block; width: 64px; height: 3px; margin-top: 18px; border-radius: 3px; background: #18181a; }
/* the step card hugs its text */
.wf-steptext, .wf-tl .wf-steptext { min-height: 0; }
/* Usuals: "Running low" takes the Milk card's place instead of needing room below it */
.wf-learn__stack > [data-low] { transform-origin: 50% 0; }
/* Offline on phones: a proper phone, the chips overlapping its edges, nothing reserved */
@media (max-width: 760px) {
.wf-tl .wf-off { position: relative; display: block; width: fit-content; margin-inline: auto; padding: 6px 0 4px; }
.wf-tl .wf-off__ph.phone { width: 60vw; max-width: 236px; }
.wf-tl .wf-off > .wf-net { position: absolute; z-index: 3; right: -26%; top: 20%; margin: 0; }
.wf-tl .wf-off > .wf-a2hs { position: absolute; z-index: 3; right: -30%; bottom: 8%; margin: 0; width: 58vw; max-width: 210px; }
}
@media (max-width: 760px) {
.wf-tl .wf-off { width: 100%; margin-inline: 0; }
.wf-tl .wf-off__ph.phone { width: 64%; max-width: 236px; margin-left: 2%; }
.wf-tl .wf-off > .wf-net { right: 0; top: 16%; }
.wf-tl .wf-off > .wf-a2hs { right: 0; bottom: 10%; width: 56%; }
}
.coach-ico svg { display: block; margin-top: 1px; color: var(--wf-green, #2f7d5a); }
/* ===== home-extra.css ===== */
/* home-extra.css — app-specific additions on top of the ported case-study CSS.
Covers: the brand lockup in the nav/footer, and the four carry-over sections
(food-waste stat, pricing, FAQ, blog strip). Everything leans on the page's
own --fa-* tokens (defined on .wf) so it matches the reference design. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Crisper, more rectangular floating cards (the 18–20px radius read as oval). */
.wf .wf-card, .wf .wf-ccard, .wf .wf-mcard { border-radius: 12px; }
/* ---------- Brand lockup (nav + footer) ---------- */
.wf-navmark { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; line-height: 1; }
.wf-navmark__leaf { width: 26px; height: 26px; color: #2f7d5a; flex: none; }
.wf-navmark__bt { display: flex; flex-direction: column; }
.wf-navmark__bt small { font: italic 500 11px/1 "Fraunces", Georgia, serif; color: #5a8a72; }
.wf-navmark__bt b { font: 600 20px/1 "Fraunces", Georgia, serif; color: #276848; letter-spacing: -0.01em; margin-top: 2px; }
.wf-navmark--foot .wf-navmark__bt b { font-size: 22px; }
/* Make the nav CTA the brand green (base.css makes it ink by default) */
.site-nav__links .is-cta { background: #2f7d5a; border-color: #2f7d5a; color: #fff; }
.site-nav__links .is-cta:hover { background: #28694c; }
/* base.css hides the nav CTA below 680px (the portfolio used a burger there,
which we don't carry over) — keep "Get the app" visible on phones instead. */
@media (max-width: 680px) {
.site-nav__links .is-cta { display: inline-flex !important; padding: 9px 15px; font-size: 13px; white-space: nowrap; }
}
/* ---------- Hero headline: smaller on desktop so it runs over fewer lines.
(type.css drives the hero h1 at up to 104px; :root .wf … outranks it.) ---------- */
@media (min-width: 901px) {
:root .wf .cs-hero h1 { font-size: clamp(46px, 4.2vw, 60px); letter-spacing: -0.035em; line-height: 1.04; }
/* give the copy column a touch more room so lines pack tighter */
.wf .cs-hero__grid { grid-template-columns: minmax(0, 5.6fr) minmax(0, 6.4fr); }
}
/* ---------- Hero phones: a bit bigger on desktop, and even out the front
phone so it doesn't tower (bigger widths, centre lowered + sides raised). ---------- */
@media (min-width: 901px) {
.wf .wf-stage .wf-ph--l { left: 2%; top: 13%; width: 30%; }
.wf .wf-stage .wf-ph--c { left: 33%; top: 8%; width: 33%; }
.wf .wf-stage .wf-ph--r { left: 68%; top: 13%; width: 30%; }
}
/* ---------- Hero QR (desktop only) — "get it on your phone" ---------- */
.wf-hero-qr { display: none; }
@media (min-width: 901px) {
.wf-hero-qr { display: flex; align-items: center; gap: 15px; margin-top: 24px; padding: 12px 20px 12px 12px; width: fit-content; background: var(--fa-surface); border: 1px solid var(--fa-line); border-radius: 18px; box-shadow: 0 20px 44px -30px rgba(60,40,20,0.55); }
.wf-hero-qr__code { flex: none; width: 76px; height: 76px; display: block; padding: 6px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--fa-line); }
.wf-hero-qr__code img { width: 100%; height: 100%; display: block; }
.wf-hero-qr__txt { display: flex; flex-direction: column; gap: 3px; max-width: 24ch; }
.wf-hero-qr__txt b { font: 600 15.5px/1.25 var(--fa-sans); color: var(--fa-ink); }
.wf-hero-qr__txt span { font-size: 13px; line-height: 1.45; color: var(--fa-ink-soft); }
}
/* ---------- Centred section heads for the injected sections ---------- */
.wf .section-head.wf-ch { justify-items: center; text-align: center; max-width: 760px; margin-inline: auto; }
/* ---------- Shared button ---------- */
.wf-xbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; border-radius: 999px; font: 600 15px/1 var(--fa-sans); text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: transform 0.2s, background 0.2s, box-shadow 0.2s, border-color 0.2s; }
.wf-xbtn--primary { background: var(--fa-accent); color: var(--fa-on-accent); box-shadow: 0 14px 30px -14px rgba(47,125,90,0.7); }
.wf-xbtn--primary:hover { background: var(--fa-accent-press); transform: translateY(-2px); }
.wf-xbtn--ghost { background: var(--fa-surface); color: var(--fa-accent-press); border-color: var(--fa-line-strong); }
.wf-xbtn--ghost:hover { border-color: var(--fa-accent); transform: translateY(-2px); }
/* ---------- Food-waste stat ---------- */
.wf-waste { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(28px,5vw,72px); align-items: center; }
.wf-waste__fig { font: 800 clamp(66px,11vw,134px)/0.9 var(--font); letter-spacing: -0.04em; color: var(--fa-accent); margin-bottom: 8px; }
.wf-waste__copy h2 { font-size: clamp(32px,4.6vw,58px); line-height: 1.04; }
.wf-waste__copy .wf-sub { margin-top: 14px; max-width: 42ch; }
.wf-waste__copy a { color: var(--fa-accent-press); text-decoration: underline; text-underline-offset: 2px; }
.wf-waste__card .wf-card { background: var(--fa-surface); border: 1px solid var(--fa-line); border-radius: 14px; padding: 18px 18px 16px; box-shadow: 0 30px 55px -34px rgba(60,40,20,0.5); }
.wf-waste__card .fa-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.wf-waste__nudge { display: flex; align-items: center; gap: 8px; margin: 14px 2px 2px; font-size: 13px; color: var(--fa-ink-soft); }
.wf-waste__nudge svg { color: var(--fa-accent); }
@media (max-width: 900px) { .wf-waste { grid-template-columns: 1fr; gap: 30px; } }
/* ---------- Pricing ---------- */
.wf-plans { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; max-width: 820px; margin: clamp(28px,4vw,48px) auto 0; align-items: stretch; }
.wf-plan { position: relative; display: flex; flex-direction: column; gap: 14px; background: var(--fa-surface); border: 1px solid var(--fa-line); border-radius: 24px; padding: 30px 28px; box-shadow: 0 24px 46px -34px rgba(60,40,20,0.5); }
.wf-plan--feat { border-color: var(--fa-accent); box-shadow: 0 34px 64px -34px rgba(47,125,90,0.5); }
.wf-plan__badge { position: absolute; top: -13px; right: 22px; background: var(--fa-accent); color: #fff; font: 700 12px/1 var(--fa-sans); padding: 7px 13px; border-radius: 999px; }
.wf-plan__tag { font: 700 13px/1 var(--fa-sans); text-transform: uppercase; letter-spacing: 0.08em; color: var(--fa-ink-soft); }
.wf-plan__amt { font: 800 42px/1 var(--font); letter-spacing: -0.03em; color: var(--fa-ink); margin: 2px 0 6px; }
.wf-plan__amt small { font: 600 15px/1 var(--fa-sans); color: var(--fa-ink-soft); }
.wf-plan__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; flex: 1; }
.wf-plan__list li { position: relative; padding-left: 28px; font-size: 15px; line-height: 1.5; color: var(--fa-ink-soft); }
.wf-plan__list li::before { content: ""; position: absolute; left: 0; top: 1px; width: 19px; height: 19px; border-radius: 50%; background: var(--fa-accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f7d5a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5 9-10'/%3E%3C/svg%3E") center / 12px no-repeat; }
.wf-plan .wf-xbtn { margin-top: 4px; }
@media (max-width: 680px) { .wf-plans { grid-template-columns: 1fr; } }
/* ---------- FAQ ---------- */
.wf-faqs { max-width: 760px; margin: clamp(24px,4vw,40px) auto 0; display: grid; gap: 10px; }
.wf-faq { background: var(--fa-surface); border: 1px solid var(--fa-line); border-radius: 16px; overflow: hidden; }
.wf-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 20px; font: 600 16.5px/1.35 var(--fa-sans); color: var(--fa-ink); cursor: pointer; list-style: none; }
.wf-faq summary::-webkit-details-marker { display: none; }
.wf-faq__pm { position: relative; width: 16px; height: 16px; flex: none; }
.wf-faq__pm::before, .wf-faq__pm::after { content: ""; position: absolute; background: var(--fa-accent); border-radius: 2px; }
.wf-faq__pm::before { left: 0; right: 0; top: 7px; height: 2px; }
.wf-faq__pm::after { top: 0; bottom: 0; left: 7px; width: 2px; transition: transform 0.25s var(--ease-out, ease); }
.wf-faq[open] .wf-faq__pm::after { transform: scaleY(0); }
.wf-faq__a { padding: 0 20px 18px; font-size: 15px; line-height: 1.6; color: var(--fa-ink-soft); }
/* ---------- Blog strip ---------- */
.wf-blog { margin-top: clamp(24px,4vw,40px); }
.wf-blog__row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 300px); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 2px 20px; scrollbar-width: thin; scrollbar-color: var(--fa-line-strong) transparent; }
.wf-blog__row::-webkit-scrollbar { height: 8px; }
.wf-blog__row::-webkit-scrollbar-thumb { background: var(--fa-line-strong); border-radius: 999px; }
.wf-post { scroll-snap-align: start; display: flex; flex-direction: column; background: var(--fa-surface); border: 1px solid var(--fa-line); border-radius: 20px; overflow: hidden; text-decoration: none; color: inherit; transition: transform 0.2s, box-shadow 0.2s; }
.wf-post:hover { transform: translateY(-4px); box-shadow: 0 26px 46px -30px rgba(60,40,20,0.5); }
.wf-post__img { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--fa-surface-2); }
.wf-post__img img { width: 100%; height: 100%; object-fit: cover; }
.wf-post__body { display: flex; flex-direction: column; gap: 8px; padding: 15px 16px 17px; flex: 1; }
.wf-post__tag { font: 700 11px/1 var(--fa-sans); text-transform: uppercase; letter-spacing: 0.05em; color: var(--fa-accent); }
.wf-post__body b { font: 600 18px/1.25 var(--fa-display); color: var(--fa-ink); letter-spacing: -0.01em; }
.wf-post__more { margin-top: auto; font: 600 13.5px/1 var(--fa-sans); color: var(--fa-accent-press); }
.wf-blog__more { text-align: center; margin-top: 18px; }
/* ===== 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); }
/* ===== jb-credit.css ===== */
/* "Designed by JB Design" block, below the footer. In John Bell Design's branding, not the Fridge's. */
.jb-credit {
--jb-ink: #18181a; --jb-white: #fafaf8; --jb-grey: #a3a3a0; --jb-line: rgb(250 250 248 / 0.14); --jb-yellow: #fff04d;
background: var(--jb-ink); color: var(--jb-white);
font-family: 'Poppins', system-ui, sans-serif; -webkit-font-smoothing: antialiased;
padding: clamp(40px, 7vw, 72px) 0 clamp(28px, 4vw, 40px);
}
.jb-credit__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 28px 48px; }
.jb-credit__by { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; color: var(--jb-grey); }
.jb-credit__by svg { width: 30px; height: 30px; flex: none; }
.jb-credit__by b { color: var(--jb-white); font-weight: 600; }
.jb-credit h2 { margin: 0; font-family: inherit; font-size: clamp(30px, 4.6vw, 52px); font-weight: 600; line-height: 1.05; letter-spacing: -0.04em; color: var(--jb-white); }
.jb-credit h2 mark { background: none; color: var(--jb-ink); padding: 0 0.12em; margin: 0 -0.04em;
background-image: linear-gradient(transparent 12%, var(--jb-yellow) 12%, var(--jb-yellow) 92%, transparent 92%); border-radius: 0.12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.jb-credit__lede { max-width: 560px; margin: 18px 0 0; font-size: 16px; line-height: 1.6; color: #d6d6d4; }
.jb-credit__ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.jb-credit__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px;
font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: translate 0.25s cubic-bezier(.2,.8,.2,1), background-color 0.2s, box-shadow 0.2s; }
.jb-credit__btn--main { background: var(--jb-yellow); color: var(--jb-ink); }
.jb-credit__btn--main:hover { translate: 0 -2px; box-shadow: 0 8px 24px rgb(255 240 77 / 0.25); }
.jb-credit__btn--ghost { color: var(--jb-white); box-shadow: inset 0 0 0 1.5px var(--jb-line); }
.jb-credit__btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--jb-white); }
.jb-credit__btn svg { width: 16px; height: 16px; }
.jb-credit__btn:focus-visible { outline: 2px solid var(--jb-yellow); outline-offset: 3px; }
.jb-credit__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 28px; margin-top: clamp(32px, 5vw, 48px); padding-top: 20px; border-top: 1px solid var(--jb-line); font-size: 13.5px; color: var(--jb-grey); }
.jb-credit__contact { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.jb-credit__contact a { color: var(--jb-white); text-decoration: none; }
.jb-credit__contact a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
.jb-credit__top { grid-template-columns: 1fr; }
.jb-credit__btn { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .jb-credit__btn { transition: none; } }