/* Hallmark · shape: Sticker Sheet with a trace (bright full-bleed grounds that change per section; the founders cut out as stickers in a green hero; directly under it, a three-stage diagram of where calls come from and where they land) · genre: playful · theme: custom · redesign: full · scope: site (32 pages share this system and differ only in shape; design.md locks it) · job: hire, Book a Consultation in the sticky header, every hero, the closing band, the footer, the phone bar and a full form at #consult (the homepage and /contact/) · idea: "real local people behind your marketing: the two founders stand in the first screen with the channels they work stuck around them, and the next screen traces those channels to calls and booked jobs" · vibe: "bright sticker sheet, friendly, local, accountable"
 * paper: oklch(97.6% 0.012 160) mint-white, with full-bleed grounds of brand green #00CA72, lemon oklch(93% 0.165 103), mint oklch(91% 0.09 158) and flamingo oklch(76% 0.165 352); navy #132E6E is the ink everywhere and the one dark ground (the footer) · accent: #00CA72 as a ground, #007A44 never needed for text (navy carries it) · display: Dela Gothic One · body: Figtree · hero: Founders on green (/); Banner on the page family's ground, head left with the lead and actions beside it (inner pages: services green, Who We Serve lemon, About mint, Resources, legal and Contact paper) · nav: a white sticker bar attached to the top edge, opaque, a navy rule under it, AI Marketing first · footer: navy, logo, phone and action over two link columns · imagery: the founders' own photographs (cut out as stickers on the homepage, framed portraits on About), their avatars beside the founders' link; no library photographs · signature: the founders as stickers in the hero, then the trace: five channel stickers wired to Calls and forms, then to Booked jobs, small green pulses running along thick navy paths
 * axes: light/display-heavy/chromatic-green · posture: drenched (each section is one full colour ground; navy ink derives the rest) · contrast: pass (navy text on every ground: 5.8:1 on green, 6:1 on flamingo, 11:1 or more on lemon, mint and paper; lemon and white on the navy footer and bar) · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V5 · weakest: R, bright grounds in a row could turn to noise; each section keeps one ground and one object, only the filled lemon Book a Consultation carries the hard sticker edge, only short stickers tilt, the only loop is the diagram's pulses, and nothing can be dragged */
/* Hallmark · waive 23 · brand green fills the homepage hero, the services heroes, the founders, the consultation and the closing band · drenched posture, the owner asked for Collage's bright colour; the green is the brand's own hand icon and never carries small text */
/* Hallmark · waive 9 · sections meet as hard colour changes with no spacer · the owner chose Collage's bright section rhythm, every ground change is the seam */
/* Hallmark · dismissed F4 · outlined buttons are .btn--quiet, a transparent fill with the navy edge and no shadow, so each screen holds one filled primary (the lemon Book a Consultation; the header copy aside) */
/* Hallmark · answered F20 · the Construction trades are five real links whose label lengths set the wrap; the count is the owner's */
/* Hallmark · answered F8 · the stickers stick on once at load and the KPI stamps land once: two small reactions, both off under reduced motion */
/* Hallmark · dismissed F7 · the pills are controls (skip link, nav links, Menu, Pause, chips) or stickers by design (the name tags and channel stickers), the shape the owner chose from Collage; boxes keep the card radius */
/* Hallmark · dismissed 59 · the homepage holds ten blocks counting the hero and the footer: the redesign keeps every section of the owner's page and adds only the diagram the owner asked for */
/* Hallmark · waive 77 · the prose pages (services, why choose us, code of ethics, the three articles, privacy, accessibility) hold one column of the owner's own long copy · a Long Document reads in one column on paper, and a wider body would break the measure */
/* Hallmark · waive 78 · prose heads in .prose sit at --text-prose-h under the page head · the owner's brief asks for headings in the display face at a calm size inside long prose; composed sections keep --text-section */
/* Hallmark · reworded "Industry-Leading" (an h3 on /services/search-engine-optimization/) to "Ahead of the Curve" · 19 names the buzzword; the paragraph under it already says "we keep you ahead of the curve" */
/* Hallmark · dismissed 19 · "All rights reserved" is the owner's own footer line, kept verbatim */
/* Hallmark · dismissed 58 · the hero sentence runs twenty words because the owner's brief asked it to say who, what and how; every page keeps all of the owner's content, so totals run past 450 words */
/* Hallmark · reworded "Turn More Clicks Into Customers." (hero h1) to "More booked jobs for local service businesses." and kept the old line as the head of the diagram · the owner's brief asked the first screen to say who, what and the result */
/* Hallmark · reworded "Custom digital marketing strategies built around your business, from SEO and paid advertising to social media and websites that convert" to "SEO, AI search, paid ads, social and websites for home service and construction companies, every lead traced to its source" · the owner's brief asked for one sentence with who, what and how */
/* Hallmark · reworded "Unleashing Potential: Realize Your Vision With Clicklabs" to "Realize Your Vision With Clicklabs" on the article tickets · 19 names "Unleashing"; the article page keeps its own title */
/* Hallmark · reworded the form option label "Paid Ads – PPC, CPM & CPA" to "Paid Ads (PPC, CPM & CPA)" · 19 names the dash; its value attribute keeps the original text so the submitted data is unchanged */
/* Hallmark · reworded "Everything you need to grow online." (/services/ h1) to "Seven ways we grow your business online." · 19 names the cliche; the page lists seven services */
/* Hallmark · reworded the dashes in the owner's copy to colons, commas or words ("**Keywords** – What" to "**Keywords**: What", "Mon–Thu: 9AM–5PM" to "Monday to Thursday, 9AM to 5PM", "Year 1 – " to "Year 1: ") · 19 names the dash */
/* Hallmark · reworded "seamlessly" to "naturally" (Local SEO), "Elevates" to "Strengthens" (Web Development), "elevate brands" to "grow brands" and "seamlessly transition" to "turn" (Why Choose Us), "our industry-leading tools" to "our tools" (Code of Ethics), "a game-changer, providing seamless" to "its value, providing a consistent" and "revolutionized" to "changed" (the customer-experience article), the post title "Unleashing Potential: Realize Your Vision With Clicklabs" to "Realize Your Vision With Clicklabs" · 19 names the buzzwords */
/* Hallmark · reworded the homepage headings "Paid Ads — PPC, CPM & CPA" to "Paid Ads: PPC, CPM & CPA", "Case Study: Turbocharging Growth – From Startup…" to "…Growth, From Startup…", and set Service, Trust, Creativity and Accountability as terms of the values list (dt) instead of h3 · 19 names the dashes; the values are one list, not four sections */
/* Hallmark · dropped every eyebrow ("Services", "Why Clicklabs", "Our values", "Challenges & solutions", "11 trades"...) · Floor 9; each heading under one already said it */
/* Hallmark · dropped the arrows glued to link text ("Learn more →", "Explore Garage Doors →", "Read article →") · Floor 10; the link text stays, underlined */
/* Hallmark · dropped the Growth overview chart with its "Example data" badge from the old homepage hero · the owner's v3 hero replaced it with the founders; it was illustrative, not client data */

