/* ==========================================================================
   Jonathan Riley portfolio — site stylesheet
   Measurement system: desktop rem values are PSD px / 10 (2500px-wide comps).
   The root font-size scales so 1rem = 8px at 1200px viewport up to 10px (1:1 PSD)
   at 2500px. Below 768px the mobile comp (430px, 1x) applies with 1rem = 10px,
   and mobile rem values are mobile-PSD px / 10.
   ========================================================================== */

/* ---------- Tokens (approved, from design-system.css) ---------- */
:root {
  --navy: #031227; --blue: #0452B9; --headline-highlight: #066FF8;
  --blue-deep: #08449B; --blue-light: #50BDFF;
  --body: #3F3F3F; --white: #FFFFFF; --footer-muted: #969595;
  --blue-pale: #EBF7FE; --gray-section: #F3F3F3; --divider: #D4D2D2;
  --radius-panel: 2.5rem; --radius-btn: 1rem; --radius-pill: 9999px;
  --header-shadow: 0 .1rem 2.7rem .2rem rgba(0,0,0,.15);
  --card-shadow: 0 1.2rem 3.2rem rgba(3,18,39,.12);
  --reveal-duration: 650ms;
  --font: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --container: 150rem;
  --gutter: 4rem;
  --header-h: 12.3rem;
  --slant: 5.6vw;          /* every angled edge rises ~140 PSD px across the 2500px canvas */
}

html { font-size: 50%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 2rem); }
@media (min-width: 1200px) { html { font-size: clamp(50%, calc(50% + (100vw - 1200px) * .0015385), 62.5%); } }
@media (min-width: 768px) and (max-width: 1199px) { html { font-size: 45%; } :root { --gutter: 4.8rem; } }
@media (max-width: 767px) {
  html { font-size: 62.5%; }
  .br-desktop { display: none; }
  :root { --gutter: 1.6rem; --header-h: 8.9rem; --slant: 16vw; --radius-panel: 1.6rem; }
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--white); color: var(--body); font-family: var(--font); font-size: 2.4rem; line-height: 1.5; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
:where(ul[class], ol[class], nav ul) { list-style: none; padding: 0; margin: 0; }
a { color: var(--blue); text-underline-offset: .25em; }
a:hover { text-decoration: underline; }
button { font: inherit; }
main:focus { outline: none; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--blue-light); outline-offset: 3px; border-radius: .4rem; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.smark { font-size: .38em; font-weight: 700; line-height: 0; vertical-align: .95em; margin-left: .1em; letter-spacing: .02em; }
.skip-link { position: fixed; left: 1.6rem; top: -10rem; z-index: 2000; background: var(--navy); color: #fff; padding: 1.2rem 2rem; border-radius: var(--radius-btn); font-size: 2rem; }
.skip-link:focus { top: 1.6rem; }

.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ---------- Type ---------- */
h1, h2, h3, h4 { color: var(--navy); font-weight: 700; letter-spacing: 0; }
.h1 { font-size: 6rem; line-height: 1.2; }
.h1__name { display: block; }
.h1__sub { display: block; font-size: 5rem; line-height: 1.2; margin-top: .6rem; }
.h2 { font-size: 5rem; line-height: 1.2; }
.h3 { font-size: 3rem; line-height: 1.2; }
.hl, .headline-highlight { color: var(--headline-highlight); }
.eyebrow { color: var(--blue); font-weight: 800; font-size: 1.6rem; line-height: 1.3; text-transform: uppercase; letter-spacing: 0; margin-bottom: 1.4rem; }
.eyebrow--light { color: var(--headline-highlight); }
.lead { font-size: 2.4rem; line-height: 1.5; margin-top: 2.6rem; max-width: 142rem; }
p { line-height: 1.5; }

/* ---------- Buttons, links, pills ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 1.2rem; min-height: 8.1rem; padding: 0 3.4rem; border: .4rem solid var(--blue); border-radius: var(--radius-btn); background: var(--blue); color: #fff; font-size: 2.4rem; font-weight: 400; line-height: 1; text-decoration: none; cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.btn:hover { background: var(--navy); border-color: var(--navy); color: #fff; text-decoration: none; }
.btn .icon--arrow { width: 2.2rem; height: 2.2rem; flex: none; }
.btn .icon--lead { width: 3.4rem; height: 3.4rem; flex: none; }
.btn--outline { background: #fff; color: var(--blue); }
.btn--outline:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn--outline .icon--lead { color: var(--navy); }
.btn--outline:is(:hover, :focus-visible) .icon--lead, .btn--outline:is(:hover, :focus-visible) .icon--lead [fill] { color: #fff; fill: #fff; }
.btn--primary .icon--lead, .btn--primary .icon--lead [fill] { color: #fff; fill: #fff; }
.btn--outline-dark { background: transparent; color: #fff; border-color: var(--blue); }
.btn--outline-dark:hover { background: var(--blue); }
.dark-cta .btn:hover { border-color: var(--blue); }
.btn--header { min-height: 5.9rem; padding: 0 2.6rem; font-size: 2.08rem; border-width: 0; gap: 1rem; }
.btn--header .icon--arrow { width: 2.4rem; height: 1.8rem; }
.btn--block { display: flex; width: 100%; }
.icon--down { transform: rotate(90deg); }
.icon { flex: none; }

.text-link { display: inline-flex; align-items: center; gap: 1rem; font-size: 2.4rem; font-weight: 700; color: var(--blue); text-decoration: none; }
.text-link .icon--arrow { width: 3.2rem; height: 2.4rem; transition: transform .2s ease; }
.text-link:hover { text-decoration: underline; }
.text-link:hover .icon--arrow { transform: translateX(.4rem); }

.pills { display: flex; flex-wrap: wrap; gap: 1.4rem 1.4rem; }
.keyword-pill { display: inline-flex; align-items: center; min-height: 4.6rem; padding: 0 2.4rem; background: var(--gray-section); border-radius: var(--radius-pill); font-size: 2rem; line-height: 1.2; color: var(--body); }

.divider { display: flex; align-items: center; gap: 3rem; color: var(--divider); }
.divider .icon { width: 2.8rem; height: 2.5rem; }
.divider__line { flex: 1; height: 2px; background: var(--divider); }

/* ---------- Header ---------- */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: var(--white); box-shadow: var(--header-shadow); }
.header-row { display: grid; grid-template-columns: 41rem 1fr auto; align-items: center; height: var(--header-h); }
.wordmark { color: var(--navy); font-weight: 700; font-size: 3.6rem; line-height: 1; text-transform: uppercase; text-decoration: none; white-space: nowrap; letter-spacing: -.01em; }
.wordmark:hover { text-decoration: none; color: var(--navy); }
.primary-nav ul { display: flex; gap: 6.2rem; }
.nav-link { position: relative; display: block; padding: 1rem 0; color: var(--body); font-size: 2.4rem; text-decoration: none; }
.nav-link::after { content: ""; position: absolute; left: -.2rem; right: -.2rem; bottom: -1.3rem; height: .8rem; border-radius: .4rem; background: var(--blue); transform: scaleX(0); transition: transform .2s ease, background-color .2s ease; }
.nav-link:hover { color: var(--navy); text-decoration: none; }
.nav-link:hover::after { transform: scaleX(.5); opacity: 1; left: -5.2rem; right: -5.2rem; }
.nav-link[aria-current="page"] { color: var(--navy); font-weight: 700; }
.nav-link[aria-current="page"]::after { transform: none; opacity: 1; }
.nav-link[aria-current="page"]:hover::after { left: -.2rem; right: -.2rem; transform: none; background: var(--navy); }
.nav-toggle { display: none; background: none; border: 0; padding: 1rem; margin-right: -1rem; color: var(--navy); cursor: pointer; }
.nav-toggle .icon { width: 3rem; height: 3rem; }
main { display: block; }

