/* Gossan — shared stylesheet. Tokens first; components below use tokens only.

   Breakpoints (mobile-first, min-width only; custom properties cannot be used
   in media queries, so these four values are the whole system):
     base        phone        one column, two-row header
     sm  36rem   large phone  one-row header
     md  48rem   tablet       wider gutter, header button, two-column layouts,
                              inline contact form with paired fields
     lg  64rem   desktop      three-column grids, split section heads,
                              two-column contact
   Content stops growing at --wrap (70rem). */

:root {
  color-scheme: light;
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --band: #F3F6F4;
  --fg: #2B3033;
  --muted: #5B6468;
  --line: #DDE2DF;
  --accent: #17573F;
  --accent-fg: #FFFFFF;
  --shadow: 0 8px 24px rgb(43 48 51 / 0.12);

  --font: "Geist", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --weight-body: 300;
  --weight-head: 400;
  --weight-strong: 500;
  --step--1: 0.875rem;
  --step-0: 1rem;
  --step-1: 1.125rem;
  --step-2: 1.375rem;
  --step-3: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);
  --step-4: clamp(2.1rem, 1.3rem + 3.6vw, 3.6rem);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  --gutter: 1rem;
  --header-h: 6.6rem;
  --wrap: 70rem;
  --radius: 14px;
  --radius-small: 8px;
}

@media (min-width: 36rem) {
  :root { --header-h: calc(4rem + 1px); }
}
@media (min-width: 48rem) {
  :root { --gutter: 2rem; }
}

/* Base */

/* Geist (SIL OFL 1.1, licence beside the file): one variable file, Latin subset.
   Light for running text, Regular for headings, Medium for emphasis. */
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/geist-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: var(--weight-body) var(--step-0)/1.6 var(--font);
}

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

h1, h2, h3 { margin: 0; font-weight: var(--weight-head); line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
p, ul, ol, dl { margin: 0; }
b, strong { font-weight: var(--weight-strong); }

a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: 0.2em; }
a:hover { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

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

.skip {
  position: absolute; left: var(--gutter); top: -4rem; z-index: 20;
  padding: var(--space-1) var(--space-2);
  background: var(--fg); color: var(--bg); border-radius: var(--radius-small);
}
.skip:focus { top: var(--space-1); }

/* Header */

.site-header {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.bar { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-2); padding-block: var(--space-1); }
.brand { flex: none; margin-right: auto; }
.brand img { width: 6.5rem; }
.site-nav {
  order: 1; flex-basis: 100%;
  /* Six links in one row from 320px: gap and type tighten below about 400px */
  display: flex; justify-content: space-between; gap: clamp(0.25rem, 4vw - 0.5rem, var(--space-1));
  margin-top: var(--space-1); border-top: 1px solid var(--line);
  font-size: min(var(--step--1), 4.25vw); font-weight: var(--weight-strong);
}
.site-nav a { text-decoration: none; }
.site-nav > a, .nav-group-toggle { padding-block: var(--space-1); }
.site-nav > a[aria-current], .nav-group-toggle[aria-current] { box-shadow: inset 0 -2px var(--accent); }

/* Dropdown parents (Services, Guides). The panels are in the HTML on every
   page and need no JavaScript; they open on hover or keyboard focus, from
   tablet up and only where there is a pointer that hovers. Elsewhere the
   parent is a plain link to its hub, which lists the same pages. */
.nav-group { display: flex; align-items: center; }
.nav-group-toggle { display: inline-flex; align-items: center; gap: 0.375rem; }
.nav-caret {
  display: none; flex: none; width: 0.5625rem; height: 0.5625rem;
  fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.25s ease;
}
.nav-dropdown { display: none; }
.site-header .header-cta { display: none; }
.site-header .header-cta[aria-current] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }

/* Language menu: a <details> dropdown, so it works without JavaScript */
.lang-menu { position: relative; flex: none; font-size: var(--step--1); font-weight: var(--weight-strong); }
.lang-menu summary {
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 2.25rem; padding-inline: 0.75rem;
  border: 1px solid var(--line); border-radius: 999px;
  list-style: none; cursor: pointer;
}
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary::after {
  content: ""; width: 0.4rem; height: 0.4rem;
  border: solid currentColor; border-width: 0 2px 2px 0;
  transform: translateY(-0.12rem) rotate(45deg);
}
.lang-menu[open] summary::after { transform: translateY(0.12rem) rotate(-135deg); }
.lang-menu summary:hover, .lang-menu[open] summary { border-color: var(--accent); color: var(--accent); }
.lang-menu ul {
  position: absolute; right: 0; top: calc(100% + var(--space-1)); z-index: 1;
  min-width: 9rem; padding: var(--space-1); list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-small);
  box-shadow: var(--shadow);
}
.lang-menu a { display: block; padding: 0.4rem 0.6rem; border-radius: var(--radius-small); text-decoration: none; }
.lang-menu a[aria-current] { color: var(--accent); }
.lang-menu a[aria-disabled="true"] { color: var(--muted); opacity: 0.7; cursor: not-allowed; }

