/* Shared base for every template in this set: the house names, the tone bands, the button tones, the menu
   mechanics and the platform's default blocks. It carries no look of its own; each template's design.css
   (below this) sets the header, hero, listings and everything a visitor remembers. */
/* ---- base ------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--t-main);
  color: var(--t-main-ink);
  font-family: var(--t-body);
  font-size: var(--t-text-body);
  line-height: var(--t-leading-body);
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--t-accent); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--t-accent);
  outline-offset: 2px;
}
/* On the accent band an accent ring would vanish into it, so the ring reads the band's ink
   token instead. Not currentColor: since the buttons-are-exempt fix above, a focused element's
   own color is tuned for ITS fill (a button's label), not the band behind it — a ring drawn in
   that color can fall under 3:1 against the band itself (measured: the accent outline button's
   own label reads 1.00:1 on the accent band). The ink token is built to read on the band. */
.t-tone-accent :focus-visible { outline-color: var(--t-accent-ink); }
/* Same reasoning for the dark band: its own ink (--t-support-ink) is built to read on it. */
.t-tone-dark :focus-visible { outline-color: var(--t-support-ink); }

h1, h2, h3 {
  font-family: var(--t-display);
  font-weight: 400;
  margin: 0 0 0.5em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
h1 { font-size: var(--t-text-h1); line-height: var(--t-leading-h1); }
h2 { font-size: var(--t-text-h2); line-height: var(--t-leading-h2); }
h3 { font-size: var(--t-text-h3); line-height: var(--t-leading-h3); }
p { margin: 0 0 1em; }

/* width: contain — the page box every plain section already sits in; `.s-content-contain`
   is the same box under the Content wrapper's own name, aliased here rather than
   repeated below. */
.s-wrap, .s-content-contain { width: min(100% - 2 * var(--t-page-gutter), var(--t-page-width)); margin-inline: auto; }

/* Read by a screen reader, never drawn: the listing's title inside each card's "Quick view" link. */
.s-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* The label step: uppercase and spaced, never under 12px. */
.s-eyebrow, .t-eyebrow, .s-status, .t-status, .s-specs dt {
  font-size: var(--t-text-label); line-height: var(--t-leading-label);
  letter-spacing: 0.08em; text-transform: uppercase;
}

/* ---- the block wrapper: tone bands and spacing ------------------------- */

.t-block { padding-block: var(--t-section-m); }
.t-space-compact { padding-block: var(--t-section-s); }
.t-space-spacious { padding-block: var(--t-section-l); }
/* No padding at all — a section that should sit flush against the one above or below it. */
.t-space-none { padding-block: 0; }
.t-tone-surface { background: color-mix(in srgb, var(--t-support) 5%, var(--t-main)); }
.t-tone-accent { background: var(--t-accent); color: var(--t-accent-ink); }
/* Off buttons: a plain link inherits the band's own ink, but a button already carries its own
   readable color (paper reads --t-main-ink, brand reads --t-button-ink or the agent's own
   --s-btn-ink) — "a { color: inherit }" at (0,1,1) beats a button's own (0,1,0) rule and
   overwrites it with whatever the band's ink happens to be, which is not built to read on the
   button's own fill. Same fix below for the dark band. */
.t-tone-accent a:not(.s-btn):not(.t-btn) { color: inherit; }
/* The fourth ground: `--t-support` filled, `--t-support-ink` on it — the same pair `--t-support-ink`
   is built to read on, so every template already carries a passing pair for it. */
.t-tone-dark { background: var(--t-support); color: var(--t-support-ink); }
.t-tone-dark a:not(.s-btn):not(.t-btn) { color: inherit; }

/* The platform's default blocks are one column of semantic HTML; give them the page width.
   ".t-block > :not(.s-wrap)" is two classes, (0,2,0) — higher than any single chrome class,
   by design (see specimen.test.mjs), but lower than .s-content-breakout below, which wins
   outright by specificity rather than by being named here or declared later. */
.t-block > :not(.s-wrap) { width: min(100% - 2 * var(--t-page-gutter), var(--t-page-width)); margin-inline: auto; }

/* ---- layout wrappers: Content (layout, width, sticky) ------------------
   Shared Content-wrapper classes a block's own markup applies for itself — never a
   second source of truth: a block still decides its own markup (whether a photo
   exists, which side it sits on) the way it always has, and these are just the
   shared rules two or more blocks used to each write for themselves. */

/* width: breakout — no page box, full width of whatever holds it. The doubled class gives
   ".t-block > .s-content-breakout.s-content-breakout" three classes, (0,3,0) — strictly
   higher than the wrap-width rule above's (0,2,0), so this wins by specificity alone,
   whichever of the two rules is declared first. Never `100vw` (it overruns a scrollbar's
   own width and forces a sideways scroll); a section that wants to fill its whole band
   reaches past `.t-block`'s padding on its own. Only works as a direct child of `.t-block`
   (the selector's own `>`) — put it inside `.s-wrap` instead and it stays at column width. */
.t-block > .s-content-breakout.s-content-breakout { width: 100%; }

/* layout: two_col — an equal pair of columns from 1024px, stacked below it: the hero's
   and the Text + image block's own grid, one rule for both instead of two apiece. */
.s-content-two_col { display: grid; gap: var(--t-gap-6); align-items: center; }
.s-content-two_col > * { min-width: 0; }
/* A block that can put either child first (the Text + image block's `image_side`) marks
   the one that should trade places — never `:first-child`, which a caption or another
   element ahead of it would throw off. Scoped to the same rule that turns on the columns:
   below 1024px this is one column and `order` still reorders an auto-placed grid item, so
   applying it any wider than that would send the marked child after its sibling even while
   stacked — a phone must still see the photo first, as the markup writes it. */
@media (min-width: 1024px) {
  .s-content-two_col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-content-two_col > .s-content-end { order: 1; }
}

/* sticky — the marked child alone stays put as the page scrolls; a block may set
   `--s-sticky-offset` for its own gap from the top, or leave the house one. No starter
   block reads it yet. */
.s-content-sticky { position: sticky; top: var(--s-sticky-offset, var(--t-gap-5)); }

/* ---- header and footer -------------------------------------------------- */

/* Non-sticky here on purpose — the starter is a blank skeleton, and a template opts into a fixed
   header itself. The recipe (documented in CLAUDE.md, "Motion"): `position: sticky; top: 0;` plus
   a `z-index` above anything else that can sit at the top of the stack — a pin or a scrub's own
   sticky inner view both need to lose to a sticky header, or the header paints under them. */
.s-header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--t-gap-3) var(--t-gap-5);
  width: min(100% - 2 * var(--t-page-gutter), var(--t-page-width)); margin-inline: auto;
  height: 60px;
  border-bottom: var(--t-stroke-px) solid color-mix(in srgb, var(--t-support) 15%, transparent);
}
@media (min-width: 1024px) { .s-header { height: 76px; } }
.s-brand {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--t-display); font-size: var(--t-text-h3); line-height: var(--t-leading-h3);
  color: inherit; text-decoration: none;
}
/* The logo: a fixed, capped height it letterboxes into, and a 3:1 box for an SVG with no size of its own.
   With height: auto instead, such an SVG draws 0 px wide. */
