/* SDS: a screening, a production chapter, then a return to the films.
   Loaded after site.css, journey.css and Home's opening.css. Existing footage,
   fonts, native frame ratios and player controls remain the design material. */

/* These spans alter line flow only; the proposition and real film names keep
   their original text. Projects continues using its own existing title markup. */
.hero-phrase{white-space:nowrap}
.home-opening .film-title__end,.page-commercials .film-title__end{white-space:nowrap}
.page-commercials .service-proof__title{display:block}
.page-commercials .service-proof__title>.film-title__label{font:inherit;color:inherit}
.page-commercials .service-proof__arrow{
  display:inline-block;margin-inline-start:8px;font:400 .65em/1 var(--mono);color:var(--text-3);
}

/* Native-scroll lighting belongs to main only. Static chapters remain light
   when scripting, reduced motion or SaveData selects the original fallback. */
body.scroll-mood-ready{background:var(--scroll-mood-bg,#050505)}
html{scrollbar-gutter:stable}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
.scroll-mood-ready main{color:var(--text)}
.scroll-mood-ready main[data-mood-polarity="light"]{color-scheme:light}
.scroll-mood-ready main[data-mood-polarity="dark"]{color-scheme:dark}
.scroll-mood-ready main [data-mood-chapter]{
  --bg:inherit;--stage:inherit;--text:inherit;--text-2:inherit;--text-3:inherit;--text-4:inherit;
  --line:inherit;--line-2:inherit;--line-3:inherit;
  background:transparent;color:var(--text);color-scheme:inherit;
}
/* Every scroll-painted palette is already readable. Do not interpolate its
   text/background independently through a timed hover or theme transition. */
.scroll-mood-ready main,.scroll-mood-ready main *,
.scroll-mood-ready main *::before,.scroll-mood-ready main *::after{
  transition-property:opacity,transform;
}
.scroll-mood-ready main .btn-light:hover{background:var(--text-2);color:var(--bg)}

.site-header,.site-footer,#menu,#player{
  --bg:#050505;--stage:#0b0b0b;--text:#f5f5f2;--text-2:#d6d6d1;--text-3:#b4b4b0;--text-4:#8f8f8a;
  --line:#232323;--line-2:#3a3a3a;--line-3:#6b6b67;
  color:var(--text);color-scheme:dark;
}
.site-header,.site-footer{background:var(--bg)}
/* A cue is always white over its own permanent scrim, even when the chapter
   around the original footage becomes light. It is a real film link. */
.frame-cue{
  color:#f5f5f2;
  background:linear-gradient(to top,rgba(5,5,5,.92),rgba(5,5,5,.58) 45%,rgba(5,5,5,0));
}
a[data-play]:focus-visible{
  outline:2px solid #f5f5f2;outline-offset:2px;box-shadow:0 0 0 6px #050505;
}
.opening-cinema .opening-lead__frame:focus-visible{outline-offset:-4px}
@media (hover:none),(pointer:coarse){a[data-play] .frame-cue{opacity:1}}

/* Image first is the default. The desktop overlay is an enhancement, so a
   narrow/short screen always has a complete frame and uncomplicated text. */
.opening-cinema{
  --gutter:16px;
  display:grid;grid-template-columns:minmax(0,1fr);gap:20px;
  max-width:1680px;padding-top:16px;padding-bottom:8px;
}
.opening-cinema__stage[data-film-reveal]{
  grid-column:1;grid-row:1;position:relative;isolation:isolate;
  width:100%;min-width:0;aspect-ratio:16/9;overflow:hidden;background:#050505;
  transform:none;will-change:auto;
}
.opening-cinema .opening-lead__frame{
  position:absolute;inset:0;display:block;width:100%;height:100%;aspect-ratio:16/9;
  overflow:hidden;isolation:isolate;background:#050505;border-radius:0;
  transform:none;transform-origin:center;will-change:auto;
}
.opening-cinema .opening-lead__frame picture{display:block;width:100%;height:100%}
.opening-cinema .opening-lead__frame img,
.opening-cinema .opening-lead__frame video{
  width:100%;height:100%;object-fit:contain;object-position:center;
}
.opening-cinema .opening-lead__frame video{
  position:absolute;inset:0;z-index:0;opacity:0;pointer-events:none;
  transition:opacity .24s var(--ease);
}
.opening-cinema .opening-lead__frame video.is-playing{opacity:1}
.opening-cinema .opening-lead__frame .frame-cue{min-height:64px;padding:0 16px 16px}
.opening-cinema .opening-intro{
  grid-column:1;grid-row:2;display:grid;grid-template-columns:minmax(0,1fr);
  align-items:start;gap:20px;min-width:0;padding:4px 0 0;
}
.opening-cinema .opening-title{
  max-width:22ch;font-size:clamp(40px,8.6vw,64px);line-height:1.04;letter-spacing:-.045em;
}
.opening-cinema .hero-actions{padding:0;justify-content:flex-start}
.opening-cinema .hero-actions .btn{min-height:52px;padding-inline:24px;font-size:16px}
.opening-cinema__caption{
  grid-column:1;grid-row:3;display:grid;gap:8px;align-items:start;min-width:0;
  padding-top:4px;
}
.opening-cinema__caption .film-card__text{display:grid;gap:3px;min-width:0}
.opening-cinema__caption .film-card__meta{font-size:13px;line-height:1.5}
.opening-cinema__caption .film-card__title{font-size:clamp(24px,5.8vw,40px);line-height:1.12}
.opening-cinema__caption>.link-arrow{justify-self:start;font-size:16px}

/* The light chapter earns its place through a complete real production.
   It uses Hyde once; the dark return carries the other featured films. */
.home-opening .opening-chapter{
  margin-block:clamp(32px,4vw,56px);padding-block:clamp(40px,4.4vw,64px);
}
.contrast-chapter__inner{display:grid;gap:32px;align-items:center}
.contrast-chapter__inner>*{min-width:0}
.contrast-chapter__film .opening-films{grid-template-columns:minmax(0,1fr);padding-bottom:0}
.contrast-chapter__copy{display:grid;gap:20px;align-content:center;min-width:0}
.home-opening .contrast-chapter__copy h2{
  max-width:12ch;font-size:clamp(40px,5.3vw,76px);line-height:1.04;letter-spacing:-.045em;
}
.contrast-chapter__copy>p:not(.eyebrow){max-width:36ch;font-size:17px;line-height:1.6;color:var(--text-2)}
.home-opening .contrast-chapter__copy .process-link{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  width:100%;max-width:360px;min-height:64px;margin-top:4px;padding:12px 0;
  border-top:1px solid var(--line-2);font-size:clamp(22px,2.2vw,30px);line-height:1.25;
}
.contrast-chapter__copy .process-link::after{font-size:.75em}

.opening-wall{display:grid;gap:clamp(24px,3vw,44px);padding-bottom:var(--section)}
.opening-wall .opening-return{margin-bottom:0}
.opening-wall .opening-work{grid-template-columns:minmax(0,1fr);padding-bottom:0}
.opening-wall .opening-work:not(.opening-work--closing){max-width:1320px}
.opening-wall .opening-work--closing{gap:40px}
.opening-wall .opening-index{align-self:center}
.opening-wall .opening-work:not(.opening-work--closing) .film-card__text{
  display:grid;gap:4px;
}
.opening-wall .opening-work:not(.opening-work--closing) .film-card__title{
  font-size:clamp(28px,3.2vw,44px);
}

/* Services gives one film the floor, then presents two concise examples.
   Its actual project names, copy, full film links and original ratios stay. */
.service-proofs{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
.service-proofs .service-proof{
  display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start;
}
.service-proofs .service-proof .service-proof__film,
.service-proofs .service-proof .service-proof__copy{grid-column:auto;grid-row:auto}
.service-proofs .service-proof__copy{gap:12px;align-content:start}
.service-proofs .service-proof__copy h3{font-size:clamp(24px,2.8vw,40px);line-height:1.16}
.service-proofs .service-proof__copy p{max-width:42ch;font-size:17px;line-height:1.6}
.service-proofs .service-proof__caption{gap:4px;padding-top:12px}
.service-proofs .service-proof__title{font-size:clamp(23px,2.2vw,32px)}
.service-proofs .service-proof:first-child{padding-bottom:8px}
.service-proofs .service-proof:nth-child(n+2){
  grid-template-columns:minmax(0,1fr) minmax(0,1.18fr);gap:20px;
  padding-top:24px;border-top:1px solid var(--line-2);
}
.service-proofs .service-proof:nth-child(n+2) .service-proof__title{font-size:18px;line-height:1.25}
.service-proofs .service-proof:nth-child(n+2) .service-proof__copy h3{font-size:22px;line-height:1.2}
.service-proofs .service-proof:nth-child(n+2) .service-proof__copy p{font-size:16px;line-height:1.6}
.service-proofs .service-proof:nth-child(n+2) .frame-cue{min-height:48px;padding:0 10px 10px;font-size:13px}

/* Open planning typography replaces nested rectangles. The quote remains
   guidance, with the scope, delivery detail and two optional extras intact. */
.commercial-offer.contrast-chapter .offer{gap:24px}
.commercial-offer.contrast-chapter .offer__main,
.commercial-offer.contrast-chapter .offer__extras{
  padding:28px 0;border:0;border-top:1px solid var(--line-2);
  border-radius:0;background:transparent;
}
.commercial-offer.contrast-chapter .offer__main{grid-template-columns:minmax(0,1fr);gap:28px}
.commercial-offer.contrast-chapter .offer__core,
.commercial-offer.contrast-chapter .offer__quote{background:transparent}
.commercial-offer.contrast-chapter .offer__quote{order:-1}
.commercial-offer.contrast-chapter .offer__core{padding-top:28px;border-top:1px solid var(--line-2)}
.commercial-offer .budget-panel__range{font-size:clamp(32px,8.4vw,46px);line-height:1.14}
.commercial-offer .budget-panel{gap:12px}
.commercial-offer .offer__title{font-size:clamp(30px,3vw,44px)}
.commercial-offer .offer__extras{gap:24px}

@media (max-width:379px){
  .opening-cinema .opening-title{font-size:40px;letter-spacing:-.052em}
  .service-proofs .service-proof:nth-child(n+2){grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:16px}
  .service-proofs .service-proof:nth-child(n+2) .service-proof__title{font-size:17px}
  .service-proofs .service-proof:nth-child(n+2) .service-proof__copy h3{font-size:21px}
}

@media (min-width:640px){
  .opening-cinema__caption{display:flex;align-items:center;justify-content:space-between;gap:24px}
  .opening-cinema__caption>.link-arrow{flex:none}
  .contrast-chapter__inner{gap:40px}
  .service-proofs{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;row-gap:40px}
  .service-proofs .service-proof:first-child{grid-column:1/-1}
  .service-proofs .service-proof:first-child .service-proof__copy{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px;
  }
  .service-proofs .service-proof:first-child .service-proof__copy h3{grid-column:1;grid-row:1/3}
  .service-proofs .service-proof:first-child .service-proof__copy p{grid-column:2;grid-row:1}
  .service-proofs .service-proof:first-child .service-proof__copy .link-arrow{grid-column:2;grid-row:2}
  .service-proofs .service-proof:nth-child(n+2){grid-template-columns:minmax(0,1fr);gap:20px}
  .service-proofs .service-proof:nth-child(n+2) .service-proof__title{font-size:clamp(22px,2.2vw,30px)}
  .service-proofs .service-proof:nth-child(n+2) .service-proof__copy h3{font-size:clamp(26px,2.3vw,34px)}
  .service-proofs .service-proof:nth-child(n+2) .service-proof__copy p{font-size:17px}
  .service-proofs .service-proof:nth-child(n+2) .frame-cue{min-height:64px;padding:0 16px 16px;font-size:15px}
}

@media (min-width:1024px){
  .opening-cinema__caption{padding-inline:clamp(16px,2.6vw,40px);padding-top:6px}
  .opening-cinema__caption .film-card__text{gap:4px}
  .opening-cinema__caption .film-card__title{font-size:clamp(32px,3vw,44px)}
  .contrast-chapter__inner{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(40px,4.4vw,64px)}
  .contrast-chapter__copy{gap:24px}
  .opening-wall .opening-work--closing{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,4.4vw,64px)}
  .opening-wall .opening-work:not(.opening-work--closing) .film-card__text{
    grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:baseline;
  }
  .opening-wall .opening-work:not(.opening-work--closing) .film-card__title{grid-column:1;grid-row:1}
  .opening-wall .opening-work:not(.opening-work--closing) .film-card__meta{grid-column:2;grid-row:1}
  .service-proofs{column-gap:48px;row-gap:48px}
  .service-proofs .service-proof:first-child .service-proof__copy{column-gap:64px}
  .commercial-offer.contrast-chapter .offer__main{
    grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(48px,5vw,72px);padding-block:36px;
  }
  .commercial-offer.contrast-chapter .offer__quote{order:0}
  .commercial-offer.contrast-chapter .offer__core{padding-top:0;border-top:0}
  .commercial-offer .budget-panel__range{font-size:clamp(40px,3.8vw,56px)}
  .commercial-offer.contrast-chapter .offer__main,
  .commercial-offer.contrast-chapter .offer__extras{
    grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px;
  }
  .commercial-offer.contrast-chapter .offer__core{grid-column:1/span 7}
  .commercial-offer.contrast-chapter .offer__quote{grid-column:8/span 5}
  .commercial-offer.contrast-chapter .offer__extras-head{grid-column:1/span 3}
  .commercial-offer.contrast-chapter .offer__extras .offer__list{
    grid-column:4/span 9;grid-template-columns:repeat(9,minmax(0,1fr));column-gap:32px;
  }
  .commercial-offer.contrast-chapter .offer__list li:first-child{grid-column:1/span 4}
  .commercial-offer.contrast-chapter .offer__list li:last-child{grid-column:5/span 5}
}

/* Short wide screens show the complete film beside the immediate inquiry.
   DOM order remains image first; there is no overlay, cropping or reveal. */
@media (min-width:640px) and (max-height:650px){
  .opening-cinema{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:20px;row-gap:16px}
  .opening-cinema__stage[data-film-reveal]{grid-column:1;grid-row:1;align-self:center;transform:none;will-change:auto}
  .opening-cinema .opening-lead__frame{transform:none;will-change:auto}
  .opening-cinema .opening-intro{
    grid-column:2;grid-row:1;align-self:center;gap:16px;width:100%;max-width:none;padding:0;
  }
  .opening-cinema .opening-title{max-width:16ch;font-size:clamp(34px,4.2vw,48px);line-height:1.04}
  .opening-cinema .hero-actions .btn{min-height:52px;padding-inline:20px}
  .opening-cinema__caption{grid-column:1/-1;grid-row:2;padding-inline:0;padding-top:0}
}

/* A large landscape screen is the screening room. Text sits over a permanent
   left scrim; the complete original frame opens beneath it. The stage itself
   never transforms, keeping the reveal controller's measurements stable. */
@media (min-width:1024px) and (min-height:651px){
  .opening-cinema{row-gap:20px}
  .opening-cinema__stage[data-film-reveal]{
    width:min(100%,calc((100svh - var(--header-h) - env(safe-area-inset-top,0px) - 24px)*1.777777778));justify-self:center;
  }
  .opening-cinema__stage::after{
    content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(90deg,rgba(5,5,5,.93) 0%,rgba(5,5,5,.85) 31%,rgba(5,5,5,.64) 45%,rgba(5,5,5,.08) 70%,rgba(5,5,5,0) 100%);
  }
  .opening-cinema .opening-intro{
    --bg:#050505;--text:#f5f5f2;--text-2:#d6d6d1;--text-3:#b4b4b0;
    grid-row:1;align-self:start;position:relative;z-index:3;
    width:69%;max-width:1000px;gap:24px;padding:clamp(32px,4.4vw,64px);
    color:#f5f5f2;pointer-events:none;
  }
  .opening-cinema .opening-title{max-width:16ch;font-size:clamp(64px,5.8vw,88px);line-height:1.03}
  .opening-cinema .hero-actions{pointer-events:auto;justify-self:start}
  .opening-cinema .opening-intro .btn-light{background:#f5f5f2;color:#050505}
  .opening-cinema .opening-intro .btn-light:hover{background:#fff;color:#050505}
  .opening-cinema__caption{grid-row:2}
  .opening-cinema .opening-lead__frame .frame-cue{justify-content:flex-end;min-height:72px;padding:0 24px 20px}
}
@media (min-width:1024px) and (min-height:651px) and (prefers-reduced-motion:no-preference){
  .opening-cinema .opening-lead__frame{
    transform:scale(calc(.88 + .12 * var(--film-reveal-progress,1)));will-change:transform;
  }
}
@media (prefers-reduced-motion:reduce){
  .opening-cinema .opening-lead__frame{transform:none;will-change:auto}
  .opening-cinema .opening-lead__frame video{transition:none}
}

/* Projects: four complete film pairings, with a shift in emphasis and light. */
/* Give the reel the same near-edge presentation as the lead Home film. */
.page-work .work-feature {
  --max: 1680px;
  --gutter: clamp(16px, 2.2vw, 32px);
  gap: 24px;
}

.page-work .work-feature .feature img {
  object-fit: contain;
  transform: none;
}

.page-work .work-feature__text {
  gap: 20px 32px;
}

.page-work .work-feature__title .h2 {
  font-size: clamp(34px, 3.3vw, 48px);
  line-height: 1.08;
}

/* The section owns its full-width mood; the inner wrap owns the film grid.
   The people chapter gets its colors from the existing .contrast-chapter. */
.page-work .work-chapter {
  padding-block: 44px;
}

.page-work .work-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 36px;
}

.page-work .work-pair > .film-card {
  grid-column: auto;
  grid-row: auto;
  width: auto;
  min-width: 0;
  margin-block-start: 0;
  gap: 16px;
  align-self: start;
}

.page-work .work-pair .film-card__media {
  width: 100%;
  aspect-ratio: var(--ar, 16 / 9);
}

.page-work .work-pair .film-card__media img,
.page-work .work-pair .film-card__media video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: none;
}

.page-work .work-pair .film-card__text {
  gap: 5px;
}

.page-work .work-pair .film-card__meta {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-3);
}

