/* ===================================================================== * VDS 2026 HOMEPAGE — section styles * Loaded via wp_enqueue_style('vds26-home') with a dependency on * 'vds26-shell', so the sitewide foundation (webfonts, tokens, a11y, * motion, announcement bar, header/mega-nav) is already in the cascade * before anything here runs. Homepage only. * * Moved OUT of this file on 2026-09-10 (Section 2): webfonts, design * tokens, accessibility primitives, reduced-motion, announcement bar. * They are sitewide and now live in vds26-shell.css. * ===================================================================== */ /* --------------------------------------------------------------------- * 3. BRIDGE TO THE SHELL'S OWN VARIABLES * The shell's colour classes (.accent1 .dark1 .light2 …) read --accent1 * … --white. Those are now the real VDS palette, set at Theme Options. * Two exceptions: --black and --white are HARDCODED in * options-page-stylesheet.php (lines 707 and 712) and cannot be set from * the options page, so they are re-pointed here. --black in particular * matters: color.css forces every heading, p and li to it, and pure #000 * is not GLP's ink. * ------------------------------------------------------------------- */ :root{ --black:var(--vds-ink); --white:var(--vds-bg); --uihover:var(--vds-red-deep); } /* --------------------------------------------------------------------- * 4. DARK-MODE REPAIR FOR THE SHELL * color.css sets `h1..h6, body, p, li { color: var(--black) }` with bare * element selectors. Re-pointing --black above carries most of it, but the * shell also paints backgrounds white in several places. These are the * surfaces the homepage actually exposes. * ------------------------------------------------------------------- */ body.home{background:var(--vds-bg);color:var(--vds-ink)} body.home #content{background:var(--vds-bg)} .bakery.home{background:var(--vds-bg)} /* --------------------------------------------------------------------- * 5. BASE — GLP's typographic reset, scoped to this page * Text properties carry `body #content` because the theme-options sheet * targets that exact specificity. It loads FIRST, so matching it and * arriving later is enough; no !important needed. Verified against real * load order, not assumed. * ------------------------------------------------------------------- */ body.home{font-family:var(--vds-font-body);font-size:var(--vds-step-0);line-height:1.62;-webkit-font-smoothing:antialiased} body #content .bakery.home h1, body #content .bakery.home h2, body #content .bakery.home h3{font-family:var(--vds-font-display);line-height:1.1;font-weight:600;color:var(--vds-ink);letter-spacing:-.02em;margin:0 0 .5em} body #content .bakery.home h1{font-size:var(--vds-step-4)} body #content .bakery.home h2{font-size:var(--vds-step-3)} body #content .bakery.home h3{font-size:var(--vds-step-2)} body #content .bakery.home p{font-family:var(--vds-font-body);font-size:var(--vds-step-0);color:var(--vds-ink);margin:0 0 1rem} body #content .bakery.home a{color:var(--vds-accent-ink);text-decoration:none} body #content .bakery.home a:hover{text-decoration:underline} .bakery.home img,.bakery.home svg{max-width:100%;display:block} /* option-page-styles.css ships `body, body p, body li, body span, … { font-family:…; font-size:16px; line-height:24px; letter-spacing:0 }` at (0,0,2). A inside a heading therefore does NOT inherit the heading's type — it silently drops to 16px/24px body text. Caught in Section 3 on the hero H1's gradient span, which rendered at body size next to a 56px headline. This bites EVERY heading span in the build, so it is fixed once here rather than per section. Added Section 3. */ body #content .bakery.home h1 span, body #content .bakery.home h2 span, body #content .bakery.home h3 span{ font:inherit;letter-spacing:inherit;text-transform:inherit} /* --------------------------------------------------------------------- * 8. LAYOUT PRIMITIVES * .bakery prefix per the CSS policy: layout/spacing/sizing/background. * ------------------------------------------------------------------- */ .bakery.home .vds-container{width:100%;max-width:var(--vds-container);margin-inline:auto;padding-inline:var(--vds-gutter)} .bakery.home .vds-container-wide{max-width:var(--vds-container-wide)} .bakery.home .vds-section{padding-block:var(--vds-section-y)} .bakery.home .vds-section-alt{background:var(--vds-bg-alt)} /* WPBakery resets. The builder gives every row 15px side padding and .wpb_content_element a 35px bottom margin; both fight GLP's rhythm. */ .bakery.home .vc_row{margin-left:0;margin-right:0} .bakery.home .wpb_column>.vc_column-inner{padding-left:0;padding-right:0} .bakery.home .wpb_content_element{margin-bottom:0} .bakery.home .wpb_text_column:last-child{margin-bottom:0} /* ===================================================================== * SECTION STYLES APPENDED BELOW AS EACH SECTION SHIPS * ===================================================================== */ /* ===================================================================== * SHARED PRIMITIVES INTRODUCED BY SECTION 3 * The comp uses .eyebrow ten times on the homepage and .grad-text in * several headings, so these are section-agnostic. Later sections reuse * them — do not re-declare. * ------------------------------------------------------------------- */ body #content .bakery.home .vds-eyebrow{ display:inline-flex;align-items:center;gap:.5rem; font-family:var(--vds-font-display);font-weight:600;font-size:var(--vds-step--1); letter-spacing:.14em;text-transform:uppercase;color:var(--vds-accent-ink); margin:0 0 1rem} .bakery.home .vds-eyebrow::before{ content:"";width:1.6rem;height:2px;background:var(--vds-grad-brand);border-radius:2px;flex:none} @media (max-width:479px){ /* 35-char eyebrow at a 359px column: tighten the tracking rather than let it break to two lines. */ body #content .bakery.home .vds-eyebrow{letter-spacing:.08em;gap:.4rem} .bakery.home .vds-eyebrow::before{width:1.1rem} } body #content .bakery.home .vds-grad-text{ background:var(--vds-grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent} /* Link-colour bridge. The shell defines .vds-btn colours at (0,1,0); `body #content .bakery.home a` (1,3,1) from §5 above beats it, so the button colours are restated here at matching specificity. Section 19's footer buttons sit OUTSIDE #content and take the shell's rule directly. */ body #content .bakery.home a.vds-btn{text-decoration:none} body #content .bakery.home a.vds-btn:hover{text-decoration:none} body #content .bakery.home a.vds-btn-primary, body #content .bakery.home a.vds-btn-primary:hover{color:#fff} body #content .bakery.home a.vds-btn-secondary{color:var(--vds-bg)} body #content .bakery.home a.vds-btn-secondary:hover{color:#fff} /* ===================================================================== * SECTION 3 — HERO * Comp source: build/glp-comp/homepage.html `section.hero` + styles.css * `.hero`, `.hero-grid`, `.hero-subhead`, `.hero-cta`, `.hero-proof`, * `.growth-flow`. Two-column split, live-text diagram, NO background * image and no image of any kind — so the hero contributes zero CLS and * the LCP element is the H1 (its face is already preloaded). * * Structure WPBakery actually emits: * section.vc_section.vds-hero * > .vc_row.vds-hero-row * > .wpb_column.vds-hero-col * > .vc_column-inner <- the 1200px container * > .wpb_wrapper <- the grid * > .wpb_text_column <- copy (grid child 1) * > .wpb_raw_code <- diagram (grid child 2) * ------------------------------------------------------------------- */ .bakery.home .vds-hero{position:relative;overflow:hidden;background:var(--vds-hero-bg); padding-block:clamp(2.25rem,1.2rem+3.4vw,4rem)} /* Soft brand glow behind the hero — GLP `.hero::after`. */ .bakery.home .vds-hero::after{content:"";position:absolute;top:-20%;right:-6%; width:620px;height:620px;max-width:60vw;border-radius:50%; background:radial-gradient(circle,rgba(237,71,83,.16),transparent 66%); pointer-events:none;z-index:0} /* The theme sets `.bakery div.vc_row{display:flex}` (0,2,1); this is (0,3,0). */ .bakery.home .vds-hero .vds-hero-row{display:block;position:relative;z-index:1;width:100%} .bakery.home .vds-hero .vds-hero-col{float:none;width:100%;padding:0} /* NO max-width / padding-inline here. WPBakery injects its own `.container` inside every row, and the theme already sizes it to 92% / max 1200px — the exact container this build wants. Declaring the gutter again on .vc_column-inner double-padded the hero (content started at x=155 instead of x=120 at 1440). Every later section gets the container for free from the row; do not re-add it. */ .bakery.home .vds-hero .vc_column-inner{width:100%} .bakery.home .vds-hero .vc_column-inner>.wpb_wrapper{display:grid;grid-template-columns:1fr; gap:clamp(1.75rem,3vw,3.5rem);align-items:center} @media (min-width:1024px){ .bakery.home .vds-hero .vc_column-inner>.wpb_wrapper{grid-template-columns:1.05fr .95fr} } /* --- Hero copy ---------------------------------------------------- */ body #content .bakery.home .vds-hero h1{ font-size:clamp(2.3rem,1.3rem + 3.2vw,3.5rem);line-height:1.04;letter-spacing:-.015em; color:var(--vds-hero-ink);margin:0 0 .5rem} body #content .bakery.home .vds-hero-subhead{ font-family:var(--vds-font-display);font-weight:600; font-size:clamp(1.05rem,.9rem + .8vw,1.35rem);line-height:1.3; color:var(--vds-hero-ink);letter-spacing:0;margin:.2rem 0 .2rem} body #content .bakery.home .vds-hero-lead{ font-size:1.02rem;line-height:1.45;color:var(--vds-hero-ink-2); margin:.9rem 0 0;max-width:46ch} body #content .bakery.home .vds-hero-lead-2{font-weight:600;color:var(--vds-hero-ink)} /* --- CTAs ---------------------------------------------------------- */ .bakery.home .vds-hero-cta{display:flex;flex-wrap:wrap;align-items:stretch; gap:.7rem;margin-top:1.4rem} .bakery.home .vds-hero-cta .vds-btn{flex:0 0 auto} /* GLP `.hero-cta .btn-lg{padding:.82rem .95rem;font-size:.9rem;white-space:nowrap}` — the hero's copy column is ~570px at 1440 and the default .vds-btn-lg pair measured 621px, so they wrapped onto two rows. */ body #content .bakery.home .vds-hero-cta .vds-btn-lg{ padding:.82rem 1.15rem;font-size:.9rem;white-space:nowrap} @media (max-width:479px){ .bakery.home .vds-hero-cta .vds-btn{flex:1 1 100%} } /* --- Stat row ------------------------------------------------------ GLP `.hero-proof` — inline numbers, no card. Deliberately NOT the boxed three-up tile the spec's wording ("stat tiles") suggests: the comp's own hero stat treatment has no box, and the comp decides. */ body #content .bakery.home ul.vds-hero-proof{ display:flex;flex-wrap:wrap;gap:1.4rem 1.75rem; margin:1.6rem 0 0;padding:0;list-style:none} body #content .bakery.home ul.vds-hero-proof li{margin:0;padding:0;list-style:none;background:none} body #content .bakery.home .vds-proof-num{ display:block;font-family:var(--vds-font-display);font-weight:700;line-height:1; font-size:clamp(1.6rem,1.2rem + 1.4vw,2.2rem);color:var(--vds-hero-ink)} body #content .bakery.home .vds-proof-lbl{ display:block;font-size:.8rem;line-height:1.35;color:var(--vds-hero-ink-2); margin-top:.35rem;max-width:15ch} /* --- Growth-flow diagram ------------------------------------------ GLP `.growth-flow`. Hidden below 768px exactly as the comp does (`@media (max-width:768px){.hero-visual{display:none!important}}`) — it is decorative and the aria-label content is duplicated by §7. DEVIATION FROM COMP: at 768-1023px the comp puts the visual ABOVE the copy (`order:-1`). Kept below here, so the H1 and the primary CTA are never pushed under a decorative diagram on tablet. */ .bakery.home .vds-hero .wpb_raw_code{display:none} @media (min-width:768px){ .bakery.home .vds-hero .wpb_raw_code{display:block;max-width:460px; margin-inline:auto;width:100%} } @media (min-width:1024px){ .bakery.home .vds-hero .wpb_raw_code{max-width:none} } .bakery.home .vds-growth-flow{position:relative;display:flex;flex-direction:column;gap:.75rem; padding:clamp(1.3rem,2.2vw,1.9rem);border-radius:var(--vds-r-xl); background:linear-gradient(160deg,var(--vds-surface-2),var(--vds-surface)); border:1px solid var(--vds-border);overflow:hidden} body #content .bakery.home .vds-gf-cap{ display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase; color:var(--vds-muted);text-align:center;margin:0 0 .55rem} .bakery.home .vds-gf-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem} body #content .bakery.home .vds-gf-chip{ display:inline-flex;align-items:center;gap:.4rem;padding:.38rem .7rem; border-radius:var(--vds-r-pill);background:var(--vds-surface); border:1px solid var(--vds-border);font-size:.78rem;font-weight:600;color:var(--vds-ink-2)} .bakery.home .vds-gf-chip i{width:8px;height:8px;border-radius:50%; background:var(--vds-grad-brand);flex:none} .bakery.home .vds-gf-funnel{position:relative;height:58px;width:min(86%,290px); margin:.15rem auto;clip-path:polygon(0 0,100% 0,70% 100%,30% 100%); background:var(--vds-grad-brand-soft)} .bakery.home .vds-gf-dot{position:absolute;left:50%;top:-6px;width:7px;height:7px; border-radius:50%;background:var(--vds-red-mid);transform:translateX(-50%); animation:vdsGfFlow 2.6s ease-in infinite} .bakery.home .vds-gf-dot.d2{animation-delay:.9s} .bakery.home .vds-gf-dot.d3{animation-delay:1.8s} @keyframes vdsGfFlow{0%{top:-6px;opacity:0}15%{opacity:1}100%{top:56px;opacity:0}} @media (prefers-reduced-motion:reduce){ .bakery.home .vds-gf-dot{animation:none;opacity:.4;top:22px} } .bakery.home .vds-gf-engine{display:flex;justify-content:center} .bakery.home .vds-gf-engine-core{text-align:center;padding:.85rem 1.35rem; border-radius:var(--vds-r-md);background:var(--vds-grad-brand);color:#fff; box-shadow:0 12px 30px rgba(217,33,40,.3)} body #content .bakery.home .vds-gf-engine-core b{ display:block;font-family:var(--vds-font-display);font-size:1.02rem;line-height:1.2;color:#fff} body #content .bakery.home .vds-gf-engine-core span{ display:block;font-size:.74rem;opacity:.9;margin-top:.18rem;color:#fff} .bakery.home .vds-gf-arrow{width:0;height:0;margin:.05rem auto; border-left:8px solid transparent;border-right:8px solid transparent; border-top:10px solid var(--vds-red-mid);opacity:.7} .bakery.home .vds-gf-out{display:grid;grid-template-columns:1fr 1fr;gap:.6rem} .bakery.home .vds-gf-out-item{text-align:center;padding:.75rem .55rem; border-radius:var(--vds-r-md);background:var(--vds-surface);border:1px solid var(--vds-border)} body #content .bakery.home .vds-gf-out-item b{ display:block;font-family:var(--vds-font-display);font-size:.98rem;color:var(--vds-ink)} body #content .bakery.home .vds-gf-out-item span{ display:block;font-size:.74rem;color:var(--vds-muted);margin-top:.12rem} .bakery.home .vds-gf-out-rev{ background:linear-gradient(160deg,rgba(217,33,40,.12),rgba(237,71,83,.06)); border-color:rgba(217,33,40,.22)} /* ===================================================================== * SHARED PRIMITIVE INTRODUCED BY SECTION 5 * GLP `.lead` — the standfirst paragraph under a section H2. Used by * sections 5 and 6 already; later sections reuse it, do not re-declare. * ------------------------------------------------------------------- */ body #content .bakery.home .vds-lead{ font-size:var(--vds-step-1);line-height:1.5;color:var(--vds-ink-2);margin:0 0 1rem} /* GLP `.section-head > h1,h2,h3{text-wrap:balance}` — ported here for every section heading in the build. Section 6's H2 was breaking as "Most marketing agencies / report activity. We deliver / revenue." with a single orphaned word on line three. Progressive: browsers without `balance` simply wrap as before. Section-agnostic, do not re-declare. */ body #content .bakery.home .vds-section h2, body #content .bakery.home .vds-section h3{text-wrap:balance} /* ===================================================================== * SECTION 4 — TRUST BAND * Comp source: build/glp-comp/homepage.html `section.trust-band#trust` * + styles.css `.trust-band` / `.tband-*`. Note the comp declares * `.trust-band` TWICE (l.1065 card, l.1600 full-bleed strip); the second * wins, so the band is a full-width surface strip, not a floating card. * * Structure WPBakery emits: * section.vc_section.vds-trust * > .vc_row.vds-trust-row > .container * > .wpb_column.vds-trust-col > .vc_column-inner > .wpb_wrapper * > .wpb_text_column <- ul.vds-tband + ul.vds-badges * No heading, per spec §2 — the band is proof, not a section. * ------------------------------------------------------------------- */ .bakery.home .vds-trust{background:var(--vds-surface); border-top:1px solid var(--vds-border);border-bottom:1px solid var(--vds-border); padding-block:clamp(1.5rem,1.1rem + 1.4vw,2.25rem)} .bakery.home .vds-trust .vds-trust-row{display:block;width:100%} .bakery.home .vds-trust .vds-trust-col{float:none;width:100%;padding:0} .bakery.home .vds-trust .vc_column-inner{width:100%} /* --- Stats --------------------------------------------------------- Six items: the spec's five numerics plus a tenure stat standing in for its "Google Premier Partner / 2026 — fifth consecutive year" row. The Premier badge below already renders "PREMIER 2026" in pixels, so a text row repeating it would be duplication; "5 Years / Consecutive Google Premier Partner" carries the one fact the artwork cannot. Meta's "Certified partner" label is likewise carried by its badge alone. */ body #content .bakery.home ul.vds-tband{ display:grid;grid-template-columns:repeat(2,1fr);gap:1.15rem .25rem; margin:0;padding:0;list-style:none} body #content .bakery.home ul.vds-tband>li{ position:relative;margin:0;padding:.15rem .8rem;list-style:none;background:none; display:flex;flex-direction:column;align-items:center;gap:.35rem;text-align:center} /* Hairline dividers — comp `.tband-item + .tband-item::before`. The nth-child resets below re-hide the first cell of each row as the column count changes; order matters, the later rule wins at equal specificity. */ .bakery.home ul.vds-tband>li::before{content:"";position:absolute;left:0; top:8%;bottom:8%;width:1px;background:var(--vds-border)} .bakery.home ul.vds-tband>li:nth-child(2n+1)::before{display:none} @media (min-width:768px){ body #content .bakery.home ul.vds-tband{grid-template-columns:repeat(3,1fr)} .bakery.home ul.vds-tband>li:nth-child(2n+1)::before{display:block} .bakery.home ul.vds-tband>li:nth-child(3n+1)::before{display:none} } /* Seven columns, not six, with the "1,500+" cell spanning two of them. Its label is 54 characters against a 26-character average for the other five, so in equal sixths (a 171px cell) it ran to four lines while its neighbours ran to one — the single most visible irregularity in the band. Widening just that cell to ~342px brings it to two lines and keeps the whole band on one row, which a six-across grid of equal cells could not do without shrinking the type to 10px or breaking the band into two rows. The copy stays verbatim. */ /* 1280, not 1024. At 1024 a seven-column band gives 134px cells and most labels went to four lines; the three-column regime above holds to 1279 with 314px cells and one- to two-line labels, which reads far better. */ @media (min-width:1280px){ body #content .bakery.home ul.vds-tband{grid-template-columns:repeat(7,1fr)} body #content .bakery.home ul.vds-tband>li:nth-child(2){grid-column:span 2} .bakery.home ul.vds-tband>li:nth-child(3n+1)::before{display:block} .bakery.home ul.vds-tband>li:first-child::before{display:none} } body #content .bakery.home .vds-tband-num{ display:block;font-family:var(--vds-font-display);font-weight:800;line-height:1.05; font-size:clamp(1rem,.86rem + .5vw,1.24rem);letter-spacing:-.01em;color:var(--vds-ink)} /* One spec label is 54 characters ("Business locations under Local SEO management each month") against a 96-character average for the rest, so in a six-across band it ran to four lines while its neighbours ran to one. Copy is verbatim and stays, so the type absorbs it: slightly smaller, tighter tracking, a wider allowance, and `text-wrap:balance` to even the rag instead of leaving one short last line. */ /* No max-width. A 24ch cap measured ~171px, which is almost exactly a 1/6 cell, so it did nothing for the narrow cells and actively defeated the two-column span below — the widened cell still wrapped to four lines because the label inside it was still capped at 171px. The cell is the right constraint; let it govern. */ body #content .bakery.home .vds-tband-lbl{ display:block;font-size:.7rem;line-height:1.4;letter-spacing:.04em; text-transform:uppercase;color:var(--vds-muted);text-wrap:balance} /* --- Credential badges --------------------------------------------- Real assets, supplied by the client and already published on the live site. NOT picsum — spec §6.23 kills greybox placeholders standing in for verified credentials. The 2020 National Excellence Award asset was supplied too and is deliberately omitted: spec §6.18 drops any award older than 2024. */ body #content .bakery.home ul.vds-badges{ display:flex;flex-wrap:wrap;align-items:center;justify-content:center; gap:.75rem 1.15rem;margin:1.5rem 0 0;padding:1.4rem 0 0;list-style:none; border-top:1px solid var(--vds-border)} body #content .bakery.home ul.vds-badges>li{margin:0;padding:0;list-style:none;background:none} /* Every badge sits on its own light plate. Three of the five (BBB, Inc. 5000, UpCity) are dark-ink artwork on a transparent ground and vanish against the dark theme's surface. A per-badge plate fixes all five at once and is far less jarring than turning the whole band white in dark mode. */ .bakery.home .vds-badge{display:flex;align-items:center;justify-content:center; box-sizing:border-box;min-height:76px;padding:.55rem 1rem; background:#fff;border:1px solid var(--vds-border);border-radius:var(--vds-r-sm)} .bakery.home .vds-badge img{width:auto;max-width:100%;object-fit:contain} /* The Meta badge ships with its own white card and hairline baked into the artwork; a second plate around it double-borders. */ .bakery.home .vds-badge-meta{background:transparent;border-color:transparent;padding:0} /* Optical sizing, not one uniform height: square seals read larger than their box, wide lockups read smaller. BBB is held at 36px because its source is only 100x39 — anything taller upscales it, and it is the one asset the client has no higher-resolution copy of. */ .bakery.home .vds-badge-premier img{height:60px} .bakery.home .vds-badge-meta img{height:64px} .bakery.home .vds-badge-bbb img{height:36px} .bakery.home .vds-badge-upcity img{height:58px} .bakery.home .vds-badge-inc5000 img{height:58px} /* ===================================================================== * SECTION 5 — WHO WE ARE + HOW WE THINK * Comp source: `#why` section head treatment (.eyebrow / h2 / .lead). * The comp's ecosystem radial is NOT reproduced — spec §3 asks for prose * plus the five-stage journey, not a radial diagram. * Two-column: prose left, the five stages as a bordered card right. * Same grid trick as the hero — the ratio lives on * `.vc_column-inner > .wpb_wrapper`, not on WPBakery column widths. * ------------------------------------------------------------------- */ .bakery.home .vds-who .vds-who-row{display:block;width:100%} .bakery.home .vds-who .vds-who-col{float:none;width:100%;padding:0} .bakery.home .vds-who .vc_column-inner{width:100%} .bakery.home .vds-who .vc_column-inner>.wpb_wrapper{display:grid;grid-template-columns:1fr; gap:clamp(2rem,1.4rem + 2vw,3.25rem);align-items:start} @media (min-width:1024px){ .bakery.home .vds-who .vc_column-inner>.wpb_wrapper{grid-template-columns:1.15fr .85fr} } /* The prose column runs roughly twice the height of the stages card, which left a large hole under it. Sticking the card puts that space to work and keeps the five stages beside the paragraph that introduces them. Height-gated: the card is ~466px and the sticky offset ~136px, so on a 1024x600 laptop it would be pinned taller than the viewport and its last stages could never be scrolled into view. */ @media (min-width:1024px) and (min-height:700px){ .bakery.home .vds-stages{position:sticky;top:calc(var(--vds-header-h) + 1.25rem)} } body #content .bakery.home .vds-who h2{max-width:18ch} body #content .bakery.home .vds-who-copy p:last-child{margin-bottom:0} /* Measure. Uncapped, the prose ran 74ch at 1440 and 84ch at 768 (the column goes full-width below 1024) — well past a comfortable line. Capped once on the COLUMN, in rem, not per-paragraph in ch: the intro sits at a larger size than the body, so a shared `ch` cap resolved to two different pixel widths and the paragraphs had visibly different right edges. */ .bakery.home .vds-who-copy{max-width:38rem} /* `:not(.vds-eyebrow)` is load-bearing. The eyebrow primitive sets its colour at `body #content .bakery.home .vds-eyebrow` (1,3,1) up in the Section 3 block; this rule was the same (1,3,1) and arrives LATER, so it silently repainted Section 5's eyebrow in body ink — the only one of the seven eyebrows on the page not in accent red. Same failure mode as gotcha #25, but from equal specificity plus source order rather than a missing prefix. Found by audit2.py's per-instance eyebrow dump. */ body #content .bakery.home .vds-who-copy p:not(.vds-eyebrow){color:var(--vds-ink-2)} /* The opening paragraph is 70 words. As `.vds-lead` (24px) it rendered as a ten-line wall of oversized type, and it was ALSO lighter than the body copy beneath it — hierarchy inverted. It gets a modest step up in size and the darker ink instead, so it leads without shouting. `.vds-lead` stays as-is for genuinely short standfirsts like Section 6's. */ body #content .bakery.home .vds-who-intro{ font-size:clamp(1.05rem,1rem + .32vw,1.2rem);line-height:1.55; color:var(--vds-ink);margin:0 0 1.15rem} /* --- The five stages ------------------------------------------------ */ .bakery.home .vds-stages{background:var(--vds-surface);border:1px solid var(--vds-border); border-radius:var(--vds-r-lg);box-shadow:var(--vds-card-shadow); padding:clamp(1.5rem,1.1rem + 1.4vw,2.1rem)} body #content .bakery.home .vds-stages-title{ font-family:var(--vds-font-display);font-size:.78rem;font-weight:700; letter-spacing:.09em;text-transform:uppercase;color:var(--vds-muted); margin:0 0 1.25rem} body #content .bakery.home ol.vds-stage-list{ counter-reset:vds-stage;margin:0;padding:0;list-style:none} body #content .bakery.home ol.vds-stage-list>li{ counter-increment:vds-stage;position:relative;margin:0;padding:0 0 1.1rem 2.75rem; list-style:none;background:none} body #content .bakery.home ol.vds-stage-list>li:last-child{padding-bottom:0} .bakery.home ol.vds-stage-list>li::before{ content:counter(vds-stage);position:absolute;left:0;top:0; width:1.75rem;height:1.75rem;border-radius:50%; background:var(--vds-grad-brand);color:#fff; font-family:var(--vds-font-display);font-weight:700;font-size:.78rem; display:grid;place-items:center} /* Rail joining the numbered nodes. */ .bakery.home ol.vds-stage-list>li:not(:last-child)::after{ content:"";position:absolute;left:calc(.875rem - 1px);top:2rem;bottom:.25rem; width:2px;background:var(--vds-border)} body #content .bakery.home .vds-stage-name{ display:block;font-family:var(--vds-font-display);font-weight:700; font-size:var(--vds-step-0);line-height:1.3;color:var(--vds-ink)} body #content .bakery.home .vds-stage-desc{ display:block;font-size:.92rem;line-height:1.45;color:var(--vds-ink-2);margin-top:.15rem} /* ===================================================================== * SECTION 6 — HOW WE'RE DIFFERENT * NO comp counterpart — the handoff flags this as one of three sections * with the highest house-pattern risk. Derived from GLP's own `.card` * (surface + border + r-lg + card-shadow) and `.approach-list` (bordered * list rows) vocabulary as a two-up comparison. Nothing invented: the * only new idea is putting two existing card treatments side by side. * * Two real 1/2 columns rather than two divs inside one text block, so * each list stays editable in the builder. This is the one place a * 1/2 // 1/2 split is right by visual weight — the content is two * deliberately parallel five-item lists. * ------------------------------------------------------------------- */ /* The head's own margin-bottom is dead: `.vds-diff-head` is the last (only) text column in its row, so the layout reset `.bakery.home .wpb_text_column:last-child{margin-bottom:0}` (0,3,0) beats `.bakery.home .vds-diff-head` (0,2,0) and zeroes it. The head row sat flush against the cards. Space the ROW instead — `.vc_row` only has its left/right margins reset, so margin-bottom here is untouched. */ .bakery.home .vds-diff .vds-diff-head-row{ display:block;width:100%;margin-bottom:clamp(2rem,4vw,3rem)} .bakery.home .vds-diff-head{max-width:66ch} body #content .bakery.home .vds-diff-head h2{max-width:22ch} body #content .bakery.home .vds-diff-head .vds-lead{margin-bottom:0} /* The flex container is the `.container` WPBakery injects INSIDE the row, not the row itself — `.vc_row > .wpb_column` is never a real child relationship (gotcha #23's other half). Writing `.vds-diff-grid-row > .vds-diff-col` matched nothing, the cards silently fell back to WPBakery's floated `vc_col-sm-6`, and the two cards came out 300px and 323px tall with the gap never applied. */ .bakery.home .vds-diff-grid-row>.container{ display:flex;flex-wrap:wrap;align-items:stretch;gap:clamp(1.2rem,2.2vw,1.9rem)} .bakery.home .vds-diff-grid-row .vds-diff-col{float:none;width:100%;padding:0;display:flex} /* Side by side from 900px, not 768. At 768 each card is only ~350px wide and the list items broke to two and three lines each — the comparison stops scanning as two parallel columns, which is the whole point of the section. Full-width stacked cards read better at that size. */ @media (min-width:900px){ /* gap is clamp(1.2rem,2.2vw,1.9rem), so each column takes half of it back */ .bakery.home .vds-diff-grid-row .vds-diff-col{width:calc(50% - clamp(.6rem,1.1vw,.95rem))} } .bakery.home .vds-diff-col>.vc_column-inner{width:100%;display:flex} .bakery.home .vds-diff-col>.vc_column-inner>.wpb_wrapper{width:100%; background:var(--vds-surface);border:1px solid var(--vds-border); border-radius:var(--vds-r-lg);box-shadow:var(--vds-card-shadow); padding:clamp(1.6rem,1.2rem + 1.4vw,2.4rem)} /* The old way reads recessed; ours reads lit. */ .bakery.home .vds-diff-them>.vc_column-inner>.wpb_wrapper{ background:var(--vds-surface-2);box-shadow:none} .bakery.home .vds-diff-us>.vc_column-inner>.wpb_wrapper{ border-color:transparent; box-shadow:0 18px 44px -22px rgba(217,33,40,.45),inset 0 0 0 1px rgba(217,33,40,.3)} body #content .bakery.home .vds-diff-col h3{ font-size:var(--vds-step-1);letter-spacing:.04em;text-transform:uppercase;margin:0 0 1.2rem} body #content .bakery.home .vds-diff-them h3{color:var(--vds-muted)} body #content .bakery.home .vds-diff-us h3{color:var(--vds-ink)} body #content .bakery.home ul.vds-diff-list{margin:0;padding:0;list-style:none} body #content .bakery.home ul.vds-diff-list>li{ position:relative;margin:0 0 .9rem;padding:0 0 0 1.95rem;list-style:none;background:none} body #content .bakery.home ul.vds-diff-list>li:last-child{margin-bottom:0} body #content .bakery.home ul.vds-diff-list>li>span{ display:block;font-size:.98rem;line-height:1.5;color:var(--vds-ink-2)} /* Markers drawn in CSS, not inline SVG and not a glyph: the subsetted Montserrat woff2 has no U+2713, so a literal check character would fall back to a different face. */ .bakery.home .vds-diff-them ul.vds-diff-list>li::before{ content:"";position:absolute;left:.15rem;top:.72em; width:.8rem;height:2px;border-radius:2px;background:var(--vds-muted);opacity:.6} .bakery.home .vds-diff-us ul.vds-diff-list>li::before{ content:"";position:absolute;left:.3rem;top:.38em; width:.42rem;height:.78rem;border:solid var(--vds-red);border-width:0 2px 2px 0; transform:rotate(45deg)} /* ===================================================================== * SECTION 7 — HOW WE HELP BUSINESSES GROW * Comp source: `#how` -> flair.css `.journey`, `.journey-steps`, * `.journey-node`, `.journey-num`. A connected four-step rail: vertical * below 1024, horizontal above, with the rail drawn as a single * pseudo-element behind the nodes. * * Deviation from the comp: the comp's node holds an inline SVG icon with * the step number as a small badge pinned to its corner. Here the number * IS the node glyph. Inline SVG inside a [vc_column_text] is the single * thing TinyMCE is most likely to mangle on a manual re-save, and the * rail still reads as four ordered steps without it. * ------------------------------------------------------------------- */ .bakery.home .vds-help .vds-help-row{display:block;width:100%} .bakery.home .vds-help .vds-help-col{float:none;width:100%;padding:0} .bakery.home .vds-help .vc_column-inner{width:100%} .bakery.home .vds-help-head{max-width:66ch;margin-inline:auto;text-align:center; margin-bottom:clamp(2rem,4vw,3rem)} body #content .bakery.home ol.vds-journey-steps{ position:relative;display:grid;grid-template-columns:1fr; margin:0;padding:0;list-style:none} /* The rail. Sits behind the nodes; the nodes are opaque so it reads as passing through them. */ .bakery.home ol.vds-journey-steps::before{content:"";position:absolute;z-index:0; left:1.85rem;top:.6rem;bottom:3.4rem;width:3px;border-radius:3px; background:linear-gradient(180deg,var(--vds-red),var(--vds-red-light));opacity:.35} /* `align-content` defaults to stretch, so each step's two auto rows grow to fill its equal-height grid cell — the step with the shortest description got the most extra space in row 1 and its title sat ~11px below the other three. `start` pins every row to the top instead. */ body #content .bakery.home ol.vds-journey-steps>li{ position:relative;z-index:1;margin:0;padding:0 0 2.1rem;list-style:none;background:none; display:grid;grid-template-columns:3.7rem 1fr;gap:0 1.2rem; align-items:start;align-content:start} body #content .bakery.home ol.vds-journey-steps>li:last-child{padding-bottom:0} body #content .bakery.home .vds-journey-node{ width:3.7rem;height:3.7rem;border-radius:50%;display:grid;place-items:center; box-sizing:border-box;background:var(--vds-surface);border:2px solid var(--vds-border); box-shadow:0 10px 26px rgba(20,20,35,.08); /* 1.2rem = 19.2px, deliberately over WCAG's 18.66px bold "large text" threshold. On hover the node fills with --vds-grad-brand and the number goes white; against the gradient's light end (#ed4753) that is 3.76:1, which clears the 3.0 large-text bar but would fail the 4.5 normal-text bar it sat under at 1.1rem. */ font-family:var(--vds-font-display);font-weight:800;font-size:1.2rem;line-height:1; color:var(--vds-accent-ink); transition:transform var(--vds-t-base),box-shadow var(--vds-t-base), border-color var(--vds-t-base),background var(--vds-t-base), color var(--vds-t-base)} body #content .bakery.home .vds-journey-name{ display:block;font-family:var(--vds-font-display);font-weight:700; font-size:1.08rem;line-height:1.3;color:var(--vds-ink);margin:.55rem 0 .5rem} body #content .bakery.home .vds-journey-desc{ display:block;font-size:.92rem;line-height:1.5;color:var(--vds-ink-2)} /* This hover MUST carry `body #content`. The rest-state rule above is `body #content .bakery.home .vds-journey-node` (1,3,1); a hover written as `.bakery.home …:hover …` is only (0,3,0) and loses to it. The background, border and transform were all silently dropped while the separately-prefixed `color:#fff` still applied — so hovering a step turned its number white on a still-white circle and the number vanished. Keep the prefix on every state of this element. */ body #content .bakery.home .vds-journey-step:hover .vds-journey-node, body #content .bakery.home .vds-journey-step:focus-within .vds-journey-node{ background:var(--vds-grad-brand);border-color:transparent;color:#fff; transform:translateY(-4px);box-shadow:0 18px 36px rgba(217,33,40,.36)} @media (min-width:1024px){ body #content .bakery.home ol.vds-journey-steps{ grid-template-columns:repeat(4,1fr);gap:1.6rem} .bakery.home ol.vds-journey-steps::before{ left:12.5%;right:12.5%;top:1.85rem;bottom:auto;width:auto;height:3px} body #content .bakery.home ol.vds-journey-steps>li{ grid-template-columns:1fr;gap:0;padding:0 .3rem;text-align:center} body #content .bakery.home .vds-journey-node{margin:0 auto 1.15rem} body #content .bakery.home .vds-journey-name{margin-top:0} } /* "Convert More Customers" is the one title long enough to wrap, and a width sweep puts the wrap point at 1150px: below it that title takes two lines while the other three take one, pushing only its description down and breaking the row of descriptions. Reserve two lines ONLY in the band where the wrap actually happens — an unconditional min-height added ~28px of dead space under every title at 1200px and up, where nothing wraps. */ @media (min-width:1024px) and (max-width:1149px){ body #content .bakery.home .vds-journey-name{min-height:2.6em} } @media (prefers-reduced-motion:reduce){ .bakery.home .vds-journey-step:hover .vds-journey-node{transform:none} } /* ===================================================================== * SECTION 8 — SERVICES (SIX) * Comp source: the service page's "Everything your organic program needs" * capability matrix — build/glp-comp/inv-service.css `.capgrid` / `.cap` * (surface + border + r-lg + the soft card shadow, a 3px gradient rail * bleeding off the left edge at .45 opacity that goes full on hover, and * the lift + red-tinted shadow + red border on hover). That file was not * in build/glp-comp/ until this section; it is now. * * Two deliberate departures from `.cap`: * 1. THREE columns, not the comp's two. The comp's `.cap` is a horizontal * row — icon | body | check — because its bodies are one short * sentence. Ours carry a paragraph plus, on three of six, a four-item * capability list. More importantly the content doc's own order puts * all three list-bearing services first, so a 3-across grid lands them * as row one and the three short ones as row two: the imbalance * becomes the layout instead of fighting it. At two across the pairing * is long/long, long/short, short/short and row two is visibly ragged. * 2. NO `.cap-check`. A checkmark means "included in this package". These * are six separate services you click through to, so the check is * replaced by the "Learn more →" the content doc specifies, and the * `.cap-ico` SVG tile is dropped for the reason §§6 and 7 dropped * theirs (inline SVG in a [vc_column_text] is what TinyMCE mangles). * * Structure WPBakery emits: * section.vc_section#services.vds-section.vds-section-alt.vds-svc * > .vc_row.vds-svc-head-row > .container > .wpb_column > … > .wpb_text_column * > .vc_row.vds-svc-grid-row > .container > .wpb_column.vds-svc-col * > .vc_column-inner > .wpb_wrapper > .wpb_text_column > ul.vds-svc-grid * ------------------------------------------------------------------- */ /* Gotcha #26: `.vds-svc-head` is the only text column in its row, so `.bakery.home .wpb_text_column:last-child{margin-bottom:0}` (0,3,0) beats any margin written on the head itself. Space the ROW. */ .bakery.home .vds-svc .vds-svc-head-row{ display:block;width:100%;margin-bottom:clamp(2rem,4vw,3rem)} .bakery.home .vds-svc-head{max-width:66ch} body #content .bakery.home .vds-svc-head h2{max-width:24ch} body #content .bakery.home .vds-svc-head .vds-lead{margin-bottom:0;max-width:58ch} .bakery.home .vds-svc .vds-svc-grid-row{display:block;width:100%} .bakery.home .vds-svc .vds-svc-col{float:none;width:100%;padding:0} .bakery.home .vds-svc .vds-svc-col>.vc_column-inner{width:100%} /* --- The grid ------------------------------------------------------- */ body #content .bakery.home ul.vds-svc-grid{ display:grid;grid-template-columns:1fr;gap:clamp(1rem,1.8vw,1.5rem); margin:0;padding:0;list-style:none;align-items:stretch} @media (min-width:768px){ body #content .bakery.home ul.vds-svc-grid{grid-template-columns:repeat(2,1fr)} } @media (min-width:1024px){ body #content .bakery.home ul.vds-svc-grid{grid-template-columns:repeat(3,1fr)} } /* --- The card ------------------------------------------------------- */ /* `display:flex;flex-direction:column` rather than the comp's grid: the card's own height is set by its grid row, and the column layout is what lets "Learn more" take margin-top:auto and sit on the bottom edge. In a row where one card carries a capability list and its neighbour does not, that keeps the two links baselined instead of leaving one floating in the middle of a stretched cell. */ body #content .bakery.home ul.vds-svc-grid>li.vds-svc-card{ position:relative;margin:0;list-style:none;background:var(--vds-surface); display:flex;flex-direction:column; padding:clamp(1.5rem,1.1rem + 1.2vw,2.1rem) clamp(1.35rem,1rem + 1.1vw,1.9rem) clamp(1.35rem,1rem + 1vw,1.8rem) clamp(1.6rem,1.2rem + 1.2vw,2.1rem); border:1px solid var(--vds-border);border-radius:var(--vds-r-lg); box-shadow:var(--vds-card-shadow);overflow:hidden; transition:transform var(--vds-t-base),box-shadow var(--vds-t-base), border-color var(--vds-t-base)} /* Comp `.cap::before` — the gradient rail bleeding off the left edge. */ .bakery.home ul.vds-svc-grid>li.vds-svc-card::before{ content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px; border-radius:0 3px 3px 0;background:var(--vds-grad-brand);opacity:.45; transition:opacity var(--vds-t-base)} /* Every state carries the same `body #content` prefix as the rest state (gotcha #25). `:focus-within` is what fires for a keyboard user, since the only focusable thing in the card is the H3's anchor. */ body #content .bakery.home ul.vds-svc-grid>li.vds-svc-card:hover, body #content .bakery.home ul.vds-svc-grid>li.vds-svc-card:focus-within{ transform:translateY(-4px);box-shadow:0 16px 34px rgba(217,33,40,.14); border-color:rgba(217,33,40,.30)} .bakery.home ul.vds-svc-grid>li.vds-svc-card:hover::before, .bakery.home ul.vds-svc-grid>li.vds-svc-card:focus-within::before{opacity:1} /* --- Card type ------------------------------------------------------ */ /* One anchor per card. The H3 is the link the spec asks for; its ::after stretches over the whole card so the card is the hit target, and the "Learn more" below is an aria-hidden

