/* ==========================================================================
   Guimaras Wonder's Farm — page-specific layout: home, story-split, steps,
   Our Story (/about/) and Contact (/contact/)
   ========================================================================== */

/* ---- Hero -------------------------------------------------------------- */

.gwf-hero { position: relative; }
.gwf-hero__media {
  position: relative;
  height: 60vh;
  min-height: 480px;
  max-height: 640px;
  overflow: hidden;
}
.gwf-hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* Solid darkening overlay, per Figma (node 4:21): 35% #173B2A over the photo
   for legibility. Confined to .gwf-hero__media's own box/stacking, so it
   paints below .gwf-hero__card (a later, separately-positioned sibling). */
.gwf-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(23, 59, 42, 0.35);
  pointer-events: none;
}
/* The card overlays the photo (Figma: "cream card overlay") -- it needs to sit
   fully inside .gwf-hero__media's box, not straddle its bottom edge. A fixed
   negative margin-top on the card (the previous approach) only matched one
   exact card height; real card content (three-line H1, two-line lead) came out
   taller than that guess, so roughly half the card rendered below the photo
   instead of on it. Anchoring the whole .gwf-wrap to the media's bottom edge
   via absolute positioning keeps the card inside the photo regardless of how
   many lines its content wraps to. */
.gwf-hero .gwf-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 0 var(--gwf-gutter) 40px;
  pointer-events: none;
}
.gwf-hero__card {
  position: relative;
  pointer-events: auto;
  max-width: 480px;
  background: var(--gwf-bone);
  border-radius: var(--gwf-radius-lg);
  padding: 40px;
  box-shadow: var(--gwf-shadow-lg);
}
.gwf-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
/* Figma's hero H1 (node 4:26) is line-height 61.6px at 56px (~1.1) -- tighter
   than the global h1/h2/h3/h4 rule's 1.2 in base.css. Scoped to just this
   heading rather than touching the global rule, which every heading uses. */
.gwf-hero__card h1 { line-height: 1.1; }

@media (max-width: 700px) {
  .gwf-hero__media { height: 46vh; min-height: 320px; }
  /* The card is taller than a phone-width hero photo can hold, so it cannot
     be contained on the photo the way the desktop card is -- forcing that
     would push the card's top past the photo's top edge, behind the nav.
     Below the overlap threshold the card returns to normal document flow,
     directly under the photo, with only a small cosmetic tuck-under so the
     card still reads as connected to the image instead of a hard cut. */
  .gwf-hero .gwf-wrap {
    position: static;
    display: block;
    padding: 0 var(--gwf-gutter);
    margin-top: -32px;
  }
  .gwf-hero__card { max-width: none; padding: 28px; }
}

/* ---- Split: media + copy, two-up -------------------------------------- */

.gwf-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.gwf-split--reverse { direction: rtl; }
.gwf-split--reverse > * { direction: ltr; }
/* Our Story's two prose splits (Figma 11:450 / 11:482) are not 1:1 — the photo
   column is 481 against 687 of copy, 80px apart. */
.gwf-split--narrow-media {
  grid-template-columns: minmax(0, 481fr) minmax(0, 687fr);
  gap: 80px;
}
/* The homeland split (11:586) is near enough even — 584/584, 48px apart. */
.gwf-split--homeland { gap: 48px; align-items: center; margin-top: 32px; }
.gwf-split__media img { border-radius: var(--gwf-radius-lg); width: 100%; height: auto; }
/* Where Figma gives the photo a fixed box rather than letting it set its own
   height, the box is the ratio and the photo covers it. Both files are already
   cropped to these ratios at build time, so `cover` re-crops nothing — it is
   here so the box survives a future photo swap. */
.gwf-split__media--portrait img { aspect-ratio: 481 / 560; object-fit: cover; }
.gwf-split__media--landscape img { aspect-ratio: 584 / 440; object-fit: cover; }
.gwf-img-stretch { object-fit: fill; }
/* Figma's mango-photo/story-photo nodes have a baked-in brightness boost
   (+0.21 / +0.08) that the plain <img> lacks. Rough CSS approximation. */
