/* =====================================================================================================
   Banyan Living private deal page, v2. Pixel, desk 10, brief MK3 v2 (Brain ruling NA, 06-11-2026). FOR RULING.
   Replaces v1 (05-11-2026, kept). Ships in N46i, not in N46h.
   Mockups: P:\SIG\02 Franco-Media\Agents\Pixel\TEMPLATE - Banyan private deal page v2 (06-11-2026).html
   Page: EN 157321 (live), then its FR and RU twins (283651, 283666) once published.

   Load: after agent-page.css and after the MK2 boxes CSS v3 (N46i), on the agent pages only (the same handle
   condition as agent-page.css). The WPBakery tab sheet (js_composer_tta.min.css) prints after the theme on live,
   so the tab rules carry one more class than its "vc_tta-color-custom vc_tta-style-flat" rules, never a flag.
   Tokens of tokens.css only: no hex, no important flag, no new font, no new token. No price on the page.

   Ruling NA applied:
     - The page accent. The page has no rubrique accent, so it takes the dark teal chrome (--os-dark-teal, the
       colour every --acc-deep fallback in the theme already resolves to) as its --acc-deep; --acc-darker is its
       one step darker. The two bands, the buttons and the FAQ follow it through the MK2 v3 rules.
     - Tabs: white text on every tab but Signature. Villa (dark cyan) and Penthouse (burnt caramel) measure
       3.73:1 and 3.85:1 for white text, so their ground is the deeper shade (the --acc-deep recipe, 78 % colour,
       22 % ink): 5.34:1 and 5.64:1. Condominium (dark teal, 7.28:1), Townhouse (rusty spice, 5.52:1) and
       Signature (ink black, golden text, 8.5:1) are unchanged.
     - The discount bands take the page accent as their ground with white text. The @SIAM code is a white tile
       with accent text, "Tap to copy" under it; on hover and focus the tile turns to the darker accent with
       white text and keeps its white line. Gold is gone from the band (dot, "5% discount", tile).
     - Gold stays only for the focus ring and the "Top tier" mark (the golden mark on the Signature tab and the
       Signature chip on its cards).
     - Card buttons and "See all": secondary (white ground, accent hairline, accent text).

   Tabs, in this order in the content (content pass item 1): Condominium, Villa, Penthouse, Townhouse, Signature.
   Each tab takes one colour of the Ocean Sunset palette by position, so the FR and RU twins need no change as
   long as they keep the same order.

   Content pass (Nick, listed in the mockup section 8): the inline-styled blocks of the body become classes,
   since an inline style cannot be restyled without a flag: the two notes (siam-note), the five "See all ... on
   banyanliving.com" links (siam-more), the five cards "direct from the owner" (siam-res-card), and the FAQ moves
   into the theme FAQ field (gpcf_faq), which MK2 already styles.
   ===================================================================================================== */

/* The page accent (see above). */
article.sigpage{
  --acc-deep:var(--os-dark-teal);
  --acc-darker:color-mix(in srgb,var(--acc-deep) 80%,var(--os-ink-black));
}


/* ----- 1. The tabs, desktop: one pill per residence type, coloured from the palette ----- */
article.sigpage .siam-tabfix.vc_tta-tabs.vc_tta .vc_tta-tab:nth-child(1){ --tier:var(--os-dark-teal); --tier-ink:var(--on-dark); }
article.sigpage .siam-tabfix.vc_tta-tabs.vc_tta .vc_tta-tab:nth-child(2){ --tier:color-mix(in srgb,var(--os-dark-cyan) 78%,var(--os-ink-black)); --tier-ink:var(--on-dark); }
article.sigpage .siam-tabfix.vc_tta-tabs.vc_tta .vc_tta-tab:nth-child(3){ --tier:color-mix(in srgb,var(--os-burnt-caramel) 78%,var(--os-ink-black)); --tier-ink:var(--on-dark); }
article.sigpage .siam-tabfix.vc_tta-tabs.vc_tta .vc_tta-tab:nth-child(4){ --tier:var(--os-rusty-spice); --tier-ink:var(--on-dark); }
article.sigpage .siam-tabfix.vc_tta-tabs.vc_tta .vc_tta-tab:last-child{ --tier:var(--os-ink-black); --tier-ink:var(--os-golden-orange); }

