/* ============================================================================
   PropertyInsider.sg — homepage (15 Oct 2026, neutral refresh)
   Loaded last on / only. Rules are scoped to .home, .home-page or the
   h-/pv-/mq-/sf- prefixes, so nothing here reaches the rest of the site.

   Palette (WW/Studio swatch chosen by Jamus):
     Ivory    #F3F1EC  page
     Garden   #E0DFD2  alternating bands, quiet fills
     Moss     #B6B8AB  owl disc, rules, borders
     Smoke    #9FA3AD  secondary decoration
     Midnight #3C3E4A  text, buttons, dark bands
   Text tints below are derived to clear WCAG AA on Ivory and on Midnight.

   Motion: one load sequence in the hero, an idle bob on the owl, a slow
   preview marquee, scroll reveals, count-ups and hover zoom on photos.
   All of it switches off under prefers-reduced-motion, and nothing is hidden
   unless JS has run (reveals key off html.js).
   ========================================================================== */

.home, .home-page .footer {
  --c-ivory:    #F3F1EC;
  --c-paper:    #FAF9F6;
  --c-garden:   #E0DFD2;
  --c-moss:     #B6B8AB;
  --c-smoke:    #9FA3AD;
  --c-night:    #3C3E4A;
  --c-night-2:  #4A4D5B;
  --c-ink:      #2E3039;   /* body text on ivory, 12.0:1 */
  --c-mute:     #62656F;   /* secondary on ivory, 5.4:1 */
  --c-on:       #F3F1EC;   /* text on midnight, 9.3:1 */
  --c-on-2:     #C9CBD1;   /* secondary on midnight, 6.4:1 */
  --c-line:     #D6D5C8;
  --f-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --f-sans:  'Source Sans 3', -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.22,.7,.18,1);
}
.home-page { background: #F3F1EC; }
.home { font-family: var(--f-sans); color: var(--c-ink); font-size: 17px; line-height: 1.6; background: var(--c-ivory); }
.home h1, .home h2, .home h3 { font-family: var(--f-serif); font-optical-sizing: auto; font-weight: 400; color: var(--c-night); }
.home a { color: var(--c-night); }
.home :focus-visible { outline: 2px solid var(--c-night); outline-offset: 3px; border-radius: 4px; }
.home .ps-input:focus-visible { outline: none; }

.h-wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }

/* ---- controls ----------------------------------------------------------- */
.h-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--f-sans); font-weight: 600; font-size: 15px; line-height: 1;
  padding: 13px 20px; border-radius: 999px; cursor: pointer; text-decoration: none;
  border: 1px solid transparent;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.h-btn--dark { background: var(--c-night); color: var(--c-on); }
