:root {
      /* ---------- Brand scale ----------
         One hue (deep wine, ~340deg) carried through every tint and shade.
         Anything light-on-dark uses the -lighter/-light end; anything sitting
         on a light surface uses --brand or --brand-dark so text keeps its
         contrast ratio. */
      --brand: #891B3F;          /* PRIMARY */
      --brand-mid: #A82E56;      /* gradient light stop on large panels */
      --brand-light: #C75B7E;     /* gradient light stop / on-dark accent */
      --brand-lighter: #E8A9BC;   /* accent text + icons on dark surfaces */
      --brand-chalk: #F4CEDC;    /* small accent text on the semi-transparent navbar */
      --brand-deep: #5C0D2A;      /* gradient dark stop / shadow source */
      --brand-dark: #3B0718;      /* deepest shade */

      /* ---------- Dark surfaces / heading ink ---------- */
      --surface-dark: #160810;
      --surface-dark-2: #4A1024;

      /* ---------- Neutrals ---------- */
      --ink: #2C1119;             /* body copy */
      --ink-soft: #64414F;        /* secondary copy on light */
      --muted: #6E5761;
      --cream: #F8ECF1;           /* blush section background */
      --line: #E7D8DF;            /* hairlines, borders, form controls */
      --line-soft: #EFE0E7;       /* tracks, table rules */
      --ghost: #F1E3EA;           /* oversized ghost numerals */
      --indicator: #DCBFCB;       /* inactive carousel bars */

      /* ---------- Text on dark surfaces ---------- */
      --on-dark: #EFDCE3;
      --on-dark-soft: #EBD9E1;
      --on-dark-mute: #BFA3AF;
      --on-dark-badge: #F3E1E8;

      /* ---------- RGB triples for rgba(var(--x), a) ---------- */
      --brand-rgb: 137, 27, 63;
      --brand-light-rgb: 199, 91, 126;
      --brand-lighter-rgb: 232, 169, 188;
      --brand-deep-rgb: 92, 13, 42;
      --surface-black-rgb: 9, 3, 8;
      --shadow-rgb: 43, 6, 18;

      --section-y: 88px;
    }

    @media (max-width: 1199.98px) { :root { --section-y: 76px; } }
    @media (max-width: 991.98px)  { :root { --section-y: 64px; } }
    @media (max-width: 767.98px)  { :root { --section-y: 52px; } }
    @media (max-width: 575.98px)  { :root { --section-y: 44px; } }

    html { scroll-behavior: smooth; scroll-padding-top: 78px; }

    body {
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      color: var(--ink);
      background: #ffffff;
      overflow-x: hidden;
    }

    h1, h2, h3, h4, h5, h6,
    .navbar-brand, .section-title, .stat-num, .display-font {
      font-family: 'Poppins', 'Inter', sans-serif;
      letter-spacing: -.5px;
    }

    /* ---------- Navbar ---------- */
    .navbar {
      background: rgba(var(--brand-rgb), .94);
      backdrop-filter: blur(14px);
      box-shadow: 0 2px 24px rgba(var(--brand-deep-rgb), .5);
    }
    .navbar-brand { font-size: 1.05rem; white-space: nowrap; }
    .navbar-brand .brand-name { line-height: 1.15; }

    /* Menu: links sit in a translucent capsule; the current page gets the
       brand gradient fill. */
    .capsule-nav {
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(var(--brand-light-rgb), .22);
      border-radius: 999px;
      padding: 5px;
      gap: 2px;
    }
    .navbar .capsule-nav .nav-link {
      border-radius: 999px;
      padding: 9px 15px;
      font-size: .76rem;
      font-weight: 600;
      letter-spacing: .11em;
      text-transform: uppercase;
      color: var(--on-dark);
      white-space: nowrap;
      transition: color .2s, background .25s, box-shadow .25s;
    }
    .navbar .capsule-nav .nav-link:hover {
      color: var(--brand-lighter);
      background: rgba(var(--brand-light-rgb), .14);
    }
    .navbar .capsule-nav .nav-link.active {
      color: #fff;
      background: linear-gradient(135deg, var(--brand-mid) 0%, var(--brand) 45%, var(--brand-deep) 100%);
      box-shadow: 0 6px 18px rgba(var(--brand-deep-rgb), .38);
    }
    .navbar .capsule-nav .dropdown-toggle::after {
      margin-left: 8px;
      vertical-align: middle;
      opacity: .8;
    }
    .capsule-nav .dropdown-menu {
      background: rgba(var(--brand-deep-rgb), .98);
      border: 1px solid rgba(var(--brand-light-rgb), .22);
      border-radius: 14px;
      padding: 8px;
      margin-top: 10px;
      box-shadow: 0 18px 44px rgba(var(--surface-black-rgb), .45);
    }
    .capsule-nav .dropdown-item {
      color: var(--on-dark);
      border-radius: 8px;
      font-size: .88rem;
      padding: 9px 12px;
    }
    .capsule-nav .dropdown-item:hover,
    .capsule-nav .dropdown-item:focus {
      background: rgba(var(--brand-light-rgb), .14);
      color: var(--brand-lighter);
    }
    .capsule-nav .dropdown-item i { color: var(--brand-light); }
    .capsule-nav .dropdown-divider { border-color: rgba(var(--brand-light-rgb), .18); }

    @media (max-width: 991.98px) {
      .capsule-nav { border-radius: 20px; padding: 8px; }
      .navbar .capsule-nav .nav-link { padding: 11px 16px; font-size: .82rem; }
    }
    /* Between the burger breakpoint and the first full container width the
       capsule, the wordmark and the CTA button have to share ~960px. */
    @media (min-width: 992px) and (max-width: 1199.98px) {
      .navbar .capsule-nav .nav-link { padding: 9px 11px; font-size: .72rem; letter-spacing: .08em; }
      .navbar-brand { font-size: .95rem; }
    }

    .brand-mark {
      width: 38px; height: 38px;
      display: grid; place-items: center;
      border-radius: 10px;
      /* Light tile with dark ink: the navbar and footer are both --brand or
         darker, so a mid-wine tile would disappear into them. */
      background: linear-gradient(135deg, var(--brand-light) 0%, var(--brand-lighter) 100%);
      color: var(--brand-dark);
      font-size: 1.2rem;
      box-shadow: 0 6px 18px rgba(var(--brand-deep-rgb), .45);
    }

    /* ---------- Buttons ---------- */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .btn-row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }
    .btn-row > .btn { margin: 0; }
    @media (max-width: 575.98px) { .btn-row > .btn { width: 100%; } }
    .btn-gold {
      background: linear-gradient(135deg, var(--brand-mid) 0%, var(--brand) 45%, var(--brand-deep) 100%);
      color: #fff;
      font-weight: 700;
      border: 2px solid transparent;
      box-shadow: 0 10px 28px rgba(var(--brand-deep-rgb), .38);
      transition: .2s;
    }
    .btn-gold:hover {
      background: linear-gradient(135deg, var(--brand-deep) 0%, var(--brand-dark) 100%);
      box-shadow: 0 14px 34px rgba(var(--brand-deep-rgb), .55);
      color: #fff;
      transform: translateY(-2px);
    }
    .btn-outline-gold {
      color: var(--brand-dark);
      border: 2px solid var(--brand-dark);
      background: rgba(var(--brand-deep-rgb), .06);
      font-weight: 600;
      transition: .2s;
    }
    .btn-outline-gold:hover {
      background: linear-gradient(135deg, var(--brand-deep), var(--brand-dark));
      border-color: transparent;
      color: #fff;
      transform: translateY(-2px);
      box-shadow: 0 12px 28px rgba(var(--brand-deep-rgb), .35);
    }
    .hero .btn-outline-gold,
    .cta-band .btn-outline-gold,
    .page-hero .btn-outline-gold,
    footer .btn-outline-gold {
      color: var(--brand-lighter);
      border-color: rgba(var(--brand-light-rgb), .75);
      background: rgba(var(--brand-light-rgb), .1);
    }
    .hero .btn-outline-gold:hover,
    .cta-band .btn-outline-gold:hover,
    .page-hero .btn-outline-gold:hover,
    footer .btn-outline-gold:hover {
      background: var(--brand);
      border-color: var(--brand);
      color: #fff;
      box-shadow: 0 12px 30px rgba(var(--brand-light-rgb), .4);
    }

    /* ---------- Hero Slider ---------- */
    .hero {
      position: relative;
      color: #fff;
      background: #fff;
      overflow: hidden;
    }
    .hero-slide {
      min-height: 88vh;
      display: flex;
      align-items: center;
      position: relative;
      background: #fff;
    }
    .slide-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      z-index: 0;
    }
    /* No ::after scrim on purpose. The photos are night shots and are dark
       enough for white text on their own; tinting or darkening them flattened
       the contrast the photography was chosen for. The headline and lead
       carry a tight text-shadow instead, which only touches pixels under the
       glyphs and leaves the rest of the frame at 100% original. */
    .hero-slide > .container { position: relative; z-index: 3; }
    .hero h1,
    .hero h2 {
      font-weight: 800;
      line-height: 1.15;
      font-size: clamp(2.1rem, 4.6vw, 3.5rem);
      text-shadow: 0 1px 2px rgba(var(--surface-black-rgb), .9), 0 2px 26px rgba(var(--surface-black-rgb), .85);
    }
    .hero .lead { color: var(--on-dark-soft); max-width: 620px; text-shadow: 0 1px 3px rgba(var(--surface-black-rgb), .9), 0 1px 10px rgba(var(--surface-black-rgb), .8); }
    .hero .carousel-indicators { margin-bottom: 26px; }
    .hero .carousel-indicators [data-bs-target] {
      background: linear-gradient(90deg, var(--on-dark), var(--brand-lighter));
      width: 34px; height: 4px;
      border-radius: 4px;
      margin: 0 4px;
      opacity: .45;
      transition: opacity .3s;
    }
    .hero .carousel-indicators .active { opacity: 1; box-shadow: 0 0 14px rgba(var(--brand-light-rgb), .8); }
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
      width: 46px; height: 46px;
      background-color: var(--brand-deep);
      background-size: 38% 38%;
      border-radius: 50%;
      opacity: 1;
      box-shadow: 0 8px 22px rgba(var(--brand-deep-rgb), .45);
    }
    .hero .carousel-control-prev,
    .hero .carousel-control-next { width: 8%; z-index: 4; }
    @media (max-width: 991.98px) {
      .hero .carousel-control-prev,
      .hero .carousel-control-next { width: 14%; }
      .hero-slide { min-height: 72vh; }
    }

    /* Mobile: the headline and intro are clamped to two lines each so the
       photo keeps most of the viewport, and the copy drops to the bottom of
       the frame (text sits low on small screens, not on the left). */
    @media (max-width: 767.98px) {
      .hero-slide {
        min-height: 88vh;
        min-height: 88svh;
        align-items: flex-end;
        padding-bottom: 60px;
      }
      .hero .container { max-width: 100%; }
      .hero h1,
      .hero h2 {
        font-size: clamp(1.6rem, 7.4vw, 2.1rem);
        line-height: 1.2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
      }
      .hero .lead {
        font-size: .95rem;
        line-height: 1.5;
        margin-top: .5rem !important;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
      }
      .slide-tag {
        font-size: .7rem;
        letter-spacing: 1px;
        padding: 5px 10px;
        margin-bottom: .5rem !important;
      }
      .hero-cta { gap: .5rem; margin-top: 1rem !important; }
      .hero-cta .btn {
        font-size: .92rem;
        padding: .6rem 1.1rem;
        border-radius: 10px;
      }
      .hero-badges { display: none; }
      .hero .carousel-indicators { margin-bottom: 14px; }
      .carousel-control-prev-icon,
      .carousel-control-next-icon { width: 38px; height: 38px; }
    }

    .slide-tag {
      display: inline-block;
      background: linear-gradient(90deg, rgba(var(--brand-deep-rgb), .35), rgba(var(--brand-light-rgb), .18));
      border-left: 3px solid var(--brand-light);
      color: #fff;
      font-size: .8rem;
      font-weight: 600;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      padding: 7px 14px;
      border-radius: 4px;
      backdrop-filter: blur(6px);
    }

    /* floating trust card */
    .shield {
      width: 96px; height: 96px;
      display: grid; place-items: center;
      margin: 0 auto;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--brand-mid) 0%, var(--brand) 45%, var(--brand-dark) 100%);
      color: #fff;
      font-size: 2.6rem;
      box-shadow: 0 0 0 12px rgba(var(--brand-light-rgb), .14), 0 12px 30px rgba(var(--brand-deep-rgb), .4);
    }

    .icon-circle {
      width: 54px; height: 54px;
      display: grid; place-items: center;
      border-radius: 14px;
      background: linear-gradient(135deg, rgba(var(--brand-deep-rgb), .16), rgba(var(--brand-light-rgb), .18));
      color: var(--brand);
      font-size: 1.5rem;
    }

    /* ---------- Sections ---------- */
    .section { padding: var(--section-y) 0; }
    .section-alt { background: var(--cream); }
    .section-tint { background: linear-gradient(180deg, #fff 0%, var(--cream) 100%); }

    .eyebrow {
      color: var(--brand-dark);
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      font-size: .82rem;
    }
    .section-title {
      font-weight: 800;
      color: var(--surface-dark);
      margin-top: 6px;
    }
    .title-underline {
      width: 70px; height: 4px;
      background: linear-gradient(90deg, var(--brand), var(--brand-dark));
      border-radius: 4px;
      box-shadow: 0 0 14px rgba(var(--brand-light-rgb), .5);
    }

    /* ---------- Cards ---------- */
    .card-service {
      border: 0;
      border-radius: 16px;
      padding: 30px 26px;
      height: 100%;
      background: #fff;
      box-shadow: 0 8px 26px rgba(var(--shadow-rgb), .08);
      transition: transform .25s ease, box-shadow .25s ease;
    }
    .card-service:hover {
      transform: translateY(-8px);
      box-shadow: 0 18px 40px rgba(var(--shadow-rgb), .16);
    }
    .card-service h5 { font-weight: 700; color: var(--surface-dark); }
    .card-service p { color: var(--muted); font-size: .95rem; margin: 0; }
    .service-tag {
      font-size: .75rem;
      font-weight: 700;
      color: var(--brand-dark);
      background: rgba(var(--brand-deep-rgb), .1);
      padding: 4px 10px;
      border-radius: 20px;
    }

    /* ---------- Members ---------- */
    .card-member {
      position: relative;
      overflow: hidden;
      height: 100%;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 16px;
      text-align: center;
      box-shadow: 0 10px 30px rgba(var(--shadow-rgb), .1);
      transition: transform .25s ease, box-shadow .25s ease;
    }
    .card-member:hover {
      transform: translateY(-8px);
      box-shadow: 0 18px 40px rgba(var(--shadow-rgb), .18);
    }
    .member-photo {
      position: relative;
      aspect-ratio: 4 / 5;
      overflow: hidden;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, var(--brand-mid) 0%, var(--brand) 45%, var(--brand-deep) 100%);
    }
    .member-photo img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* Anchor to the top, not to a point part-way down: a panel upload is
         usually a full-length portrait, and the 4:5 frame then throws away
         a third of its height. Taking that from the bottom leaves heads
         intact; 18% clipped the top of whoever was photographed standing. */
      object-position: center top;
      transition: transform .35s ease;
    }
    .card-member:hover .member-photo img { transform: scale(1.06); }
    .member-initials {
      font-family: 'Poppins', sans-serif;
      font-weight: 800;
      font-size: 1.7rem;
      letter-spacing: 1px;
      color: #fff;
    }
    .member-info { padding: 20px 20px 24px; }
    .card-member h5 { font-weight: 700; color: var(--surface-dark); margin-bottom: 3px; }
    .member-role {
      display: block;
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .6px;
      text-transform: uppercase;
      color: var(--brand-dark);
      margin-bottom: 10px;
    }
    .card-member p { color: var(--muted); font-size: .88rem; }
    .member-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
    .member-tags span {
      font-size: .7rem;
      font-weight: 700;
      color: var(--brand-dark);
      background: rgba(var(--brand-deep-rgb), .08);
      padding: 3px 10px;
      border-radius: 20px;
    }

    /* ---------- Members slider ---------- */
    .member-slider { position: relative; }
    .member-slider-viewport {
      overflow: hidden;
      padding: 6px 66px;
    }
    .member-slider-track {
      display: flex;
      transition: transform .45s ease;
    }
    .member-slide { flex: 0 0 25%; padding: 0 10px; }
    .member-slide .card-member { box-shadow: 0 14px 34px rgba(var(--shadow-rgb), .16); }
    .member-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 3;
      border: 0;
      background: transparent;
      padding: 0;
      opacity: 1;
      transition: opacity .25s ease;
    }
    .member-arrow-prev { left: 4px; }
    .member-arrow-next { right: 4px; }
    .member-arrow.is-disabled { opacity: .3; pointer-events: none; }
    @media (max-width: 991.98px) {
      .member-slide { flex: 0 0 50%; }
      .member-slider-viewport { padding: 6px 58px; }
    }
    @media (max-width: 575.98px) {
      .member-slide { flex: 0 0 100%; }
      .member-slider-viewport { padding: 6px 0; }
      .member-arrow {
        top: auto;
        bottom: 0;
        transform: none;
        width: 38px; height: 38px;
      }
      .member-arrow-prev { left: 4px; }
      .member-arrow-next { right: 4px; }
      .member-arrow .carousel-control-prev-icon,
      .member-arrow .carousel-control-next-icon { width: 38px; height: 38px; }
    }

    /* ---------- Stats ---------- */
    .stats-strip {
      background:
        radial-gradient(circle at 15% 0%, rgba(var(--brand-lighter-rgb), .3), transparent 45%),
        linear-gradient(120deg, var(--brand-dark) 0%, var(--brand-deep) 45%, var(--brand) 100%);
      color: #fff;
      padding: 36px 0;
    }
    .stats-strip .stat-num {
      color: var(--brand-lighter);
      font-size: 2.4rem;
      text-shadow: 0 0 26px rgba(var(--brand-light-rgb), .45);
    }
    .stats-strip .stat-label { color: var(--on-dark-mute); }
    .stat-num { font-size: 2.6rem; font-weight: 800; color: var(--surface-dark); line-height: 1; }
    .stat-label { color: var(--muted); font-size: .88rem; }

    .promise-card {
      background: linear-gradient(150deg, var(--brand) 0%, var(--brand-deep) 55%, var(--brand-dark) 100%);
      color: var(--on-dark-soft);
      border-radius: 18px;
      box-shadow: 0 18px 44px rgba(var(--shadow-rgb), .3);
    }
    .promise-card .shield {
      width: 72px; height: 72px;
      font-size: 2rem;
      box-shadow: 0 0 0 10px rgba(var(--brand-light-rgb), .14), 0 10px 24px rgba(var(--brand-deep-rgb), .4);
    }
    .promise-card li { font-size: .92rem; }

    /* promise-card is a wine panel, but these children ship light-section
       colours. Scoped here instead of globally: the same .icon-circle /
       .text-warning / .text-white-50 classes are correct on white cards. */
    .promise-card .text-warning { color: var(--brand-lighter) !important; }
    .promise-card .text-white-50 { color: var(--on-dark-soft) !important; }
    .promise-card .border-secondary { border-color: rgba(var(--brand-light-rgb), .28) !important; }
    /* dark ink on a light tile, matching the header logo mark */
    .promise-card .icon-circle {
      background: linear-gradient(135deg, var(--brand-lighter), var(--brand-chalk));
      color: var(--brand-dark);
    }
    .promise-card .skill-row .d-flex { color: var(--on-dark); }
    .promise-card .skill-track { background: rgba(255, 255, 255, .18); }
    .promise-card .skill-fill { background: linear-gradient(90deg, var(--brand-lighter), var(--brand-chalk)); }

    /* ---------- Projects ---------- */
    /* The card is a <button>: it opens the lightbox, so the native button
       resets are needed here as well as the card styling. */
    .project-card {
      border: 0;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 8px 26px rgba(var(--shadow-rgb), .1);
      transition: transform .25s ease, box-shadow .25s ease;
      height: 100%;
      cursor: pointer;
      width: 100%;
      padding: 0;
      text-align: left;
      font: inherit;
      color: inherit;
    }
    .project-card:focus-visible {
      outline: 3px solid var(--brand);
      outline-offset: 3px;
    }
    .project-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 18px 40px rgba(var(--shadow-rgb), .2);
    }
    .project-meta {
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .5px;
      color: var(--brand-dark);
    }

    /* ---------- Images ---------- */
    .img-frame {
      position: relative;
      overflow: hidden;
      background: linear-gradient(135deg, var(--surface-dark-2), var(--brand));
    }
    .img-frame img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .5s ease;
    }
    .project-card:hover .img-frame img,
    .img-hover:hover .img-frame img { transform: scale(1.07); }
    .img-frame.tall { height: 340px; }
    .img-frame.short { height: 220px; }
    .project-badge {
      position: absolute;
      top: 14px; left: 14px;
      background: linear-gradient(90deg, var(--brand-dark), var(--brand-deep));
      color: #fff;
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: 1px;
      padding: 6px 12px;
      border-radius: 20px;
      backdrop-filter: blur(4px);
    }

    /* ---------- Footer ---------- */
    footer {
      background: linear-gradient(180deg, var(--brand-deep) 0%, var(--brand-dark) 100%);
      color: var(--on-dark-mute);
      border-top: 1px solid rgba(var(--brand-light-rgb), .22);
    }
    footer h6 { color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: .9rem; }
    footer a { color: var(--on-dark-mute); text-decoration: none; transition: .2s; }
    footer a:hover { color: var(--brand-lighter); }
    .social-circle {
      width: 38px; height: 38px;
      display: inline-grid; place-items: center;
      border: 1px solid rgba(var(--brand-light-rgb), .35);
      border-radius: 50%;
      color: var(--on-dark);
      transition: .2s;
    }
    .social-circle:hover {
      background: linear-gradient(135deg, var(--brand), var(--brand-dark));
      color: #fff;
      border-color: transparent;
      box-shadow: 0 8px 20px rgba(var(--brand-deep-rgb), .4);
    }

    /* ---------- Animations ---------- */
    .reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s ease; }
    .reveal.show { opacity: 1; transform: none; }
    @media (prefers-reduced-motion: reduce) {
      .reveal { opacity: 1; transform: none; }
      html { scroll-behavior: auto; }
    }

    /* ---------- Preloader ---------- */
    #preloader {
      position: fixed;
      inset: 0;
      z-index: 2000;
      background:
        radial-gradient(circle at 50% 45%, rgba(var(--brand-light-rgb), .4), transparent 55%),
        linear-gradient(160deg, var(--brand) 0%, var(--brand-deep) 100%);
      display: grid;
      place-items: center;
      transition: opacity .5s ease, visibility .5s ease;
    }
    #preloader.hidden { opacity: 0; visibility: hidden; }
    .preloader-inner { text-align: center; }
    .preloader-ring {
      width: 96px; height: 96px;
      margin: 0 auto 22px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, var(--brand-mid) 0%, var(--brand) 45%, var(--brand-dark) 100%);
      color: #fff;
      font-size: 2.4rem;
      animation: pulse 1.4s ease-in-out infinite;
    }
    .preloader-bar {
      width: 190px; height: 3px;
      background: rgba(255, 255, 255, .16);
      border-radius: 4px;
      overflow: hidden;
      margin: 0 auto;
    }
    .preloader-bar span {
      display: block;
      height: 100%;
      width: 40%;
      background: linear-gradient(90deg, var(--brand-lighter), var(--brand-light));
      border-radius: 4px;
      animation: slide 1.1s ease-in-out infinite;
    }
    @keyframes pulse {
      0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(var(--brand-light-rgb), .55); }
      50% { transform: scale(1.06); box-shadow: 0 0 0 16px rgba(var(--brand-light-rgb), 0); }
    }
    @keyframes slide {
      0% { transform: translateX(-110%); }
      100% { transform: translateX(280%); }
    }

    /* ---------- Scroll progress ---------- */
    #scrollProgress {
      position: fixed;
      top: 0; left: 0;
      height: 3px;
      width: 0;
      background: linear-gradient(90deg, var(--brand-lighter), var(--brand-light) 45%, var(--brand) 100%);
      box-shadow: 0 0 12px rgba(var(--brand-light-rgb), .8);
      z-index: 1100;
      transition: width .1s linear;
    }

    /* ---------- Navbar on scroll ---------- */
    .navbar.navbar-scrolled { box-shadow: 0 6px 30px rgba(var(--surface-black-rgb), .6); }
    .navbar.navbar-scrolled .navbar-brand .brand-mark { width: 34px; height: 34px; font-size: 1.05rem; }

    /* ---------- Hero: ken burns + text stagger ---------- */
    @keyframes kenburns {
      from { transform: scale(1); }
      to { transform: scale(1.09); }
    }
    .carousel-item.active .slide-bg { animation: kenburns 9s ease-out forwards; }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(26px); }
      to { opacity: 1; transform: none; }
    }
    .carousel-item.active .slide-tag,
    .carousel-item.active h1,
    .carousel-item.active .lead,
    .carousel-item.active .hero-cta { animation: fadeUp .85s cubic-bezier(.2, .7, .3, 1) both; }
    .carousel-item.active .slide-tag { animation-delay: .15s; }
    .carousel-item.active h1 { animation-delay: .28s; }
    .carousel-item.active .lead { animation-delay: .42s; }
    .carousel-item.active .hero-cta { animation-delay: .56s; }

    .hero-badges { display: flex; flex-wrap: wrap; gap: 10px; }
    .hero-badges span {
      background: rgba(9, 3, 8, .45);
      border: 1px solid rgba(255, 255, 255, .28);
      color: var(--on-dark-badge);
      font-size: .78rem;
      font-weight: 500;
      padding: 6px 12px;
      border-radius: 30px;
    }
    .hero-badges i { color: var(--brand-lighter); }

    /* ---------- Marquee (industries we serve) ---------- */
    .marquee-strip {
      background: #fff;
      border-bottom: 1px solid var(--line);
      padding: 18px 0;
      overflow: hidden;
    }
    .marquee-label {
      font-size: .74rem;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 10px;
    }
    .marquee { display: flex; gap: 46px; width: max-content; animation: marquee 26s linear infinite; }
    .marquee:hover { animation-play-state: paused; }
    .marquee span {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      font-family: 'Poppins', sans-serif;
      font-weight: 600;
      font-size: .95rem;
      color: var(--ink);
      white-space: nowrap;
    }
    .marquee i { color: var(--brand-dark); font-size: 1.1rem; }
    @keyframes marquee {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }
    .marquee-wrap { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }

    /* ---------- About: skill bars ---------- */
    .skill-row { margin-bottom: 18px; }
    .skill-row .d-flex { font-size: .88rem; font-weight: 600; color: var(--surface-dark); }
    .skill-track {
      height: 8px;
      background: var(--line-soft);
      border-radius: 20px;
      overflow: hidden;
      margin-top: 7px;
    }
    .skill-fill {
      height: 100%;
      width: 0;
      border-radius: 20px;
      background: linear-gradient(90deg, var(--brand-dark), var(--brand));
      box-shadow: 0 0 14px rgba(var(--brand-light-rgb), .45);
      transition: width 1.4s cubic-bezier(.2, .8, .2, 1);
    }

    /* ---------- Services: index number ---------- */
    .service-index {
      font-family: 'Poppins', sans-serif;
      font-size: 2.6rem;
      font-weight: 800;
      color: var(--ghost);
      line-height: 1;
      position: absolute;
      bottom: 14px;
      right: 22px;
      transition: color .25s;
    }
    .card-service { position: relative; overflow: hidden; }
    .card-service:hover .service-index { color: rgba(var(--brand-light-rgb), .4); }
    .card-service .icon-circle { transition: transform .3s, background .3s, color .3s; }
    .card-service:hover .icon-circle {
      background: linear-gradient(135deg, var(--brand), var(--brand-dark));
      color: #fff;
      transform: rotate(-8deg) scale(1.08);
      box-shadow: 0 10px 24px rgba(var(--brand-deep-rgb), .35);
    }
    .card-service::before {
      content: "";
      position: absolute;
      left: 0; top: 0;
      height: 4px;
      width: 0;
      background: linear-gradient(90deg, var(--brand), var(--brand-dark));
      transition: width .35s ease;
    }
    .card-service:hover::before { width: 100%; }

    /* ---------- Projects filter ---------- */
    .filter-btn {
      border: 2px solid var(--line);
      background: #fff;
      color: var(--ink-soft);
      font-weight: 600;
      font-size: .87rem;
      padding: 8px 18px;
      border-radius: 30px;
      transition: .2s;
    }
    .filter-btn:hover { border-color: var(--brand); color: var(--surface-dark); }
    .filter-btn.active {
      background: linear-gradient(135deg, var(--brand-deep), var(--brand-dark));
      border-color: transparent;
      color: #fff;
      box-shadow: 0 8px 22px rgba(var(--brand-deep-rgb), .4);
    }
    .hide { display: none !important; }

    /* ---------- CTA band ---------- */
    .cta-band {
      position: relative;
      background:
        linear-gradient(90deg, rgba(var(--brand-deep-rgb), .94) 0%, rgba(var(--brand-rgb), .82) 55%, rgba(var(--brand-light-rgb), .5) 100%),
        radial-gradient(circle at 80% 20%, rgba(var(--brand-lighter-rgb), .45), transparent 52%),
        linear-gradient(160deg, var(--brand-deep), var(--brand-dark));
      color: #fff;
      overflow: hidden;
    }
    .cta-band::after {
      content: "";
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
      background-size: 56px 56px;
      pointer-events: none;
    }
    .cta-band .container { position: relative; z-index: 2; }

    /* ---------- Map + contact ---------- */
    /* ---------- Floating buttons ---------- */
    .float-btn {
      position: fixed;
      right: 18px;
      width: 54px; height: 54px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: #fff;
      font-size: 1.3rem;
      box-shadow: 0 10px 26px rgba(var(--surface-black-rgb), .45);
      z-index: 1030;
      transition: transform .2s, opacity .3s, visibility .3s;
    }
    .float-btn:hover { transform: translateY(-3px) scale(1.06); }
    #toTop {
      bottom: 86px;
      background: linear-gradient(135deg, var(--brand-deep), var(--brand-dark));
      opacity: 0;
      visibility: hidden;
    }
    #toTop.show { opacity: 1; visibility: visible; }
    #waFloat { bottom: 20px; background: #25d366; }
    #callFloat { bottom: 152px; background: var(--brand); color: #fff; box-shadow: 0 10px 26px rgba(var(--brand-light-rgb), .4); }

    /* ---------- Testimonials ---------- */
    .tst-card {
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 24px 60px rgba(var(--shadow-rgb), .28);
    }
    .tst-item {
      min-height: 460px;
      display: flex;
      align-items: center;
      position: relative;
      background-color: var(--brand-deep);
      background-size: cover;
      background-position: center;
    }
    .tst-item::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(var(--brand-deep-rgb), .93) 0%, rgba(var(--brand-rgb), .82) 50%, rgba(var(--brand-light-rgb), .45) 100%),
        linear-gradient(0deg, rgba(var(--brand-deep-rgb), .7) 0%, transparent 48%);
    }
    .tst-item > .container { position: relative; z-index: 2; }
    .tst-quote {
      font-size: 4rem;
      line-height: .7;
      color: var(--brand-lighter);
      opacity: .85;
    }
    .tst-stars { color: var(--brand-lighter); letter-spacing: 3px; font-size: 1.05rem; }
    .tst-avatar {
      width: 62px; height: 62px;
      border-radius: 50%;
      object-fit: cover;
      border: 3px solid var(--brand-light);
      box-shadow: 0 0 20px rgba(var(--brand-light-rgb), .35);
      background: var(--surface-dark-2);
      flex-shrink: 0;
    }
    .tst-pill {
      background: rgba(var(--brand-light-rgb), .14);
      border: 1px solid rgba(var(--brand-light-rgb), .35);
      color: #fff;
      font-size: .76rem;
      font-weight: 600;
      letter-spacing: .5px;
      padding: 5px 12px;
      border-radius: 30px;
      white-space: nowrap;
    }
    .tst-indicators { margin: 22px 0 0; }
    .tst-indicators [data-bs-target] {
      background-color: var(--indicator);
      width: 30px; height: 4px;
      border-radius: 4px;
      margin: 0 5px;
      opacity: .6;
      transition: .3s;
    }
    .tst-indicators .active {
      background: linear-gradient(90deg, var(--brand-lighter), var(--brand-light));
      opacity: 1;
    }
