/* ── Tokens ── */
    :root {
      --red: #C9302C;
      --red-dark: #a52523;
      --gold: #EED705;
      --black: #111111;
      --gray-900: #1a1a1a;
      --gray-700: #444;
      --gray-500: #666;
      --gray-300: #ccc;
      --gray-100: #f5f5f5;
      --white: #fff;
      --serif: 'Oswald', sans-serif;
      --sans: 'Inter', system-ui, sans-serif;
      --max: 1200px;
      --r: 8px;
      --ease: 0.2s ease;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body { font-family: var(--sans); color: var(--black); background: var(--white); line-height: 1.6; -webkit-font-smoothing: antialiased; letter-spacing: -0.01em; }
    a { text-decoration: none; color: inherit; }
    img { max-width: 100%; height: auto; display: block; }
    ul { list-style: none; }
    button { font-family: var(--sans); cursor: pointer; }
    .wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

    /* ── Buttons ── */
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      height: 52px; padding: 0 28px; border-radius: var(--r); border: none;
      font-family: var(--sans); font-weight: 600; font-size: 15px;
      cursor: pointer; white-space: nowrap; transition: background var(--ease), transform var(--ease);
    }
    .btn-red { background: var(--red); color: var(--white); }
    .btn-red:hover { background: var(--red-dark); transform: translateY(-1px); }
    .btn-white { background: var(--white); color: var(--black); }
    .btn-white:hover { background: #f0f0f0; transform: translateY(-1px); }
    @keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(201,48,44,.4)} 50%{box-shadow:0 0 0 10px rgba(201,48,44,0)} }
    .btn-pulse { animation: pulse 2s infinite; }

    /* ── Labels & Headings ── */
    /* ── Labels - shine shimmer (#040) ── */
    @keyframes label-shine { to { background-position: 200% center; } }
    .label {
      font-size: 11px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
      display: inline-block; margin-bottom: 12px;
      background: linear-gradient(90deg, var(--red) 0%, #c9302c 35%, #ff8080 50%, #c9302c 65%, var(--red) 100%);
      background-size: 200% auto;
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: transparent;
      animation: label-shine 3.5s linear infinite;
    }
    .label-gold {
      font-size: 11px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
      display: inline-block; margin-bottom: 12px;
      background: linear-gradient(90deg, #eed705 0%, #eed705 35%, #fff7a0 50%, #eed705 65%, #eed705 100%);
      background-size: 200% auto;
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: transparent;
      animation: label-shine 3.5s linear infinite;
    }
    .h2 { font-family: var(--serif); font-size: clamp(28px,4vw,42px); font-weight: 600; line-height: 1.15; letter-spacing: 0.5px; color: var(--black); text-transform: uppercase; }
    .h2-white { color: var(--white); }

    /* ── Novato Weather Alert Bar (desktop only) ── */
    .temp-alert-bar {
      display: none; /* shown via JS when temp is notable */
      position: fixed;
      bottom: 0; left: 0; right: 0;
      z-index: 889;
      height: 54px;
      align-items: center;
      justify-content: center;
      gap: 18px;
      font-family: var(--sans);
      font-size: 14px;
      font-weight: 500;
      padding: 0 24px;
      background: var(--black);
      border-top: 2px solid var(--red);
    }
    .temp-alert-bar.show { display: flex; }
    .temp-alert-bar .tab-icon { font-size: 16px; }
    .temp-alert-bar .tab-msg { color: rgba(255,255,255,.80); }
    .temp-alert-bar .tab-msg strong { color: #fff; }
    .temp-alert-bar .tab-cta {
      display: inline-flex; align-items: center; gap: 6px;
      height: 32px; padding: 0 16px; border-radius: 6px;
      font-size: 13px; font-weight: 700; letter-spacing: .3px;
      white-space: nowrap; transition: opacity .2s;
    }
    .temp-alert-bar .tab-cta:hover { opacity: .85; }
    .temp-alert-bar .tab-cta-heat { background: var(--red); color: #fff; }
    .temp-alert-bar .tab-cta-cool { background: #0288d1; color: #fff; }
    .temp-alert-bar .tab-dismiss {
      position: absolute; right: 18px;
      background: none; border: none; color: rgba(255,255,255,.45);
      font-size: 18px; cursor: pointer; line-height: 1; padding: 4px 6px;
      transition: color .2s;
    }
    .temp-alert-bar .tab-dismiss:hover { color: #fff; }
    @media(max-width: 768px) { .temp-alert-bar { display: none !important; } }

    /* Prevent fixed alert bar from covering page content on desktop */
    body:has(.temp-alert-bar.show) {
      padding-bottom: 54px;
    }

    /* ── Float phone (mobile) ── */
    .float-phone {
      display: none; position: fixed; bottom: 24px; right: 24px; z-index: 990;
      width: 56px; height: 56px; border-radius: 50%;
      background: var(--red); color: var(--white);
      align-items: center; justify-content: center; font-size: 22px;
      box-shadow: 0 4px 20px rgba(201,48,44,.45);
      animation: pulse 2s infinite;
    }
    @media(max-width:768px){ .float-phone { display: flex; } }

    /* ── Top Bar ── */
    .topbar { background: var(--black); padding: 9px 0; font-size: 13px; }
    .topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
    .topbar-l { color: rgba(255,255,255,.60); display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
    .topbar-stars { color: var(--gold); letter-spacing: 2px; font-size: 11px; }
    .topbar-sep { color: rgba(255,255,255,.22); }
    .topbar-offer {
      display: inline-flex; align-items: center; gap: 7px;
      background: rgba(201,48,44,.18); border: 1px solid rgba(201,48,44,.32);
      padding: 4px 16px; border-radius: 100px;
      font-size: 12px; font-weight: 600; color: rgba(255,255,255,.85);
      white-space: nowrap; letter-spacing: .3px; flex-shrink: 0;
    }
    .topbar-offer i { color: var(--gold); }
    .topbar-r { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
    .topbar-r a { color: rgba(255,255,255,.65); display: flex; align-items: center; gap: 6px; transition: color var(--ease); font-size: 13px; white-space: nowrap; }
    .topbar-r a:hover { color: var(--white); }
    .topbar-r .tp-phone { color: var(--gold); font-weight: 700; font-size: 14px; letter-spacing: .3px; }
    @media(max-width:1100px){ .topbar-offer { display: none; } }
    @media(max-width:860px){ .topbar-l span:not(.topbar-stars):not([style]) { display: none; } .topbar-l { gap: 6px; } }
    @media(max-width:768px){ .topbar { display: none; } }

    /* ── Navbar ── */
    .navbar { position: sticky; top: 0; z-index: 900; background: var(--white); border-bottom: 1px solid #ebebeb; box-shadow: 0 1px 8px rgba(0,0,0,.06); transition: transform 0.32s ease, opacity 0.32s ease; }
    .navbar.nav-hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; }
    .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
    .nav-logo img { height: 62px; width: auto; }
    .nav-links { display: flex; align-items: center; gap: 2px; }
    .nav-item { position: relative; }
    .nav-link {
      display: flex; align-items: center; gap: 5px;
      padding: 8px 13px; border-radius: 6px;
      font-size: 14.5px; font-weight: 500; color: var(--gray-700);
      transition: color var(--ease), background var(--ease); white-space: nowrap;
    }
    .nav-link:hover { color: var(--black); background: var(--gray-100); }
    .nav-link .caret { font-size: 10px; transition: transform var(--ease); }
    .nav-item:hover .caret { transform: rotate(180deg); }
    .nav-item:focus-within .caret { transform: rotate(180deg); }
    .nav-drop {
      position: absolute; top: calc(100% + 6px); left: 0;
      background: var(--white); border-radius: var(--r);
      box-shadow: 0 8px 40px rgba(0,0,0,.12); border: 1px solid #ebebeb;
      min-width: 220px; padding: 8px 0;
      opacity: 0; pointer-events: none; transform: translateY(-8px);
      transition: opacity var(--ease), transform var(--ease);
    }
    .nav-item:hover .nav-drop { opacity: 1; pointer-events: auto; transform: none; }
    .nav-item:focus-within .nav-drop { opacity: 1; pointer-events: auto; transform: none; visibility: visible; }
    .nav-drop a { display: block; padding: 10px 20px; font-size: 14px; font-weight: 500; color: var(--gray-700); transition: color var(--ease), background var(--ease); }
    .nav-drop a:hover { color: var(--red); background: #fafafa; }
    .nav-drop hr { border: none; border-top: 1px solid #f0f0f0; margin: 4px 0; }
    .nav-drop-wide { min-width: 360px; columns: 2; column-gap: 0; }
    .nav-right { display: flex; align-items: center; gap: 12px; margin-left: 8px; }
    .nav-phone { font-weight: 700; font-size: 15px; color: var(--red); display: flex; align-items: center; gap: 7px; transition: color var(--ease); }
    .nav-phone:hover { color: var(--red-dark); }
    .hamburger { display: none; background: none; border: none; width: 40px; height: 40px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border-radius: 6px; transition: background var(--ease); }
    .hamburger:hover { background: var(--gray-100); }
    .hamburger span { display: block; width: 22px; height: 2px; background: var(--black); border-radius: 2px; transition: all .3s ease; }
    .hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
    .hamburger.open span:nth-child(2) { opacity: 0; }
    .hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }
    @media(max-width:900px){ .nav-links,.nav-right .btn { display: none; } .hamburger { display: flex; } }

    /* ── Mobile Menu ── */
    .mob-menu { display: none; position: fixed; inset: 0; z-index: 800; background: var(--white); padding: 84px 24px 40px; flex-direction: column; overflow-y: auto; }
    .mob-menu.open { display: flex; }
    .mob-menu a { display: block; padding: 13px 0; font-size: 16px; font-weight: 500; color: var(--black); border-bottom: 1px solid #f0f0f0; }
    .mob-menu a:hover { color: var(--red); }
    .mob-cta { margin-top: 28px; display: flex; align-items: center; justify-content: center; gap: 10px; height: 54px; background: var(--red); color: var(--white); font-size: 17px; font-weight: 700; border-radius: var(--r); }

    /* ── Hero - Framer-style (adapted from Hero section 3.txt library component) ── */
    /* Structure: deep navy bg → centered headline block → wide image gallery with bottom-fade mask */
    .hero {
      background: #ffffff;
      border-bottom: 1px solid #ebebeb;
      overflow: hidden;
      padding: 80px 0 88px;
    }
    .hero-inner {
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 40px;
      display: flex;
      align-items: flex-start;
      gap: 64px;
    }
    .hero-text-wrap {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
      gap: 20px;
      flex: 1;
      min-width: 0;
      position: relative;
      z-index: 2;
    }
    .hero-badges { display: flex; flex-wrap: wrap; gap: 10px; }
    .hero-badge {
      display: inline-flex; align-items: center; gap: 8px;
      background: rgba(201,48,44,.07); border: 1px solid rgba(201,48,44,.2);
      padding: 8px 18px; border-radius: 100px;
      font-size: 12px; color: var(--red); font-weight: 600; letter-spacing: 1.5px;
      text-transform: uppercase;
    }
    .hero-badge-gold {
      background: rgba(238,215,5,.1); border-color: rgba(238,215,5,.4);
      color: #7d6b00;
    }
    .hero h1 {
      font-family: var(--serif);
      font-size: clamp(40px, 4.6vw, 66px);
      font-weight: 700;
      color: var(--black);
      line-height: 1.0;
      letter-spacing: -1.2px;
      text-transform: uppercase;
      text-align: left;
    }
    .hero h1 em { color: var(--red); font-style: italic; }
    .hero-amp {
      display: inline-block;
      font-family: var(--serif);
      font-weight: 700;
      font-style: normal;
      color: var(--black);
      font-size: 1em;
      line-height: inherit;
      margin-right: 0.1em;
    }
    @media(max-width:600px){
      .hero h1 { font-size: clamp(40px, 10vw, 54px); letter-spacing: -0.8px; }
    }
    .hero-sub {
      font-size: 18px; color: var(--gray-500); line-height: 1.65;
      max-width: 520px; font-weight: 400;
    }

    /* ── Weather callout - dynamic UX message, below H1, never touches H1 ── */
    .hero-weather-callout {
      display: none; /* shown by JS after weather loads */
      align-items: center;
      gap: 12px;
      padding: 11px 18px;
      border-radius: 10px;
      font-size: 15px;
      font-weight: 500;
      color: var(--gray-700);
      background: rgba(201,48,44,.06);
      border-left: 3px solid var(--red);
      line-height: 1.45;
      max-width: 520px;
      transition: background 0.5s ease, border-color 0.5s ease;
    }
    .hero-weather-callout.cool {
      background: rgba(2,136,209,.06);
      border-left-color: #0288d1;
    }
    .hero-weather-callout.mild {
      background: rgba(76,175,80,.06);
      border-left-color: #388e3c;
    }
    .hwc-callout-icon { font-size: 20px; line-height: 1; flex-shrink: 0; }
    .hwc-callout-text { flex: 1; }
    .hwc-callout-link {
      flex-shrink: 0; font-size: 13px; font-weight: 700;
      color: var(--red); text-decoration: underline; text-underline-offset: 2px;
      transition: opacity .2s;
    }
    .hero-weather-callout.cool .hwc-callout-link { color: #0277bd; }
    .hwc-callout-link:hover { opacity: .7; }
    @media(max-width:960px){ .hero-weather-callout { display: none !important; } }
    .hero-checks {
      display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: flex-start;
    }
    .hero-check {
      display: flex; align-items: center; gap: 7px;
      font-size: 13px; color: var(--gray-700); font-weight: 500;
    }
    .hero-check::before { content: '\2713'; color: var(--red); font-weight: 700; font-size: 14px; }
    .hero-ctas { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-start; }

    /* ── AC unit image (right column) - position locked ── */
    .hero-ac-wrap {
      flex-shrink: 0;
      width: 499px;
      aspect-ratio: 1200 / 628;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: translateY(0);
      overflow: visible;
    }
    .hero-ac-frame {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .hero-ac-wrap img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      filter: drop-shadow(0 16px 40px rgba(0,0,0,.12));
    }
    /* Blue accent line - position locked */
    .hero-ac-blueline {
      position: absolute;
      left: 17%;
      right: 17%;
      top: 60%;
      height: 3px;
      background: linear-gradient(90deg, transparent 0%, #29b6f6 12%, #0288d1 50%, #29b6f6 88%, transparent 100%);
      border-radius: 2px;
      box-shadow: 0 0 8px rgba(2,136,209,.55);
    }

    /* Temperature display - centered on AC unit cutout */
    .hero-ac-temp {
      position: absolute;
      top: 36.05%;
      left: 83%;
      transform: translate(-50%, -50%);
      width: 11%;
      aspect-ratio: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1px;
      pointer-events: none;
      z-index: 5;
      user-select: none;
    }

    /* LED indicator dot overlay - covers the AC unit's blue dot */
    .hero-ac-dot {
      position: absolute;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      top: 49%;
      left: 89.5%;
      transform: translate(-50%, -50%);
      background: transparent;
      transition: background 0.6s ease, box-shadow 0.6s ease;
      z-index: 6;
      pointer-events: none;
    }
    .hero-ac-temp-num {
      font-family: 'Inter', sans-serif;
      font-size: clamp(9px, 1.5vw, 13px);
      font-weight: 700;
      color: #1a1a2e;
      line-height: 1;
      letter-spacing: -0.5px;
    }
    .hero-ac-temp-city {
      font-family: 'Inter', sans-serif;
      font-size: clamp(5px, 0.7vw, 7px);
      font-weight: 600;
      color: #29b6f6;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      line-height: 1;
    }

    /* ── Hero weather card (below AC unit) - luxury dark design ── */
    .hero-ac-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex-shrink: 0;
      width: 499px;
    }
    @keyframes hwc-popup {
      from { opacity: 0; transform: translateY(18px) scale(0.97); }
      to   { opacity: 1; transform: translateY(0)   scale(1); }
    }
    .hero-weather-card {
      width: 90%;
      position: relative;
      z-index: 2;
      border-radius: 16px;
      overflow: hidden;
      background: #111;
      box-shadow: 0 16px 48px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.07) inset;
      animation: hwc-popup 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
      transition: box-shadow 0.35s ease, transform 0.3s ease;
    }
    .hero-weather-card:hover {
      box-shadow: 0 22px 60px rgba(0,0,0,.55);
      transform: translateY(-2px);
    }

    /* Slim context header - city + temp, no emoji */
    .hwc-band {
      padding: 10px 18px 9px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      overflow: hidden;
      transition: background 0.7s ease;
    }
    .hwc-band::after {
      content: ''; position: absolute; inset: 0; pointer-events: none;
    }
    /* heat = hot weather (red), cool = cold weather (blue) */
    .hero-weather-card.heat .hwc-band { background: linear-gradient(135deg, #200505 0%, #320707 100%); }
    .hero-weather-card.heat .hwc-band::after { background: radial-gradient(ellipse at 15% 60%, rgba(201,48,44,.7) 0%, transparent 60%); }
    .hero-weather-card.cool .hwc-band { background: linear-gradient(135deg, #030e1e 0%, #051a3e 100%); }
    .hero-weather-card.cool .hwc-band::after { background: radial-gradient(ellipse at 15% 60%, rgba(2,136,209,.65) 0%, transparent 60%); }
    .hero-weather-card:not(.heat):not(.cool) .hwc-band { background: linear-gradient(135deg, #0e0e0e 0%, #1c1c1c 100%); }
    .hero-weather-card:not(.heat):not(.cool) .hwc-band::after { background: radial-gradient(ellipse at 15% 60%, rgba(238,215,5,.2) 0%, transparent 60%); }

    .hwc-frost { display: none; }

    /* City left, temp right - small and contextual */
    .hwc-left { display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; flex-direction: row; }
    .hwc-city-lbl { font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.5); order: -1; }
    .hwc-degrees { font-family: var(--serif); font-size: 18px; font-weight: 700; color: rgba(255,255,255,.9); line-height: 1; letter-spacing: 0; }
    .hwc-icon { display: none; }

    /* Live indicator dot */
    .hwc-band::before {
      content: '';
      width: 6px; height: 6px; border-radius: 50%;
      background: #4caf50;
      box-shadow: 0 0 0 2px rgba(76,175,80,.25);
      position: relative; z-index: 1;
      flex-shrink: 0;
      animation: live-pulse 2.5s ease-in-out infinite;
    }
    @keyframes live-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

    /* Body - message is the hero, full-width button below */
    .hwc-body {
      padding: 18px 20px 20px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      transition: background 0.7s ease;
    }
    .hero-weather-card.heat .hwc-body { background: var(--red); }   /* hot = red */
    .hero-weather-card.cool .hwc-body { background: #1565c0; }      /* cold = blue */
    .hero-weather-card:not(.heat):not(.cool) .hwc-body { background: #ffffff; }

    .hwc-msg {
      font-size: 14.5px;
      font-weight: 600;
      font-style: normal;
      line-height: 1.55;
      margin: 0;
    }
    .hero-weather-card.heat .hwc-msg,
    .hero-weather-card.cool .hwc-msg { color: rgba(255,255,255,.95); }
    .hero-weather-card:not(.heat):not(.cool) .hwc-msg { color: #1a1a1a; }

    .hwc-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 42px;
      border-radius: 100px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .5px;
      text-transform: uppercase;
      border: none;
      transition: opacity .2s, transform .2s;
    }
    .hwc-btn:hover { opacity: .88; transform: translateY(-1px); }
    .hwc-btn-heat { background: #fff; color: var(--red); }
    .hwc-btn-cool { background: #fff; color: #0277bd; }
    .hwc-btn-mild { background: #111; color: #fff; }
    @media(max-width:960px){ .hero-weather-card { display: none; } }

    /* Airflow animation - soft gradient wisps, top z-layer */
    .hero-airwrap {
      position: absolute;
      top: 63%;
      left: 3%;
      right: 3%;
      height: 200px;
      pointer-events: none;
      z-index: 10;
      overflow: visible;
    }
    @keyframes wispDrop {
      0%   { transform: translateY(-20px); opacity: 0; }
      8%   { opacity: 1; }
      40%  { opacity: 0.7; }
      70%  { opacity: 0.35; }
      100% { transform: translateY(180px); opacity: 0; }
    }
    .wisp {
      position: absolute;
      top: 0;
      width: 18px;
      height: 90px;
      border-radius: 50%;
      background: radial-gradient(ellipse at 50% 20%, rgba(41,182,246,0.38) 0%, rgba(2,136,209,0.15) 40%, transparent 75%);
      filter: blur(5px);
      animation: wispDrop 3.5s ease-in-out infinite;
    }

    @media(max-width:960px){
      .hero-ac-wrap { transform: translateY(-20px); }
    }
    /* Pill CTAs - directly from Framer hero structure */
    .hero-btn-solid {
      height: 48px; padding: 0 28px; background: var(--red); color: #fff;
      font-family: var(--sans); font-size: 15px; font-weight: 600;
      border-radius: 100px; display: inline-flex; align-items: center; gap: 8px;
      white-space: nowrap; transition: background .2s ease, transform .2s ease;
      position: relative; overflow: hidden;
    }
    .hero-btn-solid:hover { background: var(--red-dark); transform: translateY(-2px); }
    .hero-btn-ghost {
      height: 48px; padding: 0 28px; background: transparent; color: var(--black);
      border: 1.5px solid #d0d0d0;
      font-family: var(--sans); font-size: 15px; font-weight: 600;
      border-radius: 100px; display: inline-flex; align-items: center; gap: 8px;
      white-space: nowrap; transition: background .2s ease, border-color .2s ease, transform .2s ease;
    }
    .hero-btn-ghost:hover { background: var(--gray-100); border-color: #bbb; transform: translateY(-2px); }
    /* Media block - adapted from hero-with-video.md (easemize/NavbarHero):
       Full-width aspect-ratio container with rounded corners, image, play btn overlay */
    .hero-media-wrap {
      width: 100%;
      max-width: 1140px;
      aspect-ratio: 16 / 9;
      border-radius: 24px;
      overflow: hidden;
      position: relative;
      flex-shrink: 0;
      box-shadow: 0 40px 100px rgba(0,0,0,.6);
    }
    .hero-media-wrap img {
      width: 100%; height: 100%;
      object-fit: cover; display: block;
      transition: transform 8s ease;
    }
    .hero-media-wrap:hover img { transform: scale(1.03); }
    /* Trust stats bar overlaid at bottom - adapted from hero-with-video layout */
    .hero-media-bar {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      padding: 48px 40px 32px;
      background: linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 100%);
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 16px;
    }
    .hero-media-stat { text-align: center; }
    .hero-media-stat-n {
      font-family: var(--serif); font-size: 34px; font-weight: 700;
      color: var(--gold); line-height: 1; letter-spacing: 0px;
    }
    .hero-media-stat-l {
      font-size: 10px; font-weight: 600; letter-spacing: 2px;
      text-transform: uppercase; color: rgba(255,255,255,.7);
      margin-top: 4px;
    }
    /* Play button - directly from hero-with-video.md component */
    .hero-play-btn {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 72px; height: 72px;
      border-radius: 50%;
      background: rgba(255,255,255,.18);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1.5px solid rgba(255,255,255,.35);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; color: white;
      transition: background 0.2s ease, transform 0.2s ease;
    }
    .hero-play-btn:hover { background: rgba(255,255,255,.28); transform: translate(-50%, -50%) scale(1.08); }
    .hero-play-btn i { font-size: 22px; margin-left: 4px; }
    @media(max-width: 960px){
      .hero { padding: 60px 0 64px; }
      .hero-inner { flex-direction: column; padding: 0 24px; gap: 48px; align-items: center; }
      .hero-text-wrap { align-items: center; text-align: center; }
      .hero h1 { text-align: center; letter-spacing: -1px; }
      .hero-checks { justify-content: center; }
      .hero-ctas { justify-content: center; }
      .hero-ac-wrap { width: 320px; aspect-ratio: 1200 / 628; height: auto; }
    }
    @media(max-width: 768px){
      .hero-ac-col { display: none; }
    }
    @media(max-width: 600px){
      .hero { padding: 48px 0 56px; }
      .hero-inner { padding: 0 20px; gap: 36px; }
    }

    /* ── Mobile weather pill (hero - replaces AC unit on small screens) ── */
    .mob-weather-pill {
      display: none;
      align-items: center;
      gap: 12px;
      background: var(--white);
      border: 1px solid #e4e4e4;
      border-radius: 100px;
      padding: 10px 20px 10px 14px;
      box-shadow: 0 2px 16px rgba(0,0,0,.09);
      width: fit-content;
    }
    .mob-weather-pill .mwp-icon { font-size: 22px; line-height: 1; }
    .mob-weather-pill .mwp-temp-block { display: flex; flex-direction: column; align-items: center; gap: 1px; }
    .mob-weather-pill .mwp-temp { font-family: var(--serif); font-size: 21px; font-weight: 700; color: var(--black); line-height: 1; }
    .mob-weather-pill .mwp-city { font-size: 9px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--gray-500); }
    .mob-weather-pill .mwp-divider { width: 1px; height: 32px; background: #ebebeb; }
    .mob-weather-pill .mwp-msg { font-size: 12.5px; font-weight: 500; color: var(--gray-700); line-height: 1.35; }
    .mob-weather-pill .mwp-btn {
      display: inline-flex; align-items: center;
      height: 34px; padding: 0 16px; border-radius: 100px;
      font-size: 12px; font-weight: 700; white-space: nowrap; transition: opacity .2s;
    }
    .mob-weather-pill .mwp-btn:hover { opacity: .85; }
    .mob-weather-pill .mwp-btn-heat { background: var(--red); color: #fff; }
    .mob-weather-pill .mwp-btn-cool { background: #0288d1; color: #fff; }
    /* Show pill on mobile - declared after base display:none so it wins */
    @media(max-width:960px){
      .mob-weather-pill { display: flex; }
      .hero-badges { display: none; }
    }

    /* ── Stats Bar ── */
    .stats { background: var(--red); }
    .stats-grid { display: grid; grid-template-columns: repeat(4,1fr); }
    .stat { padding: 28px 20px; text-align: center; border-right: 1px solid rgba(255,255,255,.2); }
    .stat:last-child { border-right: none; }
    .stat-n { font-family: var(--serif); font-size: 38px; font-weight: 700; color: var(--white); line-height: 1; letter-spacing: 1px; margin-bottom: 6px; }
    .stat-l { font-size: 13px; color: rgba(255,255,255,.85); font-weight: 500; }
    @media(max-width:600px){ .stats-grid { grid-template-columns: 1fr 1fr; } .stat:nth-child(2){ border-right: none; } .stat:nth-child(3){ border-right: 1px solid rgba(255,255,255,.2); } }

    /* ── Section padding ── */
    .sec { padding: 88px 0; }
    .sec-sm { padding: 64px 0; }
    .bg-gray { background: var(--gray-100); }
    .bg-dark { background: var(--gray-900); }

    /* ── Features ── */
    .features-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; margin-top: 52px; }
    .feat-card { background: var(--white); border-radius: 12px; padding: 40px 32px; box-shadow: 0 2px 16px rgba(0,0,0,.05); transition: transform var(--ease), box-shadow var(--ease); }
    .feat-card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(0,0,0,.1); }
    .feat-icon { width: 56px; height: 56px; border-radius: 12px; background: rgba(201,48,44,.08); display: flex; align-items: center; justify-content: center; margin-bottom: 22px; }
    .feat-icon svg { width: 26px; height: 26px; fill: var(--red); }
    .feat-card h3 { font-family: var(--serif); font-size: 20px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 10px; }
    .feat-card p { font-size: 15px; color: var(--gray-700); line-height: 1.65; }
    @media(max-width:900px){ .features-grid { grid-template-columns: 1fr 1fr; } }
    @media(max-width:600px){ .features-grid { grid-template-columns: 1fr; } }

    /* ── Welcome ── */
    .welcome-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
    .welcome-text p { font-size: 16px; color: var(--gray-700); line-height: 1.75; margin-bottom: 16px; }
    .welcome-img { border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; }
    .welcome-img img { width: 100%; height: 100%; object-fit: cover; }
    @media(max-width:768px){ .welcome-grid { grid-template-columns: 1fr; gap: 40px; } .welcome-img { order: -1; } }

    /* ── Contact Form Section ── */
    .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
    .contact-left h2 { font-family: var(--serif); font-size: clamp(26px,3.5vw,40px); font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--white); margin-bottom: 14px; }
    .contact-left > p { color: rgba(255,255,255,.7); font-size: 16px; line-height: 1.7; margin-bottom: 32px; }
    .c-detail { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
    .c-detail:last-child { border-bottom: none; }
    .c-icon { width: 38px; height: 38px; flex-shrink: 0; background: rgba(201,48,44,.2); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--red); font-size: 15px; }
    .c-text { color: rgba(255,255,255,.8); font-size: 14px; }
    .c-text strong { color: rgba(255,255,255,.5); display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .8px; margin-bottom: 2px; font-weight: 600; }
    .c-text a { color: var(--gold); }
    .form-card { background: var(--white); border-radius: 16px; padding: 36px; }
    .form-card h3 { font-family: var(--serif); font-size: 22px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 22px; }
    .form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
    .fg { margin-bottom: 14px; }
    .fg label { display: block; font-size: 12px; font-weight: 600; color: var(--gray-700); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .5px; }
    .fc { width: 100%; height: 46px; border: 1.5px solid #e5e5e5; border-radius: var(--r); padding: 0 14px; font-family: var(--sans); font-size: 15px; color: var(--black); outline: none; transition: border-color var(--ease); }
    .fc:focus { border-color: var(--red); }
    .fc-ta { height: 110px; padding: 12px 14px; resize: vertical; }
    .fc-submit { width: 100%; height: 50px; background: var(--red); color: var(--white); font-family: var(--sans); font-weight: 700; font-size: 15px; border: none; border-radius: var(--r); cursor: pointer; transition: background var(--ease); margin-top: 4px; }
    .fc-submit:hover { background: var(--red-dark); }
    @media(max-width:768px){ .contact-grid { grid-template-columns: 1fr; gap: 40px; } .form-2col { grid-template-columns: 1fr; } .form-card { padding: 26px 20px; } }

    /* ── Services tiles (Google-style grid) ── */
    /* Inspired by Hero 2.txt + offerings and services component */
    .services-hdr { text-align: center; margin-bottom: 52px; }
    .services-hdr p { font-size: 16px; color: var(--gray-500); max-width: 580px; margin: 12px auto 0; line-height: 1.65; }
    .svc-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
    .svc-tile {
      display: flex; flex-direction: column; gap: 0;
      background: var(--white); border: 1.5px solid #e8e8e8; border-radius: 12px;
      padding: 0; overflow: hidden; text-decoration: none;
      transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
    }
    .svc-tile:hover { border-color: var(--red); box-shadow: 0 8px 28px rgba(201,48,44,.1); transform: translateY(-3px); }
    .svc-tile-top {
      background: var(--gray-100); padding: 28px 24px 20px;
      display: flex; align-items: center; gap: 14px;
      border-bottom: 1px solid #f0f0f0;
    }
    .svc-tile-icon {
      width: 46px; height: 46px; border-radius: 10px;
      background: var(--white); border: 1px solid #e2e2e2;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; color: var(--red); font-size: 19px;
      box-shadow: 0 1px 4px rgba(0,0,0,.07);
    }
    .svc-tile-top h3 { font-family: var(--serif); font-size: 14px; font-weight: 600; color: var(--black); line-height: 1.3; letter-spacing: 0.4px; text-transform: uppercase; }
    .svc-tile-body { padding: 14px 20px 18px; }
    .svc-tile-body p { font-size: 13px; color: var(--gray-500); line-height: 1.55; margin-bottom: 12px; }
    .svc-tile-link { font-size: 13px; font-weight: 600; color: var(--red); display: flex; align-items: center; gap: 4px; transition: gap var(--ease); }
    .svc-tile:hover .svc-tile-link { gap: 8px; }
    @media(max-width:900px){ .svc-tiles { grid-template-columns: repeat(2, 1fr); } }
    @media(max-width:480px){ .svc-tiles { grid-template-columns: 1fr; } }

    /* ── How We Work - Bento Cards (adapted from bento-box-2-flipcards library component) ── */
    .hiw-hdr { text-align: center; margin-bottom: 52px; }
    .hiw-hdr p { font-size: 16px; color: var(--gray-700); max-width: 560px; margin: 10px auto 0; line-height: 1.7; }
    .hiw-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .hiw-bcard {
      border-radius: 20px; padding: 44px 36px 40px; position: relative;
      overflow: hidden; display: flex; flex-direction: column; min-height: 340px;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .hiw-bcard:hover { transform: translateY(-5px); box-shadow: 0 20px 48px rgba(0,0,0,.18); }
    /* Ghost step number behind content */
    .hiw-bcard-ghost {
      position: absolute; top: 16px; right: 20px;
      font-family: var(--serif); font-size: 110px; font-weight: 700;
      line-height: 1; letter-spacing: -4px; pointer-events: none; user-select: none;
    }
    /* Card 1 - Dark */
    .hiw-bcard-1 { background: var(--black); color: var(--white); }
    .hiw-bcard-1 .hiw-bcard-ghost { color: rgba(255,255,255,.06); }
    .hiw-bcard-1 .hiw-bcard-icon { background: rgba(201,48,44,.2); color: var(--red); }
    .hiw-bcard-1 h3 { color: var(--white); }
    .hiw-bcard-1 p { color: rgba(255,255,255,.7); }
    .hiw-bcard-1 .hiw-bcard-step { color: rgba(255,255,255,.55); }
    /* Card 2 - Red */
    .hiw-bcard-2 { background: var(--red); color: var(--white); }
    .hiw-bcard-2 .hiw-bcard-ghost { color: rgba(255,255,255,.08); }
    .hiw-bcard-2 .hiw-bcard-icon { background: rgba(255,255,255,.15); color: var(--white); }
    .hiw-bcard-2 h3 { color: var(--white); }
    .hiw-bcard-2 p { color: rgba(255,255,255,.82); }
    .hiw-bcard-2 .hiw-bcard-step { color: rgba(255,255,255,.45); }
    /* Card 3 - Light */
    .hiw-bcard-3 { background: var(--white); border: 1.5px solid #e4e4e4; color: var(--black); }
    .hiw-bcard-3 .hiw-bcard-ghost { color: rgba(201,48,44,.06); }
    .hiw-bcard-3 .hiw-bcard-icon { background: rgba(201,48,44,.08); color: var(--red); }
    .hiw-bcard-3 h3 { color: var(--black); }
    .hiw-bcard-3 p { color: var(--gray-700); }
    .hiw-bcard-3 .hiw-bcard-step { color: var(--gray-300); }
    /* Card internals */
    .hiw-bcard-icon {
      width: 52px; height: 52px; border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      font-size: 22px; margin-bottom: 28px; flex-shrink: 0; position: relative; z-index: 1;
    }
    .hiw-bcard-step {
      font-family: var(--serif); font-size: 11px; font-weight: 500;
      letter-spacing: 3px; text-transform: uppercase; margin-bottom: 10px;
      position: relative; z-index: 1;
    }
    .hiw-bcard h3 {
      font-family: var(--serif); font-size: 22px; font-weight: 600;
      letter-spacing: 0.5px; text-transform: uppercase; line-height: 1.2;
      margin-bottom: 14px; position: relative; z-index: 1;
    }
    .hiw-bcard p {
      font-size: 14.5px; line-height: 1.72; position: relative; z-index: 1; flex: 1;
    }
    .hiw-bcard-cta {
      display: inline-flex; align-items: center; gap: 7px;
      margin-top: 24px; font-size: 13px; font-weight: 600; letter-spacing: 0.5px;
      position: relative; z-index: 1; text-transform: uppercase;
      transition: gap 0.2s ease;
    }
    .hiw-bcard-1 .hiw-bcard-cta,
    .hiw-bcard-2 .hiw-bcard-cta { color: var(--white); opacity: 0.75; }
    .hiw-bcard-3 .hiw-bcard-cta { color: var(--red); }
    .hiw-bcard:hover .hiw-bcard-cta { gap: 11px; opacity: 1; }
    @media(max-width:900px){ .hiw-bento { grid-template-columns: 1fr 1fr; } .hiw-bcard-3 { grid-column: span 2; } }
    @media(max-width:600px){ .hiw-bento { grid-template-columns: 1fr; } .hiw-bcard-3 { grid-column: span 1; } .hiw-bcard { min-height: auto; } }

    /* ── FAQ Accordion ── */
    /* Adapted from faqs-accordion.txt component */
    .faq-wrap { max-width: 820px; margin: 48px auto 0; }
    .faq-item { border-bottom: 1px solid #e2e2e2; }
    .faq-item:first-child { border-top: 1px solid #e2e2e2; }
    .faq-q {
      display: flex; align-items: center; justify-content: space-between;
      width: 100%; padding: 22px 0; background: none; border: none;
      text-align: left; font-family: var(--sans); cursor: pointer; gap: 20px;
    }
    .faq-q-text { font-family: var(--serif); font-size: 18px; font-weight: 500; color: var(--black); line-height: 1.35; letter-spacing: 0.3px; }
    .faq-toggle {
      width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
      background: rgba(201,48,44,.08); border: none; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      color: var(--red); font-size: 22px; font-weight: 300;
      transition: background var(--ease), transform var(--ease);
      line-height: 1;
    }
    .faq-item.open .faq-toggle { background: var(--red); color: var(--white); transform: rotate(45deg); }
    .faq-body { height: 0; overflow: hidden; transition: height .35s cubic-bezier(0.4, 0, 0.2, 1); }
    .faq-body-inner { padding: 0 64px 26px 0; font-size: 16px; color: var(--gray-700); line-height: 1.78; }
    .faq-body-inner strong { color: var(--black); }
    @media(max-width:768px){ .faq-q-text { font-size: 17px; } .faq-body-inner { padding-right: 10px; } }

    /* ── Reviews header ── */
    .reviews-hdr { text-align: center; margin-bottom: 44px; }

    /* ── About Us ── */
    .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
    .about-img { border-radius: 16px; overflow: hidden; aspect-ratio: 5/4; }
    .about-img img { width: 100%; height: 100%; object-fit: cover; }
    .about-text p { font-size: 16px; color: var(--gray-700); line-height: 1.75; margin-bottom: 14px; }
    .services-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 20px 0; }
    .sl-item { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 500; }
    .sl-item::before { content:'\2713'; color: var(--red); font-weight: 700; }
    @media(max-width:768px){ .about-grid { grid-template-columns: 1fr; gap: 40px; } }

    /* ── Our Services tabbed ── */
    .oursvcs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
    .oursvcs-left h2 { font-family: var(--serif); font-size: clamp(26px,3.5vw,40px); font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--white); margin-bottom: 14px; }
    .oursvcs-left > p { color: rgba(255,255,255,.7); font-size: 16px; line-height: 1.7; margin-bottom: 26px; }
    .tabs { display: flex; border-radius: var(--r); overflow: hidden; border: 1px solid rgba(255,255,255,.15); width: fit-content; }
    .tab-btn { padding: 11px 18px; font-size: 13px; font-weight: 600; background: transparent; color: rgba(255,255,255,.5); border: none; cursor: pointer; transition: all var(--ease); border-right: 1px solid rgba(255,255,255,.15); }
    .tab-btn:last-child { border-right: none; }
    .tab-btn.active { background: var(--red); color: var(--white); }
    .tab-btn:hover:not(.active) { background: rgba(255,255,255,.06); color: rgba(255,255,255,.8); }
    .tab-panel { display: none; background: var(--white); border-radius: 10px; padding: 26px; margin-top: 18px; }
    .tab-panel.active { display: block; }
    .tab-panel h3 { font-family: var(--serif); font-size: 20px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 10px; }
    .tab-panel p { font-size: 15px; color: var(--gray-700); line-height: 1.7; margin-bottom: 14px; }
    .tab-panel ul { padding: 0; margin: 10px 0; }
    .tab-panel li { padding: 6px 0; border-bottom: 1px solid #f0f0f0; font-size: 15px; display: flex; align-items: center; gap: 8px; }
    .tab-panel li::before { content:'\f00c'; font-family:'FontAwesome'; color: var(--red); font-weight: 700; }
    .tab-panel li:last-child { border-bottom: none; }
    .tab-panel li a { color: var(--black); transition: color var(--ease); }
    .tab-panel li a:hover { color: var(--red); }
    .tab-learn { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--red); font-weight: 600; font-size: 14px; transition: gap var(--ease); }
    .tab-learn:hover { gap: 10px; }
    .oursvcs-right { display: flex; flex-direction: column; align-items: stretch; }
    /* trust card */
    .trust-card { background: var(--black); border-radius: 16px; border: 3px solid var(--gold); padding: 36px 30px; display: flex; flex-direction: column; gap: 0; }
    .trust-card-header { text-align: center; padding-bottom: 28px; border-bottom: 1px solid rgba(238,215,5,.25); margin-bottom: 28px; }
    .trust-card-header .tc-since { font-family: var(--serif); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
    .trust-card-header .tc-year { font-family: var(--serif); font-size: 72px; font-weight: 700; line-height: 1; color: var(--white); letter-spacing: -2px; }
    .trust-card-header .tc-tagline { font-size: 13px; color: rgba(255,255,255,.6); margin-top: 6px; }
    .trust-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(238,215,5,.15); border-radius: 8px; overflow: hidden; margin-bottom: 24px; }
    .trust-stat { background: var(--black); padding: 20px 16px; text-align: center; }
    .trust-stat .ts-val { font-family: var(--serif); font-size: 32px; font-weight: 700; color: var(--gold); line-height: 1; }
    .trust-stat .ts-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,.55); margin-top: 5px; }
    .trust-badges { display: flex; flex-direction: column; gap: 10px; }
    .trust-badge-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(255,255,255,.05); border-radius: 8px; }
    .trust-badge-row svg { flex-shrink: 0; }
    .trust-badge-row span { font-size: 13px; color: rgba(255,255,255,.8); line-height: 1.4; }
    .trust-badge-row strong { color: var(--white); }
    .tc-cta { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; padding: 14px; background: var(--red); border-radius: 100px; color: var(--white); font-weight: 700; font-size: 14px; text-decoration: none; transition: background var(--ease), transform var(--ease); }
    .tc-cta:hover { background: #a82522; transform: translateY(-2px); }
    @media(max-width:768px){ .oursvcs-grid { grid-template-columns: 1fr; gap: 40px; } .oursvcs-right { order: -1; } .trust-card { padding: 28px 20px; } .trust-card-header .tc-year { font-size: 56px; } }

    /* ── Why Us ── */
    .why-hdr { text-align: center; margin-bottom: 52px; }
    .why-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
    .why-card { background: var(--gray-100); border-radius: 12px; padding: 30px 22px; text-align: center; transition: background var(--ease), transform var(--ease), box-shadow var(--ease); }
    .why-card:hover { background: var(--white); transform: translateY(-4px); box-shadow: 0 8px 32px rgba(0,0,0,.08); }
    .why-icon { width: 50px; height: 50px; fill: var(--red); display: block; margin: 0 auto 14px; }
    .why-card h3 { font-family: var(--serif); font-size: 15px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 8px; }
    .why-card p { font-size: 13.5px; color: var(--gray-700); line-height: 1.65; }
    @media(max-width:900px){ .why-grid { grid-template-columns: 1fr 1fr; } }
    @media(max-width:480px){ .why-grid { grid-template-columns: 1fr; } }

    /* ── Areas ── */
    .areas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
    .areas-text p { font-size: 15px; color: var(--gray-700); margin: 10px 0 22px; }
    .areas-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-bottom: 28px; }
    .area-lnk { display: flex; align-items: center; gap: 6px; padding: 7px 0; font-size: 15px; color: var(--gray-700); border-bottom: 1px solid #eee; transition: color var(--ease); }
    .area-lnk::before { content:'\f041'; font-family:'FontAwesome'; color: var(--red); font-size: 12px; }
    .area-lnk:hover { color: var(--red); }
    .areas-map iframe { width: 100%; height: 400px; border: none; border-radius: 16px; }
    @media(max-width:768px){ .areas-grid { grid-template-columns: 1fr; gap: 40px; } .areas-map iframe { height: 280px; } }

    /* ── CTA Banner ── */
    .cta-banner { background: var(--red); padding: 72px 0; text-align: center; }
    .cta-banner h2 { font-family: var(--serif); font-size: clamp(26px,3.5vw,44px); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--white); margin-bottom: 14px; }
    .cta-banner p { font-size: 17px; color: rgba(255,255,255,.85); margin-bottom: 32px; max-width: 600px; margin-left: auto; margin-right: auto; }
    .cta-phone-btn { display: inline-flex; align-items: center; gap: 10px; height: 60px; padding: 0 36px; background: var(--white); color: var(--black); font-size: 19px; font-weight: 700; border-radius: var(--r); transition: all var(--ease); }
    .cta-phone-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.2); }
    .cta-phone-btn i { color: var(--red); }

    /* ── Footer ── */
    .footer { background: var(--black); padding: 64px 0 36px; border-top: 4px solid var(--red); }
    .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1.5fr 1.5fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.1); }
    .ft-logo img { height: 64px; width: auto; margin-bottom: 14px; }
    .ft-tag { font-size: 14px; color: rgba(255,255,255,.5); line-height: 1.7; margin-bottom: 18px; }
    .ft-phone { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; background: var(--red); color: var(--white); font-weight: 700; font-size: 14px; border-radius: 6px; transition: background var(--ease); }
    .ft-phone:hover { background: var(--red-dark); }
    .ft-head { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--white); margin-bottom: 18px; }
    .ft-lnk { display: block; padding: 6px 0; font-size: 14px; color: rgba(255,255,255,.5); border-bottom: 1px solid rgba(255,255,255,.07); transition: color var(--ease); }
    .ft-lnk:hover { color: var(--white); }
    .ft-lnk:last-child { border-bottom: none; }
    .ft-info { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 13px; font-size: 14px; color: rgba(255,255,255,.5); }
    .ft-info i { color: var(--red); margin-top: 2px; width: 14px; flex-shrink: 0; }
    .ft-info a { color: rgba(255,255,255,.7); }
    .ft-info a:hover { color: var(--white); }
    .ft-hrs { margin-bottom: 18px; }
    .ft-hr-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13px; color: rgba(255,255,255,.5); border-bottom: 1px solid rgba(255,255,255,.07); }
    .ft-hr-row span:last-child { color: rgba(255,255,255,.8); }
    .ft-social { display: flex; gap: 7px; margin-top: 18px; }
    .ft-social a { width: 32px; height: 32px; border-radius: 7px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.65); display: flex; align-items: center; justify-content: center; font-size: 13px; transition: all var(--ease); }
    .ft-social a:hover { background: var(--red); color: var(--white); }
    .ft-bbb { margin-top: 18px; }
    .ft-bbb img { height: 60px; width: auto; }
    .footer-bot { display: flex; align-items: center; justify-content: space-between; padding-top: 28px; font-size: 12px; color: rgba(255,255,255,.55); flex-wrap: wrap; gap: 8px; }
    .footer-bot .lic { color: rgba(255,255,255,.55); font-weight: 600; }
    @media(max-width:900px){ .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; } }
    @media(max-width:480px){ .footer-grid { grid-template-columns: 1fr; } }

    /* ════════════════════════════════════════════════════════
       COMPONENTS LIBRARY - Website Components Final
       ════════════════════════════════════════════════════════ */

    /* ── 1. Shimmer Button (shimmer-button.md) ──
       Animated light sweep across the primary hero CTA */
    @keyframes shimmer-sweep { 0% { background-position: 200% center; } 100% { background-position: -200% center; } }
    /* hero-btn-solid: red, no shimmer override */

    /* ── 2. Rainbow Borders Button - removed per user request ── */

    /* ── 3. Scroll-replacement Nav (small-business-hero-sticky-sub-navigation.md) ──
       Slides in at top:0 as the main navbar hides - becomes the primary nav on scroll */
    .subnav {
      position: fixed;
      top: 0;
      left: 0; right: 0;
      z-index: 950;
      background: rgba(255,255,255,.98);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid #ebebeb;
      box-shadow: 0 2px 16px rgba(0,0,0,.08);
      display: flex;
      align-items: center;
      height: 68px;
      transform: translateY(-100%);
      opacity: 0;
      transition: transform 0.32s ease, opacity 0.32s ease;
      pointer-events: none;
    }
    .subnav.visible {
      transform: translateY(0);
      opacity: 1;
      pointer-events: auto;
    }
    .subnav-inner {
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 24px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }
    .subnav-logo img { height: 48px; width: auto; display: block; }
    .subnav-list {
      display: flex;
      align-items: center;
      gap: 2px;
      list-style: none;
      margin: 0; padding: 0;
    }
    .subnav-list a {
      display: block;
      padding: 7px 14px;
      border-radius: 100px;
      font-size: 13px;
      font-weight: 600;
      color: var(--gray-700);
      font-family: var(--sans);
      letter-spacing: 0.2px;
      white-space: nowrap;
      transition: background var(--ease), color var(--ease);
    }
    .subnav-list a:hover { background: var(--gray-100); color: var(--black); }
    .subnav-list a.active { background: var(--red); color: var(--white); }
    .subnav-phone {
      display: inline-flex; align-items: center; gap: 7px;
      height: 38px; padding: 0 18px;
      background: var(--red); color: var(--white);
      font-weight: 700; font-size: 14px;
      border-radius: 6px; white-space: nowrap;
      transition: background var(--ease);
      flex-shrink: 0;
    }
    .subnav-phone:hover { background: var(--red-dark); }
    @media(max-width: 900px) {
      .subnav-list li:nth-child(n+4) { display: none; }
    }
    @media(max-width: 600px) {
      .subnav { height: 60px; }
      .subnav-list { display: none; }
      .subnav-logo img { height: 40px; }
    }

    /* ── 4. Spotlight Mobile Bottom Nav (spotlight-button.md) ──
       Fixed bottom nav for mobile - replaces the basic floating phone button */
    .mob-bottom-nav {
      display: none;
      position: fixed;
      bottom: 0; left: 0; right: 0;
      z-index: 990;
      background: rgba(0,0,0,.92);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-top: 1px solid rgba(255,255,255,.1);
      height: 64px;
      align-items: center;
      justify-content: space-around;
      padding: 0 8px;
    }
    @media(max-width: 768px) {
      .mob-bottom-nav { display: flex; }
      .float-phone { display: none !important; }
      body { padding-bottom: 64px; }
    }
    .mob-nav-item {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      width: 56px; height: 52px;
      background: none; border: none; cursor: pointer;
      text-decoration: none;
      color: rgba(255,255,255,.55);
      font-family: var(--sans);
      font-size: 9px;
      font-weight: 600;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      transition: color 0.2s ease;
    }
    .mob-nav-item:hover, .mob-nav-item.active { color: #fff; }
    /* Spotlight glow - from spotlight-button.md */
    .mob-nav-glow {
      position: absolute;
      top: -4px; left: 50%;
      transform: translateX(-50%);
      width: 48px; height: 56px;
      background: radial-gradient(ellipse at top, rgba(255,255,255,.35) 0%, transparent 70%);
      border-radius: 50%;
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
    }
    .mob-nav-item.active .mob-nav-glow { opacity: 1; }
    .mob-nav-line {
      position: absolute;
      top: 0; left: 50%;
      transform: translateX(-50%);
      width: 32px; height: 2px;
      background: #fff;
      border-radius: 2px;
      opacity: 0;
      transition: opacity 0.2s ease;
    }
    .mob-nav-item.active .mob-nav-line { opacity: 1; }
    .mob-nav-item i { font-size: 18px; position: relative; z-index: 1; }
    .mob-nav-item span { position: relative; z-index: 1; }

    /* ── 5. Progressive Blur (progressive-blur.md) ──
       Multi-layer backdrop-filter blur over image bottom for depth effect */
    .prog-blur-wrap {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 55%;
      pointer-events: none;
      z-index: 2;
    }
    .prog-blur-wrap > div {
      position: absolute;
      left: 0; right: 0;
    }
    /* Layers from bottom (most blur) to top (least blur) - matches blurIntensity:6 from component */
    .pb-l1 { bottom: 0; height: 100%; backdrop-filter: blur(0.5px); -webkit-backdrop-filter: blur(0.5px);
      -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 25%); mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 25%); }
    .pb-l2 { bottom: 0; height: 75%; backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px);
      -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 33%); mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 33%); }
    .pb-l3 { bottom: 0; height: 50%; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
      -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%); mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%); }
    .pb-l4 { bottom: 0; height: 30%; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
      -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 75%); mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 75%); }

    /* ── Scroll reveal ── */
    .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
    .reveal.visible { opacity: 1; transform: none; }
    .reveal-d1 { transition-delay: .1s; }
    .reveal-d2 { transition-delay: .2s; }
    .reveal-d3 { transition-delay: .3s; }

    /* ── Number Ticker (#033) ── */
    .ticker { display: inline-block; }

    /* ════════════════════════════════════════════════════════
       LIBRARY INTERACTION ENHANCEMENTS
       Sources: flow-hover-button.md · image-reveal.md
                animated-hero.md · container-scroll-animation.md
                spotlight-button.md · shimmer-button.md
       ════════════════════════════════════════════════════════ */

    /* 1. Hero cursor spotlight (image-reveal.md circular reveal concept) */
    .hero { position: relative; }
    .hero-spotlight {
      position: absolute; inset: 0; pointer-events: none; z-index: 1;
      background: radial-gradient(600px circle at 50% 50%, rgba(238,215,5,.07), transparent 50%);
    }

    /* 2. 3D card tilt sheen (container-scroll-animation.md perspective effect) */
    .tilt-shine {
      position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 10;
      background: radial-gradient(circle at var(--sx,50%) var(--sy,50%), rgba(255,255,255,.12), transparent 60%);
      opacity: 0; transition: opacity 0.35s ease;
    }
    .hiw-bcard:hover .tilt-shine,
    .feat-card:hover .tilt-shine,
    .why-card:hover .tilt-shine,
    .svc-tile:hover .tilt-shine { opacity: 1; }

    /* 3. Magnetic button (flow-hover-button.md smooth translate) */
    .mag-btn {
      transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1),
                  background var(--ease), box-shadow var(--ease) !important;
    }

    /* 4. Flow fill on ghost hero button (flow-hover-button.md bottom-right fill) */
    .hero-btn-ghost {
      position: relative; overflow: hidden;
    }
    .hero-btn-ghost::before {
      content: ''; position: absolute; inset: 0; border-radius: 100px;
      background: rgba(255,255,255,.2);
      transform: translate(120%, 120%) scale(2.8);
      transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
      pointer-events: none;
    }
    .hero-btn-ghost:hover::before { transform: translate(0, 0) scale(1); }

    /* 5. Animated word cycling in hero (animated-hero.md) */
    .hero-word-wrap {
      display: inline-block; overflow: hidden;
      vertical-align: bottom; position: relative;
    }
    .hero-cycle {
      display: inline-block;
      transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.42s ease;
    }
    .hero-cycle.cy-exit { transform: translateY(-110%); opacity: 0; }
    .hero-cycle.cy-enter { transform: translateY(110%); opacity: 0; }

    /* 6. Button click ripple */
    .btn-ripple {
      position: absolute; border-radius: 50%; pointer-events: none;
      background: rgba(255,255,255,.28); width: 0; height: 0;
      transform: translate(-50%, -50%);
      animation: ripple-out 0.55s ease-out forwards;
    }
    @keyframes ripple-out {
      to { width: 320px; height: 320px; opacity: 0; }
    }

    /* 7. Subnav phone button shimmer sweep */
    .subnav-phone { position: relative; overflow: hidden; }
    .subnav-phone::after {
      content: ''; position: absolute; top: 0; left: -75%;
      width: 50%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
      transform: skewX(-15deg); transition: left 0.5s ease; pointer-events: none;
    }
    .subnav-phone:hover::after { left: 140%; }

    /* 8. Service tile icon bounce (dock.md spring hover concept) */
    .svc-tile-icon {
      transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .svc-tile:hover .svc-tile-icon { transform: scale(1.18) rotate(-6deg); }

    /* 9. Arrow slide on all CTAs */
    .svc-tile-link i,
    .hiw-bcard-cta i,
    .tab-learn i { transition: transform 0.22s ease; }
    .svc-tile:hover .svc-tile-link i,
    .hiw-bcard:hover .hiw-bcard-cta i { transform: translateX(5px); }

    /* 10. Stats bar number scale on hover */
    .stat { transition: background 0.2s ease; }
    .stat:hover { background: rgba(255,255,255,.07); }
    .stat-n { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
    .stat:hover .stat-n { transform: scale(1.1); }

    /* 11. Why card icon subtle float */
    .why-icon { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
    .why-card:hover .why-icon { transform: translateY(-6px) scale(1.08); }

    /* 12. Feature card icon pulse */
    .feat-icon { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease; }
    .feat-card:hover .feat-icon { transform: scale(1.12) rotate(3deg); background: rgba(201,48,44,.14); }

    /* 13. Footer link hover indent */
    .ft-lnk { transition: color var(--ease), transform var(--ease); display: block; }
    .ft-lnk:hover { color: var(--white); transform: translateX(5px); }

    /* 14. CTA banner button glow on hover */
    .cta-phone-btn { transition: transform 0.3s ease, box-shadow 0.3s ease; }
    .cta-phone-btn:hover { box-shadow: 0 12px 40px rgba(0,0,0,.35); }

    /* ── Marquee trust band (#034) ── */
    @keyframes marquee-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    .marquee-band { background: var(--black); border-top: 1px solid rgba(255,255,255,.06); padding: 12px 0; overflow: hidden; }
    .marquee-inner { display: flex; width: max-content; animation: marquee-x 40s linear infinite; }
    .marquee-band:hover .marquee-inner { animation-play-state: paused; }
    .m-item { display: inline-flex; align-items: center; gap: 10px; padding: 0 22px; font-size: 11px; font-weight: 700; color: rgba(255,255,255,.38); letter-spacing: 2px; text-transform: uppercase; white-space: nowrap; }
    .m-item i { color: var(--red); font-size: 6px; }

    /* ── Interactive hover button shine (#048) ── */
    .btn-red { position: relative; overflow: hidden; }
    .btn-red::after {
      content: '';
      position: absolute; top: 0; left: -75%;
      width: 50%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
      transform: skewX(-15deg);
      transition: left 0.5s ease;
      pointer-events: none;
    }
    .btn-red:hover::after { left: 135%; }

    /* ── Testimonials Columns (#081) ── */
    @keyframes scroll-col { to { transform: translateY(-50%); } }
    .tcols-wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-height: 540px; overflow: hidden; position: relative; margin-top: 8px; }
    .tcols-wrap::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 80px; background: linear-gradient(var(--gray-100), transparent); pointer-events: none; z-index: 1; }
    .tcols-wrap::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 130px; background: linear-gradient(transparent, var(--gray-100)); pointer-events: none; z-index: 1; }
    .tcol { overflow: hidden; }
    .tcol-inner { display: flex; flex-direction: column; gap: 14px; animation: scroll-col 22s linear infinite; }
    .tcol-inner:hover { animation-play-state: paused; }
    .t-card { background: var(--white); border-radius: 12px; padding: 18px 20px; border: 1px solid #ebebeb; box-shadow: 0 2px 10px rgba(0,0,0,.04); }
    .t-card-stars { color: #f59e0b; font-size: 12px; letter-spacing: 1px; margin-bottom: 8px; }
    .t-card-text { font-size: 13.5px; color: var(--gray-700); line-height: 1.62; margin-bottom: 12px; }
    .t-card-author { display: flex; align-items: center; gap: 9px; }
    .t-card-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
    .t-card-avatar-init { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: 700; font-family: var(--sans); letter-spacing: .3px; user-select: none; }
    .t-card-name { font-size: 13px; font-weight: 600; color: var(--black); }
    .t-card-date { font-size: 11px; color: var(--gray-500); }
    @media(max-width: 768px) { .tcols-wrap { grid-template-columns: 1fr 1fr; } .tcol:nth-child(3) { display: none; } }
    @media(max-width: 480px) { .tcols-wrap { grid-template-columns: 1fr; } .tcol:nth-child(2) { display: none; } }

    /* ── Cookie Consent Banner ── */
    #cookie-banner {
      position: fixed; bottom: 0; left: 0; right: 0;
      z-index: 9999;
      background: #111;
      border-top: 1px solid rgba(255,255,255,.12);
      padding: 14px 20px;
      display: flex; align-items: center; justify-content: space-between;
      gap: 16px; flex-wrap: wrap;
      font-family: 'Inter', system-ui, sans-serif;
      font-size: 13px;
      color: rgba(255,255,255,.75);
      box-shadow: 0 -4px 24px rgba(0,0,0,.35);
    }
    #cookie-banner p { margin: 0; flex: 1 1 260px; line-height: 1.5; }
    #cookie-banner p a { color: #fff; text-decoration: underline; opacity: .8; }
    #cookie-banner p a:hover { opacity: 1; }
    .cookie-btns { display: flex; gap: 8px; flex-shrink: 0; }
    .cookie-btn-accept {
      padding: 8px 20px; background: #C9302C; color: #fff;
      border: none; border-radius: 6px; font-size: 13px; font-weight: 700;
      cursor: pointer; font-family: inherit; transition: opacity .2s;
    }
    .cookie-btn-accept:hover { opacity: .85; }
    .cookie-btn-reject {
      padding: 8px 16px; background: transparent; color: rgba(255,255,255,.6);
      border: 1px solid rgba(255,255,255,.25); border-radius: 6px;
      font-size: 13px; font-weight: 500; cursor: pointer;
      font-family: inherit; transition: border-color .2s, color .2s;
    }
    .cookie-btn-reject:hover { border-color: rgba(255,255,255,.6); color: #fff; }
    .cookie-btn-manage {
      padding: 8px 16px; background: transparent; color: rgba(255,255,255,.35);
      border: none; border-radius: 6px; font-size: 12px; font-weight: 400;
      cursor: pointer; font-family: inherit; transition: color .2s; text-decoration: underline;
    }
    .cookie-btn-manage:hover { color: rgba(255,255,255,.7); }
    @media(max-width: 768px) {
      #cookie-banner { padding-bottom: 78px; } /* clear mob-bottom-nav */
    }
  
    .form-tcpa { font-size: 11px; color: #666; line-height: 1.55; margin-top: 10px; }
    .form-tcpa a { color: var(--red); }

/* ── Brands strip (no boxes, floating logos) ── */
.brands-strip { background: var(--white); border-top: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb; }
.brands-strip-hdr { text-align: center; }
.brands-logo-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 32px 52px;
}
.brands-logo-row div { display: flex; align-items: center; }
.brands-logo-row img {
  max-height: 38px;
  width: auto;
  filter: grayscale(100%);
  opacity: 0.55;
  transition: filter .3s, opacity .3s;
}
.brands-logo-row img:hover { filter: none; opacity: 1; }

/* ── Service photo cards (rectangular, merged with why-choose) ── */
.svc-photo-section { background: linear-gradient(160deg, #0d1117 0%, #161d27 50%, #0d1117 100%); }
.svc-photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.svc-photo-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-decoration: none;
  color: #fff;
  transition: transform .3s ease, box-shadow .3s ease;
}
.svc-photo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(0,0,0,.5);
}
.svc-photo-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.svc-photo-card:hover img { transform: scale(1.06); }
.svc-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.1) 100%);
  transition: background .3s;
}
.svc-photo-card:hover .svc-photo-overlay {
  background: linear-gradient(0deg, rgba(180,30,30,.82) 0%, rgba(0,0,0,.5) 55%, rgba(0,0,0,.1) 100%);
}
/* Steel gradient overlay for sheet metal card */
.svc-photo-overlay--steel {
  background: linear-gradient(0deg, rgba(15,25,40,.88) 0%, rgba(40,60,80,.45) 55%, rgba(80,100,120,.1) 100%);
}
.svc-photo-card:hover .svc-photo-overlay--steel {
  background: linear-gradient(0deg, rgba(180,30,30,.82) 0%, rgba(40,60,80,.5) 55%, rgba(80,100,120,.1) 100%);
}
.svc-photo-body {
  position: relative;
  z-index: 1;
  padding: 20px 22px;
}
.svc-photo-icon {
  font-size: 22px;
  color: var(--red);
  margin-bottom: 8px;
  transition: color .3s;
}
.svc-photo-card:hover .svc-photo-icon { color: #ff6b6b; }
.svc-photo-body h3 {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 6px;
  line-height: 1.25;
}
.svc-photo-body p {
  font-size: 13px;
  color: rgba(255,255,255,.72);
  line-height: 1.55;
  margin-bottom: 12px;
}
.svc-photo-link {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--red);
  transition: color .3s;
}
.svc-photo-card:hover .svc-photo-link { color: #fff; }

/* Sheet metal card steel accent border */
.svc-photo-card--steel {
  border: 1px solid rgba(160,180,200,.2);
}
.svc-photo-card--steel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #8fa3b5, #c5d5e0, #8fa3b5, transparent);
  z-index: 2;
}

@media (max-width: 1024px) {
  .svc-photo-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-photo-card { height: 280px; }
}
@media (max-width: 600px) {
  .svc-photo-grid { grid-template-columns: 1fr; gap: 12px; }
  .svc-photo-card { height: 240px; }
  .brands-logo-row { gap: 24px 36px; }
  .brands-logo-row img { max-height: 30px; }
}