.h-btn--dark:hover { background: #2C2E38; }
.h-btn--line { background: transparent; color: var(--c-night); border-color: var(--c-moss); }
.h-btn--line:hover { background: var(--c-night); color: var(--c-on); border-color: var(--c-night); }
.h-btn:active { transform: translateY(1px); }
.h-link {
  font-weight: 600; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: 2px; transition: background-size .35s var(--ease);
}
.h-link:hover { background-size: 0 1px; background-position: 100% 100%; }

/* ---- sections ----------------------------------------------------------- */
.h-sec { padding: 120px 0; }
.h-sec-head { max-width: 760px; margin-bottom: 56px; }
.h-sec-head h2 { font-size: clamp(2rem, 3.2vw, 2.85rem); line-height: 1.08; letter-spacing: -0.018em; margin-bottom: 16px; }
.h-sec-head p { font-size: 18px; color: var(--c-mute); line-height: 1.6; max-width: 60ch; }
.h-sec-head--split { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: end; }
.h-sec-head--split h2 { margin-bottom: 0; max-width: 15ch; }

/* ========================================================================
   HERO
   ======================================================================== */
/* No overflow clip on the hero: the search results panel has to hang over
   the marquee below it. The contour art is kept inside the box instead. */
.h-hero { position: relative; z-index: 3; background: var(--c-ivory); padding: 72px 0 96px; }
.h-hero::before { /* faint contour lines, like a site plan, behind the art */
  content: ''; position: absolute; right: 0; top: 0; width: 62%; height: 100%;
  background: repeating-radial-gradient(circle at 62% 48%, transparent 0 46px, rgba(159,163,173,.16) 46px 47px);
  -webkit-mask-image: radial-gradient(circle at 62% 48%, #000 0 30%, transparent 62%);
          mask-image: radial-gradient(circle at 62% 48%, #000 0 30%, transparent 62%);
  pointer-events: none;
}
.h-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 40px; align-items: center; min-height: 560px; }
.h-hero h1 {
  font-size: clamp(2.6rem, 4.3vw, 4.15rem); line-height: 1.03; letter-spacing: -0.026em;
  color: var(--c-night); margin-bottom: 26px;
}
.h-line { display: block; overflow: hidden; padding-bottom: .06em; }
.h-line > span { display: inline-block; white-space: nowrap; }
@media (max-width: 640px) {
  .h-line, .h-line > span { display: inline; white-space: normal; overflow: visible; padding: 0; }
  html.js .h-line > span { transform: none !important; animation: none !important; }
}
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  html.js .h-hero h1 { opacity: 0; animation: h-fade .9s var(--ease) .1s forwards; }
}
.h-hero-lede { font-size: 19.5px; line-height: 1.55; color: var(--c-mute); max-width: 44ch; margin-bottom: 36px; }

.h-hero .hs { max-width: 560px; margin: 0 0 22px; }
/* The links under the field animate in, which gives them their own stacking
   context later in the DOM; without a z-index the open results panel sat
   underneath them. */
.h-hero .hs { position: relative; z-index: 30; }
.h-hero-links { position: relative; z-index: 1; }
.h-hero .ps-field { background: var(--c-paper); border: 1px solid var(--c-moss); border-radius: 999px; padding: 0 12px 0 22px; box-shadow: 0 18px 40px -22px rgba(60,62,74,.45); }
.h-hero .ps-field:focus-within { border-color: var(--c-night); box-shadow: 0 0 0 4px rgba(60,62,74,.12), 0 18px 40px -22px rgba(60,62,74,.45); }
.h-hero .ps-icon { color: var(--c-night); }
.h-hero .ps-input { font-size: 17.5px; padding: 19px 0; color: var(--c-ink); }
.h-hero .ps-input::placeholder { color: #80838C; }
.h-hero .ps-panel { color: var(--c-ink); border-radius: 18px; }
.h-hero .ps-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
html.ps-open .h-hero { z-index: 950; }
.h-marquee { position: relative; z-index: 1; }


.h-hero-links { display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 15.5px; }
.h-hero-links a { font-weight: 600; text-decoration: none; color: var(--c-night); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; transition: background-size .35s var(--ease); }
.h-hero-links a:hover { background-size: 0 1px; background-position: 100% 100%; }

.h-hero-art { position: relative; height: 100%; min-height: 520px; display: flex; align-items: center; justify-content: center; }
.h-disc { position: absolute; width: min(440px, 92%); aspect-ratio: 1; border-radius: 50%; background: var(--c-garden); box-shadow: inset 0 0 0 1px rgba(182,184,171,.6); }
.h-ring { position: absolute; width: min(520px, 108%); aspect-ratio: 1; border-radius: 50%; border: 1px dashed var(--c-smoke); opacity: .7; }
.h-owl { position: relative; width: min(380px, 80%); height: auto; filter: drop-shadow(0 26px 22px rgba(60,62,74,.22)); }
.h-owl-m { display: none; }

/* ---- hero motion -------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html.js .h-line > span { transform: translateY(105%); animation: h-rise .9s var(--ease) forwards; }
  html.js .h-line:nth-child(2) > span { animation-delay: .09s; }
  html.js .h-line:nth-child(3) > span { animation-delay: .18s; }
  html.js .h-hero-lede, html.js .h-hero .hs, html.js .h-hero-links { opacity: 0; animation: h-fade .8s var(--ease) forwards; }
  html.js .h-hero-lede { animation-delay: .35s; }
  html.js .h-hero .hs { animation-delay: .45s; }
  html.js .h-hero-links { animation-delay: .55s; }
  html.js .h-disc { transform: scale(.6); opacity: 0; animation: h-pop 1.1s var(--ease) .1s forwards; }
  html.js .h-ring { opacity: 0; animation: h-fade 1.4s var(--ease) .5s forwards, h-spin 60s linear 1.9s infinite; }
  html.js .h-owl { opacity: 0; transform: translateY(40px); animation: h-owl-in 1s var(--ease) .3s forwards, h-bob 5.5s ease-in-out 1.3s infinite; }
}
@keyframes h-rise { to { transform: none; } }
@keyframes h-fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes h-pop  { to { transform: none; opacity: 1; } }
@keyframes h-spin { to { transform: rotate(360deg); } }
@keyframes h-owl-in { to { opacity: 1; transform: none; } }
@keyframes h-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-12px) rotate(-1.2deg); } }

/* ========================================================================
   MARQUEE of upcoming previews
   ======================================================================== */
.h-marquee { background: var(--c-night); color: var(--c-on); overflow: hidden; }
.mq-viewport { display: flex; width: max-content; }
.mq-track { list-style: none; margin: 0; padding: 0; display: flex; flex: none; }
.mq-track li { display: flex; align-items: baseline; gap: 12px; padding: 20px 28px; white-space: nowrap; position: relative; }
.mq-track li::after { /* small diamond between entries */
  content: ''; position: absolute; right: -4px; top: 50%; width: 7px; height: 7px; margin-top: -3px;
  background: var(--c-moss); transform: rotate(45deg);
}
.mq-track a { color: var(--c-on); text-decoration: none; font-family: var(--f-serif); font-size: 1.2rem; }
.mq-track a:hover { text-decoration: underline; text-underline-offset: 4px; }
.mq-track span { font-size: 14px; color: var(--c-on-2); }
@media (prefers-reduced-motion: no-preference) {
  .mq-viewport { animation: mq 55s linear infinite; }
  .h-marquee:hover .mq-viewport, .h-marquee:focus-within .mq-viewport { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .mq-viewport { width: auto; overflow-x: auto; }
  .mq-track[aria-hidden="true"] { display: none; }
}
@keyframes mq { to { transform: translateX(-50%); } }

/* ========================================================================
   SCROLL REVEAL (only when JS has run)
   ======================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html.js .home [data-reveal] {
    opacity: 0; transform: translateY(28px);
    transition: opacity .9s var(--ease), transform .9s var(--ease);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
  html.js .home [data-reveal].is-in { opacity: 1; transform: none; }
}

/* ========================================================================
   SHOWFLAT PREVIEW CARDS
   ======================================================================== */
.h-previews { background: var(--c-ivory); padding-top: 112px; }
.pv-group + .pv-group { margin-top: 72px; }
.pv-q { font-family: var(--f-sans) !important; font-size: 15px; font-weight: 700; color: var(--c-mute) !important; padding-bottom: 14px; border-bottom: 1px solid var(--c-night); margin-bottom: 32px; }
.pv-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 32px; }
.pv-card { display: flex; flex-direction: column; }
.pv-img { display: block; aspect-ratio: 16/10; border-radius: 16px; overflow: hidden; background: var(--c-garden); margin-bottom: 18px; }
.pv-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s var(--ease); }
.pv-card:hover .pv-img img { transform: scale(1.06); }
.pv-when { font-size: 14px; color: var(--c-mute); margin-bottom: 6px; }
.pv-when span { font-family: var(--f-serif); font-size: 1.15rem; color: var(--c-night); margin-right: 4px; }
.pv-name { font-size: 1.6rem; line-height: 1.12; letter-spacing: -0.012em; margin-bottom: 6px; }
.pv-name a { text-decoration: none; }
.pv-name a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.pv-facts { font-size: 14.5px; color: var(--c-mute); margin-bottom: 10px; }
.pv-est { font-size: 15.5px; font-weight: 600; color: var(--c-night); font-variant-numeric: tabular-nums lining-nums; margin-bottom: 18px; }
.pv-card .h-btn { align-self: flex-start; margin-top: auto; }
.pv-more { margin-top: 56px; font-size: 16px; color: var(--c-mute); }
.pv-more a { font-weight: 600; margin-left: 6px; text-underline-offset: 4px; }

/* ========================================================================
   WHAT SETS US APART (dark band)
   ======================================================================== */
.h-why { background: var(--c-night); color: var(--c-on); }
.h-why .h-sec-head h2 { color: var(--c-on); max-width: 18ch; }
.h-why .h-sec-head p { color: var(--c-on-2); }
.h-why-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(243,241,236,.18); }
.h-why-grid li { padding: 36px 28px 8px 0; display: flex; flex-direction: column; }
.h-why-grid li + li { padding-left: 28px; border-left: 1px solid rgba(243,241,236,.12); }
.h-fig { font-family: var(--f-serif); font-size: clamp(2.8rem, 4.2vw, 3.9rem); line-height: 1; letter-spacing: -0.02em; color: var(--c-on); margin-bottom: 22px; font-variant-numeric: lining-nums tabular-nums; }
.h-why-grid h3 { color: var(--c-on); font-size: 1.3rem; line-height: 1.2; margin-bottom: 10px; }
.h-why-grid p:not(.h-fig) { font-size: 15.5px; line-height: 1.6; color: var(--c-on-2); margin-bottom: 18px; }
.h-why-grid .h-link { color: var(--c-on); margin-top: auto; align-self: flex-start; font-size: 15px; }

