/* Miami Production RV — creative layer: 3D frame ring, SVG blueprint, motion */

/* ---------- bigger brand lockup ---------- */
.brand__mark{width:46px;height:46px;border-width:1px}
.brand__mark svg{width:26px;height:26px}
.brand__name{font-size:1.42rem}
.brand__sub{font-size:.6rem;letter-spacing:.22em;margin-top:5px}
.hdr__in{height:84px}
.ftr__logo{width:132px}

/* ---------- whatsapp ---------- */
.btn--wa{background:#0F6B4F;border-color:#0F6B4F;color:#F4F1E8}
.btn--wa:hover{background:#0B5540;border-color:#0B5540}
.btn--wa .wa-dot{width:7px;height:7px;border-radius:50%;background:#5BE3A6;box-shadow:0 0 0 3px rgba(91,227,166,.25)}
.tel-btn--wa{background:#0F6B4F}
.tel-btn--wa:hover{background:#0B5540}
.tel-btn svg{width:14px;height:14px}
.mbar__in{grid-template-columns:1.15fr 1fr 1fr}
.mbar a.wa{background:#0F6B4F;border-color:#0F6B4F;color:#fff}
.num-tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}

/* ---------- sun-ray graphic (hero backdrop) ---------- */
.rays{position:absolute;right:-14vw;top:-22vh;width:min(78vw,900px);aspect-ratio:1;pointer-events:none;z-index:0;opacity:.5}
.rays svg{width:100%;height:100%;animation:spin 120s linear infinite}
.rays circle{fill:none;stroke:rgba(20,17,13,.10)}
.rays line{stroke:rgba(20,17,13,.09)}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.rays svg{animation:none}}

/* ---------- hero media: pointer tilt + 3d ---------- */
.tiltwrap{perspective:1100px}
.tilt{transform-style:preserve-3d;transition:transform .55s var(--ease);will-change:transform}
.tilt__badge{
  position:absolute;right:-14px;bottom:-14px;z-index:3;background:var(--accent);color:#fff;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  padding:10px 14px;border-radius:100px;box-shadow:0 16px 30px -18px rgba(20,17,13,.9);
  transform:translateZ(40px);
}

/* ---------- 3D frame ring ---------- */
.ringwrap{perspective:1300px;perspective-origin:50% 50%;height:clamp(270px,25vw,330px);position:relative;margin:clamp(4px,1.2vw,14px) auto 0;max-width:920px;border-top:1px solid rgba(239,231,218,.10);border-bottom:1px solid rgba(239,231,218,.10);overflow:hidden}
.ringwrap::after{content:"";position:absolute;left:50%;bottom:-46%;width:70%;height:90%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(210,59,34,.16),transparent 72%);pointer-events:none}
.ring{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(-7deg) rotateY(0deg)}
.ring__face{
  position:absolute;left:50%;top:50%;width:clamp(180px,22vw,290px);aspect-ratio:4/3;
  margin:calc(-1 * clamp(64px,6.75vw,92px)) 0 0 calc(-1 * clamp(85px,9vw,123px));
  background:#221E19;overflow:hidden;border:1px solid rgba(239,231,218,.16);
  box-shadow:0 40px 80px -60px #000;backface-visibility:hidden;
}
.ring__face img{width:100%;height:100%;object-fit:cover;filter:grayscale(.18) contrast(1.03)}
.ring__face b{
  position:absolute;left:8px;bottom:8px;font-family:var(--mono);font-size:.54rem;letter-spacing:.14em;
  text-transform:uppercase;color:#F4F1E8;background:rgba(20,17,13,.62);padding:4px 7px;border-radius:2px;
}
.ring__hint{display:flex;align-items:center;gap:10px;margin-top:10px}
.ring__hint span{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(239,231,218,.55)}
.ring__bar{height:1px;flex:1;background:rgba(239,231,218,.22);position:relative;overflow:hidden}
.ring__bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--accent)}

/* ---------- svg blueprint ---------- */
.blueprint{background:var(--paper-3);border:1px solid var(--line);padding:clamp(16px,2.4vw,34px);position:relative;overflow:hidden}
.blueprint::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(20,17,13,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(20,17,13,.055) 1px,transparent 1px);
  background-size:26px 26px;
}
.blueprint svg{position:relative;width:100%;height:auto;display:block}
.bp-line{fill:none;stroke:var(--ink);stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}
.bp-thin{fill:none;stroke:rgba(20,17,13,.45);stroke-width:.8}
.bp-dim{fill:none;stroke:var(--accent);stroke-width:.9}
.bp-fill{fill:rgba(20,17,13,.05);stroke:none}
.bp-lbl{font-family:var(--mono);font-size:7px;letter-spacing:.16em;fill:var(--accent);text-transform:uppercase}
.bp-lbl--ink{fill:rgba(20,17,13,.55)}
.bp-txt{font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;fill:var(--ink)}
.draw{stroke-dasharray:var(--len,1200);stroke-dashoffset:var(--len,1200);transition:stroke-dashoffset 2.1s var(--ease)}
.is-drawn .draw{stroke-dashoffset:0}
.bp-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px;position:relative}
.bp-legend span{font-family:var(--mono);font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.bp-legend span b{color:var(--accent);font-weight:400}

/* ---------- scroll route (process) ---------- */
.route{position:relative;margin-top:8px}
.route__svg{position:absolute;left:0;right:0;top:0;height:100%;width:100%;pointer-events:none;overflow:visible}
.route__svg path{fill:none;stroke:rgba(20,17,13,.16);stroke-width:1}
.route__svg path.lit{stroke:var(--accent);stroke-dasharray:var(--len2,1000);stroke-dashoffset:var(--len2,1000);transition:stroke-dashoffset .2s linear}
.step{background:transparent}

/* ---------- stills strip (parallax rows) ---------- */
.stills{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1.2vw,16px);align-items:start}
.stills figure{margin:0}
.stills .frame{aspect-ratio:3/4}
.stills figure:nth-child(even) .frame{aspect-ratio:3/4.6}
.stills figcaption{font-family:var(--mono);font-size:.56rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(239,231,218,.5);margin-top:8px}
.stills img{filter:grayscale(.15) contrast(1.02)}

