/* ============================================================
   HITEK CONSTRUCTION — MAIN STYLESHEET
   Cleaned and organized for readability.
   CSS behavior, selector order, and values are preserved.
   ============================================================ */

:root {
  /* ==========================================================
     HITEK DESIGN CONTROL PANEL
     Change values HERE first. The rest of the stylesheet uses
     these variables so you do not have to hunt through the file.
     ========================================================== */

  /* 1) MAIN THEME COLORS */
  --page-bg: #1c1b19;
  --section-bg: #24221f;
  --section-bg-alt: #2b2824;
  --card-bg: #292621;
  --card-bg-soft: #312d27;
  --card-hover-bg: #151513;   /* Color cards become when hovered */

  --text-main: #f2efe8;
  --text-muted: #b8b0a4;
  --text-soft: #918a80;
  --text-on-dark: #f8f6f1;

  --accent: #c69a50;
  --accent-light: #e0c184;
  --accent-dark: #9b7337;

  --border: #403b34;
  --border-soft: rgba(255, 255, 255, 0.10);

  /* 2) HEADER / NAVIGATION */
  --header-bg: rgba(28, 27, 25, 0.94);
  --header-text: #f2efe8;
  --header-text-hover: #e0c184;
  --header-height: 86px;
  --header-height-mobile: 74px;

  /* 3) BUTTONS */
  --button-primary-bg: #c69a50;
  --button-primary-text: #171512;
  --button-primary-hover: #e0c184;

  --button-secondary-bg: #292621;
  --button-secondary-text: #f2efe8;
  --button-secondary-border: #4b453d;

  /* FORM CONTROLS */
  --select-arrow-right: 28px;  /* Increase this number to move arrow LEFT */
  --select-arrow-size: 7px;
  --form-button-focus-ring: transparent;

  /* 4) DARK FEATURE AREAS / FOOTER */
  --dark-bg: #11110f;
  --dark-bg-soft: #191815;
  --footer-bg: #0d0d0c;

  /* 5) IMAGE OVERLAYS */
  --image-overlay: rgba(0, 0, 0, 0.72);
  --image-overlay-soft: rgba(0, 0, 0, 0.42);

  /* 6) STATUS / SPECIAL COLORS */
  --status-green: #7dde9c;

  /* 7) TYPOGRAPHY */
  --font-body: "DM Sans", system-ui, -apple-system, sans-serif;
  --font-heading: "Playfair Display", serif;

  --font-size-xs: 0.68rem;
  --font-size-sm: 0.78rem;
  --font-size-base: 1rem;
  --font-size-md: 1.05rem;
  --font-size-lg: 1.30rem;

  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-body: 1.5;
  --line-height-heading: 1.04;

  /* 8) SITE WIDTH / LAYOUT */
  --container-max: 1180px;
  --container-gutter: 48px;
  --container-gutter-mobile: 28px;

  /* 9) SPACING */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 60px;
  --space-12: 72px;

  --section-space: 110px;
  --section-space-large: 120px;
  --section-space-mobile: 82px;

  /* 10) CORNERS */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-2xl: 26px;
  --radius-3xl: 32px;
  --radius-pill: 999px;

  /* 11) SHADOWS */
  --shadow-card: 0 16px 45px rgba(0, 0, 0, 0.22);
  --shadow-button: 0 15px 30px rgba(0, 0, 0, 0.22);
  --shadow-image: 0 30px 70px rgba(0, 0, 0, 0.30);
  --shadow-header: 0 10px 30px rgba(0, 0, 0, 0.20);

  /* 12) MOTION */
  --transition-fast: 0.20s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.50s ease;

  /* COMPATIBILITY ALIASES — leave these alone */
  --bg: var(--page-bg);
  --bg-soft: var(--section-bg-alt);
  --text: var(--text-main);
  --muted: var(--text-muted);
  --gold: var(--accent);
  --gold2: var(--accent-light);
  --dark: var(--dark-bg);
  --card: var(--card-bg);
  --line: var(--border);
  --shadow: var(--shadow-card);

  --color-gold: var(--accent);
  --color-gold-light: var(--accent-light);
  --color-bg: var(--page-bg);
  --color-bg-soft: var(--section-bg-alt);
  --color-white: var(--text-on-dark);
  --color-dark: var(--dark-bg);
  --color-black: var(--footer-bg);
  --color-text: var(--text-main);
  --color-muted: var(--text-muted);
  --color-text-dark: var(--text-main);
  --color-border: var(--border);
}
/*
  COLOR SYSTEM
  ------------
  Change the variables in :root above to update the site's main colors.
  Individual sections should use these variables instead of repeating
  the same hex values.
*/

/* ============================================================
   STYLESHEET ORGANIZATION

   1. Design tokens / defaults      -> :root
   2. Global / reset styles         -> body, links, images, container
   3. Header / navigation
   4. Shared buttons / typography
   5. Home page
   6. Shared sections / cards
   7. Forms / contact
   8. Footer
   9. Commercial page
   10. Multi-page components
   11. Responsive rules

   Most global visual changes should now be made in :root.
   ============================================================ */




* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  line-height:var(--line-height-body)
}

a {
  text-decoration:none;
  color:inherit
}

img {
  max-width:100%;
  display:block
}

.container {
  width:min(100% - var(--container-gutter),var(--container-max));
  margin-inline:auto
}

