/* ============================================================
   Crestmark Realty - cinematic layer (build_v8.py, 2026-10-14)
   One shared stylesheet that lifts every page: full-height photo
   heroes, word-by-word headline reveals, clip-wipe images, card
   spotlights, timeline draw, image-backed finale, page curtain.

   SAFETY
   - Anything that hides or moves content is scoped to html.cx,
     which cinematic.js adds. No JS = the page renders as before.
   - prefers-reduced-motion: html.cx-still, everything static.
   - Text, links, ids and compliance lines are never touched;
     build_v8.py asserts that on every page.
   ASCII ONLY.
   ============================================================ */

/* ---------- page heroes (.phero on inner pages) ---------- */
.phero{min-height:84vh;min-height:84svh;padding-bottom:5.5rem;isolation:isolate}
.phero .photo{will-change:transform}
.phero h1{font-size:clamp(3rem,8vw,7rem);line-height:1.02;max-width:16ch;
  text-shadow:0 14px 60px rgba(4,10,22,.35)}
.phero p{font-size:clamp(1.12rem,1.6vw,1.38rem)}
.phero .eyebrow{color:#c9ea6b}
/* film grain over every hero photograph */
.phero::after,.hero::after{content:"";position:absolute;inset:0;z-index:2;
  pointer-events:none;opacity:.18;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero{isolation:isolate}
.hero .wrap{position:relative;z-index:3}

@keyframes cxkb{from{transform:scale(1.14) translate3d(-1.5%,1%,0)}
  to{transform:scale(1.02) translate3d(1%,-1%,0)}}
.cx .phero .photo{animation:cxkb 26s ease-in-out infinite alternate}

/* scroll cue (inserted by cinematic.js) */
.cx-cue{position:absolute;right:clamp(20px,4vw,56px);bottom:2.2rem;z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:.7rem;color:#fff;
  font-size:12px;letter-spacing:.34em;text-transform:uppercase;
  writing-mode:vertical-rl;pointer-events:none}
.cx-cue i{display:block;width:1px;height:64px;background:rgba(255,255,255,.25);
  position:relative;overflow:hidden}
.cx-cue i::after{content:"";position:absolute;left:0;right:0;top:-40%;height:40%;
  background:#c9ea6b;animation:cxcue 2.2s cubic-bezier(.6,0,.3,1) infinite}
@keyframes cxcue{to{top:100%}}

/* lighter veil: let the photograph read, darken only where text sits */
.phero .veil{background:
  linear-gradient(180deg,rgba(10,20,36,.62) 0%,rgba(10,20,36,.08) 26%,
    rgba(10,20,36,.18) 52%,rgba(10,20,36,.78) 82%,var(--bg) 100%),
  linear-gradient(90deg,rgba(10,20,36,.45) 0%,rgba(10,20,36,0) 60%)}
.phero p{color:rgba(255,255,255,.9)}

/* ---------- section index numerals (inserted by cinematic.js) ---------- */
.cx-idx{display:block;font-family:"Italiana",serif;font-size:clamp(4.2rem,8vw,7rem);
  line-height:.8;margin-bottom:1.2rem;color:transparent;
  -webkit-text-stroke:1px color-mix(in srgb,var(--accent-br) 75%,transparent)}
body.light .cx-idx{-webkit-text-stroke-color:var(--accent)}
.finale .cx-idx,.v7-fin .cx-idx{display:none}

/* ---------- photographic interludes (inserted by cinematic.js) ---------- */
.cx-inter{position:relative;height:78vh;height:78svh;overflow:hidden;
  background:#0a1424;--i:1}
.cx-inter-clip{position:absolute;inset:0;overflow:hidden;
  clip-path:inset(calc(var(--i) * 12%) calc(var(--i) * 8%) round calc(var(--i) * 30px))}
.cx-inter img{position:absolute;left:0;top:-10%;width:100%;height:120%;object-fit:cover;
  transform:scale(calc(1 + var(--i) * .16))}
.cx-inter-clip::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(6,12,24,.7),rgba(6,12,24,0) 45%)}
.cx-inter figcaption{position:absolute;left:clamp(20px,5vw,72px);bottom:clamp(24px,5vh,56px);
  z-index:2;color:#fff;opacity:calc(1 - var(--i) * 1.4)}
.cx-inter .tm{display:block;font-size:13px;letter-spacing:.32em;text-transform:uppercase;
  color:#c9ea6b;font-weight:500;margin-bottom:.4rem}
.cx-inter b{font-family:"Italiana",serif;font-weight:400;font-size:clamp(2.2rem,5vw,4.4rem);
  line-height:1.02;display:block}
.cx-inter .at{position:absolute;right:clamp(20px,4vw,48px);bottom:clamp(24px,5vh,56px);z-index:2;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72);
  opacity:calc(1 - var(--i) * 1.4)}
@media(max-width:760px){.cx-inter{height:72svh}
  .cx-inter .at{left:20px;right:auto;bottom:16px}
  .cx-inter figcaption{bottom:48px}}
.cx-still .cx-inter{--i:0 !important}

/* ---------- cards: gradient edge ---------- */
.cx .grid3 .card{border-color:transparent;
  background:
    radial-gradient(520px circle at var(--mx,50%) var(--my,-30%),
      color-mix(in srgb,var(--accent-br) 13%,transparent),transparent 45%) padding-box,
    linear-gradient(var(--panel),var(--panel)) padding-box,
    linear-gradient(155deg,color-mix(in srgb,var(--accent-br) 60%,transparent),
      var(--line) 35%,var(--line) 70%,color-mix(in srgb,var(--accent-br) 30%,transparent)) border-box}
.grid2{gap:clamp(2.5rem,6vw,6rem)}
.grid2 .media{min-height:440px}
@media(min-width:981px){.grid2 .media{aspect-ratio:4/5;min-height:0}}

/* ---------- word reveal (h1 in heroes, h2 in section heads) ---------- */
.cxw{display:inline-block;overflow:hidden;vertical-align:top;
  padding-bottom:.12em;margin-bottom:-.12em}
.cxw > span{display:inline-block}
.cx .cx-split .cxw > span{transform:translateY(105%);opacity:0;
  transition:transform 1.1s cubic-bezier(.2,.75,.15,1),opacity .9s ease}
.cx .cx-split.cx-on .cxw > span{transform:none;opacity:1}

/* ---------- scroll progress ---------- */
.cx-progress{position:fixed;left:0;top:0;width:100%;height:3px;z-index:97;
  transform-origin:0 50%;transform:scaleX(0);pointer-events:none;
  background:linear-gradient(90deg,#5f8007,#86b60a 45%,#c9ea6b)}

/* ---------- reveal: softer, deeper ---------- */
.cx .reveal{transition:opacity 1.2s cubic-bezier(.2,.7,.2,1),
  transform 1.2s cubic-bezier(.2,.7,.2,1),filter 1.2s ease}
.cx.js .reveal:not(.media){filter:blur(5px)}
.cx.js .reveal.in{filter:none}

/* images wipe open instead of fading */
.cx.js .media.reveal{opacity:1;transform:none;filter:none;
  clip-path:inset(10% 10% 10% 10% round 8px);
  transition:clip-path 1.5s cubic-bezier(.65,0,.2,1)}
.cx.js .media.reveal.in{clip-path:inset(0 0 0 0 round 8px)}
.cx .media img{transform:scale(1.18);transition:transform 2.2s cubic-bezier(.2,.7,.2,1)}
.cx .media.in img{transform:scale(1.04)}
.media{box-shadow:0 50px 100px -50px rgba(0,0,0,.7)}

/* ---------- cards: cursor spotlight + lime edge ---------- */
.cx .card,.cx .lcard{position:relative;
  background-image:radial-gradient(520px circle at var(--mx,50%) var(--my,-30%),
    color-mix(in srgb,var(--accent-br) 13%,transparent),transparent 45%)}
.card{transition:transform .6s cubic-bezier(.2,.7,.2,1),border-color .6s,box-shadow .6s}
.card:hover{box-shadow:0 40px 80px -46px rgba(0,0,0,.75)}
.lc-img{overflow:hidden}
.lc-img img{transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.lcard:hover .lc-img img{transform:scale(1.07)}

/* ---------- tiles ---------- */
.tile img{transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.tile:hover img{transform:scale(1.08)}
.tile span{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.tile span::after{content:"";display:block;width:0;height:1px;margin-top:.5rem;
  background:#c9ea6b;transition:width .6s cubic-bezier(.2,.7,.2,1)}
.tile:hover span::after{width:48px}

/* ---------- timeline draws as you scroll ---------- */
.cx .tl::before{transform-origin:50% 0;transform:scaleY(var(--tlp,0))}
.cx.js .tl-item{opacity:.25;transform:translateX(-10px);
  transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.cx.js .tl-item.in{opacity:1;transform:none}

/* ---------- coastal answers: numbered, ruled ---------- */
.ans-block{position:relative;counter-increment:cxans}
section .wrap{counter-reset:cxans}
.ans-block h2{display:flex;gap:1.1rem;align-items:baseline}
.ans-block h2::before{content:counter(cxans,decimal-leading-zero);flex:none;
  font-family:"Jost",sans-serif;font-size:13px;letter-spacing:.3em;
  color:var(--accent-br);transform:translateY(-.4em)}
body.light .ans-block h2::before{color:var(--accent)}
.ans-block::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;
  background:var(--accent-br);transition:width 1.4s cubic-bezier(.2,.7,.2,1) .2s}
.ans-block.in::after{width:100%}

/* ---------- FAQ ---------- */
.faq{transition:background .5s}
.faq.open{background:linear-gradient(90deg,color-mix(in srgb,var(--accent-br) 7%,transparent),transparent 70%)}
.faq button{transition:color .3s,padding .5s cubic-bezier(.2,.7,.2,1)}
.faq button:hover{color:var(--accent-br);padding-left:.6rem}

/* ---------- buttons: light sweep ---------- */
.btn{position:relative;overflow:hidden}
.btn-accent::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-20deg);transition:left .9s cubic-bezier(.2,.7,.2,1)}
.btn-accent:hover::after{left:130%}

/* ---------- finale: photograph behind the invitation ---------- */
.finale:not(.v7-fin){isolation:isolate;padding:10rem 0;
  background:url("../img/coast/blue-hour-home-w.jpg") center/cover no-repeat}
.finale:not(.v7-fin)::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,var(--bg) 0%,rgba(10,20,36,.62) 22%,
    rgba(10,20,36,.76) 68%,var(--bg2) 100%)}
.finale:not(.v7-fin) h2{color:#fff}
.finale:not(.v7-fin) h2 .scr{color:#c9ea6b}
.finale:not(.v7-fin) .eyebrow{color:#c9ea6b}
.finale:not(.v7-fin) > .wrap > p{color:rgba(255,255,255,.86)}
.finale:not(.v7-fin) .lead-form{background:rgba(10,20,36,.58);
  border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:2.2rem;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.8)}
.finale:not(.v7-fin) .lead-form .disc{color:rgba(255,255,255,.74)}
.finale:not(.v7-fin) .lf-msg{color:#fff}
.finale:not(.v7-fin) .cta-foot,.finale:not(.v7-fin) .disc{color:rgba(255,255,255,.74)}
@media(max-width:760px){
  .finale:not(.v7-fin){padding:7rem 0 6rem;
    background-image:url("../img/coast/blue-hour-home-t.jpg")}
  .finale:not(.v7-fin) .lead-form{padding:1.4rem}
}

/* contact page form gets the same glass treatment */
.phero + section .lead-form{background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:2.2rem;box-shadow:var(--shadow)}

/* ---------- marquee before the footer (inserted by cinematic.js) ---------- */
.cx-marq{overflow:hidden;padding:3rem 0;border-top:1px solid var(--line);
  background:var(--bg)}
.cx-marq-row{display:flex;align-items:center;width:max-content;
  animation:cxmarq 50s linear infinite}
.cx-marq span{font-family:"Italiana",serif;font-size:clamp(3rem,7.5vw,7rem);line-height:1;
  white-space:nowrap;color:var(--txt);-webkit-text-stroke:0}
/* all marquee words share one style (solid) - 2026-10-15 per Dina */
.cx-marq i{flex:none;width:.5em;height:.5em;margin:0 .9em;
  font-size:clamp(3rem,7.5vw,7rem);transform:rotate(45deg) scale(.3);
  background:var(--accent-br)}
@keyframes cxmarq{to{transform:translateX(-50%)}}

/* ---------- page curtain (inserted by cinematic.js) ---------- */
.cx-curtain{position:fixed;inset:0;z-index:200;pointer-events:none;
  background:#0a1424;display:grid;place-items:center;
  animation:cxlift .95s cubic-bezier(.7,0,.2,1) .15s forwards}
.cx-curtain i{display:block;width:120px;height:1px;background:rgba(255,255,255,.12);
  position:relative;overflow:hidden}
.cx-curtain i::after{content:"";position:absolute;inset:0;background:#86b60a;
  transform-origin:0 50%;animation:cxbar .7s cubic-bezier(.6,0,.2,1) forwards}
@keyframes cxbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes cxlift{to{transform:translateY(-100%);visibility:hidden}}
.cx-curtain.out{animation:cxdrop .45s cubic-bezier(.7,0,.3,1) forwards;
  transform:translateY(100%)}
.cx-curtain.out i::after{animation:none;transform:scaleX(0)}
@keyframes cxdrop{to{transform:none}}

/* footer with an Owners column: 6 columns on desktop */
@media(min-width:981px){.fg:has(> div:nth-child(6)){grid-template-columns:2fr 1fr 1fr 1fr 1fr 1fr}}

/* sections that alternate background get a soft seam */
section[style*="--bg2"]{box-shadow:inset 0 1px 0 var(--line)}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .cx .phero .photo,.cx-marq-row,.cx-cue i::after{animation:none}
  .cx-curtain{display:none}
}
.cx-still .cx-split .cxw > span{transform:none;opacity:1}
.cx-still.js .media.reveal{clip-path:none}
.cx-still .media img{transform:none}
.cx-still.js .tl-item{opacity:1;transform:none}
.cx-still .tl::before{transform:none}

/* ---------- The Insider Coast picks (concierge.html, 2026-10-14) ---------- */
.insider[id]{scroll-margin-top:110px}
.insider + .insider{padding-top:2rem}
.insider-jump{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.4rem}
.insider-jump a{padding:.75rem 1.3rem;border:1px solid var(--line);border-radius:999px;
  font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;color:var(--txt);
  transition:border-color .3s,color .3s,background .3s}
.insider-jump a:hover{border-color:var(--accent-br);color:var(--accent-br)}
.pick-group{font-family:"Jost",sans-serif;font-size:.82rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--accent-br);font-weight:500;margin:3.2rem 0 1.2rem;
  display:flex;align-items:center;gap:1rem}
.pick-group::after{content:"";flex:1;height:1px;background:var(--line)}
body.light .pick-group{color:var(--accent)}
.picks{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.pick{display:flex;gap:1.3rem;padding:1.7rem 1.8rem;background:var(--bg);
  transition:background .4s}
section[style*="--bg2"] .pick{background:var(--bg2)}
.pick:hover{background:color-mix(in srgb,var(--accent-br) 6%,var(--bg))}
.pk-n{flex:none;font-family:"Italiana",serif;font-size:2rem;line-height:1;color:transparent;
  -webkit-text-stroke:1px var(--accent-br);min-width:2.6rem}
.pick h4{font-family:"Italiana",serif;font-weight:400;font-size:1.55rem;line-height:1.15;
  margin-bottom:.3rem;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
.pk-tag{font-family:"Jost",sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  padding:.2rem .6rem;border:1px solid var(--line);border-radius:999px;color:var(--mute)}
.pk-where{font-size:.86rem;letter-spacing:.06em;color:var(--accent-br);margin-bottom:.5rem}
body.light .pk-where{color:var(--accent)}
.pick p:not(.pk-where){color:var(--mute);font-weight:300;font-size:1.06rem;line-height:1.6}
.pk-link{display:inline-block;margin-top:.7rem;font-size:.78rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--txt);border-bottom:1px solid var(--accent-br);padding-bottom:2px}
.pk-link:hover{color:var(--accent-br)}
@media(max-width:860px){.picks{grid-template-columns:1fr}.pick{padding:1.4rem 1.2rem}}
/* lifestyle.html: the three Insider Coast cards are links now */
a.card-link{display:block;color:inherit}
.card-go{display:inline-block;margin-top:1.2rem;font-size:.8rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent-br);transition:letter-spacing .4s}
body.light .card-go{color:var(--accent)}
a.card-link:hover .card-go{letter-spacing:.26em}
.picks > .pick:last-child:nth-child(odd){grid-column:1 / -1}
@media(max-width:860px){.picks > .pick:last-child:nth-child(odd){grid-column:auto}}
/* list rows stay put (the grid lines show through while a row fades) */
.cx.js .pick.reveal{opacity:1;transform:none;filter:none}

/* ---------- Concierge pop-outs (concierge.html, 2026-10-15) ---------- */
.pop-card{cursor:pointer}
button.card-go{background:none;border:0;padding:0;font-family:inherit;cursor:pointer;text-align:left}
/* no JS: the pop-outs simply render as sections */
html:not(.cx) dialog.pop{display:block;position:static;margin:2rem auto;max-width:1280px;border:0}
/* margin:auto + inset:0 centre the modal; site.css resets every margin to
   0, which pinned the pop-outs to the left edge (fixed 2026-10-15) */
dialog.pop{margin:auto;inset:0;width:min(760px,calc(100vw - 32px));max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);
  padding:0;border:0;border-radius:18px;overflow:auto;background:var(--panel);color:var(--txt);
  box-shadow:0 60px 140px -40px rgba(0,0,0,.75)}
dialog.pop::backdrop{background:rgba(6,12,24,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
dialog.pop[open]{animation:popin .5s cubic-bezier(.2,.75,.2,1) both}
@keyframes popin{from{opacity:0;transform:translateY(28px) scale(.97)}to{opacity:1;transform:none}}
html:has(dialog.pop[open]){overflow:hidden}
.pop-img{height:210px;background-size:cover;background-position:center;position:relative}
.pop-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,12,24,.1),var(--panel) 100%)}
.pop-img span{position:absolute;left:22px;top:16px;z-index:1;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.8)}
.pop-in{padding:0 2.4rem 2.4rem;margin-top:-3rem;position:relative}
.pop-x{position:sticky;top:12px;float:right;margin:-150px -14px 0 0;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.35);background:rgba(6,12,24,.55);color:#fff;font-size:24px;line-height:1;
  cursor:pointer;backdrop-filter:blur(6px);z-index:3}
.pop-x:hover{border-color:var(--accent-br);color:var(--accent-br)}
dialog.pop h3{font-size:clamp(2rem,4vw,2.8rem);margin:.6rem 0 .9rem}
.pop-lead{color:var(--mute);font-weight:300;font-size:1.18rem;line-height:1.7;max-width:56ch}
dialog.pop h4{font-family:"Jost",sans-serif;font-size:.78rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--accent-br);font-weight:500;margin:2rem 0 .9rem;display:flex;align-items:center;gap:.9rem}
body.light dialog.pop h4{color:var(--accent)}
dialog.pop h4::after{content:"";flex:1;height:1px;background:var(--line)}
.pop-steps{list-style:none;counter-reset:ps;display:grid;gap:.8rem}
.pop-steps li{counter-increment:ps;display:flex;gap:1rem;font-size:1.04rem;line-height:1.6;font-weight:300}
.pop-steps li::before{content:counter(ps,decimal-leading-zero);flex:none;font-family:"Italiana",serif;
  font-size:1.5rem;line-height:1.1;color:transparent;-webkit-text-stroke:1px var(--accent-br);min-width:2.2rem}
.pop-facts{list-style:none;display:grid;gap:.75rem}
.pop-facts li{padding:1rem 1.2rem;border:1px solid var(--line);border-radius:10px;font-size:1rem;
  line-height:1.6;font-weight:300;color:var(--mute)}
.pop-facts strong{color:var(--txt);font-weight:500}
.pop-links{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
.pop-links a{display:flex;flex-direction:column;gap:.2rem;padding:.95rem 1.1rem;border-radius:10px;
  background:color-mix(in srgb,var(--accent-br) 7%,transparent);border:1px solid var(--line);
  font-size:1rem;color:var(--txt);transition:border-color .3s,transform .3s}
.pop-links a:hover{border-color:var(--accent-br);transform:translateY(-2px)}
.pop-links a span{font-size:.78rem;letter-spacing:.06em;color:var(--mute)}
.pop-links a[target="_blank"]::after{content:"\2197";position:absolute;opacity:0}
.pop-cta{margin-top:2rem}
@media(max-width:760px){
  dialog.pop{width:100vw;max-width:100vw;max-height:92dvh;margin:auto 0 0;border-radius:20px 20px 0 0}
  dialog.pop[open]{animation:popup .45s cubic-bezier(.2,.75,.2,1) both}
  @keyframes popup{from{transform:translateY(100%)}to{transform:none}}
  .pop-img{height:160px}
  .pop-in{padding:0 1.3rem 2rem}
  .pop-links{grid-template-columns:1fr}
  .pop-x{margin:-118px -4px 0 0}
}