/* ==========================================================================
   Highest Self Actualization LLC — "Hypno Tim"
   Design system: Caribbean blue calcite — sea glass, shallow water, warm sand.
   Theme everything by editing the :root tokens below.
   ========================================================================== */

:root{
  /* --- Deep sea (primary) --- */
  --ocean-900:#08303F;
  --ocean-800:#0C3F52;
  --ocean-700:#135469;
  --ocean-600:#1A6C85;

  /* --- Caribbean blue calcite (secondary) --- */
  --lagoon-700:#167A93;
  --lagoon-500:#46A9C4;
  --lagoon-400:#6FC3D9;
  --lagoon-200:#C0E5EF;
  --lagoon-050:#EAF7FA;

  /* --- Warm island light (accent, used sparingly against all that blue) --- */
  --sun-600:#8C5D1F;
  --sun-500:#F2B366;
  --sun-400:#F8CC93;
  --sun-200:#FBE6C8;
  --coral-600:#AF4834;
  --coral-500:#E8795F;
  --hibiscus:#E0607A;

  /* --- Palm --- */
  --palm-700:#256B5E;
  --palm-500:#37907E;

  /* --- Sand / paper --- */
  --sand-050:#FDFAF4;
  --sand-100:#F7F0E2;
  --sand-200:#EDE1CA;
  --paper:#FFFFFF;

  /* --- Ink --- */
  --ink:#0B3542;
  --body:#33565F;
  --muted:#4A707D;
  --line:#E2DAC8;
  --line-dark:rgba(255,255,255,.18);

  /* --- System --- */
  --radius:18px;
  --radius-sm:12px;
  --radius-lg:28px;
  --maxw:1180px;
  --maxw-prose:70ch;
  --shadow-sm:0 1px 2px rgba(8,48,63,.06), 0 2px 8px rgba(8,48,63,.05);
  --shadow:0 4px 12px rgba(8,48,63,.07), 0 14px 40px rgba(8,48,63,.09);
  --shadow-lg:0 10px 24px rgba(8,48,63,.10), 0 30px 70px rgba(8,48,63,.14);
  --font-display:"Fraunces", Georgia, "Times New Roman", serif;
  --font-sans:"Outfit", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* Build marker. /_check.php compares this against the file on the server to
     prove whether the browser is looking at the current stylesheet. Bump it
     whenever this file changes meaningfully. */
  --css-build:"photos-1";
}

/* --------------------------------------------------------------- base ---- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:110px; -webkit-text-size-adjust:100%; overflow-x:hidden}
body{
  margin:0; background:var(--sand-050); color:var(--body);
  font-family:var(--font-sans); font-size:1.0625rem; line-height:1.72;
  font-weight:400; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{max-width:100%; display:block; height:auto}
h1,h2,h3,h4{font-family:var(--font-display); color:var(--ink); line-height:1.14; margin:0 0 .5em; font-weight:600; letter-spacing:-.01em}
h1{font-size:clamp(2.25rem,5.2vw,3.85rem); font-variation-settings:"SOFT" 40,"WONK" 1}
h2{font-size:clamp(1.75rem,3.4vw,2.6rem)}
h3{font-size:clamp(1.2rem,1.9vw,1.5rem)}
h4{font-size:1.075rem; font-family:var(--font-sans); font-weight:600}
p{margin:0 0 1.15em}
a{color:var(--lagoon-700); text-decoration-color:rgba(70,169,196,.45); text-underline-offset:3px}
a:hover{color:var(--coral-600)}
strong{color:var(--ink); font-weight:600}
em{font-style:italic}
ul,ol{padding-left:1.25em}
li{margin-bottom:.45em}
hr{border:0; border-top:1px solid var(--line); margin:2.5rem 0}
blockquote{margin:0; padding:0}
:focus-visible{outline:3px solid var(--sun-500); outline-offset:3px; border-radius:4px}
::selection{background:var(--sun-200); color:var(--ink)}

.wrap{width:min(100% - 2.5rem, var(--maxw)); margin-inline:auto}
.prose{max-width:var(--maxw-prose)}
.center{text-align:center}
.skip-link{position:absolute; left:-9999px; top:0; background:var(--sun-500); color:var(--ocean-900); padding:.75rem 1.25rem; z-index:999; font-weight:600; border-radius:0 0 var(--radius-sm) 0}
.skip-link:focus{left:0}

.overline{
  font-family:var(--font-sans); font-size:.75rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--sun-600); margin:0 0 .85rem; display:flex; align-items:center; gap:.6rem;
}
.overline::before{content:""; width:26px; height:2px; background:var(--sun-500); border-radius:2px; flex:none}
.center .overline{justify-content:center}
.on-dark .overline{color:var(--sun-400)}
.lead{font-size:clamp(1.075rem,1.6vw,1.28rem); line-height:1.62; color:var(--body)}
.on-dark .lead{color:#D9E9EE}
.small{font-size:.9rem}
.muted{color:var(--muted)}

/* -------------------------------------------------------------- topbar ---- */
.topbar{background:var(--ocean-900); color:#BBD6DE; font-size:.82rem; letter-spacing:.01em}
.topbar-inner{display:flex; align-items:center; justify-content:center; gap:.6rem; flex-wrap:wrap; padding:.5rem 0; text-align:center}
.topbar a{color:#BBD6DE; text-decoration:none}
.topbar a:hover{color:var(--sun-400)}
.topbar-hi a{color:var(--sun-400); font-weight:500}
.topbar-sep{opacity:.4}

/* -------------------------------------------------------------- header ---- */
.site-header{
  position:sticky; top:0; z-index:100; background:rgba(253,249,242,.92);
  backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line); transition:box-shadow .3s var(--ease), background .3s var(--ease);
}
.site-header.is-scrolled{box-shadow:var(--shadow-sm); background:rgba(253,249,242,.98)}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 0}
.brand{display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--ink)}
.brand-mark{width:46px; height:46px; flex:none}
.brand-text{display:flex; flex-direction:column; line-height:1.1}
.brand-name{font-family:var(--font-display); font-weight:700; font-size:1.4rem; color:var(--ocean-800); letter-spacing:-.015em}
.brand-sub{font-size:.66rem; text-transform:uppercase; letter-spacing:.14em; color:var(--sun-600); font-weight:600}