/* ==================== HEADER / NAVIGATION ==================== */
.site-header {
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(14px);
  background:var(--header-bg);
  border-bottom:1px solid transparent;
  transition:.25s ease
}

.site-header.scrolled {
  border-color:rgba(0,0,0,.08);
  box-shadow:0 10px 30px rgba(0,0,0,.05)
}

.nav-wrap {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:var(--header-height);
  position:relative
}

.brand {
  display:flex;
  align-items:center;
  gap:14px;
  font-weight:700;
  letter-spacing:-.02em
}

.brand img {
  width:54px;
  height:54px;
  border-radius:50%
}

.brand span {
  font-size:1.05rem
}

.site-nav {
  display:flex;
  align-items:center;
  gap:22px;
  font-size:.95rem
}

.site-nav a {
  color:var(--header-text)
}

.site-nav a:hover {
  color:var(--header-text-hover)
}

.nav-cta {
  padding:12px 18px;
  border-radius:999px;
  background:var(--button-primary-bg);
  color:var(--button-primary-text) !important
}

.nav-cta:hover {
  background:var(--button-primary-hover)
}

.menu-toggle {
  display:none;
  background:none;
  border:0;
  padding:4px;
  cursor:pointer
}

.menu-toggle span {
  display:block;
  width:24px;
  height:2px;
  background:var(--dark-bg);
  margin:5px 0;
  border-radius:999px
}

/* ==================== HOME — HERO ==================== */
.hero {
  position:relative;
  overflow:hidden;
  padding:72px 0 70px;
  background:linear-gradient(180deg,var(--page-bg) 0%,var(--section-bg) 100%)
}

.hero:after {
  content:"";
  position:absolute;
  right:-160px;
  top:-80px;
  width:420px;
  height:420px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(183,137,59,.16),transparent 62%)
}

.hero-glow {
  position:absolute;
  border-radius:50%;
  filter:blur(40px);
  opacity:.38
}

.hero-glow-a {
  width:280px;
  height:280px;
  background:#f5dfb6;
  top:42px;
  left:-90px
}

.hero-glow-b {
  width:320px;
  height:320px;
  background:#e6c486;
  right:10%;
  bottom:-120px
}

.hero-grid {
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:60px;
  align-items:center
}

.hero-copy {
  position:relative;
  z-index:2
}

.eyebrow {
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.75rem;
  font-weight:700
}

.eyebrow.dark {
  color:var(--accent-dark)
}

.eyebrow.gold {
  color:var(--gold2)
}

.hero-copy h1 {
  font-family:var(--font-heading);
  font-size:clamp(3.2rem,6vw,5.8rem);
  line-height:.96;
  letter-spacing:-.045em;
  margin:22px 0 18px;
  max-width:760px
}

.hero-copy>p {
  font-size:1.08rem;
  max-width:650px;
  color:var(--text-muted)
}

.hero-actions {
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin:30px 0 34px
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:15px 22px;
  border-radius:999px;
  font-weight:700;
  transition:.25s
}

.btn-primary {
  background:var(--button-primary-bg);
  color:var(--button-primary-text);
  box-shadow:0 15px 30px rgba(0,0,0,.15)
}

.btn-primary:hover {
  transform:translateY(-2px);
  background:var(--button-primary-hover)
}

.btn-ghost {
  border:1px solid rgba(0,0,0,.15);
  background:rgba(255,255,255,.72)
}

.btn-ghost:hover {
  border-color:var(--footer-bg);
  transform:translateY(-2px)
}

.hero-proof {
  display:flex;
  gap:22px;
  flex-wrap:wrap
}

.hero-proof div {
  padding:0 18px 0 0;
  border-right:1px solid rgba(0,0,0,.1)
}

.hero-proof div:last-child {
  border-right:0
}

.hero-proof strong,.hero-proof span {
  display:block
}

.hero-proof strong {
  font-size:1.02rem
}

.hero-proof span {
  color:var(--text-soft);
  font-size:.84rem
}

.hero-visual {
  position:relative;
  min-height:620px
}

.hero-card {
  position:absolute;
  inset:0
}

.main-card {
  right:0;
  left:auto;
  width:92%;
  height:620px;
  border-radius:32px;
  overflow:hidden;
  box-shadow:0 35px 80px rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.35)
}

.main-card img {
  height:100%;
  object-fit:cover;
  filter:brightness(.78)
}

.main-card:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.72),transparent 55%)
}

.hero-card-copy {
  position:absolute;
  z-index:2;
  left:30px;
  bottom:28px;
  color:var(--color-white)
}

.hero-card-copy span {
  font-size:.72rem;
  color:var(--gold2);
  text-transform:uppercase;
  letter-spacing:.14em
}

.hero-card-copy h3 {
  font-size:1.45rem;
  margin:4px 0 0
}

.floating-card {
  position:absolute;
  z-index:4;
  background:rgba(18,18,18,.83);
  backdrop-filter:blur(16px);
  color:var(--color-white);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:16px 18px;
  display:flex;
  align-items:center;
  gap:12px;
  box-shadow:0 18px 45px rgba(0,0,0,.20)
}

.floating-card strong,.floating-card small {
  display:block
}

.floating-card strong {
  font-size:.9rem
}

.floating-card small {
  color:rgba(255,255,255,.58);
  font-size:.72rem
}

.top-card {
  left:0;
  top:88px
}

.bottom-card {
  right:-10px;
  bottom:20px
}

