/* ============================================================================
   PropertyInsider.sg — pillar pages, neutral refresh (16 Oct 2026)
   Loaded LAST on the seven nav hubs: /new-launches/, /landed/, /price-trends/,
   /research/, /guides/, /finance/, /tools/ (body.pillar-page).
   Carries the homepage's 15 Oct direction across without touching any page's
   layout code: the theme tokens are re-pointed at the WW/Studio swatch, the
   page head is restyled around the owl, and pillar.js adds scroll reveals.

     Ivory    #F3F1EC  page          Garden #E0DFD2  tints, owl disc
     Moss     #B6B8AB  rules         Smoke  #9FA3AD  decoration
     Midnight #3C3E4A  text, buttons, dark bands

   Status colours (selling indigo, upcoming teal, school bands, LTA line
   colours) are DATA encodings and are deliberately left alone.
   ========================================================================== */

:root {
  /* ---- swatch ---- */
  --pp-ivory: #F3F1EC;
  --pp-paper: #FAF9F6;
  --pp-garden: #E0DFD2;
  --pp-moss: #B6B8AB;
  --pp-smoke: #9FA3AD;
  --pp-night: #3C3E4A;
  --pp-night-dk: #2C2E38;
  --pp-ink: #2E3039;
  --pp-mute: #62656F;
  --pp-line: #D9D8CB;
  --pp-ease: cubic-bezier(.22,.7,.18,1);

  /* ---- theme.css tokens, re-pointed ---- */
  --ink: #2E3039; --ink-2: #3C3E4A; --ink-3: #4A4D5B;
  --clay: #3C3E4A; --clay-dark: #2C2E38; --clay-soft: #E8E7DC;
  --moss: #3C3E4A; --moss-dark: #2C2E38; --moss-soft: #E8E7DC; --moss-deep: #3C3E4A;
  --olive: #62656F; --olive-deep: #3C3E4A;
  --strip: #3C3E4A; --gold: #3C3E4A; --gold-dark: #2C2E38;
  --mist: #F3F1EC; --mist-2: #FAF9F6;
  --line: #D9D8CB; --line-strong: #C2C1B3;
  --text-ink: #2E3039; --text-soft: #62656F;
  --link-color: #3C3E4A; --text-accent: #4A4D5B;
  --red-primary: #3C3E4A; --red-dark: #2C2E38; --red-light: #E8E7DC;
  --navy: #3C3E4A; --navy-light: #4A4D5B;
  --grey-bg: #F3F1EC; --grey-light: #FAF9F6; --border: #D9D8CB;
  --text: #2E3039; --text-muted: #62656F;
  --cream: #F3F1EC; --pale: #E8E7DC; --butter: #E8E7DC;
  --ico-ink: #3C3E4A; --ico-fill: #E0DFD2; --ico-acc: #B6B8AB;
}

body.pillar-page { background: var(--pp-ivory); color: var(--pp-ink); }

/* ---- links: underline that retracts on hover ---------------------------- */
.pillar-page main a:not([class]), .pillar-page .prose a:not([class]) {
  color: var(--pp-night); text-decoration-color: var(--pp-moss); text-underline-offset: 3px;
  transition: text-decoration-color .25s var(--pp-ease);
}
.pillar-page main a:not([class]):hover { text-decoration-color: var(--pp-night); }

/* ========================================================================
   PAGE HEAD
   ======================================================================== */
.pillar-page .page-head {
  background: var(--pp-ivory);
  padding-top: 64px; padding-bottom: 64px;
  border-bottom: 1px solid var(--pp-line);
}
.pillar-page .page-head canvas.pi-shader { display: none !important; }
/* a Garden disc and a dashed ring seated behind the owl */
.pillar-page .page-head::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none; inset: auto;
  right: -10px; bottom: -46px; width: 290px; height: 290px; border-radius: 50%;
  background: var(--pp-garden); box-shadow: inset 0 0 0 1px rgba(182,184,171,.7);
}
.pillar-page .page-head::after {
  content: ''; position: absolute; z-index: 0; pointer-events: none; inset: auto;
  right: -50px; bottom: -86px; width: 370px; height: 370px; border-radius: 50%;
  border: 1px dashed var(--pp-smoke); opacity: .7;
}
/* /price-trends/ opens its head (overflow:visible) so the search panel can
   hang below it; keep the decoration inside the box there. */
