/* ==========================================================================
   DreamAnna Gardens — stylesheet
   Faithful reproduction of the original Elementor design.

   Colours, font stack, sizes, weights and letter-spacing below are the values
   read out of the live site's generated Elementor CSS (post-20.css and
   post-404.css), not approximations:

     #2E5E2E  section headings, top bar, active nav item, input borders
     #0C3E2D  sub-headings, dark buttons, footer, form text
     #5FB71E  nav bar, FAQ titles, form title, review stars
     #FDBC32  amber buttons, submit hover
     #F0F7F2  light mint panels and form fields
     #7A7A7A  body copy
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */

:root {
  --dark:   #0C3E2D;
  --forest: #2E5E2E;
  --bright: #5FB71E;
  --amber:  #FDBC32;
  --mint:   #F0F7F2;
  --grey:   #7A7A7A;
  --white:  #ffffff;

  /* Label colour on hover for the dark buttons; the background does not move */
  --dark-hover-text: #649461;

  /* Elementor writes these as 8-digit hex; same values as rgba() */
  --field-border: rgba(46, 94, 46, 0.49);   /* #2E5E2E7D */
  --panel-border: rgba(46, 94, 46, 0.50);   /* #2E5E2E80 */
  --label:        rgba(12, 62, 45, 0.50);   /* #0C3E2D80 */
  --rule:         #e8e8e8;

  --font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  /* Elementor's default content width */
  --wrap: 1140px;

  --ease: cubic-bezier(0.22, 0.75, 0.28, 1);
}

/* ---------------------------------------------------------- 2. Base / reset */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--grey);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4 { font-family: var(--font); margin: 0; font-weight: 600; line-height: 1.25; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--dark); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--bright); }

img, svg { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 1em; padding-left: 1.15em; }

:focus-visible { outline: 3px solid var(--forest); outline-offset: 2px; }

::selection { background: var(--bright); color: var(--white); }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 300;
  background: var(--dark); color: var(--white);
  padding: 10px 16px; font-size: 14px; font-weight: 600;
  text-decoration: none; transition: top 0.18s var(--ease);
}
.skip-link:focus { top: 12px; color: var(--white); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------- 3. Structure */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 20px;
}

.section { padding-block: 60px; }
.section--tight { padding-block: 30px; }
.section--mint { background: var(--mint); }

/* The 45px / 700 / 2.8px-tracked forest-green section title, centred. */
.h-section {
  font-size: 45px;
  font-weight: 700;
  letter-spacing: 2.8px;
  color: var(--forest);
  text-align: center;
  line-height: 1.2;
  margin: 0 0 50px;
}

/* 30px / 600 dark-green sub-heading */
.h-sub { font-size: 30px; font-weight: 600; color: var(--dark); margin: 0 0 20px; }

/* 24px / 600 dark-green */
.h-24 { font-size: 24px; font-weight: 600; color: var(--dark); margin: 0 0 16px; }

@media (max-width: 767px) {
  .h-section { font-size: 30px; letter-spacing: 1.6px; margin-bottom: 32px; }
  .h-sub { font-size: 24px; }
  .section { padding-block: 44px; }
}

/* --------------------------------------------------------------- 4. Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 28px;
  border: 0;
  border-radius: 7px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

/* Amber buttons ("Contact Me", "Get Free Qouta") declare no text colour on the
   original, so the label takes the site's dark green rather than white — and
   they carry no hover rule at all, so they hold their colours on hover. */
.btn--amber { background: var(--amber); color: var(--dark); }
.btn--amber:hover { background: var(--amber); color: var(--dark); }

/* Dark buttons ("View My Work", "See more work") keep their background on
   hover; only the label lightens to #649461. */
.btn--dark { background: var(--dark); color: var(--white); }
.btn--dark:hover { background: var(--dark); color: var(--dark-hover-text); }

.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.65; cursor: progress; }

.btn-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.btn-row--center { justify-content: center; }
.btn-row--right { justify-content: flex-end; }

/* ---------------------------------------------------------------- 5. Header */

