/* SATC 2026 brand migration layer.
   This file is intentionally loaded last while legacy page styles are
   progressively moved onto the canonical tokens in design-tokens.css. */

:root{
  --wine:var(--satc-root-brew);
  --red:var(--satc-wild-hillside);
  --gold:var(--satc-veiling-waterfalls);
  --ink:var(--satc-root-brew);
  --paper:var(--satc-white);
  --mist:var(--satc-paper);
  --wine-deep:var(--satc-root-brew);
  --wine-soft:var(--satc-wild-hillside);
  --gold-soft:var(--satc-veiling-waterfalls);
  --article-wine:var(--satc-root-brew);
  --article-gold:var(--satc-wild-hillside);
  --article-ink:var(--satc-root-brew);
  --page-wine:var(--satc-root-brew);
  --page-gold:var(--satc-wild-hillside);
  --page-ink:var(--satc-root-brew);
  --page-soft:var(--satc-paper);
  --projects-wine:var(--satc-root-brew);
  --projects-gold:var(--satc-wild-hillside);
  --projects-ink:var(--satc-root-brew);
  --projects-paper:var(--satc-paper);
  --bs-primary:var(--satc-wild-hillside);
  --bs-primary-rgb:111,68,34;
}

body.home-v2{
  --b:var(--satc-root-brew);
  --c:var(--satc-root-brew);
  --g:var(--satc-wild-hillside);
  --soft:var(--satc-paper);
  color:var(--color-body);
}

.single-project-page{
  --sp-wine:var(--satc-root-brew);
  --sp-gold:var(--satc-wild-hillside);
  --sp-ink:var(--satc-root-brew);
  --sp-soft:var(--satc-paper);
  --project-paper:var(--satc-white);
  --project-charcoal:var(--satc-root-brew);
  --project-wine:var(--satc-root-brew);
  --project-bronze:var(--satc-wild-hillside);
}

/* Official artwork is used as a single, proportional lockup. */
.shared-layout .shared-site-header .brand-lockup{
  width:clamp(160px,12vw,210px);
  height:auto!important;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex:0 0 auto;
  padding:10px 0;
}

.shared-layout .brand-lockup .brand-logo{
  width:100%;
  height:auto;
  max-height:58px;
  display:block;
  object-fit:contain;
  object-position:center;
  filter:none;
}

.shared-layout .shared-site-header .brand-logo-dark{
  display:none;
}

.shared-layout .shared-site-header .mobile-nav-brand.brand-lockup{
  display:none!important;
}

.shared-layout .shared-site-footer .footer-logo.brand-lockup{
  width:min(240px,100%)!important;
  height:auto!important;
  min-height:72px!important;
  padding:8px 0!important;
}

.shared-layout .shared-site-footer .footer-logo.brand-lockup .brand-logo{
  width:100%;
  max-height:55px;
  object-position:right center;
}

[dir="ltr"] .shared-layout .shared-site-footer .footer-logo.brand-lockup .brand-logo{
  object-position:left center;
}

.shared-layout .shared-site-header .nav-link.active:after,
.home-v2 .header .nav-link.active:after{
  background:var(--satc-veiling-waterfalls);
}

@media(min-width:801px){
  body.home-v2 .shared-site-header.header.navbar{
    border-radius:var(--radius-panel)!important;
  }

}

/* Canonical corner system: quiet 8px UI geometry, square editorial media,
   and circles only where the control itself is functionally circular. */
.shared-layout :is(
  .btn,
  .outline,
  .about-cta,
  .projects-primary-btn,
  .project-hero-btn,
  .contact-form button[type="submit"],
  .faq-layout aside a,
  .investor-hero-action,
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
  select,
  textarea
){
  border-radius:var(--radius-control);
}

.shared-layout :is(
  .dropdown-menu,
  .mega-menu,
  .archive-project-card,
  .article-card,
  .news-card,
  .related-card,
  .model-card,
  .payment-card,
  .contact-form-wrap,
  .contact-panel,
  .legal-nav,
  .faq-layout aside,
  .project-inquiry,
  .downloads-grid>a,
  .form-ajax-alert,
  .site-confirm-dialog
){
  border-radius:var(--radius-panel)!important;
}

