/* FIT SQUAD — shared styles. Replicates the Lovable template's design system:
   near-black ground, signal green, Bebas Neue display / Barlow text. */

:root{
  --bg:#131313;            --bg:oklch(14% 0 0);
  --card:#1f1f1f;          --card:oklch(19% 0 0);
  --muted:#282828;         --muted:oklch(24% 0 0);
  --fg:#f6f6f6;            --fg:oklch(97% 0 0);
  --muted-fg:#ababab;      --muted-fg:oklch(72% 0 0);
  --primary:#46d81f;       --primary:oklch(79% .24 138);
  --primary-ink:#131313;   --primary-ink:oklch(14% 0 0);
  --border:rgba(255,255,255,.12);
  --border-strong:rgba(255,255,255,.22);
  --ink-border:rgba(0,0,0,.22);

  --display:"Bebas Neue","Arial Narrow",sans-serif;
  --sans:"Barlow","Helvetica Neue",Helvetica,Arial,sans-serif;

  --r-outer:6px; --r:4px; --r-inner:2px;
  --lift:0 14px 34px -14px rgba(0,0,0,.65), 0 3px 8px -3px rgba(0,0,0,.5);
  --ease:cubic-bezier(.16,1,.3,1);
  --pad:clamp(20px,4vw,48px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-size:clamp(15px,.35vw + 14px,17px);
  line-height:1.65; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; display:block}
a{color:var(--primary)}
p{margin:0 0 1em; text-wrap:pretty}
p:last-child{margin-bottom:0}

h1,h2,h3,.display{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  line-height:.92; letter-spacing:.01em; margin:0 0 .35em; text-wrap:balance;
}
h1{font-size:clamp(3.4rem,8.5vw,6rem)}
h2{font-size:clamp(2.4rem,5vw,3.9rem)}
h3{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.green{color:var(--primary)}
.num{font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1}

.kicker{
  display:block; font-size:.74rem; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--primary); margin-bottom:1.1rem;
}
.wrap{max-width:1200px; margin:0 auto; padding-left:var(--pad); padding-right:var(--pad)}
.section{padding-top:clamp(64px,9vw,120px); padding-bottom:clamp(64px,9vw,120px)}

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:50;
  background:rgba(19,19,19,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.site-head__in{
  max-width:1380px; margin:0 auto; padding:10px var(--pad);
  display:flex; align-items:center; gap:22px;
}
.brand{display:flex; align-items:center; min-height:44px}
.brand img{height:44px; width:auto}
.nav{display:flex; align-items:center; gap:2px; margin-left:auto; flex-wrap:wrap; justify-content:flex-end}
.nav a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 11px;
  font-family:var(--display); font-size:1.02rem; letter-spacing:.06em;
  text-transform:uppercase; text-decoration:none; color:var(--fg);
  border-radius:var(--r-inner);
  transition:color .18s linear, background-color .18s linear;
}
.nav a:hover{color:var(--primary)}
.nav a[aria-current="page"]{color:var(--primary)}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:12px 26px; border-radius:var(--r-inner);
  font-family:var(--display); font-size:1.06rem; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background-color .18s linear, color .18s linear;
}
.btn--solid{background:var(--primary); color:var(--primary-ink); box-shadow:var(--lift)}
.btn--solid:hover{transform:translateY(-2px)}
.btn--solid:active{transform:translateY(0)}
.btn--ghost{border-color:var(--primary); color:var(--primary)}
.btn--ghost:hover{background:var(--primary); color:var(--primary-ink)}
.btn--ink{background:var(--bg); color:var(--fg)}
.btn--ink:hover{transform:translateY(-2px)}
.head-cta{margin-left:8px}

/* mobile nav */
.nav-toggle{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.nav-toggle:focus-visible + .nav-burger{outline:3px solid var(--primary); outline-offset:3px}
.nav-burger{display:none}
@media (max-width:980px){
  .nav-burger{
    display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; margin-left:auto; cursor:pointer;
    border:1px solid var(--border); border-radius:var(--r-inner); color:var(--fg);
  }
  .nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    background:var(--bg); border-bottom:1px solid var(--border);
    flex-direction:column; align-items:stretch; padding:8px var(--pad) 18px;
  }
  .nav a{min-height:48px}
  .nav-toggle:checked ~ .nav{display:flex}
  .head-cta{display:none}
}

/* ---------- hero ---------- */
.hero{position:relative; border-bottom:1px solid var(--border); overflow:hidden}
.hero__grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); min-height:min(78vh,720px)}
.hero__copy{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(48px,7vw,96px) var(--pad) clamp(48px,7vw,96px) max(var(--pad),calc((100vw - 1380px)/2 + var(--pad)));
}
.hero__copy .lead{font-size:clamp(1rem,.5vw + .9rem,1.2rem); color:var(--muted-fg); max-width:52ch; margin-bottom:1.8em}
.hero__actions{display:flex; gap:14px; flex-wrap:wrap}
.hero__media{position:relative; min-height:340px}
.hero__media > *{position:absolute; inset:0; width:100%; height:100%}
.hero__media img{object-fit:cover; filter:saturate(.15) brightness(.72) contrast(1.05)}
.hero__media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, var(--bg) 0%, rgba(19,19,19,.55) 30%, transparent 65%);
}
@media (max-width:980px){
  .hero__media::after{background:linear-gradient(180deg, rgba(19,19,19,.35) 0%, transparent 40%, var(--bg) 100%)}
}