.topbar {
  background: var(--forest);
  color: var(--white);
  font-size: 14px;
  font-weight: 500;
}
/* Full-bleed, with the contact details sitting in from the right edge rather
   than aligning to the 1140px content container. */
.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px 14px;
  min-height: 44px;
  padding-block: 8px;
  padding-inline: 20px clamp(20px, 6vw, 120px);
}
.topbar a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--white);
  text-decoration: none;
}
.topbar a:hover { color: var(--white); text-decoration: underline; }
.topbar__sep { opacity: 0.55; }

/* Keep the phone and the email on a single line on small screens. At 14px the
   strip needs ~425px and a 390px phone only offers ~347px, so the type scales
   with the viewport instead of wrapping (which left the separator stranded at
   the end of the first line). The icons are sized in em so they scale with it. */
@media (max-width: 767px) {
  .topbar__inner {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0 7px;
    padding-inline: 12px;
    font-size: clamp(9px, 3vw, 14px);
  }
  .topbar a { gap: 5px; white-space: nowrap; }
  .topbar svg { width: 1em; height: 1em; }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bright);
}

/* Full-bleed bar. The logo sits hard against the left edge in a column about a
   quarter of the viewport wide, and the menu begins at that quarter mark and
   runs left-to-right from there — it is neither centred on the page nor pushed
   flush right, which is why there is a wide stretch of bare green after "Blog". */
.site-header__inner {
  display: grid;
  grid-template-columns: minmax(200px, 25%) 1fr;
  align-items: stretch;
  min-height: 70px;
  padding-inline: 16px 0;
}

@media (max-width: 1024px) {
  /* The menu becomes an overlay, so the bar is just logo + burger. */
  .site-header__inner { grid-template-columns: 1fr auto; padding-inline: 20px; }
}

/* Logo — the original is a single image with the wordmark baked in, on the
   same green as the bar. */
.brand {
  display: inline-flex;
  align-items: center;
  align-self: center;
  text-decoration: none;
  flex-shrink: 0;
}
.brand img { height: 60px; width: auto; }
@media (max-width: 480px) { .brand img { height: 38px; } }

/* Nav */
.nav { display: flex; align-items: stretch; }
.nav__list {
  display: flex;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__list > li { display: flex; }

.nav__link,
.nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 42px;
  background: transparent;
  border: 0;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 1.4px;
  color: var(--white);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s var(--ease);
}
/* Hover paints the same full-height dark block as the active item — that is why
   two neighbouring items can both look dark at once. */
.nav__link:hover,
.nav__toggle:hover { background: var(--forest); color: var(--white); }

/* The active item is a full-height forest-green block, as on the original. */
.nav__link[aria-current="page"],
.nav__item--current > .nav__link,
.nav__item--current > .nav__toggle { background: var(--forest); color: var(--white); }

.nav__toggle svg { transition: transform 0.2s var(--ease); }
.nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Dropdown */
.nav__item--has-menu { position: relative; }
.nav__menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 230px;
  background: var(--bright);
  list-style: none;
  margin: 0;
  padding: 6px 0;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.16s var(--ease), transform 0.16s var(--ease), visibility 0.16s;
}
.nav__item--has-menu.is-open .nav__menu { opacity: 1; visibility: visible; transform: none; }

/* Anchor the panel to the item's right edge when it is the last one in the bar.
   A `visibility: hidden` absolutely-positioned box still counts towards the
   document's scroll width, so a left-anchored 230px panel under the final item
   hangs past the viewport and gives the whole page a horizontal scrollbar at
   laptop widths (worst around 1025–1150px). */
.nav__list > li:last-child .nav__menu { left: auto; right: 0; }
.nav__menu a {
  display: block;
  padding: 10px 22px;
  color: var(--white);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.6px;
  text-decoration: none;
}
.nav__menu a:hover { background: var(--forest); color: var(--white); }

