/* ============ TOKENS ============
   Light always. The site does not follow the visitor's dark mode. */
:root{
  color-scheme: light;
  /* Keaney — the two URI blues. Navy carries text and buttons; Keaney blue is the bright one. */
  --ground:#F7FAFD; --panel:#FFFFFF; --edge:#DBE7F3;
  --ink:#002147; --ink-soft:#3A5478; --ink-mute:#7A8DA6;
  --accent:#002147; --accent-bright:#2277B3; --accent-2:#2277B3; --accent-2-ink:#1A6296;
  --accent-soft:#C0DDF2; --accent-ink:#FFFFFF;
  --wash-a:#D8EAFA; --wash-b:#EEF6FD; --glow:#FDD79A;
  --gold:#FDC055; --gold-soft:#FDE6BC; --gold-ink:#95660C;
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"Karla","Helvetica Neue",Arial,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"EB Garamond",Georgia,"Times New Roman",serif; font-weight:500; text-wrap:balance; margin:0;}
h1{font-size:clamp(2.6rem,5.8vw,4.2rem); line-height:1.06; letter-spacing:-.008em;}
h2{font-size:clamp(1.8rem,3.4vw,2.6rem); line-height:1.16;}
h3{font-size:1.3rem; line-height:1.28;}
p{margin:0;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--glow); outline-offset:3px; border-radius:2px;}

.wrap{max-width:1080px; margin:0 auto; padding:0 clamp(20px,5vw,40px);}
.prose{max-width:63ch;}
.wrap.prose{max-width:1080px;}
.lede{font-size:clamp(1.05rem,1.7vw,1.2rem); color:var(--ink-soft); max-width:56ch;}
.eyebrow{
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-2-ink); font-weight:700;
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; height:1px; width:22px; background:var(--gold); flex:none;}

/* ---- header ---- */
header{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--edge);
}
.bar{display:flex; align-items:center; gap:24px; min-height:68px; flex-wrap:wrap; padding-block:10px;}
.mark{display:flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto;}
.mark-img{width:46px; height:46px; object-fit:contain; flex:none;}
.lockup{display:flex; flex-direction:column; gap:3px;}
.mark b{font-family:"Cinzel",Georgia,serif; font-weight:600; font-size:1.06rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink); line-height:1;}
.mark .tag{display:flex; align-items:center; gap:7px; font-size:.6rem; font-weight:700;
  letter-spacing:.19em; text-transform:uppercase; color:var(--accent-bright); line-height:1;}
.mark .tag::before, .mark .tag::after{content:""; height:1px; width:12px; background:var(--gold); flex:none;}
nav{display:flex; gap:2px; flex-wrap:wrap;}
nav button{
  font:inherit; font-size:.88rem; color:var(--ink-soft); background:none; border:0;
  padding:7px 11px; border-radius:999px; cursor:pointer; white-space:nowrap;
}
nav button:hover{color:var(--ink); background:var(--accent-soft);}
nav button[aria-current="page"]{color:var(--accent); background:var(--accent-soft); font-weight:600;}

/* ---- hero ---- */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--edge);
  background:
    radial-gradient(46% 66% at 90% 0%, color-mix(in srgb, var(--glow) 72%, transparent) 0%, transparent 70%),
    radial-gradient(70% 90% at 8% 96%, color-mix(in srgb, var(--wash-b) 92%, transparent) 0%, transparent 70%),
    linear-gradient(112deg, var(--wash-a) 0%, var(--wash-b) 58%, var(--panel) 100%);}
.hero::after{content:""; position:absolute; inset:auto 0 0 0; height:120px;
  background:linear-gradient(180deg,transparent,var(--ground)); pointer-events:none;}
.hero .wrap{position:relative; padding-top:clamp(64px,10vw,112px); padding-bottom:clamp(56px,9vw,96px);}
.hero .prose{max-width:56ch;}
.hero h1{margin:14px 0 20px;}
.hero .lede{font-size:clamp(1.05rem,1.7vw,1.2rem); color:var(--ink-soft); max-width:52ch;}
.ripple{position:absolute; right:2%; top:50%; transform:translateY(-50%);
  width:min(440px,42vw); pointer-events:none; opacity:.96;
  animation:breathe 11s ease-in-out infinite;}
