/* ============================================================
   MAC4 ELECTRONICS - components
   Projects dropdown, front-page hero slider, portfolio cards,
   leadership cards, app download badges.
   Loaded after mac4-site.css and kinegis.css.
   ============================================================ */

/* ============================================================
   Projects dropdown (header, global)
   ============================================================ */
.site-nav .menu-item--has-children{position:relative;}
.site-nav .menu-caret{
  display:inline-block;width:0;height:0;margin-left:.42em;vertical-align:middle;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:4px solid currentColor;opacity:.55;transition:transform .2s ease,opacity .2s ease;
}
.site-nav .menu-item--has-children.is-open .menu-caret{transform:rotate(180deg);opacity:1;}

.site-nav .sub-menu{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-6px);
  /* The parent theme sets `.site-nav ul{display:flex;gap:24px}`, which this
     <ul> would otherwise inherit and lay the items out side by side. */
  display:block;gap:0;
  min-width:290px;margin:0;padding:8px;list-style:none;
  background:rgba(251,251,253,.94);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border:1px solid var(--k-hair);border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.14);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
  z-index:1200;
}
.site-nav .menu-item--has-children:hover > .sub-menu,
.site-nav .menu-item--has-children.is-open > .sub-menu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
/* hover bridge so the pointer can travel into the panel without it closing */
.site-nav .menu-item--has-children::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:12px;
}
.site-nav .sub-menu li{margin:0;}
.site-nav .sub-menu a{
  display:flex;flex-direction:column;gap:2px;
  padding:11px 14px;border-radius:11px;
  text-transform:none !important;letter-spacing:normal !important;
  transition:background .18s ease;
}
.site-nav .sub-menu a:hover{background:rgba(18,86,184,.10);}
.site-nav .sub-menu__label{font-size:.95rem;font-weight:600;color:var(--k-ink);letter-spacing:-.01em;}
.site-nav .sub-menu__desc{font-size:.8rem;font-weight:400;color:var(--k-ink-2);letter-spacing:normal;}

/* mobile: children render inline beneath their parent */
.mobile-nav .sub-menu--inline{
  display:block;gap:0;list-style:none;margin:2px 0 6px;padding:0 0 0 14px;
}
.mobile-nav .sub-menu--inline a{display:flex;flex-direction:column;padding:8px 0;}
.mobile-nav .sub-menu__label{font-size:.92rem;font-weight:600;}
.mobile-nav .sub-menu__desc{font-size:.78rem;color:var(--k-ink-2);}

/* ============================================================
   Front-page hero slider
   ============================================================ */
.mh-hero{
  position:relative;background:#000;color:#f5f5f7;overflow:hidden;isolation:isolate;
  min-height:min(94svh,880px);display:flex;align-items:flex-end;
}
.mh-hero__viewport{position:absolute;inset:0;}
.mh-slide{
  position:absolute;inset:0;display:flex;align-items:flex-end;
  opacity:0;visibility:hidden;transition:opacity .85s ease,visibility .85s;
}
.mh-slide.is-active{opacity:1;visibility:visible;}
.mh-slide__media{position:absolute;inset:0;z-index:-2;}
.mh-slide__media img{width:100%;height:100%;object-fit:cover;display:block;}
.mh-slide::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.14) 34%,rgba(0,0,0,.56) 72%,rgba(0,0,0,.93) 100%);
}
.mh-slide__inner{
  width:min(1080px,calc(100% - 44px));margin-inline:auto;
  padding:0 0 clamp(88px,11vh,140px);
  transform:translateY(14px);opacity:0;
  transition:transform .8s ease .12s,opacity .8s ease .12s;
}
.mh-slide.is-active .mh-slide__inner{transform:none;opacity:1;}
.mh-slide__eyebrow{
  font-size:.76rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--k-sand);margin:0 0 .7rem;
}
.mh-slide__title{
  font-size:clamp(2.8rem,8vw,5.6rem) !important;font-weight:700;
  line-height:1.02 !important;letter-spacing:-.04em !important;
  margin:0;color:#fff;text-shadow:0 2px 40px rgba(0,0,0,.42);
}
.mh-slide__sub{font-size:clamp(1rem,1.9vw,1.4rem);font-weight:500;color:#e4ecf6;margin:.55rem 0 0;}
.mh-slide__text{
  font-size:clamp(1rem,1.5vw,1.18rem);line-height:1.5;color:#c9c9ce;
  margin:.9rem 0 0;max-width:46ch;
}

.mh-hero__arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:46px;height:46px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:#fff;font-size:1.6rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .25s ease,background .2s ease;
}
.mh-hero:hover .mh-hero__arrow,
.mh-hero:focus-within .mh-hero__arrow{opacity:1;}
.mh-hero__arrow:hover{background:rgba(255,255,255,.24);}
.mh-hero__arrow:focus-visible{opacity:1;outline:3px solid var(--k-sand);outline-offset:3px;}
.mh-hero__arrow--prev{left:18px;}
.mh-hero__arrow--next{right:18px;}

