:root {
   --night: #0C1830;
   --harbour: #132441;
   --champ: #D9C48A;
   --bronze: #8E6F1F;
   --ivory: #FBFAF7;
   --ink: #16181D;
   --paper: #FBFAF7;
   --sheet: #FFFFFF;
   --on-paper: #16181D;
   --paper-muted: #5A5E67;
   --paper-line: #E6E0D2;
   --accent-p: #8E6F1F;
   --mist: rgba(251, 250, 247, .74);
   --nline: rgba(217, 196, 138, .22);
   --fd: 'Marcellus', Georgia, 'Times New Roman', serif;
   --fb: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
   --gut: 22px;
   --ease: cubic-bezier(.22, 1, .36, 1);
   box-sizing: border-box;
   padding-top: env(safe-area-inset-top, 0px);
   padding-bottom: env(safe-area-inset-bottom, 0px)
}

@media (prefers-color-scheme:dark) {
   :root:not([data-theme="light"]) {
      --paper: #E9E4D7;
      --sheet: #F3EFE5;
      --on-paper: #16181D;
      --paper-muted: #4F535C;
      --paper-line: #D6CFBF;
      --accent-p: #7A5F1A
   }
}

:root[data-theme="dark"] {
   --paper: #E9E4D7;
   --sheet: #F3EFE5;
   --on-paper: #16181D;
   --paper-muted: #4F535C;
   --paper-line: #D6CFBF;
   --accent-p: #7A5F1A
}

html {
   scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 72px);
   -webkit-text-size-adjust: 100%;
   scroll-behavior: smooth
}

*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0
}

body {
   background: var(--night);
   color: var(--ivory);
   font-family: var(--fb);
   font-size: 16px;
   line-height: 1.6;
   -webkit-font-smoothing: antialiased;
   overflow-x: hidden
}

img,
svg {
   max-width: 100%;
   display: block
}

a {
   color: inherit
}

button {
   font: inherit;
   color: inherit;
   background: none;
   border: 0;
   cursor: pointer;
   -webkit-tap-highlight-color: transparent
}

a {
   -webkit-tap-highlight-color: transparent
}

:focus-visible {
   outline: 2px solid var(--champ);
   outline-offset: 3px
}

::selection {
   background: var(--champ);
   color: var(--night)
}

.wrap {
   padding-inline: var(--gut);
   max-width: 1180px;
   margin-inline: auto
}

section {
   padding-block: 88px
}

.night {
   background: var(--night);
   position: relative;
   isolation: isolate
}

.night::before {
   content: '';
   position: absolute;
   inset: 0;
   z-index: -1;
   background-image: url(assets/hero.jpg);
   /* background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); */
   opacity: .07;
   pointer-events: none
}

.paper {
   background: var(--paper);
   color: var(--on-paper)
}

.h2 {
   font-family: var(--fd);
   font-weight: 400;
   font-size: clamp(2.1rem, 8.8vw, 3.6rem);
   line-height: 1.08;
   letter-spacing: -.005em;
   max-width: 17ch
}

.lede {
   margin-top: 18px;
   max-width: 46ch;
   color: var(--mist);
   font-size: 16.5px
}

.paper .lede {
   color: var(--paper-muted)
}

.lab {
   font-size: 13.5px;
   font-weight: 500;
   color: var(--champ)
}

.paper .lab {
   color: var(--accent-p)
}

.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-height: 52px;
   padding: 0 26px;
   background: var(--champ);
   color: var(--night);
   font-size: 14.5px;
   font-weight: 600;
   letter-spacing: .01em;
   text-decoration: none;
   border-radius: 2px;
   transition: transform .2s, background .3s
}

.btn:active {
   transform: scale(.97)
}

.btn.dark {
   background: var(--night);
   color: var(--ivory)
}

.paper .btn.dark {
   background: var(--harbour)
}

.lnk {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   min-height: 44px;
   font-size: 14.5px;
   font-weight: 500;
   text-decoration: none;
   color: var(--champ);
   border-bottom: 1px solid transparent
}

.paper .lnk {
   color: var(--accent-p)
}

.lnk .chev {
   width: 14px;
   height: 14px;
   transition: transform .3s var(--ease)
}

.lnk:hover .chev {
   transform: translateX(3px)
}

/* nav */
.nav {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 160;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   padding: calc(env(safe-area-inset-top, 0px) + 14px) var(--gut) 14px;
   transition: background .4s, box-shadow .4s, padding .4s
}

.nav.sc {
   background: rgba(12, 24, 48, .9);
   -webkit-backdrop-filter: blur(14px) saturate(1.2);
   backdrop-filter: blur(14px) saturate(1.2);
   box-shadow: 0 1px 0 var(--nline);
   padding-top: calc(env(safe-area-inset-top, 0px) + 10px);
   padding-bottom: 10px
}

.nav.mo {
   background: transparent;
   box-shadow: none;
   -webkit-backdrop-filter: none;
   backdrop-filter: none
}

.logo {
   font-family: var(--fd);
   font-size: 15px;
   letter-spacing: .3em;
   text-decoration: none;
   color: var(--ivory);
   white-space: nowrap
}

.nl {
   display: none
}

.mtog {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   min-height: 44px;
   padding-left: 8px;
   font-size: 14px;
   font-weight: 500;
   color: var(--ivory)
}

.mtog i {
   display: block;
   width: 22px;
   height: 9px;
   border-top: 1.5px solid currentColor;
   border-bottom: 1.5px solid currentColor;
   transition: transform .35s var(--ease), height .35s
}

.mtog[aria-expanded="true"] i {
   height: 0;
   border-bottom-width: 0;
   transform: rotate(0)
}

.menu {
   position: fixed;
   inset: 0;
   z-index: 150;
   background: var(--night);
   padding: calc(env(safe-area-inset-top, 0px) + 90px) var(--gut) calc(env(safe-area-inset-bottom, 0px) + 30px);
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   gap: 36px;
   overflow-y: auto;
   opacity: 0;
   visibility: hidden;
   transition: opacity .35s, visibility .35s
}

.menu.open {
   opacity: 1;
   visibility: visible
}

.menu nav a {
   display: block;
   font-family: var(--fd);
   font-size: clamp(1.75rem, 7.6vw, 2.6rem);
   line-height: 1.22;
   padding: 5px 0;
   text-decoration: none;
   opacity: 0;
   transform: translateY(16px);
   transition: opacity .5s, transform .6s var(--ease), color .3s;
   transition-delay: calc(var(--i) * 35ms)
}

.menu.open nav a {
   opacity: 1;
   transform: none
}

.menu nav a:hover {
   color: var(--champ)
}

.menu .mc {
   display: grid;
   gap: 4px;
   font-size: 14.5px;
   color: var(--mist)
}

.menu .mc a {
   text-decoration: none;
   min-height: 40px;
   display: flex;
   align-items: center
}

/* hero */
.hero {
   position: relative;
   overflow: hidden;
   padding: 0 0 40px
}

