:root {
  --color-bg: #F6F2EA; --color-surface: #ECE6DA; --color-ink: #1E1B16; --color-muted: #665F55; --color-line: #DCD4C6;
  --color-primary: #1E1B16; --color-on-primary: #FFFFFF; --color-accent: #B66C31; --color-on-accent: #111111;
  --font-heading: "Newsreader", Georgia, serif; --font-body: "Inter", system-ui, sans-serif;
  --heading-weight: 500; --heading-tracking: -0.03em; --radius-sm: 3px; --radius-lg: 4px;
  --heading-transform: none;
  --color-tone: #E3A26B;
}

h2, h3 { hyphens: manual; }
/* Shared structure for this batch: header behaviour, motion, accordion, feature list base */
a { text-decoration-thickness: 1px; }
.site-header { position: sticky; top: 0; z-index: 50; }
.site-header .container { display: flex; align-items: center; gap: 2rem; min-height: 4.75rem; flex-wrap: nowrap; }
.logo { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; font: var(--heading-weight) var(--fs-lg)/1.1 var(--font-heading); letter-spacing: var(--heading-tracking); }
.site-header nav { flex: none; }
.nav-list { display: flex; gap: 1.6rem; }
.nav-list a { text-decoration: none; font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; }
.site-header .tel { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; font-size: var(--fs-sm); text-decoration: none; white-space: nowrap; }
.site-header .tel svg { width: 1em; height: 1em; }
.site-header .btn { flex: none; padding: .8em 1.25em; font-size: var(--fs-sm); white-space: nowrap; text-decoration: none; }
.nav-toggle { margin-left: auto; flex: none; border: 0; padding: .7em 1.1em; font: 700 var(--fs-sm) var(--font-body); cursor: pointer; border-radius: var(--radius-sm); }
@media (max-width: 64rem) { .site-header .tel { display: none; } }
@media (max-width: 56rem) {
  .site-header .btn { display: none; }
  .nav-list.is-open { position: absolute; inset: 100% 0 auto; flex-direction: column; gap: 0; padding: 0 1.25rem 1rem; }
  .nav-list a { display: block; padding: 1rem 0; font-size: var(--fs-lg); }
}
.btn { text-decoration: none; }
.site-footer a { text-decoration: none; } .site-footer a:hover { text-decoration: underline; text-underline-offset: .2em; }
.page-hero { background: var(--color-surface); }
.rise { opacity: 0; transform: translateY(14px); animation: rise .8s cubic-bezier(.2,.7,.2,1) forwards; }
.rise.d1 { animation-delay: .08s; } .rise.d2 { animation-delay: .18s; } .rise.d3 { animation-delay: .3s; } .rise.d4 { animation-delay: .42s; }
@keyframes rise { to { opacity: 1; transform: none; } }
.settle img { transform: scale(1.04); animation: settle 1.4s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes settle { to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .rise { animation: none; opacity: 1; transform: none; } .settle img { animation: none; transform: none; } }
.feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.feat { display: flex; gap: 1rem; }
.feat__ico { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; }
.feat__ico svg { width: 1.3rem; height: 1.3rem; }
.feat__txt b { display: block; } .feat__txt span:not([data-edit]) { font-size: var(--fs-sm); color: var(--color-muted); }
.feats:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.feats:has(> :nth-child(4):last-child) .feat { flex-direction: column; }
.feats-note { margin-top: 1.5rem; font-size: var(--fs-sm); color: var(--color-muted); }
@media (max-width: 56rem) { .feats, .feats:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .feats, .feats:has(> :nth-child(4):last-child) { grid-template-columns: minmax(0, 1fr); } }
.stars { letter-spacing: .12em; }
.faq summary { font-weight: 600; }
.review { box-shadow: 0 0 0 1px var(--color-line); border-radius: var(--radius-lg); padding: 1.75rem; background: var(--color-bg); }
.step::before { background: var(--color-primary); color: var(--color-on-primary); }
.cta { background: var(--color-ink); color: #FFFFFF; } .cta h2 { color: #FFFFFF; } .cta p { color: rgb(255 255 255 / .75); }
.cta .btn--ghost { color: #FFFFFF; border-color: rgb(255 255 255 / .4); }
.contact-card a { text-decoration: underline; text-underline-offset: .2em; }
.site-header { background: var(--color-bg); color: var(--color-ink); }
.nav-list a { color: var(--color-muted); } .nav-list a:hover, .nav-list a[aria-current="page"] { color: var(--color-ink); }
.nav-toggle { background: var(--color-ink); color: #FFFFFF; }
@media (max-width: 56rem) { .nav-list.is-open { background: var(--color-bg); border-bottom: 1px solid var(--color-line); } .nav-list a { color: var(--color-ink); border-bottom: 1px solid var(--color-line); } }

/* TEMPLATE: OUTFLOW. Inspirations (structure only): tc-20-02, tc-21-03, tc-22-10.
   Signature: an editorial newspaper feel, with a large serif headline, a full-width photo strip and a ruled fact line under it. */
.label { display: block; font: 600 .74rem/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: color-mix(in srgb, var(--color-accent) 30%, currentColor); }
.site-header .container { border-bottom: 1px solid var(--color-ink); }
.logo { font-size: clamp(1.3rem, 1.05rem + .8vw, 1.7rem); }
.site-header .btn--accent { background: var(--color-ink); color: #FFFFFF; }
.t-outflow h2 { font-size: clamp(2.2rem, 1.4rem + 3.2vw, 4rem); line-height: 1.02; } .t-outflow .label + h2 { margin-top: 1rem; }
.of-hd { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.25rem); max-width: 44rem; }
.of-link { font-weight: 600; text-decoration: underline; text-underline-offset: .3em; text-decoration-color: var(--color-accent); }

.of-hero { padding-block: clamp(2.5rem, 2rem + 3vw, 5rem) clamp(2.5rem, 2rem + 2vw, 4rem); }
.of-hero__g { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: clamp(1.5rem, 1rem + 4vw, 5rem); align-items: end; }
.of-hero h1 { font-size: clamp(3rem, 1.4rem + 6.6vw, 8rem); line-height: 1.02; letter-spacing: -0.045em; }
.of-hero__side p { margin-top: 1rem; color: var(--color-muted); } .of-hero__side .btn-row { margin-top: 1.5rem; align-items: center; gap: 1.25rem; }
.of-hero__ph { margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); height: clamp(16rem, 10rem + 22vw, 34rem); overflow: hidden; background: var(--color-line); } .of-hero__ph img { width: 100%; height: 100%; object-fit: cover; }
.of-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--color-ink); }
.of-facts li { display: grid; gap: .2rem; padding: 1.1rem 1.25rem 1.1rem 0; font-size: var(--fs-sm); color: var(--color-muted); } .of-facts li + li { padding-left: 1.25rem; border-left: 1px solid var(--color-line); } .of-facts b { color: var(--color-ink); font-size: var(--fs-base); }
@media (max-width: 56rem) { .of-hero__g { grid-template-columns: minmax(0, 1fr); } .of-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .of-facts li:nth-child(3) { padding-left: 0; border-left: 0; } }
@media (max-width: 30rem) { .of-hero h1 { font-size: clamp(2.6rem, 1.4rem + 6vw, 3.2rem); } .of-facts { grid-template-columns: minmax(0, 1fr); } .of-facts li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--color-line); } }

