/* Shoot in Malta. White, one face, a strict grid.
   Grid: 12 columns, 30 gutter, 15 margin at 1440 (fluid); 4 columns, 12 gutter, 15 margin on a phone.
   Type: three styles only. Display 32/36 (24/28 on a phone), Body 14/20, Small 12/16.
   Spacing only from 4, 8, 12, 16, 24, 32, 48, 72, 96, 128. No underlines: the active item is black, the rest grey.
   One family, Neue Haas Grotesk from ANCC Studio's Adobe Fonts kit (oir0eng): Text for body and small, Display for the
   display size. Regular and Medium only. Figures are tabular so numbers line up down a rule. */
:root {
  --ink: #121212; --mute: #6b6b6b; --paper: #fff; --rule: #e5e5e5; --slot: #f1f0ee; --box: #fafafa;
  --tag: rgba(10, 10, 10, .06); --tag-hover: rgba(10, 10, 10, .1); --tag-on: rgba(10, 10, 10, .92); --tag-text: #6e6960;
  --f: "neue-haas-grotesk-text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fd: "neue-haas-grotesk-display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --stage: 72px; /* clear space at the foot of every page, so the concierge never stands on the last words */
  --cols: 4; --gut: 12px; --m: 15px; --bar: 32px;
  --open: 48px; --close: 48px; --title: 48px; --home: 96px;
}
@media (min-width: 768px) {
  :root { --cols: 12; --gut: clamp(16px, 2.0834vw, 30px); --open: 96px; --close: 72px; --title: 128px; --home: 200px; --stage: 96px; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; padding-bottom: calc(var(--bar) + var(--stage)); background: var(--paper); color: var(--ink); font: 400 14px/20px var(--f); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, dl, dd, figure, fieldset, legend, ul, ol { margin: 0; padding: 0; border: 0; font-weight: 400; font-size: inherit; }
h1, h2, h3, .display { text-wrap: balance; }
p, dd, li { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
button, input { font: inherit; color: inherit; }
.mute { color: var(--mute); }
.small { font-size: 12px; line-height: 16px; }
.display { font-family: var(--fd); font-weight: 500; font-size: 24px; line-height: 28px; letter-spacing: -.01em; }
.display, .n, .head h2, .fig, .coords, .cap, .step input, .stat { font-variant-numeric: tabular-nums; }
@media (min-width: 768px) { .display { font-size: 32px; line-height: 36px; } }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The grid. Everything starts on a column and spans whole columns. */
.g { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gut); padding-inline: var(--m); }
.all { grid-column: 1 / -1; }
.mid { grid-column: 1 / -1; }
.text-col { grid-column: 1 / -1; }
.half { grid-column: span 4; }
.q { grid-column: span 2; }
@media (min-width: 768px) {
  .mid { grid-column: 3 / span 8; }
  .text-col { grid-column: 4 / span 6; }
  .half { grid-column: span 6; }
  .q { grid-column: span 3; }
}

/* Tags and the button */
.tag { display: inline-block; padding: 7px 12px; border: 0; border-radius: 4px; background: var(--tag); color: var(--tag-text); font-size: 12px; line-height: 12px; letter-spacing: .02em; white-space: nowrap; cursor: pointer; transition: background-color .2s, color .2s; }
.tag:hover { background: var(--tag-hover); color: var(--ink); }
.tag.outline { background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); color: var(--tag-text); cursor: default; }
.tag[aria-current], .tag.on, input:checked + .tag { background: var(--tag-on); color: var(--paper); }
input:focus-visible + .tag, .tag:focus-visible, .btn:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pick { position: absolute; opacity: 0; pointer-events: none; }
.btn { display: inline-block; padding: 6px 10px 7px; border: 0; border-radius: 3px; background: var(--ink); color: var(--paper); line-height: 20px; white-space: nowrap; cursor: pointer; transition: background-color .2s; }
.btn:hover { background: #000; }

/* Title and statement: centred over columns 3 to 10 */
.title { padding-block: var(--title); text-align: center; }
.title.tight { padding-bottom: 72px; }
.title .mid { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.statement { padding-block: var(--home); text-align: center; }
@media (max-width: 767px) { .title.tight { padding-bottom: 48px; } }

/* Section heads: 6 + 6 */
.head { padding-block: 12px; border-top: 1px solid var(--rule); }
.head h2 { grid-column: span 2; }
.head .note { grid-column: span 2; text-align: right; color: var(--mute); }
@media (min-width: 768px) { .head h2, .head .note { grid-column: span 6; } }
.head .note a:hover { color: var(--ink); }
.sec-body { padding-bottom: var(--close); }
.sec-body > .tiles:first-child { padding-top: 24px; }
.sec-body > .boxes:first-child, .sec-body > .pics:first-child, .sec-body > .table:first-child, .sec-body > .prose:first-child { padding-top: 48px; }
.text { padding-block: 48px; text-align: center; }
.big .display { grid-column: 1 / -1; text-align: left; text-wrap: pretty; }
.text + .boxes + .wide, .boxes + .boxes { padding-top: var(--gut); }

/* Pictures */
.slot { display: block; background: var(--slot); overflow: hidden; transition: background-color .4s; }
.hero .slot { grid-column: 1 / -1; aspect-ratio: 3 / 4; }
.wide .slot { grid-column: 1 / -1; aspect-ratio: 1410 / 600; }
.pics { row-gap: var(--gut); }
.pics .slot { aspect-ratio: 690 / 860; }
.pics.low .slot { aspect-ratio: 4 / 5; }
@media (min-width: 768px) { .hero .slot { aspect-ratio: 1410 / 760; } .hero.low .slot { aspect-ratio: 1410 / 640; } }
.empty { display: grid; place-items: center; color: var(--mute); font-size: 12px; line-height: 16px; }

/* Location tiles: 3 + 3 + 3 + 3 (2 + 2 on a phone). On hover the name rolls up and the coordinates roll in. */
.tiles { row-gap: 24px; }
.tile { display: block; }
.tile .slot { aspect-ratio: 3 / 4; }
.tile:hover .slot { background: #e5e5e3; }
.cap { display: flex; gap: 8px; padding-top: 8px; font-size: 12px; line-height: 16px; white-space: nowrap; }
.cap .n { color: var(--mute); }
.roll { display: block; height: 16px; overflow: hidden; min-width: 0; }
.roll > span { display: block; overflow: hidden; text-overflow: ellipsis; transition: transform .4s cubic-bezier(.3, 0, .2, 1); }
@media (hover: hover) { .tile:hover .roll > span, .tile:focus-visible .roll > span { transform: translateY(-100%); } }
.tile[hidden] { display: none; }

/* Boxes: facts, figures, logos. One tint, 4px corners, 20px padding, no keylines. */
.boxes { row-gap: var(--gut); }
.box { background: var(--box); border-radius: 4px; padding: 20px; }
.fact { display: flex; flex-direction: column; gap: 8px; grid-column: 1 / -1; }
.fact dt, .stat dt { color: var(--mute); font-size: 12px; line-height: 16px; }
.stat { display: flex; flex-direction: column; gap: 12px; grid-column: span 2; }
.stat .display { font-size: 24px; line-height: 28px; }
.stat dd + dd { color: var(--mute); }
@media (min-width: 768px) { .fact, .stat { grid-column: span 3; } .stat .display { font-size: 32px; line-height: 36px; } }
@media (max-width: 767px) { .three .stat { grid-column: 1 / -1; } }
.ask { padding-bottom: var(--close); }
.ask .box { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 48px 24px; text-align: center; }
@media (min-width: 768px) { .ask .box { padding: 96px 20px; } .ask .display { max-width: calc((100vw - 2 * var(--m) + var(--gut)) * 8 / 12 - var(--gut)); } }

/* Logo wall, 4 x 4. A phone reads the names in one line instead. */
.logos { row-gap: var(--gut); padding-top: 24px; }
.logo { grid-column: span 3; height: 120px; display: grid; place-items: center; }
.logo img { width: var(--w); height: auto; max-height: 40px; object-fit: contain; }
.clients-line { display: none; }
@media (max-width: 767px) {
  .logos { display: none; }
  .clients-line { display: block; padding: 24px var(--m) 0; text-align: center; }
}
.note-row { padding-block: 24px; border-top: 1px solid var(--rule); text-align: center; color: var(--mute); }

/* Rows: index, questions, lines. Rows 12 above and below on a thin rule. */
.rows { padding-inline: var(--m); }
.row { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gut); padding-block: 12px; border-top: 1px solid var(--rule); }
.rows > :first-child { border-top: 0; }
.row .name { grid-column: span 3; display: flex; gap: var(--gut); }
.row .name .n { flex: 0 0 40px; color: var(--mute); }
.row .c2, .row .c3 { display: none; color: var(--mute); }
.row .plus { grid-column: span 1; text-align: right; }
.row .wide-cell { grid-column: 1 / -1; color: var(--mute); }
@media (min-width: 768px) {
  .row .c2, .row .c3 { display: block; grid-column: span 3; }
  .row .plus { grid-column: span 3; }
  .row .wide-cell { grid-column: 4 / span 6; }
}
a.row .c2, a.row .c3 { transition: color .2s; }
a.row:hover .c2, a.row:hover .c3 { color: var(--ink); }
.faq details { border-top: 1px solid var(--rule); }
.faq details:first-child { border-top: 0; }
.faq .faq-link { display: block; border-top: 1px solid var(--rule); padding-block: 12px; }
.faq > .faq-link:first-child { border-top: 0; }
.faq summary { display: flex; justify-content: space-between; gap: var(--gut); padding-block: 12px; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding-bottom: 12px; color: var(--mute); }
@media (min-width: 768px) { .faq details p { max-width: calc((100% + var(--gut)) * 6 / 12 - var(--gut)); } }

/* Plain prose and the Italian pages: columns 1 to 8 */
.prose { padding-inline: var(--m); }
@media (min-width: 768px) { .prose > * { max-width: calc((100% + var(--gut)) * 6 / 12 - var(--gut)); margin-inline: auto; } }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: 8px; }
.prose h3 { padding-top: 24px; }
.prose h3 + p { padding-top: 4px; color: var(--mute); }
.prose strong { font-weight: 500; }
.sec-body > p:not([class]) { padding: 24px var(--m) 0; }

/* Comparison table */
.table { padding-inline: var(--m); overflow-x: auto; }
.table table { width: 100%; min-width: 720px; border-collapse: collapse; }
.table th, .table td { padding: 12px var(--gut) 12px 0; border-top: 1px solid var(--rule); text-align: left; vertical-align: top; font-weight: 400; }
.table thead th { border-top: 0; color: var(--mute); }
.table tbody th { color: var(--mute); }

/* Header: 3 + 6 + 3. Wordmark over columns 1 to 3, the menu centred over 4 to 9, the language at the far right. */
.top { padding-block: 16px; row-gap: 12px; align-items: center; }
.top .mark { grid-column: span 2; }
.top .lang { grid-column: span 2; justify-self: end; transition: color .2s; }
.top .lang:hover { color: var(--ink); }
.top .menu { grid-column: 1 / -1; order: 3; }
@media (min-width: 768px) {
  .top .mark { grid-column: span 3; }
  .top .menu { grid-column: 4 / span 6; order: 0; justify-content: center; }
  .top .lang { grid-column: 10 / span 3; }
}

/* The strip: a slim footer fixed to the foot of the screen, where the concierge walks. */
.strip { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; height: var(--bar); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 var(--m); background: var(--paper); border-top: 1px solid var(--rule); font-size: 12px; line-height: 16px; color: var(--mute); }
.strip a { color: var(--ink); }
.strip .coords { text-align: right; }
.rolling > span { transition: transform .4s cubic-bezier(.3, 0, .2, 1); }
.concierge { position: absolute; bottom: calc(100% - 4px); left: 0; width: 66px; height: 114px; pointer-events: none; transform: translateX(var(--x, calc(100vw - 108px))); }
.concierge.walking { transition: transform var(--walk, 6s) linear; }
.concierge > div { width: 100%; height: 100%; }
@media (min-width: 768px) { .concierge { width: 93px; height: 160px; } }

/* Locations: the filter bar, then a panel (a sidecar on desktop, a sheet on a phone).
   Without JavaScript the panel sits in the page and filters with CSS alone, so every location stays in the page. */
.filterbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px var(--m); border-block: 1px solid var(--rule); }
.filterbar .tags { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.filterbar .count { color: var(--mute); white-space: nowrap; }
.finds { padding-top: 24px; padding-bottom: var(--close); }
.none { grid-column: 1 / -1; color: var(--mute); display: none; }
.panel { padding: 16px var(--m) 24px; display: flex; flex-direction: column; background: var(--paper); }
.panel-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; }
.group { display: flex; flex-direction: column; gap: 10px; padding: 16px 0 20px; border-top: 1px solid var(--rule); }
.group legend { float: left; width: 100%; padding: 0 0 10px; color: var(--ink); font-size: 10px; line-height: 12px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; }
.live { display: flex; flex-direction: column; gap: 4px; padding-block: 16px; border-top: 1px solid var(--rule); }
.panel-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--rule); }
html:not(.js) .panel-head, html:not(.js) .panel-foot, html:not(.js) .live, html:not(.js) .count, html:not(.js) .open-filters { display: none; }
.shade { display: none; }
.js .panel { position: fixed; z-index: 70; overflow-y: auto; visibility: hidden; transition: transform .3s cubic-bezier(.3, 0, .2, 1), visibility 0s .3s; }
.js .finder.open .panel { visibility: visible; transform: none; transition: transform .3s cubic-bezier(.3, 0, .2, 1); }
.js .shade { display: block; position: fixed; inset: 0; z-index: 60; background: rgba(10, 10, 10, .2); opacity: 0; pointer-events: none; transition: opacity .3s; }
.js .finder.open .shade { opacity: 1; pointer-events: auto; }
@media (max-width: 767px) { .js .panel { left: 0; right: 0; bottom: 0; max-height: 85svh; border-radius: 12px 12px 0 0; transform: translateY(100%); } }
@media (min-width: 768px) { .js .panel { top: 0; right: 0; bottom: 0; width: max(360px, calc(100vw / 3)); border-left: 1px solid var(--rule); transform: translateX(100%); } }