@keyframes breathe{0%,100%{transform:translateY(-50%) scale(1);} 50%{transform:translateY(-50%) scale(1.035);}}

/* ---- buttons ---- */
.actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:30px;}
.btn{
  font:inherit; font-size:.94rem; font-weight:600; cursor:pointer; text-decoration:none;
  padding:12px 24px; border-radius:999px; border:1px solid transparent; display:inline-block;
  transition:transform .18s ease, opacity .18s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--accent); color:var(--accent-ink);
  box-shadow:0 6px 18px -8px color-mix(in srgb, var(--accent) 70%, transparent);}
.btn-primary:hover{box-shadow:0 10px 22px -8px color-mix(in srgb, var(--accent) 70%, transparent);}
.btn-quiet{border-color:var(--edge); color:var(--ink); background:transparent;}
.btn-quiet:hover{border-color:var(--accent); color:var(--accent);}

/* ---- sections ---- */
main{display:block;}
.page{display:none;}
.page.on{display:block; animation:rise .5s ease both;}
@keyframes rise{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
section{padding-block:clamp(48px,7vw,84px);}
section + section{border-top:1px solid var(--edge);}
.page{overflow-x:clip;}
.page-head{padding-block:clamp(52px,7vw,84px) clamp(36px,5vw,52px); position:relative;}
.page-head::before{content:""; position:absolute; top:0; bottom:0; left:calc(-50vw + 50%); width:100vw;
  z-index:-1; border-bottom:1px solid var(--edge);
  background:
    radial-gradient(52% 90% at 88% 0%, var(--glow) 0%, transparent 68%),
    linear-gradient(112deg, var(--wash-a) 0%, var(--wash-b) 62%, var(--panel) 100%);}
.page-head h1{font-size:clamp(2rem,4.2vw,3rem); margin:12px 0 18px; max-width:21ch;}
.page-head p:not(.eyebrow){max-width:60ch;}
.hl{color:var(--accent);}
.stack{display:flex; flex-direction:column; gap:22px;}
.section-title{margin-bottom:26px;}

/* ---- three blocks ---- */
.trio{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
.card{background:var(--panel); border:1px solid var(--edge); border-radius:14px; padding:28px 26px;
  display:flex; flex-direction:column; gap:10px;
  box-shadow:0 10px 24px -20px rgba(20,40,30,.55);
  transition:transform .2s ease, border-color .2s ease;}
.card:hover{transform:translateY(-3px); border-color:var(--accent);}
.card h3{color:var(--accent);}
.card p{color:var(--ink-soft); font-size:.97rem;}

/* ---- values / detail rows ---- */
.rows{display:flex; flex-direction:column; border-top:1px solid var(--edge); max-width:760px;}
.row{display:grid; grid-template-columns:minmax(140px,190px) 1fr; gap:8px 28px;
  padding:18px 2px; border-bottom:1px solid var(--edge); align-items:baseline;}
.row dt{font-weight:600; font-size:.86rem; letter-spacing:.09em; text-transform:uppercase; color:var(--accent); margin:0;}
.row dd{margin:0; color:var(--ink-soft);}
@media (max-width:620px){ .row{grid-template-columns:1fr;} }

/* ---- quote / pull ---- */
.pull{
  font-family:"EB Garamond",Georgia,serif; font-style:italic; font-weight:300;
  font-size:clamp(1.35rem,2.6vw,1.8rem); line-height:1.4; color:var(--ink);
  max-width:34ch; padding-left:24px; border-left:3px solid transparent;
  border-image:linear-gradient(180deg,var(--gold),var(--accent)) 1;
}

/* ---- split ---- */
.split{display:grid; gap:clamp(28px,5vw,64px); grid-template-columns:1fr; align-items:start;}
.split.center{align-items:center;}
@media (min-width:860px){ .split{grid-template-columns:1fr 1fr;} .split.narrow-left{grid-template-columns:.85fr 1.15fr;} }

/* ---- band ---- */
.band{border-top:1px solid var(--edge); border-bottom:1px solid var(--edge);
  background:linear-gradient(165deg, var(--wash-b) 0%, color-mix(in srgb, var(--wash-a) 55%, var(--panel)) 100%);}
.cta-band{text-align:center;
  background:
    radial-gradient(60% 120% at 50% 0%, var(--glow) 0%, transparent 62%),
    linear-gradient(115deg, var(--wash-a), var(--wash-b));}
.cta-band .actions{justify-content:center;}
.cta-band h2{margin-bottom:14px;}
.cta-band p{color:var(--ink-soft); margin-inline:auto; max-width:52ch;}

/* ---- list ---- */
ul.plain{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; max-width:60ch;}
ul.plain li{padding-left:26px; position:relative; color:var(--ink-soft);}
ul.plain li::before{content:""; position:absolute; left:0; top:.62em; width:9px; height:9px;
  border-radius:50%; border:1.5px solid var(--accent); background:var(--accent-2); box-shadow:0 0 0 3px var(--accent-soft);}
ul.plain li b{color:var(--ink); font-weight:600;}

/* ---- urgent contact block (funerals) ---- */
.urgent{border:1px solid var(--gold); border-radius:16px; padding:26px 28px; background:var(--panel);
  display:flex; flex-wrap:wrap; gap:18px 34px; align-items:center;
  box-shadow:0 16px 34px -26px rgba(30,50,40,.5);}
.urgent .num{font-family:"EB Garamond",Georgia,serif; font-size:clamp(1.7rem,3.4vw,2.3rem); color:var(--accent);
  line-height:1.1; font-variant-numeric:tabular-nums;}
.urgent .say{color:var(--ink-soft); font-size:.97rem; max-width:34ch;}

/* ---- numbered steps ---- */
.steps{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); counter-reset:step;}
.step{position:relative; padding-top:16px; border-top:2px solid var(--gold);}
.step::before{counter-increment:step; content:counter(step);
  font-family:"EB Garamond",Georgia,serif; font-size:1.5rem; color:var(--accent); display:block; margin-bottom:4px;}
.step h3{font-size:1.05rem; margin-bottom:6px;}
.step p{color:var(--ink-soft); font-size:.95rem;}

/* ---- background timeline ---- */
.timeline{display:grid; gap:30px 40px; grid-template-columns:repeat(auto-fit,minmax(268px,1fr));}
.tl h3{font-size:1.05rem; color:var(--accent); margin-bottom:6px;}
.tl-item{display:grid; grid-template-columns:88px 1fr; gap:2px 14px; padding:11px 0;
  border-top:1px solid var(--edge); align-items:baseline;}
.tl-item .yr{font-size:.78rem; font-weight:700; letter-spacing:.05em; color:var(--ink-mute);
  font-variant-numeric:tabular-nums; white-space:nowrap;}
.tl-item .what{font-size:.95rem; color:var(--ink);}
.tl-item .what span{display:block; color:var(--ink-soft); font-size:.88rem;}
@media (max-width:420px){ .tl-item{grid-template-columns:1fr;} }

/* ---- photography ---- */
.portrait{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:16px; display:block;
  box-shadow:0 22px 44px -28px rgba(30,50,40,.55);}
.portrait-wrap{position:relative; max-width:420px;}
.portrait-wrap::before{content:""; position:absolute; inset:20px -20px -20px 20px; border-radius:18px;
  background:linear-gradient(150deg,var(--wash-a),var(--accent-soft)); z-index:-1;}
figure{margin:0; display:flex; flex-direction:column; gap:10px;}
figure img.wide{width:100%; aspect-ratio:2/1; object-fit:cover; border-radius:16px; display:block;
  box-shadow:0 22px 44px -30px rgba(30,50,40,.5);}
figcaption{font-size:.85rem; color:var(--ink-mute);}

/* ---- fill-in placeholders ---- */
.fill{background:var(--accent-soft); color:var(--ink); border-bottom:1px dashed var(--accent);
  padding:0 4px; border-radius:3px; font-size:.94em;}

/* ---- booking widget stand-in ---- */
.widget{border:1.5px dashed var(--edge); border-radius:14px; padding:32px 26px; text-align:center;
  background:var(--panel); display:flex; flex-direction:column; gap:12px; align-items:center;}
.widget .eyebrow{color:var(--accent);}
.slots{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:6px;}
.slot{border:1px solid var(--edge); border-radius:8px; padding:8px 14px; font-size:.85rem; color:var(--ink-soft);
  font-variant-numeric:tabular-nums; background:var(--ground);}

/* ---- contact form mock ---- */
form.mock, form.live{display:flex; flex-direction:column; gap:14px; max-width:460px;}
form.mock label, form.live label{display:flex; flex-direction:column; gap:6px; font-size:.82rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute);}
form.mock input, form.mock textarea, form.live input, form.live textarea{
  font:inherit; font-size:1rem; color:var(--ink); background:var(--panel);
  border:1px solid var(--edge); border-radius:9px; padding:11px 13px;
}
form.mock textarea, form.live textarea{min-height:120px; resize:vertical;}

