/* Orvel — components. Every colour, size and radius comes from tokens.css. */

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.7 var(--font); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, h4, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3, .t-display, .t-h1, .t-h2, .t-h3 { font-weight: 400; text-wrap: balance; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sr-only:focus { position: fixed; top: 12px; left: 12px; width: auto; height: auto; clip: auto; z-index: 100; background: var(--bg); padding: 10px 14px; border-radius: var(--r); }
.wrap { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.label-col { max-width: 173px; }            /* eyebrow labels sit in a narrow column, wrapping to 2 lines */
.dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); flex: none; }

/* ── Buttons: split label + square arrow block, 1px apart ── */
.btn { display: inline-flex; gap: 1px; height: var(--btn-h); font: 500 16px/1.7 var(--font); white-space: nowrap; }
.btn__label, .btn__go { display: flex; align-items: center; justify-content: center; border-radius: var(--r); background: var(--btn-bg, var(--accent)); color: var(--btn-ink, var(--on-accent)); transition: background-color var(--dur-fast) var(--ease); }
.btn__label { padding: 13px 16px 14px; }
.btn__roll { display: block; overflow: hidden; height: 1.7em; }
.btn__roll > span { position: relative; display: block; transition: transform .45s var(--ease-out); }
.btn__roll > span::after { content: attr(data-text); position: absolute; left: 0; top: 100%; }
.btn__go { width: var(--btn-h); position: relative; overflow: hidden; }
.btn__go svg { fill: currentColor; width: 14px; height: 14px; transition: transform .45s var(--ease-out); }
.btn__go svg + svg { position: absolute; left: calc(50% - 7px); top: calc(50% - 7px); transform: translateX(-36px); }
.btn:hover .btn__roll > span, .btn:focus-visible .btn__roll > span { transform: translateY(-100%); }
.btn:hover .btn__go svg:first-child, .btn:focus-visible .btn__go svg:first-child { transform: translateX(36px); }
.btn:hover .btn__go svg + svg, .btn:focus-visible .btn__go svg + svg { transform: translateX(0); }
.btn--light { --btn-bg: var(--btn-light); --btn-ink: var(--btn-light-ink); }
.btn--dark { --btn-bg: var(--accent); --btn-ink: var(--on-accent); }
.btn--dark:hover .btn__label, .btn--dark:hover .btn__go { background: rgba(var(--accent-rgb), .9); }
.btn--light:hover .btn__label, .btn--light:hover .btn__go { background: var(--surface); }

/* Underlined text link + text link with chevron */
.ulink { font: 500 16px/1.7 var(--font); text-decoration: underline 1px; text-underline-offset: 6px; transition: text-decoration-color var(--dur-fast) var(--ease); }
.ulink:hover { text-decoration-color: transparent; }
.ulink--light { color: var(--on-dark); }
.tlink { display: inline-flex; align-items: center; gap: 8px; font: 400 14px/1.7 var(--font); text-transform: uppercase; }
.tlink__go { position: relative; width: 16px; height: 16px; overflow: hidden; }
.tlink__go svg { position: absolute; inset: 1px; width: 14px; height: 14px; transition: transform .4s var(--ease-out); }
.tlink__go svg + svg { transform: translateX(-20px); }
.tlink:hover .tlink__go svg:first-child { transform: translateX(20px); }
.tlink:hover .tlink__go svg + svg { transform: none; }

/* Small "View ›" chip */
.chip-link { display: inline-flex; align-items: center; gap: 2px; padding: 11px 13px 11px 16px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--ink); font: 400 14px/1.36 var(--font); white-space: nowrap; transition: background-color var(--dur-fast) var(--ease); }
.chip-link svg { width: 14px; height: 14px; transition: transform .35s var(--ease-out); }
.chip-link:hover svg { transform: translateX(3px); }
.ico-well { display: grid; place-items: center; width: 41px; height: 41px; border-radius: var(--r-xs); background: var(--accent-soft); color: var(--ink); flex: none; }
.ico-well svg { width: 14px; height: 14px; }

/* Scroll cue: a small rounded "mouse" with a dot */
.scroll-cue { display: flex; justify-content: center; width: 23px; height: 30px; padding-top: 4px; border: 1.5px solid currentColor; border-radius: 40px; color: var(--ink); }
.scroll-cue i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: cue 2.2s var(--ease) infinite; }
.scroll-cue--light { color: var(--on-dark); }
@keyframes cue { 0%, 100% { transform: translateY(0); opacity: 1; } 60% { transform: translateY(10px); opacity: .2; } }

/* ── Wordmark (two stacked serif lines) ── */
.wordmark { display: inline-flex; flex-direction: column; font: 400 30px/.98 var(--font-display); letter-spacing: -.6px; }
.wordmark--xl { font-size: 112px; line-height: .98; letter-spacing: -2px; }

/* ── Header: absolute over the first screen; never sticks, never jumps ── */
.site-head { position: absolute; z-index: 20; inset: 0 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 25px var(--gutter); color: var(--ink); }
.site-head--light { color: var(--on-dark); }
.site-head__logo { justify-self: center; }
.site-head__cta { justify-self: end; }
.menu-toggle { justify-self: start; display: inline-flex; align-items: center; gap: 16px; font: 400 16px/1 var(--font); text-transform: uppercase; }
.menu-toggle__icon { display: flex; flex-direction: column; gap: 7px; width: 64px; }
.menu-toggle__icon i { height: 3px; border-radius: 10px; background: currentColor; transition: transform .45s var(--ease-out); }
.menu-open .menu-toggle__icon i:first-child { transform: translateY(5px) rotate(8deg); }
.menu-open .menu-toggle__icon i:last-child { transform: translateY(-5px) rotate(-8deg); }
.menu { position: absolute; top: 99px; left: var(--gutter); width: min(1085px, calc(100% - 2 * var(--gutter))); display: grid; grid-template-columns: 1fr auto; gap: 40px; padding: 40px 182px 40px 40px; border-radius: var(--r-lg); background: var(--bg); color: var(--ink); box-shadow: var(--shadow-2); }
.menu[hidden] { display: none; }
.menu.is-in { animation: menuIn .5s var(--ease-out) both; }
@keyframes menuIn { from { opacity: 0; transform: translateY(-10px); } }
.menu__main { display: flex; flex-direction: column; gap: 32px; }
.menu__main a, .menu__social a { font: 400 56px/1.2 var(--font-display); letter-spacing: -1.5px; transition: opacity var(--dur-fast) var(--ease); width: fit-content; }
.menu__main:hover a, .menu__social:hover a { opacity: .45; }
.menu__main a:hover, .menu__social a:hover, .menu__main a[aria-current] { opacity: 1; }
.menu__side { display: flex; flex-direction: column; gap: 20px; min-width: 260px; }
.menu__social { display: flex; flex-direction: column; gap: 2px; }
.menu__legal { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.menu__copy { color: var(--text-2); }

/* ── Hero: full-bleed photo, fade to black at the bottom, copy bottom-left, listing card bottom-right ── */
.hero { position: relative; min-height: 810px; display: flex; align-items: flex-end; padding: 140px var(--gutter) 80px; color: var(--on-dark); overflow: hidden; isolation: isolate; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; animation: heroIn 1.6s var(--ease-out) both; }
@keyframes heroIn { from { filter: blur(14px); transform: scale(1.06); } }
.hero::after { content: ""; position: absolute; inset: 38% 0 0; z-index: -1; background: linear-gradient(rgba(0, 0, 0, 0), var(--scrim)); }
.hero__inner { position: relative; width: 100%; max-width: var(--container); margin-inline: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.hero__copy { display: flex; flex-direction: column; align-items: flex-start; max-width: 650px; }
.hero__copy .t-display { margin-top: 16px; }
.hero__lead { max-width: 400px; margin-top: 16px; }
.hero__actions { display: flex; align-items: center; gap: 24px; margin-top: 32px; }
.hero .scroll-cue { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); }
.listing { width: 559px; flex: none; display: flex; flex-direction: column; gap: 2px; color: var(--ink); }
.listing__top, .listing__specs { background: var(--bg); border-radius: var(--r); }
.listing__top { display: flex; flex-direction: column; gap: 8px; padding: 24px; }
.listing__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.listing__title { max-width: 330px; }
.listing__facts { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 8px; font: 600 14px/1.36 var(--font); }
.listing__facts i { font-style: normal; }
.listing__specs { display: flex; justify-content: space-between; gap: 12px; padding: 20px 24px; }
.listing__specs > div { display: flex; align-items: center; gap: 14px; }
.listing__specs dd { display: flex; flex-direction: column; gap: 1px; font: 400 14px/1.36 var(--font); }
.listing__specs b { font-weight: 400; }

/* ── Hero, plain (inner pages): no listing card, headline 96px bottom-left, a two-line 18px lead bottom-right.
   A short fade under the header only (never the whole photo) keeps the wordmark readable over a pale ceiling or sky. ── */
.hero--plain::before { content: ""; position: absolute; inset: 0 0 auto; height: 220px; z-index: -1; background: linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); }
.hero--plain .t-display { font-size: 96px; line-height: 1.15; margin-top: 0; }
.hero--plain .hero__copy { max-width: 666px; }
.hero--plain .hero__lead { flex: none; max-width: 392px; margin: 0; font-size: 18px; }
@media (max-width: 1199px) { .hero--plain .hero__inner { gap: 16px; } .hero--plain .hero__lead { max-width: 400px; } }
@media (max-width: 767px) {
  .hero--plain { padding: 180px var(--gutter) 40px; }
  .hero--plain .t-display { font-size: 49px; letter-spacing: -1.4px; }
}