.of-about__g { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(2rem, 1rem + 5vw, 6rem); align-items: start; }
.of-drop { max-width: none; font: 400 clamp(1.7rem, 1.1rem + 2.4vw, 3rem)/1.2 var(--font-heading); letter-spacing: -0.02em; } .of-drop .label { margin-bottom: 1.5rem; }
.of-about__side .media { aspect-ratio: 4 / 5; } .of-cap { margin-top: .75rem; font-size: var(--fs-sm); color: var(--color-muted); font-style: italic; }
@media (max-width: 56rem) { .of-about__g { grid-template-columns: minmax(0, 1fr); } .of-about__side .media { aspect-ratio: 16 / 10; } }

.of-svc { background: var(--color-ink); color: #FFFFFF; } .of-svc h2 { color: #FFFFFF; } .of-svc .label { color: var(--color-tone); }
.of-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 1.5rem + 2vw, 3rem) var(--gap); }
.of-cols a { display: grid; gap: .5rem; padding-top: 1rem; border-top: 1px solid rgb(255 255 255 / .25); text-decoration: none; }
.of-cols .media { aspect-ratio: 3 / 2; margin-bottom: .75rem; background: rgb(255 255 255 / .08); } .of-cols .media img { filter: grayscale(.25); transition: filter .4s; } .of-cols a:hover .media img { filter: none; }
.of-cols__n { font: italic 400 var(--fs-sm)/1 var(--font-heading); color: var(--color-tone); } .of-cols b { font: 500 clamp(1.5rem, 1.2rem + 1vw, 2.1rem)/1.1 var(--font-heading); letter-spacing: -0.025em; } .of-cols__s { font-size: var(--fs-sm); color: rgb(255 255 255 / .68); }
.of-cols a:hover b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; } .of-svc .btn--ghost { color: #FFFFFF; border-color: rgb(255 255 255 / .4); }
@media (max-width: 56rem) { .of-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 40rem) { .of-cols { grid-template-columns: minmax(0, 1fr); } }

.of-steps__g { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 1rem + 5vw, 6rem); align-items: start; }
.of-steps__l li { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 1rem; padding-block: 1.6rem; border-top: 1px solid var(--color-ink); }
.of-steps__l li > span:not([data-edit]) { font: 400 var(--fs-4xl)/.9 var(--font-heading); color: var(--color-accent); } .of-steps__l h3 { font-weight: 500; } .of-steps__l p { margin-top: .35rem; color: var(--color-muted); }
@media (max-width: 56rem) { .of-steps__g { grid-template-columns: minmax(0, 1fr); } }

.of-rv { background: var(--color-surface); text-align: center; } .of-rv__in { max-width: 56rem; }
.of-rv blockquote { margin-top: 1.5rem; font: 400 clamp(1.9rem, 1.2rem + 2.8vw, 3.6rem)/1.15 var(--font-heading); letter-spacing: -0.025em; } .of-rv__who { margin: 1.5rem auto 0; color: var(--color-muted); } .of-rv .stars { color: var(--color-accent); }

