:root {
  --bg: #070506;
  --bg-2: #0e090a;
  --ink: #181213;
  --muted: #6f6567;
  --paper: #fbf7f3;
  --paper-2: #f2ebe5;
  --white: #fff;
  --red: #d91c24;
  --red-bright: #ff3b42;
  --red-deep: #79070c;
  --line: rgba(255,255,255,.12);
  --line-dark: rgba(28,18,19,.12);
  --shell: min(1920px, calc(100% - 48px));
  --radius: 22px;
  --shadow: 0 24px 70px rgba(0,0,0,.25);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.58;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img,
svg { display: block; max-width: 100%; }
a { color: inherit; }
button,
input,
textarea,
select { font: inherit; }
button,
a { -webkit-tap-highlight-color: transparent; }
::selection { background: #ffccd0; color: #3a0509; }

.shell { width: var(--shell); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 1000; padding: .7rem 1rem; background: white; color: #111; border-radius: 8px; text-decoration: none; }
.skip-link:focus { top: 12px; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: rgba(6,4,5,.84);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(18px);
}
.header-inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: white; text-decoration: none; min-width: max-content; }


.site-nav {
  --nav-active-x: 0px;
  --nav-active-width: 0px;
  --nav-active-opacity: 0;
  position: relative;
  display: flex;
  align-items: center;
  gap: .42rem;
}
.site-nav::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: var(--nav-active-width);
  height: 100%;
  border: 1px solid rgba(255,75,81,.82);
  border-radius: 10px;
  background: rgba(180,11,18,.20);
  box-shadow: inset 0 0 0 1px rgba(217,28,36,.07), 0 0 20px rgba(217,28,36,.06);
  opacity: var(--nav-active-opacity);
  transform: translateX(var(--nav-active-x));
  transition: transform .24s ease, width .24s ease, opacity .16s ease;
  pointer-events: none;
}
.site-nav a { position: relative; z-index: 1; }
.site-nav a {
  padding: .62rem .92rem;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #d8d1d2;
  background: transparent;
  text-decoration: none;
  font-size: .92rem;
  font-weight: 650;
  transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.site-nav a:hover,
.site-nav a:focus-visible {
  color: white;
  border-color: rgba(255,75,81,.58);
  background: rgba(180,11,18,.12);
}
.site-nav a.is-active {
  color: white;
  border-color: transparent;
  background: transparent;
}
.menu-button { display: none; width: 44px; height: 42px; padding: 0; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: transparent; }
.menu-button span:not(.sr-only) { display: block; width: 19px; height: 2px; margin: 4px auto; background: white; border-radius: 9px; }

.hero {
  position: relative;
  overflow: hidden;
  min-height: 780px;
  padding: 142px 0 90px;
  color: white;
  background:
    radial-gradient(circle at 76% 37%, rgba(184,10,18,.24), transparent 29%),
    radial-gradient(circle at 31% 50%, rgba(119,0,8,.24), transparent 34%),
    linear-gradient(135deg, #040304 0%, #0a0607 46%, #050405 100%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .55;
  background-image:
    radial-gradient(circle at 8% 18%, rgba(255,82,86,.65) 0 1px, transparent 1.4px),
    radial-gradient(circle at 18% 55%, rgba(255,82,86,.38) 0 1px, transparent 1.3px),
    radial-gradient(circle at 34% 22%, rgba(255,255,255,.32) 0 1px, transparent 1.4px),
    radial-gradient(circle at 51% 73%, rgba(255,72,78,.32) 0 1px, transparent 1.3px),
    radial-gradient(circle at 68% 17%, rgba(255,255,255,.34) 0 1px, transparent 1.4px),
    radial-gradient(circle at 84% 66%, rgba(255,73,79,.36) 0 1px, transparent 1.4px),
    radial-gradient(circle at 94% 27%, rgba(255,255,255,.22) 0 1px, transparent 1.3px);
  background-size: 115px 103px, 153px 139px, 179px 161px, 127px 147px, 211px 193px, 169px 181px, 239px 227px;
}
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0; height: 125px;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,.35));
  pointer-events: none;
}


