/* iNtegra Counselling stylesheet, generated by scripts/build-css.mjs.
   Do not edit this file: edit css/src/_*.css and re-run the builder.
   No external fonts, no CDN, no third-party requests at page load. */

/* ===== _10-fonts.css :: self-hosted DM Sans and Manrope, no third-party requests ===== */

/* Self-hosted faces. Both families are SIL Open Font License, which permits
   serving them ourselves. The variable files carry the whole weight axis in
   one woff2 each, so the page makes zero third-party requests at load.
   unicode-range matches Google's latin subset exactly; widening it by hand
   would make the browser fetch these files for pages that never need them. */

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/dm-sans-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== _20-system.css :: structure: nav, hero, article, form, footer, cards ===== */

/* iNtegra Counselling - 2026 V2 Redesign.
   Complete, self-contained stylesheet for the new front-page design.
   No external fonts, no CDN, no third-party requests.
   All motion is CSS + progressive-enhancement JS. prefers-reduced-motion kills it.

   Design language: warm glassmorphism, animated mesh-gradient hero,
   gradient text accents, 3D card tilts, scroll-driven reveals,
   floating ambient elements, magnetic interactions. */

:root {
  --ink: #15211f;
  --ink-soft: #4d5c59;
  --ink-faint: #8a9894;
  --teal: #1f5b55;
  --teal-dark: #10302c;
  --teal-deep: #0a2320;
  --teal-darker: #061816;
  --teal-light: #e6f0ed;
  --teal-glow: rgba(31, 91, 85, .12);
  --sand: #f7f2e9;
  --cream: #fdf9f3;
  --line: #dde4e1;
  --line-soft: #ecf0ee;
  --accent: #c06c3c;
  --accent-dark: #9a5227;
  --accent-light: #d9885f;
  --gold: #d9a05b;
  --gold-light: #e8c184;
  --gold-glow: rgba(217, 160, 91, .15);
  --white: #fff;
  --ok: #1c6b45;
  --err: #a32c24;
  --max: 46rem;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;
  --shadow-sm: 0 1px 3px rgba(21, 33, 31, .06);
  --shadow: 0 4px 12px rgba(21, 33, 31, .08), 0 12px 32px rgba(21, 33, 31, .1);
  --shadow-lift: 0 8px 24px rgba(21, 33, 31, .12), 0 24px 56px rgba(21, 33, 31, .16);
  --shadow-glow: 0 0 40px rgba(217, 160, 91, .15);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --ease-out: cubic-bezier(.22, .68, .16, 1);
  --ease-spring: cubic-bezier(.34, 1.45, .44, 1);
  --ease-smooth: cubic-bezier(.4, 0, .2, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.68;
  color: var(--ink);
  background: var(--cream);
  overflow-wrap: break-word;
  /* clip, not hidden. A [data-reveal] block that is still off screen carries
     perspective() rotateX(6deg) with transform-origin at its top, so its bottom
     edge leans toward the camera and the projected rectangle is wider than the
     layout box. On a two-thousand-character paragraph that pushes
     documentElement.scrollWidth past the viewport and a phone gets a
     horizontal scrollbar for as long as the block stays hidden. clip stops the
     sideways scroll without creating a scroll container, which is what would
     break the sticky header. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video { max-width: 100%; height: auto; }

a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-dark); }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  line-height: 1.2;
  color: var(--teal-dark);
  margin: 2.2em 0 .6em;
  letter-spacing: -.018em;
}
h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin-top: 0; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; font-family: var(--font); font-weight: 650; }

p, ul, ol, table, blockquote { margin: 0 0 1.15em; }
ul, ol { padding-left: 1.4em; }
li { margin: .3em 0; }

blockquote {
  margin-left: 0; padding: .4em 0 .4em 1.3em;
  border-left: 4px solid var(--gold);
  color: var(--ink-soft); font-style: italic;
}

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

::selection { background: var(--gold); color: var(--teal-deep); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--teal-dark); color: var(--white); padding: .7rem 1.1rem;
}
.skip-link:focus { left: 0; }

.wrap { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; }

/* ==================== SCROLL PROGRESS BAR ==================== */

.scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 90;
  width: 100%; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, var(--teal), var(--gold), var(--accent));
  transform-origin: 0 50%; transform: scaleX(0);
}
.fx .scroll-progress {
  animation: shimmer-bar 3s ease-in-out infinite;
}
@keyframes shimmer-bar {
  0%, 100% { opacity: 1; }
  50% { opacity: .75; }
}

/* ==================== READING RAIL (left edge) ==================== */

.reading-rail {
  position: fixed; left: 0; top: 0; bottom: 0; z-index: 20;
  width: 3px; background: rgba(21, 33, 31, .05);
}
.reading-rail-fill {
  width: 100%; background: linear-gradient(to bottom, var(--teal), var(--gold));
  transition: height .1s linear; border-radius: 0 2px 2px 0;
  box-shadow: 0 0 8px rgba(31, 91, 85, .3);
}
@media (max-width: 60rem) { .reading-rail { display: none; } }

/* ==================== HEADER: glass floating bar ==================== */

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(253, 249, 243, .75);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  border-bottom: 1px solid rgba(221, 228, 225, .6);
  transition: box-shadow .4s ease, background-color .4s ease, border-color .4s ease;
}
.site-header.scrolled {
  box-shadow: 0 8px 32px rgba(16, 48, 44, .08);
  background: rgba(253, 249, 243, .92);
  border-bottom-color: rgba(221, 228, 225, .9);
}
/* flex-wrap has to be on the base rule, not only the desktop block. .site-nav is
   flex-basis: 100% with order: 3 so that it drops to its own row, but without
   wrap it stays on row one, gets squeezed to nothing, and the open menu list
   overflows off the right edge of a phone. */
.header-inner {
  display: flex; align-items: center; gap: 1rem;
  flex-wrap: wrap;
  min-height: 4.5rem;
}
/* flex-shrink: 0 because .site-nav is a flex item with flex-basis: 100% sitting
   in the same row, and with both items allowed to shrink the brand lost: its
   text overflowed and the Menu button, which is opaque and later in the paint
   order, drew over it. At 390px the row reads "iNtegra Counsell". */
.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; margin-right: auto; flex-shrink: 0; }
.brand img {
  width: 2.5rem; height: 2.5rem; object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(16, 48, 44, .2));
  transition: transform .5s var(--ease-spring);
}
.brand:hover img { transform: rotate(-8deg) scale(1.1); }
.brand-name {
  font-family: var(--serif); font-size: 1.25rem; font-weight: 600;
  color: var(--teal-dark); line-height: 1.1;
}
.brand-sub {
  display: block; font-family: var(--font); font-size: .7rem;
  font-weight: 500; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-soft);
}
.header-cta {
  display: inline-flex; align-items: center; gap: .45rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: var(--white);
  padding: .65rem 1.2rem; border-radius: 999px;
  font-weight: 650; font-size: .95rem; text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(192, 108, 60, .3);
  transition: transform .3s var(--ease-spring), box-shadow .3s ease, filter .25s ease;
}
.header-cta:hover {
  color: var(--white); transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 28px rgba(192, 108, 60, .4);
  filter: brightness(1.06);
}
@media (max-width: 40rem) {
  .header-cta, .brand-sub { display: none; }
  .brand-name { font-size: 1.05rem; }
}

/* ==================== NAV (reuses existing structure) ==================== */

