/* =========================================================
   Ruby Magpie — Site styles (v2 — Poppins)
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  --rm-red: #ad3524;
  --rm-red-deep: #8a2618;
  --rm-red-tint: #c14735;
  --rm-black: #111111;
  --rm-ink: #1a1a1a;
  --rm-cream: #faf6ee;
  --rm-bone: #f3eee2;
  --rm-paper: #ffffff;
  --rm-grey: #6b6b6b;
  --rm-line: rgba(17,17,17,0.12);

  --nav-h: clamp(80px, 8vw, 110px);

  --ease: cubic-bezier(.2,.7,.2,1);

  --container: 1280px;
  --gutter: clamp(20px, 4vw, 56px);

  --display: 'Poppins', system-ui, -apple-system, sans-serif;
  --body: 'Poppins', system-ui, -apple-system, sans-serif;
}

/* ---------- 2. Base ---------- */

html {
  overflow-y: scroll;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--body);
  font-size:19px;
  line-height:1.55;
  color:var(--rm-ink);
  background:var(--rm-cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
hr{border:0;height:1px;background:var(--rm-line);margin:0}
input,textarea,select{font:inherit;color:inherit}

/* ---------- 3. Typography ---------- */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:800;
  line-height:1.02;
  letter-spacing:-0.02em;
  margin:0 0 .4em;
  color:var(--rm-black);
}
h1{font-size:clamp(2.4rem, 8vw, 70px);letter-spacing:-0.025em;line-height:1}
h2{font-size:clamp(1.8rem, 5vw, 50px);letter-spacing:-0.022em}
h3{font-size:clamp(1.25rem, 2vw, 28px);letter-spacing:-0.015em}
h4{font-size:clamp(1rem, 1.3vw, 1.2rem);letter-spacing:-0.01em;font-weight:700}
p{margin:0 0 1em}
.eyebrow{
  font-family:var(--body);
  font-weight:600;
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--rm-red);
  display:inline-flex;align-items:center;gap:.55em;
  margin-bottom:1.2em;
}
.eyebrow::before{
  content:""; width:28px; height:2px; background:var(--rm-red);
}
.lead{font-size:clamp(1.05rem, 1.5vw, 1.25rem);line-height:1.55;color:var(--rm-ink)}
.muted{color:var(--rm-grey)}

/* ---------- 4. Layout ---------- */
.container{
  width:100%;max-width:var(--container);
  margin:0 auto;padding:0 var(--gutter);
}
.section{padding:clamp(80px, 10vw, 160px) 0}
.section--tight{padding:clamp(60px, 7vw, 100px) 0}
.bg-cream{background:var(--rm-cream)}
.bg-bone{background:var(--rm-bone)}
.bg-paper{background:var(--rm-paper)}
.bg-black{background:var(--rm-black);color:var(--rm-cream)}
.bg-black h1,.bg-black h2,.bg-black h3,.bg-black h4{color:var(--rm-cream)}
.bg-red{background:var(--rm-red);color:var(--rm-cream)}
.bg-red h1,.bg-red h2,.bg-red h3,.bg-red h4{color:var(--rm-cream)}
.bg-red .eyebrow{color:var(--rm-cream)}
.bg-red .eyebrow::before{background:var(--rm-cream)}

