/* HotelRoomDisplay — public site. Paper and ink: black, white, grey only. */

:root {
  --paper: #f5f2ea;      /* warm off-white, the paper ground */
  --card: #ffffff;
  --ink: #20252a;        /* charcoal, body text */
  --navy: #102a43;       /* primary brand: headings, buttons, the mark */
  --navy-deep: #0b1f33;  /* button hover only */
  --gold: #b89b62;       /* premium detail, used twice on the whole site */
  --muted: #5a6672;
  --line: #e4dfd2;
  --line-strong: #d3ccba;
  --error: #a12622;      /* form errors only, always beside a written message */

  --wrap: 1060px;
  --gap: 28px;
  --section: 104px;

  color-scheme: light;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: "IBM Plex Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--navy);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

p { margin: 0; }

a { color: inherit; }

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

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

main { flex: 1 0 auto; }

/* ---------- layout ---------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: 32px;
}

.section { padding-block: var(--section); }
.section--tight { padding-block: 72px; }
.section + .section { border-top: 1px solid var(--line); }

.eyebrow {
  margin: 0 0 20px;
  padding-top: 22px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  position: relative;
}

/* the gold rule the leaflet puts above every heading */
.eyebrow::before,
.rule::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 38px;
  height: 3px;
  background: var(--gold);
}

.rule {
  position: relative;
  display: block;
  padding-top: 22px;
}

.lede {
  color: var(--muted);
  font-size: 19px;
  line-height: 1.65;
  max-width: 46ch;
}

.muted { color: var(--muted); }

/* ---------- header ---------- */

.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  min-height: 76px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.wordmark {
  color: var(--navy);
}

.wordmark__mark {
  display: block;
  flex: none;
  width: 9px;
  height: 14px;
}

.wordmark__mark .line { fill: var(--gold); }

.nav {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 15px;
}

.nav a {
  color: var(--muted);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
}

.nav a:hover { color: var(--ink); }

.nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--gold);
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 26px;
  border: 1px solid var(--navy);
  background: var(--navy);
  color: #ffffff;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover { background: var(--navy-deep); border-color: var(--navy-deep); }

.btn--ghost {
  background: transparent;
  color: var(--navy);
  border-color: var(--gold);
}

.btn--ghost:hover { background: transparent; border-color: var(--navy); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

/* ---------- hero ---------- */

.hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: start;
  padding-block: 16px 56px;
}

.hero h1 {
  font-size: clamp(32px, 4.2vw, 48px);
  max-width: 20ch;
}

.hero .lede { margin-top: 26px; }

/* ---------- screen caption ---------- */

.screen__caption {
  margin-top: 14px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}


/* ---------- steps ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  margin-top: 48px;
}

.step {
  padding-top: 22px;
  border-top: 1px solid var(--line-strong);
}

/* .step p also matches this element and outranks a lone class, so scope it */
.step .step__no {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--gold);
}

.step h3 {
  margin-top: 16px;
  font-size: 20px;
}

.step p {
  margin-top: 12px;
  color: var(--muted);
  font-size: 16px;
}

/* ---------- two column text ---------- */

.split {
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: 64px;
  align-items: start;
}

.split h2 {
  font-size: clamp(26px, 3vw, 34px);
  max-width: 18ch;
}

/* ---------- list of plain facts ---------- */

.facts {
  margin: 0;
  padding: 0;
  list-style: none;
}

