/* ACDEON — About page media styling (v1.4.14)
   Goal: clean ACDEON look (light), orange accents, minimal black, technical audience.
*/
:root{
  --acdeon-orange:#FF6A00;
  --acdeon-blue:#0B2A4A;
  --acdeon-soft:#f4f7fb;
  --acdeon-border: rgba(11,42,74,.12);
  --acdeon-shadow: 0 14px 34px rgba(11,18,32,.12);
  --acdeon-shadow-hover: 0 18px 44px rgba(11,18,32,.18);
}

/* v1.6.0 — About hero: restore orange accents + hover glow (like homepage tiles) */
.about-hero.about-hero--accent{
  background: #fff;
  border: 1px solid var(--acdeon-border);
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(255,106,0,.12);
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.about-hero.about-hero--accent:before{
  content:"";
  position:absolute;
  left:18px;
  top:16px;
  width:46px;
  height:3px;
  background:#FF6A00;
  border-radius:3px;
}
.about-hero.about-hero--accent:hover{
  transform: translateY(-3px);
  border-color: rgba(255,106,0,.35);
  box-shadow: 0 18px 44px rgba(255,106,0,.20);
}
/* Cinematic band under the site header
   - Keep within the same content width as the About page (960px)
   - Add separation from the header
   - Avoid any perceived "black bar" by cropping with cover
*/
.about-cineband{ width:100%; margin:10px 0 6px; }
.about-cineband .container{ max-width:960px; }
.about-cineband__inner{
  width:100%;
  border-radius:18px;
  overflow:hidden;
  border:2px solid rgba(255,106,0,.55);
  box-shadow: var(--acdeon-shadow);
  background:transparent;
}
.about-cineband__video{
  width:100%;
  height:auto;
  object-fit:contain;
  display:block;
  background:transparent;
}
/* Inline highlights (spread, no dark tiles) */
.about-card{
  background: var(--card); /* v1.5.0: neutral white like other tiles */
  border:1px solid var(--acdeon-border);
  border-radius:16px;
  box-shadow: 0 10px 26px rgba(255,106,0,.12);
  padding:18px 16px 16px;
  position:relative;
  transition: transform .18s ease, box-shadow .18s ease;
}

/* v1.6.0 — shared orange accent line (matches about-card styling) */
.card--accentline{ position:relative; }
.card--accentline:before{
  content:"";
  position:absolute;
  left:18px;
  top:16px;
  width:46px;
  height:3px;
  background:#FF6A00;
  border-radius:3px;
}
.about-card:before{
  content:"";
  position:absolute;
  left:18px;
  top:16px;
  width:46px;
  height:3px;
  background:#FF6A00;
  border-radius:3px;
}
.about-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 35px rgba(255,106,0,.18);
}
.about-card h3{
  margin: 10px 0 10px;
  color: var(--acdeon-blue);
  font-family:'Big Shoulders Display',sans-serif;
  font-size: clamp(20px,2.2vw,28px);
  letter-spacing: .2px;
  font-weight: 800;
}
.about-card p{ margin:0; color: rgba(11,18,32,.88); }

.about-highlight{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:16px;
  align-items:stretch;
  margin: 18px 0 26px;
}
.about-highlight--two{ grid-template-columns: 1fr 1fr; }

.about-mediaframe{
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--acdeon-border);
  box-shadow: var(--acdeon-shadow);
  background:#fff;
  position:relative;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.about-mediaframe:hover{
  transform: translateY(-2px);
  box-shadow: var(--acdeon-shadow-hover);
  border-color: rgba(255,106,0,.45);
}
.about-mediaframe img{
  width:100%;
  height:auto;
  display:block;
  object-fit: cover;
}
.about-badge{
  position:absolute;
  top:12px;
  left:12px;
  background: var(--acdeon-orange);
  color:#111;
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  box-shadow: 0 10px 22px rgba(11,18,32,.18);
}
@media (max-width: 980px){
  .about-cineband__video{
  width:100%;
  height:auto;
  object-fit:contain;
  display:block;
  background:transparent;
}
  .about-highlight{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .about-cineband__video{
  width:100%;
  height:auto;
  object-fit:contain;
  display:block;
  background:transparent;
}
}

/* Reusable media embeds (GIF/IMG) — no black frames */
.media-embed{
  border-radius:16px;
  overflow:hidden;
  background:transparent;
  line-height:0;
}
.media-embed--orange{ border:2px solid var(--acdeon-orange); }

/* Contact split: polo beside the full "Get in touch" block */
.contact-split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  align-items: stretch;
  margin: 18px 0 26px;
}
.contact-split__media{ min-height: 100%; }