/* ---------- ground ---------- */
html {
  background: var(--color-paper);
  scroll-padding-top: calc(var(--header-h) + var(--space-md));
  scroll-padding-bottom: calc(var(--bar-reserve) + var(--space-md));
}
body { background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); line-height: 1.6; }
b, strong { font-weight: 800; }
h1, h2, h3 { color: var(--color-ink); font-weight: 400; letter-spacing: var(--tracking-display); }
h2 { font-size: var(--text-section); line-height: 1.02; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.container { max-width: var(--container); padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }
section { position: relative; }
main > section { overflow-x: clip; }
/* anchor targets with their own ground land flush under the header */
#services, #consult { scroll-margin-top: calc(-1 * var(--space-md)); }

/* the grounds, in the order rule of design.md: no two neighbours share one */
.g-paper { background: var(--color-paper); }
.g-green { background: var(--color-green); }
.g-lemon { background: var(--color-lemon); }
.g-mint { background: var(--color-mint); }
.g-flamingo { background: var(--color-flamingo); }

/* ---------- controls ---------- */
a { color: var(--color-ink); text-decoration-thickness: 2px; text-underline-offset: 0.22em; }
a:hover { text-decoration-color: var(--color-green-ink); }
a:focus-visible, summary:focus-visible, button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.foot, .mbar { --color-focus: var(--color-focus-dark); }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-4xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); background: var(--color-navy); color: var(--color-sticker); font-weight: 600; }
.skip:focus-visible { top: calc(var(--space-md) + env(safe-area-inset-top)); outline-color: var(--color-navy); box-shadow: 0 0 0 3px var(--color-lemon); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 52px; padding: 0 var(--space-lg); border: var(--rule-fat) solid var(--color-navy); border-radius: var(--radius-pill);
  font: 800 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.btn:active { transform: translateY(2px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
/* the one filled primary: lemon, the thick navy edge and the only hard shadow on the site */
.btn--book, .lead-form button[type="submit"] { background: var(--color-lemon); color: var(--color-navy); box-shadow: var(--shadow-hard); }
.btn--book:hover, .lead-form button[type="submit"]:hover { background: var(--color-sticker); }
.btn--quiet { background: transparent; color: var(--color-navy); }
.btn--quiet:hover { background: var(--color-navy); color: var(--color-sticker); }
.btn--ghost { background: transparent; color: var(--color-on-dark); border-color: var(--color-on-dark); }
.btn--ghost:hover { background: var(--color-on-dark); color: var(--color-navy); }
.btn--big { min-height: 52px; padding: 0 var(--space-xl); font-size: var(--text-lg); }

.link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 800; color: var(--color-navy); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em; transition: text-decoration-color var(--dur-short) var(--ease-out); }
.link:hover { text-decoration-color: var(--color-green-ink); }
.link:active { color: var(--color-ink-2); }

/* the diagram's pause control */
.pause {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 44px; min-width: 44px; padding: 0 var(--space-md) 0 var(--space-sm);
  border: var(--rule-fat) solid var(--color-navy); border-radius: var(--radius-pill); background: var(--color-sticker); color: var(--color-navy);
  font: 800 var(--text-sm)/1 var(--font-body); white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.pause:hover { background: var(--color-lemon); }
.pause:active { transform: translateY(1px); }
.pause svg { fill: currentColor; }
.i-play { display: none; }
[data-state="paused"] .i-play { display: inline; }
[data-state="paused"] .i-pause { display: none; }
/* the control holds its place from the first paint (no layout shift) and shows once the script runs the motion it controls */
.pause:not(.is-ready) { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .pause { display: none; } }

/* ---------- the header: a white sticker bar attached to the top edge, opaque ---------- */
.top {
  position: sticky; top: 0; z-index: var(--z-sticky-nav);
  padding: env(safe-area-inset-top) max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
  background: var(--color-sticker);
  border-bottom: var(--rule-fat) solid var(--color-navy);
}
.top__in { display: flex; align-items: center; gap: var(--space-md); max-width: calc(var(--container) - 2 * var(--gutter)); min-height: 72px; margin-inline: auto; }
.top__logo { display: inline-flex; align-items: center; min-height: 44px; flex: none; border-radius: var(--radius-box); }
.top__logo img { width: auto; height: 34px; }
.top__nav { display: flex; align-items: center; gap: var(--space-2xs); margin-left: auto; }
.top__nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-sm); border-radius: var(--radius-pill); color: var(--color-navy); font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out); }
.top__nav a:hover { background: var(--color-paper-2); text-decoration: underline; text-decoration-color: var(--color-green-ink); }
.top__nav a:active { background: var(--color-paper-3); }
.top__nav a[aria-current="page"] { font-weight: 800; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.35em; }
.top__nav .top__ai { background: var(--color-mint); }
.top__nav .top__ai:hover { background: var(--color-mint); }
.top__book { flex: none; min-height: 50px; }
.mnav { display: none; position: static; }
.mnav summary { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-lg); border: var(--rule-fat) solid var(--color-navy); border-radius: var(--radius-pill); color: var(--color-navy); font-weight: 800; cursor: pointer; list-style: none; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.mnav summary::-webkit-details-marker { display: none; }
.mnav summary:hover, .mnav[open] summary { background: var(--color-navy); color: var(--color-sticker); }
.mnav summary:active { transform: translateY(1px); }
.mnav:not([open]) .mnav__panel { display: none; }
.mnav__panel {
  position: absolute; right: max(var(--space-sm), env(safe-area-inset-right)); top: calc(100% + var(--space-xs)); z-index: var(--z-dropdown);
  width: min(calc(100% - 2 * var(--space-sm)), 340px); max-height: calc(100dvh - var(--header-h) - var(--bar-reserve) - var(--space-lg)); overflow-y: auto; overscroll-behavior: contain;
  display: grid; padding: var(--space-xs); border: var(--rule-fat) solid var(--color-navy); border-radius: var(--radius-card);
  background: var(--color-sticker); box-shadow: var(--shadow-card);
}
.mnav__panel a { display: flex; align-items: center; min-height: 48px; padding: 0 var(--space-md); border-radius: var(--radius-box); color: var(--color-navy); font-size: var(--text-lg); font-weight: 600; text-decoration: none; }
.mnav__panel a:hover { background: var(--color-paper-2); }
.mnav__panel a[aria-current="page"] { font-weight: 800; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.3em; }
.mnav__panel .mnav__ai { background: var(--color-mint); }
.mnav__panel .mnav__call { margin-top: var(--space-xs); font-weight: 800; }