.s-logo { width: auto; height: 3rem; max-height: 3rem; object-fit: contain; aspect-ratio: auto 3 / 1; }
/* The desktop nav and the mobile menu are the same site.nav, drawn twice, and CSS alone decides
   which one is on screen — under 1024px the nav is hidden and the menu toggle takes its place; at
   1024px and up the menu (data-motion="menu") is hidden and the nav returns. This is the
   MENU_DESKTOP_WIDTH the script's own auto-close reads (motion.js), so the two never disagree. */
.s-nav { display: none; flex-wrap: wrap; gap: var(--t-gap-1) var(--t-gap-5); margin-left: auto; }
.s-nav a { color: inherit; text-decoration: none; }
.s-nav a[aria-current="page"], .s-nav a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
/* The header's button (site.header_cta, partials/nav.html): beside the nav from 1024px, and in the
   menu below that, so a phone's header holds the name and the toggle alone. With no nav there is
   no menu, so the button stays in the header at every width. Two classes, so it wins over .s-btn,
   which comes later in this file. */
.s-header .s-header-cta { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; white-space: nowrap; }
.s-header .s-nav ~ .s-header-cta { display: none; }
@media (min-width: 1024px) {
  .s-nav { display: flex; }
  .s-menu { display: none; }
  .s-header .s-nav ~ .s-header-cta { display: inline-flex; }
}

/* ---- the mobile menu (data-motion="menu" — partials/nav.html) ----------- */

/* The <details> itself carries no box of its own; its two children (the toggle and the panel)
   place themselves. motion.css's html:has() rule stops the page behind the panel from scrolling
   while it is open — nothing here needs to do that again. */
.s-menu-toggle {
  list-style: none;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: 44px; height: 44px;
  position: relative; z-index: 2; /* above .s-menu-panel, so the close "×" stays reachable */
  cursor: pointer;
}
.s-menu-toggle::-webkit-details-marker { display: none; }
/* Timed with the house motion names, which go to 0 ms under reduced motion and when the Motion setting is None. */
.s-menu-toggle span {
  display: block; width: 22px; height: 2px; background: currentColor;
  transition: transform var(--t-motion-s) var(--t-motion-ease), opacity var(--t-motion-s) var(--t-motion-ease);
}
/* The three bars become an "×" in place — no dimension of the toggle itself changes, only the
   bars inside it, so its box is identical open and closed. */
.s-menu[open] > .s-menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.s-menu[open] > .s-menu-toggle span:nth-child(2) { opacity: 0; }
.s-menu[open] > .s-menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.s-menu-panel {
  position: fixed; inset: 0; z-index: 1;
  padding-top: 60px; /* the header's own height below 1024px, so the toggle does not shift under the panel */
  background: var(--t-main);
  display: flex; flex-direction: column;
}
.s-menu-panel nav { display: flex; flex-direction: column; }
.s-menu-panel nav a {
  display: flex; align-items: center;
  height: 56px; padding-inline: var(--t-gap-5);
  font-size: var(--t-text-h2); line-height: var(--t-leading-h2); color: inherit; text-decoration: none;
}
.s-menu-call {
  display: flex; align-items: center; justify-content: center;
  height: 48px; margin: auto var(--t-gap-5) var(--t-gap-5); /* margin-top: auto pins it to the bottom of the panel */
  color: inherit; text-decoration: none;
  border: var(--t-stroke-px) solid currentColor; border-radius: var(--t-radius-px);
}

