/* Big Idea Family Chiropractic — THE FOUR ACTS.
   Their tagline, "Wellness From Above Down Inside Out", names four movements.
   So the page has exactly four. Display type shrinks all the way down
   (72 → 46 → 34 → 30px) while body type PEAKS at INSIDE (20 → 19 → 21px)
   and then recedes in OUT: he proclaims, then leans in and talks, then
   lets you go. The field widens as the voice quietens.
   No rail, no readout, no instrument. The argument is typographic.
   Palette, logo and display face are the clinic's own, pushed. */

:root{
  --petrol:#0C3A4C;
  --petrol-deep:#07222E;
  --blue:#346FB1;
  --teal:#38ACB3;
  --green:#31AD67;
  --paper:#F7F5EF;
  --paper-warm:#EFEBE1;
  --ink:#16232B;
  --ink-soft:#4A5A63;

  --nav-x:48px;            /* tier 1 — hugs the edge */
  --hero-x:132px;          /* tier 2 */
  --body-x:190px;          /* tier 3 */

  --display:'Josefin Sans',system-ui,sans-serif;
  --serif:'Source Serif 4',Georgia,serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-size:19px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit}
section{scroll-margin-top:92px}
p{margin:0 0 22px; text-wrap:pretty}

/* ---------------- nav ---------------- */
.nav{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:32px;
  padding:14px var(--nav-x);
  background:rgba(247,245,239,.9); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(12,58,76,.10);
}
.nav__mark img{height:46px; width:auto}
.nav__links{display:flex; gap:28px; margin-left:auto}
.nav__links a{
  font-family:var(--display); font-weight:600; font-size:15px;
  letter-spacing:.02em; text-decoration:none; color:var(--ink-soft);
  padding:6px 0; border-bottom:2px solid transparent; transition:.22s var(--ease);
}
.nav__links a:hover{color:var(--petrol); border-bottom-color:var(--teal)}
.nav__act{display:flex; align-items:center; gap:20px}
.nav__tel{font-family:var(--display); font-weight:600; font-size:15px; text-decoration:none; color:var(--petrol)}
.nav__tel:hover{color:var(--teal)}