/* ---- footer ---- */
footer{border-top:1px solid var(--edge); background:var(--panel); padding-block:40px; margin-top:0;}
footer .wrap{display:flex; gap:24px; flex-wrap:wrap; justify-content:space-between; align-items:center;
  font-size:.85rem; color:var(--ink-mute);}
footer .fnav{display:flex; gap:16px; flex-wrap:wrap;}
footer button{font:inherit; font-size:.85rem; background:none; border:0; color:var(--ink-mute); cursor:pointer; padding:0;}
footer button:hover{color:var(--accent);}

@media (max-width:760px){
  .ripple{display:none;}   /* on phones the gradient carries it — rings would sit under the copy */
  .hero .wrap{padding-top:56px; padding-bottom:52px;}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}

/* --- live forms + booking embed --- */
.form-note{margin-top:10px; font-size:.92rem; min-height:1.2em; line-height:1.5;}
.form-note.ok{color:var(--accent);}
.form-note.err{color:#9B2C2C;}
form.live button[disabled]{opacity:.6; cursor:progress;}
.cal-embed{min-height:640px; width:100%; border:1px solid var(--edge); border-radius:14px;
  background:var(--panel); overflow:hidden;}
.cal-fallback{margin-top:10px; font-size:.9rem; color:var(--ink-soft);}
@media (max-width:760px){ .cal-embed{min-height:560px;} }

/* --- top-right action, credibility chips, photo captions --- */
.bar .mark{order:1;}
.bar-cta{order:2; margin-left:auto; display:flex; align-items:center; gap:14px;}
.bar nav{order:3; flex:1 1 100%; margin-top:2px;}
.btn-sm{padding:9px 20px; font-size:.86rem;}
@media (max-width:560px){ .btn-sm{padding:8px 16px; font-size:.82rem;} }

.cred{list-style:none; display:flex; flex-wrap:wrap; gap:8px 10px; margin:28px 0 0; padding:0;}
.cred li{font-size:.79rem; font-weight:600; color:var(--ink-soft); background:var(--panel);
  border:1px solid var(--edge); border-radius:999px; padding:7px 14px; line-height:1.2;}
@media (max-width:560px){ .cred{gap:7px 8px;} .cred li{font-size:.74rem; padding:6px 11px;} }

/* chips can run wider than the prose column */
.hero .cred{max-width:min(660px,100%);}
/* keep the header to one compact row on phones so the headline stays above the fold */
@media (max-width:600px){
  .bar{gap:10px; min-height:56px;}
  .mark{gap:9px;}
  .mark-img{width:34px; height:34px;}
  .mark b{font-size:.88rem; letter-spacing:.1em;}
  .mark .tag{font-size:.5rem; letter-spacing:.14em;}
  .mark .tag::before, .mark .tag::after{width:8px;}
  .btn-sm{padding:8px 14px; font-size:.78rem;}
  .bar nav{gap:2px; margin-top:0;}
  .bar nav button{font-size:.82rem; padding:6px 9px;}
}

/* the mark repeats in every page hero, sized to the band and set behind the copy */
.page-head .ripple{
  height:78%; width:auto; max-width:42vw; max-height:clamp(210px,26vw,360px);
  right:calc((100% - 100vw)/2 + 2vw); left:auto;
  top:50%; transform:translateY(-50%);
  z-index:-1; opacity:.9;
}
@media (max-width:980px){ .page-head .ripple{display:none;} }

/* --- real links replace the old in-page buttons --- */
nav a{font:inherit; font-size:.88rem; color:var(--ink-soft); text-decoration:none;
  padding:7px 11px; border-radius:999px; white-space:nowrap; display:inline-block;}
nav a:hover{color:var(--ink); background:var(--accent-soft);}
nav a[aria-current="page"]{color:var(--accent); background:var(--accent-soft); font-weight:600;}
.fnav a{font:inherit; font-size:.85rem; color:var(--ink-mute); text-decoration:none;
  background:none; border:0; padding:0 10px 0 0;}
.fnav a:hover{color:var(--accent); text-decoration:underline;}
@media (max-width:600px){ .bar nav a{font-size:.82rem; padding:6px 9px;} }

/* ============================================================
   Meet the founder — promoted to a full-width, larger opener
   ============================================================ */
.founder-head{margin-bottom:clamp(26px,4vw,44px);}
.founder-head .eyebrow{font-size:.86rem; letter-spacing:.22em; color:var(--accent);}
.founder-head .eyebrow::before{width:40px; height:2px;}
.founder-name{
  font-size:clamp(2.4rem,5.2vw,3.9rem); line-height:1.04;
  letter-spacing:-.012em; margin:14px 0 0;
}
.founder-role{
  margin-top:12px; font-size:clamp(.86rem,1.5vw,1.02rem); font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-mute);
}
.founder .portrait-wrap{max-width:460px;}
@media (max-width:860px){
  .founder-head{margin-bottom:24px;}
  .founder-name{font-size:clamp(2rem,8.4vw,2.8rem);}
  .founder-role{letter-spacing:.1em; font-size:.8rem;}
  .founder .portrait-wrap{max-width:100%; margin-inline:auto;}
}