.page-work .work-pair .film-card__title {
  font-size: clamp(26px, 2.4vw, 36px);
  line-height: 1.16;
  letter-spacing: -.03em;
}

.page-work .work-pair .film-card__title a {
  max-width: 100%;
  min-height: 44px;
  padding-block: 5px;
}

.page-work .work-pair > .film-card--portrait {
  width: min(80%, 320px);
  justify-self: center;
}

@media (max-width: 389px) {
  .page-work .work-chapter {
    padding-block: 40px;
  }
}

/* Tablet keeps the same DOM/reading order without staggered offsets. */
@media (min-width: 768px) {
  .page-work .work-chapter {
    padding-block: 48px;
  }

  .page-work .work-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
    row-gap: 40px;
  }

  .page-work .work-pair > .film-card--portrait {
    width: min(100%, 320px);
  }
}

/* Four editorial pairings: emphasis shifts from left to right, then back.
   Offsets move complete cards; they never crop or move content inside a frame. */
@media (min-width: 1024px) {
  .page-work .work-chapter {
    padding-block: 56px;
  }

  .page-work .work-pair {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 32px;
  }

  .page-work .work-chapter--lead .work-pair > :first-child {
    grid-column: 1 / span 8;
  }

  .page-work .work-chapter--lead .work-pair > :last-child {
    grid-column: 9 / span 4;
    margin-block-start: 64px;
  }

  .page-work .work-chapter--lead .film-card:first-child .film-card__title {
    font-size: clamp(32px, 3.1vw, 44px);
  }

  .page-work .work-chapter--people .work-pair > :first-child {
    grid-column: 1 / span 5;
    margin-block-start: 56px;
  }

  .page-work .work-chapter--people .work-pair > :last-child {
    grid-column: 6 / span 7;
  }

  .page-work .work-chapter--places .work-pair > :first-child {
    grid-column: 1 / span 7;
  }

  .page-work .work-chapter--places .work-pair > :last-child {
    grid-column: 8 / span 5;
    margin-block-start: 64px;
  }

  .page-work .work-chapter--closing .work-pair {
    align-items: end;
  }

  .page-work .work-chapter--closing .work-pair > .film-card {
    margin-block-start: 0;
    align-self: end;
  }

  .page-work .work-chapter--closing .work-pair > :first-child {
    grid-column: 1 / span 8;
  }

  .page-work .work-chapter--closing .work-pair > :last-child {
    grid-column: 9 / span 4;
  }
}