.site-nav { flex-basis: 100%; order: 3; }
.nav-toggle-btn {
  display: block; width: 100%;
  background: var(--teal-light); color: var(--teal-dark);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .6rem .9rem; font: inherit; font-weight: 600; text-align: left;
  transition: background-color .25s ease;
}
.nav-toggle-btn:hover { background: #d8e7e2; }
.nav-list { display: block; list-style: none; margin: .5rem 0 0; padding: 0; }
.js .site-nav:not([data-open="true"]) .nav-list { display: none; }
.js .site-nav[data-open="true"] .nav-list {
  max-height: calc(100vh - 11rem); overflow: auto;
  overscroll-behavior: contain;
}
.nav-group { border-bottom: 1px solid var(--line); }
.nav-group > summary {
  cursor: pointer; list-style: none;
  padding: .75rem .25rem; font-weight: 600; color: var(--teal-dark);
  display: flex; justify-content: space-between; align-items: center;
}
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary::after { content: "+"; color: var(--ink-soft); font-weight: 400; transition: transform .3s var(--ease-spring); }
.nav-group[open] > summary::after { content: "\2212"; transform: rotate(180deg); }
.nav-group ul { list-style: none; margin: 0 0 .5rem; padding: 0 0 0 .6rem; }
.nav-group ul a {
  display: block; padding: .4rem .25rem;
  color: var(--ink-soft); text-decoration: none; font-size: .95rem;
  border-left: 2px solid var(--line);
  transition: color .2s ease, border-color .2s ease, padding-left .25s var(--ease-out);
}
.nav-group ul a:hover { color: var(--accent-dark); border-left-color: var(--accent); padding-left: .55rem; }
.nav-group ul a[aria-current="page"] { color: var(--teal-dark); font-weight: 650; border-left-color: var(--teal); }
.nav-group[data-on="true"] > summary { color: var(--accent-dark); box-shadow: inset 0 -2px 0 var(--accent); }

@media (min-width: 60rem) {
  .header-inner { flex-wrap: wrap; }
  .nav-toggle-btn { display: none; }
  .site-nav { order: 0; flex-basis: 100%; }
  .nav-list { display: flex !important; flex-wrap: wrap; gap: .1rem; justify-content: center; }
  .nav-group { position: relative; border: 0; padding: 0; }
  .nav-group > summary { padding: .9rem .7rem; border-radius: 8px; }
  .nav-group > summary:hover { background: var(--teal-light); }
  .nav-group > summary::after { content: ""; }
  .nav-group > ul { transform-origin: 50% 0; }
  .nav-group:hover > ul, .nav-group:focus-within > ul, .nav-group[open] > ul {
    display: block; position: absolute; left: 0; top: 100%;
    min-width: 20rem; max-width: 26rem; max-height: 70vh; overflow: auto;
    background: var(--white);
    border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-lift); padding: .5rem; z-index: 40;
    animation: nav-drop .35s var(--ease-out);
  }
  @keyframes nav-drop {
    from { opacity: 0; transform: perspective(700px) rotateX(-12deg) translateY(-8px); }
    to   { opacity: 1; transform: perspective(700px) rotateX(0) translateY(0); }
  }
  .nav-group ul { padding: 0; margin: 0; }
  .nav-group:nth-last-child(-n+3) > ul { left: auto; right: 0; }
  .nav-group ul a { padding: .5rem .7rem; border-left: 0; border-radius: 8px; }
  .nav-group ul a:hover { background: var(--teal-light); border-left: 0; padding-left: .7rem; }
}

/* ==================== HERO: animated mesh gradient stage ==================== */

.hero {
  position: relative; overflow: hidden;
  min-height: 92vh;
  display: flex; align-items: center;
  padding: 4rem 0 3rem;
  color: #e9f2ef;
  background:
    radial-gradient(50rem 30rem at 15% 10%, rgba(31, 91, 85, .55), transparent 60%),
    radial-gradient(40rem 28rem at 85% 80%, rgba(192, 108, 60, .25), transparent 58%),
    radial-gradient(35rem 22rem at 50% 50%, rgba(217, 160, 91, .12), transparent 65%),
    linear-gradient(155deg, var(--teal-darker) 0%, var(--teal-deep) 30%, var(--teal-dark) 65%, #14423c 100%);
  border-bottom: 1px solid rgba(217, 160, 91, .2);
}

/* animated mesh: the gradient positions drift slowly */
.fx .hero {
  background-size: 200% 200%, 200% 200%, 200% 200%, 100% 100%;
  animation: mesh-shift 20s ease-in-out infinite;
}
@keyframes mesh-shift {
  0%, 100% { background-position: 0% 0%, 100% 100%, 50% 50%, 0 0; }
  25%  { background-position: 30% 20%, 70% 80%, 60% 40%, 0 0; }
  50%  { background-position: 60% 40%, 40% 60%, 40% 60%, 0 0; }
  75%  { background-position: 30% 70%, 70% 30%, 55% 45%, 0 0; }
}

/* faint blueprint grid over the gradient */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(233, 242, 239, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233, 242, 239, .04) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(70% 90% at 50% 40%, #000 30%, transparent 100%);
  mask-image: radial-gradient(70% 90% at 50% 40%, #000 30%, transparent 100%);
}
.fx .hero::before {
  animation: grid-drift 22s ease-in-out infinite;
}
@keyframes grid-drift {
  0%, 100% { background-position: 0 0, 0 0; }
  50% { background-position: -24px 24px, -24px 24px; }
}

/* pointer glow that follows the cursor; JS sets --gx/--gy */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(28rem 20rem at var(--gx, 70%) var(--gy, 20%), rgba(217, 160, 91, .14), transparent 65%);
  transition: background .15s linear;
}

/* floating ambient orbs */
.hero-bg { position: absolute; inset: 0; pointer-events: none; perspective: 1000px; }
.orb {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .45), rgba(217, 160, 91, .2) 42%, rgba(192, 108, 60, .06) 70%);
  box-shadow: inset -8px -10px 24px rgba(10, 35, 32, .3), 0 18px 40px rgba(10, 35, 32, .25);
  animation: orb-float 14s ease-in-out infinite;
  animation-delay: var(--d, 0s);
  will-change: transform;
}
.orb-1 { width: 6rem; height: 6rem; right: 10%; top: 10%; --d: 0s; }
.orb-2 { width: 3rem; height: 3rem; right: 32%; bottom: 12%; --d: -4s; animation-duration: 11s; }
.orb-3 { width: 4rem; height: 4rem; left: 5%; top: 16%; --d: -7s; animation-duration: 16s;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .3), rgba(31, 91, 85, .35) 45%, rgba(16, 48, 44, .1) 72%); }
.orb-4 { width: 1.8rem; height: 1.8rem; left: 20%; bottom: 18%; --d: -2s; animation-duration: 9s; }
.orb-5 { width: 2.2rem; height: 2.2rem; right: 50%; top: 8%; --d: -5s; animation-duration: 12s;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .25), rgba(192, 108, 60, .15) 50%, transparent 70%); }
@keyframes orb-float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(18px, -24px, 70px) scale(1.08); }
  66%      { transform: translate3d(-14px, 12px, -50px) scale(.94); }
}

/* spinning dashed rings behind the scene card */
.hero-rings { position: absolute; inset: 0; pointer-events: none; }
.hero-rings span {
  position: absolute; border-radius: 50%;
  border: 1.5px dashed rgba(217, 160, 91, .3);
  animation: ring-spin 30s linear infinite;
}
.hero-rings span:nth-child(1) { width: 16rem; height: 16rem; right: 8%; top: 50%; margin-top: -8rem; }
.hero-rings span:nth-child(2) { width: 22rem; height: 22rem; right: 5%; top: 50%; margin-top: -11rem; animation-direction: reverse; animation-duration: 44s; border-color: rgba(233, 242, 239, .14); }
.hero-rings span:nth-child(3) { width: 10rem; height: 10rem; right: 14%; top: 50%; margin-top: -5rem; animation-duration: 20s; border-style: dotted; border-color: rgba(192, 108, 60, .2); }
@keyframes ring-spin { to { transform: rotate(360deg); } }

.hero .wrap { position: relative; z-index: 2; width: 100%; }

/* hero layout: two columns */
.hero-grid {
  display: grid; gap: 2.5rem; align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 52rem) {
  .hero-grid { grid-template-columns: 1.1fr .9fr; gap: 3rem; }
}
/* A page with no illustration still gets the full measure for its headline. */
.hero-grid.hero-one { grid-template-columns: 1fr; }

/* hero badge */
.hero-badge {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem .85rem; border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(217, 160, 91, .28);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: .75rem; font-weight: 600; color: var(--gold);
  letter-spacing: .04em; text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.fx .hero-badge { animation: badge-float 4s ease-in-out infinite; }
.badge-dot {
  width: .4rem; height: .4rem; border-radius: 50%;
  background: var(--gold);
}
.fx .badge-dot { animation: pulse-dot 2s ease-in-out infinite; }
@keyframes badge-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes pulse-dot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: .6; } }

