/* ============================================================
   Contrology Connection — Base + shared components
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; scroll-behavior:smooth; }
body{
  font-family:var(--sans); font-size:var(--t-body); line-height:1.6;
  color:var(--ink); background:var(--bone);
  font-weight:400; min-height:100dvh;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--sea); color:#fff; }

/* ---- Typography ---- */
h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; line-height:1.08; letter-spacing:-.012em; color:var(--ink); }
h1{ font-size:var(--t-h1); }
h2{ font-size:var(--t-h2); }
h3{ font-size:var(--t-h3); letter-spacing:-.005em; }
p{ color:var(--ink-soft); }
.serif{ font-family:var(--serif); }
.eyebrow{ font-family:var(--mono); font-size:var(--t-label); letter-spacing:.26em; text-transform:uppercase; color:var(--sea); font-weight:400; }
.eyebrow.clay{ color:var(--clay); }
.eyebrow.muted{ color:var(--muted); }
.lede{ font-size:1.2rem; line-height:1.6; color:var(--ink-soft); }
.muted{ color:var(--muted); }

/* ---- Layout ---- */
.wrap{ max-width:var(--wrap); margin:0 auto; padding-inline:24px; }
.wrap-narrow{ max-width:var(--wrap-narrow); margin:0 auto; padding-inline:24px; }
section{ padding-block:var(--s9); }
.section-tight{ padding-block:var(--s8); }
.sec-head{ max-width:620px; margin-bottom:var(--s7); }
.sec-head .eyebrow{ display:block; margin-bottom:14px; }
.sec-head h2{ margin-bottom:14px; }
.center{ text-align:center; }
.center .sec-head{ margin-inline:auto; }
.divider{ height:1px; background:var(--line); border:0; }

/* ---- Buttons ---- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--sans); font-weight:600; font-size:var(--t-small); line-height:1;
  padding:14px 26px; border-radius:var(--r-pill); border:1.5px solid transparent;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
             transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  white-space:nowrap; }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--sea); color:#fff; }
.btn-primary:hover{ background:var(--sea-deep); }
.btn-clay{ background:var(--clay); color:#fff; }
.btn-clay:hover{ background:var(--clay-deep); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong); }
.btn-ghost:hover{ border-color:var(--ink); background:var(--ink); color:var(--on-dark); }
.btn-light{ background:var(--surface); color:var(--ink); border-color:var(--line); }
.btn-light:hover{ background:var(--surface-2); border-color:var(--line-strong); }
.btn-block{ width:100%; }
.btn-lg{ padding:17px 32px; font-size:var(--t-body); }
.btn[disabled]{ opacity:.55; cursor:not-allowed; }
.btn .spin{ width:15px;height:15px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---- Cards ---- */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); }
.card-pad{ padding:var(--s6); }
.card-hover{ transition:transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease); }
.card-hover:hover{ transform:translateY(-5px); box-shadow:var(--sh-2); }

/* ---- Badges / chips ---- */
.badge{ display:inline-flex; align-items:center; gap:7px; font-family:var(--mono);
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  padding:6px 11px; border-radius:var(--r-pill); }
.badge-sea{ background:var(--sea-soft); color:var(--sea-deep); }
.badge-clay{ background:var(--clay-soft); color:var(--clay-deep); }
.badge-line{ border:1px solid var(--line-strong); color:var(--muted); }