@media (max-width: 980px){
  .contact-split{
    display:flex;
    flex-direction: column;
    gap:16px;
  }
  .contact-split__media{ order: 1; }
  .contact-split__content{ order: 2; }
}


/* v1.6.0 — contact split: square polo, no white bars, perfect alignment */
@media (min-width: 981px){
  .contact-split{ gap:22px; }
  .contact-split__content{ min-height: 240px; }
  .contact-split__media{ height: 240px; justify-self: end; }
}


/* v1.4.14 tweaks */
.media-embed{border-radius:18px;overflow:hidden;background:transparent;line-height:0}
.media-embed img, .media-embed video{display:block;width:100%;height:auto}
.media-embed--orange{border:2px solid #FF6A00}
.hero-video{margin-top:18px;border-radius:22px;overflow:hidden;background:transparent}
.hero-video video{width:100%;aspect-ratio:2.35/1;object-fit:cover;display:block}
.contact-split{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:stretch}
.contact-split__media{display:flex;align-items:stretch}
.media-embed--contain{max-width:520px;margin-left:auto}
.feature-tile{background:#fff;border-radius:18px;border:1px solid rgba(0,0,0,.08);box-shadow:0 10px 22px rgba(255,106,0,.10);position:relative}
.feature-tile:before{content:"";position:absolute;left:18px;top:16px;width:46px;height:3px;background:#FF6A00;border-radius:3px}

/* v1.4.14: subtle inline media sizing */
.about-mediaframe--small{
  max-width: 360px;
}
.about-mediaframe--small video{
  width:100%;
  height:auto;
  display:block;
}
.about-inlinevideo__fallback{ display:none; }
@supports not (aspect-ratio: 1 / 1){
  .about-inlinevideo__fallback{ display:block; }
}
.polo-embed{ max-width: 240px; aspect-ratio: 1/1; width:100%; }

.about-mediaframe--small{ justify-self:start; }


/* v1.4.14 polish: make media+tile pairs equal height and fully consistent */
.about-highlight{ align-items: stretch; }
.about-mediaframe{ height: 100%; }
.about-card{ height: 100%; display:flex; flex-direction:column; justify-content:flex-start; }
.about-card:hover{ transform: translateY(-2px); box-shadow: 0 14px 34px rgba(255,106,0,.16); }
.about-mediaframe:hover{ transform: translateY(-2px); box-shadow: 0 14px 34px rgba(255,106,0,.16); border-color: rgba(255,106,0,.35); }

/* Remove any accidental top whitespace for missile block: make video fill and hide fallback unless reduced motion */
.about-inlinevideo{ width:100%; height:auto; display:block; }
.about-inlinevideo__fallback{ display:none; }
@media (prefers-reduced-motion: reduce){
  .about-inlinevideo{ display:none; }
  .about-inlinevideo__fallback{ display:block; }
}

/* Polo: never crop, make visually smaller than Get-in-touch card, keep right aligned */
.polo-embed{ max-width: 220px; }
.polo-embed img{ width:100%; height:auto; object-fit:contain; display:block; background:transparent; }


/* v1.4.14: ONLY the two text tiles next to the GIFs should match global tile styling */
.about-card--media{
  background: var(--card) !important; /* same as .tile */
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px;
  box-shadow: var(--acdeon-shadow);
  position: relative;
  padding: 22px 22px 20px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .14s ease;
}
.about-card--media:before{
  content:"";
  position:absolute;
  left:18px;
  top:16px;
  width:46px;
  height:3px;
  background:#FF6A00;
  border-radius:3px;
}
.about-card--media:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.10);
}

/* Keep the heading font identical to section h2 (Big Shoulders Display) */
.about-card--media h3{
  font-family:'Big Shoulders Display',sans-serif;
  font-size: clamp(20px,2.2vw,28px);
  font-weight: 800;
  letter-spacing: .2px;
  margin: 10px 0 10px;
  color: var(--acdeon-blue);
}

/* Make media+tile pairs equal height ONLY in the highlight rows */
.about-highlight{ align-items: stretch; }
.about-highlight .about-mediaframe{ height: 100%; }
.about-highlight .about-card--media{ height: 100%; }

/* Missile: smaller + no duplicate */
.about-mediaframe--missile{ max-width:none; } /* v1.5.0: allow paired sizing */
.about-mediaframe--missile img{ display:block; width:100%; height:auto; }
.about-mediaframe--missile video,
.about-mediaframe--missile .about-inlinevideo__fallback{ display:none !important; }

/* Polo: remove big empty framed box — put orange border on the image itself and align with the contact tile */
.contact-split{ align-items: center; }
.contact-split__media{ display:flex; align-items:center; justify-content:flex-end; }
.polo-embed{ max-width: 220px; margin-left:auto; padding:0; border:none; background:transparent; }
.polo-embed img{
  width:100%;
  height:auto;
  display:block;
  object-fit: contain;
  border:2px solid #FF6A00;
  border-radius:18px;
  background:transparent;
}

/* =========================
   v1.5.0 — About page fixes
   - Neutralize beige cards (only where used)
   - Make paired media + tile equal height
   - Missile media slightly smaller than Hawkeye
   ========================= */

.card--neutral{
  background: var(--card) !important;
  background-image: none !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 14px 34px rgba(11,18,32,.12) !important;
  filter: none !important;
}

/* Ensure About highlight pairs stretch and align */
.about-highlight{
  align-items: stretch;
}

/* Default (Hawkeye) paired height */
.about-highlight--two .about-mediaframe,
.about-highlight--two .about-card{
  min-height: 240px;
}

/* Missile paired height: slightly smaller than Hawkeye */
.about-highlight--missile .about-mediaframe,
.about-highlight--missile .about-card{
  min-height: 150px;
}

/* Make media fill height in paired blocks */
.about-highlight--two .about-mediaframe,
.about-highlight--missile .about-mediaframe{
  display:flex;
}
.about-highlight--two .about-mediaframe img,
.about-highlight--missile .about-mediaframe img{
  width:100%;
  height:100%;
  object-fit: cover;
}

/* Contact split: keep tile and polo aligned with equal height */
.contact-split{
  align-items: stretch;
}
.contact-split__media{
  height:100%;
  display:flex;
}
.contact-split__media img{
  width:100%;
  height:100%;
  object-fit: contain; /* polo should not crop */
  display:block;
}



/* v1.6.0 — Missile: make visual smaller and tile wider */
.about-highlight--missile{ grid-template-columns: .75fr 1.25fr; }

/* v1.6.0 — Ensure missile GIF crops/fills (no unexpected growth) */
.about-mediaframe--missile img{ width:100%; height:100% !important; object-fit:cover; display:block; }

/* v1.6.0 — Polo: remove white bars by cropping like Hawkeye */
.polo-cover img{ width:100%; height:100% !important; object-fit:cover; display:block; }
.polo-cover{ background:#0b1630; }


/* v1.6.0 — fixed-height media embeds (polo & other framed media) */
.media-embed.polo-cover img{ height:100% !important; object-fit:cover; }


/* v1.6.0 — Consistency fixes (accent coordinates + polo square + perfect alignment) */
.about-hero.about-hero--accent:before,
.card--accentline:before,
.about-card:before{
  left:18px !important;
  top:16px !important;
  width:46px !important;
  height:3px !important;
  border-radius:3px !important;
}

/* Contact split: make polo a true square (no portrait crop, no white bars) */
@media (min-width: 981px){
  .contact-split{
    grid-template-columns: 1fr 240px !important; /* tile wider, polo fixed */
    align-items: stretch;
  }
  .contact-split__content{
    height: 240px !important;
    min-height: 240px !important;
  }
  .contact-split__media{
    width: 240px !important;
    height: 240px !important;
    justify-self: end;
  }
}

/* Force square media box and crop nicely */
.polo-embed{
  max-width: none !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: #0b1630;
}
.polo-embed img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}


/* ============================
   v1.6.0 — CANONICAL ACCENT + CONTACT PAIR FIX
   ============================ */

:root {
  --acdeon-orange: #ff6a00;
}

/* Single source of truth for accent line */
.card--accent {
  position: relative;
}
.card--accent::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 18px;
  width: 46px;
  height: 3px;
  background: var(--acdeon-orange);
  border-radius: 3px;
}