/* Burger */
.burger {
  display: none;
  width: 46px; height: 46px;
  align-self: center;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 3px;
  color: var(--white);
  cursor: pointer;
  flex-shrink: 0;
}
.burger__bars { display: block; width: 20px; height: 14px; position: relative; }
.burger__bars i {
  position: absolute; left: 0; right: 0; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform 0.22s var(--ease), opacity 0.16s var(--ease);
}
.burger__bars i:nth-child(1) { top: 0; }
.burger__bars i:nth-child(2) { top: 6px; }
.burger__bars i:nth-child(3) { top: 12px; }
.burger[aria-expanded="true"] .burger__bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bars i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1024px) {
  .burger { display: inline-flex; }

  .nav {
    position: fixed;
    /* site.js sets --nav-top from the header's measured bottom on open; the
       fallback covers top bar (44) + bar (70) on a single-line top bar. */
    inset: var(--nav-top, 114px) 0 0 0;
    display: block;
    background: var(--bright);
    padding: 10px 0 40px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s var(--ease), visibility 0.2s;
  }
  .nav.is-open { opacity: 1; visibility: visible; }

  .nav__list { display: block; }
  .nav__list > li { display: block; border-bottom: 1px solid rgba(255, 255, 255, 0.28); }
  .nav__link,
  .nav__toggle { width: 100%; padding: 16px 24px; justify-content: space-between; }
  .nav__menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; display: none; padding: 0 0 8px 20px;
  }
  .nav__item--has-menu.is-open .nav__menu { display: block; }
}

/* ------------------------------------------------------------ 6. Hero band */

/* The original is an Elementor section with a cover background image, 296px
   tall, dropping to 138px at the mobile breakpoint. Rendered here as an <img>
   instead so the local-copy / WordPress-fallback swap in each page's <head>
   still applies to it.
   (The original also sets background-attachment:fixed above 1025px for a
   parallax effect. That needs a CSS background rather than an <img>, which
   would lose the fallback — see README.) */
.hero {
  width: 100%;
  height: 296px;
  overflow: hidden;
  background: var(--mint);
}
@media (max-width: 767px) { .hero { height: 138px; } }
.hero img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }

/* Interior pages get the same band with a title over it. */
.page-band {
  position: relative;
  background: var(--forest);
  color: var(--white);
  padding-block: 54px;
  text-align: center;
}
.page-band h1 {
  font-size: 45px;
  font-weight: 700;
  letter-spacing: 2.8px;
  color: var(--white);
  line-height: 1.2;
  margin: 0;
}
.page-band p { margin: 14px auto 0; max-width: 62ch; color: rgba(255, 255, 255, 0.88); font-size: 18px; }
@media (max-width: 767px) { .page-band h1 { font-size: 30px; letter-spacing: 1.6px; } }

.breadcrumb { font-size: 14px; color: var(--grey); padding-top: 22px; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.breadcrumb li { display: flex; align-items: center; gap: 8px; }
.breadcrumb li + li::before { content: "/"; color: #cfcfcf; }
.breadcrumb a { color: var(--grey); }
.breadcrumb [aria-current="page"] { color: var(--dark); font-weight: 500; }

/* ------------------------------------------------- 7. Service circles row */

.services-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 30px 24px;
  align-items: start;
}
@media (max-width: 1024px) { .services-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .services-row { grid-template-columns: repeat(2, 1fr); gap: 26px 16px; } }

.service-item { text-align: center; }
.service-item__img {
  width: 100%;
  max-width: 165px;
  margin: 0 auto 18px;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--mint);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.service-item__img img { width: 100%; height: 100%; object-fit: cover; }
.service-item h2 {
  font-size: 21px;
  font-weight: 600;
  color: var(--dark);
  line-height: 1.3;
  margin: 0;
}
@media (max-width: 767px) { .service-item h2 { font-size: 17px; } }

/* --------------------------------------------- 8. Two-column text layouts */

.cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
/* Grid tracks default to min-width:auto, so one long unbreakable string (an
   email address, say) can hold a column wider than the viewport. */
.cols > *, .split > *, .form-layout > * { min-width: 0; }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; gap: 28px; } }

