:root {
    color-scheme: light;
    /* sampled from the 80 Locust listing photos */
    --cream:      #F0EFE7;
    --cream-2:    #E5E6DB;
    --surface:    #FFFFFF;
    --ink:        #1B211C;
    --muted:      #555D53;
    --faint:      #5A6152;
    --rule:       #D6D9CB;

    --aqua:       #2F525D;
    --aqua-lit:   #426982;
    --coral:      #C33D0E;
    --coral-lit:  #DD5E2E;
    --coral-deep: #A63407;
    --mustard:    #B08838;
    --sage:       #96A08F;

    --on-color:   #F6F5EE;
    --on-soft:    rgba(246,245,238,0.86);
    --on-tint:    #1B211C;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --cream:    #151815;
      --cream-2:  #1E221D;
      --surface:  #1E221D;
      --ink:      #E9EDE4;
      --muted:    #A7AFA3;
      --faint:    #8B937F;
      --rule:     #303629;
      --aqua:     #5E93A8;
      --aqua-lit: #7FB3C6;
      --coral:    #E4613A;
      --coral-lit:#F5825C;
      --coral-deep:#E4613A;
      --mustard:  #D6A94D;
      --sage:     #A3AD99;
      --on-color: #12150F;
      /* 0.9 keeps it at least 4.5:1 on the aqua contact panel (4.81:1 blended; 0.82 was 4.27) */
      --on-soft:  rgba(18,21,15,0.9);
    }
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --cream:    #151815;
    --cream-2:  #1E221D;
    --surface:  #1E221D;
    --ink:      #E9EDE4;
    --muted:    #A7AFA3;
    --faint:    #8B937F;
    --rule:     #303629;
    --aqua:     #5E93A8;
    --aqua-lit: #7FB3C6;
    --coral:    #E4613A;
    --coral-lit:#F5825C;
    --coral-deep:#E4613A;
    --mustard:  #D6A94D;
    --sage:     #A3AD99;
    --on-color: #12150F;
    --on-soft:  rgba(18,21,15,0.9);
  }

  * { box-sizing: border-box; }

  body {
    background: var(--cream);
    color: var(--ink);
    font-family: Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 17px;
    line-height: 1.58;
    -webkit-font-smoothing: antialiased;
  }

  .wrap { max-width: 1000px; margin: 0 auto; padding: 0 24px; }
  .disp { font-family: "Archivo Black", Archivo, Impact, sans-serif; font-weight: 400; }

  /* ---------- brand bar ---------- */
  .brandbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap; padding: 22px 0;
  }
  .brand { display: flex; align-items: center; gap: 11px; }
  .brand .mark { width: 30px; height: 30px; flex: none; }
  .brand .name {
    font-family: "Archivo Black", Archivo, sans-serif;
    font-size: 1.14rem; letter-spacing: -0.025em; line-height: 1;
  }
  .brand .name span { color: var(--coral); }
  .brandbar .loc {
    font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--aqua);
  }

  /* ---------- hero ---------- */
  .hero { padding: 26px 0 0; }
  h1 {
    font-family: "Archivo Black", Archivo, sans-serif; font-weight: 400;
    font-size: clamp(2.6rem, 8vw, 5.1rem);
    line-height: 0.94; letter-spacing: -0.038em;
    margin: 20px 0 0; max-width: 15ch; text-wrap: balance;
  }
  h1 .aq { color: var(--aqua); }
  h1 .co { color: var(--coral); }
  .sub {
    font-size: 1.22rem; color: var(--muted); max-width: 52ch;
    margin: 20px 0 0; line-height: 1.5;
  }
  .heroactions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 26px; }
  .btn {
    display: inline-block; font-weight: 700; font-size: 15.5px;
    padding: 15px 28px; text-decoration: none; border-radius: 100px;
    background: var(--coral); color: var(--on-color); border: 2px solid var(--coral);
  }
  .btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
  .btn svg { width: 1.05em; height: 1.05em; vertical-align: -0.15em; margin-left: 4px; }
  .btn:focus-visible, .gallery a:focus-visible { outline: 3px solid var(--aqua); outline-offset: 3px; }
  .undercta {
    margin-top: 14px; font-size: 14.5px; color: var(--faint);
    display: flex; flex-wrap: wrap; gap: 6px 20px;
  }
  .undercta span { display: inline-flex; align-items: center; gap: 7px; }
  .undercta svg { width: 15px; height: 15px; flex: none; color: var(--aqua); }

  /* ---------- photos ---------- */
  .shots { display: grid; gap: 6px; margin: 40px 0 0; grid-template-columns: 1fr 1fr; grid-auto-rows: 292px; }
  .shots > :first-child { grid-column: span 2; grid-row: span 2; }
  .shot {
    position: relative; overflow: hidden; border-radius: 10px;
    background: var(--cream-2); min-height: 180px; margin: 0;
  }
  .shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

  /* ---------- proof bar ---------- */
  .proofbar {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: 2px; margin-top: 6px; background: var(--rule);
    border-radius: 10px; overflow: hidden;
  }
  .proofbar > div { background: var(--cream); padding: 22px 20px 24px; }
  .proofbar .big {
    font-family: "Archivo Black", Archivo, sans-serif; font-size: 1.62rem;
    letter-spacing: -0.03em; line-height: 1.05; color: var(--aqua); display: block;
  }
  .proofbar .lab { font-size: 14px; color: var(--muted); margin-top: 5px; display: block; line-height: 1.4; }

  /* ---------- see it for yourself ---------- */
  .seeit { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 30px; }
  .seecard {
    display: block; text-decoration: none; color: inherit;
    background: var(--surface); border: 1px solid var(--rule);
    border-radius: 18px; overflow: hidden;
  }
  a.seecard:hover, a.seecard:focus-visible { border-color: var(--aqua); }
  a.seecard:focus-visible { outline: 3px solid var(--aqua); outline-offset: 3px; }
  .seecard .thumb { position: relative; aspect-ratio: 16 / 10; background: var(--cream-2); }
  .seecard .thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  .seecard .thumb video { position: absolute; inset: 0; width: 100%; height: 100%; display: block;
                          object-fit: contain; background: #0C0F0B; }
  .seecard .badge {
    position: absolute; left: 16px; bottom: 16px;
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--coral); color: var(--on-color);
    font-weight: 700; font-size: 14px; padding: 10px 18px; border-radius: 100px;
  }
  .seecard .badge svg { width: 15px; height: 15px; flex: none; }
  .seecard .badge.wait { background: var(--rule); color: var(--muted); }
  .seecard .cap { padding: 20px 22px 22px; }
  .seecard h3 {
    font-family: "Archivo Black", Archivo, sans-serif; font-weight: 400;
    font-size: 1.1rem; letter-spacing: -0.025em; margin: 0 0 6px; line-height: 1.2;
  }
  .seecard p { font-size: 14.5px; color: var(--muted); margin: 0; max-width: 40ch; line-height: 1.5; }
  .seecard .len {
    display: block; margin-top: 10px; font-size: 12px; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint);
  }

  @media (max-width: 760px) {
    .seeit { grid-template-columns: 1fr; }
  }

  /* ---------- photo gallery ---------- */
  .gallery {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 6px;
    list-style: none; margin: 30px 0 0; padding: 0; max-width: none;
  }
  .gallery.collapsed li:nth-child(n+13) { display: none; }
  .gallery a { display: block; border-radius: 10px; overflow: hidden; background: var(--cream-2); }
  .gallery img {
    display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 60%;
    transition: transform .4s cubic-bezier(.16, 1, .3, 1);
  }
  .gallery a:hover img { transform: scale(1.04); }
  .btn.more { display: block; margin: 22px auto 0; font-family: inherit; cursor: pointer; }
  .btn.more[hidden] { display: none; }
  @media (max-width: 460px) { .gallery { grid-template-columns: 1fr 1fr; } }

  .viewer {
    width: 100vw; height: 100dvh; max-width: none; max-height: none;
    margin: 0; padding: 0; border: 0; background: #0C0F0B; color: #F6F5EE;
  }
  .viewer::backdrop { background: #0C0F0B; }
  .viewer[open] { display: grid; animation: viewer-in .25s cubic-bezier(.16, 1, .3, 1); }
  @keyframes viewer-in { from { opacity: 0; } }
  .viewer figure {
    margin: 0; min-height: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; padding: 64px 72px 20px;
  }
  .viewer img { min-height: 0; max-width: 100%; object-fit: contain; border-radius: 6px; }
  .viewer figcaption {
    font-size: 14.5px; line-height: 1.45; color: rgba(246,245,238,0.86);
    max-width: 60ch; text-align: center; padding-top: 14px;
  }
  .viewer .count {
    display: block; font-weight: 700; color: #F6F5EE; font-variant-numeric: tabular-nums;
  }
  .vbtn {
    position: absolute; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(246,245,238,0.12); color: #F6F5EE; border: 0; cursor: pointer; padding: 0;
  }
  .vbtn:hover { background: rgba(246,245,238,0.24); }
  .vbtn:focus-visible { outline: 3px solid #F6F5EE; outline-offset: 2px; }
  .vbtn svg { width: 24px; height: 24px; }
  .vbtn.close { top: 12px; right: 12px; }
  .vbtn.prev, .vbtn.next { top: 50%; translate: 0 -50%; }
  .vbtn.prev { left: 12px; }
  .vbtn.next { right: 12px; }
  @media (max-width: 620px) {
    /* 72px top clears the 48px close button at top: 12px; top-aligned so the caption stays put between portrait and landscape photos */
    .viewer figure { padding: 72px 12px 80px; justify-content: flex-start; }
    .vbtn.prev, .vbtn.next { top: auto; bottom: 16px; translate: none; }
    .vbtn.prev { left: calc(50% - 60px); }
    .vbtn.next { right: calc(50% - 60px); }
  }

  /* ---------- generic section ---------- */
  section { padding: 74px 0 0; }
  .eyebrow {
    font-family: "Archivo Black", Archivo, sans-serif; font-size: 12px;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--coral);
    display: block; margin-bottom: 13px;
  }
  h2 {
    font-family: "Archivo Black", Archivo, sans-serif; font-weight: 400;
    font-size: clamp(1.9rem, 4.6vw, 2.9rem); line-height: 1.05;
    letter-spacing: -0.03em; margin: 0 0 16px; text-wrap: balance; max-width: 19ch;
  }
  p { margin: 0 0 16px; max-width: 60ch; }
  /* Same treatment as .plist a: underlined, in the surrounding text colour, so both themes follow. */
  a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 2px; }
  section > p:last-child { margin-bottom: 0; }

  /* ---------- who it's for ---------- */
  .fors { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(224px, 100%), 1fr)); gap: 16px; margin-top: 30px; }
  .fors > div { background: var(--surface); border: 1px solid var(--rule); border-radius: 16px; padding: 24px 24px 26px; }
  .fors .tag {
    display: inline-block; font-family: "Archivo Black", Archivo, sans-serif;
    font-size: 10.5px; letter-spacing: 0.11em; text-transform: uppercase;
    padding: 5px 11px; border-radius: 100px; margin-bottom: 13px; color: var(--on-color);
  }
  .fors > div:nth-child(1) .tag { background: var(--aqua); }
  .fors > div:nth-child(2) .tag { background: var(--coral); }
  .fors > div:nth-child(3) .tag { background: var(--mustard); color: var(--on-tint); }
  .fors > div:nth-child(4) .tag { background: var(--sage); color: var(--on-tint); }
  .fors h3 { font-size: 16px; font-weight: 700; margin: 0 0 6px; }
  .fors p { font-size: 14.5px; color: var(--muted); margin: 0; max-width: none; line-height: 1.5; }

  /* ---------- vs hotel ---------- */
  .vsblock { background: var(--cream-2); border-radius: 22px; padding: 40px 34px 44px; margin-top: 30px; }
  .vs { width: 100%; border-collapse: collapse; font-size: 15.5px; }
  .vs th {
    text-align: left; font-family: "Archivo Black", Archivo, sans-serif;
    font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase;
    padding: 0 16px 12px 0; border-bottom: 2px solid var(--rule);
  }
  .vs th:first-child { color: var(--aqua); }
  .vs th:last-child { color: var(--faint); }
  .vs td { padding: 13px 16px 13px 0; border-bottom: 1px solid var(--rule); }
  .vs td:first-child { font-weight: 700; }
  .vs td:last-child { color: var(--faint); padding-right: 0; }
  .tw { overflow-x: auto; }

  /* ---------- the offer stack ---------- */
  .stack { margin-top: 30px; border-top: 2px solid var(--rule); }
  .stack .grp {
    font-family: "Archivo Black", Archivo, sans-serif; font-size: 11px;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--coral);
    padding: 22px 0 8px; display: block;
  }
  .stack .row { padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .stack .what { font-weight: 700; font-size: 15.5px; }
  .stack .what .sm { display: block; font-weight: 400; font-size: 13.5px; color: var(--faint); line-height: 1.4; margin-top: 2px; max-width: 46ch; }

  /* ---------- cta band ---------- */
  .ctaband {
    margin-top: 36px; background: var(--cream-2); border-radius: 18px;
    padding: 26px 28px 28px; display: flex; flex-wrap: wrap;
    align-items: center; justify-content: space-between; gap: 16px 24px;
  }
  .ctaband p {
    margin: 0; max-width: 40ch; font-family: "Archivo Black", Archivo, sans-serif;
    font-size: 1.18rem; letter-spacing: -0.022em; line-height: 1.25;
  }
  .ctaband .note { display: block; font-family: Archivo, sans-serif; font-size: 14.5px; font-weight: 400; color: var(--muted); letter-spacing: 0; margin-top: 6px; }

  /* ---------- promise / risk reversal ---------- */
  .promise { background: var(--ink); color: var(--on-color); border-radius: 24px; padding: 44px 38px 46px; margin-top: 30px; }
  .promise h3 {
    font-family: "Archivo Black", Archivo, sans-serif; font-weight: 400;
    font-size: clamp(1.5rem, 3.6vw, 2rem); letter-spacing: -0.03em;
    margin: 0 0 10px; line-height: 1.08; max-width: 20ch;
  }
  .promise > p { color: var(--on-soft); max-width: 56ch; margin: 0 0 26px; }
  .plist { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 24px 34px; margin: 0; padding: 0; list-style: none; max-width: none; }
  .plist li { display: grid; grid-template-columns: 26px 1fr; gap: 13px; align-items: start; }
  .plist svg { width: 24px; height: 24px; color: var(--coral-lit); margin-top: 1px; }
  .plist .h { font-family: "Archivo Black", Archivo, sans-serif; font-size: 15.5px; letter-spacing: -0.015em; display: block; margin-bottom: 3px; }
  .plist .b { font-size: 14.5px; color: var(--on-soft); line-height: 1.5; display: block; }
  .plist a { color: var(--on-color); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
  .plist a:focus-visible { outline: 2px solid var(--on-color); outline-offset: 3px; }
  @media (max-width: 460px) { .promise { padding: 32px 22px 34px; border-radius: 18px; } }

  /* ---------- owners ---------- */
  .owners { margin-top: 30px; }
  .owners p { max-width: 56ch; }
  .owners p:last-child { margin-bottom: 0; }
  .owners .sig {
    font-family: "Archivo Black", Archivo, sans-serif; font-size: 1.05rem;
    letter-spacing: -0.02em; color: var(--aqua); margin-top: 18px; display: block;
  }

  /* ---------- our picks ---------- */
  .picks { background: var(--cream-2); border-radius: 20px; padding: 30px 30px 32px; margin-top: 22px; }
  .picks .lead {
    font-family: "Archivo Black", Archivo, sans-serif; font-size: 1.12rem;
    letter-spacing: -0.02em; margin: 0 0 20px; max-width: 42ch;
  }
  .mapwrap { background: var(--cream); border: 1.5px solid var(--rule); border-radius: 16px;
             overflow: hidden; margin-top: 4px; }
  #nmap { width: 100%; height: 540px; }
  .maphint { font-size: 13.5px; color: var(--faint); margin: 20px 0 10px; max-width: none; }
  .pin { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center;
         justify-content: center; font-weight: 700; font-size: 14px; cursor: pointer;
         text-decoration: none; box-shadow: 0 1px 5px rgba(0,0,0,.35); border: 2px solid var(--on-color); }
  .pin.coffee    { background: var(--mustard); color: var(--ink); }
  .pin.dinner    { background: var(--coral); color: var(--on-color); }
  .pin.essential { background: var(--sage); color: var(--ink); }
  .pin.home      { width: 42px; height: 42px; background: var(--ink); color: var(--mustard); font-size: 20px; }
  .pin.landmark  { background: var(--aqua); color: var(--on-color); border-radius: 9px; }

  .mgroups { columns: 2; column-gap: 44px; margin-top: 24px; }
  .mgroups > div { break-inside: avoid; margin-bottom: 22px; }
  @media (max-width: 720px) { .mgroups { columns: 1; } }
  .glab { font-family: "Archivo Black", Archivo, sans-serif; font-weight: 400; font-size: 11px;
          letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 2px; padding-bottom: 9px;
          border-bottom: 2px solid var(--rule); display: flex; align-items: center; gap: 8px; }
  .glab::before { content: ""; width: 11px; height: 11px; border-radius: 50%; flex: none; }
  .glab.coffee { color: var(--mustard); } .glab.coffee::before { background: var(--mustard); }
  .glab.dinner { color: var(--coral); }   .glab.dinner::before { background: var(--coral); }
  .glab.essential { color: var(--faint); } .glab.essential::before { background: var(--sage); }
  .glab.landmark { color: var(--aqua); }  .glab.landmark::before { background: var(--aqua); }

  .mlist { list-style: none; margin: 0; padding: 0; }
  .mlist li { display: grid; grid-template-columns: 26px 1fr auto; gap: 11px; align-items: center;
              padding: 9px 0; border-bottom: 1px solid var(--rule); }
  .mlist .num { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center;
                justify-content: center; font-size: 12px; font-weight: 700; }
  .mlist li.coffee .num    { background: var(--mustard); color: var(--on-tint); }
  .mlist li.dinner .num    { background: var(--coral); color: var(--on-color); }
  .mlist li.essential .num { background: var(--sage); color: var(--on-tint); }
  .mlist li.landmark .num  { background: var(--aqua); color: var(--on-color); }
  .mlist a, .mlist li > span:not(.num):not(.t) { font-size: 14.5px; font-weight: 600; }
  .mlist a { color: inherit; text-decoration: none; border-bottom: 1.5px solid var(--rule); }
  .mlist a:hover { border-bottom-color: var(--aqua); }
  .mlist a:focus-visible { outline: 3px solid var(--aqua); outline-offset: 3px; }
  .mlist .t { font-size: 13px; font-weight: 700; color: var(--aqua); white-space: nowrap;
              font-variant-numeric: tabular-nums; }
  .mlist li[class*="essential"] .t, .mlist .t.drive { color: var(--faint); }

  .further { margin-top: 26px; padding-top: 20px; border-top: 2px solid var(--rule); }
  .further .glab.far { color: var(--faint); border-bottom: none; padding-bottom: 0; margin-bottom: 12px; }
  .further .glab.far::before { background: var(--rule); }
  .further ul { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; padding: 0; margin: 0; max-width: none; }
  .further li { background: var(--surface); border: 1.5px solid var(--rule); border-radius: 100px; font-size: 14.5px; }
  .further li > * { display: inline-flex; align-items: baseline; gap: 9px; padding: 8px 16px; color: inherit; text-decoration: none; font-weight: 600; border-radius: 100px; }
  .further .nm { font-weight: 600; }
  .further li:has(a):hover { border-color: var(--aqua); }
  .further li a:focus-visible { outline: 3px solid var(--aqua); outline-offset: 3px; }
  .further li .t { font-weight: 700; font-size: 13px; color: var(--aqua); white-space: nowrap; font-variant-numeric: tabular-nums; }

  .picks .foot { font-size: 13px; color: var(--faint); margin: 18px 0 0; max-width: none; }

  /* ---------- faq ---------- */
  .faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 4px 44px; margin-top: 26px; }
  .faq > div { padding: 20px 0; border-bottom: 1px solid var(--rule); }
  .faq h3 {
    font-family: "Archivo Black", Archivo, sans-serif; font-weight: 400;
    font-size: 1.02rem; letter-spacing: -0.02em; margin: 0 0 7px; line-height: 1.25;
  }
  .faq p { margin: 0; font-size: 15px; color: var(--muted); max-width: 48ch; line-height: 1.55; }

  /* ---------- unit card ---------- */
  .units { --card: 460px; }
  .unit { background: var(--surface); border-radius: 18px; overflow: hidden; border: 1px solid var(--rule); max-width: var(--card); margin-top: 30px; }
  .unit .shot { border-radius: 0; aspect-ratio: 4 / 3; }
  /* copy beside the card; the card gives up width before the copy gets cramped */
  @media (min-width: 760px) {
    .units { display: grid; grid-template-columns: 1fr min(var(--card), 50%); gap: 34px; align-items: start; }
    .units .unit { margin-top: 0; }
  }
  .unit .body { padding: 24px 26px 28px; }
  .unit h3 {
    font-family: "Archivo Black", Archivo, sans-serif; font-weight: 400;
    font-size: 1.42rem; margin: 0 0 5px; letter-spacing: -0.028em;
  }
  .unit .meta { font-size: 13px; color: var(--faint); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
  .unit .btnrow { margin-top: 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
  .btn.sm { padding: 11px 20px; font-size: 14px; }

  /* ---------- contact ---------- */
  .contact {
    background: var(--aqua); color: var(--on-color); margin-top: 80px;
    padding: 60px 34px 64px; text-align: center; border-radius: 26px;
  }
  .contact h2 { color: var(--on-color); margin: 0 auto 12px; max-width: 16ch; }
  .contact p { color: var(--on-soft); margin: 0 auto 30px; max-width: 46ch; }
  .contact a {
    color: var(--on-color); font-family: "Archivo Black", Archivo, sans-serif;
    font-size: 1.24rem; text-decoration: none; letter-spacing: -0.02em;
    border-bottom: 3px solid var(--on-soft); padding-bottom: 3px;
  }
  .contact a:hover, .contact a:focus-visible { border-bottom-color: var(--on-color); }
  .contact a:focus-visible { outline: 3px solid var(--on-color); outline-offset: 5px; }
  .contact .last { margin: 26px auto 0; font-size: 14.5px; color: var(--on-soft); max-width: 40ch; }
  .contact.thanks { margin-top: 20px; }

  footer {
    padding: 28px 0 60px; font-size: 13.5px; color: var(--faint);
    display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  }

  @media (max-width: 700px) {
    .shots { grid-template-columns: 1fr; grid-auto-rows: 240px; }
    .shots > :first-child { grid-column: auto; grid-row: auto; }
    .vsblock { padding: 28px 20px 32px; }
  }
  @media (max-width: 460px) {
    .wrap { padding: 0 17px; }
    .contact { padding: 42px 22px 46px; border-radius: 20px; }
  }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }