/* Native Staples — site styles
   Fonts are self-hosted. Colours and type follow the frozen design (14 Nov 2026). */

@font-face { font-family: "Cormorant Garamond"; src: url("../assets/fonts/CormorantGaramond-Variable.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../assets/fonts/CormorantGaramond-Italic-Variable.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../assets/fonts/Manrope-Variable.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }

:root {
  --terracotta: #b5522e; --terracotta-deep: #9a4324; --clay: #d27e5b; --clay-wash: #f2e1d6;
  --parchment: #f6efe3; --ivory: #fbf7f0; --sand: #efe4d0; --sage: #e6e7d4;
  --indigo: #2b3a67; --field-green: #5e6b3a; --peacock: #1e6b68; --peacock-wash: #dce9e5;
  --haldi: #d9a13b; --haldi-deep: #8a5a12; --haldi-wash: #f6e6c2;
  --husk: #2a211c; --brass: #b49a62;
  --ink: #2e2520; --ink-muted: #6b5d52; --rule: #d8cbb7;
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --pad-x: clamp(20px, 4.5vw, 64px);
  --rail: 0px;
  --bar-h: 64px;
}
@media (min-width: 1100px) { :root { --rail: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--parchment); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
a { color: var(--terracotta-deep); }
a:hover { color: var(--terracotta); }
:focus-visible { outline: 2px solid var(--terracotta-deep); outline-offset: 3px; }
[hidden] { display: none !important; }
section[id], #top { scroll-margin-top: calc(var(--bar-h) + 8px); }

.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--husk); color: var(--parchment); padding: 10px 16px; text-decoration: none; }
.skip:focus { top: 12px; color: var(--parchment); }

/* ---------- shared pieces ---------- */
.label { font-size: 11.5px; line-height: 1.4; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); }
.eyebrow { display: flex; align-items: center; gap: 12px; }
.eyebrow::after { content: ""; width: 48px; height: 1px; background: var(--terracotta); }
.husk { display: inline-block; flex: none; }
.display { font-family: var(--font-display); font-weight: 500; line-height: 1.06; }
.display em { font-style: italic; color: var(--terracotta); }
.lead { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.7; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 24px; font: 600 14px/1 var(--font-sans); letter-spacing: .04em; border: 1px solid transparent; border-radius: 2px; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--primary { background: var(--terracotta-deep); color: var(--ivory); }
.btn--primary:hover { background: var(--terracotta); color: var(--ivory); }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--secondary:hover { background: var(--ink); color: var(--parchment); }
.btn--light { background: transparent; color: var(--parchment); border-color: var(--parchment); }
.btn--light:hover { background: var(--parchment); color: var(--husk); }
.btn--sm { height: 40px; padding: 0 16px; font-size: 13px; }
.link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; letter-spacing: .04em; color: var(--terracotta-deep); text-decoration: none; padding-bottom: 3px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .3s ease; }
.link:hover { background-size: 0 1px; }
.link svg { width: 16px; height: 16px; }

.band { display: block; width: 100%; }

/* numbered rail down the left edge (desktop only) */
.chapter { position: relative; }
.rail { display: none; }
@media (min-width: 1100px) {
  .rail { display: block; position: absolute; left: 30px; top: 0; bottom: 0; border-left: 1px dashed rgba(42, 33, 28, .35); pointer-events: none; }
  .rail span { position: absolute; left: -17px; top: 104px; width: 34px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 0; background: var(--ground, var(--parchment)); font-family: var(--font-display); font-size: 15px; color: var(--ink-muted); }
  .rail--dark { border-left-color: rgba(246, 239, 227, .3); }
  .rail--dark span { color: var(--haldi); }
}
.wrap { padding-left: calc(var(--pad-x) + var(--rail)); padding-right: var(--pad-x); }

