/* ==========================================================
   Palette + type taken from startupgrind.tech
   ========================================================== */
:root{
  --off:#fcf7f0;        /* page cream */
  --dark:#000000;       /* text on cream, and dark section fills */
  --navy:#000000;       /* darkest sections */
  --red:#ff2d48;
  --cta:#e5090f;        /* CTA buttons only */
    --blue:#9ad0fb;
  --white:#fff;
  --dark-10:#e8e8e8;
  --dark-20:#d6d6d6;
  --dark-30:#c2c2c2;
  --dark-40:#a8a8a8;
  --dark-50:#8c8c8c;

  --display:'Archivo','Arial Narrow',Impact,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);font-weight:400;
  background:var(--off);color:var(--dark);
  -webkit-font-smoothing:antialiased;overflow-x:clip;line-height:1.55;
}
::selection{background:var(--red);color:#fff}
img{max-width:100%;display:block}

/* ---------- display type ---------- */
h1,h2,h3,.dsp{
  font-family:var(--display);font-weight:900;
  text-transform:uppercase;letter-spacing:-.03em;line-height:.94;
  font-variation-settings:'wdth' 90,'wght' 900;
}
/* capped so "Your church" holds one line in the hero column */
h1{font-size:clamp(2.6rem,6.4vw,4.8rem)}
h2{font-size:clamp(2.1rem,4.9vw,3.9rem)}
h3{font-size:clamp(1.25rem,2vw,1.6rem)}
.label{
  font-family:var(--body);font-weight:700;font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;
}
.lede{font-size:1.02rem;line-height:1.65;max-width:60ch}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;justify-content:center;
  font-family:var(--body);font-weight:700;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;
  padding:.95rem 1.6rem;border-radius:6px;text-decoration:none;border:1.5px solid transparent;
  transition:background .16s,color .16s,border-color .16s,transform .16s;cursor:pointer;
}
.btn-red{background:var(--cta);color:#fff}
.btn-red:hover{background:#c2080d;transform:translateY(-2px)}
.btn-out-light{border-color:rgba(252,247,240,.55);color:var(--off)}
.btn-out-light:hover{background:var(--off);color:var(--navy)}
.btn-out-dark{border-color:rgba(0,0,0,.4);color:var(--dark)}
.btn-out-dark:hover{background:var(--dark);color:#fff}
.btn-sm{padding:.62rem 1.05rem;font-size:.68rem}
.arrow{font-size:1em;line-height:1}

/* ---------- nav ---------- */
nav{position:sticky;top:0;z-index:120;background:var(--navy);border-bottom:1px solid rgba(252,247,240,.1)}
.nav-in{max-width:1240px;margin:0 auto;padding:0 22px;height:66px;display:flex;align-items:center;justify-content:space-between;gap:18px}
/* ALIGN 27 and the Intentional Churches lockup are separate images so the IC
   wordmark can be sized for legibility; inside the supplied artwork it is only
   80% of ALIGN's height, which renders the two text lines at ~6px. */
.brand{display:flex;align-items:center;gap:15px;text-decoration:none}
.brand-align{height:24px;width:auto;flex-shrink:0}
.brand-div{width:1px;height:30px;background:rgba(252,247,240,.3);flex-shrink:0}
.brand-ic{height:33px;width:auto;flex-shrink:0}
.nav-mid{display:flex;align-items:center;gap:.55rem;background:rgba(252,247,240,.1);
  border-radius:50px;padding:.42rem 1rem;color:var(--off)}
.nav-mid .label{font-size:.66rem;white-space:nowrap}
.nav-mid .sep{width:1px;height:12px;background:rgba(252,247,240,.35)}
.nav-links{display:flex;align-items:center;gap:22px;list-style:none}
.nav-links a{color:var(--off);text-decoration:none;font-size:.8rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;opacity:.82}
.nav-links a:hover{opacity:1}
.burger{display:none;background:none;border:none;cursor:pointer;padding:6px}
.burger span{display:block;width:22px;height:2px;background:var(--off);margin:5px 0}

/* ---------- sections ---------- */
section{position:relative}
.wrap{max-width:1240px;margin:0 auto;padding:0 22px;position:relative;z-index:5}
.pad{padding:104px 0}
.dark-sec{background:var(--navy);color:var(--off)}
.cream-sec{background:var(--off);color:var(--dark)}
/* deep indigo band, the Startup Grind "15 years in" treatment */
.indigo-sec{background:var(--dark);color:var(--off);overflow:hidden}
.indigo-sec .rule{background:rgba(252,247,240,.35)}
.indigo-sec .lede{color:rgba(252,247,240,.9)}
/* body copy runs at the site's normal .lede scale. the photo is capped rather
   than filling its grid track, so the two columns stay close in height without
   inflating the type. the 4/5 crop is deliberate, so only its width is limited. */
#about .lede{font-size:1.02rem;line-height:1.7}
#about .lede + .lede{margin-top:18px}
#about .split{grid-template-columns:1fr .82fr;gap:48px}
/* definite width, not max-width plus auto margins: the inner img is width:100%,
   so a shrink-to-fit box has no intrinsic width and collapses to zero.
   4/3 at ~430px matches the photo scale used elsewhere on the site (532x299 in
   the reason band). the source is a 4/5 portrait, so cover shows 60% of its
   height: biased up to 22% to keep every face and drop the jeans and table base. */
#about .photo{width:min(100%,430px);margin-left:auto;aspect-ratio:4/3}
#about .photo img{object-position:center 22%}
/* the default line-through is far too thin against 900-weight display caps,
   so the bar is drawn to scale with the font size */
/* the rebrand headline stays on a single line at every width, so it scales
   with the viewport rather than wrapping */
.one-line{white-space:nowrap;font-size:clamp(1.3rem,5vw,3.9rem)}
.strike{position:relative;display:inline-block;text-decoration:none}
.strike::after{
  content:"";position:absolute;left:-3%;right:-3%;top:52%;height:.085em;
  background:currentColor;border-radius:2px;
}
/* diagonal ruled wedge off the right edge */
.stripes{
  position:absolute;top:-12%;right:-4%;width:42%;height:128%;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(118deg,rgba(154,208,251,.24) 0 2px,transparent 2px 22px);
  clip-path:polygon(34% 0,100% 0,100% 100%,0 100%);
  /* feathered on both axes so the ruled lines emerge and dissolve instead of being
     sliced off: vertically at the section edges, horizontally so the clip-path's
     diagonal reads as a fade rather than a hard cut */
  -webkit-mask-image:
    linear-gradient(to bottom,transparent 0%,#000 26%,#000 70%,transparent 100%),
    linear-gradient(to right,transparent 0%,rgba(0,0,0,.55) 42%,#000 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to bottom,transparent 0%,#000 26%,#000 70%,transparent 100%),
    linear-gradient(to right,transparent 0%,rgba(0,0,0,.55) 42%,#000 100%);
  mask-composite:intersect;
}
/* dotted hairline along the bottom edge */
.dotline{
  position:absolute;left:0;right:0;bottom:14px;height:5px;z-index:1;pointer-events:none;
  background-image:radial-gradient(circle,rgba(252,247,240,.45) 1.2px,transparent 1.2px);
  background-size:15px 5px;
}
.purple-sec{background:var(--blue);color:#000}
.purple-sec .lede{color:rgba(0,0,0,.78)}
.rule{height:1px;background:rgba(0,0,0,.16);margin-bottom:64px}
.dark-sec .rule{background:rgba(252,247,240,.18)}

/* Boundaries are handled by colour, not by gradient washes: no two neighbouring
   bands share a background, so every junction is a clean hard edge. A wash only
   faked the break, and on cream it read as a stain. The single same-colour pair
   left is testimonials into the photo mosaic, which are one chapter by design. */

/* ---------- decorative geometry ---------- */
.deco{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.shape{position:absolute}
.arc{border-radius:50%}
.dots{
  background-image:radial-gradient(circle,var(--red) 1.6px,transparent 1.6px);
  background-size:13px 13px;opacity:.85;
}
.dots-blue{background-image:radial-gradient(circle,var(--blue) 1.6px,transparent 1.6px)}
.wedge-blue{background:var(--blue);clip-path:polygon(0 100%,100% 0,100% 100%)}
.wedge-red{background:var(--red);clip-path:polygon(0 0,100% 0,100% 100%)}

/* ---------- hero ---------- */
/* no overflow:hidden here: it clipped the add-to-calendar dropdown. The glow
   layer clips itself, so the hero does not need to. */
.hero{position:relative;background:var(--navy);color:var(--off);padding:78px 0 96px}
/* Hero atmosphere: two soft blue glows drifting behind the content. No hard
   shapes, and black stays black. Radial falloff rather than filter:blur, and
   transform-only keyframes, so it composites on the GPU and stays cheap. */
/* The glow layer fades out well before the hero's bottom edge. Without this the
   overflow:hidden clip cut the glow mid-brightness and left a hard horizontal
   seam against the next section, which is also pure black. */
.hero-glow{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 52%,transparent 88%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 52%,transparent 88%);
}
.hero-glow i{position:absolute;display:block;border-radius:50%;will-change:transform,opacity}
.hero-glow .g1{
  width:min(66vw,880px);aspect-ratio:1;right:-14%;top:-28%;
  background:radial-gradient(circle,rgba(154,208,251,.34) 0%,rgba(154,208,251,.14) 40%,transparent 70%);
  animation:heroDrift1 16s ease-in-out infinite;
}
/* sits mid-left rather than on the bottom edge, so nothing bright reaches the seam */
.hero-glow .g2{
  width:min(50vw,620px);aspect-ratio:1;left:-18%;top:18%;
  background:radial-gradient(circle,rgba(154,208,251,.22) 0%,rgba(154,208,251,.09) 44%,transparent 72%);
  animation:heroDrift2 21s ease-in-out infinite;
}
/* Percentages here are of the element's own size, and these elements are huge,
   so the earlier 8% read as ~6px/sec and looked frozen. Bigger travel plus an
   opacity breathe makes the drift actually legible on a soft-edged glow. */
@keyframes heroDrift1{
  0%  {transform:translate3d(0,0,0) scale(1);          opacity:.55}
  50% {transform:translate3d(-24%,15%,0) scale(1.28);  opacity:1}
  100%{transform:translate3d(0,0,0) scale(1);          opacity:.55}
}
@keyframes heroDrift2{
  0%  {transform:translate3d(0,0,0) scale(1);          opacity:.5}
  50% {transform:translate3d(26%,-17%,0) scale(1.22);  opacity:.95}
  100%{transform:translate3d(0,0,0) scale(1);          opacity:.5}
}
@media(prefers-reduced-motion:reduce){.hero-glow i{animation:none}}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:52px;align-items:center}
.hero h1 .l2{color:var(--off)}
.hero h1 .l3{color:var(--blue)}
/* one clear date statement, sized to be read rather than hidden as fine print */
.hero-date{
  font-family:var(--body);font-weight:700;font-size:.9rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blue);margin:24px 0 16px;
}
.hero .sub{margin:0 0 28px;font-size:1.02rem;max-width:44ch;color:rgba(252,247,240,.9)}
.hero .sub b{color:var(--white);font-weight:700}
/* primary Register sits beside a quieter calendar action so the red stays
   the only thing shouting */
.cta-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cal{position:relative}
.cal-btn{
  display:inline-flex;align-items:center;gap:.55rem;cursor:pointer;background:none;
  border:1.5px solid rgba(252,247,240,.3);color:var(--off);border-radius:6px;
  font-family:var(--body);font-weight:700;font-size:.78rem;letter-spacing:.09em;
  text-transform:uppercase;padding:.95rem 1.4rem;
  transition:border-color .16s,background .16s;
}
.cal-btn:hover,.cal-btn[aria-expanded="true"]{border-color:var(--off);background:rgba(252,247,240,.07)}
.cal-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round}
.cal-menu{
  position:absolute;left:0;top:calc(100% + 9px);z-index:60;min-width:242px;
  background:#0a0a0a;border:1px solid rgba(252,247,240,.16);border-radius:10px;
  padding:6px;box-shadow:0 20px 46px rgba(0,0,0,.65);
}
.cal-menu[hidden]{display:none}
.cal-menu a{
  display:block;padding:.7rem .8rem;border-radius:6px;text-decoration:none;
  color:var(--off);font-size:.9rem;font-weight:500;line-height:1.3;
}
.cal-menu a:hover,.cal-menu a:focus-visible{background:rgba(252,247,240,.09);outline:none}
.cal-menu a small{display:block;font-size:.72rem;color:rgba(252,247,240,.5);font-weight:400;margin-top:3px}
/* hero poster: full colour, larger play target, no hover desaturation swap */
.hero-video .vid-shot{box-shadow:0 30px 70px rgba(0,0,0,.55);border:0}
.hero-video .vid-shot img{filter:none}
.hero-video:hover .vid-shot img,.hero-video:focus-visible .vid-shot img{filter:none;transform:scale(1.03)}
.hero-video .vid-play span{width:76px;height:76px}
.hero-video .vid-play svg{width:25px;height:25px}
/* side by side, the poster fills the text column's height so the two columns
   share a top and bottom edge instead of floating centred against each other */
@media(min-width:1041px){
  .hero-grid{align-items:stretch}
  .hero-video{display:flex}
  .hero-video .vid-shot{height:100%;width:100%;aspect-ratio:auto}
}
.video-frame{
  position:relative;border-radius:12px;overflow:hidden;background:#000;
  aspect-ratio:16/9;box-shadow:0 30px 70px rgba(0,0,0,.45);
  border:1px solid rgba(252,247,240,.14);
}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- big colored stat numerals ---------- */
/* subgrid keeps the numeral, label and copy rows on the same baselines across
   all three columns, even if one numeral ever wraps */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:56px;margin-top:16px;
  grid-template-rows:auto auto auto}
.stat{display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start}
.stat-num{
  font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.045em;
  /* Sized so the longest numeral keeps real breathing room inside its column.
     At the old 4.9rem, "6 TRACKS" left only 9px of slack and crowded "$189". */
  font-size:clamp(2rem,4.9vw,3.9rem);line-height:.9;margin-bottom:14px;white-space:nowrap;
  font-variation-settings:'wdth' 90,'wght' 900;align-self:end;
}
.stat-num .c1{color:var(--red)}
.stat-num .c3{color:var(--blue)}
.dark-sec .stat-num .c4{color:var(--off)}
.cream-sec .stat-num .c4{color:var(--dark)}
.stat-label{margin-bottom:10px}
.dark-sec .stat-label{color:var(--blue)}
.cream-sec .stat-label{color:var(--red)}
.stat-copy{font-size:.94rem;line-height:1.6;max-width:34ch}
.dark-sec .stat-copy{color:rgba(252,247,240,.78)}

/* ---------- two-column intro ---------- */
.split{display:grid;grid-template-columns:1fr 1.15fr;gap:52px;align-items:center}
.split p+p{margin-top:16px}
.photo{border-radius:12px;overflow:hidden;background:var(--dark-10);aspect-ratio:4/3}
.photo img{width:100%;height:100%;object-fit:cover}
.photo-tall{aspect-ratio:3/4}
.photo-portrait{aspect-ratio:4/5}
.photo-wide{aspect-ratio:16/9}

/* Photo treatment, copied from Startup Grind: people and detail shots run
   black and white so the geometric blocks keep all the color. */
.bw img{filter:grayscale(1) contrast(1.05)}

/* main-stage tiles, their speaker-grid pattern */
.stage{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
.stage figure{border-radius:12px;overflow:hidden;background:var(--dark);aspect-ratio:4/5}
.stage img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}

/* ---------- main-stage session videos ---------- */
.vids{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:52px}
.vid{
  display:block;text-decoration:none;color:inherit;background:none;border:0;padding:0;
  cursor:pointer;text-align:left;font:inherit;width:100%;
}
.vid-shot{
  display:block;position:relative;border-radius:16px;overflow:hidden;aspect-ratio:16/9;
  background:var(--dark);border:1px solid rgba(252,247,240,.14);
}
.vid-shot img{
  width:100%;height:100%;object-fit:cover;display:block;
  /* full colour, no grey wash: these are the real session frames */
  transition:transform .5s ease;
}
.vid:hover .vid-shot img,.vid:focus-visible .vid-shot img{transform:scale(1.045)}
/* red play button, grows on hover */
.vid-play{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
}
.vid-play span{
  width:62px;height:62px;border-radius:50%;background:var(--cta);display:grid;place-items:center;
  box-shadow:0 10px 30px rgba(0,0,0,.5);transition:transform .28s ease,background .28s ease;
}
.vid-play svg{width:20px;height:20px;margin-left:3px;fill:#fff}
.vid:hover .vid-play span,.vid:focus-visible .vid-play span{transform:scale(1.14);background:#c2080d}
.vid-tag{
  position:absolute;left:14px;top:14px;background:rgba(0,0,0,.82);color:var(--off);
  border-radius:50px;padding:.36rem .8rem;font-family:var(--body);font-weight:700;
  font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;
}
.vid h3{margin:16px 0 5px;color:var(--dark);font-size:clamp(1.15rem,1.8vw,1.45rem)}
.vid .vsub{font-size:.88rem;color:rgba(0,0,0,.66)}
.vid:focus-visible{outline:2px solid var(--blue);outline-offset:6px;border-radius:18px}

/* ---------- lightbox ---------- */
.lb[hidden]{display:none}
.lb{
  position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.94);
  display:grid;place-items:center;padding:24px;
}
.lb-inner{width:min(1100px,100%);position:relative}
.lb-frame{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;
  box-shadow:0 30px 90px rgba(0,0,0,.6)}
.lb-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lb-cap{margin-top:14px;color:var(--off);font-size:.92rem}
.lb-close{
  position:absolute;top:-52px;right:0;width:40px;height:40px;border-radius:50%;
  background:var(--cta);color:#fff;border:0;cursor:pointer;font-size:1.25rem;line-height:1;
  display:grid;place-items:center;
}
.lb-close:hover{background:#c2080d}
@media(max-width:700px){.lb-close{top:auto;bottom:-52px}}

/* ---------- bullet rows ---------- */
/* ruled two-column table: hairline above the first row, under every row, and a
   single vertical divider down the middle */
.rows{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:52px;
  border-top:1px solid rgba(0,0,0,.32)}
.row{
  display:flex;gap:15px;align-items:flex-start;
  padding:22px 26px 22px 54px;
  border-bottom:1px solid rgba(0,0,0,.32);
}
.row:nth-child(odd){border-right:1px solid rgba(0,0,0,.32)}
.row::before{
  content:"";flex-shrink:0;width:6px;height:6px;border-radius:50%;
  background:var(--dark);margin-top:.6em;
}
.row span{font-size:1rem;font-weight:700;color:var(--dark);line-height:1.4}
.dark-sec .rows,.dark-sec .row{border-color:rgba(252,247,240,.28)}
.dark-sec .row::before{background:var(--off)}
.dark-sec .row span{color:var(--off)}

/* ---------- track cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
.card{
  background:var(--off);border:1.5px solid rgba(0,0,0,.2);border-radius:12px;padding:26px 24px;
  display:flex;flex-direction:column;gap:12px;transition:transform .18s,border-color .18s,box-shadow .18s;
}
.card:hover{transform:translateY(-4px);border-color:var(--red);box-shadow:0 14px 34px rgba(0,0,0,.1)}
.card .tnum{font-family:var(--display);font-weight:900;font-size:2.1rem;line-height:1;color:var(--red);
  font-variation-settings:'wdth' 90,'wght' 900}
.card p{font-size:.93rem;line-height:1.6;color:rgba(0,0,0,.82)}
.card-dark{background:rgba(252,247,240,.05);border-color:rgba(252,247,240,.2)}
.card-dark p{color:rgba(252,247,240,.8)}
.card-dark:hover{border-color:var(--blue)}
.card-dark .tnum{color:var(--blue)}

/* ---------- outcome rings ---------- */
.rings-band{
  background:var(--navy);
  border-top:1px solid rgba(252,247,240,.22);border-bottom:1px solid rgba(252,247,240,.22);
  padding:70px 0;position:relative;overflow:hidden;
}
.rings-band .dotfield{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(circle,rgba(252,247,240,.16) 1.4px,transparent 1.4px);
  background-size:15px 15px;
}
.rings{display:flex;gap:clamp(14px,2.4vw,38px);justify-content:center;flex-wrap:wrap}
.ringwrap{position:relative;width:clamp(148px,15vw,205px);aspect-ratio:1;flex-shrink:0}
/* two offset arcs sit behind the white ring: purple upper-left, red lower-right */
.ringwrap::before,.ringwrap::after{
  content:"";position:absolute;inset:-9px;border-radius:50%;
  border:10px solid transparent;transform:rotate(-18deg);
}
.ringwrap::before{border-top-color:var(--blue);border-left-color:var(--blue)}
.ringwrap::after{border-bottom-color:var(--red);border-right-color:var(--red)}
.ring{
  position:absolute;inset:0;border-radius:50%;background:var(--navy);
  border:9px solid var(--off);display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:14% 13%;
}
.ring .rnum{
  font-family:var(--display);font-weight:900;letter-spacing:-.03em;line-height:1;
  font-size:clamp(1.5rem,2.5vw,2.15rem);color:var(--red);
  font-variation-settings:'wdth' 90,'wght' 900;
}
.ring .rlab{
  font-family:var(--body);font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  font-size:clamp(.56rem,.78vw,.72rem);line-height:1.25;color:var(--off);margin-top:.45em;
}
.rings-note{
  text-align:center;margin-top:34px;font-size:.8rem;color:rgba(252,247,240,.6);
}

/* ---------- FAQ ----------
   Ruled two-column Q&A, same hairline language as the schedule rows. Plain open
   text rather than <details> accordions: unambiguous for crawlers and for the
   answer engines that quote it. */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:0 52px;margin-top:56px}
.faq-item{padding:26px 2px 28px;border-top:1px solid rgba(0,0,0,.16)}
.faq-item h3{margin-bottom:10px;font-size:clamp(1.02rem,1.4vw,1.2rem);line-height:1.3}
.faq-item p{font-size:.95rem;line-height:1.62;color:rgba(0,0,0,.78)}

/* ---------- background photo ----------
   Replaced a YouTube background video, which needed container-query maths to
   cover, the IFrame API to suppress its play button, and suppression on phones
   because cover-scaling blew the iframe up to ~4.5x the box. object-fit does
   all of that natively for an <img>, so it runs everywhere including mobile.
   The scrim paints after the image, so it sits on top; it is load-bearing for
   text contrast over a bright sky and should not be lightened without redoing
   the numbers. */
.vbg{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.vbg img{width:100%;height:100%;object-fit:cover;object-position:center 45%;display:block}
.vbg::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(0,0,0,.8)}

/* ---------- testimonial cards ---------- */
/* margin-top must clear the parallax: the fastest column drifts 64px upward at
   p=1, so anything less lets a card ride up into the heading. 120px keeps ~34px
   of air even at that extreme. */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:120px;align-items:stretch}
/* each column drifts at its own rate while the section crosses the viewport;
   --p is scroll progress (-1..1) written by JS, --r is the column's rate */
.qcol{display:flex;transform:translate3d(0,calc(var(--p,0) * var(--r,0) * 1px),0);will-change:transform}
@media(prefers-reduced-motion:reduce){.qcol{transform:none}}
.qcard{flex:1;background:var(--white);border-radius:12px;padding:28px 26px;color:var(--dark);display:flex;flex-direction:column;gap:16px}
.qmark{font-family:var(--display);font-size:2.4rem;line-height:.6;color:var(--red)}
.qcard blockquote{font-size:1.18rem;line-height:1.45;font-weight:500;flex:1;margin:0}
.qwho{font-size:.82rem;line-height:1.45;color:rgba(0,0,0,.72);padding-top:16px;
  border-top:1px solid rgba(0,0,0,.12)}
.qwho b{display:block;font-family:var(--display);font-weight:800;font-size:.95rem;letter-spacing:-.01em;
  text-transform:uppercase;color:var(--dark);margin-bottom:3px;font-variation-settings:'wdth' 90,'wght' 800}

/* ---------- rotating quote + photo mosaic ----------
   Two staggered rows of mixed-size rounded tiles scrolling horizontally, the
   Startup Grind pattern: black and white photos, solid colour quote cards, a
   tall photo carrying its quote as overlaid display type, and a wide card
   pairing a portrait with its quote. */
.rot{overflow:hidden;padding:22px 0;background:var(--navy)}
.rot-track{
  display:grid;grid-auto-flow:column dense;
  grid-template-rows:repeat(2,248px);grid-auto-columns:168px;gap:18px;
  width:max-content;animation:rotate-tiles 60s linear infinite;
}
.rot:hover .rot-track{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.rot-track{animation:none}}
@keyframes rotate-tiles{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

.tile{border-radius:16px;overflow:hidden;position:relative;grid-column:span 2}
/* span 4, not 3: two 2-column tiles sit under it exactly, so dense packing
   leaves no orphan column beside the wide card */
.tile-wide{grid-column:span 4}
.tile-tall{grid-row:span 2}

/* photo-only tile */
.tile-photo img{width:100%;height:100%;object-fit:cover;display:block}
.tile-photo img{filter:none}

/* solid colour quote card */
.tile-quote{padding:26px 24px;display:flex;flex-direction:column;gap:12px;justify-content:center}
.tile-quote p.q{font-size:.97rem;line-height:1.45}
.tile-blue{background:var(--blue);color:var(--navy)}
.tile-blue .tmark{color:#000}
.tile-red{background:var(--cta);color:#fff}
.tile-red .tmark{color:#fff}
.tile-cream{background:var(--off);color:#000}
.tile-cream .tmark{color:var(--cta)}
.tmark{font-family:var(--display);font-weight:900;font-size:1.9rem;line-height:.55;margin-bottom:2px}
.twho{
  font-family:var(--display);font-weight:800;font-size:.92rem;line-height:1.15;letter-spacing:-.01em;
  text-transform:uppercase;font-variation-settings:'wdth' 90,'wght' 800;
}

.tile .big{
  font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:.96;
  font-size:clamp(1.35rem,2.1vw,1.95rem);font-variation-settings:'wdth' 90,'wght' 900;
}

/* wide card: portrait beside its quote */
.tile-pair{display:flex;gap:18px;align-items:center;padding:20px}
.tile-pair .pic{width:38%;flex-shrink:0;border-radius:12px;overflow:hidden;align-self:stretch}
.tile-pair .pic img{width:100%;height:100%;object-fit:cover;display:block}
.tile-pair .txt{display:flex;flex-direction:column;gap:10px;min-width:0}

/* ---------- schedule rows ---------- */
.sched{margin-top:52px;border-top:1px solid rgba(0,0,0,.16)}
.srow{display:grid;grid-template-columns:150px 1fr 200px;gap:24px;align-items:center;
  padding:26px 4px;border-bottom:1px solid rgba(0,0,0,.16)}
/* the schedule sits on black, so its rules and body copy invert */
.dark-sec .sched{border-top-color:rgba(252,247,240,.18)}
.dark-sec .srow{border-bottom-color:rgba(252,247,240,.18)}
.dark-sec .srow .when{color:rgba(252,247,240,.72)}
.dark-sec .srow p{color:rgba(252,247,240,.8)}
.srow .day{font-family:var(--display);font-weight:900;font-size:1.35rem;letter-spacing:-.02em;text-transform:uppercase;
  font-variation-settings:'wdth' 90,'wght' 900}
.srow .when{font-size:.9rem;color:rgba(0,0,0,.7)}
.srow p{font-size:.95rem;color:rgba(0,0,0,.82)}

/* ---------- marquee ---------- */
.marq{background:var(--cta);overflow:hidden;padding:16px 0}
.marq-track{display:flex;width:max-content;animation:roll 26s linear infinite}
.marq-track span{
  font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(1.6rem,3.6vw,2.9rem);line-height:1;color:var(--off);padding:0 22px;white-space:nowrap;
  font-variation-settings:'wdth' 90,'wght' 900;
}
.marq-track span.o{color:transparent;-webkit-text-stroke:1.5px rgba(252,247,240,.75)}
@keyframes roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- action cards ----------
   Startup Grind's pattern: solid red card, white line icon, heavy white
   two-line label, and a white pill button pinned to the bottom. */
.acts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
.act{
  background:var(--cta);color:#fff;border-radius:18px;padding:28px 26px 26px;
  min-height:340px;display:flex;flex-direction:column;gap:20px;text-decoration:none;
  transition:transform .18s,box-shadow .18s;
}
.act:hover{transform:translateY(-5px);box-shadow:0 18px 42px rgba(229,9,15,.34)}
.act .ico{display:block;color:#fff}
.act .ico svg{width:36px;height:36px;display:block}
.act .big{
  font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;
  line-height:.96;font-size:clamp(1.6rem,2.6vw,2.2rem);color:#fff;
  font-variation-settings:'wdth' 90,'wght' 900;
}
.act .go{
  margin-top:auto;background:#fff;color:var(--navy);border-radius:50px;
  padding:.9rem 1.1rem .9rem 1.35rem;display:flex;align-items:center;justify-content:space-between;gap:14px;
  font-family:var(--body);font-weight:700;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
}
.act .go .arrow{font-size:.95rem}

/* ---------- signup / register band ---------- */
.reg-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:52px;align-items:center}
.price-box{background:var(--off);color:var(--dark);border-radius:12px;padding:34px}
.price-top{display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:22px}
.price-amt{font-family:var(--display);font-weight:900;font-size:clamp(2.6rem,5vw,3.6rem);line-height:1;letter-spacing:-.03em;
  color:var(--red);font-variation-settings:'wdth' 90,'wght' 900}
.price-list{list-style:none;display:grid;gap:12px;margin-bottom:26px}
.price-list li{display:flex;gap:12px;font-size:.95rem;line-height:1.55}
.price-list li::before{content:"";flex-shrink:0;width:7px;height:7px;border-radius:50%;background:var(--cta);margin-top:.5em}
/* registration: header row, then the price ladder, then what a seat includes */
.reg-head{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:end}
.reg-head h2{margin:0}
.reg-head .lede{margin:0;max-width:44ch}
.tiers{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:44px}
/* two cards is wide enough that a stacked card leaves the right half empty, so each
   splits into price and detail, the same hairline-divided shape as the footer card */
.tier{
  background:var(--off);color:#000;border-radius:14px;padding:28px;
  display:grid;grid-template-columns:1fr 1fr;gap:28px;
}
.tier-main{display:flex;flex-direction:column;justify-content:center}
.tier-side{
  padding-left:28px;border-left:1px solid rgba(0,0,0,.13);
  display:flex;flex-direction:column;gap:18px;
}
.tier-name{
  font-family:var(--body);font-weight:700;font-size:.72rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--cta);
}
.tier-price{
  font-family:var(--display);font-weight:900;font-size:clamp(2.6rem,4.6vw,3.7rem);line-height:1;
  letter-spacing:-.03em;font-variation-settings:'wdth' 90,'wght' 900;margin-top:12px;
}
.tier-per{font-size:.8rem;color:rgba(0,0,0,.6);margin-top:8px}
.tier-note{font-size:.92rem;line-height:1.55;color:rgba(0,0,0,.78);margin:0}
/* pinned to the bottom of the detail column so both cards line up on it */
.tier-meta{
  margin:auto 0 0;
  font-family:var(--body);font-weight:700;font-size:.66rem;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(0,0,0,.58);line-height:1.6;
}
/* one wide card in the same material as the price cards, so the section closes
   on a deliberate block instead of loose text floating under a hairline */
.reg-foot{
  background:var(--off);color:#000;border-radius:14px;margin-top:20px;
  padding:30px;display:grid;grid-template-columns:1fr 300px;gap:28px 44px;align-items:center;
}
.reg-foot .label{display:block;color:rgba(0,0,0,.62);margin-bottom:18px}
.reg-foot .price-list{margin-bottom:0;grid-template-columns:repeat(2,1fr);gap:14px 32px;align-items:start}
.reg-cta{
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  padding-left:44px;border-left:1px solid rgba(0,0,0,.13);
}
.reg-deadline{font-size:.82rem;line-height:1.6;color:rgba(0,0,0,.62);margin:0}

/* ---------- footer ---------- */
footer{background:var(--navy);color:var(--off);padding:76px 0 34px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px}
/* footer carries the Intentional Churches logo only; ALIGN 27 lives in the nav */
.ic-lock{display:flex;align-items:center;margin-bottom:20px}
.foot-ic{height:46px;width:auto}
footer p,footer a{color:rgba(252,247,240,.76);font-size:.9rem;text-decoration:none}
footer a:hover{color:var(--blue)}
.fcol h4{color:var(--blue);margin-bottom:16px}
.fcol ul{list-style:none;display:grid;gap:10px}
.foot-bot{margin-top:52px;padding-top:24px;border-top:1px solid rgba(252,247,240,.18);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.8rem;color:rgba(252,247,240,.55)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:1040px){
  .hero-grid,.split,.reg-grid{grid-template-columns:1fr;gap:38px}
  /* #about's own .split/.photo rules use an id, which outranks a plain .split
     selector even inside this query, so they need restating at equal weight */
  #about .split{grid-template-columns:1fr;gap:38px}
  #about .photo{width:min(100%,620px);margin:0}
  .stats,.cards,.quotes,.acts{grid-template-columns:1fr 1fr}
  .stage{grid-template-columns:1fr 1fr}
  .nav-mid{display:none}
  /* the two-part lockup is wider than the old single image: give the links room */
  .brand{gap:12px}
  .brand-align{height:21px}
  .brand-div{height:26px}
  .brand-ic{height:28px}
  .nav-links{gap:16px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .reg-foot{grid-template-columns:1fr;gap:26px}
  .reg-cta{padding:24px 0 0;border-left:0;border-top:1px solid rgba(0,0,0,.13);width:100%}
  /* two-up gets too narrow for the split, so give each card the full row */
  .tiers{grid-template-columns:1fr}
  .tier{grid-template-columns:1fr 2fr}
}
@media(max-width:700px){
  .pad{padding:70px 0}
  .rule{margin-bottom:40px}
  .stats,.cards,.quotes,.acts,.rows,.foot-grid,.stage,.vids,.faq{grid-template-columns:1fr}
  .quotes{margin-top:72px}
  /* longer than the other h2s: without this the first half wraps and
     strands "saying" on a line of its own */
  #testimonials h2{text-wrap:balance}
  .reg-head{grid-template-columns:1fr;gap:18px;align-items:start}
  .reg-foot{padding:24px}
  .reg-foot .price-list{grid-template-columns:1fr}
  .tier{grid-template-columns:1fr;padding:24px;gap:22px}
  .tier-side{padding:22px 0 0;border-left:0;border-top:1px solid rgba(0,0,0,.13)}
  /* one column, so no middle divider and a tighter indent */
  .row:nth-child(odd){border-right:0}
  .row{padding:18px 8px 18px 26px}
  .qcol{transform:none}
  .ringwrap{width:44vw}
  .rot-track{grid-template-rows:repeat(2,192px);grid-auto-columns:124px;gap:12px}
  .tile-pair{padding:14px;gap:12px}
  .srow{grid-template-columns:1fr;gap:8px}
  .nav-links{
    position:fixed;left:0;right:0;top:66px;flex-direction:column;gap:0;
    background:var(--navy);max-height:0;overflow:hidden;transition:max-height .3s ease;
    border-bottom:1px solid rgba(252,247,240,.12);
  }
  .nav-links.open{max-height:420px}
  .nav-links li{width:100%;text-align:center}
  .nav-links a{display:block;padding:16px}
  .nav-links li:last-child{padding:14px}
  .burger{display:block}
  .brand{gap:11px}
  .brand-align{height:19px}
  .brand-div{height:24px}
  .brand-ic{height:26px}
}