, not a second anchor to the same destination. `body #content .bakery.home a{color:var(--vds-accent-ink)}` is (1,3,1), so re-colouring the link to ink needs (1,4,1) — the extra .vds-svc-card class supplies it. */ body #content .bakery.home ul.vds-svc-grid>li.vds-svc-card h3{ font-size:var(--vds-step-1);line-height:1.22;margin:0 0 .6rem} body #content .bakery.home .vds-svc-card h3 a{ color:var(--vds-ink);text-decoration:none; transition:color var(--vds-t-base)} body #content .bakery.home .vds-svc-card h3 a::after{ content:"";position:absolute;inset:0;z-index:2} body #content .bakery.home .vds-svc-card:hover h3 a, body #content .bakery.home .vds-svc-card h3 a:hover, body #content .bakery.home .vds-svc-card h3 a:focus-visible{ color:var(--vds-accent-ink);text-decoration:none} /* The stretched ::after swallows the anchor's own outline, so draw the focus ring on the card via the pseudo-element instead. */ body #content .bakery.home .vds-svc-card h3 a:focus-visible::after{ outline:2px solid var(--vds-accent-ink);outline-offset:-3px; border-radius:var(--vds-r-lg)} body #content .bakery.home .vds-svc-card h3 a:focus{outline:none} body #content .bakery.home .vds-svc-card .vds-svc-desc{ font-size:.94rem;line-height:1.55;color:var(--vds-ink-2);margin:0} /* --- Capability sub-list -------------------------------------------- */ /* Markers drawn in CSS for the same reason as §6's: the subsetted Montserrat has no U+2713 and a literal check would fall back to another face. A hairline above separates the list from the description without adding a second surface. */ body #content .bakery.home ul.vds-svc-caps{ margin:1.05rem 0 0;padding:1.05rem 0 0;list-style:none; border-top:1px solid var(--vds-border)} body #content .bakery.home ul.vds-svc-caps>li{ position:relative;margin:0 0 .55rem;padding:0 0 0 1.35rem; list-style:none;background:none} body #content .bakery.home ul.vds-svc-caps>li:last-child{margin-bottom:0} body #content .bakery.home ul.vds-svc-caps>li>span{ display:block;font-size:.875rem;line-height:1.45;color:var(--vds-muted)} .bakery.home ul.vds-svc-caps>li::before{ content:"";position:absolute;left:0;top:.5em; width:.42rem;height:.42rem;border-radius:50%; background:var(--vds-grad-brand);opacity:.85} /* --- Learn more ----------------------------------------------------- */ /* `margin-top:auto` pins it to the bottom of the stretched card, so the three cards in a row baseline their links whether or not they carry a capability list. option-page-styles.css sets `body span{font-size:16px; line-height:24px}` at (0,0,2), so the arrow span needs explicit type. This is a

