@font-face{font-family:'Cormorant Garamond';src:url('/fonts/CormorantGaramond-700-normal-latin-ext.woff2')format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Cormorant Garamond';src:url('/fonts/CormorantGaramond-700-normal-latin.woff2')format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Cormorant Garamond';src:url('/fonts/CormorantGaramond-700-italic-latin-ext.woff2')format('woff2');font-weight:700;font-style:italic;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Cormorant Garamond';src:url('/fonts/CormorantGaramond-700-italic-latin.woff2')format('woff2');font-weight:700;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'IBM Plex Sans';src:url('/fonts/IBMPlexSans-400-normal-latin-ext.woff2')format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'IBM Plex Sans';src:url('/fonts/IBMPlexSans-400-normal-latin.woff2')format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'IBM Plex Sans';src:url('/fonts/IBMPlexSans-700-normal-latin-ext.woff2')format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'IBM Plex Sans';src:url('/fonts/IBMPlexSans-700-normal-latin.woff2')format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--color-primary:#de6907;--color-primary-soft:#fcf0e6;--color-accent:#c3955e;--color-secondary:#03212b;--color-text:#0f172b;--color-muted:#436a79;--color-bg:#fbf8f1;--color-bg-alt:#ebe4d6;--color-surface:#ffffff;--color-border:#e1d6c2;--color-on-primary:#0b0f13;--color-on-accent:#0b0f13;--color-on-dark:#ffffff;--color-accent-readable:#8c6b43;--footer-bg:#ebe4d6;--footer-text:#0f172b;--footer-muted:#436a79;--footer-border:#e1d6c2;--space-section-y:clamp(4rem,7vw,6.5rem);--space-section-y-lg:clamp(5.5rem,10vw,9.5rem);--space-container-x:clamp(1.25rem,3vw,2rem);--space-gap:1.5rem;--spacing-section:clamp(4rem,7vw,6.5rem);--s-1:0.25rem;--s-2:0.5rem;--s-3:0.75rem;--s-4:1rem;--s-5:1.5rem;--s-6:2rem;--s-7:2.5rem;--s-8:3rem;--s-9:4rem;--s-10:5rem;--s-11:6rem;--s-12:8rem;--radius-sm:0.25rem;--radius:0.375rem;--radius-lg:0.5rem;--radius-pill:999px;--shadow:0 1px 3px rgba(15,23,42,0.04);--shadow-lg:0 4px 14px rgba(15,23,42,0.08);--font-heading:'Cormorant Garamond',serif;--font-body:'IBM Plex Sans',sans-serif;--font-accent:var(--font-heading);--container-width:1200px;--fs-display:clamp(3.25rem,2rem + 5vw,6.5rem);--fs-h1:clamp(2.5rem,1.7rem + 3.4vw,4.5rem);--fs-h2:clamp(2rem,1.4rem + 2.6vw,3.25rem);--fs-h3:clamp(1.375rem,1.15rem + 0.7vw,1.625rem);--fs-body:clamp(1.0625rem,1rem + 0.25vw,1.1875rem);--fs-small:0.875rem;--tracking-display:-0.04em;--tracking-heading:-0.022em;--leading-display:0.98;--leading-heading:1.08;--leading-body:1.65;--measure:65ch}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{font-size:clamp(15px,0.95rem + 0.1vw,17px);scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{font-family:var(--font-body);color:var(--color-text);background:var(--color-bg);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"kern","liga","ss01"}img,svg,video{display:block;max-width:100%;height:auto}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit;color:inherit}ul,ol{list-style:none}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);line-height:var(--leading-heading);letter-spacing:var(--tracking-heading);color:var(--color-text);text-wrap:balance}h1{line-height:var(--leading-display);letter-spacing:var(--tracking-display)}p{margin:0;text-wrap:pretty;max-width:var(--measure)}::selection{background:var(--color-primary);color:var(--color-on-primary)}:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:absolute;left:-9999px;top:0;z-index:2147483646;background:var(--color-primary);color:var(--color-on-primary);padding:var(--s-3) var(--s-4);border-radius:0 0 var(--radius-sm) 0;font-weight:600;text-decoration:none}.skip-link:focus{left:0}.container{max-width:var(--container-width);margin-inline:auto;padding-inline:var(--space-container-x)}.legal-page{max-width:min(72ch,100%);margin-inline:auto;padding:clamp(4.5rem,9vw,7rem) var(--space-container-x) clamp(3.5rem,7vw,5.5rem);color:var(--color-text)}.legal-page>section+section{margin-top:clamp(2rem,4vw,3rem)}.legal-page h1{font-size:var(--fs-h1);margin-bottom:clamp(1.25rem,2.5vw,2rem)}.legal-page h2{font-size:var(--fs-h2);margin-top:var(--s-6);margin-bottom:var(--s-2)}.legal-page h3{font-size:var(--fs-h3);margin-top:var(--s-5);margin-bottom:var(--s-2)}.legal-page p{margin-bottom:var(--s-4);max-width:none;line-height:var(--leading-body)}.legal-page ul,.legal-page ol{margin:0 0 var(--s-4);padding-left:var(--s-5);list-style:revert}.legal-page li{margin-bottom:var(--s-2);line-height:var(--leading-body)}.legal-page a{color:var(--color-primary);text-decoration:underline;text-underline-offset:2px}.legal-page:is(h1,h2,h3)+p{margin-top:0}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);padding:var(--s-3) var(--s-5);border-radius:var(--radius-pill);font-weight:600;font-size:1rem;line-height:1.2;border:1.5px solid transparent;cursor:pointer;transition:transform 0.15s,box-shadow 0.15s,background 0.15s,color 0.15s,filter 0.15s;text-decoration:none;white-space:nowrap}.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0) scale(0.98)}.btn:focus-visible{outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--color-primary) 30%,transparent)}.btn--primary:focus-visible{box-shadow:var(--shadow-lg),0 0 0 4px color-mix(in srgb,var(--color-primary) 30%,transparent)}.btn--on-dark:focus-visible{box-shadow:0 0 0 4px rgba(255,255,255,0.32)}.btn--primary{background:var(--color-primary);color:var(--color-on-primary);box-shadow:var(--shadow)}.btn--primary:hover{box-shadow:var(--shadow-lg)}.btn--secondary{background:var(--color-surface);color:var(--color-primary);border-color:var(--color-primary)}.btn--secondary:hover{background:var(--color-primary);color:var(--color-on-primary);border-color:var(--color-primary)}.btn--ghost{background:transparent;color:var(--color-text);border-color:transparent}.btn--ghost:hover{background:var(--color-bg-alt)}.page [data-comp] .btn--ghost{color:inherit}.page [data-comp] .btn--ghost:hover{background:color-mix(in srgb,currentColor 12%,transparent)}.btn--on-dark{background:rgba(255,255,255,0.12);color:var(--color-on-dark);border-color:rgba(255,255,255,0.24);backdrop-filter:blur(8px)}.btn--on-dark:hover{background:rgba(255,255,255,0.2)}.btn--sm{padding:var(--s-2) var(--s-4);font-size:0.875rem}.btn--lg{padding:var(--s-4) var(--s-6);font-size:1.125rem}.sosei-credit{font:400 11px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;opacity:.5;color:inherit;text-decoration:none;margin-left:auto;white-space:nowrap;flex-shrink:0}.sosei-credit:hover{opacity:.8}.embed-wrap{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--color-bg-alt);box-shadow:var(--shadow-md);max-width:100%}.embed-wrap__frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}.embed-wrap__ratio--16x9{padding-top:56.25%}.embed-wrap__ratio--4x3{padding-top:75%}.embed-wrap__ratio--social{padding-top:120%;max-width:560px;margin-inline:auto}.embed-wrap__ratio--newsletter{padding-top:0;min-height:520px;background:var(--color-surface)}.embed-wrap__ratio--newsletter .embed-wrap__frame{position:relative;inset:auto;height:520px}.embed-wrap__ratio--audio{padding-top:0;min-height:152px;background:transparent;box-shadow:none}.embed-wrap__ratio--audio .embed-wrap__frame{position:relative;inset:auto;height:152px}.embed-wrap__ratio--audio-tall{padding-top:0;min-height:450px;background:transparent;box-shadow:none}.embed-wrap__ratio--audio-tall .embed-wrap__frame{position:relative;inset:auto;height:450px}.embed-wrap--widget{padding:var(--s-6) var(--s-5);min-height:280px;display:flex;flex-direction:column;justify-content:center;align-items:stretch}.embed-wrap__widget{width:100%}.embed-wrap__placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-3);text-align:center;padding:var(--s-5);background:var(--color-bg-alt);color:var(--color-text);z-index:1}.embed-wrap[data-embed-state="loaded"] .embed-wrap__placeholder{display:none}.embed-wrap[data-embed-state="pending"] .embed-wrap__frame[data-consent]:not([src]){visibility:hidden}.embed-wrap__placeholder-title{font-family:var(--font-heading);font-weight:600;font-size:1.05rem;margin:0}.embed-wrap__placeholder-body{color:var(--color-muted);font-size:0.9rem;margin:0;max-width:36ch}.embed-wrap__load{margin-top:var(--s-2)}.cookie-banner{position:fixed;bottom:1rem;left:1rem;right:1rem;max-width:600px;margin-inline:auto;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--s-4) var(--s-5);box-shadow:var(--shadow-lg);z-index:90;display:none;flex-direction:column;gap:var(--s-3)}.cookie-banner[data-visible="true"]{display:flex}.cookie-banner p{color:var(--color-muted);font-size:0.925rem;line-height:1.5}.cookie-actions{display:flex;gap:var(--s-2);flex-wrap:wrap}.cookie-btn{padding:var(--s-2) var(--s-4);border-radius:var(--radius-pill);font-size:0.9rem;font-weight:600;border:1.5px solid transparent;cursor:pointer;background:var(--color-surface);color:var(--color-text)}.cookie-btn--accept{background:var(--color-primary);color:var(--color-on-primary)}.cookie-btn--reject{background:var(--color-surface);color:var(--color-text);border-color:var(--color-border)}.page{min-height:100vh;display:flex;flex-direction:column}.page__main{flex:1}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}}@media (prefers-reduced-motion:no-preference){}

/* ── icon size floor (deterministic; components may scale up) ── */
.page .icon{display:inline-block;vertical-align:middle;width:1.5em;height:1.5em;flex:none}
.page li:has(.icon){list-style:none !important}
.page li:has(.icon)::before{content:none !important}

/* ── slot floor (deterministic typographic default for inner-role suffixes; components override) ── */
:where(.page) [class$="-eyebrow"]{font-family:var(--font-body);font-size:var(--fs-small);font-weight:600;letter-spacing:.12em;text-transform:uppercase;display:block;margin:0 0 var(--s-2)}
:where(.page) [class$="-title"],:where(.page) [class$="-heading"]{font-family:var(--font-heading);font-size:var(--fs-h2);line-height:var(--leading-heading);letter-spacing:var(--tracking-heading);text-wrap:balance;margin:0 0 var(--space-gap)}
:where(.page) [class$="-subtitle"],:where(.page) [class$="-subheading"]{font-size:var(--fs-body);line-height:var(--leading-body);opacity:.78;margin:0 0 var(--space-gap)}
:where(.page) [class$="-label"]{font-size:var(--fs-small);font-weight:600;letter-spacing:.04em}

/* ── utility floor (global accent-word/section-rule + empty-scrim fill; components override) ── */
:where(.page) .accent-word{color:var(--color-accent-readable);font-style:italic}
:where(.page) .section-rule{border:0;width:100%;height:1px;background:var(--color-border);opacity:.7;margin:var(--space-gap) 0}
:where(.page) [class$="-scrim"],:where(.page) [class$="-overlay"]{background:linear-gradient(105deg,rgba(0,0,0,.5),transparent 42%)}
:where(.page) [data-comp]:has([class$="-bg"])::before{background:linear-gradient(0deg,rgba(0,0,0,.82),rgba(0,0,0,.34) 55%,rgba(0,0,0,.1))}
:where(.page) h1,:where(.page) h2,:where(.page) h3,:where(.page) [class$="-headline"],:where(.page) [class$="-title"]{overflow-wrap:normal;hyphens:auto;text-wrap:balance}
:where(.page) [class$="-text"]{overflow-wrap:break-word}
:where(.page) [data-focal="top"]{object-position:center top!important}
:where(.page) [data-focal="bottom"]{object-position:center bottom!important}
:where(.page) [data-focal="left"]{object-position:left center!important}
:where(.page) [data-focal="right"]{object-position:right center!important}

/* ── tabs behavior-primitive floor (ADR-008; correctness only, AD styles the look) ── */
:where(.page) [data-tabs] [role="tab"]{cursor:pointer}
:where(.page) [role="tabpanel"][hidden]{display:none!important}

/* ── authored component library (experiment) ── */
/* hero (hero) */
.page [data-comp="hero"].hero {
  position: relative;
  width: 100%;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  margin-top: calc(-1 * 76px);
  padding-top: calc(76px + var(--space-section-y-lg));
  padding-bottom: var(--space-section-y-lg);
  overflow: hidden;
  color: var(--color-on-dark);
}

.page [data-comp="hero"] .hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page [data-comp="hero"] .hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
}

