/* ==========================================================================
   COMPONENTS
   ========================================================================== */

/* ---------- LOADER ---------- */
#loader{
  position: fixed; inset: 0;
  z-index: var(--z-loader);
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--sp-3);
}
#loader .loader-plane{ width: 64px; height: 64px; }
#loader .loader-bar{
  width: 140px; height: 1px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
#loader .loader-bar-fill{
  position: absolute; inset: 0;
  background: var(--ink);
  transform: translateX(-100%);
  transform-origin: left;
}
#loader.is-done{ pointer-events: none; }

/* ---------- CUSTOM CURSOR (desktop only) ---------- */
.cursor-dot{
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ink);
  pointer-events: none;
  z-index: var(--z-cursor);
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  will-change: transform;
}
.cursor-ring{
  position: fixed;
  top: 0; left: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  pointer-events: none;
  z-index: var(--z-cursor);
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  will-change: transform;
  transition: width .3s var(--ease-out-expo), height .3s var(--ease-out-expo), opacity .3s;
}
.cursor-ring.is-hover{ width: 64px; height: 64px; background: var(--ink); opacity: 0.08; }
.cursor-ring.is-text{ width: 90px; height: 90px; }
@media (hover: none), (pointer: coarse){
  .cursor-dot, .cursor-ring{ display: none; }
}

/* ---------- LINE-REVEAL TEXT ---------- */
.reveal-line{ overflow: hidden; display: block; }
.reveal-line > span{
  display: inline-block;
  transform: translate3d(0, 115%, 0);
  will-change: transform;
}

/* ---------- BUTTONS ---------- */
.btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--f-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  padding: 0.95em 1.5em;
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition: transform .45s var(--ease-out-expo), background .3s, color .3s, border-color .3s;
}
.btn:active{ transform: scale(0.97); }
.btn .arrow{ transition: transform .45s var(--ease-out-expo); display: inline-block; }
.btn:hover .arrow{ transform: translateX(4px); }

.btn-primary{ background: var(--ink); color: var(--paper); }
.btn-primary:hover{ background: var(--flight); }
[data-theme="dark"] .btn-primary{ background: var(--paper); color: var(--ink); }
[data-theme="dark"] .btn-primary:hover{ background: var(--flight); color: var(--paper); }

.btn-outline{
  border: 1px solid var(--border);
  color: var(--fg);
}
.btn-outline:hover{ border-color: var(--fg); background: var(--bg-raised); }

.btn-ghost{ color: var(--fg); padding-left: 0; padding-right: 0; }
.btn-ghost .underline-wipe{ padding: 0 0.2em; }

.btn-lg{ font-size: var(--fs-body); padding: 1.1em 1.9em; }

/* underline-wipe link, the signature hover from the reference study */
.underline-wipe{
  position: relative;
  display: inline-block;
}
.underline-wipe::after{
  content: '';
  position: absolute;
  left: 0; bottom: -0.18em;
  width: 100%; height: 1px;
  background: currentColor;
  transform-origin: right;
  transition: transform .55s var(--ease-out-expo);
}
.underline-wipe:hover::after{ transform-origin: left; transform: scaleX(0); }
.underline-wipe.is-on::after{ transform: scaleX(1); transform-origin: left; }

/* ---------- NAVIGATION ---------- */
.nav{
  position: fixed; top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  padding: var(--sp-3) 0 0;
  mix-blend-mode: difference;
  color: var(--paper);
}
.nav-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo{
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--f-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.02em;
}
.nav-logo-mark{ width: 22px; height: 22px; flex-shrink: 0; }
.nav-logo-text{ display: flex; flex-direction: column; line-height: 1.15; }
.nav-logo-text .l1{ font-weight: 600; letter-spacing: 0.01em; }
.nav-logo-text .l2{ font-size: 0.82em; letter-spacing: 0.1em; opacity: 0.6; text-transform: uppercase; }