/* sermon podcast link */
.listen{margin:6px 0 2px; font-size:.95rem;}
.listen a{color:var(--accent); font-weight:600; text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--accent) 40%, transparent);}
.listen a:hover{border-bottom-color:var(--accent);}
.listen span{color:var(--ink-mute); font-size:.88rem;}
@media (max-width:560px){ .listen span{display:block; margin-top:3px;} }

/* tap-to-call */
.urgent .num a{color:inherit; text-decoration:none;
  border-bottom:2px solid color-mix(in srgb, var(--accent) 35%, transparent);}
.urgent .num a:hover{border-bottom-color:var(--accent);}

/* ============================================================
   Phone / desktop tuning
   ============================================================ */

/* --- phones (≤600px) --- */
@media (max-width:600px){
  body{font-size:16px;}
  h1{font-size:clamp(2.05rem,8.8vw,2.7rem); line-height:1.1;}
  h2{font-size:clamp(1.6rem,6.6vw,2.1rem);}
  .page-head h1{font-size:clamp(1.9rem,8vw,2.5rem); max-width:none;}
  .lede, .hero .lede{font-size:1.02rem; max-width:none;}

  /* nav: one swipeable row instead of three wrapped ones,
     so the headline and CTA stay above the fold */
  .bar nav{
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    margin-inline:calc(clamp(20px,5vw,40px) * -1);
    padding-inline:clamp(20px,5vw,40px);
    scroll-padding-inline:clamp(20px,5vw,40px);
  }
  .bar nav::-webkit-scrollbar{display:none;}
  .bar nav a{flex:none;}

  .hero .wrap{padding-top:44px; padding-bottom:42px;}
  .hero .actions{gap:10px;}
  .hero .actions .btn{flex:1 1 auto; text-align:center; justify-content:center;}
  .cred{margin-top:22px;}

  .portrait-wrap{max-width:100%; margin-inline:auto;}
  .portrait-wrap::before{inset:14px -12px -14px 14px;}

  .urgent{padding:22px 20px;}
  .urgent .num{font-size:1.95rem;}
  .urgent .say{max-width:none;}

  figure img.wide{border-radius:12px;}
  footer .wrap{gap:20px;}
}