/* breadcrumbs */
.breadcrumbs { font-size: .82rem; color: #a9c4bf; margin-bottom: 1rem; }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.breadcrumbs li::after { content: "/"; margin-left: .35rem; color: rgba(233, 242, 239, .3); }
.breadcrumbs li:last-child::after { content: ""; }
.breadcrumbs a { color: #cfe0dd; text-decoration: none; }
.breadcrumbs a:hover { color: var(--gold); text-decoration: underline; }

/* hero h1: gradient text, word-by-word rise */
.hero h1 {
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  line-height: 1.12;
  margin: 0 0 .4rem;
  color: var(--white);
  letter-spacing: -.025em;
  text-shadow: 0 2px 30px rgba(6, 20, 18, .4);
}
/* The start state lives on the .fx rule, not the bare one: fx.js adds .hw
   spans and .fx under the same condition, but a rule that cannot hide the
   headline without a class the script owns is safe even if that order ever
   changes. */
.hero h1 .hw { display: inline-block; }
.fx .hero h1 .hw {
  opacity: 0;
  transform: translateY(28px) rotate(2deg);
  animation: word-rise .6s var(--ease-out) forwards;
  animation-delay: calc(.06s * var(--i, 0));
}
@keyframes word-rise {
  to { opacity: 1; transform: translateY(0) rotate(0); }
}

/* gradient accent text inside h1 */
.hero h1 .accent-text {
  background: linear-gradient(135deg, var(--gold), var(--accent-light), var(--gold));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 200%;
}
.fx .hero h1 .accent-text {
  animation: gradient-flow 6s ease-in-out infinite;
}
@keyframes gradient-flow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* gold rule that draws itself under h1 */
.hero-rule {
  display: block; width: 5.5rem; height: 3px; border-radius: 3px; margin: 1.2rem 0;
  background: linear-gradient(90deg, var(--gold), var(--accent));
  transform-origin: 0 50%;
}
.fx .hero-rule { transform: scaleX(0); animation: rule-draw 1s var(--ease-out) .8s forwards; }
@keyframes rule-draw { to { transform: scaleX(1); } }

.hero-lede {
  font-size: 1.15rem; line-height: 1.6; color: #c2d5d0;
  max-width: 32rem; margin: 0 0 1.8rem;
}
/* The global link colour is a dark teal. On the hero stage it is invisible, and
   on the contact page that link is the phone number. */
.hero-copy a { color: var(--gold-light); text-decoration-color: rgba(232, 193, 132, .45); }
.hero-copy a:hover { color: var(--white); }

/* hero CTA buttons */
.hero-cta-row {
  display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .5rem;
}

/* ==================== BUTTONS ==================== */

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .85rem 1.5rem; border-radius: 999px;
  font-weight: 650; font-size: 1rem; text-decoration: none; border: 1px solid transparent;
  cursor: pointer; position: relative; overflow: hidden;
  transition: transform .3s var(--ease-spring), box-shadow .3s ease, filter .25s ease;
  will-change: transform;
}
.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: var(--white);
  box-shadow: 0 8px 24px rgba(192, 108, 60, .35);
}
.btn-primary:hover {
  color: var(--white); transform: translateY(-3px) scale(1.02);
  box-shadow: 0 14px 36px rgba(192, 108, 60, .45);
  filter: brightness(1.06);
}
/* shimmer sweep on hover */
.btn-primary::after {
  content: ""; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent);
  transition: left .6s ease;
}
.btn-primary:hover::after { left: 120%; }

.btn-secondary {
  background: rgba(255, 255, 255, .08); color: var(--white);
  border-color: rgba(255, 255, 255, .35);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.btn-secondary:hover {
  border-color: var(--gold); color: var(--gold);
  transform: translateY(-3px);
}
.btn-ghost {
  background: var(--white); color: var(--teal-dark); border-color: var(--line);
}
.btn-ghost:hover {
  border-color: var(--teal); color: var(--teal-dark);
  transform: translateY(-2px); box-shadow: var(--shadow);
}

/* ==================== HERO ART: floating 3D card ==================== */

.hero-art { position: relative; }
.scene-frame {
  position: relative; perspective: 1000px;
  transform: translateZ(0);
}
.scene-art {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius);
  transform: translateZ(40px);
  box-shadow: 0 24px 60px rgba(6, 20, 18, .4), 0 0 0 1px rgba(217, 160, 91, .15);
  transition: transform .4s var(--ease-out), box-shadow .4s ease;
}
.fx .scene-art {
  animation: art-enter 1.5s var(--ease-out) forwards, art-breathe 10s ease-in-out 1.5s infinite;
  transform-origin: 60% 40%;
}
@keyframes art-enter {
  0%   { opacity: 0; transform: translateZ(40px) scale(.9) rotateY(-10deg); }
  60%  { opacity: 1; transform: translateZ(40px) scale(1.03) rotateY(3deg); }
  100% { opacity: 1; transform: translateZ(40px) scale(1) rotateY(0); }
}
@keyframes art-breathe {
  0%, 100% { scale: 1; }
  50%      { scale: 1.04; }
}
.scene-art:hover {
  box-shadow: 0 32px 80px rgba(6, 20, 18, .5), 0 0 40px rgba(217, 160, 91, .12);
  transform: translateZ(60px) scale(1.02);
}

/* clip-path reveal the first time the art is seen */
.fx .scene-frame:not(.seen) .scene-art {
  -webkit-clip-path: inset(0 100% 0 0 round var(--radius));
  clip-path: inset(0 100% 0 0 round var(--radius));
}
.fx .scene-frame.seen .scene-art {
  -webkit-clip-path: inset(0 0 0 0 round var(--radius));
  clip-path: inset(0 0 0 0 round var(--radius));
  transition: clip-path 1.2s var(--ease-out), -webkit-clip-path 1.2s var(--ease-out);
}

/* floating accent dots on the scene card corner */
.hero-dots { position: absolute; right: -.55rem; top: -.55rem; display: flex; gap: .3rem; z-index: 3; }
.hero-dots i {
  width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 4px 10px rgba(6, 20, 18, .4);
}
.fx .hero-dots i { animation: dot-bob 3.2s ease-in-out infinite; }
.hero-dots i:nth-child(2) { background: var(--accent); animation-delay: .4s; }
.hero-dots i:nth-child(3) { background: #e9f2ef; animation-delay: .8s; }
@keyframes dot-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* scroll indicator */
.scroll-hint {
  position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  color: rgba(233, 242, 239, .5); font-size: .75rem; letter-spacing: .08em;
  text-transform: uppercase; pointer-events: none; z-index: 3;
}
.scroll-hint .mouse {
  width: 1.5rem; height: 2.4rem; border: 2px solid rgba(233, 242, 239, .3);
  border-radius: 999px; position: relative;
}
.scroll-hint .mouse::after {
  content: ""; position: absolute; left: 50%; top: .4rem;
  width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px;
  background: var(--gold);
}
.fx .scroll-hint .mouse::after { animation: scroll-dot 2s ease-in-out infinite; }
@keyframes scroll-dot {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(8px); opacity: .3; }
}
@media (max-width: 52rem) { .scroll-hint { display: none; } }

/* ==================== TRUST STRIP ==================== */

.trust-strip {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  padding: 1.8rem 0;
}
.trust-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
}
@media (min-width: 48rem) {
  .trust-grid { grid-template-columns: repeat(4, 1fr); }
}
.trust-item {
  display: flex; align-items: center; gap: .7rem;
  font-size: .88rem; color: var(--ink-soft);
}
.trust-icon {
  flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--teal-light), #eef5f2);
  font-size: 1.1rem;
}
.trust-item strong { display: block; font-family: var(--serif); color: var(--teal-dark); font-size: 1rem; }

/* ==================== SECTION: STATS BAND ==================== */

.section { padding: 4rem 0; }
.section-tight { padding: 3rem 0; }

.section-head {
  text-align: center; max-width: 40rem; margin: 0 auto 2.5rem;
}
.section-head h2 {
  margin-top: 0;
}
.section-head p {
  color: var(--ink-soft); font-size: 1.05rem; margin-bottom: 0;
}

.stats-grid {
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 44rem) {
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
}
.stat-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem 1.3rem;
  text-align: center;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease-out), box-shadow .35s ease, border-color .35s ease;
}
.stat-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--teal), var(--gold), var(--accent));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .5s var(--ease-out);
}
.stat-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
  border-color: var(--teal-light);
}
.stat-card:hover::before { transform: scaleX(1); }
.stat-card b {
  display: block; font-family: var(--serif); font-weight: 600;
  font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.1;
  color: var(--teal-dark); font-variant-numeric: tabular-nums;
}
.stat-card b em { font-style: normal; color: var(--accent); }
.stat-card span {
  display: block; margin-top: .4rem; font-size: .85rem; color: var(--ink-soft);
  line-height: 1.4;
}

/* ==================== SERVICES GRID ==================== */