.hero-img {
   position: relative;
   height: 55svh;
   min-height: 360px;
   overflow: hidden;
   background: var(--harbour)
}

.hero-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: 30% 50%;
   transform: scale(1.14);
   transition: transform 2.8s var(--ease)
}

.hero-img::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(12, 24, 48, .62) 0%, rgba(12, 24, 48, 0) 24%, rgba(12, 24, 48, 0) 58%, var(--night) 100%)
}

.hero .wrap {
   position: relative;
   z-index: 2;
   width: 100%;
   margin-top: -48px
}

.kick {
   font-size: 14.5px;
   font-weight: 500;
   color: var(--champ)
}

h1 {
   font-family: var(--fd);
   font-weight: 400;
   font-size: clamp(2.45rem, 10.1vw, 6.2rem);
   line-height: 1.02;
   letter-spacing: -.012em;
   margin-top: 14px
}

h1 .l {
   display: block;
   overflow: hidden;
   padding-bottom: .08em;
   margin-bottom: -.08em
}

h1 .l span {
   display: block;
   transform: translateY(108%);
   transition: transform 1.15s var(--ease)
}

h1 .l:nth-child(2) span {
   transition-delay: .12s
}

h1 .l:nth-child(3) span {
   transition-delay: .26s
}

h1 .gap {
   margin-top: .22em
}

.hero .sub {
   margin-top: 20px;
   max-width: 34ch;
   color: var(--mist);
   font-size: 16.5px
}

.hero .acts {
   margin-top: 28px;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 10px 24px
}

.hero .kick,
.hero .sub,
.hero .acts {
   opacity: 0;
   transform: translateY(10px);
   transition: opacity .9s, transform .9s var(--ease)
}

.hero .sub {
   transition-delay: .55s
}

.hero .acts {
   transition-delay: .72s
}

.hero .kick {
   transition-delay: .1s
}

.ld .hero-img img {
   transform: scale(1)
}

.ld h1 .l span,
.ld .hero .kick,
.ld .hero .sub,
.ld .hero .acts {
   transform: none;
   opacity: 1
}

.cue {
   display: none
}

/* ledger */
.rows {
   margin-top: 40px;
   border-bottom: 1px solid var(--nline)
}

.row {
   display: grid;
   grid-template-columns: 1fr;
   gap: 2px;
   padding: 15px 0;
   border-top: 1px solid var(--nline)
}

.row dt {
   font-family: var(--fd);
   font-size: clamp(2.2rem, 10vw, 3rem);
   line-height: 1;
   color: var(--champ);
   font-variant-numeric: tabular-nums
}

.row dd {
   color: var(--mist);
   font-size: 15.5px;
   max-width: 30ch
}

.rlk {
   display: flex;
   min-height: 40px;
   font-size: 14px
}

/* the letter */
.letter {
   margin-top: 36px;
   background: var(--sheet);
   border: 1px solid var(--paper-line);
   padding: 28px 22px 24px;
   position: relative
}

.letter::before {
   content: '';
   position: absolute;
   left: 0;
   top: 0;
   bottom: 0;
   width: 3px;
   background: var(--champ)
}

.letter p {
   font-family: var(--fd);
   font-size: clamp(1.3rem, 5.6vw, 1.75rem);
   line-height: 1.62;
   color: var(--on-paper)
}

.letter .salut {
   margin-bottom: 10px
}

.letter p+p {
   margin-top: 6px
}

.slot {
   display: inline;
   cursor: pointer;
   color: var(--accent-p);
   text-decoration: underline dashed var(--accent-p);
   text-decoration-thickness: 1.5px;
   text-underline-offset: 7px;
   padding: 0 1px;
   -webkit-box-decoration-break: clone;
   box-decoration-break: clone;
   transition: background-color .6s, color .3s;
   -webkit-tap-highlight-color: transparent
}

.slot:focus-visible {
   outline: 2px solid var(--champ);
   outline-offset: 2px
}

.slot.f {
   color: var(--on-paper);
   text-decoration: underline solid var(--champ);
   text-decoration-thickness: 1.5px
}

.slot.flash {
   animation: flash 1.1s ease
}

@keyframes flash {
   0% {
      background-color: rgba(217, 196, 138, .55)
   }

   100% {
      background-color: transparent
   }
}

.slot.nudge {
   animation: nudge 1.4s ease 2
}

@keyframes nudge {

   0%,
   100% {
      background-color: transparent
   }

   50% {
      background-color: rgba(217, 196, 138, .28)
   }
}

.send {
   margin-top: 26px;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 8px 20px
}

.send .btn {
   width: 100%
}

.meta {
   font-size: 13.5px;
   color: var(--paper-muted)
}

.clr {
   min-height: 44px;
   font-size: 14px;
   color: var(--paper-muted);
   text-decoration: underline;
   text-underline-offset: 3px
}

.scrim {
   position: fixed;
   inset: 0;
   z-index: 170;
   background: rgba(8, 14, 28, .55);
   opacity: 0;
   visibility: hidden;
   transition: opacity .35s, visibility .35s
}

.scrim.open {
   opacity: 1;
   visibility: visible
}

.sheet {
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 180;
   max-height: 82svh;
   overflow-y: auto;
   background: var(--sheet);
   color: var(--on-paper);
   border-radius: 16px 16px 0 0;
   padding: 10px 22px calc(env(safe-area-inset-bottom, 0px) + 22px);
   transform: translateY(104%);
   transition: transform .5s var(--ease);
   overscroll-behavior: contain
}

.sheet.open {
   transform: none
}

.grab {
   width: 40px;
   height: 4px;
   border-radius: 4px;
   background: var(--paper-line);
   margin: 4px auto 18px
}

.sheet h3 {
   font-family: var(--fd);
   font-weight: 400;
   font-size: 1.7rem;
   line-height: 1.2
}

.sheet .hint {
   margin-top: 6px;
   font-size: 14px;
   color: var(--paper-muted)
}

.chips {
   display: flex;
   flex-wrap: wrap;
   gap: 9px;
   margin-top: 20px
}

.chip {
   min-height: 44px;
   padding: 0 17px;
   border: 1px solid var(--paper-line);
   border-radius: 999px;
   font-size: 14.5px;
   color: var(--on-paper);
   background: transparent;
   transition: background .25s, color .25s, border-color .25s, transform .15s
}

.chip:active {
   transform: scale(.96)
}

.chip.on {
   background: var(--harbour);
   border-color: var(--harbour);
   color: var(--ivory)
}

.sheet .sa {
   margin-top: 24px;
   position: sticky;
   bottom: 0;
   background: var(--sheet);
   padding-top: 10px
}

.sheet .sa .btn {
   width: 100%
}


/* lead sheet */
.lead {
   padding-top: 10px
}

.lead h3 {
   padding-right: 48px
}