/* ---------- header ---------- */
.masthead { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 32px; height: 92px; padding: 0 var(--pad-x); border-bottom: 1px solid var(--rule); }
.nav { display: flex; gap: 32px; }
.nav a { font-size: 14px; font-weight: 500; letter-spacing: .02em; color: var(--ink); text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; }
.nav a:hover, .nav a[aria-current="true"] { border-bottom-color: var(--terracotta); }
.masthead__logo { justify-self: center; display: block; }
.masthead__logo img { display: block; height: 58px; width: auto; }
.masthead__right { justify-self: end; display: flex; align-items: center; gap: 32px; }
.menu-btn { display: none; align-items: center; gap: 8px; height: 44px; padding: 0; background: none; border: 0; font: 600 13px var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); cursor: pointer; }
.menu-btn i { display: block; width: 22px; height: 1px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }

/* compact bar that slides in after the masthead scrolls away */
.bar { position: fixed; left: 0; right: 0; top: 0; z-index: 50; height: var(--bar-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 var(--pad-x); background: rgba(246, 239, 227, .96); backdrop-filter: blur(6px); border-bottom: 1px solid var(--rule); transform: translateY(-110%); transition: transform .35s ease; }
.bar.is-on { transform: none; }
.bar__logo img { display: block; height: 40px; width: auto; }
.bar__right { display: flex; align-items: center; gap: 28px; }
.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.progress__line { position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--terracotta); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.progress__grain { position: absolute; top: -6px; left: calc(var(--p, 0) * 100%); margin-left: -15px; width: 30px; height: 13px; }

@media (max-width: 960px) {
  .masthead { display: flex; justify-content: space-between; height: 64px; }
  .masthead .nav, .masthead__right .btn, .bar .nav { display: none; }
  .masthead__logo img { height: 38px; }
  .menu-btn { display: inline-flex; }
  :root { --bar-h: 56px; }
  .bar__logo img { height: 34px; }
  .bar__right { gap: 16px; }
}
@media (max-width: 420px) { .bar .btn span { display: none; } .bar .btn { padding: 0 12px; } }

/* mobile menu */
.menu { position: fixed; inset: 0; z-index: 100; background: var(--parchment); display: flex; flex-direction: column; overflow-y: auto; visibility: hidden; opacity: 0; transition: opacity .25s ease, visibility 0s linear .25s; }
.menu.is-open { visibility: visible; opacity: 1; transition: opacity .25s ease; }
.menu__top { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 20px; border-bottom: 1px solid var(--rule); flex: none; }
.menu__top img { display: block; height: 38px; width: auto; }
.menu__close { background: none; border: 0; height: 44px; padding: 0; font: 600 13px var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); cursor: pointer; }
.menu__list { list-style: none; margin: 0; padding: 12px 20px 0; counter-reset: m; }
.menu__list a { counter-increment: m; display: flex; align-items: baseline; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--rule); font-family: var(--font-display); font-size: 34px; line-height: 1.1; font-weight: 500; color: var(--ink); text-decoration: none; }
.menu__list a::before { content: "0" counter(m); font: 600 12px var(--font-sans); letter-spacing: .14em; color: var(--terracotta-deep); }
.menu__foot { margin-top: auto; padding: 28px 20px 32px; display: flex; flex-direction: column; gap: 14px; }
body.menu-open { overflow: hidden; }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 730px); gap: 28px; align-items: center; padding: 24px 20px 40px var(--pad-x); min-height: min(842px, calc(100vh - 118px)); }
.hero__text { display: flex; flex-direction: column; gap: 26px; }
.hero h1 { font-size: clamp(44px, 5.15vw, 74px); line-height: 1; letter-spacing: -.01em; }
.hero__para { font-size: clamp(16px, 1.32vw, 19px); line-height: 1.65; max-width: 580px; text-align: justify; }
.hero__para p + p { margin-top: 1.4em; }
.hero__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; color: var(--terracotta-deep); font-weight: 700; font-size: 12px; }
.hero__tags i { width: 6px; height: 6px; transform: rotate(45deg); background: var(--haldi); }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; padding-top: 4px; }
.scroll-cue { align-self: flex-start; margin-top: 18px; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink-muted); }
.scroll-cue::after { content: ""; width: 40px; height: 1px; background: var(--terracotta); }
.scroll-cue .husk { transform: rotate(90deg); animation: nudge 2.4s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(-2px) rotate(90deg); } 50% { transform: translateY(4px) rotate(90deg); } }
.hero__art { position: relative; justify-self: end; width: 100%; }
.hero__art img { display: block; width: 100%; aspect-ratio: 1; mix-blend-mode: multiply; -webkit-mask-image: radial-gradient(closest-side, #000 84%, transparent 100%); mask-image: radial-gradient(closest-side, #000 84%, transparent 100%); }
.hero__art figcaption { position: absolute; right: 6%; bottom: 2%; font-size: 11px; color: var(--ink-muted); }
@media (max-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 24px 0 28px; min-height: 0; }
  .hero__text { padding: 0 20px; gap: 18px; }
  .hero__para { text-align: left; max-width: 620px; }
  .hero__tags { font-size: 10.5px; letter-spacing: .14em; }
  .hero__cta { flex-direction: column; align-items: stretch; gap: 16px; max-width: 420px; }
  .hero__cta .link { align-self: center; }
  .hero__text .scroll-cue { display: none; }
  .hero__art { justify-self: center; max-width: 520px; }
  .hero__art figcaption { position: static; text-align: center; margin-top: -6px; }
}

/* ---------- our story ---------- */
.story { --ground: var(--parchment); background: var(--parchment); }
.story__top { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: center; min-height: 700px; padding-top: 72px; padding-bottom: 72px; }
.story__photo { position: absolute; top: 0; right: 0; bottom: 0; width: 55.5%; -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 18%, #000 42%); mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 18%, #000 42%); }
.story__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.story__text { position: relative; display: flex; flex-direction: column; gap: 22px; }
.story h2 { font-size: clamp(40px, 4.45vw, 64px); }
.story__sub { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(23px, 2.1vw, 30px); line-height: 1.3; }
.story__text .lead { max-width: 520px; }
.trail { display: block; margin-top: 8px; }
.pillars { background: var(--sand); border-top: 3px solid var(--haldi); padding-top: 56px; padding-bottom: 64px; display: flex; flex-direction: column; gap: 32px; }
.pillars__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; }
.pillars__head h3 { font-family: var(--font-display); font-size: clamp(32px, 2.65vw, 38px); font-weight: 500; }
.pillars__head p { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: clamp(21px, 2.1vw, 30px); line-height: 1.3; color: var(--terracotta); }
.pillars__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.pillar { display: flex; flex-direction: column; gap: 16px; padding: 28px 24px; background: var(--ivory); border: 1px solid var(--rule); border-bottom: 3px solid var(--c); }
.pillar__icon { flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--w); display: flex; align-items: center; justify-content: center; }
.pillar__icon svg { width: 40px; height: 40px; stroke: var(--c); }
.pillar h4 { margin: 0 0 8px; font-family: var(--font-display); font-size: 26px; line-height: 1.12; font-weight: 600; }
.pillar p { font-size: 15.5px; line-height: 1.6; }
@media (max-width: 1100px) { .pillars__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) {
  .story__top { display: flex; flex-direction: column; align-items: stretch; gap: 0; min-height: 0; padding: 44px 0 0; }
  .story__text { order: 1; padding: 0 20px; gap: 18px; }
  .story__photo { order: 2; position: static; width: 100%; height: clamp(300px, 80vw, 460px); margin-top: 8px; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 34%); mask-image: linear-gradient(to bottom, transparent 0%, #000 34%); }
  .story__photo img { object-position: 62% 60%; }
  .trail { display: none; }
  .pillars { padding-top: 40px; padding-bottom: 40px; gap: 16px; }
}
@media (max-width: 640px) {
  .pillars__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pillar { flex-direction: row; align-items: flex-start; padding: 18px; }
}

/* ---------- partners ---------- */
.partners { --ground: var(--sage); position: relative; overflow: hidden; background: var(--sage); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: center; padding-top: 104px; padding-bottom: 88px; }
.partners__text { display: flex; flex-direction: column; gap: 24px; position: relative; }
.partners h2 { font-size: clamp(38px, 4.45vw, 64px); line-height: 1.04; }
.partners .lead { max-width: 600px; }
.partners__card { position: relative; z-index: 1; display: flex; flex-direction: column; background: var(--ivory); padding: 12px 32px 20px; border: 1px solid var(--rule); }
.partners__card > .label { padding: 16px 0 12px; }
.partner { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 24px; align-items: center; padding: 20px 0; border-top: 1px solid rgba(42, 33, 28, .2); }
.partner img { display: block; width: 140px; height: 140px; object-fit: cover; border-bottom: 3px solid var(--c); }
.partner h3 { font-family: var(--font-display); font-size: 24px; font-weight: 600; line-height: 1.2; }
.partner p { font-size: 15.5px; line-height: 1.6; margin: 4px 0; }
.partners__mandala { position: absolute; right: -90px; bottom: -110px; width: 320px; opacity: .5; pointer-events: none; }
@media (max-width: 960px) {
  .partners { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-top: 64px; padding-bottom: 48px; }
  .partners__text { gap: 22px; }
  .partners__card { padding: 8px 20px 12px; }
}
@media (max-width: 520px) {
  .partner { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .partner img { width: 100%; height: 160px; }
}

/* ---------- pantry ---------- */
.pantry { --ground: var(--parchment); background: var(--parchment); display: flex; flex-direction: column; gap: 44px; padding-top: 104px; padding-bottom: 80px; }
.head2 { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px 64px; align-items: end; }
.head2 > div { display: flex; flex-direction: column; gap: 16px; }
.head2 h2 { font-size: clamp(38px, 3.9vw, 56px); }
.head2 > p { font-size: 16px; line-height: 1.7; }
.plates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.plate { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 28px; align-items: center; padding: 28px; background: var(--ivory); border: 1px solid var(--rule); }
.arch { position: relative; width: 100%; max-width: 300px; aspect-ratio: 3 / 4; }
.arch__img { position: absolute; inset: 0; clip-path: url(#arch-clip); background: var(--parchment); overflow: hidden; }
.arch__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.arch > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.plate__body { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; background: var(--w); border: 1px solid var(--c); color: var(--t, var(--c)); }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.plate h3 { font-family: var(--font-display); font-size: 34px; line-height: 1.08; font-weight: 600; }
.plate__sub { margin-top: -6px; font-family: var(--font-display); font-style: italic; font-size: 19px; line-height: 1.3; color: var(--terracotta); }
.specs { align-self: stretch; display: grid; grid-template-columns: auto 1fr; gap: 6px 24px; font-size: 14px; border-top: 1px solid var(--rule); padding-top: 16px; }
.specs dt { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); padding-top: 2px; }
.sizes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.sizes legend { padding: 0; margin-bottom: 8px; }
.sizes label { position: relative; cursor: pointer; }
.sizes input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sizes span { display: inline-flex; align-items: center; min-height: 36px; border: 1px solid var(--ink); padding: 4px 14px; font-size: 13px; font-weight: 600; border-radius: 2px; transition: background-color .2s ease, color .2s ease; }
.sizes label:hover span { background: var(--clay-wash); }
.sizes input:checked + span { background: var(--ink); color: var(--parchment); }
.sizes input:focus-visible + span { outline: 2px solid var(--terracotta-deep); outline-offset: 3px; }
.signoff { display: flex; align-items: center; justify-content: center; gap: 20px; text-align: center; font-family: var(--font-display); font-style: italic; font-size: 20px; color: var(--ink-muted); }
.signoff svg { flex: none; }
@media (max-width: 1240px) { .plates { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 960px) {
  .pantry { gap: 24px; padding-top: 64px; padding-bottom: 48px; }
  .head2 { grid-template-columns: minmax(0, 1fr); }
  .signoff svg { display: none; }
}
@media (max-width: 640px) {
  .plate { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 20px; }
  .arch { margin: 0 auto; }
  .plate__body { align-items: stretch; }
  .plate__body .chip { align-self: flex-start; }
}

/* ---------- journal ---------- */
.journal { --ground: var(--haldi-wash); background: var(--haldi-wash); }
.journal__in { display: flex; flex-direction: column; gap: 40px; padding-top: 80px; padding-bottom: 64px; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.card { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 28px; background: var(--ivory); border: 1px solid var(--rule); border-top: 3px solid var(--c); }
.card__top { align-self: stretch; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.card__top .label:first-child { color: var(--c); }
.card h3 { font-family: var(--font-display); font-size: 25px; line-height: 1.18; font-weight: 600; }
.card__by { font-size: 13.5px; line-height: 1.55; color: var(--ink-muted); }
.card__what { font-size: 15.5px; line-height: 1.6; flex-grow: 1; }
.note { font-size: 13px; color: var(--haldi-deep); }
@media (max-width: 1100px) { .cards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 960px) { .journal__in { gap: 20px; padding-top: 52px; padding-bottom: 48px; } }

/* ---------- testimonials (hidden until real ones are added in config.js) ---------- */
.voices { --ground: var(--parchment); background: var(--parchment); display: flex; flex-direction: column; gap: 36px; padding-top: 96px; padding-bottom: 72px; }
.voices h2 { font-size: clamp(36px, 3.4vw, 48px); margin-top: 16px; }
.voices__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.voice { display: flex; flex-direction: column; gap: 14px; padding: 28px; background: var(--ivory); border: 1px solid var(--rule); }
.voice::before { content: "\201C"; font-family: var(--font-display); font-size: 56px; line-height: .6; color: var(--haldi); }
.voice blockquote { margin: 0; font-family: var(--font-display); font-style: italic; font-size: 21px; line-height: 1.4; }

/* ---------- connect ---------- */
.connect { --ground: var(--husk); position: relative; overflow: hidden; background: var(--husk); color: var(--parchment); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: start; padding-top: 88px; padding-bottom: 190px; }
.connect__mandala { position: absolute; right: -160px; top: -120px; width: 620px; opacity: .2; pointer-events: none; }
.connect__text { position: relative; display: flex; flex-direction: column; gap: 22px; }
.connect .label { color: var(--haldi); }
.connect h2 { font-size: clamp(42px, 4.7vw, 68px); line-height: 1.02; }
.connect h2 em { color: var(--haldi); }
.connect .lead { max-width: 560px; }
.connect__cta { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 6px; }
.tiles { position: relative; display: flex; flex-direction: column; gap: 12px; }
.tile { display: flex; flex-direction: column; gap: 6px; padding: 20px 24px; border: 1px solid rgba(246, 239, 227, .35); text-decoration: none; color: var(--parchment); transition: border-color .25s ease, background-color .25s ease; }
.tile:hover { border-color: var(--haldi); background: rgba(217, 161, 59, .08); color: var(--parchment); }
.tile b { font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.skyline { position: absolute; left: 0; right: 0; bottom: 0; opacity: .8; pointer-events: none; }
.skyline svg { display: block; width: 100%; height: 150px; }
@media (max-width: 960px) {
  .connect { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 64px; padding-bottom: 150px; }
  .connect__mandala { width: 380px; right: -170px; top: -110px; opacity: .2; }
  .connect__cta { flex-direction: column; }
}

/* ---------- footer ---------- */
.footer__in { background: var(--ivory); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 2fr) minmax(0, 2fr) minmax(0, 3fr); gap: 48px; padding: 40px var(--pad-x); }
.footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.footer__brand img { display: block; height: 64px; width: auto; }
.footer__brand p { font-family: var(--font-display); font-style: italic; font-size: 20px; line-height: 1.4; color: var(--ink-muted); max-width: 360px; }
.footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 15px; }
.footer__col a { color: var(--ink); text-decoration: none; }
.footer__col a:hover { color: var(--terracotta-deep); text-decoration: underline; text-underline-offset: 3px; }
.footer__col address { font-style: normal; color: var(--ink-muted); line-height: 1.6; }
.footer__base { background: var(--husk); color: #cbbfae; padding: 18px var(--pad-x); display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; font-size: 13px; }
@media (max-width: 960px) {
  .footer__in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; padding: 32px 20px; }
  .footer__brand, .footer__col--wide { grid-column: 1 / -1; }
  .footer__brand img { height: 52px; }
  .footer__brand p { font-size: 18px; }
}

/* ---------- motion ---------- */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .scroll-cue .husk { animation: none; }
  .bar, .menu { transition: none; }
}
@media print { .bar, .menu, .scroll-cue { display: none; } .js .reveal { opacity: 1; transform: none; } }