/* ==========================================================================
   zeas.immo — Design System
   --------------------------------------------------------------------------
   The single source of truth for colour, type, spacing and motion.
   Change a brand value HERE and it moves everywhere.

   Merged from three documents that had drifted apart:
     · style_v14032026.css  §16 "GLOBAL DESIGN SYSTEM"  (Houzez child theme)
     · zeas-repository.html  :root + component patterns  (brand repository)
     · Social Media Strategy 2026 v4.1  §10 "Design System"

   Conflicts resolved:
     · --max-width  1203px → 1240px   (repository + strategy agree; the old
                                       Houzez value was the outlier)
     · durations    kept the three-step scale (--dur-fast/base/slow) rather
                    than the repository's single --duration-base
     · type scale   adopted from the repository, which is the only source
                    that defines one

   Loaded on every page by hello-elementor-child/functions.php.
   Legacy token names are aliased in Layer 2, so pages written before this
   file existed keep working while pointing at the same source values.
   ========================================================================== */


/* ──────────────────────────────────────────────────────────────────────────
   LAYER 0 — THE TYPEFACE.

   Inter, self-hosted. Two facts make this the right choice for this site:

   1. It is a webfont, so it is downloaded. Every visitor sees the same page
      whether they are on a Mac, a PC or a phone. The face it replaces,
      'Helvetica Neue', was a *system* font — present on Apple devices and
      silently substituted with Arial everywhere else.

   2. It is a VARIABLE font: this one file carries every weight from 100 to
      900. Poppins from Google Fonts needed five separate files plus a
      stylesheet request and a connection to two third-party domains.

   Served from our own origin, so no third-party DNS, TLS or privacy
   exposure, and no CORS headers required. font-display: swap means text is
   readable immediately in a fallback and reflows once Inter arrives.

   The italic file is declared but only downloaded if italic text is
   actually rendered, so it costs nothing while unused.
   ────────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Inter';
  src: url('/wp-content/uploads/fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/wp-content/uploads/fonts/InterVariable-Italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}


/* ──────────────────────────────────────────────────────────────────────────
   LAYER 1 — TOKENS.  The only place a brand value is written down.
   ────────────────────────────────────────────────────────────────────────── */