/* ---------- 5. Navigation ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:90;
  height:var(--nav-h);
  background:var(--rm-red);
  display:flex;align-items:center;justify-content:center;
  transition:background .35s var(--ease), color .35s var(--ease);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.nav__brand{
  display:flex;align-items:center;gap:14px;
  color:var(--rm-cream);
  transition:color .35s var(--ease);
}
.nav__brand .logo-mark{width:42px;height:42px;color:var(--rm-cream);transition:color .35s var(--ease)}
.nav__brand .logo-text{
  font-family:var(--display);
  font-weight:100;
  font-size:clamp(1rem, 1.6vw, 1.25rem);
  letter-spacing:-0.01em;
  text-transform:uppercase;
}
.nav__hamburger{
  position:absolute;
  right:var(--gutter);
  top:50%;
  transform:translateY(-50%);
  width:54px;height:54px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;
  color:var(--rm-cream);
  transition:color .35s var(--ease);
  z-index:120;
}
.nav__hamburger span{
  display:block;width:30px;height:3px;background:currentColor;
  transition:transform .4s var(--ease), opacity .25s var(--ease), background .35s var(--ease);
  transform-origin:center;
}
body.nav-open .nav{background:var(--rm-paper);border-bottom-color:var(--rm-line)}
body.nav-open .nav__brand,
body.nav-open .nav__brand .logo-mark{color:var(--rm-red)}
body.nav-open .nav__hamburger{color:var(--rm-red)}
body.nav-open .nav__hamburger span:nth-child(1){transform:translateY(10px) rotate(45deg)}
body.nav-open .nav__hamburger span:nth-child(2){opacity:0}
body.nav-open .nav__hamburger span:nth-child(3){transform:translateY(-10px) rotate(-45deg)}

.logo-nav {
  width: 42px;
  margin-top: -2px;
}

/* Full-screen menu overlay */
.menu{
  position:fixed;inset:0;z-index:80;
  background:var(--rm-red);
  color:var(--rm-cream);
  display:flex;align-items:center;justify-content:center;
  padding:var(--nav-h) var(--gutter) 30px;
  opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease), visibility .45s var(--ease);
  overflow:hidden;
}
body.nav-open .menu{opacity:1;visibility:visible}
.menu__inner{width:100%;max-width:var(--container);display:grid;grid-template-columns:1fr;gap:32px;align-items:center}
@media(min-width:900px){.menu__inner{grid-template-columns:2.4fr 1fr;gap:60px}}
.menu__list{display:flex;flex-direction:column;gap:0;align-items:flex-start}
.menu__list li{overflow:hidden;line-height:1}
.menu__list a{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(1.4rem, 3.2vw, 2.4rem);
  line-height:1.15;
  letter-spacing:-0.02em;
  color:var(--rm-cream);
  display:inline-block;
  padding:.05em 0;
  transform:translateY(110%);
  transition:transform .55s var(--ease), opacity .35s var(--ease);
  position:relative;
}
body.nav-open .menu__list a{transform:translateY(0)}
body.nav-open .menu__list li:nth-child(1) a{transition-delay:.08s}
body.nav-open .menu__list li:nth-child(2) a{transition-delay:.11s}
body.nav-open .menu__list li:nth-child(3) a{transition-delay:.14s}
body.nav-open .menu__list li:nth-child(4) a{transition-delay:.17s}
body.nav-open .menu__list li:nth-child(5) a{transition-delay:.20s}
body.nav-open .menu__list li:nth-child(6) a{transition-delay:.23s}
body.nav-open .menu__list li:nth-child(7) a{transition-delay:.26s}
body.nav-open .menu__list li:nth-child(8) a{transition-delay:.29s}
body.nav-open .menu__list li:nth-child(9) a{transition-delay:.32s}
.menu__list a::after{
  content:"";position:absolute;left:0;right:0;bottom:.05em;
  height:5px;background:var(--rm-cream);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);
}
.menu__list a:hover::after{transform:scaleX(1)}
.menu__list a.is-current{opacity:.55}
.menu__aside{font-size:.95rem;line-height:1.6;color:var(--rm-cream)}
.menu__aside h4{color:var(--rm-cream);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:1em;font-family:var(--body);font-weight:600}
.menu__aside p{margin:0 0 .8em}
.menu__aside a{color:var(--rm-cream);border-bottom:1px solid rgba(250,246,238,.4);padding-bottom:1px}
.menu__aside a:hover{border-bottom-color:var(--rm-cream)}

.nav-spacer{height:var(--nav-h)}