/* Shared public primitives. Page templates opt into these semantic classes so
   radius changes have one owner instead of a selector per page. */
.shared-layout .satc-surface{
  border-radius:var(--radius-panel);
}

.shared-layout .satc-surface--clip{
  overflow:hidden;
}

/* Hero facts dock into the section below: retain the welcoming top contour,
   but keep the attached lower edge architectural and square. */
.shared-layout .project-hero-facts.satc-surface{
  border-radius:var(--radius-panel) var(--radius-panel) 0 0;
}

/* The project inquiry is an editorial dark panel: underline-style fields
   remain completely square. */
.shared-layout.single-project-page .project-interest-final .project-inquiry form input:not([type="hidden"]){
  border-radius:0;
}

/* A connected surface group owns the outside curve. Its children stay square
   so shared seams never create inward scallops between adjacent cards. */
.shared-layout .satc-surface-group{
  overflow:hidden;
  border-radius:var(--radius-panel);
}

.shared-layout .satc-surface-group>.satc-surface{
  border-radius:0;
}

.shared-layout :is(.satc-control,.satc-control-group){
  border-radius:var(--radius-control);
}

/* Connected controls read as one component: only the group's outside contour
   is rounded, while every shared edge stays square and continuous. */
.shared-layout .satc-control-group{
  -webkit-clip-path: inset(0 round var(--radius-control));
  clip-path:inset(0 round var(--radius-control));
}

.shared-layout .satc-control-group>.satc-control{
  border-radius:0;
}

/* Canonical content icon tile. Use this class on informative/card icons only;
   directional arrows and standalone utility controls keep their own geometry. */
.shared-layout .satc-icon-tile{
  width:64px;
  height:64px;
  min-width:64px;
  display:inline-grid;
  place-items:center;
  flex:0 0 64px;
  margin:0;
  border:0;
  border-radius:var(--radius-control);
  background:var(--satc-veiling-waterfalls);
  color:var(--satc-white);
  -webkit-text-fill-color:var(--satc-white);
  font-size:26px!important;
  line-height:1;
  text-align:center;
}

.shared-layout .satc-icon-tile :is(i,svg),
.shared-layout :is(i,svg).satc-icon-tile{
  color:var(--satc-white);
  fill:currentColor;
}

/* Reserve a dedicated icon column so text never slides beneath a tile. */
.shared-layout .satc-icon-row{
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  column-gap:18px;
  row-gap:4px;
  align-items:center;
}

.shared-layout .satc-icon-row>.satc-icon-tile{
  grid-column:1;
  grid-row:1 / span 2;
  align-self:center;
}

.shared-layout .satc-icon-row>*:not(.satc-icon-tile){min-width:0}
.shared-layout .satc-icon-stack>.satc-icon-tile{margin-block-end:18px}

/* Shared statistics anatomy used by Home and About. */
.shared-layout .numbers .stat-head.satc-icon-row{
  display:flex;
  align-items:center;
  gap:18px;
}
.shared-layout .numbers .stat-head.satc-icon-row>.satc-icon-tile{
  flex:0 0 auto;
  margin:0;
}
.shared-layout .numbers .stat-head.satc-icon-row>span{
  display:flex;
  align-items:center;
  align-self:stretch;
}
.shared-layout .numbers .stat-value{
  display:flex;
  align-items:baseline;
  justify-content:flex-end;
  gap:3px;
  width:100%;
  margin-top:28px;
  direction:ltr;
  text-align:right;
}
/* Figures stay left-to-right in both languages; in English they also start
   on the left, in line with the label and copy above them. */
[dir=ltr] .shared-layout .numbers .stat-value{justify-content:flex-start;text-align:left}
.shared-layout .numbers .stat-value .stat-plus{font:inherit;color:inherit}
.shared-layout .numbers .stat-value small{margin-inline-start:7px}

/* Keep numbered principle markers away from their icon tile. */
.shared-layout .principle-card>.satc-icon-tile{margin-block-start:34px}

