/* ══════════════════════════════════════════════════════════════════
   Tréppan Living — canonical site footer
   Shared across every page so the footer is identical everywhere.
   Linked AFTER each page's inline <style>, so it is authoritative.
   Relies on the design tokens (--gold, --cream, --serif, --section-h …)
   present in every page's :root.
   ══════════════════════════════════════════════════════════════════ */

/* ─── Global typography hygiene (loaded on every page) ─── */
/* Balance headline line-lengths and avoid single-word "widow" last lines. */
h1,h2,h3,h4,.display,.hero-title,.pf-name,.sh-title{text-wrap:balance}
p,li,blockquote,.body-text,.hero-sub,.hero-kicker,.card-body,.sec-intro{text-wrap:pretty}

/* Dark editorial green — matches the "What We Measure" section core (#12201A), an intentional green panel rather than a black box */
.site-footer{background:#12201A;padding:0 0 40px;color:rgba(240,232,220,.5)}
.site-footer .wrap{max-width:1320px;margin:0 auto;padding:0 var(--section-h,52px);width:100%}

/* Editorial closing cap */
.footer-cap{text-align:center;padding:92px 0 74px;margin-bottom:66px;border-bottom:1px solid rgba(240,232,220,.08)}
/* Official Tréppan Living logo — discreet signature (text kept in DOM for screen readers) */
.footer-cap-eyebrow{display:block;width:158px;height:27px;margin:0 auto 30px;background:url('media/logo-white.png') center center/contain no-repeat;text-indent:-9999px;overflow:hidden;white-space:nowrap;opacity:.92}
.footer-cap-line{font-family:var(--serif);font-size:clamp(30px,4.6vw,62px);font-weight:300;line-height:1.04;letter-spacing:-.022em;color:var(--cream)}
.footer-cap-line em{font-style:italic;color:var(--gold-lt)}
.footer-cap-cta{display:inline-flex;align-items:center;gap:10px;margin-top:36px;font-family:var(--sans);font-size:12.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--cream);padding-bottom:7px;border-bottom:1px solid rgba(212,168,90,.45);transition:gap .3s ease,color .3s ease,border-color .3s ease}
.footer-cap-cta span{transition:transform .3s ease}
.footer-cap-cta:hover{color:var(--gold-lt);border-color:var(--gold-lt)}
.footer-cap-cta:hover span{transform:translateX(6px)}

/* Columns */
.footer-grid{display:grid;grid-template-columns:2.2fr 1fr 1fr 1.3fr;gap:56px;margin-bottom:72px}
.footer-brand{display:block;width:150px;height:26px;margin-bottom:22px;background:url('media/logo-white.png') left center/contain no-repeat;text-indent:-9999px;overflow:hidden;white-space:nowrap;opacity:.9}
.footer-desc{font-family:var(--sans);font-size:13px;font-weight:300;line-height:1.7;color:rgba(240,232,220,.4);max-width:340px}
.footer-col{display:flex;flex-direction:column;align-items:flex-start}
.footer-col-title{font-family:var(--sans);font-size:var(--label-size,11px);font-weight:500;letter-spacing:var(--label-ls,.36em);text-transform:uppercase;color:var(--gold);margin-bottom:20px}
.footer-col a{position:relative;display:inline-block;font-family:var(--sans);font-size:13px;font-weight:300;color:rgba(240,232,220,.45);padding:4px 0;transition:color .3s}
.footer-col a:hover{color:var(--cream)}
.footer-col a::after{content:"";position:absolute;left:0;bottom:2px;width:0;height:1px;background:var(--gold-lt);transition:width .32s ease}
.footer-col a:hover::after{width:100%}

/* Social — restrained icon row inside the Connect column */
.footer-social{display:flex;flex-wrap:wrap;gap:16px;margin-top:22px}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;color:rgba(240,232,220,.42);transition:color .3s ease,transform .3s ease}
.footer-social a:hover,.footer-social a:focus-visible{color:var(--gold-lt);transform:translateY(-1px)}
.footer-social svg{width:17px;height:17px;display:block;fill:currentColor}

/* Bottom bar */
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:32px;border-top:1px solid rgba(240,232,220,.07);font-size:12px;font-weight:300;color:rgba(240,232,220,.3)}
.footer-bottom .motto{font-family:var(--serif);font-style:italic;letter-spacing:.08em;font-size:13px;color:rgba(240,232,220,.5)}

@media(max-width:1100px){.footer-grid{grid-template-columns:1fr 1fr;gap:40px}}
@media(max-width:720px){
  .footer-grid{grid-template-columns:1fr;gap:32px}
  .footer-bottom{flex-direction:column;gap:12px;text-align:center}
  .footer-cap{padding:60px 0 50px;margin-bottom:48px}
}

