@import url('./fonts/fonts.css');

/* Amur Stays Owners — design system
   Palette is the documented brand kit (Brand-Assets/Brand-Kit/Brand colors).
   This is deliberately NOT the guest site's orange: owners.amurstay.com is a
   separate visual surface from amurstay.com, the way the homeowner brochure is. */

:root {
  /* brand, verbatim from Brand-Kit/Brand colors/Colors.png */
  --cream:    #E3D7C7;
  --taupe:    #B6A292;
  --warmgrey: #938C82;
  --forest:   #344C44;
  --burgundy: #6A2C22;

  /* surfaces and text, derived from the brand five */
  --ground:   #F7F2EA;
  --surface:  #FFFDFA;
  --ink:      #2B211C;
  --ink-soft: #6E6259;
  --rule:     #DDD2C2;

  /* inverted band, used for the hero, value and transparency sections */
  --band:      var(--forest);
  --band-ink:  #EFE8DC;
  --band-soft: rgba(239,232,220,.74);
  --band-rule: rgba(227,215,199,.22);

  /* one action colour, locked across the whole surface */
  --action:     var(--burgundy);
  --action-ink: #FFFDFA;
  --flag:       #8A5A2B;
  --gold:       #C8A24A; /* @kind color */

  --f-display: 'Playfair Display', Georgia, 'Times New Roman', serif; /* @kind font */
  --f-body:    'Instrument Sans', ui-sans-serif, system-ui, -apple-system, sans-serif; /* @kind font */

  /* radius: one scale, 3px on controls and 4px on surfaces */
  --r-control: 3px;
  --r-surface: 4px;
}

:root[data-theme="dark"] {
  --ground:#1A211E; --surface:#222B27; --ink:#EDE4D7; --ink-soft:#A9A093; --rule:#38423D;
  --band:#141A18; --band-ink:#EDE4D7; --band-soft:rgba(237,228,215,.7); --band-rule:rgba(237,228,215,.16);
  --action:#C4674F; --action-ink:#1A100D; --flag:#C99A5E;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--f-display); font-weight: 600; letter-spacing: -.012em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.06; }
h2 { font-size: clamp(1.8rem, 3.7vw, 2.7rem); line-height: 1.1; }
h3 { font-size: 1.14rem; line-height: 1.3; }
p  { margin: 0; }

.lede { color: var(--ink-soft); font-size: clamp(1.02rem,1.3vw,1.12rem); max-width: 56ch; }
.eyebrow { font-size: .74rem; letter-spacing: .19em; text-transform: uppercase; font-weight: 600; color: var(--ink-soft); }
/* Eyebrows are rationed: at most one per three sections on a page. */

/* ---------- action ---------- */
.act {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--action); color: var(--action-ink);
  font-family: var(--f-body); font-weight: 600; font-size: .97rem;
  padding: .88rem 1.6rem; border-radius: var(--r-control);
  border: 1px solid var(--action); text-decoration: none; white-space: nowrap;
  transition: transform .16s ease, opacity .16s ease; cursor: pointer;
}
.act:hover  { opacity: .9; }
.act:active { transform: translateY(1px); }
.act.line   { background: transparent; color: var(--ink); border-color: var(--rule); }
.band .act.line { color: var(--band-ink); border-color: var(--band-rule); }
.acts { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }

a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--action); outline-offset: 3px; }

/* ---------- surfaces ---------- */
.band { background: var(--band); color: var(--band-ink); }
.band .lede, .band .eyebrow { color: var(--band-soft); }
.tint { background: var(--surface); border-block: 1px solid var(--rule); }