.of-areas__g { display: grid; grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); gap: clamp(2rem, 1rem + 5vw, 6rem); align-items: start; }
.of-areas__l { max-width: none; font: 400 clamp(1.6rem, 1.1rem + 2vw, 2.8rem)/1.35 var(--font-heading); letter-spacing: -0.02em; }
.of-areas__l span:not([data-edit]):not(:last-child)::after { content: " / "; color: var(--color-accent); }
@media (max-width: 56rem) { .of-areas__g { grid-template-columns: minmax(0, 1fr); } }

.of-faq { border-top: 1px solid var(--color-ink); }
.of-faq__g { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 1rem + 5vw, 6rem); align-items: start; } .of-faq .faq { max-width: none; border-top: 1px solid var(--color-line); } .of-faq summary { font-family: var(--font-heading); font-weight: 500; font-size: var(--fs-xl); }
@media (max-width: 56rem) { .of-faq__g { grid-template-columns: minmax(0, 1fr); } }

.of-cta { background: var(--color-surface); padding-block: clamp(4rem, 3rem + 5vw, 8rem); text-align: center; }
.of-cta__in { display: grid; justify-items: center; gap: 1rem; } .of-cta h2 { font-size: clamp(2.8rem, 1.5rem + 5.4vw, 6.4rem); line-height: 1.02; max-width: 15ch; } .of-cta p { color: var(--color-muted); font-size: var(--fs-lg); }
.of-cta__tel { margin-top: .5rem; font: 400 clamp(2rem, 1.4rem + 2.6vw, 3.4rem)/1 var(--font-heading); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: .15em; }