/* ---------- 6. Buttons & links ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--body);
  font-weight:600;
  font-size:1rem;
  padding:1em 1.5em;
  border-radius:999px;
  border:2px solid transparent;
  transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  letter-spacing:-0.005em;
  white-space:nowrap;
}
.btn .arrow{display:inline-block;transition:transform .3s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}
.btn--red{background:var(--rm-red);color:var(--rm-cream)}
.btn--red:hover{background:var(--rm-red-deep)}
.btn--black{background:var(--rm-black);color:var(--rm-cream)}
.btn--black:hover{background:#000}
.btn--ghost{border-color:var(--rm-black);color:var(--rm-black)}
.btn--ghost:hover{background:var(--rm-black);color:var(--rm-cream)}
.btn--ghost-light{border-color:var(--rm-cream);color:var(--rm-cream)}
.btn--ghost-light:hover{background:var(--rm-cream);color:var(--rm-red)}
.btn--cream{background:var(--rm-cream);color:var(--rm-red)}
.btn--cream:hover{background:#fff}

.link-arrow{
  display:inline-flex;align-items:center;gap:.55em;
  font-weight:600;
  border-bottom:2px solid currentColor;
  padding-bottom:2px;
  transition:gap .25s var(--ease);
}
.link-arrow:hover{gap:.85em}

/* ---------- 7. Hero — banner ---------- */
.hero-img {
  width: 100%;
  filter: grayscale(1);
}

.hero--banner{
  position:relative;
  width:100%;
  height:clamp(520px, 80vh, 880px);
  overflow:hidden;
  background:#1c1c1c;
  margin:0;
}
.hero--banner .hero__bg{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 14px, transparent 14px 28px),
    linear-gradient(180deg, #2a2a2a 0%, #181818 100%);
}
.hero--banner .hero__bg span{
  background:rgba(0,0,0,.4);color:rgba(250,246,238,.55);
  padding:14px 22px;border:1px solid rgba(255,255,255,.15);
  font-family:var(--display);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;font-size:.75rem;
}
.hero--banner .hero__overlay{
  position:absolute;left:0;right:0;bottom:0;
  padding:0 var(--gutter) clamp(40px, 6vw, 80px);
  z-index:2;
  pointer-events:none;
}
.hero--banner .hero__overlay > *{pointer-events:auto}
.hero--banner h1{
  color:var(--rm-cream);
  font-size:clamp(2rem, 7vw, 70px);
  letter-spacing:-0.025em;
  line-height:1;
  max-width:18ch;
  margin:0;
  font-weight:800;
}
/* Global photo hero */
.hero--photo {
  position: relative;
  height: calc(100vh - var(--nav-h));
  padding-top: 0px !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding-bottom: 48px;
  padding-left: 48px;
}

.hero--photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(100%);
  z-index: 0;
}

.hero--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

.hero--photo .container {
  position: relative;
  z-index: 2;
  padding-bottom: 60px;
}

.hero--photo h1,
.hero--photo p,
.hero--photo .btn--ghost {
  color: var(--rm-cream);
}

.hero--photo .btn--ghost {
  border-color: var(--rm-cream);
}

.hero--photo .btn--ghost:hover {
  background: var(--rm-cream);
  color: var(--rm-red);
}

/* Per-page background images */
.hero--photo-home::before { background-image: url('../images/home-hero.jpg'); }
.hero--photo-whatwedo::before { background-image: url('../images/what-we-do-hero.jpg'); }
.hero--photo-ourstory::before { background-image: url('../images/suze-hero.jpeg'); filter: grayscale(100%) brightness(92%) contrast(210%); }
.hero--photo-forcompanies::before { background-image: url('../images/for-companies-hero.jpg'); }
.hero--photo-forcandidates::before { background-image: url('../images/for-candidates-hero.jpg'); }
.hero--photo-fairbydesign::before { background-image: url('../images/fair-by-design-hero.jpg'); }
.hero--photo-earlycareers::before { background-image: url('../images/early-careers-hero-2.jpg'); }
.hero--photo-fledglingfund::before { background-image: url('../images/fledgling-fund-hero.jpg'); }
/* ---------- 7b. Hero — page ---------- */
.hero{
  position:relative;
  background:var(--rm-cream);
  overflow:hidden;
  padding:clamp(60px,8vw,120px) 0 clamp(40px, 5vw, 80px);
}
.hero--red{background:var(--rm-red);color:var(--rm-cream)}
.hero--red h1,.hero--red .lead{color:var(--rm-cream)}
.hero--black{background:var(--rm-black);color:var(--rm-cream)}
.hero--black h1{color:var(--rm-cream)}

