/* =====================================================================
   Mid Michigan Denture Repair - CLEAN REBUILD (v4)
   ---------------------------------------------------------------------
   This rebuild is generated from the original single-page index.html as the
   baseline, then expanded into a stable 3-page site with external CSS/JS.

   KEY REQUIREMENTS (locked):
   - Brand text "Mid Michigan Denture Repair" always on the LEFT of the page
     (header spans full width; not centered).
   - Desktop nav buttons do NOT stack/wrap. If the screen gets smaller,
     we switch to hamburger earlier (<= 980px).
   - Dark, thicker divider line under the header.
   - Mobile hamburger dropdown: buttons aligned to the RIGHT.
   - Two images on Home:
       * Dent 11 just above Pricing (slide up on scroll)
       * Dent 8 just above Call button (half-size on desktop)
     First image must never exceed the "original feel" size (cap width).
   - "We come to you!" pulse must be reliable: after first scroll AND visible.
   -    ===================================================================== */

/* ---------------------------
   GLOBAL / RESET
   --------------------------- */
:root{
  --page-bg: #E5F3FD;
  --ink: #111111;
  --accent: #0A3D62;
  --white: #ffffff;

  --page-max: 760px;
  --pad-x: 18px;
  --pad-top: 28px;
  --pad-bottom: 46px;

  /* Header divider (dark + thicker) */
  --header-divider: 4px solid rgba(0,0,0,0.28);

  /* Motion */
  --ease: 120ms ease;
  --reveal-ms: 600ms;
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin: 0;
  background: var(--page-bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.4;
}

/* Flyer-style centered page content */
.page{
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--pad-top) var(--pad-x) var(--pad-bottom);
  text-align: center;
}

.spacer-sm{ height: 10px; }
.spacer-md{ height: 16px; }
.spacer-lg{ height: 22px; }

/* ---------------------------
   HEADER / NAV (single source of truth)
   ---------------------------
   IMPORTANT:
   - Header spans full width so brand stays left of the PAGE (viewport).
   - Desktop: centered buttons; no wrapping.
   - <= 980px: hamburger on right; dropdown opens with RIGHT-aligned buttons.
*/
.site-header{
  position: sticky;
  top: 0;
  z-index: 3000;
  background: var(--page-bg);
  border-bottom: var(--header-divider);
}

/* Full-width header row (NOT centered) */
.nav-inner{
  position: relative; /* anchors dropdown */
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto; /* brand | centered links | hamburger */
  align-items: center;
  gap: clamp(12px, 1.3vw, 18px);
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: clamp(14px, 1.8vw, 28px);
  padding-left: clamp(22px, 3.1vw, 42px);
}

/* Brand pinned left */
.brand{
  justify-self: start;
  color: var(--accent);
  text-decoration: none;
  font-weight: 950;
  line-height: 1.05;
  font-size: clamp(1rem, 1.2vw + 0.7rem, 1.55rem);
}

/* Desktop links centered (NO wrap/stack) */
.nav-links{
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;

  gap: clamp(14px, 2vw, 30px);
  flex-wrap: nowrap;     /* DO NOT STACK */
  white-space: nowrap;   /* keep buttons on one line */
}

/* Button style (matches email button vibe) */
.nav-links a{
  background: var(--white);
  color: var(--accent);
  border: 2px solid var(--accent);
  border-radius: 12px;
  padding: 10px 16px;
  line-height: 1;
  font-weight: 950;
  text-decoration: none;
  transition: transform var(--ease), filter var(--ease);
  will-change: transform;
}

.nav-links a:hover,
.nav-links a:focus-visible{
  transform: scale(1.04);
  filter: brightness(0.98);
}

/* Hamburger button (RIGHT), hidden on desktop */
.hamburger{
  justify-self: end;
  display: none;
  align-items: center;
  justify-content: center;

  /* Big padding (your requirement) */
  padding: 18px 28px;
  min-height: 72px;

  border-radius: 14px;
  border: 2px solid var(--accent);
  background: var(--accent);
  color: var(--white);
cursor: pointer;
  touch-action: manipulation;

  transition: transform var(--ease), filter var(--ease);
}

.hamburger:hover,
.hamburger:focus-visible{
  transform: scale(1.04);
  filter: brightness(0.98);
}

/* 3-line hamburger icon */
.hamburger .bar{
  position: relative;
  width: 24px;
  height: 2px;
  background-color: var(--white);
border-radius: 999px;
}
.hamburger .bar::before,
.hamburger .bar::after{
  content: "";
  position: absolute;
  left: 0;
  width: 24px;
  height: 2px;
  background-color: var(--white);
border-radius: 999px;
}
.hamburger .bar::before{ top: -8px; }
.hamburger .bar::after{ top: 8px; }

/* Breakpoint to prevent stacking:
   - Switch to hamburger at 980px and below */
@media (max-width: 980px){
  .hamburger{ display: inline-flex; }

  /* Convert nav-links into dropdown panel */
  .nav-links{
    display: none; /* until .open */
    position: absolute;
    right: 14px;              /* anchor to right */
    left: auto;
    transform: none;
    top: calc(100% + 8px);

    background: var(--white);
    border: 2px solid rgba(0,0,0,0.10);
    border-radius: 14px;
    padding: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);

    flex-direction: column;
    gap: 12px;

    /* RIGHT ALIGN dropdown items */
    align-items: center;
    z-index: 3001;
    width: 90%;
    max-width: 320px;
  }

  .nav-links.open{ display: inline-flex; }

  .nav-links a{
    text-align: center;
    margin-left: 0;
    padding: 12px 16px;
    width: 100%;
    min-width: unset;
  }
}

/* ---------------------------
   LOGO / HERO
   --------------------------- */
.logo{
  width: min(420px, 92%);
  height: auto;
  display: block;
  margin: 0 auto 10px;
}