/* Estimate: inputs 6 + results 6 */
.calc { padding-top: 24px; padding-bottom: var(--open); border-top: 1px solid var(--rule); row-gap: 48px; }
.calc-in, .calc-out { grid-column: 1 / -1; }
@media (min-width: 768px) { .calc-in, .calc-out { grid-column: span 6; } }
.calc-in fieldset + fieldset { margin-top: 32px; }
.label { display: block; padding-bottom: 8px; color: var(--mute); font-size: 12px; line-height: 16px; }
.crow { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 50px; padding-block: 12px; border-top: 1px solid var(--rule); }
.crow > span:first-child { flex: 1; }
.step { display: flex; align-items: center; gap: 16px; }
.step button { width: 28px; height: 28px; padding: 0; border: 1px solid var(--rule); border-radius: 3px; background: var(--paper); cursor: pointer; transition: border-color .2s; }
.step button:hover { border-color: var(--ink); }
html:not(.js) .step button { display: none; }
.step input { width: 32px; padding: 0; border: 0; background: none; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.step input::-webkit-inner-spin-button, .step input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
html:not(.js) .step input { width: 48px; border-bottom: 1px solid var(--rule); }
.line { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--gut); padding-block: 12px; border-top: 1px solid var(--rule); }
.line > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.line .fig { white-space: nowrap; }
.total { display: flex; flex-direction: column; gap: 4px; padding-block: 16px; border-top: 1px solid var(--rule); }
.send { display: flex; align-items: flex-end; gap: var(--gut); padding-top: 24px; border-top: 1px solid var(--rule); }
.field { flex: 1; display: flex; flex-direction: column; gap: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--ink); }
.field input { padding: 0; border: 0; outline: 0; background: none; }
.field input::placeholder { color: var(--mute); }
.hp { position: absolute; left: -9999px; }
.calc-out .small + .small { margin-top: 8px; }
.calc-out .hp + .small { margin-top: 16px; }

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

