/* ============================================================
   Ostinata — ostinata.com.au (v2: motion + repositioning)
   ============================================================ */

:root{
  --midnight:#0B1D2A;  /* primary dark surface — the harbour after dark */
  --ink:#12242F;       /* text & logo on light */
  --steel:#44586A;     /* secondary text, strokes */
  --mist:#93A6B3;      /* muted text on dark */
  --sail:#F5F7F8;      /* page background — cool white */
  --panel:#FFFFFF;     /* cards */
  --line:#E2E8EC;      /* borders */
  --vivid:#1FB6D5;     /* THE accent — the sign, links, primary CTA */
  --signal:#E23D6D;    /* reserved: form errors only */
  --path:#2A4356;      /* idle diagram strokes */
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:5.5rem;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

body{
  margin:0;
  font-family:'Inter',system-ui,sans-serif;
  font-weight:400;
  font-size:1.0625rem; /* 17px */
  line-height:1.6;
  color:var(--ink);
  background:var(--sail);
}

h1,h2,h3{
  font-family:'Space Grotesk',system-ui,sans-serif;
  letter-spacing:-0.01em;
  line-height:1.15;
  margin:0 0 1rem;
}
h1{
  font-weight:600;
  font-size:clamp(2.3rem,4.5vw + 1rem,3.7rem);
  line-height:1.12;
  max-width:18em;
}
h2{ font-weight:600; font-size:clamp(1.6rem,2.5vw + 0.8rem,2.3rem); }
h3{ font-weight:500; font-size:1.175rem; margin-bottom:0.5rem; }

p{ margin:0 0 1rem; max-width:65ch; }

a{ color:var(--vivid); }
a:hover{ color:#3CC4E0; }

:focus-visible{
  outline:2px solid var(--vivid);
  outline-offset:3px;
  border-radius:2px;
}

.container{
  max-width:70rem;
  margin:0 auto;
  padding:0 1.5rem;
}
.container.narrow{ max-width:52rem; }

/* ---------- Logo lockup (source of truth: brand README §2) ---------- */

.lk{
  display:inline-flex; align-items:center; white-space:nowrap;
  font-family:'Space Grotesk',system-ui,sans-serif; font-weight:500;
  letter-spacing:.09em; line-height:1; color:var(--ink);
}
.O{ position:relative; display:inline-block; }
.O svg{
  position:absolute; left:47%; top:50%;
  transform:translate(-50%,-50%);
  height:.40em; width:auto; display:block;
}
.lk--vivid .sign{ fill:var(--vivid); }
.lk--reversed{ color:var(--sail); }
.lk--mono-dark{ color:var(--sail); } /* mono: word and sign share one colour */

/* ---------- Surfaces ---------- */

.surface-dark{
  background:var(--midnight);
  color:var(--sail);
}
.surface-light{
  background:var(--sail);
  color:var(--ink);
}
section{ padding:5.5rem 0; }
.section-quiet{ padding:3.5rem 0 4.5rem; }

.lede{
  font-size:1.175rem;
  color:var(--steel);
  max-width:42rem;
}
.lede-on-dark{ color:var(--mist); }

/* ---------- Buttons ---------- */

.btn{
  display:inline-block;
  font-family:'Inter',system-ui,sans-serif;
  font-weight:600;
  font-size:1.0625rem;
  text-decoration:none;
  padding:0.85rem 1.8rem;
  border-radius:6px;
  border:1px solid transparent;
}
.btn-vivid{
  background:var(--vivid);
  color:var(--midnight);
}
.btn-vivid:hover{ background:#3CC4E0; color:var(--midnight); }
.btn-large{ padding:0.95rem 2.2rem; }

/* ---------- Header / nav (fixed) ---------- */

.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  background:rgba(11,29,42,0.78);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(147,166,179,0.14);
}
.nav{
  max-width:70rem;
  margin:0 auto;
  padding:1.1rem 1.5rem;
  display:flex;
  align-items:center;
  gap:2rem;
}
.nav-logo{
  text-decoration:none;
  font-size:1.35rem;
}
.nav-links{
  display:flex;
  gap:1.75rem;
  margin-left:auto;
}
.nav-links a{
  color:var(--sail);
  text-decoration:none;
  font-weight:500;
  font-size:0.95rem;
}
.nav-links a:hover{ color:var(--vivid); }
/* Nav CTA stays neutral — the hero button owns Vivid in this viewport */
.nav-cta{
  background:transparent;
  color:var(--sail);
  border-color:var(--steel);
  font-size:1rem;
  padding:0.65rem 1.4rem;
}
.nav-cta:hover{ border-color:var(--sail); color:var(--sail); }

/* ---------- Hero ---------- */

.hero{
  background:radial-gradient(70rem 40rem at 75% 20%, rgba(31,182,213,0.10), transparent 60%), var(--midnight);
  padding:10.5rem 0 5rem;
}
.hero-inner{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
  align-items:start;
  gap:3rem;
}
.hero-sub{
  font-size:1.175rem;
  color:var(--mist);
  margin:1.4rem 0 2.25rem;
  max-width:34rem;
}
.hero-actions{
  display:flex;
  align-items:center;
  gap:1.75rem;
  flex-wrap:wrap;
}
.link-quiet{
  color:var(--mist);
  text-decoration:none;
  font-weight:500;
}
.link-quiet:hover{ color:var(--sail); }

.hero-graphic{ min-width:0; align-self:start; }
.converge{ width:100%; height:auto; display:block; }
.cv-label{
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-size:12px;
  letter-spacing:2px;
  fill:var(--mist);
}
.cv-label--sail{ fill:var(--sail); }
.cv-path{ fill:none; stroke:var(--path); stroke-width:1.5; }
.cv-trunk{ fill:none; stroke:var(--vivid); stroke-width:2; }

/* ---------- Stats strip ---------- */

.stats{
  margin-top:4.5rem;
  padding-top:2.5rem;
  border-top:1px solid rgba(147,166,179,0.18);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:2rem;
}
.stat-num{
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-weight:600;
  font-size:2.6rem;
  color:var(--sail);
}
.stat-arrow{ color:var(--vivid); }
.stats p{
  margin:0.25rem 0 0;
  color:var(--mist);
  max-width:22rem;
}

/* ---------- Cards (services + audience) ---------- */

.feature-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.5rem;
  margin-top:3rem;
}
.audience-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.5rem;
  margin-top:2.5rem;
}
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:8px;
  padding:1.75rem;
  transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 30px rgba(11,29,42,0.08);
}
.card p{ color:var(--steel); margin:0; }