.cols--start { align-items: start; }

/* 21px body copy, as used for "Additional services" and the areas intro */
.t-21 { font-size: 21px; font-weight: 400; color: var(--grey); }
.t-21 ul { margin: 0; padding-left: 1.1em; }
.t-21 li { margin-bottom: 2px; }

/* 16px two-column area list */
.area-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 30px;
  font-size: 16px;
  margin: 14px 0 20px;
}
.area-cols ul { margin: 0; padding-left: 1.1em; }
.area-cols li { margin-bottom: 2px; }
@media (max-width: 480px) { .area-cols { grid-template-columns: 1fr; } }

/* min(..., 100%) matters: a bare pixel max-width on a class outranks the
   `img { max-width: 100% }` reset, so the image would keep its full size and
   push the page sideways on narrow screens. */
.deco { max-width: min(340px, 100%); margin-inline: auto; opacity: 0.95; }
.deco--sm { max-width: min(260px, 100%); }

/* The branch beside "Additional services" is purely decorative. Once .cols
   stacks it stops sitting next to the list and becomes most of a screen of
   filler between the list and the next section, so drop it there. Hiding the
   whole column, not just the <img>, avoids leaving an empty 40px grid gap. */
@media (max-width: 900px) { .deco-col { display: none; } }

/* The photo under the FAQ list. width:100% lets it shrink below its 940px cap
   instead of holding its natural 914px on narrow screens. */
.faq-photo { width: 100%; max-width: 940px; margin-inline: auto; }

.map-frame { border: 1px solid var(--rule); background: var(--mint); }
.map-frame img { width: 100%; }

/* ------------------------------------------------------------- 9. About Me */

.about-card {
  background: var(--mint);
  padding: 30px;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 30px;
  align-items: start;
}
@media (max-width: 767px) { .about-card { grid-template-columns: 1fr; padding: 20px; } }

.about-card__photo img { width: 100%; }
.about-card__body { font-size: 16px; font-weight: 400; color: var(--grey); }
.about-card__body a { color: var(--forest); }

/* -------------------------------------------------------- 10. Review cards */

.reviews-carousel { position: relative; padding-inline: 46px; }
@media (max-width: 560px) { .reviews-carousel { padding-inline: 34px; } }

.reviews-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 60px) / 3);
  gap: 30px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.reviews-track::-webkit-scrollbar { display: none; }
@media (max-width: 1024px) { .reviews-track { grid-auto-columns: calc((100% - 30px) / 2); } }
@media (max-width: 700px)  { .reviews-track { grid-auto-columns: 100%; } }

.review { scroll-snap-align: start; background: var(--white); }
.review__name {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--dark);
  margin: 0 0 6px;
}
.review__stars { display: flex; gap: 2px; color: var(--bright); margin-bottom: 6px; }
.review__date { font-size: 11px; color: var(--grey); display: block; margin-bottom: 14px; }
.review__text { font-size: 16px; font-weight: 300; letter-spacing: 0.5px; color: var(--grey); margin: 0; }

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  color: var(--forest);
  font-size: 24px;
  cursor: pointer;
}
.carousel-btn:hover { color: var(--bright); }
.carousel-btn[disabled] { opacity: 0.3; cursor: default; }
.carousel-btn--prev { left: 0; }
.carousel-btn--next { right: 0; }

/* ------------------------------------------------- 10b. Gallery hub tiles

   The /gallery page is a two-tile category hub, not a photo grid. Values from
   the live post-485.css: label Montserrat 24px/600, 2.9px tracking, #FEFFFF;
   dotted white rules 3.6px inset 70px; overlay #0C3E2D at 40% multiply,
   turning #61CE70 on hover. */

/* One centred column holds the intro, the tiles and the buttons, so all three
   share a left edge and a centre. Previously the intro had a max-width with no
   auto margins, which pinned it flush left inside the 1140px wrap and left its
   centre 158px adrift of the tiles below it. */
.gal-hub { max-width: 880px; margin-inline: auto; }

