/* =============================================================================
   Gaia Arándanos — landing page
   Converted from "felixletkemann New page Design (Copy).fig"

   Source frames: Desktop 1920x4133, Mobile 480x4370.
   The desktop frame lays its content out between x=360 and x=1560, so the
   content column is a 1200px container inside full-bleed section backgrounds.
   Written desktop-first (the richer frame), with the mobile frame applied as
   overrides at <=1024px and <=600px.

   Naming: BEM (.block, .block__element, .block--modifier).
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette, sampled from the Figma paints */
  --c-purple-900: #1b1338;   /* footer background            */
  --c-purple-800: #211952;   /* hero gradient stop 3 (100%)  */
  --c-purple-700: #2c216f;   /* hero gradient stop 2 (45%)   */
  --c-purple-600: #312579;   /* hero gradient stop 1 (0%)    */
  --c-green:      #74be05;   /* primary CTA                  */
  --c-blue:       #475e9a;   /* eyebrow, leaves, statement accent */
  --c-blue-light: #80a2ff;   /* hero headline accent         */
  --c-ink:        #1e1e1e;   /* headings                     */
  --c-body:       #484848;   /* body copy                    */
  --c-cream:      #fcfaf8;   /* features section background  */
  --c-white:      #fff;

  /* Form fields */
  --c-field-bg:     #f9f9f9;
  --c-field-border: #bbb;

  /* Feature-card icon circles */
  --c-icon-fresh: #8400ff;
  --c-icon-grown: #16da00;
  --c-icon-new:   #ff007b;

  /* Translucent whites, used for the glass pills and hairlines */
  --c-white-02: rgb(255 255 255 / 0.02);
  --c-white-10: rgb(255 255 255 / 0.10);
  --c-white-30: rgb(255 255 255 / 0.30);
  --c-white-50: rgb(255 255 255 / 0.50);

  --gradient-purple: linear-gradient(
    180deg,
    var(--c-purple-600) 0%,
    var(--c-purple-700) 45%,
    var(--c-purple-800) 100%
  );

  /* Type */
  --font-display: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body: "Outfit", "Segoe UI", system-ui, sans-serif;

  /* Layout */
  --container: 75rem;        /* 1200px content column */
  --gutter: 1.5rem;          /* side padding once the container starts to squeeze */
  --radius-card: 1.25rem;    /* 20px  - feature cards */
  --radius-panel: 1.875rem;  /* 30px  - contact form panel */
  --radius-field: 0.625rem;  /* 10px  - inputs */
  --radius-pill: 6.25rem;    /* 100px - fully rounded pills */

  --shadow-card: 0 0.25rem 2.1875rem rgb(0 0 0 / 0.05); /* 0 4px 35px */
}

/* -----------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* Fluid scale.
   Every desktop measurement in this file is written in rem straight from the
   Figma frame — 1rem = 16 design px on the 1920-wide artboard. Pinning the root
   to 16px would therefore render the 1920 design at full size inside whatever
   window you actually have: on a ~1500px viewport the hero is 1080px tall and
   the headline 80px, so the composition is blown up and cut off.

   Scaling the root by viewport width instead makes every rem a fraction of the
   screen, so the page is the same design at any width:
     100vw / 120  ->  1rem is exactly 1/120th of the viewport
     at 1920      ->  16px, i.e. the Figma frame 1:1
     above 1920   ->  capped at 16px, so the design centres instead of growing
     below 1440   ->  floored at 12px, so body copy never drops under ~16px

   Two consequences worth knowing: the 1200px column becomes `75rem` = 62.5% of
   the viewport (exactly its share of the 1920 frame), and the gallery's
   `120rem` cap becomes full-bleed below 1920 — both match the frame.

   Only above 1024px: below that the Mobile frame's own sizes take over and the
   root goes back to the reader's default. Media queries are unaffected either
   way — `em` in a media query always resolves against the browser default. */
@media (min-width: 64.0625em) {   /* 1025px and up */
  html { font-size: clamp(0.75rem, 100vw / 120, 1rem); }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--c-body);
  background: var(--c-white);
  /* Sections are full-bleed; the header is absolutely positioned against this. */
  position: relative;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }

:focus-visible {
  outline: 0.1875rem solid var(--c-green);
  outline-offset: 0.1875rem;
}

/* The gutter sits OUTSIDE the 1200px column, so the content box is exactly
   1200px on desktop (preserving the Figma metrics 1:1) and the padding only
   starts to bite once the viewport itself gets narrow. */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Visible only to screen readers */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   3. Shared type
   -------------------------------------------------------------------------- */

/* Small uppercase label above a heading (Figma: 18px Outfit Bold, uppercase) */
.eyebrow {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0;
}

/* -----------------------------------------------------------------------------
   4. Buttons  (Figma: 70px tall, radius 86 -> fully rounded, 22px Outfit SemiBold)
   -------------------------------------------------------------------------- */
.btn {
  --btn-height: 4.375rem;    /* 70px */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-height);
  padding-inline: 2rem;
  border: 0.0625rem solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 1.375rem;       /* 22px */
  font-weight: 600;
  line-height: 1.75rem;      /* 28px */
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease,
              border-color 0.18s ease, transform 0.18s ease;
}

.btn:hover { transform: translateY(-0.125rem); }
.btn:active { transform: translateY(0); }

