/* =========================================================
   Pathways to Joyful Living LLC — site stylesheet
   Palette drawn from the logo: onyx, lagoon teal, seafoam
   marble, pearl, gilt and champagne gold.
   ========================================================= */

:root {
  --onyx: #000000;
  --abyss: #03100f;
  --lagoon: #0b4f4c;
  --lagoon-2: #0f6a65;
  --seafoam: #7fd3c7;
  --seafoam-soft: #a9e3da;
  --pearl: #e8f4f1;
  --mist: #b9cfcb;
  --gilt: #d6a651;
  --champagne: #f2d9a0;

  --glass: rgba(255, 255, 255, 0.045);
  --glass-strong: rgba(255, 255, 255, 0.075);
  --glass-edge: rgba(242, 217, 160, 0.22);
  --glass-edge-teal: rgba(127, 211, 199, 0.22);

  --font-display: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --font-body: "Jost", "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif;

  /* modular scale ~1.333 */
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.333rem;
  --step-2: 1.777rem;
  --step-3: 2.369rem;
  --step-4: clamp(2.4rem, 5.2vw, 3.9rem);
  --step-5: clamp(2.9rem, 7vw, 5.2rem);

  --measure: 66ch;
  --wrap: 1180px;
  --radius-lg: 28px;
  --radius-sm: 10px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--onyx);
  color: var(--pearl);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-weight: 400;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--seafoam-soft); text-underline-offset: 3px; }
a:hover { color: var(--champagne); }