, NOT a : wpautop wraps a bare inline element that is a direct child of a block inside [vc_column_text] in its own

(and leaves it unclosed), which made that generated

the card's flex child and left margin-top:auto on an inline grandchild with nothing to push. Because it is a

, `body #content .bakery.home p{margin:0 0 1rem}` (1,3,1) applies, so the bottom margin has to be zeroed explicitly here at (1,4,1). */ body #content .bakery.home .vds-svc-card .vds-svc-more{ display:inline-flex;align-items:center;gap:.4rem; margin:auto 0 0;padding-top:1.2rem; font-family:var(--vds-font-display);font-weight:600; font-size:.9rem;line-height:1.2;letter-spacing:.01em; color:var(--vds-accent-ink)} body #content .bakery.home .vds-svc-card .vds-svc-more .vds-arrow{ display:inline-block;font-size:1em;line-height:1; transition:transform var(--vds-t-base)} body #content .bakery.home .vds-svc-card:hover .vds-svc-more .vds-arrow, body #content .bakery.home .vds-svc-card:focus-within .vds-svc-more .vds-arrow{ transform:translateX(3px)} @media (prefers-reduced-motion:reduce){ body #content .bakery.home ul.vds-svc-grid>li.vds-svc-card:hover, body #content .bakery.home ul.vds-svc-grid>li.vds-svc-card:focus-within{ transform:none} body #content .bakery.home .vds-svc-card:hover .vds-svc-more .vds-arrow, body #content .bakery.home .vds-svc-card:focus-within .vds-svc-more .vds-arrow{ transform:none} } /* ===================================================================== * SECTION 9 — HOW AN ENGAGEMENT RUNS * Comp source: inv-service.css `.prob` / `.prob-stack` / `.prob-item` / * `.prob-ghost` — the offset stack with ghost numerals. * * NOT the comp's own `#process`. That section is the SAME `.journey` * component Section 7 already shipped as a four-step rail, and a second * identical four-step rail two sections later is the defect this choice * exists to avoid. The offset stack is the comp's other ordered-sequence * treatment: the staircase indent and the numerals both read as * progression, and neither can be confused with §7's horizontal rail. * * Extensions, both faithful: the comp's stack is three items with * nth-child(2)/(3) offsets and this is four, so a fourth step continues * the same curve; and `.prob-ico` (an inline-SVG tile) is dropped, as in * §§6 and 7, leaving the ghost numeral to carry step identity — which is * why it is raised from the comp's decorative .06 to a legible weight. * It stays aria-hidden; the

    carries the order for assistive tech. * ------------------------------------------------------------------- */ /* Two columns at the comp's own 1fr / 1.05fr, made on `.vc_column-inner > .wpb_wrapper` — the ratio trick from §§3 and 5, which is how a section gets an arbitrary split without fighting WPBakery's 1/2 // 1/3 column widths. This section first shipped with the head in its own row ABOVE a full-width stack, copying §§6 and 7. That is the build's habit, not the comp: `.prob` is `grid-template-columns:1fr 1.05fr` with `.prob-intro` (the heading) in the left column. The habit also cost real measure — audit2.py put the step descriptions at 141 characters per line at 1440, roughly double a readable one, because a full-width card at 1200px has nowhere for the text to stop. Beside the head each card is ~590px and the same descriptions land at ~60ch. */ .bakery.home .vds-eng .vds-eng-row{display:block;width:100%} .bakery.home .vds-eng .vds-eng-col{float:none;width:100%;padding:0} .bakery.home .vds-eng .vds-eng-col>.vc_column-inner{width:100%} @media (min-width:1024px){ .bakery.home .vds-eng .vds-eng-col>.vc_column-inner>.wpb_wrapper{ display:grid;grid-template-columns:1fr 1.05fr; gap:clamp(2rem,4vw,3.5rem);align-items:start} } /* Gotcha #26 in its other form: below 1024 the head is a plain block above the stack and `.wpb_text_column:last-child{margin-bottom:0}` does not reach it (it is not the last child), so its own margin is safe here. */ .bakery.home .vds-eng-head{max-width:66ch} body #content .bakery.home .vds-eng-head{margin-bottom:clamp(2rem,4vw,3rem)} body #content .bakery.home .vds-eng-head h2{max-width:20ch} body #content .bakery.home .vds-eng-head .vds-lead{margin-bottom:0;max-width:46ch} /* The stack runs ~2.4x the height of the head, which left a tall void under the lead in the left column. Same shape as Section 5 (prose ~2x the stages card) and the same fix, inverted: the SHORTER column sticks and travels with the longer one. Height-gated exactly as §5's is — the head is ~360px under a ~136px offset, so a viewport under 700px tall would pin it with nowhere to go. */ @media (min-width:1024px){ body #content .bakery.home .vds-eng-head{margin-bottom:0} } @media (min-width:1024px) and (min-height:700px){ .bakery.home .vds-eng-head{position:sticky;top:calc(var(--vds-header-h) + 1.25rem)} } /* 37rem caps the measure in the one band where the stack is full-width: between the two-column split (>=1024) and the point where the container is narrow enough to do the job itself. At 768 the container is ~706px and the step descriptions measured 81 characters per line — the same defect, and the same number, that Section 5's prose hit at that width. The cap is a no-op at >=1024 (the grid column is ~586px) and below ~640px, so it needs no media query. In rem on the LIST, not ch per paragraph: §5's note on why a shared `ch` cap resolves to different pixel widths applies here too. */ body #content .bakery.home ol.vds-eng-stack{ margin:0;padding:0;list-style:none;max-width:37rem; display:grid;gap:clamp(.95rem,1.6vw,1.15rem)} body #content .bakery.home ol.vds-eng-stack>li.vds-eng-step{ position:relative;margin:0;list-style:none;background:var(--vds-surface); display:grid;grid-template-columns:1fr;align-items:center; padding:clamp(1.2rem,1rem + .8vw,1.45rem) clamp(1.2rem,1rem + .9vw,1.55rem); border:1px solid var(--vds-border);border-radius:var(--vds-r-lg); box-shadow:0 6px 20px rgba(20,20,35,.05);overflow:hidden; transition:transform var(--vds-t-base),box-shadow var(--vds-t-base), border-color var(--vds-t-base)} /* Comp `.prob-item:nth-child(2)/(3)` offsets, extended to a fourth step on the same curve (≈3.5vw per step). The clamp floors at 0, so below ~740px the staircase flattens on its own and the media query below only has to handle the numeral. */ /* Percentages, not the comp's vw. The comp's stack sits in a column whose width tracks the viewport; ours sits in a 1.05fr grid column, so a vw offset is measured against the wrong box — 10.5vw is 151px against a ~590px card, a quarter of its width, and step 4's measure collapsed. A percentage resolves against the stack's own inline size, so the staircase keeps the same proportion at every width. */ body #content .bakery.home ol.vds-eng-stack>li.vds-eng-step:nth-child(2){ margin-left:4%} body #content .bakery.home ol.vds-eng-stack>li.vds-eng-step:nth-child(3){ margin-left:8%} body #content .bakery.home ol.vds-eng-stack>li.vds-eng-step:nth-child(4){ margin-left:12%} body #content .bakery.home ol.vds-eng-stack>li.vds-eng-step:hover{ transform:translateY(-4px);box-shadow:0 16px 34px rgba(217,33,40,.14); border-color:rgba(217,33,40,.30)} /* The ghost numeral. The comp runs this at opacity .06 as pure texture behind an icon tile that carried the identity; with the tile gone the numeral IS the step marker, so it is painted in --vds-muted at a weight that reads. Still decorative — aria-hidden, pointer-events:none, and the
      is what conveys sequence. */ body #content .bakery.home .vds-eng-ghost{ position:absolute;top:50%;right:clamp(.6rem,1.6vw,1.3rem); transform:translateY(-50%);z-index:0;pointer-events:none; font-family:var(--vds-font-display);font-weight:800; font-size:clamp(3rem,6vw,4.6rem);line-height:1;letter-spacing:-.04em; color:var(--vds-muted);opacity:.22} /* Content sits above the numeral and stops short of it, so a long description never runs under the digits. */ body #content .bakery.home .vds-eng-body{ position:relative;z-index:1;display:block; padding-right:clamp(3.2rem,8vw,6.4rem)} body #content .bakery.home .vds-eng-name{ display:block;font-family:var(--vds-font-display);font-weight:700; font-size:1.08rem;line-height:1.25;color:var(--vds-ink); letter-spacing:-.01em;margin:0 0 .3rem} body #content .bakery.home .vds-eng-desc{ display:block;font-size:.92rem;line-height:1.5;color:var(--vds-ink-2)} @media (min-width:1024px){ /* One extra notch of contrast between the steps at desktop, where the full staircase is visible and the cards are wide. */ body #content .bakery.home ol.vds-eng-stack>li.vds-eng-step{ padding-right:clamp(1.55rem,2.5vw,2.2rem)} body #content .bakery.home .vds-eng-name{font-size:1.16rem} } /* The comp flattens its own `.prob-item` offsets at max-width:820px, and the clamp floors here never get there on their own — 10.5vw is still 41px at a 390 viewport, so step 4 was 41px narrower than step 1 on the smallest screen the build supports. Flatten the staircase below 768 as the comp does: it is a desktop reading of progression, and at mobile widths it only costs the last card its measure. 820px is the comp's own flatten point for this component, not one of the build's 480/768/1024/1200 steps — the same licence Section 6 took with its measured 900px. */ @media (max-width:820px){ body #content .bakery.home ol.vds-eng-stack>li.vds-eng-step:nth-child(2), body #content .bakery.home ol.vds-eng-stack>li.vds-eng-step:nth-child(3), body #content .bakery.home ol.vds-eng-stack>li.vds-eng-step:nth-child(4){ margin-left:0} } @media (max-width:479px){ /* At 390 the card is ~342px wide. A centred numeral plus a 3.2rem gutter leaves the description under 200px, so the numeral moves to the top corner at a smaller size and the body reclaims the width below it. The gutter is 3.6rem, not 2.4rem: "04" at 2.4rem/800 measures ~57px and sits .75rem in from the edge, so 2.4rem (38px) left the first line of the body running 4px under the digits. */ body #content .bakery.home .vds-eng-ghost{ top:.55rem;right:.75rem;transform:none;font-size:2.4rem;opacity:.2} body #content .bakery.home ol.vds-eng-stack>li.vds-eng-step{ align-items:start} body #content .bakery.home .vds-eng-body{padding-right:3.6rem} } @media (prefers-reduced-motion:reduce){ body #content .bakery.home ol.vds-eng-stack>li.vds-eng-step:hover{transform:none} } /* ===================================================================== * SECTIONS 10-18 — appended 2026-09-10 * * Shared conventions carried forward from §§3-9 and not re-argued here: * - Text properties use the `body #content .bakery.home` prefix (1,3,1), * which is what beats option-page-styles.css's `body #content …` * (gotcha #22). Layout-only properties do not need it. * - EVERY state (:hover/:focus/:focus-visible/:focus-within) repeats its * base rule's full prefix (gotcha #25). * - WPBakery already supplies the 92%/1200px `.container` inside every * row; no section re-declares max-width or padding-inline (gotcha #23). * - A row's columns are reached through `.vc_row > .container`, never * `[vc_row] > [vc_column]` (gotcha #24). * - A head that is the only text column in its row takes its space from * the ROW (gotcha #26). * ------------------------------------------------------------------- */ /* ===================================================================== * §10 — MARKETING GROWTH ASSESSMENT #assessment * Comp: homepage `#assessment` > `.quiz`. * ===================================================================== */ .bakery.home .vds-quiz-sec .vds-quiz-head-row{ display:block;width:100%;margin-bottom:clamp(1.75rem,3.4vw,2.6rem)} .bakery.home .vds-quiz-head{max-width:62ch;margin-inline:auto;text-align:center} body #content .bakery.home .vds-quiz-head h2{max-width:20ch;margin-inline:auto} /* The H3 is the spec's sub-heading, not a section title — it sits under an H2 it restates, so it takes lead weight rather than heading weight. */ body #content .bakery.home .vds-quiz-head .vds-quiz-sub{ font-size:var(--vds-step-1);line-height:1.3;font-weight:600; color:var(--vds-ink);margin:.9rem 0 .5rem} body #content .bakery.home .vds-quiz-head .vds-lead{ margin-bottom:0;max-width:56ch;margin-inline:auto} .bakery.home .vds-quiz-sec .vds-quiz-body-row{display:block;width:100%} .bakery.home .vds-quiz-sec .vds-quiz-col{float:none;width:100%;padding:0} /* --- The card ------------------------------------------------------- */ /* One surface holding the whole instrument, as the comp's `.quiz` is. It is capped well under the container: a question with five options is a form, and a form that spans 1200px puts the radio a whole screen from its label. */ body #content .bakery.home .vds-quiz{ position:relative;max-width:760px;margin-inline:auto; background:var(--vds-surface);border:1px solid var(--vds-border); border-radius:var(--vds-r-xl);box-shadow:var(--vds-card-shadow-lg,var(--vds-card-shadow)); padding:clamp(1.4rem,1rem + 1.6vw,2.4rem);overflow:hidden} /* --- Progress ------------------------------------------------------- */ /* Meaningless without the step-through, so it only exists once JS says so. */ .bakery.home .vds-quiz .vds-quiz-progress{display:none} .bakery.home .vds-quiz[data-vds-quiz-js] .vds-quiz-progress{ display:block;height:4px;border-radius:var(--vds-r-pill); background:var(--vds-surface-2);overflow:hidden; margin:0 0 clamp(1.1rem,2.2vw,1.6rem)} .bakery.home .vds-quiz .vds-quiz-bar{ display:block;height:100%;width:0;background:var(--vds-grad-brand); border-radius:inherit;transition:width var(--vds-t-slow,.5s) ease} @media (prefers-reduced-motion:reduce){ .bakery.home .vds-quiz .vds-quiz-bar{transition:none} } /* --- Steps ---------------------------------------------------------- */ /* With no JS every step is visible and the whole questionnaire reads top to bottom — the section's content is never behind a script. The single-step collapse is scoped to [data-vds-quiz-js], which only the module sets. */ body #content .bakery.home ol.vds-quiz-steps{ margin:0;padding:0;list-style:none;counter-reset:none} body #content .bakery.home ol.vds-quiz-steps>li.vds-quiz-step{ margin:0 0 clamp(1.6rem,3vw,2.4rem);padding:0;list-style:none} body #content .bakery.home ol.vds-quiz-steps>li.vds-quiz-step:last-child{ margin-bottom:0} /* GOTCHA #25 again. The step's own margin-bottom is set at `body #content .bakery.home ol.vds-quiz-steps>li.vds-quiz-step` (1,4,1) so the five steps space apart when there is no JS. Cancelling it for the single-step mode needs the SAME prefix — written as `.bakery.home .vds-quiz[data-vds-quiz-js] .vds-quiz-step` (0,4,0) it was silently dropped and left 38px of dead space under the visible step. */ body #content .bakery.home .vds-quiz[data-vds-quiz-js] ol.vds-quiz-steps>li.vds-quiz-step{margin-bottom:0} /* fieldset/legend carry UA border, margin and padding that would otherwise draw a second box inside the card. */ body #content .bakery.home .vds-quiz-fs{ border:0;margin:0;padding:0;min-inline-size:0} body #content .bakery.home .vds-quiz-legend{ display:block;width:100%;padding:0;margin:0 0 clamp(.9rem,1.8vw,1.25rem)} body #content .bakery.home .vds-quiz-qnum{ display:block;font-family:var(--vds-font-display);font-weight:700; font-size:.72rem;letter-spacing:.12em;text-transform:uppercase; color:var(--vds-accent-ink);margin:0 0 .45rem} body #content .bakery.home .vds-quiz-q{ font-size:var(--vds-step-1);line-height:1.28;font-weight:700; color:var(--vds-ink);margin:0;text-wrap:balance} /* --- Options -------------------------------------------------------- */ /* Two columns from 640px: five options of two to six words each leave a single column with a very short measure and a very tall card. The fifth option spans, so the column never ends ragged. */ body #content .bakery.home ul.vds-quiz-options{ display:grid;grid-template-columns:1fr;gap:.55rem; margin:0;padding:0;list-style:none} @media (min-width:640px){ body #content .bakery.home ul.vds-quiz-options{ grid-template-columns:repeat(2,1fr)} body #content .bakery.home ul.vds-quiz-options>li:nth-child(5):last-child{ grid-column:1 / -1} } body #content .bakery.home ul.vds-quiz-options>li{ margin:0;padding:0;list-style:none} /* The whole row is the label, so the hit target is the row, not the 16px dot. The custom control is drawn on the ::before of the text span; the native input stays in the DOM, focusable and operable, and is positioned under the control rather than display:none'd — a display:none radio is unreachable by keyboard and drops out of the form. */ body #content .bakery.home .vds-quiz-option{ position:relative;display:flex;align-items:flex-start;gap:.7rem; padding:.75rem .9rem;border:1px solid var(--vds-border); border-radius:var(--vds-r-md);background:var(--vds-bg); cursor:pointer;font-size:.94rem;line-height:1.45;color:var(--vds-ink-2); transition:border-color var(--vds-t-base),background var(--vds-t-base), color var(--vds-t-base)} body #content .bakery.home .vds-quiz-option input[type="radio"]{ position:absolute;opacity:0;width:1.05rem;height:1.05rem;margin:0; top:.82rem;left:.9rem} body #content .bakery.home .vds-quiz-opt-txt{ position:relative;display:block;padding-left:1.6rem;flex:1 1 auto} .bakery.home .vds-quiz-opt-txt::before{ content:"";position:absolute;left:0;top:.18rem;width:1.05rem;height:1.05rem; border:2px solid var(--vds-border-strong,var(--vds-border)); border-radius:50%;background:var(--vds-bg); transition:border-color var(--vds-t-base),box-shadow var(--vds-t-base)} .bakery.home .vds-quiz-opt-txt::after{ content:"";position:absolute;left:.28rem;top:.46rem;width:.49rem;height:.49rem; border-radius:50%;background:var(--vds-red);transform:scale(0); transition:transform var(--vds-t-base)} body #content .bakery.home .vds-quiz-option:hover{ border-color:rgba(217,33,40,.32);color:var(--vds-ink)} /* :has() is the selected state for a browser that supports it; the .is-selected class the module adds is the fallback, and both are listed so neither is load-bearing on its own. */ body #content .bakery.home .vds-quiz-option.is-selected, body #content .bakery.home .vds-quiz-option:has(input:checked){ border-color:var(--vds-red);background:var(--vds-surface-2); color:var(--vds-ink)} .bakery.home .vds-quiz-option.is-selected .vds-quiz-opt-txt::after, .bakery.home .vds-quiz-option:has(input:checked) .vds-quiz-opt-txt::after{ transform:scale(1)} .bakery.home .vds-quiz-option.is-selected .vds-quiz-opt-txt::before, .bakery.home .vds-quiz-option:has(input:checked) .vds-quiz-opt-txt::before{ border-color:var(--vds-red)} /* The native input is transparent, so its own focus ring is invisible. Draw it on the control the user can actually see. */ .bakery.home .vds-quiz-option:focus-within .vds-quiz-opt-txt::before{ box-shadow:0 0 0 3px rgba(217,33,40,.35)} body #content .bakery.home .vds-quiz-option:focus-within{ border-color:var(--vds-red)} @media (prefers-reduced-motion:reduce){ .bakery.home .vds-quiz-opt-txt::after{transition:none} } /* --- Nav ------------------------------------------------------------ */ /* A "Next" button with no script behind it is a dead control. It does not exist until the module declares itself. */ body #content .bakery.home .vds-quiz .vds-quiz-nav{display:none;margin:0} body #content .bakery.home .vds-quiz[data-vds-quiz-js] .vds-quiz-nav{ display:flex;align-items:center;justify-content:space-between;gap:.75rem; margin:clamp(1.1rem,2.2vw,1.5rem) 0 0} /* Step 1 has no Back, so its Next would sit left under space-between. */ body #content .bakery.home .vds-quiz[data-vds-quiz-js] .vds-quiz-step:first-child .vds-quiz-nav{justify-content:flex-end} body #content .bakery.home .vds-quiz .vds-btn[disabled]{ opacity:.45;cursor:not-allowed;box-shadow:none;transform:none} body #content .bakery.home .vds-quiz .vds-btn[disabled]:hover{ transform:none;box-shadow:none} /* --- Result --------------------------------------------------------- */ body #content .bakery.home .vds-quiz-result{text-align:center} body #content .bakery.home .vds-quiz-result[hidden]{display:none} /* The comp's score ring is an with a stroke-dasharray animation. This is a conic-gradient on one custom property, for the TinyMCE reason in build-sections.py. `--vds-quiz-pct` is what the module sets. */ .bakery.home .vds-quiz-ring{ --vds-quiz-pct:0%; position:relative;width:150px;height:150px;margin:0 auto 1.1rem; border-radius:50%; background: conic-gradient(var(--vds-red) 0 var(--vds-quiz-pct), var(--vds-surface-2) var(--vds-quiz-pct) 100%); transition:background var(--vds-t-slow,.9s) ease} .bakery.home .vds-quiz-ring::before{ content:"";position:absolute;inset:12px;border-radius:50%; background:var(--vds-surface)} body #content .bakery.home .vds-quiz-score{ position:absolute;inset:0;display:flex;align-items:center; justify-content:center;font-family:var(--vds-font-display); font-weight:800;font-size:var(--vds-step-3);line-height:1; color:var(--vds-ink)} @media (prefers-reduced-motion:reduce){ .bakery.home .vds-quiz-ring{transition:none} } body #content .bakery.home .vds-quiz-tier{ display:inline-block;font-family:var(--vds-font-display);font-weight:700; font-size:.74rem;letter-spacing:.12em;text-transform:uppercase; color:#fff;background:var(--vds-grad-brand-deep); padding:.35rem .85rem;border-radius:var(--vds-r-pill);margin:0 0 .8rem} body #content .bakery.home .vds-quiz-result .vds-quiz-head{ font-size:var(--vds-step-2);line-height:1.2;margin:0 0 .7rem; color:var(--vds-ink)} body #content .bakery.home .vds-quiz-result .vds-lead{ max-width:46ch;margin:0 auto 1.4rem} body #content .bakery.home .vds-quiz-actions{ display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin:0} /* ===================================================================== * §11 — REAL RESULTS #proof * Comp: homepage `#proof` > `.case-card` — media band over a body. * ===================================================================== */ .bakery.home .vds-proof .vds-proof-head-row{ display:block;width:100%;margin-bottom:clamp(2rem,4vw,3rem)} .bakery.home .vds-proof-head{max-width:62ch;margin-inline:auto;text-align:center} body #content .bakery.home .vds-proof-head h2{max-width:22ch;margin-inline:auto} body #content .bakery.home .vds-proof-head .vds-lead{ margin-bottom:0;max-width:58ch;margin-inline:auto} .bakery.home .vds-proof .vds-proof-grid-row{display:block;width:100%} .bakery.home .vds-proof .vds-proof-col{float:none;width:100%;padding:0} body #content .bakery.home ul.vds-case-grid{ display:grid;grid-template-columns:1fr;gap:clamp(1rem,1.8vw,1.5rem); margin:0;padding:0;list-style:none;align-items:stretch} @media (min-width:700px){ body #content .bakery.home ul.vds-case-grid{grid-template-columns:repeat(2,1fr)} } @media (min-width:1024px){ body #content .bakery.home ul.vds-case-grid{grid-template-columns:repeat(3,1fr)} } body #content .bakery.home ul.vds-case-grid>li.vds-case-card{ position:relative;margin:0;padding:0;list-style:none; display:flex;flex-direction:column;overflow:hidden; background:var(--vds-surface);border:1px solid var(--vds-border); border-radius:var(--vds-r-lg);box-shadow:var(--vds-card-shadow); transition:transform var(--vds-t-base),box-shadow var(--vds-t-base), border-color var(--vds-t-base)} body #content .bakery.home ul.vds-case-grid>li.vds-case-card:hover, body #content .bakery.home ul.vds-case-grid>li.vds-case-card:focus-within{ transform:translateY(-4px);box-shadow:0 16px 34px rgba(217,33,40,.14); border-color:rgba(217,33,40,.30)} /* --- The media band ------------------------------------------------- */ /* A gradient, not a photograph: there is no real client photography in the kit and picsum is banned for anything standing in for a named client's work. Each card gets a different angle off the same brand ramp so the three read as a set rather than three copies. */ body #content .bakery.home .vds-case-media{ position:relative;display:flex;flex-direction:column; justify-content:space-between;align-items:flex-start; min-height:150px;padding:1rem 1.1rem; background:linear-gradient(135deg,var(--vds-red-deep),var(--vds-red))} body #content .bakery.home .vds-case-2 .vds-case-media{ background:linear-gradient(200deg,var(--vds-red),var(--vds-red-deep))} body #content .bakery.home .vds-case-3 .vds-case-media{ background:linear-gradient(300deg,var(--vds-red-deep),var(--vds-red))} body #content .bakery.home .vds-case-tag{ display:inline-block;font-family:var(--vds-font-display);font-weight:700; font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:#fff; background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.38); padding:.28rem .62rem;border-radius:var(--vds-r-pill)} body #content .bakery.home .vds-case-metric{display:block;color:#fff} body #content .bakery.home .vds-case-metric b{ display:block;font-family:var(--vds-font-display);font-weight:800; font-size:var(--vds-step-3);line-height:1;color:#fff} body #content .bakery.home .vds-case-metric span{ display:block;font-size:.8rem;letter-spacing:.02em;color:rgba(255,255,255,.9); margin-top:.18rem} /* --- The body ------------------------------------------------------- */ body #content .bakery.home .vds-case-body{ display:flex;flex-direction:column;flex:1 1 auto; padding:clamp(1.1rem,.9rem + .7vw,1.5rem) clamp(1.1rem,.9rem + .7vw,1.5rem) clamp(1rem,.85rem + .6vw,1.35rem)} body #content .bakery.home ul.vds-case-grid>li h3{ font-size:var(--vds-step-1);line-height:1.22;margin:0 0 .55rem} /* One anchor per card, as §8 established: the H3 is the link and its stretched ::after makes the card the hit target. */ body #content .bakery.home .vds-case-card h3 a{ color:var(--vds-ink);text-decoration:none;transition:color var(--vds-t-base)} body #content .bakery.home .vds-case-card h3 a::after{ content:"";position:absolute;inset:0;z-index:2} body #content .bakery.home .vds-case-card:hover h3 a, body #content .bakery.home .vds-case-card h3 a:hover, body #content .bakery.home .vds-case-card h3 a:focus-visible{ color:var(--vds-accent-ink);text-decoration:none} body #content .bakery.home .vds-case-card h3 a:focus-visible::after{ outline:2px solid var(--vds-accent-ink);outline-offset:-3px; border-radius:var(--vds-r-lg)} body #content .bakery.home .vds-case-card h3 a:focus{outline:none} body #content .bakery.home .vds-case-desc{ font-size:.94rem;line-height:1.55;color:var(--vds-ink-2);margin:0} /* margin-top:auto baselines the three links regardless of body length — gotcha #28's

      , so its inherited bottom margin is zeroed at (1,4,1). */ body #content .bakery.home .vds-case-card .vds-case-more{ margin:auto 0 0;padding-top:1rem;font-family:var(--vds-font-display); font-weight:600;font-size:.88rem;color:var(--vds-accent-ink)} body #content .bakery.home .vds-case-card .vds-case-more .vds-arrow{ display:inline-block;transition:transform var(--vds-t-base)} body #content .bakery.home .vds-case-card:hover .vds-case-more .vds-arrow{ transform:translateX(3px)} @media (prefers-reduced-motion:reduce){ body #content .bakery.home ul.vds-case-grid>li.vds-case-card, body #content .bakery.home .vds-case-card .vds-case-more .vds-arrow{ transition:none} body #content .bakery.home ul.vds-case-grid>li.vds-case-card:hover{ transform:none} } /* ===================================================================== * §12 — WHY BUSINESSES CHOOSE VDS #why-choose * Comp: homepage `#choose` > `.bento`. * ===================================================================== */ .bakery.home .vds-bento-sec .vds-bento-head-row{ display:block;width:100%;margin-bottom:clamp(2rem,4vw,3rem)} .bakery.home .vds-bento-head{max-width:62ch;margin-inline:auto;text-align:center} body #content .bakery.home .vds-bento-head h2{max-width:24ch;margin-inline:auto} .bakery.home .vds-bento-sec .vds-bento-row{display:block;width:100%} .bakery.home .vds-bento-sec .vds-bento-col{float:none;width:100%;padding:0} /* The bento proper: the feature spans the full height of the left column, the other three stack on the right. Below 900 it is one column and the feature simply leads, which is the reading order anyway. */ body #content .bakery.home ul.vds-bento{ display:grid;grid-template-columns:1fr;gap:clamp(1rem,1.8vw,1.4rem); margin:0;padding:0;list-style:none;align-items:stretch} @media (min-width:900px){ body #content .bakery.home ul.vds-bento{ grid-template-columns:1.05fr 1fr; grid-template-rows:repeat(3,auto)} body #content .bakery.home ul.vds-bento>li.vds-bento-feature{ grid-column:1;grid-row:1 / span 3} } body #content .bakery.home ul.vds-bento>li{ margin:0;list-style:none;background:var(--vds-surface); border:1px solid var(--vds-border);border-radius:var(--vds-r-lg); box-shadow:var(--vds-card-shadow); padding:clamp(1.35rem,1rem + 1.2vw,2rem); display:flex;flex-direction:column; transition:border-color var(--vds-t-base),box-shadow var(--vds-t-base)} body #content .bakery.home ul.vds-bento>li:hover{ border-color:rgba(217,33,40,.28);box-shadow:0 14px 30px rgba(217,33,40,.10)} body #content .bakery.home ul.vds-bento>li h3{ font-size:var(--vds-step-1);line-height:1.22;margin:0 0 .6rem} body #content .bakery.home .vds-bento-desc{ font-size:.95rem;line-height:1.6;color:var(--vds-ink-2);margin:0; max-width:56ch} /* The feature card's gradient rail — comp `.bento-feature`. */ body #content .bakery.home ul.vds-bento>li.vds-bento-feature{ position:relative;overflow:hidden} .bakery.home ul.vds-bento>li.vds-bento-feature::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:4px; background:var(--vds-grad-brand)} body #content .bakery.home ul.vds-bento>li.vds-bento-feature h3{ font-size:var(--vds-step-2)} /* The three figures, lifted out of the paragraph above them. aria-hidden — the prose already carries every one of these claims. */ body #content .bakery.home ul.vds-bento-stats{ display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem; margin:auto 0 0;padding:clamp(1.2rem,2.4vw,1.7rem) 0 0;list-style:none} body #content .bakery.home ul.vds-bento-stats>li{ margin:0;padding:0;list-style:none;border-top:1px solid var(--vds-border); padding-top:.85rem} body #content .bakery.home ul.vds-bento-stats b{ display:block;font-family:var(--vds-font-display);font-weight:800; font-size:var(--vds-step-2);line-height:1;color:var(--vds-accent-ink)} body #content .bakery.home ul.vds-bento-stats span{ display:block;font-size:.78rem;line-height:1.35;color:var(--vds-muted); margin-top:.3rem} @media (max-width:479px){ body #content .bakery.home ul.vds-bento-stats{grid-template-columns:1fr} } /* ===================================================================== * §13 — REAL REVIEWS #reviews * The widget is Trustindex's; this only makes room for it. * ===================================================================== */ .bakery.home .vds-reviews .vds-reviews-head-row{ display:block;width:100%;margin-bottom:clamp(1.75rem,3.4vw,2.6rem)} .bakery.home .vds-reviews-head{max-width:62ch;margin-inline:auto;text-align:center} body #content .bakery.home .vds-reviews-head h2{max-width:22ch;margin-inline:auto} body #content .bakery.home .vds-reviews-head .vds-lead{ margin-bottom:0;max-width:62ch;margin-inline:auto} .bakery.home .vds-reviews .vds-reviews-body-row{display:block;width:100%} .bakery.home .vds-reviews .vds-reviews-col{float:none;width:100%;padding:0} /* GOTCHA #32. The widget wraps itself in `

      `. A 
         inherits `white-space:pre` and a monospace face, and it does not wrap — so
   left alone it pushes the document's scrollWidth past the viewport at every
   breakpoint and fails verify.py's overflow assertion. Neutralise the
   element; everything inside it is the plugin's own styled markup. */
body #content .bakery.home .vds-reviews-widget pre.ti-widget{
  white-space:normal;font-family:inherit;font-size:inherit;line-height:inherit;
  margin:0;padding:0;border:0;background:none;overflow:visible;
  max-width:100%;color:inherit}
/* The widget's own `.ti-reviews-container-wrapper` uses a -8px horizontal
   gutter with a matching `padding:0 8px` on each review item — the standard
   negative-margin grid trick. With a flush wrapper those 8px land outside
   the box: `overflow:hidden` then clips them and scrollWidth runs 8px over
   at 768 and 390. Giving the wrapper the same 8px inset gives the negative
   margins somewhere to go, so the card edges sit exactly on the container
   and nothing is clipped or scrollable. Caught by verify.py only after the
   Trustindex check was fixed to scroll the widget into view first — before
   that it measured a collapsed, unhydrated widget and passed. */
body #content .bakery.home .vds-reviews-widget{
  max-width:100%;overflow:hidden;padding-inline:8px}
.bakery.home .vds-reviews-cta-row{display:block;width:100%;
  margin-top:clamp(1.5rem,3vw,2.2rem)}
body #content .bakery.home .vds-reviews-cta{text-align:center}
body #content .bakery.home .vds-reviews-cta p{margin:0}

/* =====================================================================
 * §14 — FOOTPRINT + NAP   #footprint
 * Comp: homepage `#footprint` section head; the comp's US map is a
 * JS-injected decoration and is not carried over (see build-sections.py).
 * ===================================================================== */
