/* ============ HOMEPAGE SECTIONS 3-10 + FOOTER ============
   Spacious, dark, one accent. Every section is readable without JS; js/reveal.js + js/home.js add the motion. */
.types, .process, .price, .areas, .faq, .quote { padding: clamp(100px, 10vw, 170px) var(--gutter) 0; }
.sec-title { font-weight: 600; letter-spacing: -.04em; line-height: .98; }

/* ---------- 3. GARAGE TYPES: photo cards that open on hover ---------- */
.types__title { margin: 22px 0 0; padding-bottom: clamp(22px, 2.4vw, 36px); border-bottom: 1px solid var(--line); font-size: clamp(44px, 5.6vw, 96px); font-weight: 600; line-height: .98; letter-spacing: -.04em; }
.types__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 18px); margin: clamp(26px, 2.6vw, 40px) 0 0; padding: 0; list-style: none; }
.gtype__card { position: relative; display: block; aspect-ratio: 4 / 4.2; overflow: hidden; color: var(--ink); text-decoration: none; background: var(--panel); }
.gtype__card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out), filter .6s; }
.gtype__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,10,.92) 0%, rgba(10,10,10,.35) 45%, rgba(10,10,10,.05) 75%); transition: background-color .6s; }
.gtype__plus { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; background: rgba(42, 42, 42, .82); transition: background-color .35s; }
.gtype__plus::after { transition: transform .45s var(--ease); }
.gtype__plus::before, .gtype__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--ink); transform: translate(-50%, -50%); }
.gtype__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.gtype__body { position: absolute; left: clamp(16px, 1.6vw, 26px); right: clamp(16px, 1.6vw, 26px); bottom: clamp(16px, 1.6vw, 26px); }
.gtype__title { display: block; font-size: clamp(22px, 1.9vw, 30px); font-weight: 600; line-height: 1.08; letter-spacing: -.02em; }
.gtype__desc, .gtype__go { display: block; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .7s var(--ease), opacity .5s, margin .7s var(--ease); }
.gtype__desc { font-size: 14px; line-height: 1.55; color: rgba(245, 244, 241, .82); }
.gtype__go { font: 600 12px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--accent-hot); }
.gtype__card:hover img, .gtype__card:focus-visible img { transform: scale(1.06); }
.gtype__card:hover .gtype__shade, .gtype__card:focus-visible .gtype__shade { background-color: rgba(10, 10, 10, .45); }
.gtype__card:hover .gtype__plus, .gtype__card:focus-visible .gtype__plus { background: var(--accent); }
.gtype__card:hover .gtype__plus::after, .gtype__card:focus-visible .gtype__plus::after { transform: translate(-50%, -50%) rotate(0deg); }
.gtype__card:hover .gtype__desc, .gtype__card:focus-visible .gtype__desc { max-height: 160px; opacity: 1; margin-top: 12px; }
.gtype__card:hover .gtype__go, .gtype__card:focus-visible .gtype__go { max-height: 30px; opacity: 1; margin-top: 16px; }
@media (hover: none) {
  .gtype__shade { background-color: rgba(10, 10, 10, .35); }
  .gtype__desc { max-height: 200px; opacity: 1; margin-top: 10px; }
  .gtype__go { max-height: 30px; opacity: 1; margin-top: 14px; }
}