.gwf-img-mango-photo { filter: brightness(1.08); }
.gwf-img-story-photo { filter: brightness(1.02); }
.gwf-card--plain {
  background: var(--gwf-white);
  border-radius: var(--gwf-radius-card);
  padding: 32px;
  box-shadow: var(--gwf-shadow);
}

@media (max-width: 820px) {
  .gwf-split { grid-template-columns: 1fr; gap: 32px; }
  .gwf-split--reverse { direction: ltr; }
}

/* ---- Checklist ----------------------------------------------------------*/

.gwf-checklist { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 14px; }
.gwf-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--gwf-small);
  line-height: 1.5;
}
.gwf-checklist__icon {
  flex-shrink: 0;
  margin-top: 3px;
}

/* ---- Section head: heading + action side by side ------------------------*/

.gwf-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.gwf-section-head h2 { margin-bottom: 0; }

/* ---- Numbered steps -------------------------------------------------------*/

.gwf-steps {
  list-style: none; margin: 40px 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}
.gwf-steps li {
  background: var(--gwf-white);
  border-radius: var(--gwf-radius-card);
  padding: 24px;
  box-shadow: var(--gwf-shadow);
}
.gwf-steps__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.gwf-steps__n {
  font-family: var(--gwf-display);
  font-size: 2.5rem;   /* 40px — Figma farm-to-door step numerals */
  line-height: 1.1;
  color: var(--gwf-gold);
  display: block;
}
.gwf-steps__icon { flex-shrink: 0; margin-top: 6px; }
.gwf-steps h3 { margin-bottom: 8px; font-size: 1.25rem; }  /* 20px per Figma */

/* ---- Standards band (dark ground, icon tiles) ----------------------------*/

.gwf-standards {
  list-style: none; margin: 40px 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.gwf-standards li {
  background: rgba(247, 243, 232, 0.06);
  border: 1px solid rgba(247, 243, 232, 0.15);
  border-radius: var(--gwf-radius-card);
  padding: 24px;
  text-align: center;
}
.gwf-standards .gwf-icon-badge { margin: 0 auto 16px; }
.gwf-standards h3 { margin-bottom: 4px; font-size: 1.25rem; color: var(--gwf-white); }
.gwf-standards p { color: rgba(247, 243, 232, 0.7); }

/* ---- Quote ----------------------------------------------------------------*/

.gwf-quote {
  margin: 24px 0;
  padding: 20px 24px;
  background: var(--gwf-sand);
  border-radius: var(--gwf-radius-card);
}
.gwf-quote p { font-style: italic; font-size: 1.0625rem; margin-bottom: 8px; }
.gwf-quote cite { font-size: var(--gwf-small); font-style: normal; color: var(--gwf-sage); font-weight: 700; }

/* ---- Full-bleed CTA band ---------------------------------------------------*/

/* The band's height is a FLOOR, not a fixture. It used to be a fixed height on
   the photo, with the text absolutely positioned over it -- so the photo, not
   the words, decided how much room the words got. On a 320-412px phone the
   heading (33.75px) and its 18px sub-line no longer fitted the 340px the photo
   allowed, and because nothing here clips, the text simply spilled out of both
   ends of the band: the first line of the heading rendered above the photo as
   white-on-cream, and the Contact Us button was cut in half by the band's
   bottom edge and overlapped the footer.
   Now the text is the in-flow grid item and the photo is the absolute layer
   behind it, so the band is `max(Figma's height, whatever the text needs)` and
   can never be too small for its own contents at any width. */
.gwf-cta {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 500px;   /* Figma final-cta (4:227) is 1440x500; products-page
                          farm-story-banner (10:140) is 1440x504 */
}
.gwf-cta__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* The overlay and the copy both need an explicit stacking order now that the
   photo is positioned too -- ::before is generated as the FIRST child, so
   without these it would paint underneath the photo it is meant to dim. */
.gwf-cta::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(23, 59, 42, 0.55);
  z-index: 1;
}
.gwf-cta__content {
  position: relative;
  z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 24px var(--gwf-gutter);
}
/* Figma holds the CTA text block to a 720px column (node 4:228), which is what
   wraps the heading onto two balanced lines inside the 500px band. */
