/* ===========================================================================
   MAX-G STUDIOS - COMPONENTS
   Hero, dual-market motif, cards, forms, portfolio, pricing, process flow,
   video facade. Shared across every page.
=========================================================================== */

/* ===========================================================================
   HERO - the homepage header is a taller, bigger-type variant of the
   shared .page-header photo-header component (see PAGE HEADER below),
   applied via the .hero-home modifier.
=========================================================================== */

/* Slow, subtle Ken Burns drift on the active slide - motion that reads as
   cinematic rather than busy. Disabled entirely under reduced-motion. */
@keyframes ken-burns{
  from{ transform:scale(1.06) translate3d(0,0,0); }
  to{ transform:scale(1.14) translate3d(-1%,-1%,0); }
}
.hero-visual img.is-active,
.page-header-media img.is-active{
  animation:ken-burns 9s ease-out forwards;
}
@media (prefers-reduced-motion: reduce){
  .hero-visual img.is-active,
  .page-header-media img.is-active{ animation:none; }
}

/* ---- Carousel controls shared by the homepage hero and any multi-slide
   page header (arrows, dot indicators, slide caption). ------------------- */
.carousel-controls{
  position:absolute;
  z-index:3;
  bottom:18px;
  right:18px;
  display:flex;
  align-items:center;
  gap:10px;
}

.carousel-arrow{
  width:34px; height:34px;
  border-radius:50%;
  border:1px solid rgba(244,242,238,0.4);
  background:rgba(20,24,27,0.4);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  backdrop-filter:blur(4px);
  transition:background var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.carousel-arrow:hover{ background:var(--orange); border-color:var(--orange); }

.carousel-dots{ display:flex; gap:7px; }
.carousel-dots button{
  width:7px; height:7px;
  padding:0;
  border-radius:50%;
  border:1px solid rgba(244,242,238,0.6);
  background:rgba(244,242,238,0.25);
  cursor:pointer;
  transition:background var(--dur-fast) ease, width var(--dur-fast) ease;
}
.carousel-dots button.is-active{
  background:var(--orange);
  border-color:var(--orange);
  width:20px;
  border-radius:4px;
}

.carousel-caption{
  position:absolute;
  z-index:3;
  bottom:24px;
  left:18px;
  right:190px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-family:var(--font-label);
  font-weight:600;
  font-size:11.5px;
  letter-spacing:.05em;
  color:var(--on-dark-dim);
  opacity:0;
  transition:opacity .5s ease;
}
.carousel-caption.is-active{ opacity:1; }

@media (max-width:560px){
  .carousel-caption{ display:none; }
  .carousel-controls{ bottom:14px; right:14px; }
}

/* ===========================================================================
   PAGE HEADER - the photographic header used on interior pages, replacing
   a flat text-only band. Same crossfade/Ken-Burns mechanism as the homepage
   hero visual, just full-bleed with the copy laid over a gradient.
=========================================================================== */
.page-header{
  position:relative;
  overflow:hidden;
  min-height:52vh;
  display:flex;
  align-items:flex-end;
  background:var(--charcoal);
}

.page-header-media{
  position:absolute;
  inset:0;
  z-index:0;
}
.page-header-media img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0;
  transition:opacity 1.2s ease;
}
.page-header-media img.is-active{ opacity:1; }

.page-header-scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(15,18,20,0.35) 0%, rgba(15,18,20,0.55) 55%, rgba(15,18,20,0.86) 100%);
}

.page-header-inner{
  position:relative;
  z-index:2;
  max-width:var(--container);
  margin:0 auto;
  padding:56px var(--gutter) 44px;
  width:100%;
}

/* One well-orchestrated entrance per page: header content fades and rises
   in with a short stagger, instead of scattered micro-animations. Neutralized
   globally under prefers-reduced-motion (see base.css). */
@keyframes headerReveal{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:translateY(0); }
}
.page-header-inner > *{ animation:headerReveal .7s var(--ease) both; }
.page-header-inner > *:nth-child(1){ animation-delay:.05s; }
.page-header-inner > *:nth-child(2){ animation-delay:.16s; }
.page-header-inner > *:nth-child(3){ animation-delay:.28s; }
.page-header-inner > *:nth-child(4){ animation-delay:.4s; }
.page-header-inner > *:nth-child(5){ animation-delay:.5s; }
.page-header-inner > *:nth-child(n+6){ animation-delay:.58s; }

.page-header .eyebrow{ color:var(--orange); }
.page-header .eyebrow::before{ background:var(--orange); }
.page-header h1{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(30px,4.6vw,50px);
  line-height:1.03;
  color:#fff;
  max-width:760px;
  margin:0 0 16px;
}
.page-header p.lede{ color:rgba(244,242,238,0.86); max-width:640px; }
.page-header-inner .body-copy{ color:rgba(244,242,238,0.82); }

/* Homepage variant: taller, bigger type, room for the duality toggle. */
.hero-home{ min-height:88vh; }
.hero-home .page-header-inner{ padding:120px var(--gutter) 56px; text-align:center; }
.hero-home h1{ font-size:clamp(36px,5.8vw,68px); max-width:800px; margin-left:auto; margin-right:auto; }
.hero-home .lede{ font-size:clamp(15px,1.6vw,18px); max-width:640px; margin-left:auto; margin-right:auto; }

/* Same reasoning as the h1.display/h2.section-title overrides in base.css:
   the original clamp is already flat-capped by 1440px, so this only unlocks
   further growth above the new 1536px ultrawide breakpoint - 1440px and
   below render identically to before. */
