/* Connect Us Care — warm light-brown theme (green removed) */

:root {
  --cream: #fbf5ec;
  --cream-soft: #f4ead9;
  --terracotta: #de7452;
  --terracotta-dark: #c85e3d;
  --brown-deep: #4a3223;
  --brown-mid: #7a5a41;
  --gold: #e8a83c;
  --ink: #35291f;
  --ink-soft: #6b5c4f;
  --white: #ffffff;
  --glass-bg: rgba(255, 255, 255, 0.5);
  --glass-bg-strong: rgba(255, 255, 255, 0.68);
  --glass-border: rgba(255, 255, 255, 0.65);
  --radius: 20px;
  --shadow: 0 14px 34px rgba(53, 41, 31, 0.16);
  --shadow-hover: 0 24px 48px rgba(53, 41, 31, 0.26);
  --max-width: 1140px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.6;
}

/* The team collage circle intentionally bleeds past the right edge of its
   container; clip at the viewport so it never causes horizontal scrolling */
html, body {
  overflow-x: clip;
}

h1, h2, h3, h4 {
  font-family: "Crimson Pro", Georgia, serif;
  font-weight: 700;
  color: var(--brown-deep);
  line-height: 1.15;
  margin: 0 0 0.5em;
}

p {
  margin: 0 0 1em;
}

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

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

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--brown-deep);
  color: var(--white);
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
  z-index: 1000;
}
.skip-link:focus {
  left: 0;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 245, 236, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(53, 41, 31, 0.08);
  transition: background 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease;
}

/* On the homepage the header floats transparently over the hero photo,
   then solidifies once the user scrolls past it — matches the original site. */
body.hero-page .site-header {
  position: fixed;
  width: 100%;
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

body.hero-page .site-header.scrolled {
  background: rgba(251, 245, 236, 0.92);
  backdrop-filter: blur(8px);
  border-bottom-color: rgba(53, 41, 31, 0.08);
}

body.hero-page .site-header .logo,
body.hero-page .site-header .main-nav a:not(.nav-cta) {
  color: var(--white);
}

body.hero-page .site-header.scrolled .logo,
body.hero-page .site-header.scrolled .main-nav a:not(.nav-cta),
body.hero-page .main-nav.open a:not(.nav-cta) {
  color: var(--ink);
}

body.hero-page .site-header .main-nav a:hover,
body.hero-page .site-header .main-nav a.active {
  color: var(--terracotta) !important;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
}

.logo {
  font-family: "Crimson Pro", Georgia, serif;
  font-weight: 600;
  font-size: 1.6rem;
  color: var(--brown-deep);
  transition: color 0.3s ease;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.main-nav a {
  font-weight: 600;
  color: var(--ink);
}

.main-nav a:hover,
.main-nav a.active {
  color: var(--terracotta);
}

.nav-cta {
  background: var(--terracotta);
  color: var(--white) !important;
  padding: 10px 22px;
  border-radius: 999px;
  font-weight: 700;
  transition: background 0.2s ease;
}

.nav-cta:hover,
.nav-cta.active {
  background: var(--terracotta-dark);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.6rem;
  color: var(--brown-deep);
  cursor: pointer;
  transition: color 0.3s ease;
}

body.hero-page .nav-toggle {
  color: var(--white);
}

body.hero-page .site-header.scrolled .nav-toggle {
  color: var(--brown-deep);
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 999px;
  font-weight: 700;
  transition: transform 0.15s ease, background 0.2s ease;
}

.btn-primary {
  background: var(--terracotta);
  color: var(--white);
}
.btn-primary:hover {
  background: var(--terracotta-dark);
  transform: translateY(-2px);
}

.btn-secondary {
  background: transparent;
  color: var(--brown-deep);
  border: 2px solid var(--brown-deep);
}
.btn-secondary:hover {
  background: var(--brown-deep);
  color: var(--white);
  transform: translateY(-2px);
}

/* Hero (parallax, full-bleed portrait style like the original site) */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: -20% 0;
  z-index: -1;
  will-change: transform;
}

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

.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,14,10,0.5) 0%, rgba(20,14,10,0.08) 26%, rgba(20,14,10,0.1) 62%, rgba(20,14,10,0.6) 100%);
}

.hero .container.hero-content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  max-width: var(--max-width);
  padding-top: 110px;
  padding-bottom: 70px;
}