/* ── Intro: label column + statement, then three stat cards ── */
.intro { padding: var(--section-lg) 0 var(--section); }
.intro__top { display: flex; justify-content: space-between; gap: 40px; }
.intro__text { width: 876px; max-width: 100%; display: flex; flex-direction: column; gap: 63px; }
.intro__text .t-h2 { max-width: 781px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: var(--gap-block); }
.stat { display: flex; flex-direction: column; justify-content: space-between; gap: 82px; min-height: 260px; padding: 32px 34px 39px 32px; border-radius: var(--r); background: var(--surface); flex: none; }   /* flex: none so a card inside a column flex never collapses */
.stat__label { display: flex; align-items: center; gap: 10px; max-width: none; }
.stat__num { display: flex; align-items: flex-end; justify-content: flex-end; gap: 4px; }
.stat__num b { font: 400 72px/1.15 var(--font-display); letter-spacing: -2px; }
.stat__num span { font: 600 14px/1.36 var(--font); padding-bottom: 13px; }

/* ── Overview: centred statements around a photo floating over a ghost word ── */
.overview { padding-top: var(--section); }
.overview .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; }
.overview .scroll-cue { margin: 57px 0 40px; }
.overview__h { max-width: 910px; }
.overview__stage { position: relative; width: 100%; display: grid; place-items: center; margin: 0 0 -10px; }
.overview__ghost { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-38%); font-size: 317px; line-height: 1; text-align: center; white-space: nowrap; z-index: 0; pointer-events: none; }
.overview__img { position: relative; z-index: 1; width: 748px; max-width: 100%; aspect-ratio: 748 / 464; object-fit: cover; border-radius: var(--r-img); }

/* ── Feature: tall photo left, text right ── */
.feature { padding: var(--section) 0; }
.feature__row { display: flex; align-items: center; gap: var(--gap-col); padding-right: calc(var(--gutter) + 67px); }
.feature__img { width: 663px; max-width: 49%; aspect-ratio: 663 / 829; object-fit: cover; border-radius: var(--r-img); flex: none; }
.feature__text { display: flex; flex-direction: column; gap: 80px; max-width: 550px; }
.feature__body { display: flex; flex-direction: column; gap: 40px; }

/* ── Film: wide interior frame + split text + large statement ── */
.film { padding: var(--section) 0; }
.film__frame { position: relative; overflow: hidden; border-radius: var(--r-img); aspect-ratio: 1360 / 789; }
.film__frame img { width: 100%; height: 100%; object-fit: cover; animation: drift 18s var(--ease) infinite alternate; }
@keyframes drift { from { transform: scale(1.06) translateX(-1.5%); } to { transform: scale(1.06) translateX(1.5%); } }
.film__split { display: flex; justify-content: space-between; gap: 40px; margin-top: 80px; }
.film__p { width: 640px; max-width: 100%; }
.film__statement { margin-top: var(--gap-block); letter-spacing: 0; }

/* ── Ghost titles: giant pale serif word the photos overlap ── */
.ghost-title { position: relative; z-index: 0; text-align: center; white-space: nowrap; pointer-events: none; text-transform: capitalize; }
.overview, .elevated, .gallery, .explore { overflow-x: clip; }   /* a 300px ghost word may run past narrow viewports; never widen the page */
.ghost-title + * { position: relative; z-index: 1; }

/* ── Elevated: big + small photo pair, then text / tall photo ── */
.elevated { padding: var(--section) 0; }
.elevated .ghost-title { margin-bottom: -157px; }
.elevated__top { display: flex; gap: 40px; align-items: flex-start; }
.elevated__big { width: 875px; max-width: 64%; aspect-ratio: 875 / 820; object-fit: cover; border-radius: var(--r-img); }
.elevated__side { flex: 1; display: flex; flex-direction: column; gap: 24px; }
.elevated__side img { width: 100%; aspect-ratio: 445 / 502; object-fit: cover; border-radius: var(--r-img); }
.elevated__bottom { display: flex; align-items: center; justify-content: space-between; gap: 107px; margin-top: 67px; }
.elevated__text { width: 627px; max-width: 46%; display: flex; flex-direction: column; gap: 80px; }
.elevated__body { display: flex; flex-direction: column; gap: 40px; }
.elevated__body .t-h2 { max-width: 550px; }
.elevated__tall { width: 627px; max-width: 46%; aspect-ratio: 627 / 786; object-fit: cover; border-radius: var(--r-img); }

