/* ArborLily — arborlily.co.za
   Plain CSS. No build step, no external dependencies.
   Palette and layout matched to the original Wix site. */

/* Barlow Semi Condensed, self-hosted from fonts/ — no CDN, no Google Fonts.
   Stands in for the original's DIN Neuzeit Grotesk, which is commercially
   licensed. Latin subset only; SIL OFL 1.1, see fonts/OFL.txt.
   Weight 600 is the only weight shipped. Measured against the reference
   captures at native resolution it sits within 2% of the original's stroke
   weight, where 700 is 15% too heavy and 400 nearly 30% too light. */
@font-face {
  font-family: "Barlow Semi Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/barlow-semi-condensed-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Brand */
  --orange:      #FE7C00;
  --orange-deep: #FB5400;
  --brown:       #332219;
  --blue:        #02619C;
  --blue-mid:    #27609C;
  /* Components, so the sage can be used at partial alpha. Keep --sage derived
     from these rather than writing the hex twice. */
  --sage-rgb:    157 179 159;
  --sage:        rgb(var(--sage-rgb));

  /* Derived surfaces */
  --olive-head:  #72702A;
  --panel:       #D1DBD1;
  --peach:       #FDF1E8;
  --lilac:       #F1EDFE;
  --text:        #31221A;
  --text-soft:   #4A3A30;

  --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-head: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;

  --shell: 1080px;
  --pad: clamp(1.25rem, 4vw, 2.5rem);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font-family: var(--font-body);
  /* 20px base, per the Wix editor, but eased down on narrow screens: a flat
     20px yields about 28 characters per line at phone width, well under a
     readable measure. Wix would have carried its own mobile size here. */
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--blue); text-underline-offset: 3px; }
a:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 2px; }

.shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--pad); }

.skip { position: absolute; left: -9999px; background: var(--brown); color: #fff; padding: 0.75rem 1.25rem; z-index: 100; }
.skip:focus { left: 1rem; top: 1rem; }

/* ── Masthead ─────────────────────────────────────────── */
.masthead {
  position: sticky; top: 0; z-index: 50;
  background: #fff;
  border-bottom: 1px solid #ece7e2;
}
/* The masthead is tall enough to contain the logo outright — measured off the
   original at 128px against a 106px logo, so roughly 11px clear above and
   below. Nothing crosses into the band: the logo does not overhang. */
.masthead-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 8rem; flex-wrap: wrap;
}
/* logo.png is trimmed to its artwork, so this width is the width you see. */
.brand img { width: clamp(150px, 16vw, 182px); display: block; }

.nav { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(0.85rem, 2.2vw, 2rem); list-style: none; margin: 0; padding: 0; }
.nav a {
  font-size: 1.05rem; color: var(--text); text-decoration: none;
  padding-block: 0.3rem; border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--blue); border-bottom-color: var(--orange); }