:focus-visible {
  outline: 2px solid var(--champagne);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: 1rem; top: -60px; z-index: 100;
  background: var(--champagne); color: var(--onyx);
  padding: .6rem 1rem; border-radius: 6px; font-weight: 500;
}
.skip-link:focus { top: 1rem; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------------------------------------------------------
   The glossy backdrop: slow-moving liquid light in teal and
   gold, with a silk sheen sweeping across it.
   --------------------------------------------------------- */
.gloss {
  position: fixed; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 120%, #062624 0%, transparent 60%),
    var(--onyx);
}
.gloss__pool {
  position: absolute; border-radius: 50%;
  filter: blur(70px); opacity: .55;
  will-change: transform;
}
.gloss__pool--a {
  width: 62vmax; height: 62vmax; left: -18vmax; top: -22vmax;
  background: radial-gradient(circle at 40% 40%, var(--lagoon-2), transparent 65%);
  animation: drift-a 38s ease-in-out infinite alternate;
}
.gloss__pool--b {
  width: 48vmax; height: 48vmax; right: -16vmax; top: 18vh;
  background: radial-gradient(circle at 50% 50%, #1b8a80, transparent 62%);
  opacity: .35;
  animation: drift-b 46s ease-in-out infinite alternate;
}
.gloss__pool--c {
  width: 36vmax; height: 36vmax; left: 30vw; bottom: -20vmax;
  background: radial-gradient(circle, rgba(214, 166, 81, .55), transparent 62%);
  opacity: .28;
  animation: drift-c 52s ease-in-out infinite alternate;
}
.gloss__sheen {
  position: absolute; inset: -50%;
  background:
    linear-gradient(115deg,
      transparent 38%,
      rgba(169, 227, 218, .07) 45%,
      rgba(242, 217, 160, .10) 50%,
      rgba(169, 227, 218, .05) 55%,
      transparent 62%);
  animation: sheen 22s ease-in-out infinite;
}
.gloss__grain {
  position: absolute; inset: 0; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes drift-a { to { transform: translate(14vw, 12vh) scale(1.12); } }
@keyframes drift-b { to { transform: translate(-12vw, 16vh) scale(.9); } }
@keyframes drift-c { to { transform: translate(-18vw, -14vh) scale(1.2); } }
@keyframes sheen {
  0%, 100% { transform: translateX(-18%) translateY(-6%); }
  50% { transform: translateX(18%) translateY(6%); }
}

/* ---------------------------------------------------------
   Layout
   --------------------------------------------------------- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2.5rem, 820px); margin-inline: auto; }
section { position: relative; }
.band { padding-block: clamp(4rem, 9vw, 7.5rem); }
.band--tight { padding-block: clamp(3rem, 6vw, 4.5rem); }

/* glass surfaces */
.glass {
  position: relative;
  background:
    linear-gradient(160deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.02) 38%, rgba(255,255,255,.035) 100%);
  border: 1px solid var(--glass-edge-teal);
  border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 30px 60px -30px rgba(0,0,0,.8);
}
.glass--gold { border-color: var(--glass-edge); }

/* ---------------------------------------------------------
   Type
   --------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.005em;
  margin: 0 0 .5em;
  color: var(--pearl);
}
h1 { font-size: var(--step-5); font-weight: 500; }
h2 { font-size: var(--step-4); font-weight: 500; }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

/* marble-teal headline fill, echoing the logo lettering */
.marble {
  background:
    linear-gradient(170deg, #e4f8f4 0%, #a9e3da 35%, #7fd3c7 70%, #9fdcd2 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.gilt-text {
  background: linear-gradient(100deg, #b9862f, #f2d9a0 45%, #c8953e 70%, #f5e3b6);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

p { margin: 0 0 1.1em; max-width: var(--measure); }
.lede { font-size: var(--step-1); line-height: 1.55; color: var(--mist); font-weight: 300; }
.muted { color: var(--mist); }
.small { font-size: var(--step--1); }

.rule-gilt {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--gilt), transparent);
  opacity: .6;
}

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font: 500 1rem/1 var(--font-body);
  padding: 1rem 1.6rem;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}
.btn--gold {
  color: #1d1406;
  background: linear-gradient(180deg, #f5e1ad 0%, #d6a651 55%, #b8862f 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 10px 30px -10px rgba(214,166,81,.6);
}
.btn--gold:hover { color: #1d1406; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 14px 36px -10px rgba(214,166,81,.85); }
.btn--ghost {
  color: var(--pearl);
  border-color: rgba(127,211,199,.45);
  background: rgba(127,211,199,.06);
}
.btn--ghost:hover { color: var(--onyx); background: var(--seafoam); border-color: var(--seafoam); }
.btn-row { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.8rem; }

/* ---------------------------------------------------------
   Header & nav
   --------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid rgba(214,166,81,.18);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 78px;
}
.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: var(--pearl); }
.brand img { width: 62px; height: 45px; object-fit: cover; mix-blend-mode: screen; }
.brand__name { font-family: var(--font-display); font-size: 1.32rem; font-weight: 600; line-height: 1; }
.brand__name small { display: block; font-family: var(--font-body); font-size: .74rem; font-weight: 400; color: var(--gilt); margin-top: .3rem; letter-spacing: .04em; }

.nav { display: flex; align-items: center; gap: .25rem; }
.nav a, .nav button.nav__parent {
  color: var(--pearl); text-decoration: none; font: 400 .98rem/1 var(--font-body);
  padding: .7rem .8rem; border-radius: 8px; background: none; border: 0; cursor: pointer;
}
.nav a:hover, .nav button.nav__parent:hover { color: var(--champagne); }
.nav a[aria-current="page"] { color: var(--champagne); box-shadow: inset 0 -2px 0 var(--gilt); border-radius: 0; }
.nav .btn { margin-left: .6rem; padding: .8rem 1.2rem; }

.nav__group { position: relative; }
.nav__menu {
  position: absolute; top: calc(100% + 8px); left: -.5rem; min-width: 270px;
  list-style: none; margin: 0; padding: .5rem;
  background: rgba(3, 16, 15, .94);
  border: 1px solid var(--glass-edge);
  border-radius: 16px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.9);
  display: none;
}
.nav__group:hover .nav__menu,
.nav__group:focus-within .nav__menu,
.nav__group.is-open .nav__menu { display: block; }
.nav__menu a { display: block; padding: .75rem .9rem; line-height: 1.3; }
.nav__menu a:hover { background: rgba(127,211,199,.08); }

.nav-toggle {
  display: none; background: none; border: 1px solid rgba(127,211,199,.4);
  color: var(--pearl); border-radius: 10px; padding: .55rem .8rem; font: 500 .95rem var(--font-body);
}

@media (max-width: 980px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: 78px 0 auto 0; flex-direction: column; align-items: stretch;
    background: rgba(0,0,0,.96); padding: 1rem 1.25rem 2rem;
    border-bottom: 1px solid var(--glass-edge);
    max-height: calc(100vh - 78px); overflow-y: auto;
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a, .nav button.nav__parent { padding: 1rem .5rem; font-size: 1.1rem; text-align: left; width: 100%; }
  .nav a[aria-current="page"] { box-shadow: none; }
  .nav__menu { position: static; display: block; border: 0; background: none; box-shadow: none; padding: 0 0 0 1rem; }
  .nav .btn { margin: 1rem 0 0; }
}

/* ---------------------------------------------------------
   Hero (home)
   --------------------------------------------------------- */
.hero { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 6rem); }
.hero__grid {
  display: grid; grid-template-columns: 1.02fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: center;
}
.hero h1 { margin-bottom: .35em; }
.hero__art { position: relative; }
.hero__art img {
  width: 100%;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 72% 80% at 50% 42%, #000 55%, transparent 98%);
  mask-image: radial-gradient(ellipse 72% 80% at 50% 42%, #000 55%, transparent 98%);
}
.hero__art::after {
  content: ""; position: absolute; inset: 8% 15% auto; height: 40%;
  background: radial-gradient(circle, rgba(242,217,160,.28), transparent 60%);
  filter: blur(30px); z-index: -1;
}
.hero__tagline {
  font-family: var(--font-display); font-style: italic; font-size: var(--step-1);
  color: var(--champagne); margin-bottom: 1.2rem;
}
.hero__facts {
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin-top: 2.2rem; padding: 0; list-style: none;
  font-size: .95rem; color: var(--mist);
}
.hero__facts li { display: flex; align-items: center; gap: .5rem; }
.hero__facts svg { flex: none; color: var(--gilt); }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__art { order: -1; max-width: 560px; margin-inline: auto; }
}

/* ---------------------------------------------------------
   Page hero (inner pages)
   --------------------------------------------------------- */
.page-hero { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3rem); }
.page-hero h1 { font-size: var(--step-4); max-width: 18ch; }
.crumbs { font-size: .9rem; color: var(--mist); margin-bottom: 1.4rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: .4rem; color: var(--gilt); }
.crumbs a { color: var(--mist); }

/* ---------------------------------------------------------
   Services index (home + hub): an editorial list, not cards
   --------------------------------------------------------- */
.svc-list { list-style: none; margin: 2.5rem 0 0; padding: 0; border-top: 1px solid rgba(214,166,81,.25); }
.svc-list li { border-bottom: 1px solid rgba(214,166,81,.25); }
.svc-list a {
  display: grid; grid-template-columns: 64px minmax(0, 1.1fr) minmax(0, 1.4fr) auto; gap: 1.5rem; align-items: center;
  padding: 1.6rem .5rem; text-decoration: none; color: var(--pearl);
  transition: background-color .25s;
}
.svc-list a:hover { background: linear-gradient(90deg, rgba(127,211,199,.07), transparent 70%); color: var(--pearl); }
.svc-list .ico { width: 54px; height: 54px; color: var(--seafoam); }
.svc-list h3 { margin: 0; font-size: var(--step-2); }
.svc-list p { margin: 0; color: var(--mist); }
.svc-list .go { font-size: .92rem; color: var(--champagne); white-space: nowrap; }
@media (max-width: 760px) {
  .svc-list a { grid-template-columns: 48px 1fr; gap: .4rem 1rem; }
  .svc-list .ico { width: 42px; height: 42px; grid-row: span 2; }
  .svc-list p { grid-column: 2; }
  .svc-list .go { grid-column: 2; }
}

/* ---------------------------------------------------------
   The pathway: how care begins (a real sequence)
   --------------------------------------------------------- */
.pathway { position: relative; }
.pathway__road {
  position: absolute; left: 50%; top: 0; height: 100%; width: 200px; transform: translateX(-50%);
  pointer-events: none;
}
.pathway__road path { fill: none; }
.pathway__steps { list-style: none; margin: 3rem 0 0; padding: 0; position: relative; display: grid; gap: .75rem; }
.pathway__step { display: grid; grid-template-columns: 1fr 120px 1fr; align-items: center; }
.pathway__step .glass { padding: 1.8rem 2rem; }
.pathway__step:nth-child(odd) .glass { grid-column: 1; }
.pathway__step:nth-child(even) .glass { grid-column: 3; }
.pathway__step .stone {
  grid-column: 2; grid-row: 1; justify-self: center;
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; color: #1d1406;
  background: radial-gradient(circle at 35% 30%, #fff3cf, #d6a651 55%, #8f6420);
  box-shadow: 0 0 0 6px rgba(214,166,81,.12), 0 0 40px rgba(242,217,160,.35);
}
.pathway__step h3 { margin-bottom: .35rem; }
.pathway__step p { margin: 0; color: var(--mist); }
@media (max-width: 760px) {
  .pathway__road { left: 32px; width: 80px; }
  .pathway__step { grid-template-columns: 64px 1fr; gap: 1rem; }
  .pathway__step .stone { grid-column: 1; width: 52px; height: 52px; font-size: 1.4rem; }
  .pathway__step:nth-child(odd) .glass,
  .pathway__step:nth-child(even) .glass { grid-column: 2; }
}

/* ---------------------------------------------------------
   Split content blocks
   --------------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.split--wide-left { grid-template-columns: 1.3fr 1fr; }
@media (max-width: 860px) { .split, .split--wide-left { grid-template-columns: 1fr; } }

.panel { padding: clamp(1.6rem, 3vw, 2.6rem); }

.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: .85rem; }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: .8rem; align-items: start; }
.checks li::before {
  content: ""; width: 18px; height: 18px; margin-top: .3em; border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 7' fill='none' stroke='%231d1406' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat,
    linear-gradient(180deg, #f5e1ad, #c8953e);
}
.checks--2col { grid-template-columns: 1fr 1fr; column-gap: 2rem; }
@media (max-width: 640px) { .checks--2col { grid-template-columns: 1fr; } }

/* promise trio: three values from the tagline */
.promise { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 2.5rem; }
.promise > div { padding: 2rem clamp(1rem, 3vw, 2.5rem); border-left: 1px solid rgba(214,166,81,.3); }
.promise > div:first-child { border-left: 0; padding-left: 0; }
.promise h3 { font-size: var(--step-3); font-style: italic; font-weight: 500; }
@media (max-width: 760px) {
  .promise { grid-template-columns: 1fr; }
  .promise > div { border-left: 0; border-top: 1px solid rgba(214,166,81,.3); padding-inline: 0; }
  .promise > div:first-child { border-top: 0; }
}

/* quote */
.quote {
  font-family: var(--font-display); font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.25;
  font-style: italic; font-weight: 500; max-width: 30ch; margin: 0 auto; text-align: center;
}
.quote-cite { display: block; text-align: center; margin-top: 1.4rem; color: var(--gilt); font-size: .95rem; }

/* service area chips */
.areas { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; padding: 0; margin: 1.5rem 0 0; }
.areas li { padding: .5rem 1rem; border: 1px solid rgba(127,211,199,.35); border-radius: 999px; font-size: .95rem; background: rgba(127,211,199,.05); }

/* CTA band */
.cta { text-align: center; padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem); overflow: hidden; }
.cta h2 { max-width: 20ch; margin-inline: auto; }
.cta p { margin-inline: auto; }
.cta .btn-row { justify-content: center; }
.cta::before {
  content: ""; position: absolute; left: 50%; top: -60%; width: 520px; height: 520px; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(242,217,160,.22), transparent 60%);
  pointer-events: none;
}

/* ---------------------------------------------------------
   FAQ
   --------------------------------------------------------- */
.faq details { border-bottom: 1px solid rgba(214,166,81,.25); }
.faq summary {
  list-style: none; cursor: pointer; padding: 1.4rem 2.5rem 1.4rem 0; position: relative;
  font-family: var(--font-display); font-size: var(--step-1); font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: .4rem; top: 50%; transform: translateY(-50%);
  font-family: var(--font-body); font-weight: 300; font-size: 1.6rem; color: var(--gilt);
  transition: transform .25s;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details > div { padding-bottom: 1.4rem; color: var(--mist); }

/* ---------------------------------------------------------
   Forms
   --------------------------------------------------------- */
.form { display: grid; gap: 1.1rem; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 620px) { .form .row { grid-template-columns: 1fr; } }
.form label { display: block; font-size: .92rem; margin-bottom: .35rem; color: var(--pearl); }
.form input, .form select, .form textarea {
  width: 100%; padding: .9rem 1rem;
  font: 400 1rem var(--font-body); color: var(--pearl);
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(127,211,199,.3); border-radius: var(--radius-sm);
}
.form select option { background: #03100f; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--champagne); box-shadow: 0 0 0 3px rgba(242,217,160,.18); }
.form textarea { min-height: 140px; resize: vertical; }
.form .hint { font-size: .85rem; color: var(--mist); margin-top: .35rem; }
.form-status { min-height: 1.5em; font-size: .95rem; }

.contact-lines { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.3rem; }
.contact-lines li { display: grid; grid-template-columns: 26px 1fr; gap: .9rem; }
.contact-lines svg { color: var(--gilt); margin-top: .25rem; }
.contact-lines strong { display: block; font-weight: 500; }

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */
.site-footer {
  margin-top: clamp(3rem, 8vw, 6rem);
  border-top: 1px solid rgba(214,166,81,.25);
  background: linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.85));
  padding-block: 3.5rem 2rem;
  font-size: .96rem;
}
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 2.5rem; }
.footer-grid h2 { font-size: 1.3rem; margin-bottom: .9rem; color: var(--champagne); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.footer-grid a { color: var(--mist); text-decoration: none; }
.footer-grid a:hover { color: var(--champagne); }
.footer-logo { width: 190px; margin-bottom: 1rem; mix-blend-mode: screen; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.08); color: var(--mist); font-size: .88rem; }
.footer-base a { color: var(--mist); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* utilities */
.center { text-align: center; }
.center p { margin-inline: auto; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 2rem; }
.stack > * + * { margin-top: 1.5rem; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; } }