article.sigpage .siam-tabfix.vc_tta-tabs.vc_tta .vc_tta-tabs-list{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-3);
  margin:var(--space-10) 0 0;
  padding:0;
  border:0;
  overflow:visible;
}
article.sigpage .siam-tabfix.vc_tta-tabs.vc_tta .vc_tta-tab{ margin:0; }
/* WPBakery 9 wraps each tab link in h4.vc_tta-panel-title, so "li > a" never matches (the j6.css tab rule misses this
   markup for the same reason); the h4 is reset and the rules target the link inside it. */
article.sigpage .siam-tabfix.vc_tta-tabs.vc_tta .vc_tta-tab .vc_tta-panel-title{ margin:0; padding:0; font-size:inherit; line-height:inherit; }
article.sigpage .siam-tabfix.vc_tta-tabs.vc_tta .vc_tta-tab a{
  display:inline-flex;
  align-items:center;
  gap:var(--space-3);
  min-height:var(--tap-comfortable);
  margin:0;
  padding:0 var(--space-9);
  background:var(--os-card);
  border:1px solid var(--os-line);
  border-radius:var(--radius-sm);
  box-shadow:none;
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-body);
  line-height:1.2;
  color:var(--os-heading);
  text-decoration:none;
  transition:border-color var(--duration-base) var(--ease), background var(--duration-base) var(--ease);
}
/* The tab label: WPBakery and agent-page.css colour it white for the old green fill. */
article.sigpage .siam-tabfix.vc_tta-tabs.vc_tta .vc_tta-tab a .vc_tta-title-text{
  font-family:inherit;
  font-weight:inherit;
  font-size:inherit;
  color:inherit;
}
/* The colour dot of the tier, before the label. WPBakery hides both pseudo elements of the open tab (display none,
   absolute, 100vw by 200vw); they are set back to small inline marks here and in the Signature mark below. */
article.sigpage .siam-tabfix.vc_tta-tabs.vc_tta .vc_tta-tab a::before{
  content:"";
  display:inline-block;
  position:static;
  border:0;
  flex:none;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--tier);
}
article.sigpage .siam-tabfix.vc_tta-tabs.vc_tta .vc_tta-tab:hover a{
  background:var(--os-card);
  border-color:var(--tier);
  color:var(--os-heading);
}
article.sigpage .siam-tabfix.vc_tta-tabs.vc_tta .vc_tta-tab a:focus-visible{ outline:3px solid var(--os-cta); outline-offset:2px; }
/* The open tab: a solid fill of its own palette colour. */
article.sigpage .siam-tabfix.vc_tta-tabs.vc_tta .vc_tta-tab.vc_active a{
  background:var(--tier);
  border-color:var(--tier);
  color:var(--tier-ink);
}
article.sigpage .siam-tabfix.vc_tta-tabs.vc_tta .vc_tta-tab.vc_active a::before{ background:var(--tier-ink); }

/* Signature, the top tier: a golden mark after the label, in the page language. */
article.sigpage .siam-tabfix.vc_tta-tabs.vc_tta :is(.vc_tta-tab:last-child a, .vc_tta-panel:last-child .vc_tta-panel-title > a)::after{
  display:inline-block;
  position:static;
  width:auto;
  height:auto;
  margin-left:var(--space-2);
  padding:0 var(--space-4);
  border:0;
  border-radius:var(--radius-pill);
  background:var(--os-cta);
  color:var(--os-cta-ink);
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-floor);
  line-height:1.6;
}
article.sigpage:lang(en) .siam-tabfix :is(.vc_tta-tab:last-child a, .vc_tta-panel:last-child .vc_tta-panel-title > a)::after{ content:"Top tier"; }
article.sigpage:lang(fr) .siam-tabfix :is(.vc_tta-tab:last-child a, .vc_tta-panel:last-child .vc_tta-panel-title > a)::after{ content:"Prestige"; }
article.sigpage:lang(ru) .siam-tabfix :is(.vc_tta-tab:last-child a, .vc_tta-panel:last-child .vc_tta-panel-title > a)::after{ content:"Премиум"; }

