/* ValuFlor — contact page only. The inquiry block itself is styled in wizard.css; this file lays out the page
   around it: a night hero over aerial footage with the questions as the tool in it, a side column (phone,
   email, the four addresses, a photo), the orange ticker and the floor planner bento on paper. */

/* ── night hero: photo behind the heading, the tool below it ─────────────── */
.cx{position:relative;background:#0B0907;overflow:hidden;isolation:isolate;border-bottom:0}
.cx__bg{position:absolute;left:0;right:0;top:0;height:clamp(560px,82vh,860px);overflow:hidden;z-index:-1}
.cx__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;opacity:.9}
.cx__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(11,9,7,.82) 0%,rgba(11,9,7,.5) 46%,rgba(11,9,7,.18) 100%),
             linear-gradient(180deg,rgba(11,9,7,.35) 0%,rgba(11,9,7,.55) 45%,rgba(11,9,7,.92) 80%,#0B0907 100%)}
.cx__in{padding-top:calc(var(--hdr-h) + clamp(34px,6vw,84px));padding-bottom:clamp(64px,8vw,120px)}
.cx__head{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.75fr);gap:clamp(24px,4vw,64px);align-items:end}
.cx__h1{max-width:15ch;font-size:clamp(2.7rem,6.2vw,5.6rem)}
.cx__intro{display:flex;flex-direction:column;align-items:flex-start;gap:26px;padding-bottom:6px}
.cx__intro .lede{margin-top:0;color:#E2D9CD}
.cx__intro .spin{width:clamp(110px,10vw,148px)}
@media (max-width:900px){
  .cx__head{grid-template-columns:1fr}
  .cx__intro{flex-direction:row-reverse;align-items:center;justify-content:space-between}
}
@media (max-width:560px){.cx__intro .spin{display:none}.cx__label{letter-spacing:.14em}}
/* phones: the text runs the full width, so the photo gets one even top-down shade instead of the dark left side;
   it stays brighter behind the heading and darkens before the paragraph and the questions */
@media (max-width:700px){
  .cx__bg img{opacity:1}
  .cx__bg::after{background:linear-gradient(180deg,rgba(11,9,7,.42) 0%,rgba(11,9,7,.5) 24%,rgba(11,9,7,.74) 40%,rgba(11,9,7,.9) 58%,#0B0907 80%)}
}

/* ── the grid: questions (dominant) beside the side column; both columns end on the same line ── */
.cx__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,390px);gap:clamp(16px,2vw,26px);margin-top:clamp(32px,3.6vw,52px);align-items:stretch}
.cx__tool,.cx__side{display:flex;flex-direction:column;min-width:0}
.cx__chrome{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;min-height:44px;margin-bottom:12px}
.cx__label{display:inline-flex;align-items:center;gap:12px;white-space:nowrap;font:600 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--vfbody)}
.cx__live{width:8px;height:8px;border-radius:50%;background:var(--vfacc);animation:cx-pulse 2.4s ease-out infinite}
@keyframes cx-pulse{0%{box-shadow:0 0 0 0 rgba(225,137,66,.65)}70%,100%{box-shadow:0 0 0 10px rgba(225,137,66,0)}}