.btn--green {
  background: var(--c-green);
  border-color: var(--c-green);
  color: var(--c-white);
}
.btn--green:hover {
  /* No hover state in the design; darkening the fill is the house default. */
  background: color-mix(in srgb, var(--c-green) 86%, #000);
  border-color: color-mix(in srgb, var(--c-green) 86%, #000);
}

/* Outlined-on-dark variant (Figma: 1px white stroke, transparent fill) */
.btn--ghost {
  background: transparent;
  border-color: var(--c-white);
  color: var(--c-white);
}
.btn--ghost:hover {
  background: var(--c-white);
  color: var(--c-purple-700);
}

/* Nav-sized button: 60px tall. The label is fixed px like the rest of the bar
   chrome; the pill around it still scales. */
.btn--compact {
  --btn-height: 3.75rem;
  padding-inline: 1.75rem;
  font-size: 16px;
}

/* Full-width button, used by the contact form and the mobile CTAs */
.btn--block { width: 100%; }

/* -----------------------------------------------------------------------------
   5. Header / navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  padding-top: 2.8125rem;    /* pill top at y=45 */
}

.site-header__inner { position: relative; }

/* The translucent "glass" pill. In the desktop frame it starts 25px inside the
   content column and runs to its right edge, with the logo overhanging its
   left end — hence the large padding-left. */
.site-header__bar {
  display: flex;
  align-items: center;
  gap: 2.1875rem;            /* 35px — the single gap used across the whole bar */
  min-height: 5rem;          /* 80px */
  margin-left: 1.5625rem;    /* 25px */
  padding-left: 15.75rem;    /* clears the 196px logo + the 80px gap after it */
  padding-right: 0.6875rem;
  border-radius: var(--radius-pill);
  background: var(--c-white-10);
}

.site-header__logo {
  position: absolute;
  top: -1.25rem;             /* logo top at y=25, i.e. 20px above the pill */
  left: var(--gutter);
  width: 12.25rem;           /* 196px */
  transition: transform 0.25s ease;
}
.site-header__logo:hover { transform: scale(1.03); }
.site-header__logo img { width: 100%; height: auto; }

/* Holds only the link list on desktop; it becomes the drawer below 1024px.
   `margin-left: auto` rather than `flex: 1`: the bar has spare room once the
   labels stop scaling, and this puts that room *before* the nav, so the gap
   opens up after the logo and the nav / language pill / CTA stay tightly
   spaced and flush right — the way the frame arranges them. With `flex: 1`
   the nav grew instead and dumped all the slack between the links and the
   language pill. */
.site-nav {
  flex: none;
  margin-left: auto;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 1.80rem;
}

.site-nav__item { position: relative; }

.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding-block: 0.5rem;     /* enlarges the tap/hover target only */
  /* Fixed px rather than rem: the fluid root would scale nav labels down with
     the layout, and chrome this small has to stay legible. */
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75rem;
  color: var(--c-white);
  white-space: nowrap;
  transition: color 0.18s ease;
}
.site-nav__link:hover { color: var(--c-green); }

.site-nav__caret {
  width: 0.375rem;
  height: 0.3125rem;
  color: currentColor;
  transition: transform 0.2s ease;
}

/* -- CSS-only dropdown: opens on hover, and on keyboard focus within ---------- */
.site-nav__menu {
  position: absolute;
  top: 100%;
  left: 50%;
  translate: -50% 0;
  min-width: 12rem;
  margin-top: 0.75rem;
  padding: 0.5rem;
  border-radius: 0.875rem;
  background: var(--c-purple-700);
  box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 0.28);

  /* Hidden but still animatable, and taken out of the a11y tree while closed. */
  opacity: 0;
  visibility: hidden;
  translate: -50% 0.5rem;
  transition: opacity 0.18s ease, translate 0.18s ease, visibility 0.18s;
}

.site-nav__item--has-menu:hover .site-nav__menu,
.site-nav__item--has-menu:focus-within .site-nav__menu {
  opacity: 1;
  visibility: visible;
  translate: -50% 0;
}

.site-nav__item--has-menu:hover .site-nav__caret,
.site-nav__item--has-menu:focus-within .site-nav__caret {
  transform: rotate(180deg);
}

.site-nav__menu a {
  display: block;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 14px;           /* desktop only — the drawer keeps 16px */
  color: var(--c-white);
  white-space: nowrap;
}
.site-nav__menu a:hover { background: var(--c-white-10); }

/* -- Language pill ----------------------------------------------------------- */
/* A <details>/<summary> disclosure: open/close and keyboard operation are native,
   so the three-language switcher needs no JavaScript. */
.lang { position: relative; }

.lang__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  height: 2rem;              /* 32px */
  padding: 0 0.5625rem 0 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--c-white-10);
  color: var(--c-white);
  cursor: pointer;
  user-select: none;
  transition: background-color 0.18s ease;
}
.lang__toggle:hover { background: var(--c-white-30); }

/* Drop the native disclosure triangle; the Figma caret stands in for it. */
.lang__toggle { list-style: none; }
.lang__toggle::-webkit-details-marker { display: none; }
.lang__toggle::marker { content: ""; }