.of-ft { background: var(--color-ink); color: rgb(255 255 255 / .68); padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 1.5rem; font-size: var(--fs-sm); }
.of-ft__name { display: block; color: #FFFFFF; font: 500 clamp(2.4rem, 1.4rem + 4vw, 5rem)/1 var(--font-heading); letter-spacing: -0.04em; white-space: normal; }
.of-ft__g { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 1fr); gap: 2rem; margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid rgb(255 255 255 / .18); } .of-ft ul { display: grid; gap: .45rem; } .of-ft a:hover { color: #FFFFFF; }
.of-ft__b { margin: 3rem 0 0; padding-top: 1.25rem; border-top: 1px solid rgb(255 255 255 / .18); max-width: none; }
@media (max-width: 40rem) { .of-ft__g { grid-template-columns: minmax(0, 1fr); } }
.cta { background: var(--color-ink); } .cta .btn--accent { background: var(--color-accent); color: var(--color-on-accent); }
.contact-card { background: var(--color-surface); }

/* Long business names wrap at every width instead of being cut off */
body .site-header .logo { white-space: normal; overflow: visible; text-overflow: clip; min-width: 0; line-height: 1.1; overflow-wrap: anywhere; }

/* Same-background neighbours: one section gap between their contents (CONTRACT 0.3) */
main > .of-hero + .of-about { padding-top: calc(var(--section-pad) * 0.42); }
main > .of-steps + .of-areas { padding-top: calc(var(--section-pad) * 0.00); }

/* Customer palette: regal */
:root {
  --color-ink: #0E1A35;
  --color-deep: #050D27;
  --color-muted: #586072;
  --color-line: #CED5E2;
  --color-surface: #E2E7F2;
  --color-bg: #F0F2F6;
  --color-primary: #001A40;
  --color-on-primary: #FFFFFF;
  --color-accent: #9F7C04;
  --color-on-accent: #111111;
}
.btn--primary, .btn.btn--primary { background: var(--color-accent) !important; border-color: var(--color-accent) !important; color: var(--color-on-accent) !important; }
:is(.btn--primary, .btn.btn--primary):hover { background: color-mix(in srgb, var(--color-accent) 88%, black) !important; border-color: color-mix(in srgb, var(--color-accent) 88%, black) !important; }

/* Customer fonts: Instrument Serif + Inter */
:root {
  --font-heading: "Instrument Serif", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
  --heading-weight: 400;
  --heading-tracking: -0.01em;
}

:root { --tone-dk: var(--color-ink); --tone-lt: var(--color-bg); }

/* ---------- Section tones (light / dark), chosen per section in the editor ----------
   build-order.js adds data-tone="dark" or "light" to a section and sets --tone-dk / --tone-lt on :root to the
   template's own darkest and lightest colours (its background and ink). Inside the section every colour setting
   is swapped, so the template's sections and every alternative design follow automatically. The brand colour is
   kept, but lightened on dark and darkened on light backgrounds so buttons and links stay readable. */
:root { --tone-p: var(--color-primary); --tone-a: var(--color-accent); }
[data-tone="dark"] {
  --color-bg: var(--tone-dk); --color-ink: var(--tone-lt);
  --color-surface: color-mix(in srgb, var(--tone-lt) 8%, var(--tone-dk));
  --color-muted: color-mix(in srgb, var(--tone-lt) 70%, var(--tone-dk));
  --color-line: color-mix(in srgb, var(--tone-lt) 18%, var(--tone-dk));
  --color-primary: oklch(from var(--tone-p) max(l, 0.72) c h);
  --color-accent: oklch(from var(--tone-a) max(l, 0.72) c h);
  --color-on-primary: oklch(from var(--color-primary) clamp(0, (0.64 - l) * 1000, 1) 0 0);
  --color-on-accent: oklch(from var(--color-accent) clamp(0, (0.64 - l) * 1000, 1) 0 0);
  background: var(--color-bg); color: var(--color-ink);
}
[data-tone="light"] {
  --color-bg: var(--tone-lt); --color-ink: var(--tone-dk);
  --color-surface: color-mix(in srgb, var(--tone-dk) 5%, var(--tone-lt));
  --color-muted: color-mix(in srgb, var(--tone-dk) 66%, var(--tone-lt));
  --color-line: color-mix(in srgb, var(--tone-dk) 14%, var(--tone-lt));
  --color-primary: oklch(from var(--tone-p) min(l, 0.55) c h);
  --color-accent: oklch(from var(--tone-a) min(l, 0.62) c h);
  --color-on-primary: oklch(from var(--color-primary) clamp(0, (0.64 - l) * 1000, 1) 0 0);
  --color-on-accent: oklch(from var(--color-accent) clamp(0, (0.64 - l) * 1000, 1) 0 0);
  background: var(--color-bg); color: var(--color-ink);
}

/* ===== Added sections (Edit Sections → Add a section). Tokens only; the template's own heading,
   label and card styles are appended by build-order.js from spacing.json (__style). ===== */
.add h2 { margin: 0; }
.add-label { display: inline-block; margin-bottom: .9rem; }
.add-hd { max-width: 44rem; } .add-hd p { margin-top: .9rem; color: var(--color-muted); font-size: var(--fs-lg); }
.add-hd--center { margin: 0 auto clamp(2rem, 1.5rem + 2vw, 3rem); text-align: center; }
.add h3 { font-family: var(--font-heading); font-weight: var(--heading-weight, 700); letter-spacing: var(--heading-tracking, normal); font-size: var(--fs-lg); }

/* Backgrounds: only the frames the template itself uses are offered */
.add-f--tint { background: var(--color-surface); }
.add-f--dark { background: var(--color-ink); color: #FFFFFF; }
[data-tone].add-f--dark { background: var(--tone-dk, var(--color-ink)); }   /* a dark background stays dark under a light/dark version (QA-NOTES F16) */
.add-f--dark h2, .add-f--dark h3, .add-f--dark b { color: #FFFFFF; }
.add-f--dark p, .add-f--dark .add-num__l span:not([data-edit]), .add-f--dark .add-hd p { color: rgb(255 255 255 / .72); }
.add-f--box { margin-inline: 1.25rem; border-radius: var(--radius-lg); background: var(--color-surface); }

/* Text and photo */
.add-tp__g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.add-tp__ph { aspect-ratio: 4 / 3.2; border-radius: var(--radius-lg); }
.add-tp__tx p { margin-top: 1rem; color: var(--color-muted); font-size: var(--fs-lg); max-width: 34rem; } .add-f--dark .add-tp__tx p { color: rgb(255 255 255 / .75); }
.add-tp__tx .btn-row { margin-top: 1.75rem; }
.add-tp--right .add-tp__ph { order: 2; }
.add-tp--stacked .add-tp__g { grid-template-columns: minmax(0, 1fr); gap: clamp(1.75rem, 1.25rem + 2vw, 3rem); }
.add-tp--stacked .add-tp__ph { aspect-ratio: 21 / 8.5; }
.add-tp--stacked .add-tp__tx { max-width: 46rem; margin-inline: auto; text-align: center; } .add-tp--stacked .add-tp__tx p { margin-inline: auto; } .add-tp--stacked .btn-row { justify-content: center; }
.add-tp--overlay { position: relative; isolation: isolate; overflow: hidden; color: #FFFFFF; background: var(--color-ink); min-height: clamp(26rem, 20rem + 16vw, 36rem); display: flex; align-items: center; }
.add-tp--overlay .add-tp__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.add-tp--overlay::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(10 12 16 / .82), rgb(10 12 16 / .35)); }
.add-tp--overlay .add-tp__g { grid-template-columns: minmax(0, 1fr); } .add-tp--overlay .add-tp__tx { max-width: 38rem; }
.add-tp--overlay h2 { color: #FFFFFF; } .add-tp--overlay .add-tp__tx p { color: rgb(255 255 255 / .82); }
@media (max-width: 56rem) { .add-tp__g { grid-template-columns: minmax(0, 1fr); } .add-tp--right .add-tp__ph { order: 0; } .add-tp--stacked .add-tp__ph { aspect-ratio: 4 / 3; } }

/* Why choose us */
.add-why__l { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); gap: 1.75rem 1.5rem; margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.add-why__l p { margin-top: .35rem; color: var(--color-muted); }
.add-why__ic { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-bottom: 1rem; border-radius: 50%; background: var(--color-primary); color: var(--color-on-primary); }
.add-why__ic svg { width: 1.15rem; height: 1.15rem; }
.add-why__n { display: block; margin-bottom: .75rem; font-family: var(--font-heading); font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); line-height: 1; color: var(--color-primary); }
.add-why--numbered .add-why__l { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 3rem; }
.add-why--cards .add-why__l li { padding: 1.6rem; background: var(--color-bg); }
.add-f--tint .add-why--cards .add-why__l li, .add-f--box.add-why--cards .add-why__l li { background: var(--color-bg); }
.add-f--dark.add-why--cards .add-why__l li { background: rgb(255 255 255 / .06); }
.add-why--split .add-why__g { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.add-why--split .add-why__l { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 0; border-top: 1px solid var(--color-line); }
.add-why--split .add-why__l li { padding-block: 1.25rem; border-bottom: 1px solid var(--color-line); }
.add-f--dark .add-why__l p { color: rgb(255 255 255 / .7); }
@media (max-width: 56rem) { .add-why--split .add-why__g, .add-why--numbered .add-why__l { grid-template-columns: minmax(0, 1fr); } }

/* Numbers */
.add-num__l { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); gap: 1.5rem; text-align: center; }
.add-num__l b { display: block; font-family: var(--font-heading); font-weight: var(--heading-weight, 700); letter-spacing: -0.03em; font-size: clamp(2.6rem, 2rem + 2.4vw, 4.2rem); line-height: 1; color: var(--color-primary); }
.add-f--dark .add-num__l b { color: var(--color-accent); }
.add-num__l span:not([data-edit]) { display: block; margin-top: .5rem; color: var(--color-muted); }
.add-num--dividers .add-num__l { gap: 0; text-align: left; } .add-num--dividers .add-num__l li { padding: .5rem 1.5rem; border-left: 1px solid var(--color-line); }
.add-num--band .add-num__l { padding: clamp(2rem, 1.5rem + 2vw, 3rem) 1.5rem; border-radius: var(--radius-lg); background: var(--color-primary); }
.add-num--band .add-num__l b { color: var(--color-on-primary); } .add-num--band .add-num__l span:not([data-edit]) { color: color-mix(in srgb, var(--color-on-primary) 78%, transparent); }
@media (max-width: 40rem) { .add-num--dividers .add-num__l li { border-left: 0; border-top: 1px solid var(--color-line); padding: 1rem 0; } }

/* Photo gallery */
.add-gal .add-hd { margin-bottom: clamp(1.75rem, 1.25rem + 2vw, 2.75rem); }
.add-gal__g { display: grid; gap: .75rem; }
.add-gal__i { border-radius: var(--radius-lg); overflow: hidden; }
.add-gal__i img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.add-gal__i:hover img { transform: scale(1.04); }
/* Even grid: equal-height rows; the last row's photos widen to fill it, so no count leaves a gap */
.add-gal--grid .add-gal__g { display: flex; flex-wrap: wrap; } .add-gal--grid .add-gal__i { flex: 1 1 calc(33.333% - .75rem); min-width: 0; height: clamp(12rem, 8rem + 9vw, 17rem); }
.add-gal--mosaic .add-gal__g { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(9rem, 6rem + 8vw, 14rem); grid-auto-flow: dense; }
.add-gal--mosaic .add-gal__i--big { grid-column: span 2; grid-row: span 2; }   /* chosen per photo count so rows are always full */
.add-gal--mosaic .add-gal__g--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .add-gal--mosaic .add-gal__g--n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.add-gal--strip .add-gal__g { display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; scrollbar-width: thin; }
.add-gal--strip .add-gal__i { flex: 0 0 clamp(15rem, 10rem + 18vw, 24rem); aspect-ratio: 4 / 5; scroll-snap-align: start; }
/* Large photo and thumbnails: thumbnails in equal-height rows that always fill */
.add-gal--feature .add-gal__g { display: flex; flex-wrap: wrap; } .add-gal--feature .add-gal__i { flex: 1 1 calc(25% - .75rem); min-width: 0; height: clamp(9rem, 6rem + 6vw, 13rem); }
.add-gal--feature .add-gal__i:first-child { flex-basis: 100%; height: auto; aspect-ratio: 21 / 9; }
@media (max-width: 56rem) {
  .add-gal--grid .add-gal__i { flex-basis: calc(50% - .75rem); } .add-gal--feature .add-gal__i { flex-basis: calc(50% - .75rem); }
  .add-gal--mosaic .add-gal__g, .add-gal--mosaic .add-gal__g--n3, .add-gal--mosaic .add-gal__g--n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .add-gal--mosaic .add-gal__g--n3 .add-gal__i:first-child { grid-column: 1 / -1; }
  .add-gal--feature .add-gal__i:first-child { aspect-ratio: 4 / 3; }
}

/* Service areas */
.add-ar__l { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
.add-ar__l li { display: flex; align-items: center; gap: .5rem; }
.add-ar__l svg { flex: none; width: 1.15rem; height: 1.15rem; color: var(--color-primary); } .add-f--dark .add-ar__l svg { color: var(--color-accent); }
.add-ar--tags .add-ar__l { justify-content: center; }
.add-ar--tags .add-ar__l li { padding: .6rem 1.1rem; border: 1px solid var(--color-line); border-radius: 999px; background: var(--color-bg); font-weight: 600; }
.add-f--dark.add-ar--tags .add-ar__l li { background: rgb(255 255 255 / .06); border-color: rgb(255 255 255 / .16); }
.add-ar--columns .add-ar__l { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem 1.5rem; }
.add-ar--columns .add-ar__l li { padding-bottom: .9rem; border-bottom: 1px solid var(--color-line); font-weight: 600; }
.add-ar--photo .add-ar__g { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.add-ar--photo .add-ar__ph { aspect-ratio: 4 / 3.4; border-radius: var(--radius-lg); }
.add-ar--photo .add-ar__l { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1.5rem; font-weight: 600; }
@media (max-width: 56rem) { .add-ar--columns .add-ar__l { grid-template-columns: repeat(2, minmax(0, 1fr)); } .add-ar--photo .add-ar__g { grid-template-columns: minmax(0, 1fr); } }

/* Announcement */
.add-an h2 { overflow-wrap: anywhere; } .add-an p { margin-top: .6rem; color: var(--color-muted); }
.add-an--banner .add-an__b { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem) clamp(1.25rem, 1rem + 2vw, 2.5rem); border-radius: var(--radius-lg); background: var(--color-primary); color: var(--color-on-primary); }
.add-an--banner h2 { color: var(--color-on-primary); font-size: clamp(1.3rem, 1.1rem + .8vw, 1.8rem) !important; } .add-an--banner p { color: color-mix(in srgb, var(--color-on-primary) 82%, transparent); }
.add-an--centered .add-an__b { max-width: 46rem; margin-inline: auto; text-align: center; } .add-an--centered .btn { margin-top: 1.5rem; }
.add-an--card .add-an__b { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 3rem; align-items: center; padding: clamp(1.75rem, 1.25rem + 2vw, 3rem); background: var(--color-surface); }
.add-f--tint.add-an--card .add-an__b, .add-f--box.add-an--card .add-an__b { background: var(--color-bg); } .add-f--dark.add-an--card .add-an__b { background: rgb(255 255 255 / .06); }
@media (max-width: 40rem) { .add-an--card .add-an__b { grid-template-columns: minmax(0, 1fr); } }

/* Extra call to action */
.add-cta p { margin-top: 1rem; color: var(--color-muted); font-size: var(--fs-lg); max-width: 36rem; } .add-cta .btn-row { margin-top: 1.75rem; }
.add-f--dark.add-cta p { color: rgb(255 255 255 / .75); } .add-f--dark .btn--ghost, .add-cta--photo .btn--ghost { color: #FFFFFF; border-color: rgb(255 255 255 / .45); }
.add-cta--centered .add-cta__g { text-align: center; } .add-cta--centered p { margin-inline: auto; } .add-cta--centered .btn-row { justify-content: center; }
.add-cta--split .add-cta__g { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 2rem 4rem; align-items: center; }
.add-cta__tel { display: grid; gap: .3rem; text-decoration: none; color: inherit; font-family: var(--font-heading); font-weight: var(--heading-weight, 700); font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3.4rem); line-height: 1; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.add-cta__tel span:not([data-edit]) { font-family: var(--font-body); font-size: .85rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary); } .add-f--dark .add-cta__tel span:not([data-edit]) { color: var(--color-accent); }
.add-cta__tel:hover { color: var(--color-primary); }
.add-cta--photo { position: relative; isolation: isolate; overflow: hidden; color: #FFFFFF; background: var(--color-ink); text-align: center; }
.add-cta--photo .add-cta__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.add-cta--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(10 12 16 / .66); }
.add-cta--photo h2 { color: #FFFFFF; } .add-cta--photo p { color: rgb(255 255 255 / .82); margin-inline: auto; } .add-cta--photo .btn-row { justify-content: center; }
@media (max-width: 56rem) { .add-cta--split .add-cta__g { grid-template-columns: minmax(0, 1fr); } }

/* ===== Editable sections (cols.json): fixed columns of widgets. Everything inherits the template's tokens,
   fonts and buttons; light/dark comes from tones.css like every other section. ===== */
.add-cl__g { display: grid; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.add-cl--c1 .add-cl__g { max-width: 46rem; }
.add-cl--c2 .add-cl__g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.add-cl--c3 .add-cl__g { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.75rem, 1rem + 2.5vw, 3.25rem); }
.add-cl--center .add-cl__g { max-width: 52rem; text-align: center; }
.add-cl__c { min-width: 0; }
.add-cl__c > * { margin: 0; }
.add-cl__c > * + * { margin-top: 1rem; }
.add-cl__c > * + .tcw-btn, .add-cl__c > * + .tcw-ul { margin-top: 1.5rem; }
.add-cl__c > .tcw-p + .tcw-h, .add-cl__c > .tcw-ul + .tcw-h, .add-cl__c > .tcw-q + .tcw-h { margin-top: 2rem; }
.add-cl__c > * + .tcw-img, .add-cl__c > * + .tcw-frame, .add-cl__c > * + .tcw-embed, .add-cl__c > * + .tcw-q,
.add-cl__c > .tcw-img + *, .add-cl__c > .tcw-frame + *, .add-cl__c > .tcw-embed + * { margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
.add-cl .tcw-p { color: var(--color-muted); font-size: var(--fs-lg); line-height: 1.6; max-width: 38rem; }
.add-cl--c3 .tcw-p { font-size: var(--fs-base); }
.add-cl--center .tcw-p { margin-inline: auto; }
/* Centring is about the box, not just the text: base.css gives every p a max-width (--measure), so a centred
   section also centres every box inside it (quote text included), and a left-aligned text block is only as wide
   as its text, so the whole block sits in the middle of the page. */
.add-cl--center .add-cl__c > *, .add-cl--center .add-cl__c p { margin-inline: auto; }
.add-cl--c1:not(.add-cl--center) .add-cl__g { max-width: 40rem; }
.add-cl--c1:not(.add-cl--center) .add-cl__c p { max-width: none; }
.add-cl--center .btn-row { justify-content: center; }
.tcw-ul { display: grid; gap: .7rem; padding: 0; list-style: none; }
.tcw-ul li { display: flex; align-items: flex-start; gap: .65rem; }
.tcw-ul svg { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .2em; color: var(--color-primary); }
.add-f--dark .tcw-ul svg { color: var(--color-accent); }
.add-cl--center .tcw-ul { justify-content: center; }
.tcw-q blockquote { margin: 0; }
.tcw-q blockquote p { font-family: var(--font-heading); font-weight: var(--heading-weight, 600); letter-spacing: var(--heading-tracking, normal); font-size: clamp(1.3rem, 1.05rem + 1vw, 1.95rem); line-height: 1.35; }
.tcw-q blockquote p::before { content: "\201C"; display: block; height: .55em; margin-bottom: .35em; font-size: 2.6em; line-height: 1; color: var(--color-primary); }
.add-f--dark .tcw-q blockquote p::before { color: var(--color-accent); }
.add-cl--c1 .tcw-q blockquote p { font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.6rem); }
.tcw-q figcaption { margin-top: 1.25rem; color: var(--color-muted); font-weight: 600; }
.tcw-q figcaption::before { content: "\2014\00a0"; }
.tcw-img { aspect-ratio: 4 / 3.2; }
.add-cl--c1 .tcw-img { aspect-ratio: 16 / 8; }
.add-cl--c3 .tcw-img { aspect-ratio: 1 / 1; }
.tcw-frame { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--color-surface); aspect-ratio: 16 / 9; }
.tcw-map { aspect-ratio: 4 / 3.2; } .add-cl--c1 .tcw-map { aspect-ratio: 16 / 8; }
.tcw-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tcw-embed { max-width: 100%; overflow-x: auto; }
.add-cl--center .tcw-embed { margin-inline: auto; }
.add-f--dark .add-cl .tcw-p, .add-f--dark .tcw-q figcaption { color: rgb(255 255 255 / .75); }
@media (max-width: 56rem) {
  .add-cl--c2 .add-cl__g, .add-cl--c3 .add-cl__g { grid-template-columns: minmax(0, 1fr); }
  .add-cl__c--media { order: -1; }                    /* phones: the photo, video or map comes first */
  .add-cl--c3 .tcw-img { aspect-ratio: 4 / 3; }
}
/* Editor only (these classes are never in a downloaded site) */
.tcw-ph { display: grid; place-items: center; min-height: 9rem; padding: 1.5rem; border: 2px dashed color-mix(in srgb, currentColor 35%, transparent); border-radius: var(--radius-lg); text-align: center; font-size: var(--fs-sm); color: var(--color-muted); background: color-mix(in srgb, currentColor 4%, transparent); }
.tcw-ph b { display: block; margin-bottom: .3rem; color: var(--color-ink); font-size: var(--fs-base); }
.tcw-ph.tcw-frame { min-height: 0; }
.tcw-empty { cursor: pointer; }
.tcw-shield { position: absolute; inset: 0; }

/* ===== Logo strip: muted logos, full colour on hover. Row / scrolling / title beside the logos ===== */
.add-logo { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }
.add-logo__hd { text-align: center; margin-bottom: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); }
.add-logo__t { margin: 0 auto; max-width: 46rem; font-family: var(--font-heading); font-weight: var(--heading-weight, 600); letter-spacing: var(--heading-tracking, normal); font-size: var(--fs-lg); color: var(--color-muted); }
.add-logo .add-label { margin-bottom: .5rem; }
.add-logo__l { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); margin: 0; padding: 0; list-style: none; }
.add-logo__l li { display: grid; place-items: center; flex: 0 1 auto; }
.add-logo__l img { display: block; width: auto; height: clamp(2.6rem, 2.2rem + 1.4vw, 3.6rem); max-width: clamp(8rem, 7rem + 5vw, 12.5rem); object-fit: contain;
  filter: grayscale(1); opacity: .72; transition: filter .3s, opacity .3s; }
.add-logo__l li:hover img { filter: none; opacity: 1; }
[data-tone="dark"] .add-logo__l img, .add-f--dark .add-logo__l img { opacity: .8; }
.add-f--dark .add-logo__t { color: rgb(255 255 255 / .72); }
/* Title beside the logos */
.add-logo--split .add-logo__g { display: grid; grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: center; }
.add-logo--split .add-logo__hd { margin: 0; text-align: left; } .add-logo--split .add-logo__t { margin: 0; } .add-logo--split .add-logo__hd { padding-right: clamp(1rem, .5rem + 2vw, 2.5rem); border-right: 1px solid var(--color-line); }
.add-logo--split .add-logo__l { justify-content: space-between; }
/* Scrolling: two copies of the list slide left forever; hover pauses it (and lets the editor click a logo) */
.add-logo__mq { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.add-logo__track { flex-wrap: nowrap; justify-content: flex-start; width: max-content; padding-right: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); animation: add-logo-mq 36s linear infinite; }
.add-logo__mq:hover .add-logo__track { animation-play-state: paused; }
@keyframes add-logo-mq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .add-logo__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; padding-right: 0; }
  .add-logo__track li[aria-hidden] { display: none; }
}
@media (max-width: 56rem) {
  .add-logo--split .add-logo__g { grid-template-columns: minmax(0, 1fr); }
  .add-logo--split .add-logo__hd { text-align: center; padding: 0 0 1.25rem; border-right: 0; border-bottom: 1px solid var(--color-line); }
  .add-logo--split .add-logo__l { justify-content: center; }
}