.bakery.home .vds-fp .vds-fp-head-row{
  display:block;width:100%;margin-bottom:clamp(1.75rem,3.4vw,2.6rem)}
.bakery.home .vds-fp-head{max-width:64ch;margin-inline:auto;text-align:center}
body #content .bakery.home .vds-fp-head h2{max-width:20ch;margin-inline:auto}
body #content .bakery.home .vds-fp-head .vds-lead{
  max-width:62ch;margin-inline:auto;margin-bottom:1rem}
/* `:not(.vds-eyebrow)` is load-bearing — without it this rule (1,4,1) beats
   the eyebrow primitive (1,3,1) and §14's eyebrow renders in body ink while
   every other section's is accent red. audit2.py's per-instance eyebrow dump
   is what caught it. */
body #content .bakery.home .vds-fp-head p:not(.vds-eyebrow){
  max-width:56ch;margin-inline:auto;color:var(--vds-ink-2)}
body #content .bakery.home .vds-fp-head p:last-child{margin-bottom:0}

/* --- The NAP -------------------------------------------------------- */
/* A real 
      , centred on its own surface, so the contact block is
   identifiable without depending on the JSON-LD — the failure all three
   bake-off candidates shared. */
.bakery.home .vds-fp .vds-nap-row{display:block;width:100%;
  margin-bottom:clamp(2rem,4vw,3rem)}