/* ── Gradient bands (hero + Our Brand) ────────────────── */
.band {
  position: relative;
  padding-block: clamp(3rem, 7vw, 5rem);
  --band-gradient: linear-gradient(100deg,
      #D89951 0%, #DFB360 8%, #DFBF65 16%, #C9C076 24%,
      #D3D9A7 32%, #D1DEB1 45%, #D0DDB2 60%, #C3DBB5 70%,
      #ACD2BC 80%, #87B4BF 90%, #527CB9 100%);
  background-image: var(--band-gradient);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* watermark-banner.png carries the gradient and the leaf watermark together, so
   above 700px it replaces the CSS gradient outright rather than layering over
   it. It is 16:9, and the band is far wider than that, so `cover` crops it top
   and bottom — which is what the original does, the canopy and roots running off
   the edges of the band.

   It stays desktop-only. At phone widths the band is taller than it is wide, so
   `cover` would crop the banner to its middle third: no watermark, and none of
   the gold or blue ends of the gradient either, just a flat green field. Below
   700px the CSS gradient above is used on its own instead. */
@media (min-width: 700px) {
  .band {
    background-image: url("graphics/watermark-banner.png");
    background-position: left center;
    background-size: cover;
  }
}
.band-inner { max-width: var(--shell); }

.band h1 {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 2rem;          /* 32px, per the Wix editor */
  line-height: 1.28;
  color: var(--blue-mid);
  margin: 0 0 2.25rem;
}
.brand-h {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  color: #fff;
  margin: 0 0 1.75rem;
}
.band-copy { max-width: 46rem; color: var(--text); margin: 0 0 1.75rem; }
.band-action { margin: 0; }
.band .band-action { text-align: left; }

/* Pills */
.pill {
  display: inline-block;
  padding: 0.6rem 1.6rem;
  border-radius: 999px;
  font-size: 1rem;
  letter-spacing: 0.09em;
  text-decoration: none;
  color: #fff;
  transition: background 0.18s ease;
}
.pill-orange { background: var(--orange); }
.pill-orange:hover { background: var(--orange-deep); }
.pill-olive  { background: #3F6B4E; }
.pill-olive:hover { background: #32573F; }
.pill-blue   { background: var(--blue); }
.pill-blue:hover { background: #024B7A; }

/* ── Sections ─────────────────────────────────────────── */
/* Top padding is deliberately tiny. The tree's canopy rises well above the
   heading and does the optical spacing on its own, so the original starts the
   tree about 10px below the band edge — measured, not guessed. Padding-bottom
   keeps its full value, which is what separates one section from the next. */
.section {
  position: relative;
  padding-top: 10px;
  padding-bottom: clamp(2.75rem, 6vw, 4.5rem);
}

/* The original divides these sections with a wave, which is a Wix built-in
   rather than an asset we hold. It is deliberately not reproduced: these
   sections sit on plain white. See the note in CLAUDE.md before adding
   anything here — a straight diagonal was tried and rejected. */
.section-why { background: #fff; }
.section-services { background: #fff; }
.section-team { background: linear-gradient(170deg, var(--lilac), #FBEFF1); }
/* The 10px top padding on .section exists because a tree canopy rises above
   the heading and does the optical spacing. Contact has no tree, so it needs
   its top padding back — matching the bottom, which centres the card in the
   section rather than leaving it sitting high. */
.section-contact {
  background: var(--peach);
  padding-top: clamp(2.75rem, 6vw, 4.5rem);
}

/* The tree belongs to the heading composition rather than sitting beside it as
   an icon: the canopy rises above the cap line, the roots drop below the
   baseline, and the root sweep tucks under the first letter. Aligning on the
   baseline does the vertical work — a replaced element's baseline is its bottom
   margin edge, so the negative bottom margin is exactly how far the roots hang
   below the text. Both offsets are expressed against the tree's own width so
   the relationship survives the clamp.
   graphics/tree.png is trimmed to its artwork, so width here is the width of
   the tree you actually see.

   The heading is centred on the tree: canopy above and roots below the text by
   equal amounts.

   Do NOT try to do this with `align-items: baseline` plus a negative
   margin-bottom on the tree. A replaced element's flex baseline is its bottom
   margin edge, but Chrome pins the image's border-box bottom to the text
   baseline and treats the negative margin as shrinking the item's outer box —
   so the margin changes the layout height without moving the image against the
   text at all. That was the bug: the arithmetic said 50%, the render was 87%.

   `align-items: center` needs no arithmetic. The h2 has line-height 1, so its
   box centre and the cap band's centre are within about 3px of each other at
   60px — under 2% of the tree's height, and it scales by itself. */
.section-title {
  --head-size: clamp(2.25rem, 1.5rem + 3.5vw, 3.75rem);
  --tree-w:    clamp(69px, 46px + 6.7vw, 115px);
  display: flex; align-items: center; gap: 0; margin-bottom: 1.75rem;
}
.tree {
  width: var(--tree-w); flex: none;
  /* The original sets the tree's right edge 1px clear of the heading's first
     letter — adjacent, not overlapping. Measured on a 98px-wide tree, so it is
     carried across as a proportion. This was previously -0.08, which pulled the
     leaves 9px on top of the letter. */
  margin-right: calc(var(--tree-w) * 0.01);
}
.section-title h2 {
  position: relative;
  font-family: var(--font-head);
  font-weight: 600;
  /* 60px is the Wix spec; it overflows a phone-width shell, so it is the
     ceiling of a clamp rather than a flat size. */
  font-size: var(--head-size);
  color: var(--olive-head);
  margin: 0;
  line-height: 1;
}

/* ── Why ArborLily prose ──────────────────────────────── */
.prose { max-width: 46rem; }
.prose h3 {
  font-weight: 400;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  letter-spacing: 0.02em;
  color: var(--blue-mid);
  margin: 1.9rem 0 0.4rem;
}
.prose h3:first-child { margin-top: 0; }
.prose p { margin: 0 0 0.6rem; }
.fees { margin: 0.4rem 0 0; padding-left: 2.5rem; list-style: none; }
.fees li::before { content: "- "; }

/* ── Services ─────────────────────────────────────────── */
.services-lede { max-width: 52rem; margin: 0 0 2.25rem; }

/* `align-items: stretch` is the grid default and is what makes the three
   panels finish level despite their text wrapping to different lengths. It was
   `start`, which sized each panel to its own content. Stretch applies per row,
   so at the 2-column and 1-column breakpoints each row still levels up on its
   own. */
.cols { display: grid; gap: 1.25rem; align-items: stretch; }
@media (min-width: 700px)  { .cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px)  { .cols { grid-template-columns: repeat(3, 1fr); } }

.col {
  list-style: none; margin: 0;
  padding: 1.6rem 1.4rem;
  border-radius: 14px;
}

/* The three columns are not three colours — they are --sage at three
   opacities over white, stepping lighter left to right. Sampled off the
   original: rgb(208,219,209), rgb(228,234,229), rgb(245,247,245), which solve
   to alpha 0.478 / 0.274 / 0.104 against #9DB39F, agreeing to within 0.005 on
   every channel. Written as alpha rather than three hexes so the relationship
   stays visible. */
.col:nth-child(1) { background: rgb(var(--sage-rgb) / 0.478); }
.col:nth-child(2) { background: rgb(var(--sage-rgb) / 0.274); }
.col:nth-child(3) { background: rgb(var(--sage-rgb) / 0.104); }
.col li { margin-bottom: 1.35rem; }
.col li:last-child { margin-bottom: 0; }
.col h3 {
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--blue-mid);
  margin: 0 0 0.25rem;
}
.col p { margin: 0; font-size: 1.05rem; line-height: 1.5; color: var(--text); }

/* ── Team ─────────────────────────────────────────────── */
.team-strap { font-weight: 600; margin: 0 0 1.25rem; }
.team-intro { max-width: 54rem; margin: 0 0 2.5rem; }

.people { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 780px) { .people { grid-template-columns: 1fr 1fr; } }

.person img { width: 100%; max-width: 380px; border-radius: 2px; margin-bottom: 1.5rem; }
.role { margin: 0; font-size: 1.05rem; color: var(--text-soft); }
.person h3 {
  font-weight: 700; font-size: 1.35rem; color: var(--blue-mid);
  margin: 0 0 1.1rem;
}
.person p { margin: 0 0 1rem; }

.li {
  display: inline-grid; place-items: center;
  width: 1.85rem; height: 1.85rem;
  border-radius: 50%;
  background: #111; color: #fff;
  font-weight: 700; font-size: 0.95rem;
  text-decoration: none;
}
.li:hover { background: var(--blue); }

/* ── Contact ──────────────────────────────────────────── */
.contact-shell { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.leaf-pair { width: clamp(72px, 9vw, 120px); flex: none; }

.contact-card {
  background: var(--panel);
  border: 1px solid #b9c6b9;
  border-radius: 10px;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  max-width: 30rem; width: 100%;
}
.contact-card h2 {
  font-family: var(--font-head);
  font-weight: 600; font-size: 2rem;
  color: var(--olive-head);
  margin: 0 0 0.4rem;
}
.contact-note { margin: 0 0 1.75rem; color: var(--text); }

.contact-details { margin: 0 0 1.75rem; }
.contact-details dt {
  font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-soft); margin-bottom: 0.15rem;
}
.contact-details dd { margin: 0 0 1.1rem; font-size: 1.2rem; }
.contact-details dd a { color: var(--blue); }
.contact-action { margin: 0; }

/* ── Footer ───────────────────────────────────────────── */
footer {
  background: linear-gradient(90deg, #FBE7DC 0%, #F2EDE6 45%, #E4E5E0 100%);
  padding-block: 2rem;
}
.footer-inner {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(1.5rem, 6vw, 5rem); flex-wrap: wrap;
}
.footer-logo { width: 117px; }   /* logo.png is trimmed; this holds its old visual size */
.copyright { margin: 0; font-size: 1rem; color: var(--text); }