.pillar-page .page-head[data-landing="search"]::before { right: 8px; bottom: 8px; width: 270px; height: 270px; }
.pillar-page .page-head[data-landing="search"]::after { display: none; }
.pillar-page .page-head .pi-mascot {
  z-index: 1; opacity: 1; height: min(250px, 82%); right: 26px; bottom: -6px;
  filter: drop-shadow(0 22px 18px rgba(60,62,74,.22));
}
.pillar-page .page-head-inner { z-index: 2; }

.pillar-page .page-head h1 {
  color: var(--pp-night); font-weight: 400; letter-spacing: -0.022em; line-height: 1.06;
  font-size: clamp(2.3rem, 4.2vw, 3.6rem); max-width: 24ch; text-wrap: balance;
}
.pillar-page .page-head h1 .italic { font-style: normal; color: inherit; font-weight: inherit; }
.pillar-page .page-head .eyebrow { display: none; }
.pillar-page .page-lede, .pillar-page .page-head .hero-subtitle { color: var(--pp-mute); font-size: 18px; line-height: 1.6; }
.pillar-page .page-meta, .pillar-page .crumbs, .pillar-page .crumbs a { color: var(--pp-mute); }
.pillar-page .page-meta strong, .pillar-page .crumbs .here { color: var(--pp-night); }
.pillar-page .page-head [style*="255,255,255"], .pillar-page .page-head [style*="255, 255, 255"] { color: var(--pp-mute) !important; }