@media (min-width:1536px){
  .hero-home h1{ font-size:clamp(68px,4.43vw,112px); max-width:960px; }
}
@media (min-width:2560px){
  .hero-home{ min-height:92vh; }
  .hero-home h1{ max-width:1200px; }
}
.hero-home .eyebrow{ justify-content:center; }
.hero-home .eyebrow::before{ display:none; }
.hero-home .btn-row{ justify-content:center; }
.hero-home #heroPanels p{ max-width:640px; margin-left:auto; margin-right:auto; }

/* The homepage hero carries far more text (headline, lede, buttons,
   duality toggle, tab copy) than a plain page-header, so its height is
   content-driven rather than fixed. Keep the carousel chrome pinned to
   the top instead of the bottom so it can never collide with that text
   as it grows on shorter viewports or longer copy. */
.hero-home .carousel-controls{ top:18px; bottom:auto; right:18px; }
.hero-home .carousel-caption{ top:58px; bottom:auto; left:18px; right:18px; text-align:left; }

/* The shared page-header-scrim is lightest right at the top (so the
   photo itself reads brightly there), which is exactly where the
   controls/caption now sit for the taller homepage hero. Layer in a
   dedicated dark band behind just that strip so they stay legible
   against a bright sky slide, without darkening the rest of the photo. */
.hero-home .page-header-scrim{
  background:
    linear-gradient(180deg, rgba(15,18,20,0.7) 0%, rgba(15,18,20,0.32) 11%, rgba(15,18,20,0.28) 45%, rgba(15,18,20,0.55) 65%, rgba(15,18,20,0.88) 100%);
}

@media (max-width:640px){
  .hero-home{ min-height:78vh; }
  .hero-home .page-header-inner{ padding:96px var(--gutter) 40px; }
}

.page-header-media .caption-tag{
  position:absolute;
  z-index:2;
  top:20px;
  right:var(--gutter);
  font-family:var(--font-label);
  font-weight:600;
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(244,242,238,0.75);
  background:rgba(20,24,27,0.45);
  padding:6px 12px;
  border-radius:999px;
  backdrop-filter:blur(4px);
}

@media (max-width:640px){
  .page-header{ min-height:44vh; }
  .page-header-inner{ padding:40px var(--gutter) 32px; }
}

/* ===========================================================================
   PHOTO-BACKED CTA BAND - a livelier alternative to the flat charcoal
   .cta-band for pages that want a photographic close.
=========================================================================== */
.cta-band.has-photo{
  position:relative;
  overflow:hidden;
  background:var(--charcoal);
}
.cta-band.has-photo img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0.4;
}
.cta-band.has-photo::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,18,20,0.75) 0%, rgba(15,18,20,0.92) 100%);
}
.cta-band.has-photo > *{ position:relative; z-index:1; }

/* ===========================================================================
   PRODUCTION STILLS STRIP - a horizontally-scrolling filmstrip of real
   in-simulator captures, used to add visual density on production-heavy
   pages without inventing new imagery.
=========================================================================== */
.stills-strip{
  display:flex;
  gap:14px;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  padding:2px 4px 12px;
  scrollbar-width:none;
}
.stills-strip::-webkit-scrollbar{ display:none; }
.stills-strip figure{
  flex:0 0 auto;
  width:240px;
  margin:0;
  scroll-snap-align:start;
}
.stills-strip img{
  width:240px; height:150px;
  object-fit:cover;
  border-radius:var(--radius);
  display:block;
  transition:transform var(--dur) var(--ease);
}
.stills-strip a:hover img,
.stills-strip a:focus-visible img{ transform:scale(1.035); }
.stills-strip figcaption{
  margin-top:8px;
  font-family:var(--font-label);
  font-weight:600;
  font-size:11px;
  letter-spacing:.05em;
  color:var(--ink-faint);
}
@media (max-width:560px){
  .stills-strip figure, .stills-strip img{ width:190px; }
}

/* ===========================================================================
   WHY-VISUAL - supporting image panel for an editorial split section
=========================================================================== */
.why-visual{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  aspect-ratio:4/3;
  box-shadow:var(--shadow-md);
  margin-bottom:28px;
}
.why-visual img{ width:100%; height:100%; object-fit:cover; display:block; }
.why-visual .tag{
  position:absolute; bottom:14px; left:14px;
  font-family:var(--font-label); font-weight:600; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; background:rgba(20,24,27,0.55); padding:6px 11px; border-radius:999px; backdrop-filter:blur(3px);
}

/* ===========================================================================
   DUAL-MARKET TOGGLE - the recurring "REAL AVIATION + FLIGHT SIMULATION"
   motif. Real tabs with real panels, not decorative.
=========================================================================== */
.duality{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--surface);
  padding:6px;
  display:inline-flex;
  gap:4px;
  margin-bottom:26px;
  box-shadow:var(--shadow-lg);
}

.duality button{
  font-family:var(--font-label);
  font-weight:600;
  font-size:12.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:10px 18px;
  border-radius:calc(var(--radius-lg) - 6px);
  border:0;
  background:transparent;
  color:var(--ink-faint);
  cursor:pointer;
  white-space:nowrap;
  transition:background var(--dur-fast) ease, color var(--dur-fast) ease;
}

@media (max-width:420px){
  .duality{ flex-wrap:wrap; }
  .duality button{ font-size:11px; padding:9px 12px; }
}
.duality button.is-active{ background:var(--charcoal); color:var(--on-dark); }
.duality button:hover:not(.is-active){ color:var(--ink); }

/* Two-worlds pairing grid: real-aviation image + sim image, side by side,
   used as a recurring editorial motif (not a rigid 50/50 site split). */
.pairing{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--line);
}

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

.pairing-cell{
  position:relative;
  aspect-ratio:5/4;
  overflow:hidden;
  background:var(--charcoal-2);
}
.pairing-cell img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.pairing-cell:hover img{ transform:scale(1.045); }
.pairing-cell .cell-tag{
  position:absolute;
  top:14px; left:14px;
  font-family:var(--font-label);
  font-weight:600;
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#fff;
  background:rgba(20,24,27,0.55);
  padding:5px 10px;
  border-radius:999px;
}
.pairing-cell.is-sim .cell-tag{ background:var(--orange); }