.eyebrow { margin: 0 0 .9rem; color: #efb2b4; font-size: .76rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow.red { color: var(--red); }
h1,
h2,
h3,
p { margin-top: 0; }
h1 { margin-bottom: 1.45rem; font-size: clamp(3.8rem, 6vw, 6.3rem); line-height: .94; letter-spacing: -.065em; font-weight: 880; }
h1 span { color: #ff434a; text-shadow: 0 0 30px rgba(255,47,55,.13); }
.hero-lede { max-width: 700px; margin-bottom: 1.8rem; color: #d5cdcf; font-size: clamp(1.08rem, 1.5vw, 1.28rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; min-height: 48px; padding: .76rem 1.05rem; border-radius: 11px; font-weight: 760; font-size: .93rem; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; }
.button:hover { transform: translateY(-1px); }
.button-primary { color: white; background: linear-gradient(135deg, #e5242c, #a7070d); border-color: #ff484e; box-shadow: 0 12px 30px rgba(146,4,11,.25); }
.button-primary:hover { box-shadow: 0 16px 36px rgba(182,8,16,.35); }
.button-ghost { color: white; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.03); }
.button-ghost:hover { border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.06); }


.focus-strip { position: relative; z-index: 3; background: #0a0708; color: #b7acae; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
.focus-grid { min-height: 66px; display: grid; grid-template-columns: repeat(5,1fr); align-items: center; }
.focus-grid span { position: relative; padding: .8rem 1rem; text-align: center; font-size: .78rem; text-transform: uppercase; letter-spacing: .11em; font-weight: 760; }
.focus-grid span:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 28%; bottom: 28%; width: 1px; background: rgba(255,255,255,.11); }

.section { padding: 96px 0; }
.section-cream { background: var(--paper); }
.section-white { background: white; }
.section-dark { color: white; background: #080506; position: relative; overflow: hidden; }
.section-dark::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 76% 43%, rgba(161,8,15,.18), transparent 31%), radial-gradient(circle at 22% 66%, rgba(113,5,10,.13), transparent 28%); }
.section-dark::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .15; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 55px 55px; mask-image: linear-gradient(to right, transparent, black 24%, black 76%, transparent); }
.section-redwash { color: white; background: linear-gradient(120deg, #170708, #24090c 58%, #0d0607); position: relative; overflow: hidden; }
.section-redwash::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 10%, rgba(255,51,57,.16), transparent 35%), radial-gradient(circle at 89% 70%, rgba(202,11,20,.14), transparent 30%); pointer-events: none; }
.section-heading { margin-bottom: 44px; }
.section-heading h2,
.about-copy h2,
.contact-copy h2 { margin-bottom: .95rem; font-size: clamp(2.25rem, 4vw, 4rem); line-height: 1.02; letter-spacing: -.05em; }
.section-heading > p:last-child { max-width: 760px; color: var(--muted); font-size: 1.03rem; }
.split-heading { display: grid; grid-template-columns: 1fr .85fr; gap: 70px; align-items: end; }
.split-heading > p { margin-bottom: .25rem; }
.center { text-align: center; margin-inline: auto; }
.narrow { max-width: 760px; }
.dark-heading { position: relative; z-index: 1; max-width: 800px; }
.dark-heading p:last-child { color: #a99fa1; }


.work-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.18fr .82fr; gap: 56px; align-items: stretch; }
.work-list { border-top: 1px solid rgba(255,255,255,.11); }
.work-list article { display: grid; grid-template-columns: 64px 1fr; gap: 18px; padding: 24px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.work-list article > span { color: #d3474c; font-size: .78rem; font-weight: 850; letter-spacing: .08em; }
.work-list h3 { margin-bottom: .35rem; font-size: 1.14rem; }
.work-list p { margin-bottom: 0; color: #a99fa1; }
.circuit-card { position: relative; overflow: hidden; padding: 36px; border-radius: 24px; background: linear-gradient(145deg, rgba(48,12,15,.9), rgba(15,8,9,.94)); border: 1px solid rgba(255,77,82,.22); box-shadow: var(--shadow); }
.circuit-visual { color: #d7242b; height: 220px; margin: -20px -16px 16px; opacity: .75; }
.circuit-visual svg { width: 100%; height: 100%; }
.circuit-star path { stroke: white; stroke-width: 1.5; opacity: .7; }.circuit-star circle { fill: white; }
.circuit-card h3 { margin-bottom: .75rem; font-size: 1.75rem; line-height: 1.12; letter-spacing: -.035em; }
.circuit-card > p:last-child { color: #b9afb0; }


.about-layout { position: relative; z-index: 1; display: grid; grid-template-columns: 1.08fr .92fr; gap: 58px; align-items: center; }
.about-layout-single { grid-template-columns: 1fr; }
.about-layout-single .about-copy { max-width: 1100px; }
.about-copy > p:not(.eyebrow) { color: #d6cdcf; max-width: 760px; }
.about-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.about-tags span { padding: .48rem .7rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.05); color: #d8cfd0; font-size: .8rem; }

.contact-section { color: white; background: #050405; position: relative; overflow: hidden; }
.contact-section::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 18% 42%, rgba(173,8,17,.16), transparent 27%), radial-gradient(circle at 79% 22%, rgba(129,7,13,.12), transparent 28%); }
.contact-layout { position: relative; z-index: 1; display: grid; grid-template-columns: .78fr 1.22fr; gap: 74px; align-items: start; }
.contact-copy { padding-top: 22px; }
.contact-copy > p:not(.eyebrow):not(.privacy-note) { color: #bcb3b5; font-size: 1.03rem; }
.contact-details { display: grid; gap: .35rem; margin: 28px 0; }
.contact-details a { color: white; text-decoration: none; font-weight: 760; }
.contact-details a:hover { color: #ff6469; }
.contact-details span { color: #7f7577; font-size: .9rem; }
.privacy-note { color: #726a6b; font-size: .8rem; }
.form-card { padding: 32px; border-radius: 24px; background: #0d090a; border: 1px solid rgba(255,255,255,.11); box-shadow: 0 34px 80px rgba(0,0,0,.3); }
.form-status { margin-bottom: 18px; padding: .85rem 1rem; border-radius: 10px; font-size: .9rem; }
.form-status.success { background: rgba(49,141,84,.13); border: 1px solid rgba(100,213,139,.32); color: #b8e7c8; }
.form-status.error { background: rgba(194,45,53,.13); border: 1px solid rgba(255,85,92,.3); color: #ffc1c4; }
.field-row { display: grid; gap: 14px; margin-bottom: 16px; }
.field-row.two-col { grid-template-columns: 1fr 1fr; }
label > span { display: block; margin-bottom: .43rem; color: #d4cbcc; font-size: .83rem; font-weight: 700; }
label em { color: #706668; font-style: normal; font-weight: 500; }
input,
textarea,
select { width: 100%; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; color: white; background: #090607; padding: .78rem .84rem; outline: none; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
input:focus,
textarea:focus,
select:focus { border-color: rgba(255,77,83,.75); box-shadow: 0 0 0 3px rgba(217,28,36,.12); background: #0b0708; }
textarea { resize: vertical; min-height: 155px; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #9f9395 50%), linear-gradient(135deg, #9f9395 50%, transparent 50%); background-position: calc(100% - 18px) 20px, calc(100% - 13px) 20px; background-size: 5px 5px,5px 5px; background-repeat: no-repeat; }
.submit-button { width: 100%; margin-top: 2px; }
.submit-button:disabled { opacity: .62; cursor: wait; transform: none; }
.form-note { margin: .8rem 0 0; color: #6f6768; font-size: .78rem; }
.hp-field { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

.site-footer { padding: 36px 0 30px; color: #9e9395; background: #020102; border-top: 1px solid rgba(255,255,255,.08); }
.footer-grid { display: grid; grid-template-columns: 1.1fr 1fr auto; gap: 32px; align-items: center; }

.footer-grid p { margin: 0; color: #6e6667; font-size: .8rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: .65rem 1rem; justify-content: center; }
.footer-links a,
.footer-meta a { color: #a59b9d; text-decoration: none; font-size: .82rem; }
.footer-links a:hover,
.footer-meta a:hover { color: white; }
.footer-meta { display: grid; gap: .25rem; text-align: right; font-size: .78rem; color: #6e6667; }

@media (max-width: 1050px) {
  .hero { min-height: auto; }
  
  
  
  
  .split-heading { grid-template-columns: 1fr; gap: 18px; }
  
  .work-grid,
.about-layout,
.contact-layout { grid-template-columns: 1fr; }
  .circuit-card { max-width: 740px; }
  
  .footer-grid { grid-template-columns: 1fr 1fr; }.footer-meta { text-align: left; }
}

@media (max-width: 780px) {
  :root { --shell: min(1920px, calc(100% - 28px)); }
  html { scroll-padding-top: 72px; }
  .header-inner { min-height: 68px; }
  
  .menu-button { display: block; }
  .site-nav { display: none; position: absolute; left: 14px; right: 14px; top: 68px; padding: 8px; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: rgba(10,6,7,.98); box-shadow: 0 24px 60px rgba(0,0,0,.52); flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav.open { display: flex; }
  .site-nav::before { display: none; }
  .site-nav a { padding: .85rem .9rem; border: 1px solid transparent; border-radius: 8px; background: transparent; }
  .site-nav a:hover,
.site-nav a:focus-visible { border-color: rgba(255,75,81,.42); background: rgba(180,11,18,.10); }
  .site-nav a.is-active { border-color: rgba(255,75,81,.72); background: rgba(180,11,18,.18); }
  .hero { padding: 112px 0 64px; }
  h1 { font-size: clamp(3.2rem, 14vw, 5rem); }
  
  
  .focus-grid { grid-template-columns: 1fr 1fr; padding: 10px 0; }
  .focus-grid span { padding: .6rem .45rem; }
  .focus-grid span::after { display: none; }
  .section { padding: 72px 0; }
  
  
  
  .work-list article { grid-template-columns: 46px 1fr; }
  .contact-layout { gap: 34px; }
  .field-row.two-col { grid-template-columns: 1fr; }
  .form-card { padding: 22px; }
  .footer-grid { grid-template-columns: 1fr; align-items: start; }
  .footer-links { justify-content: flex-start; }.footer-meta { text-align: left; }
}

@media (max-width: 480px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .button { width: 100%; }
  .focus-grid { grid-template-columns: 1fr; }
  .focus-grid span { border-bottom: 1px solid rgba(255,255,255,.06); }
  .section-heading h2,
.about-copy h2,
.contact-copy h2 { font-size: 2.55rem; }
  .circuit-card { padding: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
*::before,
*::after { scroll-behavior: auto !important; transition: none !important; }
}

/* V4.1 masthead — preserve the artwork's natural aspect ratio on every screen. */


/* V4.3 cinematic masthead -------------------------------------------------
   Uses the approved homepage direction as a full-width visual stage while
   keeping the navigation and page copy live/responsive. */
.site-header {
  background: rgba(3,2,3,.96);
  border-bottom-color: rgba(255,255,255,.07);
  backdrop-filter: blur(12px);
}
.site-header .shell {
  width: min(1920px, calc(100% - 48px));
}
.brand-wordmark-only {
  width: 218px;
  height: 58px;
  overflow: hidden;
}
.brand-wordmark-only picture,
.brand-wordmark-only img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-cinematic {
  min-height: 0;
  padding: 76px 0 0;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 36% 34%, rgba(128,3,11,.14), transparent 35%),
    radial-gradient(circle at 71% 31%, rgba(96,0,6,.10), transparent 32%),
    linear-gradient(180deg, #080001 0%, #080102 60%, #070405 100%);
}
.hero-cinematic::before {
  /* The star field belongs to the full-width hero, not the 1920px artwork. */
  z-index: 0;
  opacity: .48;
}
.hero-cinematic::after {
  display: none;
}
.hero-stage {
  position: relative;
  z-index: 2;
  width: min(1920px, 100%);
  margin-inline: auto;
  overflow: hidden;
  line-height: 0;
  background: transparent;
}
.hero-stage picture {
  display: block;
  width: 100%;
  /* Feather the 1920px artwork into the full-bleed cosmic backdrop so very
     wide screens never reveal a vertical image edge. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5.5%, #000 94.5%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 5.5%, #000 94.5%, transparent 100%);
}
.hero-stage img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}
.hero-stage::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to right, rgba(8,0,1,.96) 0%, rgba(8,0,1,0) 6%, rgba(8,0,1,0) 94%, rgba(8,0,1,.96) 100%);
}
.hero-stage::after {
  /* Keep the SOLVE • CONNECT • EQUIP • EMPOWER line fully crisp.
     The artwork already finishes on a near-black base, so a bottom veil is
     unnecessary and was visibly dimming the tagline. */
  display: none;
}
.hero-cinematic-copy {
  position: relative;
  z-index: 4;
  width: min(1920px, calc(100% - 48px));
  margin-top: 14px;
  padding: 0 0 74px;
}
.hero-cinematic-copy .eyebrow {
  margin-bottom: .8rem;
  color: #e9b5b7;
}
.hero-cinematic-copy h1 {
  /* Strong display type, but with enough tracking for clean readability. */
  max-width: 1180px;
  margin-bottom: 1rem;
  font-size: clamp(4.4rem, 6.45vw, 7rem);
  line-height: .91;
  letter-spacing: -.035em;
}
.hero-cinematic-copy h1 span {
  color: #ff3f46;
  text-shadow: 0 0 34px rgba(255,47,55,.14);
}
.hero-cinematic-copy .hero-lede {
  max-width: 640px;
  margin-bottom: 1.35rem;
  color: #d8d0d1;
  font-size: clamp(1rem, 1.25vw, 1.17rem);
}
.hero-cinematic-copy .hero-actions {
  gap: .75rem;
}

@media (max-width: 980px) {
  .site-header .shell,
.hero-cinematic-copy {
    width: min(1920px, calc(100% - 36px));
  }
  .brand-wordmark-only { width: 188px; height: 54px; }
  .hero-cinematic { padding-top: 72px; }
  .hero-stage img {
    width: 112%;
    margin-left: -6%;
  }
  .hero-cinematic-copy {
    margin-top: -8px;
    padding-bottom: 62px;
  }
  .hero-cinematic-copy h1 {
    font-size: clamp(3.8rem, 10vw, 6rem);
  }
}

@media (max-width: 780px) {
  .site-header .shell,
.hero-cinematic-copy {
    width: min(1920px, calc(100% - 28px));
    margin-top: 10px;
  }
  .brand-wordmark-only { width: 158px; height: 48px; }
  .hero-cinematic { padding-top: 68px; }
  .hero-stage img {
    width: 138%;
    margin-left: -19%;
  }
  .hero-stage::after { height: 78px; }
  .hero-cinematic-copy {
    margin-top: -2px;
    padding-bottom: 54px;
  }
  .hero-cinematic-copy .eyebrow {
    margin-bottom: .65rem;
    font-size: .68rem;
    letter-spacing: .13em;
  }
  .hero-cinematic-copy h1 {
    font-size: clamp(3.05rem, 13.8vw, 4.65rem);
    line-height: .92;
    letter-spacing: -.025em;
  }
}

@media (max-width: 480px) {
  .hero-stage img {
    width: 152%;
    margin-left: -26%;
  }
  .hero-cinematic-copy {
    padding-bottom: 46px;
  }
  .hero-cinematic-copy h1 {
    font-size: clamp(2.75rem, 13.7vw, 3.8rem);
    letter-spacing: -.018em;
  }
  .hero-cinematic-copy .hero-lede {
    font-size: .98rem;
  }
}


/* Give the cinematic hero copy a little more breathing room from the left
   edge on mid-to-large desktop widths, without changing the overall artwork
   composition on very wide or small screens. */
@media (min-width: 1100px) and (max-width: 1700px) {
  .hero-cinematic-copy {
    width: min(1920px, calc(100% - 88px));
  }
}

/* Fine alignment with the approved desktop mockup. */
@media (min-width: 781px) {
  .header-inner { min-height: 70px; }
  .hero-cinematic { padding-top: 70px; }
}


/* V4.4 wide layout + scroll-aware navigation -----------------------------
   Content is allowed to expand to 1920px on very wide displays. The primary
   navigation reserves the same outline geometry for every item, so hover and
   the scroll-selected state do not cause layout shift. */

/* V4.6 footer identity + back-to-top -------------------------------------
   The footer uses the exact same wordmark artwork as the fixed header. The
   chevron sits just outside the right edge of the 1920px content frame when
   the viewport has room, and falls back to a safe screen-edge inset on
   narrower displays. */
.footer-wordmark {
  width: 188px;
  height: auto;
  min-width: 0;
  overflow: visible;
}
.footer-wordmark picture,
.footer-wordmark img {
  display: block;
  width: 100%;
  height: auto;
}

.back-to-top {
  position: fixed;
  z-index: 90;
  right: max(18px, calc((100vw - 1920px) / 2 - 58px));
  bottom: 28px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255,75,81,.72);
  border-radius: 12px;
  color: #fff;
  background: rgba(8,4,5,.88);
  box-shadow: 0 12px 34px rgba(0,0,0,.28), inset 0 0 0 1px rgba(217,28,36,.05);
  backdrop-filter: blur(10px);
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .18s ease, visibility .18s ease, transform .18s ease,
              border-color .18s ease, background .18s ease;
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover,
.back-to-top:focus-visible {
  border-color: #ff4b51;
  background: rgba(72,7,11,.94);
  outline: none;
}
.back-to-top svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 780px) {
  .footer-wordmark { width: 158px; }
  .back-to-top {
    right: 14px;
    bottom: 18px;
    width: 44px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .back-to-top { transition: none; }
}


/* V4.8 full-bleed universe + contact arrival focus -----------------------
   The hero's stars/background remain viewport-wide while the actual branded
   artwork and content stay capped at 1920px. */
@media (max-width: 980px) {
  .hero-stage picture {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 2.5%, #000 97.5%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 2.5%, #000 97.5%, transparent 100%);
  }
}

/* V4.9 black outer-edge treatment ----------------------------------------
   On displays wider than the 1920px hero canvas, keep the space beyond the
   artwork pure black. The cosmic field remains centred behind the hero and
   gently vignettes to black at its own edges, preventing a visible vertical
   seam where the 1920px canvas ends. */
.hero-cinematic {
  background: #000;
}
.hero-cinematic::before {
  top: 0;
  bottom: 0;
  left: 50%;
  right: auto;
  width: min(1920px, 100%);
  transform: translateX(-50%);
  opacity: 1;
  background:
    linear-gradient(to right,
      #000 0%,
      rgba(0,0,0,.78) 2.5%,
      rgba(0,0,0,.18) 7%,
      rgba(0,0,0,0) 13%,
      rgba(0,0,0,0) 87%,
      rgba(0,0,0,.18) 93%,
      rgba(0,0,0,.78) 97.5%,
      #000 100%),
    radial-gradient(circle at 36% 34%, rgba(128,3,11,.17), transparent 35%),
    radial-gradient(circle at 71% 31%, rgba(96,0,6,.13), transparent 32%),
    radial-gradient(circle at 8% 18%, rgba(255,82,86,.52) 0 1px, transparent 1.4px),
    radial-gradient(circle at 18% 55%, rgba(255,82,86,.31) 0 1px, transparent 1.3px),
    radial-gradient(circle at 34% 22%, rgba(255,255,255,.27) 0 1px, transparent 1.4px),
    radial-gradient(circle at 51% 73%, rgba(255,72,78,.27) 0 1px, transparent 1.3px),
    radial-gradient(circle at 68% 17%, rgba(255,255,255,.29) 0 1px, transparent 1.4px),
    radial-gradient(circle at 84% 66%, rgba(255,73,79,.29) 0 1px, transparent 1.4px),
    radial-gradient(circle at 94% 27%, rgba(255,255,255,.19) 0 1px, transparent 1.3px),
    linear-gradient(180deg, #080001 0%, #080102 60%, #070405 100%);
  background-size:
    100% 100%,
    100% 100%,
    100% 100%,
    115px 103px,
    153px 139px,
    179px 161px,
    127px 147px,
    211px 193px,
    169px 181px,
    239px 227px,
    100% 100%;
}

/* Once the viewport is at or below the hero's maximum width there are no
   outer gutters, so soften the side vignette slightly to preserve the more
   open mobile/tablet composition. */
@media (max-width: 1920px) {
  .hero-cinematic::before {
    background:
      linear-gradient(to right,
        rgba(0,0,0,.24) 0%,
        rgba(0,0,0,0) 6%,
        rgba(0,0,0,0) 94%,
        rgba(0,0,0,.24) 100%),
      radial-gradient(circle at 36% 34%, rgba(128,3,11,.17), transparent 35%),
      radial-gradient(circle at 71% 31%, rgba(96,0,6,.13), transparent 32%),
      radial-gradient(circle at 8% 18%, rgba(255,82,86,.52) 0 1px, transparent 1.4px),
      radial-gradient(circle at 18% 55%, rgba(255,82,86,.31) 0 1px, transparent 1.3px),
      radial-gradient(circle at 34% 22%, rgba(255,255,255,.27) 0 1px, transparent 1.4px),
      radial-gradient(circle at 51% 73%, rgba(255,72,78,.27) 0 1px, transparent 1.3px),
      radial-gradient(circle at 68% 17%, rgba(255,255,255,.29) 0 1px, transparent 1.4px),
      radial-gradient(circle at 84% 66%, rgba(255,73,79,.29) 0 1px, transparent 1.4px),
      radial-gradient(circle at 94% 27%, rgba(255,255,255,.19) 0 1px, transparent 1.3px),
      linear-gradient(180deg, #080001 0%, #080102 60%, #070405 100%);
    background-size:
      100% 100%,
      100% 100%,
      100% 100%,
      115px 103px,
      153px 139px,
      179px 161px,
      127px 147px,
      211px 193px,
      169px 181px,
      239px 227px,
      100% 100%;
  }
}

/* V5.2 interlocking service pieces -----------------------------------------
   These are intentionally actual puzzle silhouettes rather than circles
   drawn on top of rectangular cards. Tabs protrude from the card body and
   matching sockets are cut visually into the neighbouring card. The joins
   are staggered and alternate direction across the row. */


/* Each side gets one jigsaw feature. Half-circle clipping is important:
   only the usable half of the tab/socket is visible, so the join reads as
   part of the card silhouette instead of a floating circle. */


/* LEFT: outward tab */


/* LEFT: receiving socket */


/* RIGHT: outward tab */


/* RIGHT: receiving socket */


/* Staggered joins and alternating tab direction. */


/* Wide screens: one six-piece assembly. */


/* Three-column layouts become two separate three-piece assemblies. */


/* Two-column layouts keep the jigsaw cue in connected pairs. */


/* Mobile stays simple and robust. */


/* V5.3 broader consultancy positioning + selectable puzzle pieces ------------
   A piece can be pulled visually from the assembly to reveal the deeper
   capability description. Only one piece is open at a time so the puzzle
   remains legible and the interaction stays purposeful. */


.engage-section {
  background:
    radial-gradient(circle at 88% 14%, rgba(217,28,36,.055), transparent 26%),
    #fff;
}

.engage-heading {
  margin-bottom: 36px;
}

.engage-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 16px;
}

.engage-card {
  position: relative;
  min-height: 246px;
  padding: 24px 24px;
  border: 1px solid rgba(44,29,31,.12);
  border-radius: 18px;
  background: #fbf8f5;
  box-shadow: 0 12px 32px rgba(63,37,41,.035);
}

.engage-card > span {
  display: inline-block;
  margin-bottom: 42px;
  color: var(--red);
  font-size: .75rem;
  font-weight: 860;
  letter-spacing: .1em;
}

.engage-card h3 {
  margin-bottom: .7rem;
  font-size: 1.18rem;
  letter-spacing: -.025em;
}

.engage-card p {
  margin-bottom: .9rem;
  color: #665b5e;
  font-size: .93rem;
}

.engage-card strong {
  display: none !important;
}

.engage-action {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

@media (max-width: 1180px) {
  .engage-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .engage-card { min-height: 208px; }
}

@media (max-width: 780px) {
  
  
  
  .engage-grid { grid-template-columns: 1fr; }
  .engage-card { min-height: 0; padding-bottom: 20px; }
}


/* V5.4 interactive capability puzzle --------------------------------------
   The six capability surfaces are true SVG jigsaw silhouettes. On desktop,
   the selected piece travels to the left-hand position in its row and a
   shared detail layer is uncovered across the remaining two positions.
   Mobile keeps the same pieces but moves the detail layer below selection. */
.puzzle-section {
  overflow: hidden;
}

.puzzle-heading {
  margin-bottom: 34px;
}

.puzzle-heading > p strong {
  color: #35282a;
  font-weight: 820;
}

.puzzle-explorer {
  position: relative;
  margin-top: 12px;
  padding-inline: 28px;
}

.puzzle-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 30px 0 34px;
  isolation: isolate;
}

.puzzle-unit {
  position: relative;
  min-width: 0;
  aspect-ratio: 320 / 250;
  z-index: 4;
  transition: opacity .28s ease, filter .28s ease;
}

.puzzle-unit:nth-child(2),
.puzzle-unit:nth-child(5) { z-index: 3; }
.puzzle-unit:nth-child(3),
.puzzle-unit:nth-child(4),
.puzzle-unit:nth-child(6) { z-index: 5; }

.service-piece {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #23191b;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform .46s cubic-bezier(.22,.78,.24,1),
    filter .28s ease,
    opacity .28s ease;
  will-change: transform;
}

.piece-shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 12px 18px rgba(64,34,38,.055));
  transition: filter .25s ease;
}

.piece-shape path {
  fill: #fffaf7;
  stroke: rgba(72,42,46,.20);
  stroke-width: 1.35;
  vector-effect: non-scaling-stroke;
  transition: fill .22s ease, stroke .22s ease;
}

.service-piece:hover .piece-shape path,
.service-piece:focus-visible .piece-shape path {
  fill: #fffdfb;
  stroke: rgba(217,28,36,.42);
}

.service-piece:hover .piece-shape {
  filter: drop-shadow(0 18px 25px rgba(64,34,38,.095));
}

.service-piece:focus-visible {
  outline: none;
}

.service-piece:focus-visible .piece-content {
  outline: 2px solid var(--red);
  outline-offset: 5px;
  border-radius: 10px;
}

.piece-content {
  position: absolute;
  z-index: 2;
  inset: 17% 14% 13% 14%;
  display: flex;
  flex-direction: column;
  min-width: 0;
  pointer-events: none;
}


.piece-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  margin-bottom: 14px;
  color: var(--red);
}

.piece-icon svg {
  width: 29px;
  height: 29px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.piece-content strong {
  display: block;
  max-width: 95%;
  margin-bottom: 7px;
  color: #271d1f;
  font-size: clamp(1.02rem, 1.22vw, 1.25rem);
  line-height: 1.08;
  letter-spacing: -.025em;
}


.piece-action {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-top: 13px;
  color: #96343a;
  font-size: .67rem;
  font-weight: 840;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.piece-action b {
  font-size: .96rem;
  font-weight: 500;
  transition: transform .22s ease;
}

.service-piece:hover .piece-action b {
  transform: translateX(3px);
}

/* The active piece physically travels to the first position in its row. */
.puzzle-unit.is-open {
  z-index: 40 !important;
}

.puzzle-unit.col-1.is-open .service-piece {
  transform: translateX(-24px) translateY(-5px) scale(1.018);
}

.puzzle-unit.col-2.is-open .service-piece {
  transform: translateX(calc(-100% - 24px)) translateY(-5px) scale(1.018);
}

.puzzle-unit.col-3.is-open .service-piece {
  transform: translateX(calc(-200% - 24px)) translateY(-5px) scale(1.018);
}

.puzzle-unit.is-open .piece-shape {
  filter: drop-shadow(0 24px 31px rgba(71,31,36,.16));
}

.puzzle-unit.is-open .piece-shape path {
  fill: #fffefd;
  stroke: rgba(217,28,36,.52);
}

.puzzle-unit.is-open .piece-action {
  color: var(--red);
}

/* Hide the other two pieces in the selected row under the reveal layer. */
.puzzle-grid[data-open-row="1"] .puzzle-unit.row-1:not(.is-open),
.puzzle-grid[data-open-row="2"] .puzzle-unit.row-2:not(.is-open) {
  opacity: 0;
  filter: none;
  pointer-events: none;
}

.puzzle-grid[data-open-row="1"] .puzzle-unit.row-2,
.puzzle-grid[data-open-row="2"] .puzzle-unit.row-1 {
  opacity: .68;
}

.puzzle-detail-panel {
  position: absolute;
  z-index: 2;
  left: calc(33.333333% + 24px);
  right: 0;
  height: calc(50% - 24px);
  padding: 26px 34px 24px 42px;
  overflow: auto;
  border: 1px solid rgba(217,28,36,.19);
  border-radius: 18px;
  background:
    radial-gradient(circle at 96% 7%, rgba(217,28,36,.065), transparent 32%),
    rgba(255,253,251,.985);
  box-shadow: 0 18px 45px rgba(66,36,40,.09);
  opacity: 0;
  visibility: hidden;
  transform: translateX(38px) scale(.985);
  transform-origin: left center;
  pointer-events: none;
  transition:
    opacity .25s ease .11s,
    transform .42s cubic-bezier(.22,.78,.24,1),
    visibility 0s linear .42s;
}

.puzzle-detail-panel.detail-row-1 { top: 20px; }
.puzzle-detail-panel.detail-row-2 { top: calc(50% + 4px); }

.puzzle-detail-panel.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(0) scale(1);
  pointer-events: auto;
  transition-delay: .08s, 0s, 0s;
}

.puzzle-detail-close {
  position: absolute;
  top: 13px;
  right: 14px;
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(217,28,36,.18);
  border-radius: 50%;
  background: #fff;
  color: #8f3439;
  font: 400 1.25rem/1 system-ui, sans-serif;
  cursor: pointer;
}

.puzzle-detail-close:hover,
.puzzle-detail-close:focus-visible {
  border-color: rgba(217,28,36,.48);
  color: var(--red);
  outline: none;
}


.puzzle-detail-panel h3 {
  max-width: 86%;
  margin: 0 0 7px;
  color: #281d1f;
  font-size: clamp(1.18rem, 1.65vw, 1.55rem);
  line-height: 1.08;
  letter-spacing: -.03em;
}

.puzzle-detail-lede {
  max-width: 95%;
  margin: 0 0 12px;
  color: #5e5154;
  font-size: .87rem;
  line-height: 1.46;
}

.puzzle-detail-list {
  columns: 2;
  column-gap: 30px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.puzzle-detail-list li {
  position: relative;
  break-inside: avoid;
  margin: 0 0 7px;
  padding-left: 15px;
  color: #53474a;
  font-size: .80rem;
  line-height: 1.34;
}

.puzzle-detail-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .48em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--red);
}

.puzzle-detail-typical {
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(217,28,36,.13);
  color: #75676a;
  font-size: .75rem;
  line-height: 1.38;
}

.puzzle-detail-typical strong {
  color: #44373a;
}

.puzzle-bridge {
  max-width: 800px;
  margin: 25px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(71,46,49,.10);
  text-align: center;
}

.puzzle-bridge h3 {
  margin: 0 0 7px;
  color: #302426;
  font-size: 1.08rem;
  letter-spacing: -.02em;
}

.puzzle-bridge p {
  margin: 0;
  color: #74676a;
  font-size: .88rem;
  line-height: 1.55;
}

@media (max-width: 1120px) {
  .puzzle-explorer { padding-inline: 20px; }
  .puzzle-grid { padding-inline: 0; }
  .piece-content {
    inset: 16% 12% 12% 13%;
  }
  .piece-icon { margin-bottom: 10px; }
  .piece-content strong { font-size: .98rem; }
  
  .piece-action { margin-top: 9px; }
  .puzzle-detail-panel {
    left: calc(33.333333% + 16px);
    padding: 21px 26px 20px 33px;
  }
  .puzzle-detail-lede { font-size: .81rem; }
  .puzzle-detail-list { column-gap: 19px; }
  .puzzle-detail-list li { font-size: .74rem; }
  .puzzle-detail-typical { font-size: .70rem; }
}

/* Tablet/mobile: keep the jigsaw shapes, but reveal detail below selection
   rather than moving a piece across two columns. */
@media (max-width: 900px) {
  .puzzle-section { overflow: visible; }
  .puzzle-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    padding: 24px 0 28px;
  }
  .puzzle-unit {
    aspect-ratio: 320 / 250;
  }
  .puzzle-grid[data-open-row] .puzzle-unit,
.puzzle-grid[data-open-row="1"] .puzzle-unit.row-1:not(.is-open),
.puzzle-grid[data-open-row="2"] .puzzle-unit.row-2:not(.is-open),
.puzzle-grid[data-open-row="1"] .puzzle-unit.row-2,
.puzzle-grid[data-open-row="2"] .puzzle-unit.row-1 {
    opacity: 1;
    filter: none;
    pointer-events: auto;
  }
  .puzzle-unit.col-1.is-open .service-piece,
.puzzle-unit.col-2.is-open .service-piece,
.puzzle-unit.col-3.is-open .service-piece {
    transform: translateX(-12px) translateY(-3px) scale(1.012);
  }
  .puzzle-detail-panel[aria-hidden="true"] { display: none; }
  .puzzle-detail-panel,
.puzzle-detail-panel.detail-row-1,
.puzzle-detail-panel.detail-row-2 {
    position: relative;
    inset: auto;
    grid-column: 1 / -1;
    width: auto;
    height: auto;
    max-height: none;
    margin: 16px 4px 28px;
    padding: 28px 30px 25px;
    overflow: visible;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
  }
  .puzzle-detail-panel.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .puzzle-detail-list { columns: 2; }
  .puzzle-detail-list li { font-size: .82rem; }
  .puzzle-detail-lede { font-size: .9rem; }
  .puzzle-detail-typical { font-size: .78rem; }
}

@media (max-width: 640px) {
  .puzzle-heading { margin-bottom: 22px; }
  .puzzle-explorer { padding-inline: 5px; }
  .puzzle-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 10px 0 20px;
  }
  .puzzle-unit {
    aspect-ratio: 1.34 / 1;
  }
  /* A single-column stack no longer has matching neighbours, so keep the
     SVG pieces recognisable while clipping protruding side tabs safely. */
  .puzzle-unit {
    overflow: hidden;
    border-radius: 16px;
  }
  .piece-content {
    inset: 15% 13% 12% 13%;
  }
  .piece-content strong { font-size: 1.08rem; }
  
  
  .piece-icon { margin-bottom: 12px; }
  .puzzle-unit.col-1.is-open .service-piece,
.puzzle-unit.col-2.is-open .service-piece,
.puzzle-unit.col-3.is-open .service-piece {
    transform: translateX(-7px) translateY(-2px);
  }
  .puzzle-detail-panel,
.puzzle-detail-panel.detail-row-1,
.puzzle-detail-panel.detail-row-2 {
    grid-column: 1;
    margin: 0 0 14px;
    padding: 26px 22px 23px;
    border-radius: 15px;
  }
  .puzzle-detail-panel h3 { max-width: calc(100% - 34px); }
  .puzzle-detail-list { columns: 1; }
  .puzzle-detail-list li { font-size: .85rem; }
  .puzzle-bridge { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .puzzle-unit,
.service-piece,
.piece-shape,
.piece-shape path,
.puzzle-detail-panel,
.piece-action b {
    transition: none !important;
  }
  .puzzle-unit.col-1.is-open .service-piece,
.puzzle-unit.col-2.is-open .service-piece,
.puzzle-unit.col-3.is-open .service-piece {
    transform: none;
  }
}


/* V5.5 compact capability puzzle + engagement puzzle chain ----------------
   The upper puzzle keeps the V5.4 slide-and-reveal interaction but is denser:
   no numbering, less empty card area and a smaller overall assembly. */
.puzzle-explorer {
  width: 100%;
  max-width: 1080px;
  margin: 12px auto 0;
  padding-inline: 24px;
}

.puzzle-grid {
  padding: 20px 0 26px;
}

.puzzle-unit {
  aspect-ratio: 320 / 205;
}

.piece-content {
  inset: 12% 13% 10% 13%;
  justify-content: center;
}

.piece-icon {
  width: 30px;
  height: 30px;
  margin-bottom: 8px;
}

.piece-icon svg {
  width: 26px;
  height: 26px;
}

.piece-content strong {
  margin-bottom: 5px;
  font-size: clamp(.98rem, 1.12vw, 1.16rem);
}

.piece-content > span:not(.piece-icon):not(.piece-action) {
  font-size: clamp(.73rem, .72vw, .82rem);
  line-height: 1.32;
}

.piece-action {
  margin-top: 9px;
  font-size: .64rem;
}

/* The selected unit's original grid cell must not sit invisibly over the
   reveal panel.  Only the transformed button itself remains interactive. */
.puzzle-unit.is-open {
  pointer-events: none;
}

.puzzle-unit.is-open .service-piece {
  pointer-events: auto;
}

.puzzle-detail-panel {
  z-index: 50;
}

.puzzle-detail-close {
  z-index: 4;
}

/* Ways to engage: a separate, intentionally simple connected puzzle. */


@media (max-width: 1120px) {
  .puzzle-explorer { max-width: 1000px; padding-inline: 18px; }
  .piece-content { inset: 11% 12% 9% 12%; }
}

@media (max-width: 900px) {
  .puzzle-unit { aspect-ratio: 320 / 210; }
  
  
  
}

@media (max-width: 640px) {
  .puzzle-unit { aspect-ratio: 1.7 / 1; }
  .piece-content { inset: 11% 12% 9%; }
  .piece-icon { margin-bottom: 7px; }
  .piece-content strong { font-size: 1rem; }
  .piece-content > span:not(.piece-icon):not(.piece-action) { font-size: .78rem; }
  
  
  
  
  
}


/* V5.6 accessible concertina capability reveal + engagement card deck ------
   Motion is decoration: content remains ordinary semantic HTML, controls are
   keyboard operable, and reduced-motion / forced-colour modes remain useful. */

/* Capability puzzle: let the selected row grow to the full content height.
   The detail panel overlaps the two visually vacated puzzle cells rather than
   using a fixed-height scrolling region. */
.puzzle-section {
  overflow: visible;
}

.puzzle-grid {
  grid-template-rows: auto auto;
  align-items: start;
  row-gap: 0;
}

.puzzle-unit {
  align-self: start;
}

.puzzle-unit.row-1.col-1 { grid-column: 1; grid-row: 1; }
.puzzle-unit.row-1.col-2 { grid-column: 2; grid-row: 1; }
.puzzle-unit.row-1.col-3 { grid-column: 3; grid-row: 1; }
.puzzle-unit.row-2.col-1 { grid-column: 1; grid-row: 2; }
.puzzle-unit.row-2.col-2 { grid-column: 2; grid-row: 2; }
.puzzle-unit.row-2.col-3 { grid-column: 3; grid-row: 2; }

.service-piece:focus-visible .piece-content {
  outline: 3px solid var(--red);
  outline-offset: 6px;
}

.piece-content > span:not(.piece-icon):not(.piece-action) {
  font-size: clamp(.82rem, .78vw, .90rem);
  line-height: 1.38;
}

.piece-action {
  font-size: .72rem;
}

.puzzle-detail-panel,
.puzzle-detail-panel.detail-row-1,
.puzzle-detail-panel.detail-row-2 {
  position: relative;
  inset: auto;
  left: auto;
  right: auto;
  top: auto;
  width: auto;
  height: auto;
  max-height: none;
  min-width: 0;
  align-self: start;
  grid-column: 2 / 4;
  display: grid;
  grid-template-rows: 0fr;
  margin: 8px 0 22px 22px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  opacity: 0;
  visibility: hidden;
  transform: none;
  pointer-events: none;
  transition:
    grid-template-rows .48s cubic-bezier(.22,.78,.24,1),
    opacity .18s ease,
    visibility 0s linear .48s;
}

.puzzle-detail-panel.detail-row-1 { grid-row: 1; }
.puzzle-detail-panel.detail-row-2 { grid-row: 2; }

.puzzle-detail-panel.is-visible {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition-delay: 0s, .08s, 0s;
}

.puzzle-detail-fold {
  position: relative;
  min-height: 0;
  overflow: hidden;
  clip-path: inset(0 100% 0 0 round 18px);
  transform: perspective(900px) rotateY(-8deg) scaleX(.965);
  transform-origin: left center;
  transition:
    clip-path .52s cubic-bezier(.18,.82,.24,1),
    transform .52s cubic-bezier(.18,.82,.24,1);
}

.puzzle-detail-panel.is-visible .puzzle-detail-fold {
  clip-path: inset(0 0 0 0 round 18px);
  transform: perspective(900px) rotateY(0) scaleX(1);
}

.puzzle-detail-fold::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 18px;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 15%,
    rgba(74, 45, 49, .026) 15.5% 16.2%,
    transparent 16.8% 31%
  );
  opacity: .7;
  pointer-events: none;
  transition: opacity .42s ease .16s;
}

.puzzle-detail-panel.is-visible .puzzle-detail-fold::before {
  opacity: .18;
}

.puzzle-detail-inner {
  position: relative;
  min-height: 100%;
  padding: 28px 40px 28px 42px;
  border: 1px solid rgba(217,28,36,.20);
  border-radius: 18px;
  background:
    radial-gradient(circle at 96% 7%, rgba(217,28,36,.065), transparent 32%),
    rgba(255,253,251,.99);
  box-shadow: 0 18px 45px rgba(66,36,40,.09);
}

.puzzle-detail-close {
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  border-width: 2px;
  font-size: 1.35rem;
}

.puzzle-detail-close:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

.puzzle-detail-panel h3 {
  max-width: calc(100% - 56px);
  margin-bottom: 10px;
  font-size: clamp(1.24rem, 1.7vw, 1.62rem);
}

.puzzle-detail-lede {
  max-width: 96%;
  margin-bottom: 15px;
  font-size: .95rem;
  line-height: 1.5;
}

.puzzle-detail-list {
  column-gap: 34px;
  margin-bottom: 16px;
}

.puzzle-detail-list li {
  margin-bottom: 9px;
  padding-left: 17px;
  font-size: .90rem;
  line-height: 1.45;
}

.puzzle-detail-list li::before {
  width: 6px;
  height: 6px;
}

.puzzle-detail-typical {
  padding-top: 13px;
  font-size: .88rem;
  line-height: 1.5;
}

.puzzle-noscript {
  margin: 24px 0;
  padding: 24px 26px;
  border: 1px solid rgba(71,46,49,.14);
  border-radius: 16px;
  background: #fffdfb;
}

.puzzle-noscript h3 { margin-bottom: 12px; }
.puzzle-noscript p { margin: 0 0 10px; color: #5f5355; }
.puzzle-noscript p:last-child { margin-bottom: 0; }

/* Ways to engage: normal state is an ordinary readable grid. The lower
   puzzle merely acts as a visual selector, bringing one card to the front. */
.engage-grid {
  position: relative;
  isolation: isolate;
}

.engage-card {
  min-height: 208px;
  padding: 24px 24px;
  transform-origin: center bottom;
  transition:
    transform .46s cubic-bezier(.22,.78,.24,1),
    opacity .28s ease,
    border-color .28s ease,
    box-shadow .32s ease;
  will-change: transform;
}

.engage-card h3 {
  margin-top: 0;
  font-size: 1.2rem;
}

.engage-card p {
  font-size: .95rem;
  line-height: 1.5;
}


/* A concise, visible facts block helps people scanning the page and gives
   non-visual/machine readers a straightforward statement of the basics. */
.about-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  margin: 30px 0 0;
}

.about-facts > div {
  padding: 18px 19px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  background: rgba(255,255,255,.055);
}

.about-facts dt {
  margin-bottom: 7px;
  color: #fff;
  font-size: .78rem;
  font-weight: 820;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.about-facts dd {
  margin: 0;
  color: rgba(255,255,255,.88);
  font-size: .92rem;
  line-height: 1.5;
}

@media (max-width: 1120px) {
  .puzzle-detail-inner { padding: 25px 32px 25px 34px; }
  .puzzle-detail-lede { font-size: .92rem; }
  .puzzle-detail-list li { font-size: .86rem; }
  .puzzle-detail-typical { font-size: .84rem; }
}

@media (max-width: 900px) {
  /* Return puzzle items to document-order placement so the shared detail
     panel can be inserted directly after the selected piece. */
  .puzzle-unit.row-1.col-1,
.puzzle-unit.row-1.col-2,
.puzzle-unit.row-1.col-3,
.puzzle-unit.row-2.col-1,
.puzzle-unit.row-2.col-2,
.puzzle-unit.row-2.col-3 {
    grid-column: auto;
    grid-row: auto;
  }

  .puzzle-detail-panel,
.puzzle-detail-panel.detail-row-1,
.puzzle-detail-panel.detail-row-2 {
    grid-column: 1 / -1;
    grid-row: auto;
    margin: 10px 4px 24px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .puzzle-detail-panel[aria-hidden="true"] {
    display: grid;
  }

  .puzzle-detail-inner {
    padding: 28px 30px 26px;
  }

  .puzzle-detail-list {
    columns: 1;
  }

  .about-facts {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .piece-content > span:not(.piece-icon):not(.piece-action) {
    font-size: .84rem;
  }

  .puzzle-detail-panel,
.puzzle-detail-panel.detail-row-1,
.puzzle-detail-panel.detail-row-2 {
    margin: 2px 0 16px;
  }

  .puzzle-detail-inner {
    padding: 25px 20px 23px;
    border-radius: 15px;
  }

  .puzzle-detail-fold,
.puzzle-detail-fold::before {
    border-radius: 15px;
  }

  .puzzle-detail-panel h3 {
    max-width: calc(100% - 52px);
    font-size: 1.24rem;
  }

  .puzzle-detail-lede,
.puzzle-detail-list li,
.puzzle-detail-typical {
    font-size: .92rem;
  }

  .engage-card {
    min-height: 0;
    padding: 22px 20px 22px;
  }

  
}

@media (prefers-reduced-motion: reduce) {
  .puzzle-detail-panel,
.puzzle-detail-fold,
.puzzle-detail-fold::before,
.engage-card {
    transition: none !important;
  }

  .puzzle-detail-fold,
.puzzle-detail-panel.is-visible .puzzle-detail-fold {
    clip-path: none;
    transform: none;
  }

  .puzzle-detail-fold::before {
    display: none;
  }

  /* Keep selection understandable without shuffling motion. */
  

  
}

@media (prefers-contrast: more) {
  .piece-shape path {
    stroke: #4b3438;
    stroke-width: 2;
  }

  .puzzle-detail-inner,
.engage-card,
.about-facts > div {
    border-width: 2px;
  }

  .piece-content > span:not(.piece-icon):not(.piece-action) {
    color: #4e4144;
  }
}

@media (forced-colors: active) {
  .piece-shape path {
    fill: Canvas;
    stroke: ButtonText;
    stroke-width: 2;
  }

  .puzzle-detail-inner,
.engage-card {
    background: Canvas;
    color: CanvasText;
    border: 2px solid CanvasText;
  }

  .service-piece:focus-visible,
.puzzle-detail-close:focus-visible {
    outline: 3px solid Highlight;
  }
}

/* V5.6 low-vision polish: keep secondary text comfortably readable. */

.contact-details span,
.privacy-note,
.form-note,
.footer-grid p,
.footer-meta {
  color: #918789;
}
.privacy-note,
.form-note,
.footer-grid p,
.footer-meta {
  font-size: .85rem;
  line-height: 1.5;
}
label em {
  color: #aaa0a2;
}


/* V5.7 interaction stability + number-free process puzzle -----------------
   Text keeps its final line wrapping while capability details are revealed.
   The lower approach is a three-piece circuit puzzle: Understand, Untangle,
   Solve it. Sequence is conveyed by the connected pieces, not decorative
   numbering. */

/* Number-free problem list. */
.work-list article {
  grid-template-columns: 1fr;
  gap: 0;
}

/* Keep capability copy at its final width/line breaks while only the panel's
   clipping height and the decorative fold are animated. This avoids text
   reflow/jitter during the concertina reveal. */
.puzzle-detail-panel,
.puzzle-detail-panel.detail-row-1,
.puzzle-detail-panel.detail-row-2 {
  display: block;
  grid-template-rows: none;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition:
    max-height .52s cubic-bezier(.22,.78,.24,1),
    opacity .18s ease,
    visibility 0s linear .52s;
}

.puzzle-detail-panel.is-visible {
  max-height: var(--detail-height, 1200px);
  opacity: 1;
  visibility: visible;
  transition-delay: 0s, .07s, 0s;
}

.puzzle-detail-fold {
  width: 100%;
}

/* Three connected circuit-board modules for the approach. */

#approach {
  padding-top: 72px;
}

#approach .section-heading {
  margin-bottom: 28px;
}

#approach .section-heading > p:last-child {
  margin-bottom: 0;
}


@media (prefers-reduced-motion: reduce) {
  .puzzle-detail-panel {
    transition: none !important;
  }

  

  

  

  

  
}


/* V5.7 mobile capability clarity ------------------------------------------
   On smaller screens the selected capability is visually unmistakable and
   the revealed region names the capability it belongs to.  aria-expanded is
   still the source of truth for assistive technology. */
.puzzle-detail-capability {
  margin: 0 0 7px;
  color: var(--red);
  font-size: .76rem;
  font-weight: 860;
  letter-spacing: .09em;
  line-height: 1.35;
  text-transform: uppercase;
}

@media (min-width: 901px) {
  .puzzle-detail-capability { display: none; }
}

@media (max-width: 900px) {
  .puzzle-unit.is-open {
    z-index: 25 !important;
  }

  .puzzle-unit.is-open .piece-shape {
    filter: drop-shadow(0 18px 26px rgba(71,31,36,.14));
  }

  .puzzle-unit.is-open .piece-shape path {
    fill: #fff7f3;
    stroke: var(--red);
    stroke-width: 2;
  }

  .puzzle-unit.is-open .piece-content strong {
    color: #8f2028;
  }

  .puzzle-unit.is-open .piece-action {
    width: fit-content;
    margin-top: 11px;
    padding: 5px 9px 5px 10px;
    border: 1px solid rgba(217,28,36,.28);
    border-radius: 999px;
    background: rgba(217,28,36,.08);
    color: #8f2028;
  }

  .puzzle-unit.is-open .piece-action b {
    transform: none;
  }

  .puzzle-detail-panel.is-visible {
    position: relative;
  }

  .puzzle-detail-panel.is-visible::before {
    content: "";
    display: block;
    width: 3px;
    height: 15px;
    margin: 0 0 0 28px;
    border-radius: 3px;
    background: var(--red);
  }

  .puzzle-detail-capability {
    padding-right: 52px;
  }
}

@media (max-width: 640px) {
  .puzzle-grid[data-open-row] .puzzle-unit:not(.is-open) .piece-shape path {
    stroke: rgba(72,42,46,.16);
  }

  .puzzle-unit.is-open {
    overflow: visible;
  }

  .puzzle-unit.is-open .service-piece {
    transform: translateY(-3px) scale(1.008) !important;
  }

  .puzzle-detail-panel,
.puzzle-detail-panel.detail-row-1,
.puzzle-detail-panel.detail-row-2 {
    margin-top: -2px;
  }

  .puzzle-detail-panel.is-visible::before {
    height: 12px;
    margin-left: 20px;
  }

  .puzzle-detail-capability {
    margin-bottom: 6px;
    font-size: .78rem;
  }
}

@media (prefers-contrast: more) {
  .puzzle-unit.is-open .piece-shape path {
    stroke-width: 3;
  }
  .puzzle-unit.is-open .piece-action {
    border-width: 2px;
  }
}

@media (forced-colors: active) {
  .puzzle-unit.is-open .piece-shape path {
    fill: Canvas;
    stroke: Highlight;
  }
  .puzzle-unit.is-open .piece-action {
    background: Canvas;
    color: CanvasText;
    border: 2px solid Highlight;
  }
  .puzzle-detail-panel.is-visible::before {
    background: Highlight;
  }
}


/* V5.7 stable concertina text ---------------------------------------------
   The reveal mask moves; the text layer does not.  Transforming the wrapper
   also transforms glyph geometry and can look like reflow/jitter at some
   viewport widths even when the line wrapping itself has not changed. */
.puzzle-detail-fold,
.puzzle-detail-panel.is-visible .puzzle-detail-fold {
  transform: none;
  transform-origin: initial;
  transition: clip-path .52s cubic-bezier(.18,.82,.24,1);
}

/* V6.6 responsive interaction mode ----------------------------------------
   Below desktop width, prioritise readability and direct touch interaction.
   Desktop keeps the jigsaw/deck choreography; tablet/mobile use compact
   semantic cards and a straightforward accordion-style capability reveal. */
@media (max-width: 900px) {
  /* Capability section: no forced jigsaw geometry on narrow screens. */
  .puzzle-explorer {
    max-width: 760px;
    padding-inline: 0;
  }

  .puzzle-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 12px 0 20px;
  }

  .puzzle-unit,
.puzzle-unit.row-1.col-1,
.puzzle-unit.row-1.col-2,
.puzzle-unit.row-1.col-3,
.puzzle-unit.row-2.col-1,
.puzzle-unit.row-2.col-2,
.puzzle-unit.row-2.col-3 {
    position: relative;
    grid-column: auto;
    grid-row: auto;
    width: auto;
    min-height: 0;
    aspect-ratio: auto;
    overflow: visible;
    border-radius: 0;
    opacity: 1 !important;
    filter: none !important;
    pointer-events: auto !important;
  }

  .service-piece,
.puzzle-unit.col-1.is-open .service-piece,
.puzzle-unit.col-2.is-open .service-piece,
.puzzle-unit.col-3.is-open .service-piece,
.puzzle-unit.is-open .service-piece {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 174px;
    padding: 0;
    transform: none !important;
    border: 1px solid rgba(72,42,46,.15);
    border-radius: 18px;
    background: #fffaf7;
    box-shadow: 0 9px 24px rgba(64,34,38,.045);
    overflow: hidden;
  }

  .service-piece:hover,
.service-piece:focus-visible,
.puzzle-unit.is-open .service-piece {
    transform: none !important;
    border-color: rgba(217,28,36,.38);
    background: #fffdfb;
    box-shadow: 0 12px 28px rgba(64,34,38,.075);
  }

  .puzzle-unit.is-open .service-piece {
    border-width: 2px;
    background: #fff8f5;
  }

  .piece-shape {
    display: none;
  }

  .piece-content {
    position: relative;
    inset: auto;
    display: flex;
    min-height: 174px;
    padding: 22px 22px 20px;
  }

  .piece-icon {
    width: 32px;
    height: 32px;
    margin: 0 0 12px;
  }

  .piece-content strong {
    max-width: none;
    margin-bottom: 7px;
    font-size: 1.05rem;
    line-height: 1.15;
  }

  

  .piece-action,
.puzzle-unit.is-open .piece-action {
    width: fit-content;
    margin-top: auto;
    padding-top: 13px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #96343a;
    font-size: .74rem;
  }

  .puzzle-unit.is-open .piece-action {
    color: var(--red);
  }

  .service-piece:focus-visible {
    outline: 3px solid var(--red);
    outline-offset: 3px;
  }

  .service-piece:focus-visible .piece-content {
    outline: 0;
  }

  /* The selected capability owns the reveal immediately below it. */
  .puzzle-detail-panel,
.puzzle-detail-panel.detail-row-1,
.puzzle-detail-panel.detail-row-2 {
    grid-column: 1 / -1;
    grid-row: auto;
    width: auto;
    margin: -2px 0 8px;
    padding: 0;
  }

  .puzzle-detail-panel.is-visible::before {
    width: 3px;
    height: 12px;
    margin: 0 0 0 26px;
  }

  .puzzle-detail-fold,
.puzzle-detail-panel.is-visible .puzzle-detail-fold {
    clip-path: none;
    transition: none;
  }

  .puzzle-detail-fold::before {
    display: none;
  }

  .puzzle-detail-inner {
    padding: 24px 24px 23px;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(66,36,40,.07);
  }

  .puzzle-detail-capability {
    margin-bottom: 6px;
    padding-right: 50px;
  }

  .puzzle-detail-panel h3 {
    font-size: 1.22rem;
  }

  .puzzle-detail-lede,
.puzzle-detail-list li,
.puzzle-detail-typical {
    font-size: .92rem;
  }

  /* Ways to engage: no deck/puzzle controller on touch-sized layouts. */
  

  .engage-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    height: auto !important;
  }

  .engage-card {
    position: relative;
    z-index: auto !important;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 22px 21px 20px;
    transform: none !important;
    opacity: 1 !important;
    border-color: rgba(44,29,31,.12);
    box-shadow: 0 8px 22px rgba(63,37,41,.035);
  }

  .engage-card h3 {
    margin: 0 0 .55rem;
    font-size: 1.08rem;
    line-height: 1.18;
  }

  .engage-card p {
    margin: 0 0 .8rem;
    font-size: .92rem;
    line-height: 1.5;
  }

  .engage-card strong {
    display: none !important;
  }

  .engage-action {
    margin-top: 24px;
  }
}

@media (max-width: 640px) {
  .puzzle-explorer {
    padding-inline: 0;
  }

  .puzzle-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    padding-top: 6px;
  }

  .service-piece,
.puzzle-unit.col-1.is-open .service-piece,
.puzzle-unit.col-2.is-open .service-piece,
.puzzle-unit.col-3.is-open .service-piece,
.puzzle-unit.is-open .service-piece,
.piece-content {
    min-height: 154px;
  }

  .piece-content {
    padding: 19px 20px 18px;
  }

  .piece-icon {
    margin-bottom: 9px;
  }

  .piece-content strong {
    font-size: 1.04rem;
  }

  

  .piece-action,
.puzzle-unit.is-open .piece-action {
    padding-top: 10px;
  }

  .puzzle-detail-panel,
.puzzle-detail-panel.detail-row-1,
.puzzle-detail-panel.detail-row-2 {
    margin: -2px 0 6px;
  }

  .puzzle-detail-inner {
    padding: 22px 19px 21px;
  }

  .engage-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .engage-card {
    padding: 20px 19px 18px;
  }

  .engage-card h3 {
    font-size: 1.06rem;
  }

  .engage-card p {
    font-size: .92rem;
  }

  /* Circuit approach stays touchable but gives each board enough room. */
  

  
}


/* v8.1 simplification: second and third sections become static puzzle-card
   summaries instead of interactive deck/circuit widgets. */


/* v8.2: restore the original calm engagement cards and use a simple,
   connected static puzzle strip for the approach. */
.engage-grid-static {
  position: static;
  isolation: auto;
}

.engage-grid-static .engage-card {
  min-height: 208px;
  padding: 24px;
  transform: none !important;
  opacity: 1 !important;
  box-shadow: 0 12px 32px rgba(63,37,41,.035);
  will-change: auto;
}

.engage-grid-static .engage-card h3 {
  margin: 0 0 .7rem;
}

.engage-grid-static .engage-card p {
  margin: 0;
}

.approach-puzzle-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  width: min(100%, 1080px);
  margin: 28px auto 0;
  padding-inline: 18px;
}

.approach-puzzle-piece {
  position: relative;
  min-width: 0;
  aspect-ratio: 320 / 180;
  margin-inline: -8px;
}

.approach-puzzle-piece:nth-child(1) { z-index: 2; }
.approach-puzzle-piece:nth-child(2) { z-index: 3; }
.approach-puzzle-piece:nth-child(3) { z-index: 4; }

.approach-puzzle-piece svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 12px 20px rgba(64,34,38,.07));
}

.approach-puzzle-piece path {
  fill: #fffaf7;
  stroke: rgba(72,42,46,.20);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.approach-puzzle-piece > div {
  position: absolute;
  z-index: 2;
  inset: 20% 15%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.approach-puzzle-piece h3 {
  margin: 0 0 .65rem;
  color: #271d1f;
  font-size: clamp(1.18rem, 1.45vw, 1.52rem);
  line-height: 1.08;
  letter-spacing: -.03em;
}

.approach-puzzle-piece p {
  margin: 0 auto;
  max-width: 22ch;
  color: #695c5f;
  font-size: clamp(.88rem, .92vw, 1rem);
  line-height: 1.42;
}

@media (max-width: 900px) {
  .approach-puzzle-strip {
    grid-template-columns: 1fr;
    gap: 10px;
    width: min(100%, 620px);
    padding-inline: 0;
  }

  .approach-puzzle-piece {
    margin-inline: 0;
    aspect-ratio: 2.2 / 1;
  }

  .approach-puzzle-piece svg {
    display: none;
  }

  .approach-puzzle-piece {
    min-height: 150px;
    border: 1px solid rgba(72,42,46,.16);
    border-radius: 18px;
    background: #fffaf7;
  }

  .approach-puzzle-piece > div {
    inset: 18px 22px;
  }
}

@media (max-width: 640px) {
  .engage-grid-static .engage-card {
    min-height: 0;
    padding: 20px 19px;
  }

  .approach-puzzle-piece {
    min-height: 138px;
  }
}