/* ============================================================
   Flobalista
   Palette taken directly from the wordmark: the logo runs from
   charcoal #4A4A4A on the "f" to clay #73483F on the final "a".
   That gradient is the one decorative device on the site.
   ============================================================ */

:root {
  color-scheme: light;

  --charcoal:   #4A4A4A;
  --clay:       #73483F;
  --clay-deep:  #57342D;
  --clay-wash:  #F4EBE8;

  --ink:        #2B2726;
  --ink-mid:    #5C5451;
  --ink-soft:   #877D79;
  --ink-faint:  #B0A5A0;

  --paper:      #FAF7F5;
  --paper-deep: #F1EAE6;
  --surface:    #FFFFFF;
  --line:       #E8DED9;
  --line-firm:  #D6C8C1;

  --brand-gradient: linear-gradient(90deg, var(--charcoal) 0%, #5C4844 42%, var(--clay) 100%);

  --serif: "Bodoni Moda", "Didot", "Bodoni MT", Georgia, serif;
  --sans:  "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --t-xs: 0.8rem;
  --t-sm: 0.9rem;
  --t-base: clamp(1rem, 0.97rem + 0.15vw, 1.08rem);
  --t-lg: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  --t-xl: clamp(1.6rem, 1.35rem + 1.1vw, 2.3rem);
  --t-2xl: clamp(2.1rem, 1.6rem + 2.2vw, 3.4rem);
  --t-3xl: clamp(2.8rem, 1.7rem + 4.6vw, 5.6rem);

  --s1: .5rem;
  --s2: 1rem;
  --s3: 1.75rem;
  --s4: 2.75rem;
  --s5: 4.5rem;
  --s6: 7rem;

  --radius: 4px;
  --radius-lg: 10px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --shell: 74rem;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.005em;
  margin: 0 0 var(--s2);
  color: var(--ink);
}

h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }

p { margin: 0 0 var(--s2); max-width: 62ch; }

::selection { background: var(--clay-wash); color: var(--clay-deep); }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

.shell { width: min(100% - 2.5rem, var(--shell)); margin-inline: auto; }
.shell-narrow { width: min(100% - 2.5rem, 44rem); margin-inline: auto; }

.skip {
  position: absolute; left: 1rem; top: -3.5rem; z-index: 300;
  background: var(--ink); color: #fff; padding: .7rem 1.1rem;
  border-radius: var(--radius); font-size: var(--t-sm);
  transition: top .2s var(--ease);
}
.skip:focus { top: 1rem; }

/* ---------- The signature: the wordmark's own gradient ---------- */

.rule {
  height: 2px;
  border: 0;
  margin: 0;
  background: var(--brand-gradient);
  transform-origin: left;
}

.rule--thin { height: 1px; opacity: .45; }

/* Drawn once on load, the single piece of unprompted motion */
.rule--draw { animation: draw 1.1s var(--ease) both; }

@keyframes draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ---------- Header ---------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 247, 245, .88);
  backdrop-filter: saturate(1.3) blur(12px);
  -webkit-backdrop-filter: saturate(1.3) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.site-head.is-stuck { border-bottom-color: var(--line); background: rgba(250, 247, 245, .96); }

.head-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding-block: 1.05rem;
}

.head-logo img { height: 1.6rem; width: auto; }

.nav { display: flex; align-items: center; gap: var(--s3); }

.nav a {
  font-size: var(--t-sm);
  color: var(--ink-mid);
  padding-block: .3rem;
  position: relative;
  transition: color .2s var(--ease);
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--clay);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--ink); }

.nav .nav-shop {
  color: var(--clay);
  border: 1px solid var(--line-firm);
  border-radius: 999px;
  padding: .35rem 1rem;
}
.nav .nav-shop::after { display: none; }
.nav .nav-shop:hover { background: var(--clay); color: #fff; border-color: var(--clay); }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: .4rem;
  color: var(--ink);
  cursor: pointer;
}

.nav-mobile { display: none; border-top: 1px solid var(--line); padding-block: var(--s1); }
.nav-mobile[data-open="true"] { display: block; }
.nav-mobile a {
  display: block;
  padding: .75rem .1rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink-mid);
  font-size: var(--t-base);
}
.nav-mobile a:last-child { border-bottom: 0; }
.nav-mobile a[aria-current="page"] { color: var(--ink); }