.mh-hero__dots{
  position:absolute;left:50%;transform:translateX(-50%);bottom:30px;z-index:5;
  display:flex;gap:10px;
}
/* The button is the touch target (38x44 everywhere); the visible
   indicator is a 3px line drawn by ::before. Keeping those separate is
   what stops the earlier problem where adding padding for the finger
   inflated the indicator itself into a blob - the fill used inset:0, so
   it grew with the padding box. */
.mh-dot{
  position:relative;width:38px;height:44px;padding:0;border:0;cursor:pointer;
  background:none;display:flex;align-items:center;
}
.mh-dot::before{
  content:"";display:block;width:100%;height:3px;border-radius:980px;
  background:rgba(255,255,255,.30);transition:background .2s ease;
}
.mh-dot:hover::before{background:rgba(255,255,255,.55);}
.mh-dot:focus-visible{outline:2px solid var(--k-sand);outline-offset:3px;border-radius:4px;}
.mh-dot__fill{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  height:3px;width:0;background:var(--k-sand);border-radius:980px;
}
.mh-dot.is-active .mh-dot__fill{animation:mhDot 7s linear forwards;}
.mh-hero.is-paused .mh-dot.is-active .mh-dot__fill{animation-play-state:paused;}
@keyframes mhDot{from{width:0}to{width:100%}}

@media (prefers-reduced-motion:reduce){
  .mh-slide,.mh-slide__inner{transition:none;}
  .mh-dot.is-active .mh-dot__fill{animation:none;width:100%;}
}
@media (max-width:640px){
  .mh-hero{min-height:84svh;}
  .mh-hero__arrow{display:none;}
  .mh-slide__inner{padding-bottom:96px;}
}

/* ============================================================
   Cards grid (portfolio / news)
   ============================================================ */
.mh-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  margin-top:3.2rem;text-align:left;
}
.mh-card{
  background:#fff;border:1px solid var(--k-hair);border-radius:20px;
  padding:28px 26px 30px;display:flex;flex-direction:column;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.mh-card:hover{
  transform:translateY(-4px);box-shadow:0 20px 50px rgba(0,0,0,.10);
  border-color:rgba(18,86,184,.32);
}
.mh-card__tag{
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--k-olive);margin:0 0 .9rem;
}
.mh-card__title{
  font-size:1.5rem !important;font-weight:700;letter-spacing:-.026em;
  margin:0;color:var(--k-ink);
}
.mh-card__title--sm{font-size:1.16rem !important;line-height:1.28 !important;}
.mh-card__sub{font-size:.92rem;font-weight:500;color:var(--k-olive);margin:.28rem 0 0;}
.mh-card__text{font-size:.98rem;line-height:1.55;color:var(--k-ink-2);margin:.85rem 0 1.3rem;flex:1;}

@media (max-width:900px){.mh-grid{grid-template-columns:1fr;}}

/* ============================================================
   Leadership (Enterprise page)
   ============================================================ */
