/* ============================================================
   Sharon Aponte — shared stylesheet
   Palette and fonts per client spec. Mobile-first, responsive.
   ============================================================ */

:root {
  /* Color tokens (client-supplied) */
  --white: #FFFFFF;
  --body-text: #142E2C;      /* dark green-black body */
  --heading: #00102E;        /* dark navy headings */
  --pink: #FB4F73;           /* links, icon bg, strategic subheadings */
  --pink-hover: #FC2D59;
  --slate: #464A53;          /* header / footer background */
  --beige-gray: rgba(237, 237, 229, 0.6); /* page/section bg */
  --beige-gray-solid: #F2F2EC;             /* opaque fallback of the above */
  --beige: #E0D2C5;          /* beige section bg, form borders/placeholders */
  --form-text: #737C8C;

  /* Type */
  --font-head: "Manrope", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  /* Scale / rhythm */
  --maxw: 1120px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(2.75rem, 5.5vw, 4.75rem);
  --radius: 0; /* square corners per spec */

  --header-h: 72px;    /* nav padding 1rem x2 + 40px logo */
  --hero-reveal: 128px;

  /* Split heroes: viewport less header less a deliberate reveal, so the next
     band always peeks. vh first as a fallback for older browsers. */
  --hero-h: clamp(440px, calc(100vh - var(--header-h) - var(--hero-reveal)), 680px);
  --hero-h: clamp(440px, calc(100svh - var(--header-h) - var(--hero-reveal)), 680px);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--body-text);
  background: var(--white);
  line-height: 1.6;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--pink); text-decoration: none; }
a:hover { color: var(--pink-hover); text-decoration: underline; }

/* ---------- typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--heading);
  line-height: 1.15;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(1.9rem, 4vw, 2.85rem); }
h2 { font-size: clamp(1.4rem, 2.8vw, 1.95rem); }
h3 { font-size: clamp(1.1rem, 1.8vw, 1.3rem); }
p { margin: 0 0 1.1em; max-width: 65ch; }

/* museum-label eyebrow — the one signature touch, built from the client's
   own "pink for strategic subheadings" instruction */
.eyebrow {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pink);
  margin: 0 0 1rem;
  display: block;
}

/* ---------- layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--white { background: var(--white); }
.section--beige-gray { background: var(--beige-gray-solid); }
.section--beige { background: var(--beige); }
/* offset for in-page anchor jumps so headings clear the sticky header */
[id] { scroll-margin-top: 5rem; }
.section__intro { max-width: 60ch; }
.stack > * + * { margin-top: 1rem; }

/* skip link */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--heading); color: var(--white); padding: 0.6rem 1rem;
}
.skip-link:focus { left: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  padding: 0.85rem 1.6rem;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.btn--primary { background: var(--pink); color: var(--white); }
.btn--primary:hover { background: var(--pink-hover); color: var(--white); text-decoration: none; }
.btn--ghost { background: transparent; color: var(--heading); box-shadow: inset 0 0 0 2px var(--heading); }
.btn--ghost:hover { background: var(--heading); color: var(--white); text-decoration: none; }

/* ---------- header / nav ---------- */
.site-header { background: var(--slate); position: sticky; top: 0; z-index: 50; }
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 1rem; gap: 1rem;
}
.brand {
  display: inline-flex; align-items: center;
  font-family: var(--font-head); font-weight: 600; font-size: 1.15rem;
  letter-spacing: 0.06em; color: var(--white); text-transform: uppercase;
}
.brand:hover { color: var(--white); text-decoration: none; }
.brand__logo { height: 30px; width: auto; max-width: 62vw; display: block; }
.footer__brand { display: inline-block; }
.footer__brand:hover { text-decoration: none; }
.footer__logo { height: 30px; width: auto; display: block; margin-bottom: 0.9rem; }
.nav__toggle {
  display: inline-flex; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 0.5rem;
}
.nav__toggle span { width: 24px; height: 2px; background: var(--white); display: block; }
.nav__links {
  list-style: none; margin: 0; padding: 0;
  display: none; flex-direction: column; gap: 0.25rem;
  width: 100%;
}
.nav__links.is-open { display: flex; padding-bottom: 1rem; }
.nav__links a {
  display: block; color: var(--white); font-family: var(--font-head);
  font-weight: 600; font-size: 0.95rem; padding: 0.5rem 0; letter-spacing: 0.02em;
}
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--pink); text-decoration: none; }