/* Shop is the one action in the menu, so it reads as a button rather
   than another link in the list, matching the pill in the desktop bar. */
.nav-mobile-shop {
  display: inline-flex !important;
  align-items: center;
  gap: .5rem;
  margin-block: .75rem .35rem;
  padding: .62rem 1.35rem !important;
  border: 1px solid var(--clay);
  border-radius: 999px;
  background: var(--clay);
  color: #fff !important;
  font-size: var(--t-sm) !important;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.nav-mobile-shop:hover,
.nav-mobile-shop:active { background: var(--clay-deep); border-color: var(--clay-deep); }
.nav-mobile-shop svg { flex: none; opacity: .9; }

/* ---------- Hero ---------- */

.hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--s5); }

/* Wordmark and copy on the left, a portrait image on the right */
.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  margin-bottom: var(--s4);
}

.hero-mark {
  width: min(100%, 34rem);
  height: auto;
  margin-bottom: var(--s3);
}

.hero-figure {
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    radial-gradient(110% 80% at 70% 15%, #FFFFFF 0%, transparent 62%),
    var(--paper-deep);
  display: grid;
  place-items: center;
}

.hero-figure > img { width: 100%; height: 100%; object-fit: cover; }

/* With no photograph yet, the monogram stands in and looks deliberate */
.hero-figure .hero-monogram {
  width: 62%;
  height: auto;
  object-fit: contain;
  opacity: .92;
}

.hero-lede {
  font-family: var(--serif);
  font-size: var(--t-lg);
  line-height: 1.45;
  color: var(--ink-mid);
  max-width: 34ch;
  margin-bottom: var(--s3);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: var(--s4); }

.hero .rule { max-width: 100%; }

/* ---------- Buttons ---------- */

.btn {
  --bg: var(--ink);
  --fg: #fff;
  --bd: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .8rem 1.6rem;
  border: 1px solid var(--bd);
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--t-sm);
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn:hover { --bg: var(--clay); --bd: var(--clay); }

.btn--outline { --bg: transparent; --fg: var(--ink); --bd: var(--line-firm); }
.btn--outline:hover { --bg: transparent; --fg: var(--clay); --bd: var(--clay); }

.btn--clay { --bg: var(--clay); --bd: var(--clay); }
.btn--clay:hover { --bg: var(--clay-deep); --bd: var(--clay-deep); }

.btn--wide { width: 100%; justify-content: center; }

/* ---------- Sections ---------- */

.section { padding-block: var(--s5); }
.section--tight { padding-block: var(--s4); }
.section--sunk { background: var(--surface); border-block: 1px solid var(--line); }

.section-title { margin-bottom: var(--s3); }
.section-title p { color: var(--ink-soft); }

/* Asymmetric editorial split, 7 columns of text to 5 of image */
.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: start;
}
.split--flip > :first-child { order: 2; }

.split-figure {
  aspect-ratio: 4 / 5;
  background: var(--paper-deep);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}
.split-figure img { width: 100%; height: 100%; object-fit: cover; }

/* Placeholder used until real photography is dropped in */
.placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--s3);
  background:
    repeating-linear-gradient(45deg, transparent 0 11px, rgba(115,72,63,.045) 11px 22px),
    var(--paper-deep);
  color: var(--ink-faint);
  font-size: var(--t-xs);
  line-height: 1.6;
}