/* Hover glow consistent with homepage */
.card--accent:hover {
  box-shadow: 0 0 0 1px rgba(255,106,0,0.25),
              0 12px 28px rgba(255,106,0,0.35);
}

/* Paired layout utility */
.paired {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 24px;
  align-items: stretch;
}
@media (max-width: 900px) {
  .paired { grid-template-columns: 1fr; }
}

/* Media frame with orange border */
.paired__media {
  border-radius: 18px;
  border: 2px solid var(--acdeon-orange);
  overflow: hidden;
}

/* Square polo image */
.paired__media--square {
  aspect-ratio: 1 / 1;
  max-width: 220px;
}
.paired__media img,
.paired__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Ensure buttons stay inside cards */
.card .btn,
.card button {
  margin-top: 16px;
}


/* v1.6.1 — tighten spacing between cinematic band and first tile */
main.section{ padding-top: 14px !important; }


/* v1.6.1 — contact split: keep CTA inside tile, enforce equal heights and square polo */
@media (min-width: 981px){
  .contact-split__content{
    height: 240px;
    display: flex;
    flex-direction: column;
    padding: 22px 26px !important;
  }
  .contact-split__content h2{ margin: 0 0 10px !important; }
  .contact-split__content p{ margin: 0 0 10px !important; line-height: 1.4; }
  .contact-split__content .cta-actions{
    margin-top: auto !important;
    padding-top: 10px;
  }
  .contact-split__media{
    height: 240px;
  }
  .polo-embed{ max-width: 240px; height: 240px; }
  .polo-embed img{ width:100%; height:100%; object-fit: cover; }
}