/* Flag emoji stand in for the language names. */
.lang__flag {
  font-size: 1.25rem;
  line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.lang__caret {
  width: 0.375rem;
  height: 0.3125rem;
  transition: transform 0.2s ease;
}
.lang[open] .lang__caret { transform: rotate(180deg); }

.lang__menu {
  position: absolute;
  top: 100%;
  left: 50%;
  translate: -50% 0;
  z-index: 30;
  display: flex;
  gap: 0.125rem;
  margin-top: 0.625rem;
  padding: 0.375rem;
  border-radius: 0.875rem;
  background: var(--c-purple-700);
  /* The menu sits over the hero headline rather than pushing it down, so it
     needs a heavy enough shadow to separate itself from the type behind it. */
  box-shadow: 0 1.25rem 2.5rem rgb(0 0 0 / 0.55),
              0 0.25rem 0.75rem rgb(0 0 0 / 0.35);
}

.lang__option {
  display: block;
  padding: 0.5rem 0.625rem;
  border-radius: 0.5rem;
  line-height: 1;
  transition: background-color 0.18s ease;
}
.lang__option:hover { background: var(--c-white-10); }
/* The page you are already on. */
.lang__option[aria-current] { background: var(--c-white-10); box-shadow: inset 0 0 0 0.125rem var(--c-green); }

/* Flag row inside the mobile drawer; desktop hides it (the pill takes over). */
.site-nav__langs { display: none; }

/* -- Burger, checkbox and scrim: desktop hides all three; <=1024 turns them on.
      The properties below are inert until then, so the switch is one `display`. */
.nav-toggle,
.nav-burger,
.nav-scrim { display: none; }

/* The transparent checkbox is the real control, sitting over the burger art. */
.nav-toggle {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 60;
  width: 3.25rem;
  height: 3.125rem;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

/* Figma (Mobile): 30x21 box, three 3px rounded bars, the last one 25px wide. */
.nav-burger {
  flex-direction: column;
  justify-content: space-between;
  width: 1.875rem;
  height: 1.3125rem;
  cursor: pointer;
}
.nav-burger__line {
  width: 100%;
  height: 0.1875rem;
  border-radius: var(--radius-pill);
  background: var(--c-white);
  transition: transform 0.25s ease, opacity 0.2s ease, width 0.25s ease;
}
.nav-burger__line--short { width: 83.33%; }   /* 25 / 30 */

/* Open state: the outer bars cross, the short one fades out. */
.nav-toggle:checked ~ .site-header__bar .nav-burger__line:nth-child(1) {
  transform: translateY(0.5625rem) rotate(45deg);
}
.nav-toggle:checked ~ .site-header__bar .nav-burger__line:nth-child(2) {
  transform: rotate(-45deg);
}
.nav-toggle:checked ~ .site-header__bar .nav-burger__line--short {
  width: 0;
  opacity: 0;
}

/* Keyboard focus lands on the checkbox, so paint the ring on the burger. */
.nav-toggle:focus-visible ~ .site-header__bar .nav-burger {
  outline: 0.1875rem solid var(--c-green);
  outline-offset: 0.375rem;
}

/* Tap-outside-to-close layer, behind the drawer and above everything else. */
.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgb(12 8 32 / 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s;
}
.nav-toggle:checked ~ .nav-scrim {
  opacity: 1;
  visibility: visible;
}

/* -----------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 67.5rem;       /* 1080px */
  /* Content is placed by padding rather than centred, so each block lands on
     its Figma y: eyebrow 350.27, h1 415.27, lead 719.27, buttons 878.27. */
  padding-top: 21.875rem;    /* 350px */
  padding-bottom: 8.25rem;   /* 132px */
  overflow: hidden;
  background: var(--gradient-purple);
  color: var(--c-white);
  isolation: isolate;
}

/* Large soft glow standing in for the 1920x936 white-2% vector in the Figma
   file (a decorative blob whose exact path is not needed at 2% opacity). */
.hero::before {
  content: "";
  position: absolute;
  inset: -4.375rem 0 auto;
  height: 58.5rem;
  background: radial-gradient(
    120% 100% at 50% 0%,
    var(--c-white-02) 0%,
    transparent 70%
  );
  pointer-events: none;
}

/* Pinned to the bottom-right corner and left at its own proportions.
   It used to be stretched to the full height of the hero (top:0 + bottom:0 +
   height:100%), which meant the box only matched the artwork's 983x1080 shape
   at exactly 1920: anywhere else the berries were squashed or pulled, and past
   1920 the box grew wider than the file so they were enlarged and went soft.
   Width alone now sets the size, height follows the aspect ratio, and the cap
   stops it ever being drawn larger than the pixels it actually has. */
.hero__media {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 51.2%;              /* 982.91 / 1920 */
  max-width: 983px;          /* its native width — never upscaled */
  z-index: -1;
}
.hero__media img {
  width: 100%;
  height: auto;              /* aspect preserved, so it cannot stretch */
}

/* Rotated wordmark down the left gutter. Figma: 189px Poppins Bold, white 10%,
   rotated 90deg, box spanning x 12..146 of the 1920 frame. */
/* rotate(90deg) about the top-left maps local (x,y) -> (-y, x), so the box grows
   LEFT of this origin. Figma puts that origin at x=146 of the 1920 frame, which
   is 214px left of the content column — expressed here against the column so it
   tracks the layout at any viewport width. */
.hero__watermark {
  position: absolute;
  top: 0.5625rem;                            /* y = 9px */
  /* Anchored to the left edge of the screen rather than to the centred column.
     The old `calc(52% - ...)` was measured from the middle, so on a wide or
     zoomed-out window the wordmark drifted inwards and left a dead band of
     gradient beside it.

     Rotating 90deg about the top-left grows the box *leftwards* from this
     offset by its own height, and that height is the line box — font-size x
     line-height, i.e. 11.815rem — not the frame's 134px of glyph bounds. So
     the offset has to equal the line box for the wordmark to sit flush to the
     edge. Both are in rem, so it stays flush at every root size. */
  left: 11.815rem;
  font-family: var(--font-display);
  font-size: 11.815rem;      /* 189.04px */
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.108rem;
  color: var(--c-white-10);
  transform: rotate(90deg);
  transform-origin: top left;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.hero__inner { position: relative; }

/* The hero eyebrow runs 20px, larger than the 18px used elsewhere. */
.hero__eyebrow {
  font-size: 1.25rem;
  margin-bottom: 2.8125rem;  /* 45px -> h1 top at 415.27 */
}

.hero__title {
  max-width: 46.75rem;       /* 747.32px */
  margin-bottom: 2.875rem;   /* 46px -> lead top at 719.27 */
  font-family: var(--font-display);
  font-size: 5rem;           /* 80px */
  font-weight: 700;
  line-height: 5.375rem;     /* 86px */
  letter-spacing: -0.125rem; /* -2px */
}

/* Closing phrase of the headline, picked out in pale blue. */
.hero__title-accent { color: var(--c-blue-light); }

.hero__lead {
  max-width: 40.25rem;       /* 643.35px */
  margin-bottom: 3.5625rem;  /* 57px -> buttons top at 878.27 */
  font-size: 1.625rem;       /* 26px */
  line-height: 2.125rem;     /* 34px */
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;             /* 10px */
}

/* -----------------------------------------------------------------------------
   7. Mission statement  (Frame 5 — 1920x462, on white)
   -------------------------------------------------------------------------- */
/* Text sits at y=97 in a 462-tall frame and is 268 tall, so the padding is
   symmetrical top and bottom. */
.statement { padding-block: 6.0625rem; }

.statement__text {
  font-family: var(--font-display);
  font-size: 3.5rem;         /* 56px */
  font-weight: 600;
  line-height: 4.75rem;      /* 76px */
  letter-spacing: -0.0625rem;
  text-align: center;
  color: var(--c-ink);
}

/* Second half of the sentence, from the em dash on, in the brand blue. */
.statement__accent { color: var(--c-blue); }

/* -----------------------------------------------------------------------------
   8. Feature cards  (Frame 3 — 1920x618, cream)
   -------------------------------------------------------------------------- */
.features {
  position: relative;
  padding-block: 8.875rem 7.875rem;   /* cards at y=142, 126px left below them */
  background: var(--c-cream);
  overflow: hidden;                   /* the ornaments bleed into the gutters */
}

/* Two single berries parked in the side gutters of the frame. Both are pinned
   to the 1200px column rather than to the viewport, so they keep their distance
   from the cards at every width. The artwork is a transparent cut-out, so the
   frame's 62.65 corner radius has nothing to clip and `contain` keeps the berry
   round instead of stretching it into its box. */
.features__ornament {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.features__ornament img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.features__ornament--left {
  top: 2.39rem;                             /* y = 38.24 */
  left: calc(50% - 37.5rem - 9.304rem);     /* 148.87px left of the column */
  width: 13.554rem;                         /* 216.87px */
  height: 13.688rem;                        /* 219.01px */
}
/* Pulled down and in from the frame's 20.221rem / 50%, so the lower berry sits
   clear of the card row instead of hugging the viewport edge. */
.features__ornament--right {
  top: 23.221rem;
  right: calc(58% - 37.5rem - 18.178rem);
  width: 13.216rem;                         /* 211.46px */
  height: 13.347rem;                        /* 213.55px */
}

/* 3 x 390 + 2 x 15 = the full 1200 column. */
.features__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9375rem;
}

.card {
  display: flex;
  flex-direction: column;
  min-height: 21.875rem;     /* 350px */
  padding: 2.5rem 2.1875rem; /* icon at y=40, copy inset 35 */
  border-radius: var(--radius-card);
  background: var(--c-white);
  box-shadow: var(--shadow-card);
}

/* The SVGs hold only the white glyph; the disc is this element's background. */
.card__icon {
  display: grid;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  margin-bottom: 1.375rem;
  border-radius: 50%;
}
.card__icon img { width: 100%; height: 100%; }
.card__icon--fresh { background: var(--c-icon-fresh); }
.card__icon--grown { background: var(--c-icon-grown); }
.card__icon--new   { background: var(--c-icon-new); }

.card__title {
  margin-bottom: 0.625rem;
  font-family: var(--font-display);
  font-size: 1.625rem;       /* 26px */
  font-weight: 600;
  line-height: 2.125rem;
  letter-spacing: -0.0625rem;
  color: var(--c-ink);
}

.card__text {
  font-size: 1.375rem;       /* 22px */
  line-height: 1.875rem;     /* 30px */
}

/* -----------------------------------------------------------------------------
   9. Contact  (Frame 7 — 1920x1060, purple gradient + photo at 10%)
   -------------------------------------------------------------------------- */
.contact {
  position: relative;
  padding-block: 6.25rem 1.09375rem;  /* panel top at y=100, 17.5px below */
  background: var(--gradient-purple);
  color: var(--c-white);
  isolation: isolate;
}

/* The frame carries two paints: the gradient, then the same berry photo laid
   over it at 10%. CSS has no per-layer opacity, so the photo is a pseudo. */
.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.10;
  background: url("/assets/contact-bg-10a465d4.jpg") center / cover no-repeat;
  background-image: image-set(
    url("/assets/contact-bg-57bb5fe9.avif") type("image/avif"),
    url("/assets/contact-bg-e1db3f39.webp") type("image/webp"),
    url("/assets/contact-bg-10a465d4.jpg")  type("image/jpeg")
  );
  pointer-events: none;
}

/* Copy 538.1 + panel 610 = 1148.1 of the 1200 column, so the gap is 51.9.
   The panel spans both rows, which lands the rule + Instagram link level with
   its bottom edge exactly as the frame does. */
.contact__inner {
  display: grid;
  grid-template-columns: 33.631rem 38.125rem;
  justify-content: space-between;
  align-items: start;
  row-gap: 3.726rem;                  /* copy ends 395, rule sits at 454.62 */
}
.contact__copy  { grid-column: 1; grid-row: 1; margin-top: 1.25rem; }
.contact__panel { grid-column: 2; grid-row: 1 / span 2; }
.contact__meta  { grid-column: 1; grid-row: 2; }

.contact__eyebrow { margin-bottom: 0.75rem; }

.contact__title {
  margin-bottom: 1.125rem;
  font-family: var(--font-display);
  font-size: 3.75rem;        /* 60px */
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.125rem;
}

.contact__lead {
  font-size: 1.625rem;       /* 26px */
  line-height: 2.125rem;     /* 34px */
}

/* -- Form panel -------------------------------------------------------------- */
.contact__panel {
  padding: 2.25rem 1.875rem 1.75rem;
  border-radius: var(--radius-panel);
  background: var(--c-white);
  color: var(--c-ink);
}

.contact__panel-title {
  margin-bottom: 1.1875rem;
  font-family: var(--font-display);
  font-size: 2.25rem;        /* 36px */
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.0625rem;
}

/* Rows are a flat 10px apart in the frame — including before the button. */
.form {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.form__row--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem;
}
.form__field { display: block; }

.form__input {
  width: 100%;
  height: 3.75rem;           /* 60px */
  padding: 0 1rem;
  border: 0.0625rem solid var(--c-field-border);
  border-radius: var(--radius-field);
  background: var(--c-field-bg);
  font-family: var(--font-body);
  font-size: 1.125rem;       /* 18px */
  font-weight: 300;          /* Outfit Light */
  line-height: 1.5;
  color: var(--c-ink);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.form__input--area {
  height: 6.25rem;           /* 100px */
  padding-top: 1.1875rem;
  resize: vertical;
}
/* The frame shows the labels in full-strength ink, not a faded placeholder. */
.form__input::placeholder { color: var(--c-ink); opacity: 1; }
.form__input:focus {
  outline: none;
  border-color: var(--c-green);
  box-shadow: 0 0 0 0.1875rem rgb(116 190 5 / 0.20);
}

/* Submit button: 60px tall, 20px label. */
.btn--form {
  --btn-height: 3.75rem;
  font-size: 1.25rem;
}

/* Rendered by Rails from the flash after a submit. */
.form-note {
  display: block;
  margin-top: 0.875rem;
  padding: 0.875rem 1rem;
  border: 0.0625rem solid;
  border-radius: var(--radius-field);
  font-size: 1rem;
  line-height: 1.5;
}

.form-note--ok {
  border-color: var(--c-green);
  background: rgb(116 190 5 / 0.10);
  color: #3d6600;
}
.form-note--error {
  border-color: #c81e1e;
  background: rgb(200 30 30 / 0.07);
  color: #9b1616;
}
.form-note a { text-decoration: underline; }

/* -- Rule + Instagram link --------------------------------------------------- */
/* Dotted, not the frame's solid 1px stroke — the client's design shows dots.
   A repeating gradient rather than `border-style: dotted`, which locks the gap
   to the dot size and reads as an almost-solid line at 1px. */
.contact__rule {
  width: 33.191rem;          /* 531.06px — it stops short of the column edge */
  max-width: 100%;
  height: 0.0625rem;         /* 1px */
  margin: 0;
  border: 0;
  background-image: repeating-linear-gradient(
    to right,
    var(--c-white-50) 0 0.125rem,    /* 2px dot */
    transparent 0.125rem 0.375rem    /* 4px gap  */
  );
}

.contact__social {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 2.351rem;      /* icon top at y=492.23 */
  font-size: 1.625rem;       /* 26px */
  font-weight: 600;
}
.contact__social img { flex: none; width: 2.5rem; height: 2.5rem; }
.contact__social a { transition: color 0.18s ease; }
.contact__social a:hover { color: var(--c-green); }

/* -- Photo strip: an auto-advancing slider ----------------------------------
   The frame draws 5 x 365 with 15px gaps, 17.5px in from the frame edges. The
   five photos are repeated three times in the markup, so stepping the track by
   five slides lands set 2 exactly where set 1 started — a seamless loop with
   no JavaScript. (assets/slider.js needs the third set for drag headroom; the
   keyframes below work with any number of repeats because they step in slide
   units, not percentages.)

   Each item is sized `width + margin-right` rather than with a flex `gap`:
   n items share only n-1 gaps, so a gap would make the sets unequal and the
   loop seam would visibly jump. */
.gallery {
  overflow: hidden;
  width: calc(100% - 2.1875rem);         /* 17.5px in on each side */
  max-width: calc(120rem - 2.1875rem);   /* the frame's 1885px strip */
  margin: 3.173rem auto 0;               /* strip top at y=583 */
}

.gallery__track {
  --gallery-unit: 23.75rem;  /* one item + its margin: 365 + 15 */
  display: flex;
  width: max-content;
  animation: gallery-step 15s ease-in-out infinite;
}
/* Hold still while someone is looking at a particular photo. */
.gallery:hover .gallery__track,
.gallery:focus-within .gallery__track { animation-play-state: paused; }

/* Advance one photo at a time rather than drifting continuously: each fifth of
   the cycle holds for 14% and slides for 6%, so 15s reads as a 2.1s dwell and a
   0.9s move. The fifth step lands on -5 units — exactly -50% of the doubled
   track — so the next cycle starts where this one appears to end. */
@keyframes gallery-step {
  0%,  14% { transform: translateX(0); }
  20%, 34% { transform: translateX(calc(-1 * var(--gallery-unit))); }
  40%, 54% { transform: translateX(calc(-2 * var(--gallery-unit))); }
  60%, 74% { transform: translateX(calc(-3 * var(--gallery-unit))); }
  80%, 94% { transform: translateX(calc(-4 * var(--gallery-unit))); }
  100%     { transform: translateX(calc(-5 * var(--gallery-unit))); }
}

.gallery__item {
  flex: none;
  width: 22.8125rem;         /* 365px */
  margin-right: 0.9375rem;   /* 15px  */
  overflow: hidden;
  border-radius: 1.727rem;   /* 27.63px */
  aspect-ratio: 365 / 461;
}

/* -- Drag, when assets/slider.js is running ---------------------------------
   The script adds `.is-draggable`, which hands the strip over to native
   horizontal scrolling — that is what it drags, and it is also what gives
   touch and trackpad their own gestures for free. Everything above stays the
   no-JS fallback, so with scripts off the keyframe slider still runs. */
.gallery.is-draggable {
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  overscroll-behavior-x: contain;
  scrollbar-width: none;         /* the strip is its own affordance */
  -webkit-overflow-scrolling: touch;
}
.gallery.is-draggable::-webkit-scrollbar { display: none; }
.gallery.is-draggable .gallery__track { animation: none; }
.gallery.is-draggable.is-dragging { cursor: grabbing; }

/* Text/image selection and the browser's drag ghost both fight the gesture. */
.gallery.is-draggable .gallery__item,
.gallery.is-draggable .gallery__item img {
  user-select: none;
  -webkit-user-drag: none;
}
/* The hover zoom is a distraction mid-drag. */
.gallery.is-draggable.has-dragged .gallery__item:hover img { transform: none; }
.gallery__item picture,
.gallery__item img { width: 100%; height: 100%; }
.gallery__item img {
  object-fit: cover;
  transition: transform 0.5s ease;
}
.gallery__item:hover img { transform: scale(1.04); }

/* -----------------------------------------------------------------------------
   10. About  (Frame 7 — 1920x733, on white)
   -------------------------------------------------------------------------- */
/* The figure starts higher than the copy (82.23 vs 103), so the section pads to
   the figure and the copy takes the 20.77px difference as a margin. */
.about { padding-block: 5.139rem 4.9375rem; }

.about__inner {
  display: grid;
  grid-template-columns: 35.398rem 1fr;   /* 566.36px of copy */
  align-items: start;
}

.about__copy { margin-top: 1.298rem; }

.about__eyebrow {
  margin-bottom: 1.125rem;
  color: var(--c-blue);
}

.about__title {
  margin-bottom: 0.75rem;
  font-family: var(--font-display);
  font-size: 2.875rem;       /* 46px */
  font-weight: 600;
  line-height: 3.375rem;     /* 54px */
  letter-spacing: -0.125rem;
  color: var(--c-ink);
}

.about__text {
  font-size: 1.25rem;        /* 20px */
  line-height: 1.75rem;      /* 28px */
}
/* The Figma text node separates the two paragraphs with one blank line. */
.about__text + .about__text { margin-top: 1.75rem; }

.about__cta {
  min-width: 17.218rem;      /* 275.49px */
  margin-top: 1.5rem;
}

/* The figure is wider than its grid track on purpose: in the frame it runs
   79.66px past the right edge of the content column. */
.about__figure {
  position: relative;
  width: 44.149rem;          /* 706.39px */
  margin-left: 0.432rem;     /* 6.91px */
  aspect-ratio: 706.39 / 571.35;
}
/* Berry branches plus the offset tinted disc, straight from the Figma vectors. */
.about__ornament { width: 100%; height: 100%; }

.about__photo {
  position: absolute;
  top: 3.164%;               /* 18.08 / 571.35 */
  left: 6.191%;              /* 43.73 / 706.39 */
  width: 75.454%;            /* 533 / 706.39 */
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
}
.about__photo img { width: 100%; height: 100%; object-fit: cover; }

/* -----------------------------------------------------------------------------
   11. Footer  (Frame 9 — 1920x180)
   -------------------------------------------------------------------------- */
.site-footer {
  padding-block: 1.25rem 1.625rem;
  background: var(--c-purple-900);
  color: var(--c-white);
}

.site-footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  min-height: 3.75rem;       /* the 60px logo sets the row height */
}

.site-footer__logo { flex: none; width: 3.75rem; }
.site-footer__logo img { width: 100%; height: auto; }

.site-footer__links {
  display: flex;
  align-items: center;
  gap: 3.75rem;              /* 60px between the three items */
  font-size: 1.25rem;        /* 20px */
  font-weight: 600;
  line-height: 1.75rem;
}
.site-footer__links a { transition: color 0.18s ease; }
.site-footer__links a:hover { color: var(--c-green); }

/* Runs the full width of the frame, so it lives outside the content column. */
.site-footer__rule {
  height: 0;
  margin: 1.25rem 0 0;
  border: 0;
  border-top: 0.0625rem solid var(--c-white-30);
}

.site-footer__legal {
  margin-top: 1.5625rem;
  font-size: 1.125rem;       /* 18px */
  line-height: 1.75rem;
  text-align: center;
}

/* =============================================================================
   12. Responsive
   The Figma file ships a 480-wide Mobile frame, so everything below is taken
   from it rather than guessed. Two breaks:
     <=1024  nav collapses into the drawer, the two-column blocks stack
     <=600   the Mobile frame's type scale and card/gallery treatment

   DEVIATION: the Mobile frame uses 80px side margins on a 480 frame (16.7%).
   Held literally that leaves ~215px of content on a 390px phone, so the gutter
   drops to a conventional 20px instead. Everything else follows the frame.
   ========================================================================== */

/* Between 1025 and 1920 there is no desktop breakpoint: the fluid root scale
   above keeps the bar, the column and the gutter ornaments at their Figma
   proportions, so whatever fits at 1920 fits all the way down to the drawer.

   The nav bar is the one exception. Its labels are fixed px (16px, 14px
   submenu) so they do not shrink with the layout, while the gaps and the
   logo-clearing padding still do — and the frame fills its bar almost exactly
   at 1920. Below ~1700 that tips over: measured 22px of overflow at 1511 and
   45px at 1074 with the frame's own 35px gaps. Closing the gaps up recovers
   it; `margin-left: auto` on .site-nav then hands the leftover back to the
   space after the logo, so the arrangement still reads like the frame.
   Raising the label sizes again would need this tightened further — 18px
   overflowed by 33px at 1511 even with this block. */
@media (max-width: 106.25em) {       /* 1700px */
  .site-header__bar { gap: 1.25rem; }
  /* The link spacing is held at 1.80rem here too — the room comes out of the
     logo-clearing padding instead. Because .site-nav uses `margin-left: auto`,
     that padding is only a floor: wherever there is slack the auto margin puts
     it back, so the wide layout is unchanged and only the tight end compresses. */
  .site-header__bar { padding-left: 12.5rem; }
}

/* -- Tablet and below: drawer nav, stacked sections -------------------------- */
@media (max-width: 64em) {           /* 1024px */

  /* Header: 60px logo overhanging a 50px pill, burger at the far right. */
  .site-header { padding-top: 1.25rem; }

  .nav-toggle,
  .nav-scrim  { display: block; }
  .nav-burger { display: flex; }

  .site-header__bar {
    gap: 0;
    min-height: 3.125rem;
    margin-top: 0.3125rem;
    margin-left: 0;
    padding-left: 6.875rem;
    padding-right: 1rem;
  }
  .site-header__logo {
    top: 0;
    width: 3.75rem;
  }
  /* The Mobile frame drops the header CTA entirely. */
  .site-header__cta { display: none; }

  .nav-toggle {
    top: 0.3125rem;
    right: calc(var(--gutter) + 0.25rem);
  }
  /* Above the drawer, so the bars stay visible as the X that closes it. */
  .nav-burger  { position: relative; z-index: 55; margin-left: auto; }

  /* The language pill leaves the bar; the choice lives at the bottom of the drawer. */
  .site-header__bar { position: relative; }
  .lang { display: none; }

  /* The link list becomes a right-hand drawer. */
  .site-nav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    width: min(20rem, 82vw);
    height: 100%;
    padding: 6rem 1.75rem 2rem;
    overflow-y: auto;
    background: var(--c-purple-700);
    box-shadow: -1.25rem 0 3rem rgb(0 0 0 / 0.35);
    translate: 100% 0;
    visibility: hidden;
    transition: translate 0.3s ease, visibility 0.3s;
  }
  .nav-toggle:checked ~ .site-header__bar .site-nav {
    translate: 0 0;
    visibility: visible;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    margin-right: 0;
  }

  .site-nav__langs {
    display: flex;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 1.5rem;
    border-top: 0.0625rem solid var(--c-white-10);
  }
  .site-nav__lang {
    display: block;
    padding: 0.5rem 0.625rem;
    border-radius: 0.5rem;
    font-size: 1.75rem;
    line-height: 1;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  }
  .site-nav__lang[aria-current] { background: var(--c-white-10); box-shadow: inset 0 0 0 0.125rem var(--c-green); }
  .site-nav__link {
    padding-block: 0.75rem;
    font-size: 18px;
  }

  /* No JS to toggle them, so submenus stay open inside the drawer. */
  .site-nav__caret { display: none; }
  .site-nav__menu {
    position: static;
    min-width: 0;
    margin: 0 0 0.5rem 1rem;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    translate: none;
    transition: none;
  }
  /* The drawer keeps 16px; only the desktop dropdown drops to 14px. */
  .site-nav__menu a { padding-inline: 0; font-size: 16px; opacity: 0.75; }

  /* Hero: the Mobile frame centres the copy and drops the photo underneath. */
  .hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-top: 7.5rem;
    padding-bottom: 0;
    text-align: center;
  }
  .hero__watermark { display: none; }   /* absent from the Mobile frame */
  .hero__inner { order: 1; }
  /* Stacked, the artwork no longer has a 1080-tall column to fill, so it is
     capped and centred at its native ratio rather than stretched to the
     viewport width — which would leave a very tall, mostly empty block. */
  .hero__media {
    order: 2;
    position: static;
    width: 100%;
    max-width: 26rem;
    margin: 2.5rem auto 0;
    z-index: auto;
  }
  .hero__media img { height: auto; aspect-ratio: 983 / 1080; }
  .hero__eyebrow { margin-bottom: 1.5rem; }
  .hero__title {
    max-width: none;
    margin-bottom: 1.5rem;
    font-size: 3.25rem;
    line-height: 1.15;
  }
  .hero__lead {
    max-width: none;
    margin-inline: auto;
    margin-bottom: 2rem;
    font-size: 1.375rem;
    line-height: 1.9rem;
  }
  .hero__actions { justify-content: center; }

  .statement { padding-block: 4.5rem; }
  .statement__text { font-size: 2.5rem; line-height: 3.25rem; }

  .features { padding-block: 4.5rem; }
  .features__grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
  .features__ornament--left  { top: 1rem; left: -3rem; }
  .features__ornament--right { right: -2.5rem; }

  .contact { padding-block: 4.5rem 1.09375rem; }
  .contact__inner {
    grid-template-columns: 1fr;
    row-gap: 2.5rem;
  }
  .contact__copy,
  .contact__panel,
  .contact__meta {
    grid-column: 1;
    grid-row: auto;
  }
  .contact__copy { margin-top: 0; }
  .contact__title { font-size: 2.75rem; }
  .contact__lead { font-size: 1.375rem; line-height: 1.9rem; }
  .contact__rule { width: 100%; }
  .gallery { margin-top: 2.5rem; }
  /* Smaller frames, so the step distance shrinks with them. */
  .gallery__item { width: 16rem; margin-right: 0.75rem; }
  .gallery__track { --gallery-unit: 16.75rem; }

  /* The Mobile frame runs copy -> figure -> button, but the button belongs to
     the copy block in the markup; `display: contents` lets it be reordered. */
  .about { padding-block: 4.5rem; }
  .about__inner {
    display: flex;
    flex-direction: column;
    /* Undo the desktop grid's `align-items: start`: as a flex value it shrinks
       each item to its content width, which left the short eyebrow hugging the
       left edge while the long heading still looked centred. */
    align-items: stretch;
    text-align: center;
  }
  .about__copy { display: contents; }
  .about__figure {
    order: 1;
    align-self: center;
    width: 100%;
    max-width: 25rem;
    margin: 2.5rem 0 0;
  }
  .about__cta { order: 2; align-self: center; margin-top: 2rem; }
}