.placeholder--mark {
  position: absolute;
  inset: 0;
  background: radial-gradient(110% 80% at 60% 20%, #FFFFFF 0%, transparent 60%), var(--paper-deep);
  display: grid;
  place-items: center;
}
.placeholder--mark img { width: 58%; height: auto; opacity: .9; }


/* ---------- What we do: three plain columns, no cards ---------- */

.columns {
  display: grid;
  gap: var(--s4) var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.column h3 {
  font-size: var(--t-lg);
  padding-top: var(--s2);
  border-top: 2px solid var(--clay);
  margin-bottom: .5rem;
}
.column p { color: var(--ink-mid); margin: 0; font-size: var(--t-sm); line-height: 1.75; }

/* ---------- Gallery: offset grid, taller first item ---------- */

.gallery {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.shot {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--paper-deep);
  border: 0;
  padding: 0;
  cursor: zoom-in;
  display: block;
  width: 100%;
}
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.shot:hover img { transform: scale(1.04); }

.shot-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.5rem .9rem .8rem;
  font-size: var(--t-xs);
  color: #fff;
  text-align: left;
  background: linear-gradient(to top, rgba(43,39,38,.72), transparent);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.shot:hover .shot-caption, .shot:focus-visible .shot-caption { opacity: 1; }

/* Every third tile runs tall, breaking the grid out of a plain matrix */
.gallery--offset .shot:nth-child(3n+1) { aspect-ratio: 3 / 4.6; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  gap: clamp(.5rem, 2vw, 1.5rem);
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(30, 26, 25, .93);
  backdrop-filter: blur(5px);
}
.lightbox[data-open="true"] { display: flex; }

.lightbox-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  min-width: 0;
}
.lightbox-figure img {
  max-height: 82vh;
  max-width: 100%;
  width: auto;
  border-radius: var(--radius-lg);
}
.lightbox-figure figcaption {
  color: rgba(255,255,255,.72);
  font-size: var(--t-sm);
  text-align: center;
}

.lightbox-close {
  position: absolute;
  top: 1.1rem;
  right: 1.3rem;
  background: none; border: 0; color: #fff;
  font-size: 2rem; line-height: 1; cursor: pointer; opacity: .7;
}
.lightbox-close:hover { opacity: 1; }

.lightbox-nav {
  flex: none;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.07);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.lightbox-nav:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.5); }
.lightbox-nav[hidden] { display: none; }

/* ---------- Our work ---------- */

.work-list { display: grid; gap: var(--s5); }

/* Each commission alternates side, so the page reads as a sequence
   of pieces rather than a uniform grid of thumbnails. */
.piece {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.piece:nth-child(even) .piece-media { order: 2; }

.piece-media { display: grid; gap: .6rem; }

.shot--cover { aspect-ratio: 4 / 5; }

.piece-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .6rem;
}
.piece-strip .shot { aspect-ratio: 1 / 1; border-radius: var(--radius); }

.piece-strip .more {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(30,26,25,.55);
  color: #fff;
  font-size: var(--t-sm);
  border-radius: var(--radius);
}

.piece-index {
  font-family: var(--serif);
  font-size: var(--t-lg);
  color: var(--clay);
  margin: 0 0 .2rem;
  letter-spacing: .04em;
}

.piece-text h2 { font-size: var(--t-xl); margin-bottom: var(--s2); }
.piece-text p { color: var(--ink-mid); }

.piece-count {
  font-size: var(--t-xs);
  color: var(--ink-faint);
  margin: var(--s2) 0 0;
  padding-top: .6rem;
  border-top: 1px solid var(--line);
  max-width: 14rem;
}

.work-cta { margin-top: var(--s6); }

/* ---------- Contact ---------- */

.contact-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
}

.field { margin-bottom: var(--s2); }

.field label {
  display: block;
  font-size: var(--t-sm);
  color: var(--ink-mid);
  margin-bottom: .35rem;
}
.field .opt { color: var(--ink-faint); }

.input, .select, .textarea {
  width: 100%;
  padding: .78rem .95rem;
  font: inherit;
  font-size: var(--t-base);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-firm);
  border-radius: var(--radius);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-faint); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-faint); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--clay);
  box-shadow: 0 0 0 3px var(--clay-wash);
}
.textarea { min-height: 9rem; resize: vertical; line-height: 1.65; }

.select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23877D79' stroke-width='1.5' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .95rem center;
  cursor: pointer;
}
html[dir="rtl"] .select { background-position: left .95rem center; }