.bakery.home .vds-fp .vds-nap-col{float:none;width:100%;padding:0}
body #content .bakery.home .vds-nap{
  max-width:440px;margin-inline:auto;text-align:center;
  background:var(--vds-surface);border:1px solid var(--vds-border);
  border-radius:var(--vds-r-lg);box-shadow:var(--vds-card-shadow);
  padding:clamp(1.4rem,1rem + 1.4vw,2rem)}
body #content .bakery.home .vds-nap-name{
  font-family:var(--vds-font-display);font-weight:700;
  font-size:var(--vds-step-1);line-height:1.2;color:var(--vds-ink);
  margin:0 0 .5rem}
/* UA italicises 
      . */
body #content .bakery.home address.vds-nap-addr{
  font-style:normal;font-size:.98rem;line-height:1.55;
  color:var(--vds-ink-2);margin:0 0 .6rem}
body #content .bakery.home .vds-nap-tel{margin:0 0 1.1rem}
body #content .bakery.home .vds-nap-tel a{
  font-family:var(--vds-font-display);font-weight:700;
  font-size:var(--vds-step-1);color:var(--vds-accent-ink);
  text-decoration:none}
body #content .bakery.home .vds-nap-tel a:hover,
body #content .bakery.home .vds-nap-tel a:focus-visible{
  text-decoration:underline}