@media (min-width: 820px) {
  .nav { flex-wrap: nowrap; }
  /* header is chrome, not content: it frames the viewport rather than sitting on
     the content measure. The gap to the content edge is large and deliberate. */
  .site-header > .container { max-width: none; padding-inline: var(--gutter); }
  .nav__toggle { display: none; }
  .brand__logo { height: 40px; max-width: none; }
  .nav__links {
    display: flex; flex-direction: row; width: auto; gap: 1.75rem; align-items: center;
  }
  .nav__links a { padding: 0; }
}

/* ---------- hero ---------- */
.hero { background: var(--beige); padding-block: clamp(3rem, 6vw, 5rem); }
.hero h1 { max-width: 16ch; }
.hero__lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); max-width: 46ch; margin-bottom: 1.75rem; color: var(--body-text); }
.hero__descriptor { font-family: var(--font-head); font-weight: 600; color: var(--heading); font-size: clamp(1rem, 2vw, 1.2rem); margin-bottom: 1.25rem; }

/* ---------- card grid ---------- */
.grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 820px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- approach pillars ---------- */
.pillars { gap: 0; }
.pillar { padding: 1.5rem 0; }
.pillar p { font-size: 0.98rem; margin-bottom: 0; max-width: 34ch; }
.pillar__icon { width: 30px; height: 30px; color: var(--pink); margin-bottom: 0.9rem; display: block; }
.pillar__label {
  font-family: var(--font-head); font-weight: 600;
  font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--heading); margin-bottom: 0.6rem;
}
@media (min-width: 640px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .pillar { padding: 1.5rem 1.75rem; }
  .pillar:nth-child(odd) { padding-left: 0; }
  .pillar:nth-child(even) { border-left: 1px solid var(--beige); }
}
@media (min-width: 900px) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .pillar { padding: 0 1.5rem; }
  .pillar:nth-child(odd) { padding-left: 1.5rem; } /* undo the 2-col flush rule at desktop */
  .pillar:first-child { padding-left: 0; }
  .pillar:last-child { padding-right: 0; }
  .pillar + .pillar { border-left: 1px solid var(--beige); }
}
.card { background: var(--white); padding: 1.75rem; height: 100%; }
.section--white .card { background: var(--beige-gray-solid); }
.card h3 { margin-bottom: 0.4rem; }
.card p { margin-bottom: 0.75rem; font-size: 0.98rem; }
.card__link { font-family: var(--font-head); font-weight: 600; font-size: 0.9rem; }

/* ---------- collections ---------- */
.collections__layout { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
.collections__intro h2 { margin-bottom: 0.6rem; }
.collections__intro p { margin-bottom: 1.5rem; }
.collections__grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.collection-card { display: flex; flex-direction: column; height: 100%; color: var(--body-text); }
.collection-card:hover { text-decoration: none; }
.collection-card__media { aspect-ratio: 3 / 4; margin-bottom: 0.9rem; flex-shrink: 0; }
.collection-card__title {
  font-family: var(--font-head); font-weight: 600;
  font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--heading); margin: 0; line-height: 1.3;
}
/* underline pinned to the bottom of equal-height cards, so it aligns across
   all three no matter how many lines each title wraps to (1, 2, or 3) */
.collection-card::after {
  content: ""; margin-top: auto; padding-top: 0.7rem;
  border-bottom: 1px solid var(--heading);
}
.collection-card:hover .collection-card__title { color: var(--pink); }
.collection-card:hover::after { border-bottom-color: var(--pink); }
@media (min-width: 640px) {
  .collections__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 980px) {
  .collections__layout { grid-template-columns: 1fr 2.1fr; gap: 3.5rem; align-items: start; }
}

/* ---------- split (text + media) ---------- */
.split { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 820px) { .split { grid-template-columns: 1fr 1fr; gap: 3.5rem; } }
/* on mobile, keep text first even when markup puts the image first */
.split--reverse > .media-placeholder { order: 2; }
.split--reverse > .stack { order: 1; }
@media (min-width: 820px) {
  .split--reverse > .media-placeholder { order: 1; }
  .split--reverse > .stack { order: 2; }
}
.media-placeholder {
  background: var(--beige-gray-solid);
  border: 1px dashed var(--beige);
  aspect-ratio: 4 / 5;
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--form-text); font-size: 0.85rem; padding: 1.5rem;
}

