/* =========================================================
       DESIGN TOKENS
       ========================================================= */
       :root {
        --bg: #ffffff;
        --text: #000000;
        --muted: #555;
        --main: #000000;
        /* brand dark */
        --accent: #a11212;
        /* brand red */
        --line: #e6e6e6;
        --card: #fafafa;
        --maxw: 1200px;
        --radius: 12px;
        --shadow: 0 6px 20px rgba(0, 0, 0, .08);
        --focus: 0 0 0 3px rgba(161, 18, 18, .25);
      }
  
      /* =========================================================
         BASE / RESET
         ========================================================= */
      *,
      *::before,
      *::after {
        box-sizing: border-box
      }
  
      html {
        scroll-behavior: smooth
      }
  
      body {
        margin: 0;
        font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
        background: var(--bg);
        color: var(--text);
        line-height: 1.6;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
      }
  
      img {
        max-width: 100%;
        display: block;
        height: auto
      }
  
      a {
        color: var(--accent);
        text-decoration: none
      }
  
      a:hover {
        filter: brightness(1.1)
      }
  
      :focus-visible {
        outline: none;
        box-shadow: var(--focus);
        border-radius: 8px
      }
  
      .container {
        width: min(100%, var(--maxw));
        margin-inline: auto;
        padding-inline: 1rem
      }
  
      section {
        padding: clamp(2rem, 5vw, 3rem) 0;
        border-bottom: 1px solid var(--line);
        scroll-margin-top: 84px
      }
  
      .section-title {
        font-size: clamp(1.6rem, 2.4vw, 2rem);
        margin: 0 0 .4rem;
        color: var(--main)
      }
  
      .section-sub {
        color: var(--main);
        margin: 0 0 1rem;
        max-width: auto;
      }
  
  
      /* Shared components */
      .btn {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        padding: .75rem 1.1rem;
        border-radius: .7rem;
        border: 1px solid transparent;
        background: var(--main);
        color: #fff;
        font-weight: 600;
        box-shadow: var(--shadow);
        transition: transform .08s ease
      }
  
      .btn:hover {
        transform: translateY(-1px)
      }
  
      .btn:active {
        transform: translateY(0)
      }
  
      .btn.accent {
        background: var(--accent)
      }
  
      .btn.light {
        background: #fff;
        color: var(--main);
        border-color: var(--line)
      }
  
      .card {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        box-shadow: var(--shadow)
      }
  
      .card.pad {
        padding: 1rem
      }
  
      /* A11y helpers */
      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0
      }
  
      .skip-link {
        position: absolute;
        left: -9999px;
        top: auto;
        width: 1px;
        height: 1px;
        overflow: hidden
      }
  
      .skip-link:focus {
        left: 1rem;
        top: 1rem;
        width: auto;
        height: auto;
        padding: .5rem .75rem;
        background: #fff;
        border: 2px solid var(--accent);
        border-radius: .5rem;
        z-index: 10000
      }
  
      /* Motion preference */
      @media (prefers-reduced-motion: reduce) {
        * {
          animation-duration: .001ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: .001ms !important;
          scroll-behavior: auto !important
        }
      }
  
      /* =========================================================
         HEADER / NAV  (.s-header)
         ========================================================= */
      .s-header header {
        position: fixed;
        width: 100%;
        top: 0;
        z-index: 1000;
        background: var(--main);
        color: #fff;
        border-bottom: 1px solid #1b110e;
        transition: box-shadow .2s ease;
      }
  
      .s-header header.scrolled {
        box-shadow: 0 6px 20px rgba(0, 0, 0, .18)
      }
  
      .s-header .nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: .65rem 0
      }
  
      .s-header .brand {
        display: flex;
        align-items: center;
        gap: .75rem
      }
  
      .s-header .logo {
        width: 48px;
        height: 50px;
        border-radius: .6rem;
        overflow: hidden;
        background: #000000;
        border: 1px solid #000000;
        display: grid;
        place-items: center;
        margin-left: 1rem;
      }
  
      .s-header .logo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
  
      .s-header .brand h1 {
        font-size: 1rem;
        margin: 0;
        letter-spacing: .02em
      }
  
      .s-header nav ul {
        text-align: center;
        list-style: none;
        display: flex;
        gap: .5rem;
        margin: 0;
        padding: 0
      }
  
      .s-header nav a {
        text-align: center;
        color: #fff;
        padding: .45rem .7rem;
        border-radius: .45rem
      }
  
      .s-header nav a:hover,
      [aria-current="page"] {
        background: #a11212
      }
  
      .s-header .menu-btn {
        display: none;
        align-items: center;
        gap: .5rem;
        background: #fff;
        color: #000;
        border: none;
        padding: .5rem .75rem;
        border-radius: .5rem
      }
  
      .s-header .menu-btn svg {
        width: 20px;
        height: 20px
      }
  
      @media (max-width:1100px) {
        .s-header nav {
          position: absolute;
          inset: 64px 0 auto 0;
          background: var(--main);
          border-bottom: 1px solid #1b110e;
          display: none;
        }
  
        .s-header nav.open {
          display: block;
          width: 100%;
          justify-self: center;
        }
  
        .s-header nav ul {
          justify-self: center;
          flex-direction: column;
          gap: 1rem;
          padding: 0.5rem 1rem;
          min-height: 100%;
        }
  
        .s-header .menu-btn {
          display: inline-flex;
          margin-right: 1rem;
        }
  
        .s-header .menu-btn:hover {
          display: inline-flex;
          margin-right: 1rem;
          background-color: #a11212;
          color: #fff;
        }
      }
  
      /* =========================================================
         HERO  (.s-hero)
         ========================================================= */
      .s-hero .hero {
        padding: clamp(2rem, 6vw, 4rem) 0
      }
  
      .s-hero .hero-wrap {
        display: grid;
        gap: 2rem;
        grid-template-columns: 1.1fr .9fr;
        align-items: center
      }
  
      @media (max-width:900px) {
        .s-hero .hero-wrap {
          grid-template-columns: 1fr
        }
      }
  
      .s-hero .badges {
        display: flex;
        gap: .5rem;
        flex-wrap: wrap;
        margin-top: .75rem
      }
  
      .s-hero .badge {
        border: 1px solid var(--accent);
        color: var(--accent);
        border-radius: 2rem;
        padding: .35rem .7rem;
        font-size: .9rem;
        background: #fff;
        white-space: nowrap
      }
  
      .s-hero .btnrow {
        margin-top: 1rem;
        display: flex;
        gap: .7rem;
        flex-wrap: wrap
      }
  
  
      /* Vendors / Partners — Infinite Loop (CSS-only) */
      :root {
        --logo-h: 200px;
        /* tweak size */
        --logo-gap: 2rem;
        /* space between logos */
        --logo-speed: 90s;
        /* larger = slower */
      }
  
      .logos {
        overflow: hidden;
        padding: 28px 0;
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
        /* soft edge fade; remove if you don't want it */
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
      }
  
      .logos-slide {
        display: inline-flex;
        align-items: center;
        gap: var(--logo-gap);
        width: max-content;
        animation: logos-scroll var(--logo-speed) linear infinite;
        will-change: transform;
      }
  
      /* logos */
      .logos-slide img {
        height: var(--logo-h);
        width: auto;
        flex: 0 0 auto;
        object-fit: contain;
        /* rendering hint */
        image-rendering: -webkit-optimize-contrast;
      }
  
      /* Move exactly by half because we duplicate the set once */
      @keyframes logos-scroll {
        from {
          transform: translateX(0);
        }
  
        to {
          transform: translateX(-50%);
        }
      }
  
      /* Respect reduced motion */
      @media (prefers-reduced-motion: reduce) {
        .logos-slide {
          animation: none;
        }
      }
  
  
      /* =========================================================
         SERVICES  (.s-services)
         ========================================================= */
      .s-services .service-grid {
        display: grid;
        gap: 1rem;
        grid-template-columns: 1fr
      }
  
      @media (min-width:900px) {
        .s-services .service-grid {
          grid-template-columns: repeat(3, 1fr)
        }
      }
  
      .s-services .service {
        padding: 1rem
      }
  
      .s-services .service .icon {
        width: 44px;
        height: 44px;
        border-radius: .6rem;
        background: var(--main);
        color: #fff;
        display: grid;
        place-items: center;
        margin-bottom: .6rem
      }
  
      /* =========================================================
         PROCESS  (.s-process)
         ========================================================= */
      .s-process .steps {
        display: grid;
        gap: 1rem;
  
        grid-template-columns: 1fr;
  
      }
  
      @media (min-width:900px) {
        .s-process .steps {
          grid-template-columns: repeat(4, 1fr)
        }
      }
  
      .s-process .step {
        padding: 1rem;
        border-radius: .6rem;
        border-color: #000;
        background: #fff;
      }
  
      .s-process .step .num {
        font-weight: 800;
        color: var(--accent);
        letter-spacing: .02em
      }
  
      /* =========================================================
         PROJECTS / GALLERY  (.s-projects)
         ========================================================= */
      .s-projects .mini-gallery {
        display: grid;
        gap: 1rem;
        grid-template-columns: 1fr;
      }
  
      .s-projects .mini-gallery1 {
        display: grid;
        gap: 1rem;
        grid-template-columns: 1fr;
      }
  
      @media (min-width:900px) {
        .s-projects .mini-gallery {
          grid-template-columns: repeat(3, 1fr);
        }
        .s-projects .mini-gallery1 {
          grid-template-columns: repeat(2, 1fr);
        }
      }
  
      .s-projects .tile {
        background: #f7f7f7;
        border: 1px solid var(--line);
        border-radius: .6rem;
        overflow: hidden
      }
  
      .s-projects .tile img {
        aspect-ratio: 16/10;
        object-fit: cover;
        width: 100%;
      }
  
      /* =========================================================
         CTA STRIP  (.s-cta)
         ========================================================= */
      .s-cta .cta-strip {
        background: var(--main);
        color: #fff;
        border-radius: .9rem;
        padding: 1.2rem;
        display: flex;
        gap: 1rem;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        box-shadow: var(--shadow)
      }
  
      /* =========================================================
         ABOUT  (.s-about)
         ========================================================= */
      .s-about .service-grid {
        display: grid;
        gap: 1rem;
        grid-template-columns: 1fr
      }
  
      @media (min-width:900px) {
        .s-about .service-grid {
          grid-template-columns: repeat(3, 1fr)
        }
      }
  
      .s-about .service {
        padding: 1rem
      }
  
      /* =========================================================
         SHOWROOM  (.s-showroom)
         ========================================================= */
      .s-showroom .mini-gallery {
        display: grid;
        gap: 0.5rem;
        grid-template-columns: 1fr
      }
  
      @media (min-width:900px) {
        .s-showroom .mini-gallery {
          grid-template-columns: repeat(3, 1fr)
        }
      }
  
      .s-showroom .tile {
        background: #f7f7f7;
        border: 1px solid var(--line);
        border-radius: .6rem;
        overflow: hidden
      }
  
      .s-showroom .tile img {
        aspect-ratio: 3/2;
        object-fit: cover;
        width: 100%;
      }
  
      /* =========================================================
         CONTACT  (.s-contact)
         ========================================================= */
      .s-contact .contact-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem;
        align-items: start
      }
  
      @media (max-width:900px) {
        .s-contact .contact-grid {
          grid-template-columns: 1fr
        }
      }
  
      .s-contact .contact-form form>div {
        margin-bottom: .8rem
      }
  
      .s-contact .contact-form label {
        display: block;
        font-weight: 600;
        margin-bottom: .35rem
      }
  
      .s-contact .contact-form input,
      .s-contact .contact-form select,
      .s-contact .contact-form textarea {
        width: 100%;
        padding: .7rem .8rem;
        border: 1px solid var(--line);
        border-radius: .6rem;
        font-size: 1rem;
        background: #fff
      }
  
      .s-contact .contact-form input:focus,
      .s-contact .contact-form select:focus,
      .s-contact .contact-form textarea:focus {
        box-shadow: var(--focus);
        outline: none
      }
  
      .s-contact .contact-info {
        padding: 1.1rem
      }
  
      .s-contact .contact-info h3 {
        margin: .2rem 0 .35rem;
        color: var(--main)
      }
  
      .s-contact .contact-info hr {
        border: none;
        height: 1px;
        background: var(--line);
        margin: 1rem 0
      }
  
      .s-contact .map {
        margin-top: 1rem;
        width: 100%;
        aspect-ratio: 16/9;
        border-radius: .6rem;
        overflow: hidden;
        border: 1px solid var(--line)
      }
  
      .s-contact .map iframe {
        width: 100%;
        height: 100%;
        border: 0
      }
  
      /* =========================================================
         FOOTER  (.s-footer)
         ========================================================= */
      .s-footer footer {
        background: var(--main);
        color: #fff;
        padding: 2rem 0
      }
  
      .s-footer footer a {
        color: #fff;
        text-decoration: underline;
        text-underline-offset: 2px
      }
  
      /* =========================================================
         FLOATING CALL FAB  (.s-fab)
         ========================================================= */
      .s-fab .call-fab {
        position: fixed;
        right: 1rem;
        bottom: 1rem;
        z-index: 1000
      }
  
      .s-fab .call-fab a {
        display: inline-flex;
        gap: .5rem;
        align-items: center;
        padding: .9rem 1rem;
        background: var(--accent);
        color: #fff;
        font-weight: 700;
        border-radius: 2rem;
        box-shadow: 0 12px 28px rgba(0, 0, 0, .25);
        border: 1px solid #7c0e0e
      }
  
      .s-fab .call-fab svg {
        width: 20px;
        height: 20px
      }
  
      /* =========================================================
     CONSISTENT BORDERS & HOVERS — DROP-IN OVERRIDES
     Place after your existing CSS
     ========================================================= */
  :root{
    --surface: #fff;
    --bwidth: 1px;
    --border: var(--bwidth) solid var(--line);
    --hover-raise: -2px;
    --hover-shadow: 0 12px 28px rgba(0,0,0,.14);
    --hover-border: rgba(161,18,18,.35); /* accent tint */
  }
  
  /* 1) Make all “surfaces” look related */
  :is(
    .card,
    .s-services .service,
    .s-process .step,
    .s-projects .tile,
    .s-showroom .tile,
    .s-contact .contact-info,
    .s-contact .map,
    .s-cta .cta-strip
  ){
    background: var(--surface);
    border: var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition:
      transform .18s ease,
      box-shadow .22s ease,
      border-color .22s ease,
      background-color .22s ease,
      filter .22s ease;
    overflow: hidden; /* ensures child img hover crops nicely */
  }
  
  /* Keep CTA dark but still consistent with a border */
  .s-cta .cta-strip{
    background: var(--main);
    color: #fff;
    border-color: #1b110e;
  }
  
  /* 2) Unified hover: subtle lift + stronger shadow + accent-tinted border */
  @media (hover:hover){
    :is(
      .card,
      .s-services .service,
      .s-process .step,
      .s-projects .tile,
      .s-showroom .tile,
      .s-contact .contact-info
    ):hover{
      transform: translateY(var(--hover-raise));
      box-shadow: var(--hover-shadow);
      border-color: var(--hover-border);
    }
  }
  
  /* 3) Unify inner image hover for tiles/galleries */
  :is(.s-projects .tile, .s-showroom .tile) img{
    transition: transform .25s ease;
  }
  @media (hover:hover){
    :is(.s-projects .tile, .s-showroom .tile):hover img{
      transform: scale(1.03);
    }
  }
  
  /* 4) Buttons: same lift & shadow language as cards */
  .btn{
    border: var(--bwidth) solid transparent;
    transition:
      transform .12s ease,
      box-shadow .2s ease,
      filter .2s ease,
      border-color .2s ease;
  }
  @media (hover:hover){
    .btn:hover{
      transform: translateY(var(--hover-raise));
      box-shadow: var(--hover-shadow);
      filter: brightness(1.02);
      border-color: rgba(0,0,0,.06);
    }
    .btn.light:hover{
      border-color: var(--hover-border);
    }
    .btn.accent:hover{
      filter: brightness(1.05);
      border-color: var(--hover-border);
    }
  }
  
  /* 5) Nav links: consistent subtle hover with a border “hint” */
  .s-header nav a{
    border: var(--bwidth) solid transparent;
    transition: background-color .2s ease, border-color .2s ease, transform .12s ease;
  }
  @media (hover:hover){
    .s-header nav a:hover{
      background: rgba(255,255,255,.06);
      border-color: rgba(255,255,255,.18);
      transform: translateY(var(--hover-raise));
    }
  }
  
  /* 6) Form fields: consistent borders + hover/focus */
  .s-contact .contact-form input,
  .s-contact .contact-form select,
  .s-contact .contact-form textarea{
    border: var(--border);
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  }
  @media (hover:hover){
    .s-contact .contact-form :is(input,select,textarea):hover{
      border-color: #d0d0d0;
    }
  }
  .s-contact .contact-form :is(input,select,textarea):focus{
    border-color: var(--hover-border);
    box-shadow: var(--focus);
  }
  
  /* 7) Icon chips (services) match system */
  .s-services .service .icon{
    border: var(--bwidth) solid rgba(0,0,0,.1);
    box-shadow: var(--shadow);
    transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease, background-color .22s ease;
  }
  @media (hover:hover){
    .s-services .service:hover .icon{
      transform: translateY(var(--hover-raise));
      box-shadow: var(--hover-shadow);
      border-color: var(--hover-border);
    }
  }
  
  /* 8) Gallery tiles & project tiles share the same base */
  .s-projects .tile,
  .s-showroom .tile{
    background: var(--card);
  }
  
  /* 9) Section blocks end borders—keep light and consistent */
  section{
    border-bottom: var(--border);
  }
  
  /* 10) Mobile menu hover parity */
  @media (max-width:900px){
    .s-header .menu-btn{
      border: var(--bwidth) solid rgba(0,0,0,.08);
      box-shadow: var(--shadow);
      transition: background-color .2s ease, color .2s ease, transform .12s ease, box-shadow .2s ease, border-color .2s ease;
    }
    .s-header .menu-btn:hover{
      background-color: #a11212;
      color:#fff;
      transform: translateY(var(--hover-raise));
      box-shadow: var(--hover-shadow);
      border-color: var(--hover-border);
    }
  }
  
  /* 11) Floating call button: same hover language */
  .s-fab .call-fab a{
    transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease, filter .2s ease;
  }
  @media (hover:hover){
    .s-fab .call-fab a:hover{
      transform: translateY(var(--hover-raise));
      box-shadow: var(--hover-shadow);
      border-color: var(--hover-border);
      filter: brightness(1.03);
    }
  }
  
  /* =========================================================
     FEATURED PROJECTS — borderless, full-bleed media + logo
     ========================================================= */
     .s-projects .featured-grid{
    display:grid;
    gap:1rem;
    grid-template-columns:1fr;
  }
  @media (min-width:900px){
    .s-projects .featured-grid{
      grid-template-columns:repeat(2,1fr);
    }
  }
  
  /* Card: no borders, subtle lift, rounded corners, clip children */
  .feature-card{
    position: relative;
    border: none !important;
    background: transparent;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .22s ease;
  }
  
  /* Make the entire card an accessible hit area */
  .feature-card > a{
    display:block;
    outline: none;
  }
  
  /* Media: keep a consistent aspect and let image fill fully */
  .feature-media{
    position: relative;
    aspect-ratio: 16 / 10;          /* adjust to taste */
    margin: 0;                       /* reset figure default margins */
  }
  
  /* Image: full-bleed, no borders */
  .feature-media img{
    height: 100%;
    width: 100%;
    display: block;
    object-fit: cover;               /* fit to fill */
    border: none !important;
    border-radius: 0;                /* edges clip via .feature-card overflow */
    transform: none;
    transition: transform .25s ease;
  }
  
  /* Overlay (hidden by default; fades in on hover/focus) */
  .feature-overlay{
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    text-align: center;
    background: rgba(0,0,0,.58);
    opacity: 0;
    transition: opacity .22s ease, backdrop-filter .22s ease, transform .22s ease;
    backdrop-filter: saturate(120%) blur(0px);
  }
  
  /* Inner overlay content animations */
  .overlay-inner{
    display: grid;
    gap: .6rem;
    justify-items: center;
    transform: translateY(6px);
    transition: transform .22s ease;
  }
  
  /* Logo: full-bleed look (no ring/border) with responsive width */
  .overlay-logo{
    width: min(260px, 50%);
    height: auto;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0;                /* keep edges square; change if you want rounding */
  }
  
  /* CTA chip (no visible border) */
  .overlay-cta{
    font-weight: 800;
    letter-spacing: .02em;
    color: #fff;
    background: rgba(0,0,0,.25);
    border: 1px solid transparent;
    border-radius: 999px;
    padding: .5rem .9rem;
    line-height: 1;
  }
  
  /* Hover / focus interactions */
  @media (hover:hover){
    .feature-card:hover{
      transform: translateY(var(--hover-raise));
      box-shadow: var(--hover-shadow);
    }
    .feature-card:hover .feature-media img{
      transform: scale(1.03);
    }
    .feature-card:hover .feature-overlay{
      opacity: 1;
      backdrop-filter: saturate(120%) blur(1.5px);
    }
    .feature-card:hover .overlay-inner{
      transform: translateY(0);
    }
  }
  
  /* Keyboard accessibility mirrors hover */
  .feature-card:focus-within{
    transform: translateY(var(--hover-raise));
    box-shadow: var(--hover-shadow);
  }
  .feature-card:focus-within .feature-overlay{
    opacity: 1;
    backdrop-filter: saturate(120%) blur(1.5px);
  }
  .feature-card:focus-within .overlay-inner{
    transform: translateY(0);
  }
  
  /* Make sure no global surface/border rules sneak in */
  :is(.feature-card, .feature-media){
    border: none !important;
  }
  
  /* Motion safety */
  @media (prefers-reduced-motion: reduce){
    .feature-card,
    .feature-media img,
    .feature-overlay,
    .overlay-inner{
      transition: none !important;
    }
  }
  
  /* --- FIX FEATURED LOGO OVERLAY --- */
  
  /* 1) Ensure overlay is hidden by default (in case of duplicate earlier rules) */
  .feature-overlay{ opacity: 0 !important; }
  
  /* 2) Show overlay only on hover/focus */
  @media (hover:hover){
    .feature-card:hover .feature-overlay{ opacity: 1 !important; }
  }
  .feature-card:focus-within .feature-overlay{ opacity: 1 !important; }
  
  /* 3) Make the logo float without the black rectangle */
  .feature-overlay .overlay-logo{
    /* scale + center */
    width: min(220px, 44%);
    height: auto;
    display: block;
  
    /* remove any borders/rings */
    border: none !important;
    box-shadow: none !important;
    border-radius: 0;
  
    /* blend so any dark pixels don't block the image beneath */
    mix-blend-mode: screen;
    opacity: .95;
  }
  
  /* Optional: slightly dim overlay so the render still reads */
  .feature-overlay{
    background: rgba(0,0,0,.55) !important;
    backdrop-filter: saturate(120%) blur(1.5px);
  }
  
  
  /* === FEATURED PROJECTS: circular mask for overlay logo === */
  .feature-overlay .overlay-logo {
    width: 140px;               /* Adjust size to fit */
    height: 140px;
    border-radius: 50%;         /* creates the circular mask */
    object-fit: cover;          /* keeps logo ratio correct inside circle */
    overflow: hidden;
    background: #fff;           /* optional white fill to match edges */
    mix-blend-mode: normal;     /* avoids transparency conflicts */
    filter: brightness(1) contrast(1.1); /* keep logo clear and balanced */
    box-shadow: 0 0 25px rgba(0,0,0,0.3); /* optional subtle halo */
  }
  
  
  /* =========================================================
     TOUCH HOVER PARITY
     Mirrors hover styles when .t-hover is present on touch
     ========================================================= */
     @media (hover: none) {
    /* Cards/tiles/steps/info (lift + shadow + border tint) */
    :is(
      .card,
      .s-services .service,
      .s-process .step,
      .s-projects .tile,
      .s-showroom .tile,
      .s-contact .contact-info
    ).t-hover {
      transform: translateY(var(--hover-raise));
      box-shadow: var(--hover-shadow);
      border-color: var(--hover-border);
    }
  
    /* Tile image zoom on tap */
    :is(.s-projects .tile, .s-showroom .tile).t-hover img {
      transform: scale(1.03);
    }
  
    /* Buttons */
    .btn.t-hover {
      transform: translateY(var(--hover-raise));
      box-shadow: var(--hover-shadow);
      filter: brightness(1.02);
      border-color: rgba(0,0,0,.06);
    }
    .btn.light.t-hover { border-color: var(--hover-border); }
    .btn.accent.t-hover { filter: brightness(1.05); border-color: var(--hover-border); }
  
    /* Nav links */
    .s-header nav a.t-hover {
      background: rgba(255,255,255,.06);
      border-color: rgba(255,255,255,.18);
      transform: translateY(var(--hover-raise));
    }
  
    /* Floating call button */
    .s-fab .call-fab a.t-hover {
      transform: translateY(var(--hover-raise));
      box-shadow: var(--hover-shadow);
      border-color: var(--hover-border);
      filter: brightness(1.03);
    }
  
    /* Featured Projects: show overlay and zoom image on tap */
    .feature-card.t-hover {
      transform: translateY(var(--hover-raise));
      box-shadow: var(--hover-shadow);
    }
    .feature-card.t-hover .feature-overlay {
      opacity: 1 !important;
      backdrop-filter: saturate(120%) blur(1.5px);
    }
    .feature-card.t-hover .feature-media img {
      transform: scale(1.03);
    }
  }
  
  /* ===== Submit Overlay ===== */
  .overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 1rem;
  }
  .overlay.show { display: flex; }
  .overlay-box{
    width: min(560px, 92vw);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--hover-shadow);
    padding: 1.2rem;
  }
  .overlay-close{
    position: absolute;
    top: .75rem;
    right: .9rem;
    background: transparent;
    border: none;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
  }
  .overlay-msg{ margin: .5rem 0 1rem; color: var(--muted); }
  .overlay-fallback{ border-top: 1px solid var(--line); padding-top: .9rem; display: grid; gap: .6rem; }
  body.ovl-lock{ overflow: hidden; }

  /* =======================================================
   PRODUCTS — layout + UX (drop this after your tokens)
   ======================================================= */
.s-products .products-grid{
  display:grid;
  gap:1rem;
  grid-template-columns:1fr;
}
@media (min-width:900px){
  .s-products .products-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

/* Product card matches your surfaces/hover language */
.s-products .product{
  padding:1rem;
}

/* Tight headings for consistency */
.s-products h3{
  margin:.2rem 0 .4rem;
  color:var(--main);
}

/* Clean checkmark lists (no dots) */
.checklist{
  list-style:none;
  padding:0;
  margin:.25rem 0 .75rem;
  display:grid;
  gap:.35rem;
}
.checklist li{
  position:relative;
  padding-left:1.25rem;
}
.checklist li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  line-height:1;
  color:var(--accent);
  font-weight:800;
}

/* Compact tag row reusing your badge chip */
.tagrow{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
}
.tagrow .badge{
  border:1px solid var(--accent);
  color:var(--accent);
  border-radius:999px;
  padding:.28rem .6rem;
  background:#fff;
  font-size:.88rem;
  white-space:nowrap;
}