:root{
    --ink:#0B1F2A;        /* deep parliamentary ink */
    --ink-2:#123A52;      /* institutional blue */
    --teal:#2E8C99;       /* water */
    --teal-2:#57ADB6;
    --teal-soft:#D9E8E8;
    --brass:#C4A05A;      /* value / civic accent */
    --brass-2:#D8BC85;
    --paper:#F1EFE7;      /* warm ivory */
    --card:#FBFAF5;
    --line:#DBD5C6;
    --line-ink:#1E4258;
    --muted:#5B6B6C;
    --ink-muted:#9FB6BE;
    --err:#A4452F;
    --wp-blue:#2D8BD5;    /* logo: WATER wordmark + drop */
    --wp-navy:#0B2E4E;    /* logo: wheel structure */
    --wp-name:#1A303D;    /* logo: PARLIAMENT on light */
    --maxw:1160px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0; background:var(--paper); color:var(--ink);
    font-family:"IBM Plex Sans",system-ui,sans-serif;
    font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{font-family:"Spectral",Georgia,serif; font-weight:400; letter-spacing:-.01em; margin:0;}
  a{color:inherit; text-decoration:none;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
  .mono{font-family:"IBM Plex Mono",monospace;}
  .eyebrow{
    font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.18em;
    text-transform:uppercase; color:var(--teal);
  }

  /* ---------------- nav ---------------- */
  /* Light ribbon: the logo appears in its true colours (navy wheel, blue
     WATER, navy PARLIAMENT) in every position, nav and footer alike. */
  nav{
    position:sticky; top:0; z-index:50;
    background:rgba(251,250,245,.94); backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  .nav-in{display:flex; align-items:center; justify-content:space-between; height:64px;}
  .brand{display:flex; align-items:center; gap:11px;}
  .mark{width:34px; height:34px; flex:none; color:var(--wp-navy);}
  .wordmark{display:block; font-family:"Nunito",system-ui,sans-serif; font-weight:800; font-size:15.5px; letter-spacing:.05em; line-height:1.1; text-transform:uppercase;}
  .wordmark .w1{color:var(--wp-blue);}
  .wordmark .w2{color:var(--wp-name);}
  .brand .phrase{display:block; font-family:"Nunito",system-ui,sans-serif; font-weight:500; font-size:10px; letter-spacing:.05em; color:var(--muted); margin-top:1px;}
  .brand-lockup .wordmark{font-size:18px;}
  .brand-lockup .wordmark span{display:block;}
  .brand-lockup .phrase{border-top:1px solid var(--line); padding-top:6px; margin-top:6px; font-size:11px;}
  .nav-links{display:flex; align-items:center; gap:30px;}
  .nav-links a{font-size:14px; color:var(--ink-2);}
  .nav-links a:hover{color:var(--ink);}
  .btn{
    font-family:"IBM Plex Sans"; font-size:14.5px; font-weight:500; cursor:pointer;
    border:none; border-radius:2px; padding:11px 20px; transition:.18s;
  }
  .btn-brass{background:var(--brass); color:#231a06;}
  .btn-brass:hover{background:var(--brass-2);}
  .btn-brass[disabled]{opacity:.6; cursor:wait;}
  .btn-ghost{background:transparent; border:1px solid var(--line-ink); color:#DDE8EB;}
  .btn-ghost:hover{border-color:var(--teal-2); color:#fff;}
  @media(max-width:820px){ .nav-links a:not(.navcta){display:none;} }
  @media(max-width:520px){
    /* narrow screens: the logo's own stacked arrangement, phrase dropped */
    .nav-in .wordmark{font-size:13px; line-height:1.15;}
    .nav-in .wordmark span{display:block;}
    .nav-in .phrase{display:none;}
    .nav-in .mark{width:30px; height:30px;}
  }

  /* ---------------- hero ---------------- */
  .hero{position:relative; background:var(--ink); color:#EAF1F0; overflow:hidden;}
  .hero-arcs{position:absolute; right:-8%; top:50%; transform:translateY(-50%); width:820px; height:820px; opacity:.9; pointer-events:none;}
  .hero-in{position:relative; z-index:2; padding:96px 0 104px; max-width:720px;}
  .hero .eyebrow{color:var(--brass-2);}
  h1{font-size:clamp(40px,6.4vw,76px); line-height:1.02; margin:22px 0 0; font-weight:400; color:#F5F2EA;}
  h1 em{font-style:italic; color:var(--teal-2);}
  .lede{font-size:20px; line-height:1.55; color:#C4D6D9; margin:26px 0 0; max-width:600px;}
  .hero-cta{display:flex; gap:14px; margin-top:36px; flex-wrap:wrap;}
  .hero-host{
    margin-top:44px; padding-top:22px; border-top:1px solid var(--line-ink);
    font-size:13.5px; color:var(--ink-muted); max-width:560px; line-height:1.5;
  }
  .hero-host b{color:#CFE0E2; font-weight:500;}

  /* ---------------- generic section ---------------- */
  section{padding:88px 0;}
  .sec-head{max-width:720px; margin-bottom:44px;}
  .sec-head h2{font-size:clamp(30px,3.6vw,42px); line-height:1.1; margin-top:14px;}
  .sec-head p{color:var(--muted); font-size:18px; margin:18px 0 0;}

  /* why now */
  .why{background:var(--card); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .why-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}
  .why-grid .big{font-family:"Spectral"; font-size:27px; line-height:1.35; color:var(--ink);}
  .why-grid p{color:var(--muted); font-size:16.5px;}
  .why-grid .brass{color:var(--brass); font-style:italic;}
  @media(max-width:760px){ .why-grid{grid-template-columns:1fr; gap:28px;} }

  /* what — three verbs */
  .verbs{display:flex; gap:0; margin:8px 0 0; flex-wrap:wrap;}
  .verb{font-family:"Spectral"; font-size:clamp(34px,5vw,58px); color:var(--ink); padding-right:22px;}
  .verb.faded{color:var(--teal);}
  .what-copy{max-width:620px; color:var(--muted); font-size:18px; margin-top:26px;}

  /* chambers */
  .chambers{background:var(--ink); color:#E7F0EF;}
  .chambers .sec-head h2{color:#F3F0E8;}
  .chambers .sec-head p{color:var(--ink-muted);}
  .cham-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-ink); border:1px solid var(--line-ink);}
  .cham{background:var(--ink); padding:34px 32px; transition:.2s;}
  .cham:hover{background:#0e2836;}
  .cham .tag{font-family:"IBM Plex Mono"; font-size:11px; letter-spacing:.16em; color:var(--brass-2);}
  .cham h3{font-size:24px; color:#F3F0E8; margin:14px 0 12px; font-weight:500;}
  .cham p{font-size:15.5px; color:#AEC4C8; line-height:1.55; margin:0;}
  .cham .rule{width:34px; height:2px; background:var(--teal); margin-bottom:18px;}
  .cham .infra{font-family:"IBM Plex Mono"; font-size:10.5px; letter-spacing:.1em; color:var(--ink-muted); margin-top:16px; display:block;}
  .cham .infra a{color:var(--teal-2); border-bottom:1px solid var(--line-ink);}
  @media(max-width:760px){ .cham-grid{grid-template-columns:1fr;} }

  /* protocol feature */
  .protocol{background:var(--teal-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .protocol-in{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}
  .protocol h2{font-size:clamp(30px,3.8vw,44px); line-height:1.08; color:var(--ink);}
  .protocol p{color:#3a4d4e; font-size:18px;}
  .mark-lg{width:100%; max-width:280px; margin:0 auto; display:block;}
  @media(max-width:800px){ .protocol-in{grid-template-columns:1fr; gap:32px;} .mark-lg{max-width:200px;} }

  /* registry live embed */
  .registry-live{background:var(--paper);}
  .embed-frame{border:1px solid var(--line); background:var(--card); box-shadow:0 18px 50px rgba(11,31,42,.08);}
  .embed-frame iframe{width:100%; height:600px; border:0; display:block;}
  .embed-note{font-size:14.5px; color:var(--muted); margin-top:14px;}
  .embed-note a{color:var(--teal); border-bottom:1px solid var(--line);}
  @media(max-width:760px){ .embed-frame iframe{height:480px;} }

  /* engine / water credits */
  .engine .sec-head{margin-bottom:36px;}
  .flow{display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin:8px 0 40px; border:1px solid var(--line); background:var(--card);}
  .fstep{padding:22px 18px; position:relative;}
  .fstep + .fstep{border-left:1px solid var(--line);}
  .fstep .n{font-family:"IBM Plex Mono"; font-size:11px; color:var(--teal); letter-spacing:.1em;}
  .fstep .t{font-family:"Spectral"; font-size:18px; line-height:1.25; margin-top:9px; color:var(--ink);}
  .fstep .d{font-size:13px; color:var(--muted); margin-top:7px; line-height:1.45;}
  .targets{display:flex; gap:20px; flex-wrap:wrap;}
  .target{flex:1; min-width:220px; background:var(--ink); color:#eaf1f0; padding:24px 26px; border-radius:3px;}
  .target .big{font-family:"IBM Plex Mono"; font-weight:600; font-size:42px; color:var(--brass-2); line-height:1;}
  .target .lbl{font-size:14px; color:#AEC4C8; margin-top:10px;}
  .target .src{font-family:"IBM Plex Mono"; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--teal-2); margin-top:14px;}
  @media(max-width:760px){ .flow{grid-template-columns:1fr;} .fstep+.fstep{border-left:none; border-top:1px solid var(--line);} }

  /* take part */
  .part{background:var(--card); border-top:1px solid var(--line);}
  .seats{display:flex; gap:10px; flex-wrap:wrap; margin:2px 0 34px;}
  .seat{font-family:"IBM Plex Mono"; font-size:13px; letter-spacing:.04em; border:1px solid var(--line); background:var(--paper); color:var(--ink-2); padding:9px 16px; border-radius:2px;}
  .part-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:start;}
  .steps{list-style:none; margin:0; padding:0; counter-reset:s;}
  .steps li{counter-increment:s; padding:16px 0 16px 46px; position:relative; border-top:1px solid var(--line); color:var(--muted); font-size:16px;}
  .steps li:first-child{border-top:none;}
  .steps li:before{content:counter(s); position:absolute; left:0; top:15px; width:28px; height:28px; border-radius:50%; background:var(--ink); color:var(--brass-2); font-family:"IBM Plex Mono"; font-size:13px; display:flex; align-items:center; justify-content:center;}
  .steps li b{color:var(--ink); font-weight:600; font-family:"Spectral"; font-size:18px; display:block; margin-bottom:2px;}
  @media(max-width:800px){ .part-grid{grid-template-columns:1fr; gap:32px;} }

  /* register CTA */
  .cta{background:var(--ink); color:#EAF1F0; text-align:center;}
  .cta h2{font-size:clamp(32px,4.4vw,52px); line-height:1.05; color:#F5F2EA; max-width:760px; margin:0 auto;}
  .cta p{color:#B7CBCE; font-size:19px; max-width:560px; margin:22px auto 34px;}

  /* governance / footer */
  .gov{background:var(--paper);}
  .gov-in{display:grid; grid-template-columns:1fr 1fr 1fr; gap:40px;}
  .gov h4{font-family:"IBM Plex Mono"; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--teal); margin:0 0 12px;}
  .gov p{margin:0; font-size:15px; color:var(--muted);}
  .gov b{color:var(--ink); font-weight:600;}
  @media(max-width:760px){ .gov-in{grid-template-columns:1fr; gap:26px;} }
  footer{background:var(--card); color:var(--muted); padding:30px 0; border-top:1px solid var(--line);}
  .foot-in{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; font-size:13px;}
  .foot-infra a{color:var(--ink); border-bottom:1px solid var(--line);}
  .foot-infra a:hover{color:var(--teal);}

  /* ---------------- modal ---------------- */
  .overlay{position:fixed; inset:0; background:rgba(6,16,22,.72); backdrop-filter:blur(3px); display:none; align-items:center; justify-content:center; z-index:100; padding:20px;}
  .overlay.open{display:flex;}
  .modal{background:var(--paper); width:100%; max-width:520px; border-radius:5px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.5); max-height:92vh; overflow-y:auto;}
  .modal-top{background:var(--ink); color:#F1EFE7; padding:24px 28px; position:relative;}
  .modal-top .eyebrow{color:var(--brass-2);}
  .modal-top h3{font-size:26px; margin:8px 0 4px; color:#F5F2EA; font-weight:500;}
  .modal-top p{margin:0; font-size:14px; color:#AEC4C8;}
  .close{position:absolute; top:16px; right:18px; background:none; border:none; color:#9FB6BE; font-size:24px; cursor:pointer; line-height:1;}
  .close:hover{color:#fff;}
  .form{padding:24px 28px 28px;}
  .field{margin-bottom:16px;}
  .field label{display:block; font-size:13px; font-weight:500; color:var(--ink-2); margin-bottom:6px;}
  .field input,.field select{width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:3px; background:#fff; font-family:inherit; font-size:15px; color:var(--ink);}
  .field input:focus,.field select:focus{outline:2px solid var(--teal); outline-offset:0; border-color:var(--teal);}
  .field.invalid input,.field.invalid select{border-color:var(--err);}
  .field .ferr{display:none; font-size:12.5px; color:var(--err); margin-top:5px;}
  .field.invalid .ferr{display:block;}
  .hp{position:absolute; left:-9999px; top:-9999px; height:0; overflow:hidden;}
  .form-error{display:none; background:#F7E8E2; border:1px solid #D9B3A5; color:var(--err); font-size:14px; padding:11px 13px; border-radius:3px; margin-bottom:16px;}
  .form-error.show{display:block;}
  .form .btn-brass{width:100%; padding:14px; font-size:16px; margin-top:6px;}
  .form small{display:block; text-align:center; color:var(--muted); font-size:12.5px; margin-top:14px;}
  .success{padding:44px 34px; text-align:center; display:none;}
  .success.show{display:block;}
  .success .tick{width:56px; height:56px; margin:0 auto 18px; border-radius:50%; background:var(--teal); display:flex; align-items:center; justify-content:center; color:#fff; font-size:28px;}
  .success h3{font-size:26px; margin:0 0 10px; color:var(--ink);}
  .success p{color:var(--muted); font-size:15.5px; margin:0 0 6px;}

  .reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease;}
  .reveal.in{opacity:1; transform:none;}
  .no-js .reveal{opacity:1; transform:none;}
  @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} .reveal{opacity:1; transform:none; transition:none;} }
  :focus-visible{outline:2px solid var(--teal); outline-offset:2px;}

  /* ---------------- document pages (privacy, terms, protocol) ---------------- */
  .doc{padding:72px 0 96px; background:var(--paper);}
  .doc-in{max-width:760px;}
  .doc-title{font-size:clamp(30px,4vw,44px); line-height:1.1; margin:14px 0 0; color:var(--ink);}
  .doc-meta{font-size:14px; color:var(--muted); border-left:3px solid var(--brass); padding-left:12px; margin:22px 0 34px; line-height:1.55;}
  .doc h2{font-size:23px; margin:36px 0 10px; font-weight:500;}
  .doc p,.doc li{color:#3a4d4e; font-size:16.5px;}
  .doc ol{padding-left:22px;} .doc li{margin-bottom:10px;}
  .doc a{color:var(--teal); border-bottom:1px solid var(--line);}
  .doc pre{background:var(--ink); color:#DDE8EB; padding:20px 22px; border-radius:3px; overflow-x:auto; font-family:"IBM Plex Mono",monospace; font-size:13px; line-height:1.55; margin:18px 0;}
  .doc table{width:100%; border-collapse:collapse; font-size:15px; margin:14px 0 18px;}
  .doc th,.doc td{text-align:left; padding:9px 10px; border-top:1px solid var(--line); vertical-align:top;}
  .doc th{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); border-top:none;}
  .doc .ladder{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin:18px 0;}
  .doc .rung{background:var(--card); padding:18px;}
  .rung .n{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--teal); letter-spacing:.1em;}
  .rung .t{font-family:"Spectral",Georgia,serif; font-size:19px; margin-top:6px; color:var(--ink);}
  .rung .d{font-size:13.5px; color:var(--muted); margin-top:6px; line-height:1.45;}
  @media(max-width:760px){ .doc .ladder{grid-template-columns:1fr 1fr;} }
  .form small a{color:var(--teal); border-bottom:1px solid var(--line);}

  /* ---------------- registry basin switcher ---------------- */
  .basin-tabs{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 14px;}
  .basin-tab{font-family:"IBM Plex Mono",monospace; font-size:12.5px; letter-spacing:.04em; padding:9px 14px; border:1px solid var(--line); background:var(--card); color:var(--ink-2); border-radius:2px; cursor:pointer; transition:.15s;}
  .basin-tab:hover{border-color:var(--teal);}
  .basin-tab.is-active{background:var(--ink); color:#F5F2EA; border-color:var(--ink);}
  .embed-caption{display:none; font-size:14.5px; color:var(--muted); margin:12px 0 0; max-width:760px; line-height:1.55;}
  .embed-caption.is-active{display:block;}