/* ---------- band context: components on the inverted band ---------- */
.band .stages, .band .faq { border-top-color: var(--band-rule); }
.band .stage, .band details { border-bottom-color: var(--band-rule); }
.band .stage p, .band details p, .band caption, .band .proof-in .v, .band .hint { color: var(--band-soft); }
.band .proof-in { background: var(--band-rule); border-color: var(--band-rule); }
.band .proof-in > div { background: color-mix(in srgb, var(--band) 90%, var(--cream) 10%); }
.band thead th, .band tbody td:not(:first-child) { color: var(--band-soft); }
.band .cluster th { color: var(--band-ink); border-bottom-color: var(--band-rule); }
.band tbody td:first-child { color: var(--band-ink); }
.band tbody tr:not(.cluster) + tr:not(.cluster) td { border-top-color: var(--band-rule); }
.band .yes { color: var(--cream); }
.band .quote { background: color-mix(in srgb, var(--band) 90%, var(--cream) 10%); border-color: var(--band-rule); }
.band .quote .who { color: var(--band-soft); }
.band .quote .who b { color: var(--band-ink); }
.band summary::after { color: var(--band-soft); }
.band .act { border-color: color-mix(in srgb, var(--action) 68%, var(--cream) 32%); }
.band .form-card { background: var(--taupe); color: var(--ink); box-shadow: 0 18px 50px rgba(20,26,24,.28); }
.band .form-card .sub, .band .form-card .consent label, .band .form-card .hint { color: color-mix(in srgb, var(--ink) 62%, var(--taupe) 38%); }
.band .form-card label { color: var(--ink); }
.band .form-card input, .band .form-card select { background: color-mix(in srgb, var(--cream) 72%, #fff 28%); border-color: color-mix(in srgb, var(--warmgrey) 60%, var(--cream) 40%); color: var(--ink); }
.band .nav { background: var(--band); border-bottom-color: var(--band-rule); }
.band .mark, .band .nav-links a:hover { color: var(--band-ink); }
.band .mark span, .band .nav-links a { color: var(--band-soft); }

/* ---------- form ---------- */
.form-card { background: var(--surface); border-radius: 5px; padding: clamp(1.4rem,2.8vw,2rem); color: var(--ink); box-shadow: 0 18px 50px rgba(20,26,24,.22); }
.band .form-card { background: var(--cream); }
.form-card h2 { font-size: clamp(1.25rem,2.2vw,1.5rem); margin-bottom: .35rem; }
.form-card .sub { color: var(--ink-soft); font-size: .92rem; margin-bottom: 1.2rem; }
form { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
@media (max-width: 560px) { form { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: .32rem; }
.field.wide { grid-column: 1 / -1; }
label { font-size: .84rem; font-weight: 600; color: var(--ink); }
label .opt { font-weight: 400; color: var(--ink-soft); }
input, select {
  font-family: var(--f-body); font-size: .95rem; color: var(--ink);
  background: var(--ground); border: 1px solid var(--rule);
  border-radius: var(--r-control); padding: .62rem .75rem; width: 100%;
}
/* Anything under 16px makes iOS zoom the page the moment a field is focused,
   which on a seven-field form means zooming and panning all the way down it.
   Touch also gets taller fields and a checkbox that can actually be hit: at
   13px it was the smallest target on the page and submitting requires it. */
@media (hover: none), (max-width: 900px) {
  input, select { font-size: 16px; padding: .82rem .8rem; min-height: 48px; }
  .consent input[type="checkbox"] { min-height: 0; width: 22px; height: 22px; margin-top: .15rem; flex: none; }
  .consent label { font-size: .92rem; }
  .field { gap: .4rem; }
}
input:focus, select:focus { outline: 2px solid var(--action); outline-offset: 1px; border-color: var(--action); }
.hint { font-size: .8rem; color: var(--ink-soft); }
.err  { font-size: .8rem; color: var(--action); font-weight: 500; }
.field.invalid input, .field.invalid select { border-color: var(--action); }
.consent { display: flex; gap: .6rem; align-items: flex-start; }
.consent input { width: auto; margin-top: .28rem; flex: none; }
.consent label { font-weight: 400; font-size: .86rem; color: var(--ink-soft); line-height: 1.5; }
.consent a { color: var(--ink); }
/* Labels always sit above the input. Placeholder is never the label. */

/* ---------- stat strip ---------- */
.proof-in { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.proof-in > div { background: var(--surface); padding: clamp(1.1rem,2.2vw,1.5rem) clamp(.9rem,2vw,1.4rem); }
.proof .k, .proof-in .k { font-family: var(--f-display); font-size: clamp(1.15rem,2vw,1.45rem); font-weight: 600; line-height: 1.2; margin-bottom: .2rem; }
.proof-in .v { font-size: .87rem; color: var(--ink-soft); }
.proof-in .todo-k { color: var(--flag); }
@media (max-width: 760px) { .proof-in { grid-template-columns: 1fr 1fr; } }

.wiifu { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.3rem,3vw,2.2rem) clamp(1.6rem,3.5vw,2.8rem); }
@media (max-width: 900px) { .wiifu { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .wiifu { grid-template-columns: 1fr; } }
.wi h3 { font-family: var(--f-body); font-size: 1rem; font-weight: 600; letter-spacing: 0; margin-bottom: .3rem; padding-top: .85rem; border-top: 1px solid var(--rule); }
.wi p  { color: var(--ink-soft); font-size: .94rem; }
.band .wi h3 { border-top-color: var(--band-rule); }
.band .wi p  { color: var(--band-soft); }

/* ---------- "What it is": row list + art panel ----------
   The panel is sized by its own content at every width rather than by a fixed
   aspect ratio. A ratio tied the panel's height to the column width, so the
   wider rail inflated it to 604px against a 311px list and left the list
   stranded at the top. Content sizing also means the text can never overflow. */
.whatgrid { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(1.5rem,4vw,3.2rem); align-items: stretch; }
/* The heading lives inside the left column, so both columns start on the same
   line as the panel. The list is pushed to the bottom of its column, which
   pins the two columns to a shared bottom edge whatever their content. */
.whatcol { display: flex; flex-direction: column; }
.whatcol > [data-costlist] { margin-top: auto; }
.whatart { position: sticky; top: 6rem; }
.whatart > div { display: grid; aspect-ratio: auto !important; min-height: 0 !important; }
[data-costart] { position: relative !important; inset: auto !important; grid-area: 1 / 1; }
[data-costart] > div:nth-child(1),
[data-costart] > div:nth-child(2) { height: clamp(215px, 19vw, 285px) !important; }
[data-costart] > div:nth-child(1) { position: relative !important; top: auto !important; }
[data-costart] > div:nth-child(3) { position: relative !important; top: auto !important; bottom: auto !important; }
[data-costrow] { padding: 1.4rem 1.15rem !important; }

/* Caption swaps wording: hovering is meaningless on touch, tapping on a mouse. */
.on-touch { display: none; }

@media (max-width: 900px) {
  .whatgrid { grid-template-columns: 1fr; }
  .whatcol > [data-costlist] { margin-top: clamp(1.8rem,5vw,2.4rem); }
  .on-pointer { display: none; }
  .on-touch { display: inline; }
  /* Panels are moved under their own row and only the open one is shown, so the
     list reads as an accordion rather than driving a panel further down. */
  .whatart { display: none; }
  [data-costlist] [data-costart] { display: none; opacity: 1 !important; padding-bottom: 1.4rem; }
  [data-costlist] [data-costart].open { display: block; }
  [data-costrow] { width: 100%; }
  [data-costart] > div:nth-child(3) { padding: clamp(1.2rem,4vw,1.7rem) !important; }
}

/* ---------- homes carousel ----------
   A scroll-snap track rather than a slider library: it is swipeable on touch,
   scrollable with the wheel, keyboard-focusable, and the arrows just nudge
   scrollLeft. Nothing breaks if the JS never runs. */
.homes-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.homes-nav { display: flex; gap: .5rem; flex: none; }
.homes-arrow {
  width: 44px; height: 44px; flex: none; cursor: pointer;
  background: transparent; color: var(--band-ink);
  border: 1px solid var(--band-rule); border-radius: 50%;
  font-size: 1.35rem; line-height: 1; font-family: var(--f-body);
  transition: background .2s ease, border-color .2s ease, opacity .2s ease;
}
.homes-arrow:hover { background: rgba(227,215,199,.09); border-color: var(--cream); }
.homes-arrow[disabled] { opacity: .3; cursor: default; }
.homes-arrow[disabled]:hover { background: transparent; border-color: var(--band-rule); }

.homes-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc(33.333% - 1rem);
  gap: 1.5rem; margin-top: clamp(1.6rem,3vw,2.2rem);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; padding-bottom: .4rem;
}
.homes-track::-webkit-scrollbar { display: none; }
@media (max-width: 1000px) { .homes-track { grid-auto-columns: calc(50% - .75rem); } }
@media (max-width: 700px)  { .homes-track { grid-auto-columns: 82%; } }

.home-card { scroll-snap-align: start; text-decoration: none; color: var(--band-ink); display: block; }
.home-shot {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border: 1px solid var(--band-rule); background: color-mix(in srgb, var(--band) 88%, var(--cream) 12%);
}
.home-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.22,.61,.36,1); }
.home-card:hover .home-shot img { transform: scale(1.04); }
.home-city {
  position: absolute; top: .8rem; left: .8rem;
  background: rgba(20,26,24,.62); color: var(--cream);
  font-size: .66rem; letter-spacing: .13em; text-transform: uppercase;
  padding: .3rem .65rem; border-radius: 100rem;
}
.home-card h3 { margin: .95rem 0 .25rem; font-size: 1.14rem; }
.home-card p  { color: var(--band-soft); font-size: .93rem; }
.home-go { display: inline-block; margin-top: .6rem; font-size: .86rem; font-weight: 600; color: var(--cream); }
.home-card:hover .home-go { color: #E8C87A; }

@media (max-width: 700px) {
  .homes-head { flex-direction: column; align-items: flex-start; gap: 1.1rem; }
}

/* ---------- key + lock ---------- */
.lockwrap { position: relative; height: 112px; display: flex; align-items: flex-end; gap: 10px; cursor: pointer; outline: none; }
/* The key sits below the lock the whole time, so the blade is occluded by the
   lock body exactly as far as it has slid in, while the bow stays outside and
   visible. Flipping the whole key behind mid-travel hid the bow too. */
.lock-key { position: relative; z-index: 1; display: flex; align-items: center; margin-bottom: 12px; transition: transform .6s cubic-bezier(.3,.7,.3,1); }
.key-bow { width: 15px; height: 15px; border: 3px solid var(--band-soft); border-radius: 50%; }
.key-shaft { position: relative; width: 28px; height: 3px; background: var(--band-soft); }
.key-teeth { position: absolute; right: 3px; top: 3px; width: 3px; height: 8px; background: var(--band-soft); }
.lock { position: relative; z-index: 2; }
.lock-shackle { width: 24px; height: 15px; border: 3px solid var(--band-soft); border-bottom: none; border-radius: 12px 12px 0 0; margin: 0 auto -1px; transition: transform .4s ease .15s, border-color .4s ease; }
.lock-body { width: 46px; height: 38px; background: rgba(227,215,199,.3); display: flex; align-items: center; justify-content: center; transition: background .4s ease; }
.lock-hole { width: 6px; height: 13px; background: #344C44; border-radius: 3px 3px 0 0; }
.lockwrap:hover .lock-key, .lockwrap:focus-within .lock-key, .lockwrap.in .lock-key { transform: translateX(38px); }
.lockwrap:hover .lock-body, .lockwrap:focus-within .lock-body, .lockwrap.in .lock-body { background: #C8A24A; }
.lockwrap:hover .lock-shackle, .lockwrap:focus-within .lock-shackle, .lockwrap.in .lock-shackle { border-color: #C8A24A; transform: translateY(-5px); }

/* ---------- comparison, differentiated columns ---------- */
.cmp .cluster th { font-family: var(--f-body); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--taupe); }
.cmp tbody td:first-child { font-size: 1rem; }
.pill { display: inline-flex; align-items: center; gap: .38rem; padding: .22rem .62rem; border-radius: 999px; background: rgba(227,215,199,.13); border: 1px solid rgba(227,215,199,.28); font-size: .8rem; font-weight: 600; color: var(--band-ink); }
.pill i { font-style: normal; color: var(--gold); }
.dash { color: rgba(239,232,220,.42); font-size: 1.05rem; }

/* ---------- page grids (responsive, used by templates) ---------- */
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,4vw,3.5rem); align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
.quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 820px) { .quotes { grid-template-columns: 1fr; } }
.stage.marked { grid-template-columns: 44px 170px 1fr; }
@media (max-width: 700px) { .stage.marked { grid-template-columns: 44px 1fr; row-gap: .3rem; } .stage.marked h3 { grid-column: 2; } .stage.marked p { grid-column: 2; } }

/* ---------- stage list ---------- */
.stages { border-top: 1px solid var(--rule); }
.stage { display: grid; grid-template-columns: 190px 1fr; gap: clamp(1rem,3vw,2.2rem); padding: clamp(1.3rem,2.4vw,1.85rem) 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.stage h3 { font-size: clamp(1.25rem,2.3vw,1.6rem); }
.stage p  { color: var(--ink-soft); max-width: 54ch; }
@media (max-width: 700px) { .stage { grid-template-columns: 1fr; gap: .35rem; } }

/* ---------- comparison ---------- */
.tbl-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; min-width: 520px; }
caption { text-align: left; color: var(--ink-soft); font-size: .93rem; padding-bottom: 1rem; max-width: 62ch; }
thead th { font-size: .75rem; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; padding: 0 1rem .9rem; text-align: center; }
thead th:first-child { text-align: left; padding-left: 0; }
.cluster th { font-family: var(--f-display); font-size: 1.12rem; font-weight: 600; text-align: left; padding: 1.8rem 0 .65rem; border-bottom: 1px solid var(--rule); color: var(--ink); }
tbody td { padding: .76rem 1rem; font-size: .96rem; }
tbody td:first-child { padding-left: 0; color: var(--ink); }
tbody td:not(:first-child) { text-align: center; color: var(--ink-soft); font-size: .89rem; }
.yes { color: var(--action); font-weight: 600; }
tbody tr:not(.cluster) + tr:not(.cluster) td { border-top: 1px solid color-mix(in srgb, var(--rule) 55%, transparent); }
/* Rows are grouped into clusters; no hairline under every single row. */

/* ---------- quote ---------- */
.quote { background: var(--ground); border: 1px solid var(--rule); border-radius: var(--r-surface); padding: clamp(1.4rem,2.8vw,1.95rem); }
.quote blockquote { margin: 0 0 1.1rem; font-size: 1rem; line-height: 1.56; }
.quote .who { font-size: .87rem; color: var(--ink-soft); }
.quote .who b { display: block; color: var(--ink); font-weight: 600; font-size: .94rem; font-family: var(--f-display); }
/* Testimonial wording and attribution are reproduced exactly as approved in
   the brochure. Do not trim, reword or re-title the attribution. */

/* ---------- faq ---------- */
.faq { display: grid; border-top: 1px solid var(--rule); max-width: 80ch; }
details { border-bottom: 1px solid var(--rule); }
summary { cursor: pointer; list-style: none; padding: 1.05rem 2.2rem 1.05rem 0; position: relative; font-weight: 600; font-size: 1.02rem; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: .35rem; top: .95rem; font-size: 1.25rem; font-weight: 400; color: var(--ink-soft); line-height: 1; }
details[open] summary::after { content: "\2013"; }
details p { color: var(--ink-soft); padding: 0 2.2rem 1.15rem 0; max-width: 66ch; font-size: .98rem; }
.todo { color: var(--flag); font-weight: 600; font-size: .86rem; display: block; margin-top: .4rem; }

/* ---------- chrome ---------- */
.nav { background: var(--ground); border-bottom: 1px solid var(--rule); }
/* Inner rails match the 1200px column every section uses, so the logo and the
   nav CTA line up with the copy below instead of running to the screen edges. */
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; height: 80px; padding: 0 1.5rem; max-width: 1440px; margin: 0 auto; }
/* The mark is the brand logo itself. Its PNG is pre-trimmed of the empty
   canvas the source file carries, so height alone sets its size here. */
.mark img { display: block; height: 56px; width: auto; }
@media (max-width: 560px) { .mark img { height: 36px; } }
.mark { font-family: var(--f-display); font-weight: 700; font-size: 1.2rem; letter-spacing: .02em; color: var(--ink); text-decoration: none; }
.mark span { display: block; font-family: var(--f-body); font-size: .58rem; letter-spacing: .38em; font-weight: 500; color: var(--ink-soft); margin-top: -2px; }
.nav-links { display: flex; gap: 1.6rem; }
.nav-links a { color: var(--ink-soft); text-decoration: none; font-size: .92rem; }
.nav-links a:hover { color: var(--ink); }
/* Nav must stay on one line at desktop and never exceed 80px tall. */

/* ---------- mobile nav ----------
   Below 900px the five links plus the CTA needed 580px in a 375px bar, so the
   row overflowed and took the whole page's horizontal scroll with it, pushing
   the CTA off-screen entirely. They now live in a panel behind a toggle. */
.nav-panel { display: flex; align-items: center; justify-content: flex-end; gap: clamp(1.2rem,2.5vw,2rem); flex: 1; }
.nav-toggle { display: none; }

@media (max-width: 900px) {
  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 46px; height: 46px; flex: none; padding: 0 11px; cursor: pointer;
    background: transparent; border: 1px solid var(--band-rule); border-radius: var(--r-control);
  }
  .nav-toggle span { display: block; height: 1.5px; background: var(--band-ink); transition: transform .25s ease, opacity .25s ease; }
  .nav.open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav.open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  .nav-panel {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--band); border-bottom: 1px solid var(--band-rule);
    padding: .6rem 1.5rem 1.3rem; box-shadow: 0 18px 40px rgba(20,26,24,.3);
  }
  .nav.open .nav-panel { display: flex; }
  .nav-panel .nav-links { flex-direction: column; align-items: stretch; gap: 0; }
  /* 52px rows: comfortably past the 44px minimum, and full width so the whole
     row is the target rather than just the words. */
  .nav-panel .nav-links a { padding: .95rem .2rem; font-size: 1.02rem; border-bottom: 1px solid var(--band-rule); }
  .nav-panel .act { margin-top: 1rem; width: 100%; padding: 1rem 1.2rem; }
}



.foot { background: var(--band); color: var(--band-ink); padding: clamp(2rem,4vw,3rem) 1.5rem 1.6rem; }
.foot-top { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem,5vw,4rem); padding-bottom: 2rem; border-bottom: 1px solid var(--band-rule); max-width: 1440px; margin: 0 auto; }
@media (max-width: 780px) { .foot-top { grid-template-columns: 1fr; } }
.foot h2 { margin-bottom: .8rem; }
.foot dl { margin: 0; display: grid; gap: 1rem; }
.foot dt { font-size: .73rem; letter-spacing: .17em; text-transform: uppercase; color: var(--band-soft); margin-bottom: .14rem; }
.foot dd { margin: 0; }
.foot dd a { color: var(--band-ink); text-decoration: none; border-bottom: 1px solid var(--band-rule); }
.foot-base { padding-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem 1.8rem; justify-content: space-between; font-size: .85rem; color: var(--band-soft); max-width: 1440px; margin: 0 auto; }
@media (max-width: 900px) {
  .foot dd a, .foot-base a { display: inline-block; padding: .65rem 0; }
  .mark { display: inline-flex; align-items: center; min-height: 44px; }
  .foot dl { gap: 1.3rem; }
}
.foot-base a { color: var(--band-soft); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }