:root{
    --red:#E0002B;            /* flag red */
    --white:#FFFFFF;          /* snow white */
    --snow:#F5F7FA;
    --slate:#262B31;          /* granite gray */
    --slate-2:#2F3540;
    --sky:#6C8496;            /* steel sky blue */
    --pine:#275C4D;           /* alpine pine */
    --mist:rgba(255,255,255,.08);
    --mist-2:rgba(255,255,255,.14);
    --ink:#1B1F24;
    --text:#E8ECEF;
    --muted:#A9B5BF;
    --trans:0.45s cubic-bezier(.2,.6,.2,1);
    --radius:12px;
    --chamfer:10px;
    --maxw:1200px;
  }

  /* Base */
  *,*::before,*::after{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans",sans-serif;
    color:#0E141A;
    background:
      radial-gradient(1200px 600px at 10% -10%, rgba(108,132,150,.22), transparent 60%),
      radial-gradient(900px 450px at 110% -20%, rgba(39,92,77,.20), transparent 60%),
      linear-gradient(180deg, #0F1419 0%, #141A20 100%);
    background-attachment:fixed;
    line-height:1.6;
    font-variant-numeric:tabular-nums;
  }
  img{max-width:100%;height:auto;display:block}
  a{
    color:#C9D3DA;
    text-decoration:none;
    border-bottom:1px solid rgba(224,0,43,.35);
    transition:color var(--trans), border-color var(--trans), background var(--trans);
  }
  a:hover{color:#fff;border-color:var(--red)}
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
    outline:2px dashed var(--red);outline-offset:3px
  }
  h1,h2,h3,h4{
    margin:0 0 .6rem 0;
    color:#F3F6F8;
    letter-spacing:.12em;
    text-transform:uppercase;
  }
  p{color:#D3DAE0}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 1rem}
  .caps{letter-spacing:.18em;text-transform:uppercase}
  .muted{color:var(--muted)}
  .hair{
    border-top:1px solid rgba(255,255,255,.08)
  }
  /* Buttons */
  .btn{
    display:inline-grid; place-items:center;
    padding:.8rem 1.15rem;
    background:var(--red);
    color:#fff;
    border:1px solid rgba(255,255,255,.18);
    clip-path:polygon(0% 0%, calc(100% - var(--chamfer)) 0%, 100% var(--chamfer), 100% 100%, 0% 100%, 0% 0%);
    box-shadow:0 0 0 0 rgba(224,0,43,.0);
    transition:transform var(--trans), box-shadow var(--trans), background var(--trans), color var(--trans);
  }
  .btn:hover{
    transform:translateY(-1px);
    box-shadow:0 8px 24px -8px rgba(224,0,43,.45);
  }
  .btn.alt{
    background:transparent;color:#E6EDF3;border-color:rgba(255,255,255,.25)
  }
  .btn.alt:hover{background:rgba(255,255,255,.06)}
  /* Header / Nav */
  header.site-header{
    position:sticky; top:0; z-index:1000;
    backdrop-filter:saturate(130%) blur(10px);
    background:linear-gradient(180deg, rgba(18,23,28,.86), rgba(18,23,28,.65));
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .brand{
    display:flex;align-items:center;gap:.7rem;color:#fff;text-decoration:none;border:0
  }
  .brand .word{
    font-weight:800; letter-spacing:.18em;
  }
  .crest{
    width:34px;height:34px; flex:0 0 34px;
    background:
      conic-gradient(from 90deg at 12px 12px, var(--red) 0 25%, transparent 0 100%),
      radial-gradient(7px 7px at 80% 25%, var(--red) 99%, transparent),
      linear-gradient(135deg, #FFFFFF 0 12px, transparent 0),
      linear-gradient(180deg, #FFFFFF 0 12px, transparent 0);
    border-radius:6px;
    outline:1px solid rgba(255,255,255,.35);
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);
  }
  nav.primary{
    display:flex; align-items:center; justify-content:space-between;
    padding:.75rem 1rem;
  }
  #nav-toggle{display:none}
  .burger{
    width:42px;height:42px; display:grid; place-items:center; cursor:pointer; border-radius:8px;
    border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.04)
  }
  .burger span,.burger::before,.burger::after{
    content:""; display:block; width:22px; height:2px; background:#E6EDF3; transition:transform var(--trans), opacity var(--trans)
  }
  .burger::before{transform:translateY(-6px)}
  .burger::after{transform:translateY(6px)}
  .nav-list{
    list-style:none; margin:0; padding:0;
    display:none; flex-direction:column; gap:.6rem; text-align:right
  }
  .nav-list a{padding:.5rem .25rem; display:inline-block}
  #nav-toggle:checked ~ .nav-list{display:flex}
  #nav-toggle:checked + label.burger::before{transform:translateY(0) rotate(45deg)}
  #nav-toggle:checked + label.burger::after{transform:translateY(0) rotate(-45deg)}
  #nav-toggle:checked + label.burger span{opacity:0}

  @media (min-width:1200px){
    .burger{display:none}
    .nav-list{display:flex; flex-direction:row; gap:1.25rem}
    nav.primary{padding:1rem 0}
  }

  /* HERO */
  .hero{
    position:relative; overflow:hidden;
    padding:6rem 0 2.25rem; /* space under sticky header */
    background:
      linear-gradient(180deg, rgba(108,132,150,.18), rgba(39,92,77,.10) 45%, transparent),
      repeating-linear-gradient(120deg, rgba(255,255,255,.06) 0 1px, transparent 1px 12px);
  }
  .hero .inner{display:grid; gap:1.25rem; align-items:center}
  .hero h1{
    font-size:clamp(1.8rem, 4.2vw, 3.6rem);
    line-height:1.05; font-weight:900;
  }
  .hero .lead{color:#C9D3DA; max-width:52ch}
  /* simple CSS slider here */
  .slider{
    position:relative; overflow:hidden; border-radius:14px; border:1px solid rgba(255,255,255,.14);
    max-height:600px; background:#0F1419;
  }
  .slider input{display:none}
  .slides{display:flex; width:300%; transition:transform var(--trans)}
  .slide{
    width:100%; position:relative; overflow:hidden
  }
  .slide img{width:100%; height:min(60vh, 600px); object-fit:cover; filter:saturate(.65) contrast(1.05) brightness(.92)}
  .caption{
    position:absolute; left:0; right:0; bottom:0; padding:1rem 1.2rem;
    background:linear-gradient(180deg, transparent, rgba(0,0,0,.6) 60%, rgba(0,0,0,.7));
    color:#E8EEF4; letter-spacing:.08em
  }
  /* dots */
  .dots{
    position:absolute; left:0; right:0; bottom:.65rem; display:flex; justify-content:center; gap:.5rem
  }
  .dots label{
    width:12px; height:12px; border-radius:50%;
    background:rgba(255,255,255,.45); border:1px solid rgba(255,255,255,.75);
    cursor:pointer; transition:transform var(--trans), background var(--trans)
  }
  .dots label:hover{transform:scale(1.08)}
  #s1:checked ~ .slides{transform:translateX(0%)}
  #s2:checked ~ .slides{transform:translateX(-100%)}
  #s3:checked ~ .slides{transform:translateX(-200%)}
  #s1:checked ~ .dots label[for=s1], #s2:checked ~ .dots label[for=s2], #s3:checked ~ .dots label[for=s3]{background:var(--red)}
  .flight-path{
    height:2px; margin:.25rem 0 0 0;
    background-image:radial-gradient(circle at 50% 50%, rgba(224,0,43,.9) 2px, transparent 2px);
    background-size:12px 2px; background-repeat:repeat-x;
    opacity:.8
  }
  @media (min-width:768px){
    .hero .inner{grid-template-columns:1.1fr 1fr; gap:2rem}
  }
  @media (min-width:1200px){
    .hero{padding:7rem 0 3rem}
  }

  /* Sections (Cards) */
  main{display:block}
  section.category{padding:2.5rem 0}
  .section-head{
    display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; margin-bottom:1.2rem
  }
  .section-sub{font-size:.9rem; color:#B7C3CC}
  .grid{
    display:grid; gap:1rem;
    grid-template-columns:1fr;
  }
  @media (min-width:768px){ .grid{grid-template-columns:repeat(2,1fr)} }
  @media (min-width:1200px){ .grid{grid-template-columns:repeat(3,1fr)} }

  .card{
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.16);
    border-radius:12px;
    overflow:hidden; position:relative;
    transition:transform var(--trans), box-shadow var(--trans), border-color var(--trans)
  }
  .card:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 42px -18px rgba(0,0,0,.5);
    border-color:rgba(255,255,255,.28)
  }
  .card figure{margin:0; position:relative}
  .card figure::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.35) 70% 100%);
    pointer-events:none
  }
  .card .body{padding:.9rem 1rem; display:grid; gap:.35rem}
  .card h3{
    font-size:1rem; letter-spacing:.12em; line-height:1.3
  }
  .badge{
    display:inline-flex; align-items:center; gap:.35rem; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
    color:#E9EFF4; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); padding:.25rem .5rem; border-radius:6px
  }
  .meta{display:flex; gap:.8rem; font-size:.8rem; color:#B6C2CC}

  /* Variants per Section */
  /* Section #1 — Operations */
  .ops{
    background:
      linear-gradient(180deg, rgba(108,132,150,.10), rgba(108,132,150,.03)),
      repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 20px);
  }
  .ops .card{background:rgba(255,255,255,.07)}
  .ops .card:hover{box-shadow:0 20px 44px -22px rgba(108,132,150,.6)}
  /* Section #2 — Compliance (darker, denser) */
  .compliance{
    background:
      linear-gradient(180deg, rgba(38,43,49,.75), rgba(38,43,49,.65)),
      repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 1px, transparent 1px 18px);
    border-top:1px solid rgba(255,255,255,.08);
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .compliance .card{background:rgba(0,0,0,.22); border-color:rgba(255,255,255,.14)}
  .compliance .card:hover{box-shadow:0 24px 50px -24px rgba(0,0,0,.7)}
  /* Section #3 — Claims (pine tint) */
  .claims{
    background:
      linear-gradient(180deg, rgba(39,92,77,.16), rgba(39,92,77,.06)),
      repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 18px);
  }
  .claims .card{background:rgba(39,92,77,.15); border-color:rgba(39,92,77,.28)}
  .claims .card:hover{box-shadow:0 20px 44px -18px rgba(39,92,77,.55)}

  .ridgeline{
    height:3px; background:linear-gradient(90deg, var(--red), #fff 35%, rgba(255,255,255,.15) 60%, transparent);
    margin:.5rem 0 0; opacity:.9
  }

  /* Blog list */
  .blog-list{padding:2.5rem 0}
  .blog-list h2{margin-bottom:1rem}
  .blog-list ul{list-style:none;margin:0;padding:0; display:grid; gap:.8rem}
  .blog-list li{
    display:grid; grid-template-columns:88px 1fr; gap:.8rem; align-items:center;
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:10px; padding:.55rem .6rem;
    transition:transform var(--trans), border-color var(--trans)
  }
  .blog-list li:hover{transform:translateX(2px); border-color:rgba(255,255,255,.28)}
  .blog-list a{border-bottom:1px solid rgba(224,0,43,.35)}
  .blog-list img{width:88px;height:64px;object-fit:cover;border-radius:6px}

  /* Content center */
  .content-center{padding:2.8rem 0; display:grid; gap:1rem; justify-items:center}
  .content-center .image-center{
    max-width:780px; width:100%; border-radius:14px; overflow:hidden;
    border:1px solid rgba(255,255,255,.16)
  }
  .rating{
    margin-top:.5rem; font-weight:700; color:#F2F6F9; letter-spacing:.08em; text-transform:uppercase;
    background:rgba(224,0,43,.12); border:1px solid rgba(224,0,43,.45); padding:.4rem .6rem; border-radius:8px
  }
  .divider{
    --g: repeating-linear-gradient(90deg, rgba(255,255,255,.2) 0 1px, transparent 1px 9px);
    height:14px; width:min(680px, 92%); background:var(--g);
    mask:linear-gradient(90deg, transparent, #000 15% 85%, transparent)
  }
  article[itemscope]{
    max-width:820px; width:100%; padding:1rem 1rem 1.25rem;
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:12px
  }
  article[itemscope] h1{font-size:clamp(1.4rem, 3.1vw, 2.1rem)}
  .byline{display:flex; gap:.6rem; align-items:center; color:#B9C4CD; font-size:.9rem}
  .article-body p{margin:.6rem 0 1rem}
  .prev-next{
    display:flex; justify-content:space-between; width:100%; max-width:820px; margin-top:1rem
  }
  .prev-next a{padding:.5rem .75rem; border:1px solid rgba(255,255,255,.14); border-radius:8px; background:rgba(255,255,255,.04)}
  .comments{max-width:820px; width:100%; margin-top:1.2rem}
  .comments h3{font-size:1.05rem}
  .comment-form{
    display:grid; gap:.6rem; margin-top:.6rem
  }
  .comment-form input,.comment-form textarea,.contact form input,.contact form textarea,.contact form select,.modal form input,.modal form textarea,.modal form select{
    width:100%; padding:.7rem .8rem; border-radius:8px; border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.2); color:#EAF0F5
  }
  .comment-form button{justify-self:start}

  /* Related */
  .related{max-width:980px; width:100%; margin:1.6rem auto 0}
  .related-grid{display:grid; gap:1rem; grid-template-columns:1fr}
  @media(min-width:768px){ .related-grid{grid-template-columns:repeat(3,1fr)} }
  .related article{
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:10px; overflow:hidden; transition:transform var(--trans)
  }
  .related article:hover{transform:translateY(-3px)}
  .related h4{font-size:1rem; padding:.7rem .8rem}

  /* Contacts */
  .contact{padding:2.8rem 0; background:
      linear-gradient(180deg, rgba(39,92,77,.15), rgba(108,132,150,.10)),
      repeating-linear-gradient(120deg, rgba(255,255,255,.06) 0 1px, transparent 1px 14px)}
  .contact .grid2{display:grid; gap:1rem}
  @media(min-width:768px){ .contact .grid2{grid-template-columns:1.2fr .8fr} }
  .contact form{
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); padding:1rem; border-radius:12px; display:grid; gap:.6rem
  }
  .contact .aside{
    background:rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.12); padding:1rem; border-radius:12px
  }
  .map{
    width:100%; height:220px; border:1px solid rgba(255,255,255,.16); border-radius:12px
  }

  /* Aside promos and Modal */
  aside{padding:1.8rem 0}
  .promo{
    display:grid; gap:.6rem; grid-template-columns:1fr 1fr; max-width:var(--maxw); margin:0 auto; padding:0 1rem
  }
  .promo a{
    display:block; text-align:center; padding:.8rem; background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.14); border-radius:10px; transition:transform var(--trans), border-color var(--trans)
  }
  .promo a:hover{transform:translateY(-2px); border-color:rgba(255,255,255,.28)}
  @media(min-width:768px){ .promo{grid-template-columns:repeat(4,1fr)} }

  .modal{
    position:fixed; inset:0; display:none; place-items:center; padding:1rem;
    background:rgba(15,20,25,.66); z-index:9999
  }
  .modal:target{display:grid}
  .modal .panel{
    width:min(520px, 92vw); background:linear-gradient(180deg, rgba(38,43,49,.95), rgba(30,35,41,.95));
    border:1px solid rgba(255,255,255,.16); border-radius:14px; box-shadow:0 40px 90px -28px rgba(0,0,0,.7);
    padding:1rem 1rem 1.2rem; position:relative
  }
  .modal h3{margin-bottom:.5rem}
  .modal .close{
    position:absolute; top:.4rem; right:.5rem; width:36px; height:36px; display:grid; place-items:center;
    border:1px solid rgba(255,255,255,.18); border-radius:8px; background:rgba(255,255,255,.06); color:#fff; text-decoration:none; font-size:1.2rem; line-height:1
  }

  /* Footer */
  footer{
    background:
      linear-gradient(180deg, #171C21 0%, #12171C 100%),
      repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 18px);
    border-top:1px solid rgba(255,255,255,.12);
    color:#C9D3DA; padding:2rem 0 2.4rem
  }
  .micro-flag{
    height:6px; width:84px; background:
      linear-gradient(180deg, var(--red) 0 33%, #fff 33% 66%, var(--red) 66% 100%);
    border:1px solid rgba(255,255,255,.2); border-radius:4px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)
  }
  .footer-grid{display:grid; gap:1rem}
  @media(min-width:768px){ .footer-grid{grid-template-columns:1fr 1fr} }
  .slogan{font-weight:800; letter-spacing:.16em; text-transform:uppercase}
  .social{display:flex; gap:.9rem; list-style:none; margin:.6rem 0 0; padding:0}
  .social a{display:inline-block; padding:.35rem .55rem; border:1px solid rgba(255,255,255,.18); border-radius:8px; background:rgba(255,255,255,.04)}
  .copy{margin-top:1rem; font-size:.9rem; color:#92A1AC}

  /* Utilities */
  .oblique{
    border-left:3px solid var(--red);
    padding-left:.7rem; margin:.2rem 0 .6rem;
  }