/* ---------- contact page ---------- */
.contact-split { display: grid; grid-template-columns: 1fr; align-items: stretch; }
.contact-split__intro,
.contact-split__form {
  background: var(--beige-gray-solid);
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter);
}
.contact-split__intro h1 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); margin-bottom: 0.6rem; }
.contact-split__intro > p { margin-bottom: 2.25rem; max-width: 46ch; }
.contact-split__form h2 { font-size: clamp(1.15rem, 1.9vw, 1.4rem); margin-bottom: 1.5rem; }
/* photo shown whole rather than cropped; absolute so its 1150px height doesn't
   set the grid row the way it did before */
/* same field as the panels either side, so the letterbox the photo leaves on one
   axis reads as part of the band rather than as white gaps */
.contact-split__media { position: relative; min-height: 340px; background: var(--beige-gray-solid); }
.contact-split__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.contact-item { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 2.25rem; }
.contact-item:last-child { margin-bottom: 0; }
.contact-item__icon { width: 26px; height: 26px; flex-shrink: 0; color: var(--form-text); margin-top: 0.15rem; }
.contact-item__label {
  font-family: var(--font-head); font-weight: 600;
  font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--heading); margin-bottom: 0.4rem;
}
.contact-item__value { font-size: 0.98rem; margin-bottom: 0.5rem; max-width: 34ch; }
.contact-item__value:last-child { margin-bottom: 0; }
/* three columns need real room: a 560px form, a legible intro, and a plate
   between them. Below this it stacks rather than squeezing. */
@media (min-width: 1200px) {
  .contact-split { grid-template-columns: 1fr minmax(200px, 320px) 1.05fr; }
  /* fill the window so the footer doesn't show as a slate line under short content */
  .contact-split { min-height: calc(100vh - var(--header-h)); }
  .contact-split { min-height: calc(100svh - var(--header-h)); }
  .contact-split__media { min-height: 100%; }
}

/* ---------- project grid ---------- */
.project-grid { display: grid; gap: 2.5rem 1.75rem; grid-template-columns: 1fr; }
.project-card__media { aspect-ratio: 4 / 3; margin-bottom: 1rem; }
.project-card__title {
  font-family: var(--font-head); font-weight: 600;
  font-size: 1.1rem; color: var(--heading);
  margin-bottom: 0.45rem; line-height: 1.3;
}
.project-card__desc { font-size: 0.95rem; margin-bottom: 0.7rem; max-width: 42ch; }
.project-card__tag {
  font-family: var(--font-head); font-weight: 600;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--form-text); margin-bottom: 0;
}
@media (min-width: 640px) { .project-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .project-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- bio page ---------- */
.bio__name { margin-bottom: 0.2rem; }
.bio__email { font-family: var(--font-head); font-weight: 600; color: var(--heading); }
.bio__role {
  font-family: var(--font-head); font-weight: 600;
  font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--form-text); margin-bottom: 1.5rem;
}
.bio__columns { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: start; }
.bio__columns .cred__list { margin-top: 0; }
@media (min-width: 900px) {
  .bio__columns { grid-template-columns: 1fr 1fr; gap: 4rem; }
}

/* ---------- credentials ---------- */
.cred { padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 1px solid var(--beige); }
.cred:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.cred__title {
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--heading);
  margin-bottom: 0.3rem; line-height: 1.3;
}
.cred__meta {
  font-size: 0.85rem; letter-spacing: 0.04em; color: var(--form-text);
  margin-bottom: 0.9rem;
}
.cred__list { margin: 0.75rem 0 0; padding-left: 1.1rem; max-width: 72ch; }
.cred__list li { margin-bottom: 0.55rem; font-size: 0.98rem; line-height: 1.55; }
.cred__list li::marker { color: var(--pink); }
.cred__subhead {
  font-family: var(--font-head); font-weight: 600;
  font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--heading); margin: 2rem 0 0.75rem;
}
.section__intro .cred p { max-width: 72ch; }

/* ---------- services accordion ---------- */
.services-list { border-top: 1px solid var(--beige); }
.service { border-bottom: 1px solid var(--beige); }
.service__head {
  display: block; cursor: pointer; padding: 1.5rem 3rem 1.5rem 0;
  position: relative; list-style: none;
}
.service__head::-webkit-details-marker { display: none; }
.service__title {
  display: block; font-family: var(--font-head); font-weight: 600;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem); color: var(--heading);
  margin-bottom: 0.35rem; line-height: 1.25;
}
.service__summary { display: block; color: var(--body-text); max-width: 62ch; }
.service__head::after {
  content: "+"; position: absolute; right: 0; top: 1.4rem;
  font-family: var(--font-head); font-weight: 600; font-size: 1.6rem;
  line-height: 1; color: var(--pink); transition: transform 0.2s ease;
}
.service[open] .service__head::after { content: "\2013"; }
.service__head:hover .service__title { color: var(--pink); }
.service__detail { padding: 0 3rem 1.75rem 0; }
.service__detail p { margin-bottom: 0; max-width: 68ch; }