/* The arrows used Bootstrap's 15% side bands, which parked the brand circle
   on top of the client message. Pin each arrow to the card edge and inset
       the text column instead; phones have no side gutter, so there the arrows
       drop down beside the dot indicators. */
    #tstSlider .carousel-control-prev,
    #tstSlider .carousel-control-next {
      width: 46px;
      left: 8px;
      right: auto;
      opacity: 1;
      z-index: 3;
    }
    #tstSlider .carousel-control-next { left: auto; right: 8px; }
    @media (max-width: 767.98px) {
      #tstSlider .carousel-control-prev,
      #tstSlider .carousel-control-next {
        top: auto;
        bottom: 0;
        width: 38px;
        height: 38px;
        left: 0;
      }
      #tstSlider .carousel-control-next { left: auto; right: 0; }
      #tstSlider .carousel-control-prev-icon,
      #tstSlider .carousel-control-next-icon { width: 38px; height: 38px; }
    }
    .rating-chip {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 16px;
      box-shadow: 0 10px 30px rgba(var(--shadow-rgb), .1);
      padding: 22px 18px;
      text-align: center;
      height: 100%;
      transition: transform .25s, box-shadow .25s;
    }
    .rating-chip:hover {
      transform: translateY(-6px);
      box-shadow: 0 18px 40px rgba(var(--shadow-rgb), .16);
    }
    .rating-chip .big { font-size: 2.2rem; font-weight: 800; color: var(--surface-dark); line-height: 1; }
    .rating-chip i { color: var(--brand-dark); }
    .rating-chip small { color: var(--muted); }

    /* ---------- Misc polish ---------- */
    .btn-lg { border-radius: 12px; }
    .shadow-soft { box-shadow: 0 18px 46px rgba(var(--shadow-rgb), .14); }
    .card-hover-lift { transition: transform .25s ease, box-shadow .25s ease; }
    .card-hover-lift:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(var(--shadow-rgb), .18); }
    /* Default assumes a light section. --brand is unreadable on the wine
       bands, so the navbar and footer override it below. */
    .text-gold { color: var(--brand) !important; }
    .text-warning { color: var(--brand) !important; }
    /* brand-name reads "Narsingha <span class=text-warning>Security Agency"
       on both bands, so the accent half has to flip to the light end here. */
    .navbar .text-gold,
    .navbar .text-warning { color: var(--brand-chalk) !important; }
    footer .text-gold,
    footer .text-warning { color: var(--brand-lighter) !important; }
    .bg-navy-soft { background: var(--brand-deep); }

    ::selection { background: rgba(var(--brand-deep-rgb), .35); color: #fff; }

/* ---------- Inner page hero ---------- */
.page-hero {
  position: relative;
  min-height: 44vh;
  display: flex;
  align-items: center;
  color: #fff;
  background: linear-gradient(160deg, var(--brand-deep), var(--brand-dark));
  overflow: hidden;
}
.page-hero .bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(var(--brand-deep-rgb), .92) 0%, rgba(var(--brand-rgb), .8) 50%, rgba(var(--brand-light-rgb), .45) 100%),
    linear-gradient(0deg, rgba(var(--brand-deep-rgb), .7) 0%, transparent 48%),
    linear-gradient(180deg, rgba(var(--brand-lighter-rgb), .2) 0%, transparent 45%);
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { font-weight: 800; line-height: 1.15; text-shadow: 0 2px 24px rgba(var(--surface-black-rgb), .7); }
.page-hero .lead { color: var(--on-dark-soft); max-width: 640px; }

