/* ==========================================================
   CHI — public homepage. Dark premium brand drawn from the
   studio: teal logo wall, yellow accents, red plates, turf.
   ========================================================== */
:root{
  --teal:#1CB5C4; --teal-hi:#35D0DF; --teal-deep:#0E6E79;
  --yellow:#FFC933; --red:#E0392E; --red-dk:#B7261D; --turf:#43B75A;
  --bg:#0B0E12; --bg-2:#11151B; --card:#161C23; --card-2:#1C242D;
  --line:#273038; --ink:#EEF3F6; --muted:#8E9CA8;
  --display:'Anton',Impact,sans-serif;
  --body:'Instrument Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{ box-sizing:border-box; margin:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{ font-family:var(--body); color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
.display{ font-family:var(--display); font-weight:400; text-transform:uppercase; letter-spacing:.02em; line-height:.95; }
.mono{ font-family:var(--mono); }

/* buttons */
.btn{ display:inline-block; font:600 .95rem var(--body); text-decoration:none; border:none; cursor:pointer;
  padding:13px 24px; border-radius:8px; transition:transform .08s, background .15s; }
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:3px solid rgba(28,181,196,.55); outline-offset:2px; }
.btn-red{ background:var(--teal); color:#04252A; }
.btn-red:hover{ background:var(--teal-hi); }
.btn-outline{ border:1.5px solid rgba(255,255,255,.4); color:#fff; padding:9px 18px; border-radius:8px; }
.btn-outline:hover{ background:rgba(255,255,255,.1); border-color:var(--teal); }
.btn-ghost-light{ color:#fff; background:rgba(255,255,255,.1); }
.btn-ghost-light:hover{ background:rgba(255,255,255,.18); }
.btn-wide{ width:100%; }

/* eyebrows */
.eyebrow,.eyebrow-red,.eyebrow-light{ font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; margin-bottom:10px; }
.eyebrow{ color:var(--teal-hi); }
.eyebrow-red{ color:var(--yellow); }
.eyebrow-light{ color:var(--teal-hi); }

/* ---------- Nav ---------- */
.nav{ position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between;
  padding:10px clamp(16px,4vw,48px);
  background:rgba(11,14,18,.85); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line); }
.nav-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff; }
.nav-logo{ width:38px; height:auto; }
.nav-word{ font-size:.95rem; letter-spacing:.06em; }
.nav-links{ display:flex; align-items:center; gap:22px; }
.nav-links a{ color:var(--muted); text-decoration:none; font-size:.92rem; font-weight:600; transition:color .15s; }
.nav-links a:hover{ color:#fff; }
.nav-burger{ display:none; background:none; border:none; color:#fff; font-size:1.5rem; cursor:pointer; }

/* ---------- Hero ---------- */
.hero{ position:relative; min-height:92dvh; display:flex; align-items:flex-end; background:var(--bg-2); overflow:hidden; }
.hero-photo{ position:absolute; inset:0; background:url('../assets/dumbbells.jpg') center/cover no-repeat;
  filter:grayscale(.4) contrast(1.05) brightness(.6); opacity:.6; }
.hero::after{ content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(11,14,18,.25) 0%, rgba(11,14,18,.95) 85%),
    linear-gradient(0deg, var(--teal) 0 5px, transparent 5px); }
.hero-inner{ position:relative; z-index:1; padding:clamp(28px,6vw,80px); color:#fff; max-width:960px; }
.hero-title{ font-size:clamp(3rem,9vw,6.6rem); }
.hero-title em{ font-style:normal; color:var(--teal-hi); }
.hero-sub{ margin:20px 0 28px; font-size:1.08rem; color:rgba(255,255,255,.78); max-width:52ch; line-height:1.55; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; }

/* ---------- Sections ---------- */
.section{ padding:clamp(56px,9vw,110px) clamp(20px,6vw,80px); max-width:1180px; margin:0 auto; }
.section-title{ font-size:clamp(2.2rem,5.5vw,3.6rem); color:var(--ink); margin-bottom:34px; }
.section-title-light{ font-size:clamp(2.2rem,5.5vw,3.4rem); color:#fff; margin-bottom:20px; }

/* services */
.svc-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
.svc{ background:var(--card); border:1px solid var(--line); border-radius:10px; padding:26px 22px; }
.svc h3{ font-size:1.12rem; margin-bottom:10px; color:var(--ink); }
.svc p{ font-size:.94rem; line-height:1.6; color:var(--muted); }

/* about — the teal logo wall */
.section-navy{ max-width:none; background:linear-gradient(160deg, var(--teal-deep) 0%, #094048 60%, var(--bg-2) 130%); }
.about-grid{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr; gap:48px; align-items:center; }
.about-copy{ color:rgba(255,255,255,.85); line-height:1.7; margin-bottom:18px; max-width:58ch; }
.about-grid .btn{ margin-top:6px; }
.about-grid .btn-red{ background:#fff; color:var(--teal-deep); box-shadow:0 8px 26px rgba(0,0,0,.3); }
.about-grid .btn-red:hover{ background:var(--yellow); color:#231A00; }
.about-mark img{ width:min(300px,75%); margin:0 auto;
  filter:drop-shadow(0 20px 50px rgba(0,0,0,.45)); }

/* gallery */
.gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
.gallery img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:8px; border:1px solid var(--line); }

/* contact */
.section-contact{ max-width:none; background:var(--bg-2); }
.contact-card{ max-width:640px; margin:0 auto; background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:clamp(28px,5vw,48px); border-top:4px solid var(--teal); }
.contact-sub{ color:var(--muted); margin-bottom:24px; line-height:1.6; }
.cform-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; }
.cform input,.cform textarea{ width:100%; padding:13px 14px; font:500 .96rem var(--body);
  border:1.5px solid var(--line); border-radius:8px; background:var(--bg-2); color:var(--ink); resize:vertical; }
.cform input::placeholder,.cform textarea::placeholder{ color:#5C6A76; }
.cform input:focus,.cform textarea:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(28,181,196,.2); }
.cform textarea{ margin-bottom:14px; }
.contact-note{ font-size:.8rem; color:var(--muted); margin-top:10px; text-align:center; }

/* footer */
.footer{ background:var(--bg); color:var(--muted); padding:26px clamp(20px,5vw,60px); border-top:1px solid var(--line); }
.footer-inner{ max-width:1180px; margin:0 auto; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center; }
.footer-brand{ display:flex; align-items:center; gap:10px; font-size:.86rem; }
.footer-links{ display:flex; gap:18px; }
.footer-links a{ color:var(--muted); text-decoration:none; font-size:.86rem; }
.footer-links a:hover{ color:var(--teal-hi); }

/* ---------- Mobile ---------- */
@media (max-width:820px){
  .nav-word{ display:none; }
  .nav-burger{ display:block; }
  .nav-links{ display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column;
    background:var(--bg-2); padding:18px; gap:16px; border-bottom:2px solid var(--teal); }
  .nav-links.open{ display:flex; }
  .about-grid{ grid-template-columns:1fr; }
  .cform-row{ grid-template-columns:1fr; }
  .hero{ min-height:76dvh; }
}

/* contact form: single-column row + spam honeypot + status colours */
.cform-row-1{ grid-template-columns:1fr; }
.cform-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.contact-note.ok{ color:var(--teal); }
.contact-note.err{ color:var(--red); }