/*
Theme Name: NexaFlex
Theme URI: https://nexaflex.ae
Author: Ideacrate IT
Description: Specification-led B2B theme for NexaFlex flexible packaging. Converted from the single-file engineered prototype.
Version: 0.2.0
Requires at least: 6.4
Requires PHP: 8.1
License: Proprietary
Text Domain: nexaflex
*/

:root{
    --yellow:#FFD100; --black:#1D1D1D; --white:#FFFFFF;
    --ink-70:rgba(29,29,29,.72); --ink-55:rgba(29,29,29,.55);
    --ink-16:rgba(29,29,29,.16); --ink-08:rgba(29,29,29,.06);
    --card:#FAFAF8; --tint:#FFFBEB;
    --font:'Montserrat','Gotham',Arial,sans-serif; --mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}
  body{font-family:var(--font);color:var(--black);background:var(--white);line-height:1.55;-webkit-font-smoothing:antialiased}
  img{display:block;max-width:100%}
  .wrap{max-width:1240px;margin:0 auto;padding:0 32px}
  .mono{font-family:var(--mono)}
  .dots{background-image:radial-gradient(rgba(255,209,0,.7) 1.3px,transparent 1.3px);background-size:14px 14px}

  /* utility bar */
  .util{background:var(--black);color:rgba(255,255,255,.7);font-size:11.5px;font-family:var(--mono)}
  .util .wrap{display:flex;justify-content:space-between;gap:16px;padding:7px 32px}
  .util b{color:var(--yellow);font-weight:600}
  @media(max-width:760px){.util .hide-m{display:none}}

  /* ---- title-block header ---- */
  header.tb{background:var(--white);border-bottom:2px solid var(--black);position:sticky;top:0;z-index:100}
  .tb-row{display:flex;align-items:stretch}
  .logo{background:var(--yellow);padding:11px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;text-decoration:none;flex-shrink:0;border:none;cursor:pointer}
  .logo b{font-weight:800;font-style:italic;font-size:19px;letter-spacing:-.5px;color:var(--black)}
  .logo span{font-size:6px;font-weight:700;letter-spacing:1.4px;margin-top:3px;color:var(--black)}
  .tb-meta{border-left:1px solid var(--ink-16);padding:8px 16px;display:flex;flex-direction:column;justify-content:center}
  .tb-meta .k{font-family:var(--mono);font-size:8.5px;letter-spacing:1.3px;text-transform:uppercase;color:var(--ink-55)}
  .tb-meta .v{font-size:12px;font-weight:700;white-space:nowrap}
  nav{display:flex;margin-left:auto;align-items:stretch;flex-wrap:wrap}
  nav button{display:flex;align-items:center;gap:6px;background:none;border:none;border-left:1px solid var(--ink-16);font-family:var(--font);cursor:pointer;font-size:12px;font-weight:600;color:var(--black);padding:0 12px;transition:background .12s}
  nav button i{font-family:var(--mono);font-style:normal;font-size:9px;color:var(--ink-55)}
  nav button:hover,nav button.active{background:var(--tint)}
  nav button.active i{color:var(--black)}
  .cta{display:flex;align-items:center;background:var(--yellow);color:var(--black);border:none;border-left:2px solid var(--black);font-family:var(--font);cursor:pointer;font-weight:700;font-size:12.5px;padding:0 18px;flex-shrink:0}
  .cta:hover{background:#EFC400}
  @media(max-width:1180px){.tb-meta.hide-s{display:none}}
  @media(max-width:1080px){nav{display:none}}

  /* page system */
  .page{display:none}
  .page.active{display:block;animation:fade .3s ease}
  @keyframes fade{from{opacity:0}to{opacity:1}}

  /* sections & type */
  section{padding:78px 0;border-bottom:1px solid var(--ink-16)}
  .kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--ink-55);margin-bottom:16px}
  .kicker::before{content:'';width:26px;height:3px;background:var(--yellow)}
  h1{font-size:clamp(32px,4.3vw,54px);font-weight:800;line-height:1.04;letter-spacing:-1.1px}
  h1 .hl{background:linear-gradient(transparent 62%,var(--yellow) 62%)}
  h2{font-size:clamp(25px,3vw,37px);font-weight:800;letter-spacing:-.7px;line-height:1.12;max-width:26ch}
  h2::after{content:'';display:block;width:44px;height:4px;background:var(--yellow);margin-top:12px}
  h3{font-size:19px;font-weight:700}
  .sub{margin-top:14px;font-size:16px;color:var(--ink-70);max-width:66ch}
  .lead{font-size:17px;color:var(--ink-70);max-width:68ch}
  p{margin-top:14px;font-size:15px;color:var(--ink-70);max-width:72ch}
  .pagehead{padding:60px 0 0}

  /* buttons */
  .btn-y{background:var(--yellow);color:var(--black);border:2px solid var(--black);font-family:var(--font);cursor:pointer;font-weight:700;font-size:14.5px;text-decoration:none;padding:13px 24px;display:inline-block;box-shadow:4px 4px 0 var(--black);transition:transform .1s,box-shadow .1s}
  .btn-y:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--black)}
  .btn-o{border:2px solid var(--black);color:var(--black);background:none;font-family:var(--font);cursor:pointer;font-weight:600;font-size:14.5px;text-decoration:none;padding:13px 22px;display:inline-block}
  .btn-o:hover{background:var(--ink-08)}
  .link{font-weight:700;font-size:13.5px;color:var(--black);background:none;border:none;border-bottom:2px solid var(--yellow);padding:0 0 3px;cursor:pointer;font-family:var(--font);text-decoration:none;display:inline-block}

  /* hero — bordered figure with FIG framing */
  .hero .wrap{display:grid;grid-template-columns:.92fr 1.08fr;gap:52px;align-items:center;padding-top:72px;padding-bottom:72px}
  .hero .kicker{font-size:11px}
  .hero p{margin-top:18px;font-size:17px;max-width:46ch;color:var(--ink-70)}
  .ctarow{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
  .hfig{position:relative;border:2px solid var(--black)}
  .hfig img{width:100%;height:470px;object-fit:cover;object-position:center 62%}
  .cap{position:absolute;left:0;bottom:0;background:var(--black);color:var(--white);font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:1px;text-transform:uppercase;padding:7px 12px}
  .cap::before{content:'FIG · ';color:var(--yellow)}
  @media(max-width:960px){.hero .wrap{grid-template-columns:1fr}.hfig img{height:340px}}

  /* proof strip — spec-sheet cells */
  .proof{border-top:2px solid var(--black);border-bottom:2px solid var(--black);background:var(--card)}
  .proof .wrap{display:grid;grid-template-columns:repeat(5,1fr);padding:0 32px}
  .stat{padding:28px 20px;border-left:1px solid var(--ink-16)}
  .stat:first-child{border-left:none}
  .stat b{display:block;font-size:28px;font-weight:800;letter-spacing:-.5px}
  .stat b::after{content:'';display:block;width:22px;height:3px;background:var(--yellow);margin-top:7px}
  .stat span{font-size:12px;color:var(--ink-70);line-height:1.45;display:block;margin-top:9px}
  @media(max-width:960px){.proof .wrap{grid-template-columns:repeat(2,1fr)}.stat{border-left:none;border-top:1px solid var(--ink-16)}}

  /* grids */
  .g2{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
  .g2.top{align-items:start}
  @media(max-width:960px){.g2{grid-template-columns:1fr}}
  .figure{position:relative;border:2px solid var(--black)}
  .figure img{width:100%;height:100%;object-fit:cover;min-height:440px}
  .fframe{position:relative}
  @media(max-width:960px){.figure img{min-height:320px}}

  /* cards — bordered, hard shadow on hover, mono spec */
  .cards{display:grid;gap:0;border:2px solid var(--black)}
  .c4{grid-template-columns:repeat(4,1fr)} .c3{grid-template-columns:repeat(3,1fr)} .c2{grid-template-columns:repeat(2,1fr)}
  .card{border-right:1px solid var(--ink-16);border-bottom:1px solid var(--ink-16);padding:22px 18px 16px;display:flex;flex-direction:column;gap:7px;position:relative;background:var(--white);text-align:left;cursor:pointer;font-family:var(--font);border-top:none;border-left:none;transition:background .12s}
  .card:hover{background:var(--tint)}
  .card h3{font-size:15px;font-weight:700}
  .card p{font-size:12.5px;margin-top:2px}
  .card .spec{margin-top:auto;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.3px;color:var(--ink-55);text-transform:uppercase;padding-top:10px}
  .c4 .card:nth-child(4n){border-right:none} .c3 .card:nth-child(3n){border-right:none} .c2 .card:nth-child(2n){border-right:none}
  @media(max-width:960px){.c4,.c3{grid-template-columns:repeat(2,1fr)}.card{border-right:none!important}}
  @media(max-width:560px){.cards{grid-template-columns:1fr!important}}

  /* spec-sheet table */
  .dt{width:100%;border:2px solid var(--black);border-collapse:collapse;margin-top:10px}
  .dt th{font-family:var(--mono);font-size:10px;letter-spacing:1.2px;text-transform:uppercase;text-align:left;background:var(--black);color:#fff;padding:11px 14px;font-weight:600}
  .dt td{padding:12px 14px;border-top:1px solid var(--ink-16);border-left:1px solid var(--ink-16);font-size:13.5px;vertical-align:top}
  .dt td:first-child{border-left:none;font-weight:700}
  .dt tbody tr:nth-child(even){background:var(--card)}
  .dt .mono{font-family:var(--mono);font-size:12px;color:var(--ink-70)}

  /* chain list */
  .chain{list-style:none;margin-top:6px;border:2px solid var(--black)}
  .chain li{display:grid;grid-template-columns:64px 1fr;gap:0;border-top:1px solid var(--ink-16);align-items:stretch}
  .chain li:first-child{border-top:none}
  .chain .n{font-family:var(--mono);font-weight:600;font-size:13px;color:var(--ink-55);background:var(--card);display:flex;align-items:center;justify-content:center;border-right:1px solid var(--ink-16)}
  .chain .n::after{display:none}
  .chain div{padding:14px 16px}
  .chain b{font-size:14.5px;font-weight:700;display:block}
  .chain span{font-size:13px;color:var(--ink-70)}

  /* quote / callout */
  .quote{margin-top:24px;border-left:4px solid var(--yellow);padding:6px 0 6px 20px;font-size:17px;font-weight:700;max-width:52ch}
  .callout{background:var(--card);border:2px solid var(--black);padding:20px 22px;margin-top:22px}
  .callout.dark{background:var(--black);color:#fff;border:none}
  .callout.dark b{color:var(--yellow)}
  .tintbox{background:var(--tint);border:2px solid var(--black);padding:20px 22px;margin-top:22px;box-shadow:4px 4px 0 var(--black)}

  /* points */
  .points{list-style:none;margin-top:16px}
  .points li{padding:10px 0 10px 26px;position:relative;font-size:14.5px;color:var(--ink-70);max-width:66ch}
  .points li b{color:var(--black)}
  .points li::before{content:'';position:absolute;left:0;top:17px;width:12px;height:3px;background:var(--yellow)}

  /* certs — stamps */
  .certs{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
  .cert{border:2px solid var(--black);padding:10px 16px;font-size:13px;font-weight:800;letter-spacing:.6px}
  .cert small{display:block;font-family:var(--mono);font-size:9px;font-weight:400;letter-spacing:.4px;color:var(--ink-55);margin-top:4px;text-transform:uppercase}

  /* golden thread */
  .thread{display:flex;align-items:stretch;gap:0;margin-top:24px;flex-wrap:wrap;border:2px solid var(--black)}
  .thread .step{flex:1;min-width:120px;padding:16px 14px;border-right:1px solid var(--ink-16);position:relative}
  .thread .step:last-child{border-right:none}
  .thread .step b{font-size:13px;font-weight:800;display:block}
  .thread .step .code{font-family:var(--mono);font-size:9.5px;color:var(--ink-55);margin-top:4px}
  .thread .step .arrow{position:absolute;right:-9px;top:50%;transform:translateY(-50%);z-index:2;background:var(--yellow);width:16px;height:16px;border-radius:50%;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--black)}
  .thread .step:last-child .arrow{display:none}

  /* form */
  .form{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
  .form .full{grid-column:1/-1}
  .form label{display:block;font-family:var(--mono);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--ink-55);margin-bottom:6px}
  .form input,.form select,.form textarea{width:100%;border:2px solid var(--ink-16);padding:11px 13px;font-family:var(--font);font-size:14px;background:var(--white)}
  .form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--black)}
  .form .help{font-size:11.5px;color:var(--ink-55);margin-top:5px;font-family:var(--mono)}
  @media(max-width:640px){.form{grid-template-columns:1fr}}

  /* insight rows */
  .insight{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;background:var(--white);border:2px solid var(--black);padding:22px 24px;margin-top:16px;cursor:pointer;text-align:left;font-family:var(--font);width:100%;transition:background .12s}
  .insight:hover{background:var(--tint)}
  .insight .tag{background:var(--yellow);border:1.5px solid var(--black);font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:1px;padding:6px 10px;text-transform:uppercase;white-space:nowrap}
  .insight h3{font-size:17px;font-weight:700;line-height:1.3}
  .insight p{font-size:13px;margin-top:4px}
  .insight .arrow{font-size:22px;font-weight:800}
  @media(max-width:700px){.insight{grid-template-columns:1fr}}

  /* seal + footer */
  .seal{background:var(--yellow);position:relative;overflow:hidden;border-bottom:none;border-top:2px solid var(--black)}
  .seal .db{position:absolute;left:0;top:0;bottom:0;width:240px;background-image:radial-gradient(rgba(29,29,29,.35) 1.4px,transparent 1.4px);background-size:15px 15px;opacity:.5}
  .seal .wrap{position:relative;display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center;padding:70px 32px}
  .seal h2{max-width:none}.seal h2::after{background:var(--black)}
  .seal p{color:rgba(29,29,29,.78);max-width:52ch}
  .seal .btn-b{background:var(--black);color:#fff;font-weight:700;font-size:16px;border:none;cursor:pointer;font-family:var(--font);padding:17px 30px;display:inline-block;box-shadow:5px 5px 0 rgba(29,29,29,.35)}
  .seal .btn-b:hover{transform:translate(-1px,-1px)}
  .seal .promise{margin-top:14px;font-size:12.5px;font-weight:600;color:rgba(29,29,29,.78);font-family:var(--mono)}
  .seal .right{text-align:right}
  @media(max-width:860px){.seal .wrap{grid-template-columns:1fr}.seal .right{text-align:left}}
  footer{background:var(--black);color:rgba(255,255,255,.72);font-size:13px}
  .ft{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;padding:58px 32px 42px}
  .ft h4{color:#fff;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:1.3px;text-transform:uppercase;margin-bottom:15px}
  .ft ul{list-style:none}.ft li{margin-bottom:9px}
  .ft button{background:none;border:none;color:inherit;font-family:var(--font);font-size:13px;cursor:pointer;text-align:left;padding:0}
  .ft button:hover{color:var(--yellow)}
  .ft .about p{margin-top:15px;max-width:34ch;line-height:1.6;color:rgba(255,255,255,.72)}
  .ftbase{border-top:1px solid rgba(255,255,255,.14)}
  .ftbase .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 32px;font-family:var(--mono);font-size:10.5px;letter-spacing:.4px;color:rgba(255,255,255,.5)}
  .ftbase b{color:var(--yellow);font-weight:600}
  @media(max-width:900px){.ft{grid-template-columns:1fr 1fr}}

  /* media placeholders */
  .mph{position:relative;background:repeating-linear-gradient(45deg,#F2F2EE,#F2F2EE 12px,#ECECE7 12px,#ECECE7 24px);border:2px dashed var(--ink-55);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:26px 22px;min-height:200px;color:var(--black)}
  .mph .mtype{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;background:var(--black);color:#fff;padding:5px 12px;margin-bottom:12px}
  .mph .mtype.video{background:#B8860B}.mph .mtype.graphic{background:#3A6B4F}
  .mph .mtitle{font-size:15px;font-weight:800;max-width:44ch}
  .mph .mspec{font-size:12px;color:var(--ink-70);margin-top:8px;max-width:52ch;line-height:1.5}
  .mph .mref{position:absolute;top:10px;right:12px;font-family:var(--mono);font-size:10px;color:var(--ink-55)}
  .mph.tall{min-height:340px}.mph.hero-ph{min-height:470px}
  @media(max-width:960px){.mph.hero-ph{min-height:340px}}
  .val{background:var(--tint);border:1px solid var(--yellow);padding:1px 6px;font-size:11px;font-family:var(--mono);white-space:nowrap}

  /* modal */
  .modal-bg{position:fixed;inset:0;background:rgba(29,29,29,.6);z-index:500;display:none;align-items:center;justify-content:center;padding:24px}
  .modal-bg.open{display:flex}
  .modal{background:#fff;max-width:520px;width:100%;padding:32px;position:relative;border:2px solid var(--black);box-shadow:8px 8px 0 var(--yellow)}
  .modal h3{font-size:21px;font-weight:800}.modal p{margin-top:8px;font-size:14px}
  .modal .x{position:absolute;top:12px;right:14px;background:none;border:none;font-size:24px;cursor:pointer;color:var(--ink-55);font-family:var(--font)}
  .modal .fields{margin-top:18px;display:grid;gap:12px}
  .modal input{width:100%;border:2px solid var(--ink-16);padding:12px 14px;font-family:var(--font);font-size:14px}
  .modal input:focus{outline:none;border-color:var(--black)}
  .modal .btn-y{width:100%;text-align:center;margin-top:4px}
  .modal .fine{font-size:11px;color:var(--ink-55);margin-top:12px;font-family:var(--mono)}

  /* CTA ladder */
  .ladder{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
  .ladder .rung{border:2px solid var(--black);padding:10px 15px;font-size:13px;font-weight:600;background:#fff;cursor:pointer;font-family:var(--font);display:inline-flex;align-items:center;gap:8px}
  .ladder .rung:hover{background:var(--tint)}
  .ladder .rung .ic{font-family:var(--mono);font-size:11px;color:var(--ink-55)}

  /* steps */
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:2px solid var(--black);margin-top:24px}
  .steps .step{padding:20px 18px;border-right:1px solid var(--ink-16);position:relative}
  .steps .step:last-child{border-right:none}
  .steps .step .num{font-family:var(--mono);font-size:10.5px;font-weight:600;color:var(--ink-55)}
  .steps .step b{display:block;font-size:15px;font-weight:800;margin-top:6px}
  .steps .step p{font-size:12.5px;margin-top:6px}
  @media(max-width:700px){.steps{grid-template-columns:1fr}.steps .step{border-right:none;border-bottom:1px solid var(--ink-16)}}

  /* social proof */
  .sectors{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
  .sectors span{border:2px solid var(--black);padding:8px 14px;font-size:13px;font-weight:600;color:var(--black)}
  .metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
  .metric{background:var(--card);border:2px solid var(--black);padding:22px}
  .metric b{display:block;font-size:30px;font-weight:800;letter-spacing:-.5px}
  .metric b::after{content:'';display:block;width:24px;height:3px;background:var(--yellow);margin-top:7px}
  .metric span{font-size:12.5px;color:var(--ink-70);display:block;margin-top:9px}
  @media(max-width:700px){.metrics{grid-template-columns:1fr}}

  /* key facts */
  .keyfacts{background:var(--tint);border:2px solid var(--black);padding:20px 22px;margin-top:26px;box-shadow:4px 4px 0 var(--black)}
  .keyfacts .kh{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink-55)}
  .keyfacts ul{list-style:none;margin-top:10px}
  .keyfacts li{font-size:14px;padding:5px 0 5px 22px;position:relative;color:var(--black);max-width:76ch}
  .keyfacts li::before{content:'\2713';position:absolute;left:0;color:#3A6B4F;font-weight:800}

  /* faq */
  .faq{border-top:2px solid var(--black);margin-top:28px}
  .faq details{border-bottom:1px solid var(--ink-16)}
  .faq summary{cursor:pointer;list-style:none;padding:18px 2px;font-size:16px;font-weight:700;display:flex;justify-content:space-between;gap:16px;align-items:center}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:'+';font-family:var(--mono);font-size:20px;color:var(--ink-55)}
  .faq details[open] summary::after{content:'\2013'}
  .faq details p{padding:0 2px 20px;margin-top:0;max-width:78ch}

  .note-banner{background:#111;color:#eee;font-family:var(--mono);font-size:11px;letter-spacing:.4px;text-align:center;padding:7px 16px}
  .note-banner b{color:var(--yellow)}

  .logo.logo-img{background:none;padding:0;display:inline-flex;align-items:center;border:none}
  .logo.logo-img img{height:42px;width:auto;display:block}
  footer .logo.logo-img img{height:40px}
  @media(max-width:600px){.logo.logo-img img{height:34px}}

/* ---------------------------------------------------------
   Auto-generated: every prototype rule targeting <button>,
   mirrored onto <a>. The SPA's buttons became real links, and
   these are copied from the source rules rather than retyped so
   they cannot drift from the design.
   --------------------------------------------------------- */
nav a{display:flex;align-items:center;gap:6px;background:none;border:none;border-left:1px solid var(--ink-16);font-family:var(--font);cursor:pointer;font-size:12px;font-weight:600;color:var(--black);padding:0 12px;transition:background .12s;text-decoration:none}
nav a i{font-family:var(--mono);font-style:normal;font-size:9px;color:var(--ink-55);text-decoration:none}
nav a:hover,nav a.active{background:var(--tint);text-decoration:none}
nav a.active i{color:var(--black);text-decoration:none}
.ft a{background:none;border:none;color:inherit;font-family:var(--font);font-size:13px;cursor:pointer;text-align:left;padding:0;text-decoration:none}
.ft a:hover{color:var(--yellow);text-decoration:none}


/* ---------------------------------------------------------------------------
   WordPress compatibility.

   Appended to style.css by tools/extract_assets.py, so re-extracting from the
   prototype never loses it. Everything above this line in style.css is the
   prototype's CSS unchanged, plus auto-generated button -> a mirrors.

   RULE: never redefine a selector the prototype already defines. Doing so
   silently changed the design twice — the nav was retyped with the wrong
   font-weight and an invented uppercase transform, and `.val` was recoloured
   from tint/yellow to yellow/black across 21 pending tags. extract_assets.py
   now fails the build if a selector here collides with a prototype selector.

   Only genuinely NEW things belong below: WordPress plumbing, and styling for
   markup that did not exist in the prototype.
   --------------------------------------------------------------------------- */

/* The prototype hid every page with `.page{display:none}` and revealed one at a
   time via `.page.active` — that pair WAS the single-file router. In WordPress
   each page is its own document, so the rule hides all content on every page.
   Header and footer sit outside .page, which makes it look like a blank page
   rather than a CSS problem. The fade keyframe still exists, so it is kept. */
.page{display:block;animation:fade .3s ease}

/* A <button> has no underline and no link colour; an <a> has both. The
   prototype's button rules are mirrored onto `a` automatically, but they cannot
   express this default. :where() keeps specificity at zero so every class rule
   in the stylesheet still wins over it. */
:where(a){color:inherit;text-decoration:none}

/* Accessibility helper WordPress themes are expected to provide; the prototype
   had no skip link or visually-hidden text. */
.screen-reader-text{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}
.screen-reader-text:focus{background:var(--yellow);clip-path:none;color:var(--black);display:block;font-size:14px;font-weight:700;height:auto;left:8px;line-height:normal;padding:14px 20px;text-decoration:none;top:8px;width:auto;z-index:100000}

/* Enquiry form. The prototype's form was decorative markup with no states, so
   all of this is new. */
.nexaflex-form-status{margin-top:12px;font-size:14px;font-weight:600}
.nexaflex-form-status.is-ok{padding:14px 16px;background:var(--yellow);border:2px solid var(--black)}
.nexaflex-form-status.is-error{padding:14px 16px;background:#fff;border:2px solid #b32d2e;color:#b32d2e}
.nexaflex-form label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-70);margin-bottom:5px}
.nexaflex-form p{margin:0 0 14px}
.nexaflex-form select.ei{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--black) 50%),linear-gradient(135deg,var(--black) 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}

/* The modal is hidden with the hidden attribute as well as the class, so that
   it is inert before JavaScript runs. */
.modal-bg[hidden]{display:none}

/* Classes the block editor can emit if someone adds a new page in wp-admin.
   None of these appear in the imported content. */
.alignleft{float:left;margin:0 20px 20px 0}
.alignright{float:right;margin:0 0 20px 20px}
.aligncenter{margin-left:auto;margin-right:auto;display:block}
.wp-caption{max-width:100%}
.wp-caption-text{font-size:13px;color:var(--ink-70);margin-top:8px}

/* Pagination on the Applications and Knowledge archives — pages the prototype
   did not have. */
.nav-links{display:flex;gap:10px;margin:40px 0}
.nav-links .page-numbers{padding:8px 14px;border:1.5px solid var(--ink-16);font-family:var(--mono);font-size:12px;text-decoration:none;color:var(--ink-70)}
.nav-links .page-numbers.current{background:var(--black);color:#fff;border-color:var(--black)}

/* A <button> inherits nothing for font-size, line-height or colour: the UA
   stylesheet sets them ON the element (font:400 13.3333px Arial;
   line-height:normal; color:buttontext). An <a> has no such defaults, so text
   inside a converted link inherits from body instead — measured on the home
   page as .card rendering 143px tall against the prototype's 128px, a 12%
   difference, with headings shifting from #000 to #1D1D1D.

   The prototype's own button rules are mirrored onto `a` automatically, but a
   stylesheet cannot mirror what the UA supplies. These are those defaults,
   restored only on links that replaced a button, at :where() specificity 0 so
   every real rule in the prototype still overrides them — which is exactly how
   the UA defaults behaved. */
:where(a[data-spa-link]){font-size:13.3333px;line-height:normal;color:buttontext;text-align:center}

/* The economics calculator's input tables. Three columns of number inputs do
   not fit a 390px phone: the widest pushed the whole page to 543px, wider than
   the prototype's own 462px. The table scrolls inside its own box instead, so
   the page itself never scrolls sideways. New markup, so no prototype selector
   is touched. */
.nexaflex-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.nexaflex-scroll>.dt{min-width:420px}

/* A grid item defaults to min-width:auto, which means "never shrink below your
   content". So the column grew to fit the widest table and the .nexaflex-scroll
   wrapper above never got the chance to scroll — the page went to 543px on a
   390px screen with the wrapper sitting there doing nothing. min-width:0 lets
   the column shrink and hands the overflow to the wrapper, which is the whole
   point of it. */
[data-nexaflex-econ] > div{min-width:0}