.dot {
  width:10px;
  height:10px;
  background:var(--status-green);
  border-radius:50%;
  box-shadow:0 0 0 6px rgba(125,222,156,.12)
}

.mini-icon {
  width:34px;
  height:34px;
  border-radius:10px;
  background:linear-gradient(135deg,#e0bf7c,#8f6327);
  display:grid;
  place-items:center;
  color:var(--dark-bg);
  font-size:1rem
}

.scroll-hint {
  position:absolute;
  z-index:3;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  font-size:.65rem;
  letter-spacing:.18em;
  color:rgba(17,17,17,.4)
}

.scroll-hint span {
  margin-left:8px
}

.section-pad {
  padding:var(--section-space) 0
}

.intro-grid {
  display:grid;
  grid-template-columns:.36fr 1fr;
  gap:70px
}

.intro h2,.section-head h2,.center-head h2,.contact h2 {
  font-family:var(--font-heading);
  font-size:clamp(2.7rem,4vw,4.7rem);
  line-height:1.04;
  letter-spacing:-.03em;
  margin:0
}

.intro h2 em {
  color:var(--accent);
  font-weight:600
}

.intro p {
  max-width:700px;
  font-size:1.05rem;
  color:var(--muted);
  margin-top:26px
}

.section-head {
  display:grid;
  grid-template-columns:1fr .58fr;
  gap:60px;
  align-items:end;
  margin-bottom:60px
}

.section-head p {
  margin:0;
  color:var(--muted);
  max-width:500px
}

/* ==================== HOME — SERVICES ==================== */
.services {
  background:var(--card-bg)
}

.services-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line)
}

.services-grid-4 {
  grid-template-columns:repeat(4,1fr)
}

.service-card {
  min-height:300px;
  padding:32px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  transition:.25s;
  background:var(--card-bg)
}

.service-card:hover {
  transform:translateY(-6px);
  box-shadow:var(--shadow);
  z-index:2
}

.service-card.featured {
  background: var(--card-bg);
  color: var(--text-main);
}

.service-number {
  font-size:.72rem;
  letter-spacing:.15em;
  color:#9e9689
}

.service-card h3 {
  font-size:1.34rem;
  margin:46px 0 12px
}

.service-card p {
  color:var(--text-muted);
  min-height:92px
}

.service-card.featured p {
  color:rgba(255,255,255,.64)
}

.service-card a {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:24px;
  font-size:.84rem;
  font-weight:700
}

.service-card a span {
  color:var(--gold)
}

/* ==================== DARK SHOWCASE ==================== */
.dark-section {
  background:var(--dark-bg);
  color:var(--color-white)
}

.showcase {
  padding:var(--section-space-large) 0
}

.showcase-grid {
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:90px;
  align-items:center
}

.showcase-copy h2,.about-copy h2 {
  font-family:var(--font-heading);
  font-size:clamp(2.8rem,4.5vw,4.9rem);
  line-height:1.03;
  letter-spacing:-.03em;
  margin:0 0 26px
}

.showcase-copy>p,.about-copy p {
  color:rgba(255,255,255,.66);
  max-width:620px
}

.feature-list {
  margin-top:42px;
  border-top:1px solid rgba(255,255,255,.1)
}

.feature-list div {
  display:grid;
  grid-template-columns:60px 1fr;
  align-items:center;
  padding:18px 0;
  border-bottom:1px solid rgba(255,255,255,.1)
}

.feature-list span {
  color:var(--gold2);
  font-size:.72rem
}

.feature-list p {
  margin:0
}

.showcase-image {
  height:640px;
  border-radius:26px;
  overflow:hidden
}

.showcase-image img {
  height:100%;
  object-fit:cover;
  filter:brightness(.85)
}

.project-grid {
  display:grid;
  grid-template-columns:1.35fr 1fr;
  grid-auto-rows:320px;
  gap:18px
}

.project {
  margin:0;
  position:relative;
  border-radius:22px;
  overflow:hidden;
  background:var(--card-bg-soft)
}

.project-large {
  grid-row:span 2
}

.project img {
  height:100%;
  width:100%;
  object-fit:cover;
  transition:.55s
}

.project:hover img {
  transform:scale(1.04)
}

.project:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.76),transparent 55%)
}

.project figcaption {
  position:absolute;
  z-index:2;
  left:24px;
  bottom:22px;
  color:var(--color-white)
}

.project figcaption span,.project figcaption strong {
  display:block
}

.project figcaption span {
  font-size:.69rem;
  color:var(--gold2);
  letter-spacing:.14em;
  text-transform:uppercase
}

.project figcaption strong {
  font-size:1.05rem;
  margin-top:3px
}

/* ==================== PROCESS ==================== */
.process {
  background:var(--section-bg-alt)
}

.center-head {
  text-align:center;
  max-width:840px;
  margin:0 auto 70px
}

.process-line {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--border)
}

.process-line article {
  padding:32px 28px 0;
  border-right:1px solid var(--border);
  min-height:230px
}

.process-line article:last-child {
  border-right:0
}

.process-line span {
  font-size:.72rem;
  color:var(--accent)
}

.process-line h3 {
  font-size:1.4rem;
  margin:38px 0 10px
}

.process-line p {
  font-size:.9rem;
  color:var(--text-muted)
}

.about {
  padding:var(--section-space-large) 0
}

