/* =========================================================
   THEME TOKENS (edit in one place)
   ========================================================= */
:root{
  /* Fonts */
  --font-sans: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif:"Lora", Georgia, "Times New Roman", serif;

  /* Colors */
  --bg-1:#eed0c1;
  --bg-2:#efecf3;
  --ink:#ffffff;                 /* global text color on gradient header sections */
  --muted:#c9ccda;
  --brand:#c38ec7b6;
  --brand-2:#8ec7bd;
  --brand-3: rgba(161,157,157,.452);
  --brand-4:#473d33b4;
  --brand-5: rgba(163,168,96,.212);
  --brand-6: rgb(187,137,117);
  --brand-7: rgb(10,10,10);
  --brand-8:#d283d8;
  --brand-9: turquoise;
  --brand-10:#bb78c0c0;

  /* Nav controls */
  --nav-text: #0a0a0a;
  --nav-chip: rgba(225,168,147,.324);
  --nav-chip-hover: rgba(233,237,238,.868);
  --nav-focus: #444;

  /* Buttons */
  --btn-bg: linear-gradient(150deg,rgb(60,215,166),rgb(57,201,155),rgb(117,230,194));
  --btn-text: #030303;
  --btn-outline: rgba(255,255,255,.2);
  --btn-regular-bg: #97d1cac1;
  --btn-regular-text: #fff;

  /* Layout */
  --container: 1100px;
  --radius: 12px;
  --pill: 999px;

  /* Hero */
  --hero-max: 90ch;

  /* Gutters */
  --gutter: 16px;

  /* Header heights */
  --header-h-desktop: 72px;
  --header-h-mobile: 56px;
}



/* =========================================================
   Above the Beyond — Webfont
   Place the .woff2/.woff in /fonts/
   ========================================================= */