/* ── Quote ── */
.quote { padding: var(--section) 0; }
.quote__inner { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.stars { display: flex; gap: 10px; }
.stars svg { width: 24px; height: 24px; fill: var(--star); }
.quote__text { max-width: 817px; }
.quote__by { display: flex; align-items: center; gap: 16px; text-align: left; }
.quote__by img { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; }
.quote__by p { display: flex; flex-direction: column; gap: 4px; }
.quote__by b { font: 500 18px/1.7 var(--font); }
.quote__by span { color: var(--text-2); line-height: 1.7; }

/* ── Gallery ── */
.gallery { padding: var(--section) 0; }
.gallery .ghost-title, .explore .ghost-title { margin-bottom: -130px; }
.gallery figure { display: flex; gap: 24px; }
.gallery figure img { border-radius: var(--r-img); object-fit: cover; }
.gallery__pair { display: flex; gap: 40px; align-items: flex-start; }
.gallery__m, .gallery__s { flex-direction: column; }
.gallery__m { width: 735px; max-width: 54%; } .gallery__m img { width: 100%; aspect-ratio: 735 / 833; }
.gallery__s { flex: 1; } .gallery__s img { width: 100%; aspect-ratio: 585 / 532; }
.gallery__wide { margin-top: 40px; align-items: flex-start; }
.gallery__wide img { width: 1218px; max-width: 89%; aspect-ratio: 1218 / 770; object-fit: cover; border-radius: var(--r-img); }
.gallery__wide figcaption { width: 118px; }

/* ── Explore ── */
.explore { padding: var(--section) 0 var(--section-lg); }
.explore__row { display: grid; grid-template-columns: 322px 322px 1fr; gap: 24px; align-items: start; }
.explore__tile { display: flex; flex-direction: column; gap: 18px; }
.explore__tile img { width: 100%; aspect-ratio: 322 / 277; object-fit: cover; border-radius: var(--r-img); transition: transform .8s var(--ease-out); }
.explore__tile > span { display: inline-flex; align-items: center; gap: 8px; }
.explore__tile > span svg { width: 16px; height: 16px; transition: transform .35s var(--ease-out); }
.explore__tile:hover > span svg { transform: translateX(4px); }
.explore__tile:hover img { transform: scale(1.02); }
.explore__card { display: flex; align-items: stretch; gap: 40px; padding: 20px 20px 20px 24px; border-radius: var(--r); background: var(--surface); }
.explore__card-text { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.explore__card-text .t-label { margin-bottom: 23px; }
.explore__card-text .btn { align-self: flex-start; }
.explore__card img { width: 280px; aspect-ratio: 280 / 269; object-fit: cover; border-radius: var(--r-img); flex: none; }

/* ── Footer ── */
.site-foot { background: var(--night); color: var(--on-dark); padding: 80px var(--gutter) 23px; }
.site-foot__top, .site-foot__bottom { max-width: var(--container); margin-inline: auto; }
.site-foot__top { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.site-foot__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.site-foot__tag { font: 600 14px/1.36 var(--font); }
.site-foot__note { max-width: 280px; }
.site-foot__menus { display: grid; grid-template-columns: 1fr 1fr; gap: 72px 40px; align-content: start; }
.site-foot__col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.site-foot__col p { color: var(--on-dark-2); }
.site-foot__col a { font: 400 24px/1.3 var(--font); letter-spacing: -.48px; transition: opacity var(--dur-fast) var(--ease); }
.site-foot__col a:hover { opacity: .6; }
.site-foot__bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 80px; padding: 41px 0 27px; border-top: 1px solid var(--line-dark); }
.site-foot__bottom div { display: flex; gap: 20px; }
.site-foot__bottom a { transition: opacity var(--dur-fast) var(--ease); }
.site-foot__bottom a:hover { opacity: .6; }

/* ── Tablet ── */
@media (max-width: 1199px) {
  .hero__inner { flex-direction: column; align-items: flex-start; }
  .hero .scroll-cue { display: none; }
  .listing { width: min(559px, 100%); }
  .intro__top { flex-direction: column; gap: 24px; }
  .feature__row { padding-right: var(--gutter); }
  .elevated__bottom { gap: 48px; }
  .explore__row { grid-template-columns: 1fr 1fr; }
  .explore__card { grid-column: 1 / -1; }
  .menu { padding-right: 40px; }
}
@media (max-width: 1023px) {
  .stats { grid-template-columns: 1fr; gap: 24px; }
  .stat { min-height: 0; gap: 40px; }
  .overview__ghost { font-size: 200px; }
  .site-foot__top { grid-template-columns: 1fr; gap: 56px; }
}

/* ── Phone ── */
@media (max-width: 767px) {
  .site-head { grid-template-columns: auto 1fr; padding: 20px var(--gutter); background: var(--accent); color: var(--on-accent); position: fixed; }
  .site-head__logo { grid-column: 1; grid-row: 1; justify-self: start; }
  .wordmark { font-size: 21px; }
  .site-head__cta { display: none; }
  .menu-toggle { grid-column: 2; grid-row: 1; justify-self: end; }
  .menu-toggle__icon { width: 40px; }
  .menu-toggle__txt { display: none; }
  .menu-toggle { min-height: 44px; min-width: 44px; justify-content: flex-end; }
  .menu { top: 82px; left: 0; width: 100%; grid-template-columns: 1fr; padding: 32px var(--gutter); border-radius: 0 0 var(--r-lg) var(--r-lg); gap: 32px; }
  .menu__main { gap: 8px; }
  .menu__main a, .menu__social a { font-size: 40px; }
  .hero { min-height: 0; padding: 130px var(--gutter) 60px; }
  .hero__bg { object-position: 12% center; }
  .hero::after { inset: 0; background: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .45) 40%, var(--scrim)); }
  .hero__inner { gap: 40px; }
  .hero__copy .t-display { margin-top: 12px; }
  .hero__actions { flex-wrap: wrap; gap: 20px; margin-top: 24px; }
  .listing__specs { flex-wrap: wrap; justify-content: flex-start; gap: 20px 28px; padding: 20px 16px; }
  .listing__top { padding: 16px; }
  .intro__text { gap: 24px; }
  .stats { margin-top: 40px; }
  .stat { padding: 24px 16px; }
  .stat__num b { font-size: 56px; }
  .overview .scroll-cue { margin: 30px 0 20px; }
  .overview__stage { margin: 20px 0; }
  .overview__stage { display: flex; flex-direction: column; }
  .overview__ghost { position: static; transform: none; font-size: 84px; color: rgba(var(--ink-rgb), .25); order: 2; margin-top: 12px; }
  .overview__img { aspect-ratio: 334 / 207; }
  .feature__row { flex-direction: column; align-items: stretch; gap: 30px; padding-right: var(--gutter); }
  .feature__img { width: 100%; max-width: none; aspect-ratio: 1; }
  .feature__text, .elevated__text { gap: 20px; }
  .feature__body, .elevated__body { gap: 20px; }
  .film__split { flex-direction: column; gap: 12px; margin-top: 30px; }
  .film__frame { aspect-ratio: 335 / 194; }
  .elevated .ghost-title { margin-bottom: -20px; }
  .elevated__top, .elevated__bottom { flex-direction: column; gap: 24px; align-items: stretch; }
  .elevated__big, .elevated__tall, .elevated__text { width: 100%; max-width: none; }
  .elevated__big { aspect-ratio: 335 / 314; }
  .elevated__tall { aspect-ratio: 1; }
  .elevated__bottom { margin-top: 40px; }
  .stars svg { width: 20px; height: 20px; }
  .gallery .ghost-title, .explore .ghost-title { margin-bottom: -30px; }
  .gallery__pair { flex-direction: column; gap: 24px; }
  .gallery figure { gap: 16px; }
  .gallery__m, .gallery__wide img { width: 100%; max-width: none; }
  .gallery__m img, .gallery__s img, .gallery__wide img { aspect-ratio: 335 / 305; }
  .gallery__s { width: 100%; }
  .gallery__wide { flex-direction: column; margin-top: 24px; }
  .explore__row { grid-template-columns: 1fr 1fr; gap: 24px; }
  .explore__card { flex-direction: column; gap: 24px; padding: 10px 10px 10px; }
  .explore__card-text { padding: 10px; }
  .explore__card img { width: 100%; aspect-ratio: 315 / 304; }
  .wordmark--xl { font-size: 64px; }
  .site-foot { padding-top: 60px; }
  .site-foot__menus { gap: 40px 20px; }
  .site-foot__col a { font-size: 20px; }
  .site-foot__bottom { flex-direction: column; margin-top: 40px; padding-top: 24px; }
}

/* Header button: the "bordered" variant keeps its edge on bright photo areas */
.btn--bordered .btn__label, .btn--bordered .btn__go { box-shadow: inset 0 0 0 1px var(--line); }

/* ───────── Amenities ───────── */
/* ── Amenities page (prefix am-) — four chapters: head, split, wide photo ── */


/* Chapter: section padding 65 (130 after the hero and before the footer); head → split 80, split → wide 120 */
.am-chapter { padding: var(--section) 0; }
.am-chapter--first { padding-top: var(--section-lg); }
.am-chapter--last { padding-bottom: var(--section-lg); }
.am-chapter__inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-block); }
.am-chapter__lead { display: flex; flex-direction: column; gap: 80px; width: 100%; }
.am-head { max-width: 859px; letter-spacing: -2px; }
.am-head--narrow { max-width: 711px; }
.am-head--wide { max-width: none; }

/* Split: photo and text in one row, text block centred on the photo; photo 760 beside a 550 column, or 655 / 655 mirrored */
.am-split { display: flex; align-items: center; gap: 50px; width: 100%; }
.am-split__img { flex: 1 0 0; width: 1px; min-width: 0; max-width: 870px; aspect-ratio: 655 / 750; object-fit: cover; border-radius: var(--r-img); }
.am-split__text { flex: 1 0 0; width: 1px; min-width: 0; max-width: 550px; display: flex; flex-direction: column; gap: 40px; }
.am-split__head { display: flex; flex-direction: column; gap: 80px; }
.am-split--mirror .am-split__text { max-width: none; }
.am-split--mirror .am-split__img { max-width: 760px; }
.am-split--mirror .t-h2, .am-split--mirror .t-body { max-width: 550px; }

/* Wide photo: 1126 left-aligned at the gutter, or the full 1360 container */
.am-wide { width: 100%; max-width: 1126px; aspect-ratio: 1126 / 622; object-fit: cover; border-radius: var(--r-img); }
.am-wide--full { max-width: none; aspect-ratio: 1360 / 622; }