.page [data-comp="hero"] .hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.page [data-comp="hero"] .hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-container-x);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.page [data-comp="hero"] .hero-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: inherit;
  margin-bottom: var(--s-4);
}

.page [data-comp="hero"] .hero-headline {
  font-family: var(--font-heading);
  font-size: clamp(2.8rem, 6vw, 5.5rem);
  font-weight: 600;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--color-on-dark);
  max-width: min(660px, 90%);
  margin: 0 0 var(--s-5);
}

.page [data-comp="hero"] .hero-headline em {
  font-style: italic;
  font-weight: 300;
  color: var(--color-on-dark);
  opacity: 0.92;
}

.page [data-comp="hero"] .hero-sub {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--color-on-dark);
  opacity: 0.85;
  max-width: min(520px, 90%);
  margin: 0 0 var(--s-6);
}

.page [data-comp="hero"] .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-bottom: var(--s-8);
}

.page [data-comp="hero"] .hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6) var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  max-width: min(660px, 90%);
}

.page [data-comp="hero"] .hero-proof-item {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.page [data-comp="hero"] .hero-proof-num {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  font-weight: 600;
  line-height: 1;
  color: var(--color-primary);
}

.page [data-comp="hero"] .hero-proof-label {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--color-on-dark);
  opacity: 0.70;
  letter-spacing: 0.04em;
}

@media (max-width: 640px) {
  .page [data-comp="hero"].hero {
    min-height: 100svh;
    align-items: flex-end;
    padding-bottom: calc(var(--space-section-y) * 1.2);
  }
  .page [data-comp="hero"] .hero-headline {
    font-size: clamp(2.2rem, 8vw, 3rem);
  }
  .page [data-comp="hero"] .hero-proof {
    gap: var(--s-5) var(--s-6);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .page [data-comp="hero"] .hero-eyebrow,
  .page [data-comp="hero"] .hero-headline,
  .page [data-comp="hero"] .hero-sub,
  .page [data-comp="hero"] .hero-actions,
  .page [data-comp="hero"] .hero-proof {
    animation: hero-heroFadeUp 0.7s ease both;
  }
  .page [data-comp="hero"] .hero-headline { animation-delay: 0.08s; }
  .page [data-comp="hero"] .hero-sub      { animation-delay: 0.18s; }
  .page [data-comp="hero"] .hero-actions  { animation-delay: 0.28s; }
  .page [data-comp="hero"] .hero-proof    { animation-delay: 0.40s; }

  @keyframes hero-heroFadeUp {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}
/* pageBanner */
/* ============================================================
   pageBanner — compact inner-page header band
   Supports: bg image + scrim OR plain token background.
   Eyebrow + h1 title + optional subtitle, centred.
   ============================================================ */

.page [data-comp="pageBanner"].pageBanner {
  position: relative;
  width: 100%;
  min-height: clamp(11rem, 26vh, 18rem);
  display: flex;
  align-items: center;
  background-color: var(--color-bg-alt);
  overflow: hidden;
  color: var(--color-text);
}

/* When a media image is present the band goes dark */
.page [data-comp="pageBanner"].pageBanner:has(.pageBanner-media) {
  color: var(--color-on-dark);
}

/* ---- media (optional bg image) ---- */
.page [data-comp="pageBanner"] .pageBanner-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page [data-comp="pageBanner"] .pageBanner-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
}

/* ---- scrim overlay ---- */
.page [data-comp="pageBanner"] .pageBanner-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* ---- content wrapper ---- */
.page [data-comp="pageBanner"] .pageBanner-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-container-x);
  padding-top: var(--space-section-y);
  padding-bottom: var(--space-section-y);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}

/* ---- eyebrow ---- */
.page [data-comp="pageBanner"] .pageBanner-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: inherit;
  margin-bottom: var(--s-3);
}

/* When scrim is present the eyebrow stays accent — accent reads on dark too */

/* ---- title (h1) ---- */
.page [data-comp="pageBanner"] .pageBanner-title {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: inherit;
  margin: 0 0 var(--s-3);
  /* Signature left-rule device — centred heading gets a bottom rule instead
     to keep symmetry; we honour the brand bar via a bottom pseudo-element */
  position: relative;
  padding-bottom: var(--s-4);
}

.page [data-comp="pageBanner"] .pageBanner-title::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2.5rem;
  height: 3px;
  background: var(--color-primary);
  border-radius: var(--radius-sm);
}

/* Plain (no-image) band: title colour is the deep text */
.page [data-comp="pageBanner"] .pageBanner-title {
  color: var(--color-text);
}

/* When a scrim / dark image is present the parent carries color:on-dark
   and `inherit` propagates, but we also declare it explicitly for safety */
.page [data-comp="pageBanner"].pageBanner:has(.pageBanner-scrim) .pageBanner-title {
  color: var(--color-on-dark);
}

/* ---- subtitle ---- */
.page [data-comp="pageBanner"] .pageBanner-sub {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--color-muted);
  max-width: var(--measure);
  margin: 0;
}