.primary-nav{display:flex; align-items:center; gap:.15rem}
.nav-link{
  font-size:.93rem; font-weight:500; color:var(--ink); text-decoration:none;
  padding:.5rem .68rem; border-radius:999px; transition:background .2s var(--ease), color .2s var(--ease); white-space:nowrap;
}
.nav-link:hover{background:var(--lagoon-050); color:var(--lagoon-700)}
.nav-link.is-active{color:var(--lagoon-700); background:var(--lagoon-050); font-weight:600}
.nav-item.has-sub{position:relative; display:flex; align-items:center}
.sub-toggle{background:none; border:0; color:var(--muted); cursor:pointer; padding:.35rem .1rem; font-size:.7rem; line-height:1; margin-left:-.4rem; border-radius:6px}
.sub-toggle:hover{color:var(--lagoon-700)}
.subnav{
  position:absolute; top:100%; left:0; min-width:290px; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg);
  padding:.5rem; display:none; flex-direction:column; margin-top:.45rem; z-index:120;
}
/* Invisible bridge across the gap between the nav link and the panel.
   Without it the pointer leaves :hover mid-travel and the menu snaps shut
   before you can reach an item. The bridge is a child of .subnav, which is a
   child of .nav-item, so hovering it keeps the whole thing open. */
.subnav::before{content:""; position:absolute; left:0; right:0; top:-.6rem; height:.6rem}
/* Same idea on the trigger side: widen the hoverable area down to the panel. */
.nav-item.has-sub::after{content:""; position:absolute; left:0; right:0; top:100%; height:.6rem}
.nav-item.has-sub:hover .subnav, .subnav.is-open{display:flex}
.subnav-link{
  font-size:.9rem; color:var(--body); text-decoration:none; padding:.55rem .8rem; border-radius:10px; transition:background .18s var(--ease);
}
.subnav-link:hover{background:var(--sand-100); color:var(--ocean-800)}
.subnav-link.is-active{background:var(--lagoon-050); color:var(--lagoon-700); font-weight:600}
.nav-cta{margin-left:.5rem}

.nav-toggle{display:none; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; background:none; border:0; cursor:pointer; padding:0}
.nav-toggle span{display:block; height:2px; width:24px; background:var(--ocean-800); border-radius:2px; margin-inline:auto; transition:transform .28s var(--ease), opacity .2s var(--ease)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ------------------------------------------------------------- buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--font-sans); font-weight:600; font-size:.95rem; line-height:1;
  padding:.85rem 1.5rem; border-radius:999px; text-decoration:none; border:2px solid transparent;
  cursor:pointer; transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn-lg{padding:1.02rem 1.9rem; font-size:1.02rem}