.about-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:center
}

.about-image {
  height:600px;
  border-radius:26px;
  overflow:hidden
}

.about-image img {
  height:100%;
  width:100%;
  object-fit:cover;
  filter:brightness(.82)
}

.text-link {
  display:inline-flex;
  gap:10px;
  color:var(--gold2);
  font-weight:700;
  margin-top:18px
}

/* ==================== CONTACT / FORM ==================== */
.contact {
  background:var(--card-bg)
}

.contact-grid {
  display:grid;
  grid-template-columns:.72fr 1fr;
  gap:90px
}

.contact-copy p {
  color:var(--muted);
  max-width:530px
}

.contact-details {
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:36px
}

.contact-details a {
  font-size:1.3rem;
  font-weight:700
}

.contact-details span {
  color:var(--text-soft)
}

.contact-form {
  padding:34px;
  background:var(--card-bg-soft);
  border-radius:24px;
  border:1px solid var(--border)
}

.contact-form label {
  display:block;
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--text-main);
  margin-bottom:18px
}

.contact-form input,.contact-form select,.contact-form textarea {
  display:block;
  width:100%;
  margin-top:7px;
  padding:14px 15px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--card-bg);
  outline:none;
  font:inherit
}

.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(183,138,59,.1)
}

.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px
}

.form-btn {
  width:100%
}

.form-note {
  font-size:.72rem;
  color:var(--text-soft);
  text-align:center;
  margin:10px 0 0
}

/* ==================== FOOTER ==================== */
.footer {
  background:var(--color-black);
  color:var(--color-white);
  padding:70px 0 24px
}

.footer-grid {
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:80px
}

.footer-brand {
  display:flex;
  gap:16px;
  align-items:center
}

.footer-brand img {
  width:62px;
  height:62px;
  border-radius:50%
}

.footer-brand strong,.footer-brand span {
  display:block
}

.footer-brand span {
  font-size:.78rem;
  color:rgba(255,255,255,.45)
}

.footer-links {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px
}

.footer-links div {
  display:flex;
  flex-direction:column;
  gap:10px
}

.footer-links strong {
  color:var(--gold2);
  font-size:.76rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  margin-bottom:6px
}

.footer-links a,.footer-links span {
  font-size:.84rem;
  color:rgba(255,255,255,.58)
}

.footer-bottom {
  margin-top:55px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.1);
  display:flex;
  justify-content:space-between;
  color:rgba(255,255,255,.36);
  font-size:.72rem
}

.reveal {
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease,transform .7s ease
}

.reveal.visible {
  opacity:1;
  transform:none
}

.delay-1 {
  transition-delay:.12s
}

@media(max-width:1120px) {
  .services-grid-4 {
    grid-template-columns:repeat(2,1fr)
  }
}

@media(max-width:900px) {
  .site-nav {
    position:absolute;
    top:var(--header-height);
    left:20px;
    right:20px;
    background:var(--dark-bg);
    border:1px solid rgba(255,255,255,.1);
    border-radius:18px;
    padding:20px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:6px
  }
  .site-nav.open {
    display:flex
  }
  .site-nav a {
    padding:10px 12px;
    color:var(--color-white)
  }
  .menu-toggle {
    display:block
  }
  .hero-grid,.showcase-grid,.about-grid,.contact-grid,.intro-grid,.section-head,.footer-grid {
    grid-template-columns:1fr
  }
  .hero {
    padding-top:58px
  }
  .hero-grid {
    gap:52px
  }
  .hero-visual {
    min-height:520px
  }
  .main-card {
    height:470px
  }
  .services-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .showcase-image,.about-image {
    height:500px
  }
  .process-line {
    grid-template-columns:repeat(2,1fr)
  }
  .project-grid {
    grid-template-columns:1fr;
    grid-auto-rows:320px
  }
  .project-large {
    grid-row:auto
  }
  .footer-links {
    grid-template-columns:repeat(3,1fr)
  }
}

@media(max-width:600px) {
  .container {
    width:min(100% - var(--container-gutter-mobile),var(--container-max))
  }
  .section-pad {
    padding:var(--section-space-mobile) 0
  }
  .nav-wrap {
    height:var(--header-height-mobile)
  }
  .site-nav {
    top:var(--header-height-mobile)
  }
  .brand span {
    font-size:.92rem
  }
  .hero {
    min-height:auto;
    padding:44px 0 78px
  }
  .hero-copy h1 {
    font-size:3.15rem
  }
  .hero-copy>p {
    font-size:1rem
  }
  .hero-proof {
    gap:16px;
    flex-wrap:wrap
  }
  .hero-proof div {
    border-right:0;
    padding-right:0
  }
  .hero-visual {
    min-height:430px
  }
  .main-card {
    width:92%;
    height:390px
  }
  .top-card {
    top:30px
  }
  .bottom-card {
    right:0
  }
  .scroll-hint {
    display:none
  }
  .services-grid,.services-grid-4 {
    grid-template-columns:1fr
  }
  .service-card {
    min-height:280px
  }
  .showcase-image,.about-image {
    height:420px
  }
  .process-line {
    grid-template-columns:1fr
  }
  .process-line article {
    border-right:0;
    border-bottom:1px solid var(--border)
  }
  .form-row {
    grid-template-columns:1fr
  }
  .footer-links {
    grid-template-columns:1fr 1fr
  }
  .footer-bottom {
    flex-direction:column;
    gap:8px
  }
}