/* The organization root is one horizontal, vertically centered unit. */
.shared-layout .org-root.satc-icon-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px!important;
}
.shared-layout .org-root.satc-icon-row>.satc-icon-tile{margin:0;flex:0 0 auto}
.shared-layout .org-root.satc-icon-row>span{display:flex;align-items:center;align-self:stretch}

@media(max-width:700px){
  .shared-layout .satc-icon-tile{
    width:56px;
    height:56px;
    min-width:56px;
    flex-basis:56px;
    font-size:23px!important;
  }

  .shared-layout .satc-icon-row{
    grid-template-columns:56px minmax(0,1fr)!important;
    column-gap:14px!important;
  }
  .shared-layout .numbers .stat-head.satc-icon-row{gap:11px!important}
  .shared-layout .numbers .stat-value{margin-top:22px}
  .shared-layout .principle-card>.satc-icon-tile{margin-block-start:27px}
}

.shared-layout :is(
  .archive-project-card,
  .article-card,
  .news-card,
  .related-card,
  .model-card,
  .payment-card
){
  overflow:hidden;
}

.shared-layout :is(
  .hero-slider,
  .hero-slide,
  .about-hero,
  .partners-page-hero,
  .archive-hero,
  .projects-hero,
  .project-detail-hero,
  .contact-hero,
  .faq-hero,
  .article-hero,
  .post-hero,
  .info-hero,
  .opportunity-hero,
  .interest-hero,
  .about-media,
  .featured-media,
  .project-gallery,
  .article-cover,
  .investor-governance-visual
){
  border-radius:var(--radius-media);
}

.shared-layout :is(
  .site-whatsapp,
  .site-back-to-top,
  .mobile-nav-close,
  .gallery-control,
  .site-confirm-icon
){
  border-radius:var(--radius-round);
}

.shared-layout :where(.btn,.outline,.project-hero-btn,.projects-primary-btn):focus-visible,
.shared-layout a:focus-visible,
.shared-layout button:focus-visible{
  outline:2px solid var(--satc-veiling-waterfalls);
  outline-offset:3px;
}

.home-v2.shared-layout .shared-site-footer{
  border-top-color:rgb(192 174 136 / 48%);
  background:var(--satc-root-brew);
  color:var(--satc-white);
}

.home-v2.shared-layout .shared-site-footer:before{
  background:var(--satc-wild-hillside);
}

.home-v2.shared-layout .shared-site-footer .footer-main{
  background:var(--satc-root-brew);
  color:var(--satc-white);
}

.home-v2.shared-layout .shared-site-footer .footer-main:before{
  height:2px;
  background:linear-gradient(90deg,transparent,var(--satc-veiling-waterfalls),transparent);
  opacity:.82;
}

.home-v2.shared-layout .shared-site-footer :is(.footer-brand p,.footer-column a,.footer-contact>a,.footer-contact>span){
  color:rgb(255 255 255 / 90%)!important;
  font-weight:500;
}

.home-v2.shared-layout .shared-site-footer .footer-body h4{
  color:var(--satc-veiling-waterfalls)!important;
  font-size:17px;
}

.home-v2.shared-layout .shared-site-footer .footer-brand p,
.home-v2.shared-layout .shared-site-footer .footer-column>a:not(.footer-logo){
  font-size:14px;
}

.home-v2.shared-layout .shared-site-footer .footer-column>a:not(.footer-logo){
  color:rgb(255 255 255 / 90%)!important;
}

.home-v2.shared-layout .shared-site-footer .footer-contact>:is(a,span){
  font-size:13px;
}

.home-v2.shared-layout .shared-site-footer .footer-body h4:after{
  background:var(--satc-veiling-waterfalls);
}

.home-v2.shared-layout .shared-site-footer .footer-column a:hover,
.home-v2.shared-layout .shared-site-footer .footer-column a:focus-visible,
.home-v2.shared-layout .shared-site-footer .footer-contact>a:hover,
.home-v2.shared-layout .shared-site-footer .footer-contact>a:focus-visible,
.home-v2.shared-layout .shared-site-footer .copyright a:hover,
.home-v2.shared-layout .shared-site-footer .copyright a:focus-visible{
  color:var(--satc-white)!important;
}