article.sigpage .siam-tabfix.vc_tta-tabs.vc_tta .vc_tta-panel-body{
  padding:var(--space-10) 0 0;
  background:none;
  border:0;
}


/* ----- 2. The tabs on a phone: WPBakery turns them into an accordion; the same pills, full width ----- */
article.sigpage .siam-tabfix.vc_tta-tabs.vc_tta .vc_tta-panel:nth-child(1){ --tier:var(--os-dark-teal); --tier-ink:var(--on-dark); }
article.sigpage .siam-tabfix.vc_tta-tabs.vc_tta .vc_tta-panel:nth-child(2){ --tier:color-mix(in srgb,var(--os-dark-cyan) 78%,var(--os-ink-black)); --tier-ink:var(--on-dark); }
article.sigpage .siam-tabfix.vc_tta-tabs.vc_tta .vc_tta-panel:nth-child(3){ --tier:color-mix(in srgb,var(--os-burnt-caramel) 78%,var(--os-ink-black)); --tier-ink:var(--on-dark); }
article.sigpage .siam-tabfix.vc_tta-tabs.vc_tta .vc_tta-panel:nth-child(4){ --tier:var(--os-rusty-spice); --tier-ink:var(--on-dark); }
article.sigpage .siam-tabfix.vc_tta-tabs.vc_tta .vc_tta-panel:last-child{ --tier:var(--os-ink-black); --tier-ink:var(--os-golden-orange); }
article.sigpage .siam-tabfix.vc_tta-tabs.vc_tta .vc_tta-panel .vc_tta-panel-heading{
  margin:var(--space-3) 0 0;
  background:var(--os-card);
  border:1px solid var(--os-line);
  border-radius:var(--radius-sm);
}
article.sigpage .siam-tabfix.vc_tta-tabs.vc_tta .vc_tta-panel .vc_tta-panel-title > a{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  min-height:var(--tap-comfortable);
  padding:0 var(--space-7);
  background:none;
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-body);
  color:var(--os-heading);
  text-decoration:none;
}
article.sigpage .siam-tabfix.vc_tta-tabs.vc_tta .vc_tta-panel .vc_tta-panel-title > a .vc_tta-title-text{ color:inherit; font:inherit; }
article.sigpage .siam-tabfix.vc_tta-tabs.vc_tta .vc_tta-panel .vc_tta-panel-title > a::before{
  content:"";
  flex:none;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--tier);
}
article.sigpage .siam-tabfix.vc_tta-tabs.vc_tta .vc_tta-panel.vc_active .vc_tta-panel-heading{
  background:var(--tier);
  border-color:var(--tier);
}
article.sigpage .siam-tabfix.vc_tta-tabs.vc_tta .vc_tta-panel.vc_active .vc_tta-panel-title > a{ color:var(--tier-ink); }
article.sigpage .siam-tabfix.vc_tta-tabs.vc_tta .vc_tta-panel.vc_active .vc_tta-panel-title > a::before{ background:var(--tier-ink); }


