/* Portfolio Financial Services — shared stylesheet */
  /* =========================================================
     ERA FINANCIAL SERVICES
     Editorial / Premium / Restrained — Dark Mode
     ========================================================= */

  *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

  :root{
    --black:#000000;
    --char:#0a0a0a;
    --char-2:#111111;
    --char-3:#161616;
    --line:rgba(255,255,255,0.10);
    --line-soft:rgba(255,255,255,0.06);
    --line-strong:rgba(255,255,255,0.20);
    --text:#F3F4F6;
    --text-2:#D1D5DB;
    --text-mute:#9CA3AF;
    --text-faint:#6B7280;
    --accent:#C9A961;
    --accent-cool:#8FA3B3;
    --silver:#E5E7EB;
    --max-w:1280px;
    --gap:32px;
    --pad-section:120px;
    --pad-section-sm:80px;
    --tr:cubic-bezier(.4,0,.2,1);
  }

  body{
    font-family:'Inter','Helvetica Neue','Arial',-apple-system,BlinkMacSystemFont,sans-serif;
    background:var(--black);
    color:var(--text);
    font-size:16px;
    line-height:1.6;
    font-weight:400;
    overflow-x:hidden;
    min-height:100vh;
  }

  a{color:inherit;text-decoration:none}
  button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
  img,svg{display:block;max-width:100%}
  ::selection{background:rgba(201,169,97,0.3);color:#fff}

  /* ============ TYPOGRAPHY ============ */
  h1,h2,h3,h4,h5{
    font-weight:500;
    letter-spacing:-0.03em;
    line-height:1.05;
    color:var(--text);
  }
  h1{font-size:clamp(2.75rem, 6.4vw, 5.5rem);letter-spacing:-0.045em;font-weight:400}
  h2{font-size:clamp(2rem, 4vw, 3.25rem);letter-spacing:-0.035em;font-weight:400}
  h3{font-size:clamp(1.25rem, 1.6vw, 1.5rem);letter-spacing:-0.02em;font-weight:500}
  h4{font-size:1.05rem;font-weight:500;letter-spacing:-0.01em}

  .eyebrow{
    font-family:'JetBrains Mono', ui-monospace, monospace;
    font-size:0.7rem;
    font-weight:400;
    text-transform:uppercase;
    letter-spacing:0.28em;
    color:var(--text-mute);
    display:inline-block;
  }
  .eyebrow-num{
    font-family:'JetBrains Mono', ui-monospace, monospace;
    font-size:0.68rem;
    letter-spacing:0.2em;
    color:var(--text-faint);
    text-transform:uppercase;
  }

  p{color:var(--text-2)}
  .muted{color:var(--text-mute)}
  .accent{color:var(--accent)}
  .serif{font-family:'Iowan Old Style','Times New Roman',Georgia,serif;font-style:italic}

  /* ============ LAYOUT ============ */
  .container{
    max-width:var(--max-w);
    margin:0 auto;
    padding:0 40px;
  }
  section{
    padding:var(--pad-section) 0;
    position:relative;
  }
  .divider{
    height:1px;
    background:var(--line);
    width:100%;
    border:none;
  }

  /* ============ NAVBAR ============ */
  .nav{
    position:fixed;
    top:0;left:0;right:0;
    z-index:100;
    background:rgba(0,0,0,0.55);
    backdrop-filter:blur(20px) saturate(140%);
    -webkit-backdrop-filter:blur(20px) saturate(140%);
    border-bottom:1px solid var(--line-soft);
    transition:background .35s var(--tr), border-color .35s var(--tr);
  }
  .nav.scrolled{
    background:rgba(0,0,0,0.85);
    border-bottom-color:var(--line);
  }
  .nav-inner{
    max-width:var(--max-w);
    margin:0 auto;
    padding:20px 40px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:14px;
    cursor:pointer;
  }
  .brand-mark{
    width:32px;height:32px;
    border:1px solid var(--line-strong);
    display:grid;place-items:center;
    color:var(--accent);
    transition:border-color .3s var(--tr), color .3s var(--tr);
  }
  .brand:hover .brand-mark{border-color:var(--accent);color:var(--silver)}
  .brand-mark svg{width:16px;height:16px}
  .brand-text{
    font-size:0.95rem;
    font-weight:500;
    letter-spacing:-0.01em;
    color:var(--text);
    line-height:1.1;
  }
  .brand-text small{
    display:block;
    font-family:'JetBrains Mono', ui-monospace, monospace;
    font-size:0.56rem;
    font-weight:400;
    letter-spacing:0.28em;
    color:var(--text-faint);
    margin-top:3px;
  }

  .nav-links{
    display:flex;
    align-items:center;
    gap:36px;
    list-style:none;
  }
  .nav-links a{
    font-size:0.86rem;
    font-weight:400;
    color:var(--text-mute);
    letter-spacing:0.01em;
    transition:color .3s var(--tr);
    position:relative;
    padding:8px 0;
  }
  .nav-links a:hover{color:var(--text)}
  .nav-links a.active{color:var(--text)}
  .nav-links a.active::after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:0;
    height:1px;
    background:var(--accent);
  }
  .nav-cta{margin-left:8px}
  .mobile-toggle{
    display:none;
    width:42px;height:42px;
    border:1px solid var(--line);
    align-items:center;justify-content:center;
    transition:border-color .3s var(--tr);
  }
  .mobile-toggle:hover{border-color:var(--line-strong)}
  .mobile-toggle svg{width:16px;height:16px}

  /* ============ BUTTONS ============ */
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:16px 28px;
    font-size:0.82rem;
    font-weight:500;
    letter-spacing:0.06em;
    text-transform:uppercase;
    background:transparent;
    border:1px solid var(--line-strong);
    color:var(--text);
    cursor:pointer;
    transition:all .4s var(--tr);
    position:relative;
    overflow:hidden;
  }
  .btn::before{
    content:"";
    position:absolute;inset:0;
    background:var(--text);
    transform:translateY(101%);
    transition:transform .45s var(--tr);
    z-index:0;
  }
  .btn > *{position:relative;z-index:1;transition:color .35s var(--tr)}
  .btn:hover{border-color:var(--text)}
  .btn:hover::before{transform:translateY(0)}
  .btn:hover > *{color:var(--black)}

  .btn-primary{
    border-color:var(--text);
    background:var(--text);
    color:var(--black);
  }
  .btn-primary::before{background:transparent}
  .btn-primary:hover{background:transparent;color:var(--text)}
  .btn-primary:hover > *{color:var(--text)}

  .btn-line{
    border:none;
    border-bottom:1px solid var(--line-strong);
    padding:14px 0;
    text-transform:uppercase;
    font-size:0.78rem;
    letter-spacing:0.18em;
    color:var(--text);
    display:inline-flex;
    align-items:center;
    gap:14px;
    transition:gap .35s var(--tr), border-color .35s var(--tr), color .35s var(--tr);
    background:transparent;
  }
  .btn-line::before{display:none}
  .btn-line:hover{gap:22px;border-color:var(--accent);color:var(--accent)}
  .btn-line > *{position:static;z-index:auto}
  .btn-line:hover > *{color:var(--accent)}

  /* ============ PAGES (ROUTER) ============ */
  .page{
    display:none;
    padding-top:88px;
  }
  .page.active{
    display:block;
    animation:pageIn .6s var(--tr);
  }
  @keyframes pageIn{
    from{opacity:0}
    to{opacity:1}
  }

  /* ============ HERO ============ */
  .hero{
    padding:160px 0 var(--pad-section-sm);
    border-bottom:1px solid var(--line);
  }
  .hero-meta-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-bottom:28px;
    margin-bottom:60px;
    border-bottom:1px solid var(--line);
    flex-wrap:wrap;
    gap:12px;
  }
  .hero-meta-row .left{display:flex;gap:32px;align-items:center;flex-wrap:wrap}
  .hero-meta-row .dot{
    display:inline-block;width:6px;height:6px;border-radius:50%;
    background:var(--accent);margin-right:10px;vertical-align:middle;
  }
  .hero h1{
    max-width:1100px;
    margin-bottom:48px;
  }
  .hero h1 .em{
    font-family:'Iowan Old Style','Times New Roman',Georgia,serif;
    font-style:italic;
    font-weight:400;
    color:var(--accent);
  }
  .hero-bottom{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    padding-top:48px;
    border-top:1px solid var(--line);
    align-items:start;
  }
  .hero-sub{
    font-size:1.15rem;
    line-height:1.55;
    color:var(--text-2);
    max-width:520px;
    font-weight:300;
  }
  .hero-sub strong{
    color:var(--text);
    font-weight:400;
  }
  .hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    justify-content:flex-start;
  }

  /* ============ SECTION HEADERS ============ */
  .section-head{
    display:grid;
    grid-template-columns:1fr 2fr;
    gap:80px;
    margin-bottom:80px;
    padding-bottom:40px;
    border-bottom:1px solid var(--line);
    align-items:end;
  }
  .section-head .left .eyebrow{margin-bottom:0}
  .section-head .right h2{margin-bottom:24px}
  .section-head .right p{
    max-width:560px;
    font-size:1.05rem;
    color:var(--text-2);
    font-weight:300;
  }
  .section-head.single{grid-template-columns:1fr;text-align:left}
  .section-head.single .eyebrow{margin-bottom:24px}

  /* ============ PILLARS (informational, non-interactive) ============ */
  .pillars{
    border-top:1px solid var(--line);
  }
  .pillar{
    display:grid;
    grid-template-columns:80px 1fr 2fr;
    gap:48px;
    align-items:center;
    padding:48px 0;
    border-bottom:1px solid var(--line);
    position:relative;
  }
  .pillar-num{
    font-family:'JetBrains Mono', ui-monospace, monospace;
    font-size:0.78rem;
    color:var(--text-faint);
    letter-spacing:0.12em;
  }
  .pillar p{
    color:var(--text-mute);
    font-size:0.95rem;
    max-width:560px;
  }

  /* ============ ARTICLES (grid) ============ */
  .articles-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .articles-grid > .article:last-child:nth-child(3n+1){grid-column:1 / -1}
  .articles-grid > .article:nth-last-child(2):nth-child(3n+1){grid-column:1 / span 2}

  .article{
    background:var(--black);
    padding:36px 32px;
    display:flex;
    flex-direction:column;
    gap:24px;
    cursor:pointer;
    transition:background .35s var(--tr);
    min-height:380px;
  }
  .article:hover{background:var(--char-2)}
  .article:hover h3{color:var(--accent)}
  .article-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-bottom:24px;
    border-bottom:1px solid var(--line);
  }
  .article-cat{
    font-family:'JetBrains Mono', ui-monospace, monospace;
    font-size:0.66rem;
    text-transform:uppercase;
    letter-spacing:0.18em;
    color:var(--accent);
  }
  .article-date{
    font-family:'JetBrains Mono', ui-monospace, monospace;
    font-size:0.66rem;
    color:var(--text-faint);
    letter-spacing:0.08em;
  }
  .article h3{
    font-size:1.35rem;
    line-height:1.25;
    color:var(--text);
    font-weight:400;
    letter-spacing:-0.015em;
    transition:color .35s var(--tr);
  }
  .article p{
    font-size:0.92rem;
    color:var(--text-mute);
    line-height:1.55;
    flex:1;
  }
  .article-foot{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-top:20px;
    border-top:1px solid var(--line);
    font-family:'JetBrains Mono', ui-monospace, monospace;
    font-size:0.7rem;
    color:var(--text-faint);
    letter-spacing:0.08em;
  }
  .article-foot .read{display:inline-flex;align-items:center;gap:8px}
  .article-foot .read svg{width:11px;height:11px}
  .article-foot .lock{display:inline-flex;align-items:center;gap:8px;color:var(--accent)}
  .article-foot .lock svg{width:11px;height:11px}

  /* ============ FILTERS ============ */
  .filters{
    display:flex;
    flex-wrap:wrap;
    gap:1px;
    border:1px solid var(--line);
    margin-bottom:64px;
    background:var(--line);
  }
  .filter{
    flex:1;
    min-width:120px;
    padding:18px 24px;
    background:var(--black);
    color:var(--text-mute);
    font-size:0.78rem;
    font-weight:500;
    letter-spacing:0.14em;
    text-transform:uppercase;
    transition:all .35s var(--tr);
    border:none;
    text-align:center;
  }
  .filter:hover{background:var(--char-2);color:var(--text)}
  .filter.active{background:var(--text);color:var(--black)}

  /* ============ ABOUT ============ */
  .about-pull{
    display:grid;
    grid-template-columns:1fr 1.4fr;
    gap:120px;
    margin-bottom:80px;
    padding-bottom:80px;
    border-bottom:1px solid var(--line);
  }
  .about-pull .left .eyebrow{margin-bottom:32px;display:block}
  .about-pull blockquote{
    font-size:clamp(1.5rem, 2.3vw, 2rem);
    line-height:1.3;
    letter-spacing:-0.02em;
    font-weight:300;
    color:var(--text);
    border:none;
    padding:0;
    margin:0;
  }
  .about-pull blockquote em{
    font-family:'Iowan Old Style','Times New Roman',Georgia,serif;
    font-style:italic;
    color:var(--accent);
    font-weight:400;
  }
  .about-pull .right{display:flex;flex-direction:column;gap:24px}
  .about-pull .right p{
    font-size:1.05rem;
    line-height:1.7;
    color:var(--text-2);
    font-weight:300;
  }
  .about-pull .right p strong{color:var(--text);font-weight:500}

  .about-mission{
    margin-top:0;
    padding:80px 0;
    border-bottom:1px solid var(--line);
  }
  .about-mission .inner{
    display:grid;
    grid-template-columns:1fr 1.4fr;
    gap:120px;
  }
  .about-mission .left .eyebrow{display:block}
  .about-mission .right p{
    font-size:1.2rem;
    line-height:1.55;
    color:var(--text);
    font-weight:300;
    max-width:700px;
  }
  .about-mission .right p em{
    font-family:'Iowan Old Style','Times New Roman',Georgia,serif;
    font-style:italic;
    color:var(--accent);
    font-weight:400;
  }

  /* ============ THE PORTFOLIO BRIEF ============ */
  .brief-wrap{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:120px;
    align-items:start;
  }
  .brief-form .form-title{margin-bottom:8px}
  .brief-form .form-sub{
    color:var(--text-mute);
    margin-bottom:48px;
    font-size:0.95rem;
  }
  .form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:32px;
  }
  .field{
    margin-bottom:36px;
    position:relative;
  }
  .field label{
    display:block;
    font-family:'JetBrains Mono', ui-monospace, monospace;
    font-size:0.66rem;
    text-transform:uppercase;
    letter-spacing:0.18em;
    color:var(--text-mute);
    margin-bottom:14px;
  }
  .field label .opt{color:var(--text-faint);text-transform:none;letter-spacing:0.05em}
  .field input,.field textarea{
    width:100%;
    background:transparent;
    border:none;
    border-bottom:1px solid var(--line-strong);
    color:var(--text);
    font-family:inherit;
    font-size:1rem;
    font-weight:300;
    padding:10px 0 14px;
    transition:border-color .35s var(--tr);
    border-radius:0;
  }
  .field input:focus,.field textarea:focus{
    outline:none;
    border-bottom-color:var(--text);
  }
  .field input.valid{border-bottom-color:var(--accent)}
  .field input.invalid,.field textarea.invalid{border-bottom-color:#E26A6A}
  .field textarea{
    min-height:120px;
    resize:vertical;
    font-family:inherit;
  }
  .field .err{
    font-size:0.74rem;
    color:#E26A6A;
    margin-top:8px;
    display:none;
    letter-spacing:0.04em;
  }
  .field .err.show{display:block}

  .checkbox-field{
    display:grid;
    grid-template-columns:24px 1fr;
    gap:18px;
    padding:24px 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    margin-bottom:0;
    align-items:start;
  }
  .checkbox-field + .checkbox-field{
    border-top:none;
    margin-bottom:36px;
  }
  .checkbox-field input[type="checkbox"]{
    appearance:none;
    width:20px;height:20px;
    border:1px solid var(--line-strong);
    background:transparent;
    cursor:pointer;
    position:relative;
    margin-top:2px;
    transition:border-color .25s var(--tr);
    border-radius:0;
    flex-shrink:0;
  }
  .checkbox-field input[type="checkbox"]:hover{border-color:var(--text-mute)}
  .checkbox-field input[type="checkbox"]:checked{border-color:var(--accent)}
  .checkbox-field input[type="checkbox"].invalid{border-color:#E26A6A;box-shadow:0 0 0 2px rgba(226,106,106,0.12)}
  .checkbox-field input[type="checkbox"]:checked::after{
    content:"";
    position:absolute;
    left:6px;top:2px;
    width:6px;height:11px;
    border:solid var(--accent);
    border-width:0 1.5px 1.5px 0;
    transform:rotate(45deg);
  }
  .checkbox-field label{
    font-size:0.78rem;
    line-height:1.65;
    color:var(--text-mute);
    cursor:pointer;
    letter-spacing:0.01em;
  }
  .checkbox-field label strong{color:var(--text);font-weight:500}

  .form-footnote{
    font-size:0.74rem;
    color:var(--text-faint);
    margin-top:24px;
    letter-spacing:0.02em;
  }
  .form-footnote a{
    color:var(--text-mute);
    border-bottom:1px solid var(--line);
    transition:color .25s var(--tr), border-color .25s var(--tr);
    cursor:pointer;
  }
  .form-footnote a:hover{color:var(--accent);border-bottom-color:var(--accent)}

  /* ============ "WHAT READERS GET" LIST ============ */
  .reader-list{
    border-top:1px solid var(--line);
  }
  .reader-list .item{
    display:grid;
    grid-template-columns:40px 1fr;
    gap:24px;
    padding:32px 0;
    border-bottom:1px solid var(--line);
    align-items:start;
  }
  .reader-list .arr{
    font-family:'JetBrains Mono', ui-monospace, monospace;
    color:var(--accent);
    font-size:1rem;
    padding-top:4px;
  }
  .reader-list h4{
    font-size:1.05rem;
    color:var(--text);
    margin-bottom:8px;
    font-weight:500;
    letter-spacing:-0.01em;
  }
  .reader-list p{
    color:var(--text-mute);
    font-size:0.92rem;
    line-height:1.6;
  }

  /* ============ FAQ ACCORDION ============ */
  .faq-list{
    border-top:1px solid var(--line);
  }
  .faq{
    border-bottom:1px solid var(--line);
  }
  .faq summary{
    padding:28px 0;
    cursor:pointer;
    font-size:1.05rem;
    font-weight:400;
    color:var(--text);
    letter-spacing:-0.01em;
    list-style:none;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    transition:color .3s var(--tr);
  }
  .faq summary::-webkit-details-marker{display:none}
  .faq summary:hover{color:var(--accent)}
  .faq-icon{
    width:24px;height:24px;
    flex-shrink:0;
    position:relative;
    transition:transform .35s var(--tr);
  }
  .faq-icon::before,.faq-icon::after{
    content:"";
    position:absolute;
    background:currentColor;
    top:50%;left:50%;
    transition:transform .35s var(--tr);
  }
  .faq-icon::before{width:12px;height:1px;transform:translate(-50%,-50%)}
  .faq-icon::after{width:1px;height:12px;transform:translate(-50%,-50%)}
  .faq[open] .faq-icon::after{transform:translate(-50%,-50%) scaleY(0)}
  .faq .body{
    padding:0 0 28px;
    color:var(--text-mute);
    font-size:0.95rem;
    line-height:1.7;
    max-width:760px;
  }

  /* ============ CONTACT ============ */
  .contact-wrap{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:120px;
    align-items:start;
  }
  .contact-disclaimer{
    margin-bottom:48px;
    padding:24px 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    color:var(--text-mute);
    font-size:0.88rem;
    line-height:1.65;
  }
  .contact-info{
    border-top:1px solid var(--line);
  }
  .contact-row{
    display:grid;
    grid-template-columns:160px 1fr;
    gap:32px;
    padding:32px 0;
    border-bottom:1px solid var(--line);
    align-items:start;
  }
  .contact-row .lbl{
    font-family:'JetBrains Mono', ui-monospace, monospace;
    font-size:0.7rem;
    text-transform:uppercase;
    letter-spacing:0.18em;
    color:var(--text-mute);
    padding-top:4px;
  }
  .contact-row .val{
    font-size:1rem;
    color:var(--text);
    line-height:1.6;
    font-weight:400;
  }
  .contact-row .val a{
    border-bottom:1px solid transparent;
    transition:border-color .3s var(--tr), color .3s var(--tr);
  }
  .contact-row .val a:hover{color:var(--accent);border-bottom-color:var(--accent)}

  /* SMS opt-in section under contact form */
  .sms-optin{
    margin-top:120px;
    padding-top:80px;
    border-top:1px solid var(--line);
  }
  .sms-optin .inner{
    display:grid;
    grid-template-columns:1fr 1.2fr;
    gap:80px;
    align-items:start;
  }
  .sms-optin h3{
    font-size:1.65rem;
    margin-bottom:20px;
    letter-spacing:-0.02em;
    font-weight:400;
  }
  .sms-optin .lede{
    color:var(--text-mute);
    font-size:0.95rem;
    line-height:1.65;
  }
  .sms-optin form{display:flex;flex-direction:column}
  .sms-optin .sms-fine{
    font-size:0.72rem;
    color:var(--text-faint);
    margin-top:14px;
    line-height:1.6;
    letter-spacing:0.01em;
  }

  /* ============ FOOTER ============ */
  footer{
    border-top:1px solid var(--line);
    padding:120px 0 48px;
    background:var(--black);
    margin-top:80px;
  }
  .footer-mark{
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr 1fr;
    gap:64px;
    padding-bottom:80px;
    border-bottom:1px solid var(--line);
    margin-bottom:48px;
  }
  .footer-brand p{
    margin-top:28px;
    color:var(--text-mute);
    font-size:0.92rem;
    line-height:1.7;
    max-width:340px;
  }
  .footer-col h5{
    font-family:'JetBrains Mono', ui-monospace, monospace;
    font-size:0.66rem;
    text-transform:uppercase;
    letter-spacing:0.22em;
    color:var(--text-faint);
    font-weight:400;
    margin-bottom:24px;
  }
  .footer-col ul{list-style:none;display:flex;flex-direction:column;gap:14px}
  .footer-col a{
    color:var(--text-mute);
    font-size:0.92rem;
    transition:color .3s var(--tr);
    cursor:pointer;
    letter-spacing:0.01em;
  }
  .footer-col a:hover{color:var(--text)}
  .footer-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
    font-family:'JetBrains Mono', ui-monospace, monospace;
    font-size:0.72rem;
    color:var(--text-faint);
    letter-spacing:0.06em;
  }

  /* ============ POLICY MODAL (slide-over) ============ */
  .modal-bg{
    position:fixed;
    inset:0;
    z-index:200;
    background:rgba(0,0,0,0.7);
    display:none;
    opacity:0;
    transition:opacity .35s var(--tr);
  }
  .modal-bg.open{display:block;opacity:1}
  .modal{
    position:fixed;
    top:0;right:0;bottom:0;
    width:100%;
    max-width:640px;
    background:var(--char);
    border-left:1px solid var(--line);
    z-index:201;
    transform:translateX(100%);
    transition:transform .45s var(--tr);
    display:flex;
    flex-direction:column;
  }
  .modal.open{transform:translateX(0)}
  .modal-head{
    padding:32px 48px;
    border-bottom:1px solid var(--line);
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-shrink:0;
  }
  .modal-head h3{font-size:1.25rem;letter-spacing:-0.01em}
  .modal-close{
    width:40px;height:40px;
    border:1px solid var(--line-strong);
    display:grid;place-items:center;
    color:var(--text);
    transition:all .3s var(--tr);
  }
  .modal-close:hover{border-color:var(--text);background:var(--text);color:var(--black)}
  .modal-close svg{width:14px;height:14px}
  .modal-body{
    padding:48px;
    overflow-y:auto;
    color:var(--text-2);
    font-size:0.93rem;
    line-height:1.75;
    flex:1;
  }
  .modal-body h4{
    color:var(--text);
    margin:36px 0 14px;
    font-size:0.78rem;
    font-family:'JetBrains Mono', ui-monospace, monospace;
    font-weight:400;
    letter-spacing:0.18em;
    text-transform:uppercase;
  }
  .modal-body h4:first-child{margin-top:0}
  .modal-body p{margin-bottom:16px;color:var(--text-2)}
  .modal-body ul{padding-left:0;list-style:none;margin-bottom:16px}
  .modal-body li{
    padding:8px 0 8px 24px;
    border-bottom:1px solid var(--line-soft);
    position:relative;
    color:var(--text-2);
  }
  .modal-body li::before{
    content:"—";
    position:absolute;
    left:0;
    color:var(--accent);
  }
  .modal-body strong{color:var(--text);font-weight:500}

  /* ============ ARTICLE MODAL ============ */
  .article-modal-bg{
    position:fixed;
    inset:0;
    z-index:250;
    background:rgba(0,0,0,0.8);
    backdrop-filter:blur(10px) saturate(140%);
    -webkit-backdrop-filter:blur(10px) saturate(140%);
    opacity:0;
    pointer-events:none;
    visibility:hidden;
    transition:opacity .4s var(--tr), visibility 0s linear .4s;
    overflow-y:auto;
    padding:60px 24px;
  }
  .article-modal-bg.open{
    opacity:1;
    pointer-events:auto;
    visibility:visible;
    transition:opacity .4s var(--tr), visibility 0s linear 0s;
  }
  .article-modal{
    position:relative;
    max-width:840px;
    width:100%;
    margin:0 auto;
    background:#0a0a0a;
    border:1px solid rgba(255,255,255,0.10);
    padding:80px 72px;
    transform:translateY(40px);
    opacity:0;
    transition:transform .55s var(--tr), opacity .45s var(--tr);
  }
  .article-modal-bg.open .article-modal{
    transform:translateY(0);
    opacity:1;
  }
  .article-modal-close{
    position:absolute;
    top:24px;right:24px;
    width:44px;height:44px;
    border:1px solid rgba(255,255,255,0.15);
    background:rgba(0,0,0,0.5);
    color:var(--text);
    display:grid;
    place-items:center;
    cursor:pointer;
    transition:all .35s var(--tr);
    z-index:2;
  }
  .article-modal-close:hover{
    border-color:var(--text);
    background:var(--text);
    color:var(--black);
  }
  .article-modal-close svg{width:14px;height:14px}

  .article-modal-meta{
    display:flex;
    gap:32px;
    align-items:center;
    padding-bottom:28px;
    margin-bottom:36px;
    border-bottom:1px solid var(--line);
    font-family:'JetBrains Mono', ui-monospace, monospace;
    font-size:0.72rem;
    text-transform:uppercase;
    letter-spacing:0.18em;
    flex-wrap:wrap;
  }
  .article-modal-meta .cat{color:var(--accent)}
  .article-modal-meta .date,
  .article-modal-meta .read{color:var(--text-mute)}
  .article-modal-meta .read{display:inline-flex;align-items:center;gap:8px}
  .article-modal-meta .read svg{width:11px;height:11px}

  .article-modal h1{
    font-size:clamp(1.85rem, 3.6vw, 2.85rem);
    line-height:1.15;
    letter-spacing:-0.035em;
    font-weight:400;
    margin-bottom:24px;
    color:var(--text);
  }
  .article-modal .body{
    color:#D1D5DB;
    font-size:1.05rem;
    line-height:1.8;
    font-weight:400;
    position:relative;
  }
  .article-modal .body p{
    margin-bottom:24px;
    color:inherit;
  }

  /* PAYWALL */
  .paywall-fade{
    position:relative;
    height:120px;
    margin-top:-120px;
    background:linear-gradient(180deg, transparent 0%, #0a0a0a 90%);
    pointer-events:none;
  }
  .paywall-gate{
    margin-top:48px;
    padding:48px;
    border:1px solid rgba(255,255,255,0.12);
    background:rgba(20,20,20,0.6);
  }
  .paywall-gate .eyebrow{
    color:var(--accent);
    margin-bottom:20px;
    display:block;
  }
  .paywall-gate h3{
    font-size:1.5rem;
    color:var(--text);
    margin-bottom:16px;
    letter-spacing:-0.02em;
    font-weight:400;
    line-height:1.25;
  }
  .paywall-gate h3 em{
    font-family:'Iowan Old Style','Times New Roman',Georgia,serif;
    font-style:italic;
    color:var(--accent);
    font-weight:400;
  }
  .paywall-gate .desc{
    color:var(--text-mute);
    margin-bottom:32px;
    font-size:0.95rem;
    line-height:1.65;
  }
  .paywall-gate .pwform{display:flex;flex-direction:column}
  .paywall-gate .pwform .field{margin-bottom:24px}
  .paywall-gate .pwform .checkbox-field{margin-bottom:24px}
  .paywall-gate .pwfine{
    font-size:0.74rem;
    color:var(--text-faint);
    margin-top:18px;
    line-height:1.6;
  }
  .paywall-gate .pwfine a{
    color:var(--text-mute);
    border-bottom:1px solid var(--line);
    cursor:pointer;
    transition:color .25s var(--tr), border-color .25s var(--tr);
  }
  .paywall-gate .pwfine a:hover{color:var(--accent);border-bottom-color:var(--accent)}

  /* ============ TOAST ============ */
  .toast{
    position:fixed;
    bottom:32px;left:50%;
    transform:translate(-50%, 120%);
    z-index:300;
    padding:18px 32px;
    background:var(--text);
    color:var(--black);
    font-size:0.82rem;
    font-weight:500;
    letter-spacing:0.06em;
    text-transform:uppercase;
    opacity:0;
    transition:all .45s var(--tr);
    display:flex;
    align-items:center;
    gap:14px;
    border:1px solid var(--text);
  }
  .toast.show{
    transform:translate(-50%, 0);
    opacity:1;
  }
  .toast svg{width:14px;height:14px}

  /* ============ FADE-IN ============ */
  .fade-in{
    opacity:0;
    transform:translateY(20px);
    transition:opacity 1s ease-in-out, transform 1s ease-in-out;
  }
  .fade-in.in{opacity:1;transform:translateY(0)}
  .fade-in.delay-1{transition-delay:.1s}
  .fade-in.delay-2{transition-delay:.2s}
  .fade-in.delay-3{transition-delay:.3s}

  /* ============ RESPONSIVE ============ */
  @media (max-width:1024px){
    :root{--pad-section:80px;--pad-section-sm:60px}
    .container{padding:0 28px}
    .nav-inner{padding:18px 28px}
    .hero-bottom,.brief-wrap,.contact-wrap,.about-pull,.about-mission .inner,.about-testimonials .inner,.sms-optin .inner{grid-template-columns:1fr;gap:48px}
    .section-head{grid-template-columns:1fr;gap:24px;align-items:start}
    .footer-mark{grid-template-columns:1fr 1fr;gap:48px}

    .articles-grid{grid-template-columns:repeat(2, 1fr)}
    .articles-grid > .article:last-child:nth-child(3n+1),
    .articles-grid > .article:nth-last-child(2):nth-child(3n+1){grid-column:auto}
    .articles-grid > .article:last-child:nth-child(2n+1){grid-column:1 / -1}
  }
  @media (max-width:760px){
    .article-modal{padding:60px 28px}
    .article-modal-meta{gap:18px;font-size:0.66rem}
    .article-modal .body{font-size:1rem;line-height:1.75}
    .article-modal-bg{padding:32px 12px}
    .paywall-gate{padding:32px 24px}
    h1{font-size:2.4rem}
    .hero{padding:120px 0 60px}
    .pillar{grid-template-columns:1fr;gap:16px;padding:32px 0}
    .pillar-num{font-size:0.7rem}
    .about-testimonials .inner{grid-template-columns:1fr;gap:32px}
    .nav-links{
      display:none;
      position:absolute;
      top:100%;left:0;right:0;
      flex-direction:column;
      align-items:stretch;
      gap:0;
      background:rgba(0,0,0,0.95);
      backdrop-filter:blur(20px);
      border-bottom:1px solid var(--line);
      padding:8px 0;
    }
    .nav-links.open{display:flex}
    .nav-links a{padding:18px 28px;border-bottom:1px solid var(--line-soft)}
    .nav-cta{display:none}
    .mobile-toggle{display:flex}
    .form-row{grid-template-columns:1fr;gap:0}
    .contact-row{grid-template-columns:1fr;gap:8px}
    .footer-mark{grid-template-columns:1fr;gap:48px}
    .footer-bottom{flex-direction:column;align-items:flex-start}
    .modal-head,.modal-body{padding:28px}

    .articles-grid{grid-template-columns:1fr}
    .articles-grid > .article:last-child:nth-child(2n+1){grid-column:auto}
    .article{min-height:auto;padding:32px 24px}
  }

  /* ---- Multi-page build ----------------------------------------
     Elements that used to be JS-routed (the brand, nav links and the
     button CTAs) are now real <a href> links. Keep their original,
     un-underlined appearance so the design is unchanged. */
  .brand,
  .nav-links a,
  .btn,
  .btn-line{text-decoration:none}