/* one orchestrated page-load moment: the hero rises out of the light */
@media (prefers-reduced-motion: no-preference) {
  .hero__art img { animation: dawn 1.6s cubic-bezier(.2,.7,.2,1) both; }
  .hero__copy { animation: rise 1.1s .25s cubic-bezier(.2,.7,.2,1) both; }
  .pathway__road .glow { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s ease-out; }
  .pathway.is-lit .pathway__road .glow { stroke-dashoffset: 0; }
}
@keyframes dawn { from { opacity: 0; filter: brightness(.4) blur(6px); transform: scale(1.03); } to { opacity: 1; filter: none; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(3, 22, 21, .92); }
  .site-header { background: rgba(0,0,0,.94); }
}

@media (max-width: 560px) {
  .lede { font-size: 1.12rem; }
  .brand__name { font-size: 1.1rem; }
  .brand__name small { display: none; }
  .btn-row .btn { width: 100%; }
}

/* =========================================================
   GLOSSY PEARL BACKGROUND (v4)
   Layout, type and components are unchanged. Only the
   backdrop moves from black to glossy white satin, and text
   colors are adjusted so everything stays readable on it.
   ========================================================= */
:root {
  --page: #fdfcf9;
  --pearl: #12302f;          /* main text, was light */
  --mist: #56696a;           /* secondary text */
  --champagne: #a8742a;      /* gold used for text and hovers */
  --seafoam-soft: #0c6f69;   /* links */
  --glass-edge: rgba(214,166,81,.35);
  --glass-edge-teal: rgba(255,255,255,.95);
}
body { background: var(--page); color: var(--pearl); }
a:hover { color: var(--champagne); }
:focus-visible { outline-color: #a8742a; }

/* the satin backdrop */
.gloss {
  background:
    radial-gradient(ellipse 60% 40% at 15% 8%, #ffffff, transparent 70%),
    linear-gradient(118deg,
      #f1efe8 0%, #ffffff 9%, #e9e7df 17%, #ffffff 27%, #efede6 36%,
      #ffffff 46%, #e6e4dc 55%, #ffffff 64%, #efede6 74%, #ffffff 84%, #e9e7e0 93%, #ffffff 100%);
}
.gloss::before {
  content: ""; position: absolute; inset: -10%;
  background: inherit; filter: blur(22px);
}
.gloss__pool { filter: blur(80px); mix-blend-mode: multiply; }
.gloss__pool--a { background: radial-gradient(circle at 40% 40%, rgba(127,211,199,.55), transparent 65%); opacity: .35; }
.gloss__pool--b { background: radial-gradient(circle, rgba(127,211,199,.5), transparent 62%); opacity: .25; }
.gloss__pool--c { background: radial-gradient(circle, rgba(232,187,112,.55), transparent 62%); opacity: .3; }
.gloss__sheen {
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.8) 47%, #fff 50%, rgba(255,255,255,.75) 53%, transparent 60%);
  mix-blend-mode: soft-light;
}
.gloss__grain { opacity: .035; mix-blend-mode: multiply; }

/* headline fills, deepened for a light page */
.marble {
  background: linear-gradient(170deg, #0b4f4c 0%, #0f6a65 40%, #2a9d94 75%, #13716b 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gilt-text {
  background: linear-gradient(100deg, #8f6420, #c8953e 45%, #9a6a22 70%, #b98a3a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* glass surfaces become polished white */
.glass {
  background: linear-gradient(165deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.78) 48%, rgba(247,252,251,.62) 52%, rgba(255,255,255,.82) 100%);
  border: 1px solid rgba(255,255,255,.95);
  box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(12,119,118,.05), 0 20px 50px -24px rgba(9,47,49,.22);
}
.glass--gold { border-color: rgba(214,166,81,.45); }

/* header and menus */
.site-header {
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(251,250,246,.68));
  border-bottom: 1px solid rgba(214,166,81,.25);
  box-shadow: inset 0 1px 0 #fff, 0 8px 24px rgba(9,47,49,.05);
}
.brand { color: var(--pearl); }
.nav a, .nav button.nav__parent { color: var(--pearl); }
.nav a.btn--gold, .nav a.btn--gold:hover { color: #1d1406; }
.nav__menu {
  background: rgba(255,255,255,.97);
  box-shadow: 0 24px 50px -18px rgba(9,47,49,.25);
}
.nav__menu a:hover { background: rgba(127,211,199,.14); }
.nav-toggle { color: var(--pearl); border-color: rgba(12,119,118,.3); }
@media (max-width: 980px) {
  .nav { background: rgba(253,252,249,.98); box-shadow: 0 20px 40px -20px rgba(9,47,49,.25); }
}

/* hero */
.hero__art img { mix-blend-mode: normal; -webkit-mask-image: none; mask-image: none; filter: drop-shadow(0 24px 40px rgba(9,47,49,.18)); }
.hero__art::after { background: radial-gradient(circle, rgba(232,187,112,.35), transparent 60%); }
.brand img { mix-blend-mode: normal; }

/* buttons */
.btn--gold { position: relative; overflow: hidden; }
.btn--gold::before {
  content: ""; position: absolute; inset: 0 0 50% 0; border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,.05)); pointer-events: none;
}
.btn--ghost {
  color: #0b4f4c; border-color: rgba(12,119,118,.3);
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.6));
  box-shadow: inset 0 1px 0 #fff, 0 6px 16px -8px rgba(9,47,49,.2);
}
.btn--ghost:hover { color: #fff; background: #0f6a65; border-color: #0f6a65; }

/* details */
.svc-list .ico { color: #0f6a65; }
.svc-list a:hover { background: linear-gradient(90deg, rgba(255,255,255,.85), transparent 75%); }
.svc-list .go { color: #a8742a; }
.areas li { border-color: rgba(12,119,118,.22); background: linear-gradient(180deg, #fff, rgba(255,255,255,.6)); box-shadow: inset 0 1px 0 #fff; }
.promise > div { border-color: rgba(214,166,81,.4); }
.pathway__step .stone { box-shadow: 0 0 0 6px rgba(214,166,81,.15), 0 8px 24px rgba(168,116,42,.3); }
.form input, .form select, .form textarea {
  background: linear-gradient(180deg, #fff, #fbfaf6);
  border-color: rgba(12,119,118,.2); color: var(--pearl);
  box-shadow: inset 0 1px 2px rgba(9,47,49,.05);
}
.form select option { background: #fff; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: #c8953e; box-shadow: 0 0 0 3px rgba(214,166,81,.2); }
.crumbs a { color: var(--mist); }

/* footer stays dark, as in the original design */
.site-footer {
  --pearl: #e8f4f1; --mist: #b9cfcb; --champagne: #f2d9a0;
  color: var(--pearl);
  background: linear-gradient(180deg, #062a29, #020a0a);
  border-top: 1px solid rgba(214,166,81,.35);
}
.footer-logo { mix-blend-mode: screen; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(255,255,255,.95); }
  .site-header { background: rgba(255,255,255,.97); }
}
.nav a.btn--gold { background: linear-gradient(180deg, #f5e1ad 0%, #d6a651 55%, #b8862f 100%); }
.nav a.btn--gold:hover { background: linear-gradient(180deg, #f8e7bd 0%, #dcae5c 55%, #be8c35 100%); }

/* ---------- Founder portrait ---------- */
.founder-portrait { margin: 0 0 1.6rem; width: min(100%, 300px); }
.founder-portrait img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 50% 50% 22px 22px;           /* echoes the dome of the logo */
  border: 6px solid #fff;
  outline: 1px solid rgba(214,166,81,.6); outline-offset: 4px;
  box-shadow: 0 24px 50px -22px rgba(9,47,49,.35);
}
#founder-h + .hero__tagline, .founder-portrait + h2 { margin-top: 0; }

/* ---------- WhatsApp chat button ---------- */
.wa-chat {
  position: fixed; z-index: 60;
  right: max(1.1rem, env(safe-area-inset-right, 0px));
  bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .85rem 1.25rem .85rem 1rem; border-radius: 999px;
  font: 500 .98rem/1 var(--font-body); color: #fff; text-decoration: none;
  background: linear-gradient(180deg, #2fd774 0%, #1fa855 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 12px 28px -10px rgba(10,80,40,.55);
  transition: transform .2s, box-shadow .2s;
}
.wa-chat:hover { color: #fff; transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 16px 32px -10px rgba(10,80,40,.65); }
@media (max-width: 560px) {
  .wa-chat span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .wa-chat { padding: .95rem; }
}
@media print { .wa-chat { display: none; } }
.founder-portrait--lg { width: min(100%, 440px); position: sticky; top: 110px; }
@media (max-width: 860px) { .founder-portrait--lg { position: static; width: min(100%, 320px); } }