:root {

  /* Brand ---------------------------------------------------------------- */
  --accent:               #FF5C0B;              /* Neon orange. CTAs, highlights, active states */
  --accent-hover:         #FF6E28;              /* Hover state for accent elements */
  --accent-muted:         rgba(255, 92, 11, 0.08);
  --accent-ring:          rgba(255, 92, 11, 0.15);   /* Focus ring on inputs */

  /* Surfaces ------------------------------------------------------------- */
  --page-background:      #ffffff;              /* The document background — what body sits on */
  --surface-page:         #faf9f7;              /* Warm tint for sections and wells */
  --surface-card:         #ffffff;              /* White cards and panels sitting on a tint */
  --surface-raised:       #f5f3ef;              /* Cards, raised sections */
  --surface-sunken:       #edeae4;              /* Wells, insets */
  --surface-dark:         #111110;              /* Hero, village sections, high-impact blocks */
  --surface-dark-2:       #181817;
  --surface-dark-3:       #222220;

  /* Text on light -------------------------------------------------------- */
  --text-primary:         #111110;              /* Headings, strong body */
  --text-body:            #2a2a28;              /* Normal body copy */
  --text-secondary:       #555552;              /* Supporting copy, labels */
  --text-tertiary:        #999895;              /* Captions, footnotes, placeholders */

  /* Text on dark --------------------------------------------------------- */
  --text-dark-primary:    #f5f3ef;
  --text-dark-body:       #c8c4be;
  --text-dark-secondary:  #777470;
  --text-dark-tertiary:   #444240;

  /* Status ---------------------------------------------------------------
     Feedback states. Not brand colour, but shared by several pages, so they
     belong here rather than being re-invented on each one. */
  --success:              #1e7e34;
  --success-surface:      #eaf5ee;
  --success-line:         #b2dfbc;
  --error:                #c0392b;
  --error-surface:        #fdecea;
  --error-line:           #f5c6c2;
  --warning:              #b85c00;
  --info:                 #506caa;
  --info-line:            #d0dde8;

  /* Accent tints ---------------------------------------------------------- */
  --accent-surface:       #fff8f5;              /* Warm orange wash behind callouts */
  --accent-line:          #ffd8c7;              /* Orange-tinted border */

  /* Energy performance certificate ----------------------------------------
     A regulated A–G scale. These are not brand colours and must not be
     bent to the palette — a "C" has to look like a C on every listing. */
  --epc-a:                #1e7e34;
  --epc-b:                #28a745;
  --epc-c:                #ffc107;
  --epc-d:                #fd7e14;
  --epc-e:                #dc3545;
  --epc-f:                #9c1313;
  --epc-g:                #6b0f0f;

  /* Lines ---------------------------------------------------------------- */
  --line:                 #e4e0da;              /* Borders and dividers */
  --line-dark:            #2e2e2b;

  /* Typography ----------------------------------------------------------- */
  /* One family for the whole site. Weight and tracking carry the hierarchy,
     not a second typeface. --font-display stays a separate name so a display
     face can be introduced later by changing one line rather than 31 pages. */
  --font-display:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                          Roboto, Helvetica, Arial, sans-serif;
  --font-body:            var(--font-display);

  /* Size scale.
     Ten steps, and nothing between them. The site previously used 86
     distinct sizes including 9px, 9.5px, 11.5px and 16.5px — drift, not
     design. The floor is 12px; 11px survives only for uppercase tracked
     eyebrows, where the letterforms are large relative to the point size. */
  --text-eyebrow:         11px;                 /* UPPERCASE + --track-eyebrow only */
  --text-xs:              12px;                 /* Caption, footnote, table meta */
  --text-sm:              14px;                 /* Secondary copy, labels, cells */
  --text-base:            16px;                 /* Body copy */
  --text-md:              18px;                 /* Lead paragraph */
  --text-lg:              20px;                 /* Small heading, stat value */

  /* Large FIXED steps, for numbers and UI that must fit a fixed container.
     A card price or a stat figure is data, not a headline: it sits in a
     column of known width next to a call to action, so it must not scale
     with the viewport the way a heading does. Headings use the clamps
     below; values use these. */
  --text-xl:              22px;                 /* Card price, inline figure */
  --text-2xl:             26px;                 /* Key figure, modal price */
  --text-3xl:             32px;                 /* Section stat */
  --text-4xl:             40px;                 /* Large stat */
  --text-5xl:             48px;                 /* Hero stat */

  /* Headings are clamps, so they scale with the viewport instead of being
     fixed. Each range was set to cover the sizes the pages already used, so
     adopting the scale does not shrink anything that was deliberate. */
  --h3:                   clamp(18px, 2vw,   24px);
  --h2:                   clamp(26px, 3.2vw, 36px);
  --h1:                   clamp(32px, 4.4vw, 52px);
  --text-display:         clamp(40px, 6vw,   80px);   /* Hero only */

  /* Weight.
     Four steps. Inter Light (300) is reserved for 24px and above — below
     that it reads thin and washes out against the page. */
  --weight-body:          400;
  --weight-medium:        500;                  /* UI, emphasis */
  --weight-semibold:      600;                  /* Subheads, buttons */
  --weight-bold:          700;                  /* Headings */
  --weight-light:         300;                  /* Display sizes only */

  /* Line height. Five steps, down from 28. */
  --lh-none:              1;                    /* Buttons, badges, single-line */
  --lh-tight:             1.1;                  /* Display, H1 */
  --lh-heading:           1.25;                 /* H2, H3 */
  --lh-body:              1.6;                  /* Body copy */
  --lh-relaxed:           1.75;                 /* Long-form reading */
  --line-height-body:     var(--lh-body);       /* legacy name */

  /* Letter spacing. Five steps, down from 58. */
  --track-tight:          -0.02em;              /* Large headings */
  --track-snug:           -0.01em;              /* Mid-size headings, stat values */
  --track-normal:         0;
  --track-wide:           0.06em;               /* Small caps-ish labels */
  --track-eyebrow:        0.18em;               /* UPPERCASE eyebrows */

  /* Spacing -------------------------------------------------------------- */
  --space-xs:             8px;
  --space-sm:             16px;
  --space-md:             24px;
  --space-lg:             40px;
  --space-xl:             64px;
  --space-2xl:            96px;

  /* Layout --------------------------------------------------------------- */
  --max-width:            1240px;               /* Elementor Site Settings → Content Width */
  --page-pad:             60px;

  /* Motion --------------------------------------------------------------- */
  --ease:                 cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out:             cubic-bezier(0, 0, 0.3, 1);
  --dur-fast:             150ms;
  --dur-base:             220ms;
  --dur-slow:             350ms;
}