/* -- Tablet hero only: keep the desktop arrangement -------------------------
   Between the phone and the desktop there is room for the frame's real layout —
   copy on the left, artwork in the bottom-right corner — and it reads far
   better than the phone's centred stack, which left the berries floating alone
   under the text with the copy pushed off the top of the screen. Everything
   else in the <=1024 block above still applies; this only re-lays the hero. */
@media (min-width: 37.5625em) and (max-width: 64em) {   /* 601-1024px */
  .hero {
    display: block;
    min-height: 32rem;
    padding-top: 8.5rem;
    padding-bottom: 3rem;
    text-align: left;
  }

  /* Reserve the right-hand column for the artwork so the copy never runs
     underneath it. This replaces the container's right gutter, which the
     image now occupies. */
  .hero__inner { padding-right: 44%; }

  .hero__title,
  .hero__lead { margin-inline: 0; }
  .hero__actions { justify-content: flex-start; }

  .hero__media {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 46%;
    max-width: 983px;        /* still never drawn larger than its own pixels */
    margin: 0;
    z-index: -1;
  }
}

/* -- Phone: the Mobile frame, near enough 1:1 -------------------------------- */
@media (max-width: 37.5em) {         /* 600px */
  :root { --gutter: 1.25rem; }

  .btn {
    --btn-height: 3.25rem;   /* 52px */
    padding-inline: 1.5rem;
    font-size: 1.125rem;
  }
  .btn--form,
  .about__cta { --btn-height: 3.125rem; font-size: 1rem; }

  .site-header__bar { padding-left: 5.625rem; }

  .hero { padding-top: 7.5rem; }             /* eyebrow lands at y ~= 120 */
  .hero__eyebrow { font-size: 0.875rem; margin-bottom: 0.8125rem; }
  .hero__title {
    margin-bottom: 0.4375rem;
    font-size: 2.25rem;      /* 36px */
    line-height: 2.625rem;   /* 42px */
    letter-spacing: -0.125rem;
  }
  .hero__lead {
    margin-bottom: 1.3125rem;
    font-size: 1rem;
    line-height: 1.5rem;
  }
  .hero__actions { flex-direction: column; align-items: stretch; }
  /* Full bleed, at the mobile artwork's own 480x466 so nothing is stretched.
     <picture> has already swapped in hero-blueberries-mobile at this width. */
  .hero__media { max-width: none; margin-top: 1.1875rem; }
  .hero__media img { aspect-ratio: 480 / 466; }

  .statement { padding-block: 2.5rem; }
  .statement__text {
    font-size: 1.625rem;     /* 26px */
    line-height: 2.25rem;    /* 36px */
  }

  .features { padding-block: 2.5rem 3.125rem; }
  .features__grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .card {
    min-height: 16.25rem;    /* 260px */
    padding: 2.1875rem 1.5625rem 1.4375rem;
    align-items: center;
    text-align: center;
  }
  .card__icon {
    width: 3.125rem;         /* 50px */
    height: 3.125rem;
    margin-bottom: 1.125rem;
  }
  .card__title { margin-bottom: 0.5rem; font-size: 1.375rem; line-height: 1.75rem; }
  .card__text { font-size: 1rem; line-height: 1.5rem; }
  /* Mobile ornament placement is the client's, not the frame's: the box is
     letterboxed shorter than the Mobile frame's 82.62x83.44 and the upper berry
     is turned 45deg. `object-fit: contain` keeps it round inside the flat box. */
  .features__ornament {
    width: 5.164rem;
    height: 3.215rem;
  }
  .features__ornament--left {
    top: 1.25rem;
    left: -0.5rem;
    transform: rotateZ(45deg);
  }
  .features__ornament--right {
    top: auto;
    bottom: 1.6rem;
    right: -0.5rem;
  }

  .contact { padding-block: 2.5rem 0.625rem; }
  .contact__inner { row-gap: 1.5rem; text-align: center; }
  .contact__eyebrow { font-size: 0.875rem; margin-bottom: 0.5rem; }
  .contact__title {
    margin-bottom: 0.75rem;
    font-size: 2rem;         /* 32px */
    line-height: 2.625rem;
  }
  .contact__lead { font-size: 1rem; line-height: 1.5rem; }
  .contact__panel {
    padding: 1.875rem 0.9375rem 1.5rem;
    border-radius: var(--radius-card);
    text-align: left;
  }
  .contact__panel-title { margin-bottom: 1.0625rem; font-size: 1.5rem; }
  .form__row--split { grid-template-columns: 1fr; }
  .form__input {
    height: 3.125rem;        /* 50px */
    padding-inline: 0.75rem;
    font-size: 1rem;
  }
  .form__input--area { height: 5rem; padding-top: 0.9375rem; }
  .contact__rule { display: none; }        /* absent from the Mobile frame */
  .contact__social {
    justify-content: center;
    margin-top: 0;
    font-size: 1.375rem;
  }
  .contact__social img { width: 1.5625rem; height: 1.5625rem; }

  /* The Mobile frame's 5 x 158.35 with 10px gaps, running as the same marquee. */
  .gallery {
    width: calc(100% - 1.25rem);
    margin-top: 1.25rem;
  }
  .gallery__item {
    width: 9.897rem;         /* 158.35px */
    margin-right: 0.625rem;  /* 10px */
    aspect-ratio: 158.35 / 200;
    border-radius: 0.75rem;  /* 11.99px */
  }
  .gallery__track { --gallery-unit: 10.522rem; }

  .about { padding-block: 2.5rem; }
  .about__eyebrow { margin-bottom: 0.75rem; font-size: 0.875rem; }
  .about__title {
    margin-bottom: 0.75rem;
    font-size: 2rem;         /* 32px */
    line-height: 2.375rem;   /* 38px */
  }
  .about__text { font-size: 1rem; line-height: 1.5rem; }
  .about__text + .about__text { margin-top: 1.5rem; }
  .about__figure { max-width: 20rem; margin-top: 2rem; }
  .about__cta {
    align-self: stretch;
    min-width: 0;
    margin-top: 1.75rem;
  }

  .site-footer { padding-block: 1.875rem 1.5rem; }
  .site-footer__top {
    flex-direction: column;
    gap: 1.875rem;
  }
  .site-footer__logo { width: 5rem; }
  .site-footer__links {
    flex-direction: column;
    gap: 0.3125rem;
    font-size: 1.125rem;
    font-weight: 500;
  }
  .site-footer__rule { margin-top: 1.875rem; }
  .site-footer__legal { margin-top: 1.5625rem; font-size: 1rem; }
}

/* -----------------------------------------------------------------------------
   13. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Park the marquee at the start rather than letting it snap to its end frame.
     `animation: none` clears the name, so the !important duration above has
     nothing left to run. */
  .gallery__track { animation: none; }
}