.header {background: linear-gradient(#100e0de3,#100e0d6e 78%,transparent); border: 0;}
.header.is-scrolled {background: #151311f5; border-bottom: 1px solid #e8e0ce20;}
.header .brand-corner {fill: #dfb58b;}
.film-hero {
  --film-white: #f4ebdf;
  position: relative;
  display: flex;
  align-items: center;
  isolation: isolate;
  min-height: min(930px,100svh);
  padding: 136px var(--gutter) 116px;
  background: #140f0c;
  color: var(--film-white);
}
.film-image,.film-image picture,.film-image img,.film-image video,.film-image::after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.film-image {z-index: -1; overflow: hidden;}
.film-image img,.film-image video {object-fit: cover; object-position: 68% center;}
/* Keep the video eligible for native autoplay and cover it until playback. */
.film-image picture {z-index: 1; transition: opacity .36s ease;}
.film-hero.has-film .film-image picture {opacity: 0;}
.film-image .film-fallback {z-index: 1; opacity: 0;}
.film-image .film-fallback.is-ready {opacity: 1;}
.film-image::after {z-index: 2;}
.motion-off .film-image picture {transition: none;}
@media (prefers-reduced-motion: reduce) {
  .film-image picture {transition: none;}
}
.film-image::after {
  content: '';
  background: linear-gradient(90deg,#110d0be8 0%,#110d0ba6 27%,#110d0b13 68%),linear-gradient(0deg,#110d0be6 0%,transparent 27%,transparent 76%,#110d0b48);
}
.film-hero .hero-content {position: relative; width: min(810px,100%); min-width: 0;}
.film-hero .eyebrow {color: #ead4bd; letter-spacing: .18em;}
.film-hero h1 {
  font: 710 clamp(68px,10.9vw,178px)/.88 var(--sans);
  letter-spacing: -.084em; word-spacing: .035em;
  margin: 24px 0 27px;
}
.film-hero h1 span {display: block;}
.film-hero .hero-lead {max-width: 400px; color: #f0e5da; text-wrap: pretty;}
.film-hero .hero-action {background: #f1e4d5; padding-inline: 18px; margin-top: 28px;}
.film-hero .hero-action:hover {background: #edc8a7;}
.film-foot {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-top: 1px solid #ede2d45c;
  padding-top: 14px;
}
.film-note,.film-control {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 650 10px/1.35 var(--sans);
  text-transform: uppercase;
  letter-spacing: .12em;
}
.film-rule {display: block; width: 24px; height: 1px; background: #dfb58b;}
.film-control {
  min-height: 44px;
  padding: 7px 11px;
  border: 1px solid #ede2d46b;
  background: #140f0c84;
}
.film-control[hidden],.film-control .pause-icon,.film-control.is-playing .play-icon {display: none;}
.film-control.is-playing .pause-icon {display: block;}
.film-control:hover {background: #f1e4d5; color: #140f0c;}
.film-note:hover {text-decoration: underline; text-underline-offset: 4px;}
.motion-off .film-image video {transition: none;}
@media(max-width:760px) {
  .film-hero {min-height: max(620px,91svh); align-items: end; padding: clamp(150px,28svh,222px) var(--gutter) 104px;}
  .film-hero h1 {font-size: clamp(67px,14.8vw,116px); margin: 16px 0 18px;}
  .film-image img,.film-image video {object-position: center 35%;}
  .film-image::after {background: linear-gradient(0deg,#110d0bf7 0%,#110d0be8 26%,#110d0b8f 52%,#110d0b08 76%,#110d0b4f);}
  .film-hero .hero-action {margin-top: 18px;}
  .film-foot {bottom: 15px;}
}
@media(prefers-reduced-motion: reduce) {
  .film-image video {transition: none;}
}

/* Keep the control quiet while leaving a full-size touch target. */
.film-control {
  display: inline-grid;
  place-items: center;
  width: 44px;
  min-height: 44px;
  padding: 0;
  position: relative;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #f4ebdf;
}
.film-control::before {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px solid #f4ebdf65;
  border-radius: inherit;
}
.film-control:hover {background: #f4ebdf1b; color: #fff;}
#film-action {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.film-hero .hero-action {transition: background-color .25s;}
.film-hero .hero-action b {transition: transform .3s ease;}
.film-hero .hero-action:hover b {transform: translate(3px,3px);}
@media (prefers-reduced-motion: no-preference) {
  .js:not(.motion-off) .film-hero .hero-content > * {
    animation: film-entrance .85s cubic-bezier(.2,.7,.2,1) both;
  }
  .js:not(.motion-off) .film-hero h1 {animation-delay: .12s;}
  .js:not(.motion-off) .film-hero .hero-lead {animation-delay: .26s;}
  .js:not(.motion-off) .film-hero .hero-action {animation-delay: .38s;}
  .js:not(.motion-off) .film-foot {animation: film-entrance .8s .4s both;}
}
@keyframes film-entrance {
  from {opacity: 0; translate: 0 13px;}
  to {opacity: 1; translate: 0;}
}
.quick-links a {position: relative;}
.quick-links a::after {
  content: '';
  position: absolute;
  inset: auto 0 -1px;
  height: 2px;
  background: #a36b47;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .32s ease;
}
.quick-links a:is(:hover,:focus-visible)::after {transform: scaleX(1);}
.motion-off .quick-links a::after {transition: none;}
@media (prefers-reduced-motion: reduce) {
  .quick-links a::after {transition: none;}
}

.film-foot::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,#e0b58c75,#e6bb90);
  transform: scaleX(var(--film-progress, 0));
  transform-origin: left;
}
.film-note {min-height: 44px;}
.quick {border-top: 1px solid #bd946d;}
.quick .eyebrow {color: #745034;}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js:not(.motion-off) .film-image {
      animation: film-departure linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
  }
}
@keyframes film-departure {
  from {opacity: 1;}
  to {opacity: .56;}
}

.film-hero h1 {
  font-size: clamp(3rem, 7.7vw, 8.5rem);
  line-height: .95;
}
.film-hero .hero-lead {max-width: min(45ch,100%);}
.hero-action svg {display: block;}
@media (max-width:760px) {
  .film-hero h1 {font-size: clamp(2.05rem, 10.7vw, 5rem);}
  .film-hero .hero-lead {line-height: 1.55;}
}

.film-hero .hero-line {overflow: clip; padding-bottom: .13em; margin-bottom: -.13em;}
.film-hero .hero-line-accent {color: #f1cca9;}
.film-hero .eyebrow {display: flex; align-items: center; gap: 11px;}
.film-hero .eyebrow::before {content: ''; flex: 0 0 7px; aspect-ratio: 1; background: #dfb58b;}
.film-hero .hero-action {min-height: 48px; gap: clamp(18px,4vw,34px); border: 1px solid #f1e4d5; border-radius: 2px; box-shadow: 0 5px 22px #0b08062b;}
.quick {
  padding-block: clamp(28px,4vw,52px);
  background: #f2ebe0;
}
.quick > .eyebrow {margin-bottom: 18px;}
.quick-links {gap: 10px; border: 0;}
.quick-links a,
.quick-links a:first-child {
  min-height: 112px;
  padding: 16px clamp(13px,1.8vw,24px);
  border: 1px solid #66482f33;
  background: #f8f2e9;
}
.quick-links a + a {border-color: #66482f33; border-style: solid; border-width: 1px;}
.quick-links a:is(:hover,:focus-visible) {background: #ede0d1;}
.quick-links a:focus-visible,
.film-hero :is(.hero-action,.film-note,.film-control):focus-visible {
  outline: 2px solid #ac794d;
  outline-offset: 4px;
}
.quick-links small {color: #775337;}
.quick-links strong {text-wrap: balance;}
.quick-links b {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid #a36b4766;
  color: #754827;
  line-height: 1;
}
.service-tabs > button[aria-selected="true"] {
  background: #efe0cf;
  box-shadow: inset 3px 0 #a36b47;
}
@media (max-width: 760px) {
  .header-tools :is(.language,.menu-toggle) {min-width: 44px; min-height: 44px;}
  .quick-links {grid-template-columns: 1fr;}
  .quick-links a,.quick-links a:first-child {min-height: 74px;}
}
.idea-image {isolation: isolate; overflow: hidden; background: #201a16;}
.idea-image::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid #e5bd9359;
  z-index: 2;
}
.idea-image > span {z-index: 2;}
@media (prefers-reduced-motion: no-preference) {
  .js:not(.motion-off) .film-hero .hero-content > h1 {animation: none;}
  .js:not(.motion-off) .hero-line > span {animation: title-slide .9s cubic-bezier(.16,1,.3,1) .12s both;}
  .js:not(.motion-off) .hero-line-accent > span {animation-delay: .25s;}
  .js:not(.motion-off) .quick-links.is-visible > a {animation: quick-slide .62s cubic-bezier(.16,1,.3,1) both;}
  .js:not(.motion-off) .quick-links.is-visible > a:nth-child(2) {animation-delay: .075s;}
  .js:not(.motion-off) .quick-links.is-visible > a:nth-child(3) {animation-delay: .15s;}
  .js:not(.motion-off) .idea-image.is-visible > img {animation: idea-slide 1.1s cubic-bezier(.2,.7,.2,1) both;}
}
@keyframes title-slide {
  from {transform: translateY(112%);}
  to {transform: translateY(0);}
}
@keyframes quick-slide {
  from {opacity: .3; transform: translateX(14px);}
  to {opacity: 1; transform: translateX(0);}
}
@keyframes idea-slide {
  from {clip-path: inset(0 100% 0 0); transform: scale(1.06);}
  to {clip-path: inset(0); transform: scale(1);}
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 761px) {
    .js:not(.motion-off) .film-image {
      animation-name: film-drift;
    }
  }
}
@keyframes film-drift {
  from {opacity: 1; transform: translateY(0);}
  to {opacity: .45; transform: translateY(13%);}
}

.opening-board {display: none;}
@media (prefers-reduced-motion: no-preference) {
  .opening-ready:not(.motion-off) .opening-board {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
    animation: opening-exit 1.82s both;
  }
  .opening-ready:not(.motion-off) .header {
    animation: opening-header 1.04s ease both;
  }
  .opening-ready:not(.motion-off) .header:focus-within {opacity: 1 !important;}
  .opening-board::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #18120e;
    animation: opening-backdrop 1.82s both;
  }
  .opening-tiles {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(8,minmax(0,1fr));
    grid-template-rows: repeat(4,minmax(0,1fr));
    perspective: 950px;
    animation: opening-expand .56s cubic-bezier(.67,.04,.27,1) .30s both;
  }
  .opening-mark {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: clamp(65px,10vw,100px);
    height: auto;
    transform: translate(-50%,-50%);
    fill: #f4ebdf;
    animation: opening-mark .85s ease both;
  }
  .opening-mark .brand-board {
    fill: #dfb58b;
    animation: opening-board-pattern .85s ease both;
  }
  .opening-mark .brand-corner {
    fill: #dfb58b;
    transform-box: fill-box;
    transform-origin: left top;
    animation: opening-corner .85s cubic-bezier(.22,.72,.26,1) both;
  }
  .opening-tiles::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(108deg, transparent 36%, #e7b78340 49%, transparent 63%);
    mix-blend-mode: screen;
    animation: opening-light .75s .78s ease-out both;
  }
  .opening-tiles > span {
    --direction: -1;
    --tile-delay: 0ms;
    background: linear-gradient(140deg, #372820, #211915 66%);
    box-shadow: inset 0 0 0 1px #bc9a7023;
    transform-origin: center;
    animation: opening-tile .78s cubic-bezier(.64,.04,.22,1)
      calc(770ms + var(--tile-delay) + var(--board-cell) * 4ms) both;
  }
  .opening-tiles > span:nth-child(16n+2),
  .opening-tiles > span:nth-child(16n+4),
  .opening-tiles > span:nth-child(16n+6),
  .opening-tiles > span:nth-child(16n+8),
  .opening-tiles > span:nth-child(16n+9),
  .opening-tiles > span:nth-child(16n+11),
  .opening-tiles > span:nth-child(16n+13),
  .opening-tiles > span:nth-child(16n+15) {background: linear-gradient(140deg, #524034, #392a20 66%);}
  .opening-tiles > span:nth-child(8n+5),
  .opening-tiles > span:nth-child(8n+6),
  .opening-tiles > span:nth-child(8n+7),
  .opening-tiles > span:nth-child(8n+8) {--direction: 1;}
  .opening-tiles > span:nth-child(8n+1),
  .opening-tiles > span:nth-child(8n+8) {--tile-delay: 110ms;}
  .opening-tiles > span:nth-child(8n+2),
  .opening-tiles > span:nth-child(8n+7) {--tile-delay: 75ms;}
  .opening-tiles > span:nth-child(8n+3),
  .opening-tiles > span:nth-child(8n+6) {--tile-delay: 35ms;}
  .js:not(.motion-off) .hero-line > span {animation-delay: .92s;}
  .js:not(.motion-off) .hero-line-accent > span {animation-delay: 1.02s;}
  .js:not(.motion-off) .film-hero .hero-lead {animation-delay: 1.09s;}
  .js:not(.motion-off) .film-hero .hero-action {animation-delay: 1.18s;}
  @media(max-width: 760px) {
    .opening-tiles {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      grid-template-rows: repeat(8, minmax(0, 1fr));
    }
    .opening-tiles > span:nth-child(n) {
      --direction: -1;
      --tile-delay: 60ms;
      background: linear-gradient(140deg, #372820, #211915 66%);
    }
    .opening-tiles > span:nth-child(8n+2),
    .opening-tiles > span:nth-child(8n+4),
    .opening-tiles > span:nth-child(8n+5),
    .opening-tiles > span:nth-child(8n+7) {background: linear-gradient(140deg, #524034, #392a20 66%);}
    .opening-tiles > span:nth-child(4n+3),
    .opening-tiles > span:nth-child(4n+4) {--direction: 1;}
    .opening-tiles > span:nth-child(4n+2),
    .opening-tiles > span:nth-child(4n+3) {--tile-delay: 0ms;}
  }
}
@keyframes opening-header {
  0%, 60% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes opening-backdrop {
  0%, 42% {opacity: 1;}
  62%, 100% {opacity: 0;}
}
@keyframes opening-expand {
  from {opacity: 0; clip-path: inset(calc(50% - 18px));}
  26% {opacity: 1;}
  to {opacity: 1; clip-path: inset(0);}
}
@keyframes opening-mark {
  0% {opacity: 0;}
  14%, 54% {opacity: 1;}
  100% {opacity: 0;}
}
@keyframes opening-board-pattern {
  0%, 24% {opacity: 0;}
  46%, 100% {opacity: 1;}
}
@keyframes opening-corner {
  0%, 16% {transform: none;}
  42%, 100% {transform: translateY(14px) scale(.5);}
}
@keyframes opening-tile {
  0% {opacity: 1; transform: translateX(0) rotateY(0);}
  22% {opacity: 1; transform: translateX(calc(var(--direction) * 10%)) rotateY(calc(var(--direction) * 12deg));}
  64% {opacity: .85;}
  100% {opacity: 0; transform: translateX(calc(var(--direction) * 132%)) rotateY(calc(var(--direction) * 34deg)) scale(.91);}
}
@keyframes opening-light {
  from {opacity: 0; transform: translateX(-48%);}
  33% {opacity: .8;}
  to {opacity: 0; transform: translateX(52%);}
}
@keyframes opening-exit {
  from {visibility: visible;}
  to {visibility: hidden;}
}

.service-panel .service-result {
  margin-top: 20px;
  padding: 14px 16px;
  border-inline-start: 2px solid #a36b47;
  background: #f5ebdf;
}
.service-panel .service-result .eyebrow {
  display: block;
  font-size: var(--type-caption);
  color: #754827;
}
.service-panel .service-result p {margin: 4px 0 0;}

.film-hero .eyebrow {align-items: baseline; line-height: 1.45;}
.film-hero .eyebrow::before {align-self: start; margin-top: .38em;}
.service-tabs > button > b {position: relative; isolation: isolate;}
.service-tabs > button > b::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 22px;
  height: 22px;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  background: repeating-conic-gradient(#ad784e 0% 25%, transparent 0% 50%) 0 0 / 11px 11px;
  opacity: 0;
}
.service-tabs > button:is(:hover,:focus-visible) > b::before {opacity: .23;}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :root:not(.motion-off) .service-tabs > button > b::before {
    transition: opacity .22s ease, transform .32s ease;
    transform: translate(-5px,5px);
  }
  :root:not(.motion-off) .service-tabs > button:is(:hover,:focus-visible) > b::before {transform: translate(0);}
}