/* =====================================================================================================
   Silverseed Properties: website layout from the silverseed.co.ke design reference, tuned for readability.
   Loaded after the engine's stylesheets. Colours and the type scale come from theme.css (company/theme.php):
   use var(--primary), var(--text-h2) … rather than numbers. Rules and notes: brand/DESIGN-SYSTEM.md
   Publish with: php bin/apply-company.php
   ===================================================================================================== */

/* ---------- 1. Tokens: brand values the theme does not hold ---------- */
:root {
  --ss-cyan-bright: #05A4CB;   /* logo cyan: decoration only (rules, borders, veils). Never behind or as text. */
  --ss-navy: #001C38;          /* legal strip under the footer */
  --ss-line: #B9C7CE;          /* thin rule beside section labels */
  --ss-price: var(--danger-base);
  --ss-card-pad: var(--space-4);
  /* Spacing rhythm: one value between and inside every section, one between a section heading and its content */
  --ss-section: 96px;
  --ss-head-gap: 48px;
  --ss-overlap: 72px;          /* how far the home search panel rises into the welcome band above it */
}
@media (max-width: 1000px) { :root { --ss-section: 80px; --ss-head-gap: 40px; } }
@media (max-width: 720px) { :root { --ss-section: 64px; --ss-head-gap: 32px; --ss-overlap: 40px; } }

/* ---------- 1b. Section rhythm: the same space above and below every section, white or coloured ---------- */
.section, .section--tight { margin-block: var(--ss-section); }
.section--muted { margin-block: 0; padding-block: var(--ss-section); }   /* coloured bands: the space sits inside the colour */
.ui-sh { margin-bottom: var(--ss-head-gap); }
.stats-band, .stats-band--brand { margin-top: var(--ss-head-gap); }
.hero-banner .page-hero { padding-block: var(--ss-section); }
.site-footer { margin-top: var(--ss-section); padding-top: var(--ss-section); }
.contact-cards, .filter-wrap { margin-top: var(--ss-section); }        /* first block under a page heading */
.filter-tabs { margin-top: var(--space-6); }                          /* the status tabs belong to the filter bar above them */
.site-footer__lead + .site-footer__text { margin-top: var(--space-2); }

/* ---------- 2. Type: one scale, clear steps between levels ---------- */
body { font-size: var(--text-body); line-height: var(--leading-body); }
.ui-h1, .ui-h2 { font-weight: var(--heading-weight); color: var(--primary); }
.ui-h1 { letter-spacing: -0.02em; }
.ui-h2 { letter-spacing: -0.015em; }
.ui-gradient-text { background: none; color: var(--primary); -webkit-text-fill-color: currentColor; }
h3, h4 { color: var(--ink); }
.prose { font-size: var(--text-body); line-height: var(--leading-body); }
.prose h2 { font: 600 var(--text-h3)/var(--leading-h3) var(--font-display); color: var(--ink); }
.prose h3 { font: 600 var(--text-h4)/var(--leading-h4) var(--font-display); color: var(--ink); }

/* Section label: dark capitals followed by a thin rule (FEATURED PROPERTIES ———) */
.ui-eyebrow { display: flex; width: 100%; gap: var(--space-4); font: 600 var(--text-label)/var(--leading-label) var(--font-body); letter-spacing: 0.08em; color: var(--ink); }
.ui-eyebrow::before { display: none; }
.ui-eyebrow::after { content: ""; flex: 1; align-self: center; height: 1px; background: var(--ss-line); }
.ui-sh--center .ui-eyebrow::after, .hero .ui-eyebrow::after, .page-hero .ui-eyebrow::after { display: none; }
.ui-sh__main .ui-h2 { margin-top: var(--space-1); }
.ui-sh__desc { max-width: 52ch; font-size: var(--text-body); line-height: var(--leading-body); color: var(--ink-muted); }

/* Smaller engine text raised to the scale: nothing a visitor reads below the label size */
.breadcrumb, .ui-field__label, .ui-search__flabel, .facts__label, .pricing__label, .sidebar__price-label,
.bcard__meta, .bcard__author, .tcard__role, .filter-tabs__count, .site-update__date { font-size: var(--text-label); line-height: var(--leading-label); }
.field__error { font-size: var(--text-label); }
.ui-tag { height: 32px; font-size: var(--text-label); }