.services-grid {
  display: grid; gap: 1.3rem;
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 60rem) {
  .services-grid { grid-template-columns: repeat(3, 1fr); }
}
.service-card {
  display: block; background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem;
  text-decoration: none; color: var(--ink);
  box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
  transform: perspective(700px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) translateY(var(--tlift, 0));
  transition: transform .15s linear, box-shadow .35s ease, border-color .35s ease;
}
.service-card:hover {
  --tlift: -6px;
  border-color: var(--teal); color: var(--ink);
  box-shadow: var(--shadow-lift), 0 0 0 1px rgba(31, 91, 85, .12);
}
/* gradient overlay on hover */
.service-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(135deg, rgba(217, 160, 91, .06), rgba(31, 91, 85, .04));
  opacity: 0; transition: opacity .35s ease; pointer-events: none;
}
.service-card:hover::before { opacity: 1; }
/* cursor sheen */
.service-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(10rem 8rem at var(--mx, 50%) var(--my, 0%), rgba(217, 160, 91, .12), transparent 62%);
  opacity: 0; transition: opacity .3s ease;
}
.service-card:hover::after { opacity: 1; }
.service-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 12px;
  background: linear-gradient(135deg, var(--teal), var(--teal-dark));
  color: var(--gold-light); font-size: 1.3rem; margin-bottom: 1rem;
  box-shadow: 0 6px 16px rgba(16, 48, 44, .2);
  transition: transform .4s var(--ease-spring);
}
.service-card:hover .service-icon { transform: scale(1.1) rotate(-5deg); }
.service-card h3 { margin: 0 0 .4rem; font-size: 1.15rem; padding-left: 0; }
.service-card h3::before { content: none; }
.service-card p { margin: 0 0 .8rem; font-size: .92rem; color: var(--ink-soft); }
.service-arrow {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .88rem; font-weight: 600; color: var(--accent-dark);
  transition: gap .25s ease, color .25s ease;
}
.service-card:hover .service-arrow { gap: .6rem; color: var(--accent); }

/* ==================== PROCESS / TIMELINE ==================== */

/* .timeline-n is the marker; the ol's own decimal one has to go. */
.timeline {
  position: relative; max-width: 50rem; margin: 0 auto;
  padding-left: 0; list-style: none;
}
/* vertical line */
.timeline::before {
  content: ""; position: absolute; left: 1.5rem; top: 1rem; bottom: 1rem;
  width: 3px; border-radius: 3px;
  background: linear-gradient(to bottom, var(--teal), var(--gold), var(--accent));
  opacity: .3;
}
.fx .timeline::before { transform: scaleY(0); transform-origin: top; animation: none; }
.fx .timeline.revealed::before { animation: line-grow 1.2s var(--ease-out) forwards; }
@keyframes line-grow { to { transform: scaleY(1); opacity: .3; } }

.timeline-step {
  position: relative; padding-left: 4rem; margin-bottom: 2rem;
}
.timeline-step:last-child { margin-bottom: 0; }
.timeline-n {
  position: absolute; left: 0; top: 0;
  width: 3rem; height: 3rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.1rem; color: var(--white);
  background: linear-gradient(135deg, var(--teal), var(--teal-dark));
  box-shadow: 0 8px 20px rgba(16, 48, 44, .22);
  border: 3px solid var(--cream);
  z-index: 1;
}
.fx .timeline-n { animation: step-pop 5s ease-in-out infinite; }
.timeline-step:nth-child(2) .timeline-n { animation-delay: .6s; }
.timeline-step:nth-child(3) .timeline-n { animation-delay: 1.2s; }
@keyframes step-pop {
  0%, 60%, 100% { transform: scale(1); }
  70% { transform: scale(1.12); }
  78% { transform: scale(1); }
}
.timeline-step h3 { margin: .3rem 0 .3rem; font-size: 1.15rem; }
.timeline-step p { margin: 0; color: var(--ink-soft); font-size: .95rem; }

/* ==================== ABOUT SNIPPET ==================== */

.about-grid {
  display: grid; gap: 2.5rem; align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
  .about-grid { grid-template-columns: 1fr 1fr; }
}
.about-text h2 { margin-top: 0; }
.about-text p { color: var(--ink-soft); }
.about-art {
  position: relative;
}
.about-art img {
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
}
.about-art .deco {
  position: absolute; right: -1rem; bottom: -1rem;
  width: 6rem; height: 6rem; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--gold), var(--accent));
  z-index: -1; opacity: .8;
}

/* ==================== FAQ ==================== */

.faq-list { max-width: var(--max); margin: 0 auto; }
.faq-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: .8rem;
  overflow: hidden;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.faq-item[open] { border-color: var(--teal); box-shadow: var(--shadow); }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 1.1rem 1.3rem;
  font-weight: 650; color: var(--teal-dark); font-size: 1.05rem;
  display: flex; justify-content: space-between; align-items: center; gap: .8rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--teal-light); color: var(--teal-dark);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 400; font-size: 1.2rem;
  transition: transform .4s var(--ease-spring), background-color .3s ease, color .3s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); background: var(--gold); color: var(--teal-deep); }
.faq-a { padding: 0 1.3rem 1.2rem; color: var(--ink-soft); }
.faq-a p:last-child { margin-bottom: 0; }
.faq-item[open] .faq-a { animation: faq-open .4s var(--ease-out); }
@keyframes faq-open { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ==================== CTA SECTION ==================== */

.cta-section {
  position: relative; overflow: hidden;
  padding: 4.5rem 0;
  background:
    radial-gradient(40rem 24rem at 20% 80%, rgba(31, 91, 85, .5), transparent 60%),
    radial-gradient(35rem 20rem at 80% 20%, rgba(217, 160, 91, .2), transparent 60%),
    linear-gradient(160deg, var(--teal-deep), var(--teal-dark) 50%, #14423c 100%);
  color: #e9f2ef;
  text-align: center;
}
.cta-section::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(233, 242, 239, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233, 242, 239, .04) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(70% 90% at 50% 50%, #000 30%, transparent 100%);
  mask-image: radial-gradient(70% 90% at 50% 50%, #000 30%, transparent 100%);
}
.cta-section .wrap { position: relative; z-index: 2; }
.cta-section h2 {
  color: var(--white); margin-top: 0;
}
.cta-section h2 .accent-text {
  background: linear-gradient(135deg, var(--gold), var(--accent-light), var(--gold));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cta-section p {
  color: #c2d5d0; font-size: 1.1rem; max-width: 36rem; margin: 0 auto 2rem;
}
.cta-section .btn-row {
  justify-content: center;
}

/* floating shapes in CTA */
.cta-shape {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .15), transparent 70%);
}
.cta-shape-1 { width: 8rem; height: 8rem; left: 8%; top: 20%; }
.cta-shape-2 { width: 4rem; height: 4rem; right: 10%; bottom: 15%; }

/* ==================== ARTICLE BODY ==================== */

.article { max-width: var(--max); margin: 0 auto; padding: 3rem 1.5rem 1rem; }
.article > *:first-child { margin-top: 0; }
.article > p:first-of-type { font-size: 1.14rem; color: var(--ink-soft); }
.article img { border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.article .aligncenter, .article img[class*="aligncenter"] { display: block; margin: 1.5rem auto; }
.article figure { margin: 1.8rem 0; }
.article figcaption { font-size: .86rem; color: var(--ink-soft); text-align: center; margin-top: .5rem; }
@media (min-width: 48rem) {
  .article .alignleft { float: left; margin: .3rem 1.4rem 1rem 0; width: auto; max-width: 45%; }
  .article .alignright { float: right; margin: .3rem 0 1rem 1.4rem; width: auto; max-width: 45%; }
  .cf::after { content: ""; display: table; clear: both; }
}
.article h2 { position: relative; padding-left: 1.05rem; }
.article h2::before {
  content: ""; position: absolute; left: 0; top: .32em; bottom: .32em;
  width: 4px; border-radius: 4px;
  background: linear-gradient(180deg, var(--gold), var(--accent));
}

/* ==================== CALLOUT ==================== */

.callout {
  background: linear-gradient(150deg, var(--sand), var(--cream));
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius); padding: 1.6rem 1.7rem; margin: 2.2rem 0;
  box-shadow: var(--shadow);
  transition: box-shadow .3s ease;
}
.callout:hover { box-shadow: var(--shadow-lift); }
.callout h2, .callout h3 { margin-top: 0; font-size: 1.2rem; padding-left: 0; }
.callout h2::before, .callout h3::before { content: none; }
.callout p:last-child { margin-bottom: 0; }

/* ==================== VIDEO SECTION ==================== */

.videos { margin-top: 2.8rem; }
.video-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .video-grid { grid-template-columns: 1fr 1fr; } }

/* The card is the video's own poster, held in images/youtube/ and pulled at
   build time, with a scrim laid over the bottom of it so the title stays
   readable whatever the artwork looks like. White on the darkest band measures
   about 13:1. Without an entry in the manifest the gradient panel from before is
   what shows, so a missing download reads as a plain card rather than a broken
   image. */
.yt-facade {
  position: relative; display: flex; align-items: flex-end;
  width: 100%; aspect-ratio: 16 / 9; margin: 1.8rem 0;
  padding: 1rem; cursor: pointer; color: var(--white); text-align: left;
  background: linear-gradient(150deg, var(--teal-dark), var(--teal-deep));
  border: 0; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .3s var(--ease-out), box-shadow .3s ease;
}
.yt-facade:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.yt-facade:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.yt-thumb {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
}
.yt-scrim {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to top,
    rgba(6, 26, 23, .93) 0%, rgba(6, 26, 23, .62) 34%, rgba(6, 26, 23, 0) 68%);
}
.yt-facade::before {
  content: ''; position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  z-index: 3; width: 3.6rem; height: 3.6rem; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  box-shadow: 0 8px 22px rgba(192, 108, 60, .5);
  transition: transform .35s var(--ease-spring);
}
.yt-facade:hover::before { transform: translate(-50%, -50%) scale(1.15); }
.yt-facade::after {
  content: ''; position: absolute; left: 50%; top: 42%; transform: translate(-38%, -50%);
  z-index: 3; border-style: solid; border-width: 10px 0 10px 17px;
  border-color: transparent transparent transparent var(--white);
}
.yt-label { font-size: .9rem; font-weight: 650; line-height: 1.35; position: relative; z-index: 3; }
.yt-dur {
  position: absolute; right: .7rem; top: .7rem; z-index: 3;
  padding: .18rem .5rem; border-radius: 999px;
  background: rgba(6, 26, 23, .8); color: var(--white);
  font-size: .72rem; font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.channel-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1rem; font-size: .92rem; }