.ld-x {
   position: absolute;
   top: 12px;
   right: 12px;
   width: 44px;
   height: 44px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--on-paper)
}

.ld-x svg {
   width: 20px;
   height: 20px
}

.ld-ref {
   margin-top: 16px;
   background: rgba(217, 196, 138, .16);
   border-left: 3px solid var(--champ);
   padding: 14px 16px;
   font-family: var(--fd);
   font-size: 1.02rem;
   line-height: 1.55;
   white-space: pre-line;
   color: var(--on-paper);
   max-height: 28svh;
   overflow: auto
}

.lead form {
   margin-top: 14px;
   display: grid;
   gap: 6px
}

.lbl {
   font-size: 14px;
   font-weight: 600;
   margin-top: 10px;
   color: var(--on-paper)
}

.lead input[type=text],
.lead input[type=tel],
.lead select {
   font: inherit;
   font-size: 16px;
   min-height: 52px;
   border: 1px solid var(--paper-line);
   background: var(--sheet);
   color: var(--on-paper);
   border-radius: 4px;
   padding: 0 14px;
   width: 100%;
   -webkit-appearance: none;
   appearance: none
}

.ph {
   display: flex;
   border: 1px solid var(--paper-line);
   border-radius: 4px;
   overflow: hidden;
   background: var(--sheet)
}

.ph select {
   width: auto;
   max-width: 132px;
   border: 0;
   border-right: 1px solid var(--paper-line);
   border-radius: 0;
   background: rgba(217, 196, 138, .12);
   padding: 0 12px
}

.ph input {
   border: 0 !important;
   border-radius: 0 !important;
   min-width: 0
}

.lead input:focus,
.lead select:focus {
   outline: 2px solid var(--champ);
   outline-offset: -2px
}

.cons {
   display: grid;
   grid-template-columns: 24px 1fr;
   gap: 12px;
   align-items: start;
   margin-top: 14px;
   font-size: 14px;
   line-height: 1.5;
   color: var(--paper-muted);
   cursor: pointer
}

.cons input {
   width: 22px;
   height: 22px;
   margin-top: 1px;
   accent-color: var(--harbour)
}

.err {
   font-size: 13.5px;
   color: #A6392A
}

.err:empty {
   display: none
}

.hp {
   position: absolute !important;
   left: -9999px;
   width: 1px;
   height: 1px;
   opacity: 0
}

.lead .btn {
   width: 100%;
   margin-top: 18px;
   gap: 10px
}

.lead .btn svg {
   width: 20px;
   height: 20px
}

.ld-note {
   margin-top: 12px;
   font-size: 12.5px;
   line-height: 1.5;
   color: var(--paper-muted);
   text-align: center
}

/* featured rail */
.filt {
   display: flex;
   gap: 8px;
   margin-top: 28px;
   overflow-x: auto;
   scrollbar-width: none;
   padding-bottom: 4px;
   margin-inline: calc(var(--gut) * -1);
   padding-inline: var(--gut)
}

.filt::-webkit-scrollbar {
   display: none
}

.fp {
   flex: 0 0 auto;
   min-height: 42px;
   padding: 0 16px;
   border: 1px solid var(--nline);
   border-radius: 999px;
   font-size: 14px;
   color: var(--mist);
   transition: background .25s, color .25s, border-color .25s
}

.fp.on {
   background: var(--champ);
   border-color: var(--champ);
   color: var(--night)
}

.rail {
   display: flex;
   gap: 14px;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   scrollbar-width: none;
   padding: 28px var(--gut) 8px;
   scroll-padding-inline: var(--gut)
}

.rail::-webkit-scrollbar {
   display: none
}

.lc {
   flex: 0 0 78%;
   max-width: 340px;
   aspect-ratio: 3/4;
   display: block;
   text-decoration: none;
   scroll-snap-align: start;
   perspective: 1100px;
   -webkit-perspective: 1100px
}

.lc[hidden] {
   display: none
}

.lc .fl {
   position: relative;
   display: block;
   width: 100%;
   height: 100%;
   transform-style: preserve-3d;
   -webkit-transform-style: preserve-3d;
   animation: flip 11s cubic-bezier(.55, 0, .2, 1) infinite
}

.lc:nth-child(even) .fl {
   animation-delay: -5.5s
}

.lc:nth-child(3n) .fl {
   animation-duration: 13s;
   animation-delay: -2.6s
}

@keyframes flip {

   0%,
   42% {
      transform: rotateY(0deg)
   }

   50%,
   92% {
      transform: rotateY(180deg)
   }

   100% {
      transform: rotateY(360deg)
   }
}

.face {
   position: absolute;
   inset: 0;
   overflow: hidden;
   display: flex;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden
}

.f-img {
   -webkit-transform: rotateY(0deg) translateZ(1px);
   transform: rotateY(0deg) translateZ(1px);
   flex-direction: column;
   justify-content: flex-end;
   padding: 22px
}

