:root{
    --bg:#001141;
    --bg-raised:#041a52;
    --cyan:#33B1FF;
    --gray:#C1C7CD;
    --white:#FFFFFF;
    --hairline: rgba(51,177,255,0.25);
    --hairline-soft: rgba(193,199,205,0.14);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--bg);
    color:var(--white);
    font-family:'IBM Plex Sans', sans-serif;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  a{color:inherit;text-decoration:none;}
  .mono{font-family:'IBM Plex Mono', monospace;}
  .nowrap{white-space:nowrap;}
  .eyebrow{
    font-family:'IBM Plex Mono', monospace;
    font-size:13px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--gray);
  }
  .wrap{
    max-width:1320px;
    margin:0 auto;
    padding:0 40px;
  }
  .hairline{
    height:1px;
    width:100%;
    background:var(--hairline);
    border:none;
  }

  /* ---------- header ---------- */
  header{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(0,17,65,0.85);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--hairline-soft);
  }
  /* utility row: small top strip, right-aligned, delineated from the primary nav */
  .util-row{
    border-bottom:1px solid var(--hairline-soft);
    background:rgba(0,8,32,0.35);
  }
  .util-inner{
    max-width:1320px;
    margin:0 auto;
    padding:9px 40px;
    display:flex;
    justify-content:flex-end;
    gap:24px;
  }
  .util-row a{
    font-size:12.5px;
    color:var(--gray);
    letter-spacing:0.02em;
    transition:color 0.15s ease;
  }
  .util-row a:hover{ color:var(--white); }
  .nav-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:72px;
    max-width:1320px;
    margin:0 auto;
    padding:0 40px;
  }
  .logo{
    font-family:'IBM Plex Sans', sans-serif;
    font-weight:600;
    font-size:17px;
    letter-spacing:0.01em;
    display:flex;
    align-items:center;
    gap:10px;
    white-space:nowrap;
  }
  .logo-mark{
    width:9px;height:9px;border-radius:50%;
    background:var(--cyan);
    box-shadow:0 0 8px 2px rgba(51,177,255,0.7);
    animation:blink 2.4s ease-in-out infinite;
    flex:0 0 auto;
  }
  .logo img{
    height:22px;
    width:auto;
    display:block;
  }
  @keyframes blink{
    0%,100%{opacity:1;}
    50%{opacity:0.35;}
  }
  nav.primary{
    display:flex;
    gap:26px;
  }
  nav.primary a{
    font-size:15px;
    color:var(--gray);
    letter-spacing:0.01em;
    transition:color 0.15s ease;
    white-space:nowrap;
    position:relative;
  }
  nav.primary a:hover{color:var(--white);}
  /* hover-only underline, matching the subpage/production nav (not persistent) */
  nav.primary .nav-item > a::after{
    content:''; position:absolute; left:0; right:0; bottom:-9px; height:2px;
    background:var(--cyan); transform:scaleX(0); transform-origin:left center;
    transition:transform .18s ease;
  }
  nav.primary .nav-item:hover > a::after,
  nav.primary .nav-item:focus-within > a::after{ transform:scaleX(1); }
  /* drop the caret arrows so the home matches the arrow-less subpages */
  .caret{ display:none !important; }
  .nav-right{
    display:flex;
    align-items:center;
    gap:20px;
  }
  .nav-secondary{
    display:flex;
    gap:16px;
  }
  .nav-secondary a{
    font-size:13px;
    color:var(--gray);
    transition:color 0.15s ease;
    white-space:nowrap;
  }
  .nav-secondary a:hover{color:var(--white);}

  /* ---------- nav flyout dropdowns (home, mirrors the site menu) ---------- */
  header{ position:relative; z-index:300; }
  .nav-row{ overflow:visible; }
  nav.primary .nav-item, .nav-secondary .nav-item{ position:relative; display:inline-flex; align-items:center; }
  .nav-item > a{ display:inline-flex; align-items:center; gap:6px; }
  .caret{ width:5px; height:5px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-1px); opacity:0.65; }
  .nav-flyout{
    position:absolute; top:100%; left:0; margin-top:14px;
    min-width:250px; padding:10px 0;
    background:#041A52;
    border:1px solid rgba(255,255,255,0.14);
    box-shadow:0 22px 48px rgba(0,8,32,0.55);
    display:flex; flex-direction:column;
    opacity:0; visibility:hidden; transform:translateY(6px);
    transition:opacity .16s ease, transform .16s ease, visibility .16s;
    z-index:60;
  }
  .nav-flyout::before{ content:''; position:absolute; top:-14px; left:0; right:0; height:14px; } /* hover bridge */
  .nav-item:hover > .nav-flyout, .nav-item:focus-within > .nav-flyout{ opacity:1; visibility:visible; transform:translateY(0); }
  .nav-flyout a{ display:block; padding:9px 22px; font-size:14px; line-height:1.3; color:var(--gray); white-space:nowrap; letter-spacing:0; }
  .nav-flyout a:hover{ color:#fff; background:rgba(51,177,255,0.12); }
  .nav-flyout--wide{ min-width:480px; flex-flow:column wrap; max-height:264px; }
  .nav-secondary .nav-flyout{ left:auto; right:0; }
  .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:'IBM Plex Sans', sans-serif;
    font-size:13.5px;
    font-weight:600;
    padding:10px 18px;
    border-radius:2px;
    white-space:nowrap;
    transition:all 0.15s ease;
  }
  .btn-primary{
    background:var(--cyan);
    color:#001141;
  }
  .btn-primary:hover{
    background:#7cd0ff;
  }
  .btn-outline{
    border:1px solid var(--hairline);
    color:var(--white);
  }
  .btn-outline:hover{
    border-color:var(--cyan);
    background:rgba(51,177,255,0.08);
  }
  .clock{
    display:none; /* header stays a single clean row now that the real (longer) nav labels are in; the live site has no header clock */
    font-size:12px;
    color:var(--cyan);
    letter-spacing:0.05em;
  }
  /* mobile nav: hamburger toggle + drop-down panel (hidden on desktop) */
  .nav-toggle{
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:42px;height:42px;
    padding:0;
    background:transparent;
    border:1px solid var(--hairline);
    border-radius:2px;
    cursor:pointer;
  }
  .nav-toggle span{
    display:block;
    width:18px;height:1.5px;
    margin:0 auto;
    background:var(--white);
    transition:transform 0.2s ease, opacity 0.2s ease;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
  .mobile-nav{
    display:none;
    flex-direction:column;
    max-width:1320px;
    margin:0 auto;
    padding:8px 40px 28px;
  }
  .mobile-nav.open{display:flex;}
  .mobile-nav a{
    font-size:17px;
    color:var(--gray);
    padding:13px 2px;
    border-bottom:1px solid var(--hairline-soft);
    white-space:nowrap;
    transition:color 0.15s ease;
  }
  .mobile-nav a:hover{color:var(--white);}
  .mobile-nav .btn{
    margin-top:18px;
    justify-content:center;
    border-bottom:none;
  }

  /* ---------- hero ---------- */
  .hero{
    position:relative;
    min-height:820px; /* fallback for old browsers */
    min-height:calc(100vh - 77px); /* universal viewport fill below the 77px sticky header */
    min-height:calc(100dvh - 77px); /* dynamic-viewport refinement where supported (mobile) */
    display:flex;
    flex-direction:column; /* headline block grows to fill; readout strip pinned to the bottom edge */
    padding:0; /* override generic section padding so the readout sits flush to the hero's bottom edge */
    overflow:hidden;
    border-bottom:1px solid var(--hairline-soft);
  }
  .hero-photo{
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    background-image:url('../assets/graf/images/graf12.png');
    background-size:cover;
    background-position:center 38%;
    filter:saturate(1.05) brightness(0.72) contrast(1.05);
    z-index:0;
  }
  .hero-video{
    position:absolute;
    top:0;left:0;
    width:100%;height:100%;
    object-fit:cover;
    object-position:center 38%;
    filter:saturate(1.08) brightness(0.74) contrast(1.03);
    z-index:0;
    pointer-events:none;
  }
  /* Navy scrim protects the left-aligned headline while letting the
     colored radar/eyewall on the right breathe. Left + bottom weighted. */
  .hero-scrim{
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    background:
      linear-gradient(90deg, rgba(0,17,65,0.94) 0%, rgba(0,17,65,0.78) 34%, rgba(0,17,65,0.34) 70%, rgba(0,17,65,0.5) 100%),
      linear-gradient(180deg, rgba(0,17,65,0.55) 0%, rgba(0,17,65,0.15) 42%, rgba(0,17,65,0.9) 100%);
    z-index:0;
  }
  .hero-viz{
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    width:100%;height:100%;
    z-index:0;
    opacity:0.9;
  }
  .hero-viz svg{width:100%;height:100%;}
  .sweep{
    position:absolute;
    top:50%;left:50%;
    width:1400px;height:1400px;
    margin-left:-700px;
    margin-top:-700px;
    border-radius:50%;
    background:conic-gradient(from 0deg, rgba(51,177,255,0.22), rgba(51,177,255,0) 24%, rgba(51,177,255,0) 100%);
    animation:spin 9s linear infinite;
    z-index:0;
    mix-blend-mode:screen;
  }
  @keyframes spin{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
  }
  .grid-dot{
    animation:pulse 3.2s ease-in-out infinite;
  }
  @keyframes pulse{
    0%,100%{opacity:0.25; r:1.6;}
    50%{opacity:1; r:3;}
  }
  .hero-inner{
    position:relative;
    z-index:2;
    flex:1 1 auto; /* grow to fill the space above the readout strip */
    display:flex;
    flex-direction:column;
    justify-content:center; /* vertically center the headline block within that space */
    max-width:1320px;
    margin:0 auto;
    /* Top padding clears the now-fixed shared parent header (116px) with breathing
       room, so the STATUS eyebrow + headline sit well below the nav. */
    padding:150px 40px 60px;
    width:100%;
  }
  .status-row{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:34px;
  }
  .status-dot{
    width:7px;height:7px;border-radius:50%;
    background:var(--cyan);
    box-shadow:0 0 6px 2px rgba(51,177,255,0.8);
    animation:blink 2s ease-in-out infinite;
  }
  h1.hero-headline{
    font-family:'IBM Plex Sans', sans-serif;
    font-weight:300;
    font-size:clamp(48px, 6.4vw, 92px);
    line-height:1.03;
    letter-spacing:-0.01em;
    max-width:920px;
    margin:0 0 28px 0;
    text-wrap:balance;
  }
  h1.hero-headline em{
    font-style:normal;
    color:var(--cyan);
  }
  .hero-sub{
    font-size:18px;
    line-height:1.55;
    color:var(--gray);
    max-width:560px;
    margin:0 0 46px 0;
  }
  .hero-ctas{
    display:flex;
    gap:16px;
    margin-bottom:28px;
  }
  /* ---------- hero partner logo band: slow right-to-left, edge-masked ---------- */
  .hero-logos{
    position:relative;
    z-index:2;
    width:100%;
    padding:46px 0 52px;
    margin-top:10px;
    overflow:hidden;
    /* longer fade toward both page edges */
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 20%, #000 80%, transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0, #000 20%, #000 80%, transparent 100%);
  }
  .hero-logos-track{
    display:flex;
    align-items:center;
    width:max-content;
    will-change:transform;
    animation:logomarquee 72s linear infinite;
  }
  /* ONE uniform size. Each logo's individual sizing (and Oppo's vertical nudge)
     is now baked into its source PNG — every file is a common 120px-tall canvas
     with the mark scaled + padded to encode its size, so a single height here
     renders them all at the right relative sizes. Re-uploads stay correct. */
  .hero-logo{
    height:37px;
    width:auto;
    margin-right:92px;
    flex:0 0 auto;
    object-fit:contain;
    filter:brightness(0) invert(1); /* uniform white, regardless of source color */
    opacity:0.5; /* persistent — no hover change */
  }
  @keyframes logomarquee{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce){
    .hero-logos{ -webkit-mask-image:none; mask-image:none; }
    .hero-logos-track{ animation:none; flex-wrap:wrap; width:100%; justify-content:center; gap:26px 48px; }
    .hero-logo{ margin-right:0; }
  }
  .readout-strip{
    position:relative;
    z-index:2;
    border-top:1px solid var(--hairline);
    border-bottom:1px solid var(--hairline);
    background:rgba(0,10,40,0.55);
  }
  .readout-inner{
    max-width:1320px;
    margin:0 auto;
    padding:0 40px;
    display:flex;
    flex-wrap:wrap;
  }
  .readout-item{
    flex:1;
    min-width:220px;
    padding:20px 28px;
    border-right:1px solid var(--hairline-soft);
    font-family:'IBM Plex Mono', monospace;
  }
  .readout-item:last-child{border-right:none;}
  .readout-value{
    font-size:30px;
    color:var(--cyan);
    display:block;
    margin-bottom:6px;
    line-height:1;
  }
  .readout-label{
    font-size:12.5px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--gray);
  }

  /* ---------- section shell ---------- */
  section{
    position:relative;
    padding:110px 0;
  }
  .section-border{border-bottom:1px solid var(--hairline-soft);}
  /* Alternating "floors" so consecutive dark sections read as chapters. */
  .raised{background:var(--bg-raised);}

  /* ---------- full-bleed color GRAF feature band ---------- */
  .feature-band{
    position:relative;
    padding:0;
    min-height:460px;
    display:flex;
    align-items:center;
    overflow:hidden;
    border-top:1px solid var(--hairline);
    border-bottom:1px solid var(--hairline);
  }
  .feature-img{
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    background-image:url('../assets/graf/images/graf6.png');
    background-size:cover;
    background-position:center 42%;
    filter:saturate(1.05) contrast(1.02);
    z-index:0;
  }
  .feature-scrim{
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    background:
      linear-gradient(90deg, rgba(0,17,65,0.95) 0%, rgba(0,17,65,0.78) 32%, rgba(0,17,65,0.32) 62%, rgba(0,17,65,0.18) 100%),
      linear-gradient(180deg, rgba(0,17,65,0) 34%, rgba(0,17,65,0.6) 100%);
    z-index:1;
  }
  /* SVG data-viz overlay: thin white grid lines + dashed trend curve */
  .feature-viz{
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    width:100%;height:100%;
    z-index:1;
    pointer-events:none;
    opacity:0.85;
  }
  .feature-inner{
    position:relative;
    z-index:2;
    max-width:1320px;
    margin:0 auto;
    padding:96px 40px;
    width:100%;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:48px;
  }
  .feature-copy{max-width:720px;}
  .feature-plate{
    flex:0 0 auto;
    text-align:right;
    min-width:200px;
  }
  .plate-stat{
    display:block;
    font-family:'IBM Plex Sans', sans-serif;
    font-weight:300;
    font-size:clamp(64px, 9vw, 132px);
    line-height:0.88;
    letter-spacing:-0.02em;
    color:var(--white);
    text-shadow:0 2px 34px rgba(0,17,65,0.7);
  }
  .plate-caption{
    display:block;
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--gray);
    margin-top:16px;
    max-width:240px;
    margin-left:auto;
    line-height:1.5;
  }
  .feature-eyebrow{
    display:block;
    margin-bottom:24px;
    color:var(--cyan);
  }
  .feature-statement{
    font-family:'IBM Plex Sans', sans-serif;
    font-weight:300;
    font-size:clamp(34px, 4.4vw, 60px);
    line-height:1.1;
    letter-spacing:-0.01em;
    margin:0;
    max-width:760px;
    text-wrap:balance;
  }
  .feature-statement em{font-style:normal; color:var(--cyan);}
  .feature-substat{
    font-family:'IBM Plex Mono', monospace;
    font-size:13.5px;
    letter-spacing:0.04em;
    color:var(--gray);
    margin:28px 0 0 0;
  }
  /* ---------- full-bleed wind-streamline video plate ---------- */
  .video-plate{
    position:relative;
    padding:0;
    min-height:480px;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
    border-top:1px solid var(--hairline);
    border-bottom:1px solid var(--hairline);
  }
  .video-plate-media{
    position:absolute;
    top:0;left:0;
    width:100%;height:100%;
    object-fit:cover;
    object-position:center 40%;
    filter:saturate(1.05) contrast(1.03);
    z-index:0;
    pointer-events:none;
  }
  .video-plate-scrim{
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    /* left-weighted navy wash (like the Let's talk CTA) so the copy always
       reads, plus a soft bottom grounding; the storm eye on the right stays clear */
    background:
      linear-gradient(90deg, rgba(0,17,65,0.92) 0%, rgba(0,17,65,0.86) 34%, rgba(0,17,65,0.5) 58%, rgba(0,17,65,0.16) 80%, rgba(0,17,65,0) 100%),
      linear-gradient(180deg, rgba(0,17,65,0) 45%, rgba(0,17,65,0.45) 100%);
    z-index:1;
  }
  .video-plate-inner .eyebrow{ text-shadow:0 1px 10px rgba(0,10,40,0.85); }
  .video-plate-inner{
    position:relative;
    z-index:2;
    max-width:1320px;
    margin:0 auto;
    padding:60px 40px 54px;
    width:100%;
  }
  .video-plate-statement{
    font-family:'IBM Plex Sans', sans-serif;
    font-weight:300;
    font-size:clamp(30px, 3.6vw, 50px);
    line-height:1.12;
    letter-spacing:-0.01em;
    color:var(--white);
    max-width:840px;
    margin:20px 0 0 0;
    text-shadow:0 2px 26px rgba(0,10,40,0.75);
    text-wrap:balance;
  }
  .video-plate-statement em{ font-style:normal; color:var(--cyan); }
  .video-plate-caption{
    font-size:14px;
    letter-spacing:0.03em;
    color:var(--gray);
    max-width:660px;
    margin:20px 0 0 0;
    line-height:1.55;
    text-shadow:0 1px 12px rgba(0,10,40,0.7);
  }

  /* ---------- signature viz: variable-resolution grid ---------- */
  .gridviz-wrap{
    display:flex;
    align-items:center;
    gap:72px;
  }
  .gridviz-copy{flex:1 1 46%; max-width:560px;}
  .gridviz-copy .feature-eyebrow{margin-bottom:24px;}
  .gridviz-plate{
    flex:1 1 54%;
    position:relative;
    border:1px solid var(--hairline);
    background:#000a28;
    border-radius:2px;
    overflow:hidden;
    aspect-ratio:16 / 11;
  }
  /* aerial image fills the box */
  .gridviz-photo{
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    background-image:url('../assets/site/aerial-clouds-terrain.jpeg');
    background-size:cover;
    background-position:center 50%;
    z-index:0;
  }
  /* medium navy veil: image clearly visible, but grid + labels stay legible.
     slightly heavier in the label corners (top-right / bottom-left) */
  .gridviz-photo::after{
    content:"";
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    background:
      linear-gradient(180deg, rgba(0,17,65,0.46) 0%, rgba(0,17,65,0.58) 100%),
      radial-gradient(ellipse at 88% 8%, rgba(0,17,65,0.4), rgba(0,17,65,0) 34%),
      radial-gradient(ellipse at 6% 96%, rgba(0,17,65,0.45), rgba(0,17,65,0) 40%);
  }
  /* animated grid layered OVER the image, edge to edge; slight shadow so cyan
     lines read even over bright clouds */
  .gridviz-plate canvas{
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    display:block;
    width:100%;
    height:100%;
    z-index:1;
    filter:drop-shadow(0 0 1px rgba(0,10,40,0.85));
  }
  .gridviz-plate .plate-tag{
    position:absolute;
    left:16px;bottom:14px;
    z-index:2;
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--cyan);
    opacity:0.95;
    text-shadow:0 1px 8px rgba(0,10,40,0.9);
  }
  .gridviz-plate .plate-corner{
    position:absolute;
    right:16px;top:14px;
    z-index:2;
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    letter-spacing:0.1em;
    color:var(--white);
    text-shadow:0 1px 8px rgba(0,10,40,0.9);
  }

  /* ---------- who we serve: full-frame image band ---------- */
  .serve-section{position:relative; overflow:hidden;}
  .serve-img{
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    background-image:url('../assets/site/hdr-aviation.png');
    background-size:cover;
    background-position:center 42%;
    filter:saturate(1.02) contrast(1.02);
    z-index:0;
  }
  .serve-scrim{
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    background:
      linear-gradient(180deg, rgba(0,17,65,0.92) 0%, rgba(0,17,65,0.72) 30%, rgba(0,17,65,0.66) 70%, rgba(0,17,65,0.9) 100%);
    z-index:0;
  }
  .serve-section .wrap{position:relative; z-index:2;}
  .serve-section .verticals{background:rgba(51,177,255,0.16);}
  .serve-section .vertical-card{
    background:rgba(0,12,44,0.68);
    backdrop-filter:blur(3px);
  }
  .serve-section .vertical-card:hover{
    background:rgba(0,20,66,0.82);
  }

  .section-head{
    margin-bottom:56px;
    max-width:760px;
  }
  .section-head .eyebrow{margin-bottom:18px;display:block;}
  h2.section-title{
    font-family:'IBM Plex Sans', sans-serif;
    font-weight:300;
    font-size:clamp(32px, 3.6vw, 46px);
    line-height:1.15;
    margin:0;
    letter-spacing:-0.005em;
    text-wrap:balance;
  }

  /* ---------- AI legacy manifesto ---------- */
  .legacy{
    background:linear-gradient(180deg, rgba(51,177,255,0.05), rgba(51,177,255,0) 40%);
  }
  .legacy-eyebrow{margin-bottom:30px;}
  .legacy-headline{
    font-family:'IBM Plex Sans', sans-serif;
    font-weight:300;
    font-size:clamp(34px, 4.6vw, 58px);
    line-height:1.18;
    max-width:980px;
    margin:0 0 48px 0;
    letter-spacing:-0.005em;
    text-wrap:balance;
  }
  .legacy-headline .accent{color:var(--cyan);}
  .legacy-rule{
    width:100%;
    height:1px;
    background:var(--hairline);
    margin:0 0 48px 0;
  }
  .legacy-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:36px 60px;
  }
  .legacy-item{
    padding-top:18px;
    border-top:1px solid var(--hairline-soft);
  }
  .legacy-item .tag{
    display:block;
    margin-bottom:12px;
  }
  .legacy-item p{
    margin:0;
    font-size:15.5px;
    line-height:1.6;
    color:var(--gray);
    max-width:420px;
  }

  .legacy-cta{ margin-top:44px; }

  /* ---------- proof grid ---------- */
  .proof-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    border:1px solid var(--hairline-soft);
  }
  .proof-tile{
    padding:38px 30px;
    border-right:1px solid var(--hairline-soft);
    border-bottom:1px solid var(--hairline-soft);
    transition:background 0.2s ease;
  }
  .proof-tile:hover{background:rgba(51,177,255,0.05);}
  .proof-tile:nth-child(4n){border-right:none;}
  .proof-value{
    font-family:'IBM Plex Mono', monospace;
    font-size:32px;
    color:var(--cyan);
    display:block;
    margin-bottom:14px;
    line-height:1;
  }
  .proof-value sup{
    font-size:14px;
    top:-0.9em;
  }
  .proof-label{
    font-size:14px;
    line-height:1.5;
    color:var(--gray);
  }
  .footnote-link{
    display:block;
    margin-top:22px;
    font-size:12px;
    color:var(--gray);
  }
  .footnote-link:hover{color:var(--cyan);}

  /* ---------- section background photos (heavy navy scrim over image) ---------- */
  .legacy-bg, .proof-bg, .log-bg{
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:scroll;
  }
  /* directional scrims: imagery still reads, but darker where the copy sits and
     where the photo is brightest, plus a vertical floor under the text blocks */
  .legacy-bg{
    background-image:
      linear-gradient(100deg, rgba(0,17,65,0.72) 0%, rgba(0,17,65,0.5) 55%, rgba(0,17,65,0.4) 100%),
      linear-gradient(180deg, rgba(0,17,65,0.12) 0%, rgba(0,17,65,0.3) 58%, rgba(0,17,65,0.55) 100%),
      var(--legacy-bg-image, url('../assets/site/AdobeStock_1607250238.jpeg'));
    background-position:center, center, center 34%;
  }
  .proof-bg{
    background-image:
      linear-gradient(180deg, rgba(0,17,65,0.78) 0%, rgba(0,17,65,0.66) 48%, rgba(0,17,65,0.84) 100%),
      url('../assets/site/runway-rain-landing.jpeg');
    background-position:center, center 60%;
  }
  .log-bg{
    background-image:
      linear-gradient(180deg, rgba(0,17,65,0.66) 0%, rgba(0,17,65,0.78) 100%),
      url('../assets/graf/images/graf3.png');
    background-position:center, center 40%;
  }
  /* frosted panels behind the proof tiles so text always has a dark backing
     while the image still reads (blurred) through them and in the gutters */
  .proof-bg .proof-grid{ border-color:rgba(255,255,255,0.14); }
  .proof-bg .proof-tile{
    background:rgba(2,12,40,0.4);
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
    border-color:rgba(255,255,255,0.12);
  }
  .proof-bg .proof-tile:hover{ background:rgba(51,177,255,0.1); }
  /* strong tight halo so text pops regardless of what's behind it */
  .legacy-bg .legacy-headline, .legacy-bg .legacy-item p, .legacy-bg .legacy-item .tag,
  .legacy-bg .legacy-eyebrow,
  .proof-bg .section-title, .proof-bg .section-head .eyebrow, .proof-bg .proof-value,
  .proof-bg .proof-label, .proof-bg .footnote-link,
  .log-bg .section-title, .log-bg .section-head .eyebrow, .log-bg .ticker-text,
  .log-bg .ticker-index, .log-bg .ticker-arrow{
    text-shadow:0 1px 2px rgba(0,8,32,0.95), 0 0 14px rgba(0,8,32,0.8);
  }
  /* brighten the small body copy so it holds over the photo */
  .proof-bg .proof-label, .legacy-bg .legacy-item p{ color:#EAEDF1; }

  /* ---------- who we serve ---------- */
  .verticals{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:1px;
    background:var(--hairline-soft);
  }
  .vertical-card{
    background:var(--bg);
    padding:38px 30px 34px;
    border:1px solid transparent;
    transition:border-color 0.2s ease, background 0.2s ease;
  }
  .vertical-card:hover{
    border-color:var(--cyan);
    background:rgba(51,177,255,0.04);
  }
  .vertical-icon{
    width:38px;height:38px;
    margin-bottom:26px;
    color:var(--cyan);
  }
  .vertical-card h3{
    font-family:'IBM Plex Sans', sans-serif;
    font-weight:600;
    font-size:17px;
    margin:0 0 12px 0;
  }
  .vertical-card p{
    font-size:14px;
    line-height:1.6;
    color:var(--gray);
    margin:0 0 20px 0;
  }
  .vertical-card .card-link{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    letter-spacing:0.04em;
    color:var(--white);
    border-bottom:1px solid var(--hairline);
    padding-bottom:2px;
  }
  .vertical-card:hover .card-link{color:var(--cyan); border-color:var(--cyan);}

  /* ---------- case studies ---------- */
  .cases{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:24px;
  }
  .case-card{
    border:1px solid var(--hairline-soft);
    padding:32px 28px 30px;
    display:flex;
    flex-direction:column;
    min-height:280px;
    transition:border-color 0.2s ease;
  }
  .case-card:hover{border-color:var(--cyan);}
  .case-tag{
    margin-bottom:20px;
  }
  .case-client{
    font-family:'IBM Plex Sans', sans-serif;
    font-weight:600;
    font-size:15px;
    color:var(--gray);
    margin-bottom:16px;
  }
  .case-headline{
    font-family:'IBM Plex Sans', sans-serif;
    font-weight:300;
    font-size:22px;
    line-height:1.3;
    margin:0 0 16px 0;
  }
  .case-body{
    font-size:14px;
    line-height:1.6;
    color:var(--gray);
    flex:1;
    margin:0 0 20px 0;
  }
  .case-link{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    color:var(--cyan);
  }

  /* ---------- light (white) section variant: rotates the dark scheme to dark-on-white ---------- */
  .section-light{
    background:#F2F4F8;
    color:#343A3F;
    border-top:1px solid #E1E6EC;
    border-bottom:1px solid #E1E6EC;
  }
  .section-light .eyebrow,
  .section-light .feature-eyebrow{ color:#0F62FE; }
  .section-light .section-title,
  .section-light .feature-statement{ color:#001141; }
  .section-light .feature-statement em{ color:#0F62FE; }
  .section-light .feature-substat{ color:#4A5157; }
  .section-light .case-card{ background:#FFFFFF; border-color:#DDE1E6; }
  .section-light .case-card:hover{ border-color:#0F62FE; }
  .section-light .case-client{ color:#001141; }
  .section-light .case-headline{ color:#001141; }
  .section-light .case-body{ color:#4A5157; }
  .section-light .case-tag{ color:#0F62FE; }
  .section-light .case-link{ color:#0F62FE; }
  /* per-card hero image header, bleeding to the card edges */
  .case-card{ overflow:hidden; }
  .case-media{
    height:158px;
    margin:-32px -28px 26px;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
  }

  /* ---------- newsroom ---------- */
  .ticker{
    border-top:1px solid var(--hairline-soft);
  }
  .ticker-row{
    display:flex;
    align-items:baseline;
    gap:28px;
    padding:22px 16px 22px 14px;
    margin-left:-14px;
    border-bottom:1px solid var(--hairline-soft);
    border-radius:2px;
    transition:background 0.18s ease, box-shadow 0.18s ease;
  }
  .ticker-row:hover{
    background:rgba(51,177,255,0.13);
    box-shadow:inset 3px 0 0 var(--cyan);
  }
  .ticker-row:hover .ticker-text{ color:#fff; }
  .ticker-row:hover .ticker-index{ color:#7cd0ff; }
  .ticker-row:hover .ticker-arrow{ color:var(--cyan); transform:translateX(5px); }
  .ticker-index{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    color:var(--cyan);
    width:80px;
    flex:0 0 auto;
  }
  .ticker-text{
    font-size:16px;
    color:var(--white);
    flex:1;
    transition:color 0.18s ease;
  }
  .ticker-arrow{
    font-family:'IBM Plex Mono', monospace;
    color:var(--gray);
    font-size:14px;
    transition:transform 0.18s ease, color 0.18s ease;
  }

  /* ---------- closing CTA ---------- */
  /* Single saturated Blue 80 solid band, used once as punctuation. */
  .cta-band{
    position:relative;
    overflow:hidden;
    text-align:left;
    padding:140px 0;
    border-top:1px solid rgba(255,255,255,0.12);
    border-bottom:1px solid rgba(255,255,255,0.12);
    background:#002D9C;
    background-image:radial-gradient(ellipse at 22% 24%, rgba(51,177,255,0.22), rgba(51,177,255,0) 58%);
  }
  /* team photo spans the full band; one continuous brand-blue gradient washes
     from solid (over the text) to a light tint on the right, so there is no
     seam and the image stays visible */
  .cta-photo{
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    width:100%;
    background-image:url('../assets/site/cannes-2025.jpg');
    background-size:88% auto;           /* slightly smaller than full-bleed */
    background-position:calc(100% + 300px) 40%;   /* nudged right; gradient still masks the left */
    background-repeat:no-repeat;
    filter:brightness(0.97) contrast(1.02);
    z-index:0;
  }
  /* fully-opaque brand blue on the left completely masks the image there, then a
     long smooth fade reveals it toward the right, so there is no visible edge */
  .cta-photo::after{
    content:"";
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    background:linear-gradient(90deg,
      #002D9C 0%,
      #002D9C 34%,
      rgba(0,45,156,0.9) 44%,
      rgba(0,45,156,0.6) 56%,
      rgba(0,45,156,0.32) 70%,
      rgba(0,45,156,0.12) 86%,
      rgba(0,45,156,0.04) 100%);
  }
  .cta-band .wrap{ position:relative; z-index:1; }
  .cta-band h2, .cta-band p{ text-shadow:0 1px 14px rgba(0,17,65,0.5); }
  .cta-band h2{
    font-family:'IBM Plex Sans', sans-serif;
    font-weight:300;
    font-size:clamp(40px, 5vw, 64px);
    margin:0 0 24px 0;
  }
  .cta-band p{
    font-size:17px;
    color:rgba(255,255,255,0.82);
    max-width:400px;
    line-height:1.6;
    margin:0 0 36px 0;
  }
  .cta-band .btn-primary{
    background:var(--white);
    color:#002D9C;
  }
  .cta-band .btn-primary:hover{background:#d8ecff;}

  /* ---------- footer ---------- */
  footer{
    padding:80px 0 40px;
  }
  .footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr 1fr;
    gap:40px;
    margin-bottom:70px;
  }
  .footer-brand .logo{margin-bottom:16px;}
  .footer-brand p{
    font-size:13px;
    color:var(--gray);
    max-width:260px;
    line-height:1.6;
  }
  .footer-col h4{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--gray);
    margin:0 0 20px 0;
  }
  .footer-col a{
    display:block;
    font-size:14px;
    color:var(--white);
    margin-bottom:12px;
    opacity:0.85;
  }
  .footer-col a:hover{color:var(--cyan); opacity:1;}
  .footer-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-top:28px;
    border-top:1px solid var(--hairline-soft);
    font-size:12.5px;
    color:var(--gray);
    flex-wrap:wrap;
    gap:16px;
  }
  .footer-bottom-links{
    display:flex;
    gap:24px;
  }
  .footer-bottom-links a:hover{color:var(--cyan);}

  /* full nav (secondary links + clock) only when there is comfortable room */
  @media (max-width: 1400px){
    .nav-secondary{display:none;}
    .clock{display:none;}
  }
  /* collapse to hamburger before the primary nav gets tight */
  @media (max-width: 1080px){
    nav.primary{display:none;}
    .util-row{display:none;} /* utility links fold into the hamburger menu */
    .nav-toggle{display:flex;}
  }
  @media (max-width: 900px){
    .proof-grid{grid-template-columns:repeat(2,1fr);}
    .proof-tile:nth-child(4n){border-right:1px solid var(--hairline-soft);}
    .proof-tile:nth-child(2n){border-right:none;}
    .verticals{grid-template-columns:repeat(2,1fr);}
    .cases{grid-template-columns:1fr;}
    .legacy-grid{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr 1fr;}
    .readout-item{border-right:none; border-bottom:1px solid var(--hairline-soft);}
    .feature-inner{flex-direction:column; align-items:flex-start; gap:40px;}
    .feature-plate{text-align:left; min-width:0;}
    .plate-caption{margin-left:0;}
    .gridviz-wrap{flex-direction:column; gap:44px;}
    .gridviz-copy, .gridviz-plate{flex:1 1 100%; max-width:100%; width:100%;}
    .cta-photo{width:100%; opacity:0.32;}
  }
  @media (max-width: 600px){
    /* phones: single column so nothing overflows the viewport */
    .proof-grid, .verticals, .footer-grid{grid-template-columns:1fr;}
    .proof-tile{border-right:none;}
    .hero-inner{padding-left:24px; padding-right:24px;}
    .wrap{padding-left:24px; padding-right:24px;}
    .nav-row{padding-left:24px; padding-right:24px;}
    .mobile-nav{padding-left:24px; padding-right:24px;}
    /* top bar = logo + hamburger only; Contact lives in the menu */
    .nav-right .btn-primary{display:none;}
    .status-row{flex-wrap:wrap;}
  }
  /* ---------- solution-page block layouts (Aviation etc.) ---------- */
  .hero.avi-hero{ min-height:700px; }
  .products{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hairline-soft); border:1px solid var(--hairline-soft); }
  .products .vertical-card{ padding:40px 32px 36px; }
  .prod-tag{ display:block; margin-bottom:22px; color:var(--cyan); }
  .case-feature{ display:grid; grid-template-columns:1.05fr 1fr; border:1px solid var(--hairline); background:var(--bg-raised); overflow:hidden; border-radius:2px; }
  .case-feature-media{ min-height:360px; }
  .case-feature-copy{ padding:56px 52px; }
  .case-feature-copy .eyebrow{ display:block; margin-bottom:22px; color:var(--cyan); }
  .case-feature-client{ font-weight:600; font-size:15px; color:var(--gray); margin-bottom:14px; }
  .case-feature-headline{ font-family:'IBM Plex Sans',sans-serif; font-weight:300; font-size:clamp(26px,2.8vw,38px); line-height:1.2; letter-spacing:-0.005em; margin:0 0 22px 0; text-wrap:balance; }
  .case-feature-body{ font-size:15.5px; line-height:1.65; color:var(--gray); margin:0 0 26px 0; max-width:460px; }
  .case-feature-link{ font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.04em; color:var(--cyan); }
  @media (max-width:900px){
    .products{ grid-template-columns:1fr; }
    .case-feature{ grid-template-columns:1fr; }
    .case-feature-media{ min-height:240px; }
    .case-feature-copy{ padding:40px 32px; }
  }
  /* ---------- platform / GRAF: hero kicker + alternating pillar rows ---------- */
  .hero-kicker{ font-family:'IBM Plex Sans',sans-serif; font-weight:600; font-size:clamp(18px,2vw,24px); line-height:1.25; letter-spacing:-0.005em; color:var(--cyan); margin:0 0 42px 0; text-shadow:0 2px 18px rgba(0,8,32,0.6); }
  .gw-row{ display:flex; align-items:center; gap:72px; }
  .gw-row.reverse{ flex-direction:row-reverse; }
  .gw-copy{ flex:1 1 46%; max-width:560px; }
  .gw-copy .section-head{ margin-bottom:26px; }
  .gw-media{ flex:1 1 54%; position:relative; border:1px solid var(--hairline); border-radius:2px; overflow:hidden; background:#000a28; aspect-ratio:16/11; }
  .gw-img{ position:absolute; inset:0; background-size:cover; background-position:center; filter:saturate(1.05) contrast(1.03); }
  .gw-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,10,40,0) 55%, rgba(0,10,40,0.72) 100%); z-index:1; }
  .gw-tag{ position:absolute; left:16px; bottom:14px; z-index:2; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--cyan); text-shadow:0 1px 8px rgba(0,10,40,0.9); }
  .gw-corner{ position:absolute; right:16px; top:14px; z-index:2; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.1em; color:var(--white); text-shadow:0 1px 8px rgba(0,10,40,0.9); }
  @media (max-width:900px){ .gw-row, .gw-row.reverse{ flex-direction:column; gap:40px; } .gw-copy, .gw-media{ flex:1 1 100%; max-width:100%; width:100%; } }
  /* ---------- newsroom (index) ---------- */
  .news-hero{ position:relative; overflow:hidden; padding:132px 0 96px; border-bottom:1px solid var(--hairline-soft); }
  .news-hero-img{ position:absolute; inset:0; background-image:url('../assets/graf/images/graf8.png'); background-size:cover; background-position:center 34%; filter:saturate(1.05) brightness(0.7) contrast(1.05); z-index:0; }
  .news-hero-scrim{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,17,65,0.94) 0%, rgba(0,17,65,0.82) 38%, rgba(0,17,65,0.5) 72%, rgba(0,17,65,0.62) 100%), linear-gradient(180deg, rgba(0,17,65,0.55) 0%, rgba(0,17,65,0.25) 42%, rgba(0,17,65,0.85) 100%); z-index:0; }
  .news-hero .wrap{ position:relative; z-index:2; }
  .news-hero .section-head{ margin-bottom:0; max-width:820px; }
  .news-hero .section-title, .news-hero .eyebrow, .news-hero .news-hero-sub{ text-shadow:0 2px 20px rgba(0,10,40,0.7); }
  .news-hero-sub{ font-size:18px; line-height:1.55; color:var(--gray); max-width:600px; margin:26px 0 0 0; }
  .news-toolbar{ padding:34px 0 0; }
  .filter-tabs{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
  .filter-pill{ font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--gray); padding:9px 18px; border:1px solid var(--hairline-soft); border-radius:999px; background:rgba(4,26,82,0.4); transition:border-color 0.18s ease, color 0.18s ease, background 0.18s ease; white-space:nowrap; }
  .filter-pill:hover{ border-color:var(--cyan); color:var(--white); }
  .filter-pill.is-active{ border-color:var(--cyan); color:#001141; background:var(--cyan); }
  .news-section{ padding-top:44px; }
  .news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  .news-card{ display:flex; flex-direction:column; border:1px solid var(--hairline-soft); border-radius:2px; overflow:hidden; background:rgba(4,26,82,0.32); transition:border-color 0.2s ease, transform 0.25s ease, box-shadow 0.25s ease, background 0.2s ease; }
  .news-card:hover{ border-color:var(--cyan); transform:translateY(-4px); box-shadow:0 16px 38px rgba(0,8,32,0.45); background:rgba(4,26,82,0.55); }
  .news-media{ height:172px; background-size:cover; background-position:center; background-repeat:no-repeat; border-bottom:1px solid var(--hairline-soft); filter:saturate(1.04) contrast(1.02); }
  .news-body{ display:flex; flex-direction:column; flex:1; padding:26px 26px 24px; }
  .news-cat{ display:block; margin-bottom:16px; color:var(--cyan); }
  .news-headline{ font-family:'IBM Plex Sans',sans-serif; font-weight:300; font-size:20px; line-height:1.32; letter-spacing:-0.005em; margin:0 0 22px 0; text-wrap:balance; }
  .news-foot{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-top:auto; padding-top:18px; border-top:1px solid var(--hairline-soft); }
  .news-date{ font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--gray); }
  .news-read{ font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.04em; color:var(--white); transition:color 0.18s ease, transform 0.18s ease; }
  .news-card:hover .news-read{ color:var(--cyan); transform:translateX(4px); }
  .news-card:hover .news-headline{ color:var(--white); }
  @media (max-width:1080px){ .news-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:720px){ .news-grid{ grid-template-columns:1fr; } }

  /* ---------- article (single) ---------- */
  .article-wrap{ max-width:1320px; margin:0 auto; padding:0 40px; }
  .article-head{ padding:56px 0 40px; }
  .back-link{ display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:0.06em; color:var(--gray); margin-bottom:38px; transition:color 0.15s ease; }
  .back-link:hover{ color:var(--cyan); }
  .article-eyebrow{ display:block; color:var(--cyan); margin-bottom:22px; }
  h1.article-title{ font-family:'IBM Plex Sans',sans-serif; font-weight:300; font-size:clamp(38px,5vw,68px); line-height:1.06; letter-spacing:-0.01em; margin:0 0 30px 0; max-width:900px; text-wrap:balance; }
  .article-meta{ font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:0.06em; color:var(--gray); display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
  .article-meta .dot{ color:var(--cyan); }
  .article-hero{ position:relative; height:clamp(340px,46vw,560px); overflow:hidden; border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); margin-bottom:8px; }
  .article-hero-img{ position:absolute; inset:0; background-size:cover; background-position:center 44%; filter:saturate(1.05) contrast(1.03); z-index:0; }
  .article-hero-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,17,65,0.5) 0%, rgba(0,17,65,0.14) 42%, rgba(0,17,65,0.78) 100%), linear-gradient(90deg, rgba(0,17,65,0.5) 0%, rgba(0,17,65,0.06) 46%, rgba(0,17,65,0.32) 100%); z-index:1; }
  .article-hero-tag{ position:absolute; left:0; right:0; bottom:18px; z-index:2; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--cyan); text-shadow:0 1px 10px rgba(0,10,40,0.9); }
  .article-body{ max-width:720px; margin:0 auto; padding:64px 40px 40px; }
  .article-body p{ font-size:18px; line-height:1.72; color:#E3E7EC; margin:0 0 26px 0; font-weight:300; }
  .article-body .lede{ font-size:21px; line-height:1.6; color:#F1F3F6; margin-bottom:34px; }
  .article-body h2{ font-family:'IBM Plex Sans',sans-serif; font-weight:300; font-size:clamp(26px,3vw,34px); line-height:1.2; letter-spacing:-0.005em; color:var(--white); margin:52px 0 20px 0; text-wrap:balance; }
  .article-body a{ color:var(--cyan); border-bottom:1px solid var(--hairline); padding-bottom:1px; transition:border-color 0.15s ease; }
  .article-body a:hover{ border-color:var(--cyan); }
  .article-body strong{ color:var(--white); font-weight:600; }
  .article-body img{ max-width:100%; height:auto; border:1px solid var(--hairline); border-radius:2px; }
  .pull-quote{ margin:48px 0; padding:6px 0 6px 30px; border-left:2px solid var(--cyan); font-family:'IBM Plex Sans',sans-serif; font-weight:300; font-size:clamp(26px,3.4vw,38px); line-height:1.24; letter-spacing:-0.01em; color:var(--white); text-wrap:balance; }
  .pull-quote .accent{ color:var(--cyan); }
  .related{ padding:96px 0; }
  .related-list{ border-top:1px solid var(--hairline); }
  .related-row{ display:flex; align-items:baseline; gap:28px; padding:24px 16px 24px 14px; margin-left:-14px; border-bottom:1px solid var(--hairline-soft); border-radius:2px; transition:background 0.18s ease, box-shadow 0.18s ease; }
  .related-row:hover{ background:rgba(51,177,255,0.13); box-shadow:inset 3px 0 0 var(--cyan); }
  .related-index{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--cyan); width:80px; flex:0 0 auto; }
  .related-text{ font-size:16px; color:var(--white); flex:1; }
  .related-arrow{ font-family:'IBM Plex Mono',monospace; color:var(--gray); font-size:14px; transition:transform 0.18s ease, color 0.18s ease; }
  .related-row:hover .related-arrow{ color:var(--cyan); transform:translateX(5px); }
  @media (max-width:900px){ .article-body{ padding:48px 24px 32px; } .article-wrap{ padding:0 24px; } }
  /* ---------- contact ---------- */
  .contact-hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--hairline-soft); padding:150px 0 70px; }
  .contact-hero-photo{ position:absolute; inset:0; background-image:url('../assets/site/cannes-2025.jpg'); background-size:cover; background-position:center 30%; filter:brightness(0.9) contrast(1.02); z-index:0; }
  .contact-hero-photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, #001141 0%, #001141 40%, rgba(0,17,65,0.92) 54%, rgba(0,17,65,0.72) 72%, rgba(0,17,65,0.5) 100%), linear-gradient(180deg, rgba(0,17,65,0.55) 0%, rgba(0,17,65,0.2) 46%, rgba(0,17,65,0.7) 100%); }
  .contact-hero .wrap{ position:relative; z-index:2; }
  .contact-hero .eyebrow{ display:block; margin-bottom:22px; color:var(--cyan); }
  h1.contact-headline{ font-family:'IBM Plex Sans',sans-serif; font-weight:300; font-size:clamp(48px,6vw,84px); line-height:1.02; letter-spacing:-0.01em; margin:0 0 24px 0; text-wrap:balance; }
  h1.contact-headline em{ font-style:normal; color:var(--cyan); }
  .contact-sub{ font-size:18px; line-height:1.55; color:var(--gray); max-width:540px; margin:0; }
  .contact-body{ padding:96px 0 110px; }
  .contact-grid{ display:grid; grid-template-columns:1.35fr 1fr; gap:72px; align-items:start; }
  .form-head{ margin-bottom:34px; }
  .form-head h2{ font-family:'IBM Plex Sans',sans-serif; font-weight:300; font-size:clamp(26px,3vw,34px); line-height:1.15; letter-spacing:-0.005em; margin:0 0 12px 0; }
  .form-head p{ font-size:14.5px; line-height:1.6; color:var(--gray); margin:0; max-width:440px; }
  .contact-form{ display:grid; grid-template-columns:1fr 1fr; gap:22px 24px; }
  .field{ display:flex; flex-direction:column; }
  .field.span-2{ grid-column:1 / -1; }
  .field label{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--gray); margin-bottom:10px; }
  .field input, .field select, .field textarea{ font-family:'IBM Plex Sans',sans-serif; font-size:15px; color:var(--white); background:var(--bg-raised); border:1px solid var(--hairline-soft); border-radius:2px; padding:13px 14px; width:100%; transition:border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; -webkit-appearance:none; appearance:none; }
  .field textarea{ resize:vertical; min-height:132px; line-height:1.55; }
  .field input::placeholder, .field textarea::placeholder{ color:rgba(193,199,205,0.5); }
  .field input:hover, .field select:hover, .field textarea:hover{ border-color:rgba(51,177,255,0.4); }
  .field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--cyan); box-shadow:0 0 0 2px rgba(51,177,255,0.35); background:#062363; }
  .field.select-field{ position:relative; }
  .field select{ padding-right:38px; cursor:pointer; }
  .field select option{ background:#041a52; color:var(--white); }
  .field .select-chevron{ position:absolute; right:15px; bottom:15px; width:11px; height:11px; pointer-events:none; color:var(--cyan); }
  .form-actions{ grid-column:1 / -1; display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:4px; }
  .form-actions .btn-primary{ font-size:14px; padding:13px 26px; border:none; cursor:pointer; }
  .form-note{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:0.05em; color:var(--gray); margin:0; }
  .form-banner{ font-size:14.5px; line-height:1.5; border-radius:2px; padding:14px 18px; margin:0 0 24px 0; border:1px solid var(--hairline); }
  .form-banner-ok{ color:var(--white); border-color:var(--cyan); background:rgba(51,177,255,0.12); }
  .form-banner-err{ color:#FFD7CE; border-color:rgba(255,138,110,0.6); background:rgba(255,138,110,0.12); }
  .info-panel{ border:1px solid var(--hairline-soft); background:var(--bg-raised); border-radius:2px; padding:8px 30px 30px; }
  .info-route{ padding:26px 0; border-bottom:1px solid var(--hairline-soft); }
  .info-route:last-of-type{ border-bottom:none; }
  .info-route .route-tag{ display:block; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--cyan); margin-bottom:10px; }
  .info-route h3{ font-family:'IBM Plex Sans',sans-serif; font-weight:600; font-size:16px; margin:0 0 8px 0; }
  .info-route p{ font-size:14px; line-height:1.55; color:var(--gray); margin:0 0 12px 0; }
  .info-route a.route-link{ font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:0.03em; color:var(--white); border-bottom:1px solid var(--hairline); padding-bottom:2px; transition:color 0.15s ease, border-color 0.15s ease; }
  .info-route a.route-link:hover{ color:var(--cyan); border-color:var(--cyan); }
  .info-foot{ margin-top:26px; padding-top:22px; border-top:1px solid var(--hairline); display:flex; align-items:flex-start; gap:12px; }
  .info-foot .dot{ width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 6px 2px rgba(51,177,255,0.8); margin-top:5px; flex:0 0 auto; animation:blink 2s ease-in-out infinite; }
  .info-foot p{ font-size:13px; line-height:1.55; color:var(--gray); margin:0; }
  @media (max-width:900px){
    .contact-hero{ padding:120px 0 56px; }
    .contact-body{ padding:64px 0 80px; }
    .contact-grid{ grid-template-columns:1fr; gap:52px; }
    .contact-form{ grid-template-columns:1fr; }
    .contact-hero-photo::after{ background:linear-gradient(90deg, #001141 0%, rgba(0,17,65,0.9) 60%, rgba(0,17,65,0.72) 100%), linear-gradient(180deg, rgba(0,17,65,0.55) 0%, rgba(0,17,65,0.35) 46%, rgba(0,17,65,0.8) 100%); }
  }
  /* ---------- scroll-reveal (subtle staggered fade-up) ----------
     Progressive enhancement: the hidden pre-state is gated on `.reveal-init`,
     which signal.js adds to <html> ONLY when its reveal code actually runs.
     If that JS never executes (e.g. the WP Engine staging snapshot, where the
     footer script stack is broken), `.reveal-init` is never added, so every
     section stays fully visible instead of stuck at opacity:0. On production,
     signal.js adds the class and the staggered scroll-reveal plays as designed. */
  .reveal-init .hero-inner,
  .reveal-init .readout-item,
  .reveal-init .legacy-headline,
  .reveal-init .legacy-item,
  .reveal-init .gridviz-copy,
  .reveal-init .gridviz-plate,
  .reveal-init .section-head,
  .reveal-init .proof-tile,
  .reveal-init .video-plate-inner,
  .reveal-init .vertical-card,
  .reveal-init .case-card,
  .reveal-init .ticker-row,
  .reveal-init .cta-band .wrap{
    opacity:0;
    transform:translateY(22px);
    transition:opacity 0.7s cubic-bezier(0.22,0.61,0.36,1),
               transform 0.7s cubic-bezier(0.22,0.61,0.36,1);
  }
  .reveal-init .is-in{
    opacity:1 !important;
    transform:none !important;
  }
  /* subtle hover lift on cards for a premium micro-interaction */
  .vertical-card, .case-card{ transition:border-color 0.2s ease, transform 0.25s ease, box-shadow 0.25s ease; }
  .vertical-card:hover, .case-card:hover{ transform:translateY(-4px); }
  .section-light .case-card:hover{ box-shadow:0 14px 34px rgba(0,17,65,0.12); }

/* ---------- active nav state (multi-page sandbox) ---------- */
nav.primary a[aria-current="page"], nav.primary a.active{ color:var(--white); }
.nav-secondary a[aria-current="page"], .nav-secondary a.active{ color:var(--white); }

/* ============================================================
   UNIFIED-CHROME FIX (home only)
   The home now renders the parent-theme header/footer, so the parent CSS
   bundle loads here too. Its `.h1,h1,h2,...{color:#001141}` rule colors the
   Signal body headings navy-on-navy (invisible). signal.css originally relied
   on inheriting white from body, so restore that: `.home :where(headings)`
   has specificity (0,1,0) — it beats the parent's bare-element rule but loses
   to every explicit Signal class color (e.g. .section-light .section-title),
   so light sections and accents are untouched. `inherit` is exact: dark
   sections inherit white, .section-light inherits its own #343A3F. */
.home :where(h1,h2,h3,h4,h5,h6){ color: inherit; }