/* Page-specific spacing */
.facts { padding-top: 32px; padding-bottom: var(--close); }
html:not(.js) .filterbar { display: none; }
.finder .panel { margin-bottom: 0; }
html:not(.js) .finder .panel { padding-top: 0; }
.js .panel-foot { position: sticky; bottom: -24px; margin-bottom: -24px; padding-bottom: 24px; background: var(--paper); }
.cost-note { padding-top: 24px; }
@media (min-width: 768px) { .three .stat, .three .fact { grid-column: span 4; } }

/* Contact: a sidecar on desktop, a sheet on a phone (as the filters); the contact page has the same form inline. */
.side { display: none; }
.js .side { position: fixed; z-index: 70; display: flex; flex-direction: column; padding: 16px var(--m) 24px; background: var(--paper); overflow-y: auto; visibility: hidden; transition: transform .3s cubic-bezier(.3, 0, .2, 1), visibility 0s .3s; }
.js .side.open { visibility: visible; transform: none; transition: transform .3s cubic-bezier(.3, 0, .2, 1); }
.side-shade { display: none; }
.js .side-shade { display: block; position: fixed; inset: 0; z-index: 60; background: rgba(10, 10, 10, .2); opacity: 0; pointer-events: none; transition: opacity .3s; }
.js .side.open + .side-shade { opacity: 1; pointer-events: auto; }
@media (max-width: 767px) { .js .side { left: 0; right: 0; bottom: 0; max-height: 90svh; border-radius: 12px 12px 0 0; transform: translateY(100%); } }
@media (min-width: 768px) { .js .side { top: 0; right: 0; bottom: 0; width: max(360px, calc(100vw / 3)); border-left: 1px solid var(--rule); transform: translateX(100%); } }
.side .panel-head { border-bottom: 1px solid var(--rule); margin-bottom: 8px; }
.side-mail { margin-top: auto; padding-top: 24px; }
.enquiry { display: flex; flex-direction: column; gap: 16px; }
.enquiry .field { flex: none; }
.enquiry textarea { padding: 0; border: 0; outline: 0; background: none; font: inherit; resize: vertical; }
.send-row { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 8px; }
.sent:empty { display: none; }
.contact { padding-top: 24px; padding-bottom: var(--close); border-top: 1px solid var(--rule); row-gap: 48px; }
.contact-info { display: grid; grid-template-columns: 1fr; gap: var(--gut); align-content: start; }
.contact-info .fact { grid-column: auto; }
.three + .cost-note { padding-top: 24px; }
main > .pics { padding-bottom: var(--close); }
.concierge.right > div { transform: scaleX(-1); }
/* The comparison sits on the grid: the row labels over columns 1 to 3, each place over a quarter of the rest. */
.table table { table-layout: fixed; }
.table tr > :first-child { width: 25%; }
/* Centred lines balance, so a short last word never hangs alone. */
.title p, .text-col, .note-row, .ask .display { text-wrap: balance; }