.hero h1 {
  color: var(--white);
  text-align: left;
  max-width: none;
  font-family: "Dancing Script", "Crimson Pro", Georgia, serif;
  font-weight: 700;
  font-size: clamp(2.2rem, 5.4vw, 5rem);
  line-height: 1.15;
  white-space: nowrap;
  text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

.hero-heading-letters .letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(28px);
  animation: letterPopUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-heading-letters .letter.space {
  width: 0.32em;
}

.hero-heading-letters .word {
  display: inline-block;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .hero h1 {
    white-space: normal;
    font-size: clamp(2.3rem, 7vw, 5rem);
  }
  /* Lift the heading well above the subject's head and pin the subtitle
     just off the bottom — the portrait fills the frame differently on phones.
     The global section padding (60px) is removed here because the hero image
     paints through it, which kept the subtitle stranded above the bottom. */
  .hero {
    padding: 0;
  }
  .hero .container.hero-content {
    padding-top: 122px;
    padding-bottom: 24px;
  }
}

.hero p.lede {
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  font-family: "Inter", "Segoe UI", sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--white);
  text-align: left;
  max-width: min(400px, 42vw);
  margin: 0;
  text-shadow: 0 2px 16px rgba(0,0,0,0.3);
  opacity: 0;
  animation: heroFadeUp 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards;
}

/* Simple page header (non-image hero, for inner pages) */
.page-hero {
  padding: 70px 0 40px;
  text-align: center;
}

.page-hero h1 {
  font-size: clamp(2rem, 4vw, 2.8rem);
}

/* Compact embedded video (kept intentionally small — not a full-width hero) */
.video-embed {
  max-width: 480px;
  margin: 24px auto 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.video-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Sections */
section {
  padding: 60px 0;
}

.section-alt {
  background: var(--cream-soft);
}

.section-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 40px;
}

/* Meet the team teaser (home) */
.team-teaser {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

/* Collage layout: three photos overlapping like a scrapbook, matching the
   original site's "Meet the Team" arrangement — square top-left, arch
   centered and layered on top, circle top-right. */
.team-teaser-photos {
  position: relative;
  /* Fixed aspect ratio (matches the original 522x620 desktop proportions) so
     the percentage-positioned collage scales down intact on any screen —
     the circle stays a circle and the shapes keep their overlap */
  aspect-ratio: 522 / 620;
  width: 100%;
  max-width: 522px;
  margin: 0 auto;
}

.team-teaser-photos a {
  position: absolute;
  display: block;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.team-teaser-photos img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.1s ease;
}

.team-teaser-photos a:hover img {
  transform: scale(1.05);
}

/* Square — top-left — sits at the back of the stack, so its shadow is the tightest */
.team-teaser-photos a:nth-child(1) {
  left: 0;
  top: 8%;
  width: 42%;
  height: 60%;
  border-radius: 28px;
  z-index: 1;
  box-shadow: 0 8px 18px rgba(53, 41, 31, 0.14);
}

/* Arch — centered, front-most layer, so its shadow is the largest/most diffuse */
.team-teaser-photos a:nth-child(2) {
  left: 29%;
  top: 20%;
  width: 44%;
  height: 78%;
  border-radius: 999px 999px 0 0;
  z-index: 3;
  box-shadow: 0 24px 42px rgba(53, 41, 31, 0.24);
}

/* Circle — top-right, 1.5x the previous radius (width/height matched for a true circle); sits behind the arch, nudged up and right so the arch doesn't crop the face in it */
.team-teaser-photos a:nth-child(3) {
  right: -19.75%;
  top: -2%;
  width: 69%;
  height: 59%;
  border-radius: 50%;
  z-index: 2;
  box-shadow: 0 16px 28px rgba(53, 41, 31, 0.18);
}


/* Glass card base — applied to all card-like components */
.card,
.team-member,
.why-card,
.service-card,
.contact-card {
  background: var(--glass-bg);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform 0.45s ease, box-shadow 0.45s ease, background 0.3s ease;
}

.card:hover,
.team-member:hover,
.why-card:hover,
.service-card:hover,
.contact-card:hover {
  transform: translateY(-6px) scale(1.025);
  box-shadow: var(--shadow-hover);
  background: var(--glass-bg-strong);
}

/* Cards grid: news / services */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card img {
  height: 190px;
  width: 100%;
  object-fit: cover;
  transition: transform 1.1s ease;
}

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

.card-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-body h3 {
  font-size: 1.1rem;
}

.card-body p {
  color: var(--ink-soft);
  flex: 1;
}

.card-body .btn {
  align-self: flex-start;
  margin-top: 8px;
}

/* Mission statement band */
.mission {
  position: relative;
  overflow: hidden;
  color: var(--white);
  text-align: center;
  padding: 90px 0;
  background-image: url('../images/beach-joy.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.mission p {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  font-size: 1.2rem;
  color: var(--white);
  text-shadow: 0 2px 12px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.7);
}

/* background-attachment: fixed is unreliable on mobile browsers (notably
   iOS Safari), so fall back to normal scrolling there */
@media (max-width: 900px) {
  .mission {
    background-attachment: scroll;
  }
}

/* Short parallax hero band (~1/3 viewport) for inner pages like Employment */
.hero-third {
  position: relative;
  min-height: 34vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-third .hero-bg {
  position: absolute;
  inset: -20% 0;
  z-index: -1;
  will-change: transform;
}

.hero-third .hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-third .hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,14,10,0.5) 0%, rgba(20,14,10,0.4) 100%);
}