/* section tabs: neutral pills, Midnight when current */
.pillar-page .page-head .section-tabs a {
  background: var(--pp-paper); color: var(--pp-night); border-color: var(--pp-moss);
  transition: background-color .25s var(--pp-ease), color .25s var(--pp-ease), border-color .25s var(--pp-ease);
}
.pillar-page .page-head .section-tabs a:hover { background: #fff; border-color: var(--pp-night); }
.pillar-page .page-head .section-tabs a[aria-current] { background: var(--pp-night); border-color: var(--pp-night); color: var(--pp-ivory); }

/* search in the head (price trends) */
.pillar-page .page-head .ps-field { background: var(--pp-paper); border-color: var(--pp-moss); border-radius: 999px; box-shadow: 0 18px 40px -22px rgba(60,62,74,.45); }
.pillar-page .page-head .ps-field:focus-within { border-color: var(--pp-night); box-shadow: 0 0 0 4px rgba(60,62,74,.12); }
.pillar-page .ps-chip[aria-pressed="true"] { background: var(--pp-night); border-color: var(--pp-night); color: var(--pp-ivory); }
.pillar-page .ps-chip { color: var(--pp-night); border-color: var(--pp-moss); }

/* ---- head motion -------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .pillar-page .page-head-inner > * { opacity: 0; animation: pp-up .8s var(--pp-ease) forwards; }
  .pillar-page .page-head-inner > *:nth-child(2) { animation-delay: .08s; }
  .pillar-page .page-head-inner > *:nth-child(3) { animation-delay: .16s; }
  .pillar-page .page-head-inner > *:nth-child(4) { animation-delay: .24s; }
  .pillar-page .page-head-inner > *:nth-child(5) { animation-delay: .32s; }
  .pillar-page .page-head-inner > *:nth-child(n+6) { animation-delay: .4s; }
  .pillar-page .page-head::before { transform: scale(.6); opacity: 0; animation: pp-pop 1.1s var(--pp-ease) .1s forwards; }
  .pillar-page .page-head::after { opacity: 0; animation: pp-in 1.4s var(--pp-ease) .5s forwards; }
  .pillar-page .page-head .pi-mascot { animation: pp-owl 1s var(--pp-ease) .25s both, pp-bob 5.5s ease-in-out 1.3s infinite; }
}
@keyframes pp-up  { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes pp-in  { to { opacity: .7; } }
@keyframes pp-pop { to { transform: none; opacity: 1; } }
@keyframes pp-owl { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
@keyframes pp-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(-1.2deg); } }

/* ========================================================================
   DATA STRIP, FILTER BAR, DARK BANDS
   ======================================================================== */
.pillar-page .data-strip { background: var(--pp-night); border-top: 0; }
.pillar-page .data-strip .k { color: #C9CBD1; }
.pillar-page .data-strip .v { color: var(--pp-ivory); }
.pillar-page .filter-bar { background: var(--pp-paper); border-color: var(--pp-line); }
.pillar-page .newsletter, .pillar-page .footer { background: var(--pp-night); }

/* ---- buttons: pills, Midnight ------------------------------------------- */
.pillar-page .btn-primary, .pillar-page .newsletter-btn, .pillar-page .advisor-form button[type=submit] {
  background: var(--pp-night); border-color: var(--pp-night); color: var(--pp-ivory); border-radius: 999px;
  transition: background-color .25s var(--pp-ease), transform .25s var(--pp-ease);
}
.pillar-page .btn-primary:hover, .pillar-page .newsletter-btn:hover, .pillar-page .advisor-form button[type=submit]:hover { background: var(--pp-night-dk); }
.pillar-page .btn-primary:active, .pillar-page .advisor-form button[type=submit]:active { transform: translateY(1px); }
.pillar-page .btn-secondary { border-radius: 999px; border-color: var(--pp-moss); color: var(--pp-night); background: transparent; }
.pillar-page .btn-secondary:hover { background: var(--pp-night); color: var(--pp-ivory); border-color: var(--pp-night); }

/* ========================================================================
   SECTIONS AND CARDS
   ======================================================================== */
.pillar-page .pi-sec--tint, .pillar-page .viz.alt, .pillar-page .pi-intro { background: var(--pp-garden); }
.pillar-page .section-title, .pillar-page .pi-sec h2, .pillar-page .viz h2, .pillar-page .prose h2,
.pillar-page .pi-intro h2, .pillar-page .faq-inner h2, .pillar-page .pi-faq h2, .pillar-page main.wrap > h2 {
  color: var(--pp-night); font-weight: 400; letter-spacing: -0.016em;
}
.pillar-page h2 .italic, .pillar-page h3 .italic { font-style: normal; color: inherit; font-weight: inherit; }

/* Card surfaces: paper, a hairline, one soft lift on hover. The selector list
   names the card classes the seven hubs actually use. */
.pillar-page .proj-card, .pillar-page .tool-card, .pillar-page .card, .pillar-page .article-card,
.pillar-page .research-card, .pillar-page .guide-card, .pillar-page .pi-card, .pillar-page .rs-card,
.pillar-page .tc-card, .pillar-page .match-card {
  background: var(--pp-paper); border-color: var(--pp-line);
  transition: transform .45s var(--pp-ease), box-shadow .45s var(--pp-ease), border-color .3s var(--pp-ease);
}
.pillar-page .proj-card:hover, .pillar-page .tool-card:hover, .pillar-page .card:hover, .pillar-page .article-card:hover,
.pillar-page .research-card:hover, .pillar-page .guide-card:hover, .pillar-page .pi-card:hover, .pillar-page .rs-card:hover,
.pillar-page .tc-card:hover, .pillar-page .match-card:hover {
  transform: translateY(-4px); border-color: var(--pp-moss); box-shadow: 0 24px 40px -28px rgba(60,62,74,.45);
}
.pillar-page .proj-card img, .pillar-page .article-card img, .pillar-page .card img { transition: transform 1.1s var(--pp-ease); }
.pillar-page .proj-card:hover img, .pillar-page .article-card:hover img, .pillar-page .card:hover img { transform: scale(1.05); }

/* tables: Ivory header, quiet rules */
.pillar-page table thead th { background: var(--pp-paper); color: var(--pp-mute); }
.pillar-page table td, .pillar-page table th { border-color: var(--pp-line); }

/* category pills on the research hub and similar filters */
.pillar-page [aria-pressed="true"].pill, .pillar-page .pill.is-active, .pillar-page .pill[aria-selected="true"] {
  background: var(--pp-night); border-color: var(--pp-night); color: var(--pp-ivory);
}

/* advisor block: Garden, matching the homepage dialog */
.pillar-page .advisor { background: var(--pp-garden); }
.pillar-page .advisor h2 { color: var(--pp-night); font-weight: 400; }
.pillar-page .advisor .lead, .pillar-page .advisor .points li { color: var(--pp-mute); }
.pillar-page .advisor-form { background: var(--pp-paper); border: 1px solid var(--pp-line); border-radius: 22px; box-shadow: 0 30px 60px -36px rgba(60,62,74,.5); }
.pillar-page .advisor-form input, .pillar-page .advisor-form select, .pillar-page .advisor-form textarea { border-color: var(--pp-moss); border-radius: 12px; }

/* FAQ disclosure rows */
.pillar-page .faq details, .pillar-page .pi-faq details { border-color: var(--pp-line); }
.pillar-page .faq summary, .pillar-page .pi-faq summary { transition: color .25s var(--pp-ease); }

/* ========================================================================
   SCROLL REVEALS (pillar.js tags the elements; nothing hides without JS)
   ======================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .pillar-page [data-pp-reveal] {
    opacity: 0; transform: translateY(26px);
    transition: opacity .9s var(--pp-ease), transform .9s var(--pp-ease);
    transition-delay: calc(var(--pp-i, 0) * 80ms);
  }
  .pillar-page [data-pp-reveal].is-in { opacity: 1; transform: none; }
}

/* ========================================================================
   RESPONSIVE
   ======================================================================== */
@media (max-width: 960px) {
  .pillar-page .page-head::before, .pillar-page .page-head::after { display: none; }
  .pillar-page .page-head .pi-mascot { opacity: .28; height: 140px; }
}
@media (max-width: 640px) {
  .pillar-page .page-head { padding-top: 32px; padding-bottom: 40px; }
  .pillar-page .page-head .pi-mascot {
    opacity: 1; height: 118px;
    filter: drop-shadow(0 12px 12px rgba(60,62,74,.18));
  }
  .pillar-page .page-head h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .pillar-page .page-head .pi-mascot { animation: pp-owl .9s var(--pp-ease) .1s both, pp-bob 5.5s ease-in-out 1.1s infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .pillar-page .page-head .pi-mascot { animation: none; }
}

/* ---- search panel stacking (16 Oct 2026) ---------------------------------
   Every child of .page-head-inner animates in, which gives each one its own
   stacking context. Later siblings (the section tabs) then painted over the
   open results panel. Lift whichever block holds the search, and lift the
   whole head while the panel is open so it also clears the data strip. */
.pillar-page .page-head [data-project-search],
.pillar-page .page-head-inner > *:has([data-project-search]) { position: relative; z-index: 40; }
html.ps-open .pillar-page .page-head { z-index: 950; }
html.ps-open .pillar-page .page-head-inner { z-index: 950; }
.pillar-page .ps-chip[aria-pressed="true"] .n, .pillar-page .ps-chip[aria-pressed="true"] .ps-glyph { color: #C9CBD1; }
/* /new-launches/upcoming/ seats its owl inside the head copy, not at the
   bottom-right corner, so the disc would sit apart from it. */
.pillar-page .page-head:has(.uph-owl)::before, .pillar-page .page-head:has(.uph-owl)::after { display: none; }

/* ---- /editorial-policy/ uses the light .page-header variant ------------- */
.pillar-page .page-header { position: relative; overflow: hidden; background: var(--pp-ivory); border-bottom: 1px solid var(--pp-line); }
.pillar-page .page-header::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  right: 0; bottom: -60px; width: 260px; height: 260px; border-radius: 50%;
  background: var(--pp-garden); box-shadow: inset 0 0 0 1px rgba(182,184,171,.7);
}
.pillar-page .page-header .pi-mascot { z-index: 1; height: min(200px, 80%); right: 30px; filter: drop-shadow(0 18px 16px rgba(60,62,74,.2)); }
.pillar-page .page-header-inner { position: relative; z-index: 2; }
.pillar-page .page-header .page-label { display: none; }
.pillar-page .page-header .page-title {
  font-family: 'Newsreader', Georgia, serif; font-weight: 400; color: var(--pp-night);
  font-size: clamp(2.3rem, 4.2vw, 3.6rem); letter-spacing: -0.022em; line-height: 1.06;
}
.pillar-page .page-header .page-subtitle { color: var(--pp-mute); font-size: 18px; }
@media (prefers-reduced-motion: no-preference) {
  .pillar-page .page-header-inner > * { opacity: 0; animation: pp-up .8s var(--pp-ease) forwards; }
  .pillar-page .page-header-inner > *:nth-child(3) { animation-delay: .08s; }
  .pillar-page .page-header-inner > *:nth-child(4) { animation-delay: .16s; }
  .pillar-page .page-header::before { transform: scale(.6); opacity: 0; animation: pp-pop 1.1s var(--pp-ease) .1s forwards; }
  .pillar-page .page-header .pi-mascot { animation: pp-owl 1s var(--pp-ease) .25s both, pp-bob 5.5s ease-in-out 1.3s infinite; }
}
@media (max-width: 960px) { .pillar-page .page-header::before { display: none; } }
/* project pages: the sticky section bar on the new paper colour */
.pillar-page .pj-secnav { background: rgba(250,249,246,.94); border-color: var(--pp-line); }