.btn-sun{background:linear-gradient(135deg,var(--sun-500),var(--coral-500)); color:#26130A; box-shadow:0 4px 14px rgba(232,121,95,.34)}
.btn-sun:hover{color:#26130A; box-shadow:0 8px 22px rgba(232,121,95,.44)}
.btn-lagoon{background:var(--lagoon-700); color:#fff}
.btn-lagoon:hover{background:var(--lagoon-500); color:#fff}
.btn-ocean{background:var(--ocean-800); color:#fff}
.btn-ocean:hover{background:var(--ocean-700); color:#fff}
.btn-ghost{background:transparent; border-color:var(--ocean-800); color:var(--ocean-800)}
.btn-ghost:hover{background:var(--ocean-800); color:#fff}
.on-dark .btn-ghost{border-color:rgba(255,255,255,.65); color:#fff}
.on-dark .btn-ghost:hover{background:#fff; color:var(--ocean-900)}
.btn[aria-disabled="true"],.btn.is-disabled{opacity:.5; pointer-events:none; transform:none}
.btn-row{display:flex; flex-wrap:wrap; gap:.85rem; margin-top:1.6rem}
.center .btn-row{justify-content:center}

/* ------------------------------------------------------------ sections ---- */
.section{padding:clamp(3.5rem,7vw,6rem) 0}
.section-tight{padding:clamp(2.5rem,4.5vw,3.75rem) 0}
.section-sand{background:var(--sand-100)}
.section-lagoon{background:var(--lagoon-050)}
.section-dark{background:var(--ocean-800); color:#D9E9EE; position:relative}
.section-dark h2,.section-dark h3{color:#fff}
.section-dark a{color:var(--sun-400)}
.section-head{max-width:60ch; margin-bottom:2.5rem}
.section-head.center{margin-inline:auto}

/* Woven accent strip — the one overtly decorative flourish, used sparingly */
.tapa{height:6px; width:100%;
  background:
    repeating-linear-gradient(90deg, var(--ocean-800) 0 10px, transparent 10px 20px),
    linear-gradient(90deg, var(--sun-500), var(--coral-500), var(--lagoon-500), var(--sun-500));
  background-size:20px 6px, 100% 6px;
}

/* ---------------------------------------------------------------- hero ---- */
.hero{position:relative; overflow:hidden; background:var(--ocean-900); color:#EAF4F7; padding:clamp(4rem,9vw,7.5rem) 0 clamp(6rem,10vw,9rem)}
.hero::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(118% 88% at 78% 14%, rgba(248,204,147,.32) 0%, rgba(232,121,95,.18) 24%, rgba(12,63,82,0) 60%),
    linear-gradient(180deg, #082C3B 0%, #0F4C63 44%, #23859E 100%);
}
/* the sun */
.hero::after{
  content:""; position:absolute; top:9%; right:11%; width:min(280px,34vw); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, #FFE7C2 0%, var(--sun-400) 44%, rgba(232,121,95,.42) 62%, rgba(232,121,95,0) 73%);
  filter:blur(2px); opacity:.8; z-index:0;
}
.hero-inner{position:relative; z-index:3; max-width:38rem}
.hero h1{color:#fff; margin-bottom:.4em; text-wrap:balance}
.hero .lead{color:#D3E7EC; max-width:34rem}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:.55rem; background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.20); color:var(--sun-400); font-size:.78rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; padding:.45rem 1rem; border-radius:999px; margin-bottom:1.4rem;
}
.hero-proof{display:flex; flex-wrap:wrap; gap:1.6rem; margin-top:2.6rem; padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.16)}
.hero-proof div{max-width:14rem}
.hero-proof strong{display:block; color:#fff; font-family:var(--font-display); font-size:1.5rem; line-height:1.2; margin-bottom:.15rem}
.hero-proof span{font-size:.86rem; color:#A9C8D1; line-height:1.45; display:block}

/* palm silhouettes */
.hero-palm{position:absolute; bottom:0; z-index:1; opacity:.42; pointer-events:none; color:#04222E}
.hero-palm--l{left:-3%; width:min(300px,32vw)}
.hero-palm--r{right:-2%; width:min(240px,26vw); opacity:.35; transform:scaleX(-1)}
@media (max-width:900px){ .hero-palm--r{display:none} .hero-palm--l{opacity:.28} }

/* wave divider */
.wave{display:block; width:100%; height:auto; position:relative; z-index:2; margin-bottom:-1px}
.hero .wave{position:absolute; bottom:-1px; left:0}

/* Optional hero background video (house standard: deferred-inject) */
.hero--video .hero-video-bg{position:absolute; inset:0; overflow:hidden; z-index:0; background:var(--ocean-900)}
.hero--video .hero-video-bg::after{content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, rgba(6,42,56,.74), rgba(6,42,56,.58) 55%, rgba(6,42,56,.86))}
.hero--video .hero-video-fallback{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:1; transition:opacity 1.2s ease}
.hero--video .hero-video-bg iframe{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:177.78vh; height:100vh; min-width:100%; min-height:56.25vw; border:0; pointer-events:none; z-index:1}

/* --------------------------------------------------------------- cards ---- */
.grid{display:grid; gap:1.5rem}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(285px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.9rem; box-shadow:var(--shadow-sm); transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
  display:flex; flex-direction:column;
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--lagoon-200)}
.card h3{margin-bottom:.5rem}
.card p:last-child{margin-bottom:0}
.card-link{text-decoration:none; color:inherit}
.card-more{margin-top:auto; padding-top:1.1rem; font-weight:600; font-size:.92rem; color:var(--lagoon-700)}
.card-more::after{content:" →"}

.icon-badge{
  width:54px; height:54px; border-radius:16px; display:grid; place-items:center; margin-bottom:1.1rem; flex:none;
  background:linear-gradient(135deg,var(--lagoon-050),var(--sand-100)); border:1px solid var(--line); color:var(--lagoon-700);
}
.icon-badge svg{width:26px; height:26px}
.card--sun .icon-badge{background:linear-gradient(135deg,var(--sun-200),#FFF1DA); color:var(--coral-600)}

/* -------------------------------------------------------------- quotes ---- */
.quote{
  background:var(--paper); border:1px solid var(--line); border-left:4px solid var(--sun-500);
  border-radius:var(--radius); padding:1.7rem 1.9rem; box-shadow:var(--shadow-sm);
}
.quote p{font-family:var(--font-display); font-size:1.1rem; line-height:1.55; color:var(--ink); font-style:italic}
.quote cite{display:block; margin-top:.9rem; font-style:normal; font-size:.86rem; color:var(--muted); font-weight:500}
.quote-note{font-size:.78rem; color:var(--muted); margin-top:1.2rem; line-height:1.5}

/* ------------------------------------------------------------- pricing ---- */
.price-table{width:100%; border-collapse:collapse; background:var(--paper); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); font-size:.98rem}
.price-table caption{caption-side:top; text-align:left; font-family:var(--font-display); font-size:1.3rem; color:var(--ink); margin-bottom:.8rem; font-weight:600}
.price-table th,.price-table td{padding:.95rem 1.15rem; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
.price-table thead th{background:var(--ocean-800); color:#fff; font-family:var(--font-sans); font-weight:600; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase}
.price-table tbody tr:last-child td{border-bottom:0}
.price-table tbody tr:nth-child(even){background:var(--sand-050)}
.price-table .p{font-weight:700; color:var(--ocean-800); white-space:nowrap; font-size:1.02rem}
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}

.price-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:2rem; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; position:relative}
.price-card.is-featured{border-color:var(--sun-500); box-shadow:0 0 0 3px rgba(242,179,102,.24), var(--shadow)}
.price-card .tag{position:absolute; top:-.75rem; left:2rem; background:linear-gradient(135deg,var(--sun-500),var(--coral-500)); color:#26130A; font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:.32rem .8rem; border-radius:999px}
.price-card .amount{font-family:var(--font-display); font-size:2.5rem; color:var(--ocean-800); line-height:1; margin:.35rem 0 .2rem; font-weight:600}
.price-card .per{font-size:.85rem; color:var(--muted); margin-bottom:1.1rem}
.price-card ul{list-style:none; padding:0; margin:0 0 1.5rem}
.price-card li{padding-left:1.6rem; position:relative; font-size:.94rem; margin-bottom:.6rem}
.price-card li::before{content:"✦"; position:absolute; left:0; color:var(--sun-500); font-size:.9rem}
.price-card .btn{margin-top:auto}

/* ---------------------------------------------------------------- shop ---- */
.product{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-sm); transition:transform .28s var(--ease), box-shadow .28s var(--ease)}
.product:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.product-art{aspect-ratio:16/9; position:relative; display:grid; place-items:center; color:#fff; text-align:center; padding:1rem}
.product-art span{font-family:var(--font-display); font-size:1.35rem; font-weight:600; text-shadow:0 2px 12px rgba(0,0,0,.3); position:relative; z-index:2; line-height:1.2}
.product-body{padding:1.5rem; display:flex; flex-direction:column; flex:1}
.product-meta{font-size:.76rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); font-weight:600; margin-bottom:.5rem}
.product-price{font-family:var(--font-display); font-size:1.6rem; color:var(--ocean-800); font-weight:600; margin:.4rem 0 1rem}
.product-price .free{color:var(--palm-500)}
.product .btn{margin-top:auto; width:100%}
.badge{display:inline-block; background:var(--sun-200); color:#7A4A08; font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:.28rem .65rem; border-radius:999px; margin-left:.5rem; vertical-align:middle}
.soon{background:var(--sand-200); color:var(--muted); border-radius:999px; padding:.85rem 1.5rem; font-size:.9rem; font-weight:600; text-align:center; margin-top:auto}

/* ----------------------------------------------------------------- faq ---- */
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{
  width:100%; background:none; border:0; text-align:left; cursor:pointer; padding:1.35rem 2.5rem 1.35rem 0;
  font-family:var(--font-display); font-size:1.1rem; font-weight:600; color:var(--ink); position:relative; line-height:1.35;
}
.faq-q::after{content:"+"; position:absolute; right:.35rem; top:50%; transform:translateY(-50%); font-family:var(--font-sans); font-size:1.5rem; font-weight:300; color:var(--sun-600); transition:transform .3s var(--ease)}
.faq-q[aria-expanded="true"]::after{transform:translateY(-50%) rotate(45deg)}
.faq-q:hover{color:var(--lagoon-700)}
.faq-a{display:none; padding:0 2.5rem 1.5rem 0}
.faq-a p:last-child{margin-bottom:0}
.faq-item.is-open .faq-a{display:block}

/* --------------------------------------------------------------- steps ---- */
.steps{list-style:none; padding:0; margin:0; counter-reset:step}
.steps li{counter-increment:step; position:relative; padding-left:3.4rem; margin-bottom:1.5rem}
.steps li::before{
  content:counter(step); position:absolute; left:0; top:-.1rem; width:2.35rem; height:2.35rem; border-radius:50%;
  background:linear-gradient(135deg,var(--ocean-700),var(--lagoon-700)); color:#fff; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:600; font-size:1rem;
}

/* --------------------------------------------------------------- forms ---- */
.form-grid{display:grid; gap:1.1rem; grid-template-columns:1fr 1fr}
.field{display:flex; flex-direction:column; gap:.4rem}
.field.full{grid-column:1 / -1}
label{font-size:.87rem; font-weight:600; color:var(--ink)}
label .req{color:var(--coral-600)}
input[type=text],input[type=email],input[type=tel],select,textarea{
  font-family:var(--font-sans); font-size:1rem; color:var(--ink); background:var(--paper);
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:.8rem .95rem; width:100%;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--lagoon-500); box-shadow:0 0 0 3px rgba(70,169,196,.22)}
textarea{min-height:150px; resize:vertical}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-note{font-size:.82rem; color:var(--muted); line-height:1.55}
.alert{border-radius:var(--radius-sm); padding:1rem 1.15rem; margin-bottom:1.5rem; font-size:.94rem; border:1px solid}
.alert-ok{background:var(--lagoon-050); border-color:var(--lagoon-200); color:#0B5C55}
.alert-err{background:#FDECE8; border-color:#F6C4B8; color:#9A3418}
.alert ul{margin:.5rem 0 0; padding-left:1.2rem}

/* ---------------------------------------------------------- disclaimers ---- */
.note{
  background:var(--sand-100); border:1px solid var(--line); border-left:4px solid var(--lagoon-500);
  border-radius:var(--radius-sm); padding:1.25rem 1.4rem; font-size:.92rem; line-height:1.65; color:var(--body);
}
.note strong{color:var(--ink)}
.note p:last-child{margin-bottom:0}
.note--warn{border-left-color:var(--coral-500); background:#FFF6F1}

/* ---------------------------------------------------------- breadcrumbs ---- */
.crumbs{font-size:.82rem; color:var(--muted); padding:1rem 0 0}
.crumbs a{color:var(--muted); text-decoration:none}
.crumbs a:hover{color:var(--lagoon-700)}
.crumbs span{margin:0 .45rem; opacity:.6}

/* ------------------------------------------------------------ prefooter ---- */
.prefooter{background:linear-gradient(135deg,var(--ocean-800),var(--lagoon-700)); color:#E8F6FA; padding:clamp(3rem,6vw,4.5rem) 0}
.prefooter h2{color:#fff; margin-bottom:.35em}
.prefooter .lead{color:#CDE6E9; max-width:44ch}
.prefooter .overline{color:var(--sun-400)}
.prefooter-inner{display:grid; grid-template-columns:1.5fr 1fr; gap:2.5rem; align-items:center}
.prefooter-cta{display:flex; flex-direction:column; gap:.85rem}
.prefooter-cta .btn{width:100%}
.prefooter .btn-ghost{border-color:rgba(255,255,255,.7); color:#fff}
.prefooter .btn-ghost:hover{background:#fff; color:var(--ocean-800)}

/* --------------------------------------------------------------- footer ---- */
.site-footer{background:var(--ocean-900); color:#9FC0C9; font-size:.9rem; padding-top:3.5rem}
.site-footer a{color:#C6DEE4; text-decoration:none}
.site-footer a:hover{color:var(--sun-400)}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2.5rem; padding-bottom:2.5rem}
.site-footer .brand-name{font-family:var(--font-display); font-size:1.55rem; color:#fff; display:block; margin-bottom:.15rem}
.footer-tag{color:var(--sun-400); font-size:.82rem; text-transform:uppercase; letter-spacing:.1em; font-weight:600; margin-bottom:.9rem}
.footer-own{max-width:30ch; line-height:1.6}
.footer-nap{line-height:1.75; font-size:.87rem; margin-top:1.1rem}
.footer-social{margin-top:1rem; display:flex; gap:1rem; flex-wrap:wrap; font-size:.85rem}
.footer-col h3{color:#fff; font-family:var(--font-sans); font-size:.78rem; text-transform:uppercase; letter-spacing:.14em; margin-bottom:1rem; font-weight:700}
.footer-col ul{list-style:none; padding:0; margin:0}
.footer-col li{margin-bottom:.5rem; line-height:1.45}
.footer-cred{margin-top:1.5rem; font-size:.78rem; line-height:1.5; color:#7FA6B1; border-top:1px solid var(--line-dark); padding-top:1rem}
.footer-cred span{color:var(--sun-400)}
.footer-disclaimer{border-top:1px solid var(--line-dark); padding:1.5rem 0}
.footer-disclaimer p{font-size:.775rem; line-height:1.65; color:#7FA6B1; margin:0; max-width:none}
.footer-bottom{border-top:1px solid var(--line-dark); padding:1.15rem 0 1.5rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.8rem; color:#7FA6B1}

/* -------------------------------------------------------------- reveal ---- */
.reveal{opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.is-visible{opacity:1; transform:none}

/* ---------------------------------------------------------- responsive ---- */
@media (max-width:1080px){
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:980px){
  /* backdrop-filter on the header would make it the containing block for the
     position:fixed nav panel — drop it on mobile so the panel covers the page */
  .site-header{backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--sand-050); z-index:200}
  .site-header.is-scrolled{background:var(--sand-050)}
  .nav-toggle{display:flex; position:relative; z-index:210}
  .primary-nav{
    position:fixed; inset:0 0 0 auto; width:min(88vw,360px); background:var(--sand-050);
    flex-direction:column; align-items:stretch; gap:.2rem; padding:10.5rem 1.5rem 3rem; overflow-y:auto;
    transform:translateX(100%); transition:transform .34s var(--ease), visibility 0s linear .34s;
    box-shadow:var(--shadow-lg); z-index:110; visibility:hidden;
  }
  .primary-nav.is-open{transform:none; visibility:visible; transition:transform .34s var(--ease), visibility 0s}
  .nav-link{padding:.8rem .9rem; font-size:1.05rem; border-radius:12px}
  .nav-item.has-sub{flex-wrap:wrap}
  .nav-item.has-sub .nav-link{flex:1}
  .sub-toggle{font-size:1rem; padding:.6rem .8rem; margin:0}
  .subnav{position:static; width:100%; box-shadow:none; border:0; background:transparent; margin:0 0 .4rem; padding:0 0 0 .8rem; border-left:2px solid var(--line)}
  .nav-item.has-sub:hover .subnav:not(.is-open){display:none}
  .nav-item.has-sub::after{display:none}
  .subnav.is-open{display:flex}
  .nav-cta{margin:1rem 0 0; justify-content:center}
  .prefooter-inner{grid-template-columns:1fr}
}
@media (max-width:768px){
  body{font-size:1.02rem}
  .topbar-inner{font-size:.74rem; gap:.4rem .9rem}
  .topbar-sep{display:none}
  .topbar-item:first-child{display:none}   /* city line is in the footer + schema anyway */
  .form-grid{grid-template-columns:1fr}
  .hero{padding-bottom:5rem}
  .footer-grid{grid-template-columns:1fr; gap:2rem}
  .card{padding:1.5rem}
}
@media (max-width:480px){
  .wrap{width:min(100% - 1.75rem, var(--maxw))}
  .brand-sub{display:none}
  .btn{width:100%; }
  .btn-row .btn{width:100%}
  .price-card{padding:1.5rem}
}

/* ------------------------------------------------------- reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none}
}

/* ---------------------------------------------------------------- print ---- */
@media print{
  .topbar,.site-header,.prefooter,.site-footer,.btn,.nav-toggle{display:none !important}
  body{background:#fff; color:#000; font-size:11pt}
  .hero{background:#fff; color:#000; padding:1rem 0}
  .hero h1,.hero .lead{color:#000}
  a{color:#000; text-decoration:underline}
}

/* FAQ inside a dark section */
.section-dark .faq-item{border-bottom-color:rgba(255,255,255,.14)}
.section-dark .faq-q{color:#fff}
.section-dark .faq-q:hover{color:var(--sun-400)}
.section-dark .faq-a{color:#CFE3E8}
.section-dark .faq-a p{color:#CFE3E8}
.section-dark .faq-a strong{color:#fff}
.section-dark .note{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:#CFE3E8}
.section-dark .note strong{color:#fff}
.section-dark .steps li strong{color:#fff}

/* Editor placeholders — every one of these must be gone before launch.
   Delete this rule once the site is live so nothing can slip through unstyled. */
.todo{background:#FFE9A8; color:#7A4A08; border-bottom:2px dotted #C89A2A; padding:0 .25em; border-radius:3px; font-weight:600; font-style:normal}

/* Long-form legal / policy pages */
.legal{max-width:76ch}
.legal h2{font-size:clamp(1.35rem,2.4vw,1.75rem); margin-top:2.75rem; padding-top:1.75rem; border-top:1px solid var(--line)}
.legal h2:first-of-type{margin-top:1rem; border-top:0; padding-top:0}
.legal h3{font-size:1.1rem; margin-top:1.75rem}
.legal p,.legal li{font-size:1rem}
.legal .updated{font-size:.85rem; color:var(--muted); margin-bottom:2rem}
.legal .toc{background:var(--sand-100); border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem 1.75rem; margin-bottom:2.5rem}
.legal .toc h3{margin:0 0 .75rem; font-size:.78rem; text-transform:uppercase; letter-spacing:.14em; font-family:var(--font-sans)}
.legal .toc ol{margin:0; padding-left:1.2rem; columns:2; column-gap:2rem}
.legal .toc li{margin-bottom:.35rem; font-size:.92rem; break-inside:avoid}
@media (max-width:640px){ .legal .toc ol{columns:1} }

/* Buttons sitting on the dark hero (the hero is always dark) */
.hero .btn-ghost{border-color:rgba(255,255,255,.65); color:#fff}
.hero .btn-ghost:hover{background:#fff; color:var(--ocean-900)}
.hero a:not(.btn){color:var(--sun-400)}

/* ==========================================================================
   MOTION
   Everything below is decorative. It runs on transform and opacity only — no
   layout, no paint thrash — and every animation is switched off wholesale by
   the prefers-reduced-motion block at the end of this file.
   Timings are deliberately slow: this is a hypnosis and meditation practice,
   and motion that hurries the eye works against the whole point of the site.
   ========================================================================== */

/* --- Drifting waves ------------------------------------------------------
   Each layer's path is drawn one period wider than the viewBox, so shifting it
   by exactly one period loops seamlessly. Different periods and speeds per
   layer stop the three from ever lining up, which is what reads as water. */
.wave-l{will-change:transform}
@keyframes driftBack  { from{transform:translateX(0)}       to{transform:translateX(-620px)} }
@keyframes driftMid   { from{transform:translateX(-480px)}  to{transform:translateX(0)} }
@keyframes driftFront { from{transform:translateX(0)}       to{transform:translateX(-380px)} }
.wave-l--back  { animation:driftBack  68s linear infinite }
.wave-l--mid   { animation:driftMid   47s linear infinite }
.wave-l--front { animation:driftFront 31s linear infinite }

/* --- The sun breathes ----------------------------------------------------
   A 14-second cycle, which is roughly a slow resting breath. Nobody will
   consciously notice it; it just stops the hero from feeling like a flat image. */
@keyframes sunBreathe{
  0%,100% { transform:scale(1);     opacity:.82 }
  50%     { transform:scale(1.055); opacity:.95 }
}
.hero::after{ animation:sunBreathe 14s ease-in-out infinite; will-change:transform, opacity }

/* --- Palms sway ----------------------------------------------------------
   Five keyframe stops rather than two, so the arc is uneven and reads as gusts
   instead of a metronome. Fronds carry their own faster, wider motion on top of
   the trunk's, which is where the sense of a breeze actually comes from.
   Left and right palms run on different durations so they never synchronise. */
@keyframes swayL{
  0%   { transform:rotate(-1.5deg) }
  23%  { transform:rotate(0.5deg) }
  41%  { transform:rotate(1.7deg) }
  63%  { transform:rotate(-0.3deg) }
  81%  { transform:rotate(0.9deg) }
  100% { transform:rotate(-1.5deg) }
}
@keyframes swayR{
  0%   { transform:scaleX(-1) rotate(-1.2deg) }
  27%  { transform:scaleX(-1) rotate(1.4deg) }
  48%  { transform:scaleX(-1) rotate(-0.4deg) }
  70%  { transform:scaleX(-1) rotate(1.1deg) }
  100% { transform:scaleX(-1) rotate(-1.2deg) }
}
@keyframes frondFlex{
  0%   { transform:rotate(-2.2deg) skewX(1.4deg) }
  30%  { transform:rotate(1.6deg)  skewX(-1deg) }
  55%  { transform:rotate(-0.8deg) skewX(.6deg) }
  78%  { transform:rotate(2.4deg)  skewX(-1.6deg) }
  100% { transform:rotate(-2.2deg) skewX(1.4deg) }
}
.hero-palm{ transform-origin:50% 100%; will-change:transform }
.hero-palm--l{ animation:swayL 9s ease-in-out infinite }
.hero-palm--r{ animation:swayR 7.2s ease-in-out infinite }
.palm-fronds{ transform-origin:110px 96px; will-change:transform }
.hero-palm--l .palm-fronds{ animation:frondFlex 6.1s ease-in-out infinite }
.hero-palm--r .palm-fronds{ animation:frondFlex 4.9s ease-in-out infinite reverse }

/* --- Hero content settles in on load ------------------------------------- */
@keyframes riseIn{ from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none} }
.hero-eyebrow{ animation:riseIn .8s var(--ease) both .05s }
.hero h1     { animation:riseIn .8s var(--ease) both .16s }
.hero .lead  { animation:riseIn .8s var(--ease) both .27s }
.hero .btn-row{ animation:riseIn .8s var(--ease) both .38s }
.hero-proof  { animation:riseIn .8s var(--ease) both .5s }

/* --- Staggered reveal ----------------------------------------------------
   Grid children that scroll into view together arrive in sequence instead of
   snapping in as a block. */
.grid > .reveal:nth-child(1){ transition-delay:0ms }
.grid > .reveal:nth-child(2){ transition-delay:80ms }
.grid > .reveal:nth-child(3){ transition-delay:160ms }
.grid > .reveal:nth-child(4){ transition-delay:240ms }
.grid > .reveal:nth-child(5){ transition-delay:320ms }
.grid > .reveal:nth-child(6){ transition-delay:400ms }
.grid > .reveal:nth-child(7){ transition-delay:480ms }
.grid > .reveal:nth-child(8){ transition-delay:560ms }

/* The gold dash in an overline draws itself when the section arrives */
.overline::before{ transition:width .7s var(--ease) .15s }
.reveal .overline::before,
.reveal.overline::before{ width:0 }
.reveal.is-visible .overline::before,
.is-visible.overline::before{ width:26px }

/* --- Cards ---------------------------------------------------------------
   A warmer, slower lift, plus a soft sunset glow that fades in underneath. */
.card, .product, .price-card{ position:relative }
.card::after, .product::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  box-shadow:0 18px 44px rgba(70,169,196,.20), 0 4px 12px rgba(8,48,63,.07);
  opacity:0; transition:opacity .45s var(--ease);
}
.card:hover::after, .product:hover::after{ opacity:1 }
.card{ transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease) }
.card:hover{ transform:translateY(-5px) }
.product{ transition:transform .45s var(--ease), box-shadow .45s var(--ease) }
.product:hover{ transform:translateY(-5px) }

/* Icon badges warm up and tilt very slightly with their card */
.icon-badge{ transition:transform .45s var(--ease), background .45s var(--ease), color .45s var(--ease) }
.card:hover .icon-badge{ transform:scale(1.07) rotate(-3deg); color:var(--coral-600) }
.card:hover .icon-badge svg{ transition:transform .45s var(--ease) }

/* --- Buttons -------------------------------------------------------------
   The sunset gradient slides rather than jumping to a new colour. */
.btn-sun{ background-size:220% 100%; background-position:0% 50%; transition:transform .3s var(--ease), box-shadow .3s var(--ease), background-position .55s var(--ease) }
.btn-sun:hover{ background-position:100% 50% }
.btn-lagoon, .btn-ocean, .btn-ghost{ transition:transform .3s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease) }

/* --- Navigation ----------------------------------------------------------
   A gold underline that grows out from the centre. The active page keeps it. */
.nav-link{ position:relative }
.nav-link::after{
  content:""; position:absolute; left:50%; right:50%; bottom:.22rem; height:2px;
  background:var(--sun-500); border-radius:2px; transition:left .32s var(--ease), right .32s var(--ease);
}
.nav-link:hover::after{ left:.7rem; right:.7rem }
.nav-link.is-active::after{ left:.7rem; right:.7rem; background:var(--lagoon-500) }
@media (max-width:980px){ .nav-link::after{ display:none } }

/* Dropdown panel eases open instead of appearing */
@keyframes panelIn{ from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none} }
@media (min-width:981px){
  .nav-item.has-sub:hover .subnav, .subnav.is-open{ animation:panelIn .22s var(--ease) both }
}
.subnav-link{ transition:background .22s var(--ease), color .22s var(--ease), padding-left .22s var(--ease) }
.subnav-link:hover{ padding-left:1.05rem }

/* --- Product art ---------------------------------------------------------
   The sunset behind each track shifts slowly when you hover it. */
.product-art{ background-size:170% 170% !important; background-position:0% 0%; transition:background-position 1.6s var(--ease) }
.product:hover .product-art{ background-position:100% 100% }

/* --- Quotes, notes, tables ----------------------------------------------- */
.quote{ transition:transform .4s var(--ease), box-shadow .4s var(--ease) }
.quote:hover{ transform:translateY(-3px); box-shadow:var(--shadow) }
.price-table tbody tr{ transition:background .3s var(--ease) }
.price-table tbody tr:hover{ background:var(--lagoon-050) }
.faq-q::after{ transition:transform .3s var(--ease), color .3s var(--ease) }
.faq-q:hover::after{ color:var(--coral-600) }

/* --- Footer links --------------------------------------------------------- */
.footer-col a, .site-footer a{ transition:color .25s var(--ease), padding-left .25s var(--ease) }
.footer-col li a:hover{ padding-left:.28rem }

/* ==========================================================================
   THE BREATHING PACER  (meditation page)
   4 seconds in · 4 hold · 6 out — a 14-second cycle. The orb is driven by CSS
   so it stays smooth; the wording is re-synced from the animationiteration
   event in main.js so the two never drift apart.
   ========================================================================== */
.breathe{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:.5rem 0 }
.breathe-stage{
  position:relative; width:min(300px, 72vw); aspect-ratio:1; display:grid; place-items:center; margin-bottom:1.5rem;
}
.breathe-halo{
  position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle, rgba(248,204,147,.30) 0%, rgba(70,169,196,.24) 45%, rgba(70,169,196,0) 70%);
  transform:scale(.8); opacity:.55;
}
.breathe-ring{
  position:absolute; inset:12%; border-radius:50%; border:1px dashed rgba(70,169,196,.45);
}
.breathe-orb{
  position:relative; width:52%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #FFF1DC 0%, var(--sun-400) 30%, var(--lagoon-400) 72%, var(--lagoon-700) 100%);
  box-shadow:0 10px 40px rgba(70,169,196,.34), inset 0 -8px 22px rgba(150,90,50,.24);
  display:grid; place-items:center; transform:scale(.74); will-change:transform;
}
.breathe-word{
  font-family:var(--font-display); font-size:1.12rem; font-weight:600; color:#0B3542; letter-spacing:.01em;
  transition:opacity .5s var(--ease);
}
@keyframes breatheOrb{
  0%      { transform:scale(.74) }
  28.57%  { transform:scale(1.16) }   /* 4s in  */
  57.14%  { transform:scale(1.16) }   /* 4s hold */
  100%    { transform:scale(.74) }    /* 6s out */
}
@keyframes breatheHalo{
  0%      { transform:scale(.78); opacity:.45 }
  28.57%  { transform:scale(1.06); opacity:.85 }
  57.14%  { transform:scale(1.06); opacity:.85 }
  100%    { transform:scale(.78); opacity:.45 }
}
.breathe.is-running .breathe-orb { animation:breatheOrb  14s cubic-bezier(.42,0,.58,1) infinite }
.breathe.is-running .breathe-halo{ animation:breatheHalo 14s cubic-bezier(.42,0,.58,1) infinite }
.breathe-meta{ font-size:.86rem; color:var(--muted); margin-top:1rem; max-width:34ch }
.breathe-count{ font-variant-numeric:tabular-nums; font-weight:600; color:var(--lagoon-700) }

/* ==========================================================================
   REDUCED MOTION — the switch that turns all of the above off.
   Repeated here at the end so it wins on specificity and order regardless of
   what gets appended above it later.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .wave-l, .hero::after, .hero-palm, .palm-fronds,
  .hero-eyebrow, .hero h1, .hero .lead, .hero .btn-row, .hero-proof,
  .breathe.is-running .breathe-orb, .breathe.is-running .breathe-halo,
  .nav-item.has-sub:hover .subnav, .subnav.is-open{
    animation:none !important;
  }
  .hero-eyebrow, .hero h1, .hero .lead, .hero .btn-row, .hero-proof{ opacity:1; transform:none }
  .grid > .reveal{ transition-delay:0ms !important }
  .overline::before{ width:26px !important }
  .breathe-orb{ transform:scale(1) }
  .card:hover, .product:hover, .quote:hover{ transform:none }
}

/* ==========================================================================
   PHOTOGRAPHIC HEROES
   A real photo behind the headline, with a gradient scrim carrying the
   darkening so the photograph itself stays sharp. The CSS sun and the SVG
   palms are switched off here — the photograph has its own.
   ========================================================================== */
.hero--photo{ background:var(--ocean-900) }
.hero--photo::before, .hero--photo::after{ display:none }
.hero--photo .hero-palm{ display:none }

.hero-photo{ position:absolute; inset:0; z-index:0; overflow:hidden }
.hero-photo picture{ display:block; width:100%; height:100% }
.hero-photo img{
  width:100%; height:100%; object-fit:cover; object-position:center 58%;
  will-change:transform; animation:kenBurns 48s ease-in-out infinite alternate;
}
/* A very slow drift, so a still photograph does not feel like a dead rectangle.
   Well under the threshold where anyone consciously notices it moving. */
@keyframes kenBurns{
  from{ transform:scale(1.03) translate3d(0,0,0) }
  to  { transform:scale(1.10) translate3d(-1.4%,-1.1%,0) }
}

/* The scrim. Heaviest on the left, where the headline sits; almost clear on the
   right, so whatever is beautiful in the photograph still reads. */
.hero-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  /* Tuned by measuring white text against the actual photographs, not by eye:
     every hero clears WCAG AA (worst case 5.2:1) while the bright side of the
     picture stays visible. If you swap in a brighter photo, re-check it. */
  background:
    linear-gradient(100deg, rgba(4,26,36,.95) 0%, rgba(4,26,36,.90) 40%, rgba(4,26,36,.72) 60%, rgba(4,26,36,.34) 82%, rgba(4,26,36,.46) 100%),
    linear-gradient(180deg, rgba(4,26,36,.40) 0%, rgba(4,26,36,0) 24%, rgba(4,26,36,0) 60%, rgba(4,26,36,.38) 100%);
}
@media (max-width:900px){
  /* On a phone the text runs the full width, so the scrim has to be even. */
  .hero-scrim{
    background:linear-gradient(180deg, rgba(4,26,36,.80) 0%, rgba(4,26,36,.66) 42%, rgba(4,26,36,.62) 68%, rgba(4,26,36,.80) 100%);
  }
  .hero-photo img{ object-position:center 46% }
}

/* Content photography */
.figure{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:var(--sand-100) }
.figure img{ width:100%; height:auto; display:block }
.figure--tall img{ aspect-ratio:3/4; object-fit:cover }
.card-photo{ margin:-1.9rem -1.9rem 1.4rem; border-radius:var(--radius) var(--radius) 0 0; overflow:hidden; background:var(--sand-100) }
.card-photo img{ width:100%; height:auto; display:block; aspect-ratio:3/2; object-fit:cover }
@media (max-width:768px){ .card-photo{ margin:-1.5rem -1.5rem 1.2rem } }

@media (prefers-reduced-motion:reduce){
  .hero-photo img{ animation:none !important; transform:none }
}