.input.has-error, .select.has-error, .textarea.has-error { border-color: #A8443C; background: #FCF0EE; }

.error-text { display: block; margin-top: .3rem; font-size: var(--t-xs); color: #A8443C; }

.pair { display: grid; gap: var(--s2); grid-template-columns: 1fr 1fr; }
.trio { display: grid; gap: var(--s2); grid-template-columns: 1.25fr 1fr 1fr; }

/* ---------- Country picker ----------
   A real <select> is rendered first so the form works without JavaScript.
   The script upgrades it into the searchable list below. All 198 flags come
   from one sprite, so opening the list costs no extra requests. */

.flag {
  display: inline-block;
  inline-size: 20px;
  block-size: 15px;
  flex: none;
  border-radius: 2px;
  background-image: url("../img/flags.png");
  background-repeat: no-repeat;
  background-size: 20px auto;
  box-shadow: inset 0 0 0 1px rgba(43,39,38,.13);
}

/* Without JavaScript the native select still shows the chosen flag */
.select--flag {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23877D79' stroke-width='1.5' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"),
    url("../img/flags.png");
  background-repeat: no-repeat, no-repeat;
  background-size: 12px 8px, 20px auto;
  background-position: right .95rem center, left .85rem center;
  padding-inline-start: 2.5rem;
}
html[dir="rtl"] .select--flag { background-position: left .95rem center, right .85rem center; }

.country-field { position: relative; }

/* Everything below is only used once the script has run */
.country-field[data-enhanced="true"] .select--flag { display: none; }

.country-btn {
  display: flex;
  align-items: center;
  gap: .6rem;
  inline-size: 100%;
  padding: .78rem .95rem;
  font: inherit;
  font-size: var(--t-base);
  color: var(--ink);
  text-align: start;
  background: var(--surface);
  border: 1px solid var(--line-firm);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.country-btn:hover { border-color: var(--ink-faint); }
.country-btn[aria-expanded="true"] {
  border-color: var(--clay);
  box-shadow: 0 0 0 3px var(--clay-wash);
}
.country-btn .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.country-btn .dial { color: var(--ink-soft); font-size: var(--t-sm); }
.country-btn .caret { color: var(--ink-soft); flex: none; }

.country-menu {
  position: absolute;
  z-index: 60;
  inset-inline-start: 0;
  inset-block-start: calc(100% + .35rem);
  min-inline-size: max(100%, 19rem);
  max-inline-size: min(24rem, 88vw);
  background: var(--surface);
  border: 1px solid var(--line-firm);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 10px rgba(43,39,38,.06), 0 22px 46px -18px rgba(43,39,38,.32);
  padding: .5rem;
  display: none;
}
.country-field[data-open="true"] .country-menu { display: block; }

.country-search {
  inline-size: 100%;
  padding: .55rem .7rem;
  font: inherit;
  font-size: var(--t-sm);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  margin-bottom: .4rem;
}
.country-search:focus { outline: none; border-color: var(--clay); }

.country-list {
  max-block-size: 15rem;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0;
  overscroll-behavior: contain;
}

.country-list li {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .48rem .6rem;
  border-radius: var(--radius);
  font-size: var(--t-sm);
  cursor: pointer;
}
.country-list li .name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.country-list li .dial { color: var(--ink-faint); font-size: var(--t-xs); }
.country-list li:hover,
.country-list li[data-active="true"] { background: var(--clay-wash); }
.country-list li[aria-selected="true"] { color: var(--clay-deep); }

.country-empty { padding: .6rem; font-size: var(--t-sm); color: var(--ink-faint); }

/* Honeypot: reachable by bots, invisible to people */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.notice {
  padding: .9rem 1.15rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: var(--t-sm);
  margin-bottom: var(--s3);
}
.notice--ok { background: #EEF4EF; border-color: #CBDFD0; color: #2F5738; }
.notice--bad { background: #FCF0EE; border-color: #EDCDC8; color: #8C3A32; }

.detail-list { margin: 0; }
.detail-list dt {
  font-size: var(--t-xs);
  color: var(--ink-faint);
  margin-top: var(--s2);
}
.detail-list dt:first-child { margin-top: 0; }
.detail-list dd { margin: .15rem 0 0; font-size: var(--t-base); }
.detail-list a:hover { color: var(--clay); }

.hours { width: 100%; font-size: var(--t-sm); border-collapse: collapse; }
.hours th, .hours td { text-align: left; font-weight: 400; padding: .4rem 0; border-bottom: 1px solid var(--line); }
.hours th { color: var(--ink-mid); }
.hours td { text-align: right; color: var(--ink-soft); }
.hours tr:last-child th, .hours tr:last-child td { border-bottom: 0; }

/* Framed aside used for the custom work steps */
.note-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s3);
}

.note-panel h3 {
  font-size: var(--t-lg);
  margin-bottom: var(--s2);
  padding-bottom: var(--s1);
  border-bottom: 1px solid var(--line);
}

.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  position: relative;
  padding-inline-start: 2.1rem;
  padding-block: .5rem;
  font-size: var(--t-sm);
  color: var(--ink-mid);
  line-height: 1.65;
}

.steps li + li { border-top: 1px solid var(--line); }

.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .62rem;
  inline-size: 1.35rem;
  block-size: 1.35rem;
  border-radius: 50%;
  background: var(--clay-wash);
  color: var(--clay-deep);
  font-size: .72rem;
  line-height: 1.35rem;
  text-align: center;
}

.steps strong { color: var(--ink); font-weight: 600; }

.map {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper-deep);
}
.map iframe { width: 100%; height: 380px; border: 0; display: block; }