.f-img.sc {
   background: linear-gradient(165deg, #1C3B66 0%, #10233F 56%, #0A1528 100%)
}

.f-img.w {
   background: linear-gradient(165deg, #2B3F66 0%, #142646 56%, #0B1730 100%)
}

.f-img.tn {
   background: linear-gradient(165deg, #17405A 0%, #102A40 56%, #0A1728 100%)
}

.f-img.wk {
   background: linear-gradient(165deg, #294860 0%, #132C40 56%, #0B1A28 100%)
}

.f-img .sky {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%
}

.f-img img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover
}

.f-img::after {
   content: '';
   position: absolute;
   inset: 10px;
   border: 1px solid rgba(217, 196, 138, .28);
   pointer-events: none
}

.f-img .fade {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   height: 42%;
   background: linear-gradient(180deg, transparent, rgba(8, 14, 28, .9))
}

.f-img .z {
   position: relative;
   z-index: 1;
   font-size: 14px;
   font-weight: 500;
   color: var(--champ)
}

.f-txt {
   -webkit-transform: rotateY(180deg) translateZ(1px);
   transform: rotateY(180deg) translateZ(1px);
   background: var(--ivory);
   color: var(--ink);
   flex-direction: column;
   justify-content: flex-end;
   padding: 26px 24px
}

.f-txt .z {
   font-size: 13.5px;
   font-weight: 500;
   color: var(--bronze)
}

.f-txt b {
   font-family: var(--fd);
   font-weight: 400;
   font-size: 1.85rem;
   line-height: 1.15;
   margin: 8px 0 18px
}

.f-txt .e {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 14px;
   font-weight: 600;
   color: var(--harbour)
}

.f-txt .e .chev {
   width: 14px;
   height: 14px
}

.rf {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   gap: 6px 20px;
   margin-top: 14px;
   font-size: 13.5px;
   color: var(--mist)
}

.rf #cnt {
   color: var(--champ);
   font-variant-numeric: tabular-nums
}

/* access */
.access {
   padding-bottom: 72px
}

.mq {
   overflow: hidden;
   margin-top: 34px;
   -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
   mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)
}

.mq+.mq {
   margin-top: 14px
}

.mqt {
   display: flex;
   width: max-content;
   animation: mq 70s linear infinite
}

.mq.rev .mqt {
   animation-direction: reverse;
   animation-duration: 84s
}

.mqt span {
   font-family: var(--fd);
   font-size: 1.45rem;
   white-space: nowrap;
   padding: 0 22px;
   position: relative;
   color: var(--on-paper)
}

.mqt span::after {
   content: '';
   position: absolute;
   right: -3px;
   top: 50%;
   width: 5px;
   height: 5px;
   margin-top: -2px;
   background: var(--champ);
   transform: rotate(45deg)
}

@keyframes mq {
   to {
      transform: translateX(-50%)
   }
}

.aline {
   margin: 40px auto 0;
   padding-inline: var(--gut);
   max-width: 30ch;
   text-align: center;
   font-family: var(--fd);
   font-size: clamp(1.35rem, 5.4vw, 1.9rem);
   line-height: 1.35;
   color: var(--accent-p)
}

/* lenses */
.acc {
   list-style: none;
   margin-top: 34px;
   border-bottom: 1px solid var(--nline)
}

.ac {
   border-top: 1px solid var(--nline)
}

.ac-h {
   width: 100%;
   display: grid;
   grid-template-columns: 34px 1fr 30px;
   gap: 16px;
   align-items: center;
   text-align: left;
   padding: 20px 0;
   min-height: 64px
}

.ac-h .ic {
   width: 30px;
   height: 30px;
   color: var(--champ)
}

.ac-h b {
   display: block;
   font-family: var(--fd);
   font-weight: 400;
   font-size: 1.32rem;
   line-height: 1.25
}

.ac-h small {
   display: block;
   margin-top: 3px;
   font-size: 14px;
   line-height: 1.5;
   color: var(--mist)
}

.pm {
   position: relative;
   width: 30px;
   height: 30px;
   border: 1px solid var(--nline);
   border-radius: 50%
}

.pm::before,
.pm::after {
   content: '';
   position: absolute;
   left: 50%;
   top: 50%;
   width: 11px;
   height: 1.4px;
   margin: -.7px 0 0 -5.5px;
   background: var(--champ);
   transition: transform .4s var(--ease)
}

.pm::after {
   transform: rotate(90deg)
}

.ac.open .pm::after {
   transform: rotate(0deg)
}

.ac-b {
   display: grid;
   grid-template-rows: 0fr;
   transition: grid-template-rows .5s var(--ease)
}

.ac.open .ac-b {
   grid-template-rows: 1fr
}

.ac-b>div {
   overflow: hidden;
   visibility: hidden;
   transition: visibility .5s
}

.ac.open .ac-b>div {
   visibility: visible
}

.ac-b p {
   padding: 0 0 18px 50px;
   color: var(--mist);
   max-width: 62ch
}

.ac-b .aa {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 8px 22px;
   padding: 0 0 26px 50px
}

/* city */
.map {
   margin-top: 36px;
   border: 1px solid rgba(217, 196, 138, .38);
   background: #1B2A4A
}

.map img {
   width: 100%;
   height: auto
}

.geo {
   list-style: none;
   /* margin-top: 30px; */
   border-bottom: 1px solid var(--nline)
}

.geo li {
   border-top: 1px solid var(--nline)
}

.geo a {
   display: grid;
   grid-template-columns: 1fr 16px;
   gap: 14px;
   align-items: center;
   padding: 18px 0;
   text-decoration: none
}

.geo b {
   display: block;
   font-family: var(--fd);
   font-weight: 400;
   font-size: 1.3rem
}

.geo span {
   display: block;
   margin-top: 4px;
   font-size: 14px;
   color: var(--mist);
   line-height: 1.5
}

.geo .chev {
   width: 16px;
   height: 16px;
   color: var(--champ)
}

/* desks */
.desks {
   display: grid;
   gap: 14px;
   margin-top: 36px
}

.desk {
   background: var(--harbour);
   color: var(--ivory);
   padding: 30px 24px 22px;
   display: flex;
   flex-direction: column
}

.desk .lab {
   color: var(--champ)
}

.desk h3 {
   font-family: var(--fd);
   font-weight: 400;
   font-size: 1.75rem;
   line-height: 1.2;
   margin-top: 8px
}

.desk p {
   margin-top: 12px;
   color: var(--mist);
   font-size: 15.5px
}

.desk .lnk {
   margin-top: 16px;
   color: var(--champ)
}

/* commitment */
.cms {
   margin-top: 22px;
   display: grid;
   border-bottom: 1px solid var(--nline)
}

.pr-h {
   font-family: var(--fd);
   font-weight: 400;
   font-size: clamp(1.6rem, 6.6vw, 2.3rem);
   line-height: 1.15;
   margin-top: 64px
}

.cm {
   padding: 20px 0;
   border-top: 1px solid var(--nline)
}

.cm h3 {
   font-family: var(--fd);
   font-weight: 400;
   font-size: 1.5rem;
   line-height: 1.25;
   color: var(--ivory)
}

.cm p {
   margin-top: 8px;
   color: var(--mist);
   max-width: 44ch
}

/* word */
.mani .btn {
   margin-top: 28px
}

.qs {
   margin-top: 64px;
   display: grid;
   gap: 48px
}

.qs blockquote p {
   font-family: var(--fd);
   font-size: clamp(1.55rem, 6.4vw, 2.2rem);
   line-height: 1.3;
   color: var(--on-paper)
}

.qs blockquote p::before {
   content: '';
   display: block;
   width: 34px;
   height: 2px;
   background: var(--champ);
   margin-bottom: 20px
}

.qs footer {
   margin-top: 14px;
   color: var(--paper-muted);
   font-size: 15px;
   max-width: 44ch
}

.qs cite {
   display: block;
   margin-top: 10px;
   font-style: normal;
   font-weight: 600;
   font-size: 14px;
   color: var(--accent-p)
}

/* films + guides */
.films {
   padding-top: 30px
}

.film {
   flex: 0 0 46%;
   max-width: 210px;
   aspect-ratio: 9/16;
   position: relative;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   padding: 16px;
   text-decoration: none;
   scroll-snap-align: start;
   background: linear-gradient(170deg, #1D3860, #0B1628)
}

.film img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover
}

.film::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, transparent 45%, rgba(8, 14, 28, .8))
}

.film svg {
   position: absolute;
   z-index: 2;
   left: 50%;
   top: 44%;
   width: 44px;
   height: 44px;
   margin: -22px 0 0 -22px;
   color: var(--ivory)
}

.film small,
.film b {
   position: relative;
   z-index: 2
}

.film small {
   font-size: 12.5px;
   color: var(--champ)
}

.film b {
   font-family: var(--fd);
   font-weight: 400;
   font-size: 1.2rem;
   line-height: 1.2;
   margin-top: 2px
}

