/* ============================================================
   realestate.css  ·  AI for Real Estate (dark institutional arm)
   Linked AFTER styles.css from real-estate.html ONLY.
   Safe to override global classes here — no other page loads this.
   Reuses shared v3 components from styles.css: .callout, .tline,
   .cust, .band-accent, plus tokens (--teal, --deep*, --snow*, --exp,
   --sans, --mono, --e-out, --rule-d).
   Tight flow: hero -> 3 workflow callouts -> structured-data
   timeline -> grounded proof band -> gated scrolling customers ->
   security-is-central band -> contact.
   ============================================================ */

/* ----------------------------------------------------------------
   0 · HERO  ·  AI-centric, short. Soft teal depth + faint node grid,
   text fills the column (full-width, no half-width CI bug).
   ---------------------------------------------------------------- */
.phero{
  background:
    radial-gradient(58% 90% at 84% -12%, rgba(0,184,148,.14), transparent 60%),
    radial-gradient(50% 80% at -6% 8%, rgba(79,134,198,.07), transparent 62%),
    var(--deep);
}
.phero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(circle at center, rgba(0,184,148,.16) 1px, transparent 1.4px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(120% 100% at 90% 0%, #000 0%, transparent 58%);
  mask-image:radial-gradient(120% 100% at 90% 0%, #000 0%, transparent 58%);
}
.phero .wrap{position:relative;z-index:1;}
/* ensure phero canvas sits behind the text wrap */
.phero > canvas[aria-hidden]{z-index:0;}
/* hero is now eyebrow + headline + CTAs (sigrule + lead removed). Widen the
   headline so it runs across more of the content column and lines up with the
   cards below, and balance the gap down to the CTAs. */
.phero h1{max-width:min(100%,30ch);margin:1.1rem 0 1.6rem;}
.phero .ctas{display:flex;gap:1rem;flex-wrap:wrap;margin-top:0;}

/* headline emphasis — solid bright cyan, no gradient */
.phero h1 .em,.sec h2 .em{color:#3ff0cf;}

/* faint node texture top-right on dark .alt sections (depth, not flatness) */
.sec.alt{position:relative;overflow:hidden;}
.sec.alt::before{
  content:"";position:absolute;top:0;right:0;width:min(640px,60%);height:100%;z-index:0;pointer-events:none;opacity:.45;
  background-image:radial-gradient(circle at center, rgba(0,184,148,.10) 1px, transparent 1.5px);
  background-size:40px 40px;
  -webkit-mask-image:radial-gradient(90% 80% at 100% 0%, #000, transparent 70%);
  mask-image:radial-gradient(90% 80% at 100% 0%, #000, transparent 70%);
}
.sec.alt > .wrap{position:relative;z-index:1;}

/* ----------------------------------------------------------------
   1 · WORKFLOWS  ·  3 unified hover-open callouts, near the top.
   The shared .callout component carries the interaction; here we
   just give the section breathing room and a soft top glow so the
   hook reads as the centrepiece.
   ---------------------------------------------------------------- */
/* Light break — demos section on a near-white ground to interrupt the all-dark flow */
.demos-sec {
  background: var(--off);
  color: var(--ink);
  border-top: 1px solid var(--rule-l);
  border-bottom: 1px solid var(--rule-l);
}
.demos-sec .sec-head h2 { color: var(--ink); }
.demos-sec .sec-head .eyebrow { color: var(--teal-deep); }
.demos-sec .sec-head .muted { color: var(--ink-soft); }
.demos-sec .sec-head h2{margin:1rem 0 1rem;}

/* ----------------------------------------------------------------
   SECTION-CALLOUT INTRO PARAGRAPHS  ·  alignment fix.
   The intro line under each eyebrow + heading was wrapping too early on a
   narrow measure, so its right edge did not line up with the cards / grid
   below it. Widen every section-callout intro on this page to one shared,
   generous measure that tracks the content column, capped so it can never
   overflow at any width (min(100%, 62ch)). Left edge already aligns with
   the section content (same .wrap), so the right edges now line up too.
   ---------------------------------------------------------------- */
.secband .lead{max-width:min(100%,62ch);}
/* demos intro + moat intro — full content-column width, no short cut */
.demos-sec .sec-head .muted,
.moat-sec .sec-head .muted{max-width:100%;}

/* ----------------------------------------------------------------
   1a · WORKFLOW CARDS — bottom-anchored hover-reveal (client CodePen).
   AT REST: only the big icon + the mono tag (ASK / REPORTING / SIGNALS)
   show, sitting at the BOTTOM of the card. Nothing else. A clean tool
   tile. ON HOVER / FOCUS the whole content block RISES: the icon + tag
   travel up and align together at the TOP, then the title, paragraph and
   "Live examples ->" link reveal below them (fade + slight slide). The
   card height is FIXED, so the rise happens inside reserved space — the
   page NEVER reflows and neighbouring cards never move. A soft teal
   spotlight pools up from the bottom edge on hover (kept inside the card
   so overflow:hidden never clips it). This block overrides the shared
   .callout / .demo-card / .co-* rules from styles.css for .wf-card only.

   Structure (set in real-estate.html):
     .wf-card > .wf-body > [ .wf-head > (.wfic + .co-tag) , h3, .co-more ]
   .wf-body is the travelling block; .wf-head keeps icon+tag glued.
   app.js still finds .wfic via b.querySelector('.wfic') and reads --ac.
   ---------------------------------------------------------------- */

/* on-brand accents: remap the inherited a-* classes to the cyan/teal
   family so the dark/institutional arm stays on palette. app.js reads
   --ac off the card for the modal accent, so this also tints the modal. */
/* per-card: accent token + dark fallback behind the background image */
.wf-callouts .wf-card.a-violet{--ac:#3ff0cf;background:#0a1218;}
.wf-callouts .wf-card.a-teal  {--ac:#00b894;background:#091620;}
.wf-callouts .wf-card.a-grass {--ac:#2fd9b4;background:#091a18;}
/* per-card background images (Higgsfield generated, Seedream 4.5) */
.wf-callouts .wf-card.a-violet::before{background-image:url(assets/images/cards/re-ask.svg);}
.wf-callouts .wf-card.a-teal::before  {background-image:url(assets/images/cards/re-reports.svg);}
.wf-callouts .wf-card.a-grass::before {background-image:url(assets/images/cards/re-signals.svg);}

.wf-callouts{margin-top:clamp(2.4rem,5vw,3.6rem);overflow:visible;}

/* the tile: lifestyle photo fills card at rest; dark overlay + content reveal on hover */
.demos-sec .callout.demo-card.wf-card{
  height:clamp(330px,38vw,380px);min-height:0;overflow:hidden;padding:0;
  border:1px solid var(--rule-d);border-radius:14px;
  transition:transform .5s var(--e-out),border-color .45s var(--e-out),box-shadow .5s var(--e-out),background .5s var(--e-out);
}
.wf-card:hover,.wf-card:focus-visible{
  transform:translateY(-5px);
  border-color:#3ff0cf;outline:none;
  box-shadow:
    0 30px 64px -34px rgba(0,0,0,.66),
    0 0 0 1px color-mix(in srgb,var(--ac) 30%,transparent),
    0 0 46px -6px color-mix(in srgb,var(--ac) 36%,transparent);
}
/* image layer — zooms gently on hover (CodePen card-hover-interactions pattern) */
.wf-card::before{
  content:'';display:block;
  position:absolute;top:0;left:0;right:auto;
  width:100%;height:110%;
  background-size:cover;background-position:center;
  transform:none;transform-origin:center;
  transition:transform calc(700ms * 1.5) cubic-bezier(.19,1,.22,1);
  pointer-events:none;z-index:0;
}
/* dark overlay — same for all cards, fades in on hover */
.wf-card::after{
  content:'';display:block;
  position:absolute;inset:0;
  background:rgba(10,18,26,.90);
  opacity:0;
  transition:opacity 500ms ease;
  pointer-events:none;z-index:1;
}
@media(hover:hover){
  .wf-card:hover::before,.wf-card:focus-visible::before{transform:scale(1.05);}
  .wf-card:hover::after,.wf-card:focus-visible::after{opacity:1;}
}

/* ---- THE CONTENT BLOCK -------------------------------------------- */
/* Hidden below card at rest; slides up fully to fill card on hover */
.wf-card .wf-body{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(1.6rem,2.4vw,2rem) clamp(1.4rem,2vw,1.8rem);
  transform:translateY(100%);
  transition:transform .55s var(--e-out);
  will-change:transform;
}
.wf-card:hover .wf-body,.wf-card:focus-visible .wf-body{transform:translateY(0);}

/* head = icon + tag, glued together so they travel as one unit */
.wf-card .wf-head{display:flex;flex-direction:column;align-items:center;}

/* ---- THE BIG ICON -------------------------------------------------- */
/* un-boxed line-art mark, glowing soft cyan. Lifts a touch on hover. */
.wf-card .wfic.wf-ic{
  width:auto;height:auto;margin:0 0 .9rem;padding:0;
  display:flex;align-items:center;justify-content:center;
  border:0;background:none;border-radius:0;color:var(--ac);
  filter:drop-shadow(0 6px 20px color-mix(in srgb,var(--ac) 32%,transparent));
  transform:translateY(0) scale(1);
  transition:transform .5s var(--e-out),filter .5s var(--e-out),color .4s var(--e-out);
  will-change:transform;
}
.wf-card .wfic.wf-ic svg{width:clamp(64px,7vw,84px);height:clamp(64px,7vw,84px);overflow:visible;}
.wf-card:hover .wfic.wf-ic,
.wf-card:focus-visible .wfic.wf-ic{
  transform:scale(1.05);color:#3ff0cf;
  filter:drop-shadow(0 14px 28px color-mix(in srgb,var(--ac) 50%,transparent));
}

/* ---- TAG — part of the resting "tool" state (icon + tag at bottom) -- */
.wf-card .co-tag{display:block;color:var(--ac);transition:color .4s var(--e-out);}
.wf-card:hover .co-tag,.wf-card:focus-visible .co-tag{color:#3ff0cf;}

/* ---- TITLE — hidden at rest (below the fold), revealed on hover ----- */
.wf-card h3{
  margin:1.1rem 0 0;font-size:clamp(1.12rem,1.4vw,1.24rem);color:#fff;
  opacity:0;transition:opacity .42s var(--e-out) .04s;
}
.wf-card:hover h3,.wf-card:focus-visible h3{opacity:1;}

/* ---- DESCRIPTION + LINK — hidden at rest, reveal on hover ---------- */
.wf-card .co-more{
  position:static;left:auto;right:auto;top:auto;z-index:auto;
  width:100%;background:none;border:0;border-radius:0;box-shadow:none;margin:0;
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .42s var(--e-out) .08s,transform .42s var(--e-out) .08s;
}
.wf-card:hover .co-more,.wf-card:focus-visible .co-more{
  opacity:1;transform:translateY(0);pointer-events:auto;
}
.wf-card .co-in{min-height:0;}
.wf-card .co-in p{font-size:.92rem;line-height:1.55;color:var(--snow-soft);margin:.9rem 0 0;max-width:34ch;margin-inline:auto;}
.wf-card .co-go{display:inline-flex;align-items:center;gap:.4em;margin-top:1rem;
  font-weight:600;font-size:.9rem;color:var(--ac);}
.wf-card:hover .co-go,.wf-card:focus-visible .co-go{color:#3ff0cf;}
.wf-card .co-go .arw{transition:transform .35s var(--e-out);}
.wf-card:hover .co-go,.wf-card:focus-visible .co-go{text-decoration:underline;text-underline-offset:3px;}
.wf-card:hover .co-go .arw,.wf-card:focus-visible .co-go .arw{transform:translateX(5px);}

/* mobile / responsive: single column, icons scale down a touch.
   --rest is re-tuned to the smaller head so the resting tile still shows
   only icon + tag at the bottom, no reflow on hover. */
@media (max-width:900px){
  .wf-callouts{margin-top:2.6rem;}
  .demos-sec .callout.demo-card.wf-card{height:clamp(300px,62vw,340px);}
}
@media (max-width:560px){
  .demos-sec .callout.demo-card.wf-card{height:300px;}
  .wf-card .wfic.wf-ic svg{width:60px;height:60px;}
  .wf-card .wfic.wf-ic{margin-bottom:.7rem;}
}

/* touch / no-hover devices: no hover to trigger the rise, so show the
   full content in place (body un-shifted, title + copy visible). */
@media (hover:none){
  .wf-card::after{opacity:.88;}
  .wf-card .wf-body{transform:translateY(0);}
  .wf-card h3{opacity:1;}
  .wf-card .co-more{opacity:1;transform:none;pointer-events:auto;}
}

/* reduced motion: full content shown by default, no rise/fade animation,
   no spotlight transitions. Hooks + accent colour are unaffected. */
@media (prefers-reduced-motion:reduce){
  .demos-sec .callout.demo-card.wf-card,
  .wf-card .wf-body,.wf-card .wfic.wf-ic,.wf-card .co-tag,
  .wf-card h3,.wf-card .co-more,.wf-card::before,.wf-card::after{transition:none;}
  .wf-card::after{opacity:.88;}
  .wf-card .wf-body{transform:translateY(0);}
  .wf-card h3{opacity:1;}
  .wf-card .co-more{opacity:1;transform:none;pointer-events:auto;}
  .wf-card:hover{transform:none;}
  .wf-card:hover .wfic.wf-ic,.wf-card:focus-visible .wfic.wf-ic{transform:none;}
}

/* ----------------------------------------------------------------
   2 · STRUCTURED-DATA MOAT  ·  the .tline does the work. Just tidy
   the heading rhythm so it is tight, not a wall of text.
   ---------------------------------------------------------------- */
.moat-sec .sec-head{max-width:100%;}
.moat-sec .sec-head h2{margin:1rem 0 1rem;}

/* animated progress connector across the numbered dots (1 -> 2 -> 3).
   The shared .tline::before is the faint static rail; this ::after is a
   bright teal fill that DRAWS from dot 1 to dot 3 when the section scrolls
   into view (.is-drawn added by the IntersectionObserver in real-estate.html).
   Aligned to the same geometry as .tline::before (top:19px, 6% insets) so it
   travels exactly along the dot row. */
.tline.tline-anim{position:relative;}
.tline.tline-anim::after{
  content:"";position:absolute;top:19px;left:6%;right:6%;height:2px;z-index:0;
  transform-origin:left center;transform:scaleX(0);
  background:linear-gradient(90deg,var(--teal-deep),var(--teal) 60%,#3ff0cf);
  box-shadow:0 0 10px -1px color-mix(in srgb,var(--teal) 55%,transparent);
  transition:transform 1.15s var(--e-out);
}
.tline.tline-anim.is-drawn::after {
  transform: scaleX(1);
  background: linear-gradient(to right, var(--teal-deep), var(--teal), #3ff0cf, var(--teal-deep));
  background-size: 200% 100%;
  animation: connectorPulse 2.8s linear infinite;
}
@keyframes connectorPulse {
  0%   { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}
/* step dot breathing */
.tline.tline-anim.is-drawn .tdot {
  animation: dotBreath 2s ease-in-out infinite;
}
@keyframes dotBreath {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,184,148,.4), 0 0 0 0 rgba(0,184,148,.2); }
  50%       { box-shadow: 0 0 0 6px rgba(0,184,148,0), 0 0 0 12px rgba(0,184,148,0); }
}
/* keep the dots above the drawing line */
.tline.tline-anim .tstep{z-index:1;}
@media (max-width:760px){
  /* single column: the shared ::before rail is hidden, so hide the
     animated connector too (no horizontal row to travel along). */
  .tline.tline-anim::after{display:none;}
}
@media (prefers-reduced-motion:reduce){
  /* show the connector fully drawn, no animation */
  .tline.tline-anim::after{transition:none;transform:scaleX(1);animation:none;}
  .tline.tline-anim.is-drawn .tdot{animation:none;}
}

/* ----------------------------------------------------------------
   3 · GROUNDED PROOF BAND  ·  band-accent contrast strip, one quote.
   ---------------------------------------------------------------- */
.proof-band .sec-head,.proof-band h2{max-width:24ch;}
.proof-band .proof-claim{margin:1rem 0 1.2rem;}
.proof-band .lead{max-width:min(100%,62ch);}  /* widened to align with section content (see intro-paragraph rule) */
.proof-band .proofq{margin:clamp(2.2rem,5vw,3.2rem) 0 0;max-width:64ch;text-align:left;}
.proof-band .proofq .mk{display:block;margin-bottom:.8rem;}
.proof-band .proof-note{margin-top:1.4rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--snow-soft);}

/* ----------------------------------------------------------------
   4 · SCROLLING CUSTOMERS  ·  gated. The shared .cust strip handles
   the marquee + hover review card. Here we add the sign-off gate
   (dim pending logos + a "pending" tag) and tidy the note.
   ---------------------------------------------------------------- */
.cust-sec{padding-bottom:clamp(3.5rem,7vw,6rem);}
.cust-sec .cust{margin-top:.4rem;}

/* gate: pending logos dim until the client clears them (Argo sees site first) */
.cust-item[data-cleared="pending"]{cursor:default;}
.cust-item[data-cleared="pending"] img{opacity:.22;filter:brightness(0) invert(1) grayscale(1);}
.cust-item[data-cleared="pending"]:hover img{opacity:.34;transform:none;}
.cust-item[data-cleared="pending"]::after{
  content:"Pending sign-off";position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);
  white-space:nowrap;font-family:var(--mono);font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;color:var(--warn);}
/* the cleared client still reads as live (full opacity on hover handled by component) */
.cust-item[data-cleared="yes"] img{opacity:.7;}

.cust-note{margin-top:clamp(1.6rem,3vw,2.2rem);font-family:var(--mono);font-size:.74rem;line-height:1.6;color:var(--snow-soft);max-width:70ch;}

/* ----------------------------------------------------------------
   5 · SECURITY-IS-CENTRAL BAND  ·  glow + a confident divider.
   ---------------------------------------------------------------- */
.secband{position:relative;overflow:hidden;
  background:
    radial-gradient(60% 110% at 8% 0%, rgba(0,184,148,.08), transparent 58%),
    var(--deep);
  border-top:1px solid var(--rule-d);}
.secband::after{content:"";position:absolute;top:0;right:0;width:min(560px,55%);height:100%;pointer-events:none;opacity:.4;
  background-image:radial-gradient(circle at center, rgba(0,184,148,.1) 1px, transparent 1.5px);
  background-size:38px 38px;
  -webkit-mask-image:radial-gradient(90% 80% at 100% 50%, #000, transparent 70%);
  mask-image:radial-gradient(90% 80% at 100% 50%, #000, transparent 70%);}
.secband > .wrap{position:relative;z-index:1;}
.secband h2{margin:1rem 0 1.2rem;}
.secband .lead{max-width:min(100%,62ch);}  /* widened to align with section content (see intro-paragraph rule) */

/* ----------------------------------------------------------------
   6 · CONTACT  ·  warmer glow, comfortable measure.
   ---------------------------------------------------------------- */
.contact h2{margin:1rem 0 0;}
.contact .glow{background:radial-gradient(60% 70% at 50% -4%, rgba(0,184,148,.18), transparent 72%);}
.contact .lead{max-width:60ch;}

/* ----------------------------------------------------------------
   7 · reduced motion  ·  the shared components already handle their
   own reduced-motion; just kill the hero texture animation hooks.
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .phero::after{display:none;}
  .wf-card:hover{filter:none;}
}

/* ----------------------------------------------------------------
   8 · MERGED PROOF + CUSTOMERS SECTION
   ---------------------------------------------------------------- */
.proof-cust-sec{
  background:var(--deep-2);
  border-top:1px solid var(--rule-d);
  border-bottom:1px solid var(--rule-d);
}
.proof-cust-sec .lead{max-width:min(100%,78ch);margin-top:1.2rem;color:var(--snow-soft);}

/* cycling quote spotlight */
.qs{
  margin-top:clamp(2.4rem,5vw,3.6rem);
  border-top:1px solid var(--rule-d);
  padding-top:clamp(2rem,4vw,2.8rem);
  text-align:center;
}
.qs-inner{
  max-width:68ch;margin:0 auto;
  transition:opacity .22s var(--e-out),transform .22s var(--e-out);
}
.qs.qs-fade .qs-inner{opacity:0;transform:translateY(6px);}
.qs-mark{
  display:block;font-family:var(--exp);font-size:clamp(2.2rem,3.5vw,3rem);
  color:#3ff0cf;line-height:1;margin-bottom:.5rem;opacity:.65;
}
.qs-text{
  font-size:clamp(1.05rem,1rem + .7vw,1.28rem);line-height:1.6;
  color:var(--snow);font-style:italic;
}
.qs-who{
  display:block;margin-top:1.1rem;
  font-family:var(--mono);font-size:.73rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--snow-soft);
}
.qs-who strong{color:#3ff0cf;font-style:normal;}

/* logo strip inside the merged section */
.proof-cust-sec .cust{
  margin-top:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--rule-d);
  padding-top:clamp(1.2rem,2.5vw,1.8rem);
}
/* override old data-cleared dimming — all logos show equally */
.cust-item[data-cleared="pending"]{cursor:default;}
.cust-item[data-cleared="pending"] img{opacity:.55;filter:brightness(0) invert(1) grayscale(1);}
.cust-item[data-cleared="pending"]:hover img{opacity:.34;transform:none;}
.cust-item[data-cleared="pending"]::after{display:none;}
/* clean logo hover for the new section */
.proof-cust-sec .cust-item{
  opacity:.55;transition:opacity .35s var(--e-out),transform .35s var(--e-out);
  cursor:pointer;
}
.proof-cust-sec .cust-item:hover,.proof-cust-sec .cust-item:focus-visible{
  opacity:1;transform:scale(1.08);
}

/* ----------------------------------------------------------------
   9 · SCROLL SNAP  ·  hero → demos → moat → proof → security
   ---------------------------------------------------------------- */
@media (min-width:821px) and (prefers-reduced-motion:no-preference){
  html{scroll-snap-type:y proximity;scroll-padding-top:72px;}
  .phero         {scroll-snap-align:start;}
  .demos-sec     {scroll-snap-align:start;}
  .moat-sec      {scroll-snap-align:start;}
  .proof-cust-sec{scroll-snap-align:start;}
  .secband       {scroll-snap-align:start;}
  .contact       {scroll-snap-align:start;}
}