/* ---------- WhatsApp, present on every page ---------- */

.wa {
  position: fixed;
  right: 1.15rem;
  bottom: 1.15rem;
  z-index: 150;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem 1.15rem .7rem .85rem;
  border-radius: 999px;
  background: #128C7E;
  color: #fff;
  font-size: var(--t-sm);
  box-shadow: 0 3px 8px rgba(43,39,38,.14), 0 14px 34px -12px rgba(18,140,126,.6);
  transition: background .2s var(--ease), transform .18s var(--ease);
}
.wa:hover { background: #0F7568; transform: translateY(-2px); }
.wa svg { flex: none; }

/* ---------- Footer ---------- */

.site-foot {
  margin-top: var(--s5);
  background: var(--surface);
  border-top: 1px solid var(--line);
}

.foot-grid {
  display: grid;
  gap: var(--s3);
  grid-template-columns: minmax(0, 1.6fr) repeat(auto-fit, minmax(9rem, 1fr));
  padding-block: var(--s4) var(--s3);
}

.foot-logo img { width: min(11rem, 60%); height: auto; margin-bottom: var(--s2); }
.foot-grid p { font-size: var(--t-sm); color: var(--ink-soft); max-width: 34ch; }

.foot-col h4 {
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--ink-faint);
  margin: 0 0 .7rem;
}
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col li + li { margin-top: .45rem; }
.foot-col a { font-size: var(--t-sm); color: var(--ink-mid); }
.foot-col a:hover { color: var(--clay); }

.foot-base {
  border-top: 1px solid var(--line);
  /* Extra room at the bottom so the fixed WhatsApp button never
     sits on top of the credit line. */
  padding-block: var(--s2) calc(var(--s2) + 3.25rem);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
  justify-content: space-between;
  font-size: var(--t-xs);
  color: var(--ink-faint);
}

.foot-base .credit a {
  color: var(--ink-soft);
  border-bottom: 1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.foot-base .credit a:hover { color: var(--clay); border-bottom-color: var(--accent-line, var(--line-firm)); }

@media (max-width: 48rem) {
  .foot-base { justify-content: flex-start; }
}

/* ---------- Page head, used on inner pages ---------- */

.page-head { padding-block: var(--s4) var(--s3); }
.page-head h1 { margin-bottom: .4rem; }
.page-head p { color: var(--ink-soft); max-width: 52ch; margin: 0; }

/* ---------- Responsive ---------- */

@media (max-width: 62rem) {
  .split, .contact-grid { grid-template-columns: 1fr; }
  .hero-layout { grid-template-columns: 1fr; gap: var(--s3); }
  .hero-figure { aspect-ratio: 16 / 10; order: -1; }
  .hero-figure .hero-monogram { width: 34%; }
  .split--flip > :first-child { order: 0; }
}

@media (max-width: 62rem) {
  .trio { grid-template-columns: 1fr 1fr; }
  .piece { grid-template-columns: 1fr; }
  .piece:nth-child(even) .piece-media { order: 0; }
  .trio .field:first-child { grid-column: 1 / -1; }
}

@media (max-width: 48rem) {
  .nav { display: none; }
  .nav-toggle { display: block; }
  .pair, .trio { grid-template-columns: 1fr; }
  .trio .field:first-child { grid-column: auto; }
  .wa span { display: none; }
  .wa { padding: .85rem; }
  .foot-grid { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
}