/* ---------- 3. Buttons: clear labels, comfortable tap targets (44px), inline arrow ---------- */
.ui-btn { height: 48px; padding: 0 var(--space-6); font: 600 16px/1 var(--font-body); }
.ui-btn--sm { height: 44px; padding: 0 var(--space-4); font-size: 15px; }
.ui-btn--arrow, .ui-btn--sm.ui-btn--arrow { padding-right: var(--space-4); }
.ui-btn__arrow, .ui-btn--sm .ui-btn__arrow { width: auto; height: auto; margin-left: 0; background: none !important; color: inherit !important; }
.ui-btn--outline { border-color: var(--ink-muted); color: var(--ink); }
.ui-btn--outline:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-tint); }
.ui-btn--light { color: var(--primary); }
.ui-btn--light:hover { background: var(--primary-tint); color: var(--primary-dark); }

/* White focus rings wherever the ground is cyan, deep cyan or a photo */
.topbar :focus-visible, .site-footer :focus-visible, .home-hero__band :focus-visible, .hero-banner .page-hero :focus-visible,
.value-grid :focus-visible, .stats-band--brand :focus-visible, .ui-cta :focus-visible { outline-color: #fff; }

/* ---------- 4. Top bar: cyan strip, white text, plain white social icons ---------- */
.topbar { font-size: var(--text-label); line-height: var(--leading-label); }
.topbar__inner { min-height: 42px; }
.topbar__contact svg { color: var(--on-topbar); }
.topbar__icon { width: 32px; height: 32px; background: none; color: var(--on-topbar); }
.topbar__icon:hover { background: rgba(255, 255, 255, 0.18); }

/* ---------- 5. Header: white bar, logo left, plain text menu right ---------- */
.site-header { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--border); }
.site-header__bar { height: 92px; justify-content: flex-start; }
.brand-logo--nav { height: 64px; }
.site-nav { margin-left: auto; }
.site-nav .ui-nav__links { background: none; padding: 0; gap: var(--space-1); }
.site-nav .ui-nav__link { padding: var(--space-2) var(--space-3); font-size: 16px; font-weight: 500; color: var(--ink); box-shadow: none; background: none; }
.site-nav .ui-nav__link:hover { color: var(--primary); }
.site-nav .ui-nav__link.is-active { background: none; box-shadow: inset 0 -2px 0 var(--ss-cyan-bright); border-radius: 0; color: var(--primary); font-weight: 600; }
.site-header__phone { display: none; }
.site-header__actions { margin-left: var(--space-4); }
@media (max-width: 1100px) { .site-nav .ui-nav__link { padding-inline: var(--space-2); font-size: 15px; } }
@media (max-width: 960px) { .site-header__actions { margin-left: auto; } }
@media (max-width: 720px) { .site-header__bar { height: 72px; } .brand-logo--nav { height: 48px; } }

/* ---------- 6. Home (CHANGED): banner slider strip on top, then the welcome band on the page background ----------
   No colour band: the welcome sits on the same ground as the rest of the page, with the heading in brand blue
   (--primary), body copy in --ink, and light-ground buttons (solid primary button, primary text link for the
   site visit). The search panel follows straight after, with no overlap. */
.home-hero__band { background: transparent; color: var(--ink); }
.home-hero__band::before, .home-hero__band::after { display: none; }
.home-hero__band :focus-visible { outline-color: var(--focus); }
.home-hero__inner { padding-block: var(--ss-section); }
.home-hero--search .home-hero__inner { padding-bottom: var(--ss-head-gap); }
.home-hero__eyebrow { color: var(--ink); }
.home-hero__eyebrow::after { background: var(--ss-cyan-bright); } /* CHANGED: the line now follows the text (site.css) */
.home-hero__title { color: var(--primary); }
.home-hero__lead { color: var(--ink); }
.home-hero__visit { color: var(--primary); text-decoration-color: color-mix(in srgb, var(--primary) 45%, transparent); }
.home-hero__visit svg { color: var(--primary); }
.home-hero__visit:hover { color: var(--primary-dark); text-decoration-color: var(--primary-dark); }
.home-hero__panel { border-color: var(--border); background: var(--surface); box-shadow: 0 12px 32px rgba(1, 37, 46, 0.08); }
.home-hero__panel-title { color: var(--primary); }
.home-hero__icon { background: var(--primary-tint); color: var(--primary); }
.home-hero__point-title { color: var(--ink); }
.home-hero__point-text { color: var(--ink); }