.page [data-comp="pageBanner"].pageBanner:has(.pageBanner-scrim) .pageBanner-sub {
  color: var(--color-on-dark);
  opacity: 0.80;
}

/* ---- responsive ---- */
@media (max-width: 640px) {
  .page [data-comp="pageBanner"].pageBanner {
    min-height: clamp(9rem, 30vw, 14rem);
  }

  .page [data-comp="pageBanner"] .pageBanner-title {
    font-size: var(--fs-h2);
  }
}

/* statBand */
/* ── statBand ─────────────────────────────────────────────────────────── */

.page [data-comp="statBand"].statBand {
  background-color: var(--color-bg-alt);
  padding-block: var(--space-section-y);
}

.page [data-comp="statBand"] .statBand-inner {
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-container-x);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-gap);
}

.page [data-comp="statBand"] .statBand-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  flex: 1 1 160px;
  max-width: 220px;
  text-align: center;
  position: relative;
}

/* Thin vertical divider between items — decorative, accent colour */
.page [data-comp="statBand"] .statBand-item + .statBand-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15%;
  height: 70%;
  width: 1px;
  background-color: var(--color-border);
}

.page [data-comp="statBand"] .statBand-num {
  font-family: var(--font-heading);
  font-size: var(--fs-display);
  font-size: clamp(2.6rem, 5vw, 3.8rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--color-primary);
}

.page [data-comp="statBand"] .statBand-suffix {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 500;
  line-height: 1;
  color: inherit;
  /* Sits inline beside / just after the number — visually slightly smaller */
  vertical-align: baseline;
  margin-left: var(--s-1);
}

.page [data-comp="statBand"] .statBand-label {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  line-height: var(--leading-body);
  max-width: 16ch;
}

/* ── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .page [data-comp="statBand"] .statBand-inner {
    gap: calc(var(--space-gap) * 0.75);
  }

  .page [data-comp="statBand"] .statBand-item {
    flex: 1 1 140px;
  }

  /* Remove dividers on very small screens where items wrap tightly */
  .page [data-comp="statBand"] .statBand-item + .statBand-item::before {
    display: none;
  }
}

/* featureGrid */
/* =====================================================
   featureGrid — Responsive 3-col feature/service card grid
   Design-language: Tenerife Painters
   ===================================================== */

.page [data-comp="featureGrid"].featureGrid {
  background-color: var(--color-bg-alt);
  padding-block: var(--space-section-y);
}

.page [data-comp="featureGrid"] .featureGrid-inner {
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-container-x);
}

/* ── Header block ── */
.page [data-comp="featureGrid"] .featureGrid-header {
  margin-bottom: var(--space-gap);
  max-width: var(--measure);
}

.page [data-comp="featureGrid"] .featureGrid-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: inherit;
  margin-bottom: var(--s-3);
}

/* Section heading with left-orange-rule signature device */
.page [data-comp="featureGrid"] .featureGrid-title {
  position: relative;
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-text);
  padding-left: calc(0.6em + 3px);
  margin: 0;
}

.page [data-comp="featureGrid"] .featureGrid-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 3px;
  height: 28px;
  background-color: var(--color-primary);
  border-radius: var(--radius-sm);
}

/* ── Card grid ── */
.page [data-comp="featureGrid"] .featureGrid-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-gap);
}

/* ── Card ── */
.page [data-comp="featureGrid"] .featureGrid-card {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  border-left: 3px solid var(--color-primary);
  padding: var(--s-6) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  transition: box-shadow 220ms ease, transform 220ms ease;
}

.page [data-comp="featureGrid"] .featureGrid-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

/* ── Card icon ── */
.page [data-comp="featureGrid"] .featureGrid-card-icon {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 2.5rem;
  height: 2.5rem;
  color: inherit;
  flex-shrink: 0;
}

.page [data-comp="featureGrid"] .featureGrid-card-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.5;
}

/* ── Card title ── */
.page [data-comp="featureGrid"] .featureGrid-card-title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-text);
  margin: 0;
}

/* ── Card body ── */
.page [data-comp="featureGrid"] .featureGrid-card-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--color-muted);
  margin: 0;
  max-width: var(--measure);
}

/* ── Responsive: 2-col tablet ── */
@media (max-width: 1024px) {
  .page [data-comp="featureGrid"] .featureGrid-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Responsive: 1-col mobile ── */
@media (max-width: 600px) {
  .page [data-comp="featureGrid"] .featureGrid-grid {
    grid-template-columns: 1fr;
  }

  .page [data-comp="featureGrid"] .featureGrid-card {
    padding: var(--s-5) var(--s-4);
  }
}

/* splitFeature */
/* =========================================================
   splitFeature — Two-column editorial split
   ========================================================= */

.page [data-comp="splitFeature"].splitFeature {
  background-color: var(--color-bg);
  padding-block: var(--space-section-y);
  overflow: hidden;
}

/* Alternate band: when placed on a linen band */
.page [data-comp="splitFeature"].splitFeature + .splitFeature,
.page [data-comp="splitFeature"].splitFeature--alt {
  background-color: var(--color-bg-alt);
}

/* ── Inner container ─────────────────────────────────── */
.page [data-comp="splitFeature"] .splitFeature-inner {
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-container-x);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "media content";
  gap: 0;
  align-items: center;
}

/* Reverse modifier: image on the right */
.page [data-comp="splitFeature"].splitFeature--reverse .splitFeature-inner {
  grid-template-areas: "content media";
}

/* ── Media half ──────────────────────────────────────── */
.page [data-comp="splitFeature"] .splitFeature-media {
  grid-area: media;
  /* Pull flush to the viewport edge on the image side */
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  /* Slight negative margin to bleed toward edge */
  margin-inline-start: calc(-1 * var(--space-container-x));
  /* Give it a generous height that responds to the copy column */
  align-self: stretch;
  min-height: 420px;
}

.page [data-comp="splitFeature"].splitFeature--reverse .splitFeature-media {
  margin-inline-start: 0;
  margin-inline-end: calc(-1 * var(--space-container-x));
  border-radius: var(--radius-lg);
}

.page [data-comp="splitFeature"] .splitFeature-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Subtle zoom on hover for the container */
  transition: transform 480ms ease;
}

.page [data-comp="splitFeature"] .splitFeature-media:hover img {
  transform: scale(1.03);
}

/* ── Content half ────────────────────────────────────── */
.page [data-comp="splitFeature"] .splitFeature-content {
  grid-area: content;
  padding-inline: calc(var(--space-gap) * 1.5);
  padding-block: var(--space-gap);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

/* ── Eyebrow ─────────────────────────────────────────── */
.page [data-comp="splitFeature"] .splitFeature-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: inherit;
  margin-bottom: var(--s-3);
}

/* ── Section heading with left-orange-rule signature ── */
.page [data-comp="splitFeature"] .splitFeature-title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-text);
  margin: 0 0 var(--space-gap);
  padding-left: var(--s-4);
  position: relative;
}

.page [data-comp="splitFeature"] .splitFeature-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  height: 1.5em;
  width: 3px;
  background-color: var(--color-primary);
  border-radius: var(--radius-sm);
}

/* ── Body copy ───────────────────────────────────────── */
.page [data-comp="splitFeature"] .splitFeature-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--color-text);
  max-width: var(--measure);
  margin: 0 0 var(--space-gap);
}

/* ── Bullet list ─────────────────────────────────────── */
.page [data-comp="splitFeature"] .splitFeature-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-gap);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.page [data-comp="splitFeature"] .splitFeature-list-item {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--color-text);
  padding-left: var(--s-5);
  position: relative;
}

/* Accent tick mark using primary colour */
.page [data-comp="splitFeature"] .splitFeature-list-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--color-primary);
}

/* ── Actions (CTA row) ───────────────────────────────── */
.page [data-comp="splitFeature"] .splitFeature-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-1);
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 900px) {
  .page [data-comp="splitFeature"] .splitFeature-inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "media"
      "content";
  }

  .page [data-comp="splitFeature"].splitFeature--reverse .splitFeature-inner {
    grid-template-areas:
      "media"
      "content";
  }

  .page [data-comp="splitFeature"] .splitFeature-media {
    margin-inline-start: calc(-1 * var(--space-container-x));
    margin-inline-end: calc(-1 * var(--space-container-x));
    border-radius: var(--radius-sm);
    min-height: 320px;
    align-self: auto;
  }

  .page [data-comp="splitFeature"].splitFeature--reverse .splitFeature-media {
    margin-inline-start: calc(-1 * var(--space-container-x));
    margin-inline-end: calc(-1 * var(--space-container-x));
    border-radius: var(--radius-sm);
  }

  .page [data-comp="splitFeature"] .splitFeature-content {
    padding-inline: 0;
    padding-block: var(--space-gap) 0;
  }
}

@media (max-width: 480px) {
  .page [data-comp="splitFeature"] .splitFeature-media {
    min-height: 240px;
  }

  .page [data-comp="splitFeature"] .splitFeature-title {
    font-size: var(--fs-h3);
    padding-left: var(--s-3);
  }
}

