/* =========================
   Variables
========================= */
:root{
    --header-h: 84px;               /* navbar height */
    --brand-red:#d8241d;
    --gray-cta:#9ca3af;
    --white:#fff;
    --accent:#f6c744;               /* active underline if needed */
    --blue:#2C7BE0;
    --text:#111;
    --max: 1500px;
    --form-hang: 40px;
  }
  
  /* =========================
     Base / Reset
  ========================= */
  *{ box-sizing:border-box }
  html,body{ margin:0 }
  body{
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: var(--text);
    line-height:1.5;
    background:#fff;
  }
  a{ color:inherit; text-decoration:none }
  img{ display:block; max-width:100%; height:auto }
  
  /* =========================
     Header (fixed overlay)
  ========================= */
  .site-header{
    position:fixed; top:0; left:0; right:0; z-index:50;
    height:var(--header-h);
    background: rgba(0,0,0,.55);      /* transparent over hero */
    color:#fff;
    transition: background .2s ease, box-shadow .2s ease;
  }
  .site-header.scrolled{
    background:#000;                  /* solid after scroll */
    box-shadow: 0 2px 0 rgba(255,255,255,.04), 0 8px 20px rgba(0,0,0,.25);
  }
  
  /* Layout: logo | nav | button */
  .header-inner{
    height:100%;
    display:grid;
    grid-template-columns: auto 1fr auto auto;
    align-items:stretch;
    padding:0 12px;                 /* left + right padding */
  }
  
  /* Logo */
  .logo{ display:flex; align-items:center }
  .logo img{ height:75px }
  
  /* =========================
     Primary Nav
  ========================= */
  .primary-nav{
    display:flex; justify-content:center; align-items:center;
    gap:28px; height:100%;
    color:#fff;
    font-weight:400;                 /* thinner text */
    text-transform:uppercase;
    letter-spacing:.02em;
  }
  .primary-nav > a,
  .primary-nav .nav-item > a{
    position:relative; opacity:.9;
  }
  .primary-nav > a:hover,
  .primary-nav .nav-item > a:hover{ opacity:1 }
  
  /* Active link */
  .primary-nav > a.active{ color: var(--accent); }
  
  /* Dropdown caret + menu */
  .nav-item{ position:relative }
  .has-drop > a::after{
    content:"▾"; margin-left:6px; font-size:.8em; opacity:.75;
  }
  .dropdown{
    position:absolute; top: calc(100% + 14px); left:0;
    min-width:220px;
    background:#111; color:#fff; border:1px solid #222;
    padding:8px 0; border-radius:4px;
    display:none; z-index:60;
  }
  .dropdown a{
    display:block; padding:10px 14px; color:#ddd;
    text-transform:none; font-weight:400;
  }
  .dropdown a:hover{ background:#1a1a1a; color:#fff }
  .has-drop:hover .dropdown{ display:block }
  /* Bridge the 14px gap under the link */
.primary-nav .has-drop{ position:relative; }
.primary-nav .has-drop::after{
  content:"";
  position:absolute;
  left:0; right:0;
  top:100%;
  height:14px;            /* must match the +14px above */
}

/* Keep menu open when hovering the dropdown itself (belt & suspenders) */
.primary-nav .has-drop:hover .dropdown,
.primary-nav .has-drop .dropdown:hover,
.primary-nav .has-drop:focus-within .dropdown{
  display:block;
}


  /* =========================
     Right CTA — Red Button
  ========================= */
  .cta-wrap{ display:flex; height:100% }
  .cta{
    display:flex; align-items:center; justify-content:center;
    height:100%; padding:0 44px;
    white-space:nowrap;
    font-weight:600;
    text-transform:uppercase;
    font-size:15px;
    letter-spacing:.5px;
  }
  .cta--red{
    background: var(--brand-red);
    color:#fff;
    border-radius:0;                  /* sharp square */
    min-width:240px;                  /* nice big block */
  }
  
  /* (Optional gray button if you still use it) */
  .cta--gray{
    background: var(--gray-cta);
    color:#111;
    border-radius:0;
    min-width:240px;
  }
  
  /* =========================
     Hero
  ========================= */
  .hero{
    position:relative;
    padding-top: var(--header-h);
    height: min(82vh, 680px);
    min-height:420px;
    color:#fff;
    display:grid; place-items:center; text-align:center;
    overflow:hidden;
  }
  .hero::before{
    content:""; position:absolute; inset:0; z-index:-2;
    background: url("https://lirp.cdn-website.com/090be438/dms3rep/multi/opt/BH5_1139-2880w.jpg") center/cover no-repeat;
    filter: brightness(.72);
    transform: scale(1.02);
  }
  .hero__title{
    font-size: clamp(40px, 6vw, 84px);
    font-weight:900; margin:0 16px;
    text-shadow:0 10px 40px rgba(0,0,0,.45);
  }
  .hero__deck{
    margin:12px 16px 0; max-width:900px;
    font-size: clamp(14px, 1.6vw, 18px);
    color: rgba(255,255,255,.95);
  }
  
  /* =========================
     Content
  ========================= */
  .section{
    max-width: var(--max);
    margin:0 auto;
    padding:64px 18px;
  }
  h1{
    font-size: clamp(28px, 4.2vw, 56px);
    line-height:1.05;
    margin:0 0 16px;
  }
  
  /* =========================
     Responsive
  ========================= */
  @media (max-width:1100px){
    .primary-nav{ gap:20px }
    .logo img{ height:42px }
    .cta--red{ min-width:200px; padding:0 28px }
  }
  @media (max-width:900px){
    .primary-nav{ display:none }
    .logo img{ height:36px }
    .cta--red{ min-width:unset; padding:0 18px; font-size:14px }
  }
  .cta--red{
    background: var(--brand-red);
    color:#fff;
    border-radius:0;      /* sharp square */
    min-width:240px;      /* nice big block */
  }
  /* --- Form overlay: sharp, clean, right-aligned, can extend past hero --- */
  
  /* Let the overlay spill below the hero if it's tall */
  .hero{ overflow: visible; }
  
  /* Keep it pinned to the visual right edge of your max width */
  .hero-form{
    position:absolute;
    right: max(16px, calc((100vw - var(--max)) / 2 - var(--form-hang)));
    top: calc(var(--header-h) + 16px);
    width: clamp(340px, 36vw, 540px);
    z-index: 3;
    
  }
  
  /* Card: square corners + cleaner shadow */
  .form-card{
    background:#fff;
    border-radius:0; /* sharp */
    border:1px solid #e7e7e7;
    box-shadow: 0 16px 60px rgba(0,0,0,.22);
    padding: 28px;
  }
  
  /* Title spacing/weight */
  .form-card h3{
    margin:0 0 18px;
    font-size:20px;
    font-weight:800;
    color:#111;
    letter-spacing:.02em;
  }
  
  /* Grid + field styling */
  .form-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:14px 14px;
  }
  
  .form-field{ display:flex; flex-direction:column; gap:6px }
  
  .form-field label{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:#6b7280;
    font-weight:700;
  }
  
  /* Inputs: square, crisp borders */
  .form-field input,
  .form-field textarea{
    width:100%;
    border:1px solid #d6dae1;       /* slightly darker for contrast */
    border-radius:0;                 /* sharp */
    padding:12px 12px;
    font: inherit;
    color:#111;
    background:#fff;
    outline:none;
    transition: border-color .12s ease, box-shadow .12s ease;
  }
  
  .form-field textarea{
    min-height:130px;
    resize:vertical;
    grid-column:1 / -1;
  }
  
  .form-field input:focus,
  .form-field textarea:focus{
    border-color:#2C7BE0;
    box-shadow:0 0 0 2px rgba(44,123,224,.15);
  }
  
  /* Submit: square button; make blue or switch to brand red if you prefer */
  .form-actions{ grid-column:1 / -1; margin-top:6px; }
  
  .btn-submit{
    width:100%;
    height:52px;
    border:0;
    border-radius:0;                /* sharp */
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:#fff;
    background: linear-gradient(90deg,#db1a14,#d8241d);
    cursor:pointer;
  }
  .btn-submit:hover{ filter:brightness(1.06) }
  
  /* Optional: red submit button instead of blue */
  /* .btn-submit{ background: var(--brand-red); } */
  
  /* Mobile: center the form under the headline */
  @media (max-width: 980px){
    .hero-form{
      position:relative;
      right:auto; top:auto;
      width:min(92vw, 540px);
      margin-top:18px;
    }
    .form-grid{ grid-template-columns: 1fr; }
  }
  
  
  /* Clean, right-aligned, stacked hamburger */
  .hamburger{
    display:none;                 /* shown below at <=900px */
    width:36px; height:36px;
    padding:0; margin:0;
    background:transparent !important;
    border:0; box-shadow:none; border-radius:0;
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    -webkit-tap-highlight-color: transparent;
  
    align-items:center;
    justify-content:center;
    flex-direction:column;        /* <— stack vertically */
    gap:4px;                      /* space between bars */
    cursor:pointer;
  }
  
  /* the bars */
  .hamburger span{
    width:22px; height:2px;
    background:#fff;
    border-radius:1px;
    transition:transform .2s ease, opacity .2s ease;
  }
  
  /* “X” state */
  .hamburger.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg) }
  .hamburger.is-open span:nth-child(2){ opacity:0 }
  .hamburger.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg) }
  
  /* focus ring */
  .hamburger:focus-visible{
    outline:2px solid rgba(255,255,255,.9);
    outline-offset:2px;
  }
  
  /* mobile: show and pin to far right grid edge */
  @media (max-width:900px){
    .hamburger{ display:flex; justify-self:end; }
  }
  
  
  
  /* ==== Mobile drawer ==== */
  .mobile-menu{ position:fixed; inset:0; z-index:60; pointer-events:none }
  .mobile-menu.open{ pointer-events:auto }
  .mobile-backdrop{
    position:absolute; inset:0; background:rgba(0,0,0,.4);
    opacity:0; transition:opacity .2s ease;
  }
  .mobile-menu.open .mobile-backdrop{ opacity:1 }
  .mobile-panel{
    position:absolute; top:var(--header-h); right:0; bottom:0;
    width:min(86vw, 380px);
    background:#0f0f10; color:#fff; border-left:1px solid #191919;
    transform:translateX(100%); transition:transform .25s ease;
    overflow:auto; padding:18px;
  }
  .mobile-menu.open .mobile-panel{ transform:translateX(0) }
  
  /* Drawer contents */
  .mobile-link{
    display:block; padding:12px 6px; color:#eee; text-transform:uppercase; font-weight:600;
    border-bottom:1px solid #191919;
  }
  .mobile-link.active{ color:#2C7BE0 }
  .mobile-group{ border-bottom:1px solid #191919; padding:8px 0 }
  .mobile-group > summary{
    list-style:none; cursor:pointer; user-select:none; outline:none;
    padding:10px 6px; color:#eee; text-transform:uppercase; font-weight:700;
  }
  .mobile-group > summary::-webkit-details-marker{ display:none }
  .mobile-sub{ padding:0 6px 10px 10px; display:grid; gap:8px }
  .mobile-sub a{ color:#cfcfcf; text-transform:none; font-weight:600 }
  
  /* Mobile panel CTA */
  .mobile-cta{
    display:block; margin-top:16px; text-align:center;
    background:var(--brand-red); color:#fff;
    padding:12px 14px; font-weight:800; text-transform:uppercase;
  }
  
  /* ==== Responsive header switches ==== */
  @media (max-width:900px){
    .primary-nav{ display:none; }   /* hide desktop nav */
    .cta-wrap{ display:none; }      /* hide red CTA */
    .hamburger{ display:flex; }     /* show hamburger on the far-right grid col */
    .logo img{ height:36px; }
  }
  
  .form-field--full { grid-column: 1 / -1; }
  
  /* Keep existing hero-form mobile rules; they already center the form */
  






  .subpage-banner {
    position: relative;
    padding: 120px 18px 80px; /* top spacing accounts for fixed header */
    color: #fff;
    text-align: center;
  }
  .subpage-banner .overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
  }
  .subpage-banner .container {
    position: relative;
    z-index: 1;
  }
  .subpage-banner h1 {
    font-size: clamp(32px, 5vw, 60px);
    font-weight: 900;
    margin-bottom: 18px;
    text-shadow: 0 8px 30px rgba(0,0,0,.45);
  }
  .subpage-banner .breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 0;
  }
  .subpage-banner .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255,255,255,.6);
  }

  .section p {
    margin-bottom: 1.2em;
    font-size: 17px;
    color: #333;
  }
  .section ul {
    margin: 0 0 1.5em 1.2em;
    padding: 0;
  }
  .section li {
    margin-bottom: .5em;
    line-height: 1.5;
  }

  .card h3 {
    font-size: 22px;
    color: var(--brand-red);
    text-transform: uppercase;
  }
  .btn-primary {
    background: var(--brand-red) !important;
    color: white !important;
    border: 0;
    font-weight: 700;
    letter-spacing: .03em;
    border-radius: 0px !important;
    width: 100% !important;
  }
  .btn-primary:hover {
    filter: brightness(1.1);
  }
  












  /* ---------- Subpage banner ---------- */
  .subpage-banner{
    position:relative;
    padding: 140px 18px 80px; /* header space + bottom breathing room */
    color:#fff; text-align:center; overflow:hidden;
  }
  .subpage-banner .overlay{ position:absolute; inset:0; background:rgba(0,0,0,.55); }
  .subpage-banner .container{ position:relative; z-index:1; max-width: var(--max); margin:0 auto; }
  .subpage-banner h1{
    margin:0 0 12px; font-weight:900;
    font-size: clamp(36px, 5.5vw, 64px);
    text-shadow: 0 10px 40px rgba(0,0,0,.45);
  }
  .subpage-banner .breadcrumb{ margin:0; padding:0; background:transparent; }
  .subpage-banner .breadcrumb-item + .breadcrumb-item::before{ color:rgba(255,255,255,.7); }
  
  /* ---------- Page layout ---------- */
  #about > .container{
    max-width: var(--max);
    margin: 0 auto;
    padding: 48px 18px 80px;
  }
  
  /* Two-column grid (emulates col-md-8 / col-md-4) */
  #about > .container > .row{
    display:grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 32px;
  }
  @media (max-width: 980px){
    #about > .container > .row{ grid-template-columns: 1fr; }
  }
  
  /* ---------- Typographic polish ---------- */
  #about p{ margin-bottom: 1.1em; font-size: 17px; color:#2b2b2b; }
  #about ul{ margin: 0 0 1.3em 1.2em; }
  #about li{ margin-bottom: .45em; }
  
  /* ---------- Card look (content + sidebar) ---------- */

  .card-body{ padding: 26px; }
  .card.accent-left{ border-left: 6px solid var(--brand-red); }  /* red stripe */


  .card{
    background:#fff;
    border:1px solid #e9e9e9;
    border-radius: 0; /* <-- sharp edges */
    box-shadow: 0 14px 28px rgba(16,16,16,.08);
    overflow:hidden;
  }
  
  /* Red left border accent */
  .card.accent-left{
    border-left: 6px solid var(--brand-red);
  }

  
  /* ---------- Image gallery grid ---------- */
  #about .row.g-3{
    /* make the inner image row a responsive grid (instead of relying on BS) */
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
  @media (max-width: 900px){
    #about .row.g-3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 520px){
    #about .row.g-3{ grid-template-columns: 1fr; }
  }
  .gallery-img{
    width:100%; height:auto; border-radius: 10px;
    box-shadow: 0 8px 18px rgba(0,0,0,.10);
    transition: transform .18s ease, box-shadow .18s ease;
    cursor:pointer;
  }
  .gallery-img:hover{
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(0,0,0,.16);
  }
  
  /* ---------- Sidebar form styling ---------- */
  #about .card h3{
    font-size: 22px; letter-spacing:.02em; text-transform: uppercase;
    font-weight: 800; text-align:center; margin: 0 0 16px;
  }
  .form-label{
    font-size: 12px; text-transform: uppercase; letter-spacing:.05em;
    color:#6b7280; font-weight:700; margin-bottom:6px; display:block;
  }
  .form-control{
    width:100%; border:1px solid #d6dae1; border-radius: 0px;
    padding: 12px 12px; font: inherit; color:#111; background:#fff; outline:none;
    transition: border-color .12s ease, box-shadow .12s ease;
  }
  .form-control:focus{
    border-color:#2C7BE0; box-shadow: 0 0 0 3px rgba(44,123,224,.16);
  }
  .btn.btn-primary{
    border:0; border-radius: 10px; height:52px; font-weight:800;
    text-transform: uppercase; letter-spacing:.04em;
    background: linear-gradient(90deg,#1f6cd6,#2C7BE0);
  }
  .btn.btn-primary:hover{ filter: brightness(1.06); }
  
  /* ---------- Small fixes ---------- */
  /* keep your global container spacing consistent even though we're not using BS */
  .container{ max-width: var(--max); margin:0 auto; }