/* =========================================================
   Hobson · Garden Light theme
   Loaded after styles.css. Keeps every layout/behaviour from the base
   site and restyles it: warm ivory + sage, Playfair Display serif with
   italic accents, cinematic hero, photo service cards, one forest-green
   section (Contact).
   ========================================================= */

:root {
  /* Mostly white; soft sage for a few sections; warm ivory used sparingly */
  --ivory: #f8f6f0;
  --paper: #ffffff;
  --stone: #f8f6f0;
  --stone-soft: #f8f6f0;
  --sage-soft: #f1f6f0;
  --forest: #16301f;
  --forest-2: #1f4029;
  --lime-soft: #d4e6a5;

  --bg: #ffffff;
  --bg-soft: #f1f6f0;
  --text: #1c2620;
  --text-muted: #5d685f;
  --line: #ebeee9;

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;

  --header-h: 80px;
}
@media (min-width: 900px) { :root { --header-h: 92px; } }

body { background: var(--bg); color: var(--text); }

/* ---------- Type ---------- */
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.012em; color: var(--forest); }
h1 em, h2 em, h3 em { font-style: italic; color: var(--leaf); }
.section-head h2, .about-copy h2 { font: 400 clamp(32px, 4.6vw, 58px)/1.08 var(--serif); }
.section-head p { color: var(--text-muted); }
.eyebrow { letter-spacing: .26em; font-size: 12px; }
.eyebrow::before { height: 1px; width: 32px; }

/* ---------- Buttons ---------- */
.btn { --btn-bg: var(--forest); --btn-fg: var(--ivory); }
.btn:hover { background: var(--leaf-600); box-shadow: 0 12px 28px -12px rgba(22, 48, 31, .55); }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--forest); border-color: rgba(22, 48, 31, .35); }
.btn--outline:hover { background: var(--forest); color: var(--ivory); border-color: var(--forest); }
.btn--whatsapp { --btn-bg: #1f8f4e; --btn-fg: #fff; }
.btn--whatsapp:hover { background: #18773f; }
.link-arrow { color: var(--forest); }

/* ---------- Floating capsule header ---------- */
.site-header {
  position: fixed; top: 12px; left: 0; right: 0;
  height: auto; background: none; border: 0; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.site-header.is-scrolled { border: 0; box-shadow: none; }
.site-header .header-inner {
  height: 68px;
  width: calc(100% - 2 * var(--gutter));
  max-width: var(--container);
  margin-inline: auto;
  padding: 0 10px 0 22px;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-radius: 999px;
  box-shadow: 0 14px 34px rgba(28, 38, 32, .12);
  transition: box-shadow var(--dur) ease, background-color var(--dur) ease;
}
.site-header.is-scrolled .header-inner { background: rgba(255, 255, 255, .96); box-shadow: 0 16px 40px rgba(28, 38, 32, .18); }
/* Optical centring: the wordmark sits in the lower 70% of the logo image (the leaf tip
   fills the top), so the image is nudged up so leaf + lettering read as centred in the
   capsule, and given extra room from the rounded left end. */
.site-header .header-inner { padding-left: 30px; }
.brand img { height: 40px; transform: translateY(-4px); }
.menu-toggle { border: 0; background: transparent; border-radius: 50%; }
@media (max-width: 899px) {
  .site-header { top: 10px; }
  .site-header .header-inner { height: 60px; width: calc(100% - 20px); padding: 0 6px 0 20px; }
  .brand img { height: 36px; transform: translateY(-3px); }
}
/* ---------- Services dropdown (desktop) ---------- */
.main-nav li.has-drop { position: relative; }
.main-nav .has-drop > a { display: inline-flex; align-items: center; gap: 4px; }
.main-nav .nav-chev { width: 15px; height: 15px; stroke-width: 2.2; transition: transform var(--dur) var(--ease-out); }
.has-drop.is-open > a { background: var(--sage); color: var(--leaf-600); }
.has-drop.is-open .nav-chev { transform: rotate(180deg); }
.nav-drop {
  position: absolute; top: calc(100% + 18px); left: -28px; z-index: 70;
  width: 600px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(10px);
  transition: opacity .22s ease, transform .4s var(--ease-out), visibility 0s linear .4s;
}
.nav-drop::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px; } /* hover bridge */
.has-drop.is-open .nav-drop { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
.nav-drop__inner {
  display: grid; gap: 8px; padding: 12px;
  background: var(--paper); border-radius: 20px;
  box-shadow: 0 34px 70px -24px rgba(28, 38, 32, .38), 0 0 0 1px rgba(22, 48, 31, .06);
}
.main-nav .nav-drop a { padding: 0; border-radius: 14px; font-weight: 400; color: var(--text); background: none; }
.main-nav .nav-drop a:hover { background: var(--sage-soft); }
.main-nav .nav-drop a:focus-visible { outline: 2px solid var(--leaf); outline-offset: 0; }
.main-nav .nav-drop a.nav-drop__feature {
  display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 16px;
  padding: 10px 16px 10px 10px; background: var(--sage-soft);
}
.main-nav .nav-drop a.nav-drop__feature:hover { background: var(--sage); }
.nav-drop__feature img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; }
.nav-drop__feature small { display: block; font: 700 11px/1 var(--font-head); letter-spacing: .16em; text-transform: uppercase; color: var(--leaf-600); }
.nav-drop__feature strong { display: block; margin-top: 6px; font: 400 22px/1.15 var(--serif); color: var(--forest); }
.nav-drop__feature em { display: block; margin-top: 2px; font-style: normal; font-size: 14px; color: var(--text-muted); }
.nav-drop__feature > .icon { color: var(--forest); transition: transform var(--dur) var(--ease-out); }
.nav-drop__feature:hover > .icon { transform: translateX(4px); }
.main-nav .nav-drop__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.main-nav .nav-drop a.nav-drop__item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; }
.nav-drop__item img, .nav-drop__icon { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex: none; }
.nav-drop__icon { display: grid; place-items: center; background: var(--sage-soft); color: var(--leaf-600); }
.nav-drop__icon .icon { width: 20px; height: 20px; }
.nav-drop__item strong { display: block; font: 600 14.5px/1.25 var(--font-head); color: var(--forest); }
.nav-drop__item small { display: block; font-size: 13px; line-height: 1.3; color: var(--text-muted); }
.main-nav .nav-drop a.nav-drop__foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-top: 1px solid var(--line); border-radius: 0 0 12px 12px;
  font: 600 14px/1 var(--font-head); color: var(--forest);
}
.nav-drop__foot > span { display: inline-flex; align-items: center; gap: 10px; }
.nav-drop__foot .icon { width: 18px; height: 18px; color: var(--leaf-600); }
.nav-drop__all { color: var(--leaf-600); }
@media (prefers-reduced-motion: reduce) { .nav-drop { transition: none; } }

