/* ============================================================
   Crestmark Realty - v9 layer (build_v9.py, 2026-10-14)
   Loaded AFTER cinematic.css (the v8 layer) on every page.
   Adds: sand "paper" sections with drifting wave edges, giant
   outlined page word + drawn horizon in every hero, shimmering
   accent words, card tilt + magnetic buttons (desktop), footer
   wordmark, branded first-visit opening.
   Same safety rules as v8: anything that hides or moves content is
   scoped to html.cx (JS on); reduced motion = static. Text, links
   and compliance lines are never touched. ASCII ONLY.
   ============================================================ */

/* ---------- paper sections: warm sand between the navy ---------- */
.cx9 body > section[style*="--bg2"]:not(.finale),
.cx9 .v7-mani,.cx9 .v7-owners{
  --bg:#F4EEE3;--bg2:#F4EEE3;--panel:#fffdf8;--panel2:#efe7d8;
  --txt:#101c36;--mute:#4f5d68;--line:rgba(16,28,54,.13);
  --accent:#4a6405;--accent-br:#4a6405;
  background:#F4EEE3;color:var(--txt);position:relative;z-index:1}
/* light theme: the same sections invert to navy */
.cx9 body.light > section[style*="--bg2"]:not(.finale),
.cx9 body.light .v7-mani,.cx9 body.light .v7-owners{
  --bg:#101c36;--bg2:#101c36;--panel:#16243f;--panel2:#1c2d4d;
  --txt:#eaf1f4;--mute:#a9bcc7;--line:rgba(255,255,255,.12);
  --accent:#86b60a;--accent-br:#9fd117;background:#101c36}
.cx9 body > section[style*="--bg2"]:not(.finale) .card p,
.cx9 .v7-owners .v7-b:not(.img):not(.cta) p{color:var(--mute)}

/* drifting wave edges (top and bottom) in the paper colour */
.cx9 body > section[style*="--bg2"]:not(.finale)::before,
.cx9 body > section[style*="--bg2"]:not(.finale)::after,
.cx9 .v7-mani::before,.cx9 .v7-mani::after,
.cx9 .v7-owners::before,.cx9 .v7-owners::after{
  content:"";position:absolute;left:0;right:0;height:42px;pointer-events:none;z-index:2;
  background-repeat:repeat-x;background-size:1200px 42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='42' viewBox='0 0 1200 42' preserveAspectRatio='none'%3E%3Cpath d='M0 42V22C150 4 300 4 450 20S750 40 900 22 1100 2 1200 18V42Z' fill='%23F4EEE3'/%3E%3C/svg%3E");
  animation:cx9drift 38s linear infinite}
.cx9 body > section[style*="--bg2"]:not(.finale)::before,
.cx9 .v7-mani::before,.cx9 .v7-owners::before{top:-41px}
.cx9 body > section[style*="--bg2"]:not(.finale)::after,
.cx9 .v7-mani::after,.cx9 .v7-owners::after{bottom:-41px;transform:scaleY(-1);
  animation-direction:reverse}
.cx9 body.light > section[style*="--bg2"]:not(.finale)::before,
.cx9 body.light > section[style*="--bg2"]:not(.finale)::after,
.cx9 body.light .v7-mani::before,.cx9 body.light .v7-mani::after,
.cx9 body.light .v7-owners::before,.cx9 body.light .v7-owners::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='42' viewBox='0 0 1200 42' preserveAspectRatio='none'%3E%3Cpath d='M0 42V22C150 4 300 4 450 20S750 40 900 22 1100 2 1200 18V42Z' fill='%23101c36'/%3E%3C/svg%3E")}
@keyframes cx9drift{to{background-position:1200px 0}}
/* the v8 seam line is replaced by the waves */
.cx9 section[style*="--bg2"]{box-shadow:none}

/* ---------- heroes: giant outlined word + drawn horizon ---------- */
.cx9-ghost{position:absolute;right:-2vw;bottom:8%;z-index:2;pointer-events:none;
  font-family:"Italiana",serif;font-size:clamp(7rem,21vw,22rem);line-height:.8;
  white-space:nowrap;color:transparent;letter-spacing:-.01em;
  -webkit-text-stroke:1px rgba(255,255,255,.22);will-change:transform}
@media(max-width:760px){.cx9-ghost{font-size:34vw;bottom:auto;top:18%;right:-6vw}}
.cx9-horizon{position:absolute;left:0;right:0;bottom:0;height:90px;z-index:2;
  pointer-events:none;overflow:visible}
.cx9-horizon path{fill:none;stroke:#c9ea6b;stroke-width:1.2;opacity:.55;
  stroke-dasharray:2600;stroke-dashoffset:2600;
  animation:cx9draw 3.2s cubic-bezier(.6,0,.2,1) .9s forwards}
.cx9-horizon path + path{stroke:#fff;opacity:.18;animation-delay:1.3s}
@keyframes cx9draw{to{stroke-dashoffset:0}}

/* ---------- accent words shimmer ---------- */
.cx9 .shead h2 .scr,.cx9 .finale h2 .scr,.cx9 .phero h1 .scr{
  background:linear-gradient(100deg,var(--accent-br) 0%,#d7f08a 45%,var(--accent-br) 75%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;
  color:transparent;animation:cx9shine 7s ease-in-out infinite}
.cx9 body > section[style*="--bg2"] .shead h2 .scr,
.cx9 .v7-owners .shead h2 .scr{
  background-image:linear-gradient(100deg,#4a6405 0%,#86b60a 45%,#4a6405 75%)}
@keyframes cx9shine{0%,100%{background-position:100% 0}50%{background-position:0 0}}

/* eyebrows get a growing rule */
.cx9 .shead .eyebrow{display:inline-flex;align-items:center;gap:.9rem}
.cx9 .shead .eyebrow::before{content:"";width:0;height:1px;background:currentColor;
  transition:width 1.2s cubic-bezier(.2,.7,.2,1) .2s}
.cx9 .shead.in .eyebrow::before{width:42px}

/* ---------- tilt + magnetic ---------- */
.cx9-tilt{transform-style:preserve-3d;will-change:transform}
.cx9-tilt.cx9-moving{transition:transform .12s linear !important}
.btn{will-change:transform}

/* ---------- footer wordmark ---------- */
.cx9-mark{overflow:hidden;line-height:.78;margin:3.5rem 0 -1.4rem;pointer-events:none;
  text-align:center;user-select:none}
.cx9-mark span{display:inline-block;font-family:"Italiana",serif;white-space:nowrap;
  font-size:clamp(5rem,20.5vw,24rem);letter-spacing:-.01em;
  background:linear-gradient(180deg,color-mix(in srgb,var(--txt) 22%,transparent),
    color-mix(in srgb,var(--accent-br) 10%,transparent));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  transform:translateY(var(--mk,60%));transition:transform .2s linear}

/* ---------- branded first-visit opening ---------- */
.cx-curtain b{position:absolute;left:50%;top:50%;transform:translate(-50%,-160%);
  font-family:"Italiana",serif;font-weight:400;font-size:clamp(1.6rem,4vw,2.6rem);
  letter-spacing:.42em;color:#fff;white-space:nowrap;display:flex;gap:.02em}
.cx-curtain b span{display:inline-block;opacity:0;transform:translateY(60%);
  animation:cx9letter .7s cubic-bezier(.2,.7,.2,1) forwards}
.cx-curtain small{position:absolute;left:50%;top:50%;transform:translate(-50%,180%);
  font-size:11px;letter-spacing:.5em;text-transform:uppercase;color:#c9ea6b;opacity:0;
  animation:cx9fade .6s ease .8s forwards}
@keyframes cx9letter{to{opacity:1;transform:none}}
@keyframes cx9fade{to{opacity:1}}
.cx9-first .cx-curtain{animation-delay:1.45s}
.cx9-first .cx-curtain i::after{animation-duration:1.3s}
.cx-curtain.out b,.cx-curtain.out small{display:none}

@media(prefers-reduced-motion:reduce){
  .cx9 body > section[style*="--bg2"]::before,.cx9 body > section[style*="--bg2"]::after,
  .cx9 .v7-mani::before,.cx9 .v7-mani::after,.cx9 .v7-owners::before,.cx9 .v7-owners::after,
  .cx9 .shead h2 .scr,.cx9 .finale h2 .scr,.cx9 .phero h1 .scr{animation:none}
  .cx9-horizon path{animation:none;stroke-dashoffset:0}
  .cx9-mark span{transform:none}
}
.cx-still .cx9-mark span{transform:none}
.cx-still .cx9-horizon path{stroke-dashoffset:0;animation:none}

/* ---------- menu clears the header (2026-10-15) ----------
   The panel centred its list with justify-content:center, so on short
   screens (phones) the first items slid up behind the logo and could not
   be scrolled to. Start the list below the header; the list's own
   margin:auto still centres it whenever there is room. */
.cx9 .navpanel{justify-content:flex-start;padding-top:122px}

/* ---------- scrolling word banners: ONE style everywhere (2026-10-15) ----
   Solid words on every page - the home page banner (.v7-marq) and the
   banner above every footer (.cx-marq). No outlined words anywhere. */
.v7-marq span,.cx-marq span{color:var(--txt) !important;-webkit-text-stroke:0 !important}

/* ---------- photo interludes on phones (2026-10-15) ----------
   The two-line "Atmosphere imagery" caption ran into the heading, and the
   paper wave below covers the bottom 41px. Caption sits on one line just above
   the wave, heading above it. */
@media(max-width:760px){
  .cx9 .cx-inter .at{top:auto;bottom:52px;left:20px;right:20px;
    font-size:9.5px;letter-spacing:.12em;white-space:nowrap;overflow:hidden;text-overflow:clip}
  .cx9 .cx-inter figcaption{bottom:84px}
}