/* ============================================================
   COMMERCIAL PAGE
   ============================================================ */

.active-link {
  font-weight:700;
  color:var(--header-text)
}

.commercial-hero {
  padding:72px 0 90px;
  background:radial-gradient(circle at 85% 10%,rgba(183,137,59,.12),transparent 30%),linear-gradient(180deg,var(--page-bg) 0%,var(--section-bg) 100%)
}

.commercial-hero-grid {
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:64px;
  align-items:center
}

.commercial-hero-copy h1 {
  max-width:720px;
  margin:20px 0 22px;
  font-family:var(--font-heading);
  font-size:clamp(3.4rem,6vw,6.2rem);
  line-height:.95;
  letter-spacing:-.045em
}

.commercial-hero-copy>p {
  max-width:680px;
  margin:0;
  color:var(--muted);
  font-size:1.08rem
}

.commercial-proof {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-top:38px;
  border-top:1px solid rgba(0,0,0,.12)
}

.commercial-proof div {
  padding:20px 18px 0 0
}

.commercial-proof strong,.commercial-proof span {
  display:block
}

.commercial-proof strong {
  margin-bottom:3px;
  font-size:.96rem
}

.commercial-proof span {
  color:var(--text-muted);
  font-size:.78rem
}

.commercial-hero-media {
  position:relative;
  min-height:610px;
  overflow:hidden;
  border-radius:30px;
  box-shadow:0 35px 80px rgba(0,0,0,.17)
}

.commercial-hero-media::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.55),transparent 55%)
}

.commercial-hero-media img {
  width:100%;
  height:100%;
  min-height:610px;
  object-fit:cover
}

.commercial-media-badge {
  position:absolute;
  right:26px;
  bottom:26px;
  left:26px;
  z-index:2;
  padding:22px 24px;
  color:var(--color-white);
  background:rgba(12,12,12,.83);
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px;
  backdrop-filter:blur(15px)
}

.commercial-media-badge span,.commercial-media-badge strong {
  display:block
}

.commercial-media-badge span {
  margin-bottom:5px;
  color:var(--gold2);
  font-size:.68rem;
  letter-spacing:.14em
}

.commercial-media-badge strong {
  font-size:1.1rem
}

.business-types {
  background:var(--card-bg)
}

.business-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px
}

.business-card {
  min-height:280px;
  padding:30px;
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:20px;
  transition:transform .25s ease,box-shadow .25s ease
}

.business-card:hover {
  transform:translateY(-5px);
  box-shadow:var(--shadow)
}

.business-icon {
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  color:var(--dark-bg);
  background:linear-gradient(135deg,var(--gold2),var(--gold));
  border-radius:14px;
  font-size:1.2rem;
  font-weight:700
}

.business-card h3 {
  margin:44px 0 12px;
  font-size:1.35rem
}

.business-card p {
  margin:0;
  color:var(--muted);
  font-size:.93rem
}

.commercial-system {
  padding:var(--section-space-large) 0 0
}

.commercial-system-grid {
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:90px;
  align-items:center
}

.commercial-system-copy h2 {
  margin:0 0 24px;
  font-family:var(--font-heading);
  font-size:clamp(3rem,5vw,5rem);
  line-height:1;
  letter-spacing:-.035em
}

.commercial-system-copy p {
  max-width:590px;
  color:rgba(255,255,255,.64)
}

.commercial-system-image {
  height:590px;
  overflow:hidden;
  border-radius:26px
}

.commercial-system-image img {
  width:100%;
  height:100%;
  object-fit:cover
}

.solution-strip {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  margin-top:90px;
  border-top:1px solid rgba(255,255,255,.12)
}

.solution-strip div {
  min-height:120px;
  padding:24px 18px;
  border-right:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12)
}

.solution-strip div:nth-child(5n) {
  border-right:0
}

.solution-strip span,.solution-strip strong {
  display:block
}

.solution-strip span {
  margin-bottom:24px;
  color:var(--gold2);
  font-size:.68rem
}

.solution-strip strong {
  font-size:.88rem
}

.commercial-benefits {
  background:var(--section-bg-alt)
}

.benefit-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--border)
}

.benefit-grid article {
  min-height:270px;
  padding:32px 28px;
  border-right:1px solid var(--border)
}

.benefit-grid article:last-child {
  border-right:0
}

.benefit-grid span {
  color:var(--accent);
  font-size:.72rem
}

.benefit-grid h3 {
  margin:48px 0 12px;
  font-size:1.32rem
}

.benefit-grid p {
  color:var(--text-muted);
  font-size:.9rem
}

.commercial-callout {
  padding:80px 0;
  color:var(--color-white);
  background:var(--dark-bg)
}

.commercial-callout-inner {
  display:grid;
  grid-template-columns:1fr auto;
  gap:60px;
  align-items:center
}

.commercial-callout h2 {
  max-width:800px;
  margin:10px 0 14px;
  font-family:var(--font-heading);
  font-size:clamp(2.5rem,4vw,4.2rem);
  line-height:1.04;
  letter-spacing:-.03em
}

.commercial-callout p {
  max-width:780px;
  margin:0;
  color:rgba(255,255,255,.62)
}

.commercial-gold-btn {
  white-space:nowrap;
  color:var(--dark-bg);
  background:linear-gradient(135deg,var(--gold2),var(--gold))
}