/* ---------- Testimonial carousel ---------- */

.carousel{ margin-top:4rem; }
.carousel-viewport{ overflow:hidden; }
.carousel-track{
  display:flex;
  width:300%;
  transition:transform 0.6s cubic-bezier(0.2,0.7,0.3,1);
}
.carousel-track figure{
  flex:0 0 33.3333%;
  margin:0;
  padding:0 0.25rem;
  box-sizing:border-box;
}
.carousel-track blockquote{
  margin:0;
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-weight:500;
  font-size:clamp(1.2rem,1.5vw + 0.8rem,1.6rem);
  line-height:1.4;
}
.carousel-track figcaption{
  margin-top:1.25rem;
  color:var(--mist);
  font-size:0.95rem;
}
.carousel-dots{
  display:flex;
  align-items:center;
  gap:0.6rem;
  margin-top:2rem;
}
.carousel-dots button{
  width:10px; height:10px;
  border-radius:50%;
  border:none;
  padding:0;
  cursor:pointer;
  background:var(--path);
  transition:background .3s, transform .3s;
}
.carousel-dots button.active{
  background:var(--vivid);
  transform:scale(1.25);
}

/* ---------- Steps (Section 5) ---------- */

.steps{
  display:flex;
  flex-wrap:wrap;
  gap:1rem 2.5rem;
  list-style:none;
  margin:2rem 0;
  padding:0;
}
.steps li{
  display:flex;
  align-items:center;
  gap:0.65rem;
}
.step-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.9rem; height:1.9rem;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--panel);
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-weight:500;
  font-size:0.9rem;
  color:var(--steel);
}
.step-name{
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-weight:500;
}
.pricing-note{ color:var(--steel); }

/* ---------- About (Section 6) ---------- */