/* ===========================================================================
   INDUSTRY / PATH SELECTOR (home + services filter)
=========================================================================== */
.path-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
  max-width:1160px;
  margin:0 auto;
}
@media (max-width:900px){ .path-grid{ grid-template-columns:1fr; } }

.path-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:30px 26px;
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  background:var(--surface);
  text-decoration:none;
  color:var(--ink);
  transition:border-color var(--dur-fast) ease, transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.path-card:hover{
  border-color:var(--orange-line);
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
}

.path-card .idx{
  font-family:var(--font-display);
  font-weight:700;
  font-size:14px;
  color:var(--orange);
}

.path-card h3{ font-size:19px; }

.path-card p{ font-size:13.5px; line-height:1.7; color:var(--ink-soft); }

.path-card .path-cta{
  margin-top:auto;
  padding-top:10px;
  font-family:var(--font-label);
  font-weight:600;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-faint);
  display:flex;
  align-items:center;
  gap:8px;
}
.path-card:hover .path-cta{ color:var(--orange); }
.path-card .path-cta svg{ transition:transform var(--dur-fast) ease; }
.path-card:hover .path-cta svg{ transform:translateX(3px); }

/* ===========================================================================
   CAPABILITY GRID
=========================================================================== */
.cap-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:2px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.cap-grid.cols-3{ grid-template-columns:repeat(3, 1fr); }
@media (max-width:820px){ .cap-grid.cols-3{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:520px){ .cap-grid.cols-3{ grid-template-columns:1fr; } }
/* Only the homepage capability grid actually holds 6 items (two rows of 3
   at cols-3's default) - other .cols-3 usages hold exactly 3, so widening
   those to 6 columns leaves 3 empty, background-colored grid tracks. Scoped
   to .cap-grid-6up instead of the shared .cols-3 class. */
@media (min-width:1536px){ .cap-grid.cols-3.cap-grid-6up{ grid-template-columns:repeat(6, 1fr); } }
.cap-item{
  background:var(--surface);
  padding:26px 24px;
}
.cap-item .idx{
  font-family:var(--font-display);
  font-weight:700;
  font-size:20px;
  color:var(--orange);
  display:block;
  margin-bottom:12px;
}
.cap-item h3{ font-size:15.5px; margin:0 0 8px; }
.cap-item p{ font-size:13px; line-height:1.65; color:var(--ink-soft); }

/* ===========================================================================
   PROCESS FLOW (numbered steps - product launch, international entry, etc.)
=========================================================================== */
.process-flow{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:1px;
  background:var(--line-dark);
  border:1px solid var(--line-dark);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.bg-light .process-flow,.bg-alt .process-flow,.bg-surface .process-flow{
  background:var(--line);
  border-color:var(--line);
}

@media (max-width:900px){ .process-flow{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:560px){ .process-flow{ grid-template-columns:1fr; } }

.process-step{
  background:var(--charcoal-2);
  padding:24px 18px;
  position:relative;
}
.bg-light .process-step,.bg-alt .process-step,.bg-surface .process-step{ background:var(--surface); }

.process-step .num{
  font-family:var(--font-display);
  font-weight:700;
  font-size:26px;
  color:var(--orange);
  display:block;
  margin-bottom:10px;
}
.process-step h3{
  font-family:var(--font-label);
  font-weight:700;
  font-size:13.5px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--on-dark);
  margin:0 0 8px;
}
.bg-light .process-step h3,.bg-alt .process-step h3,.bg-surface .process-step h3{ color:var(--ink); }

.process-step p{
  font-size:12.5px;
  line-height:1.6;
  color:var(--on-dark-faint);
  margin:0;
}
.bg-light .process-step p,.bg-alt .process-step p,.bg-surface .process-step p{ color:var(--ink-soft); }

/* ===========================================================================
   PILLAR / EDITORIAL SPLIT
=========================================================================== */
.editorial-split{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:var(--space-xl);
  align-items:start;
}
@media (max-width:860px){
  .editorial-split{ grid-template-columns:1fr; gap:36px; }
}
.editorial-statement{ position:sticky; top:100px; }
@media (max-width:860px){ .editorial-statement{ position:static; } }

.pillar{ display:flex; gap:20px; padding:26px 0; border-top:1px solid var(--line); }
.pillar:first-child{ border-top:0; padding-top:0; }
.pillar-num{ font-family:var(--font-display); font-weight:700; font-size:26px; color:var(--orange); min-width:42px; }
.pillar h3{ font-size:15.5px; margin:0 0 8px; }
.pillar p{ font-size:13.5px; line-height:1.75; color:var(--ink-soft); margin:0; max-width:440px; }

/* ===========================================================================
   TEXT + PHOTO SPLIT
   Pairs a block of copy with production photography, for breaking up long
   text-only sections. .reverse flips the column order so the rhythm
   alternates down a page instead of repeating.
=========================================================================== */
.text-media{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:40px;
  align-items:center;
}
.text-media .text-media-copy{ max-width:480px; }
.text-media .text-media-photo{
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  aspect-ratio:4/3;
}
.text-media .text-media-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.text-media.reverse{ grid-template-columns:1fr 1.15fr; }
.text-media.reverse .text-media-photo{ order:-1; }
@media (max-width:860px){
  .text-media, .text-media.reverse{ grid-template-columns:1fr; gap:28px; }
  .text-media .text-media-copy{ max-width:none; }
  .text-media.reverse .text-media-photo{ order:0; }
}
@media (min-width:1536px){
  .text-media{ gap:56px; }
}

/* ===========================================================================
   STATS
=========================================================================== */
.stat-row{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
@media (max-width:640px){ .stat-row{ grid-template-columns:1fr; } }
.stat-box{ border:1px solid var(--line); border-radius:var(--radius); padding:20px; text-align:center; }
.bg-charcoal .stat-box{ border-color:var(--line-dark); }
.stat-num{ font-family:var(--font-label); font-weight:700; font-size:28px; color:var(--orange); margin:0 0 6px; }
.stat-label{ font-size:11.5px; line-height:1.5; color:var(--ink-faint); margin:0; }
.bg-charcoal .stat-label{ color:var(--on-dark-faint); }

/* ===========================================================================
   BRAND / PARTNER LOGO STRIP
   Dark charcoal band by design: several source logo files are white-on-
   transparent artwork and this keeps them legible without recoloring any
   asset. Each logo is height-matched via --logo-scale for equal visual
   weight (see js/brands.js for the data + reasoning).
=========================================================================== */
.brand-strip{ background:var(--charcoal); border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); padding:40px 0; }
.brand-strip-label{
  text-align:center;
  font-family:var(--font-label);
  font-weight:700;
  font-size:clamp(18px,2.4vw,24px);
  letter-spacing:.04em;
  text-transform:none;
  color:var(--on-dark);
  margin:0 0 12px;
}
.brand-strip-sub{
  text-align:center;
  max-width:560px;
  margin:0 auto 32px;
  font-size:15px;
  line-height:1.7;
  color:var(--on-dark-dim);
}
.brand-track-wrap{
  overflow:hidden;
  width:100%;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.brand-track{
  display:flex;
  align-items:center;
  width:max-content;
  animation:brand-scroll 38s linear infinite;
}
@keyframes brand-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .brand-track{ animation:none; } }

/* Equal-size tiles: every logo contain-fits inside the same box so the
   strip reads as one consistent row regardless of a given mark's native
   aspect ratio. A very wide/thin wordmark (Thrustmaster) will sit a
   little smaller inside its tile than a squarer one - an accepted
   trade-off for uniformity over per-logo optical matching. */
.brand-slot{
  flex:0 0 auto;
  width:172px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 18px;
  margin:0 6px;
}
.brand-slot img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
  transform:scale(var(--logo-scale, 1));
}

@media (max-width:640px){
  .brand-slot{ width:136px; height:54px; padding:0 12px; margin:0 4px; }
}

/* ===========================================================================
   PRICING / PACKAGE CARDS (ported from the original single-page build)
=========================================================================== */
.tier-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:14px; max-width:1160px; margin:0 auto; }