/* ==================== INSTAGRAM ==================== */

.ig { margin-top: 3rem; }
.ig-grid { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
.ig-tile {
  position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: var(--radius-sm); background: var(--teal-light);
  box-shadow: var(--shadow);
}
.ig-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
.ig-tile:hover img { transform: scale(1.1) rotate(1deg); }
.ig-tile figcaption {
  position: absolute; inset: auto 0 0; padding: .5rem .6rem; font-size: .74rem; line-height: 1.35;
  color: #fff; background: linear-gradient(transparent, rgba(16, 48, 44, .88));
  opacity: 0; transition: opacity .3s ease;
}
.ig-tile:hover figcaption, .ig-tile:focus-visible figcaption { opacity: 1; }
.ig-empty { color: var(--ink-soft); font-size: .92rem; }

/* ==================== FOOTER ==================== */

.site-footer {
  background: linear-gradient(170deg, var(--teal-dark), var(--teal-deep));
  color: #cfe0dd; margin-top: 5rem; padding: 3rem 0 5.5rem; font-size: .94rem;
  border-top: 3px solid var(--gold);
  position: relative; overflow: hidden;
}
.site-footer::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(30rem 20rem at 20% 110%, rgba(31, 91, 85, .4), transparent 70%),
              radial-gradient(25rem 18rem at 80% -10%, rgba(217, 160, 91, .08), transparent 60%);
}
.site-footer a { color: #eaf3f1; }
.site-footer a:hover { color: var(--gold); }
.site-footer h2, .site-footer h3 {
  color: var(--white); font-family: var(--font); font-size: .82rem;
  letter-spacing: .07em; text-transform: uppercase; margin: 0 0 .8rem;
}
.footer-grid { display: grid; gap: 1.8rem; grid-template-columns: 1fr; position: relative; z-index: 1; }
@media (min-width: 34rem) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 48rem) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; } }
@media (min-width: 60rem) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr .9fr; } }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: .3rem 0; }
.footer-cta {
  margin: 1.8rem 0 0; padding: 1rem 1.15rem; position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: center;
  border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--radius);
  background: rgba(6, 26, 23, .3);
}
.footer-cta a {
  font-weight: 700; text-decoration: none; color: var(--white);
  border-bottom: 1px solid var(--gold); padding-bottom: 1px;
}
.footer-cta a:hover { color: var(--gold); }
.footer-cta a::after { content: " \2192"; color: var(--gold); }
.footer-note {
  margin-top: 2.2rem; padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: .84rem; color: #a9c4bf; position: relative; z-index: 1;
}

/* ==================== MOBILE BAR ==================== */