.commercial-gold-btn:hover {
  transform:translateY(-2px)
}

@media(max-width:980px) {
  .commercial-hero-grid,.commercial-system-grid,.commercial-callout-inner {
    grid-template-columns:1fr
  }
  .commercial-hero-media,.commercial-hero-media img,.commercial-system-image {
    min-height:500px;
    height:500px
  }
  .business-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .solution-strip {
    grid-template-columns:repeat(2,1fr)
  }
  .solution-strip div:nth-child(5n) {
    border-right:1px solid rgba(255,255,255,.12)
  }
  .solution-strip div:nth-child(2n) {
    border-right:0
  }
  .benefit-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .benefit-grid article:nth-child(2n) {
    border-right:0
  }
}

@media(max-width:600px) {
  .commercial-hero {
    padding:50px 0 72px
  }
  .commercial-hero-copy h1 {
    font-size:3.25rem
  }
  .commercial-proof {
    grid-template-columns:1fr
  }
  .commercial-proof div {
    padding:16px 0;
    border-bottom:1px solid rgba(0,0,0,.1)
  }
  .commercial-hero-media,.commercial-hero-media img,.commercial-system-image {
    min-height:390px;
    height:390px
  }
  .commercial-media-badge {
    right:16px;
    bottom:16px;
    left:16px
  }
  .business-grid,.solution-strip,.benefit-grid {
    grid-template-columns:1fr
  }
  .solution-strip div,.solution-strip div:nth-child(5n),.solution-strip div:nth-child(2n),.benefit-grid article,.benefit-grid article:nth-child(2n) {
    border-right:0
  }
  .commercial-system {
    padding-top:82px
  }
  .commercial-callout {
    padding:70px 0
  }
}

/* ============================================================
   COMMERCIAL PAGE V2 — MOCKUP-MATCHED LAYOUT
   ============================================================ */

.commercial-page {
  background: var(--page-bg);
}

.commercial-page .site-header {
  background: var(--header-bg);
}

.commercial-page .active-link {
  position: relative;
  font-weight: 700;
  color:var(--header-text);
}

.commercial-page .active-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12px;
  height: 2px;
  background: var(--gold);
}

.commercial-hero-v2 {
  padding: 42px 0 34px;
  background:     radial-gradient(circle at 86% 18%, rgba(183, 137, 59, 0.11), transparent 28%),     linear-gradient(180deg, var(--page-bg) 0%, var(--section-bg) 100%);
}

.commercial-hero-v2-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 54px;
  align-items: center;
}

.commercial-hero-v2-copy h1 {
  max-width: 610px;
  margin: 14px 0 18px;
  font-family: var(--font-heading);
  font-size: clamp(3.25rem, 5.2vw, 5.5rem);
  line-height: 0.94;
  letter-spacing: -0.045em;
}

.commercial-hero-v2-copy > p {
  max-width: 600px;
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
}

.commercial-actions {
  margin: 22px 0 24px;
}

.commercial-highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding-top: 18px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.commercial-highlights > div {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-right: 12px;
}

.highlight-icon {
  color: var(--gold);
  font-size: 1.2rem;
  line-height: 1;
}

.commercial-highlights p {
  margin: 0;
}

.commercial-highlights strong, .commercial-highlights small {
  display: block;
}

.commercial-highlights strong {
  font-size: 0.86rem;
}

.commercial-highlights small {
  margin-top: 2px;
  color: var(--text-soft);
  font-size: 0.68rem;
}

.commercial-hero-v2-media {
  position: relative;
  height: 430px;
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 24px 55px rgba(0, 0, 0, 0.15);
}

.commercial-hero-v2-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.35), transparent 55%);
}

.commercial-hero-v2-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.commercial-hero-overlay {
  position: absolute;
  z-index: 2;
  right: 20px;
  bottom: 20px;
  left: 20px;
  padding: 18px 20px;
  color: var(--color-white);
  background: rgba(16, 16, 16, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  backdrop-filter: blur(12px);
}

.commercial-hero-overlay span, .commercial-hero-overlay strong {
  display: block;
}

.commercial-hero-overlay span {
  margin-bottom: 4px;
  color: var(--gold2);
  font-size: 0.63rem;
  letter-spacing: 0.14em;
}

.commercial-hero-overlay strong {
  font-size: 1rem;
}

.commercial-industries {
  padding: 34px 0 18px;
  background: var(--card-bg);
}

.commercial-industries-head {
  display: grid;
  grid-template-columns: 1fr 0.75fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 18px;
}

.commercial-industries-head h2 {
  margin: 5px 0 0;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1;
  letter-spacing: -0.03em;
}

.commercial-industries-head > p {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 0.9rem;
}

.industry-card-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

.industry-photo-card {
  position: relative;
  min-height: 205px;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--dark-bg);
}

.industry-photo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.93) 0%, rgba(0, 0, 0, 0.42) 58%, rgba(0, 0, 0, 0.08) 100%);
}

.industry-photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.industry-photo-card:hover img {
  transform: scale(1.04);
}

.industry-photo-content {
  position: absolute;
  z-index: 2;
  right: 14px;
  bottom: 14px;
  left: 14px;
  color: var(--color-white);
}

.industry-symbol {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  margin-bottom: 7px;
  padding: 0 7px;
  color: var(--gold2);
  background: rgba(0, 0, 0, 0.55);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
}