.pricing-card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px 20px;
  text-align:left;
  background:var(--surface);
  min-width:0;
}
.pricing-card.wide{ max-width:460px; margin:0 auto; border-color:var(--orange-line); }

/* CTA buttons inside a pricing card must never overflow the card:
   long labels ("View Business Development") in a narrow grid column
   would otherwise spill past the card's border with the default
   nowrap button style. Full-width + wrap keeps them contained at any
   card width instead. */
.pricing-card .btn-row{ flex-wrap:wrap; }
.pricing-card .btn-row > a{
  width:100%;
  white-space:normal;
  justify-content:center;
  text-align:center;
}

.pricing-name{ font-family:var(--font-label); font-weight:700; font-size:14px; color:var(--ink); margin:0 0 10px; }
.pricing-from{ font-family:var(--font-label); font-weight:600; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 4px; }
.pricing-price{ font-family:var(--font-label); font-weight:700; font-size:27px; color:var(--orange); margin:0 0 10px; }
.pricing-price span{ font-size:12.5px; font-weight:600; color:var(--ink-faint); margin-left:2px; }
.pricing-detail{ font-size:13px; line-height:1.65; color:var(--ink-soft); margin:0; }
.init-fee{ display:inline-block; margin-top:8px; font-family:var(--font-label); font-weight:600; font-size:11.5px; color:var(--ink-faint); }
.init-fee strong{ color:var(--ink-soft); font-weight:600; }

.pkg-card summary{ cursor:pointer; list-style:none; }
.pkg-card summary::-webkit-details-marker{ display:none; }
.pkg-toggle{ display:block; margin-top:14px; font-family:var(--font-label); font-weight:600; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--orange); }
.pkg-toggle::after{ content:"  View Full Package  +"; }
.pkg-card[open] .pkg-toggle::after{ content:"  Hide Full Package  \2212"; }
.pkg-body{ margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.pkg-group-title{ font-family:var(--font-label); font-weight:600; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin:14px 0 6px; }
.pkg-group-title:first-child{ margin-top:0; }
.pkg-body ul,.capability-list{ list-style:none; margin:0 0 4px; padding:0; }
.pkg-body ul li,.capability-list li{ position:relative; padding-left:16px; font-size:12.5px; line-height:1.65; color:var(--ink-soft); margin-bottom:6px; }
.pkg-body ul li::before,.capability-list li::before{ content:""; position:absolute; left:0; top:8px; width:6px; height:1.5px; background:var(--orange); }
.pkg-quote{ margin:16px 0 0; padding-top:14px; border-top:1px solid var(--line); font-size:12.5px; line-height:1.6; color:var(--ink-faint); font-style:italic; }

.capability-list.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:2px 20px; }
@media (max-width:560px){ .capability-list.grid2{ grid-template-columns:1fr; } }