/* ----- 3. The residence cards: the white card of MK2 ----- */
article.sigpage .siam-res-card{
  background:var(--os-card);
  border:1px solid var(--os-line);
  border-radius:var(--radius-card);
  box-shadow:none;
  transition:border-color var(--duration-base) var(--ease), box-shadow var(--duration-base) var(--ease);
}
article.sigpage .siam-res-card:hover{ border-color:var(--os-muted); box-shadow:var(--shadow-raised); }
article.sigpage .siam-res-media img{ height:auto; aspect-ratio:3 / 2; }
/* The type chip on the photo stays white, for contrast on any photo. */
article.sigpage .siam-res-chip{
  padding:0 var(--space-4);
  background:var(--os-card);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-raised);
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-floor);
  line-height:1.8;
  letter-spacing:0;
  color:var(--os-heading);
}
/* In the Signature panel (the last one), the chip turns navy with golden text: the top tier, card by card. */
article.sigpage .siam-tabfix .vc_tta-panel:last-child .siam-res-chip{ background:var(--os-ink-black); color:var(--os-golden-orange); }
article.sigpage .siam-res-card .siam-res-body{ padding:var(--space-8) var(--space-8) var(--space-9); }
article.sigpage .siam-res-card .siam-res-body h4{
  margin:0 0 var(--space-3);
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:var(--size-body);
  line-height:var(--lh-card-title);
  color:var(--os-heading);
}
article.sigpage .siam-res-card .siam-res-body .siam-res-place{
  margin:0 0 var(--space-5);
  font-size:var(--size-floor);
  color:var(--os-muted);
}
article.sigpage .siam-res-card .siam-res-body .siam-res-specs{
  margin:0 0 var(--space-7);
  padding-top:var(--space-5);
  border-top:1px solid var(--os-line);
  font-size:var(--size-floor);
  line-height:1.5;
  color:var(--os-text);
}
article.sigpage .siam-res-card .siam-res-body .siam-res-desc{
  margin:0 0 var(--space-7);
  font-size:var(--size-floor);
  line-height:1.5;
  color:var(--os-text);
}
/* The card button: secondary (white ground, accent hairline, accent text), full width, 44 px. */
article.sigpage .siam-res-card .siam-res-body p:has(> .siam-res-btn){ margin:auto 0 0; }
article.sigpage .siam-res-card .siam-res-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:var(--tap-min);
  margin-top:auto;
  padding:0 var(--space-7);
  background:var(--os-card);
  border:1px solid var(--acc-deep);
  border-radius:var(--radius-sm);
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-body-sm);
  color:var(--acc-deep);
  text-decoration:none;
}
article.sigpage .siam-res-card .siam-res-btn:hover,
article.sigpage .siam-res-card .siam-res-btn:focus-visible{ background:var(--os-card); border-color:var(--acc-darker); color:var(--acc-darker); }
article.sigpage .siam-res-card .siam-res-btn:hover{ background:color-mix(in srgb,var(--acc-deep) 7%,var(--os-card)); }
article.sigpage .siam-res-card .siam-res-btn:focus-visible{ background:color-mix(in srgb,var(--acc-deep) 7%,var(--os-card)); outline:3px solid var(--os-cta); outline-offset:2px; }

/* The brand heading over each group of cards. */
article.sigpage .wpb_text_column h3.siam-brand-h{
  margin:var(--space-13) 0 0;
  padding-bottom:var(--space-5);
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:var(--size-h3);
  line-height:var(--lh-h3);
  color:var(--os-heading);
}