.industry-photo-content h3 {
  margin: 0 0 5px;
  font-size: 0.92rem;
  line-height: 1.15;
}

.industry-photo-content p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.68rem;
  line-height: 1.35;
}

.commercial-integrated {
  padding: 26px 0 34px;
  background: var(--card-bg);
}

.commercial-integrated-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 42px;
  align-items: center;
  padding: 28px;
  background: var(--card-bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}

.commercial-integrated-image {
  height: 350px;
  overflow: hidden;
  border-radius: 16px;
}

.commercial-integrated-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.commercial-integrated-copy h2 {
  margin: 5px 0 14px;
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 4vw, 4.1rem);
  line-height: 1;
  letter-spacing: -0.035em;
}

.commercial-integrated-copy > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.solution-chip-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 20px 0 16px;
}

.solution-chip-grid span {
  padding: 9px 11px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-main);
  font-size: 0.73rem;
  text-align: center;
}

.dark-link {
  color: var(--accent);
}

.commercial-quote-band {
  padding: 26px 0;
  background: var(--card-bg);
}

.commercial-quote-band-inner {
  display: grid;
  grid-template-columns: 0.9fr 1.2fr auto;
  gap: 34px;
  align-items: center;
  padding: 28px 34px;
  color: var(--color-white);
  background: var(--dark-bg);
  border-radius: 20px;
}

.commercial-quote-band h2 {
  margin: 5px 0 0;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3vw, 3.1rem);
  line-height: 1;
}

.commercial-quote-band p {
  margin: 0;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.88rem;
}

@media (max-width: 1100px) {
  .industry-card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .industry-photo-card {
    min-height: 235px;
  }
}

@media (max-width: 900px) {
  .commercial-hero-v2-grid,   .commercial-industries-head,   .commercial-integrated-grid,   .commercial-quote-band-inner {
    grid-template-columns: 1fr;
  }
  .commercial-hero-v2-media {
    height: 480px;
  }
  .commercial-integrated-image {
    height: 420px;
  }
  .commercial-quote-band-inner {
    gap: 20px;
  }
}

@media (max-width: 650px) {
  .commercial-hero-v2 {
    padding: 36px 0 26px;
  }
  .commercial-hero-v2-copy h1 {
    font-size: 3.2rem;
  }
  .commercial-highlights {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .commercial-hero-v2-media {
    height: 390px;
  }
  .industry-card-grid {
    grid-template-columns: 1fr;
  }
  .industry-photo-card {
    min-height: 260px;
  }
  .commercial-industries {
    padding-top: 28px;
  }
  .commercial-integrated-grid {
    padding: 18px;
  }
  .commercial-integrated-image {
    height: 320px;
  }
  .solution-chip-grid {
    grid-template-columns: 1fr;
  }
  .commercial-quote-band-inner {
    padding: 24px;
  }
}

/* ============================================================
   MULTI-PAGE SITE
   ============================================================ */

.site-nav .active-link {
  position: relative;
  font-weight: 700;
  color:var(--header-text);
}

.site-nav .active-link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -12px;
  left: 0;
  height: 2px;
  background: var(--gold);
}

.page-hero {
  padding: 72px 0 84px;
  background: linear-gradient(180deg, var(--page-bg) 0%, var(--section-bg) 100%);
}

.page-hero-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 72px;
  align-items: center;
}

.page-hero-copy h1, .simple-page-hero h1 {
  margin: 14px 0 22px;
  font-family: var(--font-heading);
  font-size: clamp(3.4rem, 6vw, 6rem);
  line-height: .95;
  letter-spacing: -.045em;
}

.page-hero-copy > p, .simple-page-hero p {
  max-width: 680px;
  color: var(--muted);
  font-size: 1.05rem;
}

.page-hero-image {
  height: 560px;
  overflow: hidden;
  border-radius: 28px;
  box-shadow: var(--shadow-image);
}

.page-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.simple-page-hero {
  padding: 90px 0 70px;
  background: linear-gradient(180deg, var(--page-bg) 0%, var(--section-bg) 100%);
}

.simple-page-hero h1 {
  max-width: 920px;
}

.page-link-section {
  background: var(--card-bg);
}

.page-link-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.page-link-card {
  min-height: 330px;
  padding: 32px;
  background: var(--card-bg);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: transform .25s ease, box-shadow .25s ease;
}

.page-link-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
  z-index: 2;
}

.page-link-card span {
  color: var(--accent);
  font-size: .72rem;
}

.page-link-card h3 {
  margin: 54px 0 12px;
  font-size: 1.55rem;
}

.page-link-card p {
  min-height: 92px;
  color: var(--muted);
}

.page-link-card strong {
  font-size: .86rem;
}

.page-link-card.dark-card {
  background: var(--card-bg);
  color: var(--text-main);
}

.page-link-card.dark-card p {
  color: rgba(255,255,255,.62);
}

.page-link-card.dark-card span {
  color: var(--gold2);
}

.project-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  grid-auto-rows: 360px;
  gap: 18px;
}

.gallery-item {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--card-bg-soft);
}

.gallery-item.gallery-wide {
  grid-column: span 2;
}

.gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.78), transparent 60%);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.gallery-item:hover img {
  transform: scale(1.035);
}

.gallery-item figcaption {
  position: absolute;
  z-index: 2;
  left: 26px;
  bottom: 24px;
  color: var(--color-white);
}