/* ---------- Mobile menu (full screen) ---------- */
.mobile-menu { position: fixed; inset: 0; z-index: 1100; background: #fff; overflow-y: auto; overscroll-behavior: contain; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.mobile-menu[hidden] { display: none; }
.mobile-menu__inner { position: relative; z-index: 1; padding: 0 1.6rem 4rem; max-width: 64rem; }
.mobile-menu__top { display: flex; align-items: center; justify-content: space-between; height: 7.4rem; }
.mobile-menu__top .wordmark { font-size: 3rem; }
.mobile-menu__close { background: none; border: 0; padding: 1.2rem; margin-right: -1.2rem; color: var(--navy); cursor: pointer; }
.mobile-menu__close .icon { width: 3.2rem; height: 3.2rem; }
.mobile-menu__list { margin-top: 1.4rem; }
.mobile-menu__list li + li { border-top: .2rem solid #E7F4FE; }
.mobile-menu__link { display: flex; align-items: center; min-height: 10rem; padding: 0 1rem; margin: 0 -.2rem; color: var(--body); font-size: 2.4rem; text-decoration: none; border-radius: .8rem; transition: background-color .15s ease; }
.mobile-menu__link:hover { background: #F7F7F7; text-decoration: none; color: var(--navy); }
.mobile-menu__link:active { background: var(--gray-section); font-weight: 700; box-shadow: inset 0 .1rem .4rem rgba(0,0,0,.12), 0 0 0 .1rem #D9D9D9; }
.mobile-menu__link[aria-current="page"] { color: var(--navy); font-weight: 700; }
.mobile-menu__cta { min-height: 5.9rem; margin-top: 4rem; font-size: 2.06rem; border: 0; }
.mobile-menu__vine { position: fixed; left: -6.2rem; bottom: -.9rem; width: 42.4rem; pointer-events: none; z-index: 0; }
@media (max-height: 640px) { .mobile-menu__vine { display: none; } }

/* Tablet: full-screen menu at tablet scale, aligned with the tablet header so nothing jumps on open */
@media (min-width: 768px) and (max-width: 1099px) {
  .mobile-menu__inner { max-width: none; padding: 0 var(--gutter) 8rem; }
  .mobile-menu__top { height: 12.4rem; }
  .mobile-menu__top .wordmark { font-size: 3.6rem; }
  .mobile-menu__close { padding: 1rem; margin-right: -1rem; }
  .mobile-menu__close .icon { width: 3rem; height: 3rem; }
  .mobile-menu__list { margin-top: 2rem; }
  .mobile-menu__link { min-height: 13rem; padding: 0 1.4rem; font-size: 4rem; }
  .mobile-menu__cta { min-height: 9rem; margin-top: 6rem; font-size: 3rem; }
  .mobile-menu__vine { left: -10rem; width: 80rem; bottom: -18rem;}
}

/* ---------- Angled sections (CSS shapes, never baked into images) ---------- */
.slant-top { clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%); margin-top: calc(-1 * var(--slant)); }
.slant-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant)), 0 100%); }
.slant-both { clip-path: polygon(0 var(--slant), 100% 0, 100% calc(100% - var(--slant)), 0 100%); }

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; min-height: 101rem; padding: calc(var(--header-h) + 11.1rem) 0 21rem; overflow: hidden; }
.hero-gradient { background: linear-gradient(112deg, rgba(80,189,255,0) 38%, rgba(80,189,255,.1) 62%, rgba(80,189,255,.16) 100%), #fff; }
.hero__media { position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% + 8rem); right: 0; clip-path: polygon(5.5rem 0, 100% 0, 100% 100%, 0 100%); }
.hero__media picture, .hero__media img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1100px) {
  .page-about .hero__media, .page-resume .hero__media, .page-contact .hero__media, .page-case-study .hero__media { top: var(--header-h); bottom: calc(var(--slant) * .5); clip-path: none; filter: drop-shadow(-1.6rem 0 2.4rem rgba(3, 18, 39, .28)); }
  .page-about .hero__media picture, .page-resume .hero__media picture, .page-contact .hero__media picture, .page-case-study .hero__media picture { clip-path: polygon(5.5rem 0, 100% 0, 100% 100%, 0 100%); }
}
.hero__vine { position: absolute; z-index: -1; left: -3.7rem; top: 51rem; width: 79.4rem; max-width: none; pointer-events: none; }
@media (min-width: 1100px) {
  .page-case-study.page-cs-pager-health .hero__vine { top: 54rem; }
  .page-case-study.page-cs-wellness .hero__vine { top: 62rem; }
  .page-case-study.page-cs-insurance .hero__vine { top: 52rem; }
  .page-case-study.page-cs-member-app .hero__vine { top: 72rem; }
  .page-about .hero__vine { top: 66rem;}
}
.hero__copy { max-width: 80rem; }
[class*="__media"] > picture, .thumb > picture { height: 100%; }
.hero__body { margin-top: 2.6rem; max-width: 74rem; }
.page-gallery .hero__body { margin-top: 2.6rem; max-width: 70rem; }
.hero__body p + p { margin-top: 1.6rem; }
.hero .pills { margin-top: 3.8rem; max-width: 70rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1.8rem; margin-top: 4rem; }
.hero__award { display: flex; align-items: center; gap: 1.6rem; margin-top: 3rem; font-weight: 700; color: var(--navy); }
.hero__award .icon { width: 2.8rem; height: 3.4rem; }
.hero__lede { margin-top: 2rem; font-weight: 700; color: var(--navy); max-width: 74rem; }

/* home collage: supplied straight image, rotated with CSS */
.hero--home .hero__media { left: calc(50% - 0.5rem); clip-path: none; overflow: hidden; }
.hero--home .hero__collage { position: absolute; left: 14.2rem; top: -2.2rem; width: 130rem; transform: rotate(8.75deg); transform-origin: 50% 50%; }
.hero--home .hero__collage img { width: 100%; height: auto; }