/* ---------- homepage hero: who, what and the result on green; the two founders beside it ---------- */
.hero { padding-top: var(--space-2xl); background: var(--color-green); color: var(--color-navy); overflow: clip; }
.hero__in { display: grid; grid-template-columns: minmax(0, 6.5fr) minmax(0, 5.5fr); column-gap: var(--gap-columns); align-items: end; }
.hero__copy { align-self: center; padding-bottom: var(--space-2xl); }
.hero__head { max-width: 12.5ch; font-size: var(--text-display); line-height: 1; text-wrap: balance; }
.hero__line { margin-top: var(--space-lg); max-width: 36ch; font-size: var(--text-lead); font-weight: 600; line-height: 1.42; }
.hero__acts { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.hero__call { margin-top: var(--space-md); font-weight: 600; }
.hero__call a { font-weight: 800; white-space: nowrap; }
.hero__call a:hover { text-decoration-color: var(--color-sticker); }

/* the founders: their own photographs, cut out with a white sticker edge, standing on the hero's bottom edge */
.crew { --crew-h: clamp(380px, 40vw, 580px); position: relative; isolation: isolate; justify-self: end; width: min(100%, calc(var(--crew-h) * 1.06)); height: var(--crew-h); }
.crew__panel { position: absolute; z-index: -1; left: -7%; right: -7%; top: 12%; bottom: 0; border-radius: var(--radius-pill) var(--radius-pill) 0 0; background: var(--color-lemon); }
.crew__one { position: absolute; bottom: 0; margin: 0; }
.crew__one img { display: block; width: auto; height: 100%; max-width: none; user-select: none; -webkit-user-select: none; filter: drop-shadow(3px 0 0 var(--color-sticker)) drop-shadow(-3px 0 0 var(--color-sticker)) drop-shadow(0 -3px 0 var(--color-sticker)) drop-shadow(0 14px 20px var(--color-shadow)); }
.crew__one--d { left: 0; height: 100%; }
.crew__one--k { right: 0; height: 91%; z-index: 1; }
.tag { position: absolute; z-index: 2; display: grid; width: max-content; padding: var(--space-xs) var(--space-lg) var(--space-sm); border-radius: var(--radius-pill); color: var(--color-navy); font-weight: 600; font-size: var(--text-sm); line-height: 1.15; white-space: nowrap; box-shadow: var(--shadow-soft); }
.tag b { font: 400 var(--text-lg)/1.15 var(--font-display); }
.tag--d { --i: 0; left: 2%; bottom: 8%; rotate: -5deg; background: var(--color-sticker); }
.tag--k { --i: 1; right: 0; bottom: 22%; rotate: 4deg; background: var(--color-flamingo); }
.stick { position: absolute; inset: 0; z-index: 3; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.stick__one { position: absolute; display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-md); border-radius: var(--radius-pill); color: var(--color-navy); font: 800 var(--text-md)/1 var(--font-body); white-space: nowrap; box-shadow: var(--shadow-soft); }
.stick__one--ai { --i: 2; left: -4%; top: 38%; rotate: -8deg; background: var(--color-mint); }
.stick__one--maps { --i: 3; right: -3%; top: 47%; rotate: 7deg; background: var(--color-sticker); }
.stick__one--paid { --i: 4; left: 44%; top: 4%; rotate: 6deg; background: var(--color-flamingo); }

/* stuck on once, short and staggered, then still */
@media (prefers-reduced-motion: no-preference) {
  .tag, .stick__one { animation: stick-on 380ms var(--ease-out) both; animation-delay: calc(260ms + var(--i, 0) * 80ms); }
  @keyframes stick-on { from { opacity: 0; transform: scale(1.35); } to { opacity: 1; transform: none; } }
}

/* ---------- the trace: channels, then calls and forms, then booked jobs ---------- */
.trace { padding: var(--space-2xl) 0 var(--section-gap-s); background: var(--color-paper); border-top: var(--rule-fat) solid var(--color-navy); }
.trace__top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-lg) var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.trace__top h2 { max-width: 14ch; }
.trace__cap { max-width: 40ch; font-size: var(--text-lead); font-weight: 600; line-height: 1.45; color: var(--color-navy); }
.flow { margin: 0; }
.flow__map {
  position: relative; display: grid; align-items: center;
  grid-template-columns: minmax(10rem, 16rem) minmax(4.5rem, 1fr) minmax(9.5rem, 15rem) minmax(3rem, 0.6fr) minmax(9.5rem, 15rem);
  grid-template-rows: auto auto; row-gap: var(--space-md);
}
.flow__chan { display: contents; }
.flow__label { grid-column: 1; grid-row: 1; font: 800 var(--text-md)/1.3 var(--font-body); letter-spacing: 0; color: var(--color-navy); }
.flow__list { grid-column: 1; grid-row: 2; display: grid; grid-template-rows: repeat(5, 56px); gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.flow__list li { display: flex; min-width: 0; }
.flow__link {
  flex: 1; display: flex; align-items: center; min-width: 0; padding: 0 var(--space-lg); border: var(--rule-fat) solid var(--color-navy); border-radius: var(--radius-pill);
  background: var(--chip, var(--color-sticker)); color: var(--color-navy); font-size: var(--text-md); font-weight: 800; white-space: nowrap; text-decoration: none;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.flow__link--2 { --chip: var(--color-mint); }
.flow__link--3 { --chip: var(--color-lemon); }
.flow__link--4 { --chip: var(--color-flamingo); }
.flow__link:hover { background: var(--color-navy); color: var(--color-sticker); }
.flow__link:active { transform: translateY(1px); }
.flow__wire { grid-row: 2; align-self: stretch; position: relative; min-width: 0; container-type: size; }
.flow__wire--fan { grid-column: 2; }
.flow__wire--line { grid-column: 4; }
.flow__node--lead { grid-column: 3; }
.flow__node--job { grid-column: 5; background: var(--color-green); }
.flow__node { grid-row: 2; position: relative; display: grid; gap: var(--space-2xs); padding: var(--space-lg); border: var(--rule-fat) solid var(--color-navy); border-radius: var(--radius-card); background: var(--color-sticker); }
.flow__node.flow__node--job { background: var(--color-green); }
.flow__title { font-size: var(--text-title); line-height: 1.1; }
.flow__note { font-size: var(--text-md); font-weight: 600; line-height: 1.4; color: var(--color-navy); }
.wire { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wire path { fill: none; stroke: var(--wire); stroke-width: 3; }
.flow__port { position: absolute; z-index: 2; width: 16px; height: 16px; margin: calc(-1 * var(--space-xs)) 0 0 calc(-1 * var(--space-xs)); border-radius: 50%; background-color: var(--color-sticker); border: var(--rule-fat) solid var(--color-navy); }
.flow__port--1 { left: 0; top: 8.537%; } .flow__port--2 { left: 0; top: 29.268%; } .flow__port--3 { left: 0; top: 50%; } .flow__port--4 { left: 0; top: 70.732%; } .flow__port--5 { left: 0; top: 91.463%; }
.flow__port--in, .flow__port--end { left: 100%; top: 50%; } .flow__port--out { left: 0; top: 50%; }
.flow__pulse { display: none; position: absolute; left: 0; top: 0; z-index: 3; width: 16px; height: 16px; margin: calc(-1 * var(--space-xs)) 0 0 calc(-1 * var(--space-xs)); border-radius: 50%; background: var(--pulse); box-shadow: 0 0 0 3px var(--color-navy); }
.flow__pulse--1 { --y0: 8.537; } .flow__pulse--2 { --y0: 29.268; } .flow__pulse--3 { --y0: 50; } .flow__pulse--4 { --y0: 70.732; } .flow__pulse--5 { --y0: 91.463; }
.flow__trunk { display: none; }
.flow__tick { display: none; }
.flow__foot { display: flex; justify-content: flex-end; margin-top: var(--space-lg); }

/* the pulses: drawn only with script and motion allowed; paused off screen, in a hidden tab and on Pause.
   Each dot rides its own curve (the paths are smoothsteps, sampled at nine points) by transform alone. */
@media (prefers-reduced-motion: no-preference) {
  .js .flow__pulse { display: block; opacity: 0; }
  .js .flow__wire--fan .flow__pulse { animation: go-fan 12.5s linear infinite both; }
  .js .flow__pulse--1 { animation-delay: 2.5s; }
  .js .flow__pulse--2 { animation-delay: 7.5s; }
  .js .flow__pulse--3 { animation-delay: 0s; }
  .js .flow__pulse--4 { animation-delay: 10s; }
  .js .flow__pulse--5 { animation-delay: 5s; }
  .js .flow__pulse--out { animation: go-line 2.5s linear 1.5s infinite both; }
  .js .flow__port--1 { animation: port-fire 12.5s var(--ease-out) 2.5s infinite both; }
  .js .flow__port--2 { animation: port-fire 12.5s var(--ease-out) 7.5s infinite both; }
  .js .flow__port--3 { animation: port-fire 12.5s var(--ease-out) 0s infinite both; }
  .js .flow__port--4 { animation: port-fire 12.5s var(--ease-out) 10s infinite both; }
  .js .flow__port--5 { animation: port-fire 12.5s var(--ease-out) 5s infinite both; }
  .js .flow__port--in, .js .flow__port--out { animation: port-hit 2.5s var(--ease-out) 1.5s infinite both; }
  .js .flow__port--end { animation: port-hit 2.5s var(--ease-out) 2.5s infinite both; }
  .js .flow__run { animation: run-down 4s linear infinite both; }
  [data-loop]:not(.is-running) .flow__pulse, [data-loop]:not(.is-running) .flow__port, [data-loop]:not(.is-running) .flow__run { animation-play-state: paused; }
  @keyframes go-fan {
    0% { opacity: 0; transform: translate(0cqw, calc(var(--y0) * 1cqh)); }
    0.8% { opacity: 1; }
    1.5% { transform: translate(17.09cqw, calc((var(--y0) + (50 - var(--y0)) * 0.043) * 1cqh)); }
    3% { transform: translate(30.25cqw, calc((var(--y0) + (50 - var(--y0)) * 0.156) * 1cqh)); }
    4.5% { transform: translate(40.78cqw, calc((var(--y0) + (50 - var(--y0)) * 0.316) * 1cqh)); }
    6% { transform: translate(50cqw, calc((var(--y0) + (50 - var(--y0)) * 0.5) * 1cqh)); }
    7.5% { transform: translate(59.22cqw, calc((var(--y0) + (50 - var(--y0)) * 0.684) * 1cqh)); }
    9% { transform: translate(69.75cqw, calc((var(--y0) + (50 - var(--y0)) * 0.844) * 1cqh)); }
    10.5% { transform: translate(82.91cqw, calc((var(--y0) + (50 - var(--y0)) * 0.957) * 1cqh)); }
    11.4% { opacity: 1; }
    12% { opacity: 0; transform: translate(100cqw, 50cqh); }
    100% { opacity: 0; transform: translate(100cqw, 50cqh); }
  }
  @keyframes go-line {
    0% { opacity: 0; transform: translate(0cqw, 50cqh); }
    4% { opacity: 1; }
    36% { opacity: 1; }
    40%, 100% { opacity: 0; transform: translate(100cqw, 50cqh); }
  }
  @keyframes port-fire {
    0% { transform: scale(1.45); background-color: var(--pulse); }
    5%, 100% { transform: none; background-color: var(--color-sticker); }
  }
  @keyframes port-hit {
    0% { transform: scale(1.45); background-color: var(--pulse); }
    36%, 100% { transform: none; background-color: var(--color-sticker); }
  }
  @keyframes run-down {
    0% { opacity: 0; transform: translateY(0); }
    6% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; transform: translateY(var(--trunk-h, 400px)); }
  }
}

/* ---------- services: rows of loud type on lemon; each name is underlined at rest, it is a link ---------- */
.svc { padding: var(--section-gap) 0; background: var(--color-lemon); }
.svc--flush { padding-top: var(--space-xl); }
.svc__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--gap-columns); align-items: end; }
.svc__head h2 { max-width: 14ch; }
.svc__lede { max-width: 38ch; font-size: var(--text-lead); }
.svc__list { margin: var(--space-2xl) 0 0; padding: 0; list-style: none; border-top: var(--rule-fat) solid var(--color-navy); }
.svc--flush .svc__list { margin-top: 0; }
.phero + .svc--flush { padding-top: var(--space-2xl); }
.row { position: relative; border-bottom: var(--rule-fat) solid var(--color-navy); }
.row__link { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--gap-columns); align-items: center; padding: var(--space-lg) 0; color: var(--color-navy); text-decoration: none; }
.row__link::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(-1 * var(--space-lg)); border-radius: var(--radius-card); background: var(--row-fill, var(--color-sticker)); transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-long) var(--ease-out); }
.row__link:hover::before, .row__link:focus-visible::before { transform: scaleX(1); }
.row__link:active::before { background: var(--color-mint); }
.row__link:focus-visible { outline-offset: 6px; }
.row--b { --row-fill: var(--color-sticker); }
.row--c { --row-fill: var(--color-flamingo); }
.row--d { --row-fill: var(--color-mint); }
.row__name { font-family: var(--font-display); font-size: var(--text-row); font-weight: 400; line-height: 1.04; overflow-wrap: break-word; min-width: 0; }
.row__link .row__name, .row__main { text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.14em; text-decoration-skip-ink: auto; }
.row__link:hover .row__name { text-decoration-color: var(--color-green-ink); }
.row__text { max-width: 36ch; font-size: var(--text-lg); line-height: 1.45; }
.row--ai { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-md) var(--gap-columns); align-items: center; padding: var(--space-xl) 0; }
.row--ai .row__name { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: var(--space-sm) var(--space-md); }
.row--ai h3 { font-size: var(--text-mega); line-height: 0.98; }
.row__main { color: var(--color-navy); }
.row__main:hover { text-decoration-color: var(--color-green-ink); }
.sticker-new { flex: none; display: inline-grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; background: var(--color-flamingo); font: 400 var(--text-lg)/1 var(--font-display); rotate: 12deg; box-shadow: var(--shadow-soft); }
.row--ai .row__text { grid-column: 2; grid-row: 1; align-self: end; }
.row__links { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.row__chip { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-md); border: var(--rule-fat) solid var(--color-navy); border-radius: var(--radius-pill); background: var(--color-sticker); color: var(--color-navy); font-weight: 800; text-decoration: none; white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.row__chip:hover { background: var(--color-navy); color: var(--color-sticker); }
.row__chip:active { transform: translateY(1px); }

/* ---------- measure: stamped KPI badges on mint ---------- */
.measure { padding: var(--section-gap) 0; background: var(--color-mint); }
.measure__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-2xl) var(--gap-columns); align-items: center; }
.measure h2 { max-width: 12ch; }
.measure__lede { margin: var(--space-lg) 0 var(--space-xl); max-width: 44ch; font-size: var(--text-lead); }
.kpis__title { font-size: var(--text-title); line-height: 1.1; }
.kpis__list { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: var(--space-lg) 0 0; padding: 0; list-style: none; }
.stamp { display: grid; place-items: center; width: 140px; aspect-ratio: 1; padding: var(--space-lg); border-radius: 50%; background: var(--stamp-bg, var(--color-lemon)); color: var(--color-navy); font: 800 var(--text-md)/1.12 var(--font-body); text-align: center; rotate: var(--r, 0deg); box-shadow: inset 0 0 0 5px var(--stamp-bg, var(--color-lemon)), inset 0 0 0 8px var(--color-navy), var(--shadow-soft); }
.stamp--1 { --stamp-bg: var(--color-lemon); --r: -8deg; --i: 0; }
.stamp--2 { --stamp-bg: var(--color-flamingo); --r: 6deg; --i: 1; }
.stamp--3 { --stamp-bg: var(--color-green); --r: -3deg; --i: 2; }
.stamp--4 { --stamp-bg: var(--color-sticker); --r: 10deg; --i: 3; }
.stamp--5 { --stamp-bg: var(--color-lemon); --r: 4deg; --i: 4; }
.stamp--6 { --stamp-bg: var(--color-sticker); --r: -11deg; --i: 5; }
.stamp--7 { --stamp-bg: var(--color-flamingo); --r: 7deg; --i: 6; }
.stamp--8 { --stamp-bg: var(--color-green); --r: -5deg; --i: 7; }
.kpis__note { margin-top: var(--space-lg); font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .js .kpis__list:not(.is-stamped) .stamp { opacity: 0; transform: translateY(-6px) scale(1.12); }
  .js .kpis__list.is-stamped .stamp { transition: opacity 140ms var(--ease-out), transform 280ms var(--ease-in); transition-delay: calc(var(--i) * 55ms); }
}
/* numbered points: the measure list on the homepage, the process steps on inner pages */
.points { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: var(--gap-columns); margin: var(--space-3xl) 0 0; padding: var(--space-xl) 0 0; list-style: none; border-top: var(--rule-fat) solid var(--color-navy); }
.points--4 { --cols: 4; margin-top: var(--space-2xl); }
.points__n { display: block; font: 400 var(--text-3xl)/1 var(--font-display); color: var(--color-navy); }
.points h3 { margin-top: var(--space-md); font-size: var(--text-lg); line-height: 1.15; }
.points--4 h3 { font-size: var(--text-xl); }
.points p { margin-top: var(--space-sm); color: var(--color-ink-2); }