/* --- small phones (≤380px) --- */
@media (max-width:380px){
  h1{font-size:1.95rem;}
  .mark .tag{display:none;}
}

/* --- tablets (601–859px): two-up chips, roomier type --- */
@media (min-width:601px) and (max-width:859px){
  .portrait-wrap{max-width:340px;}
  .split.center .stack:first-child{display:flex; justify-content:flex-start;}
}

/* --- large desktops (≥1280px): let the layout breathe --- */
@media (min-width:1280px){
  .wrap{max-width:1160px;}
  .hero .lede{max-width:56ch;}
  .founder .portrait-wrap{max-width:500px;}
}

/* touch devices: bigger tap targets, no hover-only affordances */
@media (hover:none){
  nav a{padding:9px 12px;}
  .btn{min-height:44px; display:inline-flex; align-items:center;}
}

/* desktop: keep the centered photo/text pairs balanced, not photo-dominant */
@media (min-width:860px){
  .split.center .portrait-wrap{max-width:360px;}
  .founder .portrait-wrap{max-width:440px;}
}

/* booking not connected yet — a real route, not a blank panel */
.cal-notice{border:1px solid var(--gold); border-radius:16px; padding:24px 26px;
  background:var(--panel); color:var(--ink-soft); font-size:.98rem; line-height:1.6;}