/* =========================================================
   Motion
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .page [data-comp="splitFeature"] .splitFeature-media img {
    transition: transform 480ms ease;
  }
}

/* processSteps */
/* ===== processSteps ===== */

.page [data-comp="processSteps"].processSteps {
  background: var(--color-bg-alt);
  padding-block: var(--space-section-y);
}

.page [data-comp="processSteps"] .processSteps-inner {
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-container-x);
}

/* ── Header block ── */

.page [data-comp="processSteps"] .processSteps-header {
  margin-bottom: var(--space-gap);
}

.page [data-comp="processSteps"] .processSteps-title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-heading);
  color: var(--color-text);
  margin: 0;
  padding-left: var(--s-2);
  position: relative;
}

.page [data-comp="processSteps"] .processSteps-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  bottom: 0.1em;
  width: 3px;
  background: var(--color-primary);
  border-radius: var(--radius-sm);
}

/* ── Steps row ── */

.page [data-comp="processSteps"] .processSteps-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--space-gap);
  position: relative;
}

/* Thin accent connector rule between step cards — drawn as a
   pseudo on the steps grid container, visible only on wide layouts */
.page [data-comp="processSteps"] .processSteps-steps::before {
  content: "";
  position: absolute;
  top: calc(2.6rem + 0.5em); /* vertically aligns with centre of the numeral */
  left: calc(50% / var(--_cols, 4) + 1.5rem);
  right: calc(50% / var(--_cols, 4) + 1.5rem);
  height: 1px;
  background: var(--color-accent);
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
}

/* ── Individual step ── */

.page [data-comp="processSteps"] .processSteps-step {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  border-left: 3px solid var(--color-primary);
  padding: calc(var(--space-gap) * 1.1) calc(var(--space-gap) * 1.1) calc(var(--space-gap) * 1.1);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  position: relative;
  z-index: 1;
  transition: box-shadow 220ms ease, transform 220ms ease;
}

.page [data-comp="processSteps"] .processSteps-step:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

/* ── Step number ── */

.page [data-comp="processSteps"] .processSteps-step-num {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 4.5vw, 3.2rem);
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary);
  letter-spacing: var(--tracking-display);
  display: block;
  margin-bottom: var(--s-1);
}

/* Decorative suffix dot/period — rendered via the sibling accent colour */
.page [data-comp="processSteps"] .processSteps-step-num::after {
  content: ".";
  color: inherit;
  font-weight: 400;
}

/* ── Step heading ── */

.page [data-comp="processSteps"] .processSteps-step-title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-text);
  margin: 0;
}

/* ── Step body ── */

.page [data-comp="processSteps"] .processSteps-step-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--color-muted);
  margin: 0;
  max-width: var(--measure);
}

/* ── Responsive: collapse to single column on small screens ── */

@media (max-width: 640px) {
  .page [data-comp="processSteps"] .processSteps-steps {
    grid-template-columns: 1fr;
  }

  /* Hide the horizontal connector on single-column layout */
  .page [data-comp="processSteps"] .processSteps-steps::before {
    display: none;
  }

  .page [data-comp="processSteps"] .processSteps-step {
    padding: var(--space-gap);
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  .page [data-comp="processSteps"] .processSteps-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .page [data-comp="processSteps"] .processSteps-steps::before {
    display: none;
  }
}

/* testimonialGrid */
/* ============================================================
   testimonialGrid — 3-column client testimonial card grid
   Design-language: left-primary-rule cards, section heading
   with orange left-rule device, warm parchment bg, card hover-lift
   ============================================================ */

.page [data-comp="testimonialGrid"].testimonialGrid {
  background: var(--color-bg);
  padding-block: var(--space-section-y);
}

.page [data-comp="testimonialGrid"] .testimonialGrid-inner {
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-container-x);
}

/* ── Section header ── */
.page [data-comp="testimonialGrid"] .testimonialGrid-header {
  margin-bottom: var(--space-gap);
}

.page [data-comp="testimonialGrid"] .testimonialGrid-title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-heading);
  color: var(--color-text);
  margin: 0;
  padding-left: var(--s-4);
  position: relative;
}

.page [data-comp="testimonialGrid"] .testimonialGrid-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  bottom: 0.1em;
  width: 3px;
  background: var(--color-primary);
  border-radius: var(--radius-sm);
}

/* ── Card grid ── */
.page [data-comp="testimonialGrid"] .testimonialGrid-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-gap);
}

/* ── Individual card ── */
.page [data-comp="testimonialGrid"] .testimonialGrid-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  border-left: 3px solid var(--color-primary);
  padding: var(--s-6) var(--s-5) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  transition: box-shadow 220ms ease, transform 220ms ease;
}

.page [data-comp="testimonialGrid"] .testimonialGrid-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

/* ── Large decorative quote mark ── */
.page [data-comp="testimonialGrid"] .testimonialGrid-card-quote {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  line-height: 1;
  color: inherit;
  opacity: 0.55;
  margin: 0;
  margin-bottom: -0.5rem;
  user-select: none;
  pointer-events: none;
}

/* ── Body / review text ── */
.page [data-comp="testimonialGrid"] .testimonialGrid-card-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--color-text);
  max-width: var(--measure);
  margin: 0;
  flex: 1;
}

/* ── Star rating ── */
.page [data-comp="testimonialGrid"] .testimonialGrid-card-stars {
  display: flex;
  gap: var(--s-1);
  color: var(--color-primary);
  font-size: var(--fs-small);
  line-height: 1;
  margin-top: auto;
}

/* ── Author block ── */
.page [data-comp="testimonialGrid"] .testimonialGrid-card-author {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding-top: var(--s-3);
  border-top: 1px solid var(--color-border);
}

.page [data-comp="testimonialGrid"] .testimonialGrid-card-name {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: var(--tracking-heading);
  color: var(--color-text);
  margin: 0;
}

.page [data-comp="testimonialGrid"] .testimonialGrid-card-meta {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--color-muted);
  letter-spacing: 0.04em;
  margin: 0;
}

/* ── Responsive: 2-col at medium ── */
@media (max-width: 1024px) {
  .page [data-comp="testimonialGrid"] .testimonialGrid-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Responsive: 1-col at mobile ── */
@media (max-width: 640px) {
  .page [data-comp="testimonialGrid"] .testimonialGrid-grid {
    grid-template-columns: 1fr;
  }

  .page [data-comp="testimonialGrid"] .testimonialGrid-card {
    padding: var(--s-5) var(--s-4) var(--s-4);
  }

  .page [data-comp="testimonialGrid"] .testimonialGrid-card-quote {
    font-size: var(--fs-h2);
  }
}

/* testimonialFeatured */
/* ============================================================
   testimonialFeatured — Full-width editorial pull-quote block
   ============================================================ */

.page [data-comp="testimonialFeatured"].testimonialFeatured {
  background-color: var(--color-bg-alt);
  padding-block: var(--space-section-y);
  color: var(--color-text);
}

.page [data-comp="testimonialFeatured"] .testimonialFeatured-inner {
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-container-x);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-gap);
  align-items: center;
}

/* ── Quote block (left / main column) ── */

.page [data-comp="testimonialFeatured"] .testimonialFeatured-quote {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  max-width: var(--measure);
}

.page [data-comp="testimonialFeatured"] .testimonialFeatured-mark {
  font-family: var(--font-heading);
  font-size: clamp(4.5rem, 10vw, 8rem);
  line-height: 0.75;
  font-weight: 700;
  color: var(--color-primary);
  display: block;
  user-select: none;
  aria-hidden: true;
  margin-bottom: -0.5rem;
}

.page [data-comp="testimonialFeatured"] .testimonialFeatured-body {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: 400;
  font-style: italic;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-text);
  position: relative;
  padding-left: calc(0.6em + 3px);
  border-left: 3px solid var(--color-primary);
}

/* ── Author attribution ── */

.page [data-comp="testimonialFeatured"] .testimonialFeatured-author {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding-top: var(--s-1);
}

.page [data-comp="testimonialFeatured"] .testimonialFeatured-name {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-heading);
  color: var(--color-text);
}

.page [data-comp="testimonialFeatured"] .testimonialFeatured-role {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: inherit;
}

/* ── Aside credential / image (right column) ── */

.page [data-comp="testimonialFeatured"] .testimonialFeatured-aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  flex-shrink: 0;
  width: clamp(120px, 16vw, 200px);
}

.page [data-comp="testimonialFeatured"] .testimonialFeatured-aside img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  display: block;
  border-left: 3px solid var(--color-primary);
}

/* ── Responsive: stack on narrow viewports ── */

@media (max-width: 768px) {
  .page [data-comp="testimonialFeatured"] .testimonialFeatured-inner {
    grid-template-columns: 1fr;
    gap: calc(var(--space-gap) * 0.75);
  }

  .page [data-comp="testimonialFeatured"] .testimonialFeatured-aside {
    width: clamp(80px, 28vw, 120px);
    align-self: flex-start;
  }

  .page [data-comp="testimonialFeatured"] .testimonialFeatured-body {
    font-size: var(--fs-h3);
  }

  .page [data-comp="testimonialFeatured"] .testimonialFeatured-mark {
    font-size: clamp(3.5rem, 14vw, 5.5rem);
  }
}