/* ---------- who we serve: three panels on paper, straight ---------- */
.serve { padding: var(--section-gap) 0 var(--section-gap-l); background: var(--color-paper); }
.serve__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-lg); }
.serve h2 { max-width: 12ch; }
.serve__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); align-items: start; margin-top: var(--space-2xl); }
.group { display: grid; gap: var(--space-md); padding: var(--space-xl); border-radius: var(--radius-card); background: var(--group-bg); color: var(--color-navy); box-shadow: var(--shadow-card); }
.group--home-services { --group-bg: var(--color-lemon); }
.group--construction { --group-bg: var(--color-flamingo); margin-top: var(--space-2xl); }
.group--local-business { --group-bg: var(--color-green); margin-top: var(--space-lg); }
.group h3 { font-size: var(--text-2xl); line-height: 1.05; }
.group > p { max-width: 52ch; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.chip { display: inline-flex; align-items: center; white-space: nowrap; min-height: 44px; padding: 0 var(--space-md); border: 2px solid var(--color-navy); border-radius: var(--radius-pill); color: var(--color-navy); font-weight: 800; text-decoration: none; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.chip:hover { background: var(--color-navy); color: var(--color-sticker); }
.chip:active { transform: translateY(1px); }
.group__more { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; font-weight: 800; }
.group__more:hover { text-decoration-color: var(--color-sticker); }

/* ---------- client notes on flamingo, straight ---------- */
.words { padding: var(--section-gap) 0; background: var(--color-flamingo); }
.words h2 { max-width: 14ch; }
.notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl) var(--space-3xl); margin-top: var(--space-2xl); align-items: start; }
.note { position: relative; margin: 0; padding: var(--space-2xl) var(--space-xl) var(--space-xl); border-radius: var(--radius-box); background: var(--note-bg, var(--color-sticker)); box-shadow: var(--shadow-card); }
.note::before { content: "“"; position: absolute; top: calc(-1 * var(--space-lg)); left: var(--space-lg); font: 400 6rem/1 var(--font-display); color: var(--color-navy); }
.note--1 { --note-bg: var(--color-sticker); }
.note--2 { --note-bg: var(--color-lemon); margin-top: var(--space-3xl); }
.note--3 { --note-bg: var(--color-mint); }
.note--4 { --note-bg: var(--color-paper); margin-top: var(--space-2xl); }
.note blockquote { margin: 0; }
.note blockquote p { font-size: var(--text-lg); line-height: 1.55; }
.note figcaption { margin-top: var(--space-lg); font-size: var(--text-md); }
.note figcaption b { display: block; font: 400 var(--text-xl)/1.1 var(--font-display); }