/* ──────────────────────────────────────────────────────────────────────────
   LAYER 2 — LEGACY ALIASES.

   Pages written before this file existed use their own names for the same
   things: --orange for the accent, --black for primary text, --border for
   --line, and so on. Rather than rewrite 30 pages at once, those names are
   defined here as references to the canonical tokens above.

   Consequence: changing --accent in Layer 1 moves every page that uses any
   of these names — provided the page does not define the name itself. As
   pages are migrated, their local :root blocks are removed and they fall
   through to these values.

   This layer shrinks over time. It is not permanent.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  /* accent */
  --orange:        var(--accent);
  --orange-h:      var(--accent-hover);
  --orange-hover:  var(--accent-hover);
  --orange-d:      var(--accent-hover);
  --orange-dk:     var(--accent-hover);
  --orange-tint:   var(--accent-muted);
  --orange-light:  var(--accent-muted);
  --orange-ring:   var(--accent-ring);

  /* text on light */
  --black:         var(--text-primary);
  --ink:           var(--text-primary);
  --dark:          var(--text-primary);
  --text:          var(--text-secondary);
  --body:          var(--text-body);
  --text-sec:      var(--text-secondary);
  --muted:         var(--text-tertiary);
  --text-muted:    var(--text-tertiary);
  --label:         var(--text-tertiary);
  --grey:          var(--text-secondary);
  --grey-lt:       var(--text-tertiary);

  /* text on dark */
  --dark-body:     var(--text-dark-body);
  --dark-sec:      var(--text-dark-secondary);
  --dark-tert:     var(--text-dark-tertiary);

  /* surfaces */
  --off-white:     #ffffff;
  --white:         #ffffff;
  --page:          #ffffff;
  --cream:         var(--surface-page);
  --bg:            var(--surface-page);
  --card:          var(--surface-raised);
  --warm-mid:      var(--surface-raised);
  --warm-low:      var(--surface-sunken);
  --soft:          var(--surface-sunken);
  --raised:        var(--surface-raised);
  --sunken:        var(--surface-sunken);
  --dark-bg:       var(--surface-dark);
  --dark-mid:      var(--surface-dark-2);
  --dark-3:        var(--surface-dark-3);
  --charcoal:      #4a4642;

  /* lines */
  --border:        var(--line);
  --line-dk:       var(--line-dark);
  --dark-border:   var(--line-dark);
  --faint:         var(--surface-sunken);

  /* type */
  --font:          var(--font-body);
  --display:       var(--font-display);   /* the name means headings, so point it at the display face */

  /* layout */
  --max-w:         var(--max-width);
  --max:           var(--max-width);
  --pad:           var(--page-pad);
  --gap:           var(--space-md);

  /* status — now aliases onto the canonical status tokens in Layer 1 */
  --green:         var(--success);
  --red:           var(--error);
  --amber:         var(--warning);
  --blue:          var(--info);
}


/* ──────────────────────────────────────────────────────────────────────────
   LAYER 3 — COMPONENTS.

   Carried over from style_v14032026.css §16 and the repository's patterns.
   Every value here reads from Layer 1; none hardcodes a brand colour.
   ────────────────────────────────────────────────────────────────────────── */

/* Document background ---------------------------------------------------
   Set once, here. Page files used to each declare their own body rule and
   had drifted across six different expressions for the same intent. A page
   that genuinely wants a different ground (the rental page is dark) still
   overrides it locally — its inline rule wins over this stylesheet. */
body { background: var(--page-background); }