.about{ border-top:1px solid var(--line); }
.about-inner{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:3rem;
  align-items:center;
}
.about-photo{ display:flex; justify-content:center; }
.about-photo img{
  width:220px; height:220px;
  border-radius:50%;
  object-fit:cover;
  object-position:50% 20%;
  filter:grayscale(1) contrast(1.02);
  background:var(--panel);
  border:1px solid var(--line);
  box-shadow:0 12px 30px rgba(11,29,42,0.10);
}
.about-copy p{ line-height:1.65; max-width:60ch; }
.about-byline{ color:var(--steel); margin:0; }

/* ---------- CTA band (Section 7) ---------- */

.cta-band{
  background:radial-gradient(50rem 26rem at 50% 120%, rgba(31,182,213,0.14), transparent 65%), var(--midnight);
  text-align:center;
}
.cta-band .lede{ margin-left:auto; margin-right:auto; max-width:38rem; }
.cta-band .btn{ margin-top:1.25rem; }

/* ---------- Footer ---------- */

.site-footer{
  background:var(--midnight);
  color:var(--mist);
  border-top:1px solid rgba(147,166,179,0.2);
  padding:2.5rem 0;
  font-size:0.9rem;
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  flex-wrap:wrap;
}
.footer-logo{ font-size:1.1rem; }
.footer-meta{
  display:flex;
  gap:1.75rem;
  flex-wrap:wrap;
  align-items:center;
}
.footer-meta a{ color:var(--mist); }
.footer-meta a:hover{ color:var(--sail); }

/* ---------- Motion (all guarded by prefers-reduced-motion) ---------- */

@media (prefers-reduced-motion: no-preference){

  /* Hero entrance — once, on load */
  .hero h1,
  .hero-copy .hero-sub,
  .hero-copy .hero-actions,
  .hero-graphic{
    animation:rise 0.8s cubic-bezier(0.2,0.7,0.3,1) both;
  }
  .hero-copy .hero-sub{ animation-delay:0.12s; }
  .hero-copy .hero-actions{ animation-delay:0.24s; }
  .hero-graphic{ animation-duration:0.9s; animation-delay:0.3s; }

  /* Logo metronome pulse (tick-tock) */
  .nav-logo .tick{ animation:metronome 1.8s ease-in-out infinite; }
  .nav-logo .tock{ animation:metronome 1.8s ease-in-out 0.9s infinite; }

  /* Converge graphic: path draw-in */
  .cv-path,
  .cv-trunk{
    stroke-dasharray:1;
    stroke-dashoffset:1;
    animation:draw 1.2s ease forwards;
  }
  .cv-path-1{ animation-delay:0.4s; }
  .cv-path-2{ animation-delay:0.55s; }
  .cv-path-3{ animation-delay:0.7s; }
  .cv-trunk{ animation-duration:0.8s; animation-delay:1.5s; }

  /* End-node dots: metronome + glow pulse */
  .cv-dot.tick{ animation:metronome 1.8s ease-in-out infinite, glowpulse 1.8s ease-in-out infinite; }
  .cv-dot.tock{ animation:metronome 1.8s ease-in-out 0.9s infinite, glowpulse 1.8s ease-in-out 0.9s infinite; }
}

@media (prefers-reduced-motion: reduce){
  /* SMIL ignores reduced-motion on its own — hide the travelling pulses */
  .cv-flow{ display:none; }
  .carousel-track{ transition:none; }
}

@keyframes rise{
  from{ opacity:0; transform:translateY(20px); }
  to{ opacity:1; transform:none; }
}
@keyframes metronome{
  0%,100%{ opacity:1; }
  50%{ opacity:.3; }
}
@keyframes draw{
  to{ stroke-dashoffset:0; }
}
@keyframes glowpulse{
  0%,100%{ filter:drop-shadow(0 0 4px rgba(31,182,213,.5)); }
  50%{ filter:drop-shadow(0 0 10px rgba(31,182,213,.95)); }
}

/* ---------- Responsive ---------- */

@media (max-width: 640px){
  section{ padding:3.5rem 0; }
  .hero{ padding:7.5rem 0 4rem; }
  .nav{ gap:1rem; }
  .nav-links{ display:none; }
  .nav-logo{ font-size:1.3rem; }
}