/* ---------- about: the agency, 13+ years beside the values ---------- */
.about { padding: var(--section-gap) 0; background: var(--color-paper); }
.about__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl) var(--gap-columns); align-items: start; }
.about h2 { max-width: 13ch; }
.about__lede { margin-top: var(--space-lg); max-width: 54ch; font-size: var(--text-lead); }
.about__deal { margin-top: var(--space-md); max-width: 50ch; font-size: var(--text-lg); font-weight: 600; }
.meet { display: inline-flex; align-items: center; gap: var(--space-md); min-height: 48px; margin-top: var(--space-xl); max-width: 46ch; font-weight: 600; line-height: 1.4; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.meet b { font-weight: 800; }
.meet__faces { display: inline-flex; flex: none; }
.meet__faces img { width: 48px; height: 48px; border-radius: 50%; border: var(--rule-fat) solid var(--color-sticker); box-shadow: var(--shadow-soft); }
.meet__faces picture + picture { margin-left: calc(-1 * var(--space-sm)); }
.meet:hover { text-decoration-color: var(--color-green-ink); }
.about__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); margin-top: var(--space-lg); }
.about__side { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-xl) var(--space-lg); align-items: start; padding-top: var(--space-md); }
.burst { display: grid; place-content: center; width: 190px; aspect-ratio: 1; padding: var(--space-lg); background: var(--color-navy); color: var(--color-on-dark); font-weight: 600; line-height: 1.15; text-align: center; rotate: -8deg; clip-path: polygon(50% 0%, 59% 13%, 75% 7%, 77% 23%, 93% 25%, 87% 41%, 100% 50%, 87% 59%, 93% 75%, 77% 77%, 75% 93%, 59% 87%, 50% 100%, 41% 87%, 25% 93%, 23% 77%, 7% 75%, 13% 59%, 0% 50%, 13% 41%, 7% 25%, 23% 23%, 25% 7%, 41% 13%); }
.burst b { font: 400 var(--text-3xl)/1 var(--font-display); color: var(--color-lemon); }
.values { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); margin: 0; width: 100%; }
.values div { padding-top: var(--space-sm); border-top: var(--rule-fat) solid var(--color-navy); }
.values dt { font: 400 var(--text-lg)/1.15 var(--font-display); }
.values dd { margin: var(--space-2xs) 0 0; color: var(--color-ink-2); }

/* ---------- reads: three tickets, straight, each title set from the top ---------- */
.reads { padding: var(--section-gap) 0; background: var(--color-lemon); }
.reads__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-lg); }
.reads__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: var(--space-2xl); }
.reads__grid.reads--flush { margin-top: 0; }
.read { display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-xl); border-radius: var(--radius-card); background: var(--read-bg); color: var(--color-navy); text-decoration: none; box-shadow: var(--shadow-card); transition: transform var(--dur-short) var(--ease-out); }
.read:hover { transform: translateY(-3px); }
.read:active { transform: translateY(1px); }
.read--case { --read-bg: var(--color-sticker); }
.read--2 { --read-bg: var(--color-flamingo); }
.read--3 { --read-bg: var(--color-mint); }
.read__big { font: 400 var(--text-figure)/0.95 var(--font-display); }
.read h3 { font-size: var(--text-2xl); line-height: 1.08; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.16em; text-decoration-color: transparent; transition: text-decoration-color var(--dur-short) var(--ease-out); }
.read--3 h3 { font-size: clamp(1.9rem, 1.9vw + 0.8rem, 2.9rem); line-height: 1.04; }
.read--case h3 { font-family: var(--font-body); font-size: var(--text-xl); font-weight: 800; line-height: 1.2; letter-spacing: 0; }
.read:hover h3, .read:focus-visible h3 { text-decoration-color: var(--color-navy); }
.read__meta { margin-top: auto; padding-top: var(--space-md); font-size: var(--text-sm); font-weight: 800; }
.read__meta time { font-weight: 400; }

/* ---------- consultation on green ---------- */
.consult { padding: var(--space-3xl) 0 var(--section-gap); background: var(--color-green); }
.consult__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; gap: var(--space-xl) var(--gap-columns); align-items: start; }
.consult__copy { grid-column: 1; grid-row: 1; }
.consult h2 { max-width: 12ch; }
.consult__lede { margin-top: var(--space-lg); max-width: 38ch; font-size: var(--text-lead); font-weight: 600; }
.consult__phone { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--space-lg); font: 400 clamp(1.75rem, 2.6vw, 2.8rem)/1 var(--font-display); color: var(--color-navy); text-decoration: none; white-space: nowrap; }
.consult__phone:hover { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 0.12em; }
.consult__facts { grid-column: 1; grid-row: 2; display: grid; gap: var(--space-md); margin: 0; }
.consult__facts dt { font-size: var(--text-sm); font-weight: 800; }
.consult__facts dd { margin: 0; font-size: var(--text-lg); font-weight: 600; }
.consult__facts a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-md); font-weight: 800; overflow-wrap: anywhere; }
.consult__card { grid-column: 2; grid-row: 1 / 3; padding: var(--space-xl); border: var(--rule-fat) solid var(--color-navy); border-radius: var(--radius-card); background: var(--color-sticker); color: var(--color-navy); box-shadow: var(--shadow-card); }
.lead-form { display: grid; gap: var(--space-md); }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.fld { display: grid; gap: var(--space-2xs); min-width: 0; }
.fld label { font-size: var(--text-sm); font-weight: 800; }
.fld input, .fld select, .fld textarea { width: 100%; min-height: 52px; padding: 0 var(--space-md); border: 2px solid var(--color-muted); border-radius: var(--radius-box); background: var(--color-paper); color: var(--color-navy); font-size: max(16px, var(--text-md)); outline: 3px solid transparent; outline-offset: -4px; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.fld select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--color-navy) 50%), linear-gradient(135deg, var(--color-navy) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: var(--space-2xl); }
.fld textarea { min-height: 7rem; padding-block: var(--space-sm); resize: vertical; }
.fld input:hover, .fld select:hover, .fld textarea:hover { background-color: var(--color-paper-2); }
.fld input:focus-visible, .fld select:focus-visible, .fld textarea:focus-visible { outline-color: var(--color-navy); border-color: var(--color-navy); }
.fld input[aria-invalid="true"], .fld input:user-invalid { border-color: var(--color-error); }
.fld input:disabled, .fld select:disabled, .fld textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-sm); align-items: start; }
.consent input { width: 22px; height: 22px; margin: var(--space-3xs) 0 0; accent-color: var(--color-navy); }
.consent input:focus-visible { outline: 3px solid var(--color-navy); outline-offset: 2px; }
.consent label { font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink-2); }
.hp { position: absolute; inset: 0 auto auto 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.form-msg { min-height: 1lh; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-box); background: var(--color-mint); font-weight: 600; }
.form-msg.err { background: color-mix(in oklab, var(--color-error) 14%, var(--color-sticker)); color: var(--color-error); }
.lead-form .btn { min-height: 52px; font-size: var(--text-lg); }
.fine { font-size: var(--text-sm); color: var(--color-ink-2); }
.fine a { font-weight: 600; }