.subtitle{
  font-size: clamp(22px, 4.2vw, 40px);
  font-weight: 900;
  letter-spacing: 0.4px;
  margin: 10px 0 18px;
  line-height: 1.05;
}

/* "We come to you!" pill */
.pill{
  display: inline-block;
  margin: 18px 0 0;
  padding: 16px 26px;
  background: var(--ink);
  color: var(--page-bg);
  border-radius: 999px;
  font-weight: 950;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 24px;
}
.pill.pulse{
  animation: pillPop 1600ms ease-out 3;
  animation-fill-mode: both;
}
@keyframes pillPop{
  0%{ transform: scale(1); }
  60%{ transform: scale(1.25); }
  100%{ transform: scale(1); }
}

.hero-phone{
  margin-top: 14px;
  font-size: 18px;
  font-weight: 700;
}
.hero-phone a{
  color: var(--accent);
  text-decoration: none;
  font-weight: 900;
}

/* ---------------------------
   SECTION TITLES / LISTS
   --------------------------- */
.section-title{
  margin: 42px 0 18px;
  font-weight: 950;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 18px;
  position: relative;
}
.section-title::before,
.section-title::after{
  content: "—";
  margin: 0 10px;
  color: var(--ink);
  font-weight: 700;
}

/* remove decorative dashes where needed (robust on mobile Safari) */
.section-title.no-dashes::before,
.section-title.no-dashes::after{
  content: "";
  margin: 0;
  display: none; /* prevents any pseudo-element spacing quirks on mobile */
}

.simple-list{
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
}
.simple-list li{
  margin: 6px 0;
  font-weight: 650;
}

/* ---------------------------
   IMAGES
   --------------------------- */
.image-block{
  margin: 22px 0;
}

.content-image{
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 2px solid rgba(0,0,0,0.10);
  display: block;
  margin: 0 auto;
}

/* First image: cap size so it never feels larger than your original layout.
   (Original logo uses 420px max; we match that feel.) */
.content-image.cap{
  max-width: 546px; /* ~30% larger */
}

/* Second image half-size on desktop */
.content-image.half{
  width: 50%;
  max-width: 520px;
}
@media (max-width: 980px){
  .content-image.half{
    width: 100%;
    max-width: 100%;
  }
}

/* ---------------------------
   PRICING BOX
   --------------------------- */
.pricing-box{
  margin-bottom: 32px;
  display: inline-block;
  width: min(520px, 100%);
  text-align: center;
  border: 2px solid #111;
  border-radius: 14px;
  padding: 12px 14px;
  margin: 6px auto 0;
}
.pricing-box p{ margin: 8px 0; }
.fine-print{
  font-size: 13px;
  opacity: 0.92;
  margin-top: 10px;
}

/* ---------------------------
   WARRANTY
   --------------------------- */
.warranty{
  margin-top: 32px;
  margin: 14px 0 0;
  font-weight: 950;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  font-size: 1.2em;
}
.warranty.pulse{
  animation: warrantyPulse 900ms ease-in-out 3;
  animation-fill-mode: both;
}
@keyframes warrantyPulse{
  0%{ transform: scale(1); }
  40%{ transform: scale(1.15); }
  100%{ transform: scale(1); }
}

.trust{
  margin: 14px 0 0;
  font-weight: 700;
}

/* ---------------------------
   CTA BUTTONS
   --------------------------- */
.cta{
  margin-top: 22px;
  padding-top: 18px;
  border-top: 3px solid var(--ink);
}

.button-row{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  justify-content: center;
  margin-top: 10px;
}

.btn{
  display: inline-block;
  text-decoration: none;
  font-weight: 950;
  padding: 12px 16px;
  border-radius: 12px;
  border: 2px solid var(--accent);
  background: var(--white);
  color: var(--accent);
  touch-action: manipulation;
  transition: transform var(--ease), filter var(--ease);
  will-change: transform;
}
.btn:hover,
.btn:focus-visible{
  transform: scale(1.10);
  filter: brightness(0.98);
}
.btn-primary{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-size: 1.05em;
}
.btn-primary:hover,
.btn-primary:focus-visible{
  filter: brightness(1.05);
}

.cta-note{
  margin: 10px 0 0;
  font-size: 13px;
  opacity: 0.9;
  font-weight: 650;
}

/* ---------------------------
   INFO BOXES
   --------------------------- */
.info-box{
  margin-top: 22px;
  text-align: left;
  border: 3px solid var(--ink);
  border-radius: 14px;
  padding: 16px 14px;
}
.info-box h2{
  text-align: center;
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 950;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.info-box ul{
  margin: 10px 0 0;
  padding-left: 18px;
}
.info-box li{ margin: 7px 0; }
.do-not-glue{
  font-weight: 950;
  text-transform: uppercase;
}

/* ---------------------------
   FOOTER
   --------------------------- */
footer{
  margin-top: 18px;
  font-size: 13px;
  opacity: 0.85;
  text-align: center;
}

/* ---------------------------
   REVEAL (slide up on scroll)
   --------------------------- */
.reveal{
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--reveal-ms) ease, transform var(--reveal-ms) ease;
}
.reveal.visible{
  opacity: 1;
  transform: translateY(0);
}

/* ---------------------------
   RESPONSIVE
   --------------------------- */
@media (max-width: 600px){
  .page{ padding: 18px 14px 34px; }
  .subtitle{ font-size: 30px; }
  .pill{ font-size: 18px; padding: 12px 18px; }
  .logo{ width: min(360px, 92%); }
  .btn{ }
}

/* ---------------------------
   NON-SCROLL IMAGE APPEAR
   - Hidden only after JS marks the page ready for motion
   - Prevents images from getting stuck invisible if JS fails
--------------------------- */
.js-motion .zoom-in,
.js-motion .fade-in{
  will-change: opacity, transform;
}

.js-motion .zoom-in.motion-prep{
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 1050ms cubic-bezier(.22,.61,.36,1),
              transform 1050ms cubic-bezier(.22,.61,.36,1);
}
.js-motion .zoom-in.motion-in{
  opacity: 1;
  transform: scale(1);
}