.s-footer {
  margin-top: var(--t-gap-8); padding-block: var(--t-section-s) var(--t-gap-5);
  border-top: var(--t-stroke-px) solid color-mix(in srgb, var(--t-support) 15%, transparent);
  font-size: var(--t-text-small); line-height: var(--t-leading-small);
}
.s-footer p { margin: 0 0 var(--t-gap-1); overflow-wrap: anywhere; }
.s-footer-grid { display: grid; gap: var(--t-gap-5); }
@media (min-width: 640px) { .s-footer-grid { grid-template-columns: 1fr 1fr; } }
.s-footer-name { font-weight: 600; }
.s-footer-nav, .s-socials { list-style: none; margin: 0 0 var(--t-gap-4); padding: 0; display: flex; flex-wrap: wrap; gap: var(--t-gap-2) var(--t-gap-4); }
/* Every link down here is a tap target of its own: 44 × 44 px at least, and 8 px between one and the next
   (a mobile rule the platform's template gate measures). vertical-align: top keeps a line that holds
   one exactly as tall as the link. */
.s-footer-grid a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; vertical-align: top; }
.s-footer-grid p:has(> a) { margin-bottom: var(--t-gap-2); }
.s-socials a { justify-content: center; width: 44px; height: 44px; color: inherit; }
.s-socials svg { width: 1.5rem; height: 1.5rem; }
.s-fine { margin-top: var(--t-gap-5); font-size: var(--t-text-label); line-height: var(--t-leading-label); opacity: 0.75; }

/* a row of buttons: wraps, and keeps them 12px apart */
.s-actions { display: flex; flex-wrap: wrap; gap: var(--t-gap-3) var(--t-gap-4); }

/* ---- buttons: the four tones the editor offers, and the agent's own color ----
 * A brand button is the `button` setting (template.json), behind a button's own color:
 * `--s-btn` is the color an agent gave one button, `--s-btn-ink` the label that reads on
 * it, and `--t-button-ink` the label the platform worked out for `--t-button`. Nothing but
 * a brand button reads `--t-button`. Every filled button's label is one of the platform's
 * inks, never a fixed white. */

.s-btn, .t-btn {
  display: inline-block; padding: var(--t-gap-3) var(--t-gap-5); border-radius: var(--t-radius-px);
  border: var(--t-stroke-px) solid transparent;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.s-btn-brand { background: var(--s-btn, var(--t-button)); color: var(--s-btn-ink, var(--t-button-ink)); }
.s-btn-ink { background: var(--s-btn, var(--t-support)); color: var(--s-btn-ink, var(--t-support-ink)); }
.s-btn-paper { background: var(--t-main); color: var(--s-btn, var(--t-main-ink)); border-color: currentColor; }
.s-btn-outline { background: transparent; color: var(--s-btn, var(--t-accent)); border-color: currentColor; }
/* On the accent band a brand button in the same color would vanish into it: a line in its label color keeps its edge. */
.t-tone-accent .s-btn-brand { border-color: currentColor; }
.t-tone-accent .t-btn-brand { border-color: currentColor; }
/* The outline button's label (and, via border-color: currentColor above, its border) is plain
   var(--t-accent) by default — on the accent band that IS the band's own background (measured
   1.00:1). The link-color fix above (line 88) explicitly excludes buttons, so it never reaches
   this one; --t-accent-ink reads on the band instead. Each family keeps its own agent-color
   escape hatch (--s-btn for the starter blocks, --t-btn for the platform's default ones). */
.t-tone-accent .s-btn-outline { color: var(--s-btn, var(--t-accent-ink)); }
.t-tone-accent .t-btn-outline { color: var(--t-btn, var(--t-accent-ink)); }
/* On the dark band, two of the four buttons need their own fix, beyond the link-color fix above:
   - the outline button's label is var(--t-accent) by default — 2.19:1 on this band's own
     background, same bug as the eyebrow and the focus ring above; --t-support-ink reads on it.
   - the ink button's own FILL is var(--t-support) — the same color as this band's own
     background (line 84) — so it disappears into it. --t-main is a ground that is actually
     different here, the way .s-btn-paper already reads it. Both keep the --s-btn/--s-btn-ink
     custom-property escape hatch an agent's own color uses. */
.t-tone-dark .s-btn-outline { color: var(--s-btn, var(--t-support-ink)); }
.t-tone-dark .s-btn-ink { background: var(--s-btn, var(--t-main)); color: var(--s-btn-ink, var(--t-main-ink)); }
/* A template built from the starter may drop blocks/feature.html and fall back to the
   platform's own default markup, which writes t-btn — so every s-btn-* band fix above needs
   its t-btn-* twin, or a template with no override keeps the bug the starter itself already
   fixed. Same reasoning, same values, the t-btn/-t-btn-ink escape hatch in place of s-btn/-ink. */
.t-tone-dark .t-btn-outline { color: var(--t-btn, var(--t-support-ink)); }
.t-tone-dark .t-btn-ink { background: var(--t-btn, var(--t-main)); color: var(--t-btn-ink, var(--t-main-ink)); }

/* The platform's default blocks use t-btn with the same tones. */
.t-btn-brand { background: var(--t-btn, var(--t-button)); color: var(--t-btn-ink, var(--t-button-ink)); }
.t-btn-ink { background: var(--t-btn, var(--t-support)); color: var(--t-btn-ink, var(--t-support-ink)); }
.t-btn-paper { background: var(--t-main); color: var(--t-btn, var(--t-main-ink)); border-color: currentColor; }
.t-btn-outline { background: transparent; color: var(--t-btn, var(--t-accent)); border-color: currentColor; }

/* ---- the platform's default blocks, lightly ----------------------------- */

.t-eyebrow { color: var(--t-eyebrow-ink, var(--t-accent)); }
.t-tone-accent .t-eyebrow { color: inherit; }
/* Same fix as .s-eyebrow above, for the platform's default blocks. */
.t-tone-dark .t-eyebrow { color: inherit; }
.t-block > .t-prose { max-width: none; }
.t-prose > * { max-width: 42rem; }
.t-listings, .t-posts, .t-gallery, .t-testimonials { display: grid; gap: var(--t-gap-5); padding: 0; margin: 0; list-style: none; }
@media (min-width: 640px) { .t-listings, .t-posts, .t-gallery, .t-testimonials { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); } }
.t-card a { color: inherit; text-decoration: none; }
.t-more { margin-top: var(--t-gap-5); }
.t-more a { display: inline-flex; align-items: center; min-height: 44px; }
/* A question is a tap target: at least 52 px tall, so two that touch still leave 8 px between their 44 px tap
   areas, whatever the Line spacing setting does to the line inside it. */