/* animated entrance — one authored moment, hero only */
@media (prefers-reduced-motion:no-preference){
  .hero__copy > *{animation:rise .7s var(--ease) both}
  .hero__copy > :nth-child(2){animation-delay:.07s}
  .hero__copy > :nth-child(3){animation-delay:.14s}
  .hero__copy > :nth-child(4){animation-delay:.21s}
  @keyframes rise{from{opacity:.001; transform:translateY(18px)}}
}

/* ---------- photo slots (people photos removed by request) ---------- */
.slot{
  background:
    repeating-linear-gradient(-45deg, rgba(255,255,255,.045) 0 14px, transparent 14px 28px),
    var(--card);
  border:1px dashed var(--border-strong);
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:24px;
}
.slot__label{max-width:26ch}
.slot__label b{
  display:block; font-family:var(--display); font-size:1.15rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--fg); margin-bottom:.35em;
}
.slot__label span{font-size:.8rem; color:var(--muted-fg); line-height:1.5; display:block}
.slot--tall{min-height:340px}

/* ---------- goal strip ---------- */
.goals{border-bottom:1px solid var(--border)}
.goals__grid{display:grid; grid-template-columns:repeat(4,1fr)}
.goal{
  padding:clamp(22px,3vw,36px) clamp(18px,2.4vw,30px);
  border-left:1px solid var(--border);
}
.goal:first-child{border-left:0}
.goal h3{font-size:1.35rem; margin-bottom:.3em}
.goal p{font-size:.88rem; color:var(--muted-fg)}

/* ---------- service cards ---------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,26px)}
.card{
  position:relative; background:var(--card); border:1px solid var(--border);
  border-radius:var(--r-outer); overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .2s linear;
}
.card:hover{transform:translateY(-4px); box-shadow:var(--lift); border-color:var(--border-strong)}
.card__media{aspect-ratio:16/10; position:relative; overflow:hidden}
.card__media img{width:100%; height:100%; object-fit:cover; filter:saturate(.15) contrast(1.05); transition:filter .4s linear, transform .6s var(--ease)}
.card:hover .card__media img{filter:saturate(.6); transform:scale(1.03)}
.card__media .slot{position:absolute; inset:0}
.card__body{padding:clamp(20px,2.6vw,30px)}
.card__be{font-family:var(--display); font-size:2rem; line-height:1; letter-spacing:.02em; margin-bottom:.4rem}
.card__be b{font-weight:400; color:var(--primary)}
.card__body h3{font-size:1.22rem; letter-spacing:.05em; margin-bottom:.5em}
.card__body p{font-size:.92rem; color:var(--muted-fg)}
.rule{width:44px; height:3px; background:var(--primary); border:0; margin:0 0 1rem}

/* ---------- split section ---------- */
.split{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4.5vw,70px); align-items:center}
.split__media{display:grid; gap:16px}
.split__media .frame{border-radius:var(--r-outer); overflow:hidden; border:1px solid var(--border)}
.split__media img{width:100%; height:100%; object-fit:cover}

/* ---------- green band ---------- */
.band{background:var(--primary); color:var(--primary-ink)}
.band .kicker{color:var(--primary-ink); opacity:.72}
.band__grid{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,4vw,64px); align-items:start}
.band h2{margin-bottom:.2em}
.band p{color:rgba(0,0,0,.72)}
.gstars{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin:0 0 .9rem}
.gstars__score{font-family:var(--display); font-size:clamp(3.2rem,6vw,4.6rem); line-height:1}
.gstars__meta{font-size:.9rem; font-weight:600; color:rgba(0,0,0,.72)}
.gstars__meta .stars{color:var(--primary-ink); letter-spacing:2px; font-size:1.05rem; display:block}
.quotes{display:grid; gap:14px}
.quote{
  background:var(--bg); color:var(--fg); border-radius:var(--r-outer);
  padding:clamp(18px,2.4vw,28px); box-shadow:var(--lift);
}
.quote p{color:var(--fg); font-size:.95rem; margin-bottom:.9em}
.quote footer{font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--primary)}
.quote footer span{color:var(--muted-fg); letter-spacing:.06em}

/* ---------- CTA ---------- */
.cta{
  position:relative; text-align:center;
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(70,216,31,.14), transparent 70%),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.02) 0 18px, transparent 18px 36px),
    var(--bg);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.cta p{max-width:56ch; margin-left:auto; margin-right:auto; color:var(--muted-fg)}