/* Find your plot: the full content width (same edges as every section), directly under the welcome text */
.home-hero__search { max-width: calc(1200px + 2 * var(--space-12)); margin-top: 0; }
.home-hero .ui-search { gap: var(--space-6); padding: var(--space-8) var(--space-8) var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 18px 48px rgba(1, 37, 46, 0.14); }
.ui-search__title { font: 600 var(--text-h3)/var(--leading-h3) var(--font-display); color: var(--ink); }
.ui-search__fields { gap: var(--space-6); }
.ui-field__label { font-weight: 600; color: var(--ink); }
.ui-field__control select { height: 56px; padding-left: var(--space-4); font-size: var(--text-small); border-radius: var(--radius-sm); }
.ui-search__foot { padding-top: var(--space-6); }
.ui-search__foot .ui-btn { height: 56px; padding-inline: var(--space-8); }
.ui-search__filters a.ui-tag { height: 36px; padding-inline: var(--space-4); font-size: 15px; }
@media (max-width: 720px) {
  .home-hero__inner { padding-block: var(--ss-section); }
  .home-hero--search .home-hero__inner { padding-bottom: var(--ss-head-gap); }
  .home-hero .ui-search { padding: var(--space-6) var(--space-4); }
}

/* ---------- 7. Inner pages: the photo band under a dark veil, or a deep cyan band ---------- */
.hero-banner .page-hero::before { background: rgba(0, 0, 0, 0.62); }
.hero-banner .page-hero .ui-h1 { font-weight: 500; }
.hero-banner .page-hero__lead { font-size: 19px; line-height: 30px; max-width: 56ch; }
.hero-banner .page-hero .ui-btn--primary { background: var(--surface); color: var(--primary); }
.hero-banner .page-hero .ui-btn--outline { background: transparent; border-color: var(--on-primary); color: var(--on-primary); }
.hero-banner .page-hero .ui-btn--outline:hover { background: rgba(255, 255, 255, 0.12); }
@media (max-width: 720px) { .hero-banner .page-hero__lead { font-size: 17px; line-height: 27px; } }

/* ---------- 8. Project cards: white card, thin border, red price, rectangular badges ---------- */
.pcard { gap: var(--space-3); padding-bottom: var(--ss-card-pad); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); transition: box-shadow .2s ease, border-color .2s ease; }
.pcard:hover { border-color: var(--ss-cyan-bright); box-shadow: var(--shadow-card); }
.pcard > :not(.ui-pcard__media) { margin-inline: var(--ss-card-pad); }
.pcard .ui-pcard__media { border-radius: 0; }
.pcard .ui-tag { height: 26px; padding: 0 var(--space-2); border-radius: 3px; font: 700 12px/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; }
.pcard .ui-pcard__status .ui-tag { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.pcard__badge { background: var(--surface); color: var(--ink); }
.ui-pcard__title { font: 600 var(--text-h4)/var(--leading-h4) var(--font-display); }
.ui-pcard__meta { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.pcard__prices { padding: 0; background: none; border: 0; border-radius: 0; }
.pcard__price-label { display: none; }
.pcard__price .ui-pcard__price { font: 700 22px/28px var(--font-display); color: var(--ss-price); }
.pcard .ui-pcard__loc { font-size: var(--text-small); line-height: var(--leading-small); color: var(--ink-muted); }
.pcard__wa { width: 44px; height: 44px; border-radius: var(--radius-sm); }

/* ---------- 9. "Why choose us" and the buying steps: a cyan panel, numbered columns ---------- */
.value-grid { counter-reset: ss-step; gap: var(--space-8); padding: var(--space-12) var(--space-8); border-radius: var(--radius-lg); background: var(--primary); }
.value-card { counter-increment: ss-step; padding: 0; border: 0; background: none; color: var(--on-primary); }
.value-card:hover { box-shadow: none; }
.value-card__icon { display: none; }
.value-card__title { margin-top: 0; font: 600 var(--text-h4)/var(--leading-h4) var(--font-display); color: var(--on-primary); }
.value-card__title::before { content: counter(ss-step, decimal-leading-zero) "/"; display: block; margin-bottom: var(--space-3); font: 400 var(--text-h4)/1 var(--font-body); }
.value-card__text { font-size: var(--text-small); line-height: var(--leading-small); color: var(--on-primary); }
/* The figures (projects sold, selling now, locations, counties): separate outlined tiles, deep cyan numbers */
.stats-band, .stats-band--brand { padding: 0; border: 0; border-radius: 0; background: none; }
.ui-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
.ui-stat, .ui-stat:first-child, .stats-band--brand .ui-stat {
  gap: var(--space-2); padding: var(--space-8) var(--space-6);
  border: 1.5px solid var(--primary); border-radius: var(--radius-md); background: var(--surface);
}
.ui-stat__value, .stats-band--brand .ui-stat__value { font: 600 56px/60px var(--font-display); letter-spacing: -0.02em; color: var(--primary); }
.ui-stat__label, .stats-band--brand .ui-stat__label { font: 500 var(--text-small)/var(--leading-small) var(--font-body); color: var(--ink-muted); }
@media (max-width: 860px) { .ui-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); } .ui-stat__value, .stats-band--brand .ui-stat__value { font-size: 44px; line-height: 48px; } }