/* Tablet: lead drops under the headline; the split stacks in DOM order (as the source does) */
@media (max-width: 1023px) {
  .am-head { letter-spacing: -1px; }
  .am-chapter__lead { gap: 60px; }
  .am-split { flex-direction: column; align-items: stretch; gap: 30px; }
  .am-split__img, .am-split__text { flex: none; width: 100%; max-width: none; }
  .am-split--mirror .am-split__img { max-width: none; }
  .am-split__text { gap: 20px; }
  .am-split__head { gap: 24px; }
}

/* Phone */
@media (max-width: 767px) {
  .am-chapter__lead { gap: 40px; }
  .am-split__text, .am-split__head { gap: 16px; }
  .am-wide, .am-wide--full { max-width: none; aspect-ratio: 350 / 193; }
}

/* ───────── Contact ───────── */
/* Orvel — contact page (prefix ct- / scope .page-contact). Tokens only. */


/* Contact split: text left, form card right */
.ct-contact { padding: var(--section-lg) 0 0; }
.ct-contact__row { display: grid; grid-template-columns: minmax(0, 1fr) 750px; gap: 130px; align-items: start; }
.ct-info .t-h2 { max-width: 520px; }
.ct-info__lead { max-width: 440px; margin-top: 32px; }
.ct-info__blocks { display: flex; flex-direction: column; gap: 56px; margin-top: 80px; }
.ct-info__block { display: flex; flex-direction: column; gap: 16px; }
.ct-info__block p { color: var(--text-2); max-width: 320px; }
.ct-info__block a { transition: opacity var(--dur-fast) var(--ease); }
.ct-info__block a:hover { opacity: .6; }

/* Form card */
.ct-form { display: flex; flex-direction: column; gap: 32px; padding: 40px; border-radius: var(--r); background: var(--surface); }
.ct-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.ct-field { display: flex; flex-direction: column; gap: 8px; }
.ct-field label { font: 500 16px/1.7 var(--font); }
.ct-field input, .ct-field textarea, .ct-phone { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-img); color: var(--ink); font: 400 16px/1.7 var(--font); }
.ct-field input, .ct-phone { height: var(--btn-h); padding: 0 16px; }
.ct-field textarea { min-height: 145px; padding: 13px 16px; resize: vertical; }
.ct-field input::placeholder, .ct-field textarea::placeholder { color: var(--text-2); opacity: .7; }
.ct-field input:focus-visible, .ct-field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ct-phone { display: flex; align-items: center; gap: 12px; }
.ct-phone__prefix { color: var(--text-2); flex: none; }
.ct-phone input { height: 100%; flex: 1; min-width: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; }
.ct-phone input:focus-visible { outline: none; }
.ct-phone:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.ct-check { display: flex; align-items: flex-start; gap: 12px; font: 500 14px/1.5 var(--font); color: var(--text-2); cursor: pointer; }
.ct-check input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); cursor: pointer; }
.ct-check .ulink { font: inherit; color: var(--ink); }
.ct-form__submit { align-self: flex-start; }

/* Schedule: centred block */
.ct-schedule { padding-top: var(--section-lg); }
.ct-schedule__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ct-schedule .t-h2 { max-width: 860px; }
.ct-schedule__p { max-width: 640px; margin-top: 40px; }
.ct-schedule .btn { margin-top: 48px; }

/* Tablet */
@media (max-width: 1199px) { .ct-contact__row { grid-template-columns: minmax(0, 1fr) minmax(0, 600px); gap: 64px; } }
@media (max-width: 1023px) {
  .ct-contact__row { grid-template-columns: 1fr; gap: 48px; }
  .ct-info__blocks { margin-top: 48px; gap: 40px; }
  .ct-form { padding: 32px; }
}

/* Phone: text, then the form; one-column fields; 44px targets */
@media (max-width: 767px) {
  .ct-contact__row { gap: 40px; }
  .ct-info__lead { margin-top: 20px; }
  .ct-info__blocks { margin-top: 32px; gap: 28px; }
  .ct-info__block { gap: 8px; }
  .ct-form { gap: 24px; padding: 20px 16px; }
  .ct-form__row { grid-template-columns: 1fr; gap: 24px; }
  .ct-check { min-height: 44px; align-items: center; }
  .ct-check input { width: 20px; height: 20px; margin: 0; }
  .ct-schedule__p { margin-top: 24px; }
  .ct-schedule .btn { margin-top: 32px; }
}

/* Phone: keep the skill's 72px breathing room between sections */
@media (max-width: 767px) {
  .ct-contact { padding-top: 72px; }
  .ct-schedule { padding-top: 72px; }
  .page-contact .explore { padding-top: 72px; }
}

/* ───────── Neighborhood ───────── */
/* Orvel — neighbourhood page (prefix nb- / scope .page-neighborhood). Tokens only. */


/* Intro: statement, photo-left split, wide photo */
.nb-intro { padding: var(--section-lg) 0 0; }
.nb-intro__h { max-width: 900px; }
.nb-split { display: flex; align-items: center; gap: 50px; margin-top: 112px; }
.nb-split__img { width: 760px; max-width: 56%; aspect-ratio: 760 / 700; object-fit: cover; border-radius: var(--r-img); flex: none; }
.nb-split__text { display: flex; flex-direction: column; gap: 40px; max-width: 520px; }
.nb-wide { width: 1126px; max-width: 83%; aspect-ratio: 1126 / 622; object-fit: cover; border-radius: var(--r-img); margin-top: 80px; }

/* Dining: heading + 3×2 surface cards */
.nb-dining { padding-top: var(--section-lg); }
.nb-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 80px; }
.nb-card { display: flex; flex-direction: column; justify-content: center; gap: 16px; min-height: 252px; padding: 32px 24px; border-radius: var(--r); background: var(--surface); }
.nb-card h3 { font: 400 24px/1.4 var(--font-display); letter-spacing: -.5px; }

/* Gallery: tall + medium photo, captions under, then a wide photo with its label at the side */
.nb-gallery { padding: var(--section-lg) 0; }
.nb-gallery figure { display: flex; flex-direction: column; gap: 24px; }
.nb-gallery img { object-fit: cover; border-radius: var(--r-img); }
.nb-gallery__pair { display: flex; gap: 80px; align-items: flex-start; }
.nb-gallery__tall { width: 720px; max-width: 53%; flex: none; }
.nb-gallery__tall img { width: 100%; aspect-ratio: 720 / 870; }
.nb-gallery__mid { width: 560px; max-width: 41%; }
.nb-gallery__mid img { width: 100%; aspect-ratio: 560 / 594; }
.nb-gallery__wide { flex-direction: row; align-items: flex-start; margin-top: 80px; }
.nb-gallery__wide img { width: 984px; max-width: 72%; aspect-ratio: 984 / 622; }
.nb-gallery__wide figcaption { width: 118px; }

/* Tablet */
@media (max-width: 1199px) {
  .nb-split { gap: var(--gap-col); }
  .nb-split__img { max-width: 50%; }
}
@media (max-width: 1023px) {
  .nb-split { margin-top: 64px; }
  .nb-wide { max-width: 100%; }
  .nb-cards { grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; }
  .nb-card { min-height: 0; padding: 32px 24px; }
  .nb-gallery__pair { gap: 40px; }
  .nb-gallery__wide img { max-width: 100%; }
  .nb-gallery__wide { flex-direction: column; }
}