@media (max-width: 480px) {
  .page [data-comp="testimonialFeatured"] .testimonialFeatured-body {
    font-size: var(--fs-body);
    font-size: clamp(1.1rem, 4.5vw, 1.35rem);
    line-height: var(--leading-body);
  }
}

/* ctaBand */

.page [data-comp="ctaBand"].ctaBand {
  position: relative;
  background: var(--color-secondary);
  color: var(--color-on-dark);
  padding-block: var(--space-section-y-lg);
  overflow: hidden;
}

.page [data-comp="ctaBand"] .ctaBand-inner {
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-container-x);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-gap);
}

.page [data-comp="ctaBand"] .ctaBand-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: inherit;
}

.page [data-comp="ctaBand"] .ctaBand-title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-on-dark);
  max-width: var(--measure);
  margin: 0;
}

.page [data-comp="ctaBand"] .ctaBand-sub {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--color-on-dark);
  opacity: 0.80;
  max-width: var(--measure);
  margin: 0;
}

.page [data-comp="ctaBand"] .ctaBand-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  margin-top: calc(var(--space-gap) * 0.25);
}

@media (max-width: 480px) {
  .page [data-comp="ctaBand"] .ctaBand-actions {
    flex-direction: column;
    width: 100%;
  }

  .page [data-comp="ctaBand"] .ctaBand-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* galleryMasonry */
/* ============================================================
   galleryMasonry — CSS column-count masonry grid
   Design-language contract: warm parchment band, left-orange-rule
   heading, card radius/shadow, hover-lift, caption reveal
   ============================================================ */

.page [data-comp="galleryMasonry"].galleryMasonry {
  background-color: var(--color-bg);
  padding-block: var(--space-section-y);
}

.page [data-comp="galleryMasonry"] .galleryMasonry-inner {
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-container-x);
}

/* ── Section header ─────────────────────────────────────────── */

.page [data-comp="galleryMasonry"] .galleryMasonry-header {
  margin-bottom: var(--space-gap);
}

.page [data-comp="galleryMasonry"] .galleryMasonry-title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-text);
  /* Signature left-orange-rule device */
  display: flex;
  align-items: center;
  gap: 0;
  padding-left: calc(0.6em + 3px);
  position: relative;
  margin: 0;
}

.page [data-comp="galleryMasonry"] .galleryMasonry-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  bottom: 0.1em;
  width: 3px;
  background-color: var(--color-primary);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

/* ── Masonry grid ───────────────────────────────────────────── */

.page [data-comp="galleryMasonry"] .galleryMasonry-grid {
  column-count: 3;
  column-gap: var(--space-gap);
}

@media (max-width: 900px) {
  .page [data-comp="galleryMasonry"] .galleryMasonry-grid {
    column-count: 2;
  }
}

@media (max-width: 540px) {
  .page [data-comp="galleryMasonry"] .galleryMasonry-grid {
    column-count: 1;
  }
}

/* ── Individual items ───────────────────────────────────────── */

.page [data-comp="galleryMasonry"] .galleryMasonry-item {
  break-inside: avoid;
  margin-bottom: var(--space-gap);
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-surface);
  /* Card contract: left accent rule, shadow, no border ring */
  border-left: 3px solid var(--color-primary);
  box-shadow: var(--shadow);
  transition: box-shadow 220ms ease, transform 220ms ease;
  cursor: pointer;
}

.page [data-comp="galleryMasonry"] .galleryMasonry-item:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

/* ── Image ──────────────────────────────────────────────────── */

.page [data-comp="galleryMasonry"] .galleryMasonry-item img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  /* Slight darken on hover via the caption overlay — image itself scales */
  transition: transform 360ms ease;
}

.page [data-comp="galleryMasonry"] .galleryMasonry-item:hover img {
  transform: scale(1.03);
}

/* ── Caption strip — hidden by default, revealed on hover ───── */

.page [data-comp="galleryMasonry"] .galleryMasonry-item-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  /* Rich bottom-up scrim so text is always legible */
  padding: var(--s-6) var(--s-4) var(--s-4);
  /* Off-screen below item by default */
  transform: translateY(100%);
  opacity: 0;
  transition: transform 260ms ease, opacity 240ms ease;
  /* Text style */
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: var(--leading-body);
  color: var(--color-on-dark);
  letter-spacing: 0.02em;
  /* Prevent caption from clipping past the rounded corners */
  border-radius: 0 0 var(--radius-lg) 0;
}

.page [data-comp="galleryMasonry"] .galleryMasonry-item:hover .galleryMasonry-item-caption {
  transform: translateY(0);
  opacity: 1;
}

/* Accent top-line inside caption for brand flavour */
.page [data-comp="galleryMasonry"] .galleryMasonry-item-caption::before {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  background-color: var(--color-accent);
  margin-bottom: var(--s-2);
  border-radius: var(--radius-sm);
}

/* ── Reduced-motion: skip transforms, show caption always ───── */

@media (prefers-reduced-motion: reduce) {
  .page [data-comp="galleryMasonry"] .galleryMasonry-item {
    transition: none;
  }
  .page [data-comp="galleryMasonry"] .galleryMasonry-item img {
    transition: none;
  }
  .page [data-comp="galleryMasonry"] .galleryMasonry-item-caption {
    transform: translateY(0);
    opacity: 1;
    transition: none;
  }
  .page [data-comp="galleryMasonry"] .galleryMasonry-item:hover {
    transform: none;
  }
}

/* beforeAfter */
/* ============================================================
   beforeAfter — transformation pairs grid
   Gallery page: shows before/after painting quality side-by-side
   ============================================================ */

.page [data-comp="beforeAfter"].beforeAfter {
  background: var(--color-bg-alt);
  padding-block: var(--space-section-y);
}

.page [data-comp="beforeAfter"] .beforeAfter-inner {
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-container-x);
}

/* ── Header ─────────────────────────────────────────────── */

.page [data-comp="beforeAfter"] .beforeAfter-header {
  margin-bottom: var(--space-gap);
}

.page [data-comp="beforeAfter"] .beforeAfter-title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-text);
  padding-left: var(--s-2);
  position: relative;
  margin: 0;
}

.page [data-comp="beforeAfter"] .beforeAfter-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  bottom: 0.1em;
  width: 3px;
  background: var(--color-primary);
  border-radius: var(--radius-sm);
}

/* ── Grid ────────────────────────────────────────────────── */

.page [data-comp="beforeAfter"] .beforeAfter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(540px, 100%), 1fr));
  gap: var(--space-gap);
}

/* ── Pair card ───────────────────────────────────────────── */

.page [data-comp="beforeAfter"] .beforeAfter-pair {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  border-left: 3px solid var(--color-primary);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 220ms ease, transform 220ms ease;
}

.page [data-comp="beforeAfter"] .beforeAfter-pair:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

/* ── Image row (before + divider + after) ────────────────── */

.page [data-comp="beforeAfter"] .beforeAfter-pair-before,
.page [data-comp="beforeAfter"] .beforeAfter-pair-after {
  flex: 1 1 0;
  position: relative;
  overflow: hidden;
  min-height: 220px;
}

/* The two halves sit side by side */
.page [data-comp="beforeAfter"] .beforeAfter-pair {
  flex-direction: row;
}

.page [data-comp="beforeAfter"] .beforeAfter-pair-before,
.page [data-comp="beforeAfter"] .beforeAfter-pair-after {
  flex: 1 1 50%;
}

/* Centre divider between the two halves */
.page [data-comp="beforeAfter"] .beforeAfter-pair-before {
  border-right: 2px solid var(--color-border);
}

.page [data-comp="beforeAfter"] .beforeAfter-pair-before img,
.page [data-comp="beforeAfter"] .beforeAfter-pair-after img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 320ms ease;
}

.page [data-comp="beforeAfter"] .beforeAfter-pair:hover .beforeAfter-pair-before img,
.page [data-comp="beforeAfter"] .beforeAfter-pair:hover .beforeAfter-pair-after img {
  transform: scale(1.03);
}

/* ── Labels ──────────────────────────────────────────────── */

.page [data-comp="beforeAfter"] .beforeAfter-pair-label {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--radius-sm);
  pointer-events: none;
  z-index: 2;
}

/* "Before" label — sits on the before panel */
.page [data-comp="beforeAfter"] .beforeAfter-pair-before .beforeAfter-pair-label {
  color: var(--color-on-dark);
}

