:root{
    --ink:#10192E; --steel:#243349; --steel-2:#2E4059;
    --cold:#EFF1EE; --cold-2:#E3E6DE;
    --graphite:#5B6472; --graphite-lt:#8A93A0;
    /* Accent scale. The logo blue is mid-dark, so it needs a lighter tier for
       text on the navy sections and a darker tier for text on the cream ground -
       #3F72A3 alone fails AA on both (3.45:1 and 4.46:1). */
    --accent:#3F72A3; --accent-lt:#6BA6DE; --accent-dark:#2E5580; --accent-hover:#35618B;
    --green:#4C8B6E;
    --line:rgba(255,255,255,0.12); --line-dk:rgba(16,25,46,0.1);
    /* Same three faces as the original file. The gstatic preconnect above matters:
       without it the webfonts often fail to load and everything falls back to the
       browser's default sans, which is what makes a styled page look unstyled. */
    --font-display:'Space Grotesk','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
    --font-body:'Inter','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
    --font-mono:'IBM Plex Mono','SF Mono',Consolas,'Liberation Mono',monospace;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
  section[id]{scroll-margin-top:84px;}
  body{font-family:var(--font-body); color:var(--ink); background:var(--cold); -webkit-font-smoothing:antialiased; overflow-x:hidden;}
  img,svg{display:block; max-width:100%;}
  a{color:inherit; text-decoration:none;}
  .wrap{max-width:1120px; margin:0 auto; padding:0 32px;}
  section{position:relative;}

  /* NAV */
  .nav{background:var(--ink); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:100; transition:box-shadow .25s ease, background .25s ease;}
  .nav.scrolled{box-shadow:0 8px 28px rgba(16,25,46,0.28); background:rgba(16,25,46,0.94); backdrop-filter:saturate(1.4) blur(10px);}
  .nav .wrap{display:flex; align-items:center; gap:28px; height:76px; transition:height .25s ease;}
  .nav.scrolled .wrap{height:64px;}
  .logo-link{display:inline-flex; align-items:center; flex-shrink:0; transition:opacity .2s ease;}
  .logo-link:hover{opacity:.82;}
  .nav-spacer{flex:1;}
  .nav-links{display:flex; align-items:center; gap:34px;}
  .nav-links a{font-size:14px; color:#C7CCD6; font-weight:500; transition:color .15s; position:relative; padding:4px 0;}
  .nav-links a::after{content:''; position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--accent-lt); transform:scaleX(0); transform-origin:right; transition:transform .28s cubic-bezier(.4,0,.2,1);}
  .nav-links a:hover{color:#fff;}
  .nav-links a:hover::after, .nav-links a.active::after{transform:scaleX(1); transform-origin:left;}
  .nav-links a.active{color:#fff;}
  .nav-cta{flex-shrink:0;}
  .nav-toggle{display:none; flex-direction:column; justify-content:center; gap:5px; width:36px; height:36px; margin-left:auto; background:none; border:none; padding:0; cursor:pointer;}
  .nav-toggle span{display:block; width:100%; height:2px; background:#fff; border-radius:2px; transition:transform .2s ease, opacity .2s ease;}
  .nav-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle.active span:nth-child(2){opacity:0;}
  .nav-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  /* BUTTONS */
  .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-body); font-size:14px; font-weight:600; padding:12px 22px; border-radius:3px; cursor:pointer; border:1px solid transparent; position:relative;
       transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s ease;}
  .btn::after{content:'\2192'; display:inline-block; font-size:15px; line-height:1; transform:translateX(-3px); opacity:.7; transition:transform .25s cubic-bezier(.4,0,.2,1), opacity .25s ease;}
  .btn:hover{transform:translateY(-2px);}
  .btn:hover::after{transform:translateX(2px); opacity:1;}
  .btn:active{transform:translateY(0); transition-duration:.06s;}
  .btn:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
  .btn-sm{padding:9px 16px; font-size:13px;}
  .btn-accent{background:var(--accent); color:#fff;}
  .btn-accent:hover{background:var(--accent-hover); box-shadow:0 10px 24px rgba(63,114,163,0.34);}
  .btn-navy{background:var(--steel-2); color:#fff; border-color:var(--steel-2);}
  .btn-navy:hover{background:#3A4F6E; box-shadow:0 10px 24px rgba(16,25,46,0.3);}
  .btn-ghost-dark{border-color:rgba(255,255,255,0.28); color:#fff;}
  .btn-ghost-dark:hover{background:rgba(255,255,255,0.07); border-color:var(--accent-lt);}
  .btn-ghost-light{border-color:rgba(16,25,46,0.22); color:var(--ink);}
  .btn-ghost-light:hover{background:rgba(16,25,46,0.04); border-color:var(--accent);}

  /* HERO */
  .hero{background:var(--ink); color:#fff; padding:84px 0 92px; overflow:hidden;}
  .hero::before{content:''; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(620px 320px at 78% 26%, rgba(107,166,222,0.16), transparent 70%),
               radial-gradient(520px 300px at 10% 84%, rgba(46,64,89,0.55), transparent 68%);
    animation:heroDrift 18s ease-in-out infinite alternate;}
  .hero::after{content:''; position:absolute; inset:0; pointer-events:none; opacity:.32;
    background-image:linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
    background-size:56px 56px;
    -webkit-mask-image:radial-gradient(circle at 50% 40%, #000 30%, transparent 78%);
    mask-image:radial-gradient(circle at 50% 40%, #000 30%, transparent 78%);}
  .hero .wrap{position:relative; z-index:1;}
  @keyframes heroDrift{from{transform:translate3d(0,0,0) scale(1);} to{transform:translate3d(-24px,14px,0) scale(1.06);}}
  .hero-flex{display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:56px;}
  .hero-eyebrow{font-family:var(--font-mono); font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent-lt); margin-bottom:18px; display:flex; align-items:center; gap:12px;}
  .hero-eyebrow::after{content:''; height:1px; width:56px; background:var(--accent-lt); opacity:.5;}
  h1{font-family:var(--font-display); font-weight:600; font-size:46px; line-height:1.12; letter-spacing:-0.015em; margin-bottom:20px;}
  .hero-sub{font-size:17px; line-height:1.65; color:#B7BFCB; max-width:520px; margin-bottom:32px;}
  .hero-ctas{display:flex; gap:12px; flex-wrap:wrap;}

  /* hero part tiles */
  .hero-parts{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
  .hero-parts .tile{background:#fff; border-radius:8px; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; overflow:hidden; box-shadow:0 18px 40px rgba(0,0,0,0.3); transition:transform .45s cubic-bezier(.22,.9,.3,1), box-shadow .45s ease;}
  .hero-parts .tile img{width:100%; height:100%; object-fit:contain; padding:16px;}
  .hero-parts .tile:nth-child(2), .hero-parts .tile:nth-child(4){transform:translateY(26px);}
  .hero-parts .tile:hover{transform:translateY(-6px); box-shadow:0 26px 52px rgba(0,0,0,0.42);}
  .hero-parts .tile:nth-child(2):hover, .hero-parts .tile:nth-child(4):hover{transform:translateY(20px);}

  /* SECTION SHARED */
  .section-head{max-width:620px; margin-bottom:44px;}
  .section-eyebrow{font-family:var(--font-mono); font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent-dark); margin-bottom:14px; display:flex; align-items:center; gap:12px;}
  .section-eyebrow::after{content:''; height:1px; flex:1; background:currentColor; opacity:.3; transform:scaleX(0); transform-origin:left; transition:transform .8s cubic-bezier(.22,.9,.3,1) .15s;}
  .reveal.in .section-eyebrow::after, .section-head.in .section-eyebrow::after{transform:scaleX(1);}
  h2{font-family:var(--font-display); font-weight:600; font-size:32px; letter-spacing:-0.015em; color:var(--ink); line-height:1.22;}
  .section-lead{font-size:16.5px; line-height:1.7; color:var(--graphite); margin-top:16px;}
  .dark-section .section-eyebrow{color:var(--accent-lt);}
  .dark-section h2{color:#fff;}
  .dark-section .section-lead{color:#B7BFCB;}

  /* REVEAL */
  .reveal{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.22,.9,.3,1), transform .7s cubic-bezier(.22,.9,.3,1);}
  .reveal.in{opacity:1; transform:none;}
  .reveal-soft{opacity:0; transition:opacity .6s ease;}
  .reveal-soft.in{opacity:1;}
  .rise{opacity:0; transform:translateY(18px); animation:riseIn .7s cubic-bezier(.22,.9,.3,1) forwards;}
  @keyframes riseIn{to{opacity:1; transform:translateY(0);}}

  /* ABOUT */
  .about{background:var(--cold); padding:88px 0 20px;}
  .about-copy{max-width:640px;}
  .about-copy p{font-size:16.5px; line-height:1.75; color:var(--graphite); margin-bottom:16px;}
  .about-copy p:last-child{margin-bottom:0;}
  .pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:52px;}
  .pillar{background:#fff; border:1px solid var(--line-dk); border-radius:8px; padding:26px 24px; transition:transform .3s cubic-bezier(.22,.9,.3,1), box-shadow .3s ease, border-color .3s ease;}
  .pillar:hover{transform:translateY(-4px); box-shadow:0 16px 36px rgba(16,25,46,0.09); border-color:rgba(63,114,163,0.45);}
  .pillar-rule{width:34px; height:3px; background:var(--accent); border-radius:2px; margin-bottom:16px;}
  .pillar h3{font-family:var(--font-display); font-size:17px; font-weight:600; margin-bottom:9px; color:var(--ink);}
  .pillar p{font-size:14.5px; line-height:1.62; color:var(--graphite);}

  /* COVERAGE */
  .origins{background:var(--cold); padding:76px 0 88px;}
  .origins-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:28px 40px; margin-top:8px;}
  .origin-col h4{font-family:var(--font-display); font-weight:600; font-size:17px; color:var(--ink); margin-bottom:14px; padding-bottom:9px; border-bottom:2px solid var(--accent);}
  .origin-col ul{list-style:none;}
  .origin-col li{font-size:14.5px; font-weight:600; color:var(--ink); padding:10px 0; border-bottom:1px solid var(--line-dk); position:relative; cursor:default;
                 transition:padding-left .28s cubic-bezier(.4,0,.2,1), color .2s ease;}
  .origin-col li::before{content:''; position:absolute; left:0; top:50%; width:0; height:2px; background:var(--accent); transform:translateY(-50%); transition:width .28s cubic-bezier(.4,0,.2,1);}
  .origin-col li:hover{padding-left:18px; color:var(--accent-dark);}
  .origin-col li:hover::before{width:12px;}
  .origin-col li:last-child{border-bottom:none;}

  /* PRODUCTS */
  .products{background:var(--ink); padding:80px 0 88px; color:#fff;}
  .cat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; align-items:start;}
  .cat-card{background:var(--steel); border:1px solid var(--line); border-radius:8px; overflow:hidden; display:flex; flex-direction:column;
            transition:background .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s cubic-bezier(.22,.9,.3,1);}
  .cat-card:hover{background:#2A3B54; border-color:rgba(107,166,222,0.55); box-shadow:0 18px 38px rgba(0,0,0,0.34); transform:translateY(-4px);}
  .cat-photo{background:#fff; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--line); overflow:hidden; position:relative; flex-shrink:0;}
  .cat-photo img{width:100%; height:100%; object-fit:contain; padding:16px; transition:transform .5s cubic-bezier(.22,.9,.3,1);}
  .cat-card:hover .cat-photo img{transform:scale(1.07);}
  .cat-photo::after{content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(107,166,222,0.14), transparent 55%); opacity:0; transition:opacity .3s ease;}
  .cat-card:hover .cat-photo::after{opacity:1;}
  .cat-body{padding:18px 20px 22px; flex:1;}
  .cat-card h4{font-family:var(--font-display); font-weight:600; font-size:15.5px; color:#fff; transition:color .25s ease; padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid var(--line);}
  .cat-card:hover h4{color:var(--accent-lt);}
  .cat-items{font-size:13px; line-height:1.5; color:#9AA3B0;}
  .cat-item{position:relative; padding:4px 0 4px 14px; transition:color .2s ease, transform .25s cubic-bezier(.4,0,.2,1);}
  .cat-item::before{content:''; position:absolute; left:0; top:11px; width:5px; height:5px; border-radius:50%; background:var(--graphite-lt); opacity:.55; transition:background .2s ease, opacity .2s ease, transform .2s ease;}
  .cat-item:hover{color:#fff; transform:translateX(3px);}
  .cat-item:hover::before{background:var(--accent-lt); opacity:1; transform:scale(1.4);}

  /* CTA BAND */
  .cta-band{margin-top:44px; background:var(--steel); border:1px solid var(--line); border-left:3px solid var(--accent-lt); border-radius:8px;
            padding:28px 32px; display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;}
  .cta-band h3{font-family:var(--font-display); font-size:19px; font-weight:600; color:#fff; margin-bottom:6px;}
  .cta-band p{font-size:14.5px; color:#9AA3B0; line-height:1.6;}

  /* CONTACT */
  .contact{background:var(--cold); padding:88px 0;}
  .contact-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px;}
  .contact-copy p{font-size:15.5px; line-height:1.7; color:var(--graphite); margin-bottom:16px;}
  .enquiry-toggle{display:flex; gap:1px; background:var(--line-dk); border:1px solid var(--line-dk); border-radius:5px; overflow:hidden; margin-top:24px;}
  .enquiry-opt{flex:1; background:#fff; border:none; padding:14px 16px; font-family:var(--font-body); font-size:13.5px; font-weight:600; color:var(--graphite); cursor:pointer; text-align:left; transition:background .25s ease, color .25s ease;}
  .enquiry-opt:hover:not(.active){background:#F7F8F6; color:var(--ink);}
  .enquiry-opt.active{background:var(--ink); color:#fff;}
  .enquiry-opt span{display:block; font-weight:400; font-size:12px; color:var(--graphite-lt); margin-top:3px;}
  .enquiry-opt.active span{color:#B7BFCB;}
  .contact-direct{margin-top:28px; padding-top:24px; border-top:1px solid var(--line-dk);}
  .contact-direct h5{font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--graphite-lt); margin-bottom:12px;}
  .contact-direct a{display:block; font-size:14.5px; font-weight:600; color:var(--ink); margin-bottom:8px; transition:color .2s ease, transform .25s cubic-bezier(.4,0,.2,1); overflow-wrap:anywhere;}
  .contact-direct a:hover{color:var(--accent-dark); transform:translateX(3px);}
  .form-card{background:#fff; border:1px solid var(--line-dk); border-radius:8px; padding:32px; transition:box-shadow .35s ease, border-color .35s ease;}
  .form-card:focus-within{box-shadow:0 18px 40px rgba(16,25,46,0.1); border-color:rgba(63,114,163,0.4);}
  .field{margin-bottom:18px;}
  .field label{display:block; font-size:12.5px; font-weight:600; color:var(--ink); margin-bottom:7px; transition:color .2s ease;}
  .field:focus-within label{color:var(--accent-dark);}
  .field input, .field textarea{width:100%; font-family:var(--font-body); font-size:14px; padding:11px 12px; border:1px solid var(--line-dk); border-radius:4px; color:var(--ink); background:var(--cold);
                                transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;}
  .field input:hover, .field textarea:hover{border-color:rgba(16,25,46,0.22);}
  .field input:focus, .field textarea:focus{outline:none; border-color:var(--accent); background:#fff; box-shadow:0 0 0 3px rgba(63,114,163,0.16);}
  .field textarea{resize:vertical; min-height:96px;}
  .field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
  .field-hint{font-size:12px; color:var(--graphite-lt); margin-top:6px;}
  .field-reveal{animation:fieldIn .38s cubic-bezier(.22,.9,.3,1);}
  @keyframes fieldIn{from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;}}
  .btn.is-sending{pointer-events:none; opacity:.75;}
  .btn.is-sending::after{content:''; width:13px; height:13px; border:2px solid rgba(255,255,255,0.35); border-top-color:#fff; border-radius:50%; opacity:1; transform:none; animation:spin .6s linear infinite;}
  @keyframes spin{to{transform:rotate(360deg);}}
  .form-success{display:none; text-align:center; padding:24px 0;}
  .form-success.show{display:block; animation:fieldIn .45s cubic-bezier(.22,.9,.3,1);}
  .form-success .ti{font-size:28px; color:var(--green); margin-bottom:10px; animation:pop .5s cubic-bezier(.22,1.4,.4,1);}
  @keyframes pop{from{transform:scale(.4); opacity:0;} to{transform:scale(1); opacity:1;}}
  .form-success p{font-size:14.5px; color:var(--graphite);}

  /* FOOTER */
  footer{background:var(--ink); padding:56px 0 32px; color:#8891A0;}
  .foot-grid{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:40px; padding-bottom:32px; border-bottom:1px solid var(--line);}
  .foot-brand{max-width:300px;}
  .foot-brand .logo-link{display:inline-flex; margin-bottom:18px;}
  .foot-addr{font-size:13.5px; line-height:1.8;}
  .foot-links{display:flex; gap:56px;}
  .foot-col h5{font-size:12px; text-transform:uppercase; letter-spacing:0.09em; color:var(--graphite-lt); margin-bottom:14px;}
  .foot-col a{display:block; font-size:13.5px; color:#C7CCD6; margin-bottom:10px; transition:color .2s ease, transform .25s cubic-bezier(.4,0,.2,1); overflow-wrap:anywhere;}
  .foot-col a:hover{color:var(--accent-lt); transform:translateX(4px);}
  .foot-bottom{padding-top:24px; font-size:12.5px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;}

  /* BACK TO TOP */
  .to-top{position:fixed; right:22px; bottom:22px; width:44px; height:44px; border-radius:50%; border:1px solid var(--line);
          background:var(--steel-2); color:#fff; font-size:17px; line-height:1; cursor:pointer; z-index:90;
          display:flex; align-items:center; justify-content:center;
          opacity:0; visibility:hidden; transform:translateY(12px) scale(.9);
          transition:opacity .3s ease, transform .3s cubic-bezier(.22,.9,.3,1), visibility .3s, background .2s ease, box-shadow .2s ease;}
  .to-top.show{opacity:1; visibility:visible; transform:none;}
  .to-top:hover{background:var(--accent); color:#fff; box-shadow:0 10px 24px rgba(63,114,163,0.36);}
  .to-top:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}

  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 1000px){
    .cat-grid{grid-template-columns:repeat(3,1fr);}
    .origins-grid{grid-template-columns:repeat(2,1fr); gap:24px 36px;}
  }
  @media (max-width: 860px){
    .wrap{padding:0 24px;}
    .nav .wrap{gap:16px;}
    .nav-spacer{display:none;}
    .nav-cta{display:none;}
    .nav-toggle{display:flex;}
    .nav-links{
      display:none; position:absolute; top:100%; left:0; right:0;
      flex-direction:column; align-items:stretch; gap:0;
      background:var(--ink); border-bottom:1px solid var(--line); padding:4px 0 8px;
    }
    .nav-links.open{display:flex;}
    .nav-links a{padding:14px 24px; border-top:1px solid var(--line); font-size:15px;}
    .nav-links a:first-child{border-top:none;}
    .nav-links a::after{display:none;}
    section[id]{scroll-margin-top:70px;}

    .hero{padding:56px 0 64px;}
    .hero-flex{grid-template-columns:1fr; gap:40px;}
    h1{font-size:33px;}
    .hero-sub{font-size:16px;}
    .hero-ctas .btn{flex:1; min-width:200px;}
    .hero-parts{max-width:400px;}

    h2{font-size:27px;}
    .about{padding:56px 0 16px;}
    .pillars{grid-template-columns:1fr; gap:14px; margin-top:36px;}
    .pillar{padding:22px 20px;}
    .origins{padding:52px 0 56px;}
    .products{padding:56px 0 64px;}
    .cat-grid{grid-template-columns:repeat(2,1fr); gap:14px;}
    .cta-band{padding:24px; flex-direction:column; align-items:flex-start; gap:18px;}
    .cta-band .btn{width:100%;}
    .contact{padding:56px 0;}
    .contact-grid{grid-template-columns:1fr; gap:36px;}
    .form-card{padding:24px;}
    .field input, .field textarea{font-size:16px;} /* stops iOS zoom-on-focus */
    footer{padding:44px 0 24px;}
    .foot-links{gap:32px;}
    .to-top{right:16px; bottom:16px; width:42px; height:42px;}

    @media (hover:none){
      .btn:hover{transform:none; box-shadow:none;}
      .origin-col li:hover{padding-left:0; color:var(--ink);}
      .foot-col a:hover, .contact-direct a:hover{transform:none;}
      .pillar:hover, .cat-card:hover{transform:none;}
      .hero-parts .tile:hover{transform:none;}
      .hero-parts .tile:nth-child(2):hover, .hero-parts .tile:nth-child(4):hover{transform:translateY(26px);}
    }
  }
  @media (max-width: 560px){
    .wrap{padding:0 18px;}
    h1{font-size:28px;}
    h2{font-size:24px;}
    .cat-grid{grid-template-columns:1fr;}
    .cat-photo{aspect-ratio:3/2;}
    .origins-grid{grid-template-columns:1fr; gap:22px;}
    .field-row{grid-template-columns:1fr;}
    .enquiry-opt{padding:12px 14px; font-size:13px;}
    .foot-links{width:100%; gap:28px;}
    .hero-parts{grid-template-columns:1fr 1fr; max-width:100%;}
  }

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *, *::before, *::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
    .reveal, .reveal-soft, .rise{opacity:1 !important; transform:none !important;}
  }

  /* ===== FORM VALIDATION STATES (added for the Django backend) ===== */

  /* Honeypot. Positioned off-screen rather than display:none, because some bots
     skip fields that are explicitly hidden. */
  .hp-field{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;}

  .field-error{font-size:12px; color:#B3261E; margin-top:6px; font-weight:500;}
  .field.has-error label{color:#B3261E;}
  .field.has-error input, .field.has-error textarea{border-color:#B3261E; background:#FDF6F5;}
  .field.has-error input:focus, .field.has-error textarea:focus{border-color:#B3261E; box-shadow:0 0 0 3px rgba(179,38,30,0.14);}

  .form-banner{background:#FDF6F5; border:1px solid rgba(179,38,30,0.3); border-left:3px solid #B3261E;
               color:#8C1D18; font-size:13px; line-height:1.55; padding:11px 14px; border-radius:0 4px 4px 0; margin-bottom:18px;}

  /* Fallback for browsers without :focus-visible support in the button reset. */
  .field input:focus-visible, .field textarea:focus-visible{outline:none;}

  /* A section eyebrow with no heading under it has to carry the section by
     itself, so it is set much larger than the standard eyebrow. */
  .section-eyebrow--solo{
    font-size:1.95rem;              /* 31.2px */
    font-weight:700;
    letter-spacing:.14em; color:var(--accent-dark);
    margin-bottom:0;
  }
  .dark-section .section-eyebrow--solo{color:var(--accent-lt);}
  @media (max-width:860px){ .section-eyebrow--solo{font-size:1.575rem;} }   /* 25.2px */
  @media (max-width:560px){ .section-eyebrow--solo{font-size:1.35rem; letter-spacing:.1em;} }  /* 21.6px */

  /* ===== BRAND WORDMARK =====
     Outlined SVG: exact letterforms with no webfont, one cacheable request,
     crisp at any density. Height is set here and width left auto. The artwork is
     drawn in the light accent tier so it reads on the navy unaided - the white
     plate it used to sit on existed only because the old mark was near-black. */
  /* Sized in rem so the wordmark tracks the reader's browser font-size setting
     rather than ignoring it. 1rem = 16px at the default. */
  .oeg-wordmark{display:block; width:auto; transition:height .25s ease;}
  .nav .logo-link .oeg-wordmark{height:1.5625rem;}          /* 25px */
  .nav.scrolled .logo-link .oeg-wordmark{height:1.3125rem;} /* 21px */
  footer .logo-link .oeg-wordmark{height:5.375rem;}         /* 86px */

  @media (max-width:560px){
    /* The nav links collapse into the menu button here, so the wordmark keeps its
       full desktop size. */
    footer .logo-link .oeg-wordmark{height:4.375rem;}  /* 70px */
  }

  @media (max-width:359px){
    /* At 25px the wordmark is 251px wide and would run into the menu button on a
       320px screen. This is the only width where it has to give. */
    .nav .logo-link .oeg-wordmark{height:1.375rem;}    /* 22px */
  }