.gal-intro { margin-bottom: 34px; }
.gal-intro h1 { font-size: 30px; font-weight: 600; color: var(--dark); margin: 0 0 18px; }
.gal-intro p { font-size: 16px; font-weight: 400; color: var(--grey); margin: 0; }

.gal-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 767px) { .gal-tiles { grid-template-columns: 1fr; } }

.gal-tile {
  position: relative;
  display: block;
  aspect-ratio: 430 / 305;
  overflow: hidden;
  text-decoration: none;
  background: var(--mint);
}
.gal-tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* The tint sits between the photo and the label. */
.gal-tile::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--dark);
  opacity: 0.4;
  mix-blend-mode: multiply;
  transition: background-color 0.3s var(--ease);
}
.gal-tile:hover::after { background: #61CE70; }

.gal-tile__label {
  position: absolute;
  left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  padding-inline: 70px;
  text-align: center;
}
.gal-tile__label span {
  display: block;
  padding-block: 17px;
  border-top: 3.6px dotted #ffffff;
  border-bottom: 3.6px dotted #ffffff;
  font-size: 24px;
  font-weight: 600;
  line-height: 19px;
  letter-spacing: 2.9px;
  color: #FEFFFF;
}
@media (max-width: 560px) {
  .gal-tile__label { padding-inline: 32px; }
  .gal-tile__label span { font-size: 19px; letter-spacing: 2px; }
}

/* ------------------------------------------------------------- 11. Gallery */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .gallery-grid { grid-template-columns: 1fr; } }

.shot {
  display: block;
  width: 100%;
  margin: 0; padding: 0; border: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--mint);
  cursor: zoom-in;
}
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease); }
.shot:hover img { transform: scale(1.04); }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(10, 30, 18, 0.93);
  opacity: 0; visibility: hidden;
  transition: opacity 0.22s var(--ease), visibility 0.22s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__img { max-width: 100%; max-height: 82vh; width: auto; background: var(--dark); }
.lightbox__caption { color: rgba(255, 255, 255, 0.75); font-size: 14px; text-align: center; margin-top: 14px; min-height: 1.4em; }
.lightbox__btn {
  position: absolute;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  cursor: pointer;
}
.lightbox__btn:hover { background: rgba(255, 255, 255, 0.24); }
.lightbox__btn--close { top: 16px; right: 16px; }
.lightbox__btn--prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__btn--next { right: 16px; top: 50%; transform: translateY(-50%); }

/* ---------------------------------------------------------------- 12. Form */

.form-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 30px;
  align-items: start;
}
@media (max-width: 900px) { .form-layout { grid-template-columns: 1fr; } }

.form-card {
  border: 1px solid var(--panel-border);
  border-radius: 3px;
  padding: 34px 30px;
}
@media (max-width: 560px) { .form-card { padding: 22px 18px; } }

.form-card__title {
  font-size: 29px;
  font-weight: 600;
  color: var(--bright);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  line-height: 1.3;
  margin: 0 0 30px;
}
@media (max-width: 560px) { .form-card__title { font-size: 21px; } }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.form-grid .field--full { grid-column: 1 / -1; }

.field > label {
  display: block;
  font-size: 16px;
  font-weight: 400;
  color: var(--label);
  margin-bottom: 6px;
}
.field .req { color: #d33; }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%;
  padding: 11px 13px;
  background: var(--mint);
  border: 1px solid var(--field-border);
  border-radius: 3px;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  color: var(--dark);
  transition: border-color 0.16s var(--ease);
}
.field textarea { min-height: 170px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--forest);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #d33; }

.field input[type="file"] {
  width: 100%;
  padding: 9px;
  background: var(--mint);
  border: 1px solid var(--field-border);
  border-radius: 3px;
  font-family: var(--font);
  font-size: 14px;
  color: var(--dark);
  cursor: pointer;
}

/* Services checkbox row, as on the original */
.checkrow { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.checkrow label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 16px;
  font-weight: 400;
  color: var(--label);
  cursor: pointer;
}
.checkrow input { width: 15px; height: 15px; accent-color: var(--forest); margin: 0; }