.t-faq summary { min-height: 52px; padding-block: var(--t-gap-3); cursor: pointer; }
.t-contact a { display: inline-flex; align-items: center; min-height: 44px; vertical-align: top; }
.t-contact p:has(> a) { margin-bottom: var(--t-gap-2); }
.t-card img { border-radius: var(--t-radius-px); margin-bottom: var(--t-gap-3); }
.t-card :is(h2, h3) { font-size: var(--t-text-h3); line-height: var(--t-leading-h3); margin-bottom: var(--t-gap-1); }
/* A post card's link is its cover and its title, or the title alone when the post has no cover: the title is 44px tall at least, a tap target of its own. */
.t-card-post > a { display: block; }
.t-card-post > a > h3 { display: flex; align-items: center; min-height: 44px; }
.t-status { margin: 0; }
.t-price { font-weight: 600; margin: 0; }
.t-facts { display: flex; gap: var(--t-gap-3); font-size: var(--t-text-small); line-height: var(--t-leading-small); opacity: 0.8; }
.t-quote { margin: 0; font-family: var(--t-display); font-size: var(--t-text-h3); line-height: var(--t-leading-h3); }
/* 0.85, not less: on the accent band (its ink on the accent) 0.75 falls to 4.47:1. */
.t-quote footer { font-family: var(--t-body); font-size: var(--t-text-body); line-height: var(--t-leading-body); opacity: 0.85; }
.t-form label, .s-form label { display: block; margin-bottom: var(--t-gap-4); }
/* A field is its own ground, whatever band it sits on: the page color and the text that reads on it. */
.t-form input, .t-form textarea, .s-form input, .s-form textarea {
  display: block; width: 100%; margin-top: var(--t-gap-1); padding: var(--t-gap-2) var(--t-gap-3);
  font: inherit; color: var(--t-main-ink); background: var(--t-main);
  border: var(--t-stroke-px) solid color-mix(in srgb, var(--t-support) 30%, transparent); border-radius: var(--t-radius-px);
}
.t-form-sent, .s-form-sent { padding: var(--t-gap-4); border-left: 4px solid var(--t-accent); }
.t-form-error, .s-form-error { padding: var(--t-gap-4); border-left: 4px solid #B91C1C; }
/* A form with the photo the agent chose beside it; a form with none has no band. As the Text + image
   block: the photo is first in the markup, so a phone stacks it on top, and from 1024px the two sit in
   equal columns with `right` moving the photo after the form. */
.t-form-band { display: grid; gap: var(--t-gap-6); align-items: start; }
.t-form-band > * { min-width: 0; }
@media (min-width: 1024px) {
  .t-form-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-form-band-right .t-form-media { order: 1; }
}
.t-form-media { margin: 0; }
.t-form-media img { width: 100%; border-radius: var(--t-radius-px); }

/* a quote's attribution on the accent band reads at full strength */
.t-tone-accent .t-quote footer { opacity: 1; }

/* ---- pages, posts, the listing -------------------------------------------- */

.s-page-head { padding-block: var(--t-section-s) var(--t-gap-2); }
.s-meta { opacity: 0.8; }
/* A row that wraps on a narrow phone, or in a wide system font, keeps 8 px between its lines of 44 px links. */
.s-share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--t-gap-2) var(--t-gap-3); font-size: 1rem; line-height: var(--t-leading-body); }
.s-share a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }
.s-neighbours { display: flex; justify-content: space-between; gap: var(--t-gap-4); margin-top: var(--t-gap-6); }
.s-neighbours a { display: inline-flex; align-items: center; min-height: 44px; }
.s-404 { padding-block: var(--t-section-m); }

/* The status pill: the listing page itself is the platform's now, but blocks/listings.html's quick view
   still draws its own status badge on the same class names. Sold is the one status in the second accent. */
.s-status-badge {
  display: inline-block; margin: 0; padding: var(--t-gap-1) var(--t-gap-3); border-radius: calc(var(--t-radius-px) / 2);
  background: var(--t-support); color: var(--t-support-ink);
}
.s-status-sold.s-status-badge { background: var(--t-accent2); color: var(--t-accent2-ink); }

/* ---- reduced motion ------------------------------------------------------ */

/* Every duration above is a --t-motion-* name, which the platform sets to 0 ms for a visitor who asked for less
   motion, so nothing here has to stop them. This block is where a transition timed by hand is stopped; it names the
   menu's too, so a copy that retimes those bars by hand is already covered. */
