/* jamesrimmer.au shared stylesheet */

  :root{
    --ink:#0B1220;
    --ink-2:#101A2C;
    --ink-3:#18243C;
    --paper:#ECE8DF;
    --paper-dim:#B9BECA;
    --brass:#C29A5C;
    --brass-lo:#8A703F;
    --signal:#5FD1CC;
    --muted:#7C879C;
    --line:rgba(236,232,223,0.10);
    --line-hi:rgba(236,232,223,0.22);
    --maxw:1160px;
    --nav-h:72px;
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 20px)}
  body{
    margin:0; background:var(--ink); color:var(--paper);
    font-family:'Inter',system-ui,sans-serif; line-height:1.62;
    -webkit-font-smoothing:antialiased;
  }
  body.nav-open{overflow:hidden}
  h1,h2,h3{font-family:'Space Grotesk',sans-serif; margin:0; letter-spacing:-0.015em}
  p{margin:0}
  a{color:inherit}
  canvas{display:block}
  .mono{font-family:'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.14em; font-weight:500}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px}
  .divider{height:1px; background:var(--line)}
  .section-pad{padding:132px 0}
  .tint{background:var(--ink-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}

  :focus-visible{outline:2px solid var(--signal); outline-offset:3px}

  /* ---------------- NAVIGATION ---------------- */
  header{
    position:fixed; inset:0 0 auto 0; z-index:200;
    background:rgba(11,18,32,.78); backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
  }
  nav.wrap{display:flex; align-items:center; justify-content:space-between; height:var(--nav-h)}
  .brand{display:flex; align-items:center; gap:11px; font-family:'Space Grotesk',sans-serif;
    font-weight:700; font-size:1.02rem; text-decoration:none}
  .brand svg{width:22px; height:22px; flex:0 0 auto}
  .nav-links{display:flex; gap:32px; align-items:center; list-style:none; margin:0; padding:0}
  .nav-links a{
    text-decoration:none; font-family:'IBM Plex Mono',monospace; font-size:.78rem;
    text-transform:uppercase; letter-spacing:.1em; color:var(--muted);
    padding:4px 0; border-bottom:1px solid transparent; transition:color .2s, border-color .2s;
  }
  .nav-links a:hover{color:var(--paper)}
  .nav-links a.active{color:var(--paper); border-bottom-color:var(--brass)}
  .nav-cta{
    border:1px solid var(--brass) !important; color:var(--paper) !important;
    padding:9px 18px !important; border-radius:3px; transition:background .2s, color .2s;
  }
  .nav-cta:hover{background:var(--brass); color:var(--ink) !important}

  .has-sub{position:relative}
  .sub-toggle{
    background:none; border:0; cursor:pointer; padding:4px 0;
    font-family:'IBM Plex Mono',monospace; font-size:.78rem; text-transform:uppercase;
    letter-spacing:.1em; color:var(--muted); display:inline-flex; align-items:center; gap:7px;
    border-bottom:1px solid transparent; transition:color .2s, border-color .2s;
  }
  .sub-toggle:hover{color:var(--paper)}
  .sub-toggle.here{color:var(--paper); border-bottom-color:var(--brass)}
  .sub-toggle svg{width:9px; height:9px; transition:transform .25s}
  .sub-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
  .sub{
    position:absolute; top:calc(100% + 20px); left:50%;
    transform:translateX(-50%) translateY(-6px);
    min-width:212px; background:var(--ink-2); border:1px solid var(--line-hi);
    border-radius:6px; padding:8px; margin:0; list-style:none;
    box-shadow:0 18px 44px rgba(0,0,0,.5);
    opacity:0; visibility:hidden; z-index:210;
    transition:opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .sub-toggle[aria-expanded="true"] + .sub{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}
  .sub li{width:100%}
  .sub a{
    display:block; padding:11px 13px; border-radius:4px; border-bottom:0 !important;
    color:var(--paper-dim) !important; font-size:.74rem; white-space:nowrap;
    transition:background .2s, color .2s;
  }
  .sub a:hover{background:var(--ink-3); color:var(--paper) !important}
  .sub a.current{color:var(--brass) !important}

  .nav-toggle{
    display:none; background:none; border:1px solid var(--line-hi); border-radius:3px;
    width:42px; height:38px; cursor:pointer; padding:0; align-items:center; justify-content:center;
  }
  .nav-toggle span{display:block; width:18px; height:1.5px; background:var(--paper); position:relative; transition:background .2s}
  .nav-toggle span::before,.nav-toggle span::after{
    content:''; position:absolute; left:0; width:18px; height:1.5px; background:var(--paper); transition:transform .25s
  }
  .nav-toggle span::before{top:-6px}
  .nav-toggle span::after{top:6px}
  body.nav-open .nav-toggle span{background:transparent}
  body.nav-open .nav-toggle span::before{transform:translateY(6px) rotate(45deg)}
  body.nav-open .nav-toggle span::after{transform:translateY(-6px) rotate(-45deg)}

  /* ---------------- HERO ---------------- */
  .hero{min-height:100svh; display:flex; align-items:center; padding-top:calc(var(--nav-h) + 24px); overflow:hidden}
  .hero-grid{width:100%; display:grid; grid-template-columns:1.08fr .92fr; gap:48px; align-items:center}
  .eyebrow{color:var(--signal); font-size:.74rem}
  .hero h1{font-size:clamp(2.2rem,4.9vw,3.5rem); line-height:1.06; margin-top:20px; font-weight:700}
  .hero h1 .accent{color:var(--brass)}
  .lede{margin-top:24px; max-width:48ch; color:var(--paper-dim); font-size:1.05rem}
  .hero-ctas{margin-top:36px; display:flex; gap:14px; flex-wrap:wrap}
  .btn{
    font-family:'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.09em;
    font-size:.8rem; text-decoration:none; padding:14px 24px; border-radius:3px;
    display:inline-flex; align-items:center; gap:9px; transition:all .2s ease; border:1px solid transparent;
  }
  .btn-primary{background:var(--brass); color:var(--ink)}
  .btn-primary:hover{background:#d4ad70; transform:translateY(-1px)}
  .btn-ghost{border-color:var(--line-hi); color:var(--paper)}
  .btn-ghost:hover{border-color:var(--signal); color:var(--signal)}

  .hero-visual{position:relative; aspect-ratio:1/1; width:100%; max-width:460px; justify-self:center}
  #network{width:100%; height:100%}
  .scroll-cue{
    position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
    color:var(--muted); font-size:.66rem; display:flex; flex-direction:column; align-items:center; gap:8px
  }
  .scroll-cue i{display:block; width:1px; height:34px; background:linear-gradient(var(--muted),transparent); animation:pulse 2.2s ease-in-out infinite}
  @keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}}

  /* ---------------- SECTION HEADINGS ---------------- */
  .section-head{max-width:680px; margin-bottom:58px}
  .section-head .mono{color:var(--brass); font-size:.74rem}
  .section-head h2{font-size:clamp(1.7rem,3.3vw,2.35rem); margin-top:14px}
  .section-head p{margin-top:16px; color:var(--paper-dim); font-size:1.01rem}

  /* ---------------- APPROACH STAGES ---------------- */
  .stages{border-top:1px solid var(--line)}
  .stage{
    display:grid; grid-template-columns:210px 1fr; gap:44px;
    padding:52px 0; border-bottom:1px solid var(--line); position:relative;
  }
  .stage::after{
    content:''; position:absolute; left:0; bottom:-1px; height:1px; width:100%;
    background:var(--brass); transform:scaleX(0); transform-origin:left;
    transition:transform .9s cubic-bezier(.4,0,.2,1);
  }
  .stage.in-view::after{transform:scaleX(1)}
  .stage-num{
    font-family:'IBM Plex Mono',monospace; color:var(--brass); font-size:.82rem;
    text-transform:uppercase; letter-spacing:.16em; padding-top:5px;
  }
  .stage-label{margin-top:10px; color:var(--muted); font-size:.82rem}
  .stage h3{font-size:1.32rem}
  .stage p{margin-top:14px; color:var(--paper-dim); font-size:.97rem; max-width:64ch}

  /* ---------------- CARDS ---------------- */
  /* six-column base so an odd final row can be centred */
  .grid-3{display:grid; grid-template-columns:repeat(6,1fr); gap:18px}
  .grid-3 > .card{grid-column:span 2}
  .grid-3 > .card:nth-child(4){grid-column:2 / span 2}
  .grid-3 > .card:nth-child(5){grid-column:4 / span 2}
  .card{
    background:var(--ink); border:1px solid var(--line); border-radius:8px; padding:30px 26px;
    transition:transform .25s ease, border-color .25s ease, background .25s ease;
  }
  .card:hover,.card:focus-within{transform:translateY(-4px); border-color:var(--signal); background:var(--ink-3)}
  .card svg{width:32px; height:32px; color:var(--signal)}
  .card h3{font-size:1.05rem; margin-top:20px}
  .card p{margin-top:10px; font-size:.91rem; color:var(--paper-dim)}
  .card-link{
    display:inline-block; margin-top:16px; font-family:'IBM Plex Mono',monospace;
    font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--signal);
    text-decoration:none; border-bottom:1px solid rgba(95,209,204,.35); padding-bottom:2px;
  }
  .card-link::after{content:' \2192'}
  .card-link:hover{border-bottom-color:var(--signal)}

  /* ---------------- POSITIONING BAND ---------------- */
  .band{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--ink-2)}
  .band .wrap{padding-top:88px; padding-bottom:88px}
  .band blockquote{
    margin:0; max-width:24ch; font-family:'Space Grotesk',sans-serif; font-weight:600;
    font-size:clamp(1.5rem,3.4vw,2.3rem); line-height:1.22; letter-spacing:-0.02em;
  }
  .band blockquote .accent{color:var(--brass)}
  .band-note{margin-top:22px; color:var(--muted); font-size:.8rem; max-width:38ch}

  /* ---------------- CAREER JOURNEY ---------------- */
  .journey{
    position:relative; margin-left:8px;
    border-left:2px solid var(--line);
  }
  .journey::before{
    content:''; position:absolute; left:-2px; top:0; width:2px; height:100%;
    background:linear-gradient(var(--signal), var(--brass));
    transform:scaleY(0); transform-origin:top;
    transition:transform 1.4s cubic-bezier(.4,0,.2,1);
  }
  .journey.in-view::before{transform:scaleY(1)}
  .jrn-item{position:relative; padding:0 0 52px 38px}
  .jrn-item:last-child{padding-bottom:0}
  .jrn-item::before{
    content:''; position:absolute; left:-8px; top:6px; width:14px; height:14px;
    border-radius:50%; background:var(--ink); border:2px solid var(--signal);
  }
  .jrn-item:last-child::before{background:var(--brass); border-color:var(--brass)}
  .jrn-step{
    font-family:'IBM Plex Mono',monospace; font-size:.72rem; text-transform:uppercase;
    letter-spacing:.14em; color:var(--brass-lo);
  }
  .jrn-item h3{font-size:1.14rem; margin-top:9px}
  .jrn-item > p{margin-top:9px; color:var(--paper-dim); font-size:.94rem; max-width:64ch}
  .jrn-learned{
    margin-top:14px; padding-left:14px; border-left:2px solid var(--line-hi);
    font-size:.88rem; color:var(--muted); max-width:60ch;
  }
  .jrn-learned strong{
    display:block; font-family:'IBM Plex Mono',monospace; font-size:.66rem;
    text-transform:uppercase; letter-spacing:.14em; color:var(--signal);
    margin-bottom:5px; font-weight:500;
  }
  .journey-close{
    margin-top:52px; padding:30px 32px; border:1px solid var(--line);
    border-radius:8px; background:var(--ink-2); max-width:68ch;
  }
  .journey-close p{color:var(--paper-dim); font-size:1rem}
  .journey-close .accent{color:var(--brass)}

  /* ---------------- TECHNICAL DETAIL (collapsed) ---------------- */
  .tech-detail{margin-top:34px; border-top:1px solid var(--line); padding-top:26px}
  .tech-detail summary{
    cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:10px;
    font-family:'IBM Plex Mono',monospace; font-size:.72rem; text-transform:uppercase;
    letter-spacing:.12em; color:var(--muted); transition:color .2s;
  }
  .tech-detail summary::-webkit-details-marker{display:none}
  .tech-detail summary:hover{color:var(--signal)}
  .tech-detail summary svg{width:10px; height:10px; transition:transform .25s}
  .tech-detail[open] summary svg{transform:rotate(180deg)}
  .tech-detail[open] summary{color:var(--paper)}
  .tech-body{margin-top:24px}
  .tech-body > p{color:var(--muted); font-size:.88rem; max-width:64ch; margin-bottom:22px}
  .stack{border-top:1px solid var(--line)}
  .stack-row{
    display:grid; grid-template-columns:210px 1fr; gap:30px;
    padding:20px 0; border-bottom:1px solid var(--line); align-items:baseline;
  }
  .stack-label{
    font-family:'IBM Plex Mono',monospace; font-size:.68rem; text-transform:uppercase;
    letter-spacing:.14em; color:var(--brass);
  }
  .chips{display:flex; flex-wrap:wrap; gap:7px}
  .chip{
    font-family:'IBM Plex Mono',monospace; font-size:.7rem; letter-spacing:.04em;
    color:var(--paper-dim); border:1px solid var(--line-hi); border-radius:3px;
    padding:5px 10px; white-space:nowrap;
  }

  /* ---------------- CONTACT ---------------- */
  .contact-grid{display:grid; grid-template-columns:.88fr 1.12fr; gap:60px; align-items:start}
  .contact-info h3{font-size:1.38rem; margin-top:14px}
  .contact-info > p{color:var(--paper-dim); margin-top:14px; max-width:40ch}
  .contact-links{margin-top:28px; display:flex; flex-direction:column; gap:14px}
  .contact-links a{
    text-decoration:none; font-family:'IBM Plex Mono',monospace; font-size:.85rem;
    display:flex; align-items:center; gap:11px; width:fit-content;
    border-bottom:1px solid transparent; padding-bottom:2px; transition:color .2s, border-color .2s;
  }
  .contact-links a:hover{color:var(--signal); border-color:var(--signal)}
  .contact-links svg{width:16px; height:16px; color:var(--brass)}

  form{display:grid; gap:18px}
  .form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px}
  label{display:block; font-family:'IBM Plex Mono',monospace; font-size:.68rem;
    text-transform:uppercase; letter-spacing:.11em; color:var(--muted); margin-bottom:8px}
  input,textarea{
    width:100%; background:var(--ink); border:1px solid var(--line); color:var(--paper);
    padding:13px 14px; border-radius:4px; font-family:'Inter',sans-serif; font-size:.95rem;
    transition:border-color .2s;
  }
  input:focus,textarea:focus{border-color:var(--signal)}
  textarea{resize:vertical; min-height:120px}
  .honey{position:absolute; left:-9999px; opacity:0}
  .submit-btn{background:var(--brass); color:var(--ink); border:none; cursor:pointer; justify-self:start}
  .submit-btn:hover{background:#d4ad70}
  .form-status{font-family:'IBM Plex Mono',monospace; font-size:.78rem; color:var(--signal); min-height:1em}

  footer{border-top:1px solid var(--line); padding:34px 0}
  .footer-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;
    gap:12px; font-size:.78rem; color:var(--muted)}

  /* ---------------- REVEAL ---------------- */
  .reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease}
  .reveal.in-view{opacity:1; transform:none}

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    .reveal{opacity:1; transform:none; transition:none}
    .scroll-cue i{animation:none}
    .stage::after{transition:none; transform:scaleX(1)}
    .journey::before{transition:none; transform:scaleY(1)}
  }

  /* ---------------- RESPONSIVE ---------------- */
  @media (max-width:920px){
    .hero-grid{grid-template-columns:1fr; gap:36px}
    .hero-visual{order:-1; max-width:290px; margin:0 auto}
    .hero{min-height:auto; padding-bottom:90px}
    .scroll-cue{display:none}
    .stage{grid-template-columns:1fr; gap:18px; padding:40px 0}
    .stage-num{padding-top:0}
    .grid-3{grid-template-columns:1fr 1fr}
    .grid-3 > .card,
    .grid-3 > .card:nth-child(4),
    .grid-3 > .card:nth-child(5){grid-column:auto}
    .contact-grid{grid-template-columns:1fr; gap:44px}
    .stack-row{grid-template-columns:1fr; gap:10px}
    .form-row{grid-template-columns:1fr}
    .band blockquote{max-width:none}
  }
  @media (max-width:700px){
    .wrap{padding:0 20px}
    .section-pad{padding:88px 0}
    .grid-3{grid-template-columns:1fr}
    .grid-3 > .card,
    .grid-3 > .card:nth-child(4),
    .grid-3 > .card:nth-child(5){grid-column:auto}
    .journey-close{padding:24px 22px}
    .nav-toggle{display:flex}
    .nav-links{
      position:fixed; inset:var(--nav-h) 0 auto 0;
      flex-direction:column; align-items:flex-start; gap:0;
      background:var(--ink); border-bottom:1px solid var(--line);
      padding:12px 20px 24px; transform:translateY(-120%);
      transition:transform .32s cubic-bezier(.4,0,.2,1); z-index:150;
    }
    body.nav-open .nav-links{transform:translateY(0)}
    .nav-links li{width:100%}
    .nav-links a{display:block; width:100%; padding:16px 0; font-size:.92rem; border-bottom:1px solid var(--line)}
    .nav-links a.active{border-bottom-color:var(--line)}
    .has-sub{width:100%}
    .sub-toggle{width:100%; justify-content:space-between; padding:16px 0;
      font-size:.92rem; border-bottom:1px solid var(--line)}
    .sub{position:static; transform:none; opacity:1; visibility:visible; min-width:0;
      background:none; border:0; box-shadow:none; padding:0;
      max-height:0; overflow:hidden; transition:max-height .3s ease}
    .sub-toggle[aria-expanded="true"] + .sub{transform:none; max-height:320px}
    .sub a{padding:14px 0 14px 18px; font-size:.86rem;
      border-bottom:1px solid var(--line) !important; border-radius:0}
    .nav-cta{margin-top:18px; text-align:center; padding:14px !important}
  }
  /* page head */
  .page-head{padding:calc(var(--nav-h) + 96px) 0 88px}
  .back{font-family:'IBM Plex Mono',monospace; font-size:.72rem; text-transform:uppercase;
    letter-spacing:.12em; color:var(--muted); text-decoration:none}
  .back:hover{color:var(--signal)}
  .page-head .eyebrow{color:var(--brass); font-size:.74rem; margin-top:34px}
  .page-head h1{font-size:clamp(2rem,4.4vw,3.1rem); line-height:1.08; margin-top:16px; max-width:20ch}
  .page-head h1 .accent{color:var(--brass)}
  .page-head .lede{margin-top:24px; max-width:64ch; color:var(--paper-dim); font-size:1.06rem}
  .note{margin-top:26px; padding-left:16px; border-left:2px solid var(--line-hi);
    color:var(--muted); font-size:.86rem; max-width:62ch}

  .section-head{max-width:680px; margin-bottom:52px}
  .section-head .mono{color:var(--brass); font-size:.74rem}
  .section-head h2{font-size:clamp(1.6rem,3.1vw,2.2rem); margin-top:14px}
  .section-head p{margin-top:16px; color:var(--paper-dim); font-size:1.01rem}

  /* standards */
  .standards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
  .std{border:1px solid var(--line); border-radius:8px; padding:30px 26px; background:var(--ink);
    transition:border-color .2s, transform .2s}
  .std:hover{border-color:var(--line-hi); transform:translateY(-3px)}
  .std-tag{font-family:'IBM Plex Mono',monospace; font-size:.66rem; text-transform:uppercase;
    letter-spacing:.14em; color:var(--brass-lo)}
  .std h3{font-size:1.14rem; margin-top:12px}
  .std .fit{margin-top:14px; color:var(--signal); font-size:.84rem; font-family:'IBM Plex Mono',monospace}
  .std p{margin-top:12px; color:var(--paper-dim); font-size:.92rem}
  .insurance{margin-top:34px; border:1px solid var(--line); border-left:2px solid var(--brass);
    border-radius:6px; background:var(--ink); padding:26px 28px; max-width:78ch}
  .insurance h4{font-family:'Space Grotesk',sans-serif; font-size:1.02rem}
  .insurance p{margin-top:10px; color:var(--paper-dim); font-size:.95rem}

  /* layers */
  .layer-group{margin-bottom:26px}
  .layer-group-label{
    font-family:'IBM Plex Mono',monospace; font-size:.66rem; text-transform:uppercase;
    letter-spacing:.16em; color:var(--brass-lo); margin-bottom:12px;
    display:flex; align-items:center; gap:14px;
  }
  .layer-group-label::after{content:''; flex:1; height:1px; background:var(--line)}
  .layers{display:grid; gap:9px}
  .layers.of-four{grid-template-columns:repeat(4,1fr)}
  .layers.of-five{grid-template-columns:repeat(5,1fr)}
  .layers.of-six{grid-template-columns:repeat(6,1fr)}
  .layer{
    background:var(--ink); border:1px solid var(--line); border-radius:6px; padding:18px 14px;
    cursor:pointer; text-align:left; color:inherit; font:inherit; position:relative;
    transition:border-color .2s, background .2s, transform .2s;
  }
  .layer:hover{border-color:var(--line-hi); transform:translateY(-2px)}
  .layer[aria-selected="true"]{border-color:var(--signal); background:var(--ink-3)}
  .layer[aria-selected="true"]::after{content:''; position:absolute; left:50%; bottom:-1px;
    width:30px; height:2px; background:var(--signal); transform:translateX(-50%)}
  .layer-n{font-family:'IBM Plex Mono',monospace; font-size:.62rem; color:var(--brass-lo);
    letter-spacing:.14em; text-transform:uppercase}
  .layer-name{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:.97rem; margin-top:8px; display:block}

  .detail{border:1px solid var(--line); border-radius:8px; background:var(--ink-2);
    padding:36px 34px; min-height:330px}
  .detail h3{font-size:1.3rem}
  .detail .what{margin-top:14px; color:var(--paper-dim); font-size:1rem; max-width:74ch}
  .detail-grid{display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:28px}
  .detail-grid h4{font-family:'IBM Plex Mono',monospace; font-size:.68rem; text-transform:uppercase;
    letter-spacing:.14em; color:var(--signal); font-weight:500}
  .detail-grid ul{margin:9px 0 0; padding-left:18px; color:var(--paper-dim); font-size:.91rem}
  .detail-grid li{margin-bottom:7px}

  /* principle band */
  .band{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--ink-2)}
  .band .wrap{padding-top:84px; padding-bottom:84px}
  .band blockquote{margin:0; max-width:26ch; font-family:'Space Grotesk',sans-serif; font-weight:600;
    font-size:clamp(1.45rem,3.2vw,2.15rem); line-height:1.22; letter-spacing:-0.02em}
  .band blockquote .accent{color:var(--brass)}
  .band-note{margin-top:22px; color:var(--muted); font-size:.82rem; max-width:44ch}

  /* closing points */
  .gov{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
  .gov-item{border:1px solid var(--line); border-radius:8px; padding:28px 26px; background:var(--ink)}
  .gov-item h3{font-size:1.05rem}
  .gov-item p{margin-top:10px; color:var(--paper-dim); font-size:.93rem}

  .closer{max-width:72ch}
  .closer p{color:var(--paper-dim); font-size:1.02rem; margin-top:16px}
  .closer .accent{color:var(--brass)}
  .btn{font-family:'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.09em;
    font-size:.8rem; text-decoration:none; padding:14px 24px; border-radius:3px;
    display:inline-flex; align-items:center; gap:9px; transition:all .2s ease; border:1px solid transparent}
  .btn-primary{background:var(--brass); color:var(--ink)}
  .btn-primary:hover{background:#d4ad70; transform:translateY(-1px)}
  .btn-ghost{border-color:var(--line-hi); color:var(--paper)}
  .btn-ghost:hover{border-color:var(--signal); color:var(--signal)}
  .cta-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:30px}

  footer{border-top:1px solid var(--line); padding:34px 0}
  .footer-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;
    gap:12px; font-size:.78rem; color:var(--muted)}

  .reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease}
  .reveal.in-view{opacity:1; transform:none}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    .reveal{opacity:1; transform:none; transition:none}
    .layer:hover,.std:hover{transform:none}
  }

  @media (max-width:920px){
    .standards{grid-template-columns:1fr}
    .gov{grid-template-columns:1fr}
    .layers.of-four,.layers.of-five,.layers.of-six{grid-template-columns:1fr 1fr 1fr}
    .detail-grid{grid-template-columns:1fr; gap:22px}
    .band blockquote{max-width:none}
  }
  @media (max-width:700px){
    .wrap{padding:0 20px}
    .section-pad{padding:80px 0}
    .page-head{padding:calc(var(--nav-h) + 64px) 0 64px}
    .layers.of-four,.layers.of-five,.layers.of-six{grid-template-columns:1fr 1fr}
    .detail{padding:26px 22px}
    .nav-toggle{display:flex}
    .nav-links{position:fixed; inset:var(--nav-h) 0 auto 0; flex-direction:column;
      align-items:flex-start; gap:0; background:var(--ink); border-bottom:1px solid var(--line);
      padding:12px 20px 24px; transform:translateY(-120%);
      transition:transform .32s cubic-bezier(.4,0,.2,1); z-index:150}
    body.nav-open .nav-links{transform:translateY(0)}
    .nav-links li{width:100%}
    .nav-links a{display:block; width:100%; padding:16px 0; font-size:.92rem; border-bottom:1px solid var(--line)}
    .has-sub{width:100%}
    .sub-toggle{width:100%; justify-content:space-between; padding:16px 0;
      font-size:.92rem; border-bottom:1px solid var(--line)}
    .sub{position:static; transform:none; opacity:1; visibility:visible; min-width:0;
      background:none; border:0; box-shadow:none; padding:0;
      max-height:0; overflow:hidden; transition:max-height .3s ease}
    .sub-toggle[aria-expanded="true"] + .sub{transform:none; max-height:320px}
    .sub a{padding:14px 0 14px 18px; font-size:.86rem;
      border-bottom:1px solid var(--line) !important; border-radius:0}
    .nav-cta{margin-top:18px; text-align:center; padding:14px !important}
  }

  /* ---------------- LATEST INSIGHTS (home) ---------------- */
  .latest-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
  .latest{
    display:block; text-decoration:none; background:var(--ink);
    border:1px solid var(--line); border-radius:8px; padding:28px 26px;
    transition:transform .25s ease, border-color .25s ease, background .25s ease;
  }
  .latest:hover{transform:translateY(-4px); border-color:var(--signal); background:var(--ink-3)}
  .latest-area{
    font-family:'IBM Plex Mono',monospace; font-size:.66rem; text-transform:uppercase;
    letter-spacing:.14em; color:var(--brass);
  }
  .latest h3{font-size:1.06rem; margin-top:12px; color:var(--paper)}
  .latest p{margin-top:10px; font-size:.9rem; color:var(--paper-dim)}
  .latest-more{
    margin-top:12px; font-family:'IBM Plex Mono',monospace; font-size:.68rem;
    text-transform:uppercase; letter-spacing:.1em; color:var(--signal); display:inline-block;
  }
  .see-all{
    display:inline-flex; align-items:center; gap:9px; margin-top:30px; text-decoration:none;
    font-family:'IBM Plex Mono',monospace; font-size:.74rem; text-transform:uppercase;
    letter-spacing:.1em; color:var(--muted); border-bottom:1px solid transparent; padding-bottom:3px;
  }
  .see-all:hover{color:var(--signal); border-color:var(--signal)}

  /* ---------------- TLDR (insight pages) ---------------- */
  .tldr{
    margin-top:30px; display:flex; align-items:flex-start; gap:22px;
    border:1px solid var(--line-hi); border-radius:8px; background:var(--ink-2);
    padding:24px 26px; max-width:64ch;
  }
  .tldr-body{flex:1; min-width:0}
  .tldr-label{
    font-family:'IBM Plex Mono',monospace; font-size:.68rem; text-transform:uppercase;
    letter-spacing:.14em; color:var(--signal);
  }
  .tldr-text{margin-top:9px; color:var(--paper); font-size:.96rem; line-height:1.55}
  .tldr-copy{
    flex:0 0 auto; display:inline-flex; align-items:center; gap:8px;
    font-family:'IBM Plex Mono',monospace; font-size:.7rem; text-transform:uppercase;
    letter-spacing:.08em; border:1px solid var(--line-hi); border-radius:4px;
    padding:10px 16px; background:none; color:var(--paper-dim); cursor:pointer;
    transition:border-color .2s, color .2s, background .2s; white-space:nowrap;
  }
  .tldr-copy svg{width:14px; height:14px; flex:0 0 auto}
  .tldr-copy:hover{border-color:var(--signal); color:var(--signal)}
  .tldr-copy.copied{border-color:var(--brass); color:var(--brass); background:rgba(194,154,92,.09)}
  @media (max-width:700px){
    .tldr{flex-direction:column}
    .tldr-copy{width:100%; justify-content:center}
  }

  /* ---------------- INSIGHTS INDEX ---------------- */
  .idx-group{margin-bottom:52px}
  .idx-head{
    display:flex; align-items:baseline; gap:16px; margin-bottom:20px;
    padding-bottom:12px; border-bottom:1px solid var(--line);
  }
  .idx-head h3{font-size:1.16rem}
  .idx-head span{
    font-family:'IBM Plex Mono',monospace; font-size:.68rem; text-transform:uppercase;
    letter-spacing:.14em; color:var(--muted);
  }
  .idx-list{display:grid; gap:12px}
  .idx-item{
    display:grid; grid-template-columns:1fr auto; gap:20px; align-items:baseline;
    text-decoration:none; border:1px solid var(--line); border-radius:6px;
    padding:22px 24px; background:var(--ink);
    transition:border-color .2s, background .2s, transform .2s;
  }
  .idx-item:hover{border-color:var(--signal); background:var(--ink-3); transform:translateX(3px)}
  .idx-item h4{font-family:'Space Grotesk',sans-serif; font-size:1.02rem; color:var(--paper)}
  .idx-item p{margin-top:8px; font-size:.9rem; color:var(--paper-dim); max-width:70ch}
  .idx-date{
    font-family:'IBM Plex Mono',monospace; font-size:.68rem; color:var(--muted); white-space:nowrap;
  }
  .idx-empty{color:var(--muted); font-size:.9rem; font-style:italic}

  @media (max-width:920px){
    .latest-grid{grid-template-columns:1fr 1fr}
  }
  @media (max-width:700px){
    .latest-grid{grid-template-columns:1fr}
    .idx-item{grid-template-columns:1fr; gap:8px}
  }