.breadcrumb { margin: 0 0 14px; }
.breadcrumb a { color: var(--on-dark-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand-lighter); }
.breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, .45); }
.breadcrumb .active { color: var(--brand-lighter); }

/* ---------- Services detail blocks ---------- */
/* The row inside each block carries a negative gutter margin, so the block
   padding is trimmed to keep the visual gap equal to the section rhythm. */
/* scroll-padding-top on html already offsets every anchor jump for the
   sticky navbar, so the blocks need no extra scroll margin. */
.service-block { padding: calc(var(--section-y) - 12px) 0; }
.service-block .icon-circle { width: 62px; height: 62px; font-size: 1.7rem; }
.service-block ul { padding-left: 0; }
.service-block li { padding: 5px 0 5px 26px; position: relative; color: var(--muted); font-size: .95rem; }
.service-block li::before {
  content: "\F26E";
  font-family: "bootstrap-icons";
  position: absolute;
  left: 0;
  top: 6px;
  color: var(--brand-dark);
  font-size: .9rem;
}
.service-block.alt { background: var(--cream); }
.value-card {
  background: #fff;
  border-radius: 16px;
  padding: 30px 26px;
  height: 100%;
  border-top: 4px solid var(--brand-dark);
  box-shadow: 0 10px 30px rgba(var(--shadow-rgb), .1);
  transition: transform .25s, box-shadow .25s;
}
.value-card:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(var(--shadow-rgb), .18); }
.value-card h5 { font-weight: 700; color: var(--surface-dark); }