.gallery-item figcaption span, .gallery-item figcaption strong {
  display: block;
}

.gallery-item figcaption span {
  color: var(--gold2);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.gallery-item figcaption strong {
  margin-top: 4px;
  font-size: 1.15rem;
}

.about-story {
  background: var(--card-bg);
}

.about-story-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 100px;
}

.about-story h2 {
  margin: 10px 0 0;
  font-family: var(--font-heading);
  font-size: clamp(2.8rem,4.5vw,4.8rem);
  line-height: 1.02;
  letter-spacing: -.035em;
}

.about-story p {
  color: var(--muted);
  font-size: 1.02rem;
}

.contact-hero {
  padding-bottom: 40px;
}

.contact-service-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 34px;
}

.contact-service-list span {
  padding: 9px 12px;
  color: var(--text-muted);
  background: var(--section-bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: .78rem;
}

@media (max-width: 980px) {
  .page-hero-grid,   .about-story-grid {
    grid-template-columns: 1fr;
  }
  .page-link-grid {
    grid-template-columns: repeat(2,1fr);
  }
  .page-hero-image {
    height: 500px;
  }
}

@media (max-width: 600px) {
  .site-nav .active-link::after {
    display: none;
  }
  .page-hero {
    padding: 48px 0 70px;
  }
  .page-hero-copy h1,   .simple-page-hero h1 {
    font-size: 3.2rem;
  }
  .page-hero-image {
    height: 390px;
  }
  .page-link-grid {
    grid-template-columns: 1fr;
  }
  .project-gallery-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 300px;
  }
  .gallery-item.gallery-wide {
    grid-column: auto;
  }
}


/* ============================================================
   THEME-SAFE COMPONENT OVERRIDES
   These keep forms, navigation, cards and readable text tied to
   the control panel above.
   ============================================================ */

.site-header {
  background: var(--header-bg);
  color: var(--header-text);
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  background: var(--section-bg);
  color: var(--text-main);
  border-color: var(--border);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--text-soft);
}

.btn-ghost {
  background: var(--button-secondary-bg);
  color: var(--button-secondary-text);
  border-color: var(--button-secondary-border);
}

.services,
.contact,
.business-types,
.commercial-industries,
.commercial-integrated,
.commercial-quote-band,
.page-link-section,
.about-story {
  background: var(--section-bg);
}

.service-card,
.page-link-card {
  background: var(--card-bg);
}

.process,
.commercial-benefits {
  background: var(--section-bg-alt);
}

.hero,
.page-hero,
.simple-page-hero,
.commercial-hero,
.commercial-hero-v2,
.commercial-page {
  color: var(--text-main);
}

@media (max-width: 900px) {
  .site-nav {
    background: var(--dark-bg);
    border-color: var(--border-soft);
  }

  .site-nav a {
    color: var(--text-on-dark);
  }
}


/* ============================================================
   CARD INTERACTION SYSTEM
   ------------------------------------------------------------
   DEFAULT:
     Every card uses --card-bg.

   HOVER:
     The card under the mouse uses --card-hover-bg.

   EDIT THESE COLORS IN THE DESIGN CONTROL PANEL AT THE TOP:
     --card-bg
     --card-hover-bg
   ============================================================ */

.page-link-card,
.service-card {
  background: var(--card-bg);
  color: var(--text-main);
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    transform var(--transition-base),
    box-shadow var(--transition-base);
}

.page-link-card:hover,
.service-card:hover {
  background: var(--card-hover-bg);
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

/* Old presentation classes no longer force a selected card. */
.page-link-card.dark-card,
.service-card.featured {
  background: var(--card-bg);
  color: var(--text-main);
}

.page-link-card.dark-card:hover,
.service-card.featured:hover {
  background: var(--card-hover-bg);
}


/* ============================================================
   FORM CONTROL FIXES
   ------------------------------------------------------------
   EASY SETTINGS:
   --select-arrow-right
       Controls how far the dropdown arrow sits from the right.
       A LARGER value moves the arrow farther LEFT.

   --form-button-focus-ring
       Kept transparent so the quote button has no white/gray
       browser ring behind it.
   ============================================================ */

/* Remove the browser's default select arrow so its position is controllable. */
.contact-form select {
  -webkit-appearance: none;
  appearance: none;

  padding-right: 70px;

  background-color: var(--section-bg);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-main) 50%),
    linear-gradient(135deg, var(--text-main) 50%, transparent 50%);
  background-position:
    calc(100% - var(--select-arrow-right) - var(--select-arrow-size)) 50%,
    calc(100% - var(--select-arrow-right)) 50%;
  background-size:
    var(--select-arrow-size) var(--select-arrow-size),
    var(--select-arrow-size) var(--select-arrow-size);
  background-repeat: no-repeat;
}

/* Remove the light browser outline/ring visible behind quote buttons. */
.contact-form .form-btn,
.contact-form .form-btn:hover,
.contact-form .form-btn:focus,
.contact-form .form-btn:focus-visible,
.contact-form .form-btn:active {
  outline: none;
  border-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}

.contact-form .form-btn:focus,
.contact-form .form-btn:focus-visible {
  box-shadow: 0 0 0 0 var(--form-button-focus-ring);
}

/* Keep the normal gold button shadow only when not focused. */
.contact-form .form-btn:not(:focus):not(:focus-visible) {
  box-shadow: var(--shadow-button);
}