.ml-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:2.8rem;}
.ml-card{
  background:#fff;border:1px solid var(--k-hair);border-radius:20px;padding:30px 28px;
  transition:transform .3s ease,box-shadow .3s ease;
}
.ml-card:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(0,0,0,.09);}
.ml-card__head{display:flex;align-items:center;gap:16px;margin-bottom:1.1rem;}
.ml-card__initials{
  flex:0 0 auto;width:54px;height:54px;border-radius:50%;
  background:linear-gradient(135deg,var(--k-olive),var(--k-sand));
  color:#fff;font-weight:700;font-size:1.05rem;letter-spacing:.02em;
  display:flex;align-items:center;justify-content:center;
}
.ml-card__name{
  font-size:1.28rem !important;font-weight:700;letter-spacing:-.02em;
  margin:0;color:var(--k-ink);
}
.ml-card__role{font-size:.9rem;font-weight:600;color:var(--k-olive);margin:.15rem 0 0;}
.ml-card__now{font-size:1rem;line-height:1.5;color:var(--k-ink-2);margin:0 0 1.2rem;}
.ml-card__now strong{color:var(--k-ink);}
.ml-card__label{
  font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--k-ink-2);margin:0 0 .6rem;
}
.ml-card__list{list-style:none;margin:0;padding:0;}
.ml-card__list li{
  font-size:.95rem;color:var(--k-ink-2);padding:7px 0 7px 20px;
  position:relative;border-top:1px solid var(--k-hair);
}
.ml-card__list li:first-child{border-top:0;}
.ml-card__list li::before{
  content:"";position:absolute;left:2px;top:calc(50% - 3px);
  width:6px;height:6px;border-radius:50%;background:var(--k-sand);
}
@media (max-width:820px){.ml-grid{grid-template-columns:1fr;}}

/* ============================================================
   App download badges (KINEGIS page)
   ============================================================ */
.ma-badges{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:2.4rem;}
.ma-badge{
  display:inline-flex;align-items:center;gap:12px;
  padding:12px 24px 12px 20px;border-radius:14px;text-decoration:none;
  background:#fff;color:#0a1420;border:1px solid transparent;
  transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}