.field__hint { font-size: 13px; color: var(--label); margin-top: 5px; display: block; }
.field__error { display: block; font-size: 13px; color: #d33; min-height: 1em; margin-top: 4px; }

.form-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--label); }
.form-consent input { width: 16px; height: 16px; margin-top: 3px; flex-shrink: 0; accent-color: var(--forest); }

/* The form's Submit is the one button that does swap background on hover
   (dark green -> amber), and it is 16px/500 and capitalised. */
.form-submit { display: flex; justify-content: center; }
.form-submit .btn {
  font-size: 16px;
  font-weight: 500;
  text-transform: capitalize;
  padding: 13px 30px;
}
.form-submit .btn--dark:hover { background: var(--amber); color: var(--white); }

.form-status { border-radius: 3px; padding: 14px; font-size: 15px; display: none; }
.form-status.is-visible { display: block; }
.form-status--ok  { background: var(--mint); color: var(--dark); border: 1px solid var(--panel-border); }
.form-status--err { background: #fdecec; color: #a02020; border: 1px solid #e5a0a0; }

/* Contact Me side panel */
.contact-panel {
  background: var(--mint);
  border: 1px solid var(--panel-border);
  border-radius: 3px;
  padding: 24px 26px;
  text-align: center;
}
.contact-panel__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--dark);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  text-decoration: underline;
  text-underline-offset: 4px;
  margin: 0 0 18px;
}
.contact-list { list-style: none; margin: 0; padding: 0; text-align: left; display: grid; gap: 12px; }
.contact-list li { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--dark); }
.contact-list a { color: var(--dark); text-decoration: none; }
.contact-list a:hover { color: var(--bright); text-decoration: underline; }
.contact-list svg { flex-shrink: 0; color: var(--dark); }

/* ----------------------------------------------------------------- 13. FAQ */

.faq { max-width: 940px; margin-inline: auto; }

.faq__item { border-bottom: 1px solid var(--rule); }
.faq__item:first-child { border-top: 1px solid var(--rule); }

.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 17px 8px;
  background: none;
  border: 0;
  font-family: var(--font);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1.1px;
  color: var(--bright);
  text-align: left;
  line-height: 1.4;
  cursor: pointer;
}
.faq__q:hover { color: var(--forest); }
.faq__leaf { flex-shrink: 0; color: var(--bright); }
.faq__q:hover .faq__leaf { color: var(--forest); }

.faq__a { overflow: hidden; height: 0; transition: height 0.28s var(--ease); }
.faq__a > div { padding: 0 8px 20px 42px; font-size: 18px; font-weight: 400; color: var(--grey); }
@media (max-width: 560px) {
  .faq__q { font-size: 15px; letter-spacing: 0.6px; }
  .faq__a > div { font-size: 16px; padding-left: 30px; }
}

/* -------------------------------------------------------------- 14. Footer */

.site-footer {
  background: var(--dark);
  color: var(--white);
  padding-block: 60px;
  text-align: center;
}
.site-footer p {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--white);
  text-transform: capitalize;
  margin: 0 0 6px;
}
.site-footer p:last-child { margin-bottom: 0; }
.site-footer a { color: var(--white); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: var(--white); }
.site-footer__sep { opacity: 0.5; margin-inline: 6px; }

/* ------------------------------------------------------- 15. WhatsApp float */

.wa-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 95;
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #25d366;
  color: var(--white);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
  transition: transform 0.16s var(--ease);
}
.wa-float:hover { transform: scale(1.06); color: var(--white); }

/* --------------------------------------------------------- 16. Prose (blog) */

