/* The root rem is a logical design pixel; only the canvas is scaled. */
html { font-size: 1px; scroll-behavior: auto; scroll-padding-top: 0; scrollbar-gutter: stable; }
body { min-width: 0; overflow-x: visible; }
.design-frame { position: relative; width: 100%; contain: paint; }
.design-layout { position: relative; top: 0; transform-origin: top left; container: design / inline-size; }
.js .design-layout { position: absolute; }
.design-canvas { display: flow-root; position: relative; }
html[data-layout="mobile"] { --container: 328rem; }
html[data-layout="tablet"] { --container: 704rem; }
html[data-layout="desktop"] { --container: 1170rem; }
.admin-bar .header { top: 0; }
.hero, .hero__grid { min-height: var(--design-viewport-height, 900rem); }
.hero__copy { padding-bottom: 60rem; }
.case-cover > p { left: max(calc((var(--design-width, 1440px) - var(--container)) / 2), 38rem); }
.button { min-height: 54rem; }
.review-controls button, .arrows button { min-width: 54rem; min-height: 54rem; }
.menu-button { min-height: 54rem; min-width: 64rem; }
.catalog-filters button { min-height: 54rem; }
.catalog-more { min-height: 54rem; }
.eyebrow, .section-head p, .films__note small, .films__aside, .review__count,
.catalog-card__category, .case-note, .case-kicker, .case-gallery > header > p { font-size: 15rem; }
.review blockquote { min-width: 0; }
.hero h1, .case-intro h1, .catalog-hero h1 { overflow-wrap: anywhere; }
.case-heading h2 { white-space: normal; }
.case-story__copy { display: block; }
.case-story__copy p + p { margin-top: 20rem; }
.content-page h1, .error-page h1 { font-size: 118rem; }
.content-page, .error-page { min-height: calc(var(--design-viewport-height, 900rem) * .65); }
.cases-page main, .case-page main { overflow: visible; }
.catalog-card strong, .case h3, .case-heading h2 { overflow-wrap: anywhere; }
.mobile-nav { display: none; position: fixed; inset: 0; z-index: 100; width: var(--screen-width, 100%); height: 100dvh; padding: 90px 24px 24px; overflow-y: auto; background: var(--paper); font: 400 24px/1.3 var(--sans); flex-direction: column; gap: 18px; }
.fancybox__container { width: var(--screen-width, 100%); }
.mobile-nav.is-open { display: flex; }
.mobile-nav a { min-height: 48px; }
.mobile-nav .button { font-size: 16px; min-height: 48px; }
.mobile-nav .menu-close { position: absolute; top: 20px; right: 24px; min-width: 48px; min-height: 48px; font-size: 20px; cursor: pointer; }
html[data-layout="desktop"] .mobile-nav { display: none; }
html[data-layout="mobile"] body { font-size: 16rem; }
html[data-layout="tablet"] body { font-size: 20rem; }
@container design (min-width: 601px) and (max-width: 1199px) {
  .menu-button, .review-controls button, .arrows button, .catalog-filters button, .catalog-more { min-height: 60rem; }
  .header__inner { grid-template-columns: 1fr auto; }
  .header .nav, .button--header { display: none; }
  .menu-button { display: flex; align-items: center; gap: 12rem; font-size: 18rem; cursor: pointer; }
  .menu-button i { width: 28rem; height: 12rem; border-block: 1rem solid currentColor; }
  .hero__copy { width: 600rem; padding-top: 150rem; }
  .hero h1 { width: 640rem; font-size: 76rem; }
  .hero__copy > p { width: 460rem; font-size: 20rem; }
  .hero__grid { justify-content: flex-start; }
  .hero::after { background: linear-gradient(90deg, #fbf9f5 0%, rgba(251,249,245,.92) 45%, rgba(251,249,245,.45) 80%, transparent); }
  .button { font-size: 18rem; min-height: 60rem; }
  .section-head { grid-template-columns: 1fr auto; gap: 24rem; }
  .section-head h2 { font-size: 62rem; }
  .section-head > p { grid-column: 1; font-size: 18rem; }
  .section-head .arrows { grid-column: 2; grid-row: 1 / 3; }
  .section-head > .title-line { display: none; }
  .cases__grid { grid-template-columns: 1fr 1fr; gap: 20rem; }
  .case { height: 480rem; }
  .case__copy { left: 24rem; right: 24rem; }
  .case h3 { font-size: 46rem; }
  .eyebrow, .case__link { font-size: 16rem; }
  .films__grid { grid-template-columns: 1fr; gap: 32rem; }
  .films__intro > p { font-size: 20rem; }
  .films__rail { display: grid; grid-template-columns: 1fr 1fr; gap: 24rem; }
  .film { width: auto; }
  .film__trigger { height: 450rem; }
  .films__note, .films__aside { display: none; }
  .film__caption time, .film__caption h3 { font-size: 18rem; }
  .review { grid-template-columns: 170rem 1fr; gap: 28rem; margin-top: 30rem; }
  .review__count { grid-column: 1; font-size: 16rem; }
  .review > img { grid-column: 1; width: 160rem; height: 160rem; }
  .review__divider { display: none; }
  .review blockquote { grid-column: 2; grid-row: 1 / 3; }
  .review blockquote p { font-size: 36rem; }
  .review blockquote b { font-size: 20rem; }
  .review blockquote small { font-size: 18rem; }
  .booking h2 { font-size: 48rem; }
  .footer__inner { grid-template-columns: 1fr auto; gap: 24rem; }
  .footer nav { display: none; }
  .footer__brand, .footer__brand small, .footer__links { font-size: 18rem; }
  .footer__credit { font-size: 14rem; }
  .case-story { grid-template-columns: 1fr 240rem; gap: 28rem; }
  .case-story__image { width: 240rem; }
  .case-note { display: none; }
  .case-story__copy { font-size: 20rem; }
  .case-heading h2 { font-size: 52rem; }
  .case-gallery > header { gap: 24rem; }
  .case-gallery > header > p { font-size: 14rem; }
  .couple-quote__inner { grid-template-columns: 1fr 1fr; gap: 28rem; }
  .couple-quote blockquote > p:nth-child(2) { font-size: 34rem; }
  .case-kicker { font-size: 14rem; }
  .case-next__grid { grid-template-columns: 1.5fr 1fr; gap: 28rem; }
  .case-next__copy > p:not(.case-kicker), .case-text-link { font-size: 18rem; }
  .catalog-card__category, .catalog-card__link { font-size: 16rem; }
  .catalog-filters { gap: 28rem; }
  .catalog-filters button { font-size: 18rem; }
}
@container design (max-width: 600px) {
  .header__inner { grid-template-columns: minmax(0, 1fr) auto; }
  .logo { min-width: 0; }
  .custom-logo { max-width: 100%; }
  .content-page h1, .error-page h1 { font-size: 56rem; }
  .hero, .hero__grid { min-height: var(--design-viewport-height, 780rem); }
  .hero__copy { padding-bottom: 60rem; }
  .hero__copy > p {
    color: var(--burgundy);
    text-shadow:
      -1rem -1rem 1rem #ffffff33,
      1rem -1rem 1rem #ffffff33,
      -1rem 1rem 1rem #ffffff33,
      1rem 1rem 1rem #ffffff33,
      0 0 4rem #ffffff33;
  }
  .menu-button { font-size: 16rem; }
  .button { min-height: 54rem; font-size: 16rem; }
  .review-controls button, .arrows button { min-width: 50rem; min-height: 50rem; }
  .review-controls { gap: 8rem; }
  .reviews__head .title-line { display: none; }
  .review blockquote b { font-size: 16rem; }
  .review blockquote small { font-size: 14rem; }
  .case__copy p, .case__link, .film__caption time { font-size: 16rem; }
  .catalog-filters { flex-wrap: wrap; gap: 8rem 24rem; overflow: visible; }
  .catalog-filters button { min-height: 50rem; }
  .footer__brand, .footer__brand small { overflow-wrap: anywhere; }
}
/* Below the safe mobile width, reflow content without reducing readable sizes. */
html[data-narrow="true"] { --container: calc(var(--design-width) - 32px); }
@container design (max-width: 319px) {
  .container, .hero__copy, .hero h1, .hero__copy > p, .catalog-hero, .catalog-filters { width: var(--container); max-width: 100%; }
  .hero h1 { font-size: 42rem; }
  .logo { gap: 8rem; }
  .logo__mark { font-size: 32rem; }
  .logo__name { font-size: 13rem; }
  .logo__name small { font-size: 8rem; }
  .menu-button { min-width: 44rem; gap: 6rem; }
  .menu-button span { display: none; }
  .button { padding-inline: 16rem; gap: 10rem; max-width: 100%; }
  .review { grid-template-columns: 70rem minmax(0, 1fr); gap: 14rem; }
  .review > img { width: 64rem; height: 64rem; }
  .review blockquote p { font-size: 25rem; }
  .review__count i { width: 54rem; }
  .reviews__head { grid-template-columns: 1fr; }
  .review-controls { justify-self: end; }
  .film { width: 100%; }
  .films__rail { display: block; }
  .films__intro, .films__intro > p { width: 100%; min-width: 0; }
  .section-head { grid-template-columns: 1fr; }
  .section-head .title-line { display: none; }
  .section-head .arrows { justify-self: end; }
  .footer__inner { grid-template-columns: minmax(0, 1fr) auto; gap: 12rem; }
  .booking h2 { font-size: 30rem; }
  .heading-row--center .title-line { display: none; }
}