.gwf-cta__content h2 { color: var(--gwf-white); max-width: 720px; }
/* Figma sets the CTA sub-line in bone (#F7F3E8), not pure white, so it sits
   half a step back from the heading instead of competing with it. */
.gwf-cta__content p { color: var(--gwf-bone); }
.gwf-cta__content .gwf-lead { max-width: 45rem; }
.gwf-cta__content .gwf-hero__actions { justify-content: center; }

@media (max-width: 700px) {
  /* Floor only -- the band grows past this whenever the copy needs more, which
     it does on every phone narrower than about 420px. */
  .gwf-cta { min-height: 340px; }
}

/* ==========================================================================
   Our Story — /about/  (Figma frame `our-story-page`, node 11:430)
   ========================================================================== */

/* ---- Photo page-hero (11:444) ---------------------------------------------
   Not the home hero. That one is a photo band with a cream card hanging off
   the bottom of it; this is a single 520px band with the copy sitting on the
   photograph, left-aligned inside the normal column. Built the same way the
   CTA band is -- copy is the in-flow grid item, photo is the absolute layer
   behind it -- so the band is `max(Figma's height, whatever the copy needs)`
   and can never crop its own words on a narrow phone. */
.gwf-pagehero {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 520px;      /* Figma hero (11:444) is 1440x520 */
  /* The band owns the gutter, exactly as .gwf-band does, so the .gwf-wrap
     inside it resolves to the same column every other section sits in. It used
     to live on the content box instead, which put the hero copy through the
     gutter twice: once as .gwf-wrap's own auto margins and again as padding
     inside them. Padding does not move an absolutely positioned child -- the
     photo and the wash are laid out against this element's padding box, so both
     still cover the band edge to edge. */
  padding-inline: var(--gwf-gutter);
}
.gwf-pagehero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* 45% #173B2A, per the hero frame's second fill. Needs its own z-index: a
   ::before is generated as the first child, so without one it would paint
   underneath the photograph it is there to dim. */
.gwf-pagehero::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(23, 59, 42, 0.45);
  z-index: 1;
}
.gwf-pagehero__content {
  position: relative;
  z-index: 2;
  /* This element is also a .gwf-wrap, i.e. `max-width: 1280px` +
     `margin-inline: auto`, and that pairing only lands on the normal column
     when the box is asked to fill its parent first. Inside a plain block band
     it is: a block box's auto width IS its container's width, so the max-width
     caps it at 1280 and the auto margins split the remaining 160 into the 80px
     gutter every other section on the site starts at.
     Here the parent is `display: grid`. A grid item's auto width is shrink-to-
     fit, and auto margins suppress the `justify-self: stretch` that would
     otherwise size it, so the box collapsed to its widest content -- the
     720px lead plus 2x48px padding, 816px -- and the auto margins then centred
     THAT. The hero copy sat 280px right of the header logo it should line up
     under. Asking for the width explicitly restores the block behaviour: 100%
     of the grid area, clamped to 1280, centred by the same auto margins.
     Below 1280 + gutters there is nothing left to clamp, so phones are
     untouched -- full width, text at the 20px gutter. */
  width: 100%;
  padding-block: 64px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;              /* Figma hero-content itemSpacing */
}
/* The flex gap already spaces these; their own margins would double it. */
.gwf-pagehero__content > * { margin-bottom: 0; }
.gwf-pagehero__content h1 { color: var(--gwf-white); line-height: 1.1; max-width: 720px; }
/* Figma sets this subhead at 20px/32 (node 11:449), a step above the 18px
   --gwf-lead the home hero uses. */
.gwf-pagehero__content .gwf-lead { color: var(--gwf-bone); max-width: 720px; font-size: 1.25rem; line-height: 1.6; }