.fl-foot {
   margin-top: 6px
}

.h3g {
   font-family: var(--fd);
   font-weight: 400;
   font-size: clamp(1.8rem, 7.4vw, 2.6rem);
   margin-top: 64px
}

.guides {
   list-style: none;
   margin-top: 18px;
   border-bottom: 1px solid var(--nline)
}

.guides li {
   border-top: 1px solid var(--nline)
}

.guides a {
   display: grid;
   grid-template-columns: 1fr 16px;
   gap: 14px;
   align-items: center;
   min-height: 64px;
   padding: 14px 0;
   text-decoration: none;
   font-family: var(--fd);
   font-size: 1.22rem;
   line-height: 1.35
}

.guides .chev {
   width: 16px;
   height: 16px;
   color: var(--champ)
}

/* close + foot */
.close .crest {
   width: 64px;
   height: 64px;
   margin-bottom: 28px
}

.close.paper .lede {
   color: var(--paper-muted)
}

.close .acts {
   margin-top: 30px;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 10px 24px
}

.foot {
   background: #08111F;
   color: var(--mist);
   padding: 56px var(--gut) calc(env(safe-area-inset-bottom, 0px) + 96px);
   font-size: 14px
}

.foot .fw {
   max-width: 1180px;
   margin-inline: auto
}

.foot .logo {
   font-size: 14px
}

.foot .tl {
   margin-top: 12px;
   max-width: 34ch
}

.fl2 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 2px 20px;
   margin-top: 30px
}

.fl2 a {
   min-height: 40px;
   display: flex;
   align-items: center;
   text-decoration: none
}

.fl2 a:hover {
   color: var(--champ)
}

.legal {
   margin-top: 30px;
   padding-top: 20px;
   border-top: 1px solid var(--nline);
   font-size: 13px;
   line-height: 1.7
}

/* sticky bar + progress */
#sprog {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   height: 2px;
   z-index: 170;
   background: var(--champ);
   transform-origin: 0 50%;
   transform: scaleX(0)
}

#mbar {
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 140;
   display: flex;
   gap: 10px;
   padding: 10px 14px calc(env(safe-area-inset-bottom, 0px) + 10px);
   background: rgba(12, 24, 48, .96);
   -webkit-backdrop-filter: blur(12px);
   backdrop-filter: blur(12px);
   box-shadow: 0 -1px 0 var(--nline);
   transform: translateY(110%);
   transition: transform .45s var(--ease)
}

#mbar.on {
   transform: none
}

#mbar a {
   flex: 1;
   min-height: 48px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
   font-weight: 600;
   text-decoration: none;
   border-radius: 2px
}

#mbar .a1 {
   background: var(--champ);
   color: var(--night)
}

#mbar .a2 {
   border: 1px solid rgba(217, 196, 138, .55);
   color: var(--champ)
}

body.lock #mbar {
   transform: translateY(110%)
}

@media (min-width:640px) {
   .row {
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
      align-items: baseline;
      gap: 24px
   }

   .send .btn {
      width: auto
   }

   .desks {
      grid-template-columns: 1fr 1fr
   }

   .cms {
      grid-template-columns: 1fr 1fr;
      column-gap: 40px
   }

   .lc {
      flex-basis: 46%
   }

   .film {
      flex-basis: 28%
   }

   .sheet {
      left: 50%;
      right: auto;
      width: min(620px, 100%);
      transform: translate(-50%, 104%)
   }

   .sheet.open {
      transform: translate(-50%, 0)
   }
}

@media (min-width:1000px) {
   :root {
      --gut: 48px
   }

   section {
      padding-block: 128px
   }

   .nl {
      display: flex;
      gap: 30px;
      margin-left: auto;
      margin-right: 18px
   }

   .nl a {
      font-size: 14px;
      color: var(--mist);
      text-decoration: none;
      transition: color .3s
   }

   .nl a:hover {
      color: var(--ivory)
   }

   .hero {
      min-height: 100svh;
      display: flex;
      align-items: flex-end;
      padding: 120px 0 72px
   }

   .hero-img {
      position: absolute;
      inset: 0;
      height: auto;
      min-height: 0
   }

   .hero-img img {
      object-position: 50% 55%
   }

   .hero-img::after {
      background: linear-gradient(90deg, rgba(12, 24, 48, .88) 0%, rgba(12, 24, 48, .45) 48%, rgba(12, 24, 48, .1) 100%), linear-gradient(180deg, rgba(12, 24, 48, .5) 0%, transparent 22%, transparent 70%, var(--night) 100%)
   }

   .hero .wrap {
      margin-top: 0
   }

   .cue {
      display: block;
      position: absolute;
      z-index: 2;
      right: var(--gut);
      bottom: 72px;
      width: 1px;
      height: 64px;
      background: linear-gradient(var(--champ), transparent)
   }

   .ledger .wrap,
   .brief .wrap,
   .city .wrap {
      display: grid;
      grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
      gap: 40px;
      align-items: start
   }

   .ledger .wrap{
      grid-template-columns: unset
   }

   .ledger .wrap .row{
      align-items: center;
   }

   .ledger .rows,
   .letter,
   .map {
      margin-top: 0
   }

   .city .map {
      grid-row: 1/3
   }

   .lc {
      flex-basis: 31%;
      max-width: 370px
   }

   .rail {
      padding-inline: max(var(--gut), calc((100vw - 1180px) / 2 + var(--gut)))
   }

   .desks {
      grid-template-columns: repeat(3, 1fr)
   }

   .word .wrap {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px
   }

   .qs {
      margin-top: 0
   }

   .film {
      flex-basis: 17%
   }

   .fl2 {
      grid-template-columns: repeat(4, 1fr)
   }

   #mbar {
      display: none
   }

   .foot {
      padding-bottom: 56px
   }

   .acc {
      /* max-width: 920px */
   }
}

@media (hover:hover) {
   .btn:hover {
      background: #E6D6A6
   }

   .btn.dark:hover {
      background: #1B3157
   }

   .fp:hover {
      border-color: var(--champ);
      color: var(--ivory)
   }

   .fp.on:hover {
      color: var(--night)
   }

   .chip:hover {
      border-color: var(--accent-p)
   }

   .guides a:hover,
   .geo a:hover {
      color: var(--champ)
   }
}

@media (prefers-reduced-motion:reduce) {
   html {
      scroll-behavior: auto
   }

   .hero-img img,
   h1 .l span,
   .hero .kick,
   .hero .sub,
   .hero .acts {
      transition: none !important;
      transform: none !important;
      opacity: 1 !important
   }

   .lc .fl {
      animation: none
   }

   .f-img {
      display: none
   }

   .f-txt {
      -webkit-transform: none;
      transform: none
   }

   .mqt {
      animation: none;
      flex-wrap: wrap;
      width: auto;
      justify-content: center
   }

   .mqt span:nth-child(n+32) {
      display: none
   }

   .mq.rev {
      display: none
   }

   .slot.flash,
   .slot.nudge {
      animation: none
   }

   .sheet,
   .menu,
   .menu nav a,
   #mbar,
   .ac-b {
      transition: none
   }
}