@media (prefers-reduced-motion: reduce) {
  .s-menu-toggle span { transition: none; }
}


/* ---- media the renderer hands over, and the platform's listing page, at 320px ------------------------------------------------------
   An iframe with no size is 300px wide with a 2px border, so a video or embed block drew a postage stamp (and 4px past a 280px column).
   The contract's own advice for a video box: width 100%, a 16:9 shape, height auto. An embed (a booking calendar) is taller. */
.t-video iframe, .t-video video { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--t-radius-px); }
.t-embed iframe { display: block; width: 100%; max-width: 100%; min-height: 30rem; border: 0; }
/* The listing page's side column is a one-column grid whose track grows to the widest thing inside it (the mortgage fields, the share
   menu); at 320px that pushed the whole page 2 to 10px sideways. A track that may shrink, and children that may too. */
.wi-lp .wi-lp-side, .wi-lp .wi-lp-body { grid-template-columns: minmax(0, 1fr); }
.wi-lp .wi-lp-side > *, .wi-lp .wi-lp-body > * { min-width: 0; max-width: 100%; }

/* ===========================================================================
   Arcabo Paper — a calm, editorial site on warm paper: a newspaper masthead, the office name set across a photo, pairs of
   photos of unequal width with ruled captions, pull-quotes, a dark form panel. Prefix ac-. extra1 Oat, extra2 Graphite.
   =========================================================================== */

:root { --ac-line: color-mix(in srgb, var(--t-support) 24%, transparent); --ac-dim: color-mix(in srgb, var(--t-support) 70%, var(--t-main)); --ac-bar: 64px; }
.t-tone-dark { --ac-dim: color-mix(in srgb, var(--t-support-ink) 78%, var(--t-support)); --ac-line: color-mix(in srgb, var(--t-support-ink) 28%, transparent); }
.t-tone-accent { --ac-dim: var(--t-accent-ink); --ac-line: color-mix(in srgb, var(--t-accent-ink) 42%, transparent); }
h1, h2, h3 { font-weight: 400; letter-spacing: -0.03em; line-height: 1.05; }

.ac-label, .t-eyebrow { display: block; margin: 0 0 var(--t-gap-3); font-size: var(--t-text-small); letter-spacing: 0.02em; color: var(--ac-dim); }
.ac-label::before, .t-eyebrow::before { content: "[ "; }
.ac-label::after, .t-eyebrow::after { content: " ]"; }
.ac-h2 { margin: 0 0 var(--t-gap-5); font-size: calc(clamp(2.25rem, 6vw, 4.5rem) * var(--t-scale, 1)); max-width: 15ch; }
.ac-h2-c { margin-inline: auto; text-align: center; }
.ac-head { margin-bottom: var(--t-gap-6); }
.ac-head .ac-h2 { margin-bottom: 0; }
.t-more { margin-top: var(--t-gap-6); }
.ac-text-link { display: inline-flex; align-items: center; gap: var(--t-gap-2); min-height: 44px; border-bottom: var(--t-stroke-px) solid currentColor; color: inherit; text-decoration: none; }
.ac-text-link:hover { color: var(--t-accent); }

/* ---- buttons: square, with a boxed arrow ----------------------------------------------------------------------------- */
.s-btn, .t-btn { border-radius: var(--t-radius-px); min-height: 48px; display: inline-flex; align-items: center; gap: var(--t-gap-3); padding: var(--t-gap-2) var(--t-gap-2) var(--t-gap-2) var(--t-gap-5); font-weight: 500; transition: background var(--t-motion-s) var(--t-motion-ease), color var(--t-motion-s) var(--t-motion-ease); }
.s-btn:not(:has(.ac-box)) { padding-right: var(--t-gap-5); }
.ac-box { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border: var(--t-stroke-px) solid currentColor; font-size: 1rem; line-height: 1; transition: background 150ms var(--t-motion-ease), color 150ms var(--t-motion-ease), border-color 150ms var(--t-motion-ease); }
.s-btn:hover .ac-box, .s-btn:focus-visible .ac-box { background: var(--t-accent); border-color: var(--t-accent); color: var(--t-accent-ink); }

/* ---- header: a masthead ---------------------------------------------------------------------------------------------- */
.ac-header { position: sticky; top: 0; z-index: 40; background: var(--t-main); border-bottom: var(--t-stroke-px) solid var(--ac-line); }
.ac-util { display: none; }
.ac-mast { width: min(100% - 2 * var(--t-page-gutter), var(--t-page-width)); margin-inline: auto; height: var(--ac-bar); display: flex; align-items: center; justify-content: space-between; gap: var(--t-gap-4); }
.ac-brand { display: inline-flex; align-items: center; min-height: 44px; font-size: 1.375rem; letter-spacing: -0.03em; color: var(--t-main-ink); text-decoration: none; }
.ac-logo { height: 2rem; width: auto; max-width: 11rem; object-fit: contain; aspect-ratio: auto 3 / 1; }
.ac-nav { display: none; }
.s-menu-panel { padding-top: var(--ac-bar); background: var(--t-main); color: var(--t-main-ink); }
.s-menu-panel nav a { font-weight: 400; letter-spacing: -0.03em; }
@media (min-width: 1024px) {
  .ac-header { position: static; border-bottom: 0; }
  .ac-util { display: block; border-bottom: var(--t-stroke-px) solid var(--ac-line); font-size: var(--t-text-small); }
  .ac-util-in { width: min(100% - 2 * var(--t-page-gutter), var(--t-page-width)); margin-inline: auto; min-height: 44px; display: flex; align-items: center; justify-content: space-between; }
  .ac-util a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; }
  .ac-util a:hover { color: var(--t-accent); }
  .ac-mast { height: auto; justify-content: center; padding-block: var(--t-gap-6) var(--t-gap-5); }
  .ac-brand { font-size: calc(clamp(2rem, 4.2vw, 3.75rem) * var(--t-scale, 1)); letter-spacing: -0.04em; }
  .ac-logo { height: 3.25rem; max-width: 16rem; }
  .ac-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--t-gap-1) var(--t-gap-7); border-block: var(--t-stroke-px) solid var(--ac-line); }
  .ac-nav a { display: inline-flex; align-items: center; min-height: 48px; color: var(--t-main-ink); text-decoration: none; font-size: var(--t-text-small); letter-spacing: 0.02em; }
  .ac-nav a:hover, .ac-nav a[aria-current="page"] { color: var(--t-accent); }
  .ac-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.35em; }
  .ac-menu { display: none; }
}