body #content .bakery.home .vds-nap-cta{margin:0}

/* --- The two office tiers ------------------------------------------- */
/* Only five of the fifteen have a street address. The two tiers are
   VISIBLY different components, not one list with gaps, because the data
   genuinely differs in kind — presenting a phone-only market as an address
   card with an empty address line would read as a missing value rather
   than as "there is no office address here". */
.bakery.home .vds-fp .vds-office-row{display:block;width:100%}
.bakery.home .vds-fp .vds-office-col{float:none;width:100%;padding:0}
body #content .bakery.home .vds-office-h{
  font-family:var(--vds-font-display);font-weight:700;
  font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--vds-muted);margin:0 0 1rem;text-align:center}
body #content .bakery.home .vds-office-h.vds-office-h2{
  margin-top:clamp(2rem,4vw,2.8rem)}

body #content .bakery.home ul.vds-office-grid{
  display:grid;grid-template-columns:1fr;gap:clamp(.85rem,1.6vw,1.2rem);
  margin:0;padding:0;list-style:none}
@media (min-width:600px){
  body #content .bakery.home ul.vds-office-grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1024px){
  body #content .bakery.home ul.vds-office-grid{grid-template-columns:repeat(3,1fr)}
}
body #content .bakery.home ul.vds-office-grid>li{
  margin:0;list-style:none;background:var(--vds-surface);
  border:1px solid var(--vds-border);border-radius:var(--vds-r-md);
  padding:1.1rem 1.2rem}
