@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/poppins-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/poppins-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url(fonts/poppins-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url(fonts/poppins-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(fonts/poppins-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(fonts/poppins-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Alesraa Fruits: classic exporter site. Tokens first; components in page order. */
:root {
  --ink: #161515;
  --ink-2: #47443f;
  --ink-3: #6f6a63;
  --line: #e4e0d9;
  --line-2: #cfc9bf;
  --ground: #ffffff;
  --stone: #f4f2ee;
  --green: #1e5b2c;
  --green-2: #174a23;
  --leaf: #8fc337;
  --orange: #f0883a;
  --orange-2: #e27428;
  --sun: #fcc704;
  --wa: #25d366;
  --cal-bar: #c75d12; /* 3.75:1 on --stone: the bars carry the season, so they need 3:1 (WCAG 1.4.11) */
  --field-line: #8a847b; /* 3.7:1 on white: the border is the only edge of a white field */
  --hd-h: 76px;
  --gut: clamp(16px, 4vw, 48px);
  --max: 1320px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --sec: clamp(4.5rem, 9vw, 8.5rem);
  --slide-ms: 7000ms;
  color-scheme: light;
}

/* Arial scaled to Poppins' measured width and vertical metrics (fontTools on the shipped TTFs, 2026-10-10), so text
   does not jump when the web font swaps in. Two faces because SemiBold/Bold run narrower relative to Arial Bold. */
@font-face { font-family: "Poppins Fallback"; src: local("Arial"); font-weight: 100 500; size-adjust: 111.89%; ascent-override: 93.84%; descent-override: 31.28%; line-gap-override: 8.94%; }
@font-face { font-family: "Poppins Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600 900; size-adjust: 106.02%; ascent-override: 99.04%; descent-override: 33.01%; line-gap-override: 9.43%; }

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hd-h) + 16px); }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 400 1rem/1.65 Poppins, "Poppins Fallback", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
abbr[title] { text-decoration: none; }
::selection { background: var(--sun); color: var(--ink); }
:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px var(--ink); border-radius: 2px; }
.pp-h:focus:not(:focus-visible), h2:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 3px; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.i .fill, .i.i-wa { fill: currentColor; stroke: none; }
.i-sm { width: 16px; height: 16px; }
.num { font-variant-numeric: tabular-nums; }

/* Type */
.h2 { font-size: clamp(2rem, 1.25rem + 2.6vw, 3.5rem); line-height: 1.06; font-weight: 600; letter-spacing: -.028em; text-wrap: balance; }
.sec-head { display: grid; gap: 1rem; max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sec-sub, .lede { color: var(--ink-2); font-size: clamp(1rem, .95rem + .3vw, 1.1875rem); line-height: 1.6; max-width: 62ch; text-wrap: pretty; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 48px; padding: .7rem 1.35rem; border: 1px solid transparent; border-radius: 3px;
  font-size: .9375rem; font-weight: 500; line-height: 1.2; text-decoration: none; white-space: nowrap;
  transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-lg { min-height: 56px; padding: .9rem 1.7rem; font-size: 1rem; }
.btn-email { background: var(--orange); color: var(--ink); }
@media (hover: hover) { .btn-email:hover { background: var(--orange-2); } }
.btn-wa { background: #fff; color: var(--ink); }
.btn-wa .i-wa, .btn-wa-line .i-wa { color: #1da851; }
@media (hover: hover) { .btn-wa:hover { background: #eeece8; } }
.btn-wa-dark { background: var(--ink); color: #fff; }
.btn-wa-dark .i-wa { color: var(--wa); }
@media (hover: hover) { .btn-wa-dark:hover { background: #2c2a29; } }
.btn-wa-line { border-color: var(--line-2); color: var(--ink); background: transparent; }
@media (hover: hover) { .btn-wa-line:hover { border-color: var(--ink); } }
.btn-solid { background: var(--green); color: #fff; }
@media (hover: hover) { .btn-solid:hover { background: var(--green-2); } }
.btn-ghost { border-color: var(--line-2); background: transparent; }
@media (hover: hover) { .btn-ghost:hover { border-color: var(--ink); } }

/* Header */
.hd { position: fixed; inset: 0 0 auto; z-index: 50; color: var(--ink); background: #fff; border-bottom: 1px solid var(--line); transition: background-color .35s, color .35s, border-color .35s; }
.home .hd:not(.is-solid) { background: transparent; color: #fff; border-color: transparent; }
.home .hd:not(.is-solid)::before { content: ""; position: absolute; inset: 0 0 -64px; z-index: -1; pointer-events: none; background: linear-gradient(rgba(22, 21, 21, .7), rgba(22, 21, 21, .35) 55%, rgba(22, 21, 21, 0)); }
.hd-bar { display: flex; align-items: center; gap: 2rem; height: var(--hd-h); }
.brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--green); margin-right: auto; }
.home .hd:not(.is-solid) .brand { color: #fff; }
.wordmark { display: inline-flex; line-height: 0; }
.brand .wordmark svg { height: 40px; width: auto; }
.wordmark-full svg { width: 22rem; max-width: 100%; height: auto; } /* 22rem keeps the tagline above 10px */
.hd-links { display: flex; align-items: center; gap: .25rem; }
.hd-link { display: inline-flex; align-items: center; gap: .35rem; padding: .5rem .85rem; border: 0; background: none; font-size: .9375rem; font-weight: 500; text-decoration: none; border-radius: 3px; }
.hd-link:hover { text-decoration: underline; }
.mega-btn .i { transition: transform .3s var(--ease); }
.mega-btn[aria-expanded="true"] .i { transform: rotate(180deg); }
.hd-end { display: flex; align-items: center; gap: 1.25rem; }
.langs { display: flex; gap: .15rem; }
.lang { display: inline-block; padding: .35rem .45rem; font-size: .8125rem; font-weight: 500; letter-spacing: .04em; text-decoration: none; }
.lang:hover { text-decoration: underline; }
.lang.is-current { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: .45em; }
/* Language switch (site.js adds .is-switch): globe, code and caret on a button; the list drops below it. Over the
   hero the button gets its own dark backing, so its text keeps 4.5:1 on the lightest photo. Without JavaScript the
   list stays in the header as codes. */
.lang-pick { position: relative; }
.lang-pick:not(.is-switch) .lang-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lang-btn { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .45rem .7rem; border: 1px solid var(--line-2); border-radius: 3px; background: transparent; font-size: .875rem; font-weight: 500; letter-spacing: .04em; }
.lang-btn[hidden], .is-switch .lang-list[hidden] { display: none; }
.lang-btn .i { width: 18px; height: 18px; }
.lang-btn .i-sm { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.lang-btn[aria-expanded="true"] .i-sm { transform: rotate(180deg); }
@media (hover: hover) { .lang-btn:hover { border-color: currentColor; } }
.home .hd:not(.is-solid) .lang-btn { background: rgba(22, 21, 21, .4); border-color: rgba(255, 255, 255, .5); }
.is-switch .lang-list { position: absolute; top: calc(100% + 8px); right: 0; z-index: 2; display: grid; min-width: 12rem; padding: .4rem; background: #fff; color: var(--ink); border: 1px solid var(--line-2); border-radius: 6px; box-shadow: 0 24px 48px -20px rgba(22, 21, 21, .45); animation: drop .25s var(--ease); }
.is-switch .lang { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; padding: .5rem .75rem; border-radius: 4px; font-size: .9375rem; letter-spacing: 0; }
.is-switch .lang:hover { background: var(--stone); text-decoration: none; }
.is-switch .lang.is-current { text-decoration: none; font-weight: 600; }
.is-switch .lang.is-current .lang-name { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: .35em; }
.is-switch .lang-code { font-size: .75rem; font-weight: 500; letter-spacing: .06em; color: var(--ink-3); }
.menu-btn .i-close, .menu-btn[aria-expanded="true"] .i-open { display: none; }
.menu-btn[aria-expanded="true"] .i-close { display: block; }
.menu-btn { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border: 0; background: none; }

.mega { position: absolute; inset: 100% 0 auto; background: #fff; color: var(--ink); border-top: 1px solid var(--line); box-shadow: 0 30px 50px -30px rgba(22, 21, 21, .35); }
.mega:not([hidden]) { animation: drop .32s var(--ease); }
.mega-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem; padding-block: 2.25rem 2.75rem; }
.mega-h, .drawer-h, .ex-gh, .ft-h { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .9rem; }
.mega-item { display: flex; align-items: center; gap: .9rem; padding: .4rem 0; text-decoration: none; font-weight: 500; }
.mega-item img { width: 72px; height: 54px; object-fit: cover; background: var(--stone); }
.mega-item:hover span { color: var(--green); text-decoration: underline; }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } }

.drawer { position: fixed; inset: var(--hd-h) 0 0; background: #fff; color: var(--ink); overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--line); }
.drawer:not([hidden]) { animation: drop .3s var(--ease); }
.drawer-in { padding: 1.25rem var(--gut) 3rem; display: grid; gap: 1.25rem; }
.drawer-cta { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.drawer-cta .btn { min-width: 0; padding-inline: .75rem; }
.drawer-h { margin: 1.25rem 0 .4rem; }
.drawer-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.drawer-list a, .drawer-more a { display: block; padding: .55rem 0; font-size: 1.0625rem; font-weight: 500; text-decoration: none; }
.drawer-more { border-top: 1px solid var(--line); padding-top: 1rem; }
.langs-drawer { gap: .25rem 1rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: .5rem; }
.langs-drawer li:first-child .lang { padding-left: 0; } /* text in line with the headings below */
.langs-drawer .lang { padding-block: .6rem; font-size: .9375rem; letter-spacing: 0; }

/* Hero */
.hero { touch-action: pan-y; position: relative; height: 100vh; height: 100svh; min-height: 600px; max-height: 1080px; color: #fff; background: var(--ink); isolation: isolate; }
.hero-slides, .slide, .slide-media { position: absolute; inset: 0; }
.slide-media { overflow: hidden; } /* clips the slow zoom only, so overflowing copy or buttons stay visible to tests */
.slide { opacity: 0; visibility: hidden; transition: opacity 1.2s var(--ease), visibility 0s 1.2s; }
.slide.is-active { opacity: 1; visibility: visible; transition: opacity 1.2s var(--ease), visibility 0s; z-index: 1; }
.slide-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(22, 21, 21, .78) 0%, rgba(22, 21, 21, .38) 42%, rgba(22, 21, 21, 0) 70%), linear-gradient(90deg, rgba(22, 21, 21, .45), rgba(22, 21, 21, 0) 65%); }
.slide-img { width: 100%; height: 100%; object-fit: cover; transform-origin: 60% 50%; }
.pos-hero-packhouse { object-position: 60% 50%; }
.pos-hero-range { object-position: 65% 50%; }
.pos-hero-reefers { object-position: 70% 50%; }
.slide.is-active .slide-img { animation: kb 11s linear both; }
.hero:not(.is-playing) .slide-img { animation-play-state: paused; }
@keyframes kb { from { transform: scale(1.09); } to { transform: scale(1); } }
/* The copy sits above the buttons whatever their height (one row, or two when they wrap): site.js measures the button
   block into --ui-h, and the value below is the fallback without JavaScript. */
.hero { --ui-bottom: clamp(2rem, 5vh, 3.25rem); --ui-h: 56px; }
@media (min-width: 641px) and (max-width: 1180px) { .hero { --ui-h: 124px; } } /* the three buttons wrap to two rows */
/* Bottom-anchored, with a top edge 1.5rem under the header: "safe end" lets a copy that does not fit run down onto the
   buttons (which the tests catch) instead of up under the header. The headline follows the window's height as well as
   its width, so four lines fit a 657 px tall laptop window; words break only where the text allows it. */
.slide-copy { position: absolute; inset: calc(var(--hd-h) + 1.5rem) 0 calc(var(--ui-bottom) + var(--ui-h) + clamp(1.75rem, 5vh, 3.5rem)); display: grid; align-content: end; align-content: safe end; gap: 1.25rem; }
.hero-h { max-width: 15ch; font-size: clamp(2rem, min(1.3rem + 4.6vw, 7.5vh), 5.75rem); hyphens: manual; overflow-wrap: break-word; font-weight: 600; line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; }
.hero-p { max-width: 44ch; font-size: clamp(1rem, .92rem + .4vw, 1.25rem); line-height: 1.55; color: rgba(255, 255, 255, .88); }
.slide.is-entering .hero-h { animation: rise-in 1.1s var(--ease) .35s both; }
.slide.is-entering .hero-p { animation: rise-in 1.1s var(--ease) .55s both; }
@keyframes rise-in { from { opacity: 0; transform: translateY(26px); } }
.hero-ui { position: absolute; inset: auto 0 var(--ui-bottom); z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero-cta [hidden] { display: none; }
.hero-ctrl { display: flex; align-items: center; gap: .6rem; }
.hero-ctrl[hidden] { display: none; }
.js .hero-ctrl[hidden] { display: flex; visibility: hidden; } /* its room is kept until site.js shows it: no shift */
.hero-count { font-size: .875rem; font-weight: 500; letter-spacing: .06em; font-variant-numeric: tabular-nums; margin-right: .6rem; color: rgba(255, 255, 255, .85); }
.hero-progress { display: flex; gap: 6px; margin-right: .9rem; }
.bar { width: 44px; height: 2px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.bar i { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left; }
.bar.is-done i { transform: scaleX(1); }
.hero.is-playing .bar.is-active i { animation: prog var(--slide-ms) linear forwards; }
.hero.is-held .bar.is-active i { animation-play-state: paused; }
@keyframes prog { to { transform: scaleX(1); } }
.ctrl { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .45); border-radius: 50%; background: rgba(22, 21, 21, .15); color: #fff; transition: background-color .2s, border-color .2s; }
@media (hover: hover) { .ctrl:hover { background: rgba(255, 255, 255, .16); border-color: #fff; } }
.i-play { display: none; }
.hero:not(.is-playing) .i-play { display: block; }
.hero:not(.is-playing) .i-pause { display: none; }

/* Intro */
.intro { padding-block: var(--sec); }
.intro-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.intro-lead { display: grid; gap: 1.5rem; }
.season-tag { display: inline-flex; align-items: center; gap: .6rem; font-size: .9375rem; font-weight: 500; color: var(--green); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 0 4px rgba(143, 195, 55, .22); }
.intro-body { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.lede { font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); color: var(--ink); line-height: 1.55; }
.person { border-top: 1px solid var(--ink); padding-top: 1rem; display: grid; gap: .35rem; justify-items: start; }
.quote-h { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.person-name { font-size: 1.375rem; font-weight: 600; letter-spacing: -.01em; }
.person-lines { font-size: 1rem; line-height: 1.7; }
.person-lines a, .pp-person a { color: var(--green); }
.person-lines a { display: inline-block; padding-block: .15rem; } /* 24px targets on their own lines */
.person-note { font-size: .875rem; color: var(--ink-2); }

/* Season strip */
.season-strip { background: var(--stone); border-bottom: 1px solid var(--line); }
.ss-wrap { display: flex; flex-wrap: wrap; gap: .6rem 2.5rem; padding-block: 1rem; }
.ss-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1rem; font-size: .9375rem; }
.ss-row[hidden], .ss-p[hidden] { display: none; }
.ss-k { font-weight: 600; color: var(--green); }
.ss-p { color: var(--ink); text-underline-offset: 3px; }

/* Products */
.products { padding-block: 0 var(--sec); }
.explorer { display: grid; grid-template-columns: 250px 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
/* The whole list fits a 768px-tall laptop screen; on a shorter one it scrolls inside its own box. The side padding keeps
   the links' negative margin and focus ring inside that box. */
.ex-nav { position: sticky; top: calc(var(--hd-h) + 24px); display: grid; gap: 1rem; max-height: calc(100dvh - var(--hd-h) - 24px); overflow-y: auto; overscroll-behavior: contain; padding-inline: .75rem; margin-inline: -.75rem; }
.ex-gh { margin-bottom: .2rem; }
.ex-link { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .4rem .75rem; margin-inline: -.75rem; border-radius: 3px; text-decoration: none; transition: background-color .2s, color .2s; }
.ex-name { font-weight: 500; }
.ex-months { font-size: .75rem; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (hover: hover) { .ex-link:hover { background: var(--stone); } }
.ex-link[aria-current="true"] { background: var(--green); color: #fff; }
.ex-link[aria-current="true"] .ex-months { color: rgba(255, 255, 255, .75); }
.ex-panels { display: grid; gap: clamp(3rem, 6vw, 5rem); min-width: 0; }
.js .ex-panels { gap: 0; }
.pp { display: grid; gap: clamp(1.25rem, 2vw, 2.5rem); scroll-margin-top: calc(var(--hd-h) + 24px); }
.pp[hidden], .js:not(.ex-ready) .pp:not(:first-child) { display: none; }
.pp-fig { position: relative; background: var(--stone); overflow: hidden; }
.pp-fig img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
/* Short desktop screens (laptops): photo, name, price buttons and specs fit one screen together. The photo keeps its
   whole 16:9 frame and gives up width instead: photo over specs on the left, name and buttons on the right. Cropping
   it to a strip cut the fruit (user, 2026-10-20). Taller screens keep the full-width photo. */
@media (min-width: 1001px) and (max-height: 949px) {
  .pp { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); grid-template-areas: "fig main" "spec main"; column-gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
  .pp .pp-body { display: contents; } /* ".pp ." outranks the base .pp-body grid rule further down */
  .pp .pp-fig { grid-area: fig; }
  .pp .pp-main { grid-area: main; }
  .pp .spec { grid-area: spec; }
  .pp .spec > div { padding-block: .6rem; } /* garlic's two-line rows still end above a 768 px screen */
}
.pp-fig img[hidden] { display: none; } /* the global img rule would otherwise show the hidden gallery photos */
.pp-fig figcaption, .sheet-fig figcaption { position: absolute; right: 10px; bottom: 8px; font-size: .75rem; color: #fff; background: rgba(22, 21, 21, .72); padding: 2px 8px; border-radius: 2px; }
/* Product gallery: the main photo first; arrows only with JavaScript (without it the first photo stands alone) */
.pp-gal { display: none; position: absolute; left: 10px; bottom: 8px; align-items: center; color: #fff; background: rgba(22, 21, 21, .72); border-radius: 2px; }
.js .pp-gal { display: flex; }
.gal-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: inherit; cursor: pointer; }
.gal-btn:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
@media (hover: hover) { .gal-btn:hover { background: rgba(255, 255, 255, .16); } }
.gal-n { min-width: 3em; text-align: center; font-size: .75rem; font-variant-numeric: tabular-nums; }
.pp.is-entering .pp-fig img { animation: plate .9s var(--ease) both; }
.pp.is-entering .pp-main, .pp.is-entering .spec { animation: rise .7s var(--ease) both; }
.pp.is-entering .spec { animation-delay: .08s; }
@keyframes plate { from { opacity: 0; transform: scale(1.045); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.pp-body { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.pp-main { display: grid; gap: 1rem; align-content: start; }
.pp-h { font-size: clamp(2rem, 1.4rem + 1.8vw, 3rem); font-weight: 600; letter-spacing: -.028em; line-height: 1.05; }
.pp-status { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 500; color: var(--ink-2); }
.pp-status.is-in { color: var(--green); }
.pp-status.is-in::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 0 4px rgba(143, 195, 55, .22); }
.spec { border-top: 1px solid var(--line); }
.spec > div { display: grid; grid-template-columns: minmax(7.5rem, 38%) 1fr; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.spec dt { font-size: .8125rem; font-weight: 500; color: var(--ink-3); padding-top: .1rem; }
.spec dd { font-size: .9688rem; font-weight: 500; overflow-wrap: break-word; }
.mini-cal { display: flex; gap: 2px; }
.mini-cal i { flex: 1; height: 6px; background: var(--line); }
.mini-cal i.on { background: var(--orange); }
.mini-axis { display: flex; justify-content: space-between; margin: .15rem 0 .35rem; font-size: .6875rem; font-weight: 500; color: var(--ink-3); }
/* one column as wide as the longer button, so the two stack at the same width */
.pp-cta { display: grid; grid-template-columns: minmax(0, max-content); gap: .65rem; margin-top: .6rem; }
.pp-cta .btn { justify-content: flex-start; white-space: normal; text-align: left; }
.pp-person { font-size: .875rem; color: var(--ink-2); overflow-wrap: anywhere; }
.pp-person a { display: inline-block; padding-block: .6rem; }
.pp-person a[href^="https://wa.me/"] { white-space: nowrap; }
.pp-note { font-size: .8125rem; color: var(--ink-3); }


/* Season calendar. site.js marks one active row (pointer, keyboard focus or a tap) and shows the shared tip. */
.season { padding-block: var(--sec); background: var(--stone); }
.cal-wrap { position: relative; }
.cal-scroll { padding-top: 1.5rem; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
/* More months to the right (641-1000 px, where the table still scrolls): a fade on the right edge, never over names */
.cal-wrap::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 16px; pointer-events: none; background: linear-gradient(90deg, rgba(244, 242, 238, 0), var(--stone)); opacity: 0; transition: opacity .2s; }
.cal-wrap.is-more::after { opacity: 1; }
.cal { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; font-size: .875rem; }
.cal th, .cal td { padding: 0; text-align: center; font-weight: 500; }
.cal thead th { position: relative; padding: 0 0 .9rem; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line-2); transition: color .15s; }
.cal .m-n { display: none; }
.cal .cal-p { text-align: left; width: 13rem; padding-right: 1rem; position: sticky; left: 0; background: var(--stone); z-index: 1; }
.cal tbody .cal-p a { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; text-decoration: none; font-weight: 500; transition: color .15s; }
.cal tbody .cal-p a:hover { text-decoration: underline; color: var(--green); }
.cal tr.is-in .cal-p a::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 0 3px rgba(143, 195, 55, .25); }
.cal-g th { text-align: left; padding: 1.4rem 0 .35rem; font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--green); position: sticky; left: 0; }
.cal tbody tr:not(.cal-g) > * { height: 44px; border-bottom: 1px solid var(--line); }
.cal td { position: relative; }
.cal td.on::before { content: ""; position: absolute; top: var(--bar-in, 15px); bottom: var(--bar-in, 15px); left: -1px; right: -1px; background: var(--cal-bar); transform-origin: left; transition: top .15s var(--ease), bottom .15s var(--ease); }
.cal td.on.s::before { left: 4px; border-radius: 7px 0 0 7px; }
.cal td.on.e::before { right: 4px; border-radius: 0 7px 7px 0; }
.cal .is-now { background: rgba(240, 136, 58, .1); }
.cal thead th.is-now { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
/* The current month: a thin line down the column (under the bars) and a small label above its header */
.cal tbody td.is-now { background-image: linear-gradient(rgba(226, 116, 40, .55), rgba(226, 116, 40, .55)); background-size: 1.5px 100%; background-position: center; background-repeat: no-repeat; }
.cal-now { position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); padding: 1px 6px; border-radius: 3px; background: var(--ink); color: #fff; font-size: .625rem; font-weight: 600; letter-spacing: .06em; line-height: 1.5; white-space: nowrap; }
/* The active row: thicker bar and a light orange tint. The other rows stay readable: their bars take the bar colour
   at 90 % over the background, 3.3:1 (.55 would drop them near 2:1, Sol r9), as a colour rather than opacity, which
   would darken the 1 px where neighbouring cells overlap; their names turn grey. */
.cal tr.is-active { --bar-in: 12px; }
.cal tr.is-active > td { box-shadow: inset 0 0 0 999px rgba(240, 136, 58, .1); }
.cal tr.is-active > .cal-p { background: #f4e7dc; }
.cal.has-active tr[data-row]:not(.is-active) td.on::before { background: #cc6c28; }
.cal.has-active tr[data-row]:not(.is-active) .cal-p a { color: var(--ink-3); }
.cal thead th.is-span { color: var(--ink); }
.js .cal td.on::before { transform: scaleX(0); transition: transform .9s var(--ease), top .15s var(--ease), bottom .15s var(--ease); }
.js .cal.is-in td.on::before { transform: none; }
.js .cal.is-in tbody:nth-of-type(2) td.on::before { transition-delay: .12s, 0s, 0s; }
.js .cal.is-in tbody:nth-of-type(3) td.on::before { transition-delay: .24s, 0s, 0s; }
.js .cal.is-in tbody:nth-of-type(4) td.on::before { transition-delay: .36s, 0s, 0s; }
/* The tip: fixed to the window, above the bar (below it when the header is in the way), arrow at --ax */
.cal-legend { display: flex; align-items: center; gap: .55rem; margin-top: 1.25rem; font-size: .875rem; color: var(--ink-2); }
.cal-legend[hidden] { display: none; }
.cal-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 0 3px rgba(143, 195, 55, .25); }
.cal-tip { position: fixed; z-index: 45; top: 0; left: 0; display: grid; gap: .1rem; max-width: min(18rem, calc(100vw - 24px)); padding: .55rem .8rem .6rem; border-radius: 6px; background: var(--ink); color: #fff; font-size: .8125rem; line-height: 1.4; box-shadow: 0 14px 30px -12px rgba(22, 21, 21, .55); opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s var(--ease); }
.cal-tip.is-shown { opacity: 1; transform: none; }
.cal-tip[hidden] { display: none; }
.cal-tip b { font-size: .9375rem; font-weight: 600; }
.cal-tip::after { content: ""; position: absolute; left: var(--ax, 50%); top: 100%; width: 10px; height: 10px; margin: -5px 0 0 -5px; background: var(--ink); transform: rotate(45deg); }
.cal-tip.is-below::after { top: 0; }
.cal-tip-st { display: inline-flex; align-items: center; gap: .45rem; color: rgba(255, 255, 255, .78); }
.cal-tip-st.is-in { color: #c9e89a; }
.cal-tip-st.is-in::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--leaf); }

/* How we work. Steps come in as they reach the screen (site.js adds .is-in): the rule draws, the number fills. */
.how { position: relative; isolation: isolate; color: #fff; background: var(--ink); padding-block: var(--sec); overflow: hidden; }
.how-media { position: absolute; inset: 0; z-index: -1; }
.how-media img { width: 100%; height: 100%; object-fit: cover; }
.how-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(22, 21, 21, .92), rgba(22, 21, 21, .74)); }
.how-in { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.step { position: relative; display: grid; gap: .65rem; align-content: start; margin-inline: -.9rem; padding: 1.25rem .9rem 1.4rem; border-radius: 4px; transition: transform .2s var(--ease), background-color .2s; }
.step::before, .step::after { content: ""; position: absolute; top: 0; left: .9rem; right: .9rem; height: 1px; background: rgba(255, 255, 255, .35); transform-origin: left; transition: transform .5s var(--ease); }
.step::after { height: 2px; background: var(--orange); transform: scaleX(0); transition-duration: .3s; }
.step-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.step-n { font-size: clamp(2.5rem, 2rem + 1.5vw, 3.5rem); font-weight: 400; line-height: 1; color: var(--orange); font-variant-numeric: tabular-nums; -webkit-text-stroke: 1px var(--orange); transition: color .5s var(--ease); }
.step-i { width: 28px; height: 28px; stroke-width: 1.4; color: rgba(255, 255, 255, .7); }
.step-t { font-size: 1.1875rem; font-weight: 600; letter-spacing: -.01em; }
.step-d { color: rgba(255, 255, 255, .8); font-size: .9688rem; line-height: 1.6; }
.rv .step:not(.is-in)::before { transform: scaleX(0); }
.rv .step:not(.is-in) .step-n { color: transparent; }
.step.is-in::before, .step.is-in .step-n { transition-delay: var(--rd, 0ms); }
@media (hover: hover) and (pointer: fine) {
  .step:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .06); }
  .step:hover::after { transform: scaleX(1); }
}
/* A tap on a phone: a short press, then nothing stays selected (the steps hold no action) */
.step.is-pressed { animation: press .2s var(--ease); }
.step.is-pressed::after { animation: rule-pulse .45s var(--ease); }
@keyframes press { 50% { transform: scale(.99); } }
@keyframes rule-pulse { 0% { transform: scaleX(0); opacity: 1; } 55% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }

/* Section entrances: headings and their first lines rise in once (site.js adds .rv only after its observer is set
   up, and reveals at once what is already on screen or when the page opens at an anchor) */
.reveal { transition: opacity .4s var(--ease), transform .4s var(--ease); transition-delay: var(--rd, 0ms); }
.rv .reveal:not(.is-in) { opacity: 0; transform: translateY(16px); }

/* Enquiry */
.enquiry { padding-block: var(--sec); }
.enq-grid { display: grid; grid-template-columns: 4fr 7fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.enq-head { display: grid; gap: 1rem; position: sticky; top: calc(var(--hd-h) + 32px); }
.quote-need { display: grid; gap: .6rem; margin-top: .75rem; border-top: 1px solid var(--line-2); padding-top: 1.1rem; }
.quote-list { display: grid; gap: .3rem; padding-left: 1.25rem; list-style: decimal; font-size: .9375rem; }
.quote-list li::marker { color: var(--green); font-weight: 600; }
.quote-rest { font-size: .9375rem; color: var(--ink-2); }
.enq { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1.25rem; }
.field { display: grid; gap: .4rem; min-width: 0; }
.field-wide { grid-column: 1 / -1; }
.field label { font-size: .8125rem; font-weight: 500; color: var(--ink-2); }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: .75rem .9rem; border: 1px solid var(--field-line); border-radius: 3px; background: #fff; font-size: 1rem; transition: border-color .2s, box-shadow .2s; }
.field select { appearance: none; padding-right: 2.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23161515' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; background-size: 18px; }
.field textarea { min-height: 15rem; resize: vertical; line-height: 1.55; font-size: 1rem; background: #fff; }
.field input::placeholder { color: var(--ink-3); opacity: 1; }
.field :is(input, select, textarea):hover { border-color: var(--ink-3); }
.field :is(input, select, textarea):focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(30, 91, 44, .18); }
.field-note { font-size: .8125rem; color: var(--ink-3); }
.enq:not(.is-ready) { display: none; }
.enq-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: .5rem; }
.enq-status { font-size: .875rem; color: var(--green); font-weight: 500; min-height: 1.4em; }

/* Contact */
.contact { background: var(--green); color: #fff; padding-block: var(--sec); }
.contact-grid { display: grid; grid-template-columns: 7fr 4fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: end; }
.contact-h { font-size: clamp(2.25rem, 1.2rem + 3.6vw, 4.75rem); font-weight: 600; line-height: 1.03; letter-spacing: -.035em; text-wrap: balance; max-width: 16ch; }
.contact-p { margin-top: 1.5rem; max-width: 48ch; color: rgba(255, 255, 255, .85); font-size: 1.0625rem; }
.contact-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }
.contact-dl { display: grid; gap: 1.25rem; }
.contact-dl > div { border-top: 1px solid rgba(255, 255, 255, .3); padding-top: .9rem; display: grid; gap: .2rem; }
.contact-dl dt { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .72); font-weight: 500; }
.contact-dl dd { font-size: 1.125rem; font-weight: 500; overflow-wrap: anywhere; }
.contact-dl a { text-decoration-color: rgba(255, 255, 255, .45); }
.contact-dl a:hover { text-decoration-color: #fff; }

/* Footer */
.ft { background: var(--ink); color: rgba(255, 255, 255, .78); font-size: .9375rem; padding-top: clamp(3.5rem, 7vw, 5.5rem); }
.ft a { text-decoration: none; }
.ft a:hover { color: #fff; text-decoration: underline; }
.ft-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 2rem; padding-bottom: 3rem; }
.ft-word { color: #fff; margin-bottom: 1rem; }
.ft-line { line-height: 1.7; }
.ft-line + .ft-line { margin-top: .75rem; }
.ft-contact a { display: inline-block; padding-block: .55rem; } /* 44 px targets */
.ft-h { color: rgba(255, 255, 255, .6); }
.ft-col li + li { margin-top: .35rem; }
.ft-base { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; border-top: 1px solid rgba(255, 255, 255, .16); padding-block: 1.5rem 2rem; font-size: .8125rem; }
.ft-legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.langs-ft { margin-left: auto; }
.langs-ft .lang { letter-spacing: 0; }
.ft-note { flex-basis: 100%; color: rgba(255, 255, 255, .6); }

/* Contact dock */
.dock { position: fixed; z-index: 40; right: 20px; bottom: 20px; display: flex; gap: 8px; transform: translateY(140%); opacity: 0; transition: transform .45s var(--ease), opacity .3s; }
.dock.is-on { transform: none; opacity: 1; }
.dock[hidden] { display: none; }
.dock-btn { display: inline-flex; align-items: center; gap: .55rem; min-height: 48px; padding: .65rem 1.15rem; border-radius: 3px; font-size: .9375rem; font-weight: 500; text-decoration: none; box-shadow: 0 10px 28px -8px rgba(22, 21, 21, .45); }
.dock-mail { background: var(--orange); color: var(--ink); }
.dock-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px var(--ink); }
@media (hover: hover) { .dock-mail:hover { background: var(--orange-2); } }
.dock-wa { background: var(--ink); color: #fff; }
.dock-wa .i-wa { color: var(--wa); }
@media (hover: hover) { .dock-wa:hover { background: #2c2a29; } }

/* Email chooser (desktop; site.js places it beside the email link that opened it) */
.mailpick { position: fixed; z-index: 60; width: min(19rem, calc(100vw - 24px)); background: #fff; color: var(--ink); border: 1px solid var(--line-2); border-radius: 6px; box-shadow: 0 24px 48px -20px rgba(22, 21, 21, .45); padding: .5rem .5rem .75rem; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
.mailpick[hidden] { display: none; }
.mailpick-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .25rem .25rem .25rem .75rem; }
.mailpick-h { margin: 0; font-size: .8125rem; font-weight: 500; color: var(--ink-2); }
.mailpick-x { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 4px; background: transparent; color: var(--ink); cursor: pointer; }
.mailpick-list { list-style: none; margin: 0; padding: 0; }
.mailpick-list a, .mailpick-list button { display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; min-height: 44px; padding: .5rem .75rem; border: 0; border-radius: 4px; background: transparent; color: var(--ink); font: inherit; font-size: .9375rem; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; }
.mailpick-list .i { width: 18px; height: 18px; color: var(--ink-3); }
@media (hover: hover) { .mailpick-list a:hover, .mailpick-list button:hover, .mailpick-x:hover { background: var(--stone); } }
.mailpick-addr { margin: .5rem .75rem 0; font-size: .875rem; color: var(--ink-2); user-select: all; overflow-wrap: anywhere; }
.mailpick-status { margin: .25rem .75rem 0; font-size: .8125rem; color: var(--green); }
.mailpick-status:empty { display: none; }

/* Legal pages */
.doc-page main { padding-top: var(--hd-h); }
.doc { max-width: calc(46rem + 2 * var(--gut)); padding-block: clamp(3rem, 7vw, 5.5rem); }
.doc-back { font-size: .875rem; margin-bottom: 2rem; }
.doc-back a { color: var(--green); }
.doc-h { font-size: clamp(2.25rem, 1.6rem + 2vw, 3.25rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.08; }
.doc-meta { margin-top: .75rem; color: var(--ink-3); font-size: .875rem; }
.doc-body { margin-top: 2.5rem; display: grid; gap: 1rem; color: var(--ink-2); }
.doc-body h2 { margin-top: 1.5rem; font-size: 1.25rem; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.doc-body a { color: var(--green); }
.credits { display: grid; gap: .6rem; padding-left: 1.1rem; list-style: disc; font-size: .9375rem; overflow-wrap: anywhere; }
.credits strong { color: var(--ink); font-weight: 500; }

/* Spec sheets: one product per page, printed on one A4 sheet */
.sheet { max-width: calc(56rem + 2 * var(--gut)); padding-block: clamp(2.5rem, 6vw, 4.5rem); display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.sheet .doc-back { margin-bottom: 0; }
.sheet-h { font-size: clamp(2.25rem, 1.6rem + 2vw, 3.25rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.05; }
.sheet-sub { margin-top: .5rem; font-size: .9375rem; color: var(--ink-2); }
.sheet-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: .75rem; }
.sheet-fig { position: relative; background: var(--stone); }
.sheet-fig img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.sheet-note { font-size: .8125rem; color: var(--ink-3); }
.sheet-logo { display: none; color: var(--green); margin-bottom: 1.25rem; } /* print only: on screen the header carries it */
.sheet-logo .wordmark-full svg { width: 16rem; }
.sheet-contact { display: flex; flex-wrap: wrap; gap: .75rem 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--ink); }
.sheet-contact dt { font-size: .75rem; color: var(--ink-3); }
.sheet-contact dd { font-weight: 500; overflow-wrap: anywhere; }
.sheet-contact a { color: var(--green); }
.sheet-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.sheet-actions .btn { white-space: normal; text-align: left; }
.sheet-actions [hidden] { display: none; }
.pp-sheet a { display: inline-flex; align-items: center; gap: .45rem; padding-block: .3rem; font-size: .875rem; font-weight: 500; color: var(--green); }
.pp-sheet .i { width: 18px; height: 18px; }

/* Responsive */
@media (max-width: 1180px) {
  .hd-links .hd-link { padding-inline: .6rem; }
  .hd-cta { display: none; }
  .ft-grid { grid-template-columns: repeat(4, 1fr); }
  .ft-brand { grid-column: 1 / -1; }
}
@media (max-width: 1000px) {
  :root { --hd-h: 64px; }
  .hd-nav, .hd-end > .lang-pick { display: none; }
  .menu-btn { display: inline-flex; }
  .intro-grid, .enq-grid, .contact-grid { grid-template-columns: 1fr; }
  .enq-head { position: static; }
  .explorer { grid-template-columns: 1fr; gap: 1.75rem; }
  .ex-nav { top: var(--hd-h); z-index: 5; display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gut)); padding: .75rem var(--gut); background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--line); }
  .ex-nav::-webkit-scrollbar { display: none; }
  .ex-group { display: contents; }
  .ex-group ul { display: contents; }
  .ex-gh { display: none; }
  .ex-link { margin: 0; padding: .5rem .9rem; border: 1px solid var(--line-2); white-space: nowrap; }
  .ex-months { display: none; }
  .no-js .ex-nav { position: static; flex-wrap: wrap; }
  .pp { scroll-margin-top: calc(var(--hd-h) + 72px); }
  .pp-body { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 641px) {
  .step-t { min-height: 2lh; } /* two-line German titles keep the cards in line */
}
@media (max-width: 1000px) {
  .hero-progress, .hero-count { display: none; }
}
@media (max-width: 640px) {
  .brand .wordmark svg { height: 34px; }
  .hero { min-height: 560px; }
  .hero-ui { flex-direction: column; align-items: stretch; gap: 1.25rem; }
  .hero-cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .hero-cta .btn { min-width: 0; padding-inline: .75rem; white-space: normal; text-align: center; }
  .hero-cta .btn-solid { grid-column: 1 / -1; }
  .hero-ctrl { justify-content: flex-end; }
  .ctrl { width: 44px; height: 44px; }
  .hero { --ui-h: 12rem; } /* citrus button on its own row, then email and WhatsApp, then the slide controls */
  .steps { grid-template-columns: 1fr; }
  /* Calendar: no sideways scroll. Each product is a name line over a 12-month strip that fills the width. */
  .cal { min-width: 0; display: block; }
  .cal thead, .cal tbody { display: block; }
  .cal tr { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .cal thead .cal-p { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; border: 0; }
  .cal thead th { padding-bottom: .6rem; letter-spacing: 0; }
  .cal .m-s { display: none; }
  .cal .m-n { display: inline; }
  .cal .cal-p, .cal-g th { grid-column: 1 / -1; position: static; width: auto; }
  .cal tbody tr:not(.cal-g) > .cal-p { height: auto; padding: .35rem 0 0; border-bottom: 0; background: none; }
  /* nothing scrolls sideways here, so the month row can stay under the header while the rows scroll by */
  .cal-scroll { overflow: visible; padding-top: 0; }
  .cal thead { position: sticky; top: var(--hd-h); z-index: 2; padding-top: 1.4rem; background: var(--stone); }
  .cal tr.is-active > .cal-p { background: #f4e7dc; }
  .cal-g th { padding-top: 1.6rem; }
  .enq { grid-template-columns: 1fr; }
  .enq-actions .btn { flex: 1 1 100%; white-space: normal; }
  .pp-cta { grid-template-columns: minmax(0, 1fr); }
  .ss-p { padding-block: .3rem; } /* 24px+ targets for the strip links on touch screens */
  .ft-grid { grid-template-columns: 1fr 1fr; }
  .langs-ft { margin-left: -.45rem; } /* the links' own padding: their text lines up with the legal links */
  .dock { inset: auto 0 0; gap: 0; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line); }
  .dock-btn { flex: 1; justify-content: center; box-shadow: none; }
  .dock-btn + .dock-btn { margin-left: 8px; }
  .has-dock .ft { padding-bottom: 72px; }
}
@media (max-width: 400px) {
  .brand .wordmark svg { height: 26px; } /* 320px screens: the 34px logo pushed the header end past the edge */
}
/* Short phones (320×568): a five-line German headline needs the room above the buttons, so it gets smaller and the
   line under it gives way. */
@media (max-width: 640px) and (max-height: 600px) {
  .hero-p { display: none; }
  .hero-h { font-size: 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .slide.is-active .slide-img { animation: none; }
  /* nothing waits for an entrance, nothing lifts or scales */
  .rv .reveal:not(.is-in) { opacity: 1; transform: none; }
  .rv .step:not(.is-in)::before { transform: none; }
  .rv .step:not(.is-in) .step-n { color: var(--orange); }
  .step:hover, .step.is-pressed { transform: none; animation: none; }
  @view-transition { navigation: none; }
}
@media print {
  @page { size: A4; margin: 14mm; }
  .hd, .dock, .hero, .enquiry, .how-media { display: none !important; }
  .sheet-page .ft, .sheet-page .doc-back, .sheet-actions, .skip { display: none !important; }
  .sheet-page main { padding-top: 0; }
  .sheet-logo { display: block; }
  .sheet { padding-block: 0; gap: 1rem; }
  .sheet-figs { grid-template-columns: 1fr 1fr; }
  .sheet-contact a { color: inherit; text-decoration: none; }
  .pp[hidden], .js:not(.ex-ready) .pp:not(:first-child) { display: grid !important; }
  .js .cal td.on::before { transform: none; background: var(--cal-bar) !important; }
  .cal-tip, .cal-now, .cal-wrap::after { display: none !important; }
  .cal tr.is-active > td, .cal tr.is-active > .cal-p { box-shadow: none; background: none; }
  .cal.has-active tr .cal-p a { color: inherit; }
  .cal { min-width: 0; display: table; }
  .cal thead { display: table-header-group; }
  .cal tbody { display: table-row-group; }
  .cal tr { display: table-row; }
  .cal .m-s { display: inline; }
  .cal .m-n { display: none; }
  .reveal, .step::before { opacity: 1 !important; transform: none !important; }
  .step-n { color: var(--orange) !important; }
  .how { color: var(--ink); background: none; }
  .step-d { color: var(--ink-2); }
}