/* ================= inner pages: the same stickers, set in the page's own shape ================= */

/* the page hero (Banner): the family's ground, the breadcrumb, the head left and the lead with the actions beside it */
.phero { padding: var(--space-2xl) 0; color: var(--color-navy); }
/* the hero and the section under it meet at a colour seam: keep the band between their content under 160px */
.phero + section { padding-top: calc(var(--space-2xl) + var(--space-lg)); }
.phero.g-paper { border-bottom: var(--rule-fat) solid var(--color-navy); }
.phero__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-lg) var(--gap-columns); align-items: end; }
.phero__in > .crumb { grid-column: 1 / -1; }
.phero h1 { max-width: 15ch; font-size: var(--text-page); line-height: 1.02; }
.phero--long h1 { max-width: 24ch; font-size: clamp(2rem, 2.6vw + 0.9rem, 3.6rem); line-height: 1.06; }
.phero--solo .phero__in { grid-template-columns: minmax(0, 1fr); }
.phero__side { display: grid; gap: var(--space-lg); justify-items: start; }
.phero__lead { max-width: 42ch; font-size: var(--text-lead); font-weight: 600; line-height: 1.45; }
.phero__acts { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.phero--aside .phero__in { align-items: center; }
.phero--aside .phero__copy { display: grid; gap: var(--space-lg); justify-items: start; }

.crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-xs); margin: 0 0 var(--space-md); padding: 0; list-style: none; font-size: var(--text-sm); font-weight: 600; }
.crumb li { display: inline-flex; align-items: center; gap: var(--space-xs); }
.crumb li + li::before { content: "/" / ""; color: var(--color-ink-2); }
.crumb a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 800; }
.crumb [aria-current] { font-weight: 600; }

/* on-page jumps and related trades: chips */
.jump { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: var(--space-xl) 0 0; padding: 0; list-style: none; grid-column: 1 / -1; }
.jump a { background: var(--color-sticker); }

/* a section band and its head */
.band { padding: var(--section-gap) 0; }
.band--s { padding: var(--section-gap-s) 0; }
.head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-lg) var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.head h2 { max-width: 15ch; }
.head h2:only-child { grid-column: 1 / -1; max-width: 24ch; }
.head__lede { max-width: 44ch; font-size: var(--text-lead); }
.head__lede + .head__lede { margin-top: var(--space-md); }
.split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-2xl) var(--gap-columns); align-items: start; }
.split h2 { max-width: 14ch; }
.split .head__lede { margin-top: var(--space-lg); }

/* cards: boxes that carry a paragraph sit straight, outlined, without the hard shadow */
.cards { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.cards--4 { --cols: 4; }
.card { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-xl); border: 2px solid var(--color-navy); border-radius: var(--radius-card); background: var(--card-bg, var(--color-sticker)); color: var(--color-navy); }
.card h3 { font-size: var(--text-title); line-height: 1.1; }
.card p { color: var(--color-ink-2); }
.card .link { margin-top: auto; padding-top: var(--space-xs); }
.card__top { display: flex; align-items: center; gap: var(--space-md); }
.card__ico { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--color-mint); }
.card__ico svg { fill: none; stroke: var(--color-navy); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
a.card { text-decoration: none; transition: background-color var(--dur-short) var(--ease-out); }
a.card:hover { background: var(--color-paper-2); }
a.card:active { background: var(--color-paper-3); }
.card__go { margin-top: auto; padding-top: var(--space-xs); font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
a.card:hover .card__go { text-decoration-color: var(--color-green-ink); }
.g-paper .card { --card-bg: var(--color-sticker); }

/* the trade's searches: search-box stickers */
.searches { display: grid; gap: var(--space-md); padding: var(--space-xl); border: var(--rule-fat) solid var(--color-navy); border-radius: var(--radius-card); background: var(--color-sticker); }
.searches h2, .searches h3 { font-size: var(--text-title); line-height: 1.1; }
.searches__note { color: var(--color-ink-2); }
.checks { display: grid; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.checks li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-sm); align-items: start; font-weight: 600; }
.checks svg { margin-top: 1px; fill: none; stroke: var(--color-green-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.checks--q li { padding: var(--space-sm) var(--space-md); border: 2px solid var(--color-navy); border-radius: var(--radius-pill); background: var(--color-paper); }
.checks--q svg { stroke: var(--color-navy); stroke-width: 2.4; }

/* challenge to solution: two boxes joined by a short navy wire, the trace's own mark */
.pairs { display: grid; gap: var(--space-md); margin: 0; padding: 0; list-style: none; }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); align-items: stretch; }
.pair__box { display: grid; gap: var(--space-2xs); align-content: start; padding: var(--space-lg); border: 2px solid var(--color-navy); border-radius: var(--radius-card); background: var(--color-sticker); }
.pair__box--fix { background: var(--color-lemon); }
.pair__lbl { font-size: var(--text-sm); font-weight: 800; color: var(--color-ink-2); }
.pair__txt { font-size: var(--text-lg); font-weight: 600; line-height: 1.4; }
.pair__wire { position: relative; align-self: center; height: 3px; background: var(--wire); }
.pair__wire::before, .pair__wire::after { content: ""; position: absolute; top: 50%; width: 14px; height: 14px; translate: 0 -50%; border-radius: 50%; border: var(--rule-fat) solid var(--color-navy); background: var(--color-sticker); }
.pair__wire::before { left: -2px; }
.pair__wire::after { right: -2px; background: var(--color-green); }

/* a quote as a note, a proof band */
.proof { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-lg) var(--gap-columns); align-items: end; }
.proof h2 { max-width: 16ch; }
.proof__side { display: grid; gap: var(--space-lg); justify-items: start; }
.proof .note { max-width: 46rem; }

/* questions: details rows */
.faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl) var(--gap-columns); align-items: start; }
.faq h2 { max-width: 12ch; }
.faq__aside > p { margin-top: var(--space-lg); max-width: 46ch; font-size: var(--text-lead); }
.faq__aside .chips { margin-top: var(--space-md); }
.faq__list { border-top: var(--rule-fat) solid var(--color-navy); }
.q { border-bottom: var(--rule-fat) solid var(--color-navy); }
.q summary { position: relative; display: flex; align-items: center; min-height: 64px; padding: var(--space-md) var(--space-3xl) var(--space-md) 0; font-size: var(--text-lg); font-weight: 800; line-height: 1.35; cursor: pointer; list-style: none; transition: color var(--dur-short) var(--ease-out); }
.q summary::-webkit-details-marker { display: none; }
.q summary::after { content: "+" / ""; position: absolute; right: 0; top: 50%; display: grid; place-items: center; width: 40px; height: 40px; translate: 0 -50%; border: 2px solid var(--color-navy); border-radius: 50%; font: 400 var(--text-xl)/1 var(--font-display); transition: rotate var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.q[open] summary::after { rotate: 45deg; background: var(--color-lemon); }
.q summary:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.q > p { max-width: 62ch; padding: 0 0 var(--space-lg); color: var(--color-ink-2); }

/* a promise or a statement on its own ground */
.statement { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-lg) var(--gap-columns); align-items: end; }
.statement h2 { max-width: 15ch; }
.statement p { max-width: 46ch; font-size: var(--text-lead); font-weight: 600; }

