/*
Theme Name: ANSR Tech
Theme URI: https://test01.ansrtech.com.au
Author: ANSR Tech
Description: Fully custom-coded theme for ANSR Tech - the constellation hero, four animated service icons, and the rest of the homepage design. No page builder, no starter theme - built directly from the site-design/ prototype.
Version: 1.0.0
Requires PHP: 8.0
License: Proprietary
Text Domain: ansr-tech
*/

  @import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

  :root{
    --void:#f4f8f9;
    --surface:#ffffff;
    --surface-2:#e7eef0;
    --line:#c9d6d9;
    --ink:#0c1416;
    --ink-dim:#4d6166;
    --cyan:#0d94b8;
    --cyan-soft:#0d94b822;
    --cyan-glow:#0d94b855;
    /* darker than --cyan on purpose: --cyan alone fails WCAG AA (4.5:1) for
       small text in light mode (~3.3:1) though it clears the 3:1 bar for large
       text/icons/borders — use this token wherever cyan is the actual color of
       small body text (eyebrows, inline links), leave --cyan for buttons/borders/glows */
    --cyan-text:#0a7592;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --void:#05080a;
      --surface:#0b1114;
      --surface-2:#101a1e;
      --line:#1c2a2e;
      --ink:#eaf6fa;
      --ink-dim:#7f979c;
      --cyan:#38c6f0;
      --cyan-soft:#38c6f022;
      --cyan-glow:#38c6f077;
      --cyan-text:#38c6f0;
    }
  }
  :root[data-theme="dark"]{
    --void:#05080a;
    --surface:#0b1114;
    --surface-2:#101a1e;
    --line:#1c2a2e;
    --ink:#eaf6fa;
    --ink-dim:#7f979c;
    --cyan:#38c6f0;
    --cyan-soft:#38c6f022;
    --cyan-glow:#38c6f077;
    --cyan-text:#38c6f0;
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--void);
    color:var(--ink);
    font-family:'Manrope',system-ui,sans-serif;
    overflow-x:hidden;
    min-height:100vh;
  }

  /* ---- Keyboard focus: explicit everywhere, not left to the browser default ---- */
  a:focus-visible,
  button:focus-visible{
    outline:2px solid var(--cyan-text);
    outline-offset:3px;
    border-radius:4px;
  }
  /* on a solid cyan fill, a cyan outline disappears — ring it with the page background instead */
  .nav-cta:focus-visible,
  .cta-button:focus-visible,
  .submit-btn:focus-visible{
    outline:2px solid var(--void);
    outline-offset:2px;
  }

  /* ---- Ambient cursor glow, page-wide ---- */
  /* Deliberately faint and CSS-only — no per-frame JS, no canvas, just one element whose
     transform is nudged on mousemove and eased by a CSS transition. This is the "whole
     page feels a little alive" layer; the bright per-panel glows (server rack, web-build,
     chart) are a separate, stronger effect reserved for those specific "device" surfaces. */
  .ambient-glow{
    position:fixed;
    top:0; left:0;
    width:360px; height:360px;
    margin:-180px 0 0 -180px;
    border-radius:50%;
    background:radial-gradient(circle, var(--cyan) 0%, transparent 70%);
    opacity:0;
    mix-blend-mode:screen;
    pointer-events:none;
    z-index:999;
    transform:translate3d(-9999px,-9999px,0);
    transition:transform .5s cubic-bezier(.2,.6,.2,1), opacity .6s ease;
    will-change:transform;
  }
  .ambient-glow.is-active{ opacity:.055; }
  @media (prefers-reduced-motion: reduce){
    .ambient-glow{ display:none; }
  }
  @media (max-width: 640px){
    .ambient-glow{ display:none; } /* no cursor on touch */
  }

  .stage{
    position:relative;
    width:100%;
    height:100svh;
    min-height:640px;
    overflow:hidden;
    background:var(--void);
  }
  canvas#field{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
  }

  .vignette{
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
      radial-gradient(120% 90% at 18% 88%, var(--void) 0%, transparent 55%),
      linear-gradient(180deg, var(--void) 0%, transparent 12%, transparent 82%, var(--void) 100%);
  }

  .topbar{
    position:absolute;
    top:0; left:0; right:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:1.5rem clamp(1.25rem, 4vw, 3rem);
    z-index:5;
  }
  .mark{
    height:28px;
    width:auto;
    display:block;
    filter:drop-shadow(0 0 18px var(--cyan-glow));
  }

  .hero-copy{
    position:absolute;
    left:clamp(1.25rem, 4vw, 3.5rem);
    bottom:clamp(4.5rem, 14vh, 7.5rem);
    right:clamp(1.25rem, 4vw, 3.5rem);
    z-index:4;
    max-width:56rem;
    pointer-events:none;
  }
  .eyebrow{
    font-family:'JetBrains Mono',monospace;
    font-size:.75rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--cyan-text);
    margin:0 0 .9rem;
    display:flex;
    align-items:center;
    gap:.6rem;
  }
  .eyebrow::before{
    content:"";
    width:7px; height:7px;
    border-radius:50%;
    background:var(--cyan);
    box-shadow:0 0 12px var(--cyan-glow);
    animation:pulse 2.4s ease-in-out infinite;
  }
  @keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} }

  h1{
    font-family:'Chakra Petch',sans-serif;
    font-weight:700;
    font-size:clamp(2.6rem, 7vw, 5.6rem);
    line-height:0.98;
    letter-spacing:-.01em;
    margin:0;
    text-wrap:balance;
    color:var(--ink);
  }
  h1 em{
    font-style:normal;
    color:var(--cyan);
    text-shadow:0 0 40px var(--cyan-glow);
  }

  .sub{
    margin:1.4rem 0 0;
    max-width:34rem;
    font-size:1.05rem;
    line-height:1.55;
    color:var(--ink-dim);
  }


  /* ---- Signals section: circuit background + widget cards ---- */
  .signals{
    position:relative;
    background:var(--surface);
    border-top:1px solid var(--line);
    overflow:hidden;
    padding:5rem 0 6rem;
  }
  .circuit-bg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:.5;
    pointer-events:none;
  }
  #circuitTile path{
    fill:none;
    stroke:var(--cyan);
    stroke-width:1;
    opacity:.22;
  }
  #circuitTile path.trace-live{
    opacity:.4;
    animation:traceGlow 6s ease-in-out infinite;
  }
  #circuitTile path.trace-live:nth-of-type(2){ animation-delay:-2s; }
  #circuitTile path.trace-live:nth-of-type(3){ animation-delay:-4s; }
  #circuitTile path.trace-live:nth-of-type(4){ animation-delay:-1.3s; }
  #circuitTile path.trace-live:nth-of-type(5){ animation-delay:-3.6s; }
  @keyframes traceGlow{
    0%,100%{ opacity:.22; }
    50%{ opacity:.6; }
  }
  #circuitTile circle.node{
    fill:var(--cyan);
  }
  #circuitTile circle.n0{ opacity:.9; animation:nodePulse 3.6s ease-in-out infinite; }
  #circuitTile circle.n1{ opacity:.6; animation:nodePulse 4.4s ease-in-out infinite .8s; }
  #circuitTile circle.n2{ opacity:.75; animation:nodePulse 3.1s ease-in-out infinite 1.6s; }
  #circuitTile circle.n3{ opacity:.5; animation:nodePulse 5s ease-in-out infinite .4s; }
  @keyframes nodePulse{
    0%,100%{ opacity:.25; }
    50%{ opacity:1; }
  }
  #circuitTile circle.pulse{
    fill:var(--ink);
    filter:drop-shadow(0 0 5px var(--cyan)) drop-shadow(0 0 10px var(--cyan-glow));
    offset-rotate:0deg;
    animation-name:travelPulse;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
  }
  @keyframes travelPulse{
    0%{ offset-distance:0%; opacity:0; }
    8%{ opacity:1; }
    92%{ opacity:1; }
    100%{ offset-distance:100%; opacity:0; }
  }
  @supports not (offset-path: path('M0 0')){
    #circuitTile circle.pulse{ display:none; }
  }
  .circuit-fade{
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
      radial-gradient(60% 50% at 50% 8%, transparent 0%, var(--surface) 78%),
      linear-gradient(180deg, var(--surface) 0%, transparent 14%, transparent 86%, var(--surface) 100%);
  }

  .signals-inner{
    position:relative;
    z-index:2;
    max-width:74rem;
    margin:0 auto;
    padding:0 clamp(1.25rem, 4vw, 3rem);
    text-align:center;
  }
  .eyebrow--static::before{ animation:none; }
  .signals-inner .eyebrow,
  .cta-inner .eyebrow,
  .page-header .eyebrow{ justify-content:center; }
  .signals-inner h2{
    font-family:'Chakra Petch',sans-serif;
    font-weight:600;
    font-size:clamp(1.9rem, 4vw, 2.9rem);
    margin:.4rem 0 .8rem;
    text-wrap:balance;
    color:var(--ink);
  }
  .signals-lede{
    max-width:36rem;
    margin:0 auto 3.5rem;
    color:var(--ink-dim);
    font-size:1rem;
    line-height:1.6;
  }

  .widget-row{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:1.5rem;
    text-align:left;
  }
  .widget-card{
    position:relative;
    background:var(--surface-2);
    border:1px solid var(--line);
    border-radius:16px;
    padding:2.4rem 1.5rem 1.75rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    transition:border-color .25s ease, transform .25s ease;
  }
  .widget-card:hover{
    border-color:var(--cyan);
    transform:translateY(-4px);
  }
  .widget-card .platform{
    position:absolute;
    top:2.4rem;
    left:50%;
    translate:-50% 0;
    width:74px;
    height:22px;
    border-radius:50%;
    background:radial-gradient(ellipse at center, var(--cyan-glow) 0%, transparent 72%);
    filter:blur(2px);
  }
  .widget-card:hover .platform{
    background:radial-gradient(ellipse at center, var(--cyan) 0%, transparent 72%);
  }
  .spin-wrap{
    position:relative;
    width:64px;
    height:64px;
    margin-bottom:1.4rem;
    perspective:600px;
  }
  .spin-icon{
    width:100%;
    height:100%;
    color:var(--cyan);
    filter:drop-shadow(0 0 10px var(--cyan-glow));
    animation:widgetSpin 9s linear infinite;
    transform-style:preserve-3d;
  }
  .widget-card:nth-child(2) .spin-icon{ animation-duration:7.5s; animation-direction:reverse; }
  .widget-card:nth-child(3) .spin-icon{ animation-duration:10.5s; }
  .widget-card:nth-child(4) .spin-icon{ animation-duration:8.2s; animation-direction:reverse; }
  .widget-card:hover .spin-icon{ animation-duration:2.2s; }
  @keyframes widgetSpin{
    from{ transform:rotateY(0deg); }
    to{ transform:rotateY(360deg); }
  }

  /* ---- Per-card life: a distinct idle animation for each service ---- */
  .widget-card:nth-child(1) .led{ animation:ledBlink 2.1s ease-in-out infinite; }
  .widget-card:nth-child(1) .led-a{ animation-delay:0s; }
  .widget-card:nth-child(1) .led-b{ animation-delay:.35s; }
  .widget-card:nth-child(1) .led-c{ animation-delay:.7s; }
  @keyframes ledBlink{
    0%,100%{ opacity:.3; }
    50%{ opacity:1; }
  }

  .widget-card:nth-child(2) .signal-line{
    stroke-dasharray:2.2 2.6;
    animation:signalFlow 1.4s linear infinite;
  }
  .widget-card:nth-child(2) .signal-line:nth-of-type(2){ animation-delay:-.35s; }
  .widget-card:nth-child(2) .signal-line:nth-of-type(3){ animation-delay:-.7s; }
  @keyframes signalFlow{ to{ stroke-dashoffset:-19.2; } }

  .widget-card:nth-child(3) .scan-line{
    transform-box:fill-box;
    animation:scanSweep 2.8s ease-in-out infinite;
  }
  @keyframes scanSweep{
    0%{ transform:translateY(0); opacity:0; }
    12%{ opacity:.55; }
    88%{ opacity:.55; }
    100%{ transform:translateY(7.4px); opacity:0; }
  }

  .widget-card:nth-child(4) .bar{
    transform-box:fill-box;
    transform-origin:bottom;
    animation:barPulse 2s ease-in-out infinite;
  }
  .widget-card:nth-child(4) .bar-1{ animation-delay:-.2s; }
  .widget-card:nth-child(4) .bar-2{ animation-delay:-.6s; }
  .widget-card:nth-child(4) .bar-3{ animation-delay:-1s; }
  @keyframes barPulse{
    0%,100%{ transform:scaleY(1); }
    50%{ transform:scaleY(.62); }
  }

  @media (prefers-reduced-motion: reduce){
    .widget-card .led,
    .widget-card .signal-line,
    .widget-card .scan-line,
    .widget-card .bar{ animation:none; }
    .widget-card .scan-line{ opacity:0; }
  }

  .widget-card h3{
    font-family:'Chakra Petch',sans-serif;
    font-weight:600;
    font-size:1.05rem;
    margin:0 0 .5rem;
    color:var(--ink);
  }
  .widget-card p{
    margin:0;
    font-size:.88rem;
    line-height:1.55;
    color:var(--ink-dim);
  }

  @media (max-width: 900px){
    .widget-row{ grid-template-columns:1fr 1fr; }
  }
  @media (max-width: 560px){
    .widget-row{ grid-template-columns:1fr; }
  }
  @media (prefers-reduced-motion: reduce){
    .spin-icon{ animation:none; }
    #circuitTile circle.node{ animation:none; opacity:.6; }
    #circuitTile path.trace-live{ animation:none; opacity:.4; }
    #circuitTile circle.pulse{ display:none; }
  }

  @media (max-width: 640px){
    .hero-copy{ bottom:5rem; }
  }

  /* ---- Nav ---- */
  html{ scroll-behavior:smooth; scroll-padding-top:5.5rem; }
  @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

  .brand{ display:block; line-height:0; }
  .site-nav{
    display:flex;
    gap:2rem;
    font-family:'JetBrains Mono',monospace;
    font-size:.78rem;
    letter-spacing:.04em;
  }
  .site-nav a{
    color:var(--ink-dim);
    text-decoration:none;
    padding:.3rem 0;
    border-bottom:1px solid transparent;
    transition:color .2s ease, border-color .2s ease;
  }
  .site-nav a:hover,
  .site-nav a.current{ color:var(--ink); border-color:var(--cyan); }

  .topbar-right{
    display:flex;
    align-items:center;
    gap:1rem;
  }
  .nav-cta{
    font-family:'JetBrains Mono',monospace;
    font-size:.72rem;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--void);
    background:var(--cyan);
    padding:.6rem 1.1rem;
    border-radius:999px;
    text-decoration:none;
    white-space:nowrap;
    box-shadow:0 0 0 0 var(--cyan-glow);
    transition:box-shadow .25s ease, transform .2s ease;
  }
  .nav-cta:hover{ box-shadow:0 0 24px 0 var(--cyan-glow); transform:translateY(-1px); }

  @media (max-width: 900px){
    .site-nav{ display:none; }
    .menu-toggle{ display:inline-flex; }
  }
  @media (max-width: 560px){
    .topbar-right .nav-cta{ display:none; }
  }

  /* ---- Mobile menu: the nav doesn't just vanish below 900px anymore ---- */
  .menu-toggle{
    display:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    width:40px; height:40px;
    padding:0;
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--surface);
    cursor:pointer;
  }
  .menu-toggle span{
    display:block;
    width:18px; height:2px;
    background:var(--ink);
    transition:transform .25s ease, opacity .2s ease;
  }
  .menu-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .menu-toggle.is-open span:nth-child(2){ opacity:0; }
  .menu-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .mobile-menu{
    position:fixed;
    inset:0;
    z-index:1000;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:1.75rem;
    background:var(--surface);
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease;
  }
  .mobile-menu.is-open{ opacity:1; pointer-events:auto; }
  .mobile-menu a{
    font-family:'JetBrains Mono',monospace;
    font-size:1.15rem;
    letter-spacing:.04em;
    color:var(--ink);
    text-decoration:none;
  }
  .mobile-menu a.current{ color:var(--cyan-text); }
  .mobile-menu .nav-cta{ display:inline-block; margin-top:.75rem; }
  @media (min-width: 901px){
    .mobile-menu, .menu-toggle{ display:none !important; }
  }
  @media (prefers-reduced-motion: reduce){
    .mobile-menu{ transition:none; }
    .menu-toggle span{ transition:none; }
  }

  .section-link{
    display:inline-block;
    margin-top:3rem;
    font-family:'JetBrains Mono',monospace;
    font-size:.8rem;
    letter-spacing:.04em;
    color:var(--cyan-text);
    text-decoration:none;
    border-bottom:1px solid var(--cyan-soft);
    padding-bottom:.15rem;
  }
  .section-link:hover{ border-color:var(--cyan); }

  /* ---- Deep-dive preview (AI brain) ---- */
  .deep-dive{
    background:var(--void);
    border-top:1px solid var(--line);
    padding:6rem 0;
  }
  .deep-dive-inner{
    max-width:74rem;
    margin:0 auto;
    padding:0 clamp(1.25rem, 4vw, 3rem);
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:3rem;
    align-items:center;
  }
  .deep-dive-copy h2{
    font-family:'Chakra Petch',sans-serif;
    font-weight:600;
    font-size:clamp(1.7rem, 3.2vw, 2.4rem);
    margin:.4rem 0 1rem;
    text-wrap:balance;
    color:var(--ink);
  }
  .deep-dive-lede{
    color:var(--ink-dim);
    font-size:.98rem;
    line-height:1.65;
    max-width:30rem;
    margin:0 0 1.6rem;
  }
  .deep-dive-facts{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:.6rem;
    font-family:'JetBrains Mono',monospace;
    font-size:.8rem;
    color:var(--ink-dim);
  }
  .deep-dive-facts li{
    display:flex;
    align-items:center;
    gap:.6rem;
  }
  .deep-dive-facts li::before{
    content:"";
    width:5px; height:5px;
    border-radius:50%;
    background:var(--cyan);
    flex-shrink:0;
  }
  /* Deliberately fixed-dark, not theme-token-based: this is a display panel showing a
     hologram scan, not a themed page surface — it stays dark in light mode on purpose,
     the same way a monitor showing a dark UI doesn't turn white with the room lights. */
  .brain-stage{
    position:relative;
    aspect-ratio:4/5;
    width:100%;
    max-width:440px;
    margin:0 auto;
    border-radius:24px;
    background:radial-gradient(60% 55% at 50% 40%, #0d1b20 0%, #05080a 78%);
    border:1px solid #1c2a2e;
    box-shadow:inset 0 0 40px rgba(0,0,0,.5), 0 0 0 1px rgba(56,198,240,.08);
    overflow:hidden;
    cursor:crosshair;
  }
  .brain-image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:38% 50%;
    pointer-events:none;
    -webkit-mask-image:radial-gradient(78% 82% at 50% 46%, #000 62%, transparent 100%);
    mask-image:radial-gradient(78% 82% at 50% 46%, #000 62%, transparent 100%);
  }
  #brainField{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    pointer-events:none;
    mix-blend-mode:screen;
  }
  @media (max-width: 800px){
    .deep-dive-inner{ grid-template-columns:1fr; }
    .brain-stage{ max-width:340px; }
  }

  .deep-dive--alt{ background:var(--void); border-top:1px solid var(--line); }
  .deep-dive-inner--reverse{ direction:rtl; }
  .deep-dive-inner--reverse > *{ direction:ltr; }
  @media (max-width: 800px){
    .deep-dive-inner--reverse{ direction:ltr; }
  }

  .server-stage{
    position:relative;
    aspect-ratio:4/5;
    width:100%;
    max-width:440px;
    margin:0 auto;
    border-radius:24px;
    background:radial-gradient(60% 55% at 50% 55%, #0d1b20 0%, #05080a 78%);
    border:1px solid #1c2a2e;
    box-shadow:inset 0 0 40px rgba(0,0,0,.5), 0 0 0 1px rgba(56,198,240,.08);
    overflow:hidden;
  }
  #serverField{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
  }
  @media (max-width: 800px){
    .server-stage{ max-width:340px; }
  }

  .web-stage{
    position:relative;
    aspect-ratio:4/5;
    width:100%;
    max-width:440px;
    margin:0 auto;
    border-radius:24px;
    background:radial-gradient(60% 55% at 50% 45%, #0d1b20 0%, #05080a 78%);
    border:1px solid #1c2a2e;
    box-shadow:inset 0 0 40px rgba(0,0,0,.5), 0 0 0 1px rgba(56,198,240,.08);
    overflow:hidden;
  }
  #webField{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
  }
  @media (max-width: 800px){
    .web-stage{ max-width:340px; }
  }

  .chart-stage{
    position:relative;
    aspect-ratio:4/5;
    width:100%;
    max-width:440px;
    margin:0 auto;
    border-radius:24px;
    background:radial-gradient(60% 55% at 50% 45%, #0d1b20 0%, #05080a 78%);
    border:1px solid #1c2a2e;
    box-shadow:inset 0 0 40px rgba(0,0,0,.5), 0 0 0 1px rgba(56,198,240,.08);
    overflow:hidden;
  }
  #chartField{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
  }
  @media (max-width: 800px){
    .chart-stage{ max-width:340px; }
  }

  /* ---- Managed IT sub-services ---- */
  .services-detail{
    max-width:74rem;
    margin:4.5rem auto 0;
    padding:2.5rem clamp(1.25rem, 4vw, 3rem) 0;
    border-top:1px solid var(--line);
  }
  .services-detail-label{
    font-family:'JetBrains Mono',monospace;
    font-size:.72rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--cyan-text);
    margin:0 0 1.5rem;
  }
  .services-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1.25rem;
  }
  .service-card{
    background:var(--surface-2);
    border:1px solid var(--line);
    border-radius:14px;
    padding:1.5rem;
    transition:border-color .25s ease, transform .25s ease;
  }
  .service-card:hover{
    border-color:var(--cyan);
    transform:translateY(-3px);
  }
  .service-icon{
    width:26px;
    height:26px;
    color:var(--cyan);
    margin-bottom:.9rem;
  }
  .service-card h3{
    font-family:'Chakra Petch',sans-serif;
    font-weight:600;
    font-size:.98rem;
    margin:0 0 .4rem;
    color:var(--ink);
  }
  .service-card p{
    margin:0;
    font-size:.85rem;
    line-height:1.55;
    color:var(--ink-dim);
  }
  @media (max-width: 900px){
    .services-grid{ grid-template-columns:1fr 1fr; }
  }
  @media (max-width: 560px){
    .services-grid{ grid-template-columns:1fr; }
  }

  /* ---- About / Why ANSR ---- */
  .about{
    background:var(--void);
    padding:6rem 0;
  }
  .about-inner{
    max-width:74rem;
    margin:0 auto;
    padding:0 clamp(1.25rem, 4vw, 3rem);
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4rem;
    align-items:start;
  }
  .about-copy h2{
    font-family:'Chakra Petch',sans-serif;
    font-weight:600;
    font-size:clamp(1.8rem, 3.4vw, 2.6rem);
    margin:.4rem 0 1.1rem;
    text-wrap:balance;
    color:var(--ink);
  }
  .about-lede{
    color:var(--ink-dim);
    font-size:1rem;
    line-height:1.7;
    max-width:30rem;
  }
  .proof-list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:1.75rem;
  }
  .proof-list li{
    display:flex;
    gap:1.1rem;
    align-items:flex-start;
  }
  .proof-mark{
    font-family:'JetBrains Mono',monospace;
    font-size:.75rem;
    color:var(--cyan-text);
    border:1px solid var(--line);
    border-radius:999px;
    padding:.3rem .55rem;
    flex-shrink:0;
  }
  .proof-list h3{
    font-family:'Chakra Petch',sans-serif;
    font-weight:600;
    font-size:1rem;
    margin:0 0 .3rem;
    color:var(--ink);
  }
  .proof-list p{
    margin:0;
    font-size:.9rem;
    line-height:1.6;
    color:var(--ink-dim);
  }
  @media (max-width: 800px){
    .about-inner{ grid-template-columns:1fr; gap:2.5rem; }
  }

  /* ---- Contact CTA band ---- */
  .cta-band{
    position:relative;
    background:var(--surface);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:6.5rem 1.5rem;
    text-align:center;
    overflow:hidden;
  }
  .cta-glow{
    position:absolute;
    inset:0;
    background:radial-gradient(60% 70% at 50% 100%, var(--cyan-glow) 0%, transparent 65%);
    opacity:.6;
    pointer-events:none;
  }
  .cta-inner{ position:relative; z-index:1; }
  .cta-band h2{
    font-family:'Chakra Petch',sans-serif;
    font-weight:700;
    font-size:clamp(2rem, 4.5vw, 3.2rem);
    margin:.4rem 0 1rem;
    color:var(--ink);
    text-wrap:balance;
  }
  .cta-lede{
    max-width:32rem;
    margin:0 auto 2.2rem;
    color:var(--ink-dim);
    font-size:1.02rem;
    line-height:1.6;
  }
  .cta-button{
    display:inline-block;
    font-family:'JetBrains Mono',monospace;
    font-size:.8rem;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--void);
    background:var(--cyan);
    padding:1rem 2rem;
    border-radius:999px;
    text-decoration:none;
    box-shadow:0 0 0 0 var(--cyan-glow);
    transition:box-shadow .25s ease, transform .2s ease;
  }
  .cta-button:hover{ box-shadow:0 0 32px 4px var(--cyan-glow); transform:translateY(-2px); }

  /* ---- Footer ---- */
  .site-footer{
    background:var(--void);
    padding:3rem 0;
  }
  .footer-inner{
    max-width:74rem;
    margin:0 auto;
    padding:0 clamp(1.25rem, 4vw, 3rem);
    display:flex;
    flex-wrap:wrap;
    gap:2rem;
    align-items:center;
    justify-content:space-between;
  }
  .footer-brand{ display:flex; flex-direction:column; align-items:flex-start; gap:.6rem; }
  .footer-mark{
    height:22px;
    width:auto;
    max-width:none;
    flex-shrink:0;
    filter:drop-shadow(0 0 12px var(--cyan-glow));
  }
  .footer-brand p{
    margin:0;
    font-family:'JetBrains Mono',monospace;
    font-size:.75rem;
    color:var(--ink-dim);
    letter-spacing:.02em;
  }
  .footer-nav{
    display:flex;
    gap:1.5rem;
    font-family:'JetBrains Mono',monospace;
    font-size:.78rem;
  }
  .footer-nav a{ color:var(--ink-dim); text-decoration:none; }
  .footer-nav a:hover{ color:var(--cyan-text); }
  .footer-contact{ text-align:right; font-size:.82rem; }
  .footer-contact a{ color:var(--cyan-text); text-decoration:none; }
  .footer-legal{
    margin:.4rem 0 0;
    color:var(--ink-dim);
    font-size:.75rem;
  }
  @media (max-width: 700px){
    .footer-inner{ flex-direction:column; align-items:flex-start; text-align:left; }
    .footer-contact{ text-align:left; }
  }

  /* ---- Contact page (page-contact.php) - everything below is new to that page ---- */
  /* ---- Nav (Contact page: a plain static header, not the hero-embedded one) ---- */
  .simple-topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:1.5rem clamp(1.25rem, 4vw, 3rem);
    border-bottom:1px solid var(--line);
  }

  /* ---- Page header ---- */
  .page-header{
    max-width:44rem;
    margin:0 auto;
    padding:clamp(3.5rem, 8vw, 5.5rem) clamp(1.25rem, 4vw, 3rem) 0;
    text-align:center;
  }
  .page-header h1{
    font-family:'Chakra Petch',sans-serif;
    font-weight:700;
    font-size:clamp(2.2rem, 5vw, 3.4rem);
    line-height:1.05;
    letter-spacing:-.01em;
    margin:0;
    text-wrap:balance;
    color:var(--ink);
  }
  .page-header .sub{
    margin:1.1rem auto 0;
    max-width:32rem;
    font-size:1.05rem;
    line-height:1.6;
    color:var(--ink-dim);
  }

  /* ---- Enquiry layout ---- */
  .contact-wrap{
    max-width:74rem;
    margin:0 auto;
    padding:clamp(3rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 3rem) clamp(5rem, 10vw, 7rem);
    display:grid;
    grid-template-columns:1.5fr 1fr;
    gap:2.5rem;
    align-items:start;
  }
  @media (max-width: 900px){
    .contact-wrap{ grid-template-columns:1fr; }
  }

  .panel{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:18px;
    padding:clamp(1.75rem, 3vw, 2.5rem);
  }
  .panel h2{
    font-family:'Chakra Petch',sans-serif;
    font-weight:600;
    font-size:1.4rem;
    margin:0 0 .5rem;
    color:var(--ink);
  }
  .panel-note{
    margin:0 0 2rem;
    font-size:.9rem;
    line-height:1.6;
    color:var(--ink-dim);
    max-width:34rem;
  }

  /* ---- Form ---- */
  /* Honeypot: off-screen, not display:none — real users (and screen readers, via
     aria-hidden) never see or reach it, but naive bots that blind-fill every field
     still catch themselves. No backend exists yet to act on this, but the field and
     the client-side check are in place now so nothing needs retrofitting later. */
  .hp-field{
    position:absolute;
    left:-9999px;
    width:1px; height:1px;
    overflow:hidden;
  }
  .field{ margin-bottom:1.4rem; }
  .field label{
    display:block;
    font-family:'JetBrains Mono',monospace;
    font-size:.72rem;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--ink-dim);
    margin-bottom:.5rem;
  }
  .field label .req{ color:var(--cyan-text); margin-left:.15rem; }
  .field input[type="text"],
  .field input[type="email"],
  .field input[type="tel"],
  .field input[type="url"],
  .field select,
  .field textarea{
    width:100%;
    font-family:'Manrope',system-ui,sans-serif;
    font-size:.95rem;
    color:var(--ink);
    background:var(--surface-2);
    border:1px solid var(--line);
    border-radius:10px;
    padding:.75rem .9rem;
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  .field select{ appearance:none; cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%234d6166' stroke-width='1.6' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right .9rem center;
    padding-right:2.4rem;
  }
  .field textarea{ min-height:9rem; resize:vertical; font-family:inherit; }
  .field input:focus,
  .field select:focus,
  .field textarea:focus{
    outline:none;
    border-color:var(--cyan);
    box-shadow:0 0 0 3px var(--cyan-soft);
  }
  .field-hint{ margin:.45rem 0 0; font-size:.8rem; color:var(--ink-dim); }
  .field.has-error input,
  .field.has-error select,
  .field.has-error textarea{ border-color:var(--err); }
  .field-error{
    display:none;
    margin:.45rem 0 0;
    font-size:.8rem;
    color:var(--err);
  }
  .field.has-error .field-error{ display:block; }

  .row-2{ display:grid; grid-template-columns:1fr 1fr; gap:1.25rem 1.4rem; }
  @media (max-width: 560px){ .row-2{ grid-template-columns:1fr; } }

  /* type-specific reveal */
  .type-panel{
    display:none;
    background:var(--surface-2);
    border:1px solid var(--line);
    border-radius:12px;
    padding:1.1rem 1.25rem;
    margin-bottom:1.4rem;
  }
  .type-panel.is-visible{ display:block; animation:reveal .35s ease; }
  .type-panel .field{ margin-bottom:0; }
  .type-panel-note{
    margin:0 0 1rem;
    font-size:.85rem;
    line-height:1.55;
    color:var(--ink-dim);
  }
  .checkbox-row{
    display:flex;
    flex-wrap:wrap;
    gap:.6rem;
  }
  .checkbox-pill{
    display:flex;
    align-items:center;
    gap:.45rem;
    font-size:.85rem;
    color:var(--ink);
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:999px;
    padding:.4rem .85rem .4rem .65rem;
    cursor:pointer;
  }
  .checkbox-pill input{ accent-color:var(--cyan); }

  @keyframes reveal{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:translateY(0); } }
  @media (prefers-reduced-motion: reduce){ .type-panel.is-visible{ animation:none; } }

  .consent{
    display:flex;
    align-items:flex-start;
    gap:.6rem;
    font-size:.85rem;
    line-height:1.5;
    color:var(--ink-dim);
    margin-bottom:1.6rem;
  }
  .consent input{ margin-top:.2rem; accent-color:var(--cyan); flex-shrink:0; }

  .attach-note{
    font-size:.82rem;
    color:var(--ink-dim);
    margin:0 0 1.6rem;
  }
  .attach-note a{ color:var(--cyan-text); text-decoration:none; }
  .attach-note a:hover{ text-decoration:underline; }

  .submit-btn{
    appearance:none;
    border:none;
    cursor:pointer;
    font-family:'JetBrains Mono',monospace;
    font-size:.8rem;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--void);
    background:var(--cyan);
    padding:1rem 2rem;
    border-radius:999px;
    box-shadow:0 0 0 0 var(--cyan-glow);
    transition:box-shadow .25s ease, transform .2s ease;
  }
  .submit-btn:hover{ box-shadow:0 0 32px 4px var(--cyan-glow); transform:translateY(-2px); }

  .summary-banner{
    display:none;
    align-items:flex-start;
    gap:.7rem;
    background:var(--err-soft);
    border:1px solid var(--err);
    border-radius:12px;
    padding:1rem 1.15rem;
    margin-bottom:1.6rem;
    font-size:.88rem;
    line-height:1.55;
    color:var(--ink);
  }
  .summary-banner.is-visible{ display:flex; }
  .summary-banner strong{ display:block; margin-bottom:.2rem; }
  .summary-banner ul{ margin:.3rem 0 0; padding-left:1.1rem; }
  .summary-banner a{ color:var(--err); }

  /* ---- Success state ---- */
  .success-panel{ display:none; text-align:center; padding:1.5rem 0 .5rem; }
  .success-panel.is-visible{ display:block; }
  .success-mark{
    width:52px; height:52px;
    margin:0 auto 1.25rem;
    border-radius:50%;
    background:var(--cyan-soft);
    border:1px solid var(--cyan);
    display:flex; align-items:center; justify-content:center;
  }
  .success-panel h3{
    font-family:'Chakra Petch',sans-serif;
    font-weight:600;
    font-size:1.3rem;
    margin:0 0 .6rem;
    color:var(--ink);
  }
  .success-panel p{
    margin:0 auto;
    max-width:26rem;
    font-size:.92rem;
    line-height:1.6;
    color:var(--ink-dim);
  }
  .success-reset{
    display:inline-block;
    margin-top:1.5rem;
    font-family:'JetBrains Mono',monospace;
    font-size:.78rem;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--cyan-text);
    text-decoration:none;
    border-bottom:1px solid var(--cyan);
    padding-bottom:.15rem;
  }

  /* ---- Talk to us directly ---- */
  .direct-panel{ position:sticky; top:1.5rem; }
  .direct-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1.4rem; }
  .direct-list li{ display:flex; gap:1rem; align-items:flex-start; }
  .direct-icon{
    flex-shrink:0;
    width:38px; height:38px;
    border-radius:10px;
    background:var(--surface-2);
    border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    color:var(--cyan);
  }
  .direct-list h3{
    font-family:'JetBrains Mono',monospace;
    font-size:.7rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--ink-dim);
    margin:0 0 .3rem;
  }
  .direct-list p{ margin:0; font-size:.95rem; color:var(--ink); }
  .direct-list a{ color:var(--ink); text-decoration:none; }
  .direct-list a:hover{ color:var(--cyan-text); }
  .direct-list .pending{ color:var(--ink-dim); font-size:.82rem; font-style:italic; }
  .direct-divider{ border:none; border-top:1px solid var(--line); margin:1.6rem 0; }
  .direct-panel .eyebrow{ justify-content:flex-start; margin-bottom:1rem; }