/* Phone: everything stacks, photos full width */
@media (max-width: 767px) {
  .nb-split { flex-direction: column; align-items: stretch; gap: 30px; margin-top: 40px; }
  .nb-split__img { width: 100%; max-width: none; aspect-ratio: 1; }
  .nb-split__text { gap: 20px; max-width: none; }
  .nb-split__text .t-h3 { font-size: 36px; letter-spacing: -1px; line-height: 1.2; }   /* the source sets this heading at 36 on phones */
  .nb-wide { width: 100%; margin-top: 40px; aspect-ratio: 335 / 194; }
  .nb-cards { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
  .nb-card { padding: 24px 16px; }
  .nb-gallery figure { gap: 16px; }
  .nb-gallery__pair { flex-direction: column; gap: 24px; }
  .nb-gallery__tall, .nb-gallery__mid { width: 100%; max-width: none; }
  .nb-gallery__tall img, .nb-gallery__mid img { aspect-ratio: 335 / 305; }
  .nb-gallery__wide { margin-top: 24px; }
  .nb-gallery__wide img { aspect-ratio: 335 / 216; }
}
@media (max-width: 767px) {
  .nb-gallery__cap br { display: none; }
  .nb-gallery__wide figcaption { width: auto; max-width: none; }
}

/* Phone: keep the skill's 72px breathing room between sections */
@media (max-width: 767px) {
  .nb-intro { padding-top: 72px; }
  .nb-dining { padding-top: 72px; }
  .nb-gallery { padding: 72px 0; }
}

/* ───────── Residence ───────── */
/* Orvel — residence detail page (prefix rd- / scoped under .page-residence). Values measured from the source detail page. */


/* ── Intro: heading + specs + paragraph left (40px stack), square photo right, row centred ── */
.rd-intro { padding: var(--section-lg) 0 var(--section); }
.rd-intro__row { display: flex; align-items: center; gap: var(--gap-col); }
.rd-intro__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 40px; }
.rd-intro__text .t-h2 { max-width: 440px; }
.rd-intro__p { max-width: 400px; }
.rd-specs { display: flex; justify-content: space-between; gap: 24px; width: 100%; }
.rd-specs > div { display: flex; align-items: center; gap: 14px; flex: 1 1 0; max-width: 160px; }
.rd-specs dd { display: flex; flex-direction: column; gap: 1px; font: 400 14px/1.36 var(--font); white-space: nowrap; }
.rd-specs b { font-weight: 400; }
.rd-intro__img { width: 730px; max-width: 54%; flex: none; aspect-ratio: 730 / 740; object-fit: cover; border-radius: var(--r-img); }

/* ── Rooms: photo lists with 80px stacks, bottom-aligned then top-aligned pairs, a centred statement between ── */
.rd-rooms { padding: var(--section) 0; }
.rd-list { display: flex; flex-direction: column; gap: 80px; }
.rd-list img, .rd-list .film__frame { border-radius: var(--r-img); object-fit: cover; }
.rd-wide { width: 83%; aspect-ratio: 1129 / 624; }
.rd-pair { display: flex; justify-content: space-between; gap: 40px; }
.rd-pair--bottom { align-items: flex-end; }
.rd-pair--top { align-items: flex-start; }
.rd-pair__a { width: 59%; aspect-ratio: 802 / 818; }
.rd-pair__b { width: 35%; aspect-ratio: 476 / 556; }
.rd-pair__c { width: 48%; aspect-ratio: 653 / 554; }
.rd-pair__d { width: 46%; aspect-ratio: 626 / 851; }
.rd-rooms .film__frame { aspect-ratio: 1360 / 622; }
.rd-statement { max-width: 1243px; margin: 80px auto; text-align: center; letter-spacing: -2px; }
.rd-next { display: flex; justify-content: flex-end; }

/* ── Closing: photo left, heading + paragraph + button right (40px stack), row centred ── */
.rd-closing { padding: var(--section) 0 var(--section-lg); }
.rd-closing__row { display: flex; align-items: center; gap: var(--gap-col); padding-right: calc(var(--gutter) + 67px); }
.rd-closing__img { flex: 1 1 0; min-width: 0; aspect-ratio: 607 / 559; object-fit: cover; border-radius: var(--r-img); }
.rd-closing__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 40px; }
.rd-closing__text .t-h2 { max-width: 781px; }

/* ── Tablet ── */
@media (max-width: 1199px) {
  .rd-intro__row, .rd-closing__row { flex-direction: column; align-items: flex-start; gap: 24px; }
  .rd-intro__text { gap: 24px; }
  .rd-intro__img { width: 100%; max-width: none; }
  .rd-closing__row { padding-right: var(--gutter); gap: 40px; }
  .rd-closing__img { width: 100%; flex: none; }
  .rd-closing__text { width: 100%; flex: none; }
  .rd-list { gap: 40px; }
  .rd-statement { margin: 40px auto; }
}

/* ── Phone: every photo full width at its own ratio, 20px stacks ── */
@media (max-width: 767px) {
  .rd-intro__row { gap: 20px; }
  .rd-intro__text { gap: 16px; }
  .rd-specs { flex-wrap: wrap; justify-content: flex-start; gap: 16px 24px; }
  .rd-specs > div { flex: none; max-width: none; }
  .rd-intro__img { aspect-ratio: 350 / 442; }
  .rd-list { gap: 20px; }
  .rd-wide, .rd-pair__a, .rd-pair__b, .rd-pair__c, .rd-pair__d { width: 100%; }
  .rd-pair { flex-direction: column; gap: 20px; }
  .rd-rooms .film__frame { aspect-ratio: 1360 / 622; }
  .rd-statement { margin: 30px auto; letter-spacing: -1px; }
  .rd-closing__row { gap: 30px; }
  .rd-closing__text { gap: 16px; }
  .rd-closing__text .btn { margin-top: 8px; }
}

/* ───────── Style Guide ───────── */
/* Orvel — style guide page (prefix sg- / scope .page-style-guide). Tokens only. */

/* ── Page frame: the header is absolute in ink over white, so the page starts 130px down ── */
.page-style-guide main { padding-top: var(--section-lg); }
.page-style-guide code { font: 400 13px/1.4 var(--mono); color: var(--ink); background: var(--surface-2); padding: 2px 7px; border-radius: var(--r-xs); white-space: nowrap; }
.sg-k { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sg-k code { text-transform: none; }
.sg-meta { max-width: 520px; margin-top: 12px; font: 400 14px/1.6 var(--font); color: var(--text-2); }
.sg-meta--chips { display: flex; flex-wrap: wrap; gap: 6px 8px; max-width: none; margin-top: 24px; }
.sg-meta--chips + .sg-meta { margin-top: 12px; }
.sg-meta + .sg-meta:not(.sg-meta--chips) { margin-top: 8px; }
.sg-box > .sg-meta:first-of-type:not(.sg-meta--chips), .sg-ghoststage + .sg-meta, .sg-space + .sg-meta, .sg-ease + .sg-meta { margin-top: 24px; }
.sg-meta--light { color: var(--on-dark-2); }
.sg-meta--light code { background: var(--night-2); color: var(--on-dark); }
.sg-intro { max-width: 640px; }
.sg-measure { max-width: 34em; }
.sg-night { background: var(--night); color: var(--on-dark); border-radius: var(--r); }
.sg-night--strip { display: inline-flex; align-items: center; padding: 12px; }
.sg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.sg-row--wide { gap: 24px 32px; }
.sg-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

/* ── Overview board (the first 1440 × 990) ── */
.sg-top { padding-bottom: 24px; }
.sg-title { display: flex; flex-direction: column; gap: 8px; }
.sg-title p { max-width: none; }
.sg-board { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: minmax(300px, auto) auto; gap: 24px; margin-top: 32px; }
.sg-tile { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: var(--r); background: var(--surface); overflow: hidden; }
.sg-tile--pad { padding: 16px; justify-content: center; }
.sg-board__type { grid-column: 1 / 5; grid-row: 1 / 3; }
.sg-board__colors { grid-column: 5 / 8; grid-row: 1; }
.sg-board__stat { grid-column: 8 / 11; grid-row: 1; min-height: 0; }
.sg-board__photo { grid-column: 11 / 13; grid-row: 1; display: flex; flex-direction: column; gap: 18px; min-height: 0; }
.sg-board__photo img { flex: 1 1 0; min-height: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-img); }
.sg-board__listing { grid-column: 5 / 10; grid-row: 2; }
.sg-board__listing .listing { width: 100%; }
.sg-board__actions { grid-column: 10 / 13; grid-row: 2; gap: 12px; padding: 20px; }
.sg-board__actions .sg-stack { gap: 8px; }
.sg-board__actions .sg-night--strip { padding: 8px; }
.sg-board__actions .sg-row { gap: 12px 16px; }