/* Journal (after Mr Porter's Journal): a full-screen lead story, tags, then one Story card repeated on the grid. */
.lead { position: relative; display: grid; color: var(--ink); }
.lead .slot { grid-column: 1 / -1; height: calc(100svh - 58px - var(--bar)); min-height: 480px; }
.lead-text { position: absolute; left: var(--m); bottom: 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: min(690px, calc(100% - 2 * var(--m))); padding: 24px; background: var(--paper); border-radius: 4px; }
.lead .tag, .story-card .tag { cursor: inherit; }
.journal + .ask, .stories + .ask { padding-top: var(--home); }
.jtags { border: 0; margin: 0; padding-bottom: 48px; }
.jtags .tags { justify-content: center; }
.stories { row-gap: 48px; }
.story-card { grid-column: span 2; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; color: var(--ink); }
.story-card .slot { width: 100%; aspect-ratio: 3 / 4; margin-bottom: 4px; }
.story-card .st { transition: color .2s; }
.story-card:hover .st { color: var(--mute); }
.story-card.big { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .lead-text { bottom: 48px; padding: 32px; }
  .story-card { grid-column: span 3; }
  .story-card.big { grid-column: span 6; }
  .story-card.big .st { font-family: var(--fd); font-weight: 500; font-size: 24px; line-height: 28px; }
}

