/* =============================================================================
   JCC — cinematic layer

   Everything here is prefixed .cx- so it can sit on top of the existing public
   stylesheet without touching a single rule already in layouts/public.blade.php.
   The palette is the site's own: indigo #2e3192, red #d91423, ink #0e1330.
============================================================================= */

html{scroll-snap-type:y proximity}

:root{
  --cx-ink:#0e1330;
  --cx-ink-2:#161c42;
  --cx-steel:#2e3192;
  --cx-accent:#d91423;
  --cx-amber:#f26522;      /* the orange the coaches are actually painted */
  --cx-paper:#f6f7fb;
  --cx-line:rgba(255,255,255,.14);
  --cx-line-d:#e3e6ef;
  --cx-ease:cubic-bezier(.22,1,.36,1);
}

/* ---------------------------------------------------------------- reveals */
.cx-rv{opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--cx-ease),transform .9s var(--cx-ease)}
.cx-rv.in{opacity:1;transform:none}
.cx-rv[data-d="1"]{transition-delay:.08s}
.cx-rv[data-d="2"]{transition-delay:.16s}
.cx-rv[data-d="3"]{transition-delay:.24s}
.cx-rv[data-d="4"]{transition-delay:.32s}
.cx-rv[data-d="5"]{transition-delay:.4s}

/* a line of type that wipes up out of its own box */
.cx-mask{display:block;overflow:hidden}
.cx-mask > span{display:block;transform:translateY(105%);
  transition:transform 1.05s var(--cx-ease)}
.cx-mask.in > span{transform:none}

@media (prefers-reduced-motion:reduce){
  .cx-rv,.cx-mask > span{opacity:1!important;transform:none!important;transition:none!important}
}

/* ------------------------------------------------------------------ cursor */
.cx-cursor{position:fixed;left:0;top:0;z-index:9998;width:30px;height:30px;
  border:1px solid rgba(46,49,146,.55);border-radius:50%;pointer-events:none;
  transform:translate(-50%,-50%);
  transition:width .3s var(--cx-ease),height .3s var(--cx-ease),
             background .3s,border-color .3s,opacity .3s;
  opacity:0;mix-blend-mode:normal}
.cx-cursor.on{opacity:1}
.cx-cursor i{position:absolute;left:50%;top:50%;width:4px;height:4px;border-radius:50%;
  background:var(--cx-accent);transform:translate(-50%,-50%);transition:opacity .25s}
.cx-cursor.hot{width:62px;height:62px;background:rgba(217,20,35,.1);
  border-color:rgba(217,20,35,.5)}
.cx-cursor.hot i{opacity:0}
.cx-cursor.drag{width:74px;height:74px;background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.6)}
.cx-cursor.drag::after{content:"DRAG";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);font:600 7px/1 'DM Sans',sans-serif;
  letter-spacing:.22em;color:#fff}
body.cx-cursor-on{cursor:none}
body.cx-cursor-on a,body.cx-cursor-on button,body.cx-cursor-on .cx-hot{cursor:none}
@media (hover:none),(max-width:900px){.cx-cursor{display:none}body.cx-cursor-on{cursor:auto}}

/* ================================================================= H E R O */
/* The public layout dresses its hero through the id #sh, and an id beats a
   class however late this file loads. The nav's scroll-spy reads that same id,
   so the old hero is switched off here by name rather than renamed away. */
.cx-hero,#sh.cx-hero{position:relative;background:
    radial-gradient(120% 90% at 78% 12%,rgba(242,101,34,.20) 0%,transparent 55%),
    radial-gradient(90% 80% at 8% 88%,rgba(46,49,146,.55) 0%,transparent 60%),
    linear-gradient(168deg,#0b0f28 0%,var(--cx-ink) 46%,#141a3d 100%);
  color:#fff;overflow:hidden;isolation:isolate;
  display:block;min-height:0;padding:0;text-align:left}
#sh.cx-hero::before{background-image:none;background:none}
.cx-hero::after,#sh.cx-hero::after{content:"";position:absolute;inset:0;
  width:auto;height:auto;top:auto;left:auto;transform:none;border-radius:0;
  pointer-events:none;z-index:6;
  background:radial-gradient(120% 120% at 50% 40%,transparent 55%,rgba(4,6,20,.55) 100%)}

