:root {
  --white: #FFFFFF;
  --mist: #FAF5E3;      /* section wash */
  --rule: #F7F0D4;      /* hairlines */
  --stone: #BCA043;     /* quiet text, stack mid-tones */
  --slate: #665A21;     /* body secondary */
  --graphite: #312E19;  /* primary text, dark surfaces */
  --font: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--graphite);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--graphite); outline-offset: 3px; border-radius: 2px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.hero-grid > *, .split > *, .band-grid > *, .contact-grid > *, .footer-grid > *, .service-block > *, .overview-row > * { min-width: 0; }
body { overflow-x: hidden; }

.skip {
  position: absolute; left: -9999px; top: 8px;
  background: var(--graphite); color: var(--white); padding: 8px 14px; z-index: 10;
}
.skip:focus { left: 8px; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 5;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.header-row { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.mark { width: 30px; height: 36px; flex: none; display: block; }
.brand-name { font-weight: 700; font-size: 1.125rem; letter-spacing: -0.02em; line-height: 1.05; display: flex; flex-direction: column; }
.brand-sub { font-weight: 400; font-size: 0.8125rem; color: var(--slate); letter-spacing: 0; }
.nav { display: flex; align-items: center; gap: 28px; font-size: 0.9375rem; }
.nav a { text-decoration: none; color: var(--slate); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--graphite); }
.nav a[aria-current="page"]:not(.nav-cta) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.nav .nav-cta {
  color: var(--white); background: var(--graphite);
  padding: 9px 18px; border-radius: 999px;
}
.nav .nav-cta:hover, .nav .nav-cta[aria-current="page"] { color: var(--white); background: #302D18; }

/* Hero */
.hero { padding: clamp(56px, 10vw, 120px) 0 clamp(56px, 9vw, 112px); border-bottom: 1px solid var(--rule); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.hero h1 { font-size: clamp(2.5rem, 5.4vw, 4.5rem); max-width: 13ch; }
.lede { margin-top: 24px; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); color: var(--slate); max-width: 40ch; }
.hero-actions { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px; border-radius: 999px;
  font-weight: 500; font-size: 1rem; text-decoration: none;
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn-dark { background: var(--graphite); color: var(--white); }
.btn-dark:hover { background: #302D18; }
.btn-line { border: 1px solid var(--rule); color: var(--graphite); }
.btn-line:hover { border-color: var(--stone); }
.btn-light { background: var(--white); color: var(--graphite); }
.btn-light:hover { background: var(--mist); }

/* The stacked practice words: one gray step per line */
.stack {
  list-style: none; margin: 0; padding: 0;
  font-weight: 700; letter-spacing: -0.045em; line-height: 0.92;
  font-size: clamp(2.5rem, 5.5vw, 5.25rem);
  text-align: right;
}
.stack li:nth-child(1) { color: var(--graphite); }
.stack li:nth-child(2) { color: #403B1D; }
.stack li:nth-child(3) { color: #655921; }
.stack li:nth-child(4) { color: #917B27; }
.stack li:nth-child(5) { color: #CCB360; }
.stack li:nth-child(6) { color: #EDE0AF; }

@media (prefers-reduced-motion: no-preference) {
  .stack li { opacity: 0; transform: translateY(14px); }
}
@keyframes rise { to { opacity: 1; transform: none; } }

/* Sections */
.section { padding: clamp(64px, 9vw, 112px) 0; border-bottom: 1px solid var(--rule); }
.section-gray { background: var(--mist); }
.split { display: grid; grid-template-columns: minmax(220px, 1fr) 2.2fr; gap: clamp(32px, 6vw, 96px); }
.split-head h2 { font-size: clamp(1.875rem, 3.2vw, 2.5rem); }
.split-head p { margin-top: 16px; color: var(--slate); max-width: 34ch; }
.split-head a { text-underline-offset: 3px; }

.service + .service { margin-top: 48px; }
.service h3 { font-size: 1.375rem; padding-bottom: 16px; border-bottom: 1px solid var(--graphite); }
.items {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px;
}
.items li { padding: 14px 0; border-bottom: 1px solid var(--rule); }

.clients { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
.clients li { padding: 18px 0; border-top: 1px solid var(--rule); font-size: 1.1875rem; font-weight: 500; }

.facts { margin: 0; }
.facts div { display: grid; grid-template-columns: 180px 1fr; gap: 24px; padding: 18px 0; border-top: 1px solid var(--rule); }
.facts div:last-child { border-bottom: 1px solid var(--rule); }
.facts dt { color: var(--slate); }
.facts dd { margin: 0; font-weight: 500; }

/* Links */
.text-link { display: inline-block; margin-top: 20px; font-weight: 500; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* Home: service overview rows */
.overview { border-top: 1px solid var(--graphite); }
.overview-row {
  display: grid; grid-template-columns: 1fr 1.3fr; gap: 24px; align-items: baseline;
  padding: 26px 0; border-bottom: 1px solid var(--rule); text-decoration: none;
  transition: padding-left .25s ease;
}
.overview-row h3 { font-size: 1.375rem; }
.overview-row p { color: var(--slate); }
.overview-row:hover { padding-left: 10px; }
.overview-row:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }

/* Inner page heading */
.page-head { padding: clamp(56px, 8vw, 96px) 0 clamp(40px, 6vw, 64px); border-bottom: 1px solid var(--rule); background: var(--mist); }
.page-head h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }
.page-head .lede { margin-top: 16px; }

/* Services page */
.service-block { display: grid; grid-template-columns: minmax(220px, 1fr) 2.2fr; gap: clamp(24px, 6vw, 96px); scroll-margin-top: 96px; }
.service-block + .service-block { margin-top: clamp(48px, 7vw, 80px); }
.service-block h2 { font-size: clamp(1.625rem, 2.6vw, 2.125rem); }
.service-block .items { border-top: 1px solid var(--graphite); }

/* Dark band */
.band { background: var(--graphite); color: var(--white); padding: clamp(64px, 9vw, 112px) 0; }
.band-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.band h2 { font-size: clamp(2.25rem, 4.6vw, 3.75rem); max-width: 12ch; }
.band address { font-style: normal; font-size: 1.25rem; line-height: 1.55; color: #F9F2DC; margin-bottom: 24px; }
.band .contact-line { color: #F9F2DC; }
.band .btn { margin-top: 8px; }
.contact-line { font-size: 1.25rem; margin-bottom: 8px; }
.contact-line a { text-decoration: none; }
.contact-line a:hover { text-decoration: underline; }

/* Directors */
.directors { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(24px, 4vw, 48px); }
.director { display: flex; align-items: center; gap: 24px; padding: 32px 0; border-top: 1px solid var(--graphite); border-bottom: 1px solid var(--rule); }
.monogram {
  flex: none; width: 88px; height: 104px; display: grid; place-items: end center; padding-bottom: 20px;
  border-radius: 44px 44px 6px 6px; /* milestone silhouette, echoing the logo */
  background: linear-gradient(var(--graphite) 0 34%, var(--white) 34% 37%, #F4EBC9 37%);
  color: var(--graphite); font-weight: 700; font-size: 1.125rem; letter-spacing: 0.02em;
}
.director h2 { font-size: 1.625rem; }
.director p { color: var(--slate); margin-top: 4px; }
.director .din { margin-top: 2px; font-size: 0.9375rem; color: var(--stone); font-variant-numeric: tabular-nums; }
.note a { text-underline-offset: 3px; }
.note { margin-top: 32px; color: var(--slate); max-width: 64ch; }

/* Contact page */
.contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(32px, 5vw, 64px); align-items: stretch; }
.contact-card h2 { font-size: 1.625rem; margin-bottom: 20px; }
.contact-card address { font-style: normal; font-size: 1.25rem; line-height: 1.55; margin-bottom: 28px; }
.map { min-height: 360px; border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; background: var(--mist); }
.map iframe { display: block; width: 100%; height: 100%; min-height: 360px; border: 0; filter: grayscale(1) contrast(1.05); }

/* Legal text */
.prose { max-width: 72ch; }
.prose h2 { font-size: 1.375rem; margin: 44px 0 12px; }
.prose p + p { margin-top: 14px; }
.prose ul { margin: 0; padding-left: 1.2em; }
.prose li + li { margin-top: 8px; }
.prose li::marker { color: var(--stone); }

/* Footer */
.site-footer { background: #302D18; color: #E2D091; font-size: 0.9375rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding-top: 56px; padding-bottom: 40px; }
.footer-brand img { display: block; margin-bottom: 16px; filter: brightness(1.6) grayscale(1); }
.footer-brand p { color: #F9F2DC; font-weight: 500; max-width: 22ch; }
.footer-h { font-size: 0.9375rem; font-weight: 600; color: #F9F2DC; letter-spacing: 0; margin-bottom: 12px; }
.site-footer address { font-style: normal; line-height: 1.6; }
.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li + li { margin-top: 6px; }
.footer-list a { text-decoration: none; }
.footer-list a:hover { color: var(--white); text-decoration: underline; }
.site-footer address + .footer-list { margin-top: 12px; }
.footer-base .credit { flex-basis: 100%; }
.footer-base .credit a { color: #F9F2DC; text-underline-offset: 3px; }
.footer-base .credit a:hover { color: var(--white); }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 20px; padding-bottom: 24px; border-top: 1px solid #35321A; font-size: 0.8125rem; }

@media (prefers-reduced-motion: reduce) {
  .overview-row { transition: none; }
}

/* How we work + borrower note */
.principles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.principles li { padding: 22px 0; border-top: 1px solid var(--graphite); }
.principles h3 { font-size: 1.1875rem; }
.principles li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.principles p { margin-top: 8px; color: var(--slate); }
.borrower > p { font-size: 1.1875rem; font-weight: 500; }
.checks { list-style: none; margin: 20px 0 0; padding: 0; max-width: 60ch; }
.checks li { position: relative; padding: 14px 0 14px 34px; border-top: 1px solid var(--rule); }
.checks li:last-child { border-bottom: 1px solid var(--rule); }
.checks li::before {
  content: ""; position: absolute; left: 4px; top: 21px; width: 14px; height: 8px;
  border-left: 2px solid var(--graphite); border-bottom: 2px solid var(--graphite); transform: rotate(-45deg);
}

/* Client list */
.client-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.client-groups h3 { font-size: 1rem; font-weight: 500; color: var(--slate); padding-bottom: 12px; }
.logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.logos li {
  display: grid; place-items: center; height: 104px; padding: 16px 18px;
  background: var(--white); border: 1px solid var(--rule); border-radius: 12px;
}
.logos img { max-width: 100%; max-height: 64px; width: auto; height: auto; object-fit: contain; }
.logo-text { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.01em; color: #413C1D; }

/* Illustrations */
.panorama { margin: 0; border-bottom: 1px solid var(--rule); background: #FAF4E0; }
.panorama img { display: block; width: 100%; height: clamp(200px, 32vw, 440px); object-fit: cover; object-position: center bottom; }
.overview-row { grid-template-columns: 96px 1fr 1.3fr; align-items: center; }
.overview-row img { width: 96px; height: auto; display: block; }
.service-note { margin-top: 10px; color: var(--slate); font-size: 0.9375rem; max-width: 34ch; }
.service-title img { display: block; width: 160px; height: auto; margin-bottom: 20px; }
.nav-call { display: none; }

/* ============ Gloss layer ============ */
:root {
  --shadow-sm: 0 1px 2px rgba(61,57,28, .06), 0 2px 6px rgba(61,57,28, .05);
  --shadow-md: 0 1px 2px rgba(61,57,28, .06), 0 8px 24px -6px rgba(61,57,28, .14);
  --shadow-lg: 0 2px 4px rgba(61,57,28, .06), 0 24px 48px -16px rgba(61,57,28, .28);
  --hi: inset 0 1px 0 rgba(255, 255, 255, .9);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* Soft silver light behind the hero */
.hero {
  position: relative;
  background:
    radial-gradient(900px 520px at 82% 18%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(700px 480px at 10% 90%, #FAF5E2 0%, rgba(238,240,242,0) 70%),
    linear-gradient(180deg, #FAF6E5 0%, #FFFFFF 100%);
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(#F8F2DA 1px, transparent 1px), linear-gradient(90deg, #F8F2DA 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(600px 380px at 75% 45%, #2E2B17 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(600px 380px at 75% 45%, #2E2B17 0%, transparent 75%);
  opacity: .55;
}
.hero-grid { position: relative; }

/* Chrome type: each word is brushed metal, lit by a passing sheen */
.stack li {
  color: transparent;
  -webkit-background-clip: text; background-clip: text;
  background-repeat: no-repeat;
  background-size: 260% 100%, 100% 100%;
  background-position: 120% 0, 0 0;
  padding-bottom: .14em; margin-bottom: -.1em;
}
.stack li:nth-child(1) { color: transparent; background-image: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.85) 50%, transparent 60%), linear-gradient(180deg, #403B1D 0%, #302D18 55%, #35321A 100%); }
.stack li:nth-child(2) { color: transparent; background-image: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.85) 50%, transparent 60%), linear-gradient(180deg, #524B20 0%, #33301A 55%, #433E1D 100%); }
.stack li:nth-child(3) { color: transparent; background-image: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.85) 50%, transparent 60%), linear-gradient(180deg, #7F6E23 0%, #4A431F 55%, #625721 100%); }
.stack li:nth-child(4) { color: transparent; background-image: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.9) 50%, transparent 60%), linear-gradient(180deg, #BCA043 0%, #655921 55%, #9A8229 100%); }
.stack li:nth-child(5) { color: transparent; background-image: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.95) 50%, transparent 60%), linear-gradient(180deg, #E4D396 0%, #A1872B 55%, #D1BA6B 100%); }
.stack li:nth-child(6) { color: transparent; background-image: linear-gradient(100deg, transparent 40%, rgba(255,255,255,1) 50%, transparent 60%), linear-gradient(180deg, #F4EBC9 0%, #DCC77F 55%, #EDE0AF 100%); }

/* Glossy buttons */
.btn { position: relative; overflow: hidden; isolation: isolate; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .2s, border-color .2s, color .2s; }
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s var(--ease);
}
.btn:hover::after { transform: translateX(120%); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-dark, .nav .nav-cta, .nav .nav-call {
  background: linear-gradient(180deg, #403B1D 0%, #312E19 48%, #302D18 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(50,47,25,.3), 0 8px 18px -8px rgba(50,47,25,.55);
}
.btn-dark:hover { background: linear-gradient(180deg, #48421F 0%, #33301A 48%, #302D18 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 4px rgba(50,47,25,.3), 0 14px 26px -10px rgba(50,47,25,.6); }
.nav .nav-cta:hover, .nav .nav-cta[aria-current="page"] { background: linear-gradient(180deg, #48421F 0%, #33301A 48%, #302D18 100%); }
.btn-line { background: linear-gradient(180deg, #FFFFFF, #FAF5E3); box-shadow: var(--hi), var(--shadow-sm); }
.btn-line::after { background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.9) 50%, transparent 70%); }
.btn-light { background: linear-gradient(180deg, #FFFFFF 0%, #F9F3DE 100%); box-shadow: var(--hi), 0 10px 24px -10px rgba(0,0,0,.6); }
.btn-light::after { background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.95) 50%, transparent 70%); }

/* Frosted header that firms up once you scroll */
.site-header { transition: box-shadow .3s var(--ease), background-color .3s; }
.site-header.is-scrolled { background: rgba(255,255,255,.78); box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 10px 30px -18px rgba(61,57,28,.35); }

/* Brushed sections */
.section-gray { background: linear-gradient(180deg, #FAF6E5 0%, #FAF4E1 100%); }
.page-head { background: radial-gradient(800px 300px at 85% 0%, #FFFFFF 0%, rgba(255,255,255,0) 70%), linear-gradient(180deg, #FAF6E5, #FAF4E0); }

/* Glass tiles */
.logos li {
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(246,247,248,.98) 100%);
  border-color: rgba(214, 218, 222, .9);
  box-shadow: var(--hi), var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.logos li:hover { transform: translateY(-4px); box-shadow: var(--hi), var(--shadow-lg); }
.overview-row img, .service-title img {
  border-radius: 14px; box-shadow: var(--hi), var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.overview-row:hover img { transform: translateY(-3px) rotate(-1.5deg); box-shadow: var(--shadow-md); }
.principles li { transition: transform .35s var(--ease); }
.principles li:hover { transform: translateX(4px); }
.map { box-shadow: var(--shadow-md); }
.monogram { box-shadow: inset 0 1px 0 rgba(255,255,255,.25), var(--shadow-md); }
.director { transition: transform .35s var(--ease); }

/* Dark band: polished graphite */
.band, .site-footer { position: relative; }
.band {
  background:
    radial-gradient(900px 360px at 85% -10%, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(600px 300px at 0% 110%, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #33301A 0%, #302D18 100%);
}
.band h2 {
  background: linear-gradient(180deg, #FFFFFF 0%, #F0E5BA 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.site-footer { background: linear-gradient(180deg, #302D18, #302D18); }

/* ============ Motion ============ */
@media (prefers-reduced-motion: no-preference) {
  /* sheen passes across the chrome words after they rise in, then every few seconds */
  .stack li { animation: rise .8s var(--ease) forwards, sheen 7s ease-in-out 1.1s infinite; }
  .stack li:nth-child(2) { animation-delay: .08s, 1.2s; }
  .stack li:nth-child(3) { animation-delay: .16s, 1.3s; }
  .stack li:nth-child(4) { animation-delay: .24s, 1.4s; }
  .stack li:nth-child(5) { animation-delay: .32s, 1.5s; }
  .stack li:nth-child(6) { animation-delay: .40s, 1.6s; }

  .hero-copy > * { opacity: 0; transform: translateY(16px); animation: rise .9s var(--ease) forwards; }
  .hero-copy > :nth-child(2) { animation-delay: .12s; }
  .hero-copy > :nth-child(3) { animation-delay: .24s; }

  /* scroll reveal (class added by site.js, so no-JS visitors see everything) */
  .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0s); }
  .js .reveal.is-in { opacity: 1; transform: none; }

  .panorama img { animation: settle 1.6s var(--ease) both; }
}
@keyframes sheen {
  0%, 60% { background-position: 120% 0, 0 0; }
  85%, 100% { background-position: -20% 0, 0 0; }
}
@keyframes settle { from { transform: scale(1.04); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ============ Light-blue 3D layer ============ */
:root {
  --blue: #6F6121;
  --blue-deep: #514920;
  --sky: #DCC87F;
  --ice: #FAF5E3;
  --card: rgba(255, 255, 255, .86);
  --card-edge: rgba(255, 255, 255, .95);
  --lift: 0 1px 1px rgba(61,57,28,.05), 0 6px 14px -6px rgba(61,57,28,.18), 0 26px 50px -24px rgba(61,57,28,.35);
  --lift-hi: 0 2px 2px rgba(61,57,28,.06), 0 14px 28px -10px rgba(61,57,28,.26), 0 40px 70px -30px rgba(61,57,28,.45);
}
body {
  background:
    radial-gradient(1100px 700px at 100% -10%, #F9F2DC 0%, rgba(249,242,220,0) 60%),
    radial-gradient(900px 700px at -10% 30%, #FAF5E3 0%, rgba(250,245,227,0) 60%),
    #F5FBEA;
}
.section { background: transparent; }
.section-gray { background: linear-gradient(180deg, rgba(249,244,223,.7) 0%, rgba(248,241,215,.55) 100%); }
.hero { background: radial-gradient(800px 520px at 80% 30%, #FFFFFF 0%, rgba(255,255,255,0) 65%), linear-gradient(180deg, #FAF6E5 0%, #F5FBEA 100%); }
.site-header { background: rgba(245,251,234, .78); }

/* Primary buttons: bright glossy blue */
.btn-dark, .nav .nav-cta, .nav .nav-call {
  background: linear-gradient(180deg, #A0862A 0%, #6F6121 50%, #574E20 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(64,59,29,.3), 0 10px 22px -8px rgba(111,97,33,.65);
}
.btn-dark:hover, .nav .nav-cta:hover, .nav .nav-cta[aria-current="page"] {
  background: linear-gradient(180deg, #B39634 0%, #7A6A22 50%, #5B5221 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 2px 4px rgba(64,59,29,.3), 0 16px 30px -10px rgba(111,97,33,.7);
}
.text-link, .split-head a, .note a, .facts a { color: var(--blue-deep); }

/* Hero: the practice words float on a tilted glass slab */
.hero-grid { perspective: 1400px; }
.slab {
  position: relative; justify-self: end;
  padding: clamp(24px, 3vw, 40px) clamp(24px, 3.4vw, 48px);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(255,255,255,.97) 0%, rgba(251,246,231,.95) 100%);
  border: 1px solid rgba(255,255,255,.95);
  box-shadow: inset 0 1px 0 #fff, 0 2px 2px rgba(61,57,28,.05), 0 30px 60px -20px rgba(78,71,32,.35), 0 60px 120px -40px rgba(111,97,33,.35);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  transform-style: preserve-3d;
  transform: rotateY(var(--ry, -14deg)) rotateX(var(--rx, 7deg));
  transition: transform .5s var(--ease);
}
.slab .stack { transform-style: preserve-3d; }
.slab .stack li:nth-child(1) { transform: translateZ(60px); }
.slab .stack li:nth-child(2) { transform: translateZ(50px); }
.slab .stack li:nth-child(3) { transform: translateZ(40px); }
.slab .stack li:nth-child(4) { transform: translateZ(30px); }
.slab .stack li:nth-child(5) { transform: translateZ(20px); }
.slab .stack li:nth-child(6) { transform: translateZ(10px); }
.stack li:nth-child(1) { background-image: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.85) 50%, transparent 60%), linear-gradient(180deg, #423C1D 0%, #302D18 60%, #3D391C 100%); }
.stack li:nth-child(2) { background-image: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.85) 50%, transparent 60%), linear-gradient(180deg, #544C20 0%, #39351B 60%, #4B451F 100%); }
.stack li:nth-child(3) { background-image: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.85) 50%, transparent 60%), linear-gradient(180deg, #746522 0%, #514920 60%, #665A21 100%); }
.stack li:nth-child(4) { background-image: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.9) 50%, transparent 60%), linear-gradient(180deg, #9A8229 0%, #6F6121 60%, #8D7826 100%); }
.stack li:nth-child(5) { background-image: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.95) 50%, transparent 60%), linear-gradient(180deg, #CAB15D 0%, #A0862A 60%, #C0A54A 100%); }
.stack li:nth-child(6) { background-image: linear-gradient(100deg, transparent 40%, rgba(255,255,255,1) 50%, transparent 60%), linear-gradient(180deg, #EADBA6 0%, #CFB867 60%, #E3D193 100%); }

/* Soft floating orbs behind the hero */
.orb { position: absolute; border-radius: 50%; filter: blur(40px); pointer-events: none; opacity: .55; }
.orb-a { width: 360px; height: 360px; right: 6%; top: 4%; background: radial-gradient(circle, #E5D499, rgba(229,212,153,0) 70%); }
.orb-b { width: 280px; height: 280px; left: -4%; bottom: -10%; background: radial-gradient(circle, #F5ECCB, rgba(245,236,203,0) 70%); }

/* Floating 3D cards */
.card3d {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 #fff, var(--lift);
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  will-change: transform;
}
.card3d:hover { box-shadow: inset 0 1px 0 #fff, var(--lift-hi); }
.card3d.is-tilting { transition: transform .08s linear, box-shadow .35s var(--ease); }

.overview { border-top: 0; display: grid; gap: 14px; }
.overview-row { padding: 18px 22px; border-bottom: 0; }
.overview-row:hover { padding-left: 22px; }
.principles { gap: 16px; }
.principles li { padding: 22px 24px; border-top: 0; }
.principles li:hover { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.facts { padding: 6px 26px; }
.facts div:first-child { border-top: 0; }
.facts div:last-child { border-bottom: 0; }
.service-block { padding: clamp(22px, 3vw, 36px); }
.service-block + .service-block { margin-top: 22px; }
.service-block .items { border-top-color: var(--rule); }
.director { padding: 24px; border: 1px solid var(--card-edge); }
.directors { gap: 18px; }
.contact-card { padding: clamp(22px, 3vw, 36px); }
.checks { background: var(--card); border-radius: 18px; padding: 6px 22px; box-shadow: inset 0 1px 0 #fff, var(--lift); }
.checks li:first-child { border-top: 0; }
.checks li:last-child { border-bottom: 0; }
.logos li { border-radius: 16px; }
.logos li:hover { transform: none; }

/* Inner page titles stand out in relief */
.page-head h1 {
  color: #302D18;
  text-shadow: 1px 1px 0 #F6EED0, 2px 2px 0 #F3E8C3, 3px 3px 0 #EDE0AF, 4px 4px 0 #E7D79E, 5px 5px 0 #DFCB86, 6px 6px 0 #D2BB6C, 10px 14px 24px rgba(78,71,32,.25);
}
.band h2 { background: linear-gradient(180deg, #FFFFFF 0%, #F2E8C1 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.band {
  background:
    radial-gradient(900px 360px at 85% -10%, rgba(202,177,93,.35) 0%, rgba(202,177,93,0) 60%),
    radial-gradient(600px 300px at 0% 110%, rgba(161,135,43,.25) 0%, rgba(161,135,43,0) 60%),
    linear-gradient(180deg, #3E391C 0%, #312E18 100%);
}
.site-footer { background: linear-gradient(180deg, #312E18, #2E2B17); }
.panorama { background: #F6EFD2; border-bottom: 0; }

/* Reveal now uses the separate `translate` property, so it never fights the 3D tilt */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { transform: none; translate: 0 26px; transition: opacity .8s var(--ease), translate .8s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); }
  .js .reveal.is-in { translate: 0 0; }
  .orb-a { animation: floaty 9s ease-in-out infinite alternate; }
  .orb-b { animation: floaty 12s ease-in-out infinite alternate-reverse; }
  .slab { animation: slab-in 1.2s var(--ease) both; }
}
@keyframes floaty { from { translate: 0 0; } to { translate: -30px 24px; } }
@keyframes slab-in { from { opacity: 0; transform: rotateY(-34deg) rotateX(14deg) translateZ(-120px); } }

/* ============ Vivid layer ============ */
:root { --vivid: linear-gradient(135deg, #524A20 0%, #7C6C23 38%, #BCA043 70%, #EADBA6 100%); }

/* Hero on a bright blue sky */
.hero { background: var(--vivid); color: #FFFFFF; border-bottom: 0; }
.hero::before { background-image: linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px); opacity: 1; }
.hero::after { content: ""; position: absolute; inset: auto 0 -1px 0; height: 120px; pointer-events: none;
  background: linear-gradient(180deg, rgba(245,251,234,0), rgba(245,251,234,.0)); }
.hero h1 { color: #FFFFFF; text-shadow: 0 2px 0 rgba(50,47,26,.18), 0 14px 40px rgba(50,47,26,.35); }
.hero .lede { color: #FAF4E0; }
.hero .btn-dark { background: linear-gradient(180deg, #FFFFFF 0%, #FAF5E3 100%); color: #524A20; box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(50,47,26,.2), 0 16px 32px -12px rgba(48,45,24,.6); }
.hero .btn-dark:hover { background: #FFFFFF; color: #443F1E; }
.hero .btn-dark::after { background: linear-gradient(100deg, transparent 30%, rgba(124,108,35,.18) 50%, transparent 70%); }
.hero .btn-line { background: rgba(255,255,255,.14); color: #FFFFFF; border-color: rgba(255,255,255,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); backdrop-filter: blur(6px); }
.hero .btn-line:hover { background: rgba(255,255,255,.24); border-color: #FFFFFF; }
.orb { opacity: .7; mix-blend-mode: screen; }
.orb-a { background: radial-gradient(circle, rgba(243,232,195,.9), rgba(243,232,195,0) 70%); }
.orb-b { background: radial-gradient(circle, rgba(182,154,58,.9), rgba(182,154,58,0) 70%); }

/* Slab: crisp white glass, thickness from stacked edge shadows */
.slab {
  background: linear-gradient(150deg, #FFFFFF 0%, #FBF7E7 100%);
  border: 1px solid #FFFFFF;
  box-shadow:
    inset 0 1px 0 #fff,
    1px 1px 0 #F9F2DC, 2px 2px 0 #F7F0D4, 3px 3px 0 #F5ECCB, 4px 4px 0 #F2E7BF, 5px 5px 0 #EEE1B1, 6px 6px 0 #E9DAA4,
    18px 30px 60px -10px rgba(48,45,24,.55);
}
.stack li:nth-child(6) { background-image: linear-gradient(100deg, transparent 40%, rgba(255,255,255,1) 50%, transparent 60%), linear-gradient(180deg, #C0A64C 0%, #927C27 60%, #B1932F 100%); }
.stack li:nth-child(5) { background-image: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.95) 50%, transparent 60%), linear-gradient(180deg, #998129 0%, #6F6121 60%, #897525 100%); }

/* Cards: white face with a blue-to-cyan edge */
.card3d {
  border: 1.5px solid transparent;
  background:
    linear-gradient(#FFFFFF, #FBFDFF) padding-box,
    linear-gradient(135deg, rgba(124,108,35,.55), rgba(234,219,166,.55) 50%, rgba(249,242,220,.9)) border-box;
}
.card3d:hover {
  background:
    linear-gradient(#FFFFFF, #FBFDFF) padding-box,
    linear-gradient(135deg, #7C6C23, #EADBA6) border-box;
}
.overview-row h3, .principles h3, .service-block h2 { color: #33301A; }
.principles h3::before { content: ""; display: block; width: 28px; height: 4px; border-radius: 4px; margin-bottom: 12px; background: linear-gradient(90deg, #7C6C23, #EADBA6); }

/* Section washes a touch richer */
.section-gray { background: linear-gradient(180deg, #FAF4E0 0%, #F8F1D8 100%); }
.split-head h2 { color: #33301A; }

/* Inner page headers: same bright sky as the home hero */
.page-head { background: var(--vivid); border-bottom: 0; position: relative; overflow: hidden; }
.page-head::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px);
  background-size: 64px 64px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%); }
.page-head .wrap { position: relative; }
.page-head h1 { color: #FFFFFF;
  text-shadow: 1px 1px 0 #C3A951, 2px 2px 0 #B29432, 3px 3px 0 #9C832A, 4px 4px 0 #867325, 5px 5px 0 #746522, 6px 6px 0 #665A21, 12px 18px 30px rgba(48,45,24,.45); }
.page-head .lede, .page-head .lede a { color: #FAF4E0; }

/* Closing band: bright, not navy */
.band { background: radial-gradient(900px 400px at 85% 0%, rgba(255,255,255,.22), rgba(255,255,255,0) 60%), var(--vivid); }
.band h2 { background: none; color: #FFFFFF; -webkit-background-clip: border-box; background-clip: border-box; text-shadow: 0 12px 30px rgba(48,45,24,.35); }
.band address, .band .contact-line { color: #FBF6E7; }
.band .btn-light { color: #524A20; }

/* Nav on the blue: keep the header white glass so it reads on every page */
.site-header { background: rgba(255,255,255,.82); }

/* ============ Citrus layer: yellow → lime → green ============ */
:root {
  --vivid: linear-gradient(135deg, #FFE45C 0%, #F1E5BB 32%, #DEC983 64%, #B39533 100%);
  --ink: #35321A;
  --ink-soft: #4D4620;
  --leaf: #8A7625;
  --leaf-deep: #655921;
}
body { background: radial-gradient(1100px 700px at 100% -10%, #FBF6E6 0%, rgba(251,246,230,0) 60%), radial-gradient(900px 700px at -10% 30%, #FAF5E2 0%, rgba(250,245,226,0) 60%), #FAFDF2; color: var(--ink); }

/* Hero, page heads and the closing band share the citrus sky; text goes deep green */
.hero, .page-head, .band { background: var(--vivid); color: var(--ink); }
.band { background: radial-gradient(900px 400px at 85% 0%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%), var(--vivid); }
.hero::before, .page-head::before { background-image: linear-gradient(rgba(255,255,255,.4) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.4) 1px, transparent 1px); }
.hero h1 { color: var(--ink); text-shadow: 0 1px 0 rgba(255,255,255,.5), 0 14px 40px rgba(97,86,33,.25); }
.hero .lede, .page-head .lede, .page-head .lede a { color: var(--ink-soft); }
.orb-a { background: radial-gradient(circle, rgba(255,250,170,.95), rgba(255,250,170,0) 70%); }
.orb-b { background: radial-gradient(circle, rgba(227,210,147,.9), rgba(227,210,147,0) 70%); }

/* Buttons: deep leaf green with a glossy top */
.btn-dark, .nav .nav-cta, .nav .nav-call, .hero .btn-dark {
  background: linear-gradient(180deg, #B89C3D 0%, #8A7625 50%, #655921 100%); color: #FFFFFF;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(52,49,26,.3), 0 10px 22px -8px rgba(101,89,33,.6);
}
.btn-dark:hover, .nav .nav-cta:hover, .nav .nav-cta[aria-current="page"], .hero .btn-dark:hover {
  background: linear-gradient(180deg, #C4AA52 0%, #978028 50%, #6E6121 100%); color: #FFFFFF;
}
.hero .btn-dark::after { background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); }
.hero .btn-line { background: rgba(255,255,255,.5); color: var(--ink); border-color: rgba(255,255,255,.9); }
.hero .btn-line:hover { background: rgba(255,255,255,.75); }
.band .btn-light { color: var(--leaf-deep); }
.band address, .band .contact-line { color: var(--ink); }
.band h2 { color: var(--ink); text-shadow: 0 1px 0 rgba(255,255,255,.5), 0 12px 30px rgba(97,86,33,.25); }
.text-link, .split-head a, .note a, .facts a, .checks a { color: var(--leaf-deep); }

/* Slab: white glass with a lime edge */
.slab {
  box-shadow: inset 0 1px 0 #fff,
    1px 1px 0 #FAF5E3, 2px 2px 0 #F8F1D7, 3px 3px 0 #F4EAC7, 4px 4px 0 #EFE3B6, 5px 5px 0 #E8D9A2, 6px 6px 0 #E1CE8D,
    18px 30px 60px -10px rgba(76,70,31,.45);
}
.stack li:nth-child(1) { background-image: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.85) 50%, transparent 60%), linear-gradient(180deg, #4D4720 0%, #2D2A16 60%, #3C381C 100%); }
.stack li:nth-child(2) { background-image: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.85) 50%, transparent 60%), linear-gradient(180deg, #5F5521 0%, #423D1D 60%, #524B20 100%); }
.stack li:nth-child(3) { background-image: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.85) 50%, transparent 60%), linear-gradient(180deg, #816F24 0%, #615621 60%, #736422 100%); }
.stack li:nth-child(4) { background-image: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.9) 50%, transparent 60%), linear-gradient(180deg, #A78B2C 0%, #8A7625 60%, #9C832A 100%); }
.stack li:nth-child(5) { background-image: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.95) 50%, transparent 60%), linear-gradient(180deg, #C3A950 0%, #A0862A 60%, #B89C3D 100%); }
.stack li:nth-child(6) { background-image: linear-gradient(100deg, transparent 40%, rgba(255,255,255,1) 50%, transparent 60%), linear-gradient(180deg, #D3BD6E 0%, #AC8F2D 60%, #C6AC56 100%); }

/* Cards: white face, lime-to-yellow edge */
.card3d { background: linear-gradient(#FFFFFF, #FDFFF8) padding-box, linear-gradient(135deg, rgba(179,149,51,.55), rgba(241,229,187,.6) 50%, rgba(255,228,92,.6)) border-box; }
.card3d:hover { background: linear-gradient(#FFFFFF, #FDFFF8) padding-box, linear-gradient(135deg, #B39533, #F1E5BB, #FFE45C) border-box; }
.principles h3::before { background: linear-gradient(90deg, #B39533, #F1E5BB, #FFE45C); }
.overview-row h3, .principles h3, .service-block h2, .split-head h2 { color: var(--ink); }
.section-gray { background: linear-gradient(180deg, #FAF6E4 0%, #F8F2D9 100%); }
.site-header { background: rgba(255,255,255,.85); }

/* Inner page titles: deep green face, lime-to-green extrusion */
.page-head h1 { color: var(--ink);
  text-shadow: 1px 1px 0 #F7EFD2, 2px 2px 0 #F1E6BD, 3px 3px 0 #E9D9A3, 4px 4px 0 #DECA84, 5px 5px 0 #CFB766, 6px 6px 0 #BCA043, 12px 18px 30px rgba(76,70,31,.35); }

/* Footer: deep forest */
.site-footer { background: linear-gradient(180deg, #35321A, #292614); }
.panorama { background: #F9F3DD; }

/* ============ Soft layer: muted butter → pistachio → sage ============ */
:root { --vivid: linear-gradient(135deg, #F6F2D2 0%, #F6EDCF 35%, #F0E5B9 68%, #E6D69C 100%); --leaf: #806E23; --leaf-deep: #625721; }
.band { background: radial-gradient(900px 400px at 85% 0%, rgba(255,255,255,.4), rgba(255,255,255,0) 60%), var(--vivid); }
.hero::before, .page-head::before { background-image: linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px); }
.hero h1 { text-shadow: 0 1px 0 rgba(255,255,255,.6), 0 14px 40px rgba(83,75,32,.15); }
.orb { opacity: .5; mix-blend-mode: normal; }
.orb-a { background: radial-gradient(circle, rgba(255,252,225,.95), rgba(255,252,225,0) 70%); }
.orb-b { background: radial-gradient(circle, rgba(241,230,189,.9), rgba(241,230,189,0) 70%); }
.btn-dark, .nav .nav-cta, .nav .nav-call, .hero .btn-dark {
  background: linear-gradient(180deg, #A4892B 0%, #806E23 50%, #625721 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 2px rgba(54,51,27,.25), 0 10px 22px -10px rgba(98,87,33,.55);
}
.btn-dark:hover, .nav .nav-cta:hover, .nav .nav-cta[aria-current="page"], .hero .btn-dark:hover { background: linear-gradient(180deg, #B29532 0%, #8E7926 50%, #6B5E21 100%); }
.slab { box-shadow: inset 0 1px 0 #fff, 1px 1px 0 #F2F4E4, 2px 2px 0 #E9EED6, 3px 3px 0 #F4EAC8, 4px 4px 0 #F1E5BB, 5px 5px 0 #ECDEAC, 6px 6px 0 #E7D79E, 18px 30px 60px -12px rgba(74,67,31,.3); }
.stack li:nth-child(4) { background-image: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.9) 50%, transparent 60%), linear-gradient(180deg, #927C27 0%, #806E23 60%, #8B7726 100%); }
.stack li:nth-child(5) { background-image: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.95) 50%, transparent 60%), linear-gradient(180deg, #B79A3B 0%, #9F862A 60%, #B0922E 100%); }
.stack li:nth-child(6) { background-image: linear-gradient(100deg, transparent 40%, rgba(255,255,255,1) 50%, transparent 60%), linear-gradient(180deg, #CAB15C 0%, #B49736 60%, #C2A84F 100%); }
.card3d { background: linear-gradient(#FFFFFF, #FEFFFB) padding-box, linear-gradient(135deg, rgba(215,193,117,.55), rgba(243,233,197,.6) 50%, rgba(240,236,200,.7)) border-box; }
.card3d:hover { background: linear-gradient(#FFFFFF, #FEFFFB) padding-box, linear-gradient(135deg, #D1B96A, #F0E5B9, #EDE6B8) border-box; }
.principles h3::before { background: linear-gradient(90deg, #B89B3C, #EBDCA8, #E8E0A8); }
.section-gray { background: linear-gradient(180deg, #F5F8EA 0%, #EDF3E0 100%); }
body { background: radial-gradient(1100px 700px at 100% -10%, #F7F6E3 0%, rgba(247,246,227,0) 60%), radial-gradient(900px 700px at -10% 30%, #EFF5E8 0%, rgba(239,245,232,0) 60%), #FBFCF6; }
.page-head h1 { text-shadow: 1px 1px 0 #EEF0D6, 2px 2px 0 #E3E9C8, 3px 3px 0 #F0E5B9, 4px 4px 0 #EADCA8, 5px 5px 0 #E4D295, 6px 6px 0 #DDC880, 12px 18px 30px rgba(74,67,31,.25); }
.panorama { background: #F1F3DC; }
.site-footer { background: linear-gradient(180deg, #38351B, #2E2B17); }

/* ============ Honey layer: more yellow, a hint of green ============ */
:root {
  --vivid: linear-gradient(135deg, #FCF3C8 0%, #F6EAB0 40%, #ECE4AE 72%, #DCE2B6 100%);
  --ink: #33301A; --ink-soft: #5A5530;
  --gold: #C8962A; --gold-deep: #A67A16;
}
body { color: var(--ink); background: radial-gradient(1100px 700px at 100% -10%, #FCF5DA 0%, rgba(252,245,218,0) 60%), radial-gradient(900px 700px at -10% 30%, #F8F4E2 0%, rgba(248,244,226,0) 60%), #FDFBF3; }
.hero, .page-head, .band { color: var(--ink); }
.hero h1, .band h2, .page-head h1, .split-head h2, .overview-row h3, .principles h3, .service-block h2 { color: var(--ink); }
.hero .lede, .page-head .lede, .page-head .lede a { color: var(--ink-soft); }
.orb-a { background: radial-gradient(circle, rgba(255,246,200,.95), rgba(255,246,200,0) 70%); }
.orb-b { background: radial-gradient(circle, rgba(240,226,170,.9), rgba(240,226,170,0) 70%); }

/* Gold buttons, dark text for contrast */
.btn-dark, .nav .nav-cta, .nav .nav-call, .hero .btn-dark {
  background: linear-gradient(180deg, #F2C95A 0%, #DDAA3A 50%, #C48F22 100%); color: #2A2208;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 2px rgba(90,60,0,.25), 0 10px 22px -10px rgba(170,120,20,.6);
}
.btn-dark:hover, .nav .nav-cta:hover, .nav .nav-cta[aria-current="page"], .hero .btn-dark:hover {
  background: linear-gradient(180deg, #F6D26C 0%, #E3B347 50%, #CC982B 100%); color: #2A2208;
}
.band .btn-light { color: var(--gold-deep); }
.text-link, .split-head a, .note a, .facts a, .checks a { color: var(--gold-deep); }

/* Slab: golden edge, olive-to-honey words */
.slab { box-shadow: inset 0 1px 0 #fff, 1px 1px 0 #FBF4DA, 2px 2px 0 #F6ECC6, 3px 3px 0 #F1E3B2, 4px 4px 0 #EBD99E, 5px 5px 0 #E5CF8B, 6px 6px 0 #DEC478, 18px 30px 60px -12px rgba(110,85,20,.3); }
.stack li:nth-child(1) { background-image: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.85) 50%, transparent 60%), linear-gradient(180deg, #3E3A1C 0%, #24210E 60%, #35311A 100%); }
.stack li:nth-child(2) { background-image: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.85) 50%, transparent 60%), linear-gradient(180deg, #57501F 0%, #3E3814 60%, #4F481C 100%); }
.stack li:nth-child(3) { background-image: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.85) 50%, transparent 60%), linear-gradient(180deg, #776A1E 0%, #5C5014 60%, #6E621B 100%); }
.stack li:nth-child(4) { background-image: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.9) 50%, transparent 60%), linear-gradient(180deg, #9C8420 0%, #7E6915 60%, #92791C 100%); }
.stack li:nth-child(5) { background-image: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.95) 50%, transparent 60%), linear-gradient(180deg, #BC9A2A 0%, #A0801A 60%, #B39226 100%); }
.stack li:nth-child(6) { background-image: linear-gradient(100deg, transparent 40%, rgba(255,255,255,1) 50%, transparent 60%), linear-gradient(180deg, #D6B13E 0%, #BC962A 60%, #CDA837 100%); }

/* Cards: cream face, honey edge */
.card3d { background: linear-gradient(#FFFFFF, #FFFDF7) padding-box, linear-gradient(135deg, rgba(222,196,120,.6), rgba(240,226,170,.65) 50%, rgba(220,226,182,.6)) border-box; }
.card3d:hover { background: linear-gradient(#FFFFFF, #FFFDF7) padding-box, linear-gradient(135deg, #DEC478, #F2E2A0, #EDE0B0) border-box; }
.principles h3::before { background: linear-gradient(90deg, #DDAA3A, #F2D98A, #EFE2B4); }
.section-gray { background: linear-gradient(180deg, #FCF7E6 0%, #F7F0D8 100%); }
.page-head h1 { text-shadow: 1px 1px 0 #FBF1CF, 2px 2px 0 #F5E6B6, 3px 3px 0 #EEDA9E, 4px 4px 0 #E6CD88, 5px 5px 0 #DDC074, 6px 6px 0 #D3B262, 12px 18px 30px rgba(110,85,20,.25); }
.panorama { background: #F8F0D3; }
.site-footer { background: linear-gradient(180deg, #34301A, #221F10); }

/* ============ Reference gradient (owner's sample): butter yellow → mint ============ */
:root { --vivid: linear-gradient(100deg, #FCF3AE 0%, #FBF3B0 30%, #F3F3B9 48%, #E2F4C4 64%, #D2F5CD 82%, #C9F5D2 100%); }
.band { background: radial-gradient(900px 400px at 85% 0%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%), var(--vivid); }
.section-gray { background: linear-gradient(100deg, #FDF8D6 0%, #F7F7DC 50%, #E9F8E3 100%); }
.card3d { background: linear-gradient(#FFFFFF, #FFFEF8) padding-box, linear-gradient(120deg, rgba(240,220,120,.65), rgba(236,240,170,.6) 50%, rgba(170,230,190,.65)) border-box; }
.card3d:hover { background: linear-gradient(#FFFFFF, #FFFEF8) padding-box, linear-gradient(120deg, #EED574, #E6EFA0, #A6E3BE) border-box; }
.principles h3::before { background: linear-gradient(90deg, #E8C24A, #EEF0A0, #A6E3BE); }
.orb-a { background: radial-gradient(circle, rgba(200,245,215,.95), rgba(200,245,215,0) 70%); }
.orb-b { background: radial-gradient(circle, rgba(255,246,190,.95), rgba(255,246,190,0) 70%); }

/* ============ Gradient site-wide ============ */
:root { --grad: linear-gradient(100deg, #FCF3AE 0%, #FBF3B0 30%, #F3F3B9 48%, #E2F4C4 64%, #D2F5CD 82%, #C9F5D2 100%); }
body { background: #F8F6CC; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--grad); }
.section, .panorama { background: transparent; }
.section-gray { background: rgba(255,255,255,.32); }
.section { border-bottom-color: rgba(51,48,26,.08); }
.hero, .page-head, .band { background: transparent; }
.site-header { background: rgba(255,255,255,.5); border-bottom-color: rgba(51,48,26,.08); }
.site-header.is-scrolled { background: rgba(255,255,255,.72); }
.card3d { background: linear-gradient(rgba(255,255,255,.92), rgba(255,255,255,.86)) padding-box, linear-gradient(120deg, rgba(232,200,90,.7), rgba(236,240,170,.6) 50%, rgba(140,215,170,.7)) border-box; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.checks { background: rgba(255,255,255,.88); }
.logos li { background: rgba(255,255,255,.92); }

/* Buttons: the same gradient, raised with a pressable edge */
.btn-dark, .nav .nav-cta, .nav .nav-call, .hero .btn-dark, .btn-light, .band .btn-light {
  background: var(--grad); color: #2B2912;
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -2px 0 rgba(150,160,80,.18), 0 3px 0 #D3CF8E, 0 4px 0 #C4CC92, 0 14px 26px -10px rgba(110,120,40,.5);
  font-weight: 600;
}
.btn-dark:hover, .nav .nav-cta:hover, .nav .nav-cta[aria-current="page"], .hero .btn-dark:hover, .btn-light:hover, .band .btn-light:hover {
  background: linear-gradient(100deg, #FFF6B8 0%, #F6F6C2 45%, #D8F8D8 100%); color: #2B2912;
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(150,160,80,.18), 0 5px 0 #D3CF8E, 0 6px 0 #C4CC92, 0 20px 32px -12px rgba(110,120,40,.55);
}
.btn-dark:active, .nav .nav-cta:active, .btn-light:active { transform: translateY(2px); box-shadow: inset 0 1px 0 #fff, 0 1px 0 #D3CF8E, 0 4px 10px -6px rgba(110,120,40,.5); }
.btn-dark::after, .btn-light::after, .hero .btn-dark::after { background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.75) 50%, transparent 70%); }
.btn-line, .hero .btn-line { background: rgba(255,255,255,.6); color: #2B2912; border: 1px solid rgba(255,255,255,.95); box-shadow: inset 0 1px 0 #fff, 0 3px 0 rgba(200,200,140,.6), 0 12px 22px -12px rgba(110,120,40,.4); }

/* Footer: a deeper take on the same gradient, dark text */
.site-footer { background: linear-gradient(100deg, #F2E48C 0%, #E6EAA0 45%, #C6EBBB 75%, #ABE5C2 100%); color: #4A4626; }
.site-footer .footer-h, .footer-brand p, .footer-list a:hover { color: #2B2912; }
.footer-list a, .site-footer address { color: #4A4626; }
.footer-brand img { filter: none; }
.footer-base { border-top-color: rgba(51,48,26,.15); color: #4A4626; }
.footer-base .credit a { color: #2B2912; }
.footer-base .credit a:hover { color: #000; }

/* ============ Glass layer ============ */
:root {
  --glass: linear-gradient(140deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.30) 100%);
  --glass-edge: linear-gradient(140deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.35) 45%, rgba(255,255,255,.75) 100%);
  --glass-blur: blur(18px) saturate(1.7);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(90,90,30,.06), 0 18px 40px -16px rgba(100,110,40,.35);
}
/* colour blobs behind everything, so the glass has something to blur */
body::after {
  content: ""; position: fixed; inset: -10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 12% 22%, rgba(255,205,70,.55) 0, rgba(255,205,70,0) 22%),
    radial-gradient(circle at 86% 14%, rgba(110,215,165,.5) 0, rgba(110,215,165,0) 22%),
    radial-gradient(circle at 72% 72%, rgba(255,232,120,.55) 0, rgba(255,232,120,0) 24%),
    radial-gradient(circle at 22% 86%, rgba(140,225,185,.5) 0, rgba(140,225,185,0) 22%),
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.45) 0, rgba(255,255,255,0) 30%);
}
@media (prefers-reduced-motion: no-preference) {
  body::after { animation: drift-blobs 26s ease-in-out infinite alternate; }
}
@keyframes drift-blobs { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-3%, 2%, 0) scale(1.06); } }

.card3d, .checks {
  position: relative;
  background: var(--glass) padding-box, var(--glass-edge) border-box;
  border: 1px solid transparent;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}
.card3d:hover { background: linear-gradient(140deg, rgba(255,255,255,.75), rgba(255,255,255,.42)) padding-box, linear-gradient(140deg, #fff, rgba(255,255,255,.5) 45%, #fff) border-box; box-shadow: inset 0 1px 0 #fff, 0 26px 50px -18px rgba(100,110,40,.45); }
/* a light sheen across the top-left of every pane */
.card3d::after, .checks::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(155deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 32%);
}
.logos li { background: var(--glass) padding-box, var(--glass-edge) border-box; }
.overview-row img, .service-title img { box-shadow: inset 0 1px 0 #fff, 0 6px 16px -8px rgba(100,110,40,.35); }

.slab {
  background: linear-gradient(145deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.4) 100%);
  border: 1px solid rgba(255,255,255,.95);
  backdrop-filter: blur(22px) saturate(1.7); -webkit-backdrop-filter: blur(22px) saturate(1.7);
}
.slab::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(155deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 35%); }

.site-header, .site-header.is-scrolled { background: rgba(255,255,255,.38); backdrop-filter: blur(20px) saturate(1.7); -webkit-backdrop-filter: blur(20px) saturate(1.7); border-bottom: 1px solid rgba(255,255,255,.7); }
.section-gray { background: rgba(255,255,255,.18); }
.map { border: 1px solid rgba(255,255,255,.9); box-shadow: var(--glass-shadow); }

/* Glossy glass highlight on the gradient buttons */
.btn-dark, .nav .nav-cta, .nav .nav-call, .hero .btn-dark, .btn-light, .band .btn-light {
  background: linear-gradient(180deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,.15) 50%, rgba(255,255,255,0) 51%), var(--grad);
}
.btn-line, .hero .btn-line { background: rgba(255,255,255,.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* Footer: a glass shelf over the gradient */
.site-footer { background: rgba(255,255,255,.34); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); border-top: 1px solid rgba(255,255,255,.8); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }

/* ============ Slab words: solid faces with a real extruded edge (crisp at any tilt) ============ */
.slab .stack { letter-spacing: -0.025em; }
.slab .stack li { background: none !important; -webkit-background-clip: border-box; background-clip: border-box; animation-name: rise !important; animation-iteration-count: 1 !important; padding-bottom: .04em; margin-bottom: 0; transform: none !important; -webkit-font-smoothing: antialiased; }
.slab .stack li:nth-child(1) { color: #3A3618; -webkit-text-fill-color: #3A3618; text-shadow: 0 -1px 0 rgba(255,255,255,.55), 0.75px 1px 0 #312E14, 1.50px 2px 0 #2D2A12, 2.25px 3px 0 #282510, 3.00px 4px 0 #23210E, 4px 9px 14px rgba(80,70,20,.25); }
.slab .stack li:nth-child(2) { color: #5A5226; -webkit-text-fill-color: #5A5226; text-shadow: 0 -1px 0 rgba(255,255,255,.55), 0.75px 1px 0 #4D4620, 1.50px 2px 0 #463F1D, 2.25px 3px 0 #3E391A, 3.00px 4px 0 #373217, 4px 9px 14px rgba(80,70,20,.25); }
.slab .stack li:nth-child(3) { color: #7D6C22; -webkit-text-fill-color: #7D6C22; text-shadow: 0 -1px 0 rgba(255,255,255,.55), 0.75px 1px 0 #6B5C1D, 1.50px 2px 0 #61541A, 2.25px 3px 0 #574B17, 3.00px 4px 0 #4D4215, 4px 9px 14px rgba(80,70,20,.25); }
.slab .stack li:nth-child(4) { color: #9C8420; -webkit-text-fill-color: #9C8420; text-shadow: 0 -1px 0 rgba(255,255,255,.55), 0.75px 1px 0 #86711B, 1.50px 2px 0 #796618, 2.25px 3px 0 #6D5C16, 3.00px 4px 0 #605113, 4px 9px 14px rgba(80,70,20,.25); }
.slab .stack li:nth-child(5) { color: #B9982C; -webkit-text-fill-color: #B9982C; text-shadow: 0 -1px 0 rgba(255,255,255,.55), 0.75px 1px 0 #9F8225, 1.50px 2px 0 #907622, 2.25px 3px 0 #816A1E, 3.00px 4px 0 #725E1B, 4px 9px 14px rgba(80,70,20,.25); }
.slab .stack li:nth-child(6) { color: #CFAE3E; -webkit-text-fill-color: #CFAE3E; text-shadow: 0 -1px 0 rgba(255,255,255,.55), 0.75px 1px 0 #B29535, 1.50px 2px 0 #A18730, 2.25px 3px 0 #90792B, 3.00px 4px 0 #806B26, 4px 9px 14px rgba(80,70,20,.25); }
.slab { -webkit-backdrop-filter: none; backdrop-filter: none; isolation: isolate; }
.slab::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; backdrop-filter: blur(22px) saturate(1.7); -webkit-backdrop-filter: blur(22px) saturate(1.7); }
.slab::after { z-index: 0; }
.slab .stack { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .slab .stack li { opacity: 0; translate: 0 14px; animation: rise-t .8s var(--ease) forwards !important; }
  .slab .stack li:nth-child(2) { animation-delay: .08s !important; }
  .slab .stack li:nth-child(3) { animation-delay: .16s !important; }
  .slab .stack li:nth-child(4) { animation-delay: .24s !important; }
  .slab .stack li:nth-child(5) { animation-delay: .32s !important; }
  .slab .stack li:nth-child(6) { animation-delay: .40s !important; }
}
@keyframes rise-t { to { opacity: 1; translate: 0 0; } }

/* ============ Glass letters: gloss overlay + rim light + travelling glint ============ */
.slab .stack li { position: relative; }
.slab .stack li::after {
  content: attr(data-text);
  position: absolute; inset: 0; pointer-events: none;
  color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke: 0; text-shadow: none;
  background-image:
    linear-gradient(105deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.95) 48%, rgba(255,255,255,0) 58%),
    linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.45) 30%, rgba(255,255,255,.08) 48%, rgba(255,255,255,0) 52%, rgba(255,255,255,0) 78%, rgba(255,255,255,.28) 100%);
  background-size: 260% 100%, 100% 100%;
  background-position: 130% 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
}
@media (prefers-reduced-motion: no-preference) {
  .slab .stack li::after { animation: glint 6s ease-in-out 1.4s infinite; }
  .slab .stack li:nth-child(2)::after { animation-delay: 1.5s; }
  .slab .stack li:nth-child(3)::after { animation-delay: 1.6s; }
  .slab .stack li:nth-child(4)::after { animation-delay: 1.7s; }
  .slab .stack li:nth-child(5)::after { animation-delay: 1.8s; }
  .slab .stack li:nth-child(6)::after { animation-delay: 1.9s; }
}
@keyframes glint { 0%, 55% { background-position: 130% 0, 0 0; } 80%, 100% { background-position: -30% 0, 0 0; } }

/* ============ Top ribbon: deep evergreen glass ============ */
.site-header, .site-header.is-scrolled {
  background: linear-gradient(100deg, rgba(22,138,160,.95) 0%, rgba(30,152,174,.95) 55%, rgba(40,166,186,.95) 100%);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid rgba(252,243,174,.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 30px -14px rgba(15,95,115,.45);
}
.site-header .brand-name { color: #FFFFFF; }
.site-header .brand-sub { color: #E4F8FB; }
.site-header .nav a { color: #FFFFFF; font-weight: 500; }
.site-header .nav a:hover, .site-header .nav a[aria-current="page"]:not(.nav-cta) { color: #FCF3AE; }
.site-header .nav a[aria-current="page"]:not(.nav-cta) { text-decoration-color: #FCF3AE; }
.site-header .nav .nav-cta, .site-header .nav .nav-call { color: #2B2912; box-shadow: inset 0 1px 0 #fff, 0 3px 0 #9FCFD6, 0 10px 20px -8px rgba(0,0,0,.45); }
.site-header :focus-visible { outline-color: #FCF3AE; }
.site-header .nav .nav-call { background: linear-gradient(180deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,.15) 50%, rgba(255,255,255,0) 51%), var(--grad); }

/* ============ Slab words: jade → teal, slim edge ============ */
.slab .stack li:nth-child(1) { color: #17594A; -webkit-text-fill-color: #17594A; text-shadow: 0 -1px 0 rgba(255,255,255,.7), 0.6px 0.9px 0 #12483C, 1.2px 1.8px 0 #104035, 1.8px 2.7px 0 #0E372D, 3px 7px 12px rgba(20,90,70,.22); }
.slab .stack li:nth-child(2) { color: #1C6E5B; -webkit-text-fill-color: #1C6E5B; text-shadow: 0 -1px 0 rgba(255,255,255,.7), 0.6px 0.9px 0 #165A4A, 1.2px 1.8px 0 #144F41, 1.8px 2.7px 0 #114438, 3px 7px 12px rgba(20,90,70,.22); }
.slab .stack li:nth-child(3) { color: #22846C; -webkit-text-fill-color: #22846C; text-shadow: 0 -1px 0 rgba(255,255,255,.7), 0.6px 0.9px 0 #1B6C58, 1.2px 1.8px 0 #185F4D, 1.8px 2.7px 0 #155142, 3px 7px 12px rgba(20,90,70,.22); }
.slab .stack li:nth-child(4) { color: #2A9A7D; -webkit-text-fill-color: #2A9A7D; text-shadow: 0 -1px 0 rgba(255,255,255,.7), 0.6px 0.9px 0 #227E66, 1.2px 1.8px 0 #1E6E5A, 1.8px 2.7px 0 #1A5F4D, 3px 7px 12px rgba(20,90,70,.22); }
.slab .stack li:nth-child(5) { color: #38AE8F; -webkit-text-fill-color: #38AE8F; text-shadow: 0 -1px 0 rgba(255,255,255,.7), 0.6px 0.9px 0 #2D8E75, 1.2px 1.8px 0 #287D66, 1.8px 2.7px 0 #226B58, 3px 7px 12px rgba(20,90,70,.22); }
.slab .stack li:nth-child(6) { color: #4EC0A2; -webkit-text-fill-color: #4EC0A2; text-shadow: 0 -1px 0 rgba(255,255,255,.7), 0.6px 0.9px 0 #3F9D84, 1.2px 1.8px 0 #388A74, 1.8px 2.7px 0 #307764, 3px 7px 12px rgba(20,90,70,.22); }
.slab { box-shadow: inset 0 1px 0 #fff, 1px 1px 0 #F3F9EC, 2px 2px 0 #E6F4E4, 3px 3px 0 #D8EFDC, 4px 4px 0 #CAEAD4, 5px 5px 0 #BCE4CC, 6px 6px 0 #AEDEC4, 18px 30px 60px -12px rgba(30,100,80,.28); }

/* ============ Cushioned letters on a jade glass slab ============ */
.slab {
  background: linear-gradient(150deg, rgba(60,170,190,.95) 0%, rgba(48,156,178,.93) 55%, rgba(76,186,204,.9) 100%);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -12px 30px rgba(12,80,98,.25),
    1px 1px 0 #2E9AAE, 2px 2px 0 #2A92A6, 3px 3px 0 #268A9E, 4px 4px 0 #228296, 5px 5px 0 #1E7A8E, 6px 6px 0 #1A7286,
    18px 30px 60px -12px rgba(12,80,98,.45);
}
.slab::after { background: linear-gradient(155deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 38%); }
.slab .stack { letter-spacing: -0.015em; }
.slab .stack li:nth-child(1) { color: #FFF7CC; -webkit-text-fill-color: #FFF7CC; text-shadow: 0 1px 0 #F2E8BA, 0 2px 0 #E7DDAC, 0 3px 0 #DDD19D, 0 4px 2px rgba(10,70,88,.35), 0 8px 14px rgba(10,70,88,.32), 0 16px 28px rgba(10,70,88,.2); }
.slab .stack li:nth-child(2) { color: #FBF7CF; -webkit-text-fill-color: #FBF7CF; text-shadow: 0 1px 0 #EEE8BD, 0 2px 0 #E4DDAE, 0 3px 0 #DAD19F, 0 4px 2px rgba(10,70,88,.35), 0 8px 14px rgba(10,70,88,.32), 0 16px 28px rgba(10,70,88,.2); }
.slab .stack li:nth-child(3) { color: #F4F7D3; -webkit-text-fill-color: #F4F7D3; text-shadow: 0 1px 0 #E8E8C0, 0 2px 0 #DFDDB1, 0 3px 0 #D5D1A2, 0 4px 2px rgba(10,70,88,.35), 0 8px 14px rgba(10,70,88,.32), 0 16px 28px rgba(10,70,88,.2); }
.slab .stack li:nth-child(4) { color: #EBF7D8; -webkit-text-fill-color: #EBF7D8; text-shadow: 0 1px 0 #E0E8C5, 0 2px 0 #D8DDB5, 0 3px 0 #CFD1A6, 0 4px 2px rgba(10,70,88,.35), 0 8px 14px rgba(10,70,88,.32), 0 16px 28px rgba(10,70,88,.2); }
.slab .stack li:nth-child(5) { color: #E2F7DE; -webkit-text-fill-color: #E2F7DE; text-shadow: 0 1px 0 #D8E8CA, 0 2px 0 #D1DDBA, 0 3px 0 #C9D1AA, 0 4px 2px rgba(10,70,88,.35), 0 8px 14px rgba(10,70,88,.32), 0 16px 28px rgba(10,70,88,.2); }
.slab .stack li:nth-child(6) { color: #DAF6E3; -webkit-text-fill-color: #DAF6E3; text-shadow: 0 1px 0 #D1E8CE, 0 2px 0 #CBDCBE, 0 3px 0 #C4D0AD, 0 4px 2px rgba(10,70,88,.35), 0 8px 14px rgba(10,70,88,.32), 0 16px 28px rgba(10,70,88,.2); }
.slab .stack li::after {
  background-image:
    linear-gradient(105deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.85) 49%, rgba(255,255,255,0) 58%),
    linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.55) 22%, rgba(255,255,255,0) 50%, rgba(170,150,80,0) 62%, rgba(150,135,70,.28) 100%);
}

/* ============ Clearer glass slab, less green ============ */
.slab {
  background: linear-gradient(150deg, rgba(110,205,222,.50) 0%, rgba(84,190,212,.44) 50%, rgba(130,218,232,.38) 100%);
  border: 1.5px solid rgba(255,255,255,.85);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.85), inset 2px 0 0 rgba(255,255,255,.35),
    inset 0 -18px 40px rgba(20,120,140,.18), inset 0 0 0 1px rgba(255,255,255,.25),
    1px 1px 0 rgba(255,255,255,.55), 2px 2px 0 rgba(220,246,250,.5), 3px 3px 0 rgba(185,234,242,.45), 4px 4px 0 rgba(150,220,232,.4), 5px 5px 0 rgba(115,204,220,.35), 6px 6px 0 rgba(80,186,206,.3),
    18px 30px 60px -14px rgba(15,100,120,.35);
}
.slab::before { backdrop-filter: blur(26px) saturate(1.8) brightness(1.03); -webkit-backdrop-filter: blur(26px) saturate(1.8) brightness(1.03); }
/* reflections: a soft top-left wash plus a crisp diagonal streak */
.slab::after {
  background:
    linear-gradient(115deg, rgba(255,255,255,0) 18%, rgba(255,255,255,.38) 19%, rgba(255,255,255,.12) 27%, rgba(255,255,255,0) 28%),
    linear-gradient(155deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.12) 30%, rgba(255,255,255,0) 45%),
    radial-gradient(120% 60% at 50% 120%, rgba(255,255,255,.25), rgba(255,255,255,0) 60%);
}
.slab .stack li { filter: drop-shadow(0 2px 3px rgba(10,70,88,.35)); }

/* ============ Light aqua: ribbon + slab ============ */
.site-header, .site-header.is-scrolled {
  background: linear-gradient(100deg, rgba(196,240,246,.88) 0%, rgba(178,234,243,.88) 55%, rgba(200,244,238,.88) 100%);
  border-bottom: 1px solid rgba(255,255,255,.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 30px -16px rgba(40,140,160,.35);
}
.site-header .brand-name { color: #0E3F4A; }
.site-header .brand-sub { color: #2D6A76; }
.site-header .nav a { color: #0E4F5E; }
.site-header .nav a:hover, .site-header .nav a[aria-current="page"]:not(.nav-cta) { color: #06343E; }
.site-header .nav a[aria-current="page"]:not(.nav-cta) { text-decoration-color: #2AA7BB; }
.site-header :focus-visible { outline-color: #0E4F5E; }

.slab {
  background: linear-gradient(150deg, rgba(178,236,246,.62) 0%, rgba(150,224,238,.55) 50%, rgba(190,242,246,.5) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.9), inset 2px 0 0 rgba(255,255,255,.45),
    inset 0 -18px 40px rgba(60,170,190,.15), inset 0 0 0 1px rgba(255,255,255,.3),
    1px 1px 0 rgba(255,255,255,.65), 2px 2px 0 rgba(225,248,252,.6), 3px 3px 0 rgba(200,242,248,.55), 4px 4px 0 rgba(175,234,244,.5), 5px 5px 0 rgba(150,226,240,.45), 6px 6px 0 rgba(125,216,234,.4),
    18px 30px 60px -14px rgba(40,140,160,.3);
}
.slab .stack li:nth-child(1) { text-shadow: 0 1px 0 #ECE8BE, 0 2px 0 #DBDBB3, 0 3px 0 #CBCEA8, 0 4px 2px rgba(10,95,115,.45), 0 8px 14px rgba(10,95,115,.38), 0 16px 28px rgba(10,95,115,.22); }
.slab .stack li:nth-child(2) { text-shadow: 0 1px 0 #E8E8C1, 0 2px 0 #D8DBB5, 0 3px 0 #C9CEAA, 0 4px 2px rgba(10,95,115,.45), 0 8px 14px rgba(10,95,115,.38), 0 16px 28px rgba(10,95,115,.22); }
.slab .stack li:nth-child(3) { text-shadow: 0 1px 0 #E2E8C4, 0 2px 0 #D3DBB8, 0 3px 0 #C4CEAC, 0 4px 2px rgba(10,95,115,.45), 0 8px 14px rgba(10,95,115,.38), 0 16px 28px rgba(10,95,115,.22); }
.slab .stack li:nth-child(4) { text-shadow: 0 1px 0 #DAE8C9, 0 2px 0 #CDDBBC, 0 3px 0 #BFCEAF, 0 4px 2px rgba(10,95,115,.45), 0 8px 14px rgba(10,95,115,.38), 0 16px 28px rgba(10,95,115,.22); }
.slab .stack li:nth-child(5) { text-shadow: 0 1px 0 #D3E8CE, 0 2px 0 #C6DBC0, 0 3px 0 #B9CEB3, 0 4px 2px rgba(10,95,115,.45), 0 8px 14px rgba(10,95,115,.38), 0 16px 28px rgba(10,95,115,.22); }
.slab .stack li:nth-child(6) { text-shadow: 0 1px 0 #CCE7D2, 0 2px 0 #C0DAC4, 0 3px 0 #B4CDB6, 0 4px 2px rgba(10,95,115,.45), 0 8px 14px rgba(10,95,115,.38), 0 16px 28px rgba(10,95,115,.22); }
.slab .stack li { filter: drop-shadow(0 2px 3px rgba(10,95,115,.45)); }

/* ============ Colour options (preview with ?theme=lavender|peach|sky|blush) ============ */
html[data-theme="lavender"] .site-header, html[data-theme="lavender"] .site-header.is-scrolled { background: linear-gradient(100deg, rgba(236,228,252,0.9) 0%, rgba(222,212,248,0.9) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 30px -16px rgba(80,55,150,0.3); }
html[data-theme="lavender"] .site-header .brand-name { color: #3B2A6B; }
html[data-theme="lavender"] .site-header .brand-sub { color: #6A5A98; }
html[data-theme="lavender"] .site-header .nav a { color: #3B2A6B; }
html[data-theme="lavender"] .site-header .nav a[aria-current="page"]:not(.nav-cta) { text-decoration-color: #8A6FD8; }
html[data-theme="lavender"] .slab { background: linear-gradient(150deg, rgba(226,214,250,0.66) 0%, rgba(206,192,244,0.58) 50%, rgba(232,224,252,0.52) 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.9), inset 2px 0 0 rgba(255,255,255,.45), inset 0 -18px 40px rgba(80,55,150,0.12), inset 0 0 0 1px rgba(255,255,255,.3),
  1px 1px 0 rgba(255,255,255,.65), 2px 2px 0 rgba(232,224,252,0.6), 3px 3px 0 rgba(226,214,250,0.55), 4px 4px 0 rgba(206,192,244,0.5), 5px 5px 0 rgba(206,192,244,0.45), 6px 6px 0 rgba(206,192,244,0.4), 18px 30px 60px -14px rgba(80,55,150,0.3); }
html[data-theme="lavender"] .slab .stack li { filter: drop-shadow(0 2px 3px rgba(80,55,150,0.4)); }
html[data-theme="lavender"] .slab .stack li:nth-child(1) { color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; text-shadow: 0 1px 0 rgba(226,214,250,1), 0 2px 0 rgba(206,192,244,1), 0 3px 0 rgba(175,163,207,1), 0 4px 2px rgba(80,55,150,0.42), 0 8px 14px rgba(80,55,150,0.34), 0 16px 28px rgba(80,55,150,0.2); }
html[data-theme="lavender"] .slab .stack li:nth-child(2) { color: #FFFDF4; -webkit-text-fill-color: #FFFDF4; text-shadow: 0 1px 0 rgba(226,214,250,1), 0 2px 0 rgba(206,192,244,1), 0 3px 0 rgba(175,163,207,1), 0 4px 2px rgba(80,55,150,0.42), 0 8px 14px rgba(80,55,150,0.34), 0 16px 28px rgba(80,55,150,0.2); }
html[data-theme="lavender"] .slab .stack li:nth-child(3) { color: #FFFBEA; -webkit-text-fill-color: #FFFBEA; text-shadow: 0 1px 0 rgba(226,214,250,1), 0 2px 0 rgba(206,192,244,1), 0 3px 0 rgba(175,163,207,1), 0 4px 2px rgba(80,55,150,0.42), 0 8px 14px rgba(80,55,150,0.34), 0 16px 28px rgba(80,55,150,0.2); }
html[data-theme="lavender"] .slab .stack li:nth-child(4) { color: #FFF9E0; -webkit-text-fill-color: #FFF9E0; text-shadow: 0 1px 0 rgba(226,214,250,1), 0 2px 0 rgba(206,192,244,1), 0 3px 0 rgba(175,163,207,1), 0 4px 2px rgba(80,55,150,0.42), 0 8px 14px rgba(80,55,150,0.34), 0 16px 28px rgba(80,55,150,0.2); }
html[data-theme="lavender"] .slab .stack li:nth-child(5) { color: #FFF7D6; -webkit-text-fill-color: #FFF7D6; text-shadow: 0 1px 0 rgba(226,214,250,1), 0 2px 0 rgba(206,192,244,1), 0 3px 0 rgba(175,163,207,1), 0 4px 2px rgba(80,55,150,0.42), 0 8px 14px rgba(80,55,150,0.34), 0 16px 28px rgba(80,55,150,0.2); }
html[data-theme="lavender"] .slab .stack li:nth-child(6) { color: #FFF5CC; -webkit-text-fill-color: #FFF5CC; text-shadow: 0 1px 0 rgba(226,214,250,1), 0 2px 0 rgba(206,192,244,1), 0 3px 0 rgba(175,163,207,1), 0 4px 2px rgba(80,55,150,0.42), 0 8px 14px rgba(80,55,150,0.34), 0 16px 28px rgba(80,55,150,0.2); }

html[data-theme="peach"] .site-header, html[data-theme="peach"] .site-header.is-scrolled { background: linear-gradient(100deg, rgba(255,232,214,0.9) 0%, rgba(255,220,198,0.9) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 30px -16px rgba(170,80,40,0.3); }
html[data-theme="peach"] .site-header .brand-name { color: #6A3418; }
html[data-theme="peach"] .site-header .brand-sub { color: #9A5E3E; }
html[data-theme="peach"] .site-header .nav a { color: #6A3418; }
html[data-theme="peach"] .site-header .nav a[aria-current="page"]:not(.nav-cta) { text-decoration-color: #E58B5A; }
html[data-theme="peach"] .slab { background: linear-gradient(150deg, rgba(255,214,190,0.66) 0%, rgba(252,198,170,0.58) 50%, rgba(255,226,206,0.52) 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.9), inset 2px 0 0 rgba(255,255,255,.45), inset 0 -18px 40px rgba(170,80,40,0.12), inset 0 0 0 1px rgba(255,255,255,.3),
  1px 1px 0 rgba(255,255,255,.65), 2px 2px 0 rgba(255,226,206,0.6), 3px 3px 0 rgba(255,214,190,0.55), 4px 4px 0 rgba(252,198,170,0.5), 5px 5px 0 rgba(252,198,170,0.45), 6px 6px 0 rgba(252,198,170,0.4), 18px 30px 60px -14px rgba(170,80,40,0.3); }
html[data-theme="peach"] .slab .stack li { filter: drop-shadow(0 2px 3px rgba(170,80,40,0.4)); }
html[data-theme="peach"] .slab .stack li:nth-child(1) { color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; text-shadow: 0 1px 0 rgba(255,214,190,1), 0 2px 0 rgba(252,198,170,1), 0 3px 0 rgba(214,168,144,1), 0 4px 2px rgba(170,80,40,0.42), 0 8px 14px rgba(170,80,40,0.34), 0 16px 28px rgba(170,80,40,0.2); }
html[data-theme="peach"] .slab .stack li:nth-child(2) { color: #FFFDF6; -webkit-text-fill-color: #FFFDF6; text-shadow: 0 1px 0 rgba(255,214,190,1), 0 2px 0 rgba(252,198,170,1), 0 3px 0 rgba(214,168,144,1), 0 4px 2px rgba(170,80,40,0.42), 0 8px 14px rgba(170,80,40,0.34), 0 16px 28px rgba(170,80,40,0.2); }
html[data-theme="peach"] .slab .stack li:nth-child(3) { color: #FFFBEE; -webkit-text-fill-color: #FFFBEE; text-shadow: 0 1px 0 rgba(255,214,190,1), 0 2px 0 rgba(252,198,170,1), 0 3px 0 rgba(214,168,144,1), 0 4px 2px rgba(170,80,40,0.42), 0 8px 14px rgba(170,80,40,0.34), 0 16px 28px rgba(170,80,40,0.2); }
html[data-theme="peach"] .slab .stack li:nth-child(4) { color: #FFF8E4; -webkit-text-fill-color: #FFF8E4; text-shadow: 0 1px 0 rgba(255,214,190,1), 0 2px 0 rgba(252,198,170,1), 0 3px 0 rgba(214,168,144,1), 0 4px 2px rgba(170,80,40,0.42), 0 8px 14px rgba(170,80,40,0.34), 0 16px 28px rgba(170,80,40,0.2); }
html[data-theme="peach"] .slab .stack li:nth-child(5) { color: #FFF5DA; -webkit-text-fill-color: #FFF5DA; text-shadow: 0 1px 0 rgba(255,214,190,1), 0 2px 0 rgba(252,198,170,1), 0 3px 0 rgba(214,168,144,1), 0 4px 2px rgba(170,80,40,0.42), 0 8px 14px rgba(170,80,40,0.34), 0 16px 28px rgba(170,80,40,0.2); }
html[data-theme="peach"] .slab .stack li:nth-child(6) { color: #FFF2D0; -webkit-text-fill-color: #FFF2D0; text-shadow: 0 1px 0 rgba(255,214,190,1), 0 2px 0 rgba(252,198,170,1), 0 3px 0 rgba(214,168,144,1), 0 4px 2px rgba(170,80,40,0.42), 0 8px 14px rgba(170,80,40,0.34), 0 16px 28px rgba(170,80,40,0.2); }

html[data-theme="sky"] .site-header, html[data-theme="sky"] .site-header.is-scrolled { background: linear-gradient(100deg, rgba(222,238,255,0.9) 0%, rgba(208,230,255,0.9) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 30px -16px rgba(30,80,160,0.3); }
html[data-theme="sky"] .site-header .brand-name { color: #123A6B; }
html[data-theme="sky"] .site-header .brand-sub { color: #3E6496; }
html[data-theme="sky"] .site-header .nav a { color: #123A6B; }
html[data-theme="sky"] .site-header .nav a[aria-current="page"]:not(.nav-cta) { text-decoration-color: #4C8DE0; }
html[data-theme="sky"] .slab { background: linear-gradient(150deg, rgba(206,228,255,0.66) 0%, rgba(184,214,252,0.58) 50%, rgba(216,236,255,0.52) 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.9), inset 2px 0 0 rgba(255,255,255,.45), inset 0 -18px 40px rgba(30,80,160,0.12), inset 0 0 0 1px rgba(255,255,255,.3),
  1px 1px 0 rgba(255,255,255,.65), 2px 2px 0 rgba(216,236,255,0.6), 3px 3px 0 rgba(206,228,255,0.55), 4px 4px 0 rgba(184,214,252,0.5), 5px 5px 0 rgba(184,214,252,0.45), 6px 6px 0 rgba(184,214,252,0.4), 18px 30px 60px -14px rgba(30,80,160,0.3); }
html[data-theme="sky"] .slab .stack li { filter: drop-shadow(0 2px 3px rgba(30,80,160,0.4)); }
html[data-theme="sky"] .slab .stack li:nth-child(1) { color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; text-shadow: 0 1px 0 rgba(206,228,255,1), 0 2px 0 rgba(184,214,252,1), 0 3px 0 rgba(156,181,214,1), 0 4px 2px rgba(30,80,160,0.42), 0 8px 14px rgba(30,80,160,0.34), 0 16px 28px rgba(30,80,160,0.2); }
html[data-theme="sky"] .slab .stack li:nth-child(2) { color: #FDFEFF; -webkit-text-fill-color: #FDFEFF; text-shadow: 0 1px 0 rgba(206,228,255,1), 0 2px 0 rgba(184,214,252,1), 0 3px 0 rgba(156,181,214,1), 0 4px 2px rgba(30,80,160,0.42), 0 8px 14px rgba(30,80,160,0.34), 0 16px 28px rgba(30,80,160,0.2); }
html[data-theme="sky"] .slab .stack li:nth-child(3) { color: #FBFDF2; -webkit-text-fill-color: #FBFDF2; text-shadow: 0 1px 0 rgba(206,228,255,1), 0 2px 0 rgba(184,214,252,1), 0 3px 0 rgba(156,181,214,1), 0 4px 2px rgba(30,80,160,0.42), 0 8px 14px rgba(30,80,160,0.34), 0 16px 28px rgba(30,80,160,0.2); }
html[data-theme="sky"] .slab .stack li:nth-child(4) { color: #FAFCE8; -webkit-text-fill-color: #FAFCE8; text-shadow: 0 1px 0 rgba(206,228,255,1), 0 2px 0 rgba(184,214,252,1), 0 3px 0 rgba(156,181,214,1), 0 4px 2px rgba(30,80,160,0.42), 0 8px 14px rgba(30,80,160,0.34), 0 16px 28px rgba(30,80,160,0.2); }
html[data-theme="sky"] .slab .stack li:nth-child(5) { color: #F8FBDE; -webkit-text-fill-color: #F8FBDE; text-shadow: 0 1px 0 rgba(206,228,255,1), 0 2px 0 rgba(184,214,252,1), 0 3px 0 rgba(156,181,214,1), 0 4px 2px rgba(30,80,160,0.42), 0 8px 14px rgba(30,80,160,0.34), 0 16px 28px rgba(30,80,160,0.2); }
html[data-theme="sky"] .slab .stack li:nth-child(6) { color: #F6FAD4; -webkit-text-fill-color: #F6FAD4; text-shadow: 0 1px 0 rgba(206,228,255,1), 0 2px 0 rgba(184,214,252,1), 0 3px 0 rgba(156,181,214,1), 0 4px 2px rgba(30,80,160,0.42), 0 8px 14px rgba(30,80,160,0.34), 0 16px 28px rgba(30,80,160,0.2); }

html[data-theme="blush"] .site-header, html[data-theme="blush"] .site-header.is-scrolled { background: linear-gradient(100deg, rgba(252,228,234,0.9) 0%, rgba(248,214,224,0.9) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 30px -16px rgba(160,50,90,0.3); }
html[data-theme="blush"] .site-header .brand-name { color: #6A1F38; }
html[data-theme="blush"] .site-header .brand-sub { color: #9A4E66; }
html[data-theme="blush"] .site-header .nav a { color: #6A1F38; }
html[data-theme="blush"] .site-header .nav a[aria-current="page"]:not(.nav-cta) { text-decoration-color: #E06C90; }
html[data-theme="blush"] .slab { background: linear-gradient(150deg, rgba(250,214,226,0.66) 0%, rgba(244,194,212,0.58) 50%, rgba(252,224,234,0.52) 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.9), inset 2px 0 0 rgba(255,255,255,.45), inset 0 -18px 40px rgba(160,50,90,0.12), inset 0 0 0 1px rgba(255,255,255,.3),
  1px 1px 0 rgba(255,255,255,.65), 2px 2px 0 rgba(252,224,234,0.6), 3px 3px 0 rgba(250,214,226,0.55), 4px 4px 0 rgba(244,194,212,0.5), 5px 5px 0 rgba(244,194,212,0.45), 6px 6px 0 rgba(244,194,212,0.4), 18px 30px 60px -14px rgba(160,50,90,0.3); }
html[data-theme="blush"] .slab .stack li { filter: drop-shadow(0 2px 3px rgba(160,50,90,0.4)); }
html[data-theme="blush"] .slab .stack li:nth-child(1) { color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; text-shadow: 0 1px 0 rgba(250,214,226,1), 0 2px 0 rgba(244,194,212,1), 0 3px 0 rgba(207,164,180,1), 0 4px 2px rgba(160,50,90,0.42), 0 8px 14px rgba(160,50,90,0.34), 0 16px 28px rgba(160,50,90,0.2); }
html[data-theme="blush"] .slab .stack li:nth-child(2) { color: #FFFDF8; -webkit-text-fill-color: #FFFDF8; text-shadow: 0 1px 0 rgba(250,214,226,1), 0 2px 0 rgba(244,194,212,1), 0 3px 0 rgba(207,164,180,1), 0 4px 2px rgba(160,50,90,0.42), 0 8px 14px rgba(160,50,90,0.34), 0 16px 28px rgba(160,50,90,0.2); }
html[data-theme="blush"] .slab .stack li:nth-child(3) { color: #FFFBF0; -webkit-text-fill-color: #FFFBF0; text-shadow: 0 1px 0 rgba(250,214,226,1), 0 2px 0 rgba(244,194,212,1), 0 3px 0 rgba(207,164,180,1), 0 4px 2px rgba(160,50,90,0.42), 0 8px 14px rgba(160,50,90,0.34), 0 16px 28px rgba(160,50,90,0.2); }
html[data-theme="blush"] .slab .stack li:nth-child(4) { color: #FFF9E8; -webkit-text-fill-color: #FFF9E8; text-shadow: 0 1px 0 rgba(250,214,226,1), 0 2px 0 rgba(244,194,212,1), 0 3px 0 rgba(207,164,180,1), 0 4px 2px rgba(160,50,90,0.42), 0 8px 14px rgba(160,50,90,0.34), 0 16px 28px rgba(160,50,90,0.2); }
html[data-theme="blush"] .slab .stack li:nth-child(5) { color: #FFF7E0; -webkit-text-fill-color: #FFF7E0; text-shadow: 0 1px 0 rgba(250,214,226,1), 0 2px 0 rgba(244,194,212,1), 0 3px 0 rgba(207,164,180,1), 0 4px 2px rgba(160,50,90,0.42), 0 8px 14px rgba(160,50,90,0.34), 0 16px 28px rgba(160,50,90,0.2); }
html[data-theme="blush"] .slab .stack li:nth-child(6) { color: #FFF5D8; -webkit-text-fill-color: #FFF5D8; text-shadow: 0 1px 0 rgba(250,214,226,1), 0 2px 0 rgba(244,194,212,1), 0 3px 0 rgba(207,164,180,1), 0 4px 2px rgba(160,50,90,0.42), 0 8px 14px rgba(160,50,90,0.34), 0 16px 28px rgba(160,50,90,0.2); }

/* ============ Whole-site colour themes (?theme=...) ============ */
html[data-theme="lavender"] { --grad: linear-gradient(100deg, #F4ECFF 0%, #ECE8FF 28%, #E2EAFF 50%, #DCEFFF 72%, #D7F3FA 100%); --vivid: linear-gradient(100deg, #F4ECFF 0%, #ECE8FF 28%, #E2EAFF 50%, #DCEFFF 72%, #D7F3FA 100%); }
html[data-theme="lavender"] body { background: #E2EAFF; color: #2A2150; }
html[data-theme="lavender"] body::after { background:
    radial-gradient(circle at 12% 22%, rgba(190,160,255,.55) 0, transparent 22%), radial-gradient(circle at 86% 14%, rgba(140,210,255,.5) 0, transparent 22%),
    radial-gradient(circle at 72% 72%, rgba(220,200,255,.55) 0, transparent 24%), radial-gradient(circle at 22% 86%, rgba(170,230,250,.5) 0, transparent 22%),
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.45) 0, transparent 30%); }
html[data-theme="lavender"] .hero h1, html[data-theme="lavender"] .band h2, html[data-theme="lavender"] .split-head h2, html[data-theme="lavender"] .overview-row h3, html[data-theme="lavender"] .principles h3, html[data-theme="lavender"] .service-block h2, html[data-theme="lavender"] h1, html[data-theme="lavender"] h2, html[data-theme="lavender"] h3 { color: #2A2150; }
html[data-theme="lavender"] .hero .lede, html[data-theme="lavender"] .page-head .lede, html[data-theme="lavender"] .split-head p, html[data-theme="lavender"] .overview-row p, html[data-theme="lavender"] .principles p, html[data-theme="lavender"] .items li, html[data-theme="lavender"] .facts dt { color: #5A4F86; }
html[data-theme="lavender"] .page-head h1 { color: #2A2150; text-shadow: 1px 1px 0 #EEE6FF, 2px 2px 0 #DDD0FF, 3px 3px 0 #CBBBFB, 4px 4px 0 #B9A6F5, 5px 5px 0 #A792EE, 6px 6px 0 #957EE6, 12px 18px 30px rgba(0,0,0,.18); }
html[data-theme="lavender"] .card3d, html[data-theme="lavender"] .logos li { background: linear-gradient(140deg, rgba(255,255,255,.66), rgba(255,255,255,.34)) padding-box, linear-gradient(120deg, rgba(170,140,240,.7), rgba(200,190,250,.6) 50%, rgba(140,200,240,.7)) border-box; }
html[data-theme="lavender"] .principles h3::before { background: linear-gradient(90deg, rgba(170,140,240,.7), rgba(140,200,240,.7)); }
html[data-theme="lavender"] .text-link, html[data-theme="lavender"] .split-head a, html[data-theme="lavender"] .note a, html[data-theme="lavender"] .facts a, html[data-theme="lavender"] .checks a { color: #2A2150; }
html[data-theme="lavender"] .btn-dark, html[data-theme="lavender"] .nav .nav-cta, html[data-theme="lavender"] .nav .nav-call, html[data-theme="lavender"] .hero .btn-dark, html[data-theme="lavender"] .btn-light, html[data-theme="lavender"] .band .btn-light, html[data-theme="lavender"] .site-header .nav .nav-call { color: #2A2150;
  background: linear-gradient(180deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,.15) 50%, rgba(255,255,255,0) 51%), linear-gradient(100deg, #F4ECFF 0%, #ECE8FF 28%, #E2EAFF 50%, #DCEFFF 72%, #D7F3FA 100%);
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #C9B8F2, 0 14px 26px -10px rgba(0,0,0,.22); }
html[data-theme="lavender"] .site-footer { background: linear-gradient(100deg, #E6DAFF, #DCE2FF 50%, #CDEBFF); color: #5A4F86; }
html[data-theme="lavender"] .site-footer .footer-h, html[data-theme="lavender"] .footer-brand p, html[data-theme="lavender"] .footer-base .credit a { color: #2A2150; }
html[data-theme="lavender"] .footer-list a, html[data-theme="lavender"] .site-footer address, html[data-theme="lavender"] .footer-base { color: #5A4F86; }

html[data-theme="peach"] { --grad: linear-gradient(100deg, #FFF1E2 0%, #FFE6D6 28%, #FFDCD2 50%, #FFD8DC 72%, #FCDDEB 100%); --vivid: linear-gradient(100deg, #FFF1E2 0%, #FFE6D6 28%, #FFDCD2 50%, #FFD8DC 72%, #FCDDEB 100%); }
html[data-theme="peach"] body { background: #FFDCD2; color: #4A2416; }
html[data-theme="peach"] body::after { background:
    radial-gradient(circle at 12% 22%, rgba(255,180,130,.55) 0, transparent 22%), radial-gradient(circle at 86% 14%, rgba(255,160,170,.5) 0, transparent 22%),
    radial-gradient(circle at 72% 72%, rgba(255,210,160,.55) 0, transparent 24%), radial-gradient(circle at 22% 86%, rgba(250,180,210,.5) 0, transparent 22%),
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.45) 0, transparent 30%); }
html[data-theme="peach"] .hero h1, html[data-theme="peach"] .band h2, html[data-theme="peach"] .split-head h2, html[data-theme="peach"] .overview-row h3, html[data-theme="peach"] .principles h3, html[data-theme="peach"] .service-block h2, html[data-theme="peach"] h1, html[data-theme="peach"] h2, html[data-theme="peach"] h3 { color: #4A2416; }
html[data-theme="peach"] .hero .lede, html[data-theme="peach"] .page-head .lede, html[data-theme="peach"] .split-head p, html[data-theme="peach"] .overview-row p, html[data-theme="peach"] .principles p, html[data-theme="peach"] .items li, html[data-theme="peach"] .facts dt { color: #86513A; }
html[data-theme="peach"] .page-head h1 { color: #4A2416; text-shadow: 1px 1px 0 #FFEBDD, 2px 2px 0 #FFD9C4, 3px 3px 0 #FFC6AC, 4px 4px 0 #FCB295, 5px 5px 0 #F69F80, 6px 6px 0 #EE8D6C, 12px 18px 30px rgba(0,0,0,.18); }
html[data-theme="peach"] .card3d, html[data-theme="peach"] .logos li { background: linear-gradient(140deg, rgba(255,255,255,.66), rgba(255,255,255,.34)) padding-box, linear-gradient(120deg, rgba(255,170,120,.7), rgba(255,200,170,.6) 50%, rgba(250,160,180,.7)) border-box; }
html[data-theme="peach"] .principles h3::before { background: linear-gradient(90deg, rgba(255,170,120,.7), rgba(250,160,180,.7)); }
html[data-theme="peach"] .text-link, html[data-theme="peach"] .split-head a, html[data-theme="peach"] .note a, html[data-theme="peach"] .facts a, html[data-theme="peach"] .checks a { color: #4A2416; }
html[data-theme="peach"] .btn-dark, html[data-theme="peach"] .nav .nav-cta, html[data-theme="peach"] .nav .nav-call, html[data-theme="peach"] .hero .btn-dark, html[data-theme="peach"] .btn-light, html[data-theme="peach"] .band .btn-light, html[data-theme="peach"] .site-header .nav .nav-call { color: #4A2416;
  background: linear-gradient(180deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,.15) 50%, rgba(255,255,255,0) 51%), linear-gradient(100deg, #FFF1E2 0%, #FFE6D6 28%, #FFDCD2 50%, #FFD8DC 72%, #FCDDEB 100%);
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #F2BFA0, 0 14px 26px -10px rgba(0,0,0,.22); }
html[data-theme="peach"] .site-footer { background: linear-gradient(100deg, #FFDCC4, #FFD0C4 50%, #FBCADA); color: #86513A; }
html[data-theme="peach"] .site-footer .footer-h, html[data-theme="peach"] .footer-brand p, html[data-theme="peach"] .footer-base .credit a { color: #4A2416; }
html[data-theme="peach"] .footer-list a, html[data-theme="peach"] .site-footer address, html[data-theme="peach"] .footer-base { color: #86513A; }

html[data-theme="sky"] { --grad: linear-gradient(100deg, #FFF6E2 0%, #F3F2EA 28%, #E6F0FA 50%, #DAEBFF 72%, #D2E6FF 100%); --vivid: linear-gradient(100deg, #FFF6E2 0%, #F3F2EA 28%, #E6F0FA 50%, #DAEBFF 72%, #D2E6FF 100%); }
html[data-theme="sky"] body { background: #E6F0FA; color: #13294B; }
html[data-theme="sky"] body::after { background:
    radial-gradient(circle at 12% 22%, rgba(255,215,140,.5) 0, transparent 22%), radial-gradient(circle at 86% 14%, rgba(140,190,255,.55) 0, transparent 22%),
    radial-gradient(circle at 72% 72%, rgba(255,235,180,.5) 0, transparent 24%), radial-gradient(circle at 22% 86%, rgba(160,205,255,.5) 0, transparent 22%),
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.45) 0, transparent 30%); }
html[data-theme="sky"] .hero h1, html[data-theme="sky"] .band h2, html[data-theme="sky"] .split-head h2, html[data-theme="sky"] .overview-row h3, html[data-theme="sky"] .principles h3, html[data-theme="sky"] .service-block h2, html[data-theme="sky"] h1, html[data-theme="sky"] h2, html[data-theme="sky"] h3 { color: #13294B; }
html[data-theme="sky"] .hero .lede, html[data-theme="sky"] .page-head .lede, html[data-theme="sky"] .split-head p, html[data-theme="sky"] .overview-row p, html[data-theme="sky"] .principles p, html[data-theme="sky"] .items li, html[data-theme="sky"] .facts dt { color: #3F5A82; }
html[data-theme="sky"] .page-head h1 { color: #13294B; text-shadow: 1px 1px 0 #E6F0FF, 2px 2px 0 #D2E3FF, 3px 3px 0 #BED5FC, 4px 4px 0 #AAC6F7, 5px 5px 0 #96B7F0, 6px 6px 0 #82A8E8, 12px 18px 30px rgba(0,0,0,.18); }
html[data-theme="sky"] .card3d, html[data-theme="sky"] .logos li { background: linear-gradient(140deg, rgba(255,255,255,.66), rgba(255,255,255,.34)) padding-box, linear-gradient(120deg, rgba(240,200,120,.7), rgba(200,220,245,.6) 50%, rgba(120,170,240,.7)) border-box; }
html[data-theme="sky"] .principles h3::before { background: linear-gradient(90deg, rgba(240,200,120,.7), rgba(120,170,240,.7)); }
html[data-theme="sky"] .text-link, html[data-theme="sky"] .split-head a, html[data-theme="sky"] .note a, html[data-theme="sky"] .facts a, html[data-theme="sky"] .checks a { color: #13294B; }
html[data-theme="sky"] .btn-dark, html[data-theme="sky"] .nav .nav-cta, html[data-theme="sky"] .nav .nav-call, html[data-theme="sky"] .hero .btn-dark, html[data-theme="sky"] .btn-light, html[data-theme="sky"] .band .btn-light, html[data-theme="sky"] .site-header .nav .nav-call { color: #13294B;
  background: linear-gradient(180deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,.15) 50%, rgba(255,255,255,0) 51%), linear-gradient(100deg, #FFF6E2 0%, #F3F2EA 28%, #E6F0FA 50%, #DAEBFF 72%, #D2E6FF 100%);
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #B9CDEB, 0 14px 26px -10px rgba(0,0,0,.22); }
html[data-theme="sky"] .site-footer { background: linear-gradient(100deg, #F6EAC8, #DCE8F8 50%, #C6DCFA); color: #3F5A82; }
html[data-theme="sky"] .site-footer .footer-h, html[data-theme="sky"] .footer-brand p, html[data-theme="sky"] .footer-base .credit a { color: #13294B; }
html[data-theme="sky"] .footer-list a, html[data-theme="sky"] .site-footer address, html[data-theme="sky"] .footer-base { color: #3F5A82; }

html[data-theme="blush"] { --grad: linear-gradient(100deg, #FCE6EC 0%, #F8E8E8 28%, #F2EDE2 50%, #E6F0E2 72%, #DAF0E2 100%); --vivid: linear-gradient(100deg, #FCE6EC 0%, #F8E8E8 28%, #F2EDE2 50%, #E6F0E2 72%, #DAF0E2 100%); }
html[data-theme="blush"] body { background: #F2EDE2; color: #3E1F2A; }
html[data-theme="blush"] body::after { background:
    radial-gradient(circle at 12% 22%, rgba(250,170,200,.55) 0, transparent 22%), radial-gradient(circle at 86% 14%, rgba(170,225,190,.5) 0, transparent 22%),
    radial-gradient(circle at 72% 72%, rgba(255,215,220,.55) 0, transparent 24%), radial-gradient(circle at 22% 86%, rgba(190,235,205,.5) 0, transparent 22%),
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.45) 0, transparent 30%); }
html[data-theme="blush"] .hero h1, html[data-theme="blush"] .band h2, html[data-theme="blush"] .split-head h2, html[data-theme="blush"] .overview-row h3, html[data-theme="blush"] .principles h3, html[data-theme="blush"] .service-block h2, html[data-theme="blush"] h1, html[data-theme="blush"] h2, html[data-theme="blush"] h3 { color: #3E1F2A; }
html[data-theme="blush"] .hero .lede, html[data-theme="blush"] .page-head .lede, html[data-theme="blush"] .split-head p, html[data-theme="blush"] .overview-row p, html[data-theme="blush"] .principles p, html[data-theme="blush"] .items li, html[data-theme="blush"] .facts dt { color: #76505E; }
html[data-theme="blush"] .page-head h1 { color: #3E1F2A; text-shadow: 1px 1px 0 #FCE8EE, 2px 2px 0 #F8D4DF, 3px 3px 0 #F2C0CF, 4px 4px 0 #EAABBF, 5px 5px 0 #E197AF, 6px 6px 0 #D7849F, 12px 18px 30px rgba(0,0,0,.18); }
html[data-theme="blush"] .card3d, html[data-theme="blush"] .logos li { background: linear-gradient(140deg, rgba(255,255,255,.66), rgba(255,255,255,.34)) padding-box, linear-gradient(120deg, rgba(240,150,180,.7), rgba(240,220,200,.6) 50%, rgba(150,210,170,.7)) border-box; }
html[data-theme="blush"] .principles h3::before { background: linear-gradient(90deg, rgba(240,150,180,.7), rgba(150,210,170,.7)); }
html[data-theme="blush"] .text-link, html[data-theme="blush"] .split-head a, html[data-theme="blush"] .note a, html[data-theme="blush"] .facts a, html[data-theme="blush"] .checks a { color: #3E1F2A; }
html[data-theme="blush"] .btn-dark, html[data-theme="blush"] .nav .nav-cta, html[data-theme="blush"] .nav .nav-call, html[data-theme="blush"] .hero .btn-dark, html[data-theme="blush"] .btn-light, html[data-theme="blush"] .band .btn-light, html[data-theme="blush"] .site-header .nav .nav-call { color: #3E1F2A;
  background: linear-gradient(180deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,.15) 50%, rgba(255,255,255,0) 51%), linear-gradient(100deg, #FCE6EC 0%, #F8E8E8 28%, #F2EDE2 50%, #E6F0E2 72%, #DAF0E2 100%);
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #E8BFCB, 0 14px 26px -10px rgba(0,0,0,.22); }
html[data-theme="blush"] .site-footer { background: linear-gradient(100deg, #F8D6E0, #F0E4DA 50%, #D2EBDA); color: #76505E; }
html[data-theme="blush"] .site-footer .footer-h, html[data-theme="blush"] .footer-brand p, html[data-theme="blush"] .footer-base .credit a { color: #3E1F2A; }
html[data-theme="blush"] .footer-list a, html[data-theme="blush"] .site-footer address, html[data-theme="blush"] .footer-base { color: #76505E; }

/* ============ Pearl: gray-white glass theme (default) ============ */
html:not([data-theme]) { --grad: linear-gradient(100deg, #FBFCFD 0%, #F3F5F7 35%, #ECEFF2 65%, #E4E8EC 100%); --vivid: linear-gradient(100deg, #FBFCFD 0%, #F3F5F7 35%, #ECEFF2 65%, #E4E8EC 100%); --ink: #1E2328; --ink-soft: #59616A; }
html:not([data-theme]) body { background: #F1F3F5; color: #1E2328; }
html:not([data-theme]) body::after { background:
  radial-gradient(circle at 12% 22%, rgba(255,255,255,.95) 0, rgba(255,255,255,0) 24%),
  radial-gradient(circle at 86% 16%, rgba(196,205,216,.55) 0, rgba(196,205,216,0) 24%),
  radial-gradient(circle at 72% 72%, rgba(255,255,255,.9) 0, rgba(255,255,255,0) 26%),
  radial-gradient(circle at 20% 86%, rgba(205,212,222,.55) 0, rgba(205,212,222,0) 24%),
  radial-gradient(circle at 50% 45%, rgba(225,230,236,.6) 0, rgba(225,230,236,0) 30%); }
html:not([data-theme]) h1, html:not([data-theme]) h2, html:not([data-theme]) h3, html:not([data-theme]) .hero h1, html:not([data-theme]) .band h2, html:not([data-theme]) .split-head h2, html:not([data-theme]) .overview-row h3, html:not([data-theme]) .principles h3, html:not([data-theme]) .service-block h2 { color: #1E2328; }
html:not([data-theme]) .hero h1 { text-shadow: 0 1px 0 #fff, 0 14px 36px rgba(30,40,50,.12); }
html:not([data-theme]) .hero .lede, html:not([data-theme]) .page-head .lede, html:not([data-theme]) .split-head p, html:not([data-theme]) .overview-row p, html:not([data-theme]) .principles p, html:not([data-theme]) .items li, html:not([data-theme]) .facts dt, html:not([data-theme]) .note { color: #59616A; }
html:not([data-theme]) .facts dd, html:not([data-theme]) .checks li, html:not([data-theme]) .clients li, html:not([data-theme]) address { color: #2A3036; }
html:not([data-theme]) .text-link, html:not([data-theme]) .split-head a, html:not([data-theme]) .note a, html:not([data-theme]) .facts a, html:not([data-theme]) .checks a, html:not([data-theme]) .contact-line a { color: #1E2328; }
html:not([data-theme]) .page-head h1 { color: #1E2328; text-shadow: 1px 1px 0 #FFFFFF, 2px 2px 0 #E9ECEF, 3px 3px 0 #DDE1E5, 4px 4px 0 #D0D5DA, 5px 5px 0 #C3C9CF, 6px 6px 0 #B6BDC4, 12px 18px 30px rgba(30,40,50,.18); }
html:not([data-theme]) .hero::before, html:not([data-theme]) .page-head::before { background-image: linear-gradient(rgba(255,255,255,.7) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.7) 1px, transparent 1px); }

/* ribbon: white frosted glass */
html:not([data-theme]) .site-header, html:not([data-theme]) .site-header.is-scrolled { background: rgba(255,255,255,.62); border-bottom: 1px solid rgba(255,255,255,.95); box-shadow: inset 0 -1px 0 rgba(30,40,50,.06), 0 10px 30px -18px rgba(30,40,50,.3); }
html:not([data-theme]) .site-header .brand-name { color: #1E2328; }
html:not([data-theme]) .site-header .brand-sub { color: #6A727B; }
html:not([data-theme]) .site-header .nav a { color: #2A3036; }
html:not([data-theme]) .site-header .nav a[aria-current="page"]:not(.nav-cta) { text-decoration-color: #1E2328; }

/* buttons: glossy graphite, secondary is white glass */
html:not([data-theme]) .btn-dark, html:not([data-theme]) .nav .nav-cta, html:not([data-theme]) .nav .nav-call, html:not([data-theme]) .hero .btn-dark, html:not([data-theme]) .btn-light, html:not([data-theme]) .band .btn-light, html:not([data-theme]) .site-header .nav .nav-call {
  color: #FFFFFF; border: 1px solid rgba(255,255,255,.25);
  background: linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.06) 50%, rgba(255,255,255,0) 51%), linear-gradient(180deg, #4A525B 0%, #2C3238 55%, #1E2226 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 3px 0 #14171A, 0 14px 26px -10px rgba(20,25,30,.55); }
html:not([data-theme]) .btn-dark:hover, html:not([data-theme]) .nav .nav-cta:hover, html:not([data-theme]) .nav .nav-cta[aria-current="page"], html:not([data-theme]) .hero .btn-dark:hover, html:not([data-theme]) .btn-light:hover, html:not([data-theme]) .band .btn-light:hover {
  color: #FFFFFF; background: linear-gradient(180deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,.08) 50%, rgba(255,255,255,0) 51%), linear-gradient(180deg, #56606A 0%, #353C43 55%, #23282D 100%); }
html:not([data-theme]) .btn-line, html:not([data-theme]) .hero .btn-line { background: rgba(255,255,255,.6); color: #1E2328; border: 1px solid rgba(255,255,255,.95); box-shadow: inset 0 1px 0 #fff, 0 3px 0 #D3D8DD, 0 12px 22px -12px rgba(30,40,50,.3); }

/* glass panes: white with a silver edge */
html:not([data-theme]) .card3d, html:not([data-theme]) .logos li, html:not([data-theme]) .checks { background: linear-gradient(140deg, rgba(255,255,255,.72), rgba(255,255,255,.38)) padding-box, linear-gradient(140deg, #FFFFFF, rgba(200,208,216,.7) 50%, #FFFFFF) border-box; }
html:not([data-theme]) .principles h3::before { background: linear-gradient(90deg, #2C3238, #9AA3AD, #E4E8EC); }
html:not([data-theme]) .section-gray { background: rgba(255,255,255,.35); }
html:not([data-theme]) .panorama { background: transparent; }

/* slab: clear white glass, letters are glossy dark glass */
html:not([data-theme]) .slab { background: linear-gradient(150deg, rgba(255,255,255,.7) 0%, rgba(240,243,246,.5) 55%, rgba(255,255,255,.45) 100%);
  box-shadow: inset 0 2px 0 #fff, inset 2px 0 0 rgba(255,255,255,.6), inset 0 -18px 40px rgba(60,70,80,.08), inset 0 0 0 1px rgba(255,255,255,.4),
    1px 1px 0 #FFFFFF, 2px 2px 0 #EEF1F4, 3px 3px 0 #E2E6EA, 4px 4px 0 #D6DBE0, 5px 5px 0 #CAD0D6, 6px 6px 0 #BEC5CC, 18px 30px 60px -14px rgba(30,40,50,.3); }
html:not([data-theme]) .slab .stack li { filter: drop-shadow(0 2px 3px rgba(20,25,30,.25)); }
html:not([data-theme]) .slab .stack li:nth-child(1) { color: #23282E; -webkit-text-fill-color: #23282E; text-shadow: 0 -1px 0 rgba(255,255,255,.8), 0.6px 1px 0 #1C2024, 1.2px 2px 0 #171B1F, 1.8px 3px 0 #131619, 0 6px 10px rgba(20,25,30,.25), 0 14px 24px rgba(20,25,30,.16); }
html:not([data-theme]) .slab .stack li:nth-child(2) { color: #2D3339; -webkit-text-fill-color: #2D3339; text-shadow: 0 -1px 0 rgba(255,255,255,.8), 0.6px 1px 0 #24282D, 1.2px 2px 0 #1E2226, 1.8px 3px 0 #191C1F, 0 6px 10px rgba(20,25,30,.25), 0 14px 24px rgba(20,25,30,.16); }
html:not([data-theme]) .slab .stack li:nth-child(3) { color: #383F46; -webkit-text-fill-color: #383F46; text-shadow: 0 -1px 0 rgba(255,255,255,.8), 0.6px 1px 0 #2C3238, 1.2px 2px 0 #262A2F, 1.8px 3px 0 #1F2327, 0 6px 10px rgba(20,25,30,.25), 0 14px 24px rgba(20,25,30,.16); }
html:not([data-theme]) .slab .stack li:nth-child(4) { color: #454D55; -webkit-text-fill-color: #454D55; text-shadow: 0 -1px 0 rgba(255,255,255,.8), 0.6px 1px 0 #373D44, 1.2px 2px 0 #2E3439, 1.8px 3px 0 #262B2F, 0 6px 10px rgba(20,25,30,.25), 0 14px 24px rgba(20,25,30,.16); }
html:not([data-theme]) .slab .stack li:nth-child(5) { color: #535C65; -webkit-text-fill-color: #535C65; text-shadow: 0 -1px 0 rgba(255,255,255,.8), 0.6px 1px 0 #424950, 1.2px 2px 0 #383E44, 1.8px 3px 0 #2E3338, 0 6px 10px rgba(20,25,30,.25), 0 14px 24px rgba(20,25,30,.16); }
html:not([data-theme]) .slab .stack li:nth-child(6) { color: #626B75; -webkit-text-fill-color: #626B75; text-shadow: 0 -1px 0 rgba(255,255,255,.8), 0.6px 1px 0 #4E555D, 1.2px 2px 0 #42484F, 1.8px 3px 0 #363B41, 0 6px 10px rgba(20,25,30,.25), 0 14px 24px rgba(20,25,30,.16); }
html:not([data-theme]) .slab .stack li::after { background-image:
    linear-gradient(105deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.8) 49%, rgba(255,255,255,0) 58%),
    linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.22) 30%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 80%, rgba(255,255,255,.12) 100%); }

/* footer: silver glass, dark text */
html:not([data-theme]) .site-footer { background: linear-gradient(100deg, rgba(232,236,240,.85), rgba(222,227,232,.85)); color: #59616A; border-top: 1px solid rgba(255,255,255,.95); }
html:not([data-theme]) .site-footer .footer-h, html:not([data-theme]) .footer-brand p, html:not([data-theme]) .footer-base .credit a { color: #1E2328; }
html:not([data-theme]) .footer-list a, html:not([data-theme]) .site-footer address, html:not([data-theme]) .footer-base { color: #59616A; }

html:not([data-theme]) .site-header .nav a.nav-cta, html:not([data-theme]) .site-header .nav a.nav-call, html:not([data-theme]) .site-header .nav a.nav-cta:hover { color: #FFFFFF; }
html:not([data-theme]) .orb-a { background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,255,255,0) 70%); }
html:not([data-theme]) .orb-b { background: radial-gradient(circle, rgba(200,208,218,.8), rgba(200,208,218,0) 70%); }

/* Tablet and phone */
@media (max-width: 900px) {
  .hero-grid, .split, .band-grid, .contact-grid, .footer-grid { grid-template-columns: 1fr; }
  .directors { grid-template-columns: 1fr; }
  .slab { justify-self: stretch; transform: rotateY(-6deg) rotateX(4deg); }
  .orb-a { width: 220px; height: 220px; }
  .facts { padding: 4px 18px; }
  .overview-row { padding: 16px; }
  .service-block, .overview-row { grid-template-columns: 1fr; gap: 8px; }
  .overview-row { grid-template-columns: 72px 1fr; column-gap: 16px; align-items: start; }
  .overview-row img { width: 72px; grid-row: span 2; }
  .service-title img { width: 120px; margin-bottom: 14px; }
  .nav .nav-cta { display: none; }
  .nav .nav-call { display: inline-block; margin-left: auto; color: var(--white); background: var(--graphite); padding: 6px 16px; border-radius: 999px; text-decoration: none; }
  .service-block { gap: 20px; }
  .stack { text-align: left; font-size: clamp(2.25rem, 11vw, 4.5rem); }
  .header-row { height: auto; flex-wrap: wrap; padding-top: 12px; padding-bottom: 10px; row-gap: 10px; }
  .nav { width: 100%; gap: 20px; overflow-x: auto; font-size: 0.9375rem; }
  .nav .nav-cta { margin-left: auto; padding: 6px 14px; }
}
@media (max-width: 560px) {
  .items, .clients, .principles, .client-groups { grid-template-columns: 1fr; }
  .client-groups > div + div { margin-top: 32px; }
  .logos li { height: 88px; padding: 12px; }
  .facts div { grid-template-columns: 1fr; gap: 4px; }
  .brand-sub { font-size: 0.75rem; }
}