/* ========================================================================
   HOMEWORK
   ======================================================================== */
.h-homework { background: var(--c-garden); }
.h-hw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.h-hw-col h3 { font-family: var(--f-sans); font-size: 15px; font-weight: 700; color: var(--c-mute); margin-bottom: 6px; padding-bottom: 14px; border-bottom: 1px solid var(--c-night); }
.h-hw-col ul { list-style: none; margin: 0; padding: 0; }
.h-hw-col li { border-bottom: 1px solid #C9C8BA; }
.h-hw-col a { display: block; padding: 16px 0 0; font-family: var(--f-serif); font-size: 1.3rem; line-height: 1.2; color: var(--c-night); text-decoration: none; transition: transform .35s var(--ease); }
.h-hw-col a:hover { transform: translateX(6px); }
.h-hw-col span { display: block; font-size: 14.5px; color: var(--c-mute); padding: 4px 0 16px; }

/* ========================================================================
   MAP (DOM contract with /assets/pipeline-map.js)
   ======================================================================== */
.h-map { background: var(--c-ivory); }
.home .pipe-split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: stretch; }
.home .pipe-split.no-map { grid-template-columns: 1fr; }
.home .pipe-map-wrap { height: auto; position: relative; border-radius: 20px; overflow: hidden; background: var(--c-garden); min-height: 520px; border: 1px solid var(--c-line); }
.home #pipeMap { position: absolute; inset: 0; }
.home .map-legend { position: absolute; left: 14px; bottom: 14px; z-index: 500; display: flex; gap: 14px; background: rgba(250,249,246,.94); border: 1px solid var(--c-line); border-radius: 999px; padding: 8px 14px; font-size: 13px; }
.home .map-legend span { display: inline-flex; align-items: center; gap: 6px; color: var(--c-ink); }
.home .map-legend .lg-ico { width: 18px; height: 18px; }
.home .pipe-list .pipe-list-head { font-family: var(--f-sans); font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--c-mute); margin: 0; padding-bottom: 14px; border-bottom: 1px solid var(--c-night); }
.home #pipeFeatured { list-style: none; margin: 0 0 24px; padding: 0; }
.home #pipeFeatured li { border-bottom: 1px solid var(--c-line); border-top: 0; }
.home #pipeFeatured a { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; grid-template-areas: "dot name meta"; margin: 0; border-radius: 0; gap: 12px; align-items: baseline; padding: 13px 0; text-decoration: none; color: var(--c-night); transition: padding .3s var(--ease); }
.home #pipeFeatured a:hover, .home #pipeFeatured a:focus-visible { background: transparent; padding-left: 6px; }
.home .pf-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c-smoke); align-self: center; margin: 0; }
.home .pf-name { font-family: var(--f-serif); font-size: 1.12rem; font-weight: 400; line-height: 1.25; color: var(--c-night); }
.home .pf-meta { font-size: 13.5px; color: var(--c-mute); white-space: nowrap; }
.home .pipe-list > .h-link { display: inline-block; align-self: flex-start; margin: 0; border-radius: 0; padding: 0 0 2px; }
.home .pipe-popup .pp-name { display: block; font-family: var(--f-serif); font-size: 17px; color: var(--c-night); text-decoration: none; margin: 2px 0; }