/* "After" label — sits on the after panel with a primary accent */
.page [data-comp="beforeAfter"] .beforeAfter-pair-after .beforeAfter-pair-label {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

/* ── Responsive — stack vertically on small screens ─────── */

@media (max-width: 600px) {
  .page [data-comp="beforeAfter"] .beforeAfter-grid {
    grid-template-columns: 1fr;
  }

  .page [data-comp="beforeAfter"] .beforeAfter-pair {
    flex-direction: column;
    border-left: 3px solid var(--color-primary);
    border-right: none;
  }

  .page [data-comp="beforeAfter"] .beforeAfter-pair-before {
    border-right: none;
    border-bottom: 2px solid var(--color-border);
    min-height: 200px;
    flex: none;
  }

  .page [data-comp="beforeAfter"] .beforeAfter-pair-after {
    min-height: 200px;
    flex: none;
  }
}

@media (min-width: 601px) and (max-width: 900px) {
  .page [data-comp="beforeAfter"] .beforeAfter-grid {
    grid-template-columns: 1fr;
  }

  .page [data-comp="beforeAfter"] .beforeAfter-pair-before,
  .page [data-comp="beforeAfter"] .beforeAfter-pair-after {
    min-height: 260px;
  }
}

/* faqAccordion */
/* ============================================================
   faqAccordion — Tenerife Painters Design System
   Accessible FAQ built on native <details>/<summary>
   with animated chevron + standard left-primary-rule cards
   ============================================================ */

.page [data-comp="faqAccordion"].faqAccordion {
  background: var(--color-bg-alt);
  padding-block: var(--space-section-y);
}

.page [data-comp="faqAccordion"] .faqAccordion-inner {
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-container-x);
}

/* ── Section header ── */

.page [data-comp="faqAccordion"] .faqAccordion-header {
  margin-bottom: var(--space-gap);
}

.page [data-comp="faqAccordion"] .faqAccordion-title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-heading);
  color: var(--color-text);
  margin: 0;
  padding-left: var(--s-4);
  position: relative;
}

.page [data-comp="faqAccordion"] .faqAccordion-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 3px;
  height: 0.9em;
  background: var(--color-primary);
  border-radius: var(--radius-sm);
}

/* ── Accordion list ── */

.page [data-comp="faqAccordion"] .faqAccordion-list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-gap) * 0.5);
  max-width: var(--measure);
}

/* ── Single item — card treatment ── */

.page [data-comp="faqAccordion"] .faqAccordion-item {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  border-left: 3px solid var(--color-primary);
  overflow: hidden;
  transition: box-shadow 220ms ease, transform 220ms ease;
}

.page [data-comp="faqAccordion"] .faqAccordion-item:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* Remove default <details> marker in all browsers */
.page [data-comp="faqAccordion"] .faqAccordion-item summary::-webkit-details-marker {
  display: none;
}

.page [data-comp="faqAccordion"] .faqAccordion-item summary::marker {
  content: none;
  display: none;
}

/* ── Question row (<summary>) ── */

.page [data-comp="faqAccordion"] .faqAccordion-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-heading);
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: color 200ms ease;
}

.page [data-comp="faqAccordion"] .faqAccordion-question:hover {
  color: var(--color-primary);
}

/* Focus-visible ring — keyboard accessibility */
.page [data-comp="faqAccordion"] .faqAccordion-question:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
  border-radius: var(--radius);
}

/* ── Chevron icon ── */

.page [data-comp="faqAccordion"] .faqAccordion-chevron {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1), color 200ms ease;
}

/* CSS-drawn chevron via a rotated border */
.page [data-comp="faqAccordion"] .faqAccordion-chevron::before {
  content: "";
  display: block;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: border-color 200ms ease;
}

/* Open state — rotate chevron 180° */
.page [data-comp="faqAccordion"] .faqAccordion-item[open] .faqAccordion-chevron {
  transform: rotate(180deg);
  color: var(--color-primary);
}

/* Question colour when item is open */
.page [data-comp="faqAccordion"] .faqAccordion-item[open] .faqAccordion-question {
  color: var(--color-primary);
}

/* Thin divider between question row and answer */
.page [data-comp="faqAccordion"] .faqAccordion-item[open] .faqAccordion-question {
  border-bottom: 1px solid var(--color-border);
}

/* ── Answer panel ── */

.page [data-comp="faqAccordion"] .faqAccordion-answer {
  padding: var(--s-4) var(--s-5) var(--s-5);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--color-text);
  max-width: var(--measure);
}

/* Paragraph / list spacing inside answer */
.page [data-comp="faqAccordion"] .faqAccordion-answer p {
  margin: 0 0 var(--s-3);
  color: var(--color-text);
}

.page [data-comp="faqAccordion"] .faqAccordion-answer p:last-child {
  margin-bottom: 0;
}

.page [data-comp="faqAccordion"] .faqAccordion-answer ul,
.page [data-comp="faqAccordion"] .faqAccordion-answer ol {
  margin: 0 0 var(--s-3) var(--s-4);
  color: var(--color-text);
}

.page [data-comp="faqAccordion"] .faqAccordion-answer li {
  margin-bottom: var(--s-1);
  color: var(--color-text);
}

.page [data-comp="faqAccordion"] .faqAccordion-answer a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 200ms ease;
}

.page [data-comp="faqAccordion"] .faqAccordion-answer a:hover {
  color: inherit;
}

/* ── Responsive ── */

@media (max-width: 640px) {
  .page [data-comp="faqAccordion"] .faqAccordion-question {
    font-size: var(--fs-body);
    padding: var(--s-4) var(--s-4);
  }

  .page [data-comp="faqAccordion"] .faqAccordion-answer {
    padding: var(--s-4) var(--s-4) var(--s-4);
  }

  .page [data-comp="faqAccordion"] .faqAccordion-title {
    font-size: var(--fs-h2);
  }
}

/* ── Reduced-motion safety ── */

@media (prefers-reduced-motion: reduce) {
  .page [data-comp="faqAccordion"] .faqAccordion-item {
    transition: none;
  }

  .page [data-comp="faqAccordion"] .faqAccordion-question {
    transition: none;
  }

  .page [data-comp="faqAccordion"] .faqAccordion-chevron {
    transition: none;
  }
}

/* contactSplit */
/* ============================================================
   contactSplit — Two-column contact section
   Left: info panel (details + hours)
   Right: warm card form panel
   ============================================================ */

.page [data-comp="contactSplit"].contactSplit {
  background: var(--color-bg);
  padding-block: var(--space-section-y);
}

.page [data-comp="contactSplit"] .contactSplit-inner {
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-container-x);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-gap);
  align-items: start;
}

/* ── Left: Info Column ─────────────────────────────────── */

.page [data-comp="contactSplit"] .contactSplit-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-gap);
  padding-top: var(--s-2);
}

.page [data-comp="contactSplit"] .contactSplit-info-title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-text);
  margin: 0 0 var(--s-2);
  padding-left: var(--s-2);
  position: relative;
}

.page [data-comp="contactSplit"] .contactSplit-info-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  bottom: 0.1em;
  width: 3px;
  background: var(--color-primary);
  border-radius: var(--radius-sm);
}

.page [data-comp="contactSplit"] .contactSplit-info-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--color-muted);
  max-width: var(--measure);
  margin: 0;
}

/* ── Detail rows (icon + text) ─────────────────────────── */

.page [data-comp="contactSplit"] .contactSplit-detail {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--color-border);
}

.page [data-comp="contactSplit"] .contactSplit-detail:last-of-type {
  border-bottom: none;
}

.page [data-comp="contactSplit"] .contactSplit-detail-icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  margin-top: var(--s-1);
}

.page [data-comp="contactSplit"] .contactSplit-detail-text {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--color-text);
}

.page [data-comp="contactSplit"] .contactSplit-detail-text strong {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
  margin-bottom: var(--s-1);
}

.page [data-comp="contactSplit"] .contactSplit-detail-text a {
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 200ms ease, border-bottom-color 200ms ease;
}

.page [data-comp="contactSplit"] .contactSplit-detail-text a:hover {
  border-bottom-color: var(--color-primary);
}

/* ── Right: Form Card ──────────────────────────────────── */

.page [data-comp="contactSplit"] .contactSplit-form {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  border-left: 3px solid var(--color-primary);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  transition: box-shadow 220ms ease, transform 220ms ease;
}

.page [data-comp="contactSplit"] .contactSplit-form:focus-within {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.page [data-comp="contactSplit"] .contactSplit-form-title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-text);
  margin: 0 0 var(--s-1);
  padding-left: var(--s-2);
  position: relative;
}

.page [data-comp="contactSplit"] .contactSplit-form-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  bottom: 0.1em;
  width: 3px;
  background: var(--color-primary);
  border-radius: var(--radius-sm);
}

/* ── Field wrapper ─────────────────────────────────────── */

.page [data-comp="contactSplit"] .contactSplit-field {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.page [data-comp="contactSplit"] .contactSplit-label {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
}

.page [data-comp="contactSplit"] .contactSplit-input,
.page [data-comp="contactSplit"] .contactSplit-textarea {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-3);
  width: 100%;
  box-sizing: border-box;
  transition: border-color 200ms ease, box-shadow 200ms ease;
  outline: none;
  appearance: none;
}

.page [data-comp="contactSplit"] .contactSplit-input::placeholder,
.page [data-comp="contactSplit"] .contactSplit-textarea::placeholder {
  color: var(--color-muted);
  opacity: 0.6;
}

.page [data-comp="contactSplit"] .contactSplit-input:focus,
.page [data-comp="contactSplit"] .contactSplit-textarea:focus {
  border-color: var(--color-primary);
}

.page [data-comp="contactSplit"] .contactSplit-textarea {
  resize: vertical;
  min-height: 9rem;
}