.facts li {
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.facts li:first-child { border-top: 1px solid var(--line); }

.facts h3 { font-size: 18px; }

.facts p {
  margin-top: 8px;
  color: var(--muted);
  font-size: 16px;
  max-width: 60ch;
}

/* ---------- a picture set beside its text, on the hero's proportions ---------- */

.showcase {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
}

.showcase > figure { justify-self: end; }

/* the note belongs with the text here, not centred under the picture */
.showcase .screen__caption {
  margin-top: 28px;
  text-align: left;
  max-width: 46ch;
}

/* ---------- frame options, drawn over one real photograph ---------- */

/* Ten frames over the same room and the same screen. The switch is a hard cut,
   not a crossfade: `step-end` holds each layer's opacity until the next
   keyframe, so a frame appears and disappears between one paint and the next.
   Half a second each, ten frames, five seconds round.

   As with the day band the bottom layer never fades, so an opaque frame always
   sits under the stack and the page never shows through mid-switch. With cuts
   there is no partial opacity to blend at all, which is the point. */

.frame-cycle {
  margin: 0;
  width: 100%;
  max-width: 420px;
}

.photo__cycle--frames { aspect-ratio: 520 / 778; }

.photo__cycle--frames img:nth-child(1) { opacity: 1; }

.photo__cycle--frames img:nth-child(2) {
  opacity: 0;
  animation: frame-2 5s step-end infinite;
}

.photo__cycle--frames img:nth-child(3) {
  opacity: 0;
  animation: frame-3 5s step-end infinite;
}

.photo__cycle--frames img:nth-child(4) {
  opacity: 0;
  animation: frame-4 5s step-end infinite;
}

.photo__cycle--frames img:nth-child(5) {
  opacity: 0;
  animation: frame-5 5s step-end infinite;
}

.photo__cycle--frames img:nth-child(6) {
  opacity: 0;
  animation: frame-6 5s step-end infinite;
}

.photo__cycle--frames img:nth-child(7) {
  opacity: 0;
  animation: frame-7 5s step-end infinite;
}

.photo__cycle--frames img:nth-child(8) {
  opacity: 0;
  animation: frame-8 5s step-end infinite;
}

.photo__cycle--frames img:nth-child(9) {
  opacity: 0;
  animation: frame-9 5s step-end infinite;
}

.photo__cycle--frames img:nth-child(10) {
  opacity: 0;
  animation: frame-10 5s step-end infinite;
}

@keyframes frame-2 {
  0% { opacity: 0; }
  10% { opacity: 1; }
  20% { opacity: 0; }
}

@keyframes frame-3 {
  0% { opacity: 0; }
  20% { opacity: 1; }
  30% { opacity: 0; }
}

@keyframes frame-4 {
  0% { opacity: 0; }
  30% { opacity: 1; }
  40% { opacity: 0; }
}

@keyframes frame-5 {
  0% { opacity: 0; }
  40% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes frame-6 {
  0% { opacity: 0; }
  50% { opacity: 1; }
  60% { opacity: 0; }
}

@keyframes frame-7 {
  0% { opacity: 0; }
  60% { opacity: 1; }
  70% { opacity: 0; }
}

@keyframes frame-8 {
  0% { opacity: 0; }
  70% { opacity: 1; }
  80% { opacity: 0; }
}

@keyframes frame-9 {
  0% { opacity: 0; }
  80% { opacity: 1; }
  90% { opacity: 0; }
}

@keyframes frame-10 {
  0% { opacity: 0; }
  90% { opacity: 1; }
  100% { opacity: 0; }
}


/* ---------- presentation options, drawn the way the mark is drawn ---------- */

.setups {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  margin-top: 48px;
}

.setup { margin: 0; }

.setup__box {
  background: var(--card);
  border: 1px solid var(--line);
  padding: 20px;
}

.setup__box svg {
  display: block;
  width: 100%;
  height: auto;
}

/* the room around the display: furniture, walls, joinery */
.setup__box .ctx {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1;
}

/* the display itself, the one constant in every drawing */
.setup__box .unit {
  fill: none;
  stroke: var(--navy);
  stroke-width: 1.6;
}

.setup__box .screen-face { fill: var(--paper); stroke: none; }

/* two gold rules inside the frame, exactly as in the mark */
.setup__box .line { fill: var(--gold); }

/* a dimension line, the way it would appear on a drawing */
.setup__box .guide {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0.55;
}

.setup__box .tick {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1;
  opacity: 0.55;
}

.setup figcaption { padding-top: 18px; }

.setup h3 { font-size: 17px; }

.setup p {
  margin-top: 8px;
  color: var(--muted);
  font-size: 15px;
}

/* ---------- timeline ---------- */

.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  margin-top: 48px;
}

.timeline__mark {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--ink);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.timeline__mark strong { font-weight: 500; }
.timeline__mark span { color: var(--muted); letter-spacing: 0.04em; }

/* ---------- who it's for ---------- */

.audience {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  margin-top: 44px;
}

.audience div {
  padding: 24px 0 0;
  border-top: 1px solid var(--line-strong);
}

.audience h3 { font-size: 17px; }

.audience p {
  margin-top: 10px;
  color: var(--muted);
  font-size: 15px;
}

/* ---------- quiet call to action ---------- */

.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.cta h2 { font-size: clamp(24px, 3vw, 32px); max-width: 20ch; }

/* ---------- the email, in place of a form ---------- */

.mailto {
  margin-top: 32px;
  font-size: 22px;
  letter-spacing: -0.01em;
}

.mailto a {
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 3px;
}

.mailto a { color: var(--navy); }
.mailto a:hover { border-bottom-color: var(--navy); }

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 40px 0;
  font-size: 14px;
  color: var(--muted);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--ink); }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  :root { --section: 72px; }

  .hero {
    grid-template-columns: 1fr;
    gap: 48px;
    padding-block: 24px 56px;
  }

  .steps,
  .timeline,
  .audience { grid-template-columns: 1fr; gap: 32px; }

  .setups { grid-template-columns: repeat(2, 1fr); }

  .showcase { grid-template-columns: 1fr; gap: 40px; }
  .showcase > figure { justify-self: start; }

  .split { grid-template-columns: 1fr; gap: 32px; }

  /* stacked: the screen stays clearly narrower than the column, not just short of it */
  .screen { max-width: 380px; }
}