/* Centred containers centre their paragraphs too: templates often give p a max-width without auto margins, which
   left the paragraph sitting left of centre. Only paragraphs narrower than the container move. (QA-NOTES F9) */
.add-hd--center p, .add-an--centered .add-an__b p, .add-cl--center .add-cl__g p, .add-logo__hd p, .add-tp--stacked .add-tp__tx p { margin-inline: auto; }

/* Added sections: this template's own heading, label and card styles */
.add h2 { font-family: var(--font-heading); font-weight: 500; font-style: normal; letter-spacing: -1.9008px; text-transform: none; line-height: 1.02; font-size: clamp(35.2px, calc(22.86px + 3.164vw), 63.36px); }
.add-label { font-family: var(--font-body); font-size: 11.84px; font-weight: 600; letter-spacing: 2.1312px; text-transform: uppercase; color: rgb(227, 162, 107); }
.add-label { color: var(--color-ink); }
[data-tone="dark"] .add-label, .add-f--dark .add-label, .add-tp--overlay .add-label { color: rgb(227, 162, 107); }
.add-card { border-radius: 0px; border: 1px solid var(--color-line); }
.add .media, .add-num--band .add-num__l, .add-f--box { border-radius: 0px; }

/* Privacy Policy and Terms of Service: the links beside the copyright line, and their pages' text (smaller headings) */
.tc-legal { display: inline; }
.tc-legal a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; white-space: nowrap; }
.tc-legal a::before { content: "·"; display: inline-block; margin: 0 .55em; text-decoration: none; }
.tc-legal a:hover { opacity: .8; }
.tc-legal--row { display: flex; flex-wrap: wrap; gap: .35em 1.25em; margin-top: .75rem; font-size: .875rem; }
.tc-legal--row a::before { content: none; }
.add.add-cl--legal.add-cl--c1 .add-cl__g { max-width: none; }   /* the text lines up with the page title, on the left */
.add-cl--legal .add-cl__c { max-width: 46rem; }
.add-cl--legal .tcw-h { font-size: clamp(1.25rem, 1.08rem + .6vw, 1.6rem); line-height: 1.25; }
.add-cl--legal .tcw-h + .tcw-p { margin-top: .5rem; }
.add-cl--legal .add-cl__c > .tcw-p + .tcw-h { margin-top: 2.25rem; }
.add-cl--legal .tcw-p { font-size: var(--fs-base, 1rem); line-height: 1.7; }