/* A Journal story: one centred column (columns 4 to 9). Each part: picture, tag, heading, paragraph, accordion. */
.byline { padding-top: 24px; text-align: center; }
.byline .all { grid-column: 1 / -1; }
.byline a { color: var(--ink); }
.jump { padding-block: 32px 72px; }
.jump .tags { grid-column: 1 / -1; justify-content: center; }
.story-col { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 72px; }
@media (min-width: 768px) { .story-col { grid-column: 4 / span 6; gap: 96px; } }
.part { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 24px; }
.part > .slot { aspect-ratio: 3 / 2; margin-bottom: 12px; }
.h24 { font-family: var(--fd); font-weight: 500; font-size: 24px; line-height: 28px; letter-spacing: -.01em; }
.acc { padding: 12px 0 0; border-bottom: 1px solid var(--rule); }
.acc details:first-child { border-top: 1px solid var(--rule); }
.acc details p { max-width: none; }
.acc a { color: var(--ink); }
.story + .ask { padding-top: var(--home); }

/* The Menu: header word, then a sidecar (sheet on a phone) of accordion sections. Phones keep the tags inside it. */
.top button.lang { padding: 0; border: 0; background: none; cursor: pointer; }
html:not(.js) .top .lang { display: none; }
@media (max-width: 767px) { .js .top .menu { display: none; } }
html:not(.js) .menu-side { display: block; padding: 24px var(--m); }
.menu-acc { padding: 0; }
.menu-acc details:last-child { border-bottom: 1px solid var(--rule); }
.menu-acc summary { align-items: center; color: var(--ink); font-size: 10px; line-height: 20px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; }
.menu-acc summary::after { font-size: 14px; font-weight: 400; }
.menu-body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-bottom: 16px; }
.menu-body p { padding: 0; color: var(--ink); }
.menu-body a:hover { color: var(--mute); }
.menu-body a[aria-current] { color: var(--mute); }

/* Company line in the strip: the full registered line on wide screens, short on narrow ones. */
.company .long { display: none; }
@media (min-width: 1024px) { .company .long { display: inline; } .company .short { display: none; } }

/* Guide cards: square, small text at the top, big figure bottom left, the animation filling the middle. */
.cards { row-gap: var(--gut); }
.card { position: relative; grid-column: 1 / -1; aspect-ratio: 1; overflow: hidden; display: flex; flex-direction: column; gap: 4px; }
.card > p { position: relative; }
.card .fig { margin-top: auto; }
.anim { position: absolute; inset: 0; }
.anim svg { display: block; }
.card-art { position: absolute; top: 23%; bottom: 22%; left: 8%; right: 6%; }
.card-art img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: right center; }
@media (min-width: 768px) { .card { grid-column: span 6; } }
@media (min-width: 1200px) { .card { grid-column: span 3; } }
.sec-body:empty { padding: 0; }
.cards + .sec, .text + .cards { padding-top: 0; }
.cards, main > .wide, main > .pics { padding-bottom: var(--close); }
main > .tiles { padding-bottom: var(--close); }

/* Work: campaign pictures on the tile grid. */
.shot { aspect-ratio: 3 / 4; }

/* Rows used in place of an uneven set of boxes sit like every other block. */
.sec-body > .rows.facts, .rows.facts { padding-top: 0; }