/* ---- hero ------------------------------------------------------------------------------------------------------------- */
.t-block-hero { padding-block: 0; }
.ac-hero { display: block; }
.ac-hero-photo { position: relative; margin: 0; display: grid; align-items: end; min-height: min(62vh, 700px); min-height: min(62svh, 700px); overflow: hidden; isolation: isolate; background: var(--t-extra2); }
.ac-hero-photo picture { position: absolute; inset: 0; z-index: -1; display: block; }
.ac-hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.ac-hero-photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, color-mix(in srgb, var(--t-support) 24%, transparent), color-mix(in srgb, var(--t-support) 64%, transparent)); }
.ac-giant { display: block; width: min(100% - 2 * var(--t-page-gutter), var(--t-page-width)); margin: 0 auto; padding-bottom: var(--t-gap-4); font-size: calc(clamp(3rem, 13vw, 11rem) * var(--t-scale, 1)); line-height: 0.88; letter-spacing: -0.05em; color: var(--t-support-ink); overflow-wrap: anywhere; }
.ac-hero-copy { width: min(100% - 2 * var(--t-page-gutter), 46rem); margin: 0 auto; padding-block: var(--t-section-s) var(--t-gap-6); text-align: center; display: grid; justify-items: center; gap: var(--t-gap-4); }
.ac-hero-copy .ac-label { margin: 0; }
.ac-headline { margin: 0; font-size: calc(clamp(2.25rem, 5.4vw, 4.75rem) * var(--t-scale, 1)); line-height: 1.02; letter-spacing: -0.04em; max-width: 16ch; }
.ac-sub { margin: 0; font-size: var(--t-text-body); line-height: var(--t-leading-body); color: var(--ac-dim); max-width: 34rem; }
.ac-hero-copy .s-actions { justify-content: center; margin-top: var(--t-gap-2); }
.ac-facts { list-style: none; width: min(100% - 2 * var(--t-page-gutter), var(--t-page-width)); margin: 0 auto var(--t-section-s); padding: var(--t-gap-5) 0 0; border-top: var(--t-stroke-px) solid var(--ac-line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ac-facts li { padding-inline: var(--t-gap-3); text-align: center; min-width: 0; }
.ac-facts li + li { border-left: var(--t-stroke-px) solid var(--ac-line); }
.ac-fact-n { margin: 0 0 var(--t-gap-1); font-size: calc(clamp(1.75rem, 5vw, 3.5rem) * var(--t-scale, 1)); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ac-fact-l { margin: 0; font-size: var(--t-text-label); line-height: 1.35; color: var(--ac-dim); overflow-wrap: anywhere; }
@media (min-width: 768px) { .ac-fact-l { font-size: var(--t-text-small); } }

/* ---- listings: pairs of unequal width -------------------------------------------------------------------------------- */
.ac-pairs { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--t-gap-7) var(--t-gap-5); }
.ac-work { min-width: 0; }
.ac-work-link { display: grid; gap: var(--t-gap-3); color: inherit; text-decoration: none; }
.ac-work-photo { display: block; overflow: hidden; aspect-ratio: 4 / 3; background: var(--t-extra1); }
.ac-work-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-motion-l) var(--t-motion-ease); }
.ac-work-link:hover .ac-work-photo img { transform: scale(1.02); }
.ac-work-line { display: flex; align-items: baseline; gap: var(--t-gap-3); padding-top: var(--t-gap-3); border-top: var(--t-stroke-px) solid var(--ac-line); }
.ac-work-title { margin: 0; font-size: var(--t-text-h3); line-height: var(--t-leading-h3); letter-spacing: -0.02em; min-width: 0; overflow-wrap: anywhere; }
.ac-dots { flex: 1 1 1rem; min-width: 1rem; align-self: end; margin-bottom: 0.4em; border-bottom: 2px dotted var(--ac-line); }
.ac-work-price { font-size: var(--t-text-h3); letter-spacing: -0.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ac-work-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--t-gap-1) var(--t-gap-4); font-size: var(--t-text-small); color: var(--ac-dim); }
@media (min-width: 768px) {
  .ac-pairs { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .ac-work:nth-child(4n+1) { grid-column: 1 / span 7; }
  .ac-work:nth-child(4n+2) { grid-column: 8 / span 5; }
  .ac-work:nth-child(4n+2) .ac-work-photo, .ac-work:nth-child(4n+3) .ac-work-photo { aspect-ratio: 4 / 5; }
  .ac-work:nth-child(4n+3) { grid-column: 1 / span 5; }
  .ac-work:nth-child(4n) { grid-column: 6 / span 7; }
  .ac-pairs-one .ac-work { grid-column: 1 / -1 !important; }
  .ac-pairs-one .ac-work-photo { aspect-ratio: 16 / 9 !important; }
}

/* ---- numbers, testimonials, about, form ------------------------------------------------------------------------------ */
.ac-nums { margin: var(--t-gap-5) 0 0; display: grid; grid-template-columns: minmax(0, 1fr); border-top: var(--t-stroke-px) solid var(--ac-line); }
.ac-num { margin: 0; padding: var(--t-gap-5) 0; border-bottom: var(--t-stroke-px) solid var(--ac-line); }
.ac-num dd { margin: 0 0 var(--t-gap-2); font-size: calc(clamp(2.75rem, 7vw, 6rem) * var(--t-scale, 1)); line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ac-num dt { font-size: var(--t-text-small); color: var(--ac-dim); max-width: 20ch; }
@media (min-width: 768px) { .ac-nums { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } .ac-num { border-bottom: 0; padding-inline: var(--t-gap-5); } .ac-num:first-child { padding-left: 0; } .ac-num + .ac-num { border-left: var(--t-stroke-px) solid var(--ac-line); } }

.ac-voices { text-align: center; }
.ac-voices .ac-h2 { margin-inline: auto; }
.ac-quotes { list-style: none; margin: var(--t-gap-6) auto 0; padding: 0; display: grid; gap: var(--t-gap-7); max-width: 56rem; }
.ac-quote blockquote { margin: 0; }
.ac-quote blockquote p { margin: 0; font-size: calc(clamp(1.5rem, 3.4vw, 2.5rem) * var(--t-scale, 1)); line-height: 1.15; letter-spacing: -0.03em; }
.ac-by { margin: var(--t-gap-4) 0 0; display: grid; justify-items: center; gap: 2px; }
.ac-by::before { content: ""; width: 2.5rem; border-top: var(--t-stroke-px) solid currentColor; margin-bottom: var(--t-gap-3); }
.ac-by-name { font-weight: 500; }
.ac-by-detail { font-size: var(--t-text-small); color: var(--ac-dim); }

.ac-about { display: grid; gap: var(--t-gap-6); align-items: start; }
.ac-about-fig { margin: var(--t-gap-5) 0 0; aspect-ratio: 1 / 1; overflow: hidden; background: var(--t-extra1); max-width: 20rem; }
.ac-about-fig img { width: 100%; height: 100%; object-fit: cover; }
.ac-about-body p { margin: 0 0 var(--t-gap-4); break-inside: avoid; max-width: 36rem; }
.ac-about-body p:first-child { font-size: calc(clamp(1.25rem, 2vw, 1.75rem) * var(--t-scale, 1)); line-height: 1.25; letter-spacing: -0.02em; }
.ac-about-text .s-actions { margin-top: var(--t-gap-5); }
@media (min-width: 1024px) { .ac-about { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--t-gap-8); } .ac-about-body { columns: 2; column-gap: var(--t-gap-6); } .ac-about-body p:first-child { column-span: all; max-width: 44rem; margin-bottom: var(--t-gap-5); } }

.ac-form-band { --ac-dim: color-mix(in srgb, var(--t-support-ink) 80%, var(--t-support)); --ac-line: color-mix(in srgb, var(--t-support-ink) 30%, transparent); background: var(--t-support); color: var(--t-support-ink); padding: var(--t-section-s) var(--t-gap-5); display: grid; gap: var(--t-gap-6); }
.ac-form-head { text-align: center; }
.ac-form-body { margin: 0 auto; max-width: 32rem; color: var(--ac-dim); }
.ac-form-panel { width: min(100%, 52rem); margin-inline: auto; }
.ac-form-img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; margin-bottom: var(--t-gap-5); }
.ac-form { display: grid; gap: var(--t-gap-4); }
.ac-field { display: grid; gap: var(--t-gap-1); margin: 0; }
.ac-field span { font-size: var(--t-text-small); color: var(--ac-dim); }
.ac-field input, .ac-field select, .ac-field textarea { font: inherit; font-size: 1rem; color: var(--t-main-ink); background: var(--t-main); border: var(--t-stroke-px) solid transparent; border-radius: var(--t-radius-px); padding: var(--t-gap-3) var(--t-gap-4); min-height: 48px; width: 100%; transition: border-color var(--t-motion-s) var(--t-motion-ease); }
.ac-field input:focus, .ac-field select:focus, .ac-field textarea:focus { outline: none; border-color: var(--t-accent); }
.ac-form .s-btn { justify-self: start; background: var(--t-main); color: var(--t-main-ink); }
@media (min-width: 768px) { .ac-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--t-gap-4) var(--t-gap-5); } .ac-field-wide, .ac-form .s-btn { grid-column: 1 / -1; } .ac-form-band { padding: var(--t-section-m) var(--t-gap-7); } }