/* faint blueprint grid, the drawing board the coach is designed on */
.cx-grid{position:absolute;inset:0;z-index:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(85% 75% at 50% 45%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(85% 75% at 50% 45%,#000 20%,transparent 78%)}

.cx-hero-in{position:relative;z-index:5;max-width:1340px;margin:0 auto;width:100%;
  min-height:100svh;display:flex;flex-direction:column;padding:94px 24px 18px}
.cx-hero-copy{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:start}

.cx-eyebrow{display:inline-flex;align-items:center;gap:10px;
  font:600 10px/1 'DM Sans',sans-serif;letter-spacing:.26em;text-transform:uppercase;
  color:#ff8a94}
.cx-eyebrow::before{content:"";width:26px;height:1px;background:var(--cx-accent)}

.cx-h1{font-family:'Cormorant Garamond',serif;font-weight:700;
  font-size:clamp(32px,4.1vw,58px);line-height:.98;letter-spacing:-.035em;
  color:#fff;margin:14px 0 0}
.cx-h1 em{font-style:italic;
  background:linear-gradient(96deg,#fff 0%,#ffb08a 38%,var(--cx-amber) 72%,var(--cx-accent) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.cx-lede{max-width:46ch;margin-top:12px;color:rgba(255,255,255,.72);
  font-size:14px;line-height:1.65}

.cx-hero-side{text-align:right;padding-top:18px}
.cx-hero-side p{color:rgba(255,255,255,.45);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;line-height:1.8}
.cx-hero-side b{display:block;font-family:'Cormorant Garamond',serif;
  font-size:22px;color:#fff;letter-spacing:-.02em}

/* ------------------------------------------------------- the 360 turntable */
.cx-stage{position:relative;flex:1 1 auto;min-height:clamp(230px,34vh,400px);margin-top:16px;
  border-radius:22px;overflow:hidden;
  background:
    radial-gradient(78% 120% at 50% 106%,rgba(242,101,34,.26) 0%,transparent 62%),
    linear-gradient(180deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,.015) 100%);
  border:1px solid var(--cx-line);
  box-shadow:0 40px 120px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.08)}
.cx-stage-in{position:relative;width:100%;height:100%;min-height:210px;
  touch-action:pan-y;user-select:none;cursor:grab}
.cx-stage-in:active{cursor:grabbing}

/* every angle is stacked; only the two either side of the camera are painted */
.cx-frame{position:absolute;inset:0;opacity:0;will-change:opacity;
  display:flex;align-items:center;justify-content:center}
.cx-frame img{width:100%;height:100%;object-fit:contain;object-position:center 54%;padding:6px 2% 24px;
  -webkit-user-drag:none;user-select:none;
  filter:drop-shadow(0 34px 40px rgba(0,0,0,.55))}

/* the turntable disc it all sits on */
.cx-disc{position:absolute;left:50%;bottom:9%;width:42%;height:13%;
  transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(242,101,34,.34),transparent 72%);
  filter:blur(11px)}
.cx-ring{position:absolute;left:50%;bottom:7%;width:50%;aspect-ratio:5/1;
  transform:translateX(-50%);border:1px solid rgba(255,255,255,.13);
  border-radius:50%;pointer-events:none}
.cx-ring::after{content:"";position:absolute;inset:9% 7%;border-radius:50%;
  border:1px dashed rgba(255,255,255,.08)}

.cx-stage-hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
  z-index:4;display:flex;align-items:center;gap:10px;padding:8px 16px;
  border:1px solid var(--cx-line);border-radius:999px;
  background:rgba(8,11,32,.5);backdrop-filter:blur(9px);
  font:600 9.5px/1 'DM Sans',sans-serif;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.72);transition:opacity .4s}
.cx-stage.spun .cx-stage-hint{opacity:0}
.cx-stage-hint i{width:14px;height:14px;border:1px solid currentColor;border-radius:50%;
  position:relative}
.cx-stage-hint i::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:1px;
  background:currentColor;transform:translate(-50%,-50%);
  animation:cxNudge 1.7s var(--cx-ease) infinite}
@keyframes cxNudge{0%,100%{transform:translate(-140%,-50%)}50%{transform:translate(40%,-50%)}}

/* the angle read-out on the left of the stage */
.cx-angle{position:absolute;left:20px;top:20px;z-index:4;
  font:600 9.5px/1.9 'DM Sans',sans-serif;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.5)}
.cx-angle b{display:block;font-family:'Cormorant Garamond',serif;font-size:26px;
  letter-spacing:-.01em;color:#fff;font-weight:700}

/* the eight angle pips down the right of the stage */
.cx-pips{position:absolute;right:18px;top:50%;transform:translateY(-50%);z-index:4;
  display:flex;flex-direction:column;gap:9px}
.cx-pip{width:22px;height:2px;border:0;padding:0;border-radius:2px;
  background:rgba(255,255,255,.22);transition:background .3s,width .3s var(--cx-ease)}
.cx-pip.on{background:var(--cx-accent);width:34px}

.cx-hero-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  margin-top:14px;background:var(--cx-line);border:1px solid var(--cx-line);
  border-radius:14px;overflow:hidden;flex:none}