.price-list{ border-top:1px solid var(--line); }
.tier-detail{ border-bottom:1px solid var(--line); }
.tier-detail summary{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 2px; cursor:pointer; list-style:none; }
.tier-detail summary::-webkit-details-marker{ display:none; }
.tier-detail summary::after{ content:"+"; width:16px; text-align:center; font-family:var(--font-label); font-weight:600; color:var(--ink-faint); }
.tier-detail[open] summary::after{ content:"\2212"; color:var(--orange); }
.tier-detail summary .name{ font-size:13.5px; color:var(--ink); font-weight:600; }
.tier-detail summary .price{ flex:0 0 auto; font-family:var(--font-label); font-weight:600; font-size:13px; color:var(--orange); white-space:nowrap; margin-left:auto; margin-right:6px; }
.tier-detail ul{ margin:0 0 14px; padding:0 0 0 4px; list-style:none; }
.tier-detail ul li{ position:relative; padding-left:16px; font-size:12.5px; line-height:1.6; color:var(--ink-soft); margin-bottom:5px; }
.tier-detail ul li::before{ content:""; position:absolute; left:0; top:8px; width:6px; height:1.5px; background:var(--orange); }

.commercial-terms{ padding-top:26px; border-top:1px solid var(--line); }
.commercial-terms-title{ font-family:var(--font-label); font-weight:600; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 16px; }
.commercial-terms-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px 24px; }
.commercial-terms-grid div{ font-size:12.5px; line-height:1.6; color:var(--ink-soft); }
.commercial-terms-grid span{ display:block; font-family:var(--font-label); font-weight:600; font-size:12.5px; color:var(--ink); margin-bottom:2px; }

/* ===========================================================================
   SECTOR / CATEGORY TABS (services filter, package category switch)
=========================================================================== */
.sector-tabs{ display:flex; gap:10px; flex-wrap:wrap; }
.sector-tab{
  display:flex; align-items:center; gap:10px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:12px 20px;
  font-family:var(--font-label); font-weight:600; font-size:13px; letter-spacing:.04em;
  color:var(--ink-faint); cursor:pointer;
  transition:border-color var(--dur-fast) ease, color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.sector-tab.is-active{ border-color:var(--orange); color:var(--ink); background:var(--orange-tint); }
.sector-tab:hover:not(.is-active){ border-color:var(--ink-faint); color:var(--ink); }
.sector-panel[hidden]{ display:none; }

/* ===========================================================================
   PORTFOLIO
=========================================================================== */
.portfolio-filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px; }
.filter-chip{
  font-family:var(--font-label); font-weight:600; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  padding:9px 16px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink-soft);
  cursor:pointer; transition:all var(--dur-fast) ease;
}
.filter-chip.is-active{ background:var(--charcoal); border-color:var(--charcoal); color:var(--on-dark); }
.filter-chip:hover:not(.is-active){ border-color:var(--ink-faint); }

.portfolio-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
@media (max-width:900px){ .portfolio-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .portfolio-grid{ grid-template-columns:1fr; } }
@media (min-width:1536px){ .portfolio-grid{ grid-template-columns:repeat(4, 1fr); gap:24px; } }
@media (min-width:2560px){ .portfolio-grid{ grid-template-columns:repeat(5, 1fr); gap:28px; } }

.portfolio-card{
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface);
  transition:opacity var(--dur) ease, transform var(--dur) ease, box-shadow var(--dur-fast) ease;
}
.portfolio-card:hover{ box-shadow:var(--shadow-md); }
.portfolio-card[hidden]{ display:none; }
.portfolio-card .thumb{ position:relative; aspect-ratio:16/10; background:#0d0f10; overflow:hidden; }
.portfolio-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.portfolio-card:hover .thumb img{ transform:scale(1.06); }
.portfolio-card .card-body{ padding:16px 18px 20px; }
.portfolio-card .tags{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.portfolio-card .tags span{
  font-family:var(--font-label); font-weight:600; font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--steel); background:var(--steel-tint); padding:4px 9px; border-radius:999px;
}
.portfolio-card h3{ font-size:15px; margin:0 0 6px; }
.portfolio-card .client{ font-size:12px; color:var(--ink-faint); margin-bottom:8px; }
.portfolio-card p.desc{ font-size:12.5px; line-height:1.6; color:var(--ink-soft); }

/* ===========================================================================
   VIDEO / YOUTUBE LAZY FACADE (ported)
=========================================================================== */
.carousel-row{ display:flex; align-items:center; gap:10px; }
.carousel-btn{
  flex:0 0 auto; width:36px; height:36px; border-radius:50%; border:1px solid var(--line);
  background:var(--surface); color:var(--ink-soft); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.carousel-btn:hover{ border-color:var(--orange-line); color:var(--orange); }

.trailer-track-wrap,.reel-track-wrap{
  flex:1 1 auto; min-width:0; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none;
}
.trailer-track-wrap::-webkit-scrollbar,.reel-track-wrap::-webkit-scrollbar{ display:none; }
.trailer-track,.reel-track{ display:flex; gap:16px; width:max-content; padding:2px 4px; }
.trailer-card,.reel-card{ flex:0 0 auto; scroll-snap-align:start; }
.trailer-card{ width:400px; }
.reel-card{ width:200px; }
@media (max-width:600px){ .trailer-card{ width:300px; } .reel-card{ width:180px; } }

.video-wrap{ position:relative; width:100%; aspect-ratio:16/9; background:#0a0c0d; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.video-wrap.reel{ aspect-ratio:9/16; }
.video-wrap iframe{ width:100%; height:100%; border:0; display:block; }

.yt-facade{ position:relative; width:100%; height:100%; cursor:pointer; background:#0a0c0d; }
.yt-thumb{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease); }
.yt-facade:hover .yt-thumb{ transform:scale(1.045); }
.yt-play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:46px; height:46px; transition:transform var(--dur-fast) ease; }
.yt-play svg{ width:100%; height:100%; display:block; }
.yt-facade:hover .yt-play,.yt-facade:focus-visible .yt-play{ transform:translate(-50%,-50%) scale(1.08); }
.yt-facade-fallback{ display:none; position:absolute; inset:0; align-items:center; justify-content:center; text-align:center; padding:14px; font-family:var(--font-label); font-size:11.5px; color:var(--on-dark-faint); background:#0d0d0d; }
.yt-facade.thumb-missing .yt-thumb{ display:none; }
.yt-facade.thumb-missing .yt-facade-fallback{ display:flex; }
.video-caption{ margin:10px 0 0; font-family:var(--font-label); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }

/* ===========================================================================
   FORMS (contact + smart recommender)
=========================================================================== */
.form-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:36px;
  box-shadow:var(--shadow-md);
}
@media (max-width:640px){ .form-card{ padding:24px 20px; } }

.form-step{ padding:24px 0; border-top:1px solid var(--line); }
.form-step:first-of-type{ border-top:0; padding-top:0; }
.form-step-label{ font-family:var(--font-label); font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--orange); margin:0 0 16px; }

.form-row{ display:flex; gap:12px; }
@media (max-width:480px){ .form-row{ flex-direction:column; } }
.form-field{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.form-row .form-field{ margin-bottom:0; }
.form-field label{ font-family:var(--font-label); font-weight:600; font-size:12px; color:var(--ink-soft); }

.form-card input,.form-card textarea,.form-card select{
  width:100%; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-sm);
  color:var(--ink); font-family:var(--font-body); font-size:14px; padding:12px 14px; resize:none;
}
.form-card select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%233d6178' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:34px;
}
.form-card input::placeholder,.form-card textarea::placeholder{ color:var(--ink-faint); }
.form-card input:focus,.form-card textarea:focus,.form-card select:focus{ outline:none; border-color:var(--orange-line); background:#fff; }
.form-card input.has-error,.form-card textarea.has-error{ border-color:var(--error); }
.field-error{ min-height:14px; margin:0; font-size:11.5px; color:var(--error); }

.service-cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:12px; }
.service-card{
  display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap:10px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius); padding:18px 16px;
  cursor:pointer; transition:border-color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.service-card:hover{ border-color:var(--ink-faint); }