.js-motion .fade-in.motion-prep{
  opacity: 0;
  transform: scale(0.975);
  transition: opacity 1200ms cubic-bezier(.22,.61,.36,1),
              transform 1200ms cubic-bezier(.22,.61,.36,1);
}
.js-motion .fade-in.motion-in{
  opacity: 1;
  transform: scale(1);
}

.page-title-scale{
  display: inline-block;
  font-size: 1.3em; /* 30% larger */
}

/* Centered info box variant used on Contact page */
.centered-box{
  text-align: center;
}
.centered-box h2{
  text-align: center;
}
.centered-list{
  list-style: disc;
  list-style-position: inside;
  padding-left: 0;
  margin: 10px 0 0;
}
.centered-list li{
  margin: 7px 0;
}

/* ----------------------------------------------------------
   Centering tweaks for Contact page lists
   - Makes the UL itself a centered block (inline-block)
   - Keeps bullets inside while keeping overall layout centered
---------------------------------------------------------- */
.centered-box .centered-list{
  display: inline-block;   /* centers the list as a block */
  text-align: left;        /* keeps bullet text readable */
  margin-left: auto;
  margin-right: auto;
}

/* ----------------------------------------------------------
   Tightened spacing for Contact page boxes
   - Reduces padding and vertical spacing by ~30%
   - Applies ONLY to boxes using .centered-box
---------------------------------------------------------- */
.centered-box{
  padding: 12px 10px;   /* tighter than default info-box */
}

.centered-box + .centered-box{
  margin-top: 20px;     /* reduce vertical gap between boxes */
}

/* ----------------------------------------------------------
   Width tightening for Contact page boxes
   - Narrows the Service Areas / Specializing In boxes
   - Reduces empty horizontal space
---------------------------------------------------------- */
.centered-box{
  max-width: 420px;     /* narrower box */
  margin-left: auto;
  margin-right: auto;
}