.ma-badge:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.34);}
.ma-badge__icon{font-size:1.5rem;line-height:1;}
.ma-badge__text{display:flex;flex-direction:column;line-height:1.2;text-align:left;}
.ma-badge__text small{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;opacity:.66;}
.ma-badge__text strong{font-size:1.05rem;font-weight:600;letter-spacing:-.01em;}
.ma-badge.is-soon{
  background:rgba(255,255,255,.07);color:#a1a1a6;
  border-color:rgba(255,255,255,.16);cursor:default;
}
.ma-badge.is-soon:hover{transform:none;box-shadow:none;}
.ma-note{font-size:.82rem;color:#86868b;margin-top:1.6rem;}

@media (max-width:520px){
  .ma-badges{flex-direction:column;}
  .ma-badge{justify-content:center;}
}

/* ============================================================
   Funding meter - keep a small early figure visible
   A 0.58% bar is under 4px wide on a 660px track, so it would read as
   empty. The minimum width is a rendering floor only; the figure and
   the percentage beside it always state the real number.
   ============================================================ */
.k-fund__bar,.k-drawer__bar{min-width:5px;}
.k-fund.is-live .k-fund__bar{box-shadow:0 0 14px rgba(125,180,236,.55);}

/* ============================================================
   Inside the unit - component callouts (KINEGIS page)
   ============================================================ */
.ki-parts{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  margin-top:clamp(34px,5vh,56px);text-align:left;
}
.ki-part{
  background:#fff;border:1px solid var(--k-hair);border-radius:18px;
  padding:24px 22px 26px;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.ki-part:hover{
  transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.09);
  border-color:rgba(18,86,184,.32);
}
.ki-part__n{
  font-size:.7rem;font-weight:700;letter-spacing:.2em;
  color:var(--k-olive);margin:0 0 .7rem;
}
.ki-part h3{
  font-size:1.12rem !important;font-weight:700;letter-spacing:-.02em;
  margin:0 0 .45rem;color:var(--k-ink);line-height:1.2 !important;
}
.ki-part p{font-size:.94rem;line-height:1.52;color:var(--k-ink-2);margin:0;}

@media (max-width:900px){.ki-parts{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.ki-parts{grid-template-columns:1fr;}}

/* ============================================================
   Accent number fix
   `.k-pillar p` and `.ki-part p` set a muted body colour and sit
   later in the cascade with equal-or-higher specificity than
   `.k-pillar__n` / `.ki-part__n`, so the 01-04 markers rendered
   grey instead of the accent. Latent since the original build —
   it only became obvious once the accent changed to blue.
   ============================================================ */
.kinegis-home .k-pillar p.k-pillar__n{
  color:var(--sand);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.2em;
  line-height:1;
}
.kinegis-home .ki-part p.ki-part__n{
  color:var(--olive);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.2em;
  line-height:1;
}
/* the Inside section sits on paper, so it needs the darker tone;
   if it is ever moved onto a dark section, follow the section. */
.kinegis-home .k-sec--dark .ki-part p.ki-part__n{color:var(--sand);}

/* ============================================================
   Full-bleed hero images — Elementor collision fix
   ============================================================
   Elementor ships `.elementor img { height: auto; }` at the SAME
   specificity as `.mh-slide__media img` / `.k-hero__media img`
   (0,1,1), so the winner is decided by source order — and its
   stylesheet loads after ours. While these pages ran on the PHP
   templates there was no `.elementor` wrapper and the collision
   never happened. Converting them to Elementor silently flattened
   every cover image to its intrinsic height: a 211px band inside a
   682px hero on mobile.

   Raised specificity plus !important so no page builder or plugin
   can flatten a cover image again. Scoped to the two full-bleed
   media wrappers only — `.k-show__media` and `.k-feature__media`
   are height:auto by design and are untouched.
   ============================================================ */
.kinegis-home .mh-slide__media img,
.kinegis-home .k-hero__media img,
.elementor .mh-slide__media img,
.elementor .k-hero__media img,
.mh-slide__media img,
.k-hero__media img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block;
  max-width:none !important;
}

/* ============================================================
   Mobile menu — smooth slide-down panel
   Height is animated to the panel's measured scrollHeight by
   nav.js rather than a guessed max-height, so the easing is
   even regardless of how many items the menu has.
   ============================================================ */
.site-header{position:sticky;}

.mobile-nav{
  position:absolute;
  left:0;right:0;top:100%;
  z-index:990;
  /* Solid, not translucent. A 3% see-through panel over a photographic
     hero left the headline ghosting behind the menu items, and
     backdrop-filter is an expensive effect on phones for no benefit once
     the panel is opaque. */
  background:#fbfbfd;
  /* Padding and borders live only in the open state. max-height clamps
     the content box, so any padding or border on this element survives a
     collapse - the parent theme's 14/24px padding left a 40px invisible
     gap under the header even at max-height:0. Inner spacing is carried
     by .mac4-fixed-nav and .mobile-nav-extra instead. */
  padding:0 !important;
  border-top:0 solid var(--k-hair);
  border-bottom:0 solid var(--k-hair);
  box-shadow:0 24px 48px rgba(0,0,0,.10);
  overflow:hidden;
  max-height:0;
  opacity:0;
  visibility:hidden;
  transition:
    max-height .44s cubic-bezier(.22,.61,.36,1),
    opacity    .26s ease,
    visibility 0s linear .44s;
}
.mobile-nav.is-open{
  opacity:1;
  visibility:visible;
  border-top-width:1px;
  border-bottom-width:1px;
  transition:
    max-height .44s cubic-bezier(.22,.61,.36,1),
    opacity    .22s ease,
    visibility 0s linear 0s;
}

/* nav.js removes [hidden] on init and drives the classes instead, so the
   panel can animate. Without this the attribute would force display:none
   and there would be nothing to transition. */
.mobile-nav[hidden]{display:block;}

.mobile-nav .mac4-fixed-nav{
  display:flex;flex-direction:column;gap:0;
  padding:8px clamp(16px,5vw,28px) 4px;list-style:none;margin:0;
}
.mobile-nav .menu-item{
  border-bottom:1px solid var(--k-hair);
  opacity:0;transform:translateY(-6px);
  transition:opacity .32s ease,transform .32s ease;
}
.mobile-nav .menu-item:last-child{border-bottom:0;}
.mobile-nav .mac4-fixed-nav > .menu-item > a{
  display:flex;align-items:center;justify-content:space-between;
  min-height:52px;padding:0 2px;
  font-size:1.02rem !important;font-weight:500 !important;
  color:var(--k-ink) !important;letter-spacing:-.01em !important;
}
.mobile-nav .mac4-fixed-nav > .menu-item > a:hover{color:var(--k-olive) !important;}

.mobile-nav.is-open .menu-item{opacity:1;transform:none;}
.mobile-nav.is-open .menu-item:nth-child(1){transition-delay:.05s}
.mobile-nav.is-open .menu-item:nth-child(2){transition-delay:.09s}
.mobile-nav.is-open .menu-item:nth-child(3){transition-delay:.13s}
.mobile-nav.is-open .menu-item:nth-child(4){transition-delay:.17s}
.mobile-nav.is-open .menu-item:nth-child(5){transition-delay:.21s}

.mobile-nav-extra{
  padding:14px clamp(16px,5vw,28px) 20px;
  opacity:0;transform:translateY(-6px);
  transition:opacity .32s ease .22s,transform .32s ease .22s;
}
.mobile-nav.is-open .mobile-nav-extra{opacity:1;transform:none;}
.mobile-nav-extra .button{width:100%;justify-content:center;min-height:48px;}

/* burger -> close, so the control reads as a state not just a label */
.nav-toggle{transition:background .2s ease,color .2s ease;}
.nav-toggle[aria-expanded="true"]{
  background:var(--k-olive) !important;color:#fff !important;border-color:transparent !important;
}

@media (prefers-reduced-motion:reduce){
  .mobile-nav,.mobile-nav .menu-item,.mobile-nav-extra{transition:none !important;}
}

/* ============================================================
   Frame scrubber — drag through a rendered sequence
   ============================================================ */
.ks{max-width:1000px;margin:clamp(28px,5vh,52px) auto 0;outline:none;}
.ks:focus-visible{outline:3px solid var(--k-olive);outline-offset:6px;border-radius:20px;}

.ks-stage{
  position:relative;border-radius:22px;overflow:hidden;background:#fff;
  border:1px solid var(--k-hair);
  cursor:grab;touch-action:pan-y;          /* let the page still scroll vertically */
  user-select:none;-webkit-user-select:none;
}
.ks.is-dragging .ks-stage{cursor:grabbing;}
.ks-frame{width:100%;height:auto;display:block;pointer-events:none;-webkit-user-drag:none;}

.ks-loading{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.86);font-size:.86rem;font-weight:600;color:var(--k-ink-2);
  letter-spacing:.06em;transition:opacity .3s ease;
}
.ks.is-ready .ks-loading{opacity:0;pointer-events:none;}