.service-card.is-selected{ border-color:var(--orange); background:var(--orange-tint); }
.service-card-icon{ color:var(--orange); }
.service-card-name{ font-family:var(--font-label); font-weight:700; font-size:14px; color:var(--ink); }
.service-card-desc{ font-size:12px; line-height:1.55; color:var(--ink-faint); }

.checkbox-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; }
@media (max-width:520px){ .checkbox-grid{ grid-template-columns:1fr; } }
.checkbox-option{ display:flex; align-items:flex-start; gap:9px; font-size:13px; color:var(--ink-soft); cursor:pointer; }
.checkbox-option input{ width:auto; margin:2px 0 0; accent-color:var(--orange); flex:0 0 auto; }
.label-optional{ font-weight:400; color:var(--ink-faint); text-transform:none; letter-spacing:normal; }

.form-step-conditional{ overflow:hidden; transition:opacity .25s ease, transform .25s ease; }
.form-step-conditional[hidden]{ display:none; }

.form-card button[type="submit"]{
  margin-top:10px; background:var(--orange); border:1.5px solid var(--orange); color:#fff;
  font-family:var(--font-label); font-weight:600; font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  padding:14px 22px; border-radius:var(--radius-sm); cursor:pointer; transition:background var(--dur-fast) ease;
}
.form-card button[type="submit"]:hover{ background:var(--orange-2); }
.form-reassurance{ margin:10px 0 0; font-size:12px; color:var(--ink-faint); text-align:center; }
.form-status{ min-height:16px; margin:2px 0 0; font-size:12px; color:var(--ink-soft); }
.form-status.error{ color:var(--error); }

/* ===========================================================================
   SERVICE RECOMMENDER (lightweight tool)
=========================================================================== */
.recommender{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:32px; box-shadow:var(--shadow-md);
}
.recommender-row{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; margin-bottom:22px; }
@media (max-width:900px){ .recommender-row{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .recommender-row{ grid-template-columns:1fr; } }
.recommender-field{ min-width:0; }
.recommender-field label{ display:block; font-family:var(--font-label); font-weight:600; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:8px; }
.recommender-field select{ width:100%; max-width:100%; }
.recommender-result{ margin-top:24px; padding-top:24px; border-top:1px solid var(--line); }
.recommender-result[hidden]{ display:none; }
.rec-item{ display:flex; align-items:flex-start; gap:14px; padding:14px 0; border-top:1px solid var(--line); }
.rec-item:first-child{ border-top:0; }
.rec-item .rec-badge{ flex:0 0 auto; width:28px; height:28px; border-radius:50%; background:var(--orange-tint); color:var(--orange); display:flex; align-items:center; justify-content:center; font-family:var(--font-label); font-weight:700; font-size:12px; }
.rec-item h4{ font-size:14.5px; margin:0 0 4px; }
.rec-item p{ font-size:12.5px; color:var(--ink-soft); line-height:1.6; margin:0 0 6px; }
.rec-item a{ font-family:var(--font-label); font-weight:600; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--orange); text-decoration:none; }

/* ===========================================================================
   CTA BAND
=========================================================================== */
.cta-band{
  border-radius:var(--radius-lg);
  padding:52px 44px;
  text-align:center;
  background:var(--charcoal);
  color:var(--on-dark);
}
@media (max-width:640px){ .cta-band{ padding:36px 24px; } }
.cta-band h2{ color:var(--on-dark); }
.cta-band p{ color:var(--on-dark-dim); max-width:560px; margin:0 auto 26px; }

/* ===========================================================================
   HEADING NUMBER / ALTITUDE-STYLE READOUT MOTIF
=========================================================================== */
.readout{
  display:inline-flex;
  gap:16px;
  font-family:var(--font-label);
  font-weight:600;
  font-size:11px;
  letter-spacing:.08em;
  color:var(--ink-faint);
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 16px;
}
.readout b{ color:var(--orange); }