/* ==== Merged design, 8 Nov: the live site's calm on the new structure. ==== */
/* Titles on the left; a page with a picture lands on it instead. */
.title { padding-block: 72px 48px; text-align: left; }
.title .all { display: flex; flex-direction: column; gap: 24px; }
.title .display { font-size: 32px; line-height: 38px; }
.title p { max-width: 930px; font-size: 20px; line-height: 28px; font-weight: 500; color: var(--ink); }
@media (min-width: 768px) { .title .display { font-size: 48px; line-height: 56px; } }
/* Header: plain words, a tag only on hover. */
.top .mark { font-family: var(--fd); font-weight: 500; font-size: 24px; line-height: 28px; letter-spacing: -.01em; }
@media (min-width: 768px) { .top .mark { font-size: 32px; line-height: 36px; } }
.top .menu .tag, .top .menu .tag[aria-current] { background: none; color: var(--ink); font-size: 14px; font-weight: 500; }
.top .menu .tag:hover { background: var(--tag-hover); }
.top button.lang { color: var(--ink); font-size: 14px; line-height: 20px; font-weight: 500; }
.top.over { position: absolute; z-index: 20; top: 0; left: 0; right: 0; }
.top.over .mark, .top.over .menu .tag, .top.over button.lang { color: #fff; }
.top.over .menu .tag:hover { background: rgba(255, 255, 255, .2); }
/* Big hero: fills the screen, type stays above the strip. */
.bighero { position: relative; display: block; height: 100svh; min-height: 560px; overflow: hidden; background: #2a2a28; color: #fff; }
.bighero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bighero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .45)); pointer-events: none; }
.bighero-text { position: absolute; z-index: 1; left: var(--m); right: var(--m); bottom: calc(var(--bar) + 32px); max-width: 930px; display: flex; flex-direction: column; gap: 12px; }
.bighero-text h1, .bighero-text .h { font-family: var(--fd); font-weight: 500; font-size: 30px; line-height: 36px; letter-spacing: -.01em; text-wrap: balance; }
.bighero-text p { font-size: 17px; line-height: 24px; font-weight: 500; text-wrap: balance; }
@media (min-width: 768px) { .bighero-text h1, .bighero-text .h { font-size: 48px; line-height: 56px; } .bighero-text p { font-size: 20px; line-height: 28px; } }
.bighero.second { height: 70svh; min-height: 420px; }
/* The location system: daylight lines on the first picture. */
.has-line .bighero-text { bottom: calc(var(--bar) + 216px); }
.lightline { position: absolute; z-index: 1; left: var(--m); right: var(--m); bottom: calc(var(--bar) + 16px); display: flex; flex-direction: column; gap: 8px; font-size: 12px; line-height: 16px; }
.ll { position: relative; height: 40px; }
.ll-m { position: absolute; left: 0; top: 6px; }
.ll-t { position: absolute; top: 6px; font-variant-numeric: tabular-nums; }
.ll i { position: absolute; display: block; }
.ll-night { left: 0; right: 0; bottom: 8px; height: 1px; background: rgba(255, 255, 255, .35); }
.ll-day { bottom: 8px; height: 1px; background: #fff; }
.ll-best { bottom: 6px; height: 5px; background: #f7b847; }
.ll-meta { position: absolute; z-index: 1; left: var(--m); bottom: calc(var(--bar) + 132px); font-size: 12px; line-height: 18px; white-space: pre-wrap; font-variant-numeric: tabular-nums; }
@media (min-width: 768px) { .has-line .bighero-text { bottom: calc(var(--bar) + 132px); } .ll-meta { left: auto; right: var(--m); text-align: right; } }
/* Three columns of wider pictures. */
.q { grid-column: span 4; }
.tile .slot { aspect-ratio: 4 / 3; }
.shot { aspect-ratio: 2 / 3; }
@media (max-width: 767px) { .tiles { row-gap: 24px; } }
/* Calm: no tints or pads, except the estimate block and the Guide's crew cards. */
.box { background: none; padding: 0; }
.ask .box, .tinted .box { background: var(--box); }
.ask .box { border-radius: 4px; }
.tinted .box { padding: 20px; border-radius: 4px; }
.card { padding: 20px; }
.logo { background: none; }
/* Logos: one row, scrolling. */
.marquee { overflow: hidden; padding-block: 24px; }
.marquee-row { display: flex; width: max-content; animation: marquee 70s linear infinite; }
.marquee:hover .marquee-row { animation-play-state: paused; }
.marquee .logo { flex: none; width: 260px; height: 96px; padding: 0 32px; }
.marquee .logo img { width: var(--w); }
@keyframes marquee { to { transform: translateX(-50%); } }
.clients-line, .logos { display: none; }
@media (max-width: 767px) { .clients-line { display: none; } }
/* Gallery: whole pictures, easing in. */
.gal { display: flex; flex-direction: column; gap: 48px; padding-bottom: var(--close); }
.gal img { display: block; width: 100%; height: auto; }
.gal { padding-top: 16px; }
.gal-pair img { aspect-ratio: 4 / 5; height: auto; object-fit: cover; }
.gal-pair > div { grid-column: span 2; }
.gal-one > div { grid-column: 1 / -1; }
@media (min-width: 768px) { .gal { gap: 120px; padding-top: 16px; } .gal-pair > div { grid-column: span 6; } .gal-one > div { grid-column: 4 / span 6; } }
.js .reveal { opacity: 0; transform: translateY(32px); transition: opacity 1.4s cubic-bezier(.2, .7, .2, 1), transform 1.4s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.in { opacity: 1; transform: none; }
/* Services: three plain columns. */
.svc { row-gap: 48px; padding-top: 32px; }
.svc > div { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 12px; }
.svc h3 { font-size: 20px; line-height: 28px; font-weight: 500; }
.svc p { color: var(--mute); }
@media (min-width: 768px) { .svc { row-gap: 72px; } .svc > div { grid-column: span 4; } }
/* Keep the white words readable on bright pictures. */
.bighero::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 120px; background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .28)); pointer-events: none; }
.has-line::after { height: 70%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .6)); }