/* ── Submit wrapper — positions the .btn ───────────────── */

.page [data-comp="contactSplit"] .contactSplit-submit {
  margin-top: var(--s-2);
  display: flex;
  justify-content: flex-start;
}

/* ── Success message ──────────────────────────────────── */

.page [data-comp="contactSplit"] .contactSplit-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--s-4);
  padding: clamp(2rem, 6vw, 3.5rem) clamp(1.5rem, 4vw, 2.5rem);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  border-left: 3px solid var(--color-primary);
}

.page [data-comp="contactSplit"] .contactSplit-success[hidden] {
  display: none;
}

.page [data-comp="contactSplit"] .contactSplit-success-icon {
  width: 3rem;
  height: 3rem;
  color: var(--color-primary);
  flex-shrink: 0;
}

.page [data-comp="contactSplit"] .contactSplit-success p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--color-text);
  margin: 0;
  max-width: var(--measure);
}

/* ── Submit button disabled state ──────────────────────── */

.page [data-comp="contactSplit"] .contactSplit-submit:disabled,
.page [data-comp="contactSplit"] .contactSplit-submit[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Responsive: stack below 820px ────────────────────── */

@media (max-width: 820px) {
  .page [data-comp="contactSplit"] .contactSplit-inner {
    grid-template-columns: 1fr;
  }

  .page [data-comp="contactSplit"] .contactSplit-info {
    padding-top: 0;
  }

  .page [data-comp="contactSplit"] .contactSplit-form:focus-within {
    transform: none;
  }
}

@media (max-width: 480px) {
  .page [data-comp="contactSplit"].contactSplit {
    padding-block: var(--space-section-y);
  }

  .page [data-comp="contactSplit"] .contactSplit-form {
    padding: var(--s-4);
  }

  .page [data-comp="contactSplit"] .contactSplit-submit {
    justify-content: stretch;
  }

  .page [data-comp="contactSplit"] .contactSplit-submit .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* servicesList */
/* ── servicesList ─────────────────────────────────────────── */

.page [data-comp="servicesList"].servicesList {
  background: var(--color-bg);
  padding-block: var(--space-section-y);
}

.page [data-comp="servicesList"] .servicesList-inner {
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-container-x);
}

/* ── Section header ──────────────────────────────────────── */

.page [data-comp="servicesList"] .servicesList-header {
  margin-bottom: var(--space-gap);
}

.page [data-comp="servicesList"] .servicesList-title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-heading);
  color: var(--color-text);
  margin: 0;
  padding-left: var(--s-4);
  position: relative;
}

.page [data-comp="servicesList"] .servicesList-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 3px;
  height: 1.1em;
  background: var(--color-primary);
  border-radius: var(--radius-sm);
}

/* ── Grid ────────────────────────────────────────────────── */

.page [data-comp="servicesList"] .servicesList-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-gap);
}

@media (max-width: 960px) {
  .page [data-comp="servicesList"] .servicesList-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .page [data-comp="servicesList"] .servicesList-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Card ────────────────────────────────────────────────── */

.page [data-comp="servicesList"] .servicesList-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  border-left: 3px solid var(--color-primary);
  padding: calc(var(--space-gap) * 1.25) calc(var(--space-gap) * 1.1);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  transition: box-shadow 220ms ease, transform 220ms ease;
}

.page [data-comp="servicesList"] .servicesList-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

/* ── Card icon ───────────────────────────────────────────── */

.page [data-comp="servicesList"] .servicesList-card-icon {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 2.5rem;
  height: 2.5rem;
  color: inherit;
  flex-shrink: 0;
}

.page [data-comp="servicesList"] .servicesList-card-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
}

/* ── Card title ──────────────────────────────────────────── */

.page [data-comp="servicesList"] .servicesList-card-title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-heading);
  color: var(--color-text);
  margin: 0;
}

/* ── Card body ───────────────────────────────────────────── */

.page [data-comp="servicesList"] .servicesList-card-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--color-muted);
  margin: 0;
  flex: 1;
  max-width: var(--measure);
}

/* ── Card link ───────────────────────────────────────────── */

.page [data-comp="servicesList"] .servicesList-card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: var(--s-1);
  margin-top: var(--s-1);
  align-self: flex-start;
  transition: color 200ms ease, border-bottom-color 200ms ease;
}

.page [data-comp="servicesList"] .servicesList-card-link:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* tabs */
/* ── tabs ─────────────────────────────────────────────────────────────────── */

.page [data-comp="tabs"].tabs {
  background: var(--color-bg);
  padding-block: var(--space-section-y);
}

.page [data-comp="tabs"] .tabs-inner {
  max-width: var(--container-width);
  padding-inline: var(--space-container-x);
  margin-inline: auto;
}

/* ── Section header ─────────────────────────────────────────────────────── */

.page [data-comp="tabs"] .tabs-header {
  margin-bottom: var(--space-gap);
}

.page [data-comp="tabs"] .tabs-title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-heading);
  color: var(--color-text);
  margin: 0;
  padding-left: var(--s-2);
  position: relative;
}

.page [data-comp="tabs"] .tabs-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  bottom: 0.1em;
  width: 3px;
  background: var(--color-primary);
  border-radius: var(--radius-sm);
}

/* ── Tablist ────────────────────────────────────────────────────────────── */

.page [data-comp="tabs"] .tabs-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--space-gap);
  padding: var(--s-1);
  background: var(--color-bg-alt);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  width: fit-content;
  max-width: 100%;
}

/* ── Individual tab button ──────────────────────────────────────────────── */

.page [data-comp="tabs"] .tabs-tab {
  /* reset */
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;

  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-muted);

  padding: var(--s-2) var(--s-5);
  border-radius: var(--radius-pill);
  line-height: 1.4;
  white-space: nowrap;

  transition: color 200ms ease, background 200ms ease, box-shadow 200ms ease;
}

.page [data-comp="tabs"] .tabs-tab:hover:not([aria-selected="true"]) {
  color: var(--color-text);
  background: rgba(0, 0, 0, 0.05);
}

.page [data-comp="tabs"] .tabs-tab:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Active / selected state */
.page [data-comp="tabs"] .tabs-tab[aria-selected="true"] {
  background: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: var(--shadow);
}

/* ── Panels wrapper ─────────────────────────────────────────────────────── */

.page [data-comp="tabs"] .tabs-panels {
  position: relative;
}

/* ── Individual panel ───────────────────────────────────────────────────── */

.page [data-comp="tabs"] .tabs-panel {
  display: none;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--color-primary);
  box-shadow: var(--shadow);
  padding: var(--s-7) var(--s-6);

  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--color-text);
  max-width: var(--measure);
}

.page [data-comp="tabs"] .tabs-panel[aria-hidden="false"],
.page [data-comp="tabs"] .tabs-panel:not([aria-hidden]) {
  display: block;
  animation: tabs-tabPanelFadeIn 240ms ease both;
}

/* Fallback for JS-toggled display (script sets hidden attr or aria-hidden) */
.page [data-comp="tabs"] .tabs-panel[hidden] {
  display: none !important;
}

@keyframes tabs-tabPanelFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .page [data-comp="tabs"] .tabs-tablist {
    width: 100%;
    border-radius: var(--radius-lg);
  }

  .page [data-comp="tabs"] .tabs-tab {
    flex: 1 1 auto;
    text-align: center;
    padding: var(--s-2) var(--s-3);
  }

  .page [data-comp="tabs"] .tabs-panel {
    padding: var(--s-5) var(--s-4);
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* already wired via the animation above */
}

/* logoStrip */
/* ── logoStrip ─────────────────────────────────────────────────────────── */

.page [data-comp="logoStrip"].logoStrip {
  background-color: var(--color-bg-alt);
  padding-block: var(--space-section-y);
}

.page [data-comp="logoStrip"] .logoStrip-inner {
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-container-x);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-gap);
}

.page [data-comp="logoStrip"] .logoStrip-label {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-muted);
  text-align: center;
}

.page [data-comp="logoStrip"] .logoStrip-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-6) var(--s-8);
  width: 100%;
}

.page [data-comp="logoStrip"] .logoStrip-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.45;
  filter: grayscale(1);
  transition: opacity 200ms ease, filter 200ms ease;
}

.page [data-comp="logoStrip"] .logoStrip-logo:hover {
  opacity: 0.75;
  filter: grayscale(0.3);
}

.page [data-comp="logoStrip"] .logoStrip-logo img {
  display: block;
  max-height: 36px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
}

/* ── Divider above / below to separate from adjacent bands ─────────────── */

.page [data-comp="logoStrip"].logoStrip + * {
  border-top: 0;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .page [data-comp="logoStrip"] .logoStrip-logos {
    gap: var(--s-5) var(--s-7);
  }

  .page [data-comp="logoStrip"] .logoStrip-logo img {
    max-height: 28px;
    max-width: 90px;
  }
}

/* siteHeader */
.siteHeader {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  height: 76px;
  background: var(--color-bg);
  box-shadow: var(--shadow);
  transition: background 280ms ease, box-shadow 280ms ease;
}

[data-comp="siteHeader"] .siteHeader-inner {
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-container-x);
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--s-6);
}