body #content .bakery.home ul.vds-office-grid>li.vds-office-hq{
  border-color:rgba(217,33,40,.35)}
body #content .bakery.home ul.vds-office-grid>li h3{
  font-size:1.02rem;line-height:1.25;margin:0 0 .45rem;
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
body #content .bakery.home .vds-office-flag{
  font-family:var(--vds-font-display);font-weight:700;font-size:.62rem;
  letter-spacing:.1em;text-transform:uppercase;color:#fff;
  background:var(--vds-grad-brand-deep);padding:.2rem .5rem;
  border-radius:var(--vds-r-pill)}
body #content .bakery.home .vds-office-addr{
  font-size:.9rem;line-height:1.5;color:var(--vds-ink-2);margin:0 0 .4rem}
body #content .bakery.home .vds-office-tel{margin:0}
body #content .bakery.home .vds-office-tel a,
body #content .bakery.home ul.vds-office-list a{
  font-family:var(--vds-font-display);font-weight:600;font-size:.9rem;
  color:var(--vds-accent-ink);text-decoration:none}
body #content .bakery.home .vds-office-tel a:hover,
body #content .bakery.home .vds-office-tel a:focus-visible,
body #content .bakery.home ul.vds-office-list a:hover,
body #content .bakery.home ul.vds-office-list a:focus-visible{
  text-decoration:underline}

body #content .bakery.home ul.vds-office-list{
  display:grid;grid-template-columns:repeat(2,1fr);gap:.2rem .9rem;
  margin:0;padding:0;list-style:none}
@media (min-width:768px){
  body #content .bakery.home ul.vds-office-list{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1200px){
  body #content .bakery.home ul.vds-office-list{grid-template-columns:repeat(5,1fr)}
}
body #content .bakery.home ul.vds-office-list>li{
  margin:0;padding:.55rem 0;list-style:none;
  border-bottom:1px solid var(--vds-border);
  display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:.4rem}
body #content .bakery.home .vds-office-city{
  font-size:.9rem;color:var(--vds-ink)}

/* =====================================================================
 * §15 — WHO YOU'LL WORK WITH   #team
 * No comp counterpart. Card = comp `.bento-item`; the monogram tile takes
 * `.bento-ico`'s position and size. See build-sections.py for what is
 * deliberately absent and why nothing was invented to fill it.
 * ===================================================================== */
.bakery.home .vds-team-sec .vds-team-head-row{
  display:block;width:100%;margin-bottom:clamp(2rem,4vw,3rem)}
.bakery.home .vds-team-head{text-align:center}
body #content .bakery.home .vds-team-head h2{max-width:22ch;margin-inline:auto}
.bakery.home .vds-team-sec .vds-team-grid-row{display:block;width:100%}
.bakery.home .vds-team-sec .vds-team-col{float:none;width:100%;padding:0}

body #content .bakery.home ul.vds-team-grid{
  display:grid;grid-template-columns:1fr;gap:clamp(1rem,1.8vw,1.5rem);
  max-width:1000px;margin:0 auto;padding:0;list-style:none;
  align-items:stretch}
@media (min-width:700px){
  body #content .bakery.home ul.vds-team-grid{grid-template-columns:repeat(3,1fr)}
}
body #content .bakery.home ul.vds-team-grid>li.vds-team-card{
  margin:0;list-style:none;text-align:center;
  background:var(--vds-surface);border:1px solid var(--vds-border);
  border-radius:var(--vds-r-lg);box-shadow:var(--vds-card-shadow);
  padding:clamp(1.5rem,1.1rem + 1.2vw,2.1rem);
  /* align-content:start — gotcha #27. Without it the card's auto rows
     stretch to fill the equal-height cell and the two cards carrying only
     a title would push it to the vertical centre while the one carrying
     only a bio sits at the top. */
  display:grid;align-content:start;justify-items:center}
/* A CSS monogram, not a photograph. The spec requires real photography and
   the standing rules ban a placeholder image for a named person's face — a
   greybox where an executive's photo goes is a claim about a real person.
   A monogram asserts nothing. aria-hidden: the name is directly below. */
body #content .bakery.home .vds-team-mono{
  display:flex;align-items:center;justify-content:center;
  width:72px;height:72px;border-radius:50%;
  background:var(--vds-grad-brand-deep);color:#fff;
  font-family:var(--vds-font-display);font-weight:800;font-size:1.5rem;
  line-height:1;letter-spacing:.02em;margin:0 0 1rem}
body #content .bakery.home ul.vds-team-grid>li h3{
  font-size:var(--vds-step-1);line-height:1.22;margin:0 0 .35rem}
body #content .bakery.home .vds-team-title{
  font-family:var(--vds-font-display);font-weight:600;font-size:.85rem;
  letter-spacing:.02em;color:var(--vds-accent-ink);margin:0}
body #content .bakery.home .vds-team-bio{
  font-size:.94rem;line-height:1.55;color:var(--vds-ink-2);
  margin:.55rem 0 0;max-width:34ch}

/* =====================================================================
 * §16 — FIND YOUR PATH   #router
 * No comp counterpart. Derived from inv-service.css `.prob`, as three
 * peers rather than a staircase — these are alternatives, not steps, so
 * the ghost numeral that encoded order in §9 is dropped.
 * ===================================================================== */
.bakery.home .vds-router .vds-router-head-row{
  display:block;width:100%;margin-bottom:clamp(2rem,4vw,3rem)}
.bakery.home .vds-router-head{text-align:center}
body #content .bakery.home .vds-router-head h2{max-width:20ch;margin-inline:auto}
.bakery.home .vds-router .vds-router-grid-row{display:block;width:100%}
.bakery.home .vds-router .vds-router-col{float:none;width:100%;padding:0}

body #content .bakery.home ul.vds-router-grid{
  display:grid;grid-template-columns:1fr;gap:clamp(1rem,1.8vw,1.5rem);
  margin:0;padding:0;list-style:none;align-items:stretch}
@media (min-width:820px){
  body #content .bakery.home ul.vds-router-grid{grid-template-columns:repeat(3,1fr)}
}
body #content .bakery.home ul.vds-router-grid>li.vds-router-card{
  position:relative;margin:0;list-style:none;
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--vds-surface);border:1px solid var(--vds-border);
  border-radius:var(--vds-r-lg);box-shadow:var(--vds-card-shadow);
  padding:clamp(1.5rem,1.1rem + 1.2vw,2.1rem);
  transition:transform var(--vds-t-base),box-shadow var(--vds-t-base),
             border-color var(--vds-t-base)}