.hero__inner{display:grid;gap:60px;grid-template-columns:1fr;align-items:end}
@media(min-width:1000px){.hero__inner{grid-template-columns:1.2fr .8fr;gap:80px;align-items:end}}
.hero__copy h1{margin-bottom:.4em}
.hero__copy .lead{max-width:50ch;margin-bottom:2em}
.hero__ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero__media{
  position:relative;
  aspect-ratio:4/5;
  background:var(--rm-bone);
  overflow:hidden;
  min-height:340px;
}

.hero--big{padding:clamp(60px,7vw,100px) 0 0}
.hero--big h1{font-size:clamp(2.4rem, 8vw, 70px);line-height:1;letter-spacing:-0.025em}
.hero--big .lead{max-width:54ch}
.hero--big .hero__media{aspect-ratio:21/9;margin-top:60px;min-height:360px}

/* ---------- 8. Marquee text ---------- */
.marquee{
  background:var(--rm-red);color:var(--rm-cream);
  overflow:hidden;
  padding:18px 0;
  border-top:1px solid rgba(255,255,255,.15);
  border-bottom:1px solid rgba(255,255,255,.15);
}
.marquee__track{
  display:inline-flex;gap:48px;
  white-space:nowrap;
  font-family:var(--display);font-weight:700;font-size:clamp(.95rem, 1.3vw, 1.3rem);
  text-transform:uppercase;letter-spacing:.04em;
  animation:scroll 30s linear infinite;
  padding-right:48px;
}
.marquee__track span{display:inline-flex;align-items:center;gap:48px}
.marquee__track .dot{display:inline-block;width:10px;height:10px;background:currentColor;border-radius:50%;flex:0 0 auto}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- 9. Two-column ---------- */
.split{display:grid;grid-template-columns:1fr;gap:60px;align-items:start}
@media(min-width:900px){.split{grid-template-columns:.9fr 1.1fr;gap:90px}}