@media (max-width: 620px) {
  .wrap { padding-inline: 22px; }
  body { font-size: 16px; }
  .lede { font-size: 17px; }

  .site-header__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding-block: 18px;
  }

  .nav { gap: 20px; flex-wrap: wrap; }
  .setups { grid-template-columns: 1fr; }
  .btn-row .btn { flex: 1 1 auto; }

  /* on a phone it fills the text column exactly, whatever the handset width */
  .screen { max-width: none; }
}

/* ---------- small helpers ---------- */

.h-lg {
  font-size: clamp(26px, 3vw, 34px);
  max-width: 20ch;
}

.lede--wide { max-width: 56ch; }
.lede + .lede { margin-top: 20px; }
.lede--after-h { margin-top: 22px; }

/* ---------- footer links ---------- */

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

.site-footer__links a {
  color: inherit;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

/* ---------- legal pages ---------- */

.legal {
  max-width: 68ch;
  padding-block: 76px 96px;
}

.legal__title {
  font-size: clamp(30px, 4vw, 42px);
  max-width: 18ch;
}

.legal__meta {
  margin-top: 18px;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.legal__intro {
  margin-top: 28px;
  color: var(--muted);
  font-size: 19px;
  line-height: 1.65;
}

.legal h2 {
  margin-top: 56px;
  padding-top: 26px;
  border-top: 1px solid var(--line-strong);
  font-size: 21px;
}

.legal h3 {
  margin-top: 32px;
  font-size: 17px;
}

.legal p,
.legal ul {
  margin-top: 16px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

.legal ul {
  padding-left: 20px;
}

.legal li { margin-top: 8px; }

.legal li::marker { color: var(--line-strong); }

.legal strong {
  color: var(--ink);
  font-weight: 500;
}

.legal a { color: var(--navy); }

.legal dl {
  margin: 16px 0 0;
  border-top: 1px solid var(--line);
}

.legal dt {
  padding-top: 16px;
  font-weight: 500;
  font-size: 15px;
}

.legal dd {
  margin: 6px 0 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.legal__address {
  margin-top: 16px;
  font-style: normal;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

/* ---------- cookie banner ---------- */

.cookie {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 20;
  background: var(--card);
  border-top: 1px solid var(--line-strong);
}

.cookie__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 20px;
}

.cookie__text {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  max-width: 62ch;
}

.cookie__text a { color: var(--navy); }

.cookie__actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.btn--sm {
  height: 40px;
  padding: 0 20px;
  font-size: 14px;
}

@media (max-width: 620px) {
  .cookie__actions { width: 100%; }
  .cookie__actions .btn { flex: 1 1 auto; }
  .legal { padding-block: 52px 72px; }
}

/* On a wide screen the hero photograph matches the height of the text beside it
   and sits against the right gutter. The picture is taken out of flow so it
   cannot drive the row height itself — otherwise the image and the row would
   each be waiting on the other. Below 900px the layout stacks and this lifts. */
@media (min-width: 901px) {
  .hero { align-items: stretch; }

  .hero .photo {
    position: relative;
    max-width: none;
    min-height: 380px;
  }

  .hero .photo picture {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: flex-end;
  }

  .hero .photo img {
    width: auto;
    height: 100%;
  }

  /* the animated frames sit inside the figure the same way the single
     photograph did: full height of the text beside them, hugging the right */
  .hero .photo .photo__cycle {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
  }

  .hero .photo .photo__cycle picture {
    position: static;
    display: block;
  }

  .hero .photo .photo__cycle img {
    inset: 0 0 0 auto;
    width: auto;
    height: 100%;
  }
}

/* ---------- photography ---------- */

.photo {
  margin: 0;
  width: 100%;
  max-width: 460px;
}

.photo img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- the leaflet's letter-spaced closing line ---------- */

.tagline {
  display: block;
  position: relative;
  padding-top: 22px;
  margin: 0;
  color: var(--navy);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.tagline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 38px;
  height: 3px;
  background: var(--gold);
}

/* ---------- a full navy panel, as on the middle leaflet fold ---------- */

.section--navy {
  background: var(--navy);
  border-top: 0;
}

.section--navy h2,
.section--navy h3 { color: #ffffff; }

.section--navy .lede,
.section--navy p { color: #c9d2dc; }

.section--navy .tagline { color: #ffffff; }

.section--navy .btn {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--navy);
}

.section--navy .btn:hover {
  background: var(--paper);
  border-color: var(--paper);
}

@media (max-width: 900px) {
  .photo { max-width: 380px; }
}

@media (max-width: 620px) {
  .photo { max-width: none; }
  .tagline { font-size: 14px; letter-spacing: 0.14em; }
}

/* ---------- the display changing content ---------- */

/* the whole framed display, never cropped */
.photo--detail { max-width: 440px; }

.photo__cycle {
  position: relative;
  aspect-ratio: 1002 / 1570;
}

.photo__cycle img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* The bottom frame never fades. Only one layer is ever part-way through a
   change, and the layer directly beneath it is always fully opaque, so the
   page background never shows between the two and washes the picture out. */
.photo__cycle picture:nth-child(1) img { opacity: 1; }

  37.5%, 70.8% { opacity: 1; }
  71%, 100% { opacity: 0; }
}

  70.8%, 95.8% { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .photo__cycle img { animation: none; }
}

@media (max-width: 620px) {
  /* declared after the earlier .photo rule, so it needs its own phone override */
  .photo--detail { max-width: none; }
}

/* ---------- rhythm: mirrored rows and dark bands ---------- */

/* flip a split so the picture leads, without moving it above the text on a phone */
@media (min-width: 901px) {
  .split--mirror > div { order: 2; }
  .split--mirror > figure { order: 1; }
}

/* a section on navy needs its hairlines, labels and buttons lifted */
.section--navy .eyebrow { color: #9fb0c2; }
.section--navy .step { border-top-color: rgba(255, 255, 255, 0.28); }
.section--navy .facts li,
.section--navy .facts li:first-child { border-color: rgba(255, 255, 255, 0.28); }

.section--navy .btn--ghost {
  background: transparent;
  color: #ffffff;
  border-color: var(--gold);
}

.section--navy .btn--ghost:hover {
  background: transparent;
  border-color: #ffffff;
}

/* ---------- the day, across the whole width ---------- */

/* Stacked on a phone: the text, then the day beneath it. On a wide screen the
   band moves alongside, spanning every row of the text column. */
.hero--stacked { display: block; }

.dayband {
  margin: 56px 0 0;
}

@media (min-width: 901px) {
  .hero--stacked {
    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    gap: 64px;
    align-items: center;
  }

  .hero--stacked .dayband {
    margin: 0;
    /* fit what is on screen, but never below 420 or above 780 */
    height: clamp(420px, calc(100vh - 210px), 780px);
    display: flex;
    justify-content: flex-end;
  }

  .hero--stacked .photo__cycle--day {
    height: 100%;
    width: auto;
  }
}

/* landscape on a phone, portrait beside the text on a wide screen */
.photo__cycle--day {
  aspect-ratio: 1672 / 941;
}

@media (min-width: 901px) {
  .photo__cycle--day { aspect-ratio: 941 / 1672; }
}

.photo__cycle--day picture:nth-child(1) img { opacity: 1; }

.photo__cycle--day picture:nth-child(2) img {
  opacity: 0;
  animation: day-2 16s ease-in-out infinite;
}

.photo__cycle--day picture:nth-child(3) img {
  opacity: 0;
  animation: day-3 16s ease-in-out infinite;
}

.photo__cycle--day picture:nth-child(4) img {
  opacity: 0;
  animation: day-4 16s ease-in-out infinite;
}

.photo__cycle--day picture:nth-child(5) img {
  opacity: 0;
  animation: day-5 16s ease-in-out infinite;
}

.photo__cycle--day picture:nth-child(6) img {
  opacity: 0;
  animation: day-6 16s ease-in-out infinite;
}

.photo__cycle--day picture:nth-child(7) img {
  opacity: 0;
  animation: day-7 16s ease-in-out infinite;
}

.photo__cycle--day picture:nth-child(8) img {
  opacity: 0;
  animation: day-8 16s ease-in-out infinite;
}

@keyframes day-2 {
  0%, 12.50% { opacity: 0; }
  16.25%, 28.75% { opacity: 1; }
  28.90%, 100% { opacity: 0; }
}

@keyframes day-3 {
  0%, 25.00% { opacity: 0; }
  28.75%, 41.25% { opacity: 1; }
  41.40%, 100% { opacity: 0; }
}

@keyframes day-4 {
  0%, 37.50% { opacity: 0; }
  41.25%, 53.75% { opacity: 1; }
  53.90%, 100% { opacity: 0; }
}

@keyframes day-5 {
  0%, 50.00% { opacity: 0; }
  53.75%, 66.25% { opacity: 1; }
  66.40%, 100% { opacity: 0; }
}

@keyframes day-6 {
  0%, 62.50% { opacity: 0; }
  66.25%, 78.75% { opacity: 1; }
  78.90%, 100% { opacity: 0; }
}

@keyframes day-7 {
  0%, 75.00% { opacity: 0; }
  78.75%, 91.25% { opacity: 1; }
  91.40%, 100% { opacity: 0; }
}

@keyframes day-8 {
  0%, 87.50% { opacity: 0; }
  91.25%, 96.25% { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .photo__cycle--day img { animation: none; }
}

@media (max-width: 620px) {
  .dayband { margin-top: 40px; }
}

/* ---------- the timeline's four moments, photographed ---------- */

.moment {
  margin: 0;
  width: 100%;
  max-width: 240px;
}

.moment img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- request info page ---------- */

.request-info-content {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: start;
}

.video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--card);
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.request-form fieldset {
  margin: 0;
  padding: 0;
  border: none;
}

.request-form legend {
  margin: 0 0 32px;
  padding: 0;
  font-size: 21px;
  font-weight: 500;
  color: var(--navy);
}

.form-group {
  margin-bottom: 24px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--navy);
}

.form-group input::placeholder {
  color: var(--muted);
}

.form-group input[aria-invalid="true"],
.form-group select[aria-invalid="true"] {
  border-color: var(--error);
}

.form-error {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--error);
}

.form-status {
  min-height: 1.6em;
  margin-top: 14px;
  font-size: 15px;
  color: var(--muted);
}

/* the honeypot: off-screen rather than display:none, which some bots skip */
.form-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-done:focus { outline: none; }
.form-done .lede { margin-top: 14px; }

.request-form .btn {
  width: 100%;
  margin-top: 8px;
}

@media (max-width: 900px) {
  .request-info-content {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

/* the enquiry form inside the contact page's text column */
.split .request-form { margin-top: 36px; }
.split .form-done { margin-top: 36px; }

.form-alt {
  margin-top: 28px;
  color: var(--muted);
  font-size: 15px;
}

.form-alt a { color: var(--navy); }

/* ---------- devices ---------- */

/* Built from brand/devices/devices.json by brand/devices/build-page.py.
   One card per device; the full specification folds away in a <details>,
   so the page reads as a set of pictures until someone opens one. */

.devices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: var(--gap);
  align-items: start;
}

.device {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  padding: 20px 22px 6px;
  scroll-margin-top: 24px;
}

.device__img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  margin-bottom: 18px;
}

.device__model {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.device h3 {
  margin-top: 6px;
  font-size: 19px;
}

.device__summary {
  margin-top: 10px;
  color: var(--muted);
  font-size: 15px;
}

.device__keys {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}

.device__keys li { padding: 3px 0; }

.device__spec {
  margin-top: auto;
  border-top: 1px solid var(--line);
}

.device__keys + .device__spec { margin-top: 18px; }

.device__spec summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
}

.device__spec summary::-webkit-details-marker { display: none; }

.device__spec summary::after {
  content: "+";
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
}

.device__spec[open] summary::after { content: "\2212"; }

.device__spec dl {
  display: grid;
  grid-template-columns: minmax(96px, auto) 1fr;
  gap: 8px 14px;
  margin: 0 0 18px;
  font-size: 14px;
}

.device__spec dt { color: var(--muted); }
.device__spec dd { margin: 0; }

.devices__note {
  margin-top: 40px;
  max-width: 70ch;
  color: var(--muted);
  font-size: 14px;
}