@media (max-width: 700px) {
  .gwf-pagehero { min-height: 380px; }
}
/* 560px, not 700px: this is where .gwf-band narrows its own gutter, and the
   hero has to turn at the same width or it stops lining up with the section
   under it for the 140px in between. */
@media (max-width: 560px) {
  .gwf-pagehero { padding-inline: var(--gwf-gutter-sm); }
}

/* ---- Values cards (11:463) -------------------------------------------------
   Three cards on the page's one dark ground: 6% white fill, 1px white hairline,
   and a 56px gold disc holding a 24px line icon. */
.gwf-values {
  list-style: none; margin: 40px 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
}
.gwf-values li {
  /* Figma node 11:464: white fill at 5.9%, white 1px stroke at 18.4%. */
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  padding: 32px;
}
.gwf-values__icon {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--gwf-gold);
  margin-bottom: 20px;
}
.gwf-values__icon svg { width: 24px; height: 24px; }
/* The sprout ships with Figma's sage stroke because that is the colour it has
   in the home process band. Inside the gold disc it needs the dark green the
   other two already carry. A CSS rule beats an SVG presentation attribute, so
   this reaches the exported path without a second copy of the icon. */
.gwf-values__icon svg path { stroke: var(--gwf-green); }
.gwf-values h3 { color: var(--gwf-white); margin-bottom: 8px; }

/* ---- Journey timeline (11:496) --------------------------------------------
   Seven dated entries on one horizontal track: the year, then a dot with a
   hairline running out to the right of it, then the milestone. The rule is per
   entry rather than one line behind the row, which is how Figma draws it and
   which means it keeps working when the row wraps on a narrow screen. */
.gwf-timeline {
  list-style: none; margin: 48px 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 32px 24px;
}
.gwf-timeline li { display: block; }
.gwf-timeline__year {
  display: block;
  font-family: var(--gwf-display);
  font-size: 1.75rem;      /* 28px */
  line-height: 1.25;
  color: var(--gwf-green);
  margin-bottom: 8px;
}
.gwf-timeline__rule {
  display: block;
  height: 8px;
  margin-bottom: 16px;
  /* The 8px dot, then the 2px rule centred on it. One element, two backgrounds,
     so there is no extra markup per entry. */
  background:
    radial-gradient(circle 4px at 4px 4px, var(--gwf-green) 0 4px, transparent 4px) left center / 8px 8px no-repeat,
    linear-gradient(var(--gwf-green), var(--gwf-green)) left 8px center / 100% 2px no-repeat;
}
.gwf-timeline__title {
  font-family: var(--gwf-body);
  font-weight: 700;
  font-size: 1rem;         /* 16px */
  color: var(--gwf-green);
  margin: 0 0 8px;
}
.gwf-timeline__body {
  font-size: var(--gwf-small);
  line-height: 1.4;
  margin: 0;
  color: var(--gwf-ink);
  opacity: 0.85;
}

/* ---- The people (11:565) ---------------------------------------------------
   Reuses the product-card shell. Figma's card is a 24px radius with a 1px
   hairline and no shadow, and the photo runs the full width at 384x300. */
.gwf-cards--people {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 24px;
  margin-top: 40px;
}
.gwf-cards--people .gwf-card {
  border-radius: var(--gwf-radius-lg);
  border: 1px solid var(--gwf-hairline);
  box-shadow: none;
}
.gwf-card__photo { overflow: hidden; }
.gwf-card__photo img { width: 100%; aspect-ratio: 384 / 300; object-fit: cover; }
.gwf-cards--people .gwf-card__body { padding: 24px; gap: 12px; }

/* ==========================================================================
   Contact — /contact/  (Figma frame `contact-page`, node 11:698)
   ========================================================================== */

/* ---- Text-only page head (11:713) ---------------------------------------- */

.gwf-pagehead { text-align: center; padding-bottom: 40px; }
.gwf-pagehead .gwf-lead { max-width: 720px; margin-inline: auto; }