.nav-links{
  display: none;
  gap: var(--sp-5);
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media (min-width: 880px){ .nav-links{ display: flex; } }
.nav-link{ position: relative; overflow: hidden; padding: 2px 0; }
.nav-link span{ display: inline-block; transition: transform .4s var(--ease-out-expo); }
.nav-link::before{
  content: attr(data-label);
  position: absolute; left: 0; top: 100%;
  transition: transform .4s var(--ease-out-expo);
}
.nav-link:hover span{ transform: translateY(-100%); }
.nav-link:hover::before{ transform: translateY(-100%); }
.nav-link.is-active span{ text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

.nav-right{ display: flex; align-items: center; gap: var(--sp-4); }
.nav-cta{
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: none;
  align-items: center;
  gap: 0.5em;
  padding: 0.65em 1.1em;
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  transition: background .3s, color .3s;
}
@media (min-width: 640px){ .nav-cta{ display: inline-flex; } }

.nav-burger{
  width: 26px; height: 18px;
  position: relative;
  flex-shrink: 0;
}
@media (min-width: 880px){ .nav-burger{ display: none; } }
.nav-burger span{
  position: absolute; left: 0; right: 0;
  height: 1px; background: currentColor;
  transition: transform .4s var(--ease-out-expo), opacity .3s;
}
.nav-burger span:nth-child(1){ top: 0; }
.nav-burger span:nth-child(2){ top: 50%; transform: translateY(-50%); }
.nav-burger span:nth-child(3){ bottom: 0; }
.nav-burger.is-open span:nth-child(1){ top: 50%; transform: translateY(-50%) rotate(45deg); }
.nav-burger.is-open span:nth-child(2){ opacity: 0; }
.nav-burger.is-open span:nth-child(3){ bottom: 50%; transform: translateY(50%) rotate(-45deg); }

.nav-edge{ padding-left: var(--gutter); padding-right: var(--gutter); padding-bottom: var(--sp-3); }

/* mobile drawer */
.mobile-drawer{
  position: fixed; inset: 0;
  z-index: 890;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--gutter);
  transform: translateY(-100%);
  visibility: hidden;
}
.mobile-drawer.is-open{ visibility: visible; }
.mobile-drawer-links{ display: flex; flex-direction: column; gap: var(--sp-2); }
.mobile-drawer-link{
  font-family: var(--f-display);
  font-size: clamp(2rem, 8vw, 3.2rem);
  font-weight: 500;
  overflow: hidden;
}
.mobile-drawer-link span{ display: inline-block; transform: translateY(110%); }
.mobile-drawer-foot{
  margin-top: var(--sp-7);
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--f-mono); font-size: var(--fs-small); opacity: 0.6;
}

/* ---------- FOOTER ---------- */
.footer{
  background: var(--ink);
  color: var(--paper);
  padding-top: var(--sp-8);
  padding-bottom: var(--sp-4);
}
.footer a{ color: inherit; }
.footer-top{
  display: grid;
  gap: var(--sp-6);
  padding-bottom: var(--sp-7);
}
@media (min-width: 900px){
  .footer-top{ grid-template-columns: 1.6fr 1fr 1fr 1fr; }
}
.footer-brand-text{ max-width: 320px; color: var(--mute-dark); margin-top: var(--sp-3); }
.footer-col-title{
  font-family: var(--f-mono); font-size: var(--fs-micro);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--mute-dark); margin-bottom: var(--sp-3);
}
.footer-col-links{ display: flex; flex-direction: column; gap: var(--sp-2); }
.footer-col-link{ position: relative; display: inline-block; width: fit-content; }
.footer-bottom{
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  align-items: center; justify-content: space-between;
  border-top: 1px solid var(--line-dark);
  padding-top: var(--sp-4);
  font-family: var(--f-mono); font-size: var(--fs-micro);
  color: var(--mute-dark);
}
.footer-socials{ display: flex; gap: var(--sp-3); }
.footer-social svg{ width: 17px; height: 17px; }
.footer-social{ opacity: 0.7; transition: opacity .3s, transform .3s var(--ease-out-expo); }
.footer-social:hover{ opacity: 1; transform: translateY(-2px); }
.footer-cta-row{
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap;
  gap: var(--sp-5);
  padding-bottom: var(--sp-7);
  border-bottom: 1px solid var(--line-dark);
  margin-bottom: var(--sp-7);
}
.footer-cta-row h2{ max-width: 14ch; }

/* ---------- CARDS ---------- */
.card{
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}

.icon-tile{
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--paper);
  margin-bottom: var(--sp-4);
}
[data-theme="dark"] .icon-tile{ background: var(--paper); color: var(--ink); }
.icon-tile svg{ width: 20px; height: 20px; }