/* ===========================================================================
   SPECIALIZED SERVICES (Licensing, Simulator Certification)
=========================================================================== */

/* Technical/placard-style notice callout for legal-sensitive clarifications
   (no guaranteed outcomes, not a regulatory authority, etc). Reads like an
   aviation technical-document note rather than a scary legal warning. */
.notice-box{
  border:1px solid var(--steel-line);
  background:var(--steel-tint);
  border-radius:var(--radius);
  padding:20px 22px;
}
.notice-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
@media (max-width:760px){ .notice-grid{ grid-template-columns:1fr; } }

/* Understated scope disclaimer (e.g. "this is a selection, not the full
   portfolio") - smaller than body copy, a thin brand-accent border rather
   than a full callout box, centered and width-capped so it reads the same
   on a phone or a 49" ultrawide monitor. */
.disclaimer-note{
  max-width:640px;
  margin:32px auto 0;
  padding:14px 20px;
  border-left:3px solid var(--orange-line);
  background:var(--surface-2);
  border-radius:var(--radius-sm);
  font-size:13px;
  line-height:1.7;
  color:var(--ink-soft);
  text-align:left;
}
.bg-charcoal .disclaimer-note{
  background:var(--charcoal-2);
  border-left-color:var(--orange-line);
  color:var(--on-dark-dim);
}
@media (max-width:480px){
  .disclaimer-note{ font-size:12.5px; padding:12px 16px; }
}
.notice-box .notice-label{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-label);
  font-weight:700;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--steel-2);
  margin:0 0 10px;
}
.notice-box .notice-label::before{
  content:"";
  width:7px; height:7px;
  border-radius:50%;
  background:var(--steel);
  flex:0 0 auto;
}
.notice-box p{
  font-size:12.5px;
  line-height:1.75;
  color:var(--ink-soft);
  margin:0 0 10px;
}
.notice-box p:last-child{ margin-bottom:0; }

/* Two visually distinct sub-scopes within a specialized service (e.g.
   Flight Simulation & Aviation vs. Sim Racing & Automotive). Differentiated
   by accent color, not just a label, so they read as genuinely separate
   tracks rather than a copy-pasted list. */
.scope-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
@media (max-width:760px){ .scope-grid{ grid-template-columns:1fr; } }

.scope-card{
  border-radius:var(--radius-lg);
  padding:26px 24px;
  border:1px solid var(--line);
  background:var(--surface);
  border-top:4px solid var(--line);
}
.scope-card.is-aviation{ border-top-color:var(--orange); }
.scope-card.is-motorsport{ border-top-color:var(--steel); }
.scope-card .scope-tag{
  font-family:var(--font-label);
  font-weight:700;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin:0 0 10px;
}
.scope-card.is-aviation .scope-tag{ color:var(--orange); }
.scope-card.is-motorsport .scope-tag{ color:var(--steel-2); }
.scope-card h3{ font-size:17px; margin:0 0 10px; }
.scope-card p{ font-size:13.5px; line-height:1.7; color:var(--ink-soft); }

/* Custom-engagement pricing card: deliberately no numbers, reads as a
   higher-value consulting engagement rather than an a-la-carte add-on. */
.quote-card{
  border:1px solid var(--orange-line);
  border-radius:var(--radius-lg);
  padding:30px 28px;
  text-align:center;
  background:var(--surface);
  max-width:480px;
  margin:0 auto;
}
.quote-card .quote-eyebrow{
  font-family:var(--font-label);
  font-weight:600;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0 0 10px;
}
.quote-card .quote-value{
  font-family:var(--font-label);
  font-weight:700;
  font-size:26px;
  color:var(--ink);
  margin:0 0 4px;
}
.quote-card .quote-sub{
  font-family:var(--font-label);
  font-weight:600;
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--orange);
  margin:0 0 18px;
}
.quote-card p.quote-detail{
  font-size:13px;
  line-height:1.75;
  color:var(--ink-soft);
  margin:0 0 22px;
  text-align:left;
}

/* Journey / commercialization narrative blocks (product dev -> market) */
.journey-list{
  display:flex;
  flex-direction:column;
  gap:0;
}
.journey-item{
  display:flex;
  gap:18px;
  padding:22px 0;
  border-top:1px solid var(--line-dark);
}
.journey-item:first-child{ border-top:0; padding-top:0; }
.journey-item .journey-tag{
  flex:0 0 auto;
  min-width:130px;
  font-family:var(--font-label);
  font-weight:700;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--orange);
  padding-top:2px;
}
.journey-item p{
  font-size:13.5px;
  line-height:1.8;
  color:var(--on-dark-dim);
  margin:0;
}

/* ===========================================================================
   OFFER TABLE
   Catalog-style pricing tables (commercial ladder, project menus). Reads
   as a technical spec sheet: label column in the eyebrow/label typeface,
   description in the editorial serif, price column pinned right in orange.
=========================================================================== */
.offer-table-wrap{
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
}
.offer-table{
  width:100%;
  border-collapse:collapse;
  min-width:640px;
}
.offer-table caption{ caption-side:top; text-align:left; }
.offer-table th{
  font-family:var(--font-label);
  font-weight:700;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-faint);
  text-align:left;
  padding:14px 18px;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.offer-table td{
  padding:16px 18px;
  border-bottom:1px solid var(--line-soft);
  font-size:14px;
  line-height:1.6;
  color:var(--ink-soft);
  vertical-align:top;
}
.offer-table tr:last-child td{ border-bottom:0; }
.offer-table tr:hover td{ background:var(--orange-tint); }
.offer-table td:first-child{
  font-family:var(--font-label);
  font-weight:600;
  font-size:14.5px;
  color:var(--ink);
  white-space:nowrap;
}
.offer-table td.price-cell{
  font-family:var(--font-label);
  font-weight:700;
  color:var(--orange);
  white-space:nowrap;
  text-align:right;
}
@media (max-width:640px){
  .offer-table td.price-cell{ text-align:left; }
}