/* ---- Form column + information column (11:718) -----------------------------
   640 / 480 with 80px between, which is Figma's split of the 1200 column. */
.gwf-contact {
  display: grid;
  grid-template-columns: minmax(0, 640fr) minmax(0, 480fr);
  gap: 80px;
  align-items: start;
  padding-bottom: 40px;
}

.gwf-formcard {
  background: var(--gwf-white);
  border-radius: var(--gwf-radius-lg);
  padding: 48px;
  box-shadow: var(--gwf-shadow);
}
.gwf-formcard h2 { margin-bottom: 8px; }
.gwf-formcard > .gwf-small { margin-bottom: 0; }

/* Submission feedback. Both states are announced (role=status / role=alert in
   the template) as well as coloured, so the outcome is not carried by hue
   alone. */
.gwf-formnote {
  margin: 24px 0 0;
  padding: 14px 18px;
  border-radius: var(--gwf-radius);
  border-left: 4px solid;
  font-size: 0.9375rem;
  max-width: none;
}
.gwf-formnote--ok  { background: var(--gwf-sand); border-color: var(--gwf-sage); color: var(--gwf-green); }
.gwf-formnote--bad { background: var(--gwf-error-bg); border-color: var(--gwf-error); color: var(--gwf-error); }

.gwf-form { margin-top: 32px; }
.gwf-field { display: block; margin: 0 0 20px; max-width: none; }
.gwf-field label {
  display: block;
  font-weight: 700;
  font-size: var(--gwf-body-sz);
  color: var(--gwf-green);
  margin-bottom: 8px;
}
.gwf-field input,
.gwf-field select,
.gwf-field textarea {
  display: block;
  width: 100%;
  padding: 16px;
  border: 1.5px solid var(--gwf-hairline);
  border-radius: var(--gwf-radius);
  background: var(--gwf-white);
  font-family: var(--gwf-body);
  font-size: 0.9375rem;   /* 15px */
  line-height: 1.2;
  color: var(--gwf-ink);
}
.gwf-field input,
.gwf-field select { height: 52px; }
.gwf-field textarea { height: 140px; resize: vertical; line-height: 1.5; }
.gwf-field input::placeholder,
.gwf-field textarea::placeholder { color: var(--gwf-ink); opacity: 0.45; }
.gwf-field input:focus-visible,
.gwf-field select:focus-visible,
.gwf-field textarea:focus-visible { border-color: var(--gwf-green); }
/* Native select arrows differ wildly between platforms; Figma draws one 16px
   chevron. Swapped for the exported glyph, inlined so it needs no HTTP request
   and no extra element inside the label. */
.gwf-field--select select {
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23173B2A' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.gwf-field.is-invalid input,
.gwf-field.is-invalid textarea { border-color: var(--gwf-error); }
.gwf-field__err {
  display: block;
  margin-top: 6px;
  font-size: var(--gwf-small);
  font-weight: 700;
  color: var(--gwf-error);
}
.gwf-form__submit { width: 100%; margin-top: 4px; }

/* ---- Contact information rows (11:750) ---------------------------------- */

.gwf-contactinfo { padding: 24px 0; }
.gwf-contactinfo h2 { margin-bottom: 32px; }

.gwf-inforows { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.gwf-inforows li { display: flex; align-items: center; gap: 20px; }
.gwf-inforows__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(23, 59, 42, 0.08);
}
.gwf-inforows__icon svg { width: 24px; height: 24px; }
.gwf-inforows__label {
  display: block;
  font-weight: 700;
  font-size: var(--gwf-body-sz);
  color: var(--gwf-sage);
  margin-bottom: 4px;
}
.gwf-inforows__value {
  display: block;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--gwf-green);
}
a.gwf-inforows__value { text-decoration: none; }
a.gwf-inforows__value:hover { text-decoration: underline; }
.gwf-inforows__note {
  display: block;
  margin-top: 4px;
  font-size: var(--gwf-small);
  color: var(--gwf-ink);
  opacity: 0.75;
}