/* ---------- MARQUEE ---------- */
.marquee{
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  white-space: nowrap;
  padding: var(--sp-4) 0;
}
.marquee-track{
  display: inline-flex;
  gap: var(--sp-6);
  will-change: transform;
}
.marquee-item{
  font-family: var(--f-mono);
  font-size: clamp(0.95rem, 2vw, 1.5rem);
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  color: var(--fg-mute);
}
.marquee-item .dot{ color: var(--flight); }

/* ---------- TAG ---------- */
.tag{
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.4em 0.9em;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

/* ---------- AVAILABILITY BADGE ---------- */
.badge-live{
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--f-mono); font-size: var(--fs-micro);
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.5em 1em;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
}
.badge-live .pulse{
  width: 7px; height: 7px; border-radius: 50%;
  background: #3FBE6E;
  position: relative;
}
.badge-live .pulse::after{
  content: ''; position: absolute; inset: 0;
  border-radius: 50%; background: #3FBE6E;
  animation: pulse-ring 2s var(--ease-io-soft) infinite;
}
@keyframes pulse-ring{
  0%{ transform: scale(1); opacity: 0.6; }
  100%{ transform: scale(2.6); opacity: 0; }
}

/* ---------- FORM ELEMENTS ---------- */
.field{ margin-bottom: var(--sp-4); position: relative; }
.field-label{
  display: block;
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 0.7em;
}
.field-input, .field-select, .field-textarea{
  width: 100%;
  border-bottom: 1px solid var(--border);
  padding: 0.6em 0;
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 0.9rem + 1vw, 1.6rem);
  font-weight: 500;
  background: transparent;
  position: relative;
  transition: border-color .3s;
}
.field-input::placeholder, .field-textarea::placeholder{ color: var(--fg-mute); opacity: 0.55; font-family: var(--f-body); font-size: 0.6em; font-weight: 400; }
.field-underline{
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px;
  transform: scaleX(0); transform-origin: left;
  background: var(--ink);
  transition: transform .5s var(--ease-out-expo);
}
[data-theme="dark"] .field-underline{ background: var(--paper); }
.field.is-focused .field-underline{ transform: scaleX(1); }
.field-textarea{ resize: none; min-height: 3.2em; }
.field-row{ display: grid; gap: var(--sp-4); }
@media (min-width: 640px){ .field-row{ grid-template-columns: 1fr 1fr; } }

.field-select{ cursor: pointer; appearance: none; }
.select-wrap{ position: relative; }
.select-wrap::after{
  content: '';
  position: absolute; right: 4px; top: 50%;
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--fg);
  border-bottom: 1.5px solid var(--fg);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

.checkbox-row{ display: flex; align-items: flex-start; gap: 0.7em; }
.checkbox-row input{ margin-top: 0.3em; accent-color: var(--ink); }
.checkbox-row label{ font-size: var(--fs-small); color: var(--fg-mute); }

.field-error{
  display: none;
  color: #D8475A;
  font-size: var(--fs-micro);
  font-family: var(--f-mono);
  margin-top: 0.5em;
}
.field.has-error .field-error{ display: block; }
.field.has-error .field-input,
.field.has-error .field-textarea{ border-color: #D8475A; }

/* ---------- FAQ ---------- */
.faq-item{ border-bottom: 1px solid var(--border); }
.faq-trigger{
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  text-align: left;
  font-family: var(--f-body);
  font-size: var(--fs-body-l);
  font-weight: 500;
}
.faq-icon{ flex-shrink: 0; width: 16px; height: 16px; position: relative; }
.faq-icon::before, .faq-icon::after{
  content: ''; position: absolute; background: var(--fg);
  transition: transform .4s var(--ease-out-expo);
}
.faq-icon::before{ width: 100%; height: 1.5px; top: 50%; left: 0; transform: translateY(-50%); }
.faq-icon::after{ width: 1.5px; height: 100%; left: 50%; top: 0; transform: translateX(-50%); }
.faq-trigger[aria-expanded="true"] .faq-icon::after{ transform: translateX(-50%) rotate(90deg); opacity: 0; }
.faq-body{
  height: 0;
  overflow: hidden;
}
.faq-body-inner{ padding-bottom: var(--sp-4); max-width: 65ch; }
.faq-answer{ color: var(--fg-mute); }

/* ---------- STAT ---------- */
.stat-num{
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 1.4rem + 4vw, 5.2rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  display: block;
  line-height: 1;
}
.stat-label{ color: var(--fg-mute); margin-top: var(--sp-2); }

/* ---------- PROGRESS DOT NAV (process / steps) ---------- */
.step-num{
  font-family: var(--f-mono);
  font-size: var(--fs-small);
  color: var(--flight);
  margin-bottom: var(--sp-3);
}

/* ---------- CONTACT PANEL (global, all pages) ---------- */
#contact-panel{
  position: fixed; inset: 0;
  z-index: var(--z-panel);
  visibility: hidden;
  pointer-events: none;
}
#contact-panel.is-open{ visibility: visible; pointer-events: all; }
.cp-bg{
  position: absolute; inset: 0;
  background: rgba(11,12,14,0.55);
  opacity: 0;
}
.cp-sheet{
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(100%, 760px);
  background: var(--paper);
  color: var(--ink);
  overflow-y: auto;
  transform: translate3d(100%, 0, 0);
  padding: var(--sp-6) var(--gutter) var(--sp-8);
}
.cp-close{
  position: sticky; top: 0;
  display: flex; justify-content: flex-end;
  margin-bottom: var(--sp-5);
  z-index: 5;
}
.cp-close-btn{
  font-family: var(--f-mono);
  font-size: var(--fs-small);
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.6em 1em;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--paper);
}
.cp-header{ margin-bottom: var(--sp-6); }
.cp-header .display-m{ margin-top: var(--sp-3); max-width: 14ch; }
.cp-foot{
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: var(--sp-5); justify-content: space-between;
}
.cp-foot-link{ font-family: var(--f-mono); font-size: var(--fs-small); }