/* ---------- 10. Cards / boxes ---------- */
.boxes{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rm-line);border:1px solid var(--rm-line)}
@media(min-width:700px){.boxes{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.boxes{grid-template-columns:repeat(4,1fr)}}
.boxes--3{grid-template-columns:1fr}
@media(min-width:700px){.boxes--3{grid-template-columns:repeat(3,1fr)}}

.box{
  background:var(--rm-cream);
  padding:clamp(28px,3vw,40px);
  display:flex;flex-direction:column;justify-content:space-between;gap:24px;
  min-height:340px;
  position:relative;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.box:hover{background:var(--rm-red);color:var(--rm-cream)}
.box:hover h3{color:var(--rm-cream)}
.box:hover .link-arrow{color:var(--rm-cream)}
.box h3{font-size:clamp(1.15rem,1.6vw,1.45rem);margin-bottom:.4em;color:var(--rm-black);line-height:1.15}
.box p{margin-bottom:0;font-size:1rem;line-height:1.55}
.box__cta{margin-top:auto;display:flex;align-items:center;gap:.5em;font-weight:600;font-size:.95rem}
.box__cta::after{content:"→";display:inline-block;transition:transform .25s var(--ease)}
.box:hover .box__cta::after{transform:translateX(5px)}

/* Image-background box (used on home) */
.box--image{
  padding:0;
  min-height:380px;
  overflow:hidden;
  color:var(--rm-cream);
  background:#1c1c1c;
}
.box--image:hover{background:var(--rm-red)}
.box--image .box__bg {
  position: absolute; inset: 0; z-index: 1;
  background-color: #181818;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 14px, transparent 14px 28px),
    linear-gradient(180deg, #2a2a2a 0%, #181818 100%);
  background-size: cover;
  background-position: center;
  display: flex; align-items: center; justify-content: center;
  color: rgba(250,246,238,.4); font-family: var(--display); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; font-size: .7rem;
  transition: opacity .3s var(--ease);
}
.box--image .box__bg::before{
  background:rgba(0,0,0,.4);padding:8px 14px;border:1px solid rgba(255,255,255,.15);
}
.box--image:hover .box__bg{opacity:.45}
.box--image .box__body{
  position:relative;z-index:2;
  padding:clamp(28px,3vw,38px);
  height:100%;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:linear-gradient(180deg, transparent 30%, rgba(0,0,0,.55) 100%);
  transition:background .25s var(--ease);
}
.box--image:hover .box__body{background:linear-gradient(180deg, transparent 30%, rgba(173,53,36,.7) 100%)}
.box--image h3{color:var(--rm-cream)}
.box--image:hover h3{color:var(--rm-cream)}

.box--1 .box__bg {
  background-image: url('../images/suze.jpg');
}

.box--1 .box__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.box--2 .box__bg {
  background-image: url('../images/home-box2-wm.jpg');
}

.box--2 .box__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.box--3 .box__bg {
  background-image: url('../images/home-student.jpg');
}

.box--3 .box__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.box--4 .box__bg {
  background-image: url('../images/home-fledgling.jpg');
  background-position: top;
}

.box--4 .box__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

/* Pillars / numbered grid */
.pillars{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rm-line);border:1px solid var(--rm-line)}
@media(min-width:900px){.pillars{grid-template-columns:repeat(3,1fr)}}
.pillar{padding:clamp(28px,3vw,44px);background:var(--rm-cream);display:flex;flex-direction:column;gap:16px}
.pillar h3{margin:0}
.pillar p{margin:0;color:var(--rm-ink)}

/* ---------- 11. Process / steps (no numbers — just step name + body) ---------- */
.process{display:grid;grid-template-columns:1fr;gap:0}
.process__step{
  display:grid;grid-template-columns:1fr;gap:14px;
  padding:36px 0;border-top:1px solid var(--rm-line);
}
.process__step:last-child{border-bottom:1px solid var(--rm-line)}
@media(min-width:900px){
  .process__step{grid-template-columns:1fr 2fr;gap:60px;padding:52px 0;align-items:start}
}
.process__step h3{margin:0 0 .4em;max-width:22ch}
.process__step p{margin:0 0 1em;color:var(--rm-ink)}
.process__step p:last-child{margin-bottom:0}
.process__step ul{margin:.5em 0 0;display:grid;gap:14px}
.process__step ul li{padding-left:1.4em;position:relative}
.process__step ul li::before{
  content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;background:var(--rm-red);border-radius:50%;
}
.process__step__body{display:contents}
@media(min-width:900px){.process__step__body{display:block}}
.process__step__head{display:contents}
@media(min-width:900px){.process__step__head{display:block}}

/* ---------- 12. Testimonial ---------- */
.testimonial{
  background:var(--rm-black);color:var(--rm-cream);
  padding:clamp(60px,8vw,120px) 0;
}
.testimonial--red{background:var(--rm-red)}
.testimonial blockquote{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.4rem, 3vw, 2.4rem);
  line-height:1.15;letter-spacing:-0.02em;
  margin:0 0 1em;
  color:var(--rm-cream);
}
.testimonial blockquote::before{content:"\201C"}
.testimonial blockquote::after{content:"\201D"}
.testimonial cite{font-style:normal;font-weight:600;font-size:.95rem;letter-spacing:.04em;color:var(--rm-cream);opacity:.85}

.testimonial-grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rm-line);border:1px solid var(--rm-line)}
@media(min-width:900px){.testimonial-grid{grid-template-columns:repeat(3,1fr)}}
.t-card{
  background:var(--rm-cream);
  padding:clamp(28px,3vw,38px);
  display:flex;flex-direction:column;gap:22px;
}
.t-card p{
  font-family:var(--display);font-weight:600;
  font-size:1.05rem;line-height:1.4;color:var(--rm-black);
  margin:0;
}
.t-card cite{font-style:normal;font-weight:600;font-size:.8rem;letter-spacing:.04em;color:var(--rm-red);text-transform:uppercase}

/* ---------- 13. Pull quote ---------- */
.pull{
  padding:clamp(80px,10vw,160px) 0;
  text-align:center;
  background:var(--rm-cream);
}
.pull--red{background:var(--rm-red);color:var(--rm-cream)}
.pull blockquote{
  margin:0 auto;max-width:24ch;
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.8rem, 5vw, 3.6rem);
  line-height:1.05;letter-spacing:-0.025em;
  color:inherit;
}
.pull--red blockquote{color:var(--rm-cream)}