.prose { max-width: 780px; margin-inline: auto; font-size: 18px; color: var(--grey); }
.prose > * + * { margin-top: 1.3em; }
.prose h2 { font-size: 30px; font-weight: 600; color: var(--dark); margin-top: 2em; }
.prose h3 { font-size: 21px; font-weight: 600; color: var(--dark); margin-top: 1.8em; }
.prose h2 + p, .prose h3 + p { margin-top: 0.7em; }
.prose p { margin-bottom: 0; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: 0.4em; }
.prose blockquote {
  margin: 1.6em 0;
  padding-left: 22px;
  border-left: 3px solid var(--bright);
  font-style: italic;
  color: var(--forest);
}
.prose hr { border: 0; border-top: 1px solid var(--rule); margin-block: 2em; }
.prose img { margin-block: 1.6em; }

.post-meta {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  justify-content: center;
  margin: 16px 0 0;
  padding: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}

/* Blog index cards */
.post-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 30px; }
.post-card { border: 1px solid var(--rule); background: var(--white); }
.post-card__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--mint); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { padding: 24px; }
.post-card__date { display: block; font-size: 11px; color: var(--grey); margin-bottom: 10px; }
.post-card__body h2, .post-card__body h3 { font-size: 24px; font-weight: 600; color: var(--dark); margin: 0 0 12px; }
.post-card__body h2 a, .post-card__body h3 a { color: inherit; text-decoration: none; }
.post-card__body h2 a:hover, .post-card__body h3 a:hover { color: var(--bright); }

/* ----------------------------------------------------- 17. Generic content */

.panel {
  background: var(--mint);
  border: 1px solid var(--panel-border);
  border-radius: 3px;
  padding: 26px;
}

.tick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tick-list li { position: relative; padding-left: 30px; font-size: 16px; color: var(--grey); }
.tick-list li::before {
  content: "";
  position: absolute; left: 0; top: 0.35em;
  width: 16px; height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235FB71E' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
}

.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 30px; }

.info-card { border: 1px solid var(--rule); padding: 26px; }
.info-card h3 { font-size: 21px; font-weight: 600; color: var(--dark); margin: 0 0 12px; }
.info-card p { font-size: 16px; color: var(--grey); }

.step-num {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bright);
  color: var(--white);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 16px;
}

/* ------------------------------------------- 18. Interior-page components

   The homepage reproduces the original Elementor layout exactly. The service,
   blog and legal pages need a handful of extra building blocks the homepage
   does not use — defined here in the same six brand colours, Montserrat, and
   3px corner radius so they read as part of the same site.
   ------------------------------------------------------------------------- */

.section--sand { background: var(--mint); }
.section--dark { background: var(--dark); color: rgba(255, 255, 255, 0.85); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: var(--white); }
.section--dark .h-section { color: var(--white); }
.section--dark a { color: var(--white); }

.section-head { max-width: 720px; margin-bottom: 44px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { font-size: 18px; color: var(--grey); margin-bottom: 0; }
.section--dark .section-head p { color: rgba(255, 255, 255, 0.8); }

.eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--bright);
  margin: 0 0 12px;
}

.lede { font-size: 21px; font-weight: 400; color: var(--grey); }

/* Button variants used only on interior pages */
/* Same two treatments as the homepage buttons, under the aliases the interior
   pages use. */
.btn--primary { background: var(--dark); color: var(--white); }
.btn--primary:hover { background: var(--dark); color: var(--dark-hover-text); }
.btn--accent { background: var(--amber); color: var(--dark); }
.btn--accent:hover { background: var(--amber); color: var(--dark); }
.btn--ghost { background: transparent; color: var(--dark); border: 1px solid var(--panel-border); }
.btn--ghost:hover { background: var(--mint); color: var(--dark); }
.btn--on-dark { background: transparent; color: var(--white); border: 1px solid rgba(255, 255, 255, 0.5); }
.btn--on-dark:hover { background: rgba(255, 255, 255, 0.14); color: var(--white); }
.btn--lg { padding: 15px 34px; font-size: 16px; }

/* Grids */
.grid { display: grid; gap: 30px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* Cards */
.card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 26px;
  display: flex;
  flex-direction: column;
}
.card h3 { font-size: 21px; font-weight: 600; color: var(--dark); margin: 0 0 10px; }
.card h4 { font-size: 18px; font-weight: 600; color: var(--dark); margin: 0 0 10px; }
.card p { font-size: 16px; color: var(--grey); }
.section--dark .card { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.18); }