/* ---- the platform's own blocks --------------------------------------------------------------------------------------- */
.t-heading { font-size: calc(clamp(2.25rem, 6vw, 4.5rem) * var(--t-scale, 1)); margin: 0 0 var(--t-gap-5); letter-spacing: -0.03em; font-weight: 400; }
.t-block-rich_text .t-prose h2, .t-block-rich_text .t-prose h3 { font-family: var(--t-display); font-weight: 400; font-size: calc(clamp(2rem, 5vw, 3.75rem) * var(--t-scale, 1)); line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 var(--t-gap-5); max-width: 18ch; }
.t-block-rich_text .t-prose p.eyebrow { font-size: var(--t-text-small); color: var(--ac-dim); }
.t-areas { list-style: none; margin: 0; padding: 0; display: grid; border-top: var(--t-stroke-px) solid var(--ac-line); }
.t-areas li { display: grid; gap: var(--t-gap-1); padding: var(--t-gap-4) 0; border-bottom: var(--t-stroke-px) solid var(--ac-line); }
.t-area-name { font-size: calc(clamp(1.5rem, 3.4vw, 2.5rem) * var(--t-scale, 1)); letter-spacing: -0.03em; line-height: 1.05; }
.t-area-note { font-size: 1rem; color: var(--ac-dim); }
@media (min-width: 768px) { .t-areas li { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: baseline; } }
.t-card-post img { margin-bottom: var(--t-gap-3); }
.t-card-post time { font-size: var(--t-text-small); color: var(--ac-dim); }
.t-faq details { border-top: var(--t-stroke-px) solid var(--ac-line); }
.t-faq details:last-child { border-bottom: var(--t-stroke-px) solid var(--ac-line); }
.t-faq summary { font-size: var(--t-text-h3); letter-spacing: -0.02em; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--t-gap-4); min-height: 56px; }
.t-faq summary::-webkit-details-marker { display: none; }
.t-faq summary::after { content: "+"; font-size: 1.5rem; transition: transform var(--t-motion-s) var(--t-motion-ease); }
.t-faq details[open] summary::after { transform: rotate(45deg); }
.t-cta { display: grid; gap: var(--t-gap-4); justify-items: center; text-align: center; }
.t-cta .t-heading { font-size: calc(clamp(2.5rem, 7vw, 5.5rem) * var(--t-scale, 1)); line-height: 1; max-width: 14ch; margin: 0; }
.t-cta-body { margin: 0; max-width: 32rem; color: var(--ac-dim); }
.t-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--t-gap-3); }
.t-logos { list-style: none; margin: 0; padding: var(--t-gap-4) 0; border-block: var(--t-stroke-px) solid var(--ac-line); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--t-gap-2) var(--t-gap-6); color: var(--ac-dim); font-size: var(--t-text-h3); letter-spacing: -0.02em; }
.t-logos li { min-height: 44px; display: flex; align-items: center; }
.t-logos img { height: 1.75rem; width: auto; max-width: 8rem; object-fit: contain; filter: grayscale(1); }
.t-reasons { list-style: none; margin: 0; padding: 0; display: grid; border-top: var(--t-stroke-px) solid var(--ac-line); counter-reset: acr; }
.t-reasons li { counter-increment: acr; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--t-gap-1) var(--t-gap-3); padding: var(--t-gap-5) 0; border-bottom: var(--t-stroke-px) solid var(--ac-line); }
.t-reasons li::before { content: counter(acr, decimal-leading-zero); font-size: var(--t-text-small); color: var(--ac-dim); grid-row: 1 / span 2; }
.t-reasons h3 { margin: 0; font-size: var(--t-text-h3); }
.t-reasons p { margin: 0; color: var(--ac-dim); }