/* ----- 4. The two discount bands: the page accent as ground, the @SIAM code a white tile with accent text ----- */
article.sigpage .siam-band{
  --panel:var(--acc-deep);
  --panel-hover:var(--acc-darker);
  max-width:none;
  margin:var(--space-12) 0 var(--space-13);
  background:var(--panel);
  border:0;
  border-radius:var(--radius-card);
  box-shadow:none;
  color:var(--on-dark);
}
article.sigpage .siam-band .siam-band-bar{
  justify-content:flex-start;
  padding:var(--space-12) var(--space-14) 0;
  background:none;
}
article.sigpage .siam-band .siam-band-bar .label{
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-eyebrow);
  letter-spacing:var(--ls-eyebrow);
  color:var(--on-dark);
}
article.sigpage .siam-band .siam-pulse-dot{ background:var(--on-dark); }
article.sigpage .siam-band .siam-band-row{ align-items:center; gap:var(--space-10); padding:var(--space-5) var(--space-14) var(--space-13); }
article.sigpage .siam-band .siam-band-copy{
  justify-content:flex-start;
  padding:0;
  font-size:var(--size-lead);
  line-height:1.55;
  text-align:left;
  color:var(--on-dark);
}
article.sigpage .siam-band .siam-band-copy p{ color:var(--on-dark); font-size:var(--size-lead); }
article.sigpage .siam-band .siam-band-copy strong{ color:var(--on-dark); }
article.sigpage .siam-band .siam-band-copy a{ color:var(--on-dark); text-decoration:underline; text-underline-offset:3px; }
article.sigpage .siam-band .siam-band-copy a:hover{ color:var(--on-dark); text-decoration-thickness:2px; }
article.sigpage .siam-band .siam-code-panel{ flex:0 0 220px; padding:0; background:none; }
/* The @SIAM code: a white tile, accent text, a white line set off by a gap in the panel colour (the inverse
   primary of MK2 v3 section 12b). agent-page.css pulses a golden glow around it; the pulse is switched off here. */
article.sigpage .siam-band .siam-copy-box{
  border-radius:var(--radius-card);
  background:var(--on-dark);
  border:0;
  color:var(--panel);
  box-shadow:0 0 0 2px var(--panel), 0 0 0 4px var(--on-dark);
  animation:none;
}
article.sigpage .siam-band .siam-copy-box .code{ font-size:var(--size-h2); }
article.sigpage .siam-band .siam-copy-box:hover,
article.sigpage .siam-band .siam-copy-box:focus-visible{
  background:var(--panel-hover);
  color:var(--on-dark);
  animation:none;
}
article.sigpage .siam-band .siam-copy-box:focus-visible{ outline:3px solid var(--os-cta); outline-offset:6px; }
article.sigpage .siam-band .siam-copy-label{ font-size:var(--size-floor); letter-spacing:var(--ls-eyebrow); opacity:1; }


/* ----- 5. The notes and the "See all" links (content pass items 2 and 3) ----- */
article.sigpage .siam-note{
  margin:var(--space-10) 0 var(--space-3);
  padding:var(--space-8) var(--space-10);
  background:var(--os-card);
  border:1px solid var(--os-line);
  border-radius:var(--radius-card);
  font-family:var(--font-body);
  font-size:var(--size-body);
  line-height:var(--lh-body);
  color:var(--os-text);
}
article.sigpage .siam-more{ margin:var(--space-10) 0 var(--space-12); text-align:center; }
article.sigpage .siam-more .siam-more-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:var(--tap-comfortable);
  padding:0 var(--space-12);
  background:var(--os-card);
  border:1px solid var(--acc-deep);
  border-radius:var(--radius-sm);
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-body);
  color:var(--acc-deep);
  text-decoration:none;
}
article.sigpage .siam-more .siam-more-btn:hover,
article.sigpage .siam-more .siam-more-btn:focus-visible{ background:color-mix(in srgb,var(--acc-deep) 7%,var(--os-card)); border-color:var(--acc-darker); color:var(--acc-darker); }
article.sigpage .siam-more .siam-more-btn:focus-visible{ outline:3px solid var(--os-cta); outline-offset:3px; }


/* ----- 6. Phone (768 px and below) ----- */
@media (max-width:768px){
  article.sigpage .siam-band .siam-band-bar{ padding:var(--space-10) var(--space-8) 0; }
  article.sigpage .siam-band .siam-band-row{ flex-direction:column; align-items:stretch; padding:var(--space-5) var(--space-8) var(--space-10); }
  article.sigpage .siam-band .siam-band-copy{ flex:none; }
  article.sigpage .siam-band .siam-code-panel{ flex:none; }
  article.sigpage .siam-note{ padding:var(--space-7) var(--space-8); }
  article.sigpage .siam-more .siam-more-btn{ display:flex; width:100%; }
}

/* ----- 7. Reduced motion: the pulse of the code and of the dot stop (agent-page.css already does it) ----- */