/* ---- Social block (11:775) ---------------------------------------------- */

.gwf-social { margin-top: 48px; }
.gwf-social__list {
  list-style: none; margin: 16px 0 12px; padding: 0;
  display: flex; gap: 16px;
}
.gwf-social__list li {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--gwf-white);
  border: 1.5px solid var(--gwf-hairline);
}
.gwf-social__list svg { width: 20px; height: 20px; }

/* ---- Visit card over the island photo (11:784) --------------------------- */

.gwf-mapband {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 480px;
  padding: 48px var(--gwf-gutter);
}
.gwf-mapband__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.gwf-mapband::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(23, 59, 42, 0.50);
  z-index: 1;
}
.gwf-mapband__card {
  position: relative;
  z-index: 2;
  width: min(596px, 100%);
  background: var(--gwf-white);
  border-radius: var(--gwf-radius-lg);
  /* Figma pads this card 40px all round, leaving a 516px inner width, and its
     heading is a single 516px line. Our webfont measures that same string at
     522px, so 40px of side padding wraps a heading Figma does not wrap and
     grows the card from 210 to 250 tall. 32px on the sides restores both. */
  padding: 40px 32px;
  text-align: center;
  box-shadow: var(--gwf-shadow-lg);
}
.gwf-mapband__icon { display: block; margin: 0 auto 16px; }
.gwf-mapband__icon svg { width: 32px; height: 32px; }
/* `text-wrap: balance` is the global heading default and it split this one onto
   two lines inside a box wide enough for one, which is not how Figma sets it
   (node 11:787 is a single 516px line). */
.gwf-mapband__card h2 { margin-bottom: 16px; text-wrap: pretty; }
.gwf-mapband__card p { margin: 0 auto; max-width: 42ch; }

@media (max-width: 700px) {
  .gwf-mapband { min-height: 380px; padding-left: var(--gwf-gutter-sm); padding-right: var(--gwf-gutter-sm); }
  .gwf-mapband__card { padding: 28px; }
}

/* ---- FAQ accordion (11:794) ------------------------------------------------
   Real <details> elements, so the questions collapse without a line of
   JavaScript. They ship open because that is the state Figma draws: every
   answer is visible in the mockup. Figma draws a plus on every item even in
   that expanded state, which is a component-state slip in the mockup rather
   than a design intent: a plus on an already-open panel invites the click that
   closes it. So the exported plus rotates 45 degrees into an x while the item
   is open and sits as a plus when it is closed — the honest reading of the one
   glyph Figma gives us, and the only visual departure from the frame here. */
.gwf-faq { display: grid; gap: 16px; margin-top: 40px; }
.gwf-faq__item {
  background: var(--gwf-white);
  border: 1px solid var(--gwf-hairline);
  border-radius: 16px;
  padding: 24px;
}
.gwf-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;         /* Firefox */
}
.gwf-faq__item summary::-webkit-details-marker { display: none; }
.gwf-faq__q {
  font-family: var(--gwf-display);
  font-size: 1.125rem;      /* 18px */
  line-height: 1.25;
  color: var(--gwf-green);
}
.gwf-faq__marker {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--gwf-bone);
  transition: transform var(--gwf-dur) var(--gwf-ease);
}
.gwf-faq__item[open] .gwf-faq__marker { transform: rotate(45deg); }
.gwf-faq__a {
  margin: 16px 0 0;
  font-size: 0.9375rem;     /* 15px */
  line-height: 1.6;
  max-width: none;
}

/* ---- Responsive -----------------------------------------------------------*/

@media (max-width: 1000px) {
  .gwf-contact { grid-template-columns: 1fr; gap: 40px; }
  .gwf-contactinfo { padding-top: 0; }
}

@media (max-width: 560px) {
  .gwf-formcard { padding: 28px 20px; }
  .gwf-values li { padding: 24px; }
  .gwf-inforows li { gap: 14px; }
  .gwf-inforows__icon { width: 48px; height: 48px; }
  .gwf-faq__item { padding: 20px; }
}