.cal-notice b{color:var(--ink); font-family:"EB Garamond",Georgia,serif;
  font-size:1.25rem; font-weight:500; display:inline-block; margin-bottom:2px;}
.cal-notice-cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px;}

/* a squarer crop where the source photo is tight on the face */
.portrait.wide-crop{aspect-ratio:1/1;}

/* inline external links in body copy */
.xlink{color:var(--accent); font-weight:600; text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--accent) 35%, transparent);}
.xlink:hover{border-bottom-color:var(--accent);}
.tl-item .xlink{font-weight:600;}

/* profile links under the founder role */
.founder-links{display:flex; flex-wrap:wrap; gap:8px 10px; margin-top:14px;}
.founder-links a{font-size:.79rem; font-weight:600; color:var(--ink-soft);
  background:var(--panel); border:1px solid var(--edge); border-radius:999px;
  padding:7px 14px; line-height:1.2; text-decoration:none;}
.founder-links a:hover{color:var(--accent); border-color:var(--accent);}
@media (max-width:560px){ .founder-links a{font-size:.74rem; padding:6px 11px;} }

/* the width/height attributes on <img> are presentational hints that otherwise
   beat aspect-ratio and stretch the portrait — let the ratio drive the height */
.portrait{height:auto;}

/* "Why spiritual direction?" — the value statement, given room */
.why-sd .pull{font-size:clamp(1.3rem,2.6vw,1.75rem); margin-bottom:16px;}
.why-sd .prose p:not(.pull){font-size:clamp(1.02rem,1.6vw,1.14rem); color:var(--ink-soft);}

/* ============================================================
   Desktop header: bigger mark and nav, and no dead space.
   Phones (≤600px) and tablets keep their own smaller sizing.
   ============================================================ */
@media (min-width:861px){
  .bar{gap:28px; padding-block:14px;}
  .mark{gap:17px;}
  .mark-img{width:66px; height:66px;}
  .lockup{gap:5px;}
  .mark b{font-size:1.5rem; letter-spacing:.14em;}
  .mark .tag{font-size:.76rem; letter-spacing:.2em;}
  .mark .tag::before, .mark .tag::after{width:18px;}
  .btn-sm{padding:13px 28px; font-size:1rem;}
  .bar nav{margin-top:8px;}
  .bar nav a{font-size:.96rem; padding:9px 13px;}
  .bar nav a:first-child{margin-left:-13px;}   /* optical align under the logo */
}

/* wide enough that all nine links fit on one line — spread them edge to edge
   so the row reaches the CTA instead of stopping two-thirds across */
@media (min-width:1160px){
  .bar nav{justify-content:space-between; flex-wrap:nowrap;}
  .bar nav a{font-size:1.06rem; padding:9px 14px; flex:none;}
  .bar nav a:first-child{margin-left:-14px;}
  .bar nav a:last-child{margin-right:-14px;}
}

@media (min-width:1280px){
  .mark-img{width:74px; height:74px;}
  .mark b{font-size:1.62rem;}
  .mark .tag{font-size:.8rem;}
  .bar nav a{font-size:1.12rem;}
}

/* once scrolled, the desktop header collapses to a compact sticky bar */
@media (min-width:861px){
  .mark-img{transition:width .18s ease, height .18s ease;}
  .mark b, .mark .tag, .bar nav a{transition:font-size .18s ease;}
  .bar{transition:padding-block .18s ease;}

  header.compact .bar{padding-block:8px;}
  header.compact .mark-img{width:44px; height:44px;}
  header.compact .mark b{font-size:1.1rem;}
  header.compact .mark .tag{font-size:.62rem;}
  header.compact .btn-sm{padding:10px 22px; font-size:.9rem;}
  header.compact .bar nav{margin-top:2px;}
  header.compact .bar nav a{font-size:.92rem; padding:7px 12px;}
}

/* narrow laptops: trim the nav just enough to keep it on one line */
@media (min-width:861px) and (max-width:959px){
  .bar nav a{font-size:.88rem; padding:8px 10px;}
  .bar nav a:first-child{margin-left:-10px;}
}

/* Ryan's own words — a signed quote inside the founder prose */
.say-so{margin:26px 0; padding:22px 26px; border-radius:16px;
  border:1px solid var(--edge); border-left:3px solid var(--gold);
  background:var(--panel);}
.say-so blockquote{margin:0; font-family:"EB Garamond",Georgia,serif;
  font-size:clamp(1.14rem,1.9vw,1.34rem); line-height:1.5; color:var(--ink);
  font-style:italic; text-wrap:pretty;}
.say-so figcaption{margin-top:12px; font-size:.74rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
  display:flex; align-items:center; gap:10px;}
.say-so figcaption::before{content:""; height:1px; width:22px; background:var(--gold); flex:none;}
@media (max-width:560px){ .say-so{padding:18px 20px; margin:22px 0;} }

/* the shorter name can carry a little more weight */
.founder-name{font-size:clamp(2.5rem,5.6vw,4.3rem);}

/* "It can help with" — list left, athlete photo right (landscape image) */
.helps .section-title{margin-bottom:22px;}
.helps-figure{margin:0; position:relative;}
.helps-figure img{width:100%; height:auto; border-radius:18px; display:block;
  box-shadow:0 18px 46px -22px rgba(0,33,71,.45);}
.helps-figure figcaption{margin-top:10px; font-size:.72rem; color:var(--ink-mute); letter-spacing:.03em;}
.helps-figure::before{content:""; position:absolute; left:20px; right:-20px; top:20px; bottom:44px;
  border-radius:20px; background:var(--accent-soft); z-index:-1;}
@media (min-width:860px){
  .wrap.split.helps{grid-template-columns:.85fr 1.15fr;}
}
@media (max-width:859px){
  .helps-figure{max-width:560px; margin:10px auto 0;}
  .helps-figure::before{left:12px; right:-12px; top:12px; bottom:40px;}
}

/* stock-image attribution (Vecteezy Free License requires a visible credit) */
.helps-figure figcaption a{color:var(--ink-mute); text-decoration:underline;
  text-underline-offset:2px;}
.helps-figure figcaption a:hover{color:var(--accent);}