.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line); border-top: 1px solid var(--line);
}
.mobile-bar a {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .95rem .5rem; text-decoration: none; font-weight: 700; font-size: .95rem;
}
.mobile-bar .call { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: var(--white); }
.mobile-bar .wa { background: #128c7e; color: var(--white); }
@media (min-width: 60rem) { .mobile-bar { display: none; } .site-footer { padding-bottom: 3rem; } }
/* On a page with no footer the bar would sit over the last block of text, so
   the body keeps the clearance the footer's bottom padding used to give. */
body.no-footer { padding-bottom: 5.5rem; }
@media (min-width: 60rem) { body.no-footer { padding-bottom: 3rem; } }

/* ==================== WHATSAPP FAB ==================== */

.wa-fab {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 60;
  display: none; align-items: center; gap: .55rem;
  padding: .8rem; border-radius: 999px; text-decoration: none;
  background: #25d366; color: #fff; box-shadow: 0 8px 24px rgba(20, 60, 40, .3);
  transition: transform .3s var(--ease-spring), background-color .25s ease;
}
.wa-fab:hover { background: #1ebe57; color: #fff; transform: translateY(-3px); }
.wa-fab:focus-visible { outline: 3px solid var(--teal-dark); outline-offset: 3px; }
.wa-fab .wa-label {
  max-width: 0; overflow: hidden; white-space: nowrap; font-weight: 700; font-size: .95rem;
  transition: max-width .4s var(--ease-out);
}
.wa-fab:hover .wa-label, .wa-fab:focus-visible .wa-label { max-width: 13rem; }
.wa-fab::after {
  content: ''; position: absolute; inset: 0; border-radius: 999px;
  background: #25d366; z-index: -1; animation: wa-pulse 2.8s ease-out infinite;
}
@keyframes wa-pulse { 0% { transform: scale(1); opacity: .5; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
@media (min-width: 60rem) { .wa-fab { display: inline-flex; } }
.wa-ico {
  --wa: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M17.472%2014.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94%201.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198%200-.52.074-.792.372-.272.297-1.04%201.016-1.04%202.479%200%201.462%201.065%202.875%201.213%203.074.149.198%202.096%203.2%205.077%204.487.709.306%201.262.489%201.694.625.712.227%201.36.195%201.871.118.571-.085%201.758-.719%202.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421%207.403h-.004a9.87%209.87%200%2001-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86%209.86%200%2001-1.51-5.26c.001-5.45%204.436-9.884%209.888-9.884%202.64%200%205.122%201.03%206.988%202.898a9.825%209.825%200%20012.893%206.994c-.003%205.45-4.437%209.884-9.885%209.884m8.413-18.297A11.815%2011.815%200%200012.05%200C5.495%200%20.16%205.335.157%2011.892c0%202.096.547%204.142%201.588%205.945L.057%2024l6.305-1.654a11.882%2011.882%200%20005.683%201.448h.005c6.554%200%2011.89-5.335%2011.893-11.893a11.821%2011.821%200%2000-3.48-8.413Z%22/%3E%3C/svg%3E");
  display: inline-block; flex: none; width: 27px; height: 27px; background: currentColor;
  -webkit-mask: var(--wa) center / contain no-repeat; mask: var(--wa) center / contain no-repeat;
}

/* ==================== STICKY CTA ==================== */

/* redesign-fx.js builds this element only after the hero has scrolled out of
   the viewport, so its existence is already the no-JS gate. It sat on
   display:none with nothing ever overriding it, which is why no page on the
   rebuilt site ever showed it. Below 60rem the bottom edge belongs to
   .mobile-bar, so the pill keeps to desktop. */
.sticky-cta {
  display: none; position: fixed; bottom: 4rem; left: 50%; transform: translateX(-50%);
  z-index: 55; white-space: nowrap;
  background: var(--teal-dark); color: #eaf3f1;
  border: 1px solid rgba(217, 160, 91, .4); border-radius: 999px;
  padding: .65rem 1.2rem; font-size: .9rem; font-weight: 600;
  box-shadow: 0 8px 30px rgba(6, 20, 18, .35);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  text-decoration: none;
}
@media (min-width: 60rem) { .sticky-cta { display: block; } }
.sticky-cta { animation: cta-slide-up .5s var(--ease-out); }
.sticky-cta:hover { color: var(--gold); border-color: var(--gold); }
@keyframes cta-slide-up { from { transform: translateX(-50%) translateY(100%); opacity: 0; } to { transform: translateX(-50%) translateY(0); opacity: 1; } }

/* ==================== SCROLL REVEALS ==================== */

.reveals-on [data-reveal] {
  opacity: 0;
  transform: perspective(1000px) rotateX(6deg) translateY(28px);
  transform-origin: 50% 0;
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.reveals-on [data-reveal].in { opacity: 1; transform: none; }
.reveals-on [data-reveal="fade-up"] {
  transform: translateY(24px);
}
.reveals-on [data-reveal="fade-up"].in { transform: none; }
.reveals-on [data-reveal="clip"] {
  -webkit-clip-path: inset(0 0 100% 0); clip-path: inset(0 0 100% 0);
}
.reveals-on [data-reveal="clip"].in {
  -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0);
  transition: clip-path 1s var(--ease-out), -webkit-clip-path 1s var(--ease-out);
}
/* stagger children */
.reveals-on [data-stagger] > * {
  opacity: 0; transform: translateY(20px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.reveals-on [data-stagger].in > * { opacity: 1; transform: none; }
.reveals-on [data-stagger].in > *:nth-child(1) { transition-delay: 0s; }
.reveals-on [data-stagger].in > *:nth-child(2) { transition-delay: .08s; }
.reveals-on [data-stagger].in > *:nth-child(3) { transition-delay: .16s; }
.reveals-on [data-stagger].in > *:nth-child(4) { transition-delay: .24s; }
.reveals-on [data-stagger].in > *:nth-child(5) { transition-delay: .32s; }
.reveals-on [data-stagger].in > *:nth-child(6) { transition-delay: .4s; }

/* h2 slide-in */
.reveals-on .section-head h2[data-reveal].in,
.reveals-on h2[data-reveal].in {
  animation: h2-slide .7s var(--ease-out) both;
}
@keyframes h2-slide {
  0% { opacity: 0; transform: perspective(600px) rotateY(-10deg) translateX(-20px); }
  100% { opacity: 1; transform: perspective(600px) rotateY(0) translateX(0); }
}

/* stat flip-in */
.reveals-on .stats-grid .stat-card[data-reveal].in { animation: stat-flip .6s var(--ease-out) both; }
@keyframes stat-flip {
  0% { opacity: 0; transform: perspective(600px) rotateX(-25deg) translateY(20px); }
  100% { opacity: 1; transform: perspective(600px) rotateX(0) translateY(0); }
}
.reveals-on .stats-grid .stat-card:nth-child(1)[data-reveal].in { animation-delay: 0s; }
.reveals-on .stats-grid .stat-card:nth-child(2)[data-reveal].in { animation-delay: .1s; }
.reveals-on .stats-grid .stat-card:nth-child(3)[data-reveal].in { animation-delay: .2s; }
.reveals-on .stats-grid .stat-card:nth-child(4)[data-reveal].in { animation-delay: .3s; }

/* ==================== ENHANCED SCROLLBAR ==================== */

@media (min-width: 60rem) {
  ::-webkit-scrollbar { width: 7px; }
  ::-webkit-scrollbar-track { background: var(--sand); }
  ::-webkit-scrollbar-thumb { background: var(--teal); border-radius: 4px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--teal-dark); }
}

/* ==================== PRINT ==================== */

@media print {
  .site-header, .site-nav, .mobile-bar, .enquiry, .site-footer, .wa-fab,
  .videos, .ig, .hero-bg, .hero-rings, .scroll-progress, .hero-dots,
  .scroll-hint, .sticky-cta, .reading-rail, .cta-shape { display: none; }
  body { font-size: 11pt; background: white; }
  a { color: inherit; text-decoration: none; }
  .hero { background: none; color: var(--ink); padding: 0 0 1rem; min-height: auto; }
  .hero h1, .hero h1 .accent-text { color: var(--teal-dark); -webkit-text-fill-color: var(--teal-dark); }
  .hero-lede { color: var(--ink-soft); }
}

/* ==================== REDUCED MOTION: kill switch ==================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveals-on [data-reveal] { opacity: 1; transform: none; -webkit-clip-path: none; clip-path: none; }
  .hero h1 .hw, .fx .hero h1 .hw { opacity: 1; transform: none; animation: none; }
  .hero-rule { transform: scaleX(1); animation: none; }
  .scene-frame:not(.seen) .scene-art { -webkit-clip-path: none; clip-path: none; }
  .orb, .hero-rings span, .hero-dots i, .scene-art, .scroll-hint .mouse::after { animation: none; }
  .hero { animation: none; background-size: 100% 100%; }
}

/* ===== _30-palette.css :: iNtegra green/mint/clay re-skin of the system tokens ===== */

/* Re-skin layer. Nothing here creates a new variable: every name already
   exists in _20-system.css. Overriding the same custom properties is what
   lets the whole site move to the iNtegra palette without touching a single
   selector in the structural layer. */

:root {
  /* brand greens: #173f35 is the ink of the design, the rest is its depth ramp */
  --teal: #173f35;
  --teal-dark: #173f35;
  --teal-deep: #10302a;
  --teal-darker: #0a221d;
  --teal-light: #dbebe1;
  --teal-glow: rgba(23, 63, 53, .12);
  --sage: #779981;
  --sage-deep: #568569;

  /* paper and ink */
  --ink: #233c34;
  /* The secondary tone has to carry real body copy: the article's opening
     paragraph, FAQ answers, captions. #6b7870 measured 4.36:1 on --cream, which
     is just under the 4.5 AA line at the sizes those blocks use. Two steps
     darker keeps it visibly a shade below --ink (which is 10.9:1) and clears AA
     at 5.3:1. */
  --ink-soft: #5c6b64;
  --ink-faint: #94a09a;
  --cream: #f8f9f4;
  --sand: #eef2ea;
  --paper-2: #e9eee3;

  /* lines */
  --line: #dce3d9;
  --line-soft: #e9eee6;

  /* clay: #ea9679 is the fill, #b66b49 is the same hue dark enough to sit on
     paper as text or as a focus ring without failing contrast */
  --accent: #b66b49;
  --accent-dark: #8e4f33;
  --accent-light: #ea9679;
  --clay: #ea9679;
  --clay-soft: #f6dbd0;
  --gold: #ea9679;
  --gold-light: #f4c9b7;
  --gold-glow: rgba(234, 150, 121, .18);

  --shadow-glow: 0 0 40px rgba(23, 63, 53, .1);

  /* index-new keeps its corners tighter than the old system did */
  --radius: 14px;
  --radius-sm: 8px;
  --radius-lg: 22px;

  /* faces: Manrope carries the display type, DM Sans the body copy */
  --font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --serif: "Manrope", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ===== _35-type.css :: Manrope display scale and tracking ===== */

/* Display type. The structural layer sizes headings in fluid rem; this layer
   restates them on the index-new scale, where the effect comes from a light
   weight pushed close together rather than from boldness. */

body { font-size: 1.0625rem; line-height: 1.72; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--teal-dark);
  letter-spacing: -.055em;
  font-weight: 500;
  line-height: 1.12;
}
h1 { font-size: clamp(2.5rem, 5.4vw, 3.75rem); }
h2 { font-size: clamp(1.75rem, 3.1vw, 2.3125rem); line-height: 1.25; letter-spacing: -.043em; margin-top: 1.9em; }
h3 { font-size: 1.375rem; line-height: 1.35; letter-spacing: -.025em; font-weight: 600; }
h4 { font-family: var(--font); font-size: 1.0625rem; font-weight: 650; letter-spacing: 0; }

/* index-new sets the emphasis inside a headline in sage, not in the accent
   colour, which keeps big type calm; the structural layer used --serif at
   1.25rem here, which now reads as a mismatch against the new scale. */
blockquote { font-family: var(--serif); font-size: 1.1875rem; font-weight: 500; letter-spacing: -.02em; }

.hero h1, .page-head h1 { letter-spacing: -.055em; }

.eyebrow, .brand-sub, .section-head .eyebrow {
  font-family: var(--font);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}

/* Lede paragraphs sit in the muted ink and hold a narrower measure than the
   body, the same move the sample page makes. The hero lede is excluded: every
   hero on this site is the dark teal stage, where --ink-soft lands at 2.9:1
   against the background and reads as disabled text. Its own light colour
   lives with the rest of the hero in the structural layer. */
.page-head p:not(.hero-lede), .section-top p {
  color: var(--ink-soft);
  font-size: .9375rem;
  line-height: 1.85;
}

/* ===== _40-gaps.css :: classes the system layer does not cover yet ===== */

/* Gap layer. The structural system covers 110 of the classes these pages use,
   but eight of them only ever had rules in the previous stylesheet, plus three
   keyframes that JavaScript and the reveal markup call by name. Without this
   file the table of contents, the enquiry form and the FAQ accordion would
   render unstyled. */

/* ---------- on this page ---------- */

.toc {
  margin: 0 0 2.4rem; background: var(--cream);
  border: 1px solid var(--line); border-radius: var(--radius);
  font-size: .9375rem;
}
.toc summary {
  display: flex; align-items: center; gap: .6rem; cursor: pointer;
  padding: 1.05rem 1.4rem; list-style: none;
  font-family: var(--font); font-size: .6875rem; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; color: var(--ink-soft);
}
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after {
  content: "+"; margin-left: auto; width: 1.35rem; height: 1.35rem;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(31, 91, 85, .1); color: var(--teal);
  font-size: .95rem; line-height: 1;
}
.toc details[open] summary::after { content: "\2212"; }
.toc summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.toc ul { margin: 0; padding: 0 1.4rem 1.25rem 2.1rem; list-style: none; }
.toc details[open] ul { animation: toc-in .28s var(--ease-out); }
@keyframes toc-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.toc li { margin: .18rem 0; }
.toc li.toc-l2 { font-weight: 600; color: var(--teal-dark); }
.toc li.toc-l3 { font-size: .875rem; padding-left: .55rem; color: var(--ink-soft); }
.toc a {
  color: inherit; text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat; background-size: 0 1px; background-position: 0 100%;
  transition: background-size .3s var(--ease-out), color .2s ease;
}
.toc a:hover { background-size: 100% 1px; color: var(--teal-dark); }

/* ---------- FAQ ---------- */

.faq { margin: 3.2rem 0; }
.faq > h2 { margin-top: 0; }
.faq > p { color: var(--ink-soft); font-size: .9375rem; max-width: 34rem; margin-bottom: 1.6rem; }

/* The FAQ sits in a two-column band: the line-art scene for that page's
   situation holds the left rail, the questions take the wider right one. */
.faq-section {
  display: grid; grid-template-columns: .85fr 1.15fr;
  gap: 4rem; align-items: start;
  padding-top: 4rem; padding-bottom: 4rem;
  border-top: 1px solid var(--line);
}
.faq-intro { position: sticky; top: 7rem; }
.faq-intro p { color: var(--ink-soft); font-size: .9375rem; line-height: 1.85; margin-top: 1.6rem; }
.faq-list > h2 { margin-top: 0; }
@media (max-width: 52rem) {
  .faq-section { grid-template-columns: 1fr; gap: 2rem; }
  .faq-intro { position: static; }
}

.faq details {
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  margin-bottom: .55rem;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.faq details[open] { border-color: var(--sage); box-shadow: var(--shadow-sm); }
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1.2rem;
  padding: 1.05rem 1.25rem;
  font-family: var(--serif); font-weight: 600; font-size: 1.0625rem;
  letter-spacing: -.015em; color: var(--teal-dark);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none;
  width: 1.55rem; height: 1.55rem; border-radius: 50%;
  background: var(--teal-light); color: var(--teal-dark);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font); font-size: 1rem; line-height: 1; font-weight: 400;
  transition: transform .3s var(--ease-spring), background-color .25s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); background: var(--clay); color: var(--teal-darker); }
.faq .faq-a { padding: 0 1.25rem 1.15rem; color: var(--ink-soft); font-size: .9375rem; line-height: 1.75; }
.faq .faq-a p:last-child { margin-bottom: 0; }

@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.faq details[open] .faq-a { animation: faq-in .35s var(--ease-out); }

/* ---------- enquiry form fields ---------- */

.field { margin-bottom: 1.05rem; }
.field label {
  display: block; margin-bottom: .35rem;
  font-family: var(--serif); font-weight: 600; font-size: .875rem;
  letter-spacing: -.01em; color: var(--teal-dark);
}
.field .req { color: var(--accent); }
.field input, .field textarea, .field select {
  width: 100%; padding: .8rem .9rem;
  font: inherit; font-size: .9375rem; color: var(--ink);
  background: var(--white); border: 1px solid var(--line); border-radius: 8px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--sage); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-glow);
}
.field textarea { min-height: 7.5rem; resize: vertical; }
/* The rule above sizes a text box. A checkbox sits inside its own label, so the
   full width and the field padding pushed the consent line onto two rows. */
.field input[type=checkbox] {
  width: auto; padding: 0; margin: 0 .45rem 0 0;
  vertical-align: baseline; accent-color: var(--teal);
}
.field .hint { display: block; margin-top: .3rem; font-size: .8125rem; color: var(--ink-soft); }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: var(--err); }
.field.has-error label { color: var(--err); }
.field-error { display: block; margin-top: .3rem; min-height: 1.1em; font-size: .8125rem; color: var(--err); }