/* ===== Interior pages ===== */

/* ---- interior pages ---- */
.night {
   --ln: var(--nline);
   --tx2: var(--mist);
   --ac: var(--champ)
}

.paper {
   --ln: var(--paper-line);
   --tx2: var(--paper-muted);
   --ac: var(--accent-p)
}

.pghero {
   padding: 136px 0 64px
}

.pghero h1 {
   font-family: var(--fd);
   font-weight: 400;
   font-size: clamp(2.3rem, 9.4vw, 4.8rem);
   line-height: 1.06;
   letter-spacing: -.01em;
   max-width: 16ch;
   margin-top: 18px
}

.pghero .acts {
   margin-top: 28px;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 10px 24px
}

.crumbs {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   font-size: 13.5px;
   color: var(--mist)
}

.crumbs a {
   text-decoration: none;
   color: var(--champ)
}

.sec-h {
   font-family: var(--fd);
   font-weight: 400;
   font-size: clamp(1.9rem, 8vw, 3.1rem);
   line-height: 1.1;
   max-width: 18ch
}

.prose {
   max-width: 64ch
}

.prose p {
   font-size: 17px;
   line-height: 1.78;
   color: var(--tx2)
}

.prose p+p {
   margin-top: 1.05em
}

.prose b,
.prose strong {
   color: inherit;
   font-weight: 600
}

.paper .prose b,
.paper .prose strong {
   color: var(--on-paper)
}

.night .prose b {
   color: var(--ivory)
}

.prose h2,
.prose h3 {
   font-family: var(--fd);
   font-weight: 400;
   font-size: 1.65rem;
   line-height: 1.25;
   margin: 1.5em 0 .5em
}

.prose ul {
   margin: 1em 0 0 1.2em;
   color: var(--tx2)
}

.prose li {
   margin-top: .4em;
   line-height: 1.7
}

.list {
   list-style: none;
   margin-top: 30px;
   border-bottom: 1px solid var(--ln)
}

.list>li,
.list>article {
   border-top: 1px solid var(--ln);
   padding: 24px 0
}

.list h3 {
   font-family: var(--fd);
   font-weight: 400;
   font-size: 1.45rem;
   line-height: 1.25
}

.list p {
   margin-top: 8px;
   color: var(--tx2);
   max-width: 60ch
}

.stp {
   list-style: none;
   margin-top: 30px;
   border-bottom: 1px solid var(--ln)
}

.stp li {
   display: grid;
   grid-template-columns: 48px 1fr;
   gap: 14px;
   padding: 22px 0;
   border-top: 1px solid var(--ln)
}

.stp .n {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 34px;
   height: 34px;
   border: 1px solid var(--ac);
   border-radius: 50%;
   font-family: var(--fb);
   font-size: 14px;
   font-weight: 600;
   color: var(--ac);
   margin-top: 2px
}

.stp h3 {
   font-family: var(--fd);
   font-weight: 400;
   font-size: 1.4rem;
   line-height: 1.25
}

.stp p {
   margin-top: 6px;
   color: var(--tx2);
   max-width: 56ch
}

.acc.faq .ac-h {
   grid-template-columns: 1fr 30px
}

.acc.faq .ac-b p {
   padding-left: 0
}

.paper .acc,
.paper .ac {
   border-color: var(--paper-line)
}

.paper .ac-h small,
.paper .ac-b p {
   color: var(--paper-muted)
}

.paper .pm {
   border-color: var(--paper-line)
}

.paper .pm::before,
.paper .pm::after {
   background: var(--accent-p)
}

.paper .guides,
.paper .guides li {
   border-color: var(--paper-line)
}

.paper .guides .chev {
   color: var(--accent-p)
}

.paper .guides a:hover {
   color: var(--accent-p)
}

.lz {
   border-top: 1px solid var(--ln);
   padding: 34px 0;
   scroll-margin-top: 84px
}

.lz:last-child {
   border-bottom: 1px solid var(--ln)
}

.lz .ic {
   width: 34px;
   height: 34px;
   color: var(--champ)
}

.lz h2 {
   font-family: var(--fd);
   font-weight: 400;
   font-size: clamp(1.6rem, 6.8vw, 2.3rem);
   line-height: 1.15;
   margin-top: 16px
}

.lz .o {
   margin-top: 6px;
   font-size: 15px;
   color: var(--champ)
}

.lz .t {
   margin-top: 14px;
   color: var(--mist);
   max-width: 62ch;
   font-size: 16.5px;
   line-height: 1.72
}

.lz .aa {
   margin-top: 22px;
   display: flex;
   flex-wrap: wrap;
   gap: 10px 22px;
   align-items: center
}

.geo2 {
   display: grid;
   gap: 12px;
   margin-top: 30px
}

.gcard {
   background: var(--sheet);
   border: 1px solid var(--paper-line);
   padding: 26px 22px;
   scroll-margin-top: 84px
}

.gcard h3 {
   font-family: var(--fd);
   font-weight: 400;
   font-size: 1.55rem
}

.gcard p {
   margin-top: 8px;
   color: var(--paper-muted)
}

.gcard .lnk {
   margin-top: 12px
}

.grp {
   margin-top: 52px
}

.grp:first-child {
   margin-top: 0
}

.grp-h {
   font-family: var(--fd);
   font-weight: 400;
   font-size: clamp(1.6rem, 6.6vw, 2.3rem)
}

.lrows {
   list-style: none;
   margin-top: 18px;
   border-bottom: 1px solid var(--ln)
}

.lrows li {
   border-top: 1px solid var(--ln)
}

.lrows a {
   display: grid;
   grid-template-columns: 1fr 16px;
   gap: 14px;
   align-items: center;
   padding: 17px 0;
   text-decoration: none
}

.lrows b {
   display: block;
   font-family: var(--fd);
   font-weight: 400;
   font-size: 1.25rem
}

.lrows span span {
   display: block;
   margin-top: 3px;
   font-size: 14px;
   color: var(--tx2);
   line-height: 1.5
}

.lrows .chev {
   width: 16px;
   height: 16px;
   color: var(--ac)
}

.inf .tag {
   display: inline-flex;
   align-items: center;
   min-height: 28px;
   padding: 0 12px;
   border: 1px solid var(--nline);
   border-radius: 999px;
   font-size: 12.5px;
   font-weight: 500;
   color: var(--champ)
}

.inf h3 {
   margin-top: 14px
}

.inf .rp {
   margin-top: 12px;
   font-size: 14px;
   font-weight: 500;
   color: var(--champ)
}

.offs {
   display: grid;
   gap: 12px;
   margin-top: 30px
}

.off {
   background: var(--sheet);
   border: 1px solid var(--paper-line);
   padding: 26px 22px
}

