/* From the design's own <style>, verbatim. */
body{margin:0;background:#EFE9DC;font-family:Archivo,"Helvetica Neue",Helvetica,sans-serif;color:#0E2A24;-webkit-font-smoothing:antialiased}
a{color:#8E7B5A;text-decoration:none}a:hover{color:#0E2A24}
input[type=range]{-webkit-appearance:none;appearance:none;height:2px;background:rgba(14,42,36,.25);outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#D96838;cursor:grab;border:2px solid #EFE9DC}
@keyframes strMarq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes strDash{0%{background-position:0 0}100%{background-position:44px 0}}

/* Not in the design. The real lockup PNG carries the retired tagline under the wordmark: clip that row, keep the file real. */
.logo { clip-path: polygon(0 0, 100% 0, 100% 72.5%, 36% 72.5%, 36% 100%, 0 100%); }
.logo-ink { filter: brightness(0); }
[role=button]:focus-visible, a:focus-visible { outline: 2px solid #D96838; outline-offset: 3px; }

/* Stat strip, one line that wraps around (see 3f in tools/build_site.py). Each copy is as wide as the strip, or as
   wide as its own text when that is longer, so the track's -50% is exactly one period. */
.strip-box { container-type: inline-size; }
.strip > span { flex: none; box-sizing: border-box; min-width: 100vw; min-width: 100cqw; padding-right: 28px; }

/* Top bar mark: turns while hovered. Each turn eases in and out, and app.js lets the turn in progress finish
   when the mouse leaves, so it always comes to rest upright instead of snapping back. */
.mark img { transform-origin: 50% 50%; }
.mark.spin img { animation: mark-spin 1.1s cubic-bezier(.45,0,.2,1) infinite; }
@keyframes mark-spin { to { transform: rotate(360deg); } }

/* Top bar: pinned, slides away far down the page, back on the first scroll up (app.js toggles .away). */
#top { transition: transform .35s cubic-bezier(.16,1,.3,1); }
#top.away { transform: translateY(-100%); }
/* Link targets land just under the bar instead of behind it (app.js measures the bar into --bar). */
section[id], #have-stock, #need-stock, #broker { scroll-margin-top: var(--bar, 66px); }

/* Waitlist form in section 7. Same ink, paper and type as the design. */
.join-form, .done { max-width: 560px; margin: 0 auto; text-align: left; border: 1px solid #0E2A24; padding: clamp(20px,3vw,32px); }
.join-form[hidden], .done[hidden] { display: none; }
.roles { border: 0; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.roles legend, .field > label { display: block; padding: 0; margin-bottom: 10px; font: 600 13px/1.3 Archivo,sans-serif; }
.roles label { flex: 1 1 auto; position: relative; cursor: pointer; }
.roles input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.roles span { display: block; text-align: center; border: 1px solid #0E2A24; padding: 14px 12px; font: 500 11px/1 'IBM Plex Mono',monospace; letter-spacing: .12em; text-transform: uppercase; transition: background .2s, color .2s; }
.roles input:checked + span { background: #0E2A24; color: #EFE9DC; }
.roles input:focus-visible + span { outline: 2px solid #0E2A24; outline-offset: 3px; }
.field-row { display: flex; flex-wrap: wrap; gap: 8px; }
.field input { flex: 1 1 220px; min-width: 0; border: 1px solid #0E2A24; border-radius: 0; background: #EFE9DC; color: #0E2A24; padding: 14px; font: 400 16px/1.2 Archivo,sans-serif; }
.field input::placeholder { color: rgba(14,42,36,.6); }
.field input:focus-visible, #submit:focus-visible { outline: 2px solid #0E2A24; outline-offset: 3px; }
.field input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px #0E2A24; }
#submit { border: 1px solid #0E2A24; background: #0E2A24; color: #EFE9DC; padding: 18px 30px; font: 500 11.5px/1 'IBM Plex Mono',monospace; letter-spacing: .16em; cursor: pointer; transition: background .2s, color .2s; }
#submit:hover { background: #EFE9DC; color: #0E2A24; }
#submit:disabled { opacity: .6; cursor: default; }
.note { margin: 14px 0 0; font: 400 13px/1.5 Archivo,sans-serif; }
.note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.error { margin: 8px 0 0; min-height: 1.5em; font: 600 14px/1.5 Archivo,sans-serif; }
.done h3 { margin: 0 0 10px; font: 400 28px/1 'Archivo Black',Archivo,sans-serif; letter-spacing: -.03em; text-transform: uppercase; }
.done p { margin: 0; font: 400 16px/1.5 Archivo,sans-serif; }
@media (prefers-reduced-motion: reduce) { #top { transition: none; } .mark.spin img { animation: none; } .strip { animation: none !important; } }

/* Section 06, the story pile (see 3g in tools/build_site.py). Every photo is 16:9 on every screen. Each card carries
   its own place as variables: --x --y centre in percent, --r tilt, --s size, --ax how far the lifted photo is pushed
   inward so the screen edge never cuts it. z-index:0 keeps the lifted photo under the pinned top bar. */
.story { position: relative; z-index: 0; width: 100%; aspect-ratio: 3.2 / 1; outline: none; touch-action: pan-y; cursor: ew-resize; }
.story-card { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 21%; aspect-ratio: 16 / 9; box-sizing: border-box; margin: 0; overflow: hidden; pointer-events: none;
  transform: translate(-50%,-50%) rotate(calc(var(--r) * 1deg)) scale(var(--s)); z-index: var(--z); background: var(--bg); color: var(--fg);
  transition: transform .55s cubic-bezier(.16,1,.3,1), filter .4s, opacity .5s, box-shadow .4s; box-shadow: 0 6px 22px rgba(0,0,0,.35), 0 0 0 1px rgba(239,233,220,.14); }
.story-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.story-card .tag { position: absolute; left: 6%; top: 8%; right: 6%; font: 400 clamp(6px,.62vw,10px)/1.6 'IBM Plex Mono',monospace; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.story-card .num { position: absolute; left: 6%; bottom: 8%; font: 600 clamp(10px,1vw,16px)/1 'IBM Plex Mono',monospace; letter-spacing: .2em; text-shadow: 0 1px 4px rgba(0,0,0,.55); }
.story.has-active .story-card { filter: brightness(.55) saturate(.8); }
.story.has-active .story-card.active { filter: none; z-index: 60; transform: translate(calc(-50% + var(--ax) * 1%),-50%) rotate(0deg) scale(1.75); box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(239,233,220,.22); }
/* Thrown onto the table one after another when the section arrives (app.js sets and lifts .waiting). */
.story.waiting .story-card { opacity: 0; transform: translate(calc(-50% + var(--fx) * 1vw), calc(-50% + var(--fy) * 1vw)) rotate(calc(var(--r) * 3deg)) scale(1.3); }
.story-bar { display: flex; align-items: center; gap: 18px; padding: clamp(18px,2vw,30px) clamp(16px,4vw,64px) 0; min-height: 74px; box-sizing: border-box; }
.story-arrow { width: 46px; height: 46px; flex: none; padding: 0; border-radius: 50%; border: 1px solid rgba(239,233,220,.5); background: none; color: #EFE9DC; font-size: 16px; cursor: pointer; transition: background .2s, color .2s; }
.story-arrow:hover { background: #EFE9DC; color: #0E2A24; }
.story-arrow:focus-visible, .story:focus-visible { outline: 2px solid #C0A25E; outline-offset: 4px; }
.story-count, .story-caption { font: 400 10.5px/1.6 'IBM Plex Mono',monospace; letter-spacing: .18em; text-transform: uppercase; }
.story-count { color: #C0A25E; flex: none; }
.story-caption { color: rgba(239,233,220,.78); }
.story-track { flex: 1; height: 2px; background: rgba(239,233,220,.16); position: relative; min-width: 60px; }
.story-track i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p,0) * 100%); background: linear-gradient(90deg,#16495A,#D96838 70%,#C0A25E); transition: width .45s cubic-bezier(.16,1,.3,1); }
/* Phone: the same photographs as a deck. app.js uses the same 760px. */
@media (max-width: 760px) {
  .story { aspect-ratio: 1.25 / 1; cursor: grab; }
  .story-card { left: 50%; top: 50%; width: 78%; transform: translate(-50%,-50%) rotate(calc(var(--r) * .25deg)) scale(1); z-index: calc(40 - var(--i)); }
  .story.has-active .story-card { filter: brightness(.6); }
  .story.has-active .story-card.active { transform: translate(-50%,-50%) rotate(0deg) scale(1.06); }
  .story-card.gone { transform: translate(-190%,-46%) rotate(-22deg) scale(.9); opacity: 0; }
  .story-card .tag { font-size: 9px; } .story-card .num { font-size: 14px; }
  .story-caption { display: none; }
}
@media (prefers-reduced-motion: reduce) { .story-card, .story-track i { transition: none; } }

/* Section 06, the film (see 3n in tools/build_site.py): 60% of the width, her serif line beside it, no controls;
   a click toggles the sound; REPLAY at the end; a mini-player bottom right while you read further down. */
.film-row { display: grid; grid-template-columns: minmax(0,3fr) minmax(0,2fr); gap: clamp(24px,3vw,48px); align-items: end; padding: 0 clamp(16px,4vw,64px) clamp(56px,7vw,110px); }
.film-row > div[data-reveal] { font-size: clamp(28px,2.6vw,42px) !important; }
.film-box { position: relative; min-width: 0; aspect-ratio: 16 / 9; background: #071916; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.film-box video, .film-mini video { display: block; width: 100%; height: 100%; object-fit: cover; background: #071916; cursor: pointer; }
.film-box video:focus-visible { outline: 2px solid #C0A25E; outline-offset: 4px; }
.film-sound { position: absolute; left: 18px; bottom: 18px; padding: 9px 12px; background: rgba(14,42,36,.72); color: #EFE9DC; font: 500 9.5px/1 'IBM Plex Mono',monospace; letter-spacing: .18em; pointer-events: none; transition: opacity .3s; }
.film-box.sound-on .film-sound { opacity: 0; }
.film-box:hover .film-sound { opacity: 1; }
.film-box.away .film-sound, .film-box.ended .film-sound { display: none; }
.film-replay { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: flex; align-items: center; justify-content: center; width: 112px; height: 112px; border-radius: 50%; border: 1px solid rgba(239,233,220,.6); background: rgba(14,42,36,.55); color: #EFE9DC; cursor: pointer; font: 500 10.5px/1 'IBM Plex Mono',monospace; letter-spacing: .2em; transition: background .2s, color .2s; }
.film-replay:hover, .film-replay:focus-visible { background: #EFE9DC; color: #0E2A24; }
.film-replay:focus-visible { outline: 2px solid #C0A25E; outline-offset: 4px; }
.film-replay[hidden] { display: none; }
.film-mini { position: fixed; right: 18px; bottom: 18px; z-index: 60; width: min(380px, calc(100vw - 36px)); background: #0E2A24; box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(239,233,220,.18); }
.film-mini { animation: film-mini-in .5s cubic-bezier(.16,1,.3,1); }
.film-mini[hidden] { display: none; }
@keyframes film-mini-in { from { opacity: 0; transform: translateY(24px) scale(.96); } }
.film-mini-slot { aspect-ratio: 16 / 9; background: #071916; }
.film-mini-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 12px; }
.film-mini-bar button { border: 0; background: none; color: #EFE9DC; cursor: pointer; font: 500 9.5px/1 'IBM Plex Mono',monospace; letter-spacing: .18em; padding: 8px 10px; }
.film-mini-bar button:hover { color: #D96838; }
.film-mini-bar button:focus-visible { outline: 2px solid #C0A25E; outline-offset: 2px; }
#film-mini-close { font: 400 20px/1 Archivo,sans-serif; }
@media (max-width: 900px) { .film-row { grid-template-columns: 1fr; } .film-mini { width: min(260px, calc(100vw - 32px)); right: 12px; bottom: 12px; } }
@media (prefers-reduced-motion: reduce) { .film-replay, .film-mini-bar button { transition: none; } .film-mini { animation: none; } }

/* Section 02, the deck (see 3o in tools/build_site.py). Her three cards keep their inline styles; these wrappers pin
   the section and stack the cards. app.js sets --deck-h (the tallest card), --peek (the edges showing above) and
   moves each card with a transform. Narrow screens and reduced motion: nothing here applies, the list shows. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .deck { height: calc(100vh - var(--bar, 66px) + 170vh); }
  .deck-pin { position: sticky; top: var(--bar, 66px); height: calc(100vh - var(--bar, 66px)); padding-top: var(--peek, 70px); overflow: clip; }
  .deck-cards { position: relative; height: var(--deck-h, 700px); }
  .deck-cards > div { position: absolute; left: 0; right: 0; top: 0; margin: 0 !important; transform-origin: 50% 0; will-change: transform; box-shadow: 0 -10px 40px rgba(0,0,0,.3); }
  .deck-count { position: absolute; right: 0; bottom: 18px; display: flex; align-items: center; gap: 14px; font: 400 10.5px/1.6 'IBM Plex Mono',monospace; letter-spacing: .18em; color: #C0A25E; }
  .deck-count i { display: block; width: 28px; height: 2px; background: rgba(239,233,220,.2); }
  .deck-count i.on { background: #D96838; }
}
@media (max-width: 900px), (prefers-reduced-motion: reduce) { .deck-count { display: none; } }

/* Deal room, inspection photo (see 3h in tools/build_site.py): cropped by her box, a click opens the whole photograph. */
.inspect { position: relative; overflow: hidden; cursor: zoom-in; }
.inspect > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.inspect:hover > img, .inspect:focus-visible > img { transform: scale(1.04); }
.inspect > span { position: relative; color: #EFE9DC; text-shadow: 0 1px 4px rgba(0,0,0,.65); }
.lightbox { padding: 0; border: 0; background: none; overflow: visible; max-width: 94vw; max-height: 90vh; cursor: zoom-out; }
.lightbox::backdrop { background: rgba(14,42,36,.9); }
.lightbox[open] { animation: lightbox-in .45s cubic-bezier(.16,1,.3,1); }
.lightbox img { display: block; width: auto; height: auto; max-width: 94vw; max-height: 90vh; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.lightbox button { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid rgba(239,233,220,.6); background: rgba(14,42,36,.75); color: #EFE9DC; font: 400 20px/1 Archivo,sans-serif; cursor: pointer; }
.lightbox button:focus-visible { outline: 2px solid #C0A25E; outline-offset: 3px; }
@keyframes lightbox-in { from { opacity: 0; transform: scale(.9); } }
@media (prefers-reduced-motion: reduce) { .lightbox[open] { animation: none; } .inspect > img { transition: none; } }

/* The hero (see 3k in tools/build_site.py): one wide photograph, her words printed on its empty wall.
   Wide screens: the box is the full width, as tall as the mock-up's shape (2.15:1) but never past the first screen. The
   picture is anchored to the right, so the doors and the pillar sign always show and the wall is at least 39% of the
   width: that is the text column. Everything inside is sized from the box itself (cqw, cqh), so the words stay on the
   wall and above the floor line on a short laptop as on a tall monitor; this is why her sizes for the sentence and
   the buttons are overridden here (her words are not). The headline is Archivo at its narrowest width, weight 800. */
.hero { position: relative; overflow: hidden; background: #E9E2D3; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-eyebrow { display: flex; align-items: center; gap: 16px; font: 400 11px/1 'IBM Plex Mono',monospace; letter-spacing: .2em; }
.hero-eyebrow i { flex: 1; min-width: 24px; height: 1px; background: rgba(14,42,36,.6); }
.hero h1 { margin: 0; font-family: Archivo,sans-serif; font-stretch: 62%; font-weight: 800; line-height: .9; letter-spacing: -.01em; text-transform: uppercase; }
.hero-copy { color: #0E2A24; }
@media (min-width: 1101px) {
  .hero { container-type: size; width: 100%; height: clamp(520px, calc(100vw / 2.15), calc(100svh - var(--bar, 66px) - 42px)); }
  .hero-photo { position: absolute; inset: 0; z-index: 0; }
  .hero-photo img { object-position: 100% 50%; }
  .hero-copy { position: relative; z-index: 1; display: flex; flex-direction: column; box-sizing: border-box; width: 37.5cqw; height: 100%; padding: 6.5cqh 0 10.5cqh clamp(16px,4vw,64px); }
  .hero-eyebrow { margin-bottom: 5cqh; font-size: clamp(9.5px,.8cqw,11px); }
  .hero h1 { font-size: min(5.8cqw,12.2cqh); margin-bottom: 3.4cqh; }
  .hero-copy > p:first-of-type { font-size: clamp(15px,1.36cqw,19px) !important; margin-bottom: 3.4cqh !important; max-width: 30cqw !important; }
  .hero-copy > div:nth-of-type(2) { flex-wrap: nowrap !important; gap: 8px !important; margin-bottom: 2.6cqh !important; }
  .hero-copy > div:nth-of-type(2) a { padding: 2.1cqh 1cqw !important; font-size: clamp(9px,.76cqw,11px) !important; letter-spacing: .12em !important; white-space: nowrap; }
  .hero-copy > div:last-child { margin-top: auto !important; padding-top: 2cqh; }
}
/* Narrower than 1100 px the words cannot sit on the wall: they go on paper, above a 4:3 cut of the picture. */
@media (max-width: 1100px) {
  .hero-copy { padding: clamp(36px,8vw,64px) clamp(16px,4vw,64px) 36px; background-color: #ECE5D6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .06 0 0 0 0 .16 0 0 0 0 .14 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
  .hero-eyebrow { margin-bottom: clamp(26px,7vw,48px); }
  .hero h1 { font-size: clamp(52px,15.5vw,110px); margin-bottom: clamp(20px,5vw,32px); }
  .hero-copy > div:last-child { padding-top: 12px; }
  .hero-photo { display: block; aspect-ratio: 4 / 3; }
}

/* Section 04, three framed cards (see 3l). The 1px gaps of the grid are the frame lines. */
.terms-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: 1px; background: rgba(239,233,220,.24); border: 1px solid rgba(239,233,220,.24); }
.terms-card { display: flex; flex-direction: column; background: #0E2A24; padding: 24px clamp(18px,2vw,28px) 22px; min-width: 0; }
.terms-head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; font: 400 10.5px/1 'IBM Plex Mono',monospace; letter-spacing: .2em; color: rgba(239,233,220,.85); }
.terms-head span:first-child { font-size: 15px; letter-spacing: .08em; }
.terms-head i { flex: 1; height: 1px; background: rgba(239,233,220,.3); }
/* The three figures keep a sensible size on very wide screens: capped in width, and the routes have a fixed height
   (an SVG with a viewBox is as tall as it is wide unless told otherwise, which made the curves huge at 2500 px). */
.terms-fig { margin: 26px 0 28px; max-width: 600px; }
.terms-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; font: 400 9.5px/1.7 'IBM Plex Mono',monospace; letter-spacing: .16em; color: rgba(239,233,220,.7); }
.terms-route { display: grid; grid-template-columns: auto minmax(40px,1fr) auto; grid-template-rows: minmax(0,1fr); box-sizing: border-box; height: clamp(150px,9vw,190px); border: 1px solid rgba(239,233,220,.24); padding: 18px 16px; font: 400 9.5px/1.7 'IBM Plex Mono',monospace; letter-spacing: .16em; color: rgba(239,233,220,.9); }
.route-box { align-self: center; position: relative; border: 1px solid rgba(239,233,220,.7); padding: 11px 13px; }
.route-box::after { content: ""; position: absolute; right: -17px; top: 50%; width: 7px; height: 7px; margin-top: -4px; border-radius: 50%; background: #C0A25E; }
.terms-route svg { width: 100%; height: 100%; min-height: 0; padding-left: 14px; box-sizing: border-box; overflow: visible; }
.terms-route path { fill: none; stroke: rgba(239,233,220,.6); stroke-width: 1; vector-effect: non-scaling-stroke; }
.terms-route path.dash { stroke-dasharray: 4 4; }
.terms-route ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(4,1fr); align-items: center; }
.terms-route li { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.terms-route li::before { content: ""; flex: none; width: 8px; height: 8px; border: 1px solid #C0A25E; }
.terms-tiles { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(10px,1.4vw,22px); }
.terms-tiles figure { margin: 0; min-width: 0; }
.tile { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid rgba(239,233,220,.24); display: flex; align-items: center; justify-content: center; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tile-locked img { filter: blur(9px) saturate(.7) brightness(.75); transform: scale(1.25); }
.tile-locked svg { position: relative; }
.tile-open { border-style: dashed; border-color: rgba(239,233,220,.45); font: 300 22px/1 Archivo,sans-serif; color: rgba(239,233,220,.7); }
.terms-tiles figcaption { margin-top: 12px; text-align: center; font: 400 9px/1.7 'IBM Plex Mono',monospace; letter-spacing: .14em; color: rgba(239,233,220,.85); }
.terms-steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4,1fr); position: relative; font: 400 9px/1.7 'IBM Plex Mono',monospace; letter-spacing: .14em; color: rgba(239,233,220,.9); }
.terms-steps::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 11px; height: 1px; background: #C0A25E; }
.terms-steps li { position: relative; text-align: center; min-width: 0; }
.terms-steps li::before { content: ""; display: block; box-sizing: border-box; width: 23px; height: 23px; margin: 0 auto 14px; border-radius: 50%; border: 1.5px solid #C0A25E; background: #0E2A24; font: 700 12px/20px Archivo,sans-serif; color: #0E2A24; }
.terms-steps li.on::before { content: "\2713"; background: #C0A25E; }
.terms-foot3 { flex-wrap: wrap; }
.terms-foot3 > div { flex: 1 1 236px; }
.terms-side { margin-left: auto; display: flex; align-items: flex-end; gap: 16px; }
.terms-reach { border-left: 1px solid rgba(239,233,220,.24); padding-left: 16px; }

/* Section 7, the message box that TALK TO OUR TEAM opens (see 3m). */
#talk { cursor: pointer; transition: background .2s, color .2s; }
#talk:hover, #talk[aria-expanded="true"] { background: #0E2A24; color: #EFE9DC; }
#message-field { margin-bottom: 22px; }
.field[hidden] { display: none; }
.field textarea { display: block; width: 100%; box-sizing: border-box; min-height: 130px; resize: vertical; border: 1px solid #0E2A24; border-radius: 0; background: #EFE9DC; color: #0E2A24; padding: 14px; font: 400 16px/1.5 Archivo,sans-serif; }
.field textarea::placeholder { color: rgba(14,42,36,.6); }
.field textarea:focus-visible { outline: 2px solid #0E2A24; outline-offset: 3px; }