.sg-aa { font: 400 160px/.9 var(--font-display); letter-spacing: -4px; margin-top: 8px; }
.sg-fams { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sg-fams li { display: flex; flex-direction: column; gap: 2px; }
.sg-fams b { font: 500 18px/1.3 var(--font); }
.sg-fams__serif { font: 400 26px/1.1 var(--font-display) !important; letter-spacing: -.5px; }
.sg-fams span { font: 400 14px/1.5 var(--font); color: var(--text-2); }
.sg-sizes { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; font: 400 24px/1.1 var(--font-display); letter-spacing: -.5px; }
.sg-sizes i { font-style: normal; color: var(--text-2); }
.sg-board__ghost { position: absolute; left: 16px; bottom: -.18em; font-size: 200px; line-height: 1; white-space: nowrap; pointer-events: none; }

.sg-mini { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 8px; }
.sg-mini li { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sg-mini i { display: block; height: 48px; border-radius: var(--r-img); box-shadow: inset 0 0 0 1px var(--line); }
.sg-mini b { font: 500 14px/1.36 var(--font); }
.sg-mini code { align-self: flex-start; font-size: 11px; padding: 2px 5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* ── Sections ── */
.sg-sec { padding: var(--section) 0; }
.sg-sec--last { padding-bottom: var(--section-lg); }
.sg-head { display: flex; justify-content: space-between; gap: 40px; }
.sg-head__text { width: 876px; max-width: 100%; display: flex; flex-direction: column; gap: 40px; }
.sg-head .t-h2 { max-width: 781px; }
.sg-g { font: 400 24px/1.4 var(--font-display); letter-spacing: -.5px; margin-top: 80px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.sg-g:first-of-type { margin-top: 80px; }

/* Colour swatches */
.sg-sws { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.sg-sws li { display: grid; grid-template-columns: 72px 1fr; grid-template-rows: auto auto auto; column-gap: 16px; row-gap: 2px; align-content: start; }
.sg-sws i { grid-row: 1 / 4; width: 72px; height: 72px; border-radius: var(--r-img); }
.sg-sws__white { box-shadow: inset 0 0 0 1px var(--line); }
.sg-sws b { font: 500 16px/1.5 var(--font); }
.sg-sws code { justify-self: start; }
.sg-sws span { font: 400 14px/1.5 var(--font); color: var(--text-2); }
.sg-sws__brand b::after { content: "brand slot"; display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font: 500 11px/1.6 var(--font); text-transform: uppercase; vertical-align: 2px; }

/* Type specimens */
.sg-specs { display: flex; flex-direction: column; margin-top: 56px; }
.sg-spec { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px 48px; align-items: start; padding: 32px 0; border-top: 1px solid var(--line); }
.sg-spec:last-child { border-bottom: 1px solid var(--line); }
.sg-spec__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font: 400 14px/1.5 var(--font); color: var(--text-2); }
.sg-spec__meta code { margin-right: 4px; }
.sg-spec .t-display, .sg-spec .t-h1, .sg-spec .t-h2, .sg-spec .t-h3 { max-width: 860px; }
.sg-ghoststage { margin-top: 24px; overflow: hidden; border-radius: var(--r); background: var(--surface); padding: 24px 0; }
.sg-ghoststage .t-ghost { line-height: 1; white-space: nowrap; text-align: center; }
.sg-marks { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; margin-top: 24px; }
.sg-marks__a, .sg-marks__b { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 32px; border-radius: var(--r); background: var(--surface); }
.sg-marks__b { background: var(--night); }
.sg-marks__b .wordmark { max-width: 100%; }
.sg-marks .sg-meta { margin-top: 0; max-width: none; }

/* Radii, spacing, shadows, easing */
.sg-radii, .sg-space, .sg-shadows, .sg-ease { list-style: none; margin: 24px 0 0; padding: 0; }
.sg-radii { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; }
.sg-radii li { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.sg-radii i { display: block; width: 100%; max-width: 120px; aspect-ratio: 1; background: var(--surface-2); }
.sg-radii span, .sg-space span, .sg-shadows span, .sg-ease span { font: 400 14px/1.5 var(--font); color: var(--text-2); }
.sg-space { display: flex; flex-direction: column; gap: 14px; }
.sg-space li { display: grid; grid-template-columns: 220px 320px 1fr; gap: 16px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.sg-space code { justify-self: start; }
.sg-space i { display: block; height: 8px; max-width: 100%; border-radius: var(--r-pill); background: var(--accent); }
.sg-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.sg-shadows { display: flex; gap: 32px; flex-wrap: wrap; }
.sg-shadows li { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.sg-shadows i { display: block; width: 180px; height: 110px; border-radius: var(--r); background: var(--bg); box-shadow: var(--shadow-1); }
.sg-shadows { padding: 32px; border-radius: var(--r); background: var(--surface); }
.sg-ease { display: flex; flex-direction: column; gap: 24px; }
.sg-ease li { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.sg-ease__track { display: block; position: relative; width: 240px; max-width: 100%; height: 24px; margin-top: 4px; border-radius: var(--r-pill); background: var(--surface-2); }
.sg-ease__track b { position: absolute; top: 4px; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); animation: sg-glide 3s var(--sg-e) infinite; }
@keyframes sg-glide { 0%, 20% { transform: translateX(0); } 50%, 70% { transform: translateX(216px); } 100% { transform: translateX(0); } }

/* Components */
.sg-comp { display: flex; flex-direction: column; gap: 96px; margin-top: 80px; }
.sg-box { display: flex; flex-direction: column; }
.sg-box__t { font: 400 24px/1.4 var(--font-display); letter-spacing: -.5px; margin-bottom: 32px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.sg-stage { padding: 32px; border-radius: var(--r); background: var(--surface); }
.sg-stage--white { background: var(--bg); padding: 0; }
.sg-stage--head { padding: 0 0 32px; overflow: hidden; }
.sg-stage--head .site-head { position: relative; inset: auto; padding: 25px 24px; }
.sg-stage--head .menu-toggle { cursor: default; }
.sg-stage--head .menu { position: relative; top: auto; left: auto; grid-column: 1 / -1; width: calc(100% - 48px); margin: 20px 24px 0; }
.sg-comp .stats { margin-top: 0; }
.sg-comp .gallery { padding: 0; }
.sg-comp .nb-cards { margin-top: 0; }
.sg-feature { padding-right: 0; }
.sg-film { max-width: 900px; }
.sg-explore { grid-template-columns: 322px 1fr; }
.sg-form { max-width: 750px; }
.sg-stage .listing { width: min(559px, 100%); }
.sg-stage .scroll-cue { flex: none; }
.sg-stage .stat__label { margin: 0; }

/* Icons */
.sg-icons { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sg-icons li { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; gap: 4px 16px; padding: 24px; border-radius: var(--r); background: var(--surface); }
.sg-icons__big { grid-column: 1; grid-row: 1; display: grid; place-items: center; width: 96px; height: 96px; margin-bottom: 20px; border-radius: var(--r-img); background: var(--bg); color: var(--ink); }
.sg-icons__big svg { width: 48px; height: 48px; }
.sg-icons__star svg { fill: var(--star); }
.sg-icons__bars .menu-toggle__icon { width: 48px; }
.sg-icons li > .ico-well, .sg-icons li > .stars, .sg-icons__inline { grid-column: 2; grid-row: 1; align-self: start; }
.sg-icons__inline { display: inline-flex; gap: 2px; width: 41px; height: 41px; align-items: center; justify-content: center; border-radius: var(--r-xs); background: var(--surface-2); }
.sg-icons__inline svg { width: 14px; height: 14px; }
.sg-icons__inline--bars { width: auto; padding: 0 12px; }
.sg-icons__inline--bars .menu-toggle__icon { width: 32px; gap: 5px; }
.sg-icons b { grid-column: 1 / -1; font: 500 16px/1.5 var(--font); }
.sg-icons li > span:last-child { grid-column: 1 / -1; font: 400 14px/1.5 var(--font); color: var(--text-2); }

/* ── Tablet ── */
@media (max-width: 1199px) {
  .sg-board { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: auto; grid-auto-rows: auto; }
  .sg-board__type, .sg-board__colors, .sg-board__stat, .sg-board__photo, .sg-board__listing, .sg-board__actions { grid-column: auto; grid-row: auto; }
  .sg-board__type { grid-column: span 3; min-height: 520px; }
  .sg-board__colors, .sg-board__stat, .sg-board__actions, .sg-board__listing { grid-column: span 3; }
  .sg-board__photo { grid-column: span 3; }
  .sg-board__photo img { aspect-ratio: 4 / 3; flex: none; height: auto; }
  .sg-board__stat { min-height: 260px; }
  .sg-head { flex-direction: column; gap: 24px; }
  .sg-head__text { gap: 24px; }
  .sg-sws { grid-template-columns: 1fr 1fr; }
  .sg-spec { grid-template-columns: 1fr; gap: 16px; }
  .sg-radii { grid-template-columns: repeat(3, 1fr); }
  .sg-space li { grid-template-columns: 200px 1fr; }
  .sg-space i { grid-column: 1 / -1; }
  .sg-pair { gap: 48px; }
  .sg-marks { grid-template-columns: 1fr; }
  .sg-icons { grid-template-columns: 1fr 1fr; }
  .sg-explore { grid-template-columns: 1fr 1fr; }
  .sg-explore .explore__card { grid-column: 1 / -1; }
  .sg-feature { padding-right: 0; }
}
@media (max-width: 1023px) {
  .sg-board { grid-template-columns: 1fr 1fr; }
  .sg-board__type, .sg-board__colors, .sg-board__stat, .sg-board__photo, .sg-board__listing, .sg-board__actions { grid-column: span 1; }
  .sg-board__listing { grid-column: span 2; }
  .sg-board__type { min-height: 460px; }
  .sg-pair { grid-template-columns: 1fr; }
  .sg-comp { gap: 72px; }
  .sg-feature { flex-direction: column; align-items: stretch; gap: 30px; }
  .sg-feature .feature__img { width: 100%; max-width: none; aspect-ratio: 1; }
  .sg-feature .feature__text, .sg-feature .feature__body { gap: 20px; }
}

/* ── Phone ── */
@media (max-width: 767px) {
  .page-style-guide main { padding-top: 130px; }
  .sg-board { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
  .sg-board__listing { grid-column: span 1; }
  .sg-board__type { min-height: 0; }
  .sg-aa { font-size: 120px; letter-spacing: -3px; }
  .sg-board__ghost { font-size: 120px; }
  .sg-tile { padding: 20px; }
  .sg-mini { gap: 12px 8px; }
  .sg-mini i { height: 48px; }
  .sg-board__photo img { aspect-ratio: 335 / 305; }
  .sg-intro { margin-top: 24px; }
  .sg-g, .sg-g:first-of-type { margin-top: 48px; }
  .sg-sws { grid-template-columns: 1fr; gap: 20px; }
  .sg-sws li { grid-template-columns: 56px 1fr; }
  .sg-sws i { width: 56px; height: 56px; }
  .sg-specs { margin-top: 32px; }
  .sg-spec { padding: 24px 0; }
  .sg-ghoststage { padding: 12px 0; }
  .sg-marks__a, .sg-marks__b { padding: 20px; }
  .sg-radii { grid-template-columns: 1fr 1fr; gap: 16px; }
  .sg-space li { grid-template-columns: 1fr; gap: 6px; }
  .sg-shadows { padding: 20px; gap: 20px; }
  .sg-shadows i { width: 140px; height: 90px; }
  .sg-comp { gap: 56px; margin-top: 48px; }
  .sg-box__t { margin-bottom: 20px; }
  .sg-stage { padding: 20px 16px; }
  .sg-stage--head { padding: 0 0 20px; }
  .sg-stage--head .site-head { padding: 20px 16px; }
  .sg-stage--head .menu { width: 100%; margin: 0; border-radius: 0 0 var(--r-lg) var(--r-lg); }
  .sg-explore { grid-template-columns: 1fr 1fr; }
  .sg-icons { grid-template-columns: 1fr; gap: 16px; }
  .sg-icons li { padding: 20px 16px; }
  .sg-row--wide { gap: 16px 20px; }
}

/* ───────── Variants ───────── */
/* Orvel — section variants library (prefix v- / scope .page-variants). Tokens only; no url(). */

/* Page opens on white: 130px above the first line so the absolute header reads in ink */
.page-variants main { padding-top: 130px; }

/* ── Intro: label column + statement + lead, then a jump list of every variant ── */
.v-intro { padding-bottom: var(--section); }
.v-intro__top { display: flex; justify-content: space-between; gap: 40px; }
.v-intro__text { width: 876px; max-width: 100%; display: flex; flex-direction: column; gap: 40px; }
.v-intro__text .t-lead { max-width: 700px; }
.v-jump { list-style: none; margin: 80px 0 0; padding: 40px 0 0; display: flex; flex-direction: column; gap: 16px; border-top: 1px solid var(--line); }
.v-jump li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.v-jump li > span { width: 173px; flex: none; }
.v-jump .chip-link { padding: 8px 10px 8px 12px; }

/* ── Variant frame: one full-width section per variant, a hairline label bar above the real markup ── */
.v-var { padding-top: var(--section-lg); overflow-x: clip; }   /* ghost words never widen the page */
main > .v-var:last-child { padding-bottom: var(--section-lg); }
.v-bar { display: flex; align-items: flex-start; gap: 24px; padding: 16px var(--gutter); margin-bottom: 64px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.v-bar__id { flex: none; display: inline-flex; padding: 8px 12px; border-radius: var(--r-sm); background: var(--surface-2); font: 400 14px/1.36 var(--font); text-transform: uppercase; }
.v-bar__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.v-bar h2 { font: 400 24px/1.4 var(--font-display); letter-spacing: -.5px; }   /* the 24px serif card-title size, so the h2 median stays above the h3s */
.v-bar__meta { display: flex; flex-wrap: wrap; gap: 4px 24px; color: var(--text-2); font: 400 14px/1.36 var(--font); }
.v-bar__meta code { font: inherit; }
/* the demo sections bring their own top/bottom padding; inside the library the frame owns the spacing */
.v-var > :not(.v-bar):not(.hero) { padding-top: 0; padding-bottom: 0; }

/* ── hero-c: label + headline + lead left on white, tall photo right with a three-spec row under it ── */
.v-hero-c { display: flex; align-items: center; gap: var(--gap-col); }
.v-hero-c .hero__copy { flex: 1 1 0; min-width: 0; max-width: 653px; }
.v-hero-c__media { width: 627px; max-width: 46%; flex: none; display: flex; flex-direction: column; gap: 32px; }
.v-hero-c__media img { width: 100%; aspect-ratio: 627 / 786; object-fit: cover; border-radius: var(--r-img); }

/* ── hero-d: centred headline above a wide frame floating over a ghost word ── */
.v-hero-d { display: flex; flex-direction: column; align-items: center; text-align: center; }
.v-hero-d .t-display { max-width: 1000px; margin-top: 16px; }
.v-hero-d .hero__lead { max-width: 520px; margin-top: 24px; }
.v-hero-d .hero__actions { margin-top: 32px; }
.v-hero-d__stage { position: relative; width: 100%; display: grid; place-items: center; margin-top: 80px; }
.v-hero-d__ghost { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-42%); line-height: 1; text-align: center; white-space: nowrap; z-index: 0; pointer-events: none; }
.v-hero-d__img { position: relative; z-index: 1; width: 800px; max-width: 100%; aspect-ratio: 800 / 470; object-fit: cover; border-radius: var(--r-img); }

/* ── hero-e: full-bleed photo, copy top-left, three compact listing cards along the bottom ── */
.v-hero-e .hero { padding-bottom: 56px; }
.v-hero-e .hero__inner { flex-direction: column; align-items: stretch; gap: 40px; }
/* a soft fade under the copy block only (never over the whole photo): the library heroes carry brighter rooms than the demo's dusk living room */
.v-var > .hero:not(.hero--plain) .hero__copy { position: relative; z-index: 0; }
.v-var > .hero:not(.hero--plain) .hero__copy::before { content: ""; position: absolute; z-index: -1; inset: -140px -200px -60px -200px; background: radial-gradient(ellipse at 40% 50%, rgba(0, 0, 0, .65), rgba(0, 0, 0, 0) 70%); pointer-events: none; }
.v-hero-e__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; color: var(--ink); }
.v-mini { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: var(--r); background: var(--bg); }
.v-mini__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.v-mini h3 { font: 400 24px/1.4 var(--font-display); letter-spacing: -.5px; }
.v-mini__price { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }
.v-mini__price b { font: 400 24px/1.4 var(--font-display); letter-spacing: -.5px; }
.v-mini__price span { font: 400 14px/1.36 var(--font); color: var(--text-2); }

/* ── intro-c: statement left, two stat cards stacked right ── */
.v-intro-c { display: grid; grid-template-columns: minmax(0, 1fr) 437px; gap: var(--gap-col); align-items: center; }
.v-intro-c__text { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; max-width: 700px; }
.v-intro-c__stats { display: flex; flex-direction: column; gap: 32px; }

/* ── feature-b: the feature split with the text first and the photo at the right gutter ── */
.v-feature--mirror .feature__row { padding-right: var(--gutter); padding-left: calc(var(--gutter) + 67px); }

/* ── film-b: the wide gallery frame with its caption at the side, on its own ── */
.v-film-b figure { display: flex; gap: 24px; align-items: flex-start; }
.v-film-b figure img { object-fit: cover; border-radius: var(--r-img); }

/* ── listings-a: the hero listing card shown on a warm panel ── */
.v-listings-a { display: flex; justify-content: center; padding: 64px var(--gutter); border-radius: var(--r); background: var(--surface); }

/* ── listings-b: three residence cards (photo 1.2:1, then the listing card's two panels) ── */
.v-listings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.v-lcard { display: flex; flex-direction: column; gap: 24px; }
.v-lcard > img { width: 100%; aspect-ratio: 6 / 5; object-fit: cover; border-radius: var(--r-img); }
.v-lcard .listing { width: 100%; }
.v-lcard .listing__top, .v-lcard .listing__specs { background: var(--surface); }
.v-lcard .listing__title { max-width: none; }
.v-lcard .listing__specs { gap: 8px; padding: 20px; }

/* ── listings-c: hairline rows — thumbnail 120×90, title, facts, price, chip ── */
.v-rows { border-top: 1px solid var(--line); }
.v-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto auto auto; align-items: center; gap: 32px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.v-row img { width: 120px; height: 90px; object-fit: cover; border-radius: var(--r-img); }
.v-row__main { display: flex; flex-direction: column; gap: 2px; }
.v-row h3 { font: 400 24px/1.4 var(--font-display); letter-spacing: -.5px; }
.v-row__main span { color: var(--text-2); }
.v-row__price { font: 400 24px/1.4 var(--font-display); letter-spacing: -.5px; white-space: nowrap; }

/* ── stats-b: four serif numbers on one hairline row ── */
.v-stats-b { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding: 40px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.v-stats-b > div { display: flex; flex-direction: column; gap: 24px; }
.v-stats-b > div + div { padding-left: 32px; border-left: 1px solid var(--line); }
.v-stats-b .stat__num { justify-content: flex-start; }

/* ── quote-b: stars + serif quote + name left, a tall photo right ── */
.v-quote-b { display: flex; align-items: center; gap: var(--gap-col); }
.v-quote-b__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.v-quote-b__text .quote__text { max-width: 640px; }
.v-quote-b__img { width: 480px; max-width: 40%; flex: none; aspect-ratio: 480 / 600; object-fit: cover; border-radius: var(--r-img); }

/* ── cards-b: three surface cards with a 322×277 photo each ── */
.v-cards-b { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 80px; }
.v-pcard { display: flex; flex-direction: column; gap: 24px; padding: 20px; border-radius: var(--r); background: var(--surface); }
.v-pcard img { width: 100%; aspect-ratio: 322 / 277; object-fit: cover; border-radius: var(--r-img); }
.v-pcard__text { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 0 4px 8px; }
.v-pcard h3 { font: 400 24px/1.4 var(--font-display); letter-spacing: -.5px; }
.v-pcard .tlink { margin-top: 8px; }

/* ── contact-b: the form card centred, the details in a hairline row beneath ── */
.v-contact-b { display: flex; flex-direction: column; align-items: center; }
.v-contact-b .ct-form { width: 750px; max-width: 100%; }
.v-contact-b__details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; width: 100%; max-width: 1000px; margin-top: 80px; padding-top: 40px; border-top: 1px solid var(--line); }

/* ── Tablet ── */
@media (max-width: 1199px) {
  .v-hero-c { flex-direction: column; align-items: stretch; gap: 48px; }
  .v-hero-c .hero__copy { max-width: none; }
  .v-hero-c__media { width: 100%; max-width: none; }
  .v-hero-c__media img { aspect-ratio: 4 / 3; }
  .v-feature--mirror .feature__row { padding-left: var(--gutter); }
  .v-lcard .listing__specs { flex-wrap: wrap; justify-content: flex-start; gap: 16px 24px; }
}
@media (max-width: 1023px) {
  .v-intro-c { grid-template-columns: 1fr; gap: 48px; }
  .v-intro-c__stats { flex-direction: row; }
  .v-intro-c__stats .stat { flex: 1 1 0; }
  .v-hero-e .hero__inner { gap: 32px; }
  .v-hero-e__cards { grid-template-columns: 1fr; gap: 16px; }
  .v-listings { grid-template-columns: 1fr; gap: 24px; }
  .v-lcard { flex-direction: row; align-items: stretch; }
  .v-lcard > img { width: 40%; flex: none; aspect-ratio: auto; }
  .v-lcard .listing { flex: 1; width: auto; }
  .v-row { display: flex; flex-wrap: wrap; gap: 16px 24px; }
  .v-row__main { flex: 1 1 220px; }
  .v-stats-b { grid-template-columns: 1fr 1fr; gap: 24px; }
  .v-stats-b > div + div { padding-left: 0; border-left: 0; }
  .v-quote-b { flex-direction: column; align-items: flex-start; gap: 40px; }
  .v-quote-b__img { width: 100%; max-width: none; aspect-ratio: 4 / 3; }
  .v-cards-b { grid-template-columns: 1fr; gap: 24px; margin-top: 48px; }
  .v-pcard { flex-direction: row; align-items: center; }
  .v-pcard img { width: 40%; flex: none; }
  .v-contact-b__details { gap: 28px; }
}

/* ── Phone: every variant stacks like its demo section ── */
@media (max-width: 767px) {
  .page-variants main { padding-top: 110px; }
  .v-intro__top { flex-direction: column; gap: 24px; }
  .v-intro__text { gap: 24px; }
  .v-jump { margin-top: 40px; padding-top: 24px; }
  .v-jump li > span { width: 100%; }
  .v-bar { flex-direction: column; gap: 12px; margin-bottom: 40px; }
  .v-hero-c { gap: 30px; }
  .v-hero-c__media img { aspect-ratio: 1; }
  .v-hero-d .hero__lead { margin-top: 16px; }
  .v-hero-d .hero__actions { margin-top: 24px; }
  .v-hero-d__stage { display: flex; flex-direction: column; margin-top: 30px; }
  .v-hero-d__ghost { position: static; transform: none; color: rgba(var(--ink-rgb), .25); order: 2; margin-top: 12px; }
  .v-hero-d__img { aspect-ratio: 334 / 207; }
  .v-mini { padding: 16px; }
  .v-intro-c { gap: 24px; }
  .v-intro-c__text { gap: 20px; }
  .v-intro-c__stats { flex-direction: column; gap: 16px; }
  .v-intro-c__stats .stat { flex: none; }
  .v-film-b figure { flex-direction: column; gap: 16px; }
  .v-film-b figure img { width: 100%; max-width: none; aspect-ratio: 335 / 216; }
  .v-listings-a { padding: 20px 10px; }
  .v-lcard { flex-direction: column; gap: 16px; }
  .v-lcard > img { width: 100%; aspect-ratio: 6 / 5; }
  .v-lcard .listing__specs { padding: 16px; }
  .v-row { padding: 16px 0; }
  .v-stats-b { grid-template-columns: 1fr; gap: 24px; padding: 24px 0; }
  .v-quote-b { gap: 24px; }
  .v-quote-b__img { aspect-ratio: 1; }
  .v-cards-b { gap: 16px; margin-top: 32px; }
  .v-pcard { flex-direction: column; gap: 16px; padding: 10px; }
  .v-pcard img { width: 100%; }
  .v-pcard__text { padding: 6px 6px 10px; }
  .v-contact-b__details { grid-template-columns: 1fr; margin-top: 40px; padding-top: 28px; }
}