/* ---------- simple CTA variant ---------- */
.cta-band--simple {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem;
}
.cta-band--simple h2 { margin-bottom: 0; }
@media (min-width: 720px) {
  .cta-band--simple { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ---------- CTA band ---------- */
.cta-band { background: var(--beige-gray-solid); }
.cta-band .container { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: start; }
.cta-band h2 { color: var(--heading); margin-bottom: 0.6rem; }
.cta-band__intro p { margin-bottom: 1rem; }
.cta-band__direct { font-size: 0.95rem; color: var(--form-text); }
.cta-band__email { color: var(--heading); font-family: var(--font-head); font-weight: 600; }
.cta-band__form { max-width: none; }
@media (min-width: 880px) {
  .cta-band .container { grid-template-columns: 1fr 1fr; gap: 4rem; }
}

/* ---------- footer ---------- */
.site-footer { background: var(--slate); color: var(--white); padding-block: 2.5rem; }
.site-footer a { color: var(--white); }
.site-footer a:hover { color: var(--pink); }
.site-footer__row { display: flex; flex-direction: column; gap: 1rem; justify-content: space-between; }
.site-footer__note { font-size: 0.85rem; color: #c8cad0; max-width: 60ch; }
@media (min-width: 720px) { .site-footer__row { flex-direction: row; align-items: center; } }

/* ---------- forms ---------- */
.form { max-width: 560px; }
.form label { display: block; font-family: var(--font-head); font-weight: 600; font-size: 0.9rem; margin-bottom: 0.35rem; color: var(--heading); }
.form .field { margin-bottom: 1.25rem; }
.form input, .form textarea {
  width: 100%; font-family: var(--font-body); font-size: 1rem;
  color: var(--form-text); background: var(--white);
  border: 1px solid var(--beige); border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
}
.form input::placeholder, .form textarea::placeholder { color: var(--beige); }
.form input:focus, .form textarea:focus { outline: 2px solid var(--pink); outline-offset: 1px; border-color: var(--pink); }
.form textarea { min-height: 160px; resize: vertical; }

/* ---------- utilities ---------- */
.lede { font-size: 1.2rem; }
.note { font-size: 0.9rem; color: var(--form-text); }
.mt-2 { margin-top: 2rem; }

/* focus visibility everywhere */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--pink); outline-offset: 2px;
}

/* ---------- images wired into media slots ---------- */
/* imgs reuse the media-box classes; make them fill and crop cleanly.
   Needed because the global `img { height:auto }` rule won't fill a
   fixed aspect-ratio box on its own. */
.collection-card__media,
.project-card__media,
.figure-media,
.about-teaser__media {
  width: 100%;
  object-fit: cover;
  background: var(--beige-gray-solid); /* placeholder tone while loading */
}
/* principal + bio portraits: match the exported 5:6 (1000×1200) */
.figure-media { aspect-ratio: 5 / 6; }
/* ---------- About page Principal: full-bleed band (text left, whole portrait right, flush to section edges) ---------- */
.principal-band { padding-block: 0; background: var(--beige-gray-solid); }
.principal-band__grid { display: grid; grid-template-columns: 1fr; }
.principal-band__content { padding: clamp(2.5rem, 5vw, 4rem) var(--gutter); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.principal-band__content .btn { align-self: flex-start; margin-top: 0.5rem; }
.principal-band__media img { width: 100%; height: auto; aspect-ratio: 5 / 6; object-fit: cover; display: block; }
@media (min-width: 820px) {
  .principal-band__grid { grid-template-columns: 1.15fr 0.85fr; align-items: center; }
  .principal-band__content { padding-left: max(var(--gutter), calc((100vw - 1120px) / 2 + var(--gutter))); }
}

/* ---------- home About teaser: full-bleed band (text left, photo right), flush top/bottom — same pattern as the CTA bands ---------- */
.about-teaser-band { padding-block: 0; background: var(--beige); }
.about-teaser-band__grid { display: grid; grid-template-columns: 1fr; }
.about-teaser-band__content { padding: clamp(2.5rem, 5vw, 4rem) var(--gutter); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.about-teaser-band__content .btn { align-self: flex-start; margin-top: 0.5rem; }
.about-teaser-band__media { min-height: 280px; background: var(--beige); }
.about-teaser-band__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 820px) {
  .about-teaser-band__grid { grid-template-columns: 1.05fr 0.95fr; align-items: stretch; min-height: 460px; }
  .about-teaser-band__content { padding-left: max(var(--gutter), calc((100vw - 1120px) / 2 + var(--gutter))); }
}
/* contact portrait fills its column height; cover keeps the 3:4 (1200×1600) crop centered */
/* fills its column; the crop is biased left so the photographic scale survives */

/* ---------- home hero: full-bleed background image ---------- */
.hero--home { position: relative; isolation: isolate; overflow: hidden; background: var(--slate); display: flex; align-items: center;
  /* fills the viewport exactly. A partial reveal here just showed a sliver of the
     next section's padding, which read as the image failing to reach the bottom. */
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h)); }
.hero--home .hero__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
}
.hero--home .hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: rgba(0, 16, 46, 0.55);
}
/* text sits over the washed image, so flip it to white (eyebrow stays pink) */
.hero--home h1,
.hero--home .hero__lead { color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- split hero (text left, photo right): Services, Projects ---------- */
.hero--split { padding-block: 0; background: var(--beige-gray-solid); }
.hero--split .hero__grid { display: grid; grid-template-columns: 1fr; }
.hero--split .hero__text { padding: clamp(2.5rem, 5vw, 4rem) var(--gutter); display: flex; flex-direction: column; justify-content: center; }
.hero--split .hero__text .btn { align-self: flex-start; }
.hero--split .hero__image { min-height: 280px; background: var(--beige); }
.hero--split .hero__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 800px) {
  .hero--split .hero__grid { grid-template-columns: 1.05fr 0.95fr; align-items: stretch; min-height: var(--hero-h); }
  .hero--split .hero__text { padding-left: max(var(--gutter), calc((100vw - 1120px) / 2 + var(--gutter))); }
}