[data-comp="siteHeader"] .siteHeader-logo {
  text-decoration: none;
  display: flex;
  align-items: baseline;
  gap: var(--s-1);
  flex-shrink: 0;
}

[data-comp="siteHeader"] .siteHeader-logo-word1 {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-text);
  transition: color 280ms ease;
}

[data-comp="siteHeader"] .siteHeader-logo-word2 {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  transition: color 280ms ease;
}

[data-comp="siteHeader"] .siteHeader-nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

[data-comp="siteHeader"] .siteHeader-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--s-1);
}

[data-comp="siteHeader"] .siteHeader-nav-list li a {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-text);
  text-decoration: none;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius-sm);
  transition: color 200ms ease, background 200ms ease;
  position: relative;
}

[data-comp="siteHeader"] .siteHeader-nav-list li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0.75em;
  right: 0.75em;
  height: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms ease;
}

[data-comp="siteHeader"] .siteHeader-nav-list li a:hover {
  color: var(--color-primary);
}

[data-comp="siteHeader"] .siteHeader-nav-list li a:hover::after,
[data-comp="siteHeader"] .siteHeader-nav-list li a[aria-current="page"]::after {
  transform: scaleX(1);
}

[data-comp="siteHeader"] .siteHeader-nav-list li a[aria-current="page"] {
  color: var(--color-primary);
}

[data-comp="siteHeader"] .siteHeader-cta {
  flex-shrink: 0;
  font-size: var(--fs-small);
}

[data-comp="siteHeader"] .siteHeader-hamburger {
  display: none;
  flex-direction: column;
  gap: var(--s-1);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--s-2);
  margin-left: auto;
}

[data-comp="siteHeader"] .siteHeader-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text);
  border-radius: var(--radius-sm);
  transition: background 280ms ease, transform 280ms ease, opacity 280ms ease;
}

/* ─── 2a: Transparent-over-DARK-hero ─── */
.home-hero .siteHeader {
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,0));
  box-shadow: none;
}

.home-hero .siteHeader .siteHeader-logo-word1 {
  color: var(--color-on-dark);
}

.home-hero .siteHeader .siteHeader-logo-word2 {
  color: var(--color-primary);
}

.home-hero .siteHeader .siteHeader-nav-list li a {
  color: var(--color-on-dark);
}

.home-hero .siteHeader .siteHeader-nav-list li a:hover {
  color: var(--color-primary);
}

.home-hero .siteHeader .siteHeader-hamburger span {
  background: var(--color-on-dark);
}

/* ─── 2b: Transparent-over-LIGHT-hero ─── */
.home-hero.hero-light .siteHeader {
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,0));
  box-shadow: none;
}

.home-hero.hero-light .siteHeader .siteHeader-logo-word1 {
  color: var(--color-text);
}

.home-hero.hero-light .siteHeader .siteHeader-nav-list li a {
  color: var(--color-text);
}

.home-hero.hero-light .siteHeader .siteHeader-hamburger span {
  background: var(--color-text);
}

/* ─── 3: Solid on scroll ─── */
.home-hero .siteHeader.is-scrolled {
  background: var(--color-bg);
  box-shadow: var(--shadow);
}

.home-hero .siteHeader.is-scrolled .siteHeader-logo-word1 {
  color: var(--color-text);
}

.home-hero .siteHeader.is-scrolled .siteHeader-logo-word2 {
  color: var(--color-primary);
}

.home-hero .siteHeader.is-scrolled .siteHeader-nav-list li a {
  color: var(--color-text);
}

.home-hero .siteHeader.is-scrolled .siteHeader-nav-list li a:hover {
  color: var(--color-primary);
}

.home-hero .siteHeader.is-scrolled .siteHeader-hamburger span {
  background: var(--color-text);
}

/* ─── Responsive ─── */
@media (max-width: 900px) {
  [data-comp="siteHeader"] .siteHeader-nav {
    display: none;
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    background: var(--color-bg);
    box-shadow: var(--shadow);
    padding: 1rem var(--space-container-x) 1.5rem;
    flex-direction: column;
    align-items: stretch;
    z-index: 49;
  }
  [data-comp="siteHeader"] .siteHeader-nav.is-open {
    display: flex;
  }
  [data-comp="siteHeader"] .siteHeader-nav-list {
    flex-direction: column;
    gap: 0;
  }
  [data-comp="siteHeader"] .siteHeader-nav-list li a {
    display: block;
    padding: var(--s-3) 0;
    font-size: var(--fs-small);
    border-bottom: 1px solid var(--color-border);
  }
  [data-comp="siteHeader"] .siteHeader-nav-list li a::after {
    display: none;
  }
  [data-comp="siteHeader"] .siteHeader-cta {
    display: none;
  }
  [data-comp="siteHeader"] .siteHeader-hamburger {
    display: flex;
  }
  .home-hero .siteHeader .siteHeader-nav {
    background: var(--color-secondary);
  }
  .home-hero .siteHeader .siteHeader-nav .siteHeader-nav-list li a {
    color: var(--color-on-dark);
    border-bottom-color: rgba(255,255,255,.12);
  }
  .home-hero .siteHeader.is-scrolled .siteHeader-nav {
    background: var(--color-bg);
  }
  .home-hero .siteHeader.is-scrolled .siteHeader-nav .siteHeader-nav-list li a {
    color: var(--color-text);
    border-bottom-color: var(--color-border);
  }
}
/* siteFooter */
/* ── Layout ── */
.siteFooter {
  background-color: var(--color-bg-alt);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  border-top: 1px solid var(--color-border);
}

[data-comp="siteFooter"] .siteFooter__inner {
  max-width: var(--container-width);
  margin-inline: auto;
  padding-block: var(--space-section-y);
  padding-inline: var(--space-container-x);
  display: grid;
  grid-template-columns: 2fr 1fr 1.4fr;
  gap: var(--space-gap);
  align-items: start;
}

/* ── Columns ── */
[data-comp="siteFooter"] .siteFooter__col {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-gap) * 0.75);
}

[data-comp="siteFooter"] .siteFooter__col-heading {
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--tracking-heading);
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0 0 calc(var(--space-gap) * 0.25);
}

/* ── Wordmark ── */
[data-comp="siteFooter"] .siteFooter__wordmark {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  text-decoration: none;
  gap: var(--s-1);
  margin-bottom: calc(var(--space-gap) * 0.25);
}

[data-comp="siteFooter"] .siteFooter__wordmark-main {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 800;
  letter-spacing: var(--tracking-heading);
  color: var(--color-primary);
  text-transform: uppercase;
}

[data-comp="siteFooter"] .siteFooter__wordmark-sub {
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ── Blurb ── */
[data-comp="siteFooter"] .siteFooter__blurb {
  color: var(--color-muted);
  font-size: var(--fs-small);
  line-height: var(--leading-body);
  max-width: var(--measure);
  margin: 0;
}

/* ── Nav list ── */
[data-comp="siteFooter"] .siteFooter__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-gap) * 0.45);
}

[data-comp="siteFooter"] .siteFooter__nav-list li a {
  color: var(--color-muted);
  text-decoration: none;
  font-size: var(--fs-small);
  transition: color 0.2s ease;
}

[data-comp="siteFooter"] .siteFooter__nav-list li a:hover,
[data-comp="siteFooter"] .siteFooter__nav-list li a:focus-visible {
  color: var(--color-primary);
  text-decoration: underline;
}

/* ── Contact list ── */
[data-comp="siteFooter"] .siteFooter__contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-gap) * 0.55);
}

[data-comp="siteFooter"] .siteFooter__contact-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--color-muted);
  text-decoration: none;
  font-size: var(--fs-small);
  transition: color 0.2s ease;
}

[data-comp="siteFooter"] .siteFooter__contact-link:hover,
[data-comp="siteFooter"] .siteFooter__contact-link:focus-visible {
  color: var(--color-primary);
}

[data-comp="siteFooter"] .siteFooter__contact-icon {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  color: var(--color-accent-readable);
}

/* ── Bottom bar ── */
[data-comp="siteFooter"] .siteFooter__bottom {
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-container-x);
  padding-block: calc(var(--space-gap) * 0.9);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: calc(var(--space-gap) * 0.5);
}

[data-comp="siteFooter"] .siteFooter__copyright {
  color: var(--color-muted);
  font-size: var(--fs-small);
  margin: 0;
}

.siteFooter .sosei-credit {
  color: var(--color-muted);
  font-size: var(--fs-small);
  text-decoration: none;
  transition: color 0.2s ease;
}

.siteFooter .sosei-credit:hover,
.siteFooter .sosei-credit:focus-visible {
  color: var(--color-primary);
  text-decoration: underline;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  [data-comp="siteFooter"] .siteFooter__inner {
    grid-template-columns: 1fr 1fr;
  }

  [data-comp="siteFooter"] .siteFooter__col--brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  [data-comp="siteFooter"] .siteFooter__inner {
    grid-template-columns: 1fr;
  }

  [data-comp="siteFooter"] .siteFooter__col--brand {
    grid-column: auto;
  }

  [data-comp="siteFooter"] .siteFooter__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}