/* ---------- Sections ---------- */
.section { padding: 8.4rem 0 10rem; position: relative; }
.section-head { max-width: 145rem; }
.section-head--split { display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 4rem; max-width: none; }
.section-head--split .lead { grid-column: 1 / -1; max-width: 110rem; }
.section-head--split .text-link { margin-bottom: .8rem; }
.gray-band { position: relative; background: var(--gray-section); }
.outcome-section { position: relative; background-color: #FDFDFD; background-image: linear-gradient(100deg, #FDFDFD 12%, #EFF8FE 50%, #E3F4FF 82%); }

/* ---------- Home: featured case studies ---------- */
.listings { margin-top: 7.4rem; }
.listing { display: grid; grid-template-columns: 61.6rem 1fr; column-gap: 3.3rem; align-items: start; }
.listing--reverse { grid-template-columns: 1fr 61.6rem; column-gap: 3.9rem; }
.listing--reverse .listing__media { order: 2; }
a.listing__media { display: block; }
.listing__media { border-radius: var(--radius-panel); overflow: hidden; aspect-ratio: 616 / 348; }
.listing__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.listing:hover .listing__media img { transform: scale(1.02); }
.listing__body { padding-top: 1.4rem; }
.listing__body .h3 { font-size: 3rem; }
.listing__body > p { margin-top: 2.2rem; }
.listing__body .pills { margin-top: 2.8rem; }
.listing__body .text-link { margin-top: 3.6rem; }
.listing + .divider, .divider + .listing { margin-top: 6.4rem; }
.listings .divider + .listing { margin-top: 6.6rem; }

/* ---------- Home: creative disciplines ---------- */
.disciplines { padding: calc(var(--slant) + 7.4rem) 0 calc(var(--slant) + 9rem); }
.disc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6.4rem; margin-top: 7.4rem; }
.creative-discipline-card { position: relative; display: flex; flex-direction: column; border-radius: var(--radius-panel); transition: background-color .25s ease, box-shadow .25s ease; }
.creative-discipline-card .thumb { border-radius: 2.5rem 2.5rem 0 0; overflow: hidden; aspect-ratio: 454 / 241; }
.creative-discipline-card .thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.creative-discipline-card__body { display: flex; flex-direction: column; flex: 1; padding: 4.2rem 2.4rem 3.2rem; }
.creative-discipline-card__body > p { margin-top: 2.2rem; flex: 1; }
.creative-discipline-card .text-link { margin-top: 3rem; align-self: flex-start; }
.creative-discipline-card .text-link::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.creative-discipline-card:hover, .creative-discipline-card:focus-within { background: #fff; box-shadow: var(--card-shadow), 0 0 0 .2rem #E6E6E6; }
.creative-discipline-card:hover .text-link { text-decoration: underline; }

/* ---------- Home: metrics / about teaser ---------- */
.metrics { padding: 4.2rem 0 18rem; }
.metrics__grid { display: grid; grid-template-columns: 58.4rem 1fr; column-gap: 4.7rem; align-items: start; }
.metrics__media { border-radius: var(--radius-panel); overflow: hidden; aspect-ratio: 584 / 832; }
.metrics__media img { width: 100%; height: 100%; object-fit: cover; }
.metrics__copy .h2 { max-width: 76rem; }
.metrics__copy .prose { margin-top: 2.6rem; }
.prose p + p { margin-top: 3.6rem; }
.stats { display: flex; margin-top: 4.6rem; }
.stat { padding: 0 4.2rem; border-left: .2rem solid var(--divider); }
.stat:first-child { padding-left: 0; border-left: 0; }
.stat__num { display: flex; align-items: baseline; gap: .8rem; color: var(--headline-highlight); font-weight: 700; font-size: 3.6rem; line-height: 1.1; }
.stat__num small { font-size: 2.4rem; font-weight: 400; color: var(--body); }
.stat__num .icon { width: 6.4rem; height: 6.4rem; margin: -1.7rem 0; align-self: center; }
.stat__label { margin-top: .4rem; font-weight: 700; color: var(--navy); }

/* ---------- Dark CTA / bigger picture ---------- */
.dark-cta { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: linear-gradient(90deg, #031227 0%, #041F3F 50%, #012954 100%); padding: calc(var(--slant) + 5.4rem) 0 6.1rem; }
.dark-cta__photo { position: absolute; z-index: -2; top: var(--photo-top, -11.3rem); left: calc(50% + var(--photo-left, 35.6rem)); width: var(--photo-w, 136rem); height: var(--photo-h, 76.5rem); -webkit-mask-image: linear-gradient(90deg, transparent var(--photo-fade-start, 0%), #000 var(--photo-fade, 30%)); mask-image: linear-gradient(90deg, transparent var(--photo-fade-start, 0%), #000 var(--photo-fade, 30%)); }
.dark-cta__photo picture, .dark-cta__photo img { width: 100%; height: 100%; object-fit: cover; }
.cta__vine { position: absolute; z-index: -1; left: -3.7rem; bottom: var(--vine-bottom, -30rem); width: 79.4rem; max-width: none; pointer-events: none; opacity: .55; filter: brightness(.55) saturate(1.6) hue-rotate(-8deg); mix-blend-mode: screen; }
.dark-cta__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 6rem; }
.dark-cta__copy { max-width: var(--copy-w, 84rem); }
.dark-cta__title { color: #fff; }
.dark-cta__title .hl { color: #2A86FF; }
.dark-cta__body { margin-top: 2.4rem; max-width: 84rem; }
.dark-cta__body p { color: #fff; }
.dark-cta__body p + p { margin-top: 2.2rem; }
.dark-cta--stacked .dark-cta__inner { grid-template-columns: 1fr; }
.dark-cta--stacked .dark-cta__action { margin-top: 3.6rem; }
.dark-cta--home .dark-cta__copy { max-width: 110rem; }
.dark-cta--home .dark-cta__action { align-self: center; }
@media (min-width: 1100px) { .dark-cta--home .dark-cta__photo { left: auto; right: -37rem; } }
.dark-cta__action .btn { min-height: 8.1rem; padding: 0 3.4rem; border: 0; }

/* ---------- Explore more ---------- */
.explore { padding: 4.6rem 0 5.6rem; }
.explore__grid { display: grid; grid-template-columns: 31.2rem 1fr; column-gap: 0; align-items: start; }
.explore__title { font-size: 5rem; max-width: 30rem; }
.explore__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; }
.explore-card { display: flex; flex-direction: column; height: 100%; border-radius: 1.6rem; overflow: hidden; background: #E2F3FF; color: var(--body); text-decoration: none; transition: box-shadow .25s ease, transform .25s ease; }
.explore-card:hover { text-decoration: none; box-shadow: var(--card-shadow); transform: translateY(-.4rem); }
.explore-card__media { aspect-ratio: 380 / 182; overflow: hidden; }
.explore-card__media img { width: 100%; height: 100%; object-fit: cover; }
.explore-card__body { position: relative; display: block; padding: 1.6rem 5.6rem 2rem 2.2rem; flex: 1; }
.explore-card__title { display: block; color: var(--navy); font-weight: 700; font-size: 2.4rem; line-height: 1.4; }
.explore-card__sub { display: block; font-size: 2.4rem; line-height: 1.45; }
.explore-card .icon--arrow { position: absolute; right: 2rem; bottom: 2.2rem; width: 2.4rem; height: 2.4rem; color: var(--blue); }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: #fff; padding: 9.1rem 0 2.8rem; }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 4rem; }
.footer-wordmark { display: block; color: #fff; font-size: 5rem; font-weight: 700; line-height: 1; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.footer-wordmark:hover { color: #fff; text-decoration: none; }
.footer-tagline { margin-top: 1.6rem; color: var(--blue-light); font-size: 2rem; line-height: 1.2; word-spacing: .2rem; }
.footer-tagline span { margin: 0 .5rem; }
.footer-right { display: flex; flex-direction: column; align-items: flex-end; }
.footer-nav { display: flex; gap: 5.2rem; }
.footer-link { position: relative; color: #fff; font-size: 2.4rem; text-decoration: none; }
.footer-link::after { content: ""; position: absolute; left: -.1rem; right: -.1rem; bottom: -1.7rem; height: .8rem; border-radius: .4rem; background: var(--blue); transform: scaleX(0); transition: transform .2s ease, background-color .2s ease; }
.footer-link:hover { color: #fff; text-decoration: none; }
.footer-link:hover::after { transform: scaleX(.5); left: -5.2rem; right: -5.2rem; }
.footer-link[aria-current="page"] { font-weight: 700; }
.footer-link[aria-current="page"]::after { transform: none; }
.footer-link[aria-current="page"]:hover::after { left: -.1rem; right: -.1rem; transform: none; background: var(--blue-light); }
.footer-social { display: flex; gap: 2.4rem; margin-top: 4.4rem; }
.footer-social a { color: var(--blue-light); display: block; }
.footer-social a:hover { color: #fff; }
.footer-social .icon { width: 3rem; height: 3rem; }
.footer-bottom { display: flex; justify-content: space-between; gap: 2rem; margin-top: 4.4rem; padding-top: 3.4rem; border-top: .2rem solid #1B2C44; }
.copyright, .design-credit { color: var(--footer-muted); font-size: 1.8rem; }

/* ---------- Reveal (progressive enhancement) ---------- */
.has-reveal-js .reveal:not(.is-visible) { opacity: 0; transform: translateY(24px); }
.reveal { transition: opacity var(--reveal-duration) ease-out, transform var(--reveal-duration) ease-out; transition-delay: calc(var(--stagger, 0) * 100ms); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ==========================================================================
   Tablet (768–1199)
   ========================================================================== */
@media (max-width: 1199px) {
  .header-row { grid-template-columns: auto 1fr auto; column-gap: 4rem; }
  .primary-nav ul { gap: 4rem; justify-content: center; }
  .listing, .listing--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .listing--reverse { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}
@media (max-width: 1099px) {
  .primary-nav, .btn--header { display: none; }
  .header-row { grid-template-columns: 1fr auto; }
  .nav-toggle { display: block; }
  /* hero: image first, then copy */
  .hero { min-height: 0; padding: var(--header-h) 0 calc(var(--slant) + 8rem); }
  .hero__media { position: relative; z-index: 0; left: auto; inset: auto; height: 52vw; clip-path: none; }
  .hero__inner { margin-top: 6rem; }
  .hero--home .hero__media { left: auto; }
  .hero--home .hero__collage { left: -6%; top: -18%; width: 112%; }
  .hero__vine { top: auto; bottom: -6rem; }
  .disc-grid { gap: 3.2rem; }
  .metrics__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .dark-cta { --photo-left: 10rem; }
  .explore__grid { grid-template-columns: 1fr; row-gap: 3rem; }
  .footer-nav { gap: 3.6rem; }
  .footer-top { flex-wrap: wrap; }
  .footer-right { align-items: flex-start; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .disc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .listing, .listing--reverse { column-gap: 4rem; }
}

/* ==========================================================================
   Mobile (≤767) — from 2026 mobile design comp.psd (430px, 1x)
   ========================================================================== */
@media (max-width: 767px) {
  body { font-size: 1.8rem; line-height: 1.556; }
  .h1 { font-size: 4rem; line-height: 1.15; }
  .h1__sub { font-size: 3.2rem; }
  .h2 { font-size: 3.2rem; line-height: 1.12; }
  .h3, .listing__body .h3 { font-size: 2.4rem; }
  .eyebrow { font-size: 1.4rem; margin-bottom: 1.6rem; }
  .lead { font-size: 1.8rem; margin-top: 2rem; }
  .keyword-pill { font-size: 1.8rem; min-height: 4.6rem; padding: 0 2.4rem; }
  .pills { gap: 1.4rem 1.2rem; }
  .btn { min-height: 8.2rem; font-size: 2.4rem; }
  .mobile-full-width-button, .hero__actions .btn { display: flex; width: 100%; }
  .text-link { font-size: 2.4rem; }
  .wordmark { font-size: clamp(2.4rem, 7.6vw, 3rem); }
  .divider { padding: 0; gap: 1.8rem; }
  .divider .icon { width: 2.7rem; height: 2.4rem; }

  .hero { padding: var(--header-h) 0 calc(var(--slant) + 4rem); }
  .hero__media { height: 24.8rem; }
  .hero__inner { margin-top: 3.6rem; }
  .hero__body { margin-top: 2.2rem; }
  .hero__award { margin-top: 2.6rem; font-size: 2rem; gap: 1.6rem; }
  .hero__actions { margin-top: 2.8rem; gap: 2.3rem; flex-direction: column; }
  .hero__vine { left: -52.2rem; bottom: auto; top: 65.4rem; }
  .page-gallery .hero__vine {top: 38.4rem; }
  .page-case-study.page-cs-pager-health .hero__vine { top: auto; bottom: -13rem; }
  .page-case-study.page-cs-wellness .hero__vine { top: auto; bottom: -13rem; }
  .page-case-study.page-cs-insurance .hero__vine { top: auto; bottom: -13rem; }
  .page-case-study.page-cs-member-app .hero__vine { top: auto; bottom: -13rem; }
  .hero--home .hero__collage { left: -4%; top: -60%; width: 128%; }

  .section { padding: 5rem 0 6rem; }
  .section-head--split { display: block; }
  .section-head--split > .text-link { display: none; }
  .listings { margin-top: 3.2rem; }
  .listing, .listing--reverse { grid-template-columns: 1fr; }
  .listing--reverse .listing__media { order: 0; }
  .listing__media { aspect-ratio: 394 / 223; border-radius: 1.6rem; }
  .listing__body { padding-top: 2.4rem; }
  .listing__body > p { margin-top: 1.2rem; }
  .listing__body .pills { margin-top: 2.2rem; }
  .listing__body .text-link { display: flex; justify-content: center; margin-top: 4.4rem; }
  .listings .divider + .listing, .listing + .divider { margin-top: 3.8rem; }

  .disciplines { padding: calc(var(--slant) + 2rem) 0 calc(var(--slant) + 4rem); }
  .disc-grid { grid-template-columns: 1fr; gap: 2.4rem; margin-top: 4.4rem; }
  .creative-discipline-card__body { padding: 2.6rem 2.2rem 2.6rem; }
  .creative-discipline-card__body > p { margin-top: 1.4rem; }
  .creative-discipline-card .text-link { align-self: center; margin-top: 2.4rem; font-size: 2rem; }

  .metrics { padding: 2rem 0 calc(var(--slant) + 2rem); }
  .metrics__grid { grid-template-columns: 1fr; row-gap: 3rem; }
  .metrics__media { aspect-ratio: 398 / 270; }
  .prose p + p { margin-top: 2.8rem; }
  .stats { flex-wrap: wrap; margin-top: 3.4rem; }
  .stat { flex: 1 1 50%; padding: 0 0 0 3rem; }
  .stat:first-child { padding: 0 2rem 0 0; }
  .stat__num { font-size: 3rem; }
  .stat__num small { font-size: 1.8rem; }
  .stat:last-child { flex-basis: 100%; border-left: 0; border-top: .4rem solid #EEE; margin-top: 2.4rem; padding: 2.4rem 0 0; display: flex; justify-content: center; align-items: center; gap: 1.2rem; }
  .stat:last-child .stat__label { margin-top: 0; }
  .stat:last-child .stat__num .icon { width: 5.6rem; height: 5.6rem; margin: -1.4rem 0; }

  .dark-cta { padding: 0 0 4.8rem; margin-top: 0; clip-path: none; }
  .dark-cta__photo img { object-position: var(--m-pos, center) !important; }
  .dark-cta__photo { position: relative; z-index: 0; top: auto; left: auto; width: 100%; height: 25.1rem; -webkit-mask-image: none; mask-image: none; }
  .dark-cta__inner { grid-template-columns: 1fr; margin-top: 2rem; }
  .dark-cta__action { margin-top: 3.6rem; }
  .dark-cta__action .btn { min-height: 8.2rem; }
  .cta__vine { left: -52.5rem; bottom: -12rem; }

  .explore { padding: 4rem 0 5rem; }
  .explore__cards { grid-template-columns: 1fr; }
  .explore-card__title, .explore-card__sub { font-size: 1.8rem; }

  .site-footer { padding: 6rem 0 3rem; text-align: center; }
  .footer-top { flex-direction: column; align-items: center; gap: 3rem; }
  .footer-wordmark { font-size: clamp(3.2rem, 10.9vw, 4.7rem); }
  .footer-tagline { font-size: clamp(1.4rem, 4.2vw, 1.8rem); margin-top: 1.4rem; word-spacing: 0; white-space: nowrap; }
  .footer-tagline span { margin: 0 .1rem; }
  .stat { padding-left: 2.4rem; }
  .footer-right { align-items: center; }
  .footer-nav { flex-wrap: wrap; justify-content: center; gap: 2.8rem 3.6rem; max-width: 34rem; }
  .footer-social { margin-top: 3.6rem; justify-content: center; }
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: 1.6rem; margin-top: 4rem; padding-top: 4rem; border-top-width: .4rem; }
}


/* ==========================================================================
   Case study template
   ========================================================================== */
.hero__body--after-lede { margin-top: 2.6rem; }
.hero__lede + .hero__body--after-lede { margin-top: 2rem; }
.page-case-study .hero .pills { margin-top: 4.2rem; }
.challenge { padding: 8.4rem 0 12rem; }
.challenge__grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--panel-w, 84.2rem); column-gap: 4.8rem; align-items: start; }
.challenge--top .challenge__grid { margin-top: 3.6rem; }
.challenge__head .h2 { max-width: 120rem; }
.challenge__text .challenge__body { margin-top: 3.4rem; }
.challenge--top .challenge__text .challenge__body { margin-top: 0; }
.prose--tight p + p { margin-top: 2.4rem; }
.challenge__action { margin-top: 4.4rem; }
.challenge__panels { display: grid; gap: 2.4rem; }
.challenge--twocol .challenge__cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 6.4rem; margin-top: 3.4rem; }
.challenge--twocol .challenge__panels { margin-top: 4.6rem; }

.pale-panel { background: var(--blue-pale); border-radius: var(--radius-panel); }
.panel { padding: 3.4rem 3.6rem 4rem; }
.panel__title { color: var(--blue); font-size: 2.4rem; font-weight: 700; line-height: 1.3; }
.panel__intro { margin-top: 1.2rem; }
.impact-stats { display: grid; grid-template-columns: 1fr 1fr; margin-top: 3rem; }
.impact-stat { display: flex; gap: 2.2rem; align-items: flex-start; }
.impact-stat + .impact-stat { border-left: .2rem solid #B9C3CC; padding-left: 2.6rem; }
.impact-stat__icon { width: 8.5rem; height: 8.5rem; color: var(--navy); margin-top: -.4rem; }
.impact-stat__num { color: var(--headline-highlight); font-size: 4.8rem; font-weight: 700; line-height: 1.05; }
.panel__rule { border: 0; border-top: .2rem solid #B9C3CC; margin: 3.4rem 0 3.6rem; }
.timeline-roles { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 2.6rem; }
.timeline-role { display: flex; flex-direction: column; gap: 2.2rem; padding: 0 2rem; }
.timeline-role + .timeline-role { border-left: .2rem solid #B9C3CC; }
.timeline-role:first-child { padding-left: .4rem; }
.timeline-role__icon { width: 7.6rem; height: 7.6rem; color: var(--blue); align-self: center; }
.timeline-role strong { color: var(--navy); }
.role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3.2rem 2.4rem; margin-top: 3rem; }
.panel--wide .role-grid { grid-template-columns: repeat(3, 1fr); gap: 5rem 4rem; margin-top: 4rem; }
.role-item { display: grid; grid-template-columns: 8.8rem minmax(0, 1fr); gap: 1.6rem; align-items: start; }
.icon-circle { display: grid; place-items: center; width: 8.8rem; height: 8.8rem; border-radius: 50%; background: #fff; color: var(--navy); }
.icon-circle .icon { width: 5rem; height: 5rem; }
.role-item p { line-height: 1.5; }
.role-item strong { color: var(--navy); }
.role-item__label { color: var(--body); }
.mini-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 2.6rem; margin-top: 3rem; }
.mini-card { display: grid; grid-template-columns: 4.8rem minmax(0, 1fr); gap: 1.6rem; align-items: start; background: #fff; border-radius: 1.2rem; padding: 2.2rem 2rem; }
.mini-card .icon { width: 4.8rem; height: 4.8rem; color: var(--navy); }
.mini-card strong { color: var(--navy); }

.contributions { padding: calc(var(--slant) + 7.6rem) 0 calc(var(--slant) + 9rem); }
.contrib-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem 4.8rem; margin-top: 6rem; }
.contrib { display: grid; grid-template-columns: 8.4rem minmax(0, 1fr); gap: 3.2rem; align-items: start; }
.contrib > div { max-width: 56rem; }
.contrib__icon { position: relative; width: 8.4rem; height: 8.4rem; color: var(--blue); }
.contrib__icon .icon { width: 100%; height: 100%; }
.contrib__icon .icon--overlay, .outcome-stat__icon .icon--overlay { position: absolute; width: 58%; height: 58%; left: 21%; top: 6%; }
.contrib__title { font-size: 2.4rem; font-weight: 700; color: var(--body); line-height: 1.5; }

.work { padding: 7.4rem 0 9rem; }
.work .section-head + .work-grid { margin-top: 4rem; }
h2.eyebrow + .work-grid { margin-top: 1.6rem; }
.work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5.2rem 3.2rem; margin-top: 3rem; }
.work-item__media { border-radius: var(--radius-panel); overflow: hidden; aspect-ratio: 732 / 345; }
.work-item__media img { width: 100%; height: 100%; object-fit: cover; }
.work-item__title { margin-top: 2.6rem; font-size: 2.4rem; font-weight: 700; color: var(--body); line-height: 1.5; }

.outcome { padding: calc(var(--slant) + 9.4rem) 0 calc(var(--slant) + 12rem); overflow: hidden; isolation: isolate; }
.outcome__deco { position: absolute; z-index: -1; left: -2.6rem; top: calc(var(--slant) + 19rem); width: 48.3rem; height: 42.3rem; color: #2C64B4; opacity: .1; }
.outcome--side .container { display: grid; grid-template-columns: 32.3rem 1fr; }
.outcome__stats { display: grid; margin-top: 4.6rem; }
.outcome--side .outcome__stats { margin-top: 0; grid-template-columns: repeat(3, 1fr); }
.outcome__stats--4 { grid-template-columns: repeat(4, 1fr); }
.outcome-stat { padding: 0 3.4rem; border-left: .2rem solid #A9A9A9; }
.outcome-stat:first-child { border-left: 0; padding-left: 0; }
.outcome--side .outcome-stat:first-child { border-left: .2rem solid #A9A9A9; padding-left: 3.4rem; }
.outcome-stat__num { color: var(--headline-highlight); font-size: 4.8rem; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.outcome-stat__num small { font-size: 3.6rem; }
.outcome-stat__title { font-size: 2.4rem; font-weight: 700; color: var(--navy); line-height: 1.5; margin-top: .6rem; }
.outcome-stat__icon { position: relative; display: block; width: 7.4rem; height: 7.4rem; color: var(--blue); margin-bottom: 2rem; }
.outcome-stat__icon .icon { width: 100%; height: 100%; }
.outcome--icons .outcome-stat__title { margin-top: 0; }
.dark-cta--bigpic { padding-bottom: 7rem; }
.dark-cta--bigpic .dark-cta__copy { max-width: var(--copy-w, 84rem); }
.dark-cta--bigpic .dark-cta__body { max-width: var(--copy-w, 84rem); }

.insights { padding: calc(var(--slant) + 2.6rem) 0 calc(var(--slant) + 9rem); }
.insight-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3rem; margin-top: 5.6rem; }
.insight__title { display: flex; align-items: center; gap: 1.6rem; min-height: 6rem; font-size: 2.4rem; font-weight: 400; color: var(--navy); line-height: 1.25; }
.insight__title img { width: 4rem; height: auto; flex: none; }
.insight__pie { width: 14.6rem; height: 14.6rem; margin: 2.4rem 0 2.4rem 3.4rem; }
.insight strong { color: var(--navy); }
.insights__note { margin-top: 5.6rem; font-size: 2.2rem; max-width: 145rem; }
.process { padding: 5rem 0 4rem; }
.process__grid { display: grid; grid-template-columns: 55.2rem minmax(0, 1fr); column-gap: 3.1rem; align-items: start; }
.process__media { border-radius: var(--radius-panel); overflow: hidden; aspect-ratio: 552 / 538; }
.process__media img { width: 100%; height: 100%; object-fit: cover; }
.process__copy .prose { margin-top: 3.2rem; }
.artifacts, .final-design { padding: 3.6rem 0 6rem; }
/* Sections sitting above the angled Outcome band: reserve the slant so it never cuts into content */
.work, .final-design { padding-bottom: calc(var(--slant) + 6rem); }
.artifacts__title, .final-design__title { margin-top: 7rem; }
.final-design .lead { margin-top: 2.6rem; }
.phones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8rem; margin-top: 6.4rem; }
.phone__media { width: 30rem; max-width: 100%; }
.phone__media img { width: 100%; }
.phone__title { margin-top: 2.6rem; font-size: 2.4rem; font-weight: 700; color: var(--body); }
.phone p { line-height: 1.5; }

@media (max-width: 1099px) {
  .challenge__grid { grid-template-columns: 1fr; row-gap: 5rem; }
  .challenge--twocol .challenge__cols { column-gap: 4rem; }
  .panel--wide .role-grid { grid-template-columns: 1fr 1fr; }
  .contrib-grid { column-gap: 4rem; }
  .outcome--side .container { grid-template-columns: 1fr; }
  .outcome--side .outcome__stats { margin-top: 4.6rem; }
  .outcome--side .outcome-stat:first-child { border-left: 0; padding-left: 0; }
  .outcome__stats--4 { grid-template-columns: 1fr 1fr; row-gap: 5rem; }
  .outcome__stats--4 .outcome-stat:nth-child(3) { border-left: 0; padding-left: 0; }
  .insight-grid { grid-template-columns: repeat(3, 1fr); row-gap: 5rem; }
  .process__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: 4rem; }
  .phones { grid-template-columns: repeat(2, 1fr); gap: 6rem 4rem; justify-items: center; }
  .phone { max-width: 34rem; width: 100%; min-width: 0; }
  .phone__media { width: 100%; max-width: 30rem; }
}
@media (max-width: 767px) {
  .challenge { padding: 5rem 0 6rem; }
  .challenge--twocol .challenge__cols { grid-template-columns: 1fr; row-gap: 2rem; }
  .panel { padding: 2.6rem 2rem 3rem; }
  .panel__title { font-size: 2rem; }
  .impact-stats { grid-template-columns: 1fr; row-gap: 2.4rem; }
  .impact-stat + .impact-stat { border-left: 0; padding-left: 0; border-top: .2rem solid #B9C3CC; padding-top: 2.4rem; }
  .impact-stat__icon { width: 5.6rem; height: 5.6rem; }
  .impact-stat__num { font-size: 3.6rem; }
  .timeline-roles { grid-template-columns: 1fr; row-gap: 2rem; }
  .timeline-role, .timeline-role:first-child { flex-direction: row; align-items: flex-start; padding: 0; gap: 1.6rem; }
  .timeline-role + .timeline-role { border-left: 0; }
  .timeline-role__icon { width: 5rem; height: 5rem; align-self: flex-start; }
  .role-grid, .panel--wide .role-grid, .mini-cards { grid-template-columns: 1fr; gap: 2rem; margin-top: 2.2rem; }
  .role-item { grid-template-columns: 6.4rem minmax(0, 1fr); }
  .icon-circle { width: 6.4rem; height: 6.4rem; }
  .icon-circle .icon { width: 3.4rem; height: 3.4rem; }
  .mini-card { grid-template-columns: 3.6rem minmax(0, 1fr); padding: 1.8rem 1.6rem; }
  .mini-card .icon { width: 3.6rem; height: 3.6rem; }
  .contributions { padding: calc(var(--slant) + 3rem) 0 calc(var(--slant) + 4rem); }
  .contrib-grid { grid-template-columns: 1fr; gap: 3.2rem; margin-top: 3.6rem; }
  .contrib { grid-template-columns: 4.8rem minmax(0, 1fr); gap: 1.8rem; }
  .contrib__icon { width: 4.8rem; height: 4.8rem; }
  .contrib__title, .work-item__title, .phone__title { font-size: 1.8rem; }
  .work { padding: 5rem 0 6rem; }
  .work, .final-design { padding-bottom: calc(var(--slant) + 4rem); }
  .work-grid { grid-template-columns: 1fr; gap: 4rem; }
  .work-item__media { border-radius: 1.6rem; }
  .work-item__title { margin-top: 1.8rem; }
  .outcome { padding: calc(var(--slant) + 3rem) 0 calc(var(--slant) + 6rem); }
  .outcome__deco { width: 24rem; height: 21rem; top: auto; bottom: calc(var(--slant) + 2rem); left: auto; right: -4rem; }
  .outcome--side .outcome__stats, .outcome__stats--4, .outcome__stats { grid-template-columns: 1fr; row-gap: 0; margin-top: 3rem; }
  .outcome-stat, .outcome--side .outcome-stat:first-child, .outcome__stats--4 .outcome-stat:nth-child(3) { border-left: 0; padding: 2.4rem 0; border-top: .2rem solid #C9CED4; }
  .outcome-stat:first-child { border-top: 0; padding-top: 0; }
  .outcome-stat__num { font-size: 3.6rem; }
  .outcome-stat__num small { font-size: 2.6rem; }
  .outcome-stat__title { font-size: 1.8rem; }
  .outcome-stat__icon { width: 5rem; height: 5rem; margin-bottom: 1.4rem; }
  .dark-cta--bigpic { padding-bottom: 5rem; }
  .insights { padding: calc(var(--slant) + 2rem) 0 calc(var(--slant) + 4rem); }
  .insight-grid { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 3.6rem 2rem; margin-top: 3.6rem; }
  .insight__title { font-size: 1.8rem; min-height: 0; gap: 1rem; }
  .insight__title img { width: 3rem; }
  .insight__pie { width: 11rem; height: 11rem; margin: 1.8rem 0; }
  .insight p { font-size: 1.6rem; }
  .insights__note { font-size: 1.6rem; margin-top: 3.6rem; }
  .process__grid { grid-template-columns: 1fr; row-gap: 3rem; }
  .process__media { aspect-ratio: 4 / 3; border-radius: 1.6rem; }
  .artifacts__title, .final-design__title { margin-top: 4rem; }
  .phones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem 2rem; }
  .phone p { font-size: 1.6rem; }
}


/* ==========================================================================
   About / Resume / Gallery / Contact
   ========================================================================== */
.h1--break .hl { display: block; }
.btn--md { min-height: 7.8rem; padding: 0 3rem; }
.btn--md .icon--chev, .btn .icon--chev { width: 1.9rem; height: 1.9rem; }
.icon-circle--pale { background: var(--blue-pale); width: 9.8rem; height: 9.8rem; color: var(--navy); }
.icon-circle--pale .icon { width: 5.4rem; height: 5.4rem; }
.hero--short { min-height: 77.5rem; padding-bottom: 16rem; }
.hero--short .hero__vine { top: 29.3rem; }
@media (min-width: 1100px) { .hero--gallery .hero__vine { top: 40.3rem; } }

/* About */
.approach { padding-top: 8rem; padding-bottom: 14rem; }
.approach-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 6.4rem; }
.approach-item { padding: 0 3.4rem; border-left: .2rem solid var(--divider); min-height: 40.4rem; }
.approach-item:first-child { padding-left: 0; border-left: 0; }
.approach-item .icon-circle { color: var(--blue); }
.approach-item__title { margin-top: 3.3rem; font-size: 2.4rem; color: var(--navy); }
.perspective { padding: calc(var(--slant) + 7.4rem) 0 calc(var(--slant) + 9rem); }
.perspective__body { max-width: 76rem; }
.big-stats { display: flex; margin: 4.4rem 0 0; }
.big-stats > div { padding: 0 6.6rem; border-left: .2rem solid #284A78; }
.big-stats > div:first-child { padding-left: 0; border-left: 0; }
.big-stats__num { color: #2A86FF; font-size: 7.2rem; font-weight: 700; line-height: 1; }
.big-stats dd { margin: 1rem 0 0; color: #fff; font-weight: 700; line-height: 1.5; }
.industry { padding-top: 6rem; padding-bottom: 12rem; }
.industry__grid { display: grid; grid-template-columns: minmax(0, 1fr) 65.2rem; column-gap: 6rem; margin-top: 3.6rem; align-items: start; }
.areas { padding: 3.6rem 3.6rem 4rem; }
.areas__title { font-size: 3rem; }
.areas__list { display: grid; gap: 2.2rem; margin-top: 3rem; }
.areas__list li { display: grid; grid-template-columns: 8.8rem 1fr; gap: 1.6rem; align-items: center; }
.areas__list .icon-circle { color: var(--navy); }
.visual-arts { padding-top: 4rem; padding-bottom: 14rem; }
.visual-arts__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 6rem; align-items: start; }
.visual-arts__copy { max-width: 54rem; }
.visual-arts__copy .prose { margin-top: 3.4rem; }
.visual-arts__copy .btn { margin-top: 4.4rem; }
.art-collage { display: grid; grid-template-columns: 31.5rem 24.4rem 24.3rem; grid-template-rows: 31.9rem 28.4rem; gap: 2.4rem 2.4rem; }
.art-collage > div { border-radius: 1.6rem; overflow: hidden; }
.art-collage img { width: 100%; height: 100%; object-fit: cover; }
.art-collage__a { grid-row: 1 / 3; }
.art-collage__d { grid-column: 3; grid-row: 1 / 3; }
.art-collage__b { grid-column: 2; grid-row: 1; }
.art-collage__c { grid-column: 2; grid-row: 2; }
.beyond { padding-top: 0; padding-bottom: 14rem; }
.beyond-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3rem; margin-top: 4.4rem; }
.beyond-card { text-align: center; }
.beyond-card__media { border-radius: 1.6rem; overflow: hidden; aspect-ratio: 275 / 449; }
.beyond-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.beyond-card:hover .beyond-card__media img { transform: scale(1.03); }
.beyond-card h3 { margin-top: 2.4rem; font-size: 2.4rem; font-weight: 700; color: var(--body); line-height: 1.5; }

/* Resume */
.career { padding-top: 8rem; padding-bottom: 14rem; }
.timeline { margin-top: 6.4rem; }
.role-entry { position: relative; display: grid; grid-template-columns: 16.6rem 5.4rem minmax(0, 1fr); padding: 0 0 6.6rem; }
.role-entry + .role-entry { border-top: .2rem solid var(--divider); padding-top: 7.4rem; }
.role-entry::before { content: ""; position: absolute; left: 18rem; top: 0; bottom: 0; width: .4rem; background: var(--divider); }
.role-entry:first-child::before { top: 1.6rem; }
.role-entry__years { font-weight: 700; color: var(--navy); padding-top: .6rem; white-space: nowrap; }
.role-entry__dot { position: relative; z-index: 1; width: 3.3rem; height: 3.3rem; margin: .4rem 0 0 0rem; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 .3rem var(--headline-highlight); }
.role-entry__dot::after { content: ""; position: absolute; inset: .7rem; border-radius: 50%; background: var(--headline-highlight); }
.role-entry--past .role-entry__dot { box-shadow: inset 0 0 0 .3rem #D9D9D9; }
.role-entry--past .role-entry__dot::after { display: none; }
.role-entry--past::before { bottom: 0; }
.role-entry__org { color: var(--blue); font-size: 3.6rem; font-weight: 400; line-height: 1.2; }
.position__main { min-width: 0; }
.position { display: grid; grid-template-columns: minmax(0, 96rem) 28.3rem; column-gap: 2.4rem; align-items: end; margin-top: 2.6rem; }
.position + .position { margin-top: 3.6rem; }
.position__head { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; }
.position__title { font-size: 2.4rem; font-weight: 700; color: var(--body); }
.disclosure { display: inline-flex; align-items: center; gap: 1rem; background: none; border: 0; padding: .4rem 0; color: var(--blue); font-size: 2.4rem; text-decoration: underline; text-underline-offset: .25em; cursor: pointer; white-space: nowrap; }
.disclosure:hover { text-decoration: none; }
.disclosure .icon { width: 2.2rem; height: 2.2rem; color: var(--navy); transition: transform .2s ease; }
.disclosure[aria-expanded="false"] .icon { transform: rotate(180deg); }
.position__summary { margin-top: 2.6rem; }
.position__bullets { list-style: none; padding: 0; margin: 2.2rem 0 0; display: grid; gap: 2.2rem; }
.position__bullets[hidden] { display: none; }
.position__bullets li { position: relative; padding-left: 1.6rem; }
.position__bullets li::before { content: ""; position: absolute; left: 0; top: .7em; width: .7rem; height: .7rem; border-radius: 50%; background: var(--headline-highlight); }
.position__metrics { padding: 2.8rem 2.6rem; }
.position__metrics p + p { margin-top: 2.6rem; }
.position__metric { display: block; color: var(--headline-highlight); font-size: 5.5rem; font-weight: 700; line-height: 1.1; }
.skills { padding: calc(var(--slant) + 9rem) 0 calc(var(--slant) + 14rem); }
.skills__grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 5rem; }
.skills__grid > div + div { border-left: .2rem solid #B5B5B5; padding-left: 5.6rem; }
.skills__grid > div:first-child { padding-right: 3rem; }
.skills__heading { color: var(--blue); font-size: 3.6rem; font-weight: 400; padding-left: .8rem; }
.expertise { display: grid; gap: 4.2rem; margin-top: 3.4rem; }
.expertise li { display: grid; grid-template-columns: 8.7rem minmax(0, 1fr); gap: 1.6rem; align-items: center; }
.expertise .icon-circle { width: 8.7rem; height: 8.7rem; color: var(--navy); }
.expertise .icon-circle .icon { width: 4.6rem; height: 4.6rem; }
.expertise strong { color: var(--navy); }
.tools { display: grid; gap: 1.6rem; margin-top: 3.4rem; }
.tools li { display: grid; grid-template-columns: 9.2rem minmax(0, 1fr); align-items: start; line-height: 1.5; }
.tools__logos { display: flex; gap: .6rem; align-items: center; height: 3.6rem; }
.tools__logos img { height: 3rem; width: auto; max-width: 8rem; }
.tools__sub > span:last-child { padding-left: 1.6rem; }
.skills__rule { border: 0; border-top: .2rem solid #B5B5B5; margin: 8rem 0 9rem; }
.education__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 4.6rem; }
.education__grid .expertise { margin-top: 0; padding-right: 3rem; }
.education__note { border-left: .2rem solid #B5B5B5; padding-left: 7rem; max-width: 72rem; align-content: center;}

/* Gallery */
@media (min-width: 1100px) {
	.hero--gallery { min-height: 90rem; }
	.hero--gallery .hero__media { left: calc(50% - 8.4rem); clip-path: polygon(7rem 0, 100% 0, 100% 100%, 0 100%); }
	.hero--gallery .hero__collage { left: 5.7rem; top: -56.7rem; width: 132rem; transform: rotate(3deg); }
}
.gallery { padding-top: 5rem; padding-bottom: 14rem; }
.gallery-tabs { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--blue-pale); border-radius: 2rem; }
.gallery-tabs[hidden], .gallery-select[hidden] { display: none; }
.gallery-tab { display: flex; align-items: center; gap: 2.2rem; min-height: 14.2rem; padding: 0 2.6rem; white-space: nowrap; border: 0; border-radius: 2rem; background: transparent; color: var(--navy); text-align: left; cursor: pointer; position: relative; transition: background-color .2s ease, color .2s ease; }
.gallery-tab + .gallery-tab::before { content: ""; position: absolute; left: 0; top: 2.9rem; bottom: 2.9rem; width: .3rem; background: #B9C3CC; }
.gallery-tab[aria-selected="true"]::before, .gallery-tab[aria-selected="true"] + .gallery-tab::before { display: none; }
.gallery-tab .icon { width: 5.8rem; height: 5.4rem; color: var(--navy); }
.gallery-tab strong { display: block; font-size: 3rem; line-height: 1.2; }
.gallery-tab span span { display: block; font-size: 2.4rem; color: var(--body); }
.gallery-tab:hover { background: #D8EEFC; }
.gallery-tab[aria-selected="true"] { background: var(--blue); color: #fff; }
.gallery-tab[aria-selected="true"] .icon { color: #fff; }
.gallery-tab[aria-selected="true"] span span { color: #b1ccf5; }
.gallery-select label { display: block; font-weight: 700; color: var(--navy); margin-bottom: .8rem; }
.select-wrap { position: relative; }
.select-wrap select { appearance: none; width: 100%; min-height: 6rem; padding: 0 5.6rem 0 2rem; border: .2rem solid #CFE3F2; border-radius: 1.2rem; background: #fff; color: var(--navy); font: inherit; font-size: 2rem; cursor: pointer; }
.select-wrap > .icon { position: absolute; right: 2rem; top: 50%; width: 2rem; height: 2rem; transform: translateY(-50%); pointer-events: none; color: var(--navy); }
.gallery-head { margin-top: 5.8rem; }
.gallery-head[hidden] { display: none; }
.gallery-head .h2 { margin-top: 0; }
.gallery-head .lead { max-width: 145rem; }
.gallery-subnav { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 3.7rem; }
.gallery-subnav[hidden] { display: none; }
.gallery-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 5.8rem; padding: 0 2.6rem; border: 0; border-radius: var(--radius-pill); background: var(--gray-section); color: var(--body); font: inherit; font-size: 1.6rem; font-weight: 800; line-height: 1; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.gallery-pill:hover { background: var(--blue); color: #fff; }
.gallery-pill[aria-pressed="true"] { background: var(--navy); color: #fff; cursor: default; }
.gallery-pill:focus-visible { outline: .3rem solid var(--blue); outline-offset: .3rem; }
.gallery-head--sub { margin-top: .6rem; }
.gallery-grid { --row-gap: 5; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5rem 3.5rem; margin-top: 6.4rem; }
.gallery-grid.is-masonry { grid-auto-rows: 4px; row-gap: 0; align-items: start; }
.gallery-item[hidden] { display: none; }
.gallery-item { transition: opacity .6s ease-out, transform .6s ease-out; transition-delay: var(--enter-delay, 0ms); }
.gallery-item.is-entering { opacity: 0; transform: translateY(2.4rem); transition: none; }
.gallery-card { display: block; color: var(--navy); text-decoration: none; border-radius: 1.2rem; }
.gallery-card:hover { text-decoration: none; }
.gallery-card__play { position: absolute; left: 50%; top: 50%; width: 8.8rem; height: 8.8rem; margin: -4.4rem 0 0 -4.4rem; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 .4rem 1.6rem rgba(3, 18, 39, .35); transition: opacity .25s ease, transform .25s ease; pointer-events: none; }
.gallery-card__play::before { content: ""; position: absolute; left: 3.5rem; top: 2.6rem; border-style: solid; border-width: 1.8rem 0 1.8rem 2.8rem; border-color: transparent transparent transparent var(--blue); }
.gallery-card:hover .gallery-card__play, .gallery-card:focus-visible .gallery-card__play { opacity: 0; transform: scale(.9); }
.gallery-card__media { position: relative; display: block; overflow: hidden; aspect-ratio: var(--ar); background: #EEF2F6; }
.gallery-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.gallery-card__overlay { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; max-height: 100%; padding: 3.2rem; background: rgba(3, 18, 39, .82); color: #fff; opacity: 0; transform: translateY(1.2rem); transition: opacity .25s ease, transform .25s ease; }
.gallery-card__desc { font-size: 2.4rem; line-height: 1.5; }
/* Very short, wide thumbnails: tighten the overlay so the description still fits */
.gallery-card__media { container-type: size; }
@container (max-height: 22rem) { .gallery-card__overlay { padding: 1.6rem 2rem; } .gallery-card__desc { font-size: 2rem; line-height: 1.4; } }
.gallery-card:hover .gallery-card__overlay, .gallery-card:focus-visible .gallery-card__overlay { opacity: 1; transform: none; }
.gallery-card:hover img { transform: scale(1.02); }
.gallery-card__title { display: block; margin-top: 2.2rem; font-size: 2.4rem; font-weight: 700; line-height: 1.35; }
.gallery-card__sub { display: block; margin-top: .4rem; font-size: 2rem; color: var(--body); }
.gallery-more { display: flex; justify-content: center; margin-top: 4rem; }
@media (hover: none) { .gallery-card__overlay { display: none; } }
html.lightbox-open { overflow: hidden; }
.lightbox { width: min(160rem, 100vw - 4rem); max-width: none; max-height: calc(100dvh - 4rem); padding: 0; border: 0; border-radius: 2rem; background: #fff; box-shadow: 0 2rem 6rem rgba(0,0,0,.4); }
.lightbox::backdrop { background: rgba(3, 18, 39, .85); }
.lightbox__inner { position: relative; display: flex; flex-direction: column; max-height: calc(100dvh - 4rem); }
.lightbox__figure { display: flex; flex-direction: column; min-height: 0; margin: 0; }
.lightbox__media { flex: 1; min-height: 0; display: grid; place-items: center; background: #F3F3F3; padding: 6rem 9rem 2rem; overflow: auto; }
.lightbox__media img { max-width: 100%; max-height: calc(100dvh - 26rem); width: auto; height: auto; object-fit: contain; }
.lightbox__media { overflow-x: hidden; overflow-y: auto; }
.lightbox__media.can-zoom img { cursor: zoom-in; }
.lightbox__media.is-zoomed { display: block; }
.lightbox__media.is-zoomed img { width: 100%; max-width: var(--nat-w, 100%); max-height: none; margin: 0 auto; cursor: zoom-out; }
.lightbox__media video { display: block; width: 100%; max-width: calc((100dvh - 26rem) * var(--v-ar, 1.7778)); aspect-ratio: var(--v-ar, 1.7778); height: auto; margin: 0 auto; background: #000; border-radius: .8rem; }
.lightbox figcaption { padding: 2.4rem 4rem 3rem; }
.lightbox__title { font-size: 3rem; }
.lightbox__desc { margin-top: .8rem; }
.lightbox__link { margin-top: 1.4rem; }
.lightbox__count { margin-top: .8rem; font-size: 1.8rem; color: #6A6A6A; }
.lightbox__close { position: absolute; top: 1.4rem; right: 1.4rem; z-index: 2; display: grid; place-items: center; width: 5.6rem; height: 5.6rem; border: 0; border-radius: 50%; background: #fff; color: var(--navy); cursor: pointer; box-shadow: 0 .2rem .8rem rgba(0,0,0,.15); }
.lightbox__close .icon { width: 2.6rem; height: 2.6rem; }
.lightbox__zoom { position: absolute; top: 1.4rem; right: 8.4rem; z-index: 2; display: grid; place-items: center; width: 5.6rem; height: 5.6rem; border: 0; border-radius: 50%; background: #fff; color: var(--navy); cursor: pointer; box-shadow: 0 .2rem .8rem rgba(0,0,0,.15); }
.lightbox__zoom .icon { width: 2.4rem; height: 2.4rem; }
.lightbox__zoom:hover, .lightbox__zoom[aria-pressed="true"] { background: var(--blue); color: #fff; }
.lightbox__nav { position: absolute; top: 40%; display: grid; place-items: center; width: 6rem; height: 6rem; border: 0; border-radius: 50%; background: var(--blue); color: #fff; cursor: pointer; }
.lightbox__nav:hover { background: var(--navy); }
.lightbox__nav .icon { width: 2.6rem; height: 2.6rem; }
.lightbox__prev { left: 1.6rem; } .lightbox__prev .icon { transform: rotate(180deg); }
.lightbox__next { right: 1.6rem; }

/* Contact */
.contact { padding-top: 5rem; padding-bottom: 14rem; }
.contact__grid { display: grid; grid-template-columns: 76rem minmax(0, 1fr); column-gap: 6.7rem; align-items: start; }
.contact-form-panel { padding: 3.8rem 3.9rem 4.2rem; }
.contact__form-title { display: flex; align-items: center; gap: 2.8rem; font-size: 5rem; line-height: 1.2; }
.contact__form-title .icon { width: 7.5rem; height: 5.6rem; color: var(--blue); }
.contact-form-panel > p { margin-top: 2.2rem; }
.contact-form { display: grid; gap: 3rem; margin-top: 4rem; }
.field input, .field textarea, .field select { width: 100%; min-height: 9.7rem; padding: 0 3.8rem; border: .2rem solid #D3E6F4; border-radius: 1.8rem; background: #fff; color: var(--navy); font: inherit; font-size: 2.4rem; }
.field textarea { min-height: 25rem; padding-top: 3rem; resize: vertical; }
.field select { padding-right: 8rem; }
.field.select-wrap > .icon { right: 3rem; width: 3.4rem; height: 3.4rem; }
.field ::placeholder { color: #4A4A4A; opacity: 1; }
.field [aria-invalid="true"] { border-color: #C62828; }
.field__error { margin-top: .8rem; color: #B3261E; font-size: 2rem; }
.captcha { min-height: 7.8rem; }
.contact-form__foot { display: flex; justify-content: space-between; align-items: center; gap: 2rem; }
.contact-form__req { font-size: 2.4rem; }
.contact-form__status:empty { display: none; }
.contact-form__status { font-weight: 700; color: var(--navy); }
.contact__aside { padding-top: 2.4rem; }
.contact__aside-title { font-size: 5rem; }
.contact__aside > p { margin-top: 3rem; }
.contact__aside hr { border: 0; border-top: .4rem solid #E0E0E0; margin: 4.6rem 0 6.4rem; }
.contact__reasons { display: grid; gap: 4.2rem; }
.contact__reasons li { display: grid; grid-template-columns: 9.8rem minmax(0, 1fr); gap: 2.6rem; align-items: center; }
.contact__reasons strong { color: var(--navy); }

@media (max-width: 1099px) {
  .approach-grid { grid-template-columns: 1fr 1fr; row-gap: 6rem; }
  .approach-item:nth-child(3) { border-left: 0; padding-left: 0; }
  .approach-item { min-height: 0; }
  .industry__grid, .visual-arts__grid, .contact__grid { grid-template-columns: 1fr; row-gap: 5rem; }
  .art-collage { grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: auto auto; }
  .beyond-grid { grid-template-columns: repeat(3, 1fr); }
  .position { grid-template-columns: minmax(0, 1fr); row-gap: 2.6rem; }
  .position__metrics { display: flex; gap: 4rem; }
  .position__metrics p + p { margin-top: 0; }
  .skills__grid { grid-template-columns: 1fr; row-gap: 6rem; }
  .skills__grid > div + div { border-left: 0; padding-left: 0; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .hero--gallery .hero__collage { left: 0; top: -60%; width: 100%; transform: rotate(3deg) scale(1.1); }
}
@media (max-width: 767px) {
  .approach, .industry, .visual-arts, .beyond, .career, .gallery, .contact { padding-top: 4.4rem; padding-bottom: 6rem; }
  .approach-grid { grid-template-columns: 1fr; row-gap: 3.6rem; margin-top: 3.6rem; }
  .approach-item, .approach-item:nth-child(3) { border-left: 0; padding: 0; display: grid; grid-template-columns: 6.4rem 1fr; column-gap: 1.8rem; }
  .approach-item .icon-circle { width: 6.4rem; height: 6.4rem; grid-row: span 2; }
  .approach-item .icon-circle .icon { width: 3.4rem; height: 3.4rem; }
  .approach-item__title { margin-top: 0; font-size: 1.8rem; }
  .perspective { padding: 0 0 calc(var(--slant) + 4rem); clip-path: none; margin-top: 0; }
  .perspective .dark-cta__photo { height: 25rem; }
  .perspective .container { margin-top: 3rem; }
  .big-stats { flex-direction: column; gap: 2.4rem; }
  .big-stats > div, .big-stats > div:first-child { padding: 0; border-left: 0; display: grid; grid-template-columns: 9rem 1fr; align-items: center; }
  .big-stats__num { font-size: 4.4rem; }
  .big-stats dd { margin: 0; }
  .areas { padding: 2.6rem 2rem 3rem; }
  .areas__title { font-size: 2.2rem; }
  .areas__list li { grid-template-columns: 6.4rem 1fr; }
  .areas__list .icon-circle { width: 6.4rem; height: 6.4rem; }
  .areas__list .icon-circle .icon { width: 3.4rem; height: 3.4rem; }
  .visual-arts__copy .btn { display: flex; width: 100%; }
  .art-collage { gap: 1.2rem; }
  .beyond-grid { grid-template-columns: 1fr 1fr; gap: 2.4rem 1.6rem; }
  .beyond-card h3 { font-size: 1.8rem; margin-top: 1.4rem; }
  .timeline { margin-top: 3.6rem; }
  .role-entry { grid-template-columns: 3.6rem minmax(0, 1fr); padding-bottom: 4rem; }
  .role-entry + .role-entry { padding-top: 4rem; }
  .role-entry::before { left: 1.4rem; width: .3rem; }
  .role-entry__years { grid-column: 2; grid-row: 1; padding: 0; font-size: 1.6rem; }
  .role-entry__dot { grid-column: 1; grid-row: 1 / 3; width: 2.8rem; height: 2.8rem; margin: 0; }
  .role-entry__body { grid-column: 2; }
  .role-entry__org { font-size: 2.6rem; margin-top: .6rem; }
  .position__head { flex-direction: column; gap: .6rem; }
  .position__title, .disclosure { font-size: 1.8rem; }
  .position__metric { font-size: 3.6rem; }
  .skills { padding: calc(var(--slant) + 3rem) 0 calc(var(--slant) + 5rem); }
  .skills__heading { font-size: 2.6rem; padding-left: 0; }
  .expertise { gap: 2.4rem; }
  .expertise li { grid-template-columns: 6.4rem minmax(0, 1fr); }
  .expertise .icon-circle { width: 6.4rem; height: 6.4rem; }
  .expertise .icon-circle .icon { width: 3.4rem; height: 3.4rem; }
  .tools li { grid-template-columns: 6rem minmax(0, 1fr); }
  .tools__logos img { height: 2.6rem; }
  .skills__rule { margin: 5rem 0; }
  .education__grid { grid-template-columns: 1fr; row-gap: 3rem; }
  .education__note { border-left: 0; padding-left: 0; }
  .gallery-grid { grid-template-columns: 1fr; margin-top: 3.6rem; }
  .gallery-card__title { font-size: 1.8rem; margin-top: 1.4rem; }
  .gallery-head { margin-top: 3.6rem; }
  .gallery-subnav { margin-top: 3.2rem; }
  .gallery-pill { min-height: 4.8rem; padding: 0 2rem; font-size: 1.4rem; }
  .gallery-head--sub { margin-top: 2rem; }
  .lightbox { width: 100vw; max-height: 100dvh; border-radius: 0; }
  .lightbox__media { padding: 7rem 1.6rem 1.6rem; }
  .lightbox__nav { top: auto; bottom: 2rem; width: 5rem; height: 5rem; }
  .lightbox figcaption { padding: 2rem 7rem 3rem 2rem; }
  .lightbox__prev { left: auto; right: 7.6rem; }
  .contact-form-panel { padding: 2.6rem 2rem 3rem; }
  .contact__form-title, .contact__aside-title { font-size: 3.2rem; gap: 1.6rem; }
  .contact__form-title .icon { width: 4.6rem; height: 3.4rem; }
  .field input, .field textarea, .field select { min-height: 6.4rem; padding: 0 2rem; font-size: 1.8rem; border-radius: 1.2rem; }
  .field textarea { min-height: 18rem; padding-top: 1.8rem; }
  .contact-form__foot { flex-direction: column-reverse; align-items: stretch; }
  .contact-form__foot .btn { width: 100%; }
  .contact-form__req { font-size: 1.6rem; text-align: right; }
  .contact__reasons li { grid-template-columns: 6.4rem minmax(0, 1fr); gap: 1.8rem; }
  .contact__reasons .icon-circle { width: 6.4rem; height: 6.4rem; }
  .hero--short { min-height: 0; }
}


@media (min-width: 768px) and (max-width: 1099px) {
  .hero__vine { left: -34rem; bottom: -34rem; }
  .dark-cta { padding: 0 0 6rem; margin-top: 0; clip-path: none; }
  .dark-cta__photo { position: relative; z-index: 0; top: auto; left: auto; width: 100%; height: 42vw; -webkit-mask-image: none; mask-image: none; }
  .dark-cta__photo img { object-position: var(--m-pos, center) !important; }
  .dark-cta__inner, .perspective .container { margin-top: 5rem; }
  .dark-cta__copy, .dark-cta--bigpic .dark-cta__copy, .dark-cta__body { max-width: none; }
  .cta__vine { bottom: -40rem; }
}
@media (max-width: 359px) { .footer-tagline { white-space: normal; } .footer-wordmark { white-space: normal; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .gallery-card { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}