/* ===========================================================================
   INSIGHTS BLOG
=========================================================================== */

/* Aspect-ratio media box shared by featured/article-card/article-hero
   images. Holds an <img> plus a sibling .blog-media-fallback that is shown
   automatically (via onerror on the img) if the real file at the supplied
   path has not been uploaded yet - no broken-image icon, no fake photo. */
.blog-media{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--charcoal-2);
  border-radius:var(--radius);
}
.blog-media img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .5s var(--ease);
}
.blog-media-fallback{
  position:absolute; inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:
    linear-gradient(rgba(244,242,238,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,242,238,0.05) 1px, transparent 1px),
    linear-gradient(150deg,#232a2f,#14181b);
  background-size:32px 32px, 32px 32px, cover;
  z-index:1;
}
.blog-media-fallback svg{ opacity:.45; }
.blog-media.img-missing img{ visibility:hidden; }
.blog-media.img-missing .blog-media-fallback{ display:flex; }

/* ---- Category filter chips reuse .filter-chip / .portfolio-filters from
   the Work page - same visual language, same JS toggle pattern. ---- */

/* ---- Index: featured article ---- */
.featured-article{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:32px;
  align-items:stretch;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--surface);
}
.featured-article .blog-media{ aspect-ratio:4/3; border-radius:0; height:auto; align-self:center; }
.featured-article-body{ padding:8px 32px 8px 0; }
@media (max-width:900px){
  .featured-article{ grid-template-columns:1fr; }
  .featured-article .blog-media{ aspect-ratio:16/9; }
  .featured-article-body{ padding:0 24px 24px; }
}
.featured-article-tag{
  display:inline-block;
  font-family:var(--font-label);
  font-weight:700;
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--orange);
  background:var(--orange-tint);
  padding:5px 11px;
  border-radius:999px;
  margin-bottom:14px;
}
.featured-article h2{ font-size:clamp(22px,2.6vw,32px); margin:0 0 12px; line-height:1.15; }
.featured-article p.excerpt{ font-size:14.5px; line-height:1.75; color:var(--ink-soft); margin:0 0 18px; }

/* ---- Index: article grid ---- */
.article-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
@media (max-width:960px){ .article-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .article-grid{ grid-template-columns:1fr; } }
@media (min-width:1536px){ .article-grid{ grid-template-columns:repeat(4, 1fr); gap:28px; } }
@media (min-width:2560px){ .article-grid{ grid-template-columns:repeat(5, 1fr); gap:32px; } }

.article-card{
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--surface);
  transition:transform var(--dur) ease, box-shadow var(--dur) ease;
}
.article-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.article-card:hover .blog-media img{ transform:scale(1.06); }
.article-card[hidden]{ display:none; }
.article-card .blog-media{ border-radius:0; aspect-ratio:16/10; }
.article-card-body{ padding:18px 20px 22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.article-card-category{
  font-family:var(--font-label);
  font-weight:600;
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--steel-2);
}
.article-card h3{ font-size:16.5px; line-height:1.3; margin:0; }
.article-card h3 a{ text-decoration:none; color:inherit; }
.article-card h3 a:hover{ color:var(--orange); }
.article-card p.excerpt{ font-size:13px; line-height:1.65; color:var(--ink-soft); margin:0; flex:1; }
.article-card-meta{ font-size:11.5px; color:var(--ink-faint); display:flex; gap:8px; align-items:center; }

/* ---- Article page: meta row (author / date / reading time) ---- */
.article-meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px 14px;
  align-items:center;
  font-family:var(--font-label);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--ink-faint);
  margin:18px 0 8px;
}
.article-meta-row .sep{ opacity:.5; }
.page-header .article-meta-row{ color:rgba(244,242,238,0.72); }

/* ---- Article page: body typography ---- */
.article-body h2{ font-size:clamp(20px,2.4vw,26px); margin:40px 0 16px; }
.article-body h2:first-child{ margin-top:0; }
.article-body p{ margin:0 0 18px; }
.article-body ul{ margin:0 0 20px; padding-left:22px; }
.article-body ul li{ margin-bottom:8px; line-height:1.75; }
.article-body a{ color:var(--orange); }
.article-body strong{ color:var(--ink); font-weight:600; }

/* ---- Article page: share row ---- */
.share-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:32px 0; }
.share-row .label{ font-family:var(--font-label); font-weight:600; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); }
.share-btn{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-label); font-weight:600; font-size:12px;
  padding:8px 14px; border-radius:999px;
  border:1px solid var(--line); color:var(--ink-soft); text-decoration:none;
  transition:border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.share-btn:hover{ border-color:var(--orange-line); color:var(--orange); }

/* ---- Article page: related articles ---- */
.related-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
@media (max-width:760px){ .related-grid{ grid-template-columns:1fr; } }

/* ---- Instagram embed facade (privacy-conscious, click-to-load) ---- */
.ig-facade{
  position:relative;
  max-width:540px;
  margin:0 auto;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface-2);
  padding:36px 24px;
  text-align:center;
  cursor:pointer;
}
.ig-facade:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; }
.ig-facade svg{ margin-bottom:14px; }
.ig-facade p.ig-title{ font-family:var(--font-label); font-weight:700; font-size:14px; margin:0 0 6px; color:var(--ink); }
.ig-facade p.ig-sub{ font-size:12.5px; color:var(--ink-faint); margin:0 0 16px; }
.ig-facade .btn-secondary{ pointer-events:none; }
.ig-embed-wrap{ max-width:540px; margin:0 auto; min-height:200px; }
.ig-embed-wrap iframe{ margin:0 auto !important; }