/* the illustration on AI Search Optimization: an answer card, marked as an example */
.mock { display: grid; gap: var(--space-sm); padding: var(--space-lg); border: var(--rule-fat) solid var(--color-navy); border-radius: var(--radius-card); background: var(--color-sticker); color: var(--color-navy); }
.mock__top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); font-weight: 800; }
.mock__badge { padding: var(--space-3xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-mint); font-size: var(--text-sm); font-weight: 800; rotate: 4deg; }
.mock__ask { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-box); background: var(--color-paper-2); font-weight: 600; }
.mock__answer { display: grid; gap: var(--space-xs); padding: var(--space-md); border: 2px solid var(--color-navy); border-radius: var(--radius-box); }
.mock__line { height: 10px; border-radius: 5px; background: var(--color-paper-3); }
.mock__line--a { width: 92%; } .mock__line--b { width: 78%; } .mock__line--c { width: 66%; }
.mock__pick { display: flex; justify-content: space-between; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-box); background: var(--color-green); font-weight: 800; }

/* the founders on About: framed portraits as stickers on brand green */
.founders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.founder { display: grid; grid-template-rows: auto 1fr; gap: var(--space-lg); }
.founder__pic { position: relative; }
.founder__pic img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border: 6px solid var(--color-sticker); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.founder__tag { position: absolute; left: var(--space-lg); bottom: calc(-1 * var(--space-lg)); display: grid; padding: var(--space-xs) var(--space-lg) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-sticker); font-weight: 600; font-size: var(--text-sm); line-height: 1.15; rotate: -4deg; box-shadow: var(--shadow-soft); }
.founder__tag b { font: 400 var(--text-xl)/1.15 var(--font-display); }
.founder:nth-child(2) .founder__tag { left: auto; right: var(--space-lg); background: var(--color-flamingo); rotate: 3deg; }
.founder__body { display: grid; gap: var(--space-md); align-content: start; padding-top: var(--space-xl); }
.founder__body h3 { font-size: var(--text-2xl); line-height: 1.05; }
.founder__body h3 span { display: block; margin-top: var(--space-2xs); font: 600 var(--text-md)/1.3 var(--font-body); }
.founder__body p { max-width: 52ch; font-size: var(--text-lg); line-height: 1.5; }
.founder__quote { margin: 0; padding: var(--space-md) var(--space-lg); border-radius: var(--radius-box); background: var(--color-lemon); font-size: var(--text-lg); font-weight: 600; }
.sub { font-size: var(--text-2xl); line-height: 1.1; }
.split .head__lede + .acts-row, .sub + .head__lede { margin-top: var(--space-lg); }
.core { margin-top: var(--space-xl); }
.phero--404 { padding-block: var(--space-3xl) var(--space-xl); }
.acts-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-top: var(--space-2xl); }

/* value tiles */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); margin: 0; }
.tiles div { padding-top: var(--space-md); border-top: var(--rule-fat) solid var(--color-navy); }
.tiles dt { font: 400 var(--text-xl)/1.1 var(--font-display); }
.tiles dd { margin: var(--space-sm) 0 0; font-size: var(--text-lg); line-height: 1.5; }

/* the agency beside its burst on About */
.agency { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-2xl) var(--gap-columns); align-items: center; }
.agency h2 { max-width: 14ch; }
.agency .head__lede { margin-top: var(--space-lg); max-width: 56ch; }
.agency__side { display: grid; justify-items: center; gap: var(--space-lg); }
.agency__side p { max-width: 28ch; font-weight: 600; text-align: center; }

/* prose: readable measure on paper, navy text, calm display heads, links underlined */
.prose { max-width: 56ch; font-size: var(--text-lg); line-height: 1.65; }
.prose > * + * { margin-top: var(--space-md); }
.prose h2 { margin-top: var(--space-2xl); font-size: var(--text-prose-h); line-height: 1.1; }
.prose h3 { margin-top: var(--space-xl); font: 800 var(--text-xl)/1.25 var(--font-body); letter-spacing: 0; }
.prose h2 + *, .prose h3 + * { margin-top: var(--space-sm); }
.prose > :first-child { margin-top: 0; }
.prose p { max-width: none; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: var(--space-xs); }
.prose li::marker { color: var(--color-green-ink); font-weight: 800; }
.prose a { font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; }
.prose blockquote { margin-inline: 0; padding: var(--space-lg); border-radius: var(--radius-box); background: var(--color-lemon); font-weight: 600; }

/* the closing band: bright, Book a Consultation and the phone */
.closing { padding: var(--section-gap-s) 0; background: var(--color-green); }
.closing__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-lg) var(--gap-columns); align-items: end; }
.closing h2 { max-width: 13ch; }
.closing__side { display: grid; gap: var(--space-lg); justify-items: start; }
.closing__lead { max-width: 40ch; font-size: var(--text-lead); font-weight: 600; }
.closing__acts { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* ---------- footer: the one navy ground ---------- */
.foot { padding: var(--space-3xl) 0 var(--space-2xl); background: var(--color-navy-deep); color: var(--color-on-dark); }
.foot__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-2xl); }
.foot__brand { grid-column: 1 / 5; display: grid; justify-items: start; align-content: start; gap: var(--space-md); }
.foot__brand img { width: 190px; height: auto; margin-bottom: var(--space-xs); }
.foot__brand a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-on-dark); }
.foot__brand .foot__phone { font: 400 clamp(1.5rem, 5vw, 1.953rem)/1 var(--font-display); color: var(--color-lemon); text-decoration: none; white-space: nowrap; }
.foot__phone:hover { text-decoration: underline; }
.foot__col { grid-column: 9 / -1; }
.foot__col:first-of-type { grid-column: 5 / 9; }
.foot__col h2 { font: 800 var(--text-lg)/1.3 var(--font-body); letter-spacing: 0; color: var(--color-on-dark); margin-bottom: var(--space-sm); }
.foot__col ul { margin: 0; padding: 0; list-style: none; }
.foot__col a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; color: var(--color-on-dark-2); text-decoration: none; }
.foot__col a:hover { color: var(--color-on-dark); text-decoration: underline; text-decoration-color: var(--color-green); }
.foot__legal { grid-column: 1 / -1; padding-top: var(--space-lg); border-top: var(--rule-hair) solid color-mix(in oklab, var(--color-on-dark) 22%, transparent); font-size: var(--text-sm); color: var(--color-on-dark-2); }

/* ---------- the phone bar ---------- */
.mbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .btn, .link, .row__link::before, .row__chip, .chip, .read, .flow__link, .pause, .mnav summary, a.card, .q summary, .q summary::after { transition: none; }
  .btn:active, .read:hover, .read:active, .chip:active, .row__chip:active { transform: none; }
}

