/* ============================================================
   CONSULT-ED - Design System Tokens
   Scheme: TIDE (deep teal + sand on shell) - now the only scheme.
   The scheme toggle is retired; Tide values live on :root.
   Token names keep their original semantics (--blue = primary,
   --yellow = warm accent) so all existing markup is unchanged.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&family=Momo+Trust+Display&display=swap');

:root{
  /* ---- Core palette (Tide) ---- */
  --blue:      #2C6165;   /* primary deep teal             */
  --blue-hover:#224E52;   /* pressed / hover               */
  --blue-deep: #14373B;   /* footer, dark surfaces         */
  --yellow:    #D5AD84;   /* warm sand accent              */
  --yellow-soft:#EEDBC4;  /* light accent wash             */
  --ivory:     #F9F5EE;   /* page base (shell)             */
  --white:     #FFFFFF;

  --teal: #6C9D9F;
  --sand: #D5AD84;

  /* ---- Neutrals ---- */
  --ink:      #142A2C;
  --muted:    #4F6365;
  --line:     #E6DECE;
  --line-blue:rgba(255,255,255,.24);

  /* ---- Gradients & glass ---- */
  --grad-hero: linear-gradient(115deg,#5E9498 0%,#357F84 34%,#2C6165 55%,#83B0B2 78%,#E6F0EF 100%);
  --grad-footer: linear-gradient(180deg,#2C6165 0%,#14373B 100%);
  --mesh-filter: hue-rotate(-48deg) saturate(.72) brightness(1.04);
  --glass: rgba(255,255,255,.16);
  --glass-border: rgba(255,255,255,.35);
  --blur: blur(14px);

  /* ---- Type ---- */
  --f: 'Inter', system-ui, sans-serif;
  --f-display: 'Momo Trust Display', 'Inter', system-ui, sans-serif;

  /* ---- Radii & shadows ---- */
  --leaf: 32px 32px 32px 8px;      /* surfaces & media */
  --leaf-sm: 14px 14px 14px 4px;   /* controls */
  --r-sm: 14px;
  --r-md: 24px;
  --r-lg: 36px;
  --r-pill: 999px;
  --shadow-soft: 0 30px 70px -40px rgba(20,55,59,.4);
  --shadow-card: 0 18px 44px -28px rgba(20,42,44,.26);

  /* ---- Rhythm ---- */
  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 60px);
}

*{ box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; scroll-behavior:smooth; }
body{ margin:0; background:var(--ivory); color:var(--ink); font-family:var(--f); font-size:16px; line-height:1.65; }
h1,h2,h3,h4,p{ margin:0; }
a{ color:var(--blue); text-decoration:none; }
a:hover{ color:var(--blue-hover); }
img{ display:block; max-width:100%; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(56px,8vw,110px); }