.home-v2.shared-layout .shared-site-footer .footer-contact>:is(a,span)>i{
  border-color:var(--icon-dark-line)!important;
  background:var(--icon-dark-soft-bg);
  color:var(--satc-veiling-waterfalls);
}

.home-v2.shared-layout .shared-site-footer .footer-contact>a:hover>i,
.home-v2.shared-layout .shared-site-footer .footer-contact>a:focus-visible>i{
  border-color:var(--satc-veiling-waterfalls);
  background:var(--satc-veiling-waterfalls);
  color:var(--satc-root-brew)!important;
}

.home-v2.shared-layout .shared-site-footer .footer-contact .footer-social>a{
  border-color:rgb(192 174 136 / 55%)!important;
  background:rgb(192 174 136 / 8%)!important;
  color:var(--satc-white)!important;
}

.home-v2.shared-layout .shared-site-footer .footer-contact .footer-social>a:hover,
.home-v2.shared-layout .shared-site-footer .footer-contact .footer-social>a:focus-visible{
  border-color:var(--satc-veiling-waterfalls)!important;
  background:var(--satc-veiling-waterfalls)!important;
  color:var(--satc-root-brew)!important;
}

.home-v2.shared-layout .shared-site-footer .copyright{
  border-top-color:rgb(192 174 136 / 28%)!important;
  color:rgb(255 255 255 / 76%)!important;
  font-size:12px!important;
}

.home-v2.shared-layout .shared-site-footer .copyright a{
  color:rgb(255 255 255 / 78%)!important;
}

.home-v2.shared-layout .shared-site-footer .copyright i{
  background:rgb(192 174 136 / 42%)!important;
}

.home-v2.shared-layout .shared-site-footer .footer-body>.row>div+div,
.home-v2.shared-layout .shared-site-footer .footer-column:nth-of-type(3),
.home-v2.shared-layout .shared-site-footer .footer-body>.row>div.footer-contact{
  border-color:rgb(192 174 136 / 24%);
}

@media(max-width:700px){
  .home-v2.shared-layout .shared-site-footer .footer-body h4{font-size:16px}
  .home-v2.shared-layout .shared-site-footer .footer-brand p,
  .home-v2.shared-layout .shared-site-footer .footer-column>a:not(.footer-logo){font-size:13px}
}

/* Image heroes need the light brand accent; the darker Wild Hillside accent is
   reserved for light surfaces where it retains sufficient contrast. */
body.home-v2 :is(
  .about-hero,
  .partners-page-hero,
  .archive-hero,
  .projects-hero,
  .project-detail-hero,
  .contact-hero,
  .faq-hero,
  .opportunity-hero,
  .interest-hero
) .project-type{
  color:var(--satc-veiling-waterfalls)!important;
}

body.home-v2 :is(
  .about-hero,
  .partners-page-hero,
  .archive-hero,
  .post-hero,
  .info-hero,
  .projects-hero,
  .project-detail-hero,
  .contact-hero,
  .faq-hero,
  .opportunity-hero,
  .interest-hero
) :is(
  .about-breadcrumb,
  .breadcrumb,
  .articles-breadcrumb,
  .project-breadcrumb,
  .project-detail-breadcrumb,
  .info-breadcrumb,
  .faq-breadcrumb,
  .opportunity-breadcrumb
) :is(.fa-chevron-left,.fa-chevron-right){
  color:var(--satc-veiling-waterfalls);
}

/* Canonical filled actions: one geometry and white content throughout. The
   light accent is not used as a button fill because white does not retain
   sufficient contrast on it. */
.shared-layout :is(
  .btn.dark,
  .about-cta,
  .contact-form button[type="submit"],
  .auth-submit,
  .model-info>a,
  .faq-layout aside a,
  .project-inquiry button,
  .opportunity-submit,
  .interest-submit,
  .contact-box a
){
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:var(--btn-py) var(--btn-px);
  border-color:var(--btn-bg);
  border-radius:var(--radius-control);
  background:var(--btn-bg);
  color:var(--btn-fg);
  -webkit-text-fill-color:var(--btn-fg);
  text-decoration:none;
  transition:background-color var(--motion-fast) ease,border-color var(--motion-fast) ease,transform var(--motion-fast) ease!important;
}

