/* The Belmont Collection, guest-facing design system.
   Layout, type scale and component rules mirror domusstay.com; palette and
   typefaces are Belmont's. Shared by guests.html and the guest journal.
   Edit here once; every guest-facing page picks it up. */
/* ============================================================
   DESIGN TOKENS, layout, type scale and component rules mirror
   domusstay.com; palette and typefaces are Belmont's.
   ============================================================ */
:root{
  --serif:'Cormorant Garamond', 'Orpheus Pro', Georgia, serif;      /* display  (Domus: orpheuspro) */
  --sans:'Inter','Helvetica Neue', Helvetica, Arial, sans-serif;    /* body     (Domus: neue-haas-grotesk-display) */

  --ink:#19191e;          /* Domus body ink            */
  --ink-mute:#8c8c8e;     /* Domus secondary text      */
  --ink-soft:#757578;     /* Domus link hover          */
  --gold:#B8995A;         /* Belmont gold (Domus role: #b7a963) */
  --dark:#0e0d0a;         /* Belmont ink, Domus role: #0d3a42  */
  --dark-alt:#1b1a16;     /* second dark band, Domus role: #142432 */
  --grey:#f6f6f5;         /* Domus band grey           */
  --rule:#deded9;         /* Domus hairline            */
  --white:#fff;
  --grid-gap:32px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font:400 14px/1.5 var(--sans);-webkit-text-size-adjust:none;-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
@media screen and (min-width:1025px){html{font-size:16px}}
body{display:flex;flex-direction:column;min-height:100vh;color:var(--ink);background:var(--white)}
body.is_overflow{overflow:hidden}
img{display:block;max-width:100%;height:auto}
ul{list-style:none}
a{color:inherit;text-decoration:none;transition:all .3s ease}
@media screen and (min-width:1025px){a:hover{color:var(--ink-soft)}}
main{flex:1 0 auto}

/* ---------- CONTAINER + 12-COL GRID ---------- */
.container{width:2000px;max-width:calc(100% - 32px);margin:0 auto;position:relative}
@media screen and (max-width:1024px) and (min-width:768px){.container{max-width:calc(100% - 48px)}}
@media screen and (min-width:1025px){.container{max-width:calc(100% - 128px)}}
.container_grid{width:100%;display:grid;grid-template-columns:1fr;gap:var(--grid-gap)}
.container_grid.align-center{align-items:center}
@media screen and (min-width:768px){
  .container_grid{grid-template-columns:repeat(12,1fr)}
  .start_2_cols_5{grid-column:2/span 5}
  .start_8_cols_4{grid-column:8/span 4}
  .start_2_cols_4{grid-column:2/span 4}
  .start_7_cols_4{grid-column:7/span 4}
  .start_3_cols_4{grid-column:3/span 4}
  .start_4_cols_6{grid-column:4/span 6}
  .start_6_cols_6{grid-column:6/span 6}
  .start_1_cols_4{grid-column:1/span 4}
  .start_1_cols_7{grid-column:1/span 7}
  .start_2_cols_8{grid-column:2/span 8}
}
@media screen and (max-width:1024px) and (min-width:768px){
  .tablet_start_1_cols_6{grid-column:1/span 6}
  .tablet_start_7_cols_6{grid-column:7/span 6}
  .tablet_start_2_cols_10{grid-column:2/span 10}
  .tablet_start_1_cols_7{grid-column:1/span 7}
  .tablet_start_5_cols_8{grid-column:5/span 8}
  .tablet_start_1_cols_4{grid-column:1/span 4}
  .tablet_start_1_cols_10{grid-column:1/span 10}
}
@media screen and (max-width:767px){.mob_hide{display:none!important}}
@media screen and (min-width:768px){.mob_show{display:none!important}}

/* ---------- TYPE SCALE ---------- */
h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5,.d1,.d2{font-family:var(--serif);font-weight:400;line-height:1.2}
.d1{font-size:32px}.d2{font-size:26px}
h1,.h1{font-size:24px}h2,.h2{font-size:20px}h3,.h3{font-size:18px}h4,.h4{font-size:16px}
h5,.h5{font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:1.44px;text-transform:uppercase;line-height:1.4}
h5.gold,.h5.gold{color:var(--gold)}
@media screen and (min-width:768px){
  .d1{font-size:46px}.d2{font-size:40px}
  h1,.h1{font-size:36px}h2,.h2{font-size:26px}h3,.h3{font-size:24px}h4,.h4{font-size:20px}
  h5,.h5{font-size:14px;letter-spacing:1.68px}
}
@media screen and (min-width:1800px){
  .d1{font-size:58px}.d2{font-size:48px}
  h1,.h1{font-size:44px}h2,.h2{font-size:30px}h3,.h3{font-size:26px}
  h5,.h5{font-size:16px;letter-spacing:1.92px}
}
em{font-style:italic}

.content>*:not(:last-child){margin-bottom:24px}
.content h2:not(:last-child),.content .h2:not(:last-child){margin-bottom:16px}
.content h5:not(:last-child),.content .h5:not(:last-child){margin-bottom:16px}
.content p{color:var(--ink);max-width:56ch}
.content.text-center{text-align:center}
.content.text-center p{margin-left:auto;margin-right:auto}

/* ---------- BUTTONS ---------- */
/* CTAs are monochrome and flip with their surface: ink on light, white on dark.
   The tokens below are the light-surface defaults; dark surfaces re-declare them
   (see BANDS + hero + header), so no button needs a context-specific rule. */
.button{--cta-ink:var(--ink);--cta-on:#fff;--cta-line:var(--rule);--cta-soft:var(--ink-soft);
  display:inline-flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:14px;font-weight:500;line-height:1.2;cursor:pointer;transition:all .3s ease;color:var(--cta-ink)}
.button:not(.no-border){border:1px solid var(--cta-line);padding:12px 17px;border-radius:6px;background:transparent;text-align:center}
.button:not(.no-border):hover{background:var(--cta-ink);border-color:var(--cta-ink);color:var(--cta-on)}
.button.button--solid{background:var(--cta-ink);border-color:var(--cta-ink);color:var(--cta-on)}
.button.button--solid:hover{background:transparent;color:var(--cta-ink);border-color:var(--cta-ink)}
.button.no-border{position:relative;padding:0}
.button.no-border:hover{color:var(--cta-soft)}
.button--icon::after{content:"";display:inline-block;margin-left:12px;width:13px;height:8px;flex:none;background:currentColor;transition:all .3s ease;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'%3E%3Cpath d='M12.3536 4.35355C12.5488 4.15829 12.5488 3.84171 12.3536 3.64645L9.17157 0.464472C8.9763 0.26921 8.65972 0.269211 8.46446 0.464473C8.2692 0.659735 8.2692 0.976318 8.46446 1.17158L11.2929 4L8.46447 6.82843C8.26921 7.0237 8.26921 7.34028 8.46447 7.53554C8.65973 7.7308 8.97632 7.7308 9.17158 7.53554L12.3536 4.35355ZM0 4.5L12 4.5L12 3.5L0 3.5L0 4.5Z'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'%3E%3Cpath d='M12.3536 4.35355C12.5488 4.15829 12.5488 3.84171 12.3536 3.64645L9.17157 0.464472C8.9763 0.26921 8.65972 0.269211 8.46446 0.464473C8.2692 0.659735 8.2692 0.976318 8.46446 1.17158L11.2929 4L8.46447 6.82843C8.26921 7.0237 8.26921 7.34028 8.46447 7.53554C8.65973 7.7308 8.97632 7.7308 9.17158 7.53554L12.3536 4.35355ZM0 4.5L12 4.5L12 3.5L0 3.5L0 4.5Z'/%3E%3C/svg%3E") no-repeat center/contain}
.button.no-border.button--icon::after{width:25px;margin-left:10px;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='8' viewBox='0 0 25 8'%3E%3Cpath d='M24.3536 4.35356C24.5488 4.15829 24.5488 3.84171 24.3536 3.64645L21.1716 0.464468C20.9763 0.269206 20.6597 0.269206 20.4645 0.464468C20.2692 0.65973 20.2692 0.976313 20.4645 1.17157L23.2929 4L20.4645 6.82843C20.2692 7.02369 20.2692 7.34027 20.4645 7.53554C20.6597 7.7308 20.9763 7.7308 21.1716 7.53554L24.3536 4.35356ZM0 4.5L24 4.5L24 3.5L0 3.5L0 4.5Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='8' viewBox='0 0 25 8'%3E%3Cpath d='M24.3536 4.35356C24.5488 4.15829 24.5488 3.84171 24.3536 3.64645L21.1716 0.464468C20.9763 0.269206 20.6597 0.269206 20.4645 0.464468C20.2692 0.65973 20.2692 0.976313 20.4645 1.17157L23.2929 4L20.4645 6.82843C20.2692 7.02369 20.2692 7.34027 20.4645 7.53554C20.6597 7.7308 20.9763 7.7308 21.1716 7.53554L24.3536 4.35356ZM0 4.5L24 4.5L24 3.5L0 3.5L0 4.5Z'/%3E%3C/svg%3E")}
.button.no-border.button--icon:hover::after{transform:translateX(4px)}

/* ---------- BANDS ---------- */
.bg-grey{background:var(--grey)}
.bg-dark{background:var(--dark-alt);color:var(--white)}
.bg-dark p{color:rgba(255,255,255,.72)}
.bg-deep{background:var(--dark);color:var(--white)}
.bg-deep p{color:rgba(255,255,255,.72)}
.bg-dark .button,.bg-deep .button{--cta-ink:#fff;--cta-on:var(--ink);--cta-line:rgba(255,255,255,.45);--cta-soft:rgba(255,255,255,.7)}

/* ---------- IMAGE ZOOM ---------- */
.zoom_in{display:block;overflow:hidden;position:relative}
.zoom_in img{transition:transform .5s ease;width:100%}
.zoom_in:hover img{transform:scale(1.05)}
.pill_title{position:absolute;top:8px;left:8px;z-index:2;border-radius:4px;background:rgba(255,255,255,.85);padding:6px 7px;font-family:var(--sans);font-size:10px;line-height:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink);pointer-events:none}

/* ---------- CAROUSEL PRIMITIVES (Swiper equivalents) ---------- */
.sw{display:flex;gap:var(--grid-gap);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;padding-bottom:4px}
.sw::-webkit-scrollbar{display:none}
.sw.is-dragging{cursor:grabbing;scroll-snap-type:none}
.sw>*{scroll-snap-align:start;flex:0 0 auto}
.sw_controls{display:flex;justify-content:center;align-items:center;gap:16px}
/* an author display:flex outranks the UA's [hidden]{display:none}, so the JS
   setting .hidden would otherwise have no visible effect */
.sw_controls[hidden]{display:none}
.sw_controls.start{justify-content:flex-start}
.sw_prev,.sw_next{width:12px;height:22px;padding:0;border:0;color:inherit;background:currentColor;opacity:.8;cursor:pointer;transition:opacity .3s ease;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 22'%3E%3Cpath d='M11 1L1 11l10 10' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 22'%3E%3Cpath d='M11 1L1 11l10 10' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat center/contain}
.sw_next{transform:scaleX(-1)}
.sw_prev:hover,.sw_next:hover{opacity:1}
.sw_prev[disabled],.sw_next[disabled]{opacity:.35;cursor:default}

/* ---------- REVEAL (AOS fade-up equivalent) ---------- */
[data-aos]{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
[data-aos].aos-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-aos]{opacity:1;transform:none;transition:none}}

/* ============================================================
   HEADER
   ============================================================ */
.header{position:fixed;top:0;left:0;width:100%;z-index:100;transition:background .4s ease,box-shadow .4s ease}
.header__container{display:flex;align-items:center;justify-content:space-between;height:56px;gap:24px}
@media screen and (min-width:768px){.header__container{height:64px}}
@media screen and (min-width:1025px){.header__container{height:80px}}
/* Three columns rather than space-between: with an 111px logo on one side and a
   244px button group on the other, space-between pushed the nav 66px left of true
   centre. 1fr auto 1fr centres the nav regardless of what the flanks weigh.
   justify-self:start keeps the logo's click area at its own width. */
@media screen and (min-width:1025px){
  .header__container{display:grid;grid-template-columns:1fr auto 1fr;gap:24px}
  .header__logo{justify-self:start}
  .header__nav{justify-self:center}
  .header__btn_group{justify-self:end}
}
.header__logo{font-family:var(--serif);font-size:15px;letter-spacing:.28em;text-transform:uppercase;color:#fff;white-space:nowrap;transition:color .4s ease}
@media screen and (min-width:1025px){.header__logo{font-size:17px}}
.header__nav{display:none;gap:28px}
@media screen and (min-width:1025px){.header__nav{display:flex}}
.header__nav a{font-family:var(--sans);font-size:13px;font-weight:400;color:rgba(255,255,255,.85)}
.header__nav a:hover{color:#fff}
.header__btn_group{display:flex;align-items:center;gap:12px}
@media screen and (min-width:1025px){.header__btn_group{gap:20px}}
.header__phone{display:none;font-size:13px;color:rgba(255,255,255,.85)}
@media screen and (min-width:768px){.header__phone{display:inline}}
/* the WhatsApp CTA gives way to the burger on small screens; the mobile menu carries it */
.header__wa{display:none}
@media screen and (min-width:768px){.header__wa{display:inline-flex}}
.header .button{--cta-ink:#fff;--cta-on:var(--ink);--cta-line:rgba(255,255,255,.35);padding:9px 15px;font-size:13px}
/* scrolled / solid state */
.header.solid{background:var(--white);box-shadow:0 1px 0 var(--rule)}
.header.solid .header__logo{color:var(--ink)}
.header.solid .header__nav a{color:var(--ink)}
.header.solid .header__nav a:hover{color:var(--ink-soft)}
.header.solid .header__phone{color:var(--ink-mute)}
.header.solid .button{--cta-ink:var(--ink);--cta-on:#fff;--cta-line:var(--rule)}
.header.solid .burger span{background:var(--ink)}
.burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:24px;height:24px;background:none;border:0;cursor:pointer}
@media screen and (min-width:1025px){.burger{display:none}}
.burger span{display:block;width:22px;height:1px;background:#fff;transition:background .4s ease}
.mobile_menu{position:fixed;inset:0;z-index:200;background:var(--dark);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;transform:translateX(100%);transition:transform .5s ease}
.mobile_menu.open{transform:none}
.mobile_menu a{font-family:var(--serif);font-size:30px;color:#fff}
.mobile_menu a:hover{color:var(--gold)}
.mobile_menu__close{position:absolute;top:20px;right:20px;width:28px;height:28px;background:none;border:0;cursor:pointer}
.mobile_menu__close span{position:absolute;left:2px;top:13px;width:24px;height:1px;background:rgba(255,255,255,.6)}
.mobile_menu__close span:first-child{transform:rotate(45deg)}
.mobile_menu__close span:last-child{transform:rotate(-45deg)}
.skip_to_content{position:absolute;left:-9999px}
.skip_to_content:focus{left:16px;top:16px;z-index:300;background:var(--dark);color:#fff;padding:10px 16px;border-radius:6px}

/* ============================================================
   HERO  (Domus: .home__top-panel)
   ============================================================ */
.top-panel{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.top-panel__media{position:absolute;inset:0;height:100dvh;width:100%;pointer-events:none}
.top-panel__media video,.top-panel__media img{height:100dvh;width:100%;object-fit:cover}
.top-panel__media::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(25,25,30,.45) 0%,rgba(25,25,30,.18) 32%,rgba(25,25,30,.42) 100%)}
.top-panel__content{position:relative;z-index:2;width:870px;max-width:calc(100% - 32px);min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:96px 0 56px}
@media screen and (max-width:1024px) and (min-width:768px){.top-panel__content{max-width:calc(100% - 196px)}}
.top-panel__content .d1{color:#fff}
.top-panel__eyebrow{color:rgba(255,255,255,.75);margin-bottom:20px}
.top-panel__sub{color:rgba(255,255,255,.8);margin-top:24px;max-width:44ch;font-size:15px}
.top-panel__actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:40px}
@media screen and (min-width:1025px){.top-panel__actions{margin-top:64px}}
.top-panel__actions .button{--cta-ink:#fff;--cta-on:var(--ink);--cta-line:rgba(255,255,255,.45);--cta-soft:rgba(255,255,255,.7)}
.top-panel__actions .button:not(.no-border):not(.button--solid){background:rgba(25,25,30,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.top-panel__actions .button:not(.no-border):not(.button--solid):hover{background:#fff;color:var(--ink)}
/* keep the hero's filled CTA on a solid ground when hovered, a transparent
   white-on-video hover is unreliable against bright frames */
.top-panel__actions .button--solid:hover{background:rgba(255,255,255,.86);border-color:rgba(255,255,255,.86);color:var(--ink)}
.top-panel__scroll{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:2;font-family:var(--sans);font-size:10px;letter-spacing:1.44px;text-transform:uppercase;color:rgba(255,255,255,.65)}

/* ============================================================
   TEXT + IMAGE INTRO  (Domus: .home__text-img)
   ============================================================ */
.text-img{padding:80px 0}
@media screen and (max-width:1799px) and (min-width:1025px){.text-img{padding:120px 0}}
@media screen and (min-width:1800px){.text-img{padding:160px 0}}
.text-img figure img{aspect-ratio:1;object-fit:cover;width:100%}
@media screen and (max-width:767px){.text-img figure{margin-bottom:24px}}

/* ============================================================
   COLLECTION SLIDER  (Domus: .properties_slider / .property_item)
   ============================================================ */
.collection{overflow:hidden;padding:64px 0}
@media screen and (max-width:1024px) and (min-width:768px){.collection{padding:80px 0}}
@media screen and (max-width:1799px) and (min-width:1025px){.collection{padding:120px 0}}
@media screen and (min-width:1800px){.collection{padding:160px 0}}
.collection__top{margin-bottom:40px}
@media screen and (min-width:768px){.collection__top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:48px}}
@media screen and (min-width:1025px){.collection__top{margin-bottom:56px}}
.collection .sw>*{width:73.611%}
@media screen and (max-width:1024px) and (min-width:768px){.collection .sw>*{width:41.666%}}
@media screen and (max-width:1799px) and (min-width:1025px){.collection .sw>*{width:29.27%}}
@media screen and (min-width:1800px){.collection .sw>*{width:21.4%}}
.collection .sw+.button{margin-top:40px}
.property_item__thumbs{position:relative;margin-bottom:12px}
@media screen and (min-width:768px){.property_item__thumbs{margin-bottom:16px}}
.property_item__thumbs img{aspect-ratio:4/3;object-fit:cover;width:100%}
.property_item__info{display:flex;flex-direction:column;gap:6px;font-size:12px}
@media screen and (min-width:1025px){.property_item__info{gap:8px;font-size:14px}}
.property_item__info h3{font-family:var(--sans);font-size:16px;font-weight:500}
@media screen and (min-width:1025px){.property_item__info h3{font-size:18px}}
.property_item__details{color:var(--ink-mute);display:flex;flex-wrap:wrap}
.property_item__details>*:not(:last-child)::after{content:"|";display:inline-block;vertical-align:top;margin:0 8px}
@media screen and (min-width:1025px){.property_item__details>*:not(:last-child)::after{margin:0 10px}}

/* ============================================================
   FEATURE CONTENT BLOCKS  (Domus: .fc text-image / text-only / carousel-content / quote)
   ============================================================ */
.fc{position:relative}
.text-image.fc{padding:56px 0}
@media screen and (max-width:1799px) and (min-width:768px){.text-image.fc{padding:80px 0}}
@media screen and (min-width:1800px){.text-image.fc{padding:120px 0}}
.text-image .container_grid{align-items:center}
.text-image figure img{aspect-ratio:5/7;object-fit:cover;width:100%}
@media screen and (max-width:767px){.text-image figure{margin-bottom:24px}}
@media screen and (min-width:768px){.text-image .content.reverse{order:-1}}
.text-image .content h3{margin-bottom:16px}

.text-only.fc{padding:56px 0}
@media screen and (max-width:1799px) and (min-width:768px){.text-only.fc{padding:80px 0}}
@media screen and (min-width:1800px){.text-only.fc{padding:120px 0}}

/* pillar grid, Belmont Standard */
.pillars{display:grid;grid-template-columns:1fr;gap:0;margin-top:48px}
@media screen and (min-width:768px){.pillars{grid-template-columns:repeat(2,1fr);column-gap:var(--grid-gap)}}
@media screen and (min-width:1025px){.pillars{grid-template-columns:repeat(3,1fr);margin-top:64px}}
.pillar{border-top:1px solid var(--rule);padding:24px 0 28px;text-align:left}
.pillar h4{margin-bottom:8px}
.pillar p{color:var(--ink-mute);font-size:14px;max-width:34ch}

.carousel-content.fc{padding:56px 0}
@media screen and (max-width:1799px) and (min-width:768px){.carousel-content.fc{padding:80px 0}}
@media screen and (min-width:1800px){.carousel-content.fc{padding:120px 0}}
.carousel-content__top{margin-bottom:32px}
@media screen and (min-width:1025px){.carousel-content__top{margin-bottom:48px}}
.carousel-content .sw>*{width:81.25%;max-width:810px}
@media screen and (max-width:1024px) and (min-width:768px){.carousel-content .sw>*{width:61.458%}}
@media screen and (min-width:1025px){.carousel-content .sw>*{width:44.444%}}
.carousel-content figure{margin-bottom:16px}
@media screen and (max-width:1024px) and (min-width:768px){.carousel-content figure{margin-bottom:25px}}
@media screen and (min-width:1025px){.carousel-content figure{margin-bottom:40px}}
.carousel-content figure img{aspect-ratio:3/2;object-fit:cover;width:100%}
.carousel-content .content{text-align:center;padding:0 8px}
@media screen and (min-width:1025px){.carousel-content .content{padding:0 40px}}
.carousel-content .content h4{margin-bottom:8px}
@media screen and (min-width:768px){.carousel-content .content h4{margin-bottom:16px}}
.carousel-content .content p{color:var(--ink-mute);margin-left:auto;margin-right:auto;font-size:14px}
.carousel-content .sw_controls{margin-top:32px}

.quote-block.fc{padding:56px 0}
@media screen and (max-width:1799px) and (min-width:768px){.quote-block.fc{padding:80px 0}}
@media screen and (min-width:1800px){.quote-block.fc{padding:120px 0}}
.quote-block--large{text-align:center}
.quote-block--mark{margin-bottom:24px}
.quote-block--mark svg{margin:0 auto;width:41px;height:32px;display:block;fill:var(--gold)}
@media screen and (min-width:768px){.quote-block--mark svg{width:51px;height:40px}}
.quote-block blockquote p{font-family:var(--serif);font-size:24px;line-height:1.25;font-weight:300}
@media screen and (max-width:1024px) and (min-width:768px){.quote-block blockquote p{font-size:36px}}
@media screen and (min-width:1025px){.quote-block blockquote p{font-size:40px}}
.quote-block cite{display:block;margin-top:24px;font-family:var(--sans);font-style:normal;font-size:12px;letter-spacing:1.44px;text-transform:uppercase;color:var(--ink-mute)}

/* ============================================================
   JOURNAL  (Domus: .home__journal)
   ============================================================ */
.journal{overflow:hidden;padding:80px 0}
@media screen and (max-width:1799px) and (min-width:1025px){.journal{padding:120px 0}}
@media screen and (min-width:1800px){.journal{padding:160px 0}}
.journal .content{margin-bottom:48px}
@media screen and (min-width:1025px){.journal .content{margin-bottom:70px}}
.journal .sw>*{width:86.81%;max-width:604px}
@media screen and (max-width:1024px) and (min-width:768px){.journal .sw>*{width:65.416%}}
@media screen and (max-width:1799px) and (min-width:1025px){.journal .sw>*{width:40.243%}}
@media screen and (min-width:1800px){.journal .sw>*{width:30.15%}}
.post_item__thumb{margin-bottom:16px}
.post_item__thumb img{aspect-ratio:3/2;object-fit:cover;width:100%}
.post_item__info{display:flex;flex-direction:column;gap:8px}
.post_item__title{font-family:var(--serif)}
.tax_terms{display:flex;flex-wrap:wrap;gap:8px}
.tax_term{font-family:var(--sans);font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-mute);border:1px solid var(--rule);border-radius:4px;padding:5px 8px}
.journal .sw_controls{margin-top:40px}

/* ============================================================
   CTA FOOTER  (Domus: .cta_footer.bg-green)
   ============================================================ */
.cta_footer{text-align:center;padding:80px 0}
.cta_footer .content{display:flex;flex-direction:column;align-items:center;justify-content:center}
.cta_footer .content>*:not(.button):not(:last-child){margin-bottom:16px}
.cta_footer .content .button{margin-top:16px}
.cta_footer h5{color:var(--gold)}
.cta_footer p{max-width:640px}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--white)}
.footer__top{padding:64px 0 48px;border-top:1px solid var(--rule)}
@media screen and (min-width:1025px){.footer__top{padding:80px 0 56px}}
.footer__top .container{display:grid;grid-template-columns:1fr;gap:40px}
@media screen and (min-width:768px){.footer__top .container{grid-template-columns:1.2fr 2fr;gap:var(--grid-gap)}}
.footer__brand{font-family:var(--serif);font-size:16px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:20px}
@media screen and (min-width:768px){.footer__brand{font-size:20px;letter-spacing:.18em}}
.footer__blurb{color:var(--ink-mute);font-size:14px;max-width:42ch;margin-bottom:24px}
.footer__direct{display:flex;flex-direction:column;gap:8px;font-size:14px}
.footer__direct a:hover{color:var(--gold)}
.footer__navs{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
@media screen and (min-width:768px){.footer__navs{grid-template-columns:repeat(3,1fr)}}
.footer__navs h4{font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:1.44px;text-transform:uppercase;color:var(--ink-mute);margin-bottom:16px}
.footer__navs li:not(:last-child){margin-bottom:10px}
.footer__navs a{font-size:14px}
.footer__navs a:hover{color:var(--gold)}
.footer__bottom{border-top:1px solid var(--rule);padding:20px 0 24px}
.footer__bottom .container{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:center}
.footer__bottom,.footer__bottom a{font-size:12px;color:var(--ink-mute)}
.footer__bottom a:hover{color:var(--ink)}
.footer__legal{display:flex;gap:20px}

/* ============================================================
   JOURNAL, article template + index.
   Same tokens, type scale and bands as above; these rules only
   add the long-form reading layout.
   ============================================================ */

/* ---------- article hero ---------- */
.article-hero{position:relative;overflow:hidden;display:flex;align-items:flex-end;min-height:62vh}
@media screen and (min-width:1025px){.article-hero{min-height:72vh}}
.article-hero__media{position:absolute;inset:0}
.article-hero__media img,.article-hero__media video{width:100%;height:100%;object-fit:cover;display:block}
.article-hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(25,25,30,.55) 0%,rgba(25,25,30,.18) 34%,rgba(25,25,30,.52) 66%,rgba(25,25,30,.86) 100%)}
.article-hero__content{position:relative;z-index:2;width:100%;padding:0 0 48px}
@media screen and (min-width:1025px){.article-hero__content{padding-bottom:72px}}
.article-hero h1{color:#fff;max-width:20ch}
.article-hero .h5{color:var(--gold);margin-bottom:16px}
.article-hero__meta{margin-top:20px;font-size:13px;color:rgba(255,255,255,.72);display:flex;flex-wrap:wrap;gap:8px 16px}
.article-hero__meta>*:not(:last-child)::after{content:"·";margin-left:16px}

/* ---------- article body ---------- */
.article-body{padding:56px 0}
@media screen and (min-width:768px){.article-body{padding:80px 0}}
@media screen and (min-width:1800px){.article-body{padding:112px 0}}
.article-body .prose{font-size:16px;line-height:1.75;color:var(--ink)}
@media screen and (min-width:1025px){.article-body .prose{font-size:17px;line-height:1.8}}
.article-body .prose>*+*{margin-top:24px}
.article-body .prose .lede{font-family:var(--serif);font-size:22px;line-height:1.45;color:var(--ink)}
@media screen and (min-width:1025px){.article-body .prose .lede{font-size:26px}}
.article-body .prose h2{margin-top:56px;font-size:24px}
@media screen and (min-width:1025px){.article-body .prose h2{margin-top:72px;font-size:30px}}
.article-body .prose h2+p{margin-top:16px}
.article-body .prose strong{font-weight:600}
.article-body .prose a:not(.button){color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--gold)}
.article-body .prose a:not(.button):hover{color:var(--ink-soft)}
.article-body .prose hr{border:0;border-top:1px solid var(--rule);margin:56px 0}

/* closing call to action inside the prose column */
.article-end{margin-top:56px;padding-top:32px;border-top:1px solid var(--rule)}
.article-end p{font-family:var(--serif);font-size:22px;line-height:1.4;margin-bottom:24px}
@media screen and (min-width:1025px){.article-end p{font-size:26px}}
.article-end .button+.button{margin-left:12px}

/* ---------- journal index grid ---------- */
.journal-index{padding:56px 0 80px}
@media screen and (min-width:1025px){.journal-index{padding:80px 0 120px}}
.journal-grid{display:grid;grid-template-columns:1fr;gap:40px var(--grid-gap)}
@media screen and (min-width:768px){.journal-grid{grid-template-columns:repeat(2,1fr)}}
@media screen and (min-width:1440px){.journal-grid{grid-template-columns:repeat(3,1fr)}}
.journal-grid .post_item__title{font-size:20px}
@media screen and (min-width:1025px){.journal-grid .post_item__title{font-size:24px}}
.post_item__excerpt{color:var(--ink-mute);font-size:14px;line-height:1.65;margin-top:4px}

/* ---------- page header (no video hero) ---------- */
.page-head{padding:140px 0 48px;border-bottom:1px solid var(--rule)}
@media screen and (min-width:1025px){.page-head{padding:180px 0 64px}}
.page-head .h5{color:var(--gold);margin-bottom:16px}
.page-head p{color:var(--ink-mute);max-width:60ch;margin-top:20px}
/* pages without a dark hero need the header legible from the first pixel */
.header--static{background:var(--white);box-shadow:0 1px 0 var(--rule)}
.header--static .header__logo,.header--static .header__nav a{color:var(--ink)}
.header--static .header__nav a:hover{color:var(--ink-soft)}
.header--static .header__phone{color:var(--ink-mute)}
.header--static .button{--cta-ink:var(--ink);--cta-on:#fff;--cta-line:var(--rule)}
.header--static .burger span{background:var(--ink)}

/* ============================================================
   MOBILE CORRECTIONS
   ============================================================ */

/* 1. Hero video on narrow screens. A 375x503 box over a 2048x1080 source shows
      only 39% of the frame's width, and this clip pans: it opens on the window
      and blinds before reaching the couple, so the centre slice often lands on
      the tower block. Shorten the banner (less extreme aspect, more width shown)
      and bias the crop right, where the subject sits. */
@media screen and (max-width:767px){
  .article-hero{min-height:50vh}
  .article-hero__media video{object-position:62% center}
  /* the homepage hero runs the same clip at 100dvh, so it crops harder still
     (24% of the frame at 375px). Same bias, same reason. */
  .top-panel__media video{object-position:62% center}
}

/* 2. The pillars sat left under a centred heading, on every viewport. */
.pillar{text-align:center}
.pillar p{margin-left:auto;margin-right:auto}

/* 3. The footer stacks to one column on mobile but stayed left-aligned,
      leaving it hanging off the left edge under centred content above it. */
@media screen and (max-width:767px){
  .footer__top .container{text-align:center}
  .footer__blurb{margin-left:auto;margin-right:auto}
  .footer__direct{align-items:center}
  .footer__navs{text-align:center}
  /* three columns in a two-column grid leaves the last one orphaned in the left
     half; span it so it centres with everything else */
  .footer__navs>div:last-child:nth-child(odd){grid-column:1 / -1}
  .footer__bottom .container{justify-content:center;text-align:center}
  .footer__legal{justify-content:center}
}

/* Each pillar carries a 28px foot to separate grid rows. When the pillars block
   closes a section, that foot stacks on the section's own padding and reads as
   dead space under the boxes. Only bites at 1800px+, where section padding is
   120px: 148px below the last line against 89px above it. */
@media screen and (min-width:1800px){
  .text-only.fc:has(.pillars:last-child){padding-bottom:84px}
}