.off h3 {
   font-family: var(--fd);
   font-weight: 400;
   font-size: 1.5rem;
   margin-top: 6px
}

.off p {
   margin-top: 10px;
   color: var(--paper-muted);
   line-height: 1.7;
   font-size: 15.5px
}

.off a {
   color: var(--on-paper)
}

.note {
   margin-top: 16px;
   font-size: 14px;
   color: var(--tx2)
}

.note a {
   color: inherit
}

.fdr {
   display: grid;
   gap: 56px;
   margin-top: 40px
}

.fdr figure {
   position: relative;
   aspect-ratio: 3/4;
   max-width: 420px;
   overflow: hidden;
   background: var(--harbour)
}

.fdr figure img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   filter: saturate(.9) contrast(1.03)
}

.fdr figure::after {
   content: '';
   position: absolute;
   inset: 9px;
   border: 1px solid rgba(217, 196, 138, .34);
   pointer-events: none
}

.fdr figure .mono {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: var(--fd);
   font-size: 3.2rem;
   color: var(--champ)
}

.fdr blockquote {
   margin-top: 24px
}

.fdr blockquote p {
   font-family: var(--fd);
   font-size: clamp(1.5rem, 6.2vw, 2.1rem);
   line-height: 1.3
}

.fdr blockquote footer {
   margin-top: 14px;
   color: var(--mist);
   max-width: 44ch
}

.fdr cite {
   display: block;
   margin-top: 10px;
   font-style: normal;
   font-weight: 600;
   font-size: 14px;
   color: var(--champ)
}

.vid {
   position: relative;
   aspect-ratio: 16/9;
   max-width: 900px;
   margin-top: 30px;
   background: linear-gradient(165deg, #1C3B66, #0A1528);
   border: 1px solid rgba(217, 196, 138, .34);
   cursor: pointer;
   overflow: hidden
}

.vid svg {
   position: absolute;
   left: 50%;
   top: 50%;
   width: 56px;
   height: 56px;
   margin: -28px 0 0 -28px;
   color: var(--ivory)
}

.vid iframe {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   border: 0
}

.map2 {
   margin-top: 32px;
   max-width: 520px;
   border: 1px solid rgba(217, 196, 138, .38);
   background: #1B2A4A
}

.roles {
   margin-top: 34px
}

.dep-h {
   font-size: 14px;
   font-weight: 600;
   color: var(--accent-p);
   margin-top: 40px
}

.dep-h:first-child {
   margin-top: 0
}

.role {
   display: grid;
   grid-template-columns: 1fr auto;
   gap: 14px;
   align-items: center;
   min-height: 64px;
   padding: 16px 0;
   border-top: 1px solid var(--paper-line);
   text-decoration: none;
   color: var(--on-paper)
}

.dep:last-child .role:last-child {
   border-bottom: 1px solid var(--paper-line)
}

.role b {
   display: block;
   font-family: var(--fd);
   font-weight: 400;
   font-size: 1.25rem;
   line-height: 1.25
}

.role .loc {
   display: block;
   margin-top: 2px;
   font-size: 14px;
   color: var(--paper-muted)
}

.role .go {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-size: 14px;
   font-weight: 600;
   color: var(--accent-p);
   white-space: nowrap
}

.role .go .chev {
   width: 14px;
   height: 14px
}

.mail-line {
   margin-top: 22px;
   font-size: 15px;
   color: var(--mist)
}

.mail-line a {
   color: var(--champ);
   font-weight: 600
}

.cl {
   padding-block: 96px
}

.cl .acts {
   margin-top: 28px;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 10px 24px
}

.cl .crest {
   width: 60px;
   height: 60px;
   margin-bottom: 26px
}

.paper.cl .lede {
   color: var(--paper-muted)
}

.art-acts {
   margin-top: 34px;
   display: flex;
   flex-wrap: wrap;
   gap: 10px 24px;
   align-items: center
}

@media (hover:hover) {

   .role:hover b,
   .lrows a:hover b {
      color: var(--ac)
   }
}

@media (min-width:1000px) {
   .pghero {
      padding: 180px 0 88px
   }

   .offs,
   .geo2 {
      grid-template-columns: 1fr 1fr
   }

   .fdr {
      grid-template-columns: 1fr 1fr;
      gap: 64px
   }

   .lrows {
      columns: 2;
      column-gap: 48px;
      border-bottom: 0
   }

   .lrows li {
      break-inside: avoid
   }

   .list.two {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 48px;
      border-bottom: 0
   }

   .list.two>* {
      border-bottom: 1px solid var(--ln)
   }
}

/* ===== Awards page ===== */
.aw-hero {
   padding: 138px 0 20px
}

.aw-hero .ic {
   width: 64px;
   height: 64px;
   margin-bottom: 24px
}

.aw-hero h1 {
   font-size: clamp(2.35rem, 9.8vw, 5rem);
   max-width: 13ch;
   margin-top: 0
}

.aw-body {
   padding-top: 28px
}

.aw-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 28px 14px;
   margin-top: 30px
}

.aw {
   display: block;
   width: 100%;
   text-align: left;
   color: inherit;
   align-self: start
}

.aw.feat {
   grid-column: 1/-1
}

.aw-ph {
   display: block;
   position: relative;
   aspect-ratio: 4/5;
   overflow: hidden;
   background: linear-gradient(165deg, #1C3B66 0%, #10233F 56%, #0A1528 100%)
}

.aw.feat .aw-ph {
   aspect-ratio: 4/4
}

.aw-ph img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   filter: saturate(.93) contrast(1.04);
   transition: transform .9s var(--ease)
}

.aw-ph::after {
   content: '';
   position: absolute;
   inset: 8px;
   border: 1px solid rgba(217, 196, 138, .34);
   pointer-events: none;
   z-index: 2
}

.plq {
   position: absolute;
   inset: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 12px;
   padding: 20px;
   text-align: center
}

.plq i {
   display: block;
   width: 40px;
   height: 40px;
   background: url(assets/crest.png) center/contain no-repeat
}

.plq b {
   display: block;
   font-family: var(--fd);
   font-weight: 400;
   font-size: 1.08rem;
   line-height: 1.25;
   color: var(--ivory);
   max-width: 14ch
}

.aw.feat .plq i {
   width: 60px;
   height: 60px
}

.aw.feat .plq b {
   font-size: 1.75rem
}

.aw-cap {
   display: block;
   margin-top: 12px
}

.aw-cap .by {
   display: block;
   font-size: 12.5px;
   font-weight: 500;
   color: var(--champ)
}

.aw-cap .t {
   display: block;
   font-family: var(--fd);
   font-weight: 400;
   font-size: 1.1rem;
   line-height: 1.3;
   margin-top: 3px
}

.aw.feat .aw-cap .t {
   font-size: 1.65rem
}

.aw-cap .mt {
   display: block;
   font-size: 13px;
   color: var(--mist);
   margin-top: 4px
}

