/* A continuous tonal canvas: petrol, mineral green and warm reflected light. */
body { background: #0b2732; }
main { --surface-fade: 0px; color: #e5eae4; background-color: #17383f; }
main.has-surface-map {
  background-image:
    radial-gradient(ellipse 80vw 1000px at 100% 240px, #c1b08417, transparent 78%),
    radial-gradient(ellipse 85vw 1300px at 0% var(--scene-work), #7e9f8820, transparent 80%),
    radial-gradient(ellipse 80vw 1400px at 100% var(--scene-film-mid), #488d8620, transparent 80%),
    radial-gradient(ellipse 80vw 1000px at 70% var(--scene-quote), #ceb98814, transparent 80%),
    radial-gradient(ellipse 80vw 1000px at 0% var(--scene-contact), #76908b14, transparent 80%),
    linear-gradient(180deg,
      #091f2a 0px,
      #1a3b42 var(--scene-work),
      #193940 var(--scene-film),
      #234145 var(--scene-film-end),
      #294345 var(--scene-quote),
      #213d42 var(--scene-about),
      #294441 var(--scene-testimonials),
      #1b3940 var(--scene-faq),
      #17353d var(--scene-contact),
      #0c2732 var(--scene-footer),
      #091f2a 100%);
  background-repeat: no-repeat;
}
main.has-surface-map :is(.hero, .work, .film-section, .quote-section, .about, .testimonials, .faq, .contact, .site-footer) { background: transparent; }
.about { padding-block: 85px; }
.site-footer { border-top: 1px solid #d7c3a218; }
.lightbox {
  background: radial-gradient(ellipse at 100% 0%, #48787535, transparent 75%), linear-gradient(145deg, #0a2833, #153f45 65%, #09252e);
}
main:not(.has-surface-map) :is(.hero, .work, .film-section, .quote-section, .about, .testimonials, .faq, .contact, .site-footer) { background: linear-gradient(135deg, #17383f, #264448); }
.quote-section { padding-block: 100px 105px; }
.quote-layout { display: grid; grid-template-columns: 36px minmax(0,1fr); gap: 32px; }
.quote-intro { display: flex; align-items: center; }
.quote-intro .eyebrow { margin: 0; align-self: auto; writing-mode: vertical-rl; rotate: 180deg; }
.quote-reader { position: relative; min-width: 0; padding: 32px 5% 24px; border-block: 1px solid #d7c3a214; background: none; }
.quote-reader blockquote { margin: 0; font: 400 clamp(30px,3.2vw,44px)/1.28 var(--font-primary); letter-spacing: -.035em; color: #edf0e6; text-wrap: pretty; }
.quote-panel + .quote-panel { margin-top: 28px; }
.quote-reader .quote-ending { color: #dec8a5; }
.quote-held .quote-reader blockquote { display: grid; min-height: clamp(270px,38svh,380px); align-items: center; font-size: clamp(34px,4.1vw,58px); }
.quote-held .quote-panel { grid-area: 1/1; margin: 0; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity 420ms var(--motion-ease), transform 600ms var(--motion-ease); }
.quote-held .quote-panel.is-current { opacity: 1; transform: none; pointer-events: auto; }
.quote-held .quote-panel.is-past { transform: translateY(-16px); }
.quote-held .quote-ending { font-size: 1.15em; }
.quote-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 24px; border: 0; }
.quote-mark { font: 400 70px/.65 var(--font-editorial); color: #d8c2a0; }
.quote-signature { font-size: 12px; color: #e1e5dc; line-height: 1.5; }
.quote-signature > span { display: block; font-size: 9px; color: #aebfb7; margin-top: 2px; }
.quote-word { transition: opacity .22s ease; }
.quote-interactive .quote-word { opacity: .22; }
.quote-interactive .quote-word.is-read { opacity: 1; }

/* A closing invitation, with the photograph and typography sharing the composition. */
.contact { padding-block: 110px 76px; }
.contact-layout { grid-template-columns: minmax(0,1fr) minmax(220px,320px); gap: 66px 8%; align-items: center; max-width: 1060px; }
.contact-invitation { padding-block: 24px; }
.contact-invitation > .eyebrow { margin-bottom: 34px; }
.contact .contact-prelude { font-size: 14px; margin-bottom: 20px; color: #c4d1c9; }
.contact h2 { font-family: var(--font-editorial); font-size: clamp(49px,5.3vw,78px); line-height: 1.04; letter-spacing: -.045em; font-weight: 400; margin-bottom: 32px; }
.contact h2 > span { display: inline-block; font-size: 1em; line-height: 1.08; letter-spacing: inherit; color: #e3ceb0; }
.contact-cta { min-width: 148px; }
.contact-photo { position: relative; justify-self: end; width: 100%; padding: 9px; border: 1px solid #d7c8aa38; }
.contact-photo::after { content: ''; position: absolute; inset: 6% -9px -9px 6%; z-index: -1; background: linear-gradient(145deg,#b8c0a807,#b8c0a812); }
.contact-photo img { width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: center 70%; }
.contact-details { grid-column: 1/-1; display: grid; grid-template-columns: minmax(0,1fr) minmax(220px,320px); column-gap: 8%; padding-top: 30px; border-top: 1px solid #e4c4a133; }
.contact-details > div { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.contact-details .eyebrow { margin-bottom: 16px; }
.contact-details a { display: inline-block; max-width: 100%; padding-block: 5px; border-bottom: 1px solid #c9b89945; transition: color .2s,border-color .2s; }
.contact-details a:hover { color: #e3ceb0; border-color: #e3ceb0; }
.contact-email > a { font-size: clamp(16px,1.65vw,23px); line-height: 1.4; letter-spacing: -.025em; overflow-wrap: anywhere; }
.contact-social > a { font-size: 17px; line-height: 1.9; }
.contact-social .contact-location { margin-top: 14px; padding: 0; font-size: 10px; color: #adbfba; }
@media (max-width: 1023px) {
  .quote-layout { width: 82%; }
}
@media (max-width: 700px) {
  .about { padding-block: 58px; }
  .contact { padding-block: 76px 54px; }
  .quote-section { padding-block: 64px 56px; }
  .quote-layout { width: 88%; grid-template-columns: 1fr; gap: 18px; }
  .quote-intro .eyebrow { writing-mode: horizontal-tb; rotate: none; }
  .quote-reader { padding: 20px 0; background: none; }
  .quote-reader blockquote { font-size: clamp(24px,6.5vw,32px); line-height: 1.3; }
  .quote-held .quote-reader blockquote { font-size: clamp(26px,7.2vw,36px); min-height: clamp(240px,35svh,300px); }
  .quote-footer { margin-top: 20px; }
  .quote-mark { font-size: 54px; }
  .quote-signature { font-size: 11px; }
  .contact-layout { grid-template-columns: 1fr; gap: 35px; }
  .contact-invitation { padding: 0; }
  .contact-invitation > .eyebrow { margin-bottom: 27px; }
  .contact .contact-prelude { font-size: 12px; margin-bottom: 16px; }
  .contact h2 { font-family: var(--font-editorial); font-size: clamp(44px,11.5vw,64px); margin-bottom: 25px; }
  .contact-photo { width: min(64%,260px); margin-right: 9px; padding: 7px; }
  .contact-photo img { aspect-ratio: 4/5; }
  .contact-details { grid-template-columns: 1fr; gap: 28px; padding-top: 26px; }
  .contact-details .eyebrow { margin-bottom: 8px; }
  .contact-email > a { font-size: clamp(16px,4.6vw,21px); }
  .contact-social > a { font-size: 15px; }
  .contact-social .contact-location { margin-top: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .quote-word { transition: none; }
  .quote-interactive .quote-word { opacity: 1; }
}