/* ============================================================
   Miami layer — sunset palette, billboard type
   Loaded last: overrides the paper/ink base.
   ============================================================ */
:root{
  --cream:#FFF6EC;
  --sand:#FFE3C8;
  --coral:#FF5A36;
  --coral-deep:#E4401F;
  --pink:#EF2B6B;
  --aqua:#12B7C6;
  --teal:#06414F;
  --teal-2:#0A5A6B;
  --palm:#0E6B52;
  --ink:#0B2B33;
  --ink-2:#1E4650;
  --muted:#6E8A8F;
  --line:rgba(11,43,51,.14);
  --line-strong:rgba(11,43,51,.3);

  /* base tokens remapped */
  --paper:var(--cream);
  --paper-2:var(--sand);
  --paper-3:#FFFCF6;
  --accent:var(--coral);

  --serif:'Archivo','Helvetica Neue',Arial,sans-serif;
  --sans:'Archivo','Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
}

/* ---------- type ---------- */
body{font-family:var(--sans);font-weight:400;color:var(--ink);background:var(--cream)}
.d1,.d2,.d3,.serif{font-family:var(--sans);font-weight:800;letter-spacing:-.035em;line-height:.94}
.d1{font-size:clamp(2.6rem,6.6vw,5.9rem);line-height:.9}
.d2{font-size:clamp(1.9rem,4.1vw,3.5rem);line-height:.96}
.d3{font-size:clamp(1.35rem,2.1vw,1.9rem);letter-spacing:-.02em}
.d1 em,.d2 em,.d3 em{font-style:normal;color:var(--coral)}
.eyebrow{color:var(--coral);letter-spacing:.18em;font-weight:500}
.eyebrow .dot{background:var(--coral);width:6px;height:6px}
.lede{color:var(--ink-2)}
.mono{color:var(--muted)}