/* ==== Notes 8 Nov, second pass ==== */
/* Type: one face, two weights, four sizes. 48 big, 20 lead, 14 text, 12 small. */
:root { --fd: var(--f); }
.display, .h24, .title .display, .stat .display, .bighero-text h1, .bighero-text .h { font-family: var(--f); font-weight: 500; letter-spacing: 0; font-size: 30px; line-height: 36px; }
.top .mark { font-family: var(--f); font-weight: 500; letter-spacing: 0; font-size: 20px; line-height: 28px; }
.title p, .bighero-text p, .svc h3 { font-size: 17px; line-height: 24px; font-weight: 500; }
.head h2, .head .note, .top .menu .tag, .top button.lang { font-size: 14px; line-height: 20px; font-weight: 500; }
.head .note { font-weight: 400; }
@media (min-width: 768px) {
  .display, .h24, .title .display, .stat .display, .bighero-text h1, .bighero-text .h { font-size: 48px; line-height: 56px; }
  .title p, .bighero-text p, .svc h3, .top .mark { font-size: 20px; line-height: 28px; }
}
/* Logos larger. */
.marquee .logo { width: 360px; height: 140px; padding: 0; }
.marquee .logo img { max-height: 56px; }
/* Footer strip waits for the first scroll, so the landing is only the picture. */
.js .strip { transform: translateY(calc(100% + 170px)); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.js.scrolled .strip { transform: none; }
.bighero-text { bottom: 48px; }
.has-line .bighero-text { bottom: 200px; }
.lightline { bottom: 24px; }
.ll-meta { bottom: 124px; }
@media (min-width: 768px) { .has-line .bighero-text { bottom: 140px; } .ll-meta { bottom: 140px; } }
/* Side panels sit on the grid: the edge falls in the gutter before column 9, so the left keeps whole columns. */
@media (min-width: 768px) {
  .js .panel, .js .side { width: calc(100vw - var(--m) - 8 * (100vw - 2 * var(--m) + var(--gut)) / 12 + var(--gut) / 2); padding-left: calc(var(--gut) / 2); padding-right: var(--m); }
}
/* Keylines: one rule, inset to the margins like the panel's, and fewer of them. */
.head { position: relative; border-top: 0; }
.head::before { content: ""; position: absolute; left: var(--m); right: var(--m); top: 0; height: 1px; background: var(--rule); }
.filterbar { border-block: 0; }
.calc, .contact, .note-row { border-top: 0; }
.panel-head, .side .panel-head { min-height: 60px; margin: 0; border-bottom: 1px solid var(--rule); padding-top: 0; padding-bottom: 0; }
.panel .group:first-of-type { border-top: 0; }
.menu-acc details:last-child { border-bottom: 0; }

/* Footer rule sits on the page margins, like every other rule. */
.strip { border-top: 0; }
.strip::before { content: ""; position: absolute; top: 0; left: var(--m); right: var(--m); height: 1px; background: var(--rule); }

/* His note 8 Nov: Helvetica Neue is the primary face, closest to the live site. Neue Haas from the kit stands in where it isn't installed (Windows, Android). */
:root { --f: "Helvetica Neue", "neue-haas-grotesk-text", Helvetica, Arial, sans-serif; --fd: var(--f); }

/* His note 8 Nov: hero text sits as far from the bottom as from the left. */
.bighero-text { bottom: var(--m); }
.lightline { bottom: var(--m); }
.has-line .bighero-text { bottom: 191px; }
.ll-meta { bottom: 115px; }
@media (min-width: 768px) { .has-line .bighero-text { bottom: 131px; } .ll-meta { bottom: 131px; } }
.half.slot { aspect-ratio: 4 / 5; } /* every side-by-side picture crops 4:5 (Matthew, 8 Nov) */
.half.slot img { width: 100%; height: 100%; object-fit: cover; }
/* His leap: a stage standing on the footer, clipped at its foot, so he rises from behind the line. Sizes keep his height in step with .concierge. */
.leap { position: absolute; left: 0; bottom: calc(100% - 2px); width: calc(114px * 185 / 240); height: calc(114px * 531 / 240); overflow: hidden; pointer-events: none; visibility: hidden; }
.leap.on { visibility: visible; }
@media (min-width: 768px) { .leap { width: calc(160px * 185 / 240); height: calc(160px * 531 / 240); } }

/* His note 8 Nov: Locations, Guide, Estimates in the middle; Contact and Menu on the right. */
.top-right .tag, .top-right .tag[aria-current] { background: none; color: var(--ink); font-size: 14px; line-height: 20px; font-weight: 500; padding: 0; }
.top.over .top-right .tag { color: #fff; }
.top-right { grid-column: span 2; justify-self: end; display: flex; align-items: center; gap: 32px; }
.top-right .lang { grid-column: auto; }
@media (min-width: 768px) { .top-right { grid-column: 10 / span 3; } }
@media (max-width: 767px) { .js .top-right .tag { display: none; } }

/* Estimate page: the details scroll on the left; the figure and the button stay put on the right (Matthew, 9 Nov). */
.estimator { --est-top: 66px; padding-top: 0; padding-bottom: var(--close); row-gap: 48px; }
.est-title { display: flex; flex-direction: column; gap: 16px; padding-block: 24px 48px; }
.est-title p { max-width: 62ch; font-size: 16px; line-height: 24px; color: var(--ink); text-wrap: pretty; }
.est-group { padding-bottom: 32px; }
.est-group .head { display: block; padding-inline: 0; }
.est-group .head h2 { font-size: 14px; line-height: 20px; font-weight: 500; }
.est-group .crow:first-child { border-top: 0; }
.est-group .step input { width: 40px; }
.est-excludes { max-width: 62ch; padding-top: 8px; }
.calc-out { display: flex; flex-direction: column; gap: 24px; scroll-margin-top: 16px; }
.calc-out .total { padding: 0; border: 0; gap: 8px; }
.est-lines .line:first-child { border-top: 0; }
.est-foot { display: flex; flex-direction: column; gap: 16px; padding-top: 24px; border-top: 1px solid var(--rule); }
.est-foot .btn { width: 100%; padding-block: 12px 13px; text-align: center; }
.est-foot a { color: var(--ink); }
#est-email { scroll-margin-block: 120px; }
.est-bar { position: fixed; z-index: 55; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--m); background: var(--paper); border-top: 1px solid var(--rule); transition: transform .25s cubic-bezier(.3, 0, .2, 1), visibility 0s; }
.est-bar.away { transform: translateY(100%); visibility: hidden; transition: transform .25s cubic-bezier(.3, 0, .2, 1), visibility 0s .25s; }
.est-bar-fig { font-weight: 500; font-variant-numeric: tabular-nums; }
html:not(.js) .est-bar { display: none; }
@media (max-width: 1023px) { .estimator { padding-bottom: calc(var(--close) + 64px); } }
@media (min-width: 1024px) {
  .estimator { align-items: start; }
  .est-bar { display: none; }
  .calc-in { grid-column: 1 / span 7; }
  .calc-out { grid-column: 8 / -1; position: sticky; top: var(--est-top); height: calc(100svh - var(--est-top)); margin-right: calc(-1 * var(--m)); padding: 24px var(--m) 20px 24px; background: var(--box); }
  .est-title { padding-top: 24px; }
  .est-title .display { font-size: 48px; line-height: 56px; }
  .est-group { display: grid; grid-template-columns: repeat(7, 1fr); column-gap: var(--gut); }
  .est-group .head { grid-column: span 2; padding-block: 15px 0; }
  .est-rows { grid-column: span 5; }
  .est-lines { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; padding-bottom: 24px; -webkit-mask-image: linear-gradient(#000 calc(100% - 24px), transparent); mask-image: linear-gradient(#000 calc(100% - 24px), transparent); }
  .est-lines::-webkit-scrollbar { display: none; }
  .est-foot { margin-top: auto; }
  .est-group { border-top: 1px solid var(--rule); }
  .est-group .head::before, .est-group .head::after { content: none; }
  .est-group .head { border: 0; }
  /* One slim row per fee, so every figure shows at once; what it covers sits beside the name while there is room. */
  .est-lines .line { padding-block: 9px; align-items: baseline; }
  .est-lines .line > span:first-child { flex: 1; min-width: 0; flex-direction: row; align-items: baseline; gap: 12px; }
  .est-lines .line > span:first-child > span:first-child { white-space: nowrap; }
  .est-lines .line .small { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .calc-out .display { font-size: 32px; line-height: 36px; }
}
@media (min-width: 1024px) and (max-width: 1279px) { .est-lines .line .small { display: none; } }