/* ---------- 14. Logo strip / clients ---------- */
.logos{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
}

@media(min-width:700px){.logos{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1100px){.logos{grid-template-columns:repeat(6,1fr)}}
.logos__cell{
  aspect-ratio:3/2;
  display:flex;align-items:center;justify-content:center;
  color:var(--rm-grey);font-weight:600;letter-spacing:.05em;font-size:.85rem;
  padding:0px;
}

.logos__cell img {
  border-radius: 8px;
  width: 90%;
}

/* ---------- 15. Resource / Stripe cards ---------- */
.resource-grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rm-line);border:1px solid var(--rm-line)}
@media(min-width:900px){.resource-grid{grid-template-columns:repeat(3,1fr)}}
.resource{
  background:var(--rm-cream);
  padding:clamp(28px,3vw,38px);
  display:flex;flex-direction:column;gap:18px;justify-content:space-between;
  min-height:320px;
}
.resource__price{
  font-family:var(--display);font-weight:700;font-size:.85rem;letter-spacing:.16em;color:var(--rm-red);text-transform:uppercase;
}
.resource h3{margin:0;font-size:clamp(1.1rem,1.5vw,1.4rem)}
.resource p{margin:0;color:var(--rm-ink);font-size:1rem}

/* ---------- 16. Forms ---------- */
.form{display:grid;gap:18px}
.form__row{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:700px){.form__row{grid-template-columns:1fr 1fr}}
.form label{
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  display:block;margin-bottom:.6em;color:var(--rm-ink);
}
.form input,.form textarea,.form select{
  width:100%;
  padding:16px 20px;
  background:var(--rm-cream);
  border:1px solid var(--rm-line);
  border-radius:0;
  font-size:1rem;
  font-family:var(--body);
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.form input:focus,.form textarea:focus,.form select:focus{
  outline:none;border-color:var(--rm-red);background:var(--rm-paper);
}
.form textarea{min-height:160px;resize:vertical}
.form .radio-group{display:flex;flex-wrap:wrap;gap:10px;margin-top:.4em}
.form .radio-group label{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  padding:12px 18px;background:var(--rm-cream);border:1px solid var(--rm-line);
  font-size:.9rem;letter-spacing:0;text-transform:none;font-weight:500;margin:0;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.form .radio-group input{display:none}
.form .radio-group label:has(input:checked){background:var(--rm-red);color:var(--rm-cream);border-color:var(--rm-red)}
.form .submit-row{margin-top:8px}

.bg-red .form input,.bg-red .form textarea,.bg-red .form select{
  background:rgba(250,246,238,.08);border-color:rgba(250,246,238,.3);color:var(--rm-cream);
}
.bg-red .form input::placeholder,.bg-red .form textarea::placeholder{color:rgba(250,246,238,.6)}
.bg-red .form input:focus,.bg-red .form textarea:focus{background:rgba(250,246,238,.15);border-color:var(--rm-cream)}
.bg-red .form label{color:var(--rm-cream)}
.bg-red .form .radio-group label{background:transparent;border-color:rgba(250,246,238,.4);color:var(--rm-cream)}
.bg-red .form .radio-group label:has(input:checked){background:var(--rm-cream);color:var(--rm-red);border-color:var(--rm-cream)}

/* ---------- 17. Newsletter ---------- */
.newsletter{
  background:var(--rm-black);color:var(--rm-cream);
  padding:clamp(60px,8vw,120px) 0;
}
.newsletter h2{color:var(--rm-cream)}
.newsletter__row{display:grid;grid-template-columns:1fr;gap:40px;align-items:end}
@media(min-width:900px){.newsletter__row{grid-template-columns:1.2fr 1fr}}
.newsletter input{
  width:100%;padding:18px 22px;
  background:transparent;border:1px solid rgba(250,246,238,.4);color:var(--rm-cream);
  border-radius:999px;font-size:1rem;font-family:var(--body);
}
.newsletter input::placeholder{color:rgba(250,246,238,.5)}
.newsletter form{display:flex;gap:10px;flex-wrap:wrap}
.newsletter form input{flex:1;min-width:220px}

/* ---------- 18. Footer ---------- */
.footer{
  background:var(--rm-black);color:var(--rm-cream);
  padding:80px 0 40px;
}

.footer__brand p {
  font-family:var(--display);
  font-weight:100 !important;
  font-size:clamp(1rem, 1.6vw, 1.25rem);
  letter-spacing:-0.01em;
  text-transform:uppercase;
}

.footer__top{display:grid;grid-template-columns:1fr;gap:40px;padding-bottom:60px;border-bottom:1px solid rgba(250,246,238,.15)}
@media(min-width:900px){.footer__top{grid-template-columns:1.6fr 1fr 1fr 1fr}}
.footer__brand .logo-mark{width:46px;height:46px;color:var(--rm-cream);margin-bottom:18px}
.footer__brand p{font-family:var(--display);font-weight:800;font-size:1.2rem;color:var(--rm-cream);margin:0 0 1.4em;letter-spacing:-0.01em}
.footer h4{font-family:var(--body);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(250,246,238,.55);font-weight:600;margin-bottom:1em}
.footer ul{display:grid;gap:.6em}
.footer ul a{color:var(--rm-cream);transition:color .2s var(--ease)}
.footer ul a:hover{color:var(--rm-red-tint)}
.footer__bottom{padding-top:32px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;font-size:.85rem;color:rgba(250,246,238,.55)}
.footer__bottom address{font-style:normal}

.logo-footer {
  width: 40px;
  margin-left: 5px;
  margin-bottom: 8px;
}

/* ---------- 19. Big stat / callout ---------- */
.callout{
  background:var(--rm-red);color:var(--rm-cream);
  padding:clamp(60px,8vw,120px) 0;
}
.callout__inner{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
@media(min-width:900px){.callout__inner{grid-template-columns:1fr 1.4fr;gap:80px}}
.callout__big{
  font-family:var(--display);font-weight:800;
  font-size:clamp(5rem,14vw,11rem);line-height:.85;letter-spacing:-0.04em;
  color:var(--rm-cream);
  min-width: 0;
  word-break: break-word;
}
.callout p{font-size:clamp(1rem,1.3vw,1.2rem);max-width:46ch;margin:0 0 1.6em}
.callout h2{color:var(--rm-cream)}

/* ---------- 20. Image placeholders ---------- */
.placeholder-img{
  background:
    repeating-linear-gradient(45deg, rgba(173,53,36,.06) 0 12px, transparent 12px 24px),
    var(--rm-bone);
  position:relative;
  display:flex;align-items:center;justify-content:center;
  color:rgba(17,17,17,.35);
  font-family:var(--display);font-weight:600;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;
  min-height:300px;
  border:1px solid var(--rm-line);
}
.placeholder-img--dark{
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 14px, transparent 14px 28px),
    linear-gradient(180deg, #2a2a2a 0%, #181818 100%);
  color:rgba(250,246,238,.4);border-color:rgba(255,255,255,.1);
}
.placeholder-img span{background:var(--rm-cream);padding:10px 16px;border:1px solid var(--rm-line)}
.placeholder-img--dark span{background:rgba(0,0,0,.4);border-color:rgba(255,255,255,.15)}
.placeholder-img--ratio-21-9{aspect-ratio:21/9}
.placeholder-img--ratio-3-4{aspect-ratio:3/4}
.placeholder-img--ratio-1-1{aspect-ratio:1/1}
.placeholder-img--ratio-4-5{aspect-ratio:4/5}
.placeholder-img--ratio-3-2{aspect-ratio:3/2}

/* ---------- 21. Prose ---------- */
.prose{max-width:62ch}
.prose p{font-size:1.05rem;line-height:1.65;margin-bottom:1.2em;color:var(--rm-ink)}
.prose p:last-child{margin-bottom:0}
.prose ul{display:grid;gap:.7em;margin:.8em 0 1.4em}
.prose ul li{padding-left:1.4em;position:relative;line-height:1.55}
.prose ul li::before{content:"";position:absolute;left:0;top:.65em;width:8px;height:8px;background:var(--rm-red);border-radius:50%}
.prose strong{font-weight:700}
.prose h3{margin-top:1.4em;margin-bottom:.5em;font-size:clamp(1.1rem,1.5vw,1.35rem)}

.long-form{display:grid;grid-template-columns:1fr;gap:60px}
@media(min-width:900px){.long-form{grid-template-columns:1fr 2fr;gap:90px}}
.long-form__aside{position:sticky;top:calc(var(--nav-h) + 30px);align-self:start}
.long-form__aside h2{margin:0;font-size:clamp(1.4rem,2.2vw,2rem)}

/* ---------- 22. Section heading ---------- */
.section-head{display:grid;grid-template-columns:1fr;gap:24px;align-items:end;margin-bottom:60px}
@media(min-width:900px){.section-head{grid-template-columns:1.2fr 1fr;gap:80px}}
.section-head h2{margin:0}
.section-head p{margin:0;font-size:1.05rem;color:var(--rm-grey);max-width:42ch}
.bg-red .section-head p{color:rgba(250,246,238,.85)}
.bg-black .section-head p{color:rgba(250,246,238,.7)}

/* ---------- 23. Misc ---------- */
.center{text-align:center}
.no-scroll{overflow:hidden}

.tag-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.tag{
  display:inline-block;padding:9px 16px;border-radius:999px;
  background:var(--rm-cream);border:1px solid var(--rm-line);
  font-size:.9rem;font-weight:500;
}

.cta-strip{
  background:var(--rm-red);color:var(--rm-cream);
  padding:clamp(60px,8vw,120px) 0;
}
.cta-strip__inner{display:grid;grid-template-columns:1fr;gap:30px;align-items:end}
@media(min-width:800px){.cta-strip__inner{grid-template-columns:2fr 1fr;gap:60px}}
.cta-strip h2{color:var(--rm-cream);margin:0;font-size:clamp(1.8rem,4vw,3rem)}
.cta-strip .btn{align-self:end}

/* ---------- 24. Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .marquee__track{animation:none}
}

/* ---------- 23. Misc ---------- */
.center{text-align:center}
.no-scroll{overflow:hidden}

.tag-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.tag{
  display:inline-block;padding:9px 16px;border-radius:999px;
  background:var(--rm-cream);border:1px solid var(--rm-line);
  font-size:.9rem;font-weight:500;
}

.cta-strip{
  background:var(--rm-red);color:var(--rm-cream);
  padding:clamp(60px,8vw,120px) 0;
}
.cta-strip__inner{display:grid;grid-template-columns:1fr;gap:30px;align-items:end}
@media(min-width:800px){.cta-strip__inner{grid-template-columns:2fr 1fr;gap:60px}}
.cta-strip h2{color:var(--rm-cream);margin:0;font-size:clamp(1.8rem,4vw,3rem)}
.cta-strip .btn{align-self:end}

/* ---------- 24. Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .marquee__track{animation:none}
}

@media(max-width:899px) {
  .long-form__aside {
    position: static;
  }
}

@media(max-width:899px) {
  .hero--photo {
    min-height: 60vh;
    height: auto;
    padding-top: clamp(60px, 8vw, 100px);
    padding-bottom: clamp(40px, 6vw, 60px);
  }
}

@media(max-width:899px) {
  .section.bg-black {
    overflow: hidden;
  }

  .long-form {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .long-form__aside {
    position: static;
  }

  .prose {
    width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    max-width: 100%;
  }

  .prose .btn {
    white-space: normal;
    word-break: break-word;
    text-align: left;
  }
}

@media(max-width:899px) {
  .hero--photo .container {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

@media(max-width:899px) {
  .callout {
    overflow: hidden;
  }

  .callout__inner {
    grid-template-columns: 1fr;
    width: 100%;
    overflow: hidden;
  }

  .callout__big {
    font-size: clamp(3rem, 15vw, 5rem);
    min-width: 0;
    word-break: break-word;
  }

  .callout .btn {
    white-space: normal;
    word-break: break-word;
    text-align: left;
  }
}