.cx-hero-strip > div{background:rgba(9,12,34,.66);padding:10px 16px}
.cx-hero-strip b{display:block;font-family:'Cormorant Garamond',serif;font-weight:700;
  font-size:clamp(20px,2.3vw,28px);line-height:1;color:#fff}
.cx-hero-strip span{display:block;margin-top:4px;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.5)}

@media(max-width:900px){
  .cx-hero-in{min-height:auto;padding:96px 18px 32px}
  .cx-hero-copy{grid-template-columns:1fr}
  .cx-hero-side{display:none}
  .cx-stage{min-height:44vw}
  .cx-hero-strip{grid-template-columns:1fr 1fr}
  .cx-angle,.cx-pips{display:none}
}

/* --------------------------------------------------------------- marquee */
.cx-marq{background:var(--cx-ink);color:#fff;padding:17px 0;overflow:hidden;
  border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.cx-marq-t{display:flex;width:max-content;animation:cxMarq 34s linear infinite}
.cx-marq:hover .cx-marq-t{animation-play-state:paused}
.cx-marq span{display:inline-flex;align-items:center;gap:22px;padding-right:22px;
  font-family:'Cormorant Garamond',serif;font-size:24px;letter-spacing:-.01em;
  white-space:nowrap;color:rgba(255,255,255,.9)}
.cx-marq span::after{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--cx-accent)}
@keyframes cxMarq{to{transform:translateX(-50%)}}

/* ------------------------------------------------------------ section head */
.cx-sec{padding:clamp(64px,8vw,116px) 0}
.cx-wrap{max-width:1340px;margin:0 auto;padding:0 24px}
.cx-head{max-width:760px;margin-bottom:clamp(34px,4vw,58px)}
.cx-h2{font-family:'Cormorant Garamond',serif;font-weight:700;
  font-size:clamp(32px,4.6vw,62px);line-height:1.02;letter-spacing:-.03em;
  color:var(--cx-ink);margin-top:16px}