/* ---- footer ---------------------------------------------------------------------------------------------------------- */
.ac-footer { margin-top: var(--t-gap-8); background: var(--t-extra1); color: var(--t-main-ink); padding-block: var(--t-section-s) var(--t-gap-5); font-size: var(--t-text-small); line-height: var(--t-leading-small); }
.ac-foot-in { width: min(100% - 2 * var(--t-page-gutter), var(--t-page-width)); margin-inline: auto; }
.ac-foot-grid { display: grid; gap: var(--t-gap-5); }
.ac-footer p { margin: 0 0 var(--t-gap-2); overflow-wrap: anywhere; }
.ac-foot-h { font-weight: 500; font-size: 1rem; margin-bottom: var(--t-gap-3) !important; }
.ac-foot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--t-gap-2); justify-items: start; }
.ac-footer a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: inherit; text-decoration: none; }
.ac-footer a:hover { color: var(--t-accent); }
.ac-socials { margin: 0; }
.ac-brokerage { max-height: 2.5rem; width: auto; margin-bottom: var(--t-gap-3); }
.ac-fine { margin-top: var(--t-gap-6); padding-top: var(--t-gap-4); border-top: var(--t-stroke-px) solid color-mix(in srgb, var(--t-main-ink) 24%, transparent); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--t-gap-3); font-size: var(--t-text-label); line-height: 1.5; color: color-mix(in srgb, var(--t-main-ink) 72%, var(--t-extra1)); }
.ac-fine p { margin: 0; max-width: 56rem; }
@media (min-width: 768px) { .ac-foot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---- the style panel's menu: one rule per id in template.json → styles ----
   Last in the file, so an agent's pick wins over a block's own face, size or color. */

.t-font-display { font-family: var(--t-display); }
.t-font-body { font-family: var(--t-body); }
.t-size-sm { font-size: 0.875em; }
.t-size-md { font-size: 1em; }
.t-size-lg { font-size: 1.375em; }
.t-color-ink { color: var(--t-support); }
.t-color-accent { color: var(--t-accent); }
.t-color-dim { color: color-mix(in srgb, var(--t-support) 68%, var(--t-main)); }