/* ══════════════════════════════════════════════════════════════════
   GLOBAL FULL-VIEWPORT SECTION RHYTHM
   Every top-level <section> is at least one full viewport tall — a "chapter"
   composed as a centred editorial spread. MINIMUM height only: content taller
   than the viewport expands naturally (may span 2+ screens). Sections that set
   their own composition (e.g. the lower-left hero, flex heroes) keep it via
   higher specificity; only the min-height is forced.
   ══════════════════════════════════════════════════════════════════ */
body > section{
  min-height:100vh !important;   /* fallback + force over any per-section min-height */
  min-height:100dvh !important;  /* modern: adapts to mobile browser chrome */
  display:flex;
  flex-direction:column;
  justify-content:center;
}
/* editorial image/text splits fill the whole height (image spans it, copy centres) */
body > section.esplit{display:block}
body > section.esplit .esplit-inner{min-height:100vh;min-height:100dvh}

/* ══════════════════════════════════════════════════════════════════
   GLASS BUTTONS — frosted "liquid glass" for clickable pill CTAs.
   Loaded after each page's inline styles, so these win site-wide.
   Shared shell = blur the backdrop + a bright rim + soft depth.
   Filled variants keep their brand colour as a translucent tint;
   ghost / outline become clear glass. Browsers without color-mix() or
   backdrop-filter simply fall back to the page's original solid buttons.
   ══════════════════════════════════════════════════════════════════ */
.btn,.gateway-btn,.gpath{
  -webkit-backdrop-filter:blur(16px) saturate(1.7);
  backdrop-filter:blur(16px) saturate(1.7);
  border:1px solid rgba(255,255,255,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -8px 14px -10px rgba(0,0,0,.4),0 10px 28px -12px rgba(0,0,0,.5);
  text-shadow:0 1px 10px rgba(0,0,0,.22);
  transition:background .35s ease,border-color .35s ease,transform .35s ease,box-shadow .35s ease,color .35s ease;
}
/* filled → the button's own colour, made translucent */
.btn-gold,.gateway-btn{background:color-mix(in srgb,var(--gold,#B8893A) 44%,transparent);color:#fff}
.btn-accent,.btn-ember{background:color-mix(in srgb,var(--accent,#B8893A) 44%,transparent);color:#fff}
.btn-dark{background:color-mix(in srgb,var(--ink,#0B1710) 58%,transparent);color:var(--cream,#F0E8DC)}
.gpath-you{background:color-mix(in srgb,var(--you,#8B1A1A) 48%,transparent);color:#fff}
.gpath-life{background:color-mix(in srgb,var(--life,#3A5878) 48%,transparent);color:#fff}
.gpath-planet{background:color-mix(in srgb,var(--planet,#5A7A3D) 48%,transparent);color:#fff}
/* ghost / outline → clear glass */
.btn-ghost-light{background:rgba(255,255,255,.12);color:var(--cream,#F0E8DC);border-color:rgba(255,255,255,.32)}
.btn-ghost-accent{background:color-mix(in srgb,var(--accent-lt,#D4A85A) 22%,transparent);color:var(--cream,#F0E8DC);border-color:color-mix(in srgb,var(--accent-lt,#D4A85A) 55%,transparent)}
.btn-ghost-dark,.btn-outline{background:rgba(255,255,255,.42);color:var(--ink,#0B1710);border-color:rgba(20,42,28,.16);text-shadow:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 8px 22px -12px rgba(20,42,28,.35)}
/* hover — brighter tint, brighter rim, small lift */
.btn:hover,.gateway-btn:hover,.gpath:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 16px 38px -12px rgba(0,0,0,.55)}
.btn-gold:hover,.gateway-btn:hover{background:color-mix(in srgb,var(--gold,#B8893A) 60%,transparent);color:#fff}
.btn-accent:hover,.btn-ember:hover{background:color-mix(in srgb,var(--accent,#B8893A) 60%,transparent);color:#fff}
.btn-dark:hover{background:color-mix(in srgb,var(--ink,#0B1710) 72%,transparent)}
.btn-ghost-light:hover{background:rgba(255,255,255,.22);color:#fff;border-color:rgba(255,255,255,.5)}
.btn-ghost-accent:hover{background:color-mix(in srgb,var(--accent-lt,#D4A85A) 34%,transparent);color:#fff}
.btn-ghost-dark:hover,.btn-outline:hover{background:rgba(255,255,255,.62);color:var(--ink,#0B1710);border-color:rgba(20,42,28,.28)}
@media(prefers-reduced-motion:reduce){.btn:hover,.gateway-btn:hover,.gpath:hover{transform:none}}