.shared-layout :is(
  .about-cta,
  .contact-form button[type="submit"],
  .auth-submit,
  .model-info>a,
  .faq-layout aside a,
  .project-inquiry button,
  .opportunity-submit,
  .interest-submit,
  .contact-box a
):hover{
  border-color:var(--btn-bg-hover);
  background:var(--btn-bg-hover);
  color:var(--btn-fg);
  -webkit-text-fill-color:var(--btn-fg);
}

.shared-layout :is(
  .projects-primary-btn,
  .project-hero-btn,
  .investor-hero-action
){
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:var(--btn-py) var(--btn-px);
  border-color:var(--btn-dark-bg);
  border-radius:var(--radius-control);
  background:var(--btn-dark-bg);
  color:var(--btn-dark-fg);
  -webkit-text-fill-color:var(--btn-dark-fg);
  text-decoration:none;
  transition:background-color var(--motion-fast) ease,border-color var(--motion-fast) ease,transform var(--motion-fast) ease;
}

.shared-layout :is(
  .projects-primary-btn,
  .project-hero-btn,
  .investor-hero-action
):hover{
  border-color:var(--btn-dark-bg-hover);
  background:var(--btn-dark-bg-hover);
  color:var(--btn-dark-fg-hover);
  -webkit-text-fill-color:var(--btn-dark-fg-hover);
}

/* Text and directional glyphs always travel as one white foreground on a
   filled action, regardless of older page-level icon color declarations. */
.shared-layout :is(
  .btn.dark,
  .about-cta,
  .projects-primary-btn,
  .project-hero-btn,
  .investor-hero-action,
  .contact-form button[type="submit"],
  .faq-layout aside a,
  .project-inquiry button,
  .model-info>a,
  .opportunity-submit,
  .interest-submit,
  .auth-submit,
  .contact-box a
) :is(i,svg){
  color:var(--satc-white);
  fill:currentColor;
}

.shared-layout .model-tabs button{
  min-height:64px;
  padding-block:13px;
}

@media(max-width:700px){
  .shared-layout .model-tabs button{min-height:58px}
}


.shared-layout :is(
  .contact-details i:not(.satc-icon-tile),
  .project-overview-amenities i:not(.satc-icon-tile),
  .amenities i:not(.satc-icon-tile),
  .complaints-steps i:not(.satc-icon-tile),
  .investor-governance li i:not(.satc-icon-tile)
){
  border-color:var(--icon-dark-line);
  background:var(--icon-dark-bg);
  color:var(--icon-dark-fg);
}

.shared-layout :is(
  .project-overview-amenities i:not(.satc-icon-tile),
  .amenities i:not(.satc-icon-tile)
)::before{
  color:var(--satc-white);
  -webkit-text-fill-color:var(--satc-white);
}

/* Surface-aware foreground contract. Typography lives in typography.css. */
.shared-layout main :where(p,li){
  color:var(--satc-root-brew)!important;
}

.shared-layout main :where(small,time,label),
.shared-layout main :is(.card-meta,.post-meta,.project-breadcrumb,.articles-breadcrumb,.info-breadcrumb){
  color:var(--satc-root-brew);
}

.shared-layout main .satc-kicker{
  color:var(--satc-root-brew);
}

.shared-layout main :where(input,textarea)::placeholder{
  opacity:.82;
}

.shared-layout main :where(h1,h2,h3,h4,h5,h6){
  color:var(--satc-root-brew)!important;
}

/* Text on dark, photographic, or explicitly colored surfaces is always white.
   Keep this list semantic so light cards nested elsewhere retain dark copy. */