/* ========================================================================
   METHOD
   ======================================================================== */
.h-method { background: var(--c-paper); }
.h-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); counter-reset: step; position: relative; }
.h-steps::before { /* the line that draws across as the section arrives */
  content: ''; position: absolute; left: 0; right: 0; top: 23px; height: 1px; background: var(--c-night);
  transform-origin: left; transform: scaleX(1);
}
.h-steps li { counter-increment: step; position: relative; padding: 0 24px 0 0; }
.h-steps li::before {
  content: counter(step); position: relative; z-index: 1; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%; margin-bottom: 22px;
  font-family: var(--f-serif); font-size: 1.3rem; color: var(--c-night);
  background: var(--c-paper); border: 1px solid var(--c-night);
}
.h-steps h3 { font-size: 1.28rem; line-height: 1.2; margin-bottom: 8px; }
.h-steps p { font-size: 15px; line-height: 1.55; color: var(--c-mute); }
.h-method-foot { margin-top: 52px; padding-top: 22px; border-top: 1px solid var(--c-line); font-size: 16px; color: var(--c-mute); }
.h-method-foot .h-link { margin-left: 6px; }
@media (prefers-reduced-motion: no-preference) {
  html.js .h-steps[data-reveal] { opacity: 1; transform: none; }
  html.js .h-steps::before { transform: scaleX(0); transition: transform 1.6s var(--ease) .15s; }
  html.js .h-steps.is-in::before { transform: scaleX(1); }
  html.js .h-steps li { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  html.js .h-steps.is-in li { opacity: 1; transform: none; }
  html.js .h-steps.is-in li:nth-child(2) { transition-delay: .25s; }
  html.js .h-steps.is-in li:nth-child(3) { transition-delay: .5s; }
  html.js .h-steps.is-in li:nth-child(4) { transition-delay: .75s; }
  html.js .h-steps.is-in li:nth-child(5) { transition-delay: 1s; }
}

/* ========================================================================
   RESEARCH
   ======================================================================== */
.h-research { background: var(--c-ivory); }
.h-research .h-sec-head--split p { text-align: right; }
.h-rs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
.h-rs { display: block; text-decoration: none; color: var(--c-ink); }
.h-rs-img { display: block; aspect-ratio: 16/10; border-radius: 16px; overflow: hidden; margin-bottom: 18px; background: var(--c-garden); }
.h-rs-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s var(--ease); }
.h-rs:hover .h-rs-img img { transform: scale(1.06); }
.h-rs-date { font-size: 14px; color: var(--c-mute); }
.h-rs h3 { font-size: 1.45rem; line-height: 1.18; letter-spacing: -0.01em; margin: 6px 0 8px; }
.h-rs p { font-size: 15.5px; color: var(--c-mute); line-height: 1.55; }
.h-desk { margin-top: 72px; padding-top: 22px; border-top: 1px solid var(--c-line); display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; align-items: baseline; }
.h-desk p { font-size: 15px; font-weight: 700; color: var(--c-mute); }
.h-desk ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 36px; }
.h-desk a { font-size: 16px; font-weight: 600; text-underline-offset: 4px; }