.card--flat { background: transparent; border: 0; padding: 0; }

.card__icon {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--mint);
  color: var(--forest);
  margin-bottom: 18px;
  flex-shrink: 0;
}
.section--dark .card__icon { background: rgba(255, 255, 255, 0.1); color: var(--white); }

.card__list { list-style: none; padding: 0; margin: 16px 0 0; font-size: 15px; color: var(--grey); }
.card__list li { position: relative; padding-left: 18px; margin-bottom: 5px; }
.card__list li::before {
  content: "";
  position: absolute; left: 0; top: 0.6em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--bright);
}

/* Numbered process steps */
.steps { counter-reset: step; }
.step__num {
  counter-increment: step;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bright);
  color: var(--white);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 16px;
}
.step__num::before { content: counter(step); }

/* Tick list */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.checklist li { position: relative; padding-left: 30px; font-size: 16px; }
.checklist li::before {
  content: "";
  position: absolute; left: 0; top: 0.3em;
  width: 17px; height: 17px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%235FB71E' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
}
.section--dark .checklist li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.chips span {
  display: inline-block;
  padding: 7px 15px;
  border: 1px solid var(--panel-border);
  border-radius: 3px;
  background: var(--white);
  font-size: 15px;
  color: var(--grey);
}

/* Split (image beside text) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 28px; } }
.split--reverse > :first-child { order: 2; }
@media (max-width: 900px) { .split--reverse > :first-child { order: 0; } }
.split__media img { width: 100%; }

/* Contact rail on dark sections */
.contact-rail { display: grid; gap: 22px; align-content: start; margin: 0; min-width: 0; }
/* The email address is one long token; let it break rather than set a floor on
   the column width. */
.contact-row div { min-width: 0; }
.contact-row dd a { overflow-wrap: anywhere; }
.contact-row { display: flex; gap: 16px; align-items: flex-start; }
.contact-row__icon {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  flex-shrink: 0;
}
.contact-row dt { font-size: 12px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--bright); font-weight: 600; margin-bottom: 3px; }
.contact-row dd { margin: 0; font-size: 16px; color: var(--white); }
.contact-row dd a { color: var(--white); text-decoration: none; }
.contact-row dd a:hover { text-decoration: underline; }

/* Form panel (interior pages reuse the homepage field styles) */
.form-panel {
  background: var(--white);
  border: 1px solid var(--panel-border);
  border-radius: 3px;
  padding: 30px;
}
@media (max-width: 560px) { .form-panel { padding: 20px 18px; } }
.form-panel .form-grid { grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .form-panel .form-grid { grid-template-columns: 1fr; } }

/* Closing call-to-action band */
.cta-band {
  background: var(--dark);
  color: var(--white);
  border-radius: 3px;
  padding: 44px 34px;
  text-align: center;
}
.cta-band h2 { font-size: 30px; font-weight: 600; color: var(--white); margin: 0 0 14px; }
.cta-band p { font-size: 16px; color: rgba(255, 255, 255, 0.85); max-width: 58ch; margin-inline: auto; }
.cta-band .btn-row { justify-content: center; margin-top: 26px; }

/* Wide gallery tile */
.shot--wide { grid-column: span 2; aspect-ratio: 8 / 3; }
@media (max-width: 480px) { .shot--wide { grid-column: span 1; aspect-ratio: 4 / 3; } }

/* --------------------------------------------------------- 19. Reveal / motion */

/* Scoped to .js (set inline in each page's <head>) so that if scripting is
   unavailable or site.js fails to load, no content is left invisible. */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------- 20. Print */

@media print {
  .topbar, .site-header, .site-footer, .wa-float, .lightbox, form { display: none !important; }
  body { color: #000; font-size: 11pt; }
  .page-band { background: #fff !important; color: #000 !important; }
  .page-band h1 { color: #000 !important; }
  a { color: #000; text-decoration: underline; }
}