.yr {
   grid-column: 1/-1;
   font-family: var(--fd);
   font-size: 2.2rem;
   line-height: 1;
   color: var(--champ);
   border-top: 1px solid var(--nline);
   padding-top: 22px;
   margin-top: 8px
}

.lb {
   position: fixed;
   inset: 0;
   z-index: 190;
   background: var(--night);
   display: flex;
   flex-direction: column;
   padding: calc(env(safe-area-inset-top, 0px) + 64px) var(--gut) calc(env(safe-area-inset-bottom, 0px) + 22px);
   opacity: 0;
   visibility: hidden;
   transition: opacity .35s, visibility .35s
}

.lb.open {
   opacity: 1;
   visibility: visible
}

.lb-x {
   position: absolute;
   top: calc(env(safe-area-inset-top, 0px) + 12px);
   right: var(--gut);
   min-height: 44px;
   font-size: 14px;
   font-weight: 500;
   color: var(--ivory)
}

.lb-ph {
   position: relative;
   flex: 1;
   min-height: 0;
   display: flex;
   align-items: center;
   justify-content: center
}

.lb-ph img {
   max-width: 100%;
   max-height: 100%;
   object-fit: contain
}

.lb-ph .plq {
   position: relative;
   width: 100%;
   aspect-ratio: 4/5;
   max-height: 100%;
   background: linear-gradient(165deg, #1C3B66, #0A1528);
   border: 1px solid rgba(217, 196, 138, .34)
}

.lb-cap {
   margin-top: 18px
}

.lb-cap .by {
   font-size: 13px;
   font-weight: 500;
   color: var(--champ)
}

.lb-cap h3 {
   font-family: var(--fd);
   font-weight: 400;
   font-size: 1.6rem;
   line-height: 1.25;
   margin-top: 4px
}

.lb-cap .mt {
   font-size: 14px;
   color: var(--mist);
   margin-top: 4px
}

.lb-nav {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: 16px;
   font-size: 14px;
   color: var(--mist)
}

.lb-nav button {
   min-height: 44px;
   min-width: 64px;
   font-weight: 500;
   color: var(--champ)
}

.why .h2 {
   max-width: 20ch
}

.why .team {
   margin-top: 36px;
   font-family: var(--fd);
   font-size: clamp(1.45rem, 6vw, 2.1rem);
   line-height: 1.3;
   max-width: 22ch;
   color: var(--on-paper)
}

.why .btn {
   margin-top: 30px
}

@media (hover:hover) {
   .aw:hover .aw-ph img {
      transform: scale(1.04)
   }

   .aw:hover .t {
      color: var(--champ)
   }
}

@media (min-width:1000px) {
   .aw-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 40px 24px
   }

   .aw.feat {
      grid-column: 1/3
   }

   .aw.feat .aw-ph {
      aspect-ratio: 4/4
   }

   .aw-hero {
      padding-top: 170px
   }
}

@media (prefers-reduced-motion:reduce) {
   .lb {
      transition: none
   }

   .aw-ph img {
      transition: none
   }
}


/* =========================================================
   Insights article detail page
   ========================================================= */
.blog-hero .blog-kicker,
.blog-kicker {
   font-size: .7rem;
   letter-spacing: .16em;
   text-transform: uppercase;
   color: var(--champ);
   margin: 0 0 16px
}

.blog-hero h1 {
   max-width: 900px
}

.blog-meta {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   align-items: center;
   margin-top: 24px;
   color: var(--muted);
   font-size: .78rem;
   letter-spacing: .04em
}

.blog-cover-section {
   padding: 0 0 72px
}

.blog-cover {
   display: block;
   width: 100%;
   max-height: 580px;
   /* aspect-ratio: 16/7; */
   object-fit: cover;
   background: var(--navy);
}

.blog-article {
   padding-top: clamp(44px, 7vw, 96px);
   padding-bottom: clamp(54px, 8vw, 110px)
}

.blog-body-wrap {
   /* max-width: 900px */
}

.blog-body {
   /* max-width: 740px; */
   margin: 0 auto
}

.blog-copy-section {
   margin: 0 0 42px
}

.blog-copy-section h2 {
   font-family: var(--fd);
   font-size: clamp(1.5rem, 2.5vw, 2.15rem);
   font-weight: 400;
   line-height: 1.2;
   margin: 0 0 18px;
   color: var(--ink)
}

.blog-copy-section p {
   font-size: 1rem;
   line-height: 1.9;
   color: var(--body);
   margin: 0 0 18px
}


.blog-copy-section blockquote {
  margin: 32px 0;
  padding: 24px 28px;
  border-left: 3px solid #B89B66;
  background: #F8F6F2;
  color: #29251F;
  font-family: "Prata", serif;
  font-size: 21px;
  line-height: 1.7;
}

.blog-copy-section blockquote p {
  margin: 0;
}

.blog-copy-section ul, .blog-copy-section ol{
   margin: 0px 0px 18px 18px
}

.blog-disclaimer {
   max-width: 740px;
   margin: 44px auto 0;
   padding-top: 22px;
   border-top: 1px solid var(--paper-line);
   font-size: .78rem;
   line-height: 1.7;
   color: var(--muted)
}

.blog-pagination-section {
   padding-top: clamp(48px, 7vw, 90px);
   padding-bottom: clamp(48px, 7vw, 90px)
}

.blog-pagination-heading {
   margin-bottom: 26px
}

.blog-pagination {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 16px
}

.blog-neighbour {
   display: flex;
   min-height: 160px;
   flex-direction: column;
   align-items: flex-start;
   justify-content: space-between;
   gap: 18px;
   padding: 24px;
   border: 1px solid var(--nline);
   color: var(--ntext);
   text-decoration: none;
   transition: border-color .2s, background .2s
}

.blog-neighbour:hover {
   border-color: var(--champ);
   background: rgba(255, 255, 255, .025)
}

.blog-neighbour small {
   font-size: .68rem;
   letter-spacing: .13em;
   text-transform: uppercase;
   color: var(--champ)
}

.blog-neighbour b {
   font-family: var(--fd);
   font-size: clamp(1.15rem, 2vw, 1.65rem);
   font-weight: 400;
   line-height: 1.3
}

.blog-neighbour>span {
   font-size: .78rem;
   color: var(--muted)
}

.blog-neighbour.is-empty {
   opacity: .55
}

.blog-back {
   margin-top: 28px
}

#blog-not-found[hidden],
#blog-article-content[hidden],
#blog-pagination[hidden] {
   display: none !important
}

@media(max-width:640px) {
   .blog-cover-section {
      padding-bottom: 42px
   }

   .blog-cover {
      aspect-ratio: 4/3
   }

   .blog-pagination {
      grid-template-columns: 1fr
   }

   .blog-neighbour {
      min-height: 132px;
      padding: 20px
   }

   .blog-copy-section {
      margin-bottom: 34px
   }

   .blog-copy-section p {
      font-size: .96rem
   }
}