/* Comp `.prob`'s top rail rather than §8's left rail: these cards are read
   as a row of three choices, and a rail on the leading edge of each would
   point across the row instead of down into the card. */
.bakery.home ul.vds-router-grid>li.vds-router-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--vds-grad-brand);opacity:.45;
  transition:opacity var(--vds-t-base)}
body #content .bakery.home ul.vds-router-grid>li.vds-router-card:hover,
body #content .bakery.home ul.vds-router-grid>li.vds-router-card:focus-within{
  transform:translateY(-4px);box-shadow:0 16px 34px rgba(217,33,40,.14);
  border-color:rgba(217,33,40,.30)}
.bakery.home ul.vds-router-grid>li.vds-router-card:hover::before,
.bakery.home ul.vds-router-grid>li.vds-router-card:focus-within::before{
  opacity:1}
body #content .bakery.home ul.vds-router-grid>li h3{
  font-size:var(--vds-step-1);line-height:1.22;margin:0 0 .6rem}
body #content .bakery.home .vds-router-card h3 a{
  color:var(--vds-ink);text-decoration:none;transition:color var(--vds-t-base)}
body #content .bakery.home .vds-router-card h3 a::after{
  content:"";position:absolute;inset:0;z-index:2}
body #content .bakery.home .vds-router-card:hover h3 a,
body #content .bakery.home .vds-router-card h3 a:hover,
body #content .bakery.home .vds-router-card h3 a:focus-visible{
  color:var(--vds-accent-ink);text-decoration:none}
body #content .bakery.home .vds-router-card h3 a:focus-visible::after{
  outline:2px solid var(--vds-accent-ink);outline-offset:-3px;
  border-radius:var(--vds-r-lg)}
body #content .bakery.home .vds-router-card h3 a:focus{outline:none}
body #content .bakery.home .vds-router-desc{
  font-size:.95rem;line-height:1.6;color:var(--vds-ink-2);margin:0;
  max-width:56ch}
body #content .bakery.home .vds-router-card .vds-router-more{
  margin:auto 0 0;padding-top:1.1rem;font-family:var(--vds-font-display);
  font-weight:600;font-size:.88rem;color:var(--vds-accent-ink)}
body #content .bakery.home .vds-router-card .vds-router-more .vds-arrow{
  display:inline-block;transition:transform var(--vds-t-base)}
body #content .bakery.home .vds-router-card:hover .vds-router-more .vds-arrow{
  transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){
  body #content .bakery.home ul.vds-router-grid>li.vds-router-card{transition:none}
  body #content .bakery.home ul.vds-router-grid>li.vds-router-card:hover{
    transform:none}
}

/* =====================================================================
 * §17 — FREQUENTLY ASKED QUESTIONS   #faq
 * Comp: service page `#faq` > `.faq-item` / `.faq-q` / `.faq-a`, rebuilt
 * on native 
       with a real H3 in the  (spec).
 * ===================================================================== */
.bakery.home .vds-faq-sec .vds-faq-head-row{
  display:block;width:100%;margin-bottom:clamp(1.75rem,3.4vw,2.6rem)}
.bakery.home .vds-faq-head{max-width:62ch;margin-inline:auto;text-align:center}
body #content .bakery.home .vds-faq-head h2{max-width:22ch;margin-inline:auto}
body #content .bakery.home .vds-faq-head .vds-lead{
  margin-bottom:0;max-width:58ch;margin-inline:auto}
.bakery.home .vds-faq-sec .vds-faq-body-row{display:block;width:100%}
.bakery.home .vds-faq-sec .vds-faq-col{float:none;width:100%;padding:0}
/* The comp caps its FAQ container at 840px. Eight answers of 45-60 words
   each at the full 1200 would run past 110 characters a line. */
body #content .bakery.home .vds-faq{max-width:840px;margin-inline:auto}

body #content .bakery.home .vds-faq-item{
  border:1px solid var(--vds-border);border-radius:var(--vds-r-md);
  background:var(--vds-surface);margin:0 0 .7rem;overflow:hidden;
  transition:border-color var(--vds-t-base)}
body #content .bakery.home .vds-faq-item:last-child{margin-bottom:0}
body #content .bakery.home .vds-faq-item[open]{
  border-color:rgba(217,33,40,.30)}
body #content .bakery.home .vds-faq-item:hover{
  border-color:rgba(217,33,40,.30)}

/* The UA disclosure triangle cannot be styled consistently and would sit
   beside our own marker. Both selectors are needed: ::-webkit-details-marker
   for older WebKit, `display:block` on the summary itself for the rest. */
body #content .bakery.home .vds-faq-q{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding:1rem 1.15rem;cursor:pointer;list-style:none;
  transition:background var(--vds-t-base)}
.bakery.home .vds-faq-q::-webkit-details-marker{display:none}
.bakery.home .vds-faq-q::marker{content:""}
body #content .bakery.home .vds-faq-q:hover{background:var(--vds-surface-2)}
/*  is the focusable element, so the ring goes on it. */
body #content .bakery.home .vds-faq-q:focus-visible{
  outline:2px solid var(--vds-accent-ink);outline-offset:-3px}
body #content .bakery.home .vds-faq-q h3{
  font-size:1.02rem;line-height:1.35;font-weight:600;margin:0;
  color:var(--vds-ink);text-wrap:balance;flex:1 1 auto}
body #content .bakery.home .vds-faq-item[open] .vds-faq-q h3{
  color:var(--vds-accent-ink)}

/* The marker is drawn, not typed: the subsetted Montserrat has no glyph we
   would want at this size, and a rotating cross reads as open/closed
   without depending on a font at all. */
.bakery.home .vds-faq-mark{
  position:relative;flex:0 0 auto;width:18px;height:18px;margin-top:.28rem;
  transition:transform var(--vds-t-base)}
.bakery.home .vds-faq-mark::before,
.bakery.home .vds-faq-mark::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--vds-accent-ink);
  border-radius:1px;transform:translate(-50%,-50%)}
.bakery.home .vds-faq-mark::before{width:14px;height:2px}
.bakery.home .vds-faq-mark::after{width:2px;height:14px;
  transition:transform var(--vds-t-base),opacity var(--vds-t-base)}
.bakery.home .vds-faq-item[open] .vds-faq-mark::after{
  transform:translate(-50%,-50%) scaleY(0);opacity:0}
@media (prefers-reduced-motion:reduce){
  .bakery.home .vds-faq-mark,
  .bakery.home .vds-faq-mark::after{transition:none}
}

body #content .bakery.home .vds-faq-a{padding:0 1.15rem 1.15rem}
body #content .bakery.home .vds-faq-a p{
  font-size:.95rem;line-height:1.65;color:var(--vds-ink-2);margin:0;
  max-width:56ch}

/* =====================================================================
 * §18 — FINAL CONVERSION, THE FREE AUDIT   #audit
 * Comp: homepage `#final-cta` > `.cta-band` — the one full-bleed brand
 * band on the page. The spec puts the form in it, beside the bullets.
 * ===================================================================== */
/* The band IS the section, so the red runs edge to edge rather than sitting
   in a card inside a neutral section. Everything in here reads on red, so
   the type colours are set explicitly at the section root rather than
   inherited from the light/dark ink sets — this surface is the same in
   both themes, and an ink token that flips would turn the copy invisible in
   one of them. */
.bakery.home .vds-section.vds-audit{
  background:linear-gradient(135deg,var(--vds-red-deep),var(--vds-red));
  color:#fff}
.bakery.home .vds-audit .vds-audit-row{display:block;width:100%}
.bakery.home .vds-audit .vds-audit-col{float:none;width:100%;padding:0}
/* Two-up on the COLUMN's wrapper, not on `.vc_row > .container` — this row
   has one WPBakery column holding two text blocks, which is the ratio trick
   §§3, 5 and 9 use to get an arbitrary split without fighting WPBakery's
   1/2 // 1/3 widths (gotcha #24 is about the other case, a row with real
   sibling columns). */
@media (min-width:960px){
  .bakery.home .vds-audit .vds-audit-col>.vc_column-inner>.wpb_wrapper{
    display:grid;grid-template-columns:1fr 1fr;
    gap:clamp(2rem,4vw,3.5rem);align-items:start}
}
/* wpb_text_column's own bottom margin would add a gap the grid already
   owns; the last-child reset only covers the second block. */
.bakery.home .vds-audit .wpb_text_column{margin-bottom:0}

body #content .bakery.home .vds-audit h2,
body #content .bakery.home .vds-audit h3,
body #content .bakery.home .vds-audit p,
body #content .bakery.home .vds-audit li,
body #content .bakery.home .vds-audit b{color:#fff}
/* The eyebrow primitive sets its colour at (1,3,1); matching that prefix
   and arriving later is what lets it go light on this band (gotcha #25). */
body #content .bakery.home .vds-audit .vds-eyebrow{color:#fff}
.bakery.home .vds-audit .vds-eyebrow::before{background:#fff}
/* The gradient-text primitive clips a red ramp to the glyphs, which is
   invisible on red. On this band the H2 is plain white. */
body #content .bakery.home .vds-audit h2{
  font-size:var(--vds-step-3);line-height:1.12;max-width:18ch;margin:0 0 .6rem}
body #content .bakery.home .vds-audit .vds-audit-sub{
  font-size:var(--vds-step-1);line-height:1.3;font-weight:600;margin:0 0 .8rem}
body #content .bakery.home .vds-audit .vds-lead{
  color:rgba(255,255,255,.92);max-width:52ch;margin:0 0 1.5rem}

/* --- The bullets ---------------------------------------------------- */
/* Markers drawn in CSS, as §§6 and 8 do: the subsetted Montserrat has no
   U+2713 and a literal check would fall back to another face. */
body #content .bakery.home ul.vds-audit-checks{
  margin:0 0 1.5rem;padding:0;list-style:none;display:grid;gap:.85rem}
body #content .bakery.home ul.vds-audit-checks>li{
  position:relative;margin:0;padding:0 0 0 2rem;list-style:none;max-width:56ch;
  font-size:.95rem;line-height:1.55;color:rgba(255,255,255,.92)}
body #content .bakery.home ul.vds-audit-checks>li b{
  font-family:var(--vds-font-display);font-weight:700;color:#fff}
.bakery.home ul.vds-audit-checks>li::before{
  content:"";position:absolute;left:0;top:.34rem;width:1.15rem;height:1.15rem;
  border-radius:50%;background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.45)}
.bakery.home ul.vds-audit-checks>li::after{
  content:"";position:absolute;left:.38rem;top:.56rem;
  width:.28rem;height:.55rem;border:solid #fff;border-width:0 2px 2px 0;
  transform:rotate(45deg)}
body #content .bakery.home .vds-audit-call{
  font-size:.95rem;color:rgba(255,255,255,.92);margin:0}
body #content .bakery.home .vds-audit-call a{
  font-family:var(--vds-font-display);font-weight:700;color:#fff;
  text-decoration:underline;text-underline-offset:3px}
body #content .bakery.home .vds-audit-call a:hover,
body #content .bakery.home .vds-audit-call a:focus-visible{
  color:#ffe9ea}

/* --- The form ------------------------------------------------------- */
/* The form sits on its own light surface inside the band: Gravity Forms
   draws its own inputs, borders and error states against a light ground,
   and restyling every one of them to read on red is a large surface for a
   small gain. A white card also reads as the thing to do next. */
body #content .bakery.home .vds-audit-form{
  background:var(--vds-bg);border-radius:var(--vds-r-lg);
  box-shadow:0 20px 44px rgba(0,0,0,.22);
  padding:clamp(1.4rem,1rem + 1.4vw,2rem);margin-top:clamp(1.5rem,3vw,0rem)}
@media (min-width:960px){
  body #content .bakery.home .vds-audit-form{margin-top:0}
}
body #content .bakery.home .vds-audit-form label,
body #content .bakery.home .vds-audit-form .gfield_label{
  font-family:var(--vds-font-display);font-weight:600;font-size:.86rem;
  color:var(--vds-ink)}
body #content .bakery.home .vds-audit-form input[type="text"],
body #content .bakery.home .vds-audit-form input[type="email"],
body #content .bakery.home .vds-audit-form input[type="tel"],
body #content .bakery.home .vds-audit-form select{
  width:100%;font-family:var(--vds-font-body);font-size:.95rem;
  color:var(--vds-ink);background:var(--vds-surface);
  border:1px solid var(--vds-border);border-radius:var(--vds-r-sm);
  padding:.65rem .8rem}
body #content .bakery.home .vds-audit-form input:focus-visible,
body #content .bakery.home .vds-audit-form select:focus-visible{
  outline:2px solid var(--vds-accent-ink);outline-offset:1px;
  border-color:var(--vds-accent-ink)}
/* Gravity Forms' submit is a bare