/* honeypot: reachable by bots, invisible to people */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { margin-top: 1rem; min-height: 1.4em; font-weight: 600; font-size: .9375rem; }
.form-status.ok { color: var(--ok); }
.form-status.err { color: var(--err); }
.form-status[hidden] { display: none; }

/* ---------- relationship clarity embed ---------- */
/* The frame is the other project's own page, navy and dark, so it gets the site's
   radius and line and a background of its own colour: while it loads, or if it
   never does, the block reads as intentional rather than as a white hole. */

.clarity-frame {
  display: block; width: 100%; height: 56rem; border: 1px solid var(--line);
  border-radius: var(--radius); background: #12142b;
  box-shadow: 0 8px 32px rgba(16, 48, 44, .08);
}
.frame-note { margin-top: .7rem; font-size: .8125rem; color: var(--ink-soft); }
@media (max-width: 60rem) { .clarity-frame { height: 44rem; } }
@media (max-width: 40rem) { .clarity-frame { height: 40rem; } }

/* ---------- YouTube lightbox ---------- */

@keyframes lightbox-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes yt-unmute-hint { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
.yt-lightbox button { font-family: var(--font); }
.yt-box { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 1.8rem 0; }
.yt-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--radius); }

/* ---------- footer article list ---------- */

/* The header names the pages a reader can book; the articles that belong to a
   service are listed under it here. Indented and quieter so the two levels read
   apart without needing a heading each. */
.site-footer .footer-sub { padding-left: .8rem; font-size: .875rem; opacity: .8; }
.site-footer .footer-sub:hover { opacity: 1; }

/* ---------- header nav, desktop ---------- */

/* A service backed by a single page sits in the bar as a plain li instead of a
   dropdown, and the system layer only styles summary buttons and dropdown
   links, so the leaf inherited the default underlined anchor and sat higher
   than its neighbours. Give it the summary's box.
   The row is also set not to wrap: seven service names do fit one line at the
   60rem breakpoint once the labels are short, and a second centred row read as
   a broken header rather than a full menu. */
@media (min-width: 60rem) {
  .nav-list { flex-wrap: nowrap; gap: .05rem; font-size: .8125rem; }
  .nav-list > li > a {
    display: block; padding: .9rem .6rem; border-radius: 8px;
    text-decoration: none; color: var(--teal-dark); font-weight: 600;
    white-space: nowrap;
  }
  .nav-list > li > a:hover { background: var(--teal-light); }
  .nav-list > li > a[aria-current='page'] {
    color: var(--accent-dark); box-shadow: inset 0 -2px 0 var(--accent);
  }
  .nav-group > summary { padding: .9rem .6rem; white-space: nowrap; }
}

/* ---------- article page head ---------- */

/* The system layer's .hero is the homepage stage: 92vh, content centred in it.
   An article header carries a breadcrumb, a title and sometimes one line, so the
   same box left most of the band empty and pushed the title to the middle of the
   screen. The homepage is the only .hero outside .page-head, so scoping the
   override there leaves it untouched. */
.page-head .hero { min-height: 0; padding: 2.5rem 0 2.75rem; }
.page-head .hero-copy { padding-top: .25rem; }
.page-head .breadcrumbs { margin-bottom: 1.15rem; }
.page-head .hero-rule { margin-top: 1.35rem; }
.page-head .hero-lede { margin-bottom: 0; margin-top: 1.15rem; }