/* ---------- 10. Testimonials: pale cyan cards, readable quotes ---------- */
.tcard { padding: var(--space-6); border-radius: var(--radius-md); }
.tcard__quote p { font-size: var(--text-small); line-height: var(--leading-small); color: var(--ink); }
.tcard__mark { display: none; }
.tcard__name { color: var(--primary); }

/* ---------- 11. About: outlined vision and mission boxes, numbered core values and promises ---------- */
.mv-card, .mv-card--blue { padding: var(--space-6); border: 1px solid var(--ink-muted); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); }
.mv-card--blue p { color: var(--ink-muted); opacity: 1; }
.mv-card__icon { display: none; }
.mv-card__title { margin-top: 0; font: 600 var(--text-h4)/var(--leading-h4) var(--font-display); color: var(--primary); }
.mv-card p { font-size: var(--text-small); line-height: var(--leading-small); }
.values__title { font: var(--heading-weight) var(--text-h3)/var(--leading-h3) var(--font-display); color: var(--primary); }
.values__list { counter-reset: ss-value; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-8); }
.values__list li { counter-increment: ss-value; position: relative; padding: var(--space-6) var(--space-6) var(--space-6) 104px; border: 1px solid var(--ss-cyan-bright); border-radius: var(--radius-sm); }
.values__list li::before { content: counter(ss-value, decimal-leading-zero) "/"; position: absolute; left: 0; top: -1px; bottom: -1px; width: 80px; display: grid; place-items: center; border: 1px solid var(--ss-cyan-bright); border-right-width: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); background: var(--primary-tint); font: 500 var(--text-h4)/1 var(--font-body); color: var(--primary); }
.values__list strong { font: 600 var(--text-h4)/var(--leading-h4) var(--font-display); color: var(--primary); }
.values__list span { font-size: var(--text-small); line-height: var(--leading-small); color: var(--ink); }
.pillar { padding: var(--space-6) 0; background: none; }
.pillar__icon { display: none; }
.pillar__num { position: static; font: 500 var(--text-h4)/1 var(--font-body); color: var(--primary); }
.pillar__num::after { content: "/"; }
.pillar__title { margin-top: 0; font: 600 var(--text-h4)/var(--leading-h4) var(--font-display); }
.pillar p { font-size: var(--text-small); line-height: var(--leading-small); color: var(--ink-muted); }
@media (max-width: 720px) {
  .values__list { grid-template-columns: minmax(0, 1fr); }
  .values__list li { padding-left: 84px; }
  .values__list li::before { width: 64px; }
}