/* ---------- Contact page ---------- */
.info-card {
  background: #fff;
  border-radius: 16px;
  padding: 26px 24px;
  height: 100%;
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(var(--shadow-rgb), .1);
  transition: transform .25s, box-shadow .25s;
}
.info-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(var(--shadow-rgb), .16); }
.info-card a { text-decoration: none; color: var(--surface-dark); font-weight: 600; }
.info-card a:hover { color: var(--brand-dark); }
.contact-form-card {
  background: #fff;
  border-radius: 20px;
  padding: 34px;
  box-shadow: 0 18px 50px rgba(var(--shadow-rgb), .14);
}
.form-control, .form-select {
  border-radius: 10px;
  border: 1px solid var(--line);
  padding: 11px 14px;
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand-dark);
  box-shadow: 0 0 0 .2rem rgba(var(--brand-deep-rgb), .2);
}
.map-wrap {
  border-radius: 16px;
  overflow: hidden;
  border: 6px solid #fff;
  box-shadow: 0 16px 40px rgba(var(--shadow-rgb), .18);
}
.map-wrap iframe { display: block; width: 100%; height: 340px; border: 0; }

/* ============ responsive / touch-target refinements ============ */

/* WCAG 2.2 AA target size (min 24x24). Card CTAs were 17px tall inline
   links, which is too small to tap reliably on touch screens. */