/* the questions panel: smoked glass over the photo, a blueprint grid, a floor plan drawn faintly in the corner */
.cx__tool .wiz{flex:1 1 auto;margin-top:0;min-height:clamp(600px,50vw,690px);border-color:#3A322A;
  background:
    repeating-linear-gradient(0deg,transparent 0 47px,rgba(255,255,255,.026) 47px 48px),
    repeating-linear-gradient(90deg,transparent 0 47px,rgba(255,255,255,.026) 47px 48px),
    radial-gradient(90% 70% at 100% 0%,rgba(225,137,66,.16),transparent 62%),
    linear-gradient(160deg,rgba(36,30,25,.9),rgba(20,17,14,.95) 62%);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.cx__tool .wiz::after{content:"";position:absolute;right:-3%;bottom:-5%;width:min(58%,520px);aspect-ratio:8/5;z-index:-1;pointer-events:none;opacity:.13;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 500' fill='none' stroke='%23E18942' stroke-width='3'%3E%3Crect x='40' y='40' width='720' height='420'/%3E%3Cpath d='M40 260H330V460M330 40V200M330 200H560V460M560 40V140H760M440 200V120H330M120 260v-30a30 30 0 0 1 30 30M560 300h30a30 30 0 0 0-30-30'/%3E%3C/svg%3E") center/contain no-repeat}
.cx__tool .wiz__opt{background-color:rgba(14,12,10,.86)}

/* ── side column ─────────────────────────────────────────────────────────── */
/* photo card with the phone number and email address on it */
.cx__reach{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(250px,19vw,272px);border-radius:var(--r-l);overflow:hidden;
  isolation:isolate;border:1px solid #3A322A;background:#1B1713}
.cx__reach-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 28%;z-index:-2;transform:scale(1.02);transition:transform 1.2s var(--ease-out)}
.cx__reach::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(11,9,7,.92) 0%,rgba(11,9,7,.55) 48%,rgba(11,9,7,0) 72%)}
.cx__reach:hover .cx__reach-img,.cx__reach:focus-within .cx__reach-img{transform:scale(1.07)}
.cx__reach-in{display:grid;gap:8px;padding:10px}
.cx__line{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"k go" "v go";align-items:center;gap:5px 12px;
  padding:12px 10px 12px 16px;border-radius:var(--r-m);background:rgba(20,17,14,.62);border:1px solid rgba(255,255,255,.12);color:#F5F0E8;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transition:transform .45s var(--ease-out),border-color .25s ease,background-color .25s ease,box-shadow .45s ease}
.cx__line:hover,.cx__line:focus-visible{color:#F5F0E8;transform:translateY(-3px);border-color:var(--vfacc);background:rgba(20,17,14,.82);box-shadow:var(--vflift)}
.cx__line:active{transform:scale(.98)}
.cx__k{grid-area:k;font:600 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#BDB2A3}
.cx__v{grid-area:v;min-width:0;font:800 clamp(1.3rem,1.9vw,1.6rem)/1.1 var(--head);letter-spacing:-.025em;overflow-wrap:anywhere}
.cx__v--s{font-size:clamp(1.05rem,1.4vw,1.2rem)}
.cx__line .go{grid-area:go;width:46px;height:46px;border-color:rgba(255,255,255,.22);color:#F5F0E8}
.cx__line .go svg{width:18px;height:18px}

/* the four addresses */
.cx__locs{flex:1 1 auto;display:flex;flex-direction:column;margin-top:10px;padding:4px 18px 16px;border-radius:var(--r-l);background:var(--vfpanel);border:1px solid var(--vfline)}
.cx__list{list-style:none;margin:0;padding:0}
.cx__loc{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"k k" "h dir" "a a";align-items:center;gap:3px 12px;
  padding:13px 0 13px 14px;border-bottom:1px solid var(--vfline);transition:background-color .3s ease}
.cx__loc::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;background:var(--vfacc);transform:scaleY(.45);transform-origin:top;
  transition:transform .45s var(--ease-out)}
.cx__loc--gold::before{background:var(--vfgold)}
.cx__loc>*{transition:transform .45s var(--ease-out)}
.cx__loc:hover>*,.cx__loc:focus-within>*{transform:translateX(6px)}
.cx__loc:hover::before,.cx__loc:focus-within::before{transform:none}
.cx__loc-k{grid-area:k;font:600 9.5px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--vfgoldt)}
.cx__loc h3{grid-area:h;font:800 1.15rem/1.2 var(--head);letter-spacing:-.025em}
.cx__loc address{grid-area:a;font-size:13.5px;line-height:1.45;color:var(--vfbody)}
.cx__dir{grid-area:dir;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font:600 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  padding:17px 0;margin:-17px 0}   /* 44px tap height without moving the row */
.cx__dir span[aria-hidden]{display:inline-block;transition:transform .35s var(--ease-out)}
.cx__dir:hover span[aria-hidden]{transform:translateX(4px)}
.cx__more{margin-top:auto;padding-top:14px;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.cx__more p{font-size:13.5px;color:var(--vfmut)}
.cx__more .link-arrow{font-size:10.5px;padding-block:17px}

@media (max-width:1000px){
  .cx__grid{grid-template-columns:1fr}
  .cx__tool .wiz{min-height:0}
  /* side column turns into two columns under the questions: the photo card beside the addresses */
  .cx__side{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:stretch}
  .cx__side>.cx__chrome{grid-column:1/-1;margin-bottom:0}
  .cx__locs{margin-top:0}
  .cx__reach-img{object-position:86% 30%}   /* a taller card: keep the person in frame */
}
@media (max-width:680px){
  .cx__side{grid-template-columns:1fr}
  .cx__reach{min-height:300px}
}
/* phones: the small mono labels get a 12px floor */
@media (max-width:700px){
  .cx__label,.cx__k,.cx__loc-k,.cx__dir,.cx__more .link-arrow{font-size:12px}
  .cx__k,.cx__loc-k,.cx__dir{letter-spacing:.1em}
}

/* ── orange ticker ────────────────────────────────────────────────────── */
.cx-tickwrap{overflow:hidden;background:#E18942}   /* the scroll push moves the band sideways: keep it from widening the page */
.cx-ticker{width:calc(100% + 14vw);margin-left:-7vw;border-color:rgba(28,17,8,.18)}   /* wider than the screen, so the scroll push never shows an edge */
.cx-ticker.ticker--outline .ticker__track>span:nth-child(4n+3){-webkit-text-stroke:1.5px #1C1108}
.cx-ticker .ticker__track>i{background:#1C1108}

/* ── floor planner bento (paper) ──────────────────────────────────────── */
.cx-plan{border-bottom:0}
.cx-plan__go{color:var(--vfink);text-decoration:none;cursor:pointer}
.cx-plan__go:hover{color:var(--vfink)}
.cx-plan__go svg.plan{position:absolute;right:-4%;top:-10%;width:72%;height:120%;z-index:-1;opacity:.55;color:var(--vfacc);transition:transform 1s var(--ease-out),opacity .4s ease}
.cx-plan__go svg.plan path,.cx-plan__go svg.plan rect{fill:none;stroke:currentColor;stroke-width:1.4;vector-effect:non-scaling-stroke}
.cx-plan__go:hover svg.plan,.cx-plan__go:focus-visible svg.plan{transform:scale(1.05) rotate(-1.5deg);opacity:.85}
.cx-plan__row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.cx-plan__t{font:800 clamp(1.5rem,2.6vw,2.3rem)/1 var(--head);letter-spacing:-.035em}
.cx-plan__go:hover .go,.cx-plan__go:focus-visible .go{background:var(--vfacc);border-color:var(--vfacc);color:var(--vfonacc)}
.cx-plan__go:hover .go svg,.cx-plan__go:focus-visible .go svg{transform:rotate(-45deg)}

/* reduced motion: the pulse holds still */
html.rm .cx__live{animation:none;box-shadow:0 0 0 4px rgba(225,137,66,.25)}