/* v1.6.2 — Contact split: keep tile and polo exactly same height across breakpoints */
.contact-split{ align-items: stretch; }
.contact-split__content{ height: 100%; }
.contact-split__media{ height: 100%; }
@media (min-width: 720px) and (max-width: 980px){
  .contact-split{
    grid-template-columns: 1fr 240px !important;
  }
  .contact-split__media{
    width: 240px !important;
    height: 240px !important;
  }
  .contact-split__content{
    min-height: 240px !important;
  }
}


/* === v1.7.0: About ACDEON hero typography + accent line (match homepage tiles) === */
.about-page .about-hero h1{
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--acdeon-blue, #0B2A4A);
  line-height: 1.05;
  font-size: clamp(2.2rem, 4.2vw, 4.6rem);
  margin-top: 8px;
}

/* Make the orange accent line identical in style to other ACDEON cards */
.about-hero.about-hero--accent:before{
  left: 18px;
  top: 14px;
  width: 96px;
  height: 4px;
  border-radius: 999px;
  background: var(--orange, #FF6A00);
}


/* === v1.7.8: Mobile stacking for media+tile pairs (Missile removal + Polo/CTA) === */
@media (max-width: 980px){
  /* Force all About highlight pairs to stack vertically on mobile */
  .about-highlight{
    display:flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }
  .about-highlight > .about-mediaframe,
  .about-highlight > .about-card{
    width: 100% !important;
    height: auto !important;
    min-height: unset !important;
  }
  .about-mediaframe{
    justify-self: stretch !important;
  }

  /* Contact split: image first, then the "Get in touch" tile */
  .contact-split{
    display:flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }
  .contact-split__media{
    order: -1 !important;
    width: 100% !important;
    height: auto !important;
    min-height: unset !important;
    justify-self: stretch !important;
  }
  .contact-split__content{
    width: 100% !important;
    min-height: unset !important;
  }

  /* Let the polo fill mobile width (no forced square) */
  .polo-embed{
    max-width: 100% !important;
    aspect-ratio: auto !important;
  }
}


@media (max-width: 900px){
  .about-missile .card, .about-contact .card { order:1 !important; }
  .about-missile .media, .about-contact .media { order:2 !important; }
}