/*
Theme Name: Martinez & Martinez Modern
Theme URI: https://www.martinezandmartinez.com
Author: Martinez & Martinez Enterprises
Description: Custom modern theme for Martinez & Martinez Enterprises — Professional Land Surveyors & Mappers, South Florida. Built to replace the legacy Twenty-Eleven/Archtek based theme. Integrates with Google Reviews, Contact Form 7, and WhatsApp Chat plugins.
Version: 1.0.5
Requires at least: 6.0
Requires PHP: 8.1
Tested up to: 6.7
Text Domain: martinez-modern
*/


  :root{
    --ink:#1B2A35;
    --paper:#F7F5EF;
    --paper-2:#EFEBE0;
    --accent:#E0632B;
    --accent-dark:#B84F22;
    --steel:#4A6572;
    --line:#D8D2C1;
    --gold:#C99A3B;
    --white:#FFFFFF;
    --radius:2px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;overflow-x:hidden;width:100%;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Source Serif 4', Georgia, serif;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{
    font-family:'Archivo', sans-serif;
    letter-spacing:-0.01em;
    margin:0;
  }
  .mono{
    font-family:'IBM Plex Mono', monospace;
    letter-spacing:0.04em;
  }
  a{color:inherit;text-decoration:none;}
  img,svg{display:block;max-width:100%;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 28px;}
  .eyebrow{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--accent-dark);
    display:flex;
    align-items:center;
    gap:10px;
  }
  .eyebrow::before{
    content:"";
    width:22px;height:1px;
    background:var(--accent-dark);
    display:inline-block;
  }

  /* ---------- Utility bar ---------- */
  .util-bar{
    background:var(--ink);
    color:var(--paper);
    font-family:'IBM Plex Mono', monospace;
    font-size:12.5px;
    letter-spacing:0.02em;
  }
  .util-bar .wrap{
    display:flex;justify-content:space-between;align-items:center;
    padding:8px 28px;
  }
  .util-bar .stars{color:var(--gold);letter-spacing:1px;}
  .util-left{display:flex;gap:22px;align-items:center;flex-wrap:wrap;}
  .util-bar a.phone{
    color:var(--paper);font-weight:500;
    display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:7px;
    white-space:nowrap;line-height:1;
  }
  .util-bar a.phone:hover{color:var(--accent);}
  .util-bar .free-estimate-text{
    font-weight:600;color:var(--gold);
  }
  .util-bar a.phone svg{width:13px;height:13px;flex-shrink:0;display:block;}

  /* ---------- Header ---------- */
  header.site{
    position:sticky;top:0;z-index:50;
    background:rgba(247,245,239,0.96);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line);
  }
  .nav-row{
    display:flex;align-items:center;justify-content:space-between;
    padding:10px 28px;
    max-width:1180px;margin:0 auto;
    gap:24px;
  }
  .brand{
    display:flex;align-items:center;gap:12px;
  }
  .brand-mark{
    width:44px;height:44px;border-radius:50%;
    border:1.5px solid var(--ink);
    display:flex;align-items:center;justify-content:center;
    font-family:'Archivo',sans-serif;font-weight:800;font-size:15px;
    flex-shrink:0;
  }
  .site-logo-img{
    height:64px;
    width:auto;
    max-width:240px;
    object-fit:contain;
    flex-shrink:0;
    display:block;
  }
  .brand-name{font-family:'Archivo',sans-serif;font-weight:700;font-size:17px;line-height:1.15;}
  .brand-sub{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:0.08em;color:var(--steel);text-transform:uppercase;}
  nav.primary{font-family:'Archivo',sans-serif;font-weight:500;font-size:14.5px;}
  nav.primary ul{
    display:flex;align-items:center;gap:26px;
    list-style:none;margin:0;padding:0;
  }
  nav.primary li{position:relative;}
  nav.primary > ul > li > a{
    display:inline-block;padding:6px 0;border-bottom:2px solid transparent;
  }
  nav.primary > ul > li > a:hover{border-bottom-color:var(--accent);}

  /* Dropdown submenu (e.g. "Survey Types" → the 9 survey pages) */
  nav.primary .sub-menu{
    display:none;
    position:absolute;top:100%;left:-16px;z-index:60;
    list-style:none;margin:0;padding:8px 0;
    background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
    box-shadow:0 12px 28px rgba(27,42,53,0.12);
    min-width:220px;flex-direction:column;gap:0;
  }
  nav.primary li:hover > .sub-menu,
  nav.primary li:focus-within > .sub-menu{
    display:flex;
  }
  nav.primary .sub-menu li{width:100%;}
  nav.primary .sub-menu a{
    display:block;padding:9px 18px;
    font-size:13.5px;font-weight:500;color:var(--ink);white-space:nowrap;
    border-bottom:none;
  }
  nav.primary .sub-menu a:hover{background:var(--paper-2);color:var(--accent-dark);}
  /* Small visual cue that a top-level item has a dropdown */
  nav.primary li.menu-item-has-children > a::after{
    content:"▾";font-size:10px;margin-left:5px;opacity:.6;
  }
  .header-cta{display:flex;align-items:center;gap:16px;}

  /* ---------- Mobile menu toggle & panel ---------- */
  .mm-menu-toggle{
    display:none;flex-direction:column;justify-content:center;gap:5px;
    width:34px;height:34px;background:none;border:none;cursor:pointer;padding:0;
    flex-shrink:0;
  }
  .mm-menu-toggle-bar{
    width:100%;height:2px;background:var(--ink);border-radius:1px;
    transition:transform .2s ease, opacity .2s ease;
  }
  .mm-menu-toggle[aria-expanded="true"] .mm-menu-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .mm-menu-toggle[aria-expanded="true"] .mm-menu-toggle-bar:nth-child(2){opacity:0;}
  .mm-menu-toggle[aria-expanded="true"] .mm-menu-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  .mobile-nav{
    display:none;
    background:var(--paper);
    border-top:1px solid var(--line);
  }
  .mobile-nav.is-open{display:block;}
  .mobile-nav-list{
    list-style:none;margin:0;padding:8px 28px 16px;
    display:flex;flex-direction:column;
  }
  .mobile-nav-list li a{
    display:block;padding:13px 0;
    font-family:'Archivo',sans-serif;font-weight:600;font-size:15.5px;color:var(--ink);
    border-bottom:1px solid var(--line);
  }
  .mobile-nav-list li:last-child a{border-bottom:none;}
  .mobile-nav-list .sub-menu{
    list-style:none;margin:0 0 4px 10px;padding:0;
    border-left:2px solid var(--line);
  }
  .mobile-nav-list .sub-menu li a{
    padding:11px 0 11px 14px;
    font-size:13.5px;font-weight:500;color:var(--steel);
  }
  .btn{
    display:inline-flex;align-items:center;gap:8px;
    font-family:'Archivo',sans-serif;font-weight:600;font-size:14px;
    padding:12px 22px;border-radius:var(--radius);
    background:var(--accent);color:var(--white);
    border:1px solid var(--accent);
    white-space:nowrap;
  }
  .btn:hover{background:var(--accent-dark);border-color:var(--accent-dark);}
  .btn.outline{background:transparent;color:var(--ink);border:1px solid var(--ink);}
  .btn.outline:hover{background:var(--ink);color:var(--paper);}
  .btn.ghost{background:transparent;color:var(--paper);border:1px solid rgba(247,245,239,0.5);}
  .btn.ghost:hover{border-color:var(--paper);}

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    overflow:hidden;
    background:var(--ink);
    color:var(--paper);
    padding:70px 0 70px;
  }
  .hero .contours{
    position:absolute;inset:0;opacity:0.16;pointer-events:none;
  }
  .hero-grid{
    display:grid;grid-template-columns:1.1fr 0.9fr;gap:56px;align-items:center;
    position:relative;z-index:2;
  }
  .hero h1{
    font-size:50px;line-height:1.2;font-weight:800;
    margin:18px 0 22px;
  }
  .hero h1 em{
    font-style:normal;color:var(--accent);
  }
  .hero p.lede{
    font-size:18px;line-height:1.55;color:#D9DFE2;max-width:46ch;margin-bottom:32px;
  }
  .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:34px;}
  .hero-trust{
    display:flex;gap:28px;flex-wrap:wrap;align-items:center;
    font-family:'IBM Plex Mono',monospace;font-size:13px;color:#C7CFD3;
  }
  .hero-trust .stars{color:var(--gold);letter-spacing:2px;font-size:15px;}
  .hero-trust strong{color:var(--paper);font-weight:500;}

  .benchmark{
    width:100%;
    aspect-ratio:1/1;
    max-width:380px;justify-self:center;
    border-radius:50%;
    border:1.5px dashed rgba(247,245,239,0.35);
    display:flex;align-items:center;justify-content:center;
    position:relative;
  }
  .benchmark::before{
    content:"";
    position:absolute;inset:22px;
    border-radius:50%;
    border:1px solid rgba(247,245,239,0.25);
  }
  .benchmark-inner{
    width:70%;aspect-ratio:1/1;border-radius:50%;
    background:linear-gradient(150deg,#24343F,#1B2A35);
    border:1px solid rgba(247,245,239,0.3);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;padding:20px;
  }
  .benchmark-inner .num{font-family:'Archivo',sans-serif;font-weight:800;font-size:38px;color:var(--paper);}
  .benchmark-inner .label{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold);margin-top:6px;}

  /* ---------- Stamp stats strip ---------- */
  .stats{
    background:var(--paper-2);
    border-bottom:1px solid var(--line);
    padding:34px 0;
  }
  .stats-row{
    display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  }
  .stat{
    display:flex;align-items:center;gap:14px;
    min-width:0;
  }
  .stat-stamp{
    width:52px;height:52px;border-radius:50%;
    border:1.5px solid var(--steel);
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
    font-family:'Archivo',sans-serif;font-weight:700;font-size:14px;color:var(--steel);
  }
  .stat-text{min-width:0;}
  .stat-text .num{font-family:'Archivo',sans-serif;font-weight:700;font-size:16.5px;}
  .stat-text .label{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--steel);text-transform:uppercase;letter-spacing:0.04em;}

  /* ---------- Section shell ---------- */
  section{padding:84px 0;}
  .section-head{
    display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
    margin-bottom:44px;flex-wrap:wrap;
  }
  .section-head h2{font-size:32px;font-weight:700;max-width:16ch;margin-top:10px;}
  .section-head p{font-family:'Source Serif 4',serif;color:var(--steel);max-width:42ch;font-size:15.5px;line-height:1.55;}

  /* ---------- Services ---------- */
  .services-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
    background:var(--line);border:1px solid var(--line);
  }
  .service-card{
    background:var(--paper);padding:30px 26px;
    display:block;text-decoration:none;color:inherit;
    position:relative;
    transition:background-color .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  .service-card:hover,
  .service-card:focus-visible{
    background:var(--paper-2);
    transform:translateY(-4px);
    box-shadow:0 12px 24px rgba(27,42,53,0.1);
    z-index:1;
  }
  .service-card:hover .idx,
  .service-card:focus-visible .idx{color:var(--accent);}
  .service-card:hover h3,
  .service-card:focus-visible h3{color:var(--accent-dark);}
  .service-card .idx{color:var(--accent-dark);margin-bottom:4px;transition:color .2s ease;}
  .service-card .idx svg{width:30px;height:30px;}
  .service-card h3{font-size:18px;font-weight:600;margin:14px 0 8px;transition:color .2s ease;}
  .service-card p{font-size:14.5px;color:var(--steel);line-height:1.5;margin:0;}

  /* ---------- Photo gallery (mosaic) ---------- */
  /*
    NOTE FOR DEV: this is ONE unified grid (not a flex column next to a
    separate grid) specifically so the portrait tile's height always
    exactly matches the square tiles' combined height — it spans the
    same rows they occupy, rather than being sized independently.
  */
  .gallery-mosaic{
    display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
  }
  .gallery-mosaic .gallery-portrait{
    grid-column:1;grid-row:1 / span 2;
  }
  .gallery-mosaic .gallery-square{
    aspect-ratio:1/1;
  }

  /* ---------- Flip cards (gallery squares) ---------- */
  .flip-card{
    perspective:1000px;
  }
  .flip-card-inner{
    position:relative;width:100%;height:100%;
    transition:transform .6s cubic-bezier(.4,.2,.2,1);
    transform-style:preserve-3d;
  }
  .flip-card:hover .flip-card-inner,
  .flip-card.is-flipped .flip-card-inner{
    transform:rotateY(180deg);
  }
  .flip-card-front,
  .flip-card-back{
    position:absolute;inset:0;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    border-radius:var(--radius);
    overflow:hidden;
  }
  .flip-card-front img{
    width:100%;height:100%;object-fit:cover;display:block;
  }
  .flip-card-back{
    transform:rotateY(180deg);
    background:linear-gradient(135deg,var(--ink),var(--steel));
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;padding:14px;gap:6px;
    cursor:default;
  }
  .flip-title{
    font-family:'Archivo',sans-serif;font-weight:700;font-size:14px;color:var(--paper);
    line-height:1.25;
  }
  .flip-sub{
    font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:0.05em;text-transform:uppercase;
    color:var(--gold);
  }

  .photo-ph{
    background:linear-gradient(135deg,var(--steel),var(--ink));
    border-radius:var(--radius);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    color:rgba(247,245,239,0.75);
    font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.06em;text-transform:uppercase;
    text-align:center;padding:10px;gap:8px;
  }
  .photo-ph svg{width:26px;height:26px;opacity:0.8;}
  img.photo-real{
    width:100%;height:100%;object-fit:cover;display:block;
    border-radius:var(--radius);
  }

  /* ---------- Testimonials ---------- */
  .testimonials{background:var(--ink);color:var(--paper);}
  .testimonials .section-head p{color:#B9C2C6;}
  .testimonials .section-head h2{color:var(--paper);}
  .t-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .t-card{
    background:#22323C;border:1px solid rgba(247,245,239,0.1);
    padding:26px;border-radius:var(--radius);
  }
  .t-card .stars{color:var(--gold);letter-spacing:2px;font-size:14px;margin-bottom:14px;}
  .t-card p.quote{font-size:15px;line-height:1.6;color:#DDE3E6;margin-bottom:18px;}
  .t-card .who{font-family:'IBM Plex Mono',monospace;font-size:12px;color:#8FA1A8;}
  .review-cta{
    display:flex;justify-content:center;margin-top:40px;
  }

  /* ---------- Service area ---------- */
  .area-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;
  }
  .county{
    margin-bottom:22px;
  }
  .county h3{
    font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:0.08em;
    text-transform:uppercase;color:var(--accent-dark);margin-bottom:10px;
    display:flex;align-items:center;gap:8px;
  }
  .county-cities{
    display:flex;flex-wrap:wrap;gap:8px 10px;font-size:14.5px;color:var(--ink);
  }
  .county-cities span{position:relative;padding-right:12px;}
  .county-cities span::after{content:"·";position:absolute;right:0;color:var(--line);}
  .county-cities span:last-child::after{content:"";}
  .map-ph{
    background:var(--paper-2);border:1px solid var(--line);
    border-radius:var(--radius);
    aspect-ratio:4/3.2;
    display:flex;align-items:center;justify-content:center;
    position:relative;overflow:hidden;
  }

  /* ---------- About preview ---------- */
  .about-band{background:var(--paper-2);}
  .about-flex{display:grid;grid-template-columns:0.9fr 1.1fr;gap:56px;align-items:center;}
  .credential-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px;}
  .credential{
    font-family:'IBM Plex Mono',monospace;font-size:11.5px;
    border:1px solid var(--ink);padding:7px 13px;border-radius:20px;
  }

  /* ---------- CTA band ---------- */
  .cta-band{
    background:var(--accent);color:var(--white);text-align:center;
    padding:56px 0 60px;
  }
  .cta-band h2{font-size:30px;margin-bottom:12px;}
  .cta-band p{font-family:'Source Serif 4',serif;font-size:16px;margin-bottom:0;opacity:0.95;}

  /* ---------- Request form (Contact Form 7) ---------- */
  .request-form-section{background:var(--ink);color:var(--paper);}
  .form-grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:56px;align-items:start;}
  .form-grid .eyebrow{color:var(--gold);}
  .form-grid h2{font-size:30px;margin:14px 0 16px;color:var(--paper);}
  .form-grid p.lede{color:#C7CFD3;font-size:15.5px;line-height:1.6;max-width:38ch;margin-bottom:26px;}
  .form-points{display:flex;flex-direction:column;gap:14px;}
  .form-point{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:#DDE3E6;}
  .form-point svg{width:18px;height:18px;flex-shrink:0;margin-top:2px;color:var(--accent);}
  .form-card{
    background:var(--paper);color:var(--ink);border-radius:var(--radius);
    padding:30px 30px 26px;
  }
  .form-card .cf7-tag{
    font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;
    color:var(--steel);margin-bottom:18px;display:block;
  }
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
  .form-field{display:flex;flex-direction:column;gap:6px;}
  .form-field.full{grid-column:1/-1;}
  .form-field label{
    font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.04em;text-transform:uppercase;color:var(--steel);
  }
  .form-field .fake-input{
    border:1px solid var(--line);border-radius:var(--radius);
    padding:11px 12px;font-family:'Source Serif 4',serif;font-size:14px;color:#9AA6AC;
    background:var(--white);
  }
  .form-field textarea.fake-input{min-height:64px;}
  .form-submit-row{
    display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:6px;flex-wrap:wrap;
  }
  .recaptcha-note{
    font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--steel);
  }

  /* ---------- Contact Form 7 styling ----------
     NOTE FOR DEV: CF7 renders its own plain markup (no custom classes
     of ours), so these rules target CF7's actual output classes
     directly (.wpcf7-form, .wpcf7-form-control, etc.) rather than the
     .form-field/.fake-input classes used in the pre-CF7 placeholder.
     Scoped to .request-form-section so it doesn't affect any other
     CF7 form added elsewhere on the site later. */
  .request-form-section .wpcf7-form{
    font-family:'Source Serif 4',serif;
  }
  .request-form-section .wpcf7-form p{
    margin:0 0 16px;
  }
  .request-form-section .wpcf7-form > p:first-child,
  .request-form-section .wpcf7-form p{
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;letter-spacing:0.04em;text-transform:uppercase;color:var(--steel);
  }
  .request-form-section .wpcf7-form-control-wrap{
    display:block;margin-top:6px;
  }
  .request-form-section .wpcf7-form-control{
    width:100%;
    border:1px solid var(--line);border-radius:var(--radius);
    padding:11px 12px;
    font-family:'Source Serif 4',serif;font-size:14px;color:var(--ink);
    background:var(--white);
  }
  .request-form-section .wpcf7-form-control:focus{
    outline:none;border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(224,99,43,0.15);
  }
  .request-form-section textarea.wpcf7-form-control{
    height:70px;resize:vertical;
  }
  .request-form-section .wpcf7-form-control.wpcf7-submit{
    width:auto;
    display:inline-flex;align-items:center;gap:8px;
    font-family:'Archivo',sans-serif;font-weight:600;font-size:14px;
    padding:12px 22px;border-radius:var(--radius);
    background:var(--accent);color:var(--white);border:1px solid var(--accent);
    cursor:pointer;transition:background .15s ease,border-color .15s ease;
    margin-top:6px;
  }
  .request-form-section .wpcf7-form-control.wpcf7-submit:hover{
    background:var(--accent-dark);border-color:var(--accent-dark);
  }
  .request-form-section .wpcf7-not-valid-tip{
    color:#B3261E;font-family:'IBM Plex Mono',monospace;font-size:11px;
    text-transform:none;letter-spacing:0;margin-top:4px;display:block;
  }
  .request-form-section .wpcf7-response-output{
    border-radius:var(--radius);padding:12px 14px;margin-top:16px!important;
    font-family:'IBM Plex Mono',monospace;font-size:12.5px;
    text-transform:none;letter-spacing:0;
    border:1px solid var(--line);color:var(--ink);
  }
  .request-form-section form.sent .wpcf7-response-output{
    border-color:#2E7D32;color:#2E7D32;background:rgba(46,125,50,0.06);
  }
  .request-form-section form.failed .wpcf7-response-output,
  .request-form-section form.aborted .wpcf7-response-output{
    border-color:#B3261E;color:#B3261E;background:rgba(179,38,30,0.06);
  }
  .request-form-section form.invalid .wpcf7-response-output{
    border-color:#B36B00;color:#B36B00;background:rgba(179,107,0,0.06);
  }

  /* ---------- Footer ---------- */
  footer{
    background:var(--ink);color:#B9C2C6;padding:56px 0 24px;
    font-size:14px;
  }
  .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;margin-bottom:40px;}
  footer h4{font-family:'Archivo',sans-serif;color:var(--paper);font-size:13px;letter-spacing:0.06em;text-transform:uppercase;margin-bottom:16px;}
  footer a{display:block;margin-bottom:9px;color:#B9C2C6;}
  footer a:hover{color:var(--accent);}
  .footer-bottom{
    border-top:1px solid rgba(247,245,239,0.12);padding-top:20px;
    display:flex;justify-content:space-between;font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:#7C8A90;
    flex-wrap:wrap;gap:10px;
  }



  /* ---------- WhatsApp chat widget ---------- */
  .chat-fab{
    position:fixed;bottom:24px;right:24px;z-index:100;
    width:58px;height:58px;border-radius:50%;
    background:#25D366;color:var(--white);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 8px 24px rgba(27,42,53,0.35);
    cursor:pointer;
  }
  .chat-fab svg{width:28px;height:28px;}
  .chat-tag{
    position:fixed;bottom:90px;right:24px;z-index:100;
    background:var(--white);color:var(--ink);
    font-family:'Source Serif 4',serif;font-size:12.5px;
    padding:9px 14px;border-radius:6px;
    box-shadow:0 4px 14px rgba(0,0,0,0.18);
    border:1px solid var(--line);
    display:flex;align-items:center;gap:7px;
  }
  .chat-tag .dot{width:7px;height:7px;border-radius:50%;background:#25D366;display:inline-block;flex-shrink:0;}

  
  @media(max-width:900px){
    .hero-grid{grid-template-columns:1fr;}
    .benchmark{display:none;}
    .stats-row{grid-template-columns:repeat(2,1fr);}
    .services-grid{grid-template-columns:1fr 1fr;}
    .t-grid{grid-template-columns:1fr;}
    .area-grid,.about-flex,.form-grid{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr 1fr;}
    nav.primary{display:none;}
    .site-logo-img{height:48px;max-width:180px;}
    .hero h1{font-size:43.7px;}
    .util-bar .wrap{
      flex-direction:column;align-items:flex-start;gap:5px;
      padding:8px 20px;
    }
    .mm-menu-toggle{display:flex;}
    .nav-row{padding:3px 28px;}
  }
  @media(min-width:901px) and (max-width:1099px){
    /*
      NOTE FOR DEV: this range is where hero-grid is already 2 columns
      (see .hero-grid at ≥901px) but the container hasn't reached its
      1180px max-width yet, so the text column is narrower than the
      full 50px heading needs. Without this, "Every property, done"
      wraps onto an extra line on common laptop/half-screen widths.
    */
    .hero h1{font-size:42px;}
  }
  @media(max-width:600px){
    .services-grid{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr;}
    .hero h1{font-size:34.5px;}
    .gallery-mosaic{grid-template-columns:repeat(2,1fr);}
  }
  @media(max-width:400px){
    .hero h1{font-size:27.6px;}
    /*
      NOTE FOR DEV: below ~400px, logo + "Request a Survey" button +
      hamburger no longer fit on one row at their normal sizes, and the
      "Free Survey Estimates!" phone line overflows the screen edge.
      These overrides shrink things just enough to keep everything on
      one line without wrapping or horizontal scroll.
    */
    .nav-row{padding:3px 14px;gap:10px;}
    .site-logo-img{height:38px;max-width:95px;}
    .header-cta{gap:8px;}
    .header-cta .btn{padding:10px 12px;font-size:13px;}
    .util-bar .wrap{padding:8px 14px;}
    .util-bar a.phone{font-size:10px;gap:5px;}
    .util-bar a.phone svg{width:11px;height:11px;}
  }
  /*
    NOTE FOR DEV: graduated logo sizing within the ≤400px range above.
    The safe max logo width grows with viewport width (empirically
    verified against "Request a Survey" + hamburger fitting on one
    line), so a single flat size either overflows on the narrowest
    phones or stays needlessly tiny on larger ones (e.g. iPhone 14 at
    390px). Each tier below is capped with a ~15-20px safety margin
    under the measured maximum for its narrowest edge.
  */
  @media(max-width:340px){
    .site-logo-img{height:52px;max-width:100px;}
  }
  @media(min-width:341px) and (max-width:375px){
    .site-logo-img{height:56px;max-width:125px;}
  }
  @media(min-width:376px) and (max-width:400px){
    .site-logo-img{height:58px;max-width:158px;}
  }