/* ---- footer, matched to the page ---------------------------------------- */
.home-page .footer { background: var(--c-night); }

/* ========================================================================
   SHOWFLAT DIALOG
   ======================================================================== */
dialog.sf { border: 0; padding: 0; background: transparent; max-width: 560px; width: calc(100% - 32px); max-height: calc(100dvh - 32px); margin: auto; font-family: 'Source Sans 3', sans-serif; color: #2E3039; }
dialog.sf::backdrop { background: rgba(46,48,57,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
html.sf-open { overflow: hidden; }
.sf .sf-form {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  background: #FAF9F6; border-radius: 22px; padding: 32px 32px 26px; box-shadow: 0 40px 90px -30px rgba(46,48,57,.6);
  overflow-y: auto; max-height: calc(100dvh - 32px);
}
@media (prefers-reduced-motion: no-preference) {
  dialog.sf[open] .sf-form { animation: sf-in .45s cubic-bezier(.22,.7,.18,1); }
  dialog.sf[open]::backdrop { animation: sf-fade .35s ease; }
}
@keyframes sf-in { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes sf-fade { from { opacity: 0; } }
.sf .sf-full { grid-column: 1 / -1; }
.sf .sf-close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: #E0DFD2; color: #3C3E4A; font-size: 22px; line-height: 1; cursor: pointer; transition: transform .3s; }
.sf .sf-close:hover { transform: rotate(90deg); }
.sf #sf-title { grid-column: 1 / -1; font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: 1.9rem; line-height: 1.1; letter-spacing: -0.012em; color: #3C3E4A; padding-right: 40px; }
.sf .sf-lede { grid-column: 1 / -1; font-size: 15.5px; color: #62656F; margin-top: -6px; }
.sf .sf-form label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #2E3039; }
.sf .sf-form label span { font-weight: 400; color: #62656F; }
.sf .sf-form input[type=text], .sf .sf-form input[type=tel], .sf .sf-form input[type=email], .sf .sf-form select, .sf .sf-form textarea {
  width: 100%; font-family: inherit; font-size: 16px; color: #2E3039;
  background: #fff; border: 1px solid #B6B8AB; border-radius: 12px; padding: 12px 13px;
}
.sf .sf-form textarea { min-height: 0; resize: vertical; }
.sf .sf-form input:focus-visible, .sf .sf-form select:focus-visible, .sf .sf-form textarea:focus-visible { outline: 2px solid #3C3E4A; outline-offset: 1px; border-color: #3C3E4A; }
.sf .sf-hint { display: block; font-size: 13px; color: #62656F; margin-top: 5px; }
.sf .sf-consent { display: flex; gap: 10px; align-items: flex-start; }
.sf .sf-consent input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: #3C3E4A; }
.sf .sf-form .sf-consent label { font-size: 13.5px; font-weight: 400; line-height: 1.5; color: #62656F; margin: 0; }
.sf .sf-form .sf-submit { margin-top: 4px; width: 100%; padding: 16px 22px; font-size: 16px; background: #3C3E4A; color: #F3F1EC; border: 0; border-radius: 999px; }
.sf .sf-form .sf-submit:hover { background: #2C2E38; }
.sf .sf-form .sf-submit[disabled] { opacity: .65; cursor: wait; }
.sf .sf-fine { font-size: 12.5px; line-height: 1.5; color: #62656F; }
.sf .advisor-status { grid-column: 1 / -1; margin-top: 0 !important; }

/* ========================================================================
   RESPONSIVE
   ======================================================================== */
@media (max-width: 1080px) {
  .pv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h-why-grid li:nth-child(3) { padding-left: 0; border-left: 0; }
  .h-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 36px; }
  .h-steps::before { display: none; }
}
@media (max-width: 860px) {
  .h-sec { padding: 84px 0; }
  .h-sec-head--split { grid-template-columns: 1fr; gap: 14px; }
  .h-sec-head--split h2 { max-width: none; }
  .h-research .h-sec-head--split p { text-align: left; }
  .h-hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .h-hero-art { display: none; }
  .h-owl-m { display: block; width: 150px; height: auto; margin: 0 0 18px -6px; filter: drop-shadow(0 14px 12px rgba(60,62,74,.18)); }
  .h-hw-grid { grid-template-columns: 1fr; gap: 40px; }
  .home .pipe-split { grid-template-columns: 1fr; }
  .home .pipe-map-wrap { min-height: 380px; }
  .h-rs-grid { grid-template-columns: 1fr; gap: 44px; }
  .h-desk { grid-template-columns: 1fr; gap: 12px; }
  @media (prefers-reduced-motion: no-preference) {
    html.js .h-owl-m { opacity: 0; animation: h-owl-in .9s var(--ease) .1s forwards, h-bob 5.5s ease-in-out 1.1s infinite; transform: translateY(20px); }
  }
}
@media (max-width: 640px) {
  .home { font-size: 16px; }
  .h-wrap { padding: 0 16px; }
  .h-hero { padding: 36px 0 60px; }
  .h-hero h1 { font-size: clamp(2.35rem, 10.5vw, 3rem); margin-bottom: 18px; }
  .h-hero-lede { font-size: 17px; margin-bottom: 26px; }
  .h-hero .ps-input { font-size: 16px; padding: 16px 0; }
  .mq-track li { padding: 16px 22px; }
  .mq-track a { font-size: 1.05rem; }
  .pv-grid { grid-template-columns: 1fr; gap: 44px; }
  .pv-card .h-btn { align-self: stretch; }
  .h-why-grid { grid-template-columns: 1fr; }
  .h-why-grid li, .h-why-grid li + li { padding: 28px 0 8px; border-left: 0; border-top: 1px solid rgba(243,241,236,.12); }
  .h-why-grid li:first-child { border-top: 0; }
  .h-steps { grid-template-columns: 1fr; row-gap: 0; }
  .h-steps li { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 16px; padding: 0 0 26px; }
  .h-steps li::before { grid-row: 1 / span 2; margin: 0; }
  .sf .sf-form { grid-template-columns: 1fr; padding: 26px 20px 20px; }
  .home .map-legend { gap: 10px; font-size: 12px; }
}