.ks-hint{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  margin:0;padding:7px 15px;border-radius:980px;
  background:rgba(29,29,31,.72);color:#fff;
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  transition:opacity .3s ease;pointer-events:none;
}
.ks.is-dragging .ks-hint{opacity:0;}

.ks-controls{display:flex;align-items:center;gap:14px;margin-top:18px;}
.ks-range{
  flex:1;-webkit-appearance:none;appearance:none;height:3px;border-radius:980px;
  background:rgba(0,0,0,.14);outline:none;
}
.ks-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--k-olive);border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.22);cursor:pointer;
}
.ks-range::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:var(--k-olive);
  border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.22);cursor:pointer;border-color:#fff;
}
.ks-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(18,86,184,.3);}
.ks-readout{
  min-width:3.4em;text-align:right;font-size:.85rem;font-weight:600;
  color:var(--k-ink-2);font-variant-numeric:tabular-nums;
}

@media (max-width:560px){
  .ks-controls{gap:10px;}
  /* a 22px thumb is under the touch minimum, so grow the rail's hit area */
  .ks-range{height:22px;background:transparent;}
  .ks-range::-webkit-slider-runnable-track{height:3px;border-radius:980px;background:rgba(0,0,0,.14);}
  .ks-range::-moz-range-track{height:3px;border-radius:980px;background:rgba(0,0,0,.14);}
  .ks-hint{bottom:10px;font-size:.68rem;}
}

@media (prefers-reduced-motion:reduce){
  .ks-loading,.ks-hint{transition:none;}
}

/* ============================================================
   Device viewer — pointer / gyro tilt
   ============================================================ */