/* ---------- 4. PROCESS: big statement + zig-zag stage cards ---------- */
.process__intro { margin-left: 34%; max-width: 900px; }
.process__statement { margin: 22px 0 0; font-size: clamp(28px, 3vw, 50px); font-weight: 600; line-height: 1.12; letter-spacing: -.025em; }
.process__list { margin: clamp(70px, 8vw, 130px) 0 0; padding: 0; list-style: none; }
.pcard { position: relative; width: min(56%, 780px); }
.pcard + .pcard { margin-top: clamp(14px, 1.6vw, 24px); }
.pcard--l { margin-left: 4%; }
.pcard--r { margin-left: auto; margin-right: 4%; }
.pcard__n { display: block; margin-bottom: 8px; font: 500 12px/1 var(--mono); letter-spacing: .06em; color: var(--ink); }
.pcard__n i { font-style: normal; color: var(--muted); margin-left: 4px; }
.pcard--r .pcard__n { text-align: right; }
.pcard__box { position: relative; min-height: clamp(220px, 19vw, 300px); padding: clamp(24px, 2.4vw, 38px); background: #1b1b1b; border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 36px; transition: background-color .4s; }
.pcard__box:hover { background: #202020; }
.pcard__rings { position: absolute; right: 0; top: 0; width: 70%; height: 100%; pointer-events: none; }
.pcard__rings circle { fill: none; stroke: rgba(245, 244, 241, .1); stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset 2.2s var(--ease-out) .3s; }
.pcard.is-in .pcard__rings circle, .no-js .pcard__rings circle { stroke-dashoffset: 0; }
.pcard__box h3 { position: relative; margin: 0; font-size: clamp(28px, 3vw, 48px); font-weight: 600; line-height: 1.02; letter-spacing: -.03em; }
.pcard__box p { position: relative; margin: 0; max-width: 46ch; font-size: 14px; line-height: 1.6; color: rgba(245, 244, 241, .72); padding-right: 60px; }
.pcard__arrow { position: absolute; right: clamp(18px, 1.8vw, 28px); bottom: clamp(18px, 1.8vw, 28px); display: grid; place-items: center; width: 34px; height: 34px; background: var(--accent); }
.pcard__arrow svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 1.6; transition: transform .4s var(--ease-out); }
.pcard__box:hover .pcard__arrow svg { transform: translate(2px, 2px); }
.js .pcard--l[data-rise] { transform: translate(-40px, 30px); }
.js .pcard--r[data-rise] { transform: translate(40px, 30px); }
.js .pcard.is-in { transform: none; }
.process__note { margin: 40px 4% 0; text-align: right; font: 500 12px/1.5 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

/* ---------- 5. ROOMS: pinned photo, cards scroll over it ---------- */
.rooms { position: relative; padding-top: clamp(100px, 10vw, 170px); }
.rooms__title { position: relative; z-index: 3; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0 4vw; margin: 0 0 -.42em; padding: 0 var(--gutter); font-size: clamp(48px, 7.4vw, 128px); font-weight: 600; line-height: 1; letter-spacing: -.045em; }
.rooms__title span:last-child { margin-top: .25em; }
.rooms__stage { position: relative; }
.rooms__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.rooms__bgs img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity 1s ease, transform 2.4s var(--ease-out); }
.rooms__bgs img.is-on { opacity: 1; transform: scale(1); }
.rooms__shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(17,17,17,.85) 0%, rgba(17,17,17,.15) 22%, rgba(17,17,17,.15) 78%, rgba(17,17,17,.9) 100%); }
.rooms__pager { position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%); display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rooms__pager li { width: 34px; padding: 7px 0; text-align: center; background: rgba(17, 17, 17, .55); font: 500 11px/1 var(--mono); color: rgba(245, 244, 241, .55); transition: background-color .4s, color .4s; }
.rooms__pager li.is-on { background: var(--ink); color: var(--bg); }
.rooms__cards { position: relative; z-index: 2; margin: -100vh 0 0; margin-top: -100svh; padding: 42vh 0 30vh; list-style: none; }
.rcard { width: min(360px, 82vw); margin: 0 auto 62vh; }
.rcard:last-child { margin-bottom: 0; }
.rcard a { display: block; position: relative; padding: 12px; background: var(--ink); color: var(--bg); text-decoration: none; box-shadow: 0 30px 60px rgba(0, 0, 0, .35); transition: transform .5s var(--ease-out); }
.rcard a:hover { transform: translateY(-6px); }
.rcard__top { display: flex; justify-content: space-between; align-items: center; font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.rcard__top i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-hot); }
.rcard__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin: 12px 0 14px; }
.rcard__title { display: block; font-size: 28px; font-weight: 600; line-height: 1.05; letter-spacing: -.03em; }
.rcard__desc { display: block; margin: 6px 52px 4px 0; font-size: 13px; line-height: 1.5; color: #555; }
.rcard__go { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(17, 17, 17, .25); }
.rcard__go svg { width: 13px; height: 13px; fill: none; stroke: var(--bg); stroke-width: 1.6; }

/* ---------- 6. PRICES: growing rule + counting figures ---------- */
.price { text-align: center; }
.price__rule { display: block; height: 6px; background: var(--ink); transform-origin: 0 50%; }
.js .price__rule { transform: scaleX(0); transition: transform 1.6s var(--ease); }
.js .price.is-in .price__rule { transform: none; }
.price__title { margin: clamp(60px, 7vw, 110px) auto 0; max-width: 16ch; font-size: clamp(38px, 4.6vw, 78px); font-weight: 600; line-height: 1; letter-spacing: -.04em; }
.price__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 40px); max-width: 1180px; margin: clamp(50px, 5vw, 80px) auto 0; padding: 0; list-style: none; text-align: left; }
.price__list li { padding-top: 22px; border-top: 1px solid rgba(245, 244, 241, .2); }
.price__k { display: block; font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.price__list b { display: block; margin-top: 14px; font-size: clamp(34px, 3.6vw, 60px); font-weight: 600; letter-spacing: -.035em; white-space: nowrap; }
.price__list b i { font-style: normal; color: var(--accent-hot); }
.price__note { max-width: 560px; margin: 38px auto 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.price__ctas { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 30px; }

/* ---------- 7. AREAS: accent block sweeps across, photo appears behind it ---------- */
.areas__lead { margin: 26px 0 0; font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.areas__pins { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin: 12px 0 28px; padding: 0; list-style: none; }
.areas__pins a { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: clamp(15px, 1.15vw, 18px); font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--line); transition: color .25s; }
.areas__pins a:hover { color: var(--accent-hot); }
.areas__pins svg { flex-shrink: 0; width: 18px; height: 18px; fill: var(--accent-hot); stroke: none; }
.areas__pins svg circle { fill: var(--bg); }
@media (max-width: 520px) { .areas__pins { grid-template-columns: 1fr; } }
.areas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 110px); align-items: center; }
.js @keyframes sweep { 0% { transform: translateX(-101%); } 45%, 55% { transform: translateX(0); } 100% { transform: translateX(101%); } }
@keyframes appear { 0%, 45% { opacity: 0; transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } }
.areas__text { max-width: 600px; }
.areas__title { margin: 22px 0 24px; font-size: clamp(40px, 4.4vw, 76px); font-weight: 600; line-height: 1; letter-spacing: -.04em; }
.areas__text > p { margin: 0 0 26px; font-size: 15px; line-height: 1.65; color: rgba(245, 244, 241, .78); }
.areas__pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 30px; padding: 0; list-style: none; }
.areas__pills li { padding: 9px 14px; border: 1px solid rgba(245, 244, 241, .18); border-radius: 40px; font: 500 12px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; transition: border-color .3s, color .3s; }
.areas__pills li:hover { border-color: var(--accent-hot); color: var(--accent-hot); }