/* ---------- widths ---------- */
@media (max-width: 82rem) {
  .top__nav a { padding: 0 var(--space-xs); }
}
@media (max-width: 75rem) {
  .top__logo img { height: 30px; }
  .points { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: var(--space-xl); }
  .points li { grid-column: span 2; }
  .points li:nth-child(4) { grid-column: 2 / span 2; }
  .points--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .points--4 li, .points--4 li:nth-child(4) { grid-column: auto; }
  .serve__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .group--home-services { grid-column: 1 / -1; }
  .group--construction { margin-top: 0; }
  .cards--4, .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 66rem) {
  .top__nav { display: none; }
  .mnav { display: block; }
  .top__logo { margin-right: auto; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 60rem) {
  .hero__in { grid-template-columns: minmax(0, 1fr); }
  .hero__copy { padding-bottom: var(--space-xl); }
  .crew { --crew-h: clamp(270px, 52vw, 440px); justify-self: center; }
  .flow__map { grid-template-columns: minmax(9rem, 1.15fr) minmax(3rem, 0.7fr) minmax(0, 1fr) minmax(2rem, 0.35fr) minmax(0, 1fr); }
  .flow__node { padding: var(--space-md); }
  .flow__link { padding: 0 var(--space-md); }
  .trace__top, .svc__head, .measure__grid, .about__grid { grid-template-columns: minmax(0, 1fr); }
  .row__link, .row--ai { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .row--ai .row__text, .row__links { grid-column: 1; grid-row: auto; }
  .serve__grid { grid-template-columns: minmax(0, 1fr); }
  .group--construction, .group--local-business { margin-top: 0; }
  .notes { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
  .note--2, .note--4 { margin-top: 0; }
  .reads__grid { grid-template-columns: minmax(0, 1fr); }
  .consult__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .consult__copy, .consult__card, .consult__facts { grid-column: 1; grid-row: auto; }
  .foot__brand { grid-column: 1 / -1; }
  .foot__col:first-of-type { grid-column: 1 / 7; }
  .foot__col { grid-column: 7 / -1; }
  .phero__in, .head, .split, .proof, .faq, .statement, .closing__in, .agency { grid-template-columns: minmax(0, 1fr); }
  .phero__in { align-items: start; }
  .agency__side { justify-items: start; }
  .agency__side p { text-align: left; }
}

/* phones and small tablets: the diagram reads top to bottom, and the booking bar appears */
@media (max-width: 47.98rem) {
  :root { --bar-h: calc(64px + env(safe-area-inset-bottom)); --bar-reserve: var(--bar-h); }
  body { padding-bottom: var(--bar-reserve); }
  .top__book { display: none; }

  .flow__map { display: block; }
  .flow__label { margin-bottom: var(--space-sm); }
  .flow__list { display: block; }
  .flow__list li { position: relative; padding: var(--space-2xs) 0 var(--space-2xs) var(--space-xl); }
  .flow__list li::before { content: ""; position: absolute; left: 15px; top: 0; bottom: 0; width: 3px; background: var(--wire); }
  .flow__list li:first-child::before { top: 50%; }
  .flow__list li::after { content: ""; position: absolute; z-index: 1; left: 8.5px; top: 50%; width: 16px; height: 16px; translate: 0 -50%; border-radius: 50%; background: var(--color-sticker); border: var(--rule-fat) solid var(--color-navy); }
  .flow__link { position: relative; min-height: 50px; padding: 0 var(--space-lg); }
  .flow__link::before { content: ""; position: absolute; right: calc(100% + var(--rule-fat)); top: 50%; width: 17px; height: 3px; translate: 0 -50%; background: var(--wire); }
  .flow__wire { display: none; }
  .flow__node { margin: var(--space-lg) 0 0 var(--space-xl); padding: var(--space-md) var(--space-lg) var(--space-lg); }
  .flow__tick { display: block; position: absolute; left: -28px; top: calc(-1 * var(--space-lg) - var(--rule-fat)); bottom: calc(-1 * var(--rule-fat)); width: 3px; background: var(--wire); }
  .flow__node--job .flow__tick { bottom: auto; height: calc(var(--space-lg) + 30px); }
  .flow__tick::after { content: ""; position: absolute; left: -6.5px; top: calc(var(--space-lg) + 22px); width: 16px; height: 16px; border-radius: 50%; background: var(--color-sticker); border: var(--rule-fat) solid var(--color-navy); }
  .flow__title { font-size: var(--text-xl); }
  .flow__trunk { display: none; position: absolute; left: 16.5px; width: 0; top: var(--trunk-top, 0); height: var(--trunk-h, 0); pointer-events: none; z-index: 2; }
  .flow__run { display: block; position: absolute; left: 0; top: 0; width: 16px; height: 16px; margin: calc(-1 * var(--space-xs)) 0 0 calc(-1 * var(--space-xs)); border-radius: 50%; background: var(--pulse); box-shadow: 0 0 0 3px var(--color-navy); opacity: 0; }
  .flow__foot { margin-top: var(--space-lg); justify-content: flex-start; }
  .trace__cap { font-size: var(--text-lg); }

  .cards, .cards--4, .tiles, .founders { grid-template-columns: minmax(0, 1fr); }
  .pair { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 32px auto; }
  .pair__wire { justify-self: start; width: 3px; height: 100%; margin-left: var(--space-xl); }
  .pair__wire::before { left: 50%; top: -2px; translate: -50% 0; }
  .pair__wire::after { left: 50%; right: auto; top: auto; bottom: -2px; translate: -50% 0; }
  .points--4 { grid-template-columns: minmax(0, 1fr); }

  .mbar {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-xs);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
    padding: var(--space-xs) max(var(--space-sm), env(safe-area-inset-right)) calc(var(--space-xs) + env(safe-area-inset-bottom)) max(var(--space-sm), env(safe-area-inset-left));
    background: var(--color-navy); box-shadow: 0 -8px 20px -12px var(--color-shadow);
    transition: transform var(--dur-long) var(--ease-out), visibility 0s linear 0s;
  }
  .mbar .btn { min-height: 48px; padding: 0 var(--space-md); }
  .mbar.is-away { transform: translateY(105%); visibility: hidden; transition: transform var(--dur-short) var(--ease-in), visibility 0s linear var(--dur-short); }
}
@media (max-width: 47.98rem) and (prefers-reduced-motion: no-preference) {
  .js .flow__trunk { display: block; }
}
@media (max-width: 47.98rem) and (prefers-reduced-motion: reduce) {
  .mbar, .mbar.is-away { transition: none; }
}

@media (max-width: 40rem) {
  :root { --header-h: calc(67px + env(safe-area-inset-top)); }
  .top__in { min-height: 64px; gap: var(--space-sm); }
  .top__logo img { height: 28px; }
  .hero { padding-top: var(--space-lg); }
  .hero__head { font-size: clamp(2.1rem, 9.4vw, 2.9rem); line-height: 1.04; }
  .hero__line { margin-top: var(--space-md); font-size: var(--text-lg); line-height: 1.4; }
  .hero__acts { margin-top: var(--space-lg); }
  .hero__acts .btn { flex: 1 1 100%; }
  .hero__copy { padding-bottom: var(--space-lg); }
  .crew { --crew-h: clamp(250px, 70vw, 300px); }
  .tag { padding: var(--space-xs) var(--space-md) var(--space-sm); font-size: var(--text-xs); }
  .tag b { font-size: var(--text-md); }
  .tag--d { left: -12%; bottom: 3%; }
  .tag--k { right: -12%; bottom: 21%; }
  .stick__one { min-height: 34px; padding: 0 var(--space-sm); font-size: var(--text-sm); }
  .stick__one--paid { left: 40%; top: 2%; }
  .trace { padding-top: var(--space-xl); }
  .trace__top { margin-bottom: var(--space-xl); }
  .svc__list { margin-top: var(--space-xl); }
  .row--ai h3 { font-size: clamp(2.5rem, 12vw, 3.6rem); }
  .sticker-new { width: 60px; height: 60px; font-size: var(--text-md); }
  .points { grid-template-columns: minmax(0, 1fr); }
  .points li, .points li:nth-child(4) { grid-column: auto; }
  .stamp { width: 108px; padding: var(--space-sm); font-size: var(--text-stamp); }
  .group, .note, .read, .consult__card, .card, .searches, .mock { padding: var(--space-lg); }
  .note { padding-top: var(--space-2xl); }
  .about__side { grid-template-columns: minmax(0, 1fr); }
  .burst { width: 160px; }
  .burst b { font-size: var(--text-2xl); }
  .row2 { grid-template-columns: minmax(0, 1fr); }
  .consult { padding-top: var(--space-xl); }
  .consult__phone { font-size: clamp(1.6rem, 8vw, 2.2rem); }
  .foot__col:first-of-type, .foot__col { grid-column: 1 / -1; }
  .phero { padding: var(--space-xl) 0 var(--space-2xl); }
  .phero h1 { font-size: clamp(2.1rem, 9vw, 2.9rem); line-height: 1.05; }
  .phero--long h1 { font-size: clamp(1.8rem, 7.4vw, 2.4rem); }
  .phero__acts .btn { flex: 1 1 100%; }
  .prose { font-size: var(--text-md); }
  .q summary { font-size: var(--text-md); }
  .founder__tag { left: var(--space-md); }
  .founder:nth-child(2) .founder__tag { right: var(--space-md); }
}
@media (max-width: 24rem) {
  .top__in { gap: var(--space-xs); }
  .top__logo img { height: 25px; }
  .mnav summary { padding: 0 var(--space-md); }
}