/* ---------- Type scale ---------- */
.h-display{ font-family:var(--f-display); font-weight:400; letter-spacing:-.015em; line-height:1.08; font-size:clamp(40px,5.2vw,64px); }
.h1{ font-family:var(--f-display); font-weight:400; letter-spacing:-.01em; line-height:1.1; font-size:clamp(34px,4vw,50px); }
.h2{ font-family:var(--f-display); font-weight:400; letter-spacing:-.01em; line-height:1.14; font-size:clamp(27px,3vw,38px); }
.h3{ font-family:var(--f-display); font-weight:400; letter-spacing:0; line-height:1.3; font-size:23px; }
.lead{ color:var(--muted); font-size:clamp(15px,1.15vw,17.5px); line-height:1.7; }
.eyebrow{ font-weight:600; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); }
.on-blue{ color:#fff; }
.on-blue .lead, .lead.on-blue{ color:rgba(255,255,255,.82); }
.lt{ font-family:var(--f); font-weight:300; }
.on-blue .lt{ color:rgba(255,255,255,.75); }

/* ---------- Buttons ---------- */
.btn{ font-family:var(--f); font-weight:600; font-size:14.5px; cursor:pointer; display:inline-flex; align-items:center; gap:10px; padding:14px 28px; border-radius:var(--leaf-sm); border:1.5px solid transparent; transition:all .2s ease; white-space:nowrap; }
.btn-blue{ background:var(--blue); color:#fff; }
.btn-blue:hover{ background:var(--blue-hover); color:#fff; box-shadow:var(--shadow-card); }
.btn-yellow{ background:var(--yellow); color:var(--ink); }
.btn-yellow:hover{ filter:brightness(.96); color:var(--ink); box-shadow:var(--shadow-card); }
.btn-white{ background:#fff; color:var(--blue); }
.btn-white:hover{ color:var(--blue-hover); box-shadow:var(--shadow-card); }
.btn-outline{ background:transparent; color:var(--ink); border-color:color-mix(in srgb, var(--ink) 30%, transparent); }
.btn-outline:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.btn-ghost-blue{ background:transparent; color:#fff; border-color:var(--line-blue); }
.btn-ghost-blue:hover{ background:rgba(255,255,255,.12); color:#fff; }
.btn-sm{ padding:10px 18px; font-size:13.5px; }

.arrow-btn{ width:44px; height:44px; border-radius:var(--leaf-sm); display:inline-grid; place-items:center; background:var(--blue); color:#fff; border:none; cursor:pointer; transition:all .2s ease; }
.arrow-btn:hover{ background:var(--blue-hover); }
.arrow-btn svg{ width:18px; height:18px; }

/* ---------- Cards ---------- */
.card{ background:#fff; border-radius:var(--leaf); padding:30px; box-shadow:var(--shadow-card); }
.card-line{ background:#fff; border:1px solid var(--line); border-radius:var(--leaf); padding:30px; box-shadow:none; }
.card-blue{ background:var(--blue); color:#fff; border-radius:var(--leaf); padding:clamp(28px,4vw,52px); box-shadow:var(--shadow-soft); }
.card-soft{ background:color-mix(in srgb, var(--yellow) 16%, var(--white)); border-radius:var(--leaf); padding:clamp(24px,3vw,36px); }

/* Leaf squircle - THE brand shape */
.squircle{ border-radius:var(--leaf); overflow:hidden; }
.squircle img{ width:100%; height:100%; object-fit:cover; }

/* Photo service tile */
.tile{ position:relative; border-radius:var(--leaf); overflow:hidden; aspect-ratio:1/1.05; display:flex; align-items:center; justify-content:center; text-align:center; color:#fff; border:1px solid rgba(255,255,255,.45); box-shadow:0 12px 30px -22px rgba(20,42,44,.35); }
.tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tile .scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,42,44,.3) 0%, rgba(20,42,44,.58) 100%); }
.tile .lbl{ position:relative; padding:18px 22px; font-weight:600; font-size:17px; line-height:1.5; }
a.tile:hover .scrim{ background:linear-gradient(180deg, rgba(20,42,44,.34) 0%, rgba(20,42,44,.66) 100%); }
a.tile, a.tile:hover{ color:#fff; }

/* Glass panel */
.glass{ background:var(--glass); border:1px solid var(--glass-border); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); border-radius:var(--leaf); }
.glass-chip{ width:52px; height:52px; border-radius:var(--leaf-sm); display:grid; place-items:center; background:rgba(255,255,255,.34); border:1px solid rgba(255,255,255,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:var(--ink); }
.glass-chip svg{ width:20px; height:20px; }

/* ---------- Forms ---------- */
.field{ width:100%; font-family:var(--f); font-size:15px; color:var(--ink); background:rgba(255,255,255,.94); border:1.5px solid transparent; border-radius:var(--leaf-sm); padding:14px 18px; outline:none; transition:border-color .2s ease; }
.field:focus{ border-color:var(--yellow); }
.field::placeholder{ color:#8A9698; }
textarea.field{ resize:vertical; min-height:120px; }
.field-err{ border-color:#C0796C; }

/* Form feedback states */
.notice{ display:flex; gap:13px; align-items:flex-start; padding:18px 20px; border-radius:var(--leaf-sm); font-size:14.5px; line-height:1.6; background:#fff; color:var(--ink); }
.notice svg{ flex:none; width:20px; height:20px; margin-top:1px; }
.notice-ok{ background:#fff; color:var(--ink); }
.notice-ok svg{ color:var(--blue); }
.notice-err{ background:#FFF6F3; color:#7E3A2E; }
.notice-err svg{ color:#B4614F; }
.notice .t{ font-weight:600; display:block; margin-bottom:2px; }

/* ---------- Chips ---------- */
.chip{ display:inline-flex; align-items:center; gap:8px; padding:9px 18px; border-radius:var(--leaf-sm); background:#fff; border:1px solid var(--line); font-weight:600; font-size:13.5px; color:var(--ink); }
.chip.active{ background:var(--blue); border-color:var(--blue); color:#fff; }
.tag{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:var(--leaf-sm); background:color-mix(in srgb, var(--yellow) 34%, #fff); color:var(--ink); font-weight:600; font-size:12.5px; letter-spacing:.02em; }
.tag-quiet{ background:transparent; border:1px solid var(--line); color:var(--muted); }

/* ---------- Stat ---------- */
.stat .num{ font-family:var(--f-display); font-weight:400; font-size:clamp(36px,4vw,52px); letter-spacing:-.01em; color:var(--blue); }
.stat .lbl{ font-weight:500; color:var(--muted); font-size:14.5px; }

/* ---------- Numbered steps ---------- */
.steps{ display:grid; gap:16px; }
.step{ display:flex; gap:16px; align-items:flex-start; }
.step .n{ flex:none; width:38px; height:38px; border-radius:var(--leaf-sm); background:var(--yellow); color:var(--ink); font-weight:700; font-size:15px; display:grid; place-items:center; }
.step h4{ margin:0 0 3px; font-size:16px; font-weight:600; }
.step p{ color:var(--muted); font-size:14.5px; line-height:1.6; }
.on-blue .step p{ color:rgba(255,255,255,.8); }

/* ---------- Softened decorative accents (brief 2026-08-02) ----------
   The plate is no longer a hard opaque block: it is a low-opacity
   tinted wash that fades away from the photo edge and is lightly
   blurred. Leaf geometry unchanged. Ring and blob dialled down to match. */
.plate{ position:relative; }
.plate::before{ content:""; position:absolute; inset:-22px -22px 22px 22px; border-radius:inherit; z-index:0;
  background:linear-gradient(203deg, color-mix(in srgb, var(--yellow) 42%, transparent) 0%, color-mix(in srgb, var(--yellow) 16%, transparent) 46%, transparent 76%);
  filter:blur(7px); }
.plate.blue::before{ background:linear-gradient(203deg, color-mix(in srgb, var(--blue) 30%, transparent) 0%, color-mix(in srgb, var(--blue) 10%, transparent) 46%, transparent 76%); }
.plate > *{ position:relative; z-index:1; }
.bw img{ filter:grayscale(1) contrast(.96); }

.ring{ position:absolute; inset:-20px -20px 20px 20px; border:1px solid color-mix(in srgb, var(--yellow) 55%, transparent); border-radius:var(--leaf); pointer-events:none; z-index:0; }
.blob{ position:absolute; background:color-mix(in srgb, var(--yellow) 45%, transparent); border-radius:60% 40% 55% 45%/55% 45% 60% 40%; pointer-events:none; filter:blur(2px); }
.glow-circle{ position:absolute; border-radius:50%; background:radial-gradient(circle at 38% 32%, rgba(255,255,255,.22) 0%, rgba(255,255,255,.09) 45%, rgba(255,255,255,0) 72%); pointer-events:none; }

/* ---------- Video player (new atom) ----------
   No autoplay. Poster + play affordance; .video.empty is the
   intentional "film coming soon" state. */
.video{ position:relative; display:block; border-radius:var(--leaf); overflow:hidden; aspect-ratio:16/9; background:color-mix(in srgb, var(--blue) 8%, var(--white)); border:1px solid var(--line); }
.video img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.video .veil{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,42,44,.16) 0%, rgba(20,42,44,.46) 100%); }
.video .play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:74px; height:74px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.9); color:var(--blue); box-shadow:0 20px 44px -24px rgba(20,42,44,.6); transition:transform .2s ease, background .2s ease; }
.video .play svg{ width:24px; height:24px; margin-left:3px; }
.video:hover .play{ transform:translate(-50%,-50%) scale(1.04); background:#fff; }
.video .cap{ position:absolute; left:22px; right:22px; bottom:18px; color:#fff; display:flex; justify-content:space-between; align-items:flex-end; gap:16px; }
.video .cap .t{ font-weight:600; font-size:15.5px; }
.video .cap .d{ font-size:13px; color:rgba(255,255,255,.78); }
.video.empty{ border:1px dashed color-mix(in srgb, var(--blue) 28%, transparent); background:color-mix(in srgb, var(--blue) 5%, var(--white)); display:grid; place-items:center; text-align:center; aspect-ratio:auto; min-height:200px; overflow:visible; }
.video.empty .in{ display:grid; gap:8px; justify-items:center; padding:24px; }
.video.empty .mark{ width:56px; height:56px; border-radius:var(--leaf-sm); display:grid; place-items:center; background:color-mix(in srgb, var(--yellow) 34%, #fff); color:var(--blue); }
.video.empty .mark svg{ width:22px; height:22px; }
.video.empty .t{ font-family:var(--f-display); font-size:19px; color:var(--ink); }
.video.empty .d{ font-size:13.5px; color:var(--muted); max-width:34ch; }
.video-sm{ aspect-ratio:16/10; }
.video-sm.empty{ aspect-ratio:auto; min-height:180px; }
.video-sm .play{ width:56px; height:56px; }
.video-sm .play svg{ width:19px; height:19px; }

/* ---------- Course card (new atom, links out to the LMS) ---------- */
.course{ display:flex; flex-direction:column; gap:12px; background:#fff; border:1px solid var(--line); border-radius:var(--leaf); padding:26px; transition:box-shadow .2s ease, border-color .2s ease; }
.course:hover{ box-shadow:var(--shadow-card); border-color:color-mix(in srgb, var(--blue) 24%, var(--line)); }
.course .meta{ display:flex; gap:8px; flex-wrap:wrap; }
.course h3{ font-family:var(--f-display); font-weight:400; font-size:22px; line-height:1.25; color:var(--ink); }
.course p{ color:var(--muted); font-size:14.5px; line-height:1.6; }
.course .foot{ margin-top:auto; padding-top:8px; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.course .go{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14px; color:var(--blue); }
.course .go svg{ width:15px; height:15px; }
.course .soon{ font-weight:600; font-size:14px; color:var(--muted); }
.course.is-soon{ background:color-mix(in srgb, var(--yellow) 9%, var(--white)); }

/* ---------- FAQ accordion (new atom) ---------- */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ list-style:none; cursor:pointer; padding:20px 48px 20px 0; font-weight:600; font-size:16.5px; position:relative; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:""; position:absolute; right:10px; top:calc(50% - 6px); width:10px; height:10px; border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted); transform:rotate(45deg); transition:transform .2s ease; }
.faq details[open] summary::after{ transform:rotate(225deg); top:calc(50% - 2px); }
.faq summary:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:6px; }
.faq .a{ padding:0 44px 22px 0; color:var(--muted); font-size:15px; line-height:1.7; }

/* ---------- Booking embed frame ---------- */
.embed{ background:#fff; border:1px solid var(--line); border-radius:var(--leaf); padding:14px; box-shadow:var(--shadow-card); }
.embed-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 10px 12px; }
.embed-head .src{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); }
.embed-head .dot{ width:8px; height:8px; border-radius:50%; background:var(--blue); }
.embed .inner{ border-radius:22px 22px 22px 6px; overflow:hidden; border:1px solid var(--line); background:#fff; }

/* ---------- Photo slot (art-direction placeholder) ---------- */
.slot{ position:relative; border-radius:var(--leaf); border:1px dashed color-mix(in srgb, var(--blue) 30%, transparent); background:color-mix(in srgb, var(--blue) 4%, var(--white)); padding:26px; display:grid; align-content:center; gap:10px; min-height:260px; }
.slot .k{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--blue); }
.slot .t{ font-family:var(--f-display); font-size:20px; line-height:1.25; color:var(--ink); }
.slot dl{ margin:0; display:grid; gap:5px; font-size:13px; color:var(--muted); }
.slot dl div{ display:flex; gap:8px; }
.slot dt{ min-width:58px; font-weight:600; color:var(--ink); opacity:.7; }
.slot dd{ margin:0; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .video:hover .play{ transform:translate(-50%,-50%); }
}