/* ---------- CTA band with image (photo left, text right): Services, Projects, About ---------- */
.cta-band--image { padding-block: 0; background: var(--beige-gray-solid); }
.cta-band--image .cta-band__grid { display: grid; grid-template-columns: 1fr; }
.cta-band--image .cta-band__media { min-height: 200px; background: var(--beige); }
.cta-band--image .cta-band__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cta-band--image .cta-band__content { padding: clamp(2.5rem, 5vw, 4rem) var(--gutter); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1.25rem; }
.cta-band--image .cta-band__content h2 { margin: 0; }
@media (min-width: 800px) {
  .cta-band--image .cta-band__grid { grid-template-columns: 0.95fr 1.05fr; align-items: stretch; min-height: 300px; }
  .cta-band--image .cta-band__content { padding-right: max(var(--gutter), calc((100vw - 1120px) / 2 + var(--gutter))); }
}

/* ---------- split hero: predictable crop below the desktop breakpoint.
   min-height alone let the slot become an extreme letterbox on wide-but-
   single-column viewports (tablet portrait), which butchered square art. ---------- */
@media (max-width: 799px) {
  .hero--split .hero__image { min-height: 0; aspect-ratio: 4 / 3; }
}


/* ---------- band heights ----------
   An <img> with height:100% still contributes its intrinsic ratio while the grid
   row is being sized, so these bands were as tall as their media column was wide.
   Scenes get taken out of row sizing and cropped; the portrait gets a width cap
   instead, since cropping a 5:6 head-and-shoulders to a wide slice destroys it. */
@media (min-width: 800px) {
  .cta-band--image .cta-band__media { position: relative; overflow: hidden; }
  .cta-band--image .cta-band__media img { position: absolute; inset: 0; }
  .cta-band--image .cta-band__grid { min-height: clamp(280px, 22vw, 340px); }
}
@media (min-width: 820px) {
  .about-teaser-band__media { position: relative; overflow: hidden; }
  .about-teaser-band__media img { position: absolute; inset: 0; }
  .about-teaser-band__grid { min-height: clamp(380px, 32vw, 480px); }

  /* portrait: bleeds to the right edge but stops widening, so its height settles.
     Stretches to the row so it meets top and bottom; the width cap keeps it from
     driving the band's height the way an uncapped fr column did. */
  .principal-band__grid { align-items: stretch; }
  .principal-band__media { justify-self: end; width: 100%; max-width: clamp(340px, 33vw, 460px); }
  .principal-band__media img { height: 100%; aspect-ratio: auto; }

}

/* ---------- thank-you / 404 ---------- */
.message-page { padding-block: clamp(4rem, 12vw, 8rem); }
.message-page h1 { max-width: 20ch; margin-bottom: 1.25rem; }