/* Eyebrow — small uppercase label above a section heading -------------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-sm);
}
.eyebrow::before,
.eyebrow::after {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--accent);
  flex-shrink: 0;
}
.eyebrow.center    { justify-content: center; }
.eyebrow.no-line::before,
.eyebrow.no-line::after { display: none; }

/* Section title -------------------------------------------------------- */
.stitle,
.section-title {
  font-family: var(--font-display);
  font-size: var(--h2);
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.stitle.dk,
.section-title.light { color: var(--text-dark-primary); }
.stitle.center,
.section-title.center { text-align: center; }

/* Buttons -------------------------------------------------------------- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--accent);
  color: #fff;
  padding: 15px 38px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-decoration: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background var(--dur-base), transform var(--dur-fast);
}
.btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  color: #fff;
}

.btn-ghost-dark {
  display: inline-block;
  padding: 13px 36px;
  border: 1px solid #888880;
  background: transparent;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--text-dark-primary);
  text-decoration: none;
  white-space: nowrap;
  border-radius: 0;
  transition: border-color var(--dur-base), color var(--dur-base), background var(--dur-base);
}
.btn-ghost-dark:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.btn-outline-dark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: var(--text-primary);
  padding: 13px 30px;
  border: 1px solid var(--line);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.05em;
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--dur-base), color var(--dur-base);
}
.btn-outline-dark:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Hero ----------------------------------------------------------------- */
.hero h1 {
  font-family: var(--font-display);
  font-size: var(--h1);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.hero h1 em {
  font-style: italic;
  color: var(--accent);
}
.hero-sub {
  font-size: var(--text-base);
  font-weight: 300;
  line-height: 1.8;
}

/* Stat bar ------------------------------------------------------------- */
.stat-bar { border-top: 1px solid var(--line-dark); }
.stat-num {
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--text-dark-primary);
  letter-spacing: -0.03em;
}
.stat-num sup   { color: var(--accent); }
.stat-label {
  font-weight: 300;
  color: var(--text-dark-body);
}

/* Banner strip --------------------------------------------------------- */
.banner-strip {
  background: var(--accent);
  color: #fff;
  font-weight: 500;
}
.banner-strip a { color: #fff; font-weight: 600; }

/* Pillar cards --------------------------------------------------------- */
.pillar { background: var(--surface-raised); }
.pillar-num,
.pillar-n {
  color: var(--text-tertiary);
  font-size: 11px;
  letter-spacing: 0.15em;
}
.pillar h3,
.pillar-title {
  font-family: var(--font-display);
  font-size: var(--h3);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}
.pillar p,
.pillar-body {
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.75;
  font-weight: 300;
}

/* Process -------------------------------------------------------------- */
.proc-toggle {
  padding: 15px 32px;
  font-size: 15px;
  font-weight: 500;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  color: var(--text-primary);
  letter-spacing: 0.02em;
  border-radius: 0;
  cursor: pointer;
}
.proc-toggle:hover,
.proc-toggle.open {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--surface-sunken);
}
.pstep-title,
.proc-step h4 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
}
.pstep-desc,
.proc-step p {
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.7;
  font-weight: 300;
}

/* Village cards -------------------------------------------------------- */
.vcard {
  border-left: 3px solid transparent;
  text-decoration: none;
  transition: background var(--dur-base), border-color var(--dur-base), transform var(--dur-base);
}
.vcard:hover {
  background: var(--surface-dark-3);
  border-left-color: var(--accent);
  transform: translateY(-2px);
}
.vcard::after { display: none; }
.vc-link,
.vcard-link { color: var(--text-dark-tertiary); }
.vcard:hover .vc-link,
.vcard:hover .vcard-link { color: var(--accent); }

/* FAQ ------------------------------------------------------------------ */
.faq-q {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  color: var(--text-primary);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}
.faq-q:hover  { color: var(--accent); }
.faq-icon     { color: var(--accent); }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-a {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.75;
  font-weight: 300;
}
.faq-a a {
  color: var(--accent);
  border-bottom: 1px solid rgba(255, 92, 11, 0.3);
}

/* Referral ------------------------------------------------------------- */
.referral { background: var(--surface-dark); }
.ref-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.ref-title {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--text-dark-primary);
  letter-spacing: -0.01em;
}
.ref-sub {
  font-size: 14px;
  color: var(--text-dark-body);
  font-weight: 300;
  line-height: 1.7;
}
.ref-sub strong {
  color: var(--accent);
  font-weight: 500;
}

/* Resource cards ------------------------------------------------------- */
.rcard {
  background: var(--surface-raised);
  text-decoration: none;
  border: 1px solid transparent;
  transition: border-color var(--dur-base), transform var(--dur-base), box-shadow var(--dur-base);
}
.rcard:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.07);
}
.rcard h4 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-primary);
}
.rcard p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.65;
  font-weight: 300;
}
.rc-link  { font-size: var(--text-xs); font-weight: 500; color: var(--accent); }
.rc-icon  { color: var(--accent); }