@media (min-width: 36rem) {
  .bar { flex-wrap: nowrap; min-height: 4rem; padding-block: 0; }
  .site-nav { order: 0; flex-basis: auto; gap: var(--space-2); margin-top: 0; border-top: 0; }
}
@media (min-width: 48rem) {
  .brand img { width: 8rem; }
  /* One contact entry per width: the text link on phones, the button from tablet up */
  .site-nav .nav-contact { display: none; }
  .site-header .header-cta { display: inline-flex; flex: none; white-space: nowrap; }
  /* Spanish labels are longer: the nav gap tightens until about 900px so the row still fits */
  :where(:lang(es)) .site-nav { gap: clamp(var(--space-1), 4vw - 1.25rem, var(--space-2)); }
}
@media (min-width: 64rem) {
  .site-nav { gap: var(--space-3); font-size: var(--step-0); }
}
@media (min-width: 48rem) and (hover: hover) {
  /* Groups span the header's height, so a panel at top: 100% starts at the
     header's bottom edge and the pointer never leaves the group on the way */
  .bar { position: relative; }
  .site-nav { align-self: stretch; align-items: center; }
  .nav-group { position: relative; align-self: stretch; }
  .nav-caret { display: block; }
  .nav-group:hover .nav-caret,
  .nav-group:focus-within .nav-caret { transform: rotate(180deg); }

  .nav-dropdown {
    display: block;
    /* Centred under its header entry */
    position: absolute; top: 100%; left: 50%; z-index: 2;
    margin: 0; padding: 0.625rem 0;
    min-width: 15.625rem;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    opacity: 0; visibility: hidden; transform: translate(-50%, 6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  }
  .nav-group:hover .nav-dropdown,
  .nav-group:focus-within .nav-dropdown { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
  .nav-dropdown a {
    display: block; padding: 0.5625rem 1.375rem;
    font-size: var(--step--1); font-weight: var(--weight-head);
    color: var(--muted); white-space: nowrap;
    transition: color 0.2s, background 0.2s;
  }
  .nav-dropdown a:hover,
  .nav-dropdown a:focus-visible { color: var(--fg); background: var(--band); }

  /* Mega-menu (Services): one column per category, sized to its content,
     pinned to the header's right gutter so it grows leftward and stays on screen.
     Where the content is wider than the screen, the columns narrow and the links wrap */
  .nav-group:has(> .nav-mega) { position: static; }
  .nav-dropdown.nav-mega {
    left: auto; right: var(--gutter); transform: translateY(6px);
    display: grid; grid-template-columns: repeat(3, auto); gap: 0.25rem 1.875rem;
    padding: 1.375rem 1.625rem;
    min-width: 0; width: max-content; max-width: calc(100vw - 2 * var(--gutter));
  }
  .nav-group:hover .nav-mega,
  .nav-group:focus-within .nav-mega { transform: translateY(0); }
  .nav-mega-col { min-width: 0; }
  .nav-mega .nav-mega-head {
    display: block; padding: 0.375rem 0 0.5rem; margin-bottom: 0.375rem;
    border-bottom: 1px solid var(--line);
    font-weight: var(--weight-strong); color: var(--fg);
    white-space: nowrap; line-height: 1.25;
  }
  .nav-mega .nav-mega-head:hover,
  .nav-mega .nav-mega-head:focus-visible { color: var(--muted); background: none; }
  .nav-mega-col ul { list-style: none; margin: 0; padding: 0; }
  .nav-mega-col ul a { padding: 0.4375rem 0; white-space: normal; line-height: 1.3; }
  .nav-mega-col ul a:hover,
  .nav-mega-col ul a:focus-visible { color: var(--fg); background: none; }
}

/* Buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.7rem 1.25rem;
  border: 2px solid var(--accent); border-radius: 999px;
  background: var(--accent); color: var(--accent-fg);
  font: inherit; font-weight: var(--weight-strong); line-height: 1.2; text-decoration: none; cursor: pointer;
}
.btn:hover { filter: brightness(1.08); color: var(--accent-fg); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; filter: none; }
.btn-ghost { background: transparent; color: var(--fg); border-color: var(--fg); }
.btn-ghost:hover { color: var(--accent); border-color: var(--accent); filter: none; }
.btn-small { padding: 0.45rem 1rem; font-size: var(--step--1); }

/* Sections */

.section { padding-block: var(--space-5); }
.band { background: var(--band); border-block: 1px solid var(--line); }

/* Homepage panels: each is at least one screen below the sticky header and
   grows when its content is taller. --header-h is the header's real height
   (home.js measures it; the :root values are the no-JS fallback). */
.panel {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  padding-block: var(--space-4) calc(var(--space-4) + var(--space-3));
}
/* Card images follow the viewport height here, so a row of cards fits one screen */
@media (min-width: 48rem) {
  .panel .card-img { aspect-ratio: auto; height: clamp(6rem, 18svh, 16rem); }
}
/* On a short desktop screen the spacing gives way before the content does */
@media (min-width: 64rem) {
  .panel { --panel-pad: clamp(var(--space-2), 3.5svh, var(--space-4)); padding-block: var(--panel-pad) calc(var(--panel-pad) + var(--space-3)); }
  .panel .head-row { margin-bottom: var(--panel-pad); }
  .panel .grid { gap: clamp(var(--space-2), 2.5svh, var(--space-3)); }
  .panel .card { --card-pad: clamp(var(--space-2), 2.5svh, var(--space-3)); }
}
.panel + .panel.band, .panel.band + .panel { border-top: 0; }
.next {
  position: absolute; left: 50%; bottom: var(--space-1);
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; margin-left: -1.375rem;
  border-radius: 50%; color: var(--muted);
  animation: next-nudge 2.4s ease-in-out infinite;
}
.next:hover { color: var(--accent); }
.next svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes next-nudge {
  50% { transform: translateY(0.4rem); }
}

/* Decorative backgrounds (tools/build_*.py): mosaic behind the intro,
   contours behind the services, strata behind the stories, blocks behind the
   guides, terrain behind the closing call to action. Each fades out towards
   one side, and the side alternates down the homepage: intro and stories are
   strongest on the left, services and guides on the right (as is terrain). */
.mosaic, .blocks, .terrain, .strata, .contours { position: relative; isolation: isolate; overflow: hidden; }
:is(.mosaic, .blocks, .terrain, .strata, .contours)::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  -webkit-mask-image: linear-gradient(100deg, transparent 15%, #000 85%);
  mask-image: linear-gradient(100deg, transparent 15%, #000 85%);
}
:is(.mosaic, .strata)::before {
  -webkit-mask-image: linear-gradient(260deg, transparent 15%, #000 85%);
  mask-image: linear-gradient(260deg, transparent 15%, #000 85%);
}
.mosaic::before { background: url("/assets/bg/mosaic.svg") center / 75rem auto; }
.blocks::before { background: url("/assets/bg/blocks.svg") center / 70rem auto; }
.strata::before { background: url("/assets/bg/strata.svg") center / 56rem auto; }
.contours::before { background: url("/assets/bg/contours.svg") center / 75rem auto; }
/* Behind a whole section, running text crosses the green facets: at this
   strength --muted still clears 4.5:1 on the strongest one */
.section:is(.mosaic, .blocks, .strata, .contours)::before { opacity: 0.4; }
/* One picture, not a tile; 35% keeps its horizon inside a short band */
.terrain::before { background: url("/assets/bg/terrain.svg") center 35% / cover no-repeat; }

.eyebrow {
  margin-bottom: var(--space-2);
  color: var(--accent);
  font-size: var(--step--1); font-weight: var(--weight-strong); letter-spacing: 0.12em; text-transform: uppercase;
}
.lead { color: var(--muted); font-size: var(--step-1); max-width: 62ch; }

.head-row { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.head-row :is(h1, h2) { font-size: var(--step-3); }
@media (min-width: 64rem) {
  .head-row { grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: end; }
}

/* Hero */

.hero { position: relative; isolation: isolate; overflow: hidden; padding-top: var(--space-5); }
.hero-photo { width: 100%; margin-top: var(--space-4); aspect-ratio: 3 / 2; object-fit: cover; }
.hero.panel { justify-content: flex-start; }
.hero.panel .hero-photo { flex: 1 0 8rem; height: 0; aspect-ratio: auto; }
@media (min-width: 64rem) {
  .hero { padding-bottom: var(--space-5); }
  /* On a short screen the padding gives way, so the hero stays one screen
     tall and its arrow stays clear of the bottom edge */
  .hero.panel { justify-content: center; padding-block: clamp(var(--space-4), 12svh, var(--space-5)); }
  .hero.panel .hero-photo { flex: none; height: 100%; }
  .hero-photo {
    position: absolute; inset: 0 0 0 auto; z-index: -1;
    width: 62%; height: 100%; margin: 0; aspect-ratio: auto;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%);
    mask-image: linear-gradient(90deg, transparent, #000 45%);
  }
}
.hero h1 { font-size: var(--step-4); max-width: 16ch; }
.hero .lead { margin-top: var(--space-3); color: var(--fg); font-size: var(--step-2); line-height: 1.4; max-width: 44ch; }
@media (min-width: 64rem) {
  .hero :is(.eyebrow, .lead) { max-width: 32rem; }
}
.actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }

.page-head { padding-block: var(--space-4) var(--space-3); }
.page-head h1 { font-size: var(--step-4); max-width: 20ch; }
.page-head .lead { margin-top: var(--space-2); }
.page-photo { width: 100%; margin-bottom: var(--space-4); aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
@media (min-width: 48rem) {
  .page-photo { aspect-ratio: 21 / 9; }
}

/* Grids and cards */

.grid { display: grid; gap: var(--space-3); }
@media (min-width: 48rem) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

.card {
  position: relative;
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--card-pad, var(--space-3));
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.card-img {
  width: calc(100% + 2 * var(--card-pad, var(--space-3))); max-width: none;
  margin: calc(-1 * var(--card-pad, var(--space-3))) calc(-1 * var(--card-pad, var(--space-3))) var(--space-1);
  aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}
.card :is(h2, h3) { font-size: var(--step-2); }
.card :is(h2, h3) a { text-decoration: none; }
.card :is(h2, h3) a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.card:has(a:hover) { border-color: var(--accent); }
.card p { color: var(--muted); font-size: var(--step--1); line-height: 1.45; }
.card ul { margin-top: auto; padding: var(--space-1) 0 0; list-style: none; border-top: 1px solid var(--line); line-height: 1.3; }
.card li { padding-block: 0.2rem; }
.card li a { position: relative; z-index: 1; text-decoration: none; }
.card li a:hover { text-decoration: underline; }
.card li::before { content: "◆ "; color: var(--accent); font-size: 0.7em; vertical-align: 0.15em; }
.tag { color: var(--accent); font-size: var(--step--1); font-weight: var(--weight-strong); letter-spacing: 0.08em; text-transform: uppercase; }

.steps { counter-reset: step; }
.step { padding-top: var(--space-2); border-top: 2px solid var(--fg); }
.step :is(h2, h3) { font-size: var(--step-1); margin-bottom: var(--space-1); }
.step :is(h2, h3)::before { counter-increment: step; content: counter(step) ". "; color: var(--accent); }
.step p { color: var(--muted); }
.closing { margin-top: var(--space-4); font-size: var(--step-2); font-weight: var(--weight-strong); letter-spacing: -0.01em; max-width: 40ch; }

/* Breadcrumb */

.breadcrumb { padding-top: var(--space-3); font-size: var(--step--1); color: var(--muted); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; list-style: none; }
.breadcrumb li + li::before { content: "›"; margin-right: 0.4rem; }
/* The trail sits right above the page's eyebrow, not a section's padding away */
.breadcrumb + .section,
.breadcrumb + .wrap > .page-head { padding-top: var(--space-2); }

/* Service sections on category pages */

.service { padding-block: var(--space-4); border-top: 1px solid var(--line); }
.service h2 { font-size: var(--step-3); margin-bottom: var(--space-3); }
.service-cols { display: grid; gap: var(--space-3); }
.service h3 { margin-bottom: var(--space-1); color: var(--muted); font-size: var(--step--1); letter-spacing: 0.1em; text-transform: uppercase; }
.example { padding: var(--space-3); background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius-small); }
@media (min-width: 48rem) {
  .service-cols { grid-template-columns: 2fr 3fr; gap: var(--space-4); }
}

.more { margin-top: var(--space-2); font-weight: var(--weight-strong); }

.siblings { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); padding-block: var(--space-3); border-top: 1px solid var(--line); font-weight: var(--weight-strong); }

/* Prose pages: stories, privacy */

.prose { max-width: 44rem; padding-bottom: var(--space-5); }
.prose > * + * { margin-top: var(--space-2); }
.prose h2 { font-size: var(--step-2); margin-top: var(--space-4); }
.prose h3 { font-size: var(--step-1); margin-top: var(--space-3); }
.prose :is(ul, ol) { padding-left: 1.2rem; }
.prose li + li { margin-top: 0.4rem; }
.prose li::marker { color: var(--accent); }
.note { padding: var(--space-2) var(--space-3); border-left: 4px solid var(--accent); background: var(--surface); border-radius: var(--radius-small); color: var(--muted); }

.figure { margin-inline: 0; }
.figure img { width: 100%; border-radius: var(--radius); }
.figure figcaption { margin-top: var(--space-1); color: var(--muted); font-size: var(--step--1); }
.byline { margin-top: var(--space-2); color: var(--muted); font-size: var(--step--1); }

/* Questions and answers */

.faq > h2 { margin-bottom: var(--space-3); }
.faq-item :is(h2, h3) { margin-bottom: var(--space-1); font-size: var(--step-1); }
.faq p { color: var(--muted); }
.faq-item + .faq-item { margin-top: var(--space-3); }
.faq-block { max-width: 44rem; padding-block: var(--space-4); border-top: 1px solid var(--line); }
.faq-block > h2, .faq-columns > h2 { font-size: var(--step-3); }
@media (min-width: 48rem) {
  .faq-columns { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3) var(--space-4); }
  .faq-columns > h2 { grid-column: 1 / -1; margin-bottom: 0; }
  .faq-columns .faq-item + .faq-item { margin-top: 0; }
}
.faq-more { padding-block: var(--space-3) var(--space-5); }

.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
th, td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--muted); font-weight: var(--weight-strong); }

/* Contact (layout after bibliography/sample-web). Phones: one column, and the
   form opens full-screen from a link to #contact-form (:target, no JavaScript).
   Tablet: one column with the form inline. Desktop: two columns. */

.contact-grid { display: grid; gap: var(--space-4); align-items: start; }
.contact-left > :is(h1, h2) { margin-bottom: var(--space-3); font-size: var(--step-3); }
.contact-left > p { color: var(--muted); font-size: var(--step-1); max-width: 62ch; }
.contact-left > .contact-microcopy {
  margin-block: var(--space-2) var(--space-3);
  color: var(--fg); font-size: var(--step--1); font-weight: var(--weight-strong); letter-spacing: 0.04em;
}
.contact-item { display: flex; align-items: baseline; gap: var(--space-2); padding-block: 0.625rem; border-top: 1px solid var(--line); }
.contact-item:last-child { border-bottom: 1px solid var(--line); }
.contact-item dt {
  flex: none; width: 4.5rem;
  color: var(--muted); font-size: var(--step--1); font-weight: var(--weight-strong); letter-spacing: 0.1em; text-transform: uppercase;
}
.contact-item dt:lang(es) { width: 5.75rem; } /* "Contacto" is wider than "Contact" */
.contact-item dd { margin: 0; font-size: var(--step-1); font-weight: var(--weight-head); overflow-wrap: anywhere; }
.contact-item a { text-decoration: none; }
.contact-left > .btn { display: flex; width: fit-content; margin-inline: auto; }
.whatsapp-btn { gap: 0.625rem; margin-top: var(--space-3); }
.whatsapp-btn svg { flex: none; }
.contact-left > .contact-or {
  margin-block: 0.875rem; text-align: center;
  font-size: var(--step--1); font-weight: var(--weight-strong); letter-spacing: 0.04em; text-transform: uppercase;
}

.contact-form-panel { display: none; }
.contact-form-panel:target {
  display: block; position: fixed; inset: 0; z-index: 30;
  padding: 4rem var(--gutter) var(--space-4);
  background: var(--bg); overflow-y: auto; overscroll-behavior: contain;
}
html:has(.contact-form-panel:target) { overflow: hidden; }
.contact-form-close {
  position: fixed; top: 0.75rem; right: 0.75rem;
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 50%; box-shadow: var(--shadow);
  font-size: var(--step-3); line-height: 1; text-decoration: none;
}

/* One hairline box, divided by internal rules */
.contact-frame { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.contact-frame > * + *, .form-row > * + * { border-top: 1px solid var(--line); }
.form-group { display: flex; flex-direction: column; }
.form-group label {
  padding: 0.75rem 1.25rem 0;
  color: var(--muted); font-size: var(--step--1); font-weight: var(--weight-strong); letter-spacing: 0.1em; text-transform: uppercase;
}
.form-group :is(input, select, textarea) {
  width: 100%; padding: 0.5rem 1.25rem 0.875rem;
  background: transparent; color: var(--fg); border: 0;
  font: inherit;
}
.form-group :is(input, select, textarea):focus-visible { outline-offset: -3px; }
.form-group ::placeholder { color: var(--muted); opacity: 0.75; }
/* Phones: the full-screen form fits one screen, Send included, where the screen is tall enough (44rem is everything but the textarea) */
.form-group textarea { min-height: 6rem; min-height: clamp(6rem, calc(100svh - 44rem), 25rem); resize: vertical; }
.form-submit { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 1.25rem; }
.form-submit .btn { flex: none; gap: 0.625rem; }
.form-note { color: var(--muted); font-size: var(--step--1); max-width: 36ch; }
/* Turnstile's box is 65px high; the row keeps that height while the script loads */
.form-verify { padding-block: 0.75rem; min-height: calc(65px + 1.5rem); }
.cf-turnstile { transform-origin: 0 0; } /* contact.js scales it down on 320px phones */
.field-trap { position: absolute; left: -200vw; }

@media (min-width: 48rem) {
  .contact-left > .btn { margin-inline: 0; }
  .contact-left > :is(.contact-or, .contact-form-btn), .contact-form-close { display: none; }
  .contact-form-panel, .contact-form-panel:target { display: block; position: static; padding: 0; background: none; overflow: visible; }
  html:has(.contact-form-panel:target) { overflow: visible; }
  .contact-item { padding-block: var(--space-2); }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; }
  .form-row > * + * { border-top: 0; border-left: 1px solid var(--line); }
  .form-group textarea { min-height: 9.5rem; }
  .form-verify { padding-inline: 1.25rem; }
}
@media (min-width: 64rem) {
  .contact-grid { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
}

/* Call to action band */

.hub-cta { padding-block: var(--space-5); }
.hub-cta h2 { font-size: var(--step-3); max-width: 24ch; }
.hub-cta p { margin-top: var(--space-2); color: var(--muted); max-width: 52ch; }

/* Footer */

.site-footer { padding-block: var(--space-4); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--step--1); }
.footer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-3); }
.footer-top img { width: 6.5rem; }
.footer-nav { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); color: var(--fg); font-weight: var(--weight-strong); }
.site-footer p + p { margin-top: var(--space-1); }
.disclaimer { max-width: 80ch; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .next { animation: none; }
  .nav-caret, .nav-dropdown, .nav-dropdown a { transition: none; }
}