/* ===== _45-buttons.css :: flat small-radius controls ===== */

/* Buttons and pills, moved off the old glassmorphism treatment. The sample
   page's controls are flat, small-radius and solid, and they lift 2px rather
   than scale, which is what makes the set read as one brand. */

.btn {
  border-radius: 7px;
  padding: 1rem 1.45rem;
  font-family: var(--font);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .005em;
  gap: 1.1rem;
  border: 1px solid transparent;
  overflow: visible;
  transition: transform .2s var(--ease-out), background-color .2s ease, border-color .2s ease, color .2s ease;
}
/* the structural layer sweeps a highlight across primary buttons; on a flat
   7px-radius fill that reads as a shimmer sticker, so it goes */
.btn-primary::after { content: none; }

.btn-primary {
  background: var(--teal);
  color: var(--white);
  box-shadow: none;
}
.btn-primary:hover {
  background: #2c5849;
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(23, 63, 53, .18);
  filter: none;
}

.btn-secondary {
  background: transparent;
  color: var(--teal-dark);
  border-color: var(--line);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.btn-secondary:hover {
  border-color: var(--teal);
  background: var(--teal-light);
  color: var(--teal-dark);
  transform: translateY(-2px);
}

.btn-ghost { color: var(--teal-dark); }

.btn.small { padding: .8rem 1.1rem; gap: .9rem; }
.btn .arrow { font-size: 1.125rem; font-weight: 400; }

.pill {
  display: inline-flex; align-items: center; gap: .45em;
  background: #e9eee3; border: 1px solid #dfe5d7; border-radius: 30px;
  padding: .55rem .8rem;
  font-size: .5625rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-soft);
}

:focus-visible { outline: 3px solid #b66b49; outline-offset: 4px; }

/* ===== _50-line-art.css :: couple line-art that draws itself on scroll ===== */

/* Couple line-art. Each scene is inline SVG built from strokes only, so the
   figures stay crisp at any size and weigh a few hundred bytes. The paths
   carry pathLength="1", which lets the draw-on animation run in normalised
   units instead of measured pixel lengths, so the artwork can be edited
   without recalculating dash arrays.

   Everything is decorative: the illustration repeats nothing the prose does
   not already say, and it is marked aria-hidden by the builder. */

.lineart {
  position: relative; display: block;
  width: 100%; max-width: 33rem; margin: 0 auto;
}
.lineart svg { display: block; width: 100%; height: auto; overflow: visible; }

.lineart .ink, .lineart .soft, .lineart .warm, .lineart .faint {
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.lineart .ink   { stroke: var(--teal); stroke-width: 1.7; }
.lineart .soft  { stroke: var(--sage); stroke-width: 1.4; }
.lineart .warm  { stroke: var(--clay); stroke-width: 1.7; }
.lineart .faint { stroke: var(--line); stroke-width: 1.2; }
.lineart .head  { stroke-width: 1.9; }

.lineart .dot      { fill: var(--teal); stroke: none; }
.lineart .dot-warm { fill: var(--clay); stroke: none; }
.lineart .wash     { fill: var(--teal-light); stroke: none; opacity: .55; }

/* --- draw-on: strokes arrive, then fills and dots settle --- */

/* The hidden starting state only exists once js/line-art.js has announced
   itself with .la-js, so a blocked or failed script leaves the finished figure
   on the page instead of an empty box. Same agreement js/reveal.js keeps with
   .reveals-on. */
.la-js .lineart .draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.la-js .lineart .pop  { opacity: 0; }

.la-js .lineart.seen .draw { animation: la-draw 1.05s var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 90ms); }
.la-js .lineart.seen .pop  { animation: la-pop .5s var(--ease-back) forwards; animation-delay: calc(.55s + var(--i, 0) * 70ms); }

@keyframes la-draw { to { stroke-dashoffset: 0; } }
@keyframes la-pop  { from { opacity: 0; transform: translateY(4px) scale(.92); } to { opacity: 1; transform: none; } }

/* --- relational motion: the things that keep two people in a scene alive --- */

/* a held breath: the pair drifts apart and back, roughly once a second and a
   half at the slow end, which reads as breathing rather than as a loop */
.lineart .breathe-a, .lineart .breathe-b { transform-box: fill-box; transform-origin: center; }
.lineart.seen .breathe-a { animation: la-breathe-a 7s ease-in-out 1.2s infinite; }
.lineart.seen .breathe-b { animation: la-breathe-b 7s ease-in-out 1.2s infinite; }
@keyframes la-breathe-a { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-1.6px); } }
@keyframes la-breathe-b { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(1.6px); } }

/* the thread between them travels rather than sitting still */
.lineart .ants { stroke-dasharray: .04 .05; animation: la-ants 5s linear infinite; }
@keyframes la-ants { to { stroke-dashoffset: -.9; } }

/* slow orbit for the premarital scene */
.lineart .orbit { transform-box: fill-box; transform-origin: center; animation: la-orbit 22s linear infinite; }
@keyframes la-orbit { to { transform: rotate(360deg); } }

/* a pulse that leaves, used where one person is reaching out */
.lineart .ping { transform-box: fill-box; transform-origin: center; animation: la-ping 3.2s var(--ease-out) infinite; }
@keyframes la-ping {
  0%   { opacity: .5; transform: scale(.5); }
  70%  { opacity: 0; transform: scale(1.5); }
  100% { opacity: 0; transform: scale(1.5); }
}

/* the arc over a child holds still; only its ends glow */
.lineart .glow { animation: la-glow 4.5s ease-in-out infinite; }
@keyframes la-glow { 0%, 100% { opacity: .35; } 50% { opacity: .8; } }

/* ===== _60-motion.css :: animation gating: loops run only while on screen ===== */

/* Motion policy. The structural layer and the line-art layer both declare
   ambient loops, and eleven of them run whether or not anyone is looking.
   Pausing rather than removing keeps each animation in place, so scrolling
   back never restarts a cycle mid-flight.

   Every rule here is gated on the .fx class that js/fx.js adds, which means a
   blocked or failed script leaves the page exactly as it was: still, and fully
   visible. */

/* Nothing animates while its block is off screen, or while the tab is hidden. */
.fx .page-head:not(.live) :is(.hero-bg span, .hero-rings span, .orb, .hero-rule, .hero-badge, .badge-dot, .accent-text, .scroll-hint .mouse::after),
.fx .hero-art:not(.live) :is(.scene-frame, .hero-dots i),
.fx .lineart:not(.live) :is(.ants, .orbit, .ping, .glow, .breathe-a, .breathe-b),
.fx .timeline:not(.live) .timeline-n,
.fx .wa-fab:not(.live)::before,
.fx .ig:not(.live) .ig-tile,
html.fx-idle :is(.hero-bg span, .hero-rings span, .orb, .hero-dots i, .lineart .ants, .lineart .orbit, .lineart .ping, .lineart .glow) {
  animation-play-state: paused;
}

/* The hero illustration carries two animations: art-enter, which opens at
   opacity 0, and the art-breathe loop that follows it. Pausing both would let
   the entry freeze at its first frame and leave a blank panel where the page's
   main picture belongs, so only the loop stands down. The two values line up
   with the two animations in declaration order. */
.fx .hero-art:not(.live) .scene-art,
html.fx-idle .scene-art { animation-play-state: running, paused; }

/* The pointer-driven parallax and tilt are the two effects that read as
   expensive on a laptop running the whole page, so they stand down on coarse
   pointers as well as under reduced motion. js/fx.js already gates them on
   (pointer: fine); this is the CSS half of that agreement. */
@media (pointer: coarse) {
  .fx .hero-art .scene-frame { transform: none !important; }
  .fx .page-head { --glow-x: 50%; --glow-y: 50%; }
}

@media (prefers-reduced-motion: reduce) {
  /* The draw-on has to resolve rather than play: a figure that never finished
     drawing is a figure with a hole in it. */
  .lineart .draw { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .lineart .pop { opacity: 1; animation: none; transform: none; }
  .lineart .ants { stroke-dasharray: none; animation: none; }
  .lineart :is(.orbit, .ping, .glow, .breathe-a, .breathe-b) { animation: none; }
  .lineart .ping { opacity: .45; }
  .faq details[open] .faq-a { animation: none; }
}

@media print {
  .lineart { max-width: 20rem; }
  .lineart .draw { stroke-dasharray: none; stroke-dashoffset: 0; }
  .lineart .pop { opacity: 1; }
}