.shared-layout main :is(
  .hero-slide,
  .about-hero,
  .post-hero,
  .info-hero,
  .partners-page-hero,
  .archive-hero,
  .projects-hero,
  .project-detail-hero,
  .contact-hero,
  .faq-hero,
  .opportunity-hero,
  .interest-hero,
  .opportunity-aside,
  .interest-aside,
  .numbers,
  .vision,
  .investor-portfolio,
  .contact-panel,
  .project-inquiry,
  .project-overview-amenities,
  .project-interest-final
) :where(h1,h2,h3,h4,h5,h6,p,li,small,time,label,strong,span){
  color:var(--satc-white)!important;
  -webkit-text-fill-color:var(--satc-white);
}

.shared-layout main :is(
  .about-hero,
  .partners-page-hero,
  .post-hero,
  .info-hero,
  .archive-hero,
  .projects-hero,
  .project-detail-hero,
  .contact-hero,
  .faq-hero,
  .opportunity-hero,
  .interest-hero
) :is(
  .about-breadcrumb,
  .about-breadcrumb a,
  .breadcrumb,
  .breadcrumb a,
  .articles-breadcrumb,
  .articles-breadcrumb a,
  .project-breadcrumb,
  .project-breadcrumb a,
  .project-detail-breadcrumb,
  .project-detail-breadcrumb a,
  .info-breadcrumb,
  .info-breadcrumb a,
  .faq-breadcrumb,
  .faq-breadcrumb a,
  .opportunity-breadcrumb,
  .opportunity-breadcrumb a
){
  color:var(--satc-white)!important;
  -webkit-text-fill-color:var(--satc-white);
}

.shared-layout main :is(
  .hero-slide,
  .about-hero,
  .post-hero,
  .info-hero,
  .partners-page-hero,
  .archive-hero,
  .projects-hero,
  .project-detail-hero,
  .contact-hero,
  .numbers,
  .vision,
  .investor-portfolio,
  .contact-panel,
  .project-inquiry,
  .project-overview-amenities,
  .project-interest-final
) :where(input,textarea)::placeholder{
  color:var(--satc-white);
  opacity:.82;
}

/* Light cards can be docked inside dark heroes/sections; the nearest surface
   wins so these cards never inherit white-on-white copy. */
.shared-layout main .project-hero-facts :where(small,strong),
.shared-layout main .model-panel :where(h1,h2,h3,h4,h5,h6,p,li,small,strong,b){
  color:var(--satc-root-brew)!important;
  -webkit-text-fill-color:var(--satc-root-brew);
}

/* The article category badge is a Veiling Waterfalls chip on the dark hero:
   Root Brew on Veiling is the guideline pairing that keeps small text legible. */
.shared-layout main .post-hero .post-category{
  color:var(--satc-root-brew)!important;
  -webkit-text-fill-color:var(--satc-root-brew);
}

/* An active control is filled with the dark brand color, so its labels flip. */
.shared-layout main .satc-control.active :where(span,small,strong){
  color:var(--satc-white)!important;
  -webkit-text-fill-color:var(--satc-white);
}

.shared-layout .shared-site-footer :where(h2,h3,h4,p,li,small,strong,span,a){
  color:var(--satc-white);
  -webkit-text-fill-color:var(--satc-white);
}

@media(max-width:800px){
  .shared-layout .shared-site-header .brand-lockup{
    width:145px!important;
    min-height:42px;
    padding:8px 0!important;
  }

  /* The bar floats over the hero as glass, so it keeps the light logo;
     the white menu drawer uses the dark one. */
  .shared-layout .shared-site-header>.brand-lockup .brand-logo-dark,
  .shared-layout .shared-site-header .mobile-nav-brand .brand-logo-light{
    display:none;
  }

  .shared-layout .shared-site-header>.brand-lockup .brand-logo-light,
  .shared-layout .shared-site-header .mobile-nav-brand .brand-logo-dark{
    display:block!important;
  }

  .shared-layout .shared-site-header .mobile-nav-brand.brand-lockup{
    display:flex!important;
  }

  .shared-layout .shared-site-footer .footer-logo.brand-lockup{
    width:210px!important;
    margin-inline:auto!important;
  }

  .shared-layout .shared-site-footer .footer-logo.brand-lockup .brand-logo{
    object-position:center;
  }

}