.mobile-menu { inset: 0; padding-top: calc(var(--header-h) + 16px); background: #fff; }

/* ---------- Hero: cinematic, centred, fades into the ivory page ---------- */
.hero {
  min-height: 100svh; margin: 0; border-radius: 0;
  align-items: center; justify-content: center; text-align: center;
  padding: calc(var(--header-h) + 32px) 0 150px;
  background: var(--forest);
}
@media (min-width: 900px) { .hero { min-height: 100svh; margin: 0; border-radius: 0; align-items: center; } }
.hero::before {
  background:
    radial-gradient(75% 62% at 50% 52%, rgba(16, 34, 22, .62) 0%, rgba(16, 34, 22, .34) 62%, rgba(16, 34, 22, .08) 100%),
    linear-gradient(180deg, rgba(22, 48, 31, .3) 0%, rgba(22, 48, 31, .16) 60%, rgba(255, 255, 255, 0) 84%, #fff 100%);
}
.hero .container { width: 100%; }
.hero__content { margin: 0 auto; max-width: 960px; padding-block: 0; }
.hero .eyebrow--light { color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.hero .eyebrow--light::before { background: var(--lime-soft); }
.hero h1 {
  color: #fff;
  font: 400 clamp(44px, 7.6vw, 108px)/1.02 var(--serif);
  letter-spacing: -0.02em;
  margin-top: 22px;
  text-shadow: 0 2px 30px rgba(10, 24, 15, .35);
}
.hero h1 .accent { display: block; font-style: italic; color: var(--lime-soft); }
.hero__lead { margin-inline: auto; color: #fff; font-weight: 500; text-shadow: 0 1px 2px rgba(10, 24, 15, .7), 0 2px 18px rgba(10, 24, 15, .6); }
.hero__ctas { justify-content: center; }
.hero .btn--lime { --btn-bg: var(--forest); --btn-fg: var(--lime); box-shadow: 0 12px 30px -10px rgba(22, 48, 31, .55); }
.hero .btn--lime:hover { background: var(--lime); color: var(--forest); }
.hero .btn--ghost-light { background: rgba(16, 34, 22, .5); border-color: rgba(255, 255, 255, .7); }
.hero .btn--ghost-light:hover { background: #fff; color: var(--forest); }
.hero__trust { justify-content: center; text-shadow: 0 1px 10px rgba(10, 24, 15, .5); }
.hero__trust .icon { color: var(--lime-soft); }

.hero__since {
  position: absolute; left: 0; right: 0; bottom: 36px; margin: 0 auto; width: fit-content;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 24px; border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font: 600 12px/1 var(--font-head); letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-muted); white-space: nowrap;
  animation: rise .9s var(--ease-out) .75s both;
}
.hero__since b { font: 400 italic 24px/1 var(--serif); letter-spacing: 0; text-transform: none; color: var(--forest); }
.hero__since i { width: 1px; height: 22px; background: var(--line); }
@media (max-width: 899px) {
  .hero { padding-bottom: calc(var(--bar-h) + 110px); }
  .hero__since { bottom: calc(var(--bar-h) + 22px); gap: 12px; padding: 10px 18px; font-size: 11px; letter-spacing: .14em; }
  .hero__since b { font-size: 20px; }
}

/* ---------- Featured service (editorial, borderless) ---------- */
.feature-card { background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; gap: var(--s-6); }
.feature-card__media { border-radius: 6px; overflow: hidden; }
.feature-card__media img { filter: saturate(.85); transition: filter .8s ease, transform 1.4s var(--ease-out); }
@media (hover: hover) { .feature-card:hover .feature-card__media img { filter: none; } }
@media (hover: none) { .feature-card__media img { filter: none; } }
.feature-card__body { padding: 0; }
@media (min-width: 900px) {
  .feature-card { gap: 72px; align-items: stretch; }
  .feature-card__media { position: relative; min-height: 520px; background: none; }
  .feature-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .feature-card__body { padding: 24px 0; align-content: center; }
}
.feature-card h3 { font: 400 clamp(32px, 3.6vw, 48px)/1.04 var(--serif); color: var(--forest); letter-spacing: -0.01em; }
.feature-card__lead { color: var(--text-muted); }
.feature-card__tag { background: rgba(255, 255, 255, .94); color: var(--forest); box-shadow: none; }
.feature-card__tag .icon { color: var(--leaf); }
.feature-card .ticks { gap: 0 28px; border-top: 1px solid var(--line); }
.feature-card .ticks li { padding: 12px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.feature-card .ticks li::before { content: ""; width: 6px; height: 6px; margin: 0; border-radius: 50%; background: var(--lime); transform: translateY(-2px); }
.feature-card__amp { background: var(--sage-soft); }

/* ---------- Service cards (editorial, like Preview A) ----------
   Photo on top, title + small number, a faint rule, short description.
   Photos rest slightly muted and come to full colour on hover (desktop only). */
.services-grid { counter-reset: svc 1; }
.services-grid > li:not(.svc-feature) { counter-increment: svc; }
.services-grid .svc-card {
  position: relative; display: block; overflow: visible;
  padding: 0; gap: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none; color: var(--text);
}
.services-grid .svc-card::before { content: none; }
.services-grid .svc-card__media {
  position: relative; inset: auto; z-index: auto;
  aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; background: var(--bg-soft);
}
.services-grid .svc-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.7) brightness(1.04);
  transition: filter .8s ease, transform 1.4s var(--ease-out);
}
.services-grid .svc-card__body { position: relative; display: block; padding: 20px 0 0; }
.services-grid .svc-card__body::before {
  content: counter(svc, decimal-leading-zero);
  position: absolute; right: 0; top: 26px;
  font: 400 16px/1 var(--serif); color: var(--leaf);
}
.services-grid .svc-card h3 {
  font: 400 24px/1.2 var(--serif); color: var(--charcoal); letter-spacing: -0.005em;
  padding: 0 44px 14px 0; border-bottom: 1px solid var(--line);
  transition: color var(--dur) ease;
}
.services-grid .svc-card p { margin-top: 12px; color: var(--text-muted); font-size: 15.5px; line-height: 1.55; }
.services-grid .svc-card__more { margin-top: 12px; color: var(--leaf-600); }
.services-grid .svc-card:active { transform: none; }
@media (hover: hover) {
  .services-grid .svc-card:hover { transform: none; box-shadow: none; }
  .services-grid .svc-card:hover .svc-card__media img { filter: none; transform: scale(1.04); }
  .services-grid .svc-card:hover h3 { color: var(--leaf-600); }
}
@media (hover: none) { .services-grid .svc-card__media img { filter: none; } }

/* Layout: airy gaps; odd last card spans full width below 1100px */
.services-grid { column-gap: 28px; row-gap: 56px; }
@media (min-width: 1100px) {
  .services-grid { column-gap: 32px; row-gap: 72px; }
  .services-grid > li:nth-child(-n+4) .svc-card h3 { font-size: 28px; }
}
@media (max-width: 1099px) {
  .services-grid > li:last-child { grid-column: 1 / -1; }
  .services-grid > li:last-child .svc-card { display: block; }
  .services-grid > li:last-child .svc-card__media { aspect-ratio: 16 / 8; }
}
@media (max-width: 639px) {
  .services-grid { grid-template-columns: 1fr 1fr; column-gap: 14px; row-gap: 32px; }
  .services-grid .svc-card { display: block; grid-template-columns: none; }
  .services-grid .svc-card__media { aspect-ratio: 4 / 5; }
  .services-grid .svc-card__body { padding-top: 12px; }
  .services-grid .svc-card__body::before { top: 16px; font-size: 13px; }
  .services-grid .svc-card h3 { font-size: 18px; padding: 0 26px 10px 0; }
  .services-grid .svc-card p { display: none; }
  .services-grid .svc-card__more { font-size: 13px; margin-top: 8px; }
}
/* Full-width rows (Pest Control, cleaning link) */
.crosslink { background: var(--paper); border: 1px solid var(--line); }
.crosslink:hover { background: var(--sage-soft); }
.crosslink h3 { font: 400 22px/1.2 var(--serif); color: var(--forest); }
.crosslink__icon { background: var(--sage-soft); }

/* ---------- Why Hobson: light sage (was dark) ---------- */
.values { background: var(--sage-soft); color: var(--text); }
.values .section-head h2 { color: var(--forest); }
.values .section-head p { color: var(--text-muted); }
.values .eyebrow--light { color: var(--leaf-600); }
.value { background: rgba(255, 255, 255, .72); border: 1px solid rgba(22, 48, 31, .08); }
@media (hover: hover) { .value:hover { background: #fff; border-color: rgba(167, 201, 87, .6); } }
.value__icon { background: #fff; color: var(--leaf-600); }
.value h3 { color: var(--forest); }
.value p { color: var(--text-muted); }

/* ---------- About ---------- */
.about-media__main { border-radius: 10px; }
.about-copy .lead { color: var(--text); }
.pillar { background: var(--paper); }
.pillar h3, .step h3 { color: var(--forest); }

/* ---------- The Hobson standard (statement band) ---------- */
.statement { background: var(--sage-soft); padding-block: var(--s-8); }
@media (min-width: 900px) { .statement { padding-block: 110px; } }
.statement__inner { display: grid; gap: var(--s-7); align-items: center; }
.statement__photo {
  width: 100%; max-width: 300px; justify-self: center;
  aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 999px 999px 10px 10px;
  box-shadow: 0 30px 60px -36px rgba(28, 38, 32, .5);
}
.statement__photo img { width: 100%; height: 100%; object-fit: cover; }
.statement__mark { width: 44px; height: auto; margin-bottom: var(--s-4); }
.statement blockquote { margin: var(--s-4) 0 0; font: 400 italic clamp(30px, 4.2vw, 54px)/1.15 var(--serif); color: var(--forest); }
.statement p { margin: var(--s-5) 0 var(--s-6); max-width: 480px; color: var(--text-muted); }
@media (min-width: 900px) {
  .statement__inner { grid-template-columns: 1fr 1.3fr; gap: 88px; }
  .statement__photo { max-width: 420px; justify-self: start; }
}

/* ---------- Process ---------- */
.process { background: var(--stone-soft); }
.step { background: var(--paper); }
.step::before { font: 400 italic 42px/1 var(--serif); color: var(--leaf); -webkit-text-stroke: 0; }
.amp { background: var(--forest); }
.amp h3 { font: 400 clamp(24px, 3vw, 32px)/1.15 var(--serif); }

/* ---------- Clients, gallery, FAQ, careers ---------- */
.chip { background: var(--paper); }
.clients { background: var(--paper); border: 1px solid var(--line); }
.clients h3 { font: 400 26px/1.2 var(--serif); color: var(--forest); }
.gallery figure { border-radius: 10px; }
.gallery figcaption { background: rgba(22, 48, 31, .62); font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 15px; }
.faq { background: var(--paper); }
.faq[open] .faq__toggle { background: var(--forest); }
.careers { background: var(--paper); }
.careers h2 { font: 400 clamp(26px, 3.4vw, 38px)/1.15 var(--serif); }

/* ---------- Contact: the one forest-green section ---------- */
.contact { background: var(--forest); }
.contact h2 { color: var(--ivory); font: 400 clamp(32px, 4.8vw, 56px)/1.08 var(--serif); }
.contact h2 em { color: var(--lime-soft); }
.contact-item { background: rgba(255, 255, 255, .06); }
.form-card { background: var(--paper); border-radius: 14px; }
.form-card__title { font: 400 26px/1.2 var(--serif); color: var(--forest); }
.field input, .field select, .field textarea { background: #fff; border-color: #d9d3c4; }

/* ---------- Footer (stone) ---------- */
.site-footer { background: var(--stone); }

/* ---------- Persistent enquiry ---------- */
.action-bar { background: rgba(251, 250, 246, .96); border-top-color: var(--line); }
.action-bar a, .action-bar button { border-color: var(--line); background: var(--paper); }
.action-bar .ab-quote { background: var(--forest); border-color: var(--forest); color: var(--ivory); }
.fab--quote { background: var(--forest); }

/* ---------- Dialogs ---------- */
dialog.sheet { background: var(--paper); }
.sheet__head h2 { font: 400 24px/1.2 var(--serif); color: var(--forest); }
.svc-sheet .tagline { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 20px; color: var(--leaf-600); }

/* ---------- Cleaning page ---------- */
.page-hero { background: var(--sage-soft); padding-top: var(--header-h); }
.page-hero h1 { font: 400 clamp(36px, 5.6vw, 64px)/1.06 var(--serif); }
.clean-group__head h2 { font: 400 clamp(24px, 3vw, 32px)/1.15 var(--serif); color: var(--forest); }
.clean-item { background: var(--paper); }

/* =========================================================
   Upright headings in one colour (matches Site 1)
   No italic accents; hero headline all white; section headings charcoal.
   ========================================================= */
h1 em, h2 em, h3 em,
.statement blockquote,
.hero__since b,
.step::before,
.gallery figcaption,
.svc-sheet .tagline,
.nav-drop__feature strong { font-style: normal; }

h1, h2,
.section-head h2, .about-copy h2, .values .section-head h2,
.feature-card h3, .crosslink h3, .clients h3, .careers h2,
.clean-group__head h2, .page-hero h1, .form-card__title, .sheet__head h2,
.statement blockquote, .nav-drop__feature strong, .pillar h3, .step h3, .value h3 { color: var(--charcoal); }
h1 em, h2 em, h3 em { color: inherit; }

.hero h1, .hero h1 .accent { color: #fff; }
.hero h1 .accent { font-style: normal; }
.contact h2, .contact h2 em { color: #fff; }

/* Service pop-up tagline back to Site 1 style */
.svc-sheet .tagline { font-family: var(--font-head); font-weight: 700; font-size: 17px; color: var(--leaf-600); }

/* =========================================================
   Airy refresh: more white space, softer/fewer borders,
   white backgrounds with soft sage (and one warm ivory band)
   ========================================================= */
.section { padding-block: 88px; }
@media (min-width: 900px) { .section { padding-block: 136px; } }
.section-head { margin-bottom: 56px; }
@media (min-width: 900px) { .section-head { margin-bottom: 72px; } }
.section-head p { max-width: 460px; }

/* Rows under the service grid */
.crosslink { background: var(--sage-soft); border: 0; }
.crosslink:hover { background: #e8f0e7; }
.crosslink__icon { background: #fff; }
.svc-row { margin-top: 64px; }
.svc-row + .crosslink { margin-top: 14px; }

/* Why Hobson: soft sage, borderless white cards */
.values { background: var(--sage-soft); }
.values::after { opacity: .04; }
.value { background: #fff; border: 0; box-shadow: 0 1px 2px rgba(28, 38, 32, .04); }
@media (hover: hover) { .value:hover { background: #fff; border: 0; box-shadow: 0 18px 40px -24px rgba(28, 38, 32, .25); } }
.value__icon { background: var(--sage-soft); }

/* About */
.pillar { background: var(--sage-soft); border: 0; }
.pillar__icon { box-shadow: none; }
.about-media__badge { box-shadow: 0 18px 40px -20px rgba(28, 38, 32, .3); }

/* The Hobson standard: the one warm-ivory band */
.statement { background: var(--ivory); }
.statement__photo { box-shadow: 0 30px 60px -40px rgba(28, 38, 32, .45); }

/* How we work: white, borderless steps */
.process { background: #fff; }
.step { background: var(--sage-soft); border: 0; }

/* Clients */
.chip { background: var(--sage-soft); border: 0; }
@media (hover: hover) { .chip:hover { background: #e8f0e7; } }
.clients { background: var(--sage-soft); border: 0; }
.client-list li { border-bottom-color: rgba(28, 38, 32, .07); }

/* Gallery: same muted-to-colour hover */
.gallery img { filter: saturate(.75) brightness(1.03); transition: filter .8s ease, transform 1.4s var(--ease-out); }
@media (hover: hover) { .gallery figure:hover img { filter: none; } }
@media (hover: none) { .gallery img { filter: none; } }

/* FAQ: soft sage section, borderless white items */
#faq { background: var(--sage-soft); }
.faq { background: #fff; border: 0; }
.faq[open] { box-shadow: 0 18px 40px -28px rgba(28, 38, 32, .3); }
.faq__toggle { background: var(--sage-soft); }

/* Careers */
.careers { background: var(--sage-soft); border: 0; }

/* Contact */
.contact-item { border-color: rgba(255, 255, 255, .06); }
.form-card { background: #fff; }
.field input, .field select, .field textarea { border-color: #e2e6e0; }

/* Footer: warm ivory, no hard top line */
.site-footer { background: var(--ivory); border-top: 0; }
.footer-bottom { border-top-color: rgba(28, 38, 32, .07); }

/* Persistent enquiry bar */
.action-bar { background: rgba(255, 255, 255, .97); border-top-color: rgba(28, 38, 32, .06); }
.action-bar a, .action-bar button { border-color: #e4e8e2; background: #fff; }
.action-bar .ab-quote { border-color: var(--forest); }

/* Dialogs + cleaning page */
dialog.sheet { background: #fff; }
.sheet__head, .svc-sheet__foot { border-color: var(--line); }
.page-hero { background: var(--sage-soft); }
.clean-item { background: var(--sage-soft); border: 0; }
@media (hover: hover) { .clean-item:hover { background: #fff; box-shadow: 0 18px 40px -26px rgba(28, 38, 32, .28); } }
.clean-groups { gap: 80px; }

/* Why Hobson: bold forest-green section (matches Contact, the site's signature dark colour) */
.values { background: var(--forest); color: #fff; }
.values::after { opacity: .06; }
.values .section-head h2, .values .section-head h2 em { color: #fff; }
.values .section-head p { color: rgba(255, 255, 255, .78); }
.values .eyebrow--light { color: var(--lime-300); }
.values .eyebrow--light::before { background: var(--lime); }
.value { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); box-shadow: none; }
@media (hover: hover) { .value:hover { background: rgba(255, 255, 255, .07); border-color: rgba(167, 201, 87, .4); box-shadow: none; transform: translateY(-3px); } }
.value__icon { background: rgba(167, 201, 87, .14); color: var(--lime); }
.value h3 { color: #fff; }
.value p { color: rgba(255, 255, 255, .76); }

/* Main buttons on forest-green bands: lime text with a fine lime outline (fills lime on hover) */
.amp .btn--lime { --btn-bg: transparent; --btn-fg: var(--lime); border-color: rgba(167, 201, 87, .7); box-shadow: none; }
.amp .btn--lime:hover { background: var(--lime); color: var(--forest); border-color: var(--lime); box-shadow: none; }

/* Floating "Request Quote" button: white so it stays visible over both white and forest-green sections */
.fab--quote { background: #fff; color: var(--forest); box-shadow: 0 10px 30px rgba(20, 28, 39, .22), 0 0 0 1px rgba(22, 48, 31, .08); }
.fab--quote .icon { color: var(--leaf-600); }
.fab--quote:hover { box-shadow: 0 14px 34px rgba(20, 28, 39, .28), 0 0 0 1px rgba(22, 48, 31, .1); }

/* "Est. 2014 · 12+ years of care" pill: modern sans figures instead of the serif */
.hero__since b {
  font: 800 20px/1 var(--font-head); font-style: normal;
  letter-spacing: -0.01em; text-transform: none;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--forest);
}
.hero__since { gap: 14px; }
@media (max-width: 899px) { .hero__since b { font-size: 17px; } }

/* Years-of-care stats: centred in the hero column as two balanced stats on frosted glass */
.hero__since {
  position: static; margin: 40px auto 0; width: fit-content;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0;
  padding: 16px 6px; border-radius: 20px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #fff; text-transform: none; letter-spacing: 0; font: inherit;
  white-space: nowrap; animation: none;
}
.hero__since > div { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 150px; padding: 0 26px; }
.hero__since b {
  font: 800 26px/1 var(--font-head); letter-spacing: -0.01em;
  font-variant-numeric: lining-nums tabular-nums; color: #fff;
  text-shadow: 0 1px 10px rgba(10, 24, 15, .35);
}
.hero__since > div > span { font: 600 11px/1 var(--font-head); letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .82); }
.hero__since i { width: 1px; height: 40px; background: rgba(255, 255, 255, .35); }
.hero { padding-bottom: 120px; }
@media (max-width: 899px) {
  .hero { padding-bottom: calc(var(--bar-h) + 48px); }
  .hero__since { margin-top: 28px; padding: 12px 4px; }
  .hero__since > div { min-width: 118px; padding: 0 16px; gap: 5px; }
  .hero__since b { font-size: 22px; }
  .hero__since > div > span { font-size: 10px; letter-spacing: .14em; }
  .hero__since i { height: 34px; }
}

/* Readability over the pale paving: darker glass panel + shading extended lower */
.hero__since { background: rgba(16, 34, 22, .55); border-color: rgba(255, 255, 255, .22); }
.hero::before {
  background:
    radial-gradient(80% 70% at 50% 58%, rgba(16, 34, 22, .62) 0%, rgba(16, 34, 22, .36) 62%, rgba(16, 34, 22, .1) 100%),
    linear-gradient(180deg, rgba(22, 48, 31, .3) 0%, rgba(22, 48, 31, .18) 70%, rgba(255, 255, 255, 0) 90%, #fff 100%);
}

/* Years of care: sleek single-line pill, back at the bottom of the hero, centred */
.hero__since {
  position: absolute; left: 0; right: 0; bottom: 40px; margin: 0 auto; width: fit-content;
  display: flex; align-items: center; gap: 18px;
  padding: 10px 22px; border-radius: 999px;
  background: rgba(16, 34, 22, .5);
  border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font: 600 11px/1 var(--font-head); letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .78); white-space: nowrap;
  animation: rise .9s var(--ease-out) .75s both;
}
.hero__stat { display: inline-flex; align-items: baseline; gap: 8px; }
.hero__since b {
  font: 700 16px/1 var(--font-head); letter-spacing: 0; text-transform: none;
  font-variant-numeric: lining-nums tabular-nums; color: #fff; text-shadow: none;
}
.hero__since i { width: 1px; height: 14px; background: rgba(255, 255, 255, .35); }
.hero { padding-bottom: 150px; }
@media (max-width: 899px) {
  .hero { padding-bottom: calc(var(--bar-h) + 100px); }
  .hero__since { bottom: calc(var(--bar-h) + 24px); gap: 12px; padding: 9px 16px; font-size: 10px; letter-spacing: .12em; }
  .hero__since b { font-size: 14px; }
  .hero__stat { gap: 6px; }
}

/* Bottom bar on very small phones: keep "Request Quote" on one line */
.action-bar .ab-quote { white-space: nowrap; }
@media (max-width: 359px) { .action-bar .ab-quote .icon { display: none; } }

/* Hero sign-off: years pill with "Landscape care · Singapore" beneath, centred at the bottom */
.hero__foot {
  position: absolute; left: 0; right: 0; bottom: 56px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  animation: rise .9s var(--ease-out) .75s both;
}
.hero__foot .hero__since { position: static; margin: 0; animation: none; }
.hero__place {
  display: inline-flex; align-items: center; gap: 14px;
  font: 600 11px/1 var(--font-head); letter-spacing: .32em; text-transform: uppercase;
  color: rgba(255, 255, 255, .88); text-shadow: 0 1px 10px rgba(10, 24, 15, .5);
  padding-left: .32em; /* balances the trailing letter-spacing so the text sits truly centred */
}
.hero__place::before, .hero__place::after { content: ""; width: 28px; height: 1px; background: rgba(255, 255, 255, .55); }
.hero h1 { margin-top: 0; }
.hero { padding-bottom: 190px; }
/* shorter white fade so the sign-off stays on the photo */
.hero::before {
  background:
    radial-gradient(80% 70% at 50% 58%, rgba(16, 34, 22, .62) 0%, rgba(16, 34, 22, .36) 62%, rgba(16, 34, 22, .1) 100%),
    linear-gradient(180deg, rgba(22, 48, 31, .3) 0%, rgba(22, 48, 31, .24) 75%, rgba(22, 48, 31, .2) 94%, rgba(255, 255, 255, 0) 96%, #fff 100%);
}
@media (max-width: 899px) {
  .hero { padding-bottom: calc(var(--bar-h) + 150px); }
  .hero__foot { bottom: calc(var(--bar-h) + 30px); gap: 12px; }
  .hero__place { font-size: 10px; letter-spacing: .26em; padding-left: .26em; gap: 10px; }
  .hero__place::before, .hero__place::after { width: 20px; }
}

/* Sign-off tweaks: brighter label; less empty space under it on phones */
.hero__place { color: rgba(255, 255, 255, .95); }
.hero__place::before, .hero__place::after { background: rgba(255, 255, 255, .65); }
@media (max-width: 899px) {
  .hero { padding-bottom: 150px; }
  .hero__foot { bottom: 44px; }
}

/* Sign-off label without side lines */
.hero__place::before, .hero__place::after { content: none; }

/* Headline: "Beautiful Landscapes." on one line, "Consistent Care." on the next */
.hero__content { max-width: 1200px; }
.hero__lead { max-width: 600px; }
.hero h1 { font-size: clamp(38px, 6.4vw, 100px); }
.hero__line { display: block; }
@media (min-width: 700px) { .hero__line { white-space: nowrap; } }

/* Service cards: no numbering */
.services-grid .svc-card__body::before { content: none; }
.services-grid .svc-card h3 { padding-right: 0; }

/* Plain, non-curly ampersand inside serif headings */
.amp-glyph { font-family: "Cormorant Garamond", var(--serif); font-style: normal; font-weight: 500; font-size: 1.08em; letter-spacing: 0; line-height: 1; }

/* The Hobson standard: cleaner photo frame (no arch), crop focused on the green wall */
.statement__inner { align-items: center; }
.statement__photo {
  border-radius: 6px; aspect-ratio: 4 / 4.8; max-width: 340px;
  box-shadow: 0 34px 70px -46px rgba(28, 38, 32, .5);
}
.statement__photo img { object-position: 74% 50%; transition: transform 1.6s var(--ease-out); }
@media (hover: hover) { .statement__photo:hover img { transform: scale(1.03); } }
.statement blockquote { margin-top: var(--s-4); }
@media (min-width: 900px) {
  .statement__inner { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 96px; }
  .statement__photo { max-width: 440px; }
}
@media (max-width: 899px) {
  .statement__inner { gap: var(--s-6); }
  .statement__photo { max-width: none; aspect-ratio: 4 / 3; }
  .statement__photo img { object-position: 70% 60%; }
}

/* The Hobson standard: photo-free, centred quote with botanical line-art ferns */
.statement {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: 120px;
  background:
    radial-gradient(60% 70% at 50% 50%, rgba(230, 240, 228, .9) 0%, rgba(248, 246, 240, 0) 70%),
    var(--ivory);
}
@media (min-width: 900px) { .statement { padding-block: 160px; } }
.statement::before, .statement::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 300px; height: 640px; top: 50%;
  background: url("../img/fern.svg") no-repeat center / contain;
  opacity: .28;
}
.statement::before { left: -40px; transform: translateY(-50%) rotate(-14deg); }
.statement::after { right: -40px; transform: translateY(-50%) scaleX(-1) rotate(-14deg); }
.statement .statement__inner { display: block; text-align: center; max-width: 820px; margin-inline: auto; }
.statement__copy { display: flex; flex-direction: column; align-items: center; }
.statement .eyebrow { justify-content: center; }
.statement .eyebrow::after { content: ""; width: 32px; height: 1px; background: var(--lime); }
.statement blockquote { font-size: clamp(32px, 4.6vw, 60px); line-height: 1.12; margin: var(--s-5) 0 0; }
.statement p { margin: var(--s-5) auto var(--s-6); max-width: 520px; }
@media (max-width: 899px) {
  .statement::before, .statement::after { width: 170px; height: 360px; opacity: .2; }
  .statement::before { left: -70px; }
  .statement::after { right: -70px; }
}
@media (max-width: 899px) { .statement { padding-block: 88px; } }

/* The Hobson standard: Option 3 "Leaf Shadow" - dappled canopy shadows on ivory (replaces the ferns) */
.statement { background: #f8f6f0; }
.statement::before, .statement::after {
  content: ""; position: absolute; pointer-events: none; opacity: 1;
  width: auto; height: auto; top: 0; right: 0; bottom: 0; left: 0; transform: none;
}
/* fine paper grain */
.statement::before {
  z-index: -1; opacity: .5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35  0 0 0 0 .32  0 0 0 0 .25  0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* dappled leaf shadows, lighter behind the text */
.statement::after {
  z-index: -1; top: -40px; right: -40px; bottom: -40px; left: -40px;
  background: url("../img/leaf-shadow.webp") center / cover no-repeat;
  mix-blend-mode: multiply; opacity: .09; transform: rotate(-4deg) scale(1.1);
  -webkit-mask-image: linear-gradient(100deg, #000 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.15) 60%, #000 100%);
          mask-image: linear-gradient(100deg, #000 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.15) 60%, #000 100%);
}
@media (max-width: 899px) { .statement::before, .statement::after { width: auto; height: auto; opacity: .5; } .statement::after { opacity: .09; left: -40px; right: -40px; } }

/* Why Hobson cards: subtle pop (frosted sheen at rest; lift, lime edge, glow + top accent line on hover) */
.values .value {
  position: relative; overflow: hidden;
  background: linear-gradient(155deg, rgba(255, 255, 255, .075) 0%, rgba(255, 255, 255, .02) 55%, rgba(167, 201, 87, .04) 100%);
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: transform .5s var(--ease-out), border-color .4s ease, box-shadow .5s ease, background .5s ease;
}
.values .value::before {
  content: ""; position: absolute; top: 0; left: 24px; height: 3px; width: 0; border-radius: 0 0 3px 3px; z-index: 1;
  background: var(--lime); transition: width .55s var(--ease-out);
}
.values .value::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(120% 80% at 0% 0%, rgba(167, 201, 87, .14) 0%, rgba(167, 201, 87, 0) 60%);
  transition: opacity .5s ease;
}
@media (hover: hover) {
  .values .value:hover {
    transform: translateY(-6px);
    border-color: rgba(167, 201, 87, .45);
    background: linear-gradient(155deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .03) 55%, rgba(167, 201, 87, .07) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 26px 50px -28px rgba(0, 0, 0, .55), 0 0 0 1px rgba(167, 201, 87, .12);
  }
  .values .value:hover::before { width: 56px; }
  .values .value:hover::after { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .values .value, .values .value::before { transition: none; } }

/* Why Hobson: very slight extra contrast for a premium feel */
.values { background: linear-gradient(180deg, #17331f 0%, #142c1c 100%); }
.values .value {
  background:
    linear-gradient(155deg, rgba(255, 255, 255, .095) 0%, rgba(255, 255, 255, .03) 45%, rgba(0, 0, 0, .06) 100%);
  border-color: rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 40px -30px rgba(0, 0, 0, .5);
}
@media (hover: hover) {
  .values .value:hover {
    background: linear-gradient(155deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .04) 45%, rgba(167, 201, 87, .05) 100%);
  }
}

/* Why Hobson cards: Option C "Moss Glow" (lighter green gradient + permanent fine lime top line) */
.values .value {
  background: linear-gradient(160deg, #2c5236 0%, #1f3e29 100%);
  border-color: rgba(167, 201, 87, .2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 20px 44px -28px rgba(0, 0, 0, .6);
}
.values .value::before { width: 44px; height: 2px; border-radius: 0 0 2px 2px; }
.values .value p { color: rgba(255, 255, 255, .84); }
@media (hover: hover) {
  .values .value:hover { background: linear-gradient(160deg, #31593c 0%, #22432d 100%); }
  .values .value:hover::before { width: 72px; }
}

/* Clients: box matches the left column exactly (top of label to bottom of chips) */
@media (min-width: 960px) {
  #clients .sectors-wrap { align-items: stretch; }
  #clients .clients { display: flex; flex-direction: column; padding: 36px 36px 28px; }
  #clients .clients > p { margin-bottom: 20px; }
  #clients .client-list { flex: 1; align-content: space-between; grid-auto-rows: auto; }
  #clients .client-list li { padding: 10px 0; }
}

/* Gallery captions: no box; soft shade from the bottom + white caption with a short lime rule */
.gallery figure { isolation: isolate; }
.gallery figure::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(10, 22, 14, .62) 0%, rgba(10, 22, 14, .28) 45%, rgba(10, 22, 14, 0) 100%);
}
.gallery figcaption {
  z-index: 2; left: 20px; right: 20px; bottom: 18px; max-width: none; width: auto;
  display: flex; align-items: center; gap: 12px;
  padding: 0; border-radius: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  font: 500 19px/1.2 var(--serif); font-style: normal; letter-spacing: .005em; color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}
.gallery figcaption::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--lime); flex: none; transition: width .5s var(--ease-out); }
@media (hover: hover) { .gallery figure:hover figcaption::before { width: 38px; } }
@media (min-width: 900px) { .gallery figure:nth-child(1) figcaption { font-size: 24px; left: 28px; bottom: 26px; } }
@media (max-width: 599px) { .gallery figcaption { font-size: 15px; left: 12px; right: 12px; bottom: 12px; gap: 8px; } .gallery figcaption::before { width: 14px; } }
@media (max-width: 599px) { .gallery figcaption { font-size: 13px; gap: 7px; } .gallery figure::after { height: 55%; background: linear-gradient(0deg, rgba(10, 22, 14, .7) 0%, rgba(10, 22, 14, .3) 50%, rgba(10, 22, 14, 0) 100%); } }

/* Gallery captions: small lime leaf instead of the line */
.gallery figcaption::before {
  width: 16px; height: 16px; border-radius: 0; flex: none;
  background: var(--lime);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z'/%3E%3Cpath d='M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z'/%3E%3Cpath d='M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .5s var(--ease-out);
}
@media (hover: hover) { .gallery figure:hover figcaption::before { width: 16px; transform: rotate(-12deg) scale(1.08); } }
@media (min-width: 900px) { .gallery figure:nth-child(1) figcaption::before { width: 19px; height: 19px; } .gallery figure:nth-child(1):hover figcaption::before { width: 19px; } }
@media (max-width: 599px) { .gallery figcaption::before { width: 13px; height: 13px; } }

/* Swapped button states (client request) */
.amp .btn--lime { --btn-bg: var(--lime); --btn-fg: var(--forest); background: var(--lime); color: var(--forest); border-color: var(--lime); }
@media (hover: hover) {
  .amp .btn--lime:hover { background: transparent; color: var(--lime); border-color: rgba(167, 201, 87, .7); box-shadow: none; }
}
.careers .btn--outline { --btn-bg: var(--forest); --btn-fg: var(--ivory); background: var(--forest); color: var(--ivory); border-color: var(--forest); }
@media (hover: hover) {
  .careers .btn--outline:hover { background: transparent; color: var(--forest); border-color: rgba(22, 48, 31, .35); box-shadow: none; }
}

/* Richer hovers (replace the outline hovers) */
.amp .btn--lime, .careers .btn--outline { transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .35s ease, transform .35s var(--ease-out); }
@media (hover: hover) {
  .amp .btn--lime:hover {
    background: #bcd877; color: var(--forest); border-color: #bcd877;
    box-shadow: 0 0 0 4px rgba(167, 201, 87, .18), 0 14px 30px -12px rgba(167, 201, 87, .55);
    transform: translateY(-2px);
  }
  .careers .btn--outline:hover {
    background: var(--leaf-600); color: #fff; border-color: var(--leaf-600);
    box-shadow: 0 14px 30px -14px rgba(38, 122, 51, .6);
    transform: translateY(-2px);
  }
  .careers .btn--outline:hover .icon { color: var(--lime-300); }
}
.amp .btn--lime:active, .careers .btn--outline:active { transform: translateY(0) scale(.98); }

/* Why Hobson cards: Option 2 "Quiet Panels" with slight, luxurious contrast (replaces all earlier card effects) */
.values .value,
.values .value:hover {
  transform: none;
  border-radius: 16px;
  padding: 30px 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .075) 0%, rgba(255, 255, 255, .05) 100%);
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: none;
}
.values .value::before, .values .value::after { content: none; }
.values .value { transition: background .35s ease, border-color .35s ease; }
@media (hover: hover) {
  .values .value:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .07) 100%);
    border-color: rgba(167, 201, 87, .22);
  }
}
.values .value__icon {
  width: auto; height: auto; margin: 0 0 18px; border-radius: 0;
  background: none; box-shadow: none; color: var(--lime);
  justify-content: flex-start;
}
.values .value__icon .icon { width: 26px; height: 26px; stroke-width: 1.5; }
.values .value h3 { margin-bottom: 8px; }
.values .value p { color: rgba(255, 255, 255, .76); }
@media (max-width: 719px) {
  .values .value { display: block; padding: 24px 22px; }
  .values .value__icon { margin-bottom: 14px; }
}

/* Section labels: Option 6 "Brand Leaf" – tiny three-tone logo leaf instead of the line (all labels) */
.eyebrow { gap: 10px; }
.eyebrow::before {
  content: ""; flex: none; width: 15px; height: 18px; border-radius: 0;
  background: url("../img/leaf.png") center / contain no-repeat;
}
.eyebrow--light::before { background-color: transparent; filter: brightness(1.15); }
.statement .eyebrow::after { content: none; }
.values .eyebrow--light::before, .hero .eyebrow--light::before, .contact .eyebrow--light::before { width: 15px; height: 18px; background: url("../img/leaf.png") center / contain no-repeat; filter: brightness(1.15); }

/* Request Quote: vertical side tab on the right edge (desktop only).
   Text reads top-to-bottom with the icon below it; lime fill so it is found at first glance.
   The button is rotated as a whole (Safari ignores writing-mode on buttons). */
.side-quote { display: none; }
@media (min-width: 900px) {
  .side-quote {
    position: fixed; right: 0; top: 50%; z-index: 61;
    display: inline-flex; align-items: center; gap: 14px;
    transform-origin: 100% 0; transform: rotate(90deg) translateX(50%);
    padding: 14px 24px 15px; white-space: nowrap;
    border: 0; border-radius: 0 0 12px 12px; /* bottom corners = the side facing the page */
    background: var(--lime); color: var(--forest);
    font: 700 14px/1 var(--font-head); letter-spacing: .04em;
    box-shadow: 0 8px 26px rgba(20, 28, 39, .22);
    cursor: pointer;
    transition: background-color .3s ease, color .3s ease, padding .35s var(--ease-out), opacity .3s ease, box-shadow .3s ease;
  }
  .side-quote .icon { width: 19px; height: 19px; transform: rotate(-90deg); color: currentColor; }
  .side-quote:hover { background: var(--forest); color: var(--lime); padding-bottom: 21px; box-shadow: 0 10px 30px rgba(20, 28, 39, .3); }
  .side-quote:focus-visible { outline: 3px solid var(--forest); outline-offset: 3px; }
  body.contact-in-view .side-quote { opacity: 0; pointer-events: none; }
  .fab-stack .fab--quote { display: none; }
}

/* Section labels on dark sections: light version of the brand leaf (charcoal leaf → ivory) so all three leaves show */
.eyebrow--light::before,
.values .eyebrow--light::before, .hero .eyebrow--light::before, .contact .eyebrow--light::before {
  background: url("../img/leaf-light.png") center / contain no-repeat; filter: none;
}

/* Section labels on dark sections: Option D – logo leaf silhouette with a green-to-lime gradient */
.eyebrow--light::before,
.values .eyebrow--light::before, .hero .eyebrow--light::before, .contact .eyebrow--light::before {
  width: 15px; height: 18px; filter: none;
  background: linear-gradient(200deg, #c6dc8f 0%, #a7c957 45%, #5f9e46 100%);
  -webkit-mask: url("../img/leaf.png") center / contain no-repeat;
          mask: url("../img/leaf.png") center / contain no-repeat;
}

/* Cleaning Services + Pest Control: one row on desktop (cleaning first), stacked on phones */
.svc-extras { display: grid; gap: 14px; margin-top: 64px; }
.svc-extras > .crosslink, .svc-extras > .svc-row + .crosslink { margin: 0; }
@media (min-width: 900px) {
  .svc-extras { grid-template-columns: 1fr 1fr; }
  .svc-extras > .crosslink {
    grid-template-columns: auto 1fr; grid-template-rows: 1fr auto;
    align-items: start; gap: 14px 20px; padding: 28px 30px;
  }
  .svc-extras .crosslink__icon { grid-row: span 2; }
  .svc-extras .crosslink .link-arrow { grid-column: 2; justify-self: start; }
}

/* "Years of Experience" is longer: tighten the hero pill on narrow phones so it stays on screen */
@media (max-width: 379px) {
  .hero__since { gap: 9px; padding: 8px 13px; font-size: 9.5px; letter-spacing: .07em; }
  .hero__since b { font-size: 13px; }
  .hero__stat { gap: 5px; }
}

/* Sign-off: "Landscape Maintenance Services" with "Singapore" stacked beneath */
.hero__place { flex-direction: column; gap: 9px; text-align: center; }
.hero__place > span + span { font-size: .92em; color: rgba(255, 255, 255, .78); }/* "Established since 2014" is longer: extra tightening on the smallest phones */
@media (max-width: 359px) {
  .hero__since { gap: 7px; padding: 8px 10px; font-size: 9px; letter-spacing: .04em; }
  .hero__since b { font-size: 12.5px; }
}

/* Sectors ("Who we work with"): even two-column grid of equal tiles instead of a ragged wrap */
#clients .chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 10px; }
#clients .chip {
  display: flex; align-items: center; gap: 12px; min-height: 52px;
  padding: 12px 18px; border-radius: 999px; line-height: 1.3;
}
#clients .chip .icon { flex: none; }
@media (max-width: 479px) {
  #clients .chips { gap: 8px; }
  #clients .chip { gap: 9px; min-height: 48px; padding: 10px 12px; font-size: 14.5px; }
  #clients .chip .icon { width: 15px; height: 15px; }
}
@media (max-width: 359px) {
  #clients .chip { gap: 7px; padding: 9px 10px; font-size: 13.5px; }
  #clients .chip .icon { width: 14px; height: 14px; }
}
/* Phone bottom bar – Option A "App-style": Call and WhatsApp show a small icon above a short
   label and are sized to their content, so "WhatsApp" is no longer squeezed against its edges;
   Request Quote takes the remaining width. Same layout on every phone size. */
:root { --bar-h: 72px; }
.action-bar { grid-template-columns: auto auto 1fr; gap: 8px; }
.action-bar .ab-call, .action-bar .ab-wa {
  flex-direction: column; gap: 3px; min-height: 54px; min-width: 48px; padding: 6px 14px;
  font-size: 11.5px; letter-spacing: .01em; line-height: 1.2;
}
.action-bar .ab-call .icon, .action-bar .ab-wa .icon { width: 20px; height: 20px; }
.action-bar .ab-quote { min-height: 54px; padding: 0 14px; }
@media (max-width: 359px) {
  .action-bar { gap: 6px; }
  .action-bar .ab-call, .action-bar .ab-wa { padding: 6px 10px; }
}

/* Phones: keep the hero sign-off (years pill + "Landscaping Services / Singapore") above the fixed
   bottom bar on first load – it used to sit partly underneath it. Tied to the bar height. */
@media (max-width: 899px) {
  .hero { padding-bottom: calc(var(--bar-h) + 130px); }
  .hero__foot { bottom: calc(var(--bar-h) + 18px); }
}