/* ----------------------------------------------------------
   Accessibility / SEO helper
   - Visually hidden but still readable by screen readers
---------------------------------------------------------- */
.sr-only{
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------------------------------
   Responsive Google Maps embed
   - Keeps a nice aspect ratio on all devices
   - Matches site rounded corners + border style
---------------------------------------------------------- */
.map-embed{
  position: relative;
  width: 100%;
  max-width: 420px; /* matches tightened contact boxes */
  margin: 0 auto;
  padding-bottom: 56.25%; /* 16:9 ratio */
  height: 0;
  overflow: hidden;

  border-radius: 14px;
  border: 2px solid rgba(0,0,0,0.10);
  background: #fff;
}

.map-embed iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Contact page: map box stays the same narrowed width as the other centered boxes */
.map-box{
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}




/* hamburger bars explicit accent */
.hamburger .bar,
.hamburger .bar::before,
.hamburger .bar::after{ background-color: var(--white);
}

.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item[open] summary::after{ content: "▴"; }
.faq-answer p{ margin: 12px 0 0; }


/* FAQ accordion - Style A (matches nav buttons) */
.card.faq{ padding: 14px; }
.faq-item{
  margin: 12px 0;
}
.faq-item:not([open]) summary:hover{ transform: scale(1.02); filter: brightness(0.98); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item[open] summary::after{ content:"▴"; }


/* Sticky footer layout (keeps footer consistent on short pages) */
html, body{ height: 100%; }
body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main.page{ flex: 1 0 auto; }
footer{ margin-top: auto; }


/* Footer (universal) */
.site-footer{ text-align: center; padding: 18px 0 26px; }
.footer-lines{ display: grid; gap: 6px; }
.footer-top{ font-weight: 850; opacity: 0.95; }
.footer-bottom{ font-weight: 800; opacity: 0.9; }

/* FAQ hero split */
.faq-hero-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:center; }
.faq-hero-img{ width:100%; border-radius:16px; }
@media(max-width:800px){
  .faq-hero-grid{ grid-template-columns:1fr; }
}

/* Mail-in page spacing cleanup */
.page .card{ margin-bottom: 22px; }
.page .card:last-child{ margin-bottom: 0; }
.steps{ padding-left: 20px; }
.bullets{ padding-left: 20px; }

/* Packing slip page */
.packing-header{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.print-btn{
  background: var(--accent);
  color: var(--white);
  border: none;
  padding: 12px 16px;
  border-radius: 14px;
  font-weight: 950;
  cursor: pointer;
  transition: transform var(--ease), filter var(--ease);
}
.print-btn:hover{ transform: scale(1.02); filter: brightness(0.98); }

.packing-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; margin-top:14px; }
.packing-block{ border: 2px solid rgba(0,0,0,0.08); border-radius: 16px; padding: 14px; background: var(--white); }
.packing-block h2{ margin-top: 0; }
.field{ display:grid; grid-template-columns: 180px 1fr; gap:12px; align-items:center; margin: 10px 0; }
.line{ border-bottom: 2px solid rgba(0,0,0,0.25); height: 20px; }
.line.tall{ height: 44px; }
.checklist{ margin: 10px 0 0; padding-left: 18px; }
.checklist li{ margin: 6px 0; }

@media(max-width: 900px){
  .packing-grid{ grid-template-columns:1fr; }
  .field{ grid-template-columns: 1fr; }
}

/* Print styles */
@media print{
  header, nav, footer{ display:none !important; }
  .print-btn{ display:none !important; }
  body{ background:#fff !important; }
  .card{ box-shadow:none !important; }
  .packing-block{ border: 1px solid #000 !important; }
  .line{ border-bottom: 1px solid #000 !important; }
}

/* Info-box ordered list spacing (Mail-In page) */
.info-box ol.steps{ margin: 10px 0 0; padding-left: 22px; }
.info-box ol.steps li{ margin: 8px 0; }

/* Centered mailing address */
.center-address{ text-align:center; margin:10px 0 22px; font-size:1.05rem; }

/* Mail-in CTA buttons */
.center-text{ text-align:center; }

/* removed custom cta-btn */
.cta-btn{
  background: var(--accent);
  color:#fff;
  padding:12px 18px;
  border-radius:14px;
  font-weight:900;
  text-decoration:none;
  display:inline-block;
}

/* Packing slip polish */
.packing-slip{ max-width:900px; margin:0 auto; }
.packing-header{ margin-bottom:10px; }
.packing-block{ margin-top:14px; }
.circle-options{ border-bottom:2px solid rgba(0,0,0,0.25); padding:6px 0; letter-spacing:1px; }
@media print{
  .packing-slip{ max-width:none; }
}





/* Contact page logo (transparent PNG)
   This image also has the .content-image class (used site-wide).
   We override only the parts we need with a more specific selector,
   so we don’t need any !important rules.
*/
img.content-image.contact-logo{
  /* Safari/iOS can stubbornly keep the default .content-image border.
     Force it off for the transparent logo PNG. */
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}



/* Packing Slip page spacing tweaks
   Keeps the page looking the same, just adds a bit more breathing room.
   Scoped to main content so the header/footer always stay full-width.
*/
body.packing-slip main{padding-top:40px;padding-bottom:60px}
body.packing-slip main h1,body.packing-slip main h2{margin-bottom:18px}
body.packing-slip main p,body.packing-slip main label{margin-bottom:10px;line-height:1.55}
body.packing-slip main .btn,body.packing-slip main button{margin-top:20px;margin-bottom:10px}
body.packing-slip h1,body.packing-slip h2{margin-bottom:18px}
body.packing-slip p,body.packing-slip label{margin-bottom:10px;line-height:1.55}
body.packing-slip .btn,body.packing-slip button{margin-top:20px;margin-bottom:10px}

/* Footer link styling
   Keeps footer links looking like the rest of the footer (no layout/visual surprises).
*/
.footer-link{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-link:hover{
  filter: brightness(0.95);
}

.legal-center ul{
  display:inline-block;
  text-align:left;
  margin:0 auto 20px;
}


/* Brand text wrapping
   Keeps "Mid Michigan Denture Repair" on one line on desktop so the header looks consistent.
   Mobile already switches to hamburger menu; this won't change that behavior.
*/
.brand{ white-space: nowrap; }


/* Packing Slip header full-bleed fix
   If anything on this page constrains the layout width, this forces the header
   (and its divider line) to span the full viewport width and resize correctly.
   Scoped ONLY to the packing slip page so other pages remain unchanged.
*/
body.packing-slip .site-header{
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* Privacy / legal page centering
   Centers the policy content (including lists).
*/
.legal-center{ text-align: center; }
.legal-center ul{
  list-style-position: inside;
  padding-left: 0;
  margin: 0 auto 20px;
}

/* Footer uppercase styling
   Makes all footer text consistent and bold-looking without changing layout.
*/
.site-footer{
  text-transform: uppercase;
  letter-spacing: 0.04em;
}


/* Contact page logo (no border)
   The logo PNG has transparency and should blend into the blue background.
   .content-image has a subtle border for photos; this removes it for the logo.
*/
.content-image.contact-logo{
  border: 0;
  box-shadow: none;
  outline: 0;
  background: transparent;
}


/* FAQ touch hover fix
   On touch devices, iOS can "stick" :hover after tapping, which can make the
   accordion feel like the CSS isn't working. Disable hover transforms there.
*/
@media (hover: none){
}


/* Footer breathing room + iOS safe-area padding */
.site-footer{ padding-bottom: calc(26px + 18px + env(safe-area-inset-bottom)); }


/* Remove logo image border/outline everywhere */
img{border:none;outline:none;box-shadow:none;}

/* Remove any logo image outline/border */
.site-header img, .logo img, img.logo{border:0;outline:0;box-shadow:none;}

/* =========================
   FAQ Accordion (classic)
   ========================= */
body.faq-page details.faq-item{
  background: var(--white);
  border: 2px solid var(--accent);
  border-radius: 14px;
  margin: 12px 0;
  overflow: hidden;
}

body.faq-page details.faq-item > summary{
  list-style: none;
  cursor: pointer;
  color: var(--accent);
  font-weight: 950;
  display: block;
  width: 100%;
  padding: 14px 48px 14px 14px;
  position: relative;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
body.faq-page details.faq-item > summary::-webkit-details-marker{ display:none; }
body.faq-page details.faq-item > summary::after{
  content: "▾";
  font-weight: 900;
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
body.faq-page details.faq-item[open] > summary::after{ content: "▴"; }

body.faq-page .faq-answer{
  padding: 0 14px 14px;
  border-top: 2px solid rgba(0,0,0,0.06);
  text-align: left;
}
body.faq-page .faq-answer p{ margin: 12px 0 0; }



/* Added: footer hours for Google consistency */
.footer-hours{margin-top:6px;font-size:0.95em;opacity:0.9;}


/* ===== Mobile menu backdrop (subtle blur behind menu only) =====
   Notes:
   - This uses a light blur + dim overlay behind the dropdown.
   - The dropdown itself is not blurred (higher z-index).
*/
.menu-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.18);   /* light dim */
  backdrop-filter: blur(1px);     /* subtle blur */
  -webkit-backdrop-filter: blur(1px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 2000; /* dropdown is 3001 */
}
.menu-backdrop.active{
  opacity: 1;
  pointer-events: auto;
}


/* ===== iPhone tactile feel (no real haptics, but feels like it) ===== */
#navToggle{
  transition: transform 0.08s ease;
}
#navToggle:active{
  transform: scale(0.95);
}

/* Slight bounce when menu opens */
@media (max-width: 980px){
  .nav-links{
    transition: transform 0.18s ease, opacity 0.18s ease;
  }
  .nav-links.open{
    transform: translateY(0) scale(1);
  }
  .nav-links{
    transform: translateY(-6px) scale(0.98);
  }
}


/* ---------------------------
   iPHONE / SMALL PHONE TUNING
   - tighter header
   - smaller hamburger
   - smaller hero/logo/text
   - prevent iOS text inflation / horizontal drift
   --------------------------- */
html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body{
  overflow-x: hidden;
}
img{
  max-width: 100%;
}

@media (max-width: 600px){
  :root{
    --pad-x: 14px;
    --pad-top: 16px;
    --pad-bottom: 30px;
  }

  .site-header{
    border-bottom-width: 3px;
  }

  .nav-inner{
    gap: 10px;
    padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
    padding-bottom: 8px;
    padding-right: 12px;
    padding-left: max(16px, calc(env(safe-area-inset-left, 0px) + 16px));
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .brand{
    font-size: clamp(0.95rem, 4.9vw, 1.45rem);
    line-height: 1.12;
    max-width: 100%;
    padding-right: 8px;
  }

  .hamburger{
    padding: 12px 16px;
    min-height: 56px;
    min-width: 56px;
    border-radius: 12px;
  }

  .hamburger .bar,
  .hamburger .bar::before,
  .hamburger .bar::after{
    width: 22px;
  }

  .hamburger .bar::before{ top: -7px; }
  .hamburger .bar::after{ top: 7px; }

  .nav-links{
    right: 12px;
    top: calc(100% + 6px);
    width: min(86vw, 300px);
    max-width: min(86vw, 300px);
  }

  .page{
    max-width: 100%;
    width: 100%;
    padding: 14px 14px 30px;
  }

  .logo{
    width: min(280px, 78vw);
    margin: 4px auto 8px;
  }

  .subtitle{
    font-size: clamp(1.6rem, 8.6vw, 2.5rem);
    line-height: 1.05;
    margin: 8px 0 14px;
  }

  .pill{
    font-size: clamp(1rem, 5.8vw, 1.25rem);
    padding: 12px 18px;
    margin-top: 14px;
  }

  .hero-phone{
    margin-top: 12px;
    font-size: 16px;
    line-height: 1.35;
  }

  .simple-list li{
    margin: 5px 0;
    font-size: 1rem;
  }

  .section-title{
    margin: 30px 0 14px;
    font-size: 16px;
  }

  .pricing-box,
  .info-box{
    width: 100%;
  }

  .cta{
    margin-top: 18px;
    padding-top: 16px;
  }
}

@media (max-width: 430px){
  .nav-inner{
    padding: calc(env(safe-area-inset-top, 0px) + 8px) 10px 8px;
    gap: 8px;
  }

  .brand{
    font-size: clamp(0.92rem, 4.7vw, 1.25rem);
  }

  .hamburger{
    padding: 10px 14px;
    min-height: 52px;
    min-width: 52px;
  }

  .logo{
    width: min(250px, 72vw);
  }

  .subtitle{
    font-size: clamp(1.45rem, 7.9vw, 2.15rem);
  }

  .pill{
    font-size: clamp(0.95rem, 5.2vw, 1.1rem);
    padding: 11px 16px;
  }

  .hero-phone{
    font-size: 15px;
  }
}


/* Packing slip email form rebuild */
body.packing-slip .page{
  max-width: 1120px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}
.body-lock{ overflow:hidden; }
.packing-slip-card{
  text-align: center;
}
.packing-form-card{
  text-align: left;
}
body.packing-slip .packing-form-card.card{
  padding: 34px 32px;
}
.packing-online-title,
.packing-online-copy{
  text-align: center;
}
.packing-online-title{
  font-size: clamp(1.9rem, 2.3vw, 2.5rem);
}
.packing-online-copy{
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.08rem;
}
.reference-box{
  max-width: 900px;
  margin: 28px auto 34px;
  padding: 22px 22px 18px;
  background: rgba(18,107,176,0.06);
  border: 1px solid rgba(18,107,176,0.18);
  border-radius: 18px;
  text-align: center;
}
.reference-label{
  font-weight: 900;
  margin-bottom: 8px;
  font-size: 1.05rem;
}
.reference-value{
  display: inline-block;
  background: var(--white);
  border: 1px solid rgba(0,0,0,0.16);
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 900;
  letter-spacing: 0.04em;
  word-break: break-word;
  font-size: 1.02rem;
}
.reference-note{
  margin: 14px auto 0;
  max-width: 700px;
  font-size: 1.02rem;
}
.packing-email-form{
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}
.packing-form-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 24px;
  align-items: start;
}
.form-row{
  display: flex;
  flex-direction: column;
}
.form-row-wide{
  grid-column: 1 / -1;
}
body.packing-slip .form-row label{
  margin-bottom: 8px;
  font-weight: 800;
  font-size: 1rem;
}
.packing-email-form input,
.packing-email-form textarea{
  width: 100%;
  min-height: 52px;
  padding: 13px 15px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.18);
  background: #fff;
  color: #111;
  font: inherit;
  font-size: 1rem;
  box-sizing: border-box;
}
.packing-email-form textarea{
  min-height: 132px;
  resize: vertical;
}
.packing-email-form input[readonly]{
  background: rgba(0,0,0,0.04);
}
.form-row small{
  display: block;
  margin-top: 8px;
  color: rgba(0,0,0,0.72);
  line-height: 1.45;
}
.readonly-consent{
  min-height: 148px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.18);
  background: rgba(0,0,0,0.04);
  line-height: 1.65;
  font-size: 1rem;
}
.packing-actions{
  text-align: center;
  margin-top: 30px;
}
.packing-email-btn{
  min-width: min(100%, 380px);
}
.packing-action-note{
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.packing-fallback{
  font-weight: 700;
}
@media (max-width: 900px){
  .packing-form-grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }
}
@media (max-width: 760px){
  body.packing-slip .page{
    padding-left: 12px;
    padding-right: 12px;
  }
  body.packing-slip .packing-form-card.card{
    padding: 24px 16px;
  }
  .reference-box,
  .packing-email-form,
  .packing-online-copy{
    max-width: none;
  }
  .reference-value{
    display: block;
  }
  .packing-online-copy,
  .reference-note,
  .packing-action-note{
    font-size: 1rem;
  }
}



/* Packing slip layout repair */
body.packing-slip{
  max-width: none;
  margin: 0;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body.packing-slip .packing-form-card,
body.packing-slip .packing-email-form,
body.packing-slip .packing-form-grid,
body.packing-slip .form-row{
  width: 100%;
}
body.packing-slip .packing-form-card{
  text-align: left;
}
body.packing-slip .packing-form-grid{
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  width: min(100%, 760px);
  max-width: 760px;
  margin: 0 auto;
}
body.packing-slip .form-row,
body.packing-slip .form-row-wide{
  grid-column: 1 / -1;
  min-width: 0;
}
body.packing-slip .form-row label,
body.packing-slip .form-row small{
  text-align: left;
}
body.packing-slip .packing-email-form input,
body.packing-slip .packing-email-form textarea,
body.packing-slip .readonly-consent{
  display: block;
  width: 100%;
  max-width: 100%;
}
body.packing-slip .reference-box,
body.packing-slip .packing-online-copy,
body.packing-slip .packing-actions{
  width: min(100%, 760px);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
body.packing-slip .packing-action-note,
body.packing-slip .reference-note{
  text-align: center;
}
@media (max-width: 900px){
  body.packing-slip .packing-form-grid,
  body.packing-slip .reference-box,
  body.packing-slip .packing-online-copy,
  body.packing-slip .packing-actions{
    width: 100%;
    max-width: 100%;
  }
}
}


/* ==========================================================
   Device-fluid contact CTA sizing
   - keeps call/email buttons from filling the whole screen
   - lets long email addresses wrap cleanly on small phones
   - scales smoothly across iPhone, Android, iPad, Chromebook, Mac, PC
   ========================================================== */
.btn{
  max-width: 100%;
}
.button-row{
  width: 100%;
}
.contact-cta-stack{
  width: 100%;
  justify-items: center;
  gap: clamp(14px, 2.4vw, 20px);
}
.contact-phone-btn,
.contact-email-btn{
  width: auto;
  max-width: min(100%, 34rem);
  text-align: center;
  white-space: normal;
  line-height: 1.2;
  padding: clamp(12px, 1.2vw, 16px) clamp(16px, 2vw, 22px);
}
.contact-email-btn{
  max-width: min(100%, 40rem);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.contact-cta-label,
.contact-cta-value{
  display: inline;
}

.contact-card{
  max-width: min(100%, 32rem);
  margin: 22px auto 0;
  padding: clamp(18px, 2vw, 24px);
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: var(--white);
}
.contact-card h2{
  margin-top: 0;
  margin-bottom: 12px;
}
.contact-card p{
  margin: 0;
  line-height: 1.55;
}

.mailing-address-card{
  text-align: center;
}
.mailing-address-card p{
  margin: 0;
}

@media (max-width: 760px){
  .contact-phone-btn{
    width: min(100%, 20rem);
  }
  .contact-email-btn{
    width: min(100%, 22rem);
    font-size: clamp(0.98rem, 4.2vw, 1.18rem);
  }
  .contact-cta-label,
  .contact-cta-value{
    display: block;
  }
  .contact-email-btn .contact-cta-label{
    margin-bottom: 4px;
  }
}

@media (max-width: 430px){
  .contact-phone-btn{
    width: min(100%, 18.5rem);
  }
  .contact-email-btn{
    width: min(100%, 19.5rem);
    padding-left: 14px;
    padding-right: 14px;
  }
}


/* ==========================================================
   FINAL DEVICE-SCALING SAFETY PASS
   - keeps buttons, cards, and form elements fluid
   - avoids screen-filling CTAs on smaller phones
   - preserves current layout feel
   ========================================================== */
img,
video,
iframe,
svg,
canvas{
  max-width: 100%;
  height: auto;
}

.button-row,
.contact-cta-stack{
  width: 100%;
  align-items: center;
}

.button-row .btn,
.contact-cta-stack .btn{
  max-width: min(100%, 34rem);
}

.contact-phone-btn,
.contact-email-btn{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  inline-size: fit-content;
  width: auto;
  max-width: min(calc(100vw - 32px), 34rem);
  margin-left: auto;
  margin-right: auto;
}

.contact-email-btn{
  max-width: min(calc(100vw - 32px), 38rem);
}

.contact-cta-value{
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 820px){
  .contact-phone-btn,
  .contact-email-btn{
    max-width: min(calc(100vw - 28px), 26rem);
    padding-inline: clamp(14px, 4vw, 18px);
  }

  .contact-cta-label,
  .contact-cta-value{
    display: block;
    text-align: center;
  }
}

@media (max-width: 480px){
  .contact-phone-btn,
  .contact-email-btn{
    max-width: min(calc(100vw - 24px), 21rem);
    border-radius: 18px;
  }

  .contact-email-btn .contact-cta-value{
    font-size: clamp(0.98rem, 5vw, 1.18rem);
    line-height: 1.18;
  }

  .brand{
    max-width: min(68vw, 18rem);
  }
}

@media (max-width: 380px){
  .nav-inner{
    padding-left: 16px;
    padding-right: 16px;
  }

  .contact-phone-btn,
  .contact-email-btn{
    max-width: min(calc(100vw - 20px), 19rem);
  }
}


/* ==========================================================
   About page list layout
   - keeps the cards centered
   - keeps the list itself centered as a block
   - keeps text left-aligned inside the list
   - uses normal outside browser bullets for consistent size
   - does NOT affect packing-slip or other pages
   ========================================================== */
.about-page .centered-box{
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 18px;
  padding-right: 18px;
}

.about-page .centered-box .centered-list{
  display: inline-block;
  width: auto;
  max-width: calc(100% - 1.75rem);
  margin: 12px auto 0;
  padding-left: 1.4rem;
  list-style-type: disc;
  list-style-position: outside;
  text-align: left;
  vertical-align: top;
}

.about-page .centered-box .centered-list li{
  margin: 10px 0;
  padding-left: 0;
}

@media (max-width: 760px){
  .about-page .centered-box{
    max-width: 420px;
  }

  .about-page .centered-box .centered-list{
    max-width: calc(100% - 1.25rem);
    padding-left: 1.25rem;
  }
}


/* ==========================================================
   About page final cleanup
   - centered list block, left-aligned readable text
   - standard browser bullets, even size
   - keeps service bubbles as a nice touch
   - does not affect packing-slip form
   ========================================================== */
.about-page .centered-box{
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  padding: 16px 18px;
  text-align: center;
}

.about-page .centered-box .centered-list{
  display: inline-block;
  width: auto;
  max-width: 100%;
  margin: 12px auto 0;
  padding-left: 1.4rem;
  list-style: disc outside;
  text-align: left;
}

.about-page .centered-box .centered-list li{
  margin: 14px 0;
  padding-left: 0;
}

.about-page .centered-box .service-pill-list{
  padding-left: 0;
  list-style: none;
}

.about-page .centered-box .service-pill-list li{
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 10px 26px;
  border: 2px solid rgba(0,0,0,0.16);
  border-radius: 999px;
  background: var(--white);
  font-weight: 800;
}

.about-page .centered-box .service-pill-list li::before{
  content: "•";
  font-size: 1.35em;
  line-height: 1;
  flex: 0 0 auto;
}

.about-page .centered-box .specializing-inline-list li{
  width: fit-content;
  max-width: 100%;
}

.about-page .centered-box .specializing-inline-list .inline-sep{
  display: inline-block;
  font-size: 1em;
  line-height: 1;
  margin: 0 0.32em;
}

@media (max-width: 760px){
  .about-page .centered-box{
    max-width: 92%;
    padding: 16px 14px;
  }

  .about-page .centered-box .centered-list{
    padding-left: 1.25rem;
  }

  .about-page .centered-box .service-pill-list li{
    padding: 10px 20px;
  }
}

/* Make the email CTA reliable across about/home/mail-order without touching form pages */
.about-page .contact-email-btn,
.home-page .contact-email-btn,
.mail-order-page .contact-email-btn,
.about-page .contact-phone-btn,
.home-page .contact-phone-btn,
.mail-order-page .contact-phone-btn{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.about-page .contact-email-btn .contact-cta-value,
.home-page .contact-email-btn .contact-cta-value,
.mail-order-page .contact-email-btn .contact-cta-value{
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  font-size: clamp(0.92rem, 3.2vw, 1.2rem);
  line-height: 1.12;
}

@media (max-width: 430px){
  .about-page .contact-email-btn,
  .home-page .contact-email-btn,
  .mail-order-page .contact-email-btn{
    max-width: min(calc(100vw - 28px), 23rem);
    padding-left: 14px;
    padding-right: 14px;
  }

  .about-page .contact-email-btn .contact-cta-value,
  .home-page .contact-email-btn .contact-cta-value,
  .mail-order-page .contact-email-btn .contact-cta-value{
    font-size: clamp(0.82rem, 3.9vw, 1rem);
  }
}


/* Final about-page list stabilization
   - keeps service pills centered
   - makes Specializing In a centered 2x2 grid
   - all four bullets are rendered the same size via one pseudo-element rule
   - does not affect packing-slip form pages
*/
.about-page .centered-box .specializing-grid{
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  justify-content: center;
  column-gap: 1.75rem;
  row-gap: 0.85rem;
  width: fit-content;
  max-width: 100%;
  margin: 12px auto 0;
  padding: 0;
  text-align: left;
}

.about-page .centered-box .specializing-grid li{
  position: relative;
  display: block;
  padding-left: 1.1rem;
  margin: 0;
  white-space: nowrap;
}

.about-page .centered-box .specializing-grid li::before{
  content: "•";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1em;
  line-height: 1;
}

@media (max-width: 760px){
  .about-page .centered-box .specializing-grid{
    grid-template-columns: repeat(2, minmax(0, max-content));
    column-gap: 1.1rem;
    row-gap: 0.8rem;
  }

  .about-page .centered-box .specializing-grid li{
    font-size: clamp(1.05rem, 4.1vw, 1.55rem);
  }
}

@media (max-width: 430px){
  .about-page .centered-box .specializing-grid{
    column-gap: 0.8rem;
    width: 100%;
    justify-content: center;
  }

  .about-page .centered-box .specializing-grid li{
    min-width: 0;
    white-space: normal;
    line-height: 1.25;
  }
}


/* Final consistency pass: shared white cards + mail-in address spacing */
.mailing-address-card{
  max-width: min(100%, 28rem);
  margin: 22px auto 34px;
  background: var(--white);
}

@media (max-width: 760px){
  .mailing-address-card{
    max-width: min(100%, 24.5rem);
    margin-bottom: 30px;
  }
}

@media (max-width: 430px){
  .mailing-address-card{
    max-width: min(100%, 22.75rem);
    margin-bottom: 28px;
    padding: 16px 18px;
  }
}


@media (prefers-reduced-motion: reduce){
  .reveal, .zoom-in, .fade-in{
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}


/* ===== Fresh lock-in overrides from stable motion baseline ===== */

/* Mail-in address card: tighter and with breathing room before the image */
.mailing-address-card{
  max-width: min(100%, 28rem);
  margin: 14px auto 34px;
  padding: 16px 18px;
  text-align: center;
  background: var(--white);
}
.mailing-address-card p{ margin: 0; line-height: 1.45; }

/* Keep the image section from crowding the address card */
.mail-order-page .mailing-address-card + .card{
  margin-top: 6px;
}

/* Site CTA email address: one line, shrinks on small screens, never affects packing-slip form */
.contact-email-btn{
  width: min(calc(100vw - 18px), 24rem);
  max-width: min(calc(100vw - 18px), 24rem);
  padding-left: 12px;
  padding-right: 12px;
  box-sizing: border-box;
}
.contact-email-btn .contact-cta-label{
  display:block;
  margin-bottom:4px;
}
.contact-email-btn .contact-cta-email-address,
.contact-email-btn .contact-cta-value.contact-cta-email-address{
  display:block;
  width:100%;
  max-width:100%;
  white-space:nowrap !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
  text-wrap:nowrap;
  hyphens:none;
  font-size:clamp(0.70rem, 2.15vw, 1.02rem);
  line-height:1.0;
  letter-spacing:-0.02em;
}
@media (max-width: 430px){
  .contact-email-btn{
    width: min(calc(100vw - 14px), 24rem);
    max-width: min(calc(100vw - 14px), 24rem);
    padding-left: 10px;
    padding-right: 10px;
  }
  .contact-email-btn .contact-cta-email-address,
  .contact-email-btn .contact-cta-value.contact-cta-email-address{
    font-size: clamp(0.58rem, 2.45vw, 0.84rem);
    letter-spacing: -0.03em;
  }
}
@media (max-width: 390px){
  .contact-email-btn{
    width: min(calc(100vw - 12px), 23.75rem);
    max-width: min(calc(100vw - 12px), 23.75rem);
  }
  .contact-email-btn .contact-cta-email-address,
  .contact-email-btn .contact-cta-value.contact-cta-email-address{
    font-size: clamp(0.54rem, 2.25vw, 0.76rem);
    letter-spacing: -0.035em;
  }
}

/* About page lists from the approved centered look */
.about-page .centered-box{
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  padding: 16px 18px;
  text-align: center;
}
.about-page .centered-box .centered-list{
  display: inline-block;
  width: auto;
  max-width: 100%;
  margin: 12px auto 0;
  padding-left: 1.4rem;
  list-style: disc outside;
  text-align: left;
}
.about-page .centered-box .centered-list li{
  margin: 14px 0;
  padding-left: 0;
}
.about-page .centered-box .service-pill-list{
  padding-left: 0;
  list-style: none;
}
.about-page .centered-box .service-pill-list li{
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 10px 26px;
  border: 2px solid rgba(0,0,0,0.16);
  border-radius: 999px;
  background: var(--white);
  font-weight: 800;
}
.about-page .centered-box .service-pill-list li::before{
  content: "•";
  font-size: 1.35em;
  line-height: 1;
  flex: 0 0 auto;
}
.about-page .centered-box .specializing-grid{
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  justify-content: center;
  column-gap: 1.75rem;
  row-gap: 0.85rem;
  width: fit-content;
  max-width: 100%;
  margin: 12px auto 0;
  padding: 0;
  text-align: left;
}
.about-page .centered-box .specializing-grid li{
  position: relative;
  display: block;
  padding-left: 1.1rem;
  margin: 0;
  white-space: nowrap;
}
.about-page .centered-box .specializing-grid li::before{
  content: "•";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1em;
  line-height: 1;
}
@media (max-width: 760px){
  .about-page .centered-box{ max-width: 92%; padding: 16px 14px; }
  .about-page .centered-box .service-pill-list li{ padding: 10px 20px; }
  .about-page .centered-box .specializing-grid{ grid-template-columns: 1fr; row-gap: 0.9rem; }
  .about-page .centered-box .specializing-grid li{ white-space: normal; }
}


/* FINAL dedicated site email CTA centering + sizing lock */
.contact-cta-stack{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}
.contact-email-btn{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  width:min(92vw, 40rem) !important;
  max-width:calc(100% - 2rem) !important;
  margin:0 auto !important;
  padding:14px 18px !important;
  background:var(--white) !important;
  border:3px solid var(--accent) !important;
  border-radius:18px !important;
  text-align:center !important;
  text-decoration:none !important;
  line-height:1.05 !important;
  overflow:hidden !important;
}
.contact-email-btn .contact-cta-label{
  display:block !important;
  width:100% !important;
  margin:0 0 6px 0 !important;
  font-size:clamp(1.05rem, 4.4vw, 1.55rem) !important;
  font-weight:800 !important;
  color:var(--accent) !important;
  line-height:1 !important;
  text-align:center !important;
}
.contact-email-btn .contact-cta-email-address,
.contact-email-btn .contact-cta-value.contact-cta-email-address,
.contact-email-btn .contact-cta-value{
  display:block !important;
  width:auto !important;
  max-width:100% !important;
  margin:0 auto !important;
  font-size:clamp(1.22rem, 3.95vw, 1.9rem) !important;
  font-weight:800 !important;
  color:var(--accent) !important;
  line-height:1.05 !important;
  letter-spacing:0 !important;
  white-space:nowrap !important;
  text-wrap:nowrap !important;
  overflow:hidden !important;
  text-overflow:clip !important;
  text-align:center !important;
}
@media (max-width: 430px){
  .contact-email-btn{
    width:min(93vw, 26rem) !important;
    padding:13px 16px !important;
  }
  .contact-email-btn .contact-cta-email-address,
  .contact-email-btn .contact-cta-value.contact-cta-email-address,
  .contact-email-btn .contact-cta-value{
    font-size:clamp(1.06rem, 4vw, 1.32rem) !important;
  }
}
@media (max-width: 390px){
  .contact-email-btn{
    width:min(94vw, 24rem) !important;
    padding:12px 14px !important;
  }
  .contact-email-btn .contact-cta-email-address,
  .contact-email-btn .contact-cta-value.contact-cta-email-address,
  .contact-email-btn .contact-cta-value{
    font-size:clamp(0.98rem, 3.9vw, 1.18rem) !important;
  }
}