.cp-success{
  display: none;
  text-align: center;
  padding: var(--sp-8) 0;
}
.cp-success.is-shown{ display: block; }
.cp-success-icon{
  width: 56px; height: 56px; margin: 0 auto var(--sp-4);
  border-radius: 50%; background: var(--flight-tint);
  display: flex; align-items: center; justify-content: center;
}
#contact-form.is-hidden{ display: none; }

/* ==========================================================================
   LOADER SVG — paper plane dash-draw animation
   ========================================================================== */
#loader-plane-svg .pl-body{
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: dash-draw 1.1s cubic-bezier(0.16,1,0.3,1) 0.1s forwards;
}
#loader-plane-svg .pl-trail{
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  animation: dash-draw 0.7s cubic-bezier(0.16,1,0.3,1) 0.55s forwards;
}
#loader-plane-svg .pl-tail{
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: dash-draw 0.45s cubic-bezier(0.16,1,0.3,1) 0.85s forwards;
}
@keyframes dash-draw{
  to{ stroke-dashoffset: 0; }
}

/* ==========================================================================
   HERO PLANE SVG — class hooks for GSAP targets
   ========================================================================== */
.plane-wing-l{ transition: opacity .6s; }
.plane-fold  { transition: opacity .6s; }
.plane-tail  { transition: opacity .6s; }

/* ==========================================================================
   SCROLL PROGRESS BAR — exists as JS-injected element
   ========================================================================== */
/* Defined inline in JS; no extra CSS needed */

/* ==========================================================================
   MISC POLISH
   ========================================================================== */

/* Smooth underline-wipe on footer links */
.footer-col-link.underline-wipe::after{ background: var(--paper); }

/* Fix contact panel form background on all pages */
.cp-sheet{ overscroll-behavior: contain; }

/* Tag hover */
.tag{ transition: border-color .3s, color .3s; }
.tag:hover{ border-color: var(--ink); color: var(--ink); }

/* Mobile nav CTA button — slight visual feedback */
.nav-cta:hover{
  background: currentColor;
}
.nav-cta:hover span,
.nav-cta:hover svg path{
  filter: invert(1);
}

/* Ensure hero badge is above hero plane ornament */
.hero > [style*="position:absolute"][style*="top:var(--sp-7)"]{ z-index: 2; }

/* service-card icon tile on hover */
.service-card:hover .icon-tile{
  background: var(--flight);
  transition: background .35s cubic-bezier(0.16,1,0.3,1);
}

/* portfolio-item media grayscale transition */
.portfolio-item-media img{
  transition: transform .7s cubic-bezier(0.16,1,0.3,1), filter .5s;
}

/* Value card icon on hover */
.value-card:hover .value-card-icon{
  border-color: var(--flight);
  transition: border-color .35s;
}