.cx-h2 em{font-style:italic;color:var(--cx-steel)}
.cx-sub{margin-top:18px;color:#4c5266;font-size:15px;line-height:1.8;max-width:58ch}
.cx-dark .cx-h2{color:#fff}
.cx-dark .cx-h2 em{background:linear-gradient(96deg,#fff,var(--cx-amber));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.cx-dark .cx-sub{color:rgba(255,255,255,.66)}

/* ------------------------------------------------------------- build types */
.cx-types{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.cx-type{position:relative;border:1px solid var(--cx-line-d);border-radius:18px;
  background:#fff;overflow:hidden;transition:transform .55s var(--cx-ease),
  box-shadow .55s var(--cx-ease),border-color .4s;display:block}
.cx-type:hover{transform:translateY(-7px);border-color:transparent;
  box-shadow:0 26px 60px -22px rgba(14,19,48,.34)}
.cx-type-img{position:relative;aspect-ratio:16/9;overflow:hidden;
  background:linear-gradient(160deg,#eef0f8,#dfe3f2)}
.cx-type-img img{width:100%;height:100%;object-fit:contain;padding:4px 6px 10px;
  transition:transform .8s var(--cx-ease)}
.cx-type:hover .cx-type-img img{transform:scale(1.07)}
.cx-type-tag{position:absolute;left:13px;top:13px;padding:5px 10px;border-radius:999px;
  background:var(--cx-ink);color:#fff;font:600 8.5px/1 'DM Sans',sans-serif;
  letter-spacing:.18em;text-transform:uppercase}
.cx-type-b{padding:20px 20px 22px}
.cx-type-b h3{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:700;
  color:var(--cx-ink);line-height:1.1}
.cx-type-b p{margin-top:9px;font-size:12.8px;line-height:1.7;color:#6b7186}
.cx-type-b ul{margin-top:13px;padding-top:13px;border-top:1px solid var(--cx-line-d);
  list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.cx-type-b li{font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cx-steel);background:#eef0f9;padding:4px 8px;border-radius:6px}
@media(max-width:1080px){.cx-types{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cx-types{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- anatomy */
.cx-anat{background:
   radial-gradient(70% 60% at 82% 8%,rgba(46,49,146,.5) 0%,transparent 58%),
   linear-gradient(180deg,#0b0f28,#12173a);color:#fff;overflow:hidden}
.cx-anat-stage{position:relative;margin-top:12px;border-radius:22px;overflow:hidden;
  border:1px solid var(--cx-line);background:#f7f8fb}
.cx-anat-stage img{width:100%;height:auto;display:block}
/* hotspots sit in percentage space so they track the diagram at any width */
.cx-spot{position:absolute;width:16px;height:16px;border-radius:50%;border:0;padding:0;
  background:var(--cx-accent);cursor:pointer;transform:translate(-50%,-50%);
  box-shadow:0 0 0 0 rgba(217,20,35,.5)}
.cx-spot::after{content:"";position:absolute;inset:-7px;border-radius:50%;
  border:1px solid rgba(217,20,35,.55);animation:cxPing 2.6s var(--cx-ease) infinite}
.cx-spot.on{background:var(--cx-ink)}
.cx-spot span{position:absolute;left:50%;bottom:calc(100% + 12px);transform:translateX(-50%);
  white-space:nowrap;padding:7px 11px;border-radius:8px;background:var(--cx-ink);
  color:#fff;font:600 10px/1 'DM Sans',sans-serif;letter-spacing:.1em;
  text-transform:uppercase;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
.cx-spot:hover span,.cx-spot.on span{opacity:1;transform:translateX(-50%) translateY(-3px)}
@keyframes cxPing{0%{transform:scale(.8);opacity:1}70%,100%{transform:scale(2.1);opacity:0}}

.cx-anat-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:34px;align-items:start}
@media(max-width:980px){.cx-anat-grid{grid-template-columns:1fr}}

.cx-parts{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}
.cx-parts button{border:1px solid var(--cx-line);background:rgba(255,255,255,.045);
  color:rgba(255,255,255,.74);border-radius:8px;padding:7px 11px;
  font:500 11px/1 'DM Sans',sans-serif;letter-spacing:.04em;transition:.3s}
.cx-parts button:hover,.cx-parts button.on{background:var(--cx-accent);color:#fff;
  border-color:var(--cx-accent)}

.cx-spec{width:100%;border-collapse:collapse;margin-top:22px;
  border:1px solid var(--cx-line);border-radius:14px;overflow:hidden}
.cx-spec th,.cx-spec td{padding:12px 15px;text-align:left;font-size:12.5px;
  border-bottom:1px solid var(--cx-line)}
.cx-spec th{color:rgba(255,255,255,.5);font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;font-size:10px;width:44%}
.cx-spec td{color:#fff;font-weight:500}
.cx-spec tr:last-child th,.cx-spec tr:last-child td{border-bottom:0}

/* ---------------------------------------------------------------- process */
.cx-proc{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;
  background:var(--cx-line-d);border:1px solid var(--cx-line-d);border-radius:18px;
  overflow:hidden}
.cx-step{background:#fff;padding:30px 24px 34px;position:relative;overflow:hidden;
  transition:background .45s}
.cx-step:hover{background:var(--cx-paper)}
.cx-step > b{position:absolute;right:14px;bottom:-16px;
  font-family:'Cormorant Garamond',serif;font-size:96px;line-height:1;font-weight:700;
  color:rgba(46,49,146,.07)}
.cx-step small{font:600 9.5px/1 'DM Sans',sans-serif;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cx-accent)}
.cx-step h3{font-family:'Cormorant Garamond',serif;font-size:21px;font-weight:700;
  color:var(--cx-ink);margin:14px 0 9px;position:relative}
.cx-step p{font-size:12.5px;line-height:1.75;color:#6b7186;position:relative}
.cx-step i{display:block;width:26px;height:2px;background:var(--cx-accent);margin-top:18px}
@media(max-width:1080px){.cx-proc{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cx-proc{grid-template-columns:1fr}}

/* ---------------------------------------------------- work / depth gallery */
.cx-work{background:var(--cx-ink);color:#fff;overflow:hidden}
.cx-gal{position:relative;height:min(70vh,560px);perspective:1400px;
  touch-action:pan-y;user-select:none;cursor:grab}
.cx-gal:active{cursor:grabbing}
.cx-plate{position:absolute;left:50%;top:50%;width:min(46vw,430px);aspect-ratio:4/3;
  margin-left:calc(min(46vw,430px) / -2);margin-top:calc(min(46vw,430px) * .375 * -1);
  border-radius:16px;overflow:hidden;opacity:0;visibility:hidden;
  border:1px solid rgba(255,255,255,.16);background:#11162f;
  will-change:transform,opacity;backface-visibility:hidden}
.cx-plate img{width:100%;height:100%;object-fit:cover}
.cx-plate figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 20px 18px;
  background:linear-gradient(180deg,transparent,rgba(6,8,24,.92));
  font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:700}
.cx-plate figcaption small{display:block;font-family:'DM Sans',sans-serif;
  font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cx-amber);margin-bottom:5px}
.cx-gal-hint{text-align:center;margin-top:14px;font:600 9.5px/1 'DM Sans',sans-serif;
  letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.42)}

/* --------------------------------------------------------------- video wall */
.cx-vids{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:14px}
.cx-vid{position:relative;border-radius:16px;overflow:hidden;background:#0d1230;
  border:1px solid var(--cx-line);aspect-ratio:16/10;display:block}
.cx-vid:first-child{grid-row:span 2;aspect-ratio:auto;min-height:340px}
.cx-vid img,.cx-vid video{width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--cx-ease);opacity:.82}
.cx-vid:hover img,.cx-vid:hover video{transform:scale(1.05);opacity:1}
.cx-vid-play{position:absolute;left:20px;bottom:20px;z-index:2;display:flex;
  align-items:center;gap:12px}
.cx-vid-play i{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.14);
  backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.35);
  display:grid;place-items:center;color:#fff;font-size:12px;flex:none;
  transition:background .4s,transform .4s var(--cx-ease)}
.cx-vid:hover .cx-vid-play i{background:var(--cx-accent);border-color:var(--cx-accent);
  transform:scale(1.09)}
.cx-vid-play span{color:#fff;font-size:13px;font-weight:600;line-height:1.35}
.cx-vid-play small{display:block;font-size:9.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:3px}
.cx-vid::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 42%,rgba(6,8,24,.86))}
@media(max-width:980px){.cx-vids{grid-template-columns:1fr 1fr}
  .cx-vid:first-child{grid-row:auto;min-height:0;aspect-ratio:16/10}}
@media(max-width:560px){.cx-vids{grid-template-columns:1fr}}

/* ------------------------------------------------------------ testimonials */
.cx-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cx-quote{border:1px solid var(--cx-line-d);border-radius:18px;background:#fff;
  padding:28px 26px 26px;position:relative;transition:transform .5s var(--cx-ease),
  box-shadow .5s var(--cx-ease)}
.cx-quote:hover{transform:translateY(-6px);box-shadow:0 24px 54px -24px rgba(14,19,48,.3)}
.cx-quote::before{content:"\201C";position:absolute;right:20px;top:2px;
  font-family:'Cormorant Garamond',serif;font-size:88px;line-height:1;
  color:rgba(46,49,146,.09)}
.cx-quote p{font-size:14px;line-height:1.85;color:#3f465c;position:relative}
.cx-quote footer{margin-top:20px;padding-top:16px;border-top:1px solid var(--cx-line-d);
  display:flex;align-items:center;gap:12px}
.cx-quote-av{width:40px;height:40px;border-radius:50%;flex:none;display:grid;
  place-items:center;background:var(--cx-steel);color:#fff;
  font-family:'Cormorant Garamond',serif;font-size:17px;font-weight:700}
.cx-quote b{display:block;font-size:13.5px;color:var(--cx-ink);font-weight:600}
.cx-quote span{display:block;font-size:11px;color:#6b7186;margin-top:2px}
.cx-stars{color:var(--cx-amber);font-size:11px;letter-spacing:2px;margin-bottom:14px}
@media(max-width:980px){.cx-quotes{grid-template-columns:1fr}}

/* ------------------------------------------------------------------- CTA */
.cx-cta{position:relative;background:linear-gradient(115deg,var(--cx-steel),#1b1f63 55%,var(--cx-ink));
  color:#fff;overflow:hidden}
.cx-cta::before{content:"";position:absolute;right:-8%;top:-40%;width:60%;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(closest-side,rgba(242,101,34,.35),transparent 70%)}
.cx-cta-in{position:relative;z-index:2;display:grid;grid-template-columns:1.3fr auto;
  gap:34px;align-items:center}
.cx-cta h2{font-family:'Cormorant Garamond',serif;font-weight:700;
  font-size:clamp(30px,4.4vw,58px);line-height:1.03;letter-spacing:-.03em}
.cx-cta p{margin-top:16px;color:rgba(255,255,255,.72);font-size:15px;line-height:1.75;
  max-width:52ch}
.cx-btns{display:flex;gap:12px;flex-wrap:wrap}
.cx-btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:999px;
  font:600 12.5px/1 'DM Sans',sans-serif;letter-spacing:.06em;border:1px solid transparent;
  transition:transform .4s var(--cx-ease),background .4s,color .4s,border-color .4s}
.cx-btn-p{background:#fff;color:var(--cx-ink)}
.cx-btn-p:hover{background:var(--cx-accent);color:#fff;transform:translateY(-2px)}
.cx-btn-o{border-color:rgba(255,255,255,.55);color:#fff;background:rgba(255,255,255,.07)}
.cx-btn-o:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)}
@media(max-width:900px){.cx-cta-in{grid-template-columns:1fr}}

/* ------------------------------------------------------------------ misc */
.cx-num{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--cx-line-d);border:1px solid var(--cx-line-d);border-radius:18px;
  overflow:hidden}
.cx-num > div{background:#fff;padding:28px 24px;text-align:center}
.cx-num b{display:block;font-family:'Cormorant Garamond',serif;font-weight:700;
  font-size:clamp(30px,3.8vw,46px);line-height:1;color:var(--cx-steel)}
.cx-num span{display:block;margin-top:8px;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#6b7186}
@media(max-width:700px){.cx-num{grid-template-columns:1fr 1fr}}

/* =============================================================================
   ASSEMBLY — the coach builds itself as the page is scrolled

   The exploded drawing was split by connectivity: the roof panel, the AC and
   frame stack, both mirrors and the two loose wheels each came away as their
   own island, and everything still joined together is the core. Each loose
   piece is laid back over the core at the exact spot it was cut from, then
   flown home across its own slice of the scroll. Nothing is faked: the parts
   you watch land are the parts out of the drawing.
============================================================================= */
.cx-asm{position:relative;background:
   radial-gradient(60% 50% at 50% 0%,#fff 0%,transparent 70%),
   linear-gradient(180deg,#fbfcfe 0%,var(--cx-paper) 60%,#eef0f7 100%);
  color:var(--cx-ink)}
/* Long on purpose. The whole point is that the coach comes together slowly
   enough to be watched, so the scene owns several screens of scroll and the
   page snaps gently from one build stage to the next. */
.cx-asm-scroll{position:relative;height:760vh;scroll-snap-align:none}
.cx-asm-snaps{position:absolute;inset:0;pointer-events:none}
.cx-asm-snaps i{position:absolute;left:0;right:0;height:1px;scroll-snap-align:start}
.cx-asm-snaps i:nth-child(1){top:0}
.cx-asm-snaps i:nth-child(2){top:25%}
.cx-asm-snaps i:nth-child(3){top:50%}
.cx-asm-snaps i:nth-child(4){top:75%}
.cx-asm-pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  justify-content:center;overflow:hidden}

.cx-asm-head{max-width:1340px;margin:0 auto;padding:0 24px;width:100%}
.cx-asm-head h2{font-family:'Cormorant Garamond',serif;font-weight:700;
  font-size:clamp(26px,3.6vw,50px);line-height:1.02;letter-spacing:-.03em;
  margin-top:12px;color:var(--cx-ink)}
.cx-asm-head h2 em{font-style:italic;color:var(--cx-steel)}

/* the drawing keeps its own aspect so the % placements stay true at any width */
.cx-asm-stage{position:relative;width:min(1180px,92vw);margin:14px auto 0;
  aspect-ratio:1523/794}
.cx-part{position:absolute;will-change:transform}
.cx-part img{width:100%;height:100%;object-fit:fill;display:block;
  filter:drop-shadow(0 12px 20px rgba(14,19,48,.16))}
.cx-part-core{will-change:auto}
.cx-part-core img{filter:drop-shadow(0 22px 34px rgba(14,19,48,.14))}

/* the stage rail across the bottom */
.cx-asm-rail{max-width:1180px;width:92vw;margin:20px auto 0;display:grid;
  grid-template-columns:repeat(4,1fr);gap:12px}
.cx-asm-rail div{position:relative;padding-top:13px;
  font:600 9.5px/1.5 'DM Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:#9aa0b4;transition:color .4s}
.cx-asm-rail div::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--cx-line-d);border-radius:2px}
.cx-asm-rail .cx-asm-bar{position:absolute;left:0;top:0;height:2px;width:0;
  background:var(--cx-accent);border-radius:2px;transition:width .12s linear}
.cx-asm-rail div.on{color:var(--cx-ink)}
.cx-asm-rail b{display:block;font-family:'Cormorant Garamond',serif;font-size:18px;
  letter-spacing:-.01em;color:inherit;font-weight:700;margin-top:3px}

.cx-asm-done{position:absolute;left:50%;top:6px;transform:translateX(-50%) translateY(-8px);
  z-index:5;display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border-radius:999px;
  background:var(--cx-ink);border:1px solid var(--cx-ink);
  font:600 9.5px/1 'DM Sans',sans-serif;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;opacity:0;transition:opacity .5s,transform .5s var(--cx-ease)}
.cx-asm-done.on{opacity:1;transform:translateX(-50%) translateY(0)}

@media(max-width:820px){
  .cx-asm-scroll{height:560vh}
  .cx-asm-rail{grid-template-columns:1fr 1fr;gap:10px}
}
@media (prefers-reduced-motion:reduce){
  .cx-asm-scroll{height:auto}
  .cx-asm-pin{position:static;height:auto;padding:60px 0}
}

/* the finished coach, sat on a soft stage */
.cx-shot{position:relative;margin-top:24px;border-radius:20px;overflow:hidden;
  border:1px solid var(--cx-line);
  background:radial-gradient(72% 110% at 50% 106%,rgba(242,101,34,.22),transparent 62%),
             linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02))}
.cx-shot img{width:100%;height:auto;display:block}

/* ------------------------------------------------------- drone / spec read */
.cx-drone{position:relative;overflow:hidden;background:#0b0f28}
.cx-drone-img{position:relative;border-radius:22px;overflow:hidden;
  border:1px solid var(--cx-line)}
.cx-drone-img img{width:100%;height:auto;display:block}
.cx-seat{border:1px solid var(--cx-line);border-radius:16px;overflow:hidden;
  background:#0f1433;padding:14px}
.cx-seat img{width:100%;height:auto;display:block}
.cx-seat span{display:block;margin-top:10px;font:600 9.5px/1 'DM Sans',sans-serif;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.45)}

.cx-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px}
.cx-fact{border:1px solid var(--cx-line);border-radius:14px;padding:16px 16px 18px;
  background:rgba(255,255,255,.035)}
.cx-fact b{display:block;font-family:'Cormorant Garamond',serif;font-size:26px;
  font-weight:700;color:#fff;line-height:1}
.cx-fact span{display:block;margin-top:6px;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.45)}
@media(max-width:700px){.cx-facts{grid-template-columns:1fr 1fr}}

/* a long photograph that parallaxes behind its own caption */
.cx-road{position:relative;height:min(52vh,430px);overflow:hidden;
  display:grid;place-items:end start}
.cx-road img{position:absolute;inset:0;width:100%;height:120%;object-fit:cover;
  will-change:transform}
.cx-road::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,11,32,.55) 0%,transparent 35%,rgba(8,11,32,.9) 100%)}
.cx-road-cap{position:relative;z-index:2;padding:clamp(26px,5vw,62px);max-width:640px}
.cx-road-cap h3{font-family:'Cormorant Garamond',serif;font-weight:700;color:#fff;
  font-size:clamp(26px,3.6vw,46px);line-height:1.05;letter-spacing:-.02em}
.cx-road-cap p{margin-top:12px;color:rgba(255,255,255,.72);font-size:14.5px;line-height:1.75}

/* the drawing hands over to the photograph of the finished coach */
.cx-asm-explode{position:absolute;inset:0;will-change:opacity}
.cx-asm-final{position:absolute;inset:0;opacity:0;display:grid;place-items:center;
  will-change:opacity,transform}
.cx-asm-final img{width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 26px 40px rgba(14,19,48,.22))}
.cx-asm-final::before{content:"";position:absolute;left:50%;bottom:8%;width:62%;height:10%;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(242,101,34,.3),transparent 72%);
  filter:blur(12px)}

/* =============================================================================
   The rest of the home page, in the same language as the hero
============================================================================= */

/* ------------------------------------------------------------------ about */
.cx-about{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:center}
@media(max-width:940px){.cx-about{grid-template-columns:1fr}}
.cx-feats{display:grid;gap:1px;margin-top:26px;background:var(--cx-line-d);
  border:1px solid var(--cx-line-d);border-radius:16px;overflow:hidden}
.cx-feat{background:#fff;padding:18px 20px;display:flex;gap:14px;align-items:flex-start;
  transition:background .35s}
.cx-feat:hover{background:var(--cx-paper)}
.cx-feat i{width:34px;height:34px;flex:none;border-radius:9px;display:grid;place-items:center;
  background:#eceefa;color:var(--cx-steel);font-size:13px}
.cx-feat b{display:block;font-size:13.5px;color:var(--cx-ink);font-weight:600}
.cx-feat span{display:block;margin-top:3px;font-size:12px;color:#6b7186;line-height:1.6}
.cx-oems{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}
.cx-oem{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--cx-steel);
  border:1px solid var(--cx-line-d);background:#fff;padding:7px 12px;border-radius:8px}

/* the coach standing in for a photograph of the shed */
.cx-about-art{position:relative;border-radius:20px;overflow:hidden;padding:34px 24px;
  background:radial-gradient(70% 90% at 50% 108%,rgba(46,49,146,.16),transparent 62%),
             linear-gradient(160deg,#eef0f8,#dfe3f2);border:1px solid var(--cx-line-d)}
.cx-about-art img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 22px 34px rgba(14,19,48,.2))}

/* -------------------------------------------------------------- why / grid */
.cx-why{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--cx-line-d);border:1px solid var(--cx-line-d);border-radius:18px;overflow:hidden}
.cx-why > div{background:#fff;padding:28px 26px 30px;transition:background .4s}
.cx-why > div:hover{background:var(--cx-paper)}
.cx-why i{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;
  background:var(--cx-ink);color:#fff;font-size:14px}
.cx-why h3{font-family:'Cormorant Garamond',serif;font-size:21px;font-weight:700;
  color:var(--cx-ink);margin:16px 0 8px}
.cx-why p{font-size:12.8px;line-height:1.75;color:#6b7186}
@media(max-width:940px){.cx-why{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cx-why{grid-template-columns:1fr}}

/* --------------------------------------------------------------- faq */
.cx-faq{border-top:1px solid var(--cx-line-d)}
.cx-faq details{border-bottom:1px solid var(--cx-line-d)}
.cx-faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;
  font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:700;color:var(--cx-ink);
  transition:color .3s}
.cx-faq summary::-webkit-details-marker{display:none}
.cx-faq summary:hover{color:var(--cx-steel)}
.cx-faq summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-70%) rotate(45deg);transition:transform .35s var(--cx-ease)}
.cx-faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.cx-faq p{padding:0 40px 22px 0;font-size:13.5px;line-height:1.85;color:#5b6178;max-width:70ch}

/* --------------------------------------------------------------- journal */
.cx-posts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cx-post{border:1px solid var(--cx-line-d);border-radius:16px;overflow:hidden;background:#fff;
  display:block;transition:transform .5s var(--cx-ease),box-shadow .5s var(--cx-ease)}
.cx-post:hover{transform:translateY(-6px);box-shadow:0 22px 50px -24px rgba(14,19,48,.3)}
.cx-post-img{aspect-ratio:16/9;overflow:hidden;background:linear-gradient(160deg,#eef0f8,#dfe3f2)}
.cx-post-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--cx-ease)}
.cx-post:hover .cx-post-img img{transform:scale(1.06)}
.cx-post-b{padding:20px 22px 24px}
.cx-post-b small{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--cx-accent)}
.cx-post-b h3{font-family:'Cormorant Garamond',serif;font-size:21px;font-weight:700;
  color:var(--cx-ink);line-height:1.2;margin:9px 0 8px}
.cx-post-b p{font-size:12.5px;line-height:1.7;color:#6b7186}
@media(max-width:940px){.cx-posts{grid-template-columns:1fr}}

/* --------------------------------------------------------------- contact */
.cx-contact{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,3vw,44px);align-items:stretch}
@media(max-width:940px){.cx-contact{grid-template-columns:1fr}}
.cx-cline{display:flex;gap:14px;align-items:flex-start;padding:18px 0;
  border-bottom:1px solid var(--cx-line-d)}
.cx-cline i{width:36px;height:36px;flex:none;border-radius:10px;display:grid;place-items:center;
  background:var(--cx-ink);color:#fff;font-size:13px}
.cx-cline small{display:block;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:#9aa0b4}
.cx-cline b{display:block;margin-top:4px;font-size:14.5px;color:var(--cx-ink);font-weight:500}
.cx-map{border-radius:18px;overflow:hidden;border:1px solid var(--cx-line-d);min-height:340px}
.cx-map iframe{width:100%;height:100%;min-height:340px;border:0;display:block;filter:grayscale(.25)}

/* --------------------------------------------------------- parts / catalogue */
.cx-parts-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:940px){.cx-parts-row{grid-template-columns:1fr 1fr}}
.cx-pcard{border:1px solid var(--cx-line-d);border-radius:14px;background:#fff;overflow:hidden;
  transition:transform .45s var(--cx-ease),box-shadow .45s var(--cx-ease)}
.cx-pcard:hover{transform:translateY(-5px);box-shadow:0 20px 44px -22px rgba(14,19,48,.28)}
.cx-pcard-img{aspect-ratio:4/3;background:var(--cx-paper);display:grid;place-items:center;
  color:#c3c8da;font-size:22px;overflow:hidden}
.cx-pcard-img img{width:100%;height:100%;object-fit:cover}
.cx-pcard-b{padding:14px 16px 18px}
.cx-pcard-b b{display:block;font-size:13px;color:var(--cx-ink);font-weight:600;line-height:1.35}
.cx-pcard-b span{display:block;margin-top:6px;font-family:'Cormorant Garamond',serif;
  font-size:19px;font-weight:700;color:var(--cx-steel)}