/* ---------- header ---------- */
.hdr{background:color-mix(in srgb,var(--cream) 82%,transparent)}
.hdr.is-stuck{background:color-mix(in srgb,var(--cream) 95%,transparent);border-bottom-color:var(--line)}
.brand__name{font-weight:800;letter-spacing:-.02em}
.brand__sub{color:var(--coral)}
.brand__mark{border-color:var(--coral);color:var(--coral);background:rgba(255,90,54,.06)}
.nav a{color:var(--ink)}
.nav a::after{background:var(--coral);height:2px}
.tel-btn{background:var(--coral);border-radius:100px}
.tel-btn:hover{background:var(--coral-deep)}
.tel-btn--wa{background:var(--palm)}
.tel-btn--wa:hover{background:#0A5340}
.clock{color:var(--muted)}
.clock .pulse{background:var(--coral)}

/* ---------- hero: sunset sky ---------- */
.hero{background:linear-gradient(180deg,#FFD2A6 0%,#FFE0C4 34%,#FFF1E0 62%,var(--cream) 100%);overflow:hidden}
.hero::after{content:"";position:absolute;left:50%;top:-38vh;width:min(120vw,1250px);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(255,90,54,.34) 0%, rgba(255,90,54,.16) 42%, rgba(255,214,166,0) 70%);pointer-events:none}
.hero .wrap{position:relative;z-index:2}
.rays{opacity:.45}
.rays circle{stroke:rgba(11,43,51,.1)}
.rays line{stroke:rgba(255,90,54,.28)}
.hero h1{color:var(--ink)}
.hero__facts{border-top-color:var(--line-strong)}
.hero__facts b{color:var(--ink);font-weight:800}
.hero__facts span{color:var(--ink-2)}
.tilt__badge{background:var(--pink);color:#fff}
.caption{color:var(--ink-2)}
.frame{background:var(--sand)}
.crop::before,.crop::after{border-color:#fff}

/* ---------- buttons ---------- */
.btn{border-radius:100px;letter-spacing:.08em;font-weight:600}
.btn--ink{background:var(--teal);border-color:var(--teal);color:var(--cream)}
.btn--ink:hover{background:var(--coral);border-color:var(--coral)}
.btn--ghost{border-color:var(--line-strong);color:var(--ink)}
.btn--ghost:hover{background:var(--teal);border-color:var(--teal);color:var(--cream)}
.btn--wa{background:var(--palm);border-color:var(--palm);color:#fff}
.btn--wa:hover{background:#0A5340;border-color:#0A5340}
.btn--wa .wa-dot{background:#7BF5C0;box-shadow:0 0 0 3px rgba(123,245,192,.22)}

/* ---------- ticker ---------- */
.ticker{background:var(--coral);border:0;color:#fff}
.ticker__item{color:#fff;font-weight:500}
.ticker__item i{background:#fff;opacity:.75}

/* ---------- sections ---------- */
.sec--sand{background:var(--sand)}
.shead__num{color:var(--coral)}
.shead h2{color:var(--ink)}
.rule{background:var(--line)}

/* ---------- cards ---------- */
.card{background:var(--paper-3);border-color:var(--line);border-top:3px solid var(--aqua)}
.card:hover{border-color:var(--line-strong);box-shadow:0 26px 44px -32px rgba(6,65,79,.5)}
.card__no{color:var(--coral);font-weight:500}
.card h3{color:var(--ink);font-weight:700;letter-spacing:-.02em}
.card p{color:var(--ink-2)}
.card::after{background:var(--coral);height:3px}
.card:hover::after{width:100%}

/* ---------- manifest rows ---------- */
.manifest{border-top-color:var(--line-strong)}
.unit{border-bottom-color:var(--line)}
.unit__no{color:var(--coral)}
.unit__name{font-weight:700;letter-spacing:-.02em}
.unit__name small{color:var(--muted)}
.unit__spec{color:var(--ink-2)}
.unit:hover{background:rgba(255,227,200,.5)}
.unit__go{color:var(--muted)}
.unit:hover .unit__go{color:var(--coral)}

/* ---------- dark band -> deep ocean ---------- */
.band{background:var(--teal);color:var(--cream)}
.band .eyebrow{color:#FFB59E}
.band .lede{color:rgba(255,246,236,.82)}
.band h2{color:#fff}
.ringwrap{border-color:rgba(255,246,236,.16)}
.ringwrap::after{background:radial-gradient(closest-side,rgba(239,43,107,.35),transparent 72%)}
.ring__face{border-color:rgba(255,246,236,.28);background:#0A2E36}
.ring__face b{background:rgba(255,90,54,.92)}
.ring__hint span{color:rgba(255,246,236,.7)}
.ring__bar{background:rgba(255,246,236,.22)}
.ring__bar i{background:var(--coral)}
.stills figcaption{color:rgba(255,246,236,.7)}

/* ---------- blueprint ---------- */
.blueprint{background:var(--paper-3);border-color:var(--line)}
.blueprint::before{background-image:linear-gradient(rgba(18,183,198,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(18,183,198,.16) 1px,transparent 1px)}
.bp-line{stroke:var(--teal)}
.bp-thin{stroke:rgba(6,65,79,.42)}
.bp-dim{stroke:var(--coral)}
.bp-fill{fill:rgba(18,183,198,.07)}
.bp-lbl{fill:var(--coral)}
.bp-lbl--ink{fill:rgba(6,65,79,.6)}
.bp-txt{fill:var(--teal);font-weight:500}
.bp-legend span{color:var(--ink-2)}
.bp-legend span b{color:var(--coral)}

/* ---------- steps / process ---------- */
.steps{border-top-color:var(--line-strong)}
.step{border-right-color:var(--line)}
.step__no{color:var(--coral);font-weight:600}
.step h3{font-weight:700;letter-spacing:-.02em}
.step p{color:var(--ink-2)}

/* ---------- clients ---------- */
.clients-rail{border-color:var(--line)}
.clients-track span{color:var(--ink-2);font-weight:500}
.clients-track span::after{background:var(--pink);opacity:.8}

/* ---------- contact ---------- */
.contact{background:var(--teal);color:var(--cream)}
.contact h2{color:#fff}
.big-tel{color:#fff;border-bottom-color:rgba(255,246,236,.3);font-weight:800;letter-spacing:-.03em}
.big-tel:hover{color:var(--coral);border-color:var(--coral)}
.contact__rows a,.contact__rows div{border-color:rgba(255,246,236,.2)}
.contact__rows .k{color:#FFB59E}
.contact__rows .v{color:#fff}
.contact__rows a:hover .v{color:var(--coral)}
.contact .eyebrow{color:#FFB59E}
.contact .btn--ghost{color:var(--cream);border-color:rgba(255,246,236,.4)}
.contact .btn--ghost:hover{background:var(--coral);border-color:var(--coral);color:#fff}

/* ---------- footer ---------- */
.ftr{background:var(--cream);border-top-color:var(--line)}
.ftr h4{color:var(--coral)}
.ftr a{color:var(--ink-2)}
.ftr a:hover{color:var(--coral)}
.ftr__base{color:var(--muted);border-top-color:var(--line)}
.ftr__logo{filter:none}

/* ---------- chips / filters / contact page ---------- */
.chip{border-color:var(--line-strong);color:var(--ink-2)}
.chip:hover{border-color:var(--coral);color:var(--coral)}
.chip[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:#fff}
.tags span{color:var(--teal-2);border-color:var(--line)}
.specs li{border-bottom-color:var(--line);color:var(--ink-2)}
.specs li::before{background:var(--aqua)}
.note{color:var(--muted)}
.aside-note{background:var(--paper-3);border-color:var(--line)}
.field input,.field textarea,.field select{border-bottom-color:var(--line-strong)}
.field input:focus,.field textarea:focus{border-bottom-color:var(--coral)}
.checks label{border-color:var(--line-strong);color:var(--ink-2)}
.field label{color:var(--coral)}
.unitcard{border-bottom-color:var(--line)}
.page-head{border-bottom-color:var(--line);background:linear-gradient(180deg,#FFE3C8 0%,var(--cream) 100%)}
.page-head h1{color:var(--ink)}

/* ---------- mobile bar ---------- */
.mbar{background:var(--teal);border-top-color:rgba(255,246,236,.16)}
.mbar a{border-color:rgba(255,246,236,.24);color:#fff}
.mbar a.wa,.mbar a.primary{background:var(--palm);border-color:var(--palm);color:#fff}

/* ---------- misc ---------- */
.grain{opacity:.32}
::selection{background:var(--pink);color:#fff}
.mnav{background:var(--cream)}
.mnav a{border-bottom-color:var(--line)}
.burger{border-color:var(--line-strong)}
.burger span,.burger span::before,.burger span::after{background:var(--ink)}
.total{color:var(--teal)}

/* ---------- cards: fill the space, cycle the colours ---------- */
.cards--2 .card{min-height:0;padding:clamp(20px,2.2vw,28px);gap:10px;justify-content:flex-start}
.cards--2 .card:nth-child(2){border-top-color:var(--coral)}
.cards--2 .card:nth-child(3){border-top-color:var(--pink)}
.cards--2 .card:nth-child(4){border-top-color:var(--palm)}
.card__art{top:16px;right:16px;bottom:auto;width:74px;opacity:.14}
.card:hover .card__art{opacity:.26;transform:translateY(-2px) rotate(-2deg)}
.cards--2 .card h3{font-size:clamp(1.25rem,1.7vw,1.7rem);font-weight:800;letter-spacing:-.03em;max-width:70%}
.cards--2 .card p{font-size:.95rem;max-width:52ch}

/* ---------- ring: smaller frames, cleaner drum ---------- */
.ringwrap{height:clamp(250px,22vw,300px);perspective:1400px}
.ring__face{width:clamp(150px,15vw,212px);margin:calc(-1 * clamp(56px,5.6vw,79px)) 0 0 calc(-1 * clamp(75px,7.5vw,106px))}
.band .sec,.band{padding-top:clamp(44px,5vw,84px);padding-bottom:clamp(44px,5vw,84px)}

/* ---------- footer brand lockup ---------- */
.ftr__brand{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.ftr__brand .mk{width:56px;height:56px;border:1.5px solid var(--coral);border-radius:50%;display:grid;place-items:center;color:var(--coral);flex:none}
.ftr__brand .mk svg{width:30px;height:30px}
.ftr__brand .nm{font-weight:800;letter-spacing:-.03em;font-size:1.16rem;line-height:1}
.ftr__brand .sb{font-family:var(--mono);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--coral);margin-top:6px}
@media (max-width:560px){.bp-lbl.bp-keep{font-size:11px}}

/* ---------- section heads: label above the headline ---------- */
.shead{grid-template-columns:1fr !important;gap:12px !important;margin-bottom:clamp(22px,2.6vw,36px)}
.shead__num{padding-top:0;font-size:.68rem;letter-spacing:.2em;color:var(--coral);font-weight:600}
.shead__num::before{content:"";display:inline-block;width:26px;height:2px;background:var(--coral);vertical-align:middle;margin-right:12px}
.shead h2{max-width:20ch}
.shead p{margin-top:14px;max-width:56ch}

/* ---------- card affordance ---------- */
.card__go{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:12px;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--coral);font-weight:500}
.card:hover .card__go{color:var(--teal)}
.card__go svg{width:13px;height:13px;transition:transform .3s var(--ease)}
.card:hover .card__go svg{transform:translate(3px,-3px)}

/* ---------- brand mark: filled sun badge ---------- */
.brand__mark{background:var(--coral);border-color:var(--coral);color:#fff}
.ftr__brand .mk{background:var(--coral);color:#fff;border-color:var(--coral)}
.ring__face{border-radius:3px;box-shadow:0 30px 60px -40px #000}
.ringwrap{height:clamp(240px,20vw,280px)}

/* ---------- carousel: bigger, no box, floor glow ---------- */
.ringwrap{border:0 !important;height:clamp(300px,26vw,380px) !important;max-width:1180px;overflow:visible}
.ringwrap::after{bottom:-30%;height:80%}
.ring__face{width:clamp(210px,21vw,290px) !important;aspect-ratio:4/3.1;margin:calc(-1 * clamp(85px,8.4vw,116px)) 0 0 calc(-1 * clamp(105px,10.5vw,145px)) !important}
.ring__face b{font-size:.56rem;letter-spacing:.16em;background:var(--coral)}
.ring__hint{margin-top:clamp(6px,1.4vw,18px)}

/* ---------- stills: square filmstrip ---------- */
.stills{grid-template-columns:repeat(4,1fr) !important;gap:clamp(8px,1vw,14px)}
.stills figure .frame{aspect-ratio:1/1 !important}
.stills img{object-fit:cover}
.stills figcaption{margin-top:7px}

@media (max-width:820px){
  .ringwrap{height:auto !important}
  .stills{grid-template-columns:1fr 1fr !important}
  .stills figure .frame{aspect-ratio:1/1 !important}
}

/* ---------- ORIGINAL LOGO, just bigger ---------- */
.hdr__in{height:96px}
.brand{gap:16px}
.brand__logo{height:56px;width:auto;display:block;border-radius:4px}
.brand__meta{display:flex;flex-direction:column;gap:5px;padding-left:16px;border-left:1px solid var(--line-strong)}
.brand__sub{color:var(--coral);font-size:.56rem;letter-spacing:.18em;white-space:nowrap}
.brand__sub--2{color:var(--muted)}
.ftr .ftr__brand{display:flex;align-items:flex-start;gap:0;flex-direction:column;margin-bottom:16px}
.ftr__brand .logo{height:72px;width:auto;border-radius:4px}
.ftr .ftr__brand .mk{display:none}
.ftr__brand .nm{display:none}
.ftr__brand .sb{margin-top:9px}
@media (max-width:900px){
  .brand__meta{display:none}
  .brand__logo{height:44px}
  .hdr__in{height:76px}
}
@media (max-width:560px){
  .brand__logo{height:40px}
}

/* ---------- continuous sunset sky behind header + hero ---------- */
body{
  background-color:var(--cream);
  background-image:linear-gradient(180deg,#FFD2A6 0%,#FFDDBE 16%,#FFEBD8 32%,#FFF6EC 48%);
  background-repeat:no-repeat;
  background-size:100% 980px;
}
.hero{background:none}
.hdr{background:transparent}
.hdr.is-stuck{background:color-mix(in srgb,var(--cream) 92%,transparent)}
.btn--ghost{border-color:rgba(11,43,51,.42);color:var(--ink)}
.page-head{background:none}
@media (max-width:900px){.brand__logo{height:46px}}

/* ---------- header must sit on the sky, not on its own plate ---------- */
.hdr{background:transparent !important;backdrop-filter:none}
.hdr.is-stuck{background:color-mix(in srgb,var(--cream) 94%,transparent) !important;backdrop-filter:blur(14px)}

/* ---------- hero photo: favour the vehicle in the crop ---------- */
.hero__media .frame img{object-position:50% 58%}

/* ---------- facts grid: even rules on mobile ---------- */
@media (max-width:820px){
  .hero__facts{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line)}
  .hero__facts div{margin:0;padding:16px 18px 16px 0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);width:auto}
  .hero__facts div:nth-child(even){border-right:0;padding-left:18px}
}
@media (max-width:900px){.brand__logo{height:52px}}
@media (max-width:560px){.brand__logo{height:48px}}

/* ---------- mobile: action bar cannot clip, buttons side by side ---------- */
.mbar__in{grid-template-columns:1.1fr 1fr 1fr !important;gap:8px}
.mbar a{min-width:0;padding:0 8px;letter-spacing:.06em;font-size:.64rem}
.mbar a svg{flex:none}
@media (max-width:560px){
  .hero__actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .hero__actions .btn{width:100%;justify-content:center;padding:14px 12px;font-size:.68rem}
  .mbar a{font-size:.6rem;letter-spacing:.04em;gap:5px}
  .mbar a svg{width:13px;height:13px}
}

/* ---------- mobile hero: photo comes before the spec table ---------- */
@media (max-width:1080px){
  .hero__grid{display:flex !important;flex-direction:column;gap:clamp(18px,3vw,28px)}
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2;margin-top:6px}
  .hero__sub{order:3}
  .hero__actions{order:4;margin-top:4px}
  .hero__media{order:5;margin-top:4px}
  .hero__facts{order:6;margin-top:6px}
}

/* buttons never wrap their label */
.hero__actions .btn{white-space:nowrap}
@media (max-width:560px){
  .hero__actions .btn{font-size:.6rem;letter-spacing:.05em;padding:13px 8px;gap:6px}
  .hero__actions .btn svg{width:12px;height:12px}
}

/* ---------- logo: actually big ---------- */
.brand__logo{height:72px !important;width:auto}
.hdr__in{height:112px}
@media (max-width:1100px){.brand__logo{height:58px !important}.hdr__in{height:88px}}
@media (max-width:900px){.brand__logo{height:52px !important}.hdr__in{height:80px}}

/* ---------- warm the photos so they sit in the sunset palette ---------- */
.hero__media .frame img,.hero__stack img,.stills img,.ring__face img{
  filter:saturate(1.08) contrast(1.04) sepia(.06) brightness(1.02);
}
.hero__media .frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,143,92,.10),rgba(255,246,236,.04) 45%,rgba(6,65,79,.12));
}
.hero__stack img{border-radius:2px}