/* ---------------- buttons: ONE action per screen ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:600; font-size:17px; letter-spacing:.01em;
  text-decoration:none; color:#fff; background:var(--petrol);
  padding:15px 30px; border-radius:999px; border:0;
  box-shadow:0 8px 22px -12px rgba(7,34,46,.7);
  transition:transform .2s var(--ease), background .2s var(--ease);
}
.btn:hover{background:var(--teal); color:var(--petrol-deep); transform:translateY(-2px)}
.btn--sm{padding:9px 20px; font-size:15px}
/* dark ink on their own cyan clears ~6:1 — white on cyan would not */
.hero .btn,.btn--lg{background:var(--teal); color:var(--petrol-deep)}
.hero .btn:hover,.btn--lg:hover{background:#8FD8DA; color:var(--petrol-deep)}
.btn--lg{padding:18px 36px; font-size:18px}

/* the secondary action is a sentence, not a ghost button */
.linky{
  font-family:var(--serif); font-style:italic; font-size:17px;
  color:rgba(219,236,235,.82); text-decoration:none; transition:.2s var(--ease);
}
.linky:hover{color:var(--teal)}
.linky--big{font-size:18px}

/* ═══════════ ACT I · ABOVE — the sky ═══════════ */
.hero{
  position:relative;
  background:
    radial-gradient(120% 90% at 14% -12%, #15556E 0%, transparent 60%),
    linear-gradient(178deg,var(--petrol) 0%,var(--petrol-deep) 100%);
  color:#F2F7F6;
  padding:96px var(--nav-x) 104px var(--hero-x);
  min-height:86vh; display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
}
.hero::before{      /* ambient: light drifts across the sky. no numbers, no gadget. */
  content:''; position:absolute; inset:-30% -10% auto -10%; height:130%;
  background:radial-gradient(46% 42% at 30% 30%, rgba(56,172,179,.17), transparent 70%);
  animation:sky 44s ease-in-out infinite alternate; pointer-events:none;
}
@keyframes sky{ from{transform:translate3d(-4%,0,0) scale(1)} to{transform:translate3d(10%,5%,0) scale(1.14)} }

/* The doctor IS the sky — bled off the right edge and dissolved into the petrol,
   never a photo in a column beside the copy. He breathes: a slow, real scale.
   The whole strategy is "trust this man", so the man gets the room. */
.sky{
  position:absolute; inset:0 0 0 auto; width:58%; margin:0; z-index:1;
  overflow:hidden; pointer-events:none;
}
.sky img{
  width:100%; height:100%; object-fit:cover; object-position:38% 22%;
  filter:saturate(.78) contrast(1.04) brightness(.9);
  animation:breathe 7s var(--ease) infinite;
  transform-origin:60% 40%;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 22%, #000 62%),
    linear-gradient(180deg, transparent 0%, #000 16%, #000 74%, transparent 100%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
  mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 22%, #000 62%),
    linear-gradient(180deg, transparent 0%, #000 16%, #000 74%, transparent 100%);
}
.sky::after{  /* duotone him toward the sky's own colour — uniform, so no edge */
  content:''; position:absolute; inset:0; z-index:2;
  background:var(--petrol); mix-blend-mode:color; opacity:.52;
}
/* the scrim spans the ENTIRE hero, so the photo dissolves instead of butting a seam */
.hero::after{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(97deg,
    var(--petrol) 0%, rgba(12,58,76,.94) 24%, rgba(12,58,76,.62) 42%,
    rgba(12,58,76,.22) 56%, transparent 68%);
}
@keyframes breathe{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.018)} }

/* the phone keeps the face as a portrait medallion */
.crown{display:none; margin:0 0 32px; position:relative; width:132px; height:132px; z-index:3}
.crown img{
  width:132px; height:132px; border-radius:50%; object-fit:cover;
  border:2px solid rgba(255,255,255,.34);
  box-shadow:0 20px 44px -20px rgba(0,0,0,.7); position:relative; z-index:2;
}
.crown__breath{      /* ambient: a resting breath — the body working, untouched */
  position:absolute; inset:-12px; border-radius:50%; z-index:1;
  border:1.5px solid rgba(56,172,179,.7);
  animation:breath 6.5s var(--ease) infinite;
}
@keyframes breath{ 0%,100%{transform:scale(1); opacity:.72} 50%{transform:scale(1.09); opacity:.06} }

.hero__h1{
  position:relative; z-index:3;
  font-family:var(--display); font-weight:700;
  font-size:clamp(48px,4.9vw,72px); line-height:1.02; letter-spacing:-.02em;
  margin:0 0 26px; max-width:13ch; text-wrap:balance; color:#fff;
}
.hero__lede{
  position:relative; z-index:3;
  font-size:20px; line-height:1.6; margin:0 0 38px;
  max-width:50ch; color:rgba(236,244,243,.88);
}
.hero__cta{position:relative; z-index:3; display:flex; align-items:center; gap:26px; flex-wrap:wrap}
.hero__meta{
  position:relative; z-index:3; margin:36px 0 0;
  font-family:var(--display); font-size:14px; letter-spacing:.13em;
  text-transform:uppercase; color:rgba(236,244,243,.46);
}

/* ═══════════ THE ACT PLATES — the page breaks, four times ═══════════ */
.act{
  position:relative; padding:104px var(--nav-x) 90px var(--body-x);
  border-top:1px solid rgba(12,58,76,.13);
  background:var(--paper);
}
.act__n{
  margin:0 0 8px; font-family:var(--display); font-weight:600; font-size:12px;
  letter-spacing:.28em; text-transform:uppercase; color:var(--teal);
}
.act__w{
  margin:0; font-family:var(--display); font-weight:700;
  font-size:clamp(76px,15vw,220px); line-height:.86; letter-spacing:-.045em;
  color:var(--petrol);
}
.act__g{
  margin:24px 0 0; max-width:36ch; font-style:italic; font-size:19px;
  color:var(--ink-soft);
}
.act--inside{background:var(--petrol); border-top-color:rgba(255,255,255,.14)}
.act--inside .act__w{color:#fff}
.act--inside .act__g{color:rgba(236,244,243,.68)}
.act--out{background:var(--paper-warm)}
.act--out .act__w{   /* the last word is hollow — you are leaving */
  color:transparent; -webkit-text-stroke:2px var(--petrol);
}

/* ═══════════ THE SCENES — display shrinks, body grows, field widens ═══════════ */
.scene{position:relative; padding:0 var(--nav-x) 116px var(--body-x); background:var(--paper)}
.col > p{max-width:var(--m,56ch)}

.h2{
  font-family:var(--display); font-weight:700; line-height:1.1; letter-spacing:-.014em;
  color:var(--petrol); margin:0 0 26px; max-width:780px; text-wrap:balance;
  font-size:clamp(34px,3.1vw,46px);
}
.h2--turn{margin-top:76px}
.h2--gap{margin-top:80px}

/* ACT II · DOWN — proclamation cooling into prose */
.scene--down{--m:54ch}
/* no drop cap: Josefin's capital I is a bare stem and reads as a rule, not a letter.
   The act's opening paragraph carries the weight instead — the inversion starting. */
.drop{font-size:23px; line-height:1.55; color:var(--petrol); max-width:46ch !important}
.note{margin:46px 0 0; max-width:48ch; padding:22px 26px; background:var(--paper-warm); border-left:2px solid var(--green)}
.note p{margin:0; font-size:17px; font-style:italic; color:var(--ink-soft)}
.note b{font-style:normal; color:var(--petrol)}

.creds{list-style:none; margin:56px 0 0; padding:0; max-width:720px; border-top:1px solid rgba(12,58,76,.14)}
.creds li{display:flex; justify-content:space-between; align-items:baseline; gap:24px; padding:15px 0; border-bottom:1px solid rgba(12,58,76,.10)}
.creds span{font-family:var(--display); font-weight:600; font-size:17px; color:var(--petrol)}
.creds em{font-style:normal; font-size:14px; color:var(--ink-soft); text-align:right; flex:0 0 auto; max-width:46%}

/* ACT III · INSIDE — smallest headings, LARGEST body. he stops proclaiming and talks. */
.scene--inside{
  --m:58ch;
  background:linear-gradient(178deg,var(--petrol) 0%,#0E4A5F 100%);
  color:rgba(240,247,246,.84);
}
.scene--inside p{font-size:21px; line-height:1.66}
.h2--quiet{font-size:clamp(28px,2.3vw,34px); color:#fff; font-weight:600; letter-spacing:-.008em}

.vows{list-style:none; counter-reset:v; margin:0; padding:0; max-width:58ch}
.vows li{counter-increment:v; position:relative; padding:0 0 30px 62px; margin-bottom:30px; border-bottom:1px solid rgba(255,255,255,.13)}
.vows li:last-of-type{border-bottom:0; margin-bottom:0; padding-bottom:0}
.vows li::before{
  content:counter(v); position:absolute; left:0; top:-2px;
  font-family:var(--display); font-weight:700; font-size:15px;
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  color:var(--teal); border:1.5px solid rgba(56,172,179,.5);
}
.vows b{display:block; font-family:var(--display); font-weight:600; font-size:22px; color:#fff; margin-bottom:10px}
.vows p{margin:0; font-size:19px; color:rgba(240,247,246,.76)}

/* ACT IV · OUT — the widest field, the smallest type */
.scene--out{background:var(--paper-warm)}
.wide{max-width:1120px}
.h2--small{font-size:clamp(26px,2vw,30px); font-weight:600}
.sub{color:var(--ink-soft); max-width:56ch; font-size:18px}

/* 12 tags on an exact 4-col grid: a last row can never dangle */
.tags{list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:34px 0 0; padding:0}
.tags li{
  font-family:var(--display); font-weight:600; font-size:15px;
  padding:12px 16px; border-radius:999px; text-align:center;
  background:var(--paper); border:1px solid rgba(12,58,76,.16); color:var(--petrol);
  transition:.2s var(--ease);
}
.tags li:hover{border-color:var(--teal); color:var(--teal); transform:translateY(-1px)}

.svc{display:grid; grid-template-columns:repeat(3,1fr); gap:34px 40px; margin-top:34px}
.svc div{border-top:2px solid var(--green); padding-top:16px}
.svc div:nth-child(3n+2){border-top-color:var(--teal)}
.svc div:nth-child(3n){border-top-color:var(--blue)}
.svc b{display:block; font-family:var(--display); font-weight:600; font-size:18px; color:var(--petrol); margin-bottom:7px}
.svc p{margin:0; font-size:16px; color:var(--ink-soft)}

/* ═══════════ the close ═══════════ */
.out{position:relative; background:var(--petrol-deep); color:rgba(236,244,243,.78); padding:104px var(--nav-x) 46px}
.out__grad{position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--green),var(--teal),var(--blue))}
.out__lead{display:flex; align-items:center; gap:30px; flex-wrap:wrap; padding-bottom:64px; border-bottom:1px solid rgba(255,255,255,.13)}
.out__h{
  font-family:var(--display); font-weight:700; color:#fff;
  font-size:clamp(32px,3.4vw,50px); line-height:1.06; letter-spacing:-.015em;
  margin:0 auto 0 0; max-width:15ch; text-wrap:balance;
}
.out__cols{display:grid; grid-template-columns:repeat(3,1fr); gap:44px; padding:64px 0 56px}
.out__k{font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--teal); margin:0 0 16px}
.out__cols p{margin:0 0 16px; font-size:16px; line-height:1.65; hyphens:none}
.out__cols a{color:rgba(236,244,243,.9); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.2)}
.out__cols a:hover{color:var(--teal)}
.out__cols em{font-style:normal; color:var(--teal)}
.out__fine{font-size:14px !important; color:rgba(236,244,243,.5)}
.out__base{
  margin:0; padding-top:26px; border-top:1px solid rgba(255,255,255,.1);
  font-family:var(--display); font-size:13px; letter-spacing:.09em;
  text-transform:uppercase; color:rgba(236,244,243,.4);
}

/* below the fold, the four words rise as you reach them — the page's only
   scroll-tied motion, and it carries the conceit rather than decorating it */
[data-rise]{opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
[data-rise].is-in{opacity:1; transform:none}
.no-js [data-rise]{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  [data-rise]{opacity:1 !important; transform:none !important}
}

/* ═══════════ phones — the four acts ARE the signature, so they survive ═══════════ */
@media (max-width:900px){
  :root{--nav-x:20px; --hero-x:26px; --body-x:26px}
  body{font-size:17px}
  .nav{gap:14px; padding:11px var(--nav-x)}
  .nav__mark img{height:36px}
  .nav__links{display:none}
  .nav__act{margin-left:auto; gap:12px}
  .nav__tel{display:none}

  /* the claim ribbon lives at the bottom on phones — the hero CTA must clear it */
  .hero{padding:30px 22px 64px var(--hero-x); min-height:auto; justify-content:flex-start}
  .sky{display:none}
  .crown{display:block; width:100px; height:100px; margin-bottom:20px}
  .crown img{width:100px; height:100px}
  .hero__h1{font-size:44px; line-height:1.04; max-width:none; margin-bottom:14px}
  .hero__lede{font-size:16px; line-height:1.5; max-width:none; margin-bottom:22px}
  .hero__h1{max-width:none}
  .hero__cta{gap:16px}
  .hero__meta{font-size:12px; letter-spacing:.1em; margin-top:26px}

  .act{padding:66px 22px 54px var(--body-x)}
  .act__w{font-size:min(22vw,100px)}
  .act__g{font-size:17px; max-width:none; margin-top:16px}
  .act--out .act__w{-webkit-text-stroke-width:1.5px}

  .scene{padding:0 22px 74px var(--body-x)}
  .col > p,.vows,.sub{max-width:none}
  .h2,.h2--quiet,.h2--small{font-size:28px}
  .h2--turn,.h2--gap{margin-top:54px}
  .scene--inside p{font-size:18px}
  .vows p{font-size:17px}
  .drop{font-size:19px; max-width:none !important}
  .note{max-width:none; padding:18px 20px}
  .creds li{flex-direction:column; align-items:flex-start; gap:3px}
  .creds em{text-align:left; max-width:none}
  .vows li{padding-left:0; padding-top:54px}
  .vows li::before{top:0}
  .vows b{font-size:19px}
  .tags{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tags li{font-size:14px; padding:10px 12px}
  .svc{grid-template-columns:1fr; gap:28px}

  .out{padding:72px 22px 34px}
  .out__lead{padding-bottom:44px; gap:20px}
  .out__h{font-size:30px; max-width:none; flex:1 1 100%}
  .btn--lg{padding:15px 28px; font-size:17px}
  .out__cols{grid-template-columns:1fr; gap:34px; padding:44px 0 38px}
}