/* Social icons (footer and widget): the text colour around them, so they suit every template and background */
/* a block of inline icons: they follow the text alignment around them (left, centred or right) */
.tc-social { display: block; line-height: 0; }
.tc-social--brand { margin-top: 1.25rem; }
.tc-social--base { margin-top: .9rem; }
.tc-social a { display: inline-grid; vertical-align: middle; margin: 0 .55rem .55rem 0; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; color: inherit; background: color-mix(in srgb, currentColor 9%, transparent); opacity: .85; transition: opacity .2s, background-color .2s; }
.tc-social a:hover { opacity: 1; background: color-mix(in srgb, currentColor 16%, transparent); }
.tc-social svg { width: 1rem; height: 1rem; fill: currentColor; }
.tc-social a:last-child { margin-right: 0; }
.tcw-social { margin-top: 1rem; } .tcw-social a { width: 2.75rem; height: 2.75rem; } .tcw-social svg { width: 1.2rem; height: 1.2rem; }
.add-cl--center .tcw-social { text-align: center; }

/* Spacing system: this website's own section arrangement (Edit Sections) */
[data-sp-end="reviews"] { padding-bottom: max(0px, calc(var(--section-pad, clamp(4rem, 3rem + 4vw, 7rem)) * 0.9496)) !important; }
[data-sp="add-7db4b8"] { padding-top: var(--section-pad, clamp(4rem, 3rem + 4vw, 7rem)) !important; }
[data-sp-end="add-7db4b8"] { padding-bottom: var(--section-pad, clamp(4rem, 3rem + 4vw, 7rem)) !important; }
[data-sp="section-of-areas"] { padding-top: var(--section-pad, clamp(4rem, 3rem + 4vw, 7rem)) !important; }

/* Spacing system: extra pages */
[data-sp-end="xp-services-own1"] { padding-bottom: var(--section-pad, clamp(4rem, 3rem + 4vw, 7rem)) !important; }
[data-sp="xp-services-own2"] { padding-top: var(--section-pad, clamp(4rem, 3rem + 4vw, 7rem)) !important; }
[data-sp-end="xp-about-own1"] { padding-bottom: var(--section-pad, clamp(4rem, 3rem + 4vw, 7rem)) !important; }
[data-sp="xp-about-own2"] { padding-top: var(--section-pad, clamp(4rem, 3rem + 4vw, 7rem)) !important; }
[data-sp-end="xp-about-own2"] { padding-bottom: var(--section-pad, clamp(4rem, 3rem + 4vw, 7rem)) !important; }
[data-sp="xp-about-own3"] { padding-top: var(--section-pad, clamp(4rem, 3rem + 4vw, 7rem)) !important; }