.hero-third .container {
  position: relative;
  text-align: center;
}

.hero-third h1 {
  color: var(--white);
  text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

.hero-third p {
  color: rgba(255,255,255,0.92) !important;
}

/* Services grid */
.services-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
}

.service-card {
  padding: 30px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.service-card h3 {
  font-size: 1.15rem;
  min-height: 2.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 4px;
}

.service-card p {
  color: var(--ink-soft);
  font-size: 0.92rem;
  flex: 1;
}

.service-card .btn {
  margin-top: 6px;
}

/* Service detail blocks (services.html) */
.service-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 50px 0;
  border-bottom: 1px solid rgba(53,41,31,0.08);
}

.service-detail:last-of-type {
  border-bottom: none;
}

.service-detail .media {
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: box-shadow 0.45s ease;
}

.service-detail .media:hover {
  box-shadow: var(--shadow-hover);
}

.service-detail img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  transition: transform 1.1s ease;
}

.service-detail .media:hover img {
  transform: scale(1.04);
}

.service-detail .tagline {
  color: var(--terracotta-dark);
  font-weight: 700;
  margin-bottom: 6px;
}

.service-detail ul {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
}

.service-detail ul li {
  padding: 6px 0;
}

/* Why us grid */
.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.why-card {
  padding: 26px;
}

.why-card h3 {
  color: var(--terracotta-dark);
  font-size: 1.05rem;
}

/* Team page */
.team-intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 20px;
}

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

.team-member {
  overflow: hidden;
}

.team-member img {
  height: 260px;
  width: 100%;
  object-fit: cover;
  transition: transform 1.1s ease;
}

.team-member:hover img {
  transform: scale(1.04);
}

.team-member .card-body h3 {
  font-size: 1rem;
  letter-spacing: 0.03em;
  color: var(--terracotta-dark);
  text-transform: uppercase;
}

