/* ============================================================================
SC Business Broker — ORIGINAL Tilda monochrome style (matches
_review/original-style-mockup.html). Montserrat, black on white.
PALETTE (owner decision, 2026-07-31) — four colours, no navy:
black #000000 · white #FFFFFF · light band #F0F0F0 · gold #A6822E
Sections alternate white / #F0F0F0 / black. Gold carries the accents:
hover + active states AND the primary CTA buttons.
Header/footer are LOCKED and styled elsewhere (rule 7).
============================================================================ */
:root{
--sc-black:#000000; --sc-ink:#111111; --sc-grey:#555555; --sc-line:#dcdcdc;
--sc-tint:#F0F0F0; --sc-tint2:#F0F0F0; --sc-dark:#000000; --sc-gold:#A6822E;
/* Hover shade of the CTA gold. Owner decision 2026-08-04: the primary button used to
invert to solid black on hover, which read as a different button rather than the same
one reacting. It now darkens within its own colour. This is also the value AGENTS.md
names as the AA-compliant gold (5.0:1 against white), so hover is the accessible state. */
--sc-gold-dark:#8A6A22;
/* Legacy alias — `navy` is gone; the class names it feeds now render black. */
--sc-navy:var(--sc-dark);
}
/* Grayscale font smoothing on CONTENT only (removes subpixel colour fringing on thin text;
header/footer are outside these wrappers, so rule 7 is unaffected). */
.entry-content, .sc-catalog-wrap, .sc-listing{
-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
/* ---- Section rhythm + backgrounds ---- */
.sc-section{ padding:80px 40px; }
/* Anchor targets must reserve room for the sticky header, or a jump to `#about` /
`#contact-us` / `#valuation` parks the section's first line underneath the bar. The bar is
70px at the top of the page and 60px once stuck, so 80px clears the taller state with a
little air. Applies to every section that carries an id, not just the ones linked today. */
.sc-section[id], .sc-hero[id], #colophon{ scroll-margin-top:80px; }
/* Full-bleed sections get their side gutter on the INNER container: Kadence zeroes
horizontal padding on .alignfull sections, so padding on .sc-section is ignored.
The `.wp-block-cover.sc-hero` variant is not redundant: the theme ships its own
`.wp-block-cover .wp-block-cover__inner-container` rule at the same specificity as the
plain `.sc-hero >` selector and loads later, so it won and every hero rendered a
1232px-wide column starting 56px left of the sections beneath it (measured at a 1280px
viewport: hero copy at x=17, sections at x=73). The extra class breaks the tie.
Keep the pair in sync with the ≤781px override at the bottom of this file — raising one
without the other pins the desktop gutter on mobile. */
.sc-section > .wp-block-group__inner-container,
.sc-hero > .wp-block-cover__inner-container,
.wp-block-cover.sc-hero > .wp-block-cover__inner-container,
.sc-section-inner{ max-width:1200px; margin-left:auto; margin-right:auto; padding-left:40px; padding-right:40px; box-sizing:border-box; }
/* Header and footer share that content column (owner request 2026-08-04).
Rule 7 in AGENTS.md freezes the header and footer; this is an explicit owner-requested
exception and it changes GEOMETRY ONLY — no colours, no inner spacing, no restructuring.
Kadence ships `.site-container{max-width:1290px; padding:0 24px}`, so at a 1265px viewport
the logo and the first footer column started at x=24 while every page section started at
x=73 — a visible 49px overhang on both bars. Matching the numbers above puts all three on
one left edge. `#id`-led because the theme's own rule is (0,1,0).
CAUTION: this takes ~97px of width out of the header row, and that row has almost no
slack — the primary nav is sized to fit its centre grid column. Re-measure the menu at
1100px and 1040px after changing a menu label, the nav font size, or these numbers. */
#masthead .site-container,
#colophon .site-container{ max-width:1200px; padding-left:40px; padding-right:40px; box-sizing:border-box; }
/* Section alternation: white → #F0F0F0 → black.
NOTE the class names are historical and no longer describe their colour:
`sc-bg-beige` renders #F0F0F0 and `sc-bg-navy` / `sc-on-navy` render BLACK.
They are kept because 16 pages x 2 languages reference them in block markup;
renaming them is a separate content migration, not a styling change. */
.sc-bg-white{ background:#ffffff; }
.sc-bg-beige{ background:var(--sc-tint); } /* #F0F0F0 band */
.sc-bg-navy { background:var(--sc-dark); } /* black band (CTA) */
/* ---- Section heading: solid black rule "—" + UPPERCASE bold ---- */
.sc-head{
display:flex; align-items:center; gap:16px;
font-family:'Montserrat',sans-serif; font-size:26px; font-weight:700;
text-transform:uppercase; letter-spacing:.03em; color:#000; line-height:1.2; margin:0 0 28px;
}
.sc-head::before{ content:''; width:46px; height:2px; background:#000; flex-shrink:0; }
.sc-head.is-small{ font-size:24px; margin-bottom:6px; }
/* ---- Eyebrow / lead / small sub / quote ---- */
.sc-eyebrow{ color:var(--sc-grey); text-transform:uppercase; font-size:12px; letter-spacing:.12em; font-weight:600; margin:0 0 14px; }
.sc-lead{ color:#333; font-size:15px; line-height:1.7; max-width:70ch; }
.sc-pack-sub{ color:#777; font-size:12px; margin:0 0 32px; padding-left:62px; }
.sc-quote{ font-family:'Montserrat',serif; font-size:44px; line-height:1; color:#111; margin:0 0 4px; }
/* ---- Buttons ----------------------------------------------------------------
Primary = the CTA: solid gold with a WHITE label (owner decision 2026-07-31 —
the black label read as muddy against this gold). Note the trade-off: white on
#A6822E is 3.6:1, below the 4.5:1 WCAG AA threshold for text this size, whereas
black was 5.9:1. If AA matters later, darken the button gold to ~#8A6A22 (5.0:1
against white) rather than reverting the label colour.
Secondary stays a quiet outline so the gold button is unmistakably the primary
action on the page. */
.sc-btn .wp-block-button__link, a.sc-btn{
display:inline-block; padding:13px 26px; border-radius:2px; font-weight:600;
font-size:12px; letter-spacing:.04em; line-height:1.2; text-decoration:none;
text-transform:uppercase; transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.sc-btn-primary .wp-block-button__link, a.sc-btn-primary{ background:var(--sc-gold); color:#fff; border:1.5px solid var(--sc-gold); }
.sc-btn-primary .wp-block-button__link:hover, a.sc-btn-primary:hover{ background:var(--sc-gold-dark); border-color:var(--sc-gold-dark); color:#fff; }
.sc-btn-secondary .wp-block-button__link, a.sc-btn-secondary{ background:transparent; color:#000; border:1.5px solid #000; }
.sc-btn-secondary .wp-block-button__link:hover, a.sc-btn-secondary:hover{ background:#000; color:#fff; }
/* On the black band (.sc-on-navy — historical name) the gold CTA keeps its identity;
hover inverts to white. Secondary stays a white outline. */
.sc-on-navy .sc-btn-primary .wp-block-button__link, .sc-on-navy a.sc-btn-primary{ background:var(--sc-gold); color:#fff; border-color:var(--sc-gold); }
.sc-on-navy .sc-btn-primary .wp-block-button__link:hover{ background:#fff; color:#000; border-color:#fff; }
.sc-on-navy .sc-btn-secondary .wp-block-button__link, .sc-on-navy a.sc-btn-secondary{ background:transparent; color:#fff; border-color:#fff; }
.sc-on-navy .sc-btn-secondary .wp-block-button__link:hover{ background:#fff; color:#000; }
/* ---- Hero (real photo bg + navy overlay via cover dimRatio) ---- */
/* core/cover carries a 32px bottom margin. On the homepage it is invisible (the next
section is white too), but on the service pages the following band is #F0F0F0, so the
gap showed as a white strip under the photo. Sections own their own spacing here. */
.sc-hero{ margin-bottom:0 !important; }
/* The hero's own gutter/max-width lives with the section rhythm at the top of this file,
so the hero column and every section below it share one source of truth. */
.sc-hero .wp-block-cover__inner-container{ width:100%; }
/* 52px on desktop, fluid below. It used to be a flat 52px with no responsive override,
which made "BUSINESSES" wider than a 390px viewport and broke it mid-word
("BUSINESSE / S"). The clamp floor keeps the longest word inside the gutters, so the
heading only ever breaks between words — including at the manual s. */
.sc-hero h1{ color:#fff !important; text-transform:uppercase; letter-spacing:.02em; font-size:clamp(28px, 5.4vw, 52px); line-height:1.05; font-weight:700; margin:0 0 18px; }
.sc-hero .sc-eyebrow{ color:#c9c9c9; letter-spacing:.12em; }
/* Service-page heroes reuse the standard section heading (`sc-head`) and lead, both of
which are black by default — invert them over the photo, including the signature rule
before the heading, which would otherwise be a black bar on a dark image. */
.sc-hero .sc-head{ color:#fff; }
.sc-hero .sc-head::before{ background:#fff; }
.sc-hero .sc-lead{ color:#e0e0e0; }
.sc-hero .sc-hero-sub{ color:#e0e0e0; font-size:16px; line-height:1.6; margin:0 0 28px; max-width:480px; }
/* ============================================================================
HOMEPAGE HERO v2 + FEATURE BAND (owner mockup, 2026-08-04)
----------------------------------------------------------------------------
Everything here is scoped behind `.sc-hero--v2` / `.sc-featband` so the two
service-page heroes, which share the base `.sc-hero`, keep their flat-dim look.
Only the homepage carries the modifier.
LINE-ICONS: every icon is a single 24x24 stroke SVG inlined as a data URI and
painted through `mask-image`, not `background-image`. That way the glyph takes
its colour from `background-color` — one token, `--sc-gold`, drives all eight —
and no SVG markup has to sit in the page content, so the blocks stay native and
a manager never sees a raw-HTML box in the editor (see AGENTS.md follow-up 12).
Each item picks its glyph by setting `--sc-ico` on itself.
============================================================================ */
/* Overlay. The base hero uses core/cover's flat black dim at 60%. The mockup instead
keeps the photograph legible on the right and buries the left so the copy has solid
ground, then fades to black at the very bottom so the hero and the black feature band
below it read as one continuous surface.
Both gradients ride on core's own dim span. `opacity:1` is forced because the block's
`has-background-dim-60` class would otherwise multiply every alpha stop below by .6
and wash the whole thing out.
The two layers COMPOSITE — effective alpha is 1-(1-a1)(1-a2), not a1+a2 — which is why
the vertical layer is fully transparent for its top half. An even modest top scrim here
stacks with the horizontal one and kills the sunset sky the photo was chosen for.
The bottom stop is .72, not the .86 used while the band below was black: with a light
`#F0F0F0` band under the hero there is nothing to blend into, and a near-black bottom
edge just looked like the photograph had been cropped short. The stats bar keeps its
own translucent card, so its legibility does not lean on this gradient. */
.sc-hero--v2 .wp-block-cover__background{
opacity:1 !important;
background-color:transparent !important;
background-image:
linear-gradient(90deg, rgba(0,0,0,.90) 0%, rgba(0,0,0,.84) 30%, rgba(0,0,0,.55) 52%, rgba(0,0,0,.18) 74%, rgba(0,0,0,.10) 100%),
linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,.72) 100%);
}
/* The eyebrow is gold here and only here. Elsewhere on the site an eyebrow is black or
grey (gold discipline in AGENTS.md); over a photograph grey has no separation from the
image, and the mockup calls for gold. Scoped to v2 so the rule does not leak. */
.sc-hero--v2 .sc-eyebrow{ color:var(--sc-gold); letter-spacing:.14em; margin-bottom:18px; }
/* Two-tone H1: the offer is 700, the geography that follows is 500. The weight split is
carried by a plain rather than a class-bearing on purpose — bold is a
core RichText format, so the heading block never trips editor validation and a manager
can re-apply it from the toolbar. */
/* No max-width: the manual s define the four lines, and a character-based cap fought
them — 15ch is comfortable for English but re-wrapped the Ukrainian H1 into six lines
("КУПІВЛЯ ТА / ПРОДАЖ / БІЗНЕСІВ / У ВЕЛИКІЙ / БРИТАНІЇ, ЄС / ТА УКРАЇНІ"). The clamp on
the base `.sc-hero h1` is what keeps the longest word inside the gutters on mobile. */
/* Heading spacing: `margin: 0.5em 0 .5em`, symmetric, em-based so it scales with the
clamped H1 and stays proportional at every viewport.
The doubled class is load-bearing. The theme ships `.single-content h1{margin:1.5em 0
.5em}` in content.min.css at the same (0,1,1) as a plain `.sc-hero--v2 h1`, and that
file is enqueued after this one — so the theme won and the H1 kept a 1.5em top margin
(42px at the clamp floor) while only the bottom took effect. `.sc-hero.sc-hero--v2`
buys the extra class needed to win.
Note the same collision makes the `margin` in the base `.sc-hero h1` rule above inert;
it is left as-is because the service-page heroes head with `.sc-head`, not an h1.
Top and bottom margins collapse against the eyebrow's and the lead's own margins in this
flow container, so the larger of each pair wins rather than the two stacking. */
.sc-hero.sc-hero--v2 h1{ font-weight:500; margin:0.5em 0 .5em; }
.sc-hero--v2 h1 strong{ font-weight:700; }
.sc-hero--v2 .sc-hero-sub{ max-width:430px; margin-bottom:34px; }
/* ---- Hero stats bar -------------------------------------------------------
Sits inside the cover, near the bottom of the photo. Four cells, icon left of a
number/label stack.
Owner decision 2026-08-04: NO frame. The row used to be a carded box — 1px white
border, 2px radius, flat `rgba(0,0,0,.38)` fill, hairline dividers between cells.
That box is gone; separation now comes from spacing alone and the ground under the
text comes from a soft gradient wash instead. */
/* TWO cells (owner decision 2026-08-04, cut down from four). Columns are sized to their
content and the grid itself shrinks to fit — `1fr` columns across the full 1120px
content width would park the two stats ~570px apart and they would stop reading as a
pair. `max-width:100%` keeps the max-content track from overflowing a narrow viewport.
One row means there is no row gap, so the cells share a baseline with nothing hanging
below the first. */
.sc-hstats{
position:relative;
display:grid; grid-template-columns:repeat(2,minmax(0,max-content)) !important;
width:max-content; max-width:100%;
margin-top:44px; gap:0 72px !important;
}
/* The wash. Deliberately self-contained rather than full-bleed: a `100vw` breakout would
be wider than the document whenever a scrollbar is present, and whether that overflows
depends on core keeping `overflow:hidden` on .wp-block-cover — not something to bet the
layout on. Instead every edge is faded out, so there is no seam to see and no need for
the strip to reach the viewport edge. Horizontal fade lives in the gradient itself and
the vertical one in a single mask: one background + one mask avoids `mask-composite`,
whose keywords differ between the prefixed and standard syntax. */
.sc-hstats::before{
content:''; position:absolute; inset:-18px -26px; z-index:0; pointer-events:none;
background-image:linear-gradient(90deg,
rgba(0,0,0,0) 0%, rgba(0,0,0,.46) 9%, rgba(0,0,0,.40) 45%, rgba(0,0,0,.28) 74%, rgba(0,0,0,0) 100%);
-webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 24%, #000 76%, transparent 100%);
mask-image:linear-gradient(180deg, transparent 0%, #000 24%, #000 76%, transparent 100%);
}
/* The margin reset is load-bearing, not tidiness. The theme gives every `.wp-block-group`
inside `.single-content` a 32px bottom margin and zeroes it only on `:last-child`
(content.min.css) — and a stat cell IS a group, so every cell but the last carried 32px.
Because a stretched grid item's height is reduced by its own margin, those cells
rendered 32px shorter than their neighbour and their content sat visibly higher.
Three classes are needed: the theme's rule is (0,2,0) and design-system.css is enqueued
BEFORE content.min.css, so a two-class selector would lose the tie on source order. */
.sc-hero .sc-hstats .sc-hstat,
.sc-hero .sc-hstats .sc-hstat__body{ margin:0; }
.sc-hstat{
position:relative; z-index:1;
display:flex; align-items:center; gap:15px;
padding:0; min-width:0;
}
.sc-hstat::before{
content:''; flex:0 0 auto; width:30px; height:30px; background-color:var(--sc-gold);
-webkit-mask-image:var(--sc-ico); mask-image:var(--sc-ico);
-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
-webkit-mask-position:center; mask-position:center;
-webkit-mask-size:contain; mask-size:contain;
}
/* The number/label pair is wrapped in its own group so `.sc-hstat` has exactly two flex
children — the icon and this box — no matter whether core decides to emit a
`.wp-block-group__inner-container` for the item. Without the wrapper the two
paragraphs would become separate flex children and lay out in a row. */
.sc-hstat__body{ min-width:0; }
/* Larger number and an uppercase, letter-spaced label, per the reference. With the frame
gone the type is the only thing holding the row together, so it has to carry more
weight than it did inside a box.
Both selectors are qualified with `.sc-hero` for a reason: core ships
`:root :where(.wp-block-cover p:not(.has-text-color)){color:inherit}`, and because
`:where()` contributes nothing, that lands at the same (0,1,0) as a bare `.sc-hstat__…`
and wins on order. Unqualified, the label rendered opaque white and the number/label
hierarchy the reference relies on disappeared. */
.sc-hero .sc-hstat__num{
color:#fff; font-size:26px; font-weight:700; line-height:1.1; margin:0 !important;
letter-spacing:.01em; white-space:nowrap;
}
.sc-hero .sc-hstat__label{
color:rgba(255,255,255,.72); font-size:11px; line-height:1.4; margin:7px 0 0 !important;
text-transform:uppercase; letter-spacing:.1em;
}
/* ---- Feature band ---------------------------------------------------------
On the site's light band (#F0F0F0, `.sc-bg-beige`) — owner decision 2026-08-04,
replacing the mockup's black. One bordered box, four cells, same icon-left treatment
as the hero stats bar so the two rows rhyme; only the palette differs, so the two
components stay recognisably the same control.
Text is the standard light-surface pair: black title, grey body, `--sc-line` rules.
No padding override: the band was moved out from under the hero to sit between the
catalogue and the blog (owner decision 2026-08-04), so it is an ordinary mid-page
section now and takes the standard `.sc-section` rhythm. */
/* Slim band, no frame (owner decision 2026-08-04). The bordered box is gone; the only rule
left is the divider BETWEEN cells — upright and dashed (owner decision 2026-08-04,
replacing the slanted version). */
.sc-featband{ padding-top:36px; padding-bottom:36px; }
.sc-feats{
border:0; border-radius:0;
gap:0 !important; margin-bottom:0 !important;
}
.sc-feat{
position:relative;
display:flex; align-items:flex-start; gap:14px;
padding:2px 30px; min-width:0;
}
/* With the frame removed the row must start on the container's left edge like every other
section, so the outer cells drop their outer padding rather than sitting 30px inboard. */
.sc-feat:first-child{ padding-left:0; }
.sc-feat:last-child{ padding-right:0; }
/* `::after`, because `::before` already carries the icon. Absolute positioning keeps it out
of the flex flow — a static pseudo-element on a flex container becomes a flex ITEM and
would push the icon and text sideways.
The dashes come from a repeating gradient rather than `border-left:1px dashed`: the border
keyword leaves dash length and gap up to the browser, and at 1px Chrome and Firefox draw
noticeably different rhythms. The gradient pins both — 5px of ink, 6px of gap. */
.sc-feat + .sc-feat::after{
content:''; position:absolute; left:0; top:10%; bottom:10%; width:1px;
background-image:repeating-linear-gradient(to bottom, var(--sc-line) 0 5px, transparent 5px 11px);
}
.sc-feat::before{
content:''; flex:0 0 auto; width:26px; height:26px; margin-top:2px; background-color:var(--sc-gold);
-webkit-mask-image:var(--sc-ico); mask-image:var(--sc-ico);
-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
-webkit-mask-position:center; mask-position:center;
-webkit-mask-size:contain; mask-size:contain;
}
.sc-feat__body{ min-width:0; }
.sc-feat__title{
color:var(--sc-black); font-size:15px; font-weight:700; line-height:1.35; margin:0 !important;
letter-spacing:.005em;
}
.sc-feat__text{ color:var(--sc-grey); font-size:13px; line-height:1.6; margin:10px 0 0 !important; }
/* ---- Glyphs ---------------------------------------------------------------
Stroke-only 24x24 paths; the stroke colour in the data URI is irrelevant because
`mask-mode` reads the alpha channel, not the pixel colour. */
.sc-ico-range { --sc-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0l-7.2-7.2A2 2 0 0 1 2.8 12V4.8a2 2 0 0 1 2-2H12a2 2 0 0 1 1.4.6l7.2 7.2a2 2 0 0 1 0 2.8Z'/%3E%3Ccircle cx='7.6' cy='7.6' r='1.3'/%3E%3C/svg%3E"); }
.sc-ico-globe { --sc-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3a14 14 0 0 1 0 18a14 14 0 0 1 0-18Z'/%3E%3C/svg%3E"); }
.sc-ico-years { --sc-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.sc-ico-sectors{ --sc-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7.4' height='7.4' rx='1'/%3E%3Crect x='13.6' y='3' width='7.4' height='7.4' rx='1'/%3E%3Crect x='3' y='13.6' width='7.4' height='7.4' rx='1'/%3E%3Crect x='13.6' y='13.6' width='7.4' height='7.4' rx='1'/%3E%3C/svg%3E"); }
.sc-ico-match { --sc-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='7'/%3E%3Cpath d='m20.5 20.5-5-5'/%3E%3C/svg%3E"); }
.sc-ico-shield { --sc-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8 4.6 6v6.1c0 4.6 3.1 7.9 7.4 9 4.3-1.1 7.4-4.4 7.4-9V6Z'/%3E%3Cpath d='m8.9 11.9 2.2 2.3 4-4.5'/%3E%3C/svg%3E"); }
.sc-ico-doc { --sc-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2.8H7a2 2 0 0 0-2 2v14.4a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7.8Z'/%3E%3Cpath d='M13.8 2.8V8H19'/%3E%3Cpath d='M8.6 13h6.8M8.6 16.4h4.4'/%3E%3C/svg%3E"); }
/* ---- Hero v2 + band, narrow viewports -------------------------------------
Four cells never survive a tablet width: the numbers are `nowrap`, so they would
push the grid past the gutter rather than wrap. Step 4 → 2 → 1 and flip the
vertical hairlines to horizontal ones at each step. */
/* `!important` on the template, as on `.sc-stats` above: core prints the grid for a
`layout:{type:grid}` group as its own `.wp-container-…` rule at identical specificity,
so without the flag the winner depends on stylesheet order rather than on intent. */
@media (max-width:1024px){
.sc-hstats{ gap:0 44px !important; }
}
/* Two max-content cells stop fitting side by side around here — stack them. `width:auto`
has to come back with the single column, otherwise the max-content track keeps the wash
hugging the wider of the two labels instead of the text column. */
@media (max-width:600px){
.sc-hstats{ grid-template-columns:1fr !important; width:auto; gap:22px !important; margin-top:38px; }
/* Stacked, the wash is taller than it is wide — pull its horizontal bleed in so it does
not sit proud of the text column. */
.sc-hstats::before{ inset:-16px -14px; }
}
/* core stacks .wp-block-columns below 782px, so the feature dividers must turn
horizontal at exactly that breakpoint or they end up on the wrong edge. */
/* Stacked, the divider turns horizontal — same dash rhythm, gradient direction rotated. */
@media (max-width:781px){
.sc-feat{ padding:16px 0; }
.sc-feat:first-child{ padding-top:0; }
.sc-feat:last-child{ padding-bottom:0; }
.sc-feat + .sc-feat::after{
left:0; right:0; top:0; bottom:auto; width:auto; height:1px;
background-image:repeating-linear-gradient(to right, var(--sc-line) 0 5px, transparent 5px 11px);
}
}
/* ---- About section: copy + stats left, presentation video right --------------
Mirrors the original Tilda layout. The opening quote mark is a ::before on the text
column, so no extra block sits in the editor for a manager to delete by accident. */
.sc-about-cols{ align-items:center; }
.sc-about-text{ position:relative; padding-top:44px; }
.sc-about-text::before{
content:'\201C'; position:absolute; top:0; left:0;
font-family:'Montserrat',sans-serif; font-size:64px; font-weight:700; line-height:.9;
color:var(--sc-black);
}
/* Video frame — rendered by [sc_video], see sc-site-fixes.php. Own aspect-ratio rule so
the frame is right regardless of any core/theme embed stylesheet. */
.sc-video{ position:relative; width:100%; }
.sc-video iframe{
display:block; width:100%; height:auto; aspect-ratio:16/9;
border:0; border-radius:2px; background:var(--sc-tint);
}
@media (max-width:781px){
.sc-about-cols{ gap:32px; }
.sc-about-text{ padding-top:38px; }
.sc-about-text::before{ font-size:52px; }
}
/* ---- Stats: big number → 1px underline → small grey label ---- */
.sc-stats{ margin-top:32px; }
.sc-stat{ text-align:left; }
/* The three stats must read as one row: same rule position, same label baseline.
The grid is pinned to 3 equal columns in the block markup; `white-space:nowrap` is the
guard that keeps a two-word figure ("5 YEARS") on one line, because the moment one
number wraps its rule and label drop out of line with the other two. */
.sc-stat__num{
font-family:'Montserrat',sans-serif; color:#000; font-size:28px; line-height:1.1;
font-weight:700; margin:0; padding-bottom:10px; border-bottom:1px solid #111; text-transform:uppercase;
white-space:nowrap;
}
/* Narrow viewports cannot fit three nowrap figures side by side — stack instead of
letting them overflow the gutter. */
@media (max-width:600px){
.sc-stats{ grid-template-columns:1fr !important; gap:20px !important; }
}
.sc-stat__label{ font-size:12px; line-height:1.5; color:var(--sc-grey); margin:10px 0 0; }
/* Neutralise WP block-gap so the rule sits tight above its label. Note the descendant
selector: core wraps a group's children in .wp-block-group__inner-container, so the
paragraphs are grandchildren of .sc-stat — a `>` selector here silently misses them
and leaves core's 32px block-gap under the rule. */
.sc-stat p{ margin-top:0 !important; margin-bottom:0 !important; }
.sc-stat__label{ margin-top:8px !important; }
/* ---- About media placeholder (16:10) ---- */
.sc-media{ background:#e9e9e9; aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; color:#999; font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
/* ---- Packaging ----
The photo used to be locked to aspect-ratio:1/1, so its height grew with the column
width and overshot the text block on wide screens. Instead the figure now stretches to
the column and the image is taken out of flow, so the row's height is set purely by the
text and the photo crops to match it — top and bottom line up at any width. */
.sc-pack-img{ position:relative; height:100%; margin:0; overflow:hidden; }
/* `figure.` prefix on purpose: core ships `.wp-block-image img{height:auto}` at the same
specificity as a bare `.sc-pack-img img`, and being later in the cascade it wins — the
photo then keeps its intrinsic ratio and stops short of the figure's bottom edge. */
figure.sc-pack-img img{
position:absolute; inset:0;
width:100%; height:100%; object-fit:cover; display:block;
}
/* Stacked layout: there is no text column to match, so give the photo its own ratio back
(out-of-flow it would otherwise collapse to zero height). */
@media (max-width:781px){
.sc-pack-img{ position:static; height:auto; }
figure.sc-pack-img img{ position:static; height:auto; aspect-ratio:4/3; }
}
.sc-cols2 h3, .sc-pack-col h3{ text-transform:uppercase; letter-spacing:.03em; font-weight:700; font-size:17px; margin:0 0 8px; }
/* The old `.sc-partners` block that lived here was removed 2026-08-04. It was written for an
earlier markup where `.sc-partners` WAS the logo row, and it only survives in page
revisions — no published page has used it for a long time. Worse, it collided with the
rebuilt section (which uses `.sc-partners` for the SECTION and `.sc-partners__row` for the
row) and its `height:48px` fought the new width-based sizing. The live rules are in the
"Partner / events logo strip" block further down. */
/* ---- CTA heading (normal case, NOT uppercase) ---- */
/* Black since the CTA band moved to `#F0F0F0` (2026-08-04). The `!important` predates that
move and is kept: the heading sits inside a group whose colour core sets via a
`:where()`-wrapped rule, which ties on specificity and wins on order. */
.sc-cta-head{ color:var(--sc-black) !important; font-size:32px; font-weight:700; letter-spacing:.01em; line-height:1.25; margin:0 0 24px; }
/* ============================================================================
Catalog archive (/catalog) — minimal black & white
============================================================================ */
.sc-catalog-wrap{ max-width:1200px; margin:0 auto; padding:56px 40px 80px; }
.sc-catalog-head{ margin-bottom:6px; }
.sc-catalog-head h1{
display:flex; align-items:center; gap:16px;
font-size:26px; line-height:1.2; font-weight:700; color:#000; margin:0;
text-transform:uppercase; letter-spacing:.03em;
}
.sc-catalog-head h1::before{ content:''; width:46px; height:2px; background:#000; flex-shrink:0; }
.sc-catalog-sub{ color:var(--sc-grey); font-size:14px; margin:8px 0 32px; }
.sc-catalog-grid{ display:grid; grid-template-columns:250px 1fr; gap:40px; align-items:start; }
.sc-catalog-sidebar{
position:sticky; top:96px; background:var(--sc-tint); border:1px solid var(--sc-line);
padding:24px;
}
.sc-catalog-sidebar h2{ font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:#000; margin:0 0 16px; font-weight:700; }
.sc-filter__group{ margin:0 0 16px; }
.sc-filter__group h4{
font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:#000;
margin:16px 0 8px; font-weight:700; padding-bottom:6px; border-bottom:1px solid var(--sc-line);
}
.sc-filter__group ul{ list-style:none; margin:0; padding:0; }
.sc-filter__group li{ margin:1px 0; font-size:13px; color:#222; }
.sc-filter__group li.is-active{ }
.sc-filter__group label{ cursor:pointer; display:flex; gap:8px; align-items:flex-start; line-height:1.35; padding:4px 4px; }
.sc-filter__group li.is-active label{ color:#000; font-weight:600; }
.sc-filter__group input[type=checkbox]{ accent-color:#000; margin-top:2px; min-width:15px; min-height:15px; }
.sc-filter__count{ color:var(--sc-grey); font-weight:400; }
.sc-filter input[type="checkbox"], .sc-filter input[type="radio"]{ accent-color:var(--sc-black); }
.sc-filter__group--avail{ border-top:1px solid var(--sc-line); padding-top:4px; }
.sc-filter input[type=text]{
width:100%; padding:10px 12px; border:1px solid #d9d9d9; border-radius:2px; font-size:14px; background:#fff;
}
.sc-filter__submit{
margin-top:20px; width:100%; background:#000; color:#fff; border:0; padding:12px 20px;
font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; border-radius:2px; cursor:pointer;
}
.sc-filter__submit:hover{ background:#222; }
.sc-filter__clear{ display:block; text-align:center; margin-top:10px; font-size:12px; color:var(--sc-grey); text-decoration:underline; }
.sc-filter__clear:hover{ color:#000; }
/* Show more / less toggle */
.sc-filter__group li[hidden], .sc-filter__hidden[hidden]{ display:none; }
.sc-filter__toggle{ display:inline-block; margin:4px 0 0 4px; padding:2px 0; background:none; border:0;
font-family:inherit; font-size:12px; color:var(--sc-grey); text-decoration:underline; cursor:pointer; }
.sc-filter__toggle:hover{ color:#000; }
.sc-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
/* Homepage "latest listings" widget — same cards as the catalogue, 4-up so eight items
read as two tidy rows rather than three-and-a-bit. Shortcode: [sc_latest_businesses]. */
.sc-latest{ margin:4px 0 32px; }
.sc-cards--4{ grid-template-columns:repeat(4,1fr); }
.sc-latest .sc-card__body{ padding:16px; gap:6px; }
.sc-latest .sc-card__title{ font-size:14px; }
.sc-latest .sc-card__price{ font-size:15px; }
/* Cards on the light tint (owner request 2026-08-18). Scoped to `.sc-latest`, i.e. the
HOMEPAGE widget only — the /catalog archive keeps white cards, because there they sit on
the page's own light background and a tinted card would lose its edge against it. Here the
section is white, so the tint is what separates a card from the band. */
.sc-latest .sc-card{ background:var(--sc-tint); }
/* 4 -> 2 -> 1 columns, deliberately skipping a 3-column step: eight cards divide evenly
by 4, 2 and 1, so every row stays full at every width. A 3-column step would leave a
ragged 3+3+2 last row. If the count ever changes, re-check this divides cleanly. */
@media (max-width:999px){ .sc-cards--4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .sc-cards--4{ grid-template-columns:1fr; } }
.sc-card{
display:flex; flex-direction:column; background:#fff; border:1px solid #d8d8d8;
border-radius:2px; overflow:hidden; transition:border-color .2s ease;
}
.sc-card:hover{ border-color:#bbb; }
.sc-card__thumb{ display:block; aspect-ratio:4/3; background:var(--sc-tint2); overflow:hidden; }
.sc-card__thumb img{ width:100%; height:100%; object-fit:cover; }
.sc-card__body{ padding:20px; display:flex; flex-direction:column; gap:7px; flex:1; }
.sc-card__type{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--sc-grey); font-weight:600; }
.sc-card__title{ font-size:16px; line-height:1.35; font-weight:700; margin:0; text-transform:uppercase; letter-spacing:.02em; }
.sc-card__title a{ color:#000; text-decoration:none; }
.sc-card__title a:hover{ color:var(--sc-gold); }
.sc-card__price{ color:#000; font-weight:700; font-size:16px; margin-top:auto; }
.sc-card__price--req{ color:var(--sc-grey); font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:.04em; }
.sc-card__loc{ font-size:12px; color:var(--sc-grey); }
/* "No longer available" (sold / withdrawn) status treatment — monochrome, on-brand */
.sc-card__thumb{ position:relative; }
.sc-card__badge{
position:absolute; top:12px; right:12px; z-index:2;
background:var(--sc-dark); color:#fff;
font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
padding:6px 11px; border-radius:2px; line-height:1; white-space:nowrap;
box-shadow:0 2px 10px rgba(0,0,0,.28);
}
.sc-card--sold .sc-card__thumb::after{ content:""; position:absolute; inset:0; background:rgba(255,255,255,.42); z-index:1; }
.sc-card--sold .sc-card__thumb img{ filter:grayscale(100%); opacity:.55; }
.sc-card--sold .sc-card__title a{ color:var(--sc-grey); }
.sc-card--sold .sc-card__price{ color:var(--sc-grey); text-decoration:line-through; }
/* single listing */
.sc-listing__gallery-main{ position:relative; }
.sc-listing__gallery-main--sold img{ filter:grayscale(100%); opacity:.6; }
.sc-listing__badge{ top:16px; right:16px; font-size:12px; padding:8px 14px; }
.sc-listing__status{
display:inline-block; margin:0 0 10px; padding:7px 13px;
background:var(--sc-dark); color:#fff; border-radius:2px;
font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
}
.sc-catalog-empty{
padding:48px 24px; text-align:center; color:var(--sc-grey);
border:1px dashed var(--sc-line); background:var(--sc-tint);
}
.sc-catalog-empty strong{ color:#000; }
/* pagination */
.sc-catalog-main .pagination, .sc-catalog-main .nav-links{ margin-top:32px; }
.sc-catalog-main .page-numbers{
display:inline-block; min-width:40px; text-align:center; padding:8px 12px; margin:0 4px 4px 0;
border:1px solid var(--sc-line); border-radius:2px; color:#000; text-decoration:none; font-size:13px;
}
.sc-catalog-main .page-numbers.current{ background:#000; color:#fff; border-color:#000; }
.sc-catalog-main .page-numbers:hover{ border-color:#000; }
/* ============================================================================
Single listing — minimal black & white
============================================================================ */
.sc-listing{ max-width:1200px; margin:0 auto; padding:48px 40px 80px; }
.sc-listing__top{ display:grid; grid-template-columns:1.2fr 1fr; gap:48px; align-items:start; }
.sc-listing__gallery-main{ overflow:hidden; aspect-ratio:4/3; background:var(--sc-tint2); border:1px solid var(--sc-line); }
.sc-listing__gallery-main img{ width:100%; height:100%; object-fit:cover; }
.sc-listing__thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:10px; }
.sc-listing__thumbs img{ width:100%; aspect-ratio:1/1; object-fit:cover; border:1px solid var(--sc-line); }
.sc-listing__type{ color:var(--sc-grey); text-transform:uppercase; letter-spacing:.06em; font-size:12px; font-weight:600; margin:0 0 8px; }
.sc-listing__title{ display:flex; align-items:flex-start; gap:16px; font-family:'Montserrat',sans-serif; color:#000; font-size:26px; line-height:1.2; font-weight:700; text-transform:uppercase; letter-spacing:.02em; margin:0 0 14px; }
.sc-listing__title::before{ content:''; width:46px; height:2px; background:#000; flex-shrink:0; margin-top:13px; }
.sc-listing__price{ color:#000; font-size:24px; font-weight:700; margin:0 0 8px; }
.sc-listing__price--req{ color:var(--sc-grey); font-size:15px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.sc-listing__meta{ color:var(--sc-grey); font-size:14px; margin:0 0 24px; }
.sc-listing__cta{ margin:8px 0 24px; }
.sc-listing__body{ margin-top:48px; }
.sc-listing__body h2{ font-size:20px; text-transform:uppercase; letter-spacing:.03em; margin:0 0 16px; }
.sc-specs{ margin-top:48px; }
.sc-specs h2{ font-size:20px; text-transform:uppercase; letter-spacing:.03em; margin:0 0 16px; }
.sc-specs__grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 48px; }
.sc-spec{ display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--sc-line); }
.sc-spec__k{ color:var(--sc-grey); font-size:13px; }
.sc-spec__v{ color:#000; font-size:13px; font-weight:600; text-align:right; }
.sc-specs__group-title{ grid-column:1/-1; color:#000; text-transform:uppercase; letter-spacing:.05em; font-size:12px; font-weight:700; margin:20px 0 4px; }
/* ============================================================================
Responsive
============================================================================ */
@media (max-width:1024px){
.sc-cards{ grid-template-columns:repeat(2,1fr); }
.sc-catalog-grid{ grid-template-columns:210px 1fr; gap:32px; }
}
@media (max-width:781px){
.sc-section{ padding:48px 0; }
.sc-section > .wp-block-group__inner-container,
.sc-hero > .wp-block-cover__inner-container,
.wp-block-cover.sc-hero > .wp-block-cover__inner-container,
.sc-section-inner{ padding-left:20px; padding-right:20px; }
/* Keep the bars on the same gutter as the content at this breakpoint too. */
#masthead .site-container,
#colophon .site-container{ padding-left:20px; padding-right:20px; }
.sc-catalog-wrap{ padding:40px 20px 64px; }
.sc-catalog-grid{ grid-template-columns:1fr; gap:24px; }
.sc-catalog-sidebar{ position:static; max-height:62vh; overflow-y:auto; }
.sc-filter__group label{ padding:11px 4px; }
.sc-cards{ grid-template-columns:1fr; }
.sc-listing{ padding:40px 20px 64px; }
.sc-listing__top{ grid-template-columns:1fr; gap:24px; }
.sc-specs__grid{ grid-template-columns:1fr; }
.sc-listing__title{ font-size:24px; }
.sc-catalog-head h1{ font-size:24px; }
}
/* ============================================================================
Blog — archive (/blog/) + single post (original monochrome tokens)
============================================================================ */
.sc-blog-wrap{ max-width:1200px; margin:0 auto; padding:56px 40px 80px; }
.sc-blog-head{ margin-bottom:32px; }
.sc-blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.sc-blog-card{ display:flex; flex-direction:column; text-decoration:none; }
.sc-blog-card__thumb{ aspect-ratio:4/3; background:var(--sc-tint2); overflow:hidden; border:1px solid var(--sc-line); }
.sc-blog-card__thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:opacity .2s ease; }
.sc-blog-card:hover .sc-blog-card__thumb img{ opacity:.85; }
.sc-blog-card__date{ font-size:12px; color:var(--sc-grey); margin:14px 0 6px; text-transform:uppercase; letter-spacing:.05em; }
.sc-blog-card__title{ font-size:16px; font-weight:700; line-height:1.35; color:#000; text-transform:uppercase; letter-spacing:.02em; margin:0 0 8px; }
.sc-blog-card:hover .sc-blog-card__title{ color:var(--sc-gold); }
.sc-blog-card__excerpt{ font-size:13px; line-height:1.6; color:var(--sc-grey); margin:0; }
.sc-blog-pagination{ margin-top:48px; }
.sc-blog-pagination .page-numbers{ display:inline-block; min-width:40px; text-align:center; padding:8px 12px; margin:0 4px 4px 0; border:1px solid var(--sc-line); color:#000; text-decoration:none; font-size:13px; }
.sc-blog-pagination .page-numbers.current{ background:#000; color:#fff; border-color:#000; }
.sc-blog-pagination .page-numbers:hover{ border-color:#000; }
/* Single post */
.sc-post{ max-width:1200px; margin:0 auto; padding:48px 40px 80px; }
.sc-post__hero{ aspect-ratio:16/7; background:var(--sc-tint2); overflow:hidden; margin-bottom:36px; }
.sc-post__hero img{ width:100%; height:100%; object-fit:cover; display:block; }
.sc-post__col{ max-width:720px; margin:0 auto; }
.sc-post__date{ font-size:12px; color:var(--sc-grey); text-transform:uppercase; letter-spacing:.06em; margin:0 0 12px; }
.sc-post__title{ display:flex; align-items:flex-start; gap:16px; font-family:'Montserrat',sans-serif; color:#000; font-size:32px; line-height:1.15; font-weight:700; text-transform:uppercase; letter-spacing:.02em; margin:0 0 28px; }
.sc-post__title::before{ content:''; width:46px; height:2px; background:#000; flex-shrink:0; margin-top:16px; }
.sc-post__body p{ font-size:16px; line-height:1.75; color:#222; margin:0 0 20px; }
.sc-post__body h2,.sc-post__body h3{ text-transform:uppercase; letter-spacing:.02em; color:#000; margin:32px 0 12px; font-size:20px; }
.sc-post__body ul,.sc-post__body ol{ margin:0 0 20px 22px; }
.sc-post__body li{ font-size:16px; line-height:1.75; color:#222; margin:0 0 8px; }
.sc-post__body a{ color:#000; text-decoration:underline; }
.sc-post__body a:hover{ color:var(--sc-gold); }
.sc-post__back{ display:inline-block; margin-top:40px; background:#000; color:#fff; padding:13px 26px; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; text-decoration:none; border-radius:2px; }
.sc-post__back:hover{ background:var(--sc-gold); color:#fff; }
@media (max-width:1024px){ .sc-blog-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:781px){
.sc-blog-wrap{ padding:40px 20px 64px; }
.sc-blog-grid{ grid-template-columns:1fr; }
.sc-post{ padding:32px 20px 64px; }
.sc-post__title{ font-size:24px; }
.sc-post__title::before{ margin-top:12px; }
}
/* ---- "Request a call back" form (Fluent Forms) on the light CTA band --------
Owner decision 2026-08-04: the band moved from black to `#F0F0F0`, so the section now
carries `sc-bg-beige sc-callback` instead of `sc-bg-navy sc-on-navy`. The form styling is
keyed on `.sc-callback`, not on the background class, so it travels with the component if
the band is ever recoloured again. Four sections use it: homepage and Contact, EN + UK.
The wrapper needs TWO classes to win. The section is a constrained group with
contentSize 820px, and core emits
`.wp-container-…-45b604fc > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width:820px}`
— `:where()` contributes nothing, so that lands at the same (0,1,0) as a bare
`.sc-callback-wrap` and wins on source order. That is why the fields rendered 820px wide
while this file had asked for 520 all along. */
.sc-callback .sc-callback-wrap{ max-width:460px; margin:24px auto 0; text-align:left; }
.sc-callback .fluentform .ff-el-group{ margin-bottom:16px; }
.sc-callback .fluentform .ff-el-input--label label{ color:var(--sc-black); font-weight:600; font-size:14px; margin-bottom:6px; }
.sc-callback .fluentform input{
width:100%; min-height:48px; padding:12px 14px; border:1.5px solid var(--sc-line);
border-radius:2px; background:#fff; color:var(--sc-black); font-family:'Montserrat',sans-serif; font-size:15px;
}
/* #767676 is the darkest grey that still reads as placeholder text and clears 4.5:1 on white. */
.sc-callback .fluentform input::placeholder{ color:#767676; }
.sc-callback .fluentform input:focus{ border-color:var(--sc-gold); outline:none; background:#fff; }
/* The callback submit is a CTA → gold, matching .sc-btn-primary, and it now darkens on hover
like every other primary button rather than inverting to white — there is no black band
left here for an inversion to read against. */
.sc-callback .fluentform .ff-btn-submit{
width:100%; min-height:48px; margin-top:6px;
background:var(--sc-gold) !important; color:#fff !important; border:1.5px solid var(--sc-gold) !important; border-radius:2px;
font-family:'Montserrat',sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.04em; font-size:13px;
cursor:pointer; transition:background .15s,color .15s,border-color .15s;
}
.sc-callback .fluentform .ff-btn-submit:hover{ background:var(--sc-gold-dark) !important; border-color:var(--sc-gold-dark) !important; color:#fff !important; }
.sc-callback .fluentform .ff-el-is-error input{ border-color:#b3261e; }
.sc-callback .fluentform .text-danger,
.sc-callback .fluentform .error{ color:#b3261e; font-size:12px; }
.sc-callback .fluentform .ff-message-success{ color:var(--sc-black); text-align:center; font-size:16px; }
/* ---- Catalog price range slider -------------------------------------------
Two stacked on one track. The inputs themselves are
`pointer-events:none` so the lower one does not swallow clicks meant for the upper;
only the thumbs take pointer events, which is what makes both handles grabbable. */
.sc-filter__group--price .sc-range{ position:relative; height:26px; margin:14px 0 10px; }
.sc-range__track{
position:absolute; left:0; right:0; top:11px; height:3px;
background:var(--sc-line); border-radius:2px;
}
.sc-range__fill{ position:absolute; top:0; bottom:0; background:var(--sc-gold); border-radius:2px; }
/* `[type="range"]` in the selector is load-bearing. Kadence styles the bare
`input[type="range"]` with a 1px border, a white background and padding — (0,1,1), which
beats a plain `.sc-range__h` — so the two handles rendered as opaque bordered boxes laid
over the track and hid it completely. */
.sc-range__h[type="range"]{
position:absolute; left:0; top:0; width:100%; height:26px; margin:0; padding:0;
border:0; -webkit-appearance:none; appearance:none;
background:none; background-color:transparent; pointer-events:none;
}
.sc-range__h[type="range"]:focus{ outline:none; }
.sc-range__h::-webkit-slider-thumb{
-webkit-appearance:none; pointer-events:auto; cursor:grab;
width:18px; height:18px; border-radius:50%;
background:#fff; border:2px solid var(--sc-black); box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.sc-range__h::-moz-range-thumb{
pointer-events:auto; cursor:grab;
width:14px; height:14px; border-radius:50%;
background:#fff; border:2px solid var(--sc-black); box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.sc-range__h:focus-visible::-webkit-slider-thumb{ border-color:var(--sc-gold); box-shadow:0 0 0 3px rgba(166,130,46,.25); }
.sc-range__h:focus-visible::-moz-range-thumb{ border-color:var(--sc-gold); box-shadow:0 0 0 3px rgba(166,130,46,.25); }
/* The two figures sit STACKED, not side by side as in the reference mock. The sidebar is
250px wide (200px of content) and the catalogue's top price is "12 800 000" — ten
characters, which Montserrat renders at ~100px. Two of those plus a dash cannot share
200px: measured side by side, the max field needed 100px in an 88px box and clipped its
own value. Stacking also survives a longer figure entering the catalogue later, which the
inline layout would not. The `From` / `To` labels replace the dash as the range cue. */
.sc-range__io{ display:grid; gap:8px; }
.sc-range__field{ display:flex; align-items:center; gap:8px; }
.sc-range__lbl{
flex:0 0 30px; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--sc-grey);
}
.sc-range__in{
flex:1 1 auto; width:100%; min-width:0; padding:7px 9px;
border:1px solid var(--sc-line); border-radius:2px;
background:#fff; font-family:'Montserrat',sans-serif; font-size:12px; color:var(--sc-black);
}
.sc-range__in:focus{ border-color:var(--sc-gold); outline:none; }
.sc-range__note{ margin:10px 0 0; font-size:11px; line-height:1.45; color:var(--sc-grey); }
/* ---- Partner / events logo strip ------------------------------------------
Six SVGs carried over from the original Tilda homepage.
Every one of them is a 385x385 SQUARE canvas with the artwork sitting in a band across
the middle and transparent padding above and below — Oxford's plate, for instance, runs
y=139..245 of 385, so only ~28% of the box is ink. Sizing by height therefore does NOT
work: `max-height:56px` rendered a 16px-tall logo inside a 56px square. They are sized by
WIDTH instead, as one uniform box, which is also what makes them align optically — the
built-in padding is doing the alignment, exactly as it did on the original site.
`grayscale` because the files are not actually monochrome (Oxford ships `fill="#002147"`)
and the design language calls for a monochrome partner row. */
.sc-partners{ padding-top:64px; padding-bottom:56px; }
.sc-partners__row{ align-items:center; justify-items:center; margin-top:20px !important; filter:grayscale(1); }
.sc-partner{ margin:0 !important; }
/* Two classes on purpose: core ships `.wp-block-image img{max-width:100%}` inline, which
ties with a bare `.sc-partner img` and wins on source order. Without the extra class the
cap is ignored and each logo simply fills its grid column — harmless at six columns
(180px), but at the three-column tablet layout the columns are ~373px and the logos
would render nearly twice their intended size. */
.sc-partners .sc-partner img{ width:100%; max-width:180px; height:auto; }
/* Logos that carry no transparent padding of their own (the Tilda SVGs are 385px squares
with the artwork in a middle band; a tightly-cropped file is all ink) render visually
much larger at the same width. Cap those narrower so the row reads as one weight. */
.sc-partners .sc-partner--tight img{ max-width:132px; }
@media (max-width:1024px){
.sc-partners__row{ grid-template-columns:repeat(3,1fr) !important; }
}
@media (max-width:600px){
.sc-partners__row{ grid-template-columns:repeat(2,1fr) !important; }
.sc-partners .sc-partner img{ max-width:150px; }
.sc-partners .sc-partner--tight img{ max-width:110px; }
}
/* ---- Home "Last news" — core Latest Posts block, minimal mono cards ---- */
/* Four posts across. The grid is pinned here rather than left to core's `columns-N`
class, so the block's column attribute alone would not change anything — keep the two
in step. 4 -> 2 -> 1 skips a 3-column step on purpose: four cards divide evenly by all
three, so no row is ever left ragged. */
.sc-home-latest{ margin:24px 0 22px !important; padding:0; list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
/* News items are CARDS on the light tint (owner request 2026-08-18), matching the listing
cards in the Catalogue section above — both sections sit on white, so a #F0F0F0 fill is
what makes each item read as a discrete object.
The core/latest-posts block gives no card wrapper of its own: an item is a bare
whose
children are the image, the title and the date, side by side in the flow. So the
itself becomes the card, and the horizontal padding has to be applied to each text child
individually — putting it on the
would inset the photo too and turn the card into a
framed picture instead of a card with a full-bleed image.
Border colour is `#d8d8d8` to match `.sc-card` exactly rather than `--sc-line` (#DCDCDC):
the two grids sit in adjacent sections and are read together, so they should not disagree.
The image loses its own 1px border here — the card now supplies the frame, and keeping
both drew a doubled line along the top edge. */
.sc-home-latest li{
margin:0;
display:flex;
flex-direction:column;
background:var(--sc-tint);
border:1px solid #d8d8d8;
border-radius:2px;
overflow:hidden;
padding-bottom:16px;
transition:border-color .2s ease;
}
.sc-home-latest li:hover{ border-color:#bbb; }
.sc-home-latest .wp-block-latest-posts__featured-image{ margin:0; }
.sc-home-latest .wp-block-latest-posts__featured-image img{ width:100%; aspect-ratio:4/3; object-fit:cover; border:0; display:block; }
/* 14px (owner request 2026-08-18), matching `.sc-latest .sc-card__title` exactly — the
listing grid and the news grid are the same width in adjacent sections, so their titles
should set at the same size.
THE FOUR-CLASS SELECTOR IS LOAD-BEARING. Kadence ships
`.wp-block-latest-posts.wp-block-latest-posts__list.is-grid li > a{font-size:1.3em}` in
content.min.css at (0,3,2), and content.min.css is enqueued AFTER this file — so the
`font-size` on the two-class rule below never applied at all and the titles rendered at
1.3 x 17px = 22.1px, not the 16px this file claimed. A tie would still lose on source
order, so the selector needs four classes, (0,4,2), to win outright. Everything else stays
on the plain two-class rule, which nothing competes with. */
.sc-home-latest .wp-block-latest-posts__post-title{ display:block; padding:0 16px; margin:14px 0 6px; font-family:'Montserrat',sans-serif; font-weight:700; line-height:1.35; color:#000; text-decoration:none; }
.sc-home-latest.wp-block-latest-posts.is-grid li > a.wp-block-latest-posts__post-title{ font-size:14px; }
.sc-home-latest a.wp-block-latest-posts__post-title:hover{ color:var(--sc-gold); }
.sc-home-latest .wp-block-latest-posts__post-date{ display:block; padding:0 16px; margin-top:auto; font-size:12px; color:var(--sc-grey); text-transform:uppercase; letter-spacing:.05em; }
.sc-home-latest .wp-block-latest-posts__post-excerpt{ padding:0 16px; font-size:14px; color:var(--sc-grey); line-height:1.6; margin:8px 0 0; }
@media (max-width:999px){ .sc-home-latest{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .sc-home-latest{ grid-template-columns:1fr; } }
/* ---- Interior pages: values list + contact info ---- */
.sc-values{ list-style:none; margin:8px 0 0; padding:0; max-width:720px; }
.sc-values li{ position:relative; padding:0 0 16px 34px; font-size:16px; line-height:1.6; color:#222; }
.sc-values li::before{ content:''; position:absolute; left:0; top:11px; width:20px; height:2px; background:#000; }
.sc-contact-info{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px 40px; margin-top:30px; max-width:560px; }
.sc-contact-info p{ margin:0; font-size:15px; line-height:1.7; color:#222; }
.sc-contact-info strong{ display:inline-block; margin-bottom:2px; text-transform:uppercase; letter-spacing:.05em; font-size:12px; color:var(--sc-grey); font-weight:600; }
.sc-contact-info a{ color:#000; text-decoration:none; font-weight:600; }
.sc-contact-info a:hover{ color:var(--sc-gold); }
@media (max-width:600px){ .sc-contact-info{ grid-template-columns:1fr; } }
/* ---- FAQ (service pages) ---- */
.sc-faq{ max-width:760px; margin-top:8px; }
.sc-faq__item{ padding:22px 0; border-bottom:1px solid var(--sc-line); }
.sc-faq__item:first-child{ border-top:1px solid var(--sc-line); }
.sc-faq__q{ font-family:'Montserrat',sans-serif; font-size:16px; font-weight:700; color:#000; margin:0 0 8px; }
.sc-faq__a{ font-size:15px; line-height:1.7; color:var(--sc-grey); margin:0; }
/* ---- FAQ accordion (homepage, 2026-08-18) ------------------------------------
Built on core/details, NOT on the `.sc-faq` markup above. That older block is a
core/html box: it renders a permanently-open list, and a manager cannot edit it
without editing raw HTML (AGENTS.md follow-up 13). core/details gives the same
visual language plus a real disclosure widget with zero JavaScript, keyboard and
screen-reader behaviour handled by the browser, and normal block editing.
Deliberately no `--` in these class names. A `--` inside a block comment's JSON has
to be escaped as --, and that escape is exactly what a wp_update_post()
without wp_slash() destroys — so new classes simply avoid the sequence.
Typography intentionally matches `.sc-faq__q` / `.sc-faq__a` so the homepage and the
service pages read as one component even though the markup differs. */
/* TWO classes, not one. The section is a constrained group, so core emits
`.wp-container-… > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width:1200px}`
INLINE in the page. `:where()` contributes no specificity, so that rule lands at (0,1,0) —
a dead tie with a bare `.sc-faq-acc`, and inline CSS comes after this file, so core won and
the accordion rendered 1120px wide instead of 760. Same trap as `.sc-callback-wrap`. */
.sc-faq-sec .sc-faq-acc{ max-width:760px; margin-top:8px; }
.sc-faq-sec .wp-block-details{
margin:0;
border-bottom:1px solid var(--sc-line);
}
.sc-faq-sec .wp-block-details:first-of-type{ border-top:1px solid var(--sc-line); }
.sc-faq-sec .wp-block-details > summary{
position:relative;
cursor:pointer;
list-style:none; /* Firefox */
padding:22px 46px 22px 0;
font-family:'Montserrat',sans-serif;
font-size:16px;
font-weight:700;
line-height:1.45;
color:var(--sc-black);
transition:color .18s ease;
}
.sc-faq-sec .wp-block-details > summary::-webkit-details-marker{ display:none; }
.sc-faq-sec .wp-block-details > summary::marker{ content:""; }
.sc-faq-sec .wp-block-details > summary:hover{ color:var(--sc-gold); }
.sc-faq-sec .wp-block-details > summary:focus-visible{
outline:2px solid var(--sc-gold);
outline-offset:2px;
}
/* The +/- indicator is two bars: the vertical one rotates flat on open, leaving a minus.
Both carry translateY(-50%), so the rotation has to be composed with it rather than
replacing it — a bare `rotate()` on the open state would drop the centring. */
.sc-faq-sec .wp-block-details > summary::before,
.sc-faq-sec .wp-block-details > summary::after{
content:"";
position:absolute;
right:8px;
top:50%;
width:14px;
height:2px;
background:currentColor;
transition:transform .22s ease;
}
.sc-faq-sec .wp-block-details > summary::before{ transform:translateY(-50%); }
.sc-faq-sec .wp-block-details > summary::after{ transform:translateY(-50%) rotate(90deg); }
.sc-faq-sec .wp-block-details[open] > summary::after{ transform:translateY(-50%) rotate(0deg); }
.sc-faq-sec .wp-block-details[open] > summary{ color:var(--sc-gold); }
/* Answer. `> :not(summary)` rather than a paragraph selector so an editor adding a list
or a second paragraph inside the item still gets the right measure and colour. */
.sc-faq-sec .wp-block-details > :not(summary){
margin:0 0 22px;
padding-right:46px;
font-size:15px;
line-height:1.7;
color:var(--sc-grey);
}
.sc-faq-sec .wp-block-details > :not(summary) a{ color:var(--sc-black); font-weight:600; }
.sc-faq-sec .wp-block-details > :not(summary) a:hover{ color:var(--sc-gold); }
/* Height animation only where BOTH features exist. Guarded together on purpose: with
::details-content supported but interpolate-size missing, `block-size:auto` would not
be an animatable value and the panel could sit at 0 with overflow hidden — i.e. an
invisible answer. Without the guard this is a content bug, not a missing nicety. */
@supports (interpolate-size: allow-keywords) and selector(::details-content){
.sc-faq-sec{ interpolate-size:allow-keywords; }
.sc-faq-sec .wp-block-details::details-content{
block-size:0;
overflow:hidden;
transition:block-size .26s ease, content-visibility .26s;
transition-behavior:allow-discrete;
}
.sc-faq-sec .wp-block-details[open]::details-content{ block-size:auto; }
}
@media (prefers-reduced-motion:reduce){
.sc-faq-sec .wp-block-details > summary::before,
.sc-faq-sec .wp-block-details > summary::after,
.sc-faq-sec .wp-block-details::details-content{ transition:none; }
}
@media (max-width:600px){
.sc-faq-sec .wp-block-details > summary{ font-size:15px; padding-right:38px; }
.sc-faq-sec .wp-block-details > :not(summary){ padding-right:0; }
}
/* ---- Primary nav: weight and item spacing (owner request 2026-08-10) ---------
Another explicit exception to the header freeze in rule 7 — typography only, no
restructuring.
Kadence generates `.main-navigation .primary-menu-container > ul > li.menu-item > a`
at (0,3,3) with `padding: calc(0.6em)` and a sibling rule setting `font-weight:400`.
These selectors are led by `#masthead` so an id outranks all of that without needing
`!important`, matching how `.sc-lang-dd__toggle` is handled below.
THE SPACING INCREASE IS GATED TO >=1100px, and that is not a style choice. Measured at a
1025px viewport in Ukrainian — the widest menu, just above the point where Kadence swaps
to the burger — the header row has 945px and the three columns already occupy 944. One
pixel. Any extra item padding there pushes the menu onto a second row inside a bar that
stays 70px tall, i.e. it overlaps. The language switcher's own gaps are gated at the same
breakpoint for the same reason. Re-measure this before touching either number. */
#masthead .main-navigation .primary-menu-container > ul li.menu-item > a{ font-weight:500; }
@media (min-width:1100px){
#masthead .main-navigation .primary-menu-container > ul > li.menu-item > a{
padding-left:11px; padding-right:11px;
}
}
/* ---- Language switcher (EN / UA dropdown) in the header ----------------------
Colours are inherited from the header so the toggle sits correctly on both the
light desktop bar and the dark mobile drawer; the panel itself is always the
monochrome white card. Gold is used only for hover/current — per gold discipline. */
.sc-lang-switch{ display:flex; align-items:center; }
.sc-lang-dd{ position:relative; font-family:'Montserrat',sans-serif; }
/* Toggle: current language code + caret.
Box metrics deliberately MIRROR a primary-nav link (12px / line-height 1.3 / 7.2px
vertical padding = 0.6em) so the toggle's text sits on exactly the same optical line
as the menu items and the header button. Do not change one without the other. */
.sc-lang-dd__toggle{
display:inline-flex; align-items:center; gap:6px;
margin:0; padding:7.2px 0; border:0; border-radius:0; box-shadow:none;
background:none; cursor:pointer; -webkit-appearance:none; appearance:none;
font:inherit; font-family:'Montserrat',sans-serif; font-weight:600; font-size:12px;
line-height:1.3; letter-spacing:.06em; text-transform:uppercase;
color:inherit; transition:color .15s ease;
}
.sc-lang-dd__toggle:focus-visible{ outline:1px solid var(--sc-gold); outline-offset:3px; }
/* Hover/focus/active must change ONLY the text colour — never the background.
Kadence styles the bare