@font-face{
  font-family: "Above the Beyond";
  src:
    url("fonts/AboveTheBeyond-Regular.woff2") format("woff2"),
    url("fonts/AboveTheBeyond-Regular.woff")  format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
/* =========================================================
   BASE
   ========================================================= */
*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
html{
  font-family: var(--font-sans);
  font-size: 17px;
  font-optical-sizing: auto;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body{
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  background: linear-gradient(180deg,var(--bg-1),var(--bg-2));
  color: var(--ink);
}
h1,h2,h3,h4,h5,h6{
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.2;
}
h1{
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  line-height: 1.1;
  margin: .2rem 0 .6rem;
  font-weight: 800;
  color: rgb(10,10,10);
}
h2{ font-family:'Montserrat', sans-serif; font-weight: 700; color: rgb(10,10,10); }
a{ color: var(--brand); text-decoration: none; }
.measure{ max-width: 65ch; }
*, *::before, *::after{ font-family: inherit; }
.container{ color:black; width:min(var(--container),92vw); margin-inline:auto; padding-inline: var(--gutter); }

/* =========================================================
   HEADER / NAV (sticky on scroll)
   ========================================================= */
.site-header{
  position: -webkit-sticky; /* Safari iOS */
  position: sticky; top:0; z-index:10000;
  background: linear-gradient(150deg,rgb(239,250,254),rgb(228,245,254),rgb(246,218,207),rgb(245,194,174),rgb(251,179,150));
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid rgba(255,255,255,.07);
  overflow: visible;
  padding-top: max(0px, env(safe-area-inset-top)); /* notch-safe */
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:.9rem 0; gap:1rem; }
.brand{ display:inline-flex; align-items:center; gap:.5rem; height:75px; font-weight:700; color:var(--brand-7); letter-spacing:.2px; text-decoration:none; }
.brand__logo{ height:200px; width:auto; transform: scale(1.35); transform-origin: left bottom; pointer-events:none; }
@media (min-width:768px){ .brand__logo { height:48px; transform:none; } }

.menu{
  display:flex; gap:.5rem; align-items:center;
  margin:0; padding:0; list-style:none;
}

/* Chip look for each nav item */
.menu li{
  position:relative;
  padding:0; border:0;
  border-radius: var(--pill);
  background: var(--nav-chip);
  box-shadow: none;
  overflow:hidden;
  transition: background .2s ease, transform .2s ease;
  -webkit-backdrop-filter: saturate(120%) blur(2px);
  backdrop-filter: saturate(120%) blur(2px);
}
.menu li:hover,
.menu li:focus-within{
  background: var(--nav-chip-hover);
  transform: translateY(-1px);
}

.menu li > a{
  display:block;
  padding:.55rem .8rem;
  border-radius:inherit;
  color: var(--nav-text);
  -webkit-tap-highlight-color: transparent;
  font-size: .975rem;
  outline:0;
}

.menu a:focus-visible{
  outline:2px solid var(--nav-focus);
  outline-offset:2px;
  border-radius:4px;
}

/* Buttons */
.btn{
  display:inline-block;
  padding:.6rem .9rem;
  border:1px solid var(--btn-outline);
  border-radius: var(--pill);
  background: var(--btn-bg);
  color: var(--btn-text);
  line-height: 1.1;
}
.btn--compact{ padding:.35rem .7rem; line-height:1.05; }
.btn.primary{
  background:linear-gradient(260deg,rgba(223,190,190,.233),rgba(215,177,177,.228),rgba(144,235,206,.324));
  opacity:.95; transform:none; transition:all .2s ease-in-out; position:relative; overflow:hidden; isolation:isolate; color:#050505;
}
.btn.light{ background:#5ff0dfc1; color:#0f1220; border:0; font-weight:700; }
.btn.small{ background:#efa94147; color:#0f1220; border:0; font-weight:700; padding:.35rem .7rem; font-size:.9rem; }
.btn.regular{
  background: var(--btn-regular-bg);
  color: var(--btn-regular-text);
  border:0; font-weight:700;
  opacity:.95; transform:scale(1.02);
  transition:all .2s ease-in-out;
  position:relative; overflow:hidden; isolation:isolate;
}
.btn.regular::before{
  content:""; position:absolute; inset:-10%;
  background:
    radial-gradient(6px 6px at 15% 40%, rgba(255,255,255,.95) 0 40%, transparent 45%),
    radial-gradient(4px 4px at 55% 20%, rgba(255,255,255,.9) 0 45%, transparent 50%),
    radial-gradient(3px 3px at 75% 70%, rgba(255,255,255,.9) 0 40%, transparent 45%),
    radial-gradient(5px 5px at 30% 75%, rgba(255,255,255,.95) 0 40%, transparent 45%),
    radial-gradient(3px 3px at 90% 35%, rgba(255,255,255,.9) 0 40%, transparent 45%);
  filter: drop-shadow(0 0 6px rgba(255,255,255,.75));
  mix-blend-mode: screen;
  pointer-events:none;
  animation: twinkle 2.8s infinite ease-in-out;
}
.btn.regular::after,
.btn.primary::after{
  content:""; position:absolute; top:-30%; left:-120%;
  width:45%; height:160%;
  background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-20deg);
  pointer-events:none;
  animation: sweep 2.6s infinite;
}
.btn.primary::after{ background: linear-gradient(80deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 100%); animation-duration: 6.6s; }
.btn:hover{
  transform: scale(1.05);
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}
.btn.regular:hover::before{ animation-duration:1.6s; }
.btn.regular:hover::after,
.btn.primary:hover::after{ animation-duration:1.8s; }

/* =========================================================
   HERO
   ========================================================= */
.hero-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:2rem;
  align-items:center;
}
.hero-copy{
  justify-self: end;
  text-align: right;
  max-width: 60ch;
  width: fit-content;
  margin-left: auto;
}
.eyebrow{ opacity:.8; letter-spacing:.2px; margin-bottom:.35rem; }
.lead2{ font-size:1.3rem; }
.lead { margin-top: 1rem !important; font-family: var(--font-serif); font-weight: bold; font-size: 1.3rem; }
.lead2 { font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-style: italic; font-weight: 400; }

.actions{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1rem; }
.hero-card{ height:260px; border-radius:16px; position:relative; background:linear-gradient(135deg,#381a2f,#0b0f20); outline:1px solid rgba(255,255,255,.06); }
.card-sheen{ position:absolute; inset:-2px; background: radial-gradient(120px 60px at 30% 0%, rgba(255,255,255,.733), transparent 60%); mix-blend-mode: screen; border-radius:18px; }

/* =========================================================
   SECTIONS, GRIDS, CARDS
   ========================================================= */
section{ padding:clamp(2rem,6vw,4rem) 0; }
.split{ display:grid; grid-template-columns:1.2fr .8fr; gap:2rem; align-items:start; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.card{ background:rgba(238,238,231,.219); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:1rem; }
.service .bullets{ margin:.5rem 0 0 1rem; }
.subtitle{ opacity:.9; }

/* =========================================================
   PARALLAX
   ========================================================= */
.parallax{
  position:relative; min-height:70vh; display:grid; place-items:center;
  text-align:center; color:#ffffff; overflow:hidden; isolation:isolate;
}
.parallax::before{
  content:""; position:absolute; inset:0; background-image:var(--bg);
  background-size:cover; background-position:center; background-repeat:no-repeat;
  transform:translate3d(0,var(--y,0),0); will-change:transform; z-index:-2;
  filter:saturate(105%) contrast(102%);
}
/* Smooth entrance for HERO background */
.parallax--hero::before{
  opacity:0;
  transform: scale(1.04) translate3d(0,var(--y,0),0);
  transition: opacity .9s ease, transform 1.2s cubic-bezier(.22,.61,.36,1);
}
.parallax--hero.is-ready::before{
  opacity:1; transform: scale(1) translate3d(0,var(--y,0),0);
}
.parallax--hero::after{
  content:""; position:absolute; inset:0;
  transition: opacity .9s ease; opacity:0;
}
.parallax--hero.is-ready::after{ opacity:1; }
.parallax::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(290deg,rgba(218,179,144,.546),rgba(233,224,203,.655),rgba(231,150,150,0),rgba(255,255,255,0));
  z-index:-1;
}
.parallax__content{ padding:clamp(1rem,2.5vw,3rem); max-width:min(84ch,92vw); }
.parallax__content h2{ font-size:clamp(1.6rem,4vw,2.4rem); margin:0 0 .4rem; }
.parallax__content p{ margin:.4rem auto 1rem; opacity:.98; }

/* Parallax half */
.parallax--half{ min-height:50vh; text-align:center; }
.parallax--half .parallax__content{ max-width:min(900px,92vw); padding:clamp(1.5rem,4vw,3rem) 0;}

/* Content variant */
.parallax--content{ min-height:auto; text-align:left; }
.parallax--content .parallax__content{ max-width:none; padding:clamp(2rem,5vw,4rem) 0; }
.parallax--content::after{ background:linear-gradient(to bottom, rgba(10,12,20,.20), rgba(10,12,20,.35)); }

/* Anchor offset for sticky header */
.parallax[id]{ scroll-margin-top: 80px; }

/* =========================================================
   QUOTES / FAQ
   ========================================================= */
.quotes{ display:grid; gap:1rem; }
blockquote{
  margin:0; padding:1rem;
  border-left:3px solid var(--brand);
  background:rgba(255,255,255,.04);
  border-radius:8px;
}
blockquote cite{ display:block; margin-top:.5rem; opacity:.8; }

.faq{ margin:.6rem 0; border:1px solid rgba(255,255,255,.08); border-radius:8px; overflow:hidden; }
.faq > summary{ cursor:pointer; padding:.8rem 1rem; background:rgba(255,255,255,.04); list-style:none; }
.faq-section .faq{ color:#111; background:rgba(0,0,0,.025); border:1px solid rgba(0,0,0,.08); }
.faq-section .faq > summary{ background:rgba(0,0,0,.02); }
.faq__a{ padding:1rem; }

/* Testimonial cards */
.quotes--cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.quote-card{
  position:relative; border-radius:14px; padding:1rem 1.1rem;
  background:radial-gradient(120% 140% at 0% 0%,rgba(255, 255, 255, 0.418),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08); box-shadow:0 6px 30px rgba(0,0,0,.15);
  transition:transform .35s ease, box-shadow .35s ease; overflow:hidden; color:#111;
}
.quote-card::before{
  content:"“"; position:absolute; left:.7rem; top:-.5rem; font-size:4rem; line-height:1;
  color:rgba(255,255,255,.08); font-family:serif; pointer-events:none;
}
.quote-card:hover{ transform:translateY(-3px); box-shadow:0 10px 40px rgba(0,0,0,.25); }
.quote-card cite{ display:block; margin-top:.7rem; opacity:.85; }
.privacy-note{ margin:.6rem 0 0; opacity:.8; font-size:.95rem; }

/* =========================================================
   CONTACT
   ========================================================= */
.contact form{ display:grid; gap:.8rem; color:black; max-width:560px; }
.contact input, .contact textarea{
  width:100%; padding:.65rem .8rem; border-radius:.75rem;
  border:1.5px solid rgba(255,255,255,.6);
  background:rgba(255,255,255,.04); color:black; outline:none;
}
.contact input:focus, .contact textarea:focus{
  border-color:#fff; color:black; box-shadow:0 0 0 3px rgba(255,255,255,.18);
}
.contact select{
  width:100%; padding:.65rem .8rem; border-radius:.75rem;
  border:1.5px solid rgba(255,255,255,.6);
  background:rgba(255,255,255,.04); color:black; outline:none; min-height:3rem;
}
.contact select:focus{ border-color:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.18); }
.contact .hint{ display:block; margin:.25rem 0 .5rem; opacity:.8; font-size:.9rem; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ border-top:1px solid rgba(255,255,255,.07); padding:1rem 0; }
.site-footer .container{ display:flex; justify-content:space-between; align-items:center; }

/* =========================================================
   UTILITIES / EFFECTS
   ========================================================= */
.justify{ text-align: justify; text-justify: inter-word; hyphens:auto; }
.justify p{ margin:0 0 .75rem; }
.justify p:last-child{ margin-bottom:0; }
.reveal{ opacity:1; transform:none; }
html.js .reveal{ opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease; }
html.js .reveal.is-visible{ opacity:1; transform:translateY(0); }
.confidential-callout{
  margin-top:1rem; background:linear-gradient(180deg,#F4FAFB 0%, #E9F4F2 100%);
  color:#0f1220; border:1px solid rgba(0,0,0,.06); border-radius:12px; padding:1rem; font-size:.95rem;
}
.back-to-top{
  position: fixed; inset-inline-end: 1rem; inset-block-end: calc(1rem + env(safe-area-inset-bottom)); z-index: 9999;
  opacity: 0; transform: translateY(16px) scale(.98); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, box-shadow .2s ease;
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
}
.back-to-top.is-visible{ opacity:1; transform: translateY(0) scale(1); pointer-events:auto; }
.back-to-top:hover{ box-shadow: 0 12px 28px rgba(0,0,0,.22); }

/* =========================================================
   MEDIA QUERIES
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .btn.regular::before,
  .btn.regular::after,
  .btn.primary::after{ animation:none; }
  .btn.regular:hover{ transform:scale(1.02); }
  .parallax--hero::before,
  .parallax--hero.is-ready::before,
  .parallax--hero::after,
  .parallax--hero.is-ready::after{
    transition:none; transform: translate3d(0,var(--y,0),0); opacity:1;
  }
  .parallax::before{ transform:none !important; }
}

/* Mobile */
@media (max-width: 900px){
  .hero-grid, .split{ grid-template-columns:1fr; }
  .grid-3{ grid-template-columns:1fr; gap:.8rem; }
  .parallax--half{ min-height:45vh; }
  .brand__logo{ height:184px !important; width:auto; transform:none !important; }

  .hero-copy{
    justify-self:center;
    text-align:center;
    background:rgba(205, 186, 186, 0.406);
    max-width:48ch;
    width: fit-content;
    padding-inline:12px;
    border-radius:18px;
    overflow:hidden;
  }
  .hero-copy .actions{ margin-inline-start:0 !important; justify-content:center; }

  /* Mobile drawer */
  .nav-toggle{
    display:inline-flex !important; align-items:center; justify-content:center;
    border:0; background:transparent; padding:.4rem; line-height:0; color:#111; border-radius:.6rem;
  }
  .nav-toggle:focus-visible{ outline:2px solid currentColor; }

  #site-menu{
    position: fixed; top:0; right:0; bottom:0;
    width: min(80vw, 320px);
    transform: translateX(110%);          /* off-screen by default */
    transition: transform .25s ease, visibility 0s linear .25s;
    background: #ebebeb00;
    box-shadow: none;
    padding: max(12px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
    z-index: 9998;
    visibility: hidden; pointer-events: none;
  }
  #site-menu.is-open{
    transform: translateX(0);
    visibility: visible; pointer-events: auto;
    box-shadow: -8px 0 24px rgba(0,0,0,.15);
  }
  body.nav-open{ overflow:hidden; }

  .site-header .menu{
    display:flex; flex-direction:column; gap:.6rem; padding:0; margin:0;
  }
  .site-header .menu li{
    border-radius:.9rem; overflow:hidden;
    border:1px solid rgba(0,0,0,.08); background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.06);
  }
  .site-header .menu li > a{
    padding:.95rem 1rem; color:#111;
  }

  /* mobile safety nets */
  html, body { max-width: 100%; overflow-x: hidden; }
  img, video, svg, canvas { max-width: 100%; height: auto; }
  .container { width: 100%; max-width: 100%; }


                  /* ---------- MOBILE: Testimonial cards ---------- */
@media (max-width: 900px){
  /* Stack cards in one column with comfy spacing */
  .quotes--cards{
    grid-template-columns: 1fr;   /* from 3 cols → 1 col */
    gap: 0.9rem;
    padding-inline: 8px;          /* slight gutter so cards don't touch edges */
  }

  /* Card polish for small screens */
  .quote-card{
    padding: 1rem 1rem 0.9rem;
    border-radius: 14px;
    background: radial-gradient(160% 140% at 0% 0%, rgba(255,255,255,0.55), rgba(255,255,255,0.06));
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 8px 22px rgba(0,0,0,.14);
  }

  /* Softer decorative quote mark so it doesn't fight the text */
  .quote-card::before{
    font-size: 2.2rem;     /* down from 4rem */
    left: .6rem;
    top: .1rem;
    color: rgba(0,0,0,.08);
  }

  /* Body text sizing & rhythm */
  .quote-card p{
    font-size: clamp(0.98rem, 3.9vw, 1.08rem);
    line-height: 1.65;
    margin: 0;             /* remove extra gaps inside the card */
  }

  /* Author line */
  .quote-card cite{
    display: block;
    margin-top: .65rem;
    font-size: .96rem;
    font-style: normal;
    opacity: .8;
  }

  /* If your testimonials list isn't using .quotes--cards (just .quotes), still tighten spacing */
  .quotes{ gap: .9rem; }
}
    



}

/* Desktop reset for inline menu */
@media (min-width: 901px){
  .nav-toggle{ display:none !important; }
  #site-menu{
    position: static; transform:none; visibility: visible; pointer-events:auto;
    background: transparent; box-shadow:none; padding:0; width:auto;
  }
  .site-header #site-menu .menu{ display:flex; flex-direction:row; gap:1rem; }
}

/* =========================================================
   KEYFRAMES
   ========================================================= */
@keyframes twinkle{
  0%,100%{ opacity:.3; transform: translateY(0) scale(1); }
  50%    { opacity:.95; transform: translateY(-1px) scale(1.03); }
}
@keyframes sweep{
  0%{ left:-120%; }
  100%{ left:160%; }
}

/* Desktop/default (explicit hero image) */
.parallax--hero::before{
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Mobile hero swap */
@media (max-width: 1000px){
  .parallax--hero::before{
    background-image: var(--bg-mobile, var(--bg)) !important;
    background-position: center;
  }
}

/* ===== Make the whole page wider (end) ===== */
:root{
  --container: 1280px;        /* was 1100px */
  --hero-max: 90ch;
}
.container{ width: min(var(--container), 96vw) !important; }
.parallax--hero .parallax__content{ max-width: min(var(--container), 96vw) !important; }
.parallax__content{ max-width: min(var(--container), 96vw) !important; }
.parallax--hero .hero-copy{ max-width: var(--hero-max); }
.parallax--hero .hero-copy .actions{ margin-inline-start: 0 !important; }

/* Right-align the hero text block */
.parallax--hero .hero-grid .hero-copy{
  justify-self: end;
  margin-left: auto;
  text-align: right;
  width: fit-content;
  max-width: var(--hero-max, 90ch);
}
/* If the parent is flex instead of grid, this helps too */
.parallax--hero .hero-grid{
  grid-template-columns: 1fr;
  justify-items: end;
}

/* Mobile hero tweaks */
@media (max-width: 900px){
  .parallax--hero .hero-copy{
    max-width: 20ch !important;
    width: 100%;
    margin-inline: auto;
    text-align: center;
    padding-inline: 12px;
    border-radius: 18px;
    overflow: hidden;
  }
}
.parallax--hero .hero-copy{ max-width: 69ch !important; }

/* Fixed header heights */
.site-header .nav{ min-height: var(--header-h-desktop); align-items: center; }
.brand{ height: var(--header-h-desktop); position: relative; overflow: visible; }
.brand__logo{
  height: calc(var(--header-h-desktop) * 3);
  width: auto;
  transform: translateY(calc(var(--header-h-desktop) * -0.10));
  transform-origin: left bottom;
  pointer-events: none;
}
@media (max-width:900px){
  .site-header .nav{ min-height: var(--header-h-mobile); }
  .brand{ height: var(--header-h-mobile); }
  .brand__logo{ height: var(--header-h-mobile); transform: none; }
}

/* About section grid */
.split--about{
  display: grid;
  margin-top: 3.5rem;
  grid-template-columns: 1fr 1.2fr .9fr; /* image | text | card */
  gap: 3rem;
  align-items: start;
}
.about-media{ align-self: start; }
.about-media img{
  display: block;
  width: 100%;
  height: 100%;
  max-height: 520px;
  object-fit: cover;
  border-radius: 12px;
}
.split--about .card{ position: sticky; top: 1.25rem; }

@media (max-width: 1100px){
  .split--about{ grid-template-columns: 1fr 1fr; }
  .split--about .card{ grid-column: 2; }
}
@media (max-width: 900px){
  .split--about{ grid-template-columns: 1fr; }
  .split--about .card{ position: static; margin-top: .75rem; }
}

/* Section header */
.section-header{ text-align: center; margin: 0 0 1.25rem; color: #ffffff17; }
.section-header .eyebrow{
  text-align: center; letter-spacing: .04em; opacity: .85; margin: 0 0 3rem;
}
.section-title{
  margin: 0;
  font-family: var(--font-serif, serif);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.6vw, 2.2rem);
  line-height: 1.15;
}
.section-kicker{ margin: .35rem 0 0; opacity: .95; }
@media (min-width: 901px){
  .section-header--about{
    text-align: left;
    max-width: min(var(--container, 1100px), 96vw);
    margin-inline: auto;
    padding-inline: 0;
  }
}

/* Remove top gap at the start of ABOUT */
#about{ padding-top: 4.5rem !important; }

#about .parallax__content{
  padding-top: 0 !important;
  border-top: 1px solid transparent;
}
#about .section-title,
#about .eyebrow{ margin-top: 1rem; }

/* Reveal animation */
.reveal { opacity: 1; transform: none; }
html.js .reveal{
  opacity: 0; transform: translateY(10px); filter: blur(0.3px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1), filter .6s ease;
  will-change: opacity, transform, filter;
}
html.js .reveal.is-visible{ opacity: 1; transform: translateY(0); filter: blur(0); }
html.js .reveal--up      { transform: translateY(12px); }
html.js .reveal--down    { transform: translateY(-12px); }
html.js .reveal--left    { transform: translateX(12px); }
html.js .reveal--right   { transform: translateX(-12px); }
html.js .reveal--zoom    { transform: scale(.98); }
html.js .reveal--up.is-visible,
html.js .reveal--down.is-visible,
html.js .reveal--left.is-visible,
html.js .reveal--right.is-visible,
html.js .reveal--zoom.is-visible{ transform: none; }
@media (prefers-reduced-motion: reduce){
  html.js .reveal,
  html.js .reveal.is-visible{
    transition: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
}

/* SR-only helper */
.sr-only {
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* CTA split */
.cta-split{
  display: grid;
  grid-template-columns: 1fr min(38vw, 420px);
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
}
.cta-copy > *{ margin: 0 0 .75rem; }
.cta-copy > *:last-child{ margin-bottom: 0; }
.cta-media{ margin: 0; }
.cta-media img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: none;
  object-fit: cover;
}
@media (max-width: 900px){
  .cta-split{ grid-template-columns: 1fr; }
  .cta-media{ order: 2; }
  .cta-copy{ text-align: left; }
}

/* Safety nets (keep at end) */
img, video { max-width: 100%; height: auto; }


/* =========================================================
   MOBILE: split hero into two sections (image top, text bottom)
   ========================================================= */

/* Hide the new mobile text section by default (desktop) */
.hero-mobile-text { display: none; }

/* Keep desktop hero overlay behavior unchanged */
@media (min-width: 901px){
  /* nothing to change */
}

/* On mobile: show image as its own hero section,
   hide the original overlaid text, show the new text section below */
@media (max-width: 900px){
  /* Make sure the top hero (image) has a nice height on phones */
  .parallax--hero{
    min-height: 62vh;            /* tweak to taste */
    
  }

  /* Hide the original overlay text/content on the image */
  .parallax--hero .parallax__content{
    display: none;
    
  }

  /* Show the new text section under the image */
  .hero-mobile-text{
    display: block;
    padding: 0;                 /* we’ll pad the inner wrapper */
    background: transparent;
    background-color: rgb(226, 206, 198);
  }

  .hero-mobile-text .container{
    width: min(var(--container), 96vw);
  }

  .hero-mobile-text__inner{
    /* Full-width “bar” look across the bottom */
    background: linear-gradient(
      to top,
      rgba(255, 255, 255, 0.95),
      rgba(255, 255, 255, 0.9),
      rgba(255,255,255,0.85)
    );
    color: #0a0a0a;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    padding: 16px 14px 18px;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -6px 18px rgba(0,0,0,.10);
  }

  /* Comfortable text sizes inside the mobile bar */
  .hero-mobile-text__inner .lead{
    font-size: clamp(1.05rem, 4.8vw, 1.35rem);
    margin: 0 0 .45rem;
    text-align: center;
  }
  .hero-mobile-text__inner .lead2{
    font-size: clamp(.98rem, 3.9vw, 1.08rem);
    margin: .15rem 0;
    text-align: center;
  }

  .hero-mobile-text__inner .actions{
    display: flex;
    justify-content: center;
    gap: .6rem;
    margin-top: .65rem;
  }

  /* Optional: slight vignette on the bottom of the image hero
     so the split visually connects */
  .parallax--hero::after{
    background:
      linear-gradient(to top, rgba(179, 15, 15, 0.1), rgba(0,0,0,0) 40%),
      linear-gradient(290deg,rgba(218, 144, 214, 0.42),rgba(233,224,203,.45),rgba(231,150,150,0),rgba(255,255,255,0));
  }
}


/* =========================================================
   MOBILE: make the text overlap the bottom HALF of the hero image
   (image = .parallax--hero, text bar = .hero-mobile-text)
   ========================================================= */
@media (max-width: 900px){

  /* Tune how much the text overlaps into the image.
     About half the hero height, with safe min/max bounds. */
  :root{
    --hero-overlap: clamp(50px, 11vh, 360px);  /* ~half of a 68–72vh hero */
  }

  /* Ensure the image hero is behind and tall enough */
  .parallax--hero{
    position: relative;
    z-index: 0;
    min-height: 68vh;      /* adjust if you want a taller/shorter image */
  }

  /* Hide the original overlay copy if it exists inside the hero */
  .parallax--hero .parallax__content{ display: none; }

  /* The text section that follows the hero */
  .hero-mobile-text{
    display: block;        /* show it on mobile */
    position: relative;
    z-index: 2;            /* above the image */
    margin-top: calc(-1 * var(--hero-overlap));  /* pull it up over the image */
    padding-bottom: 8px;   /* tiny breathing room below the bar */
  }

  /* Full-width, translucent “bar” that sits over the image */
  .hero-mobile-text__inner{
    background: linear-gradient(
      to top,
      rgba(245, 244, 244, 0.014),
      rgba(116, 111, 111, 0.048),
      rgba(212, 208, 208, 0.747)
    );
    color: #0a0a0a;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 14px;                 /* rounded corners all around */
    box-shadow: none; /* sits visually on top of image */
    padding: 16px 14px 18px;
  }

  /* Comfortable text sizing inside the bar */
  .hero-mobile-text__inner .lead{
    font-size: clamp(1.05rem, 4.8vw, 1.35rem);
    margin: 0 0 .45rem;
    text-align: center;
  }
  .hero-mobile-text__inner .lead2{
    font-size: clamp(.98rem, 3.9vw, 1.08rem);
    margin: .15rem 0;
    text-align: center;
  }
  .hero-mobile-text__inner .actions{
    display: flex; justify-content: center; gap: .6rem; margin-top: .65rem;
  }

  /* Gentle vignette at the bottom of the image so overlap reads cleanly */
  .parallax--hero::after{
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    background:
      linear-gradient(to top, rgba(0,0,0,.12), rgba(0,0,0,0) 40%),
      linear-gradient(290deg,rgba(218,179,144,.32),rgba(233,224,203,.36),rgba(231,150,150,0),rgba(255,255,255,0));
    z-index: 1;  /* behind the text bar, above the image */
  }

  /* Keep spacing after the overlapped bar tidy (optional) */
  .hero-mobile-text + section,
  .hero-mobile-text + .parallax,
  .hero-mobile-text + .container{
    margin-top: 12px;
  }
}