/* ---------- 8. FAQ ---------- */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 6vw, 110px); align-items: start; }
.faq__aside { position: sticky; top: 110px; }
.faq__title { margin: 22px 0 0; font-size: clamp(38px, 4vw, 66px); font-weight: 600; line-height: 1; letter-spacing: -.04em; }
.faq__count { margin: clamp(30px, 4vw, 60px) 0 0; font-size: clamp(90px, 10vw, 170px); font-weight: 600; line-height: .8; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px rgba(245, 244, 241, .35); }
.faq__count i { font-style: normal; font-size: 14px; letter-spacing: .04em; color: var(--muted); -webkit-text-stroke: 0; margin-left: 10px; }
.faq__list { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.qa { border-top: 1px solid var(--line); }
.qa summary { display: grid; grid-template-columns: 44px 1fr 34px; align-items: center; gap: 12px; padding: clamp(20px, 2vw, 30px) 0; cursor: pointer; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa__n { font: 500 12px/1 var(--mono); color: var(--muted); }
.qa__q { font-size: clamp(18px, 1.5vw, 24px); font-weight: 600; line-height: 1.25; letter-spacing: -.015em; transition: color .3s; }
.qa summary:hover .qa__q { color: var(--accent-hot); }
.qa__icon { position: relative; width: 34px; height: 34px; background: var(--panel-2); transition: background-color .3s, transform .5s var(--ease); }
.qa__icon::before, .qa__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--ink); transform: translate(-50%, -50%); }
.qa__icon::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .4s var(--ease); }
.qa details[open] .qa__icon { background: var(--accent); }
.qa details[open] .qa__icon::after { transform: translate(-50%, -50%) rotate(0); }
.qa__a { padding: 0 46px clamp(20px, 2vw, 30px) 56px; }
.qa__a p { margin: 0; max-width: 62ch; font-size: 15px; line-height: 1.65; color: rgba(245, 244, 241, .75); }
.qa details[open] .qa__a { animation: qa-open .5s var(--ease-out); }
@keyframes qa-open { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- 9. QUOTE FORM ---------- */
.quote { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(30px, 6vw, 110px); align-items: start; padding-bottom: clamp(70px, 8vw, 120px); }
.quote__title { margin: 22px 0 22px; font-size: clamp(40px, 4.4vw, 74px); font-weight: 600; line-height: 1; letter-spacing: -.04em; }
.quote__intro > p { margin: 0 0 18px; max-width: 46ch; font-size: 15px; line-height: 1.65; color: rgba(245, 244, 241, .78); }
.quote__mail a { overflow-wrap: anywhere; color: var(--ink); text-decoration-color: var(--accent-hot); text-underline-offset: 4px; }
.quote__form { display: grid; grid-template-columns: 1fr 1fr; gap: 26px clamp(16px, 2vw, 30px); padding: clamp(24px, 3vw, 46px); background: #1b1b1b; border: 1px solid var(--line); }
.field { display: grid; gap: 8px; }
.field--wide, .quote__cue, .quote__send { grid-column: 1 / -1; }
.field label { font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea { width: 100%; padding: 10px 0; background: transparent; color: var(--ink); font: 400 16px/1.4 var(--font); border: 0; border-bottom: 1px solid rgba(245, 244, 241, .22); border-radius: 0; transition: border-color .3s; }
.field select { appearance: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23f5f4f1' stroke-width='1.5'/%3E%3C/svg%3E") right 2px center / 12px no-repeat; }
.field select option { background: #1b1b1b; color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--accent-hot); }
.field textarea { resize: vertical; }
/* attention cue at the top of the form: a softly pinging dot, and a glint that runs along the top edge now and then */
.quote__form { position: relative; }
.quote__cue { display: flex; align-items: center; gap: 16px; margin: 0 0 4px; font: 600 clamp(19px, 1.6vw, 26px)/1.15 var(--font); letter-spacing: -.02em; color: var(--ink); }
.quote__ping { position: relative; width: 13px; height: 13px; box-shadow: 0 0 14px 2px rgba(var(--accent-rgb), .45); border-radius: 50%; background: var(--accent-hot); flex-shrink: 0; }
.quote__ping::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent-hot); animation: ping 2.6s cubic-bezier(.2, .6, .3, 1) infinite; }
@keyframes ping { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(3); opacity: 0; } }
.quote__form::after { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0 40%, var(--accent-hot) 50%, transparent 60% 100%) 0 0 / 250% 100% no-repeat; animation: glint 6s ease-in-out 1s infinite; }
@keyframes glint { 0% { background-position: 100% 0; } 35%, 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .quote__ping::after, .quote__form::after { animation: none; } .quote__form::after { display: none; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.quote__send { justify-self: start; }

/* ---------- 10. FOOTER: white menu card + dark contact card above a giant wordmark ----------
   Both cards end above the word, so "garage conversions." shows in full, edge to edge. */
.foot { --fw: min(calc((100vw - 2 * var(--gutter)) / 8.6), 320px); position: relative; padding: 0 var(--gutter); overflow: hidden; }
.foot__cards { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 12px; align-items: stretch; }
.foot__menu { display: grid; grid-template-columns: 1fr auto; align-content: space-between; gap: 30px 20px; padding: clamp(22px, 2.4vw, 34px); background: var(--ink); color: var(--bg); min-height: 270px; }
.foot__menu nav { display: grid; gap: 4px; }
.foot__menu nav a { font-size: clamp(19px, 1.5vw, 24px); font-weight: 600; letter-spacing: -.02em; text-decoration: none; }
.foot__menu nav a:hover { color: var(--accent); }
.foot__legal { margin: 0; padding: 0; list-style: none; text-align: right; font-size: 13px; line-height: 1.9; }
.foot__legal a { text-decoration: none; }
.foot__legal a:hover { text-decoration: underline; }
.foot__small { grid-column: 1 / -1; margin: 0; font: 500 10px/1.5 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: rgba(17, 17, 17, .6); }
.foot__contact { position: relative; display: grid; grid-template-columns: 1.5fr 1fr; align-content: start; gap: 26px 28px;
  min-height: 270px;
  padding: clamp(22px, 2.4vw, 34px); background: rgba(46, 46, 46, .58); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
.foot__col { display: grid; gap: 22px; align-content: start; }
.foot__col:last-of-type { justify-items: end; text-align: right; }
.foot__k { display: block; margin-bottom: 8px; font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.foot__col a:not(.btn), .foot__col p { margin: 0; font-size: clamp(16px, 1.25vw, 20px); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.foot__col a:not(.btn):hover { color: var(--accent-hot); }
.foot__tag { position: absolute; left: clamp(22px, 2.4vw, 34px); bottom: clamp(18px, 2vw, 28px); margin: 0; font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(245, 244, 241, .55); }
.foot__word { position: relative; z-index: 1; margin: calc(var(--fw) * .12) 0 0 -.035em; padding-bottom: calc(var(--fw) * .2);   /* clear of the cards, descenders fully shown */
  font-size: var(--fw); font-weight: 600; line-height: 1; letter-spacing: -.05em; white-space: nowrap; pointer-events: none; }
.foot__word i { font-style: normal; color: var(--accent-hot); }
.foot__place { display: block; margin-top: .2em; font-size: .3em; line-height: 1; letter-spacing: -.04em; color: var(--muted); }   /* smaller grey "sheffield." under the word, as in the hero */

/* ---------- phones / tablets ---------- */
@media (max-width: 900px) {
  .process__intro { margin-left: 0; }
  .pcard, .pcard--l, .pcard--r { width: 100%; margin-left: 0; margin-right: 0; }
  .pcard--r .pcard__n { text-align: left; }
  .areas, .faq, .quote { grid-template-columns: 1fr; }
  .faq__aside { position: static; }
  .faq__count { display: none; }
  .foot__cards { grid-template-columns: 1fr; }
  .foot__contact { grid-template-columns: 1fr; min-height: 0; }
  .foot__tag { position: static; margin-top: 6px; line-height: 1.5; }
  .foot__col:last-of-type { justify-items: start; text-align: left; }
}
@media (max-width: 760px) {
  .types__list { grid-template-columns: 1fr; }
  .gtype__card { aspect-ratio: 4 / 3.6; }
  .price__list { grid-template-columns: 1fr; }
  .rooms__title { margin-bottom: -.3em; }
  .rooms__pager { display: none; }
  .quote__form { grid-template-columns: 1fr; }
  .qa__a { padding-left: 0; padding-right: 0; }
  .qa summary { grid-template-columns: 32px 1fr 30px; }
}
@media (prefers-reduced-motion: reduce) {
    }

/* touch screens: comfortable tap targets for small links */
@media (max-width: 900px) {
  .foot__menu nav a { display: block; padding: 6px 0; }
  .foot__legal { display: flex; flex-wrap: wrap; gap: 4px 18px; text-align: left; grid-column: 1 / -1; }
  .foot__legal a, .quote__mail a, .foot__col a:not(.btn) { display: inline-block; padding: 12px 0; }
  .foot__menu { grid-template-columns: 1fr; }
}

/* phones: the footer wordmark stacks on two lines so it stays big ("conversions." ~5.7em wide) */
@media (max-width: 760px) {
  .foot { --fw: calc((100vw - 2 * var(--gutter)) / 5.7); }
  .foot__word { white-space: normal; line-height: .92; margin-top: calc(var(--fw) * .2); }
  .foot__place { font-size: .42em; margin-top: .12em; }
}