.team-member .card-body p {
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* Testimonials carousel: slides one card at a time with a springy overshoot,
   auto-advancing on a timer. Loops seamlessly via cloned leading cards. */
.t-carousel {
  /* Hide off-screen cards while letting shadows breathe: the clip window
     extends 120px above/below and 20px past the sides — enough for the outer
     cards' shadows to fade out before the cut (so no hard shadow line), but
     less than the 22px card gap, so neighbouring cards stay hidden. */
  clip-path: inset(-120px -20px);
}

.t-track {
  display: flex;
  gap: 22px;
  align-items: stretch;
  transition: transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}

.t-track .testimonial {
  flex: 0 0 calc((100% - 44px) / 3);
  display: flex;
  flex-direction: column;
}

.t-track .testimonial p:first-of-type {
  flex: 1;
}

@media (max-width: 900px) {
  .t-track .testimonial {
    flex: 0 0 100%;
  }
}

.t-dots {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 26px;
}

.t-dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(74, 50, 35, 0.2);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.t-dots button.active {
  background: var(--terracotta);
  transform: scale(1.3);
}

.testimonial {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 28px;
  /* Slightly tighter shadow than the shared one: negative spread keeps the
     ink within the carousel's 20px side clip margin, so the outer cards'
     shadows fade out completely instead of being sliced into a hard line */
  box-shadow: 0 16px 28px -12px rgba(53, 41, 31, 0.22);
  transition: transform 0.45s ease, box-shadow 0.45s ease, background 0.3s ease;
}

.testimonial:hover {
  transform: translateY(-6px) scale(1.025);
  box-shadow: 0 22px 36px -18px rgba(53, 41, 31, 0.3);
  background: var(--glass-bg-strong);
}

.testimonial .g-mark {
  position: absolute;
  top: 26px;
  right: 26px;
  width: 22px;
  height: 22px;
}

.testimonial .stars {
  color: var(--gold);
  margin-bottom: 12px;
  letter-spacing: 3px;
  font-size: 22px;
  line-height: 1;
}

.testimonial p {
  font-family: "Crimson Pro", Georgia, serif;
  font-style: italic;
  color: var(--ink);
  font-size: 1.05rem;
}

.testimonial .reviewer {
  font-style: normal;
  font-family: "Inter", sans-serif;
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-top: 12px;
}

/* Contact page */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.contact-card {
  padding: 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.contact-card .icon {
  font-size: 1.6rem;
}

.contact-card a {
  font-weight: 700;
  color: var(--brown-deep);
}

/* Footer */
.site-footer {
  background: var(--brown-deep);
  color: rgba(255,255,255,0.88);
  padding: 50px 0 30px;
  overflow: hidden;
}

.flat-form button[type="submit"] {
  display: block;
  margin: 0 auto;
}

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

.footer-grid h4 {
  color: var(--white);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.footer-grid a {
  color: rgba(255,255,255,0.8);
}

.footer-grid a:hover {
  color: var(--gold);
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 20px;
  text-align: center;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
}

.footer-bottom a {
  color: rgba(255,255,255,0.75);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-bottom a:hover {
  color: var(--gold);
}

/* Responsive */
@media (max-width: 900px) {
  /* 42vw is far too narrow on a phone — let the hero subtitle breathe */
  .hero p.lede {
    max-width: min(400px, 86vw);
  }
  .team-teaser,
  .service-detail,
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .service-detail img {
    height: 240px;
  }
  .service-detail .media {
    order: -1;
  }
  .card-grid,
  .services-grid,
  .why-grid,
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

@media (max-width: 640px) {
  .main-nav {
    position: fixed;
    top: 68px;
    left: 0;
    right: 0;
    background: var(--cream);
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 24px;
    gap: 18px;
    box-shadow: var(--shadow);
    transform: translateY(-150%);
    transition: transform 0.25s ease;
  }
  .main-nav.open {
    transform: translateY(0);
  }
  .nav-toggle {
    display: block;
  }
  .card-grid,
  .services-grid,
  .why-grid,
  .team-grid {
    grid-template-columns: 1fr;
  }
}

@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes letterPopUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg {
    transform: none !important;
  }
  .hero h1,
  .hero p.lede,
  .hero-heading-letters .letter {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .card, .team-member, .why-card, .service-card, .contact-card, .testimonial,
  .card img, .team-member img, .service-detail img, .team-teaser-photos img {
    transition: none;
  }
}

/* Forms (Get In Touch + Employment) */
.flat-form {
  background: var(--glass-bg);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow);
}

.form-row {
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

/* Narrow phone field next to a wide email field (contact form) */
.form-grid-2.phone-email {
  grid-template-columns: minmax(160px, 0.65fr) 1.35fr;
}

.form-row label {
  font-weight: 600;
  color: var(--brown-deep);
  font-size: 0.95rem;
}

.form-row .req {
  color: var(--terracotta);
}

.form-row input,
.form-row select,
.form-row textarea {
  font-family: "Inter", sans-serif;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid rgba(53, 41, 31, 0.18);
  background: rgba(255, 255, 255, 0.75);
  font-size: 1rem;
  color: var(--ink);
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: 2px solid var(--terracotta);
  outline-offset: 1px;
}

.form-section-title {
  font-family: "Crimson Pro", Georgia, serif;
  font-weight: 700;
  color: var(--brown-deep);
  margin: 30px 0 14px;
  font-size: 1.2rem;
}

.form-section-title:first-child {
  margin-top: 0;
}

.check-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 18px;
  margin-bottom: 18px;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.check-row input {
  width: auto;
}

.form-msg {
  margin-top: 16px;
  font-weight: 600;
  min-height: 1.2em;
}

.form-msg.ok {
  color: #2f7d4f;
}

.form-msg.err {
  color: #b23b3b;
}

.form-hint {
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-weight: 400;
  margin-top: -2px;
}

.file-upload-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.file-upload-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.file-upload-row .remove-file-btn {
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}

.file-upload-row .remove-file-btn:hover {
  color: var(--terracotta-dark);
}

.btn-add-file {
  align-self: flex-start;
  background: none;
  border: none;
  color: var(--terracotta-dark);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 6px 0;
  margin-top: 4px;
}

.btn-add-file:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .form-grid-2,
  .form-grid-2.phone-email,
  .check-grid {
    grid-template-columns: 1fr;
  }
}

/* Placeholder video thumbnails on the homepage service cards — styled to
   read as a paused video, ready to swap for the real embeds later */
.service-video {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  overflow: hidden;
  margin: 16px 0;
  box-shadow: var(--shadow);
}

.service-video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.85) brightness(0.9);
}

.service-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,14,10,0.05) 0%, rgba(20,14,10,0.45) 100%);
}

.service-video .play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  color: var(--brown-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  z-index: 1;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}

.service-video .coming-soon-badge {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20,14,10,0.75);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  z-index: 1;
  white-space: nowrap;
}