/* ---------- animated counter strip ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.stat{padding:clamp(18px,2.4vw,30px) 18px clamp(18px,2.4vw,30px) 0;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat b{display:block;font-family:var(--serif);font-size:clamp(2rem,3.6vw,3.3rem);line-height:.95;font-weight:400;letter-spacing:-.02em}
.stat span{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:10px}

/* ---------- film edge ---------- */
.filmedge{display:flex;gap:6px;justify-content:space-between;opacity:.5}
.filmedge i{display:block;width:9px;height:12px;border:1px solid rgba(239,231,218,.5);border-radius:1px}

/* ---------- section marker line ---------- */
.mark{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.mark .dash{flex:1;height:1px;background:var(--line)}
.band .mark .dash{background:rgba(239,231,218,.2)}

/* ---------- hover strokes on cards ---------- */
.card{position:relative;overflow:hidden}
.card::after{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:var(--accent);transition:width .5s var(--ease)}
.card:hover::after{width:100%}
.card__art{position:absolute;right:-10px;bottom:-14px;width:104px;opacity:.10;transition:opacity .4s,transform .5s var(--ease)}
.card:hover .card__art{opacity:.22;transform:translateY(-4px) rotate(-3deg)}

@media (max-width:1080px){
  .ringwrap{height:clamp(280px,44vw,360px)}
  .stills{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat{border-bottom:1px solid var(--line)}
}
@media (max-width:820px){
  .rays{opacity:.32;right:-30vw;top:-8vh}
  .brand__mark{width:40px;height:40px}
  .brand__name{font-size:1.18rem}
  .hdr__in{height:74px}
  .tilt__badge{right:8px;bottom:-12px}
  .ring__face{width:170px;margin:-64px 0 0 -85px}
}
@media (max-width:560px){
  .stills{grid-template-columns:1fr 1fr}
  .blueprint{padding:12px}
  .bp-lbl{font-size:6px}
}
@media (prefers-reduced-motion:reduce){
  .tilt{transition:none}
  .draw{transition:none;stroke-dashoffset:0}
}

/* ---------- v2 fixes ---------- */
.brand__mark{width:50px;height:50px}
.brand__mark svg{width:28px;height:28px}
.brand__name{font-size:1.5rem}
.hdr__in{height:88px}
.d1,.d2,.d3,h1,h2,h3{text-wrap:balance}
.shead h2{max-width:26ch}
.cards--2{grid-template-columns:1fr 1fr}
.tilt__badge{left:16px;right:auto;bottom:16px;transform:translateZ(24px)}
.owner-frame{aspect-ratio:3/3.9;margin:0}
.owner-frame img{object-position:50% 8%}
.clients-rail{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:0;margin-top:8px}
.clients-rail + .clients-rail{border-top:0}
.clients-track{display:flex;width:max-content;gap:0;animation:slide 64s linear infinite}
.clients-rail:nth-child(2) .clients-track{animation-duration:78s;animation-direction:reverse}
.clients-rail:hover .clients-track{animation-play-state:paused}
.clients-track span{
  font-family:var(--mono);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);
  padding:16px 26px;border-right:1px solid var(--line);white-space:nowrap;
}
@media (max-width:1080px){.cards--2{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cards--2{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.clients-track{animation:none}}

/* editorial photo treatment for the operator portrait */
.owner-frame{background:#2a241d}
.owner-frame img{filter:grayscale(.42) sepia(.10) contrast(1.06) brightness(.98)}
/* keep hero photos warm but slightly filmic */
.hero__media .frame img{filter:saturate(.94) contrast(1.03)}
.brand__type{white-space:nowrap}
.brand__sub{white-space:nowrap}
@media (max-width:560px){
  .brand__mark{width:44px;height:44px}
  .brand__mark svg{width:24px;height:24px}
  .brand__name{font-size:1.24rem}
  .brand__sub{font-size:.5rem;letter-spacing:.13em}
}

/* ---------- mobile refinements ---------- */
section[id],article[id]{scroll-margin-top:96px}
@media (max-width:820px){
  .shead{grid-template-columns:1fr;gap:10px}
  .shead__num{padding-top:0}
  .unit{grid-template-columns:38px minmax(0,1fr) auto;row-gap:6px;padding:18px 0}
  .unit__spec{display:block;grid-column:2;font-size:.86rem;line-height:1.45;color:var(--ink-2);margin-top:2px}
  .unit__name{font-size:1.5rem}
  /* technical drawing stays legible: allow a horizontal pan instead of shrinking type */
  .blueprint{overflow:hidden}
  .hero__facts div{padding:12px 16px 12px 0;margin-right:0;border-right:0;width:50%}
  .hero__facts div:nth-child(odd){border-right:1px solid var(--line)}
  .hero__facts div:nth-child(-n+2){border-bottom:1px solid var(--line);padding-bottom:14px}
  .hero__facts div:nth-child(n+3){padding-top:14px}
}
@media (max-width:560px){
  .ringwrap{height:240px}
  .ring__face{width:190px;margin:-71px 0 0 -95px}
}

/* grid children must be allowed to shrink or long SVG content widens the page */
.split>*,.unitcard>*,.cards>*,.form-grid>*,.contact__grid>*{min-width:0}
@media (max-width:820px){
  .bp-lbl{display:none}
  .bp-lbl.bp-keep{display:block;font-size:11px}
  .bp-txt{font-size:15px}
  .bp-legend{gap:6px 14px}
}
.hero{overflow:hidden}
body{overflow-x:hidden}

/* ---------- clients ticker (rebuilt) ---------- */
.clients-rail{display:flex;align-items:center;height:74px;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:0;padding:0}
.clients-rail + .clients-rail{border-top:0}
.clients-track{display:flex;align-items:center;width:max-content;animation:slide 72s linear infinite}
.clients-rail:nth-child(odd) .clients-track{animation-direction:normal}
.clients-track span{display:inline-flex;align-items:center;padding:0;border:0;font-family:var(--mono);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.clients-track span::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:.55;margin:0 clamp(18px,2.4vw,34px)}
#clients{padding-bottom:clamp(28px,3vw,52px)}
#clients + .sec{padding-top:clamp(34px,4vw,64px)}
.band .shead{margin-bottom:clamp(10px,2vw,22px)}
.mbar a.wa,.mbar a.primary{background:#0F6B4F;border-color:#0F6B4F;color:#fff}