/* ---------- 12. Our team: bordered cards, the job title as a chip on the photo, bold names ---------- */
.team-grid .ui-team { position: relative; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-md); background: #FAFCFD; overflow: hidden; }
.team-grid .ui-team__media { border-radius: 0; }
.team-grid .ui-team__body { padding: var(--space-4) var(--space-4) var(--space-6); gap: var(--space-3); }
.team-grid .ui-team__name { font: 700 var(--text-h4)/var(--leading-h4) var(--font-display); }
.team-grid .ui-team__name a { color: var(--ink); }
.team-grid .ui-team__role { position: absolute; top: var(--space-3); left: var(--space-3); max-width: calc(100% - var(--space-6)); padding: 4px 10px; border-radius: var(--radius-pill); background: var(--surface); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); font: 700 12px/16px var(--font-body); letter-spacing: 0.04em; text-transform: uppercase; color: var(--primary); }
.team-grid .ui-team__vision, .team-grid .ui-team__summary { display: none; }
.ui-team--hero { padding: 0; gap: var(--space-8); border: 1px solid var(--ss-cyan-bright); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; box-shadow: var(--shadow-card); }
.ui-team--hero .ui-team__media { border-radius: 0; height: 100%; }
.ui-team--hero .ui-team__body { padding: var(--space-8) var(--space-8) var(--space-8) 0; }
.ui-team--hero .ui-team__name { font: 600 var(--text-h3)/var(--leading-h3) var(--font-display); }
.ui-team--hero .ui-team__name a { color: var(--primary); }
.ui-team--hero .ui-team__role { order: -1; font: 600 var(--text-label)/var(--leading-label) var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.ui-team--hero .ui-team__vision { padding-left: var(--space-4); border-left: 3px solid var(--ss-cyan-bright); }
.ui-team--hero .ui-team__vision p { font: italic 400 var(--text-body)/var(--leading-body) var(--font-body); color: var(--ink); }
.ui-team--hero .ui-team__mark, .ui-team--hero .ui-eyebrow { display: none; }
@media (min-width: 861px) {
  .ui-team--hero { grid-template-columns: 280px minmax(0, 1fr); align-items: stretch; }
  .ui-team--hero .ui-team__media { aspect-ratio: auto; min-height: 340px; }
  .ui-team--hero .ui-team__body { align-self: center; }
}
@media (max-width: 860px) { .ui-team--hero .ui-team__body { padding: 0 var(--space-4) var(--space-6); } }
.team-profile__role { font-size: var(--text-h4); }
.team-profile__vision p { font-size: 19px; line-height: 30px; }

/* ---------- 13. Blog cards ---------- */
.bcard__title { font: 600 var(--text-h4)/var(--leading-h4) var(--font-display); }
.bcard__excerpt { font-size: var(--text-small); line-height: var(--leading-small); color: var(--ink-muted); }

/* ---------- 14. Call-to-action banners: plain deep cyan (project photos are often adverts with their own text) ---------- */
.ui-cta { background-image: none !important; background-color: var(--primary); border-radius: var(--radius-lg); }
.ui-cta--image::before { display: none; }
.ui-cta__title { font-size: var(--text-h2); line-height: var(--leading-h2); font-weight: var(--heading-weight); }
.ui-cta__text { font-size: var(--text-body); line-height: var(--leading-body); opacity: 1; }
@media (max-width: 720px) { .ui-cta__title { font-size: calc(var(--text-h2) * 0.74); line-height: calc(var(--leading-h2) * 0.76); } }

/* ---------- 15. Footer: deep cyan, white type, navy legal strip across the full width ---------- */
/* Layout: the brand (logo, statement, site visit note and button) as one row across the top, all top-aligned, then four equal link columns,
   so every column starts on the same line and every heading fits on one line */
.site-footer { background: var(--primary); padding-bottom: 0; }
.site-footer__top { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-12) var(--space-8); align-items: start; }
.site-footer__brand {
  grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(280px, 340px); grid-template-rows: auto 1fr;
  grid-template-areas: "logo lead cta" "logo text cta"; gap: var(--space-3) var(--space-12); align-items: start;
  padding-bottom: var(--space-12); border-bottom: 1px solid rgba(255, 255, 255, 0.24);
}
.site-footer__logo { grid-area: logo; align-self: start; line-height: 0; }
.brand-logo--footer { height: 112px; }
.site-footer__lead { grid-area: lead; align-self: start; margin: 0; font: 500 var(--text-h3)/var(--leading-h3) var(--font-display); }
.site-footer__text { grid-area: text; align-self: start; max-width: 68ch; font-size: var(--text-small); line-height: var(--leading-small); opacity: 1; }
.site-footer__cta { grid-area: cta; align-self: start; width: 100%; }
.site-footer__cta .ui-btn { width: 100%; }
.site-footer__heading { margin-bottom: var(--space-6); font: 700 var(--text-label)/var(--leading-label) var(--font-body); letter-spacing: 0.08em; color: var(--on-primary); }
.site-footer__col ul, .site-footer__contact { font-size: var(--text-small); line-height: var(--leading-small); gap: var(--space-3); }
.site-footer__contact svg { color: var(--on-primary); }
.site-footer__map { margin-top: var(--space-6); }
.site-footer a:hover { color: var(--on-primary); }
.site-footer__legal { justify-content: space-between; align-items: center; gap: var(--space-2) var(--space-8); margin-top: var(--ss-section); padding: var(--space-6) 0; border-top: 0; align-items: flex-start; font-size: var(--text-label); background: var(--ss-navy); box-shadow: 0 0 0 100vmax var(--ss-navy); clip-path: inset(0 -100vmax); }
.site-footer__legal p { opacity: 1; white-space: nowrap; }
/* Phones: shrink the text slightly on narrow screens so each line stays on one line */
@media (max-width: 560px) { .site-footer__legal { font-size: clamp(12px, 3.5vw, 14px); } }
.site-footer__credit a { color: var(--accent); text-decoration: none; }
@media (max-width: 1000px) {
  .site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__brand { grid-template-columns: minmax(0, 1fr); grid-template-areas: "logo" "lead" "text" "cta"; justify-items: start; gap: var(--space-4); }
  .brand-logo--footer { height: 88px; }
}
@media (max-width: 560px) { .site-footer__top { grid-template-columns: minmax(0, 1fr); } }