/* Process step number pulse */
.process-step:hover .step-num{
  letter-spacing: 0.06em;
  transition: letter-spacing .4s cubic-bezier(0.16,1,0.3,1);
}

/* testimonial border animation */
.testimonial{
  transition: border-color .4s;
}
.testimonial:hover{
  border-left-color: var(--ink);
}

/* print / reduced motion safety */
@media print{
  .nav, #loader, .cursor-dot, .cursor-ring,
  #contact-panel, #page-transition{ display: none !important; }
  body{ color: #000; background: #fff; }
}
/* ==========================================================================
   USP CARDS — "Why Paper Plane" mini-experience cards
   ========================================================================== */
.usp__grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-5);
}
@media (max-width: 980px){
  .usp__grid{ grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
}
@media (max-width: 640px){
  .usp__grid{ grid-template-columns: 1fr; }
}

.usp__card{
  position: relative;
  aspect-ratio: 1 / 1.19;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media (max-width: 640px){
  .usp__card{ aspect-ratio: 1 / 1.45; }
}
.usp__card--accent{
  background: var(--flight);
  position: relative;
}

.usp-card__top{
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-5);
}
.usp-card__top--layer{ z-index: 2; position: relative; }

.usp-card__title{
  max-width: 9ch;
  margin: 0 auto 0.3em;
  text-align: center;
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 1rem + 1.5vw, 1.7rem);
  font-weight: 500;
  color: var(--paper);
}
.usp__card p.u-color__dark{
  text-align: center;
  font-size: var(--fs-small);
  color: var(--mute-dark);
  max-width: 28ch;
  margin: 0 auto;
}
.usp__card--accent p.u-color__dark{ color: rgba(11,12,14,0.65); }
.usp__card--accent .usp-card__title{ color: var(--ink); }

.small-button__wrap{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.3em;
}
.button__small{
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
  padding: 0.3em 0.6em;
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
  color: var(--paper);
}
.button__small.round{ border-radius: var(--r-pill); }
.usp__card--accent .button__small{ background: rgba(11,12,14,0.12); color: var(--ink); }
.usp__card--accent .button__small.transparent{ background: rgba(11,12,14,0.08); }

/* Card 1 — radial marquee — confined to lower arc, never overlaps text */
.radial__marquee{
  flex: 1;
  position: relative;
  min-height: 220px;
  margin-top: var(--sp-3);
  /* mask top edge so tiles fade in as they enter the arc zone, not pop */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 22%, black 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 22%, black 100%);
}
@media (max-width: 640px){
  .radial__marquee{ min-height: 170px; }
}
.radial__track{
  position: absolute;
  inset: 0;
}
.radial__item{
  position: absolute;
  width: 5em;
  height: 5em;
  background: var(--paper);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
@media (max-width: 640px){
  .radial__item{ width: 3.4em; height: 3.4em; }
}
@media (max-width: 420px){
  .radial__item{ width: 2.9em; height: 2.9em; }
}
.radial-item__img{
  width: 60%;
  height: 60%;
  object-fit: contain;
}

/* Card 2 — video — flush to card's right + bottom edges, zero gap on those two sides,
   left edge inset, top edge cuts across roughly lower 45% of the card */
.usp-card__video{
  position: absolute;
  right: 0;
  bottom: 0;
  left: 8%;
  top: 56%;
  border-top-left-radius: var(--r-lg);
  border-bottom-right-radius: 0;
  overflow: hidden;
}
@media (max-width: 640px){
  .usp-card__video{ left: 4%; top: 52%; }
}
.usp-card__video-el{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.usp-card__video-fallback{
  position: absolute;
  inset: 0;
  min-height: unset;
  border: 0;
  border-radius: 0;
  background: var(--ink-soft);
}

/* Card 3 — flight path */
.usp-card__bottom{
  position: absolute;
  inset: auto -15% -10% auto;
  width: 130%;
  aspect-ratio: 1/1;
  -webkit-mask-image: radial-gradient(circle at 60% 45%, black 60%, transparent 78%);
  mask-image: radial-gradient(circle at 60% 45%, black 60%, transparent 78%);
}
@media (max-width: 640px){
  .usp-card__bottom{
    inset: auto -8% -6% auto;
    width: 105%;
  }
}
.usp-card__flightpath{
  width: 100%;
  height: 100%;
  position: relative;
}
.flight-plane{ transform-box: fill-box; }