/* ============ Round 13: the contact page (31 Oct 2026, owner: "find really nice contact pages on the internet and reimplement ours") ============
   Looked at: Brightland (one warm statement and the e-mail address set large, nothing else), Linear ("How can we help?", then the ways in, each with one line of what it
   is for), Patagonia (the common answers before the form), Allbirds (the plain form: four boxes with the labels under them, nothing about who answers or when: what not to do),
   and the usual advice (several channels, say when the answer comes, route by topic, keep the form short on a phone, show the address).
   What it became: a head with the promise in the page's own voice (no frosted glass over a photograph), the topic chosen first as big choices, ONE white sheet for the
   form, the ways to reach us beside it with the WhatsApp number and the address set large and bare on the page (no stack of cards with arrow discs), "maybe we already answered
   it" under both, then the map with the words beside it. Few surfaces, no lines.
   Markup: Front/Blocks/Parts.php (head), RequestFormSection.php (form, side, quick answers), ContactMap.php, Forms/RequestForm.php (the form itself, unchanged).
   1 head   2 the grid   3 the form sheet   4 the side   5 quick answers   6 the map   7 phones */

/* ---- 1. head --------------------------------------------------------------------------------------------------------------------------------------- */
.ct-head { padding: 6px 0 10px; }
.ct-head-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; gap: clamp(20px, 4vw, 64px); margin-top: 22px; }
.ct-head-text { padding-bottom: 0; }
.ct-head-text h1 { margin: 0; color: var(--green-ink, #1d3a2c); font: 600 clamp(46px, 6.4vw, 92px) / .98 var(--font-display), var(--font-sans), sans-serif; letter-spacing: -.035em; }
.ct-head-text h1 .accent { color: inherit; }
.ct-lede { max-width: 31em; margin: 22px 0 0; color: var(--ink-2, #232c26); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; }
.ct-head-photo {
  position: relative; isolation: isolate; height: clamp(250px, 25vw, 340px); overflow: hidden; border-radius: 34px;
  background: url("../img/photo/lawn-stripes.webp") 50% 58% / cover no-repeat, #5d7f3f;
}
.ct-person { position: absolute; right: 9%; bottom: 0; z-index: 1; width: auto; height: 94%; filter: drop-shadow(0 20px 14px rgba(10, 24, 14, .36)); }

/* ---- 2. the grid ----------------------------------------------------------------------------------------------------------------------------------- */
.ct-main { padding: clamp(22px, 3vw, 40px) 0 clamp(20px, 4vw, 56px); }
.ct-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; gap: clamp(28px, 5vw, 84px); }
.ct-grid.pg-single { grid-template-columns: minmax(0, 760px); justify-content: center; }

/* ---- 3. the form sheet ---------------------------------------------------------------------------------------------------------------------------- */
@layer fi-pre {
  .ct-grid > .c-form-card { padding: clamp(24px, 3.2vw, 46px) !important; border: 0 !important; border-radius: 34px !important; background: #fff !important; box-shadow: var(--elev-1) !important; }
  .ct-grid .pg-form-title { margin: 0 !important; font: 600 clamp(28px, 2.6vw, 36px) / 1.1 var(--font-display), var(--font-sans), sans-serif !important; letter-spacing: -.02em !important; color: var(--green-ink, #1d3a2c) !important; }
  .ct-grid .c-form-card .lede { margin: 8px 0 0 !important; color: var(--text-muted, #5a645d) !important; font-size: 17px !important; }

  /* the topic comes first and is a real choice: big tiles with a round marker, the chosen one filled */
  .ct-grid .c-topics { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 10px !important; margin: 26px 0 10px !important; padding: 0 !important; border: 0 !important; }
  .ct-grid .pg-topics-legend { margin: 0 0 12px !important; padding: 0 !important; color: var(--ink-2, #232c26) !important; font: 600 15px / 1.3 var(--font-sans), sans-serif !important; }
  .ct-grid .c-topic {
    display: flex !important; align-items: center; gap: 12px !important; height: auto !important; min-height: 56px; padding: 0 18px !important; border-radius: 18px !important;
    background: rgba(75, 52, 37, .06) !important; box-shadow: none !important; color: var(--ink-2, #232c26) !important; font: 600 15.5px / 1.25 var(--font-sans), sans-serif !important; cursor: pointer;
    transition: background-color .3s var(--ease-soft), color .3s var(--ease-soft) !important;
  }
  .ct-grid .c-topic::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(75, 52, 37, .42); transition: box-shadow .3s var(--ease-soft), background .3s var(--ease-soft); }
  .ct-grid .c-topic.is-active { background: var(--green-ink, #1d3a2c) !important; color: #fff !important; }
  .ct-grid .c-topic.is-active::before { background: radial-gradient(circle, var(--green-ink, #1d3a2c) 0 4.5px, #fff 5.5px); box-shadow: none; }
  .ct-grid .c-topic:has(input:focus-visible) { outline: 3px solid var(--focus, #2f7a55); outline-offset: 3px; }

  /* fields: white, one clear border (WCAG 1.4.11), rounded; the label above */
  .ct-grid .c-field > label, .ct-grid .c-field label:first-child { margin: 0 0 7px !important; color: var(--ink-2, #232c26) !important; font: 600 14.5px / 1.3 var(--font-sans), sans-serif !important; }
  .ct-grid .c-field :is(input, select, textarea) { min-height: 52px !important; border-radius: 14px !important; background: #fff !important; }
  .ct-grid .c-field textarea { min-height: 150px !important; padding-top: 14px !important; }

  .ct-grid .c-submit-row { margin-top: 26px !important; gap: 18px 22px !important; }
  .ct-grid .c-submit { min-height: 56px !important; padding: 0 32px !important; border-radius: 999px !important; font-size: 16px !important; }
}

/* ---- 4. the side: the ways to reach us, bare on the page ------------------------------------------------------------------------------------- */
.ct-side { position: sticky; top: calc(var(--navh, 72px) + 24px); padding-top: clamp(4px, 1.5vw, 20px); }
.ct-side h2 { margin: 0; color: var(--green-ink, #1d3a2c); font: 600 clamp(28px, 2.6vw, 38px) / 1.08 var(--font-display), var(--font-sans), sans-serif; letter-spacing: -.02em; }
.ct-side > p { max-width: 30em; margin: 12px 0 0; color: var(--text-muted, #5a645d); font-size: 17px; line-height: 1.55; }
.ct-channels { display: grid; gap: 4px; margin: 28px 0 0; padding: 0; list-style: none; }
.ct-channel {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; margin: 0 -18px; padding: 18px; border-radius: 26px; color: inherit; text-decoration: none;
  transition: background-color .3s var(--ease-soft);
}
.ct-ic { display: grid; place-items: center; width: 30px; height: 30px; color: var(--green-deep, #2f7a55); --hi-w: 1.5; }
.ct-ic svg { display: block; width: 30px; height: 30px; }
.ct-ch-text { display: grid; gap: 3px; min-width: 0; }
.ct-lab { color: var(--text-muted, #5a645d); font-size: 14.5px; line-height: 1.3; }
.ct-val { color: var(--green-ink, #1d3a2c); font: 600 clamp(22px, 2.1vw, 29px) / 1.15 var(--font-display), var(--font-sans), sans-serif; letter-spacing: -.015em; overflow-wrap: anywhere; }
.ct-sub { color: var(--text-muted, #5a645d); font-size: 14.5px; line-height: 1.4; }
.ct-go { display: grid; place-items: center; width: 28px; height: 28px; color: var(--green-deep, #2f7a55); --hi-w: 1.8; transform: rotate(-45deg); transition: transform .35s var(--ease-soft); }
.ct-go svg { display: block; width: 24px; height: 24px; }
.ct-side h3 { margin: 30px 0 8px; color: var(--ink-2, #232c26); font: 600 15px / 1.3 var(--font-sans), sans-serif; }
.ct-facts { display: grid; gap: 8px; margin: 0; }
.ct-facts > div { display: flex; justify-content: space-between; gap: 18px; font-size: 15.5px; line-height: 1.4; }
.ct-facts dt { color: var(--text-muted, #5a645d); }
.ct-facts dd { margin: 0; color: var(--green-ink, #1d3a2c); font-weight: 600; text-align: right; }

/* ---- 5. quick answers ---------------------------------------------------------------------------------------------------------------------------- */
.ct-quick { margin-top: clamp(48px, 6vw, 92px); }
.ct-quick h2 { margin: 0 0 14px; color: var(--green-ink, #1d3a2c); font: 600 clamp(24px, 2.2vw, 31px) / 1.15 var(--font-display), var(--font-sans), sans-serif; letter-spacing: -.02em; }
.ct-quick-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 4px 28px; margin: 0; padding: 0; list-style: none; }
.ct-quick-link { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; margin: 0 -18px; padding: 18px; border-radius: 24px; color: inherit; text-decoration: none; transition: background-color .3s var(--ease-soft); }
.ct-quick-text { display: grid; gap: 2px; }
.ct-quick-text b { color: var(--green-ink, #1d3a2c); font: 600 18.5px / 1.25 var(--font-display), var(--font-sans), sans-serif; letter-spacing: -.01em; }
.ct-quick-text span { color: var(--text-muted, #5a645d); font-size: 15px; line-height: 1.45; }

/* ---- 6. the map ------------------------------------------------------------------------------------------------------------------------------------- */
.ct-map { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 68px); margin-top: clamp(56px, 7vw, 104px); }
.ct-map.is-plain { grid-template-columns: minmax(0, 1fr); }
.ct-map-pic { position: relative; min-height: 400px; margin: 0; overflow: hidden; border-radius: 34px; background: #e8efe4; box-shadow: var(--elev-1); }
.ct-map-pic img { position: absolute; left: 50%; top: 50%; width: 900px; height: 640px; max-width: none; transform: translate(-50%, -50%); filter: saturate(.55) contrast(.96) brightness(1.04); }
.ct-pin { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -52px 0 0 -28px; color: var(--green-deep, #2f7a55); filter: drop-shadow(0 6px 6px rgba(18, 50, 34, .38)); }
.ct-pin svg { display: block; width: 100%; height: 100%; }
.ct-credit { position: absolute; right: 12px; bottom: 12px; margin: 0; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .9); font: 500 12px / 1.5 var(--font-sans), sans-serif; }
.ct-credit a { color: var(--ink-2, #232c26); text-decoration: none; }
.ct-map-info h2 { margin: 0; color: var(--green-ink, #1d3a2c); font: 600 clamp(28px, 2.6vw, 38px) / 1.08 var(--font-display), var(--font-sans), sans-serif; letter-spacing: -.02em; }
.ct-map-info p { max-width: 30em; margin: 12px 0 0; color: var(--text-muted, #5a645d); font-size: 17px; line-height: 1.55; }
.ct-map-info address { display: grid; gap: 3px; margin: 22px 0 0; font-style: normal; }
.ct-map-info address b { color: var(--text-muted, #5a645d); font-size: 14.5px; font-weight: 500; }
.ct-map-info address span { color: var(--green-ink, #1d3a2c); font: 600 clamp(20px, 1.8vw, 24px) / 1.25 var(--font-display), var(--font-sans), sans-serif; letter-spacing: -.01em; }
.ct-map-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 26px; }
.ct-button { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; background: var(--green-deep, #2f7a55); color: #fff; font: 600 16px / 1 var(--font-sans), sans-serif; text-decoration: none; transition: background-color .3s var(--ease-soft); }
.ct-button svg { width: 20px; height: 20px; }
.ct-textlink { min-height: 44px; display: inline-flex; align-items: center; color: var(--green-deep, #2f7a55); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }

@media (hover: hover) and (pointer: fine) {
  .ct-channel:hover, .ct-quick-link:hover { background: rgba(255, 255, 255, .72); }
  .ct-channel:hover .ct-go, .ct-quick-link:hover .ct-go { transform: translate3d(3px, -3px, 0) rotate(-45deg); }
  .ct-button:hover { background: var(--green-ink, #1d3a2c); }
}
.ct-channel:focus-visible, .ct-quick-link:focus-visible, .ct-button:focus-visible, .ct-textlink:focus-visible { outline: 3px solid var(--focus, #2f7a55); outline-offset: 2px; }

/* ---- 7. tablets and phones ------------------------------------------------------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .ct-head-grid { grid-template-columns: minmax(0, 1fr); margin-top: 14px; }
  .ct-head-photo { display: none; }
  .ct-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  /* the ways in first on a phone: most people would rather send a WhatsApp message than fill in a form */
  .ct-side { position: static; order: -1; padding-top: 0; }
  .ct-map { grid-template-columns: minmax(0, 1fr); }
  .ct-map-pic { min-height: 300px; border-radius: 26px; }
}
@media (max-width: 600px) {
  @layer fi-pre { .ct-grid .c-topics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .ct-grid .c-topic { padding: 0 14px !important; min-height: 52px; font-size: 15px !important; } }
  .ct-head-text h1 { font-size: clamp(44px, 14vw, 60px); }
  .ct-channel, .ct-quick-link { margin: 0 -14px; padding: 16px 14px; gap: 14px; }
  .ct-grid > .c-form-card { border-radius: 28px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .ct-channel, .ct-quick-link, .ct-button, .ct-go, .ct-grid .c-topic, .ct-grid .c-topic::before { transition: none !important; }
  .ct-channel:hover .ct-go, .ct-quick-link:hover .ct-go { transform: rotate(-45deg); }
}