.card-service a.small,
.value-card a.small,
.project-card a.small,
.service-block a.small {
  display: inline-block;
  padding: 12px 0;
  margin: -4px 0 -8px;
}

/* Footer and info-card link lists: give each link a 24px+ hit area without
   visually changing the list rhythm. */
footer li a,
.info-card li a,
.info-card > a {
  display: inline-block;
  padding: 6px 0;
}

/* Breadcrumb links sit on the page hero and were 20px tall. */
.breadcrumb-item a {
  display: inline-block;
  padding: 4px 0;
}

/* Carousel indicator dots are a 4px-tall visible bar. Expand the hit area with
   an absolutely positioned overlay rather than padding, so the bar itself does
   not move within the absolutely-positioned .carousel-indicators bar. */
.carousel-indicators [data-bs-target] { position: relative; }
.carousel-indicators [data-bs-target]::after {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  top: 50%;
  height: 32px;
  transform: translateY(-50%);
}

/* Image frames: the security stock available is mostly portrait, so a fixed
   landscape height cropped subjects very hard. Portrait-friendly ratios keep
   the subject intact at every breakpoint. */
.img-frame.short { height: auto; aspect-ratio: 4 / 3; }
@media (min-width: 992px) { .img-frame.short { aspect-ratio: 16 / 10; } }
.service-block .img-frame.service-figure { height: auto; aspect-ratio: 4 / 3; }
@media (min-width: 992px) { .service-block .img-frame.service-figure { aspect-ratio: 5 / 4; } }

/* Page heroes: cap the height so wide screens don't produce a 3.6:1 letterbox
   strip cropped out of a single photo. */
.page-hero { min-height: 300px; }
@media (min-width: 992px) { .page-hero { min-height: 380px; } }

/* Bootstrap's .row uses a negative margin equal to half the gutter. With .g-5
   (3rem) that exceeds the .container padding and pushed the page 12px wider
   than the viewport on small screens. Match the gutter to the container. */
@media (max-width: 991.98px) {
  .row.g-5 { --bs-gutter-x: 1.5rem; }
}

/* ============ no-JS guards ============ */
/* An inline script in the document head sets .js on <html> before first paint.
   Without it the preloader would sit on top of the page forever and every
   .reveal block would stay at opacity 0, so both effects are JS-only. */
html:not(.js) #preloader { display: none; }
html:not(.js) .reveal { opacity: 1; transform: none; }