/* ---- Forms ---- */
.field{ margin-bottom:var(--s4); }
.field label{ display:block; font-size:var(--t-small); font-weight:600; color:var(--ink); margin-bottom:7px; }
.field .hint{ font-size:.82rem; color:var(--muted); margin-top:6px; }
.input, .textarea, .select{
  width:100%; font-family:var(--sans); font-size:var(--t-body); color:var(--ink);
  background:var(--surface); border:1.5px solid var(--line-strong); border-radius:var(--r-sm);
  padding:13px 15px; transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.input:focus, .textarea:focus, .select:focus{ outline:none; border-color:var(--sea); box-shadow:0 0 0 3px var(--sea-soft); }
.textarea{ min-height:130px; resize:vertical; }
.field.error .input, .field.error .textarea{ border-color:var(--bad); }
.field .err-msg{ display:none; font-size:.82rem; color:var(--bad); margin-top:6px; }
.field.error .err-msg{ display:block; }
.req{ color:var(--clay); }

/* ---- Header ---- */
.site-header{ position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bone) 86%, transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.site-header .bar{ display:flex; align-items:center; justify-content:space-between; height:74px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand .mark{ width:42px; height:42px; border-radius:50%; background:var(--surface); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; overflow:hidden; flex:none; }
.brand .mark img{ width:34px; height:34px; object-fit:contain; }
.brand .bname{ font-family:var(--serif); font-weight:600; font-size:1.18rem; letter-spacing:-.01em; line-height:1; }
.brand .bname span{ display:block; font-family:var(--mono); font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); font-weight:400; margin-top:4px; }
.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{ font-size:var(--t-small); font-weight:500; color:var(--ink-soft); position:relative; transition:color var(--t-fast); }
.nav-links a:hover, .nav-links a.active{ color:var(--ink); }
.nav-links a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--sea); }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-auth{ display:none; } /* mobile-menu auth links; desktop uses .nav-cta buttons */
.menu-toggle{ display:none; background:none; border:0; padding:8px; }
.menu-toggle svg{ width:26px; height:26px; stroke:var(--ink); }
@media(max-width:920px){
  .nav-links{ position:fixed; inset:74px 0 auto 0; flex-direction:column; gap:0; background:var(--bone);
    border-bottom:1px solid var(--line); padding:8px 24px 20px; transform:translateY(-120%); transition:transform var(--t-mid) var(--ease); }
  .nav-links.open{ transform:none; }
  .nav-links a{ padding:14px 0; width:100%; border-bottom:1px solid var(--line); }
  .nav-links a.active::after{ display:none; }
  .menu-toggle{ display:block; }
  .nav-cta .btn-ghost{ display:none; }
  .nav-auth{ display:contents; }
}

/* ---- Footer ---- */
.site-footer{ background:var(--ink); color:var(--on-dark); padding-block:var(--s8) var(--s6); margin-top:var(--s8); }
.site-footer a{ color:var(--on-dark); opacity:.85; transition:opacity var(--t-fast); }
.site-footer a:hover{ opacity:1; color:#fff; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding-bottom:var(--s7); }
.footer-grid h4{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:#9fb3ad; margin-bottom:16px; font-weight:500; }
.footer-grid ul{ list-style:none; font-size:var(--t-small); line-height:2.1; }
.footer-brand .serif{ font-size:1.4rem; color:#fff; margin-bottom:10px; }
.footer-brand p{ color:#b9c4c0; font-size:var(--t-small); max-width:34ch; }
.footer-bottom{ border-top:1px solid #34433f; padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.82rem; color:#9fb3ad; }
@media(max-width:780px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:30px; } }
@media(max-width:480px){ .footer-grid{ grid-template-columns:1fr; } }

/* ---- Headshots: fill the container, keep faces in frame ---- */
.headshot{ width:100%; height:100%; object-fit:cover; object-position:top center; }

/* ---- Initials avatar (instructors without a photo) ---- */
.avatar-initials{ width:100%; height:100%; display:grid; place-items:center;
  background:radial-gradient(120% 120% at 30% 20%, var(--sea-soft), var(--sea-mist));
  color:var(--sea-deep); font-family:var(--serif); font-weight:500; font-size:2rem; letter-spacing:.02em; }

/* ---- Reveal on scroll ---- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ---- Toast ---- */
.toast{ position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(16px);
  background:var(--ink); color:var(--on-dark); padding:13px 22px; border-radius:var(--r-pill);
  font-size:var(--t-small); box-shadow:var(--sh-2); opacity:0; pointer-events:none;
  transition:opacity var(--t-fast), transform var(--t-fast); z-index:100; }
.toast.show{ opacity:1; transform:translateX(-50%); }
.toast.err{ background:var(--bad); }

/* ---- Progress ring (dashboard) ---- */
.ring{ --p:0; width:64px; height:64px; border-radius:50%; flex:none;
  background:conic-gradient(var(--sea) calc(var(--p)*1%), var(--sea-soft) 0); display:grid; place-items:center; }
.ring::after{ content:attr(data-label); width:48px; height:48px; border-radius:50%; background:var(--surface);
  display:grid; place-items:center; font-family:var(--mono); font-size:12px; font-weight:600; color:var(--ink); }

/* ---- Utilities ---- */
.stack-sm > * + *{ margin-top:var(--s3); }
.stack > * + *{ margin-top:var(--s4); }
.row{ display:flex; gap:var(--s4); }
.row-center{ display:flex; align-items:center; gap:var(--s4); }
.wrap-tags{ display:flex; flex-wrap:wrap; gap:10px; }
.hide{ display:none !important; }
.grow{ flex:1; }
.skeleton{ background:linear-gradient(90deg,var(--surface-2),var(--line),var(--surface-2)); background-size:200% 100%; animation:sk 1.3s linear infinite; border-radius:var(--r-sm); }
@keyframes sk{ to{ background-position:-200% 0; } }

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