.cta__actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:1.6rem}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--border); background:var(--bg)}
.site-foot__grid{
  display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:clamp(28px,4vw,64px);
  padding-top:clamp(44px,6vw,72px); padding-bottom:clamp(36px,5vw,56px);
}
.site-foot .foot-h{
  font-family:var(--display); font-size:1.25rem; letter-spacing:.08em; text-transform:uppercase;
  margin:0 0 .9rem; color:var(--fg);
}
.site-foot .foot-h::after{content:""; display:block; width:38px; height:3px; background:var(--primary); margin-top:10px}
.site-foot p, .site-foot li{color:var(--muted-fg); font-size:.92rem}
.site-foot ul{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.site-foot ul a{
  display:inline-flex; align-items:center; min-height:44px;
  color:var(--muted-fg); text-decoration:none; transition:color .16s linear;
}
.site-foot ul a:hover{color:var(--primary)}
.site-foot .brand img{height:52px; margin-bottom:14px}
.contact-lines{display:grid; gap:2px}
.contact-lines a{
  display:inline-flex; align-items:center; min-height:40px; gap:10px;
  color:var(--fg); text-decoration:none; font-weight:600;
}
.contact-lines a:hover{color:var(--primary)}
.foot-legal{
  border-top:1px solid var(--border); padding:20px 0 26px;
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-size:.78rem; color:var(--muted-fg);
}

/* ---------- page hero (interior pages) ---------- */
.page-hero{border-bottom:1px solid var(--border)}
.page-hero__grid{display:grid; grid-template-columns:1.1fr .9fr; min-height:min(56vh,520px)}
.page-hero__copy{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(44px,6vw,80px) var(--pad) clamp(44px,6vw,80px) max(var(--pad),calc((100vw - 1380px)/2 + var(--pad)));
}
.page-hero__copy .lead{color:var(--muted-fg); max-width:50ch; font-size:clamp(1rem,.4vw + .9rem,1.15rem)}
.page-hero__media{position:relative; min-height:280px}
.page-hero__media > *{position:absolute; inset:0; width:100%; height:100%}
.page-hero__media img{object-fit:cover}

/* ---------- misc ---------- */
.check-list{list-style:none; margin:0 0 1.4rem; padding:0; display:grid; gap:10px}
.check-list li{display:flex; gap:12px; align-items:baseline; color:var(--muted-fg)}
.check-list li::before{content:""; flex:0 0 10px; width:10px; height:10px; background:var(--primary); transform:translateY(1px)}
.badge-grid{display:flex; flex-wrap:wrap; gap:8px}
.badge{
  display:inline-flex; align-items:center; min-height:36px; padding:6px 13px;
  border:1px solid var(--border-strong); border-radius:999px;
  font-size:.8rem; font-weight:600; color:var(--fg); background:var(--card);
}
.note-demo{
  background:var(--card); border:1px solid var(--border-strong);
  border-radius:var(--r); padding:12px 16px; font-size:.8rem; color:var(--muted-fg);
  margin-top:2rem;
}
.note-demo::before{
  content:"Note"; display:block; font-family:var(--display);
  font-size:.85rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--primary); margin-bottom:4px;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

:focus-visible{outline:3px solid var(--primary); outline-offset:3px; border-radius:var(--r-inner)}
.band :focus-visible{outline-color:var(--primary-ink)}

/* ---------- forms ---------- */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.form-grid .full{grid-column:1/-1}
label.field{display:grid; gap:7px; font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-fg)}
.field input,.field select,.field textarea{
  width:100%; min-height:48px; padding:12px 14px;
  background:var(--card); color:var(--fg);
  border:1px solid var(--border-strong); border-radius:var(--r-inner);
  font-family:var(--sans); font-size:.95rem;
  transition:border-color .16s linear, background-color .16s linear;
}
.field textarea{min-height:130px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--primary); background:var(--muted)}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-fg); opacity:.7}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero__grid,.page-hero__grid{grid-template-columns:1fr}
  .hero__media,.page-hero__media{order:-1; min-height:240px}
  .hero__media .slot--tall{min-height:240px}
  .goals__grid{grid-template-columns:1fr 1fr}
  .goal:nth-child(3){border-left:0}
  .goal{border-top:1px solid var(--border)}
  .goal:nth-child(-n+2){border-top:0}
  .cards{grid-template-columns:1fr}
  .split,.band__grid{grid-template-columns:1fr}
  .site-foot__grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
  html{scroll-behavior:auto}
}

/* ---------- social buttons ---------- */
.socials{display:grid; gap:8px; margin-top:14px; justify-items:start}
a.social-btn{
  display:inline-flex; align-items:center; gap:10px;
  min-height:44px; padding:9px 14px;
  background:var(--card); border:1px solid var(--border-strong);
  border-radius:var(--r); color:var(--fg); text-decoration:none;
  font-size:.88rem; font-weight:600;
  transition:color .16s linear, border-color .16s linear, transform .28s var(--ease);
}
a.social-btn:hover{color:var(--primary); border-color:var(--primary); transform:translateY(-2px)}
a.social-btn svg{flex:0 0 auto}