/* About keeps the director and real process, then gives the purpose films a
   complete chapter. A fixed native stage keeps tab changes from resizing the
   image; contain preserves each real picture, including the wider club film. */
.page-about .about-principles .section-head{margin-bottom:28px}
.page-about .about-principles .h2{max-width:20ch;font-size:clamp(38px,4.6vw,64px)}
.page-about .about-principles .purpose-story__steps{max-width:680px;margin-bottom:28px}
.page-about .about-principles .purpose-story__panel{
  display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start;
}
.page-about .about-principles .purpose-story__image{aspect-ratio:16/9;background:#050505}
.page-about .about-principles .purpose-story__image picture,
.page-about .about-principles .purpose-story__image img{width:100%;height:100%;object-fit:contain}
.page-about .about-principles .purpose-story__copy{gap:16px;padding-top:0}
.page-about .about-principles .purpose-story__copy h3{max-width:22ch;font-size:clamp(26px,2.8vw,38px)}
.page-about .about-principles .purpose-story__copy>p:not(.eyebrow){max-width:38ch;font-size:17px;line-height:1.65}
.page-about .about-principles .purpose-story__copy .link-arrow{font-size:17px}

/* Contact has one open invitation with two existing ways to start. Planning
   follows it, using the same clear quote hierarchy as Services. */
.page-contact .contact-start{display:grid;gap:32px;min-width:0}
.page-contact .contact-primary{padding:0;border:0;border-radius:0;background:transparent;gap:20px}
.page-contact .contact-primary h2{max-width:15ch;font-size:clamp(36px,4.2vw,58px);line-height:1.08}
.page-contact .contact-primary>p:not(.eyebrow):not(.note){font-size:17px;line-height:1.6;max-width:38ch}
.page-contact .contact-primary>.note{max-width:40ch}
.page-contact .contact-start .contact-email{gap:12px;padding-top:28px;border-top:1px solid var(--line-2)}
.page-contact .contact-start .contact-email h2{font-size:26px}
.page-contact .contact-expectations{gap:18px;padding-top:28px;border-top:1px solid var(--line-2)}
.page-contact .contact-expectations h2{max-width:18ch;font-size:clamp(28px,2.8vw,38px)}
.page-contact .contact-expectations>.link-arrow{font-size:18px;min-height:52px}
.page-contact .contact-planning{gap:28px;margin-top:44px;padding-block:36px 44px}
.page-contact .contact-planning__head{display:grid;gap:16px;align-content:start;min-width:0}
.page-contact .contact-planning__head .h2{max-width:16ch;font-size:clamp(34px,4.2vw,56px)}
.page-contact .contact-pricing .budget-panel{padding:0;border:0;background:transparent;gap:16px}
.page-contact .contact-pricing .budget-panel .budget-panel__range{
  max-width:none;font-size:clamp(32px,5vw,46px);line-height:1.14;letter-spacing:-.035em;color:var(--text);
}
.page-contact .contact-pricing .budget-panel .budget-panel__scope{font-size:17px;color:var(--text)}
.page-contact .contact-pricing>.link-arrow{margin-top:8px;font-size:17px}
.page-contact .contact-follow{padding-block:32px 40px}
.page-contact .contact-follow .split{gap:24px}
.page-contact .contact-follow .split-head{gap:10px;position:static}
.page-contact .contact-follow .h2{font-size:30px}
.page-contact .contact-follow .chips{gap:12px}
.page-contact .contact-follow .btn{white-space:normal;text-align:left}

@media (max-width:379px){
  .service-proofs .service-proof:nth-child(n+2){grid-template-columns:minmax(0,1fr);gap:18px}
  .service-proofs .service-proof:nth-child(n+2) .service-proof__title{font-size:24px}
  .service-proofs .service-proof:nth-child(n+2) .service-proof__copy h3{font-size:26px}
  .service-proofs .service-proof:nth-child(n+2) .frame-cue{min-height:64px;padding:0 16px 16px;font-size:15px}
}
@media (min-width:1024px){
  .page-work .page-head{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:64px}
  .page-work .page-head>.eyebrow{grid-column:1/-1}
  .page-work .page-head .h1{max-width:20ch;font-size:clamp(52px,5.2vw,76px)}
  .page-work .page-head .lede{align-self:end;max-width:34ch;padding-bottom:4px}
  .page-about .about-principles .purpose-story__panel{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px}
  .page-about .about-principles .purpose-story__copy{align-self:center}
  .page-contact .contact-journey{gap:72px}
  .page-contact .contact-expectations{padding-top:0;border-top:0}
  .page-contact .contact-planning{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:72px;margin-top:56px;padding-block:44px 56px}
  .page-contact .contact-follow .split{grid-template-columns:minmax(0,4fr) minmax(0,8fr);align-items:center}
  .page-contact .contact-follow .split>.split-head{grid-column:1}
  .page-contact .contact-follow .split>.split-body{grid-column:2}
}