/* Fluent Forms — global resets only ------------------------------------
   Individual forms are styled in the Fluent Forms CSS tabs. This block only
   stops a sandy background leaking in from the theme. */
.fluentform .ff-form-wrap,
.fluentform .ff-form-body,
.fluentform .ff-t-container,
.fluentform .ff-t-cell,
.fluentform .ff-el-group,
.fluentform > div,
.fluentform form,
.fluentform .ff-column,
.fluentform .ff-step-body,
.fluentform .ff-message-success,
.fluentform .ff-el-input--content {
  background: transparent;
  background-color: transparent;
}
.fluentform .ff-el-form-control {
  border-radius: 0;
  box-shadow: none;
  outline: none;
}
.fluentform .ff-el-form-control:focus {
  border-color: var(--accent);
  box-shadow: none;
  outline: none;
}
.fluentform .ff-btn-submit,
.fluentform button[type="submit"] {
  background: var(--accent);
  background-color: var(--accent);
  border: none;
  border-radius: 0;
}
.fluentform .ff-btn-submit:hover,
.fluentform button[type="submit"]:hover {
  background: var(--accent-hover);
  background-color: var(--accent-hover);
}

/* Form footnotes ------------------------------------------------------- */
.brief-form-note,
.sp-form-note,
.brief-tc-note,
.sp-tc-note {
  font-size: 11px;
  color: var(--text-tertiary);
  text-align: center;
  line-height: 1.6;
  font-weight: 400;
}
.brief-form-note,
.sp-form-note   { margin-top: var(--space-sm); }
.brief-tc-note,
.sp-tc-note     { margin-top: 4px; }

.brief-tc-note a,
.sp-tc-note a,
a.form-note-link {
  color: var(--text-tertiary);
  text-decoration: underline;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  border-bottom: none;
  transition: color var(--dur-base);
}
.brief-tc-note a:hover,
.sp-tc-note a:hover,
a.form-note-link:hover { color: var(--accent); }


/* ──────────────────────────────────────────────────────────────────────────
   LAYER 4 — SMALL SCREENS AND TOUCH.

   Three iPhone behaviours the desktop layout cannot see.

   1. Safari resizes text on rotation unless text-size-adjust is pinned. A
      page read in landscape comes back with headings a size larger than the
      scale says they are.
   2. Safari zooms the whole page in when a field it is about to focus is
      under 16px, and does not zoom back out afterwards. The visitor is left
      on a page 1.2x too wide with a horizontal scrollbar. Every field is
      16px on a phone; the label above it keeps its own size.
   3. A replaced element wider than the screen pushes the document sideways.
      Capping all of them removes the whole class of bug rather than each
      instance as it appears.

   Tap targets: 44px is Apple's minimum for a control you hit with a thumb.
   Applied to the controls that were under it, not to text links, where a
   larger box would change the layout rather than the hit area.
   ────────────────────────────────────────────────────────────────────────── */

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

img,
svg,
video,
canvas,
iframe,
embed,
object { max-width: 100%; }

img,
video { height: auto; }

@media (max-width: 600px) {

  /* !important is deliberate. Pages set their field size with a class, which
     beats a bare element selector, and their <style> block sits later in the
     document than this file. The 16px floor is not a style choice that a page
     may take a different view on: below it, Safari zooms the page and leaves
     it zoomed. */
  input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='hidden']),
  select,
  textarea { font-size: 16px !important; }

  .lm-toggle,
  .sf-toggle,
  .proc-toggle { min-height: 44px; }
}

/* Carousel dots are 8px of paint. The hit area is grown with a transparent
   pseudo-element so the dot still looks like a dot. */
.intl-dot { position: relative; }
.intl-dot::after {
  content: '';
  position: absolute;
  top: -18px;
  right: -8px;
  bottom: -18px;
  left: -8px;
}


/* ──────────────────────────────────────────────────────────────────────────
   RESPONSIVE — tokens only. Components inherit automatically.
   ────────────────────────────────────────────────────────────────────────── */

@media (max-width: 960px) {
  :root {
    --page-pad:  32px;
    --space-2xl: 72px;
  }
}

@media (max-width: 600px) {
  :root {
    --page-pad:  20px;
    --space-2xl: 56px;
  }
  .banner-strip svg { display: none; }
}