.kd{
  max-width:820px;margin:clamp(30px,5vh,56px) auto 0;
  perspective:1200px;position:relative;
}
.kd-inner{
  position:relative;border-radius:24px;overflow:hidden;
  background:#0b0b0b;border:1px solid var(--k-hair-d,rgba(255,255,255,.12));
  transform-style:preserve-3d;
  transform:rotateX(0) rotateY(0);
  transition:box-shadow .35s ease;
  box-shadow:0 24px 70px rgba(0,0,0,.45);
  will-change:transform;
}
.kd.is-live .kd-inner{box-shadow:0 34px 90px rgba(0,0,0,.6);}
.kd-img{
  display:block;width:100%;height:auto;
  transform:scale(1.04);
  will-change:transform;
  pointer-events:none;-webkit-user-drag:none;
}
.kd-sheen{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(closest-side circle at 50% 50%,rgba(255,255,255,.14),rgba(255,255,255,0) 70%);
  mix-blend-mode:screen;opacity:0;transition:opacity .3s ease;
}
.kd.is-live .kd-sheen{opacity:1;}

.kd-hint{
  margin:16px 0 0;font-size:.72rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:#86868b;
  transition:opacity .3s ease;
}
.kd.is-live .kd-hint{opacity:0;}

@media (hover:none){
  /* no cursor to follow, so say what the gesture is */
  .kd-hint::after{content:" — drag or tilt";}
}
@media (prefers-reduced-motion:reduce){
  .kd-inner,.kd-img{transform:none !important;transition:none;}
  .kd-sheen{display:none;}
  .kd-hint{display:none;}
}

/* ============================================================
   Interactive 3D concept viewer
   Sized by aspect-ratio rather than a fixed pixel height, so it
   does not become a 720px letterbox on a phone.
   ============================================================ */
.k3d{
  max-width:1180px;margin:clamp(28px,5vh,52px) auto 0;
  border-radius:22px;overflow:hidden;
  background:#061016;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 26px 70px rgba(0,0,0,.45);
}
.k3d-frame{
  display:block;width:100%;border:0;background:#061016;
  aspect-ratio:16/10;min-height:440px;max-height:78vh;
}
.k3d-note{
  font-size:.78rem;line-height:1.55;color:#86868b;
  max-width:60ch;margin:16px auto 0;
}
@media (max-width:900px){
  .k3d-frame{aspect-ratio:4/3;min-height:420px;}
}
@media (max-width:560px){
  .k3d{border-radius:18px;}
  .k3d-frame{aspect-ratio:3/4;min-height:460px;max-height:72vh;}
}

/* ============================================================
   Newsroom cards
   Replaces the parent theme's flat gradient + icon placeholder
   with real project imagery.
   ============================================================ */
.mn-grid{
  display:grid;gap:26px;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}
.mn-card{
  display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--k-hair);border-radius:18px;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.mn-card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 44px rgba(0,0,0,.10);
  border-color:rgba(18,86,184,.32);
}
.mn-card__media{
  display:block;aspect-ratio:16/9;overflow:hidden;background:#0b1622;
}
.mn-card__media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.mn-card:hover .mn-card__media img{transform:scale(1.04);}

.mn-card__body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1;}
.mn-card__date{
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--k-olive);margin:0 0 .55rem;
}
.mn-card__title{
  font-size:1.08rem !important;line-height:1.32 !important;font-weight:700;
  letter-spacing:-.018em;margin:0 0 .6rem;
}
.mn-card__title a{color:var(--k-ink) !important;text-decoration:none;}
.mn-card__title a:hover{color:var(--k-olive) !important;}
.mn-card__excerpt{
  font-size:.95rem !important;line-height:1.55 !important;
  color:var(--k-ink-2) !important;margin:0 0 1.1rem;flex:1;
}
.mn-card__link{
  align-self:flex-start;display:inline-flex;align-items:center;gap:.3em;
  min-height:44px;color:var(--k-olive) !important;
  font-size:.95rem;font-weight:500;text-decoration:none;
}
.mn-card__link::after{content:"\203A";font-size:1.2em;line-height:0;transition:transform .22s ease;}
.mn-card__link:hover::after{transform:translateX(3px);}

@media (max-width:560px){
  .mn-grid{grid-template-columns:1fr;gap:20px;}
}