/* ============================================================
   ACCREDO — "tvornica dobrih emocija"
   Warm, nature-oriented adventure design system
   ============================================================ */

/* Fonts: loaded locally through assets/css/fonts.css (no CDN). */

/* ----------  TOKENS  ---------- */
:root{
  /* warm natural neutrals */
  --cream:        oklch(0.967 0.013 79);   /* page background */
  --cream-2:      oklch(0.945 0.017 78);   /* alternating section */
  --paper:        oklch(0.993 0.005 85);   /* cards / white surfaces */
  --sand:         oklch(0.905 0.022 75);   /* warm panel */
  --sand-deep:    oklch(0.855 0.026 72);

  --ink:          oklch(0.255 0.018 52);   /* deep warm anthracite — body text */
  --ink-2:        oklch(0.408 0.018 52);   /* secondary text */
  --ink-3:        oklch(0.545 0.016 55);   /* muted / captions */

  --line:         oklch(0.875 0.014 74);   /* hairline */
  --line-soft:    oklch(0.910 0.012 76);   /* faint hairline / textures */
  --line-strong:  oklch(0.815 0.018 72);

  /* brand greens */
  --forest:       oklch(0.420 0.070 152);  /* primary brand */
  --forest-deep:  oklch(0.318 0.055 153);  /* footer / dark green */
  --forest-deeper:oklch(0.262 0.046 154);
  --moss:         oklch(0.585 0.080 146);
  --forest-tint:  oklch(0.935 0.022 150);  /* pale green wash */

  /* terracotta CTA accent */
  --clay:         oklch(0.628 0.146 46);
  --clay-hi:      oklch(0.678 0.150 49);
  --clay-deep:    oklch(0.520 0.130 42);
  --clay-tint:    oklch(0.930 0.030 56);

  /* text colors that sit on dark photos / forest fills */
  --on-dark:        oklch(0.975 0.012 82);
  --on-dark-dim:    oklch(0.880 0.014 82);
  --on-dark-faint:  oklch(0.760 0.016 80);

  --container: 1240px;
  --pad: clamp(20px, 5vw, 56px);

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 26px;
  --r-xl: 36px;
  --r-pill: 999px;

  --shadow-sm: 0 2px 10px -2px oklch(0.40 0.04 50 / .10);
  --shadow:    0 16px 40px -18px oklch(0.36 0.05 50 / .26);
  --shadow-lg: 0 34px 80px -30px oklch(0.32 0.06 48 / .34);

  --ease:     cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --font-display: 'Bricolage Grotesque', 'Hanken Grotesk', sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, sans-serif;
}

/* ----------  RESET  ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }
/* The UA rule for [hidden] carries no !important, so any component rule with
   display: flex/grid silently defeats it. JS in this theme hides elements via
   the attribute, so it has to win. */
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:96px; }
body{
  font-family:var(--font-body);
  background:var(--cream);
  color:var(--ink);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; color:inherit; cursor:pointer; border:none; background:none; }
ul{ list-style:none; }
::selection{ background:var(--clay); color:var(--on-dark); }

/* ----------  LAYOUT  ---------- */
.wrap{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--pad); }
.wrap--wide{ max-width:1440px; }
.wrap--narrow{ max-width:920px; }
.section{ padding-block:clamp(64px,9vw,124px); position:relative; }
.section--tight{ padding-block:clamp(48px,6vw,80px); }
.bg-cream2{ background:var(--cream-2); }
.bg-sand{ background:var(--sand); }
.bg-foresttint{ background:var(--forest-tint); }

/* ----------  TYPE  ---------- */
.display{ font-family:var(--font-display); font-weight:700; line-height:1.0; letter-spacing:-0.02em; }
.h-hero{ font-family:var(--font-display); font-weight:700; line-height:0.96;
  font-size:clamp(46px,7.2vw,104px); letter-spacing:-0.025em; }
.h1{ font-family:var(--font-display); font-weight:700; line-height:1.06;
  font-size:clamp(36px,5vw,68px); letter-spacing:-0.022em; }
.h2{ font-family:var(--font-display); font-weight:700; line-height:1.05;
  font-size:clamp(28px,3.4vw,46px); letter-spacing:-0.02em; }
.h3{ font-family:var(--font-display); font-weight:700; line-height:1.1;
  font-size:clamp(21px,2vw,27px); letter-spacing:-0.015em; }
.lead{ font-size:clamp(17px,1.4vw,21px); line-height:1.55; color:var(--ink-2); }
.body{ font-size:16px; color:var(--ink-2); line-height:1.65; }
.small{ font-size:14px; color:var(--ink-3); }
.eyebrow{
  font-family:var(--font-body); text-transform:uppercase; font-size:12.5px;
  letter-spacing:.16em; font-weight:600; color:var(--forest);
  display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:""; width:22px; height:2px; border-radius:2px; background:var(--clay); display:inline-block; }
.eyebrow--clay{ color:var(--clay-deep); }
.eyebrow--center{ justify-content:center; }
.eyebrow--bare::before{ display:none; }
.txt-forest{ color:var(--forest); }
.txt-clay{ color:var(--clay-deep); }
.txt-dim{ color:var(--ink-2); }
.serif-accent{ font-style:italic; font-family:var(--font-body); font-weight:400; }

/* ----------  BUTTONS  ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-body); font-weight:600; font-size:15px; letter-spacing:.005em;
  padding:15px 26px; border-radius:var(--r-pill);
  transition:transform .35s var(--ease), background .3s, color .3s, box-shadow .3s, border-color .3s;
  white-space:nowrap;
}
.btn svg{ width:18px; height:18px; transition:transform .35s var(--ease); }
.btn:hover svg{ transform:translateX(4px); }
.btn--primary{ background:var(--clay); color:var(--on-dark); box-shadow:0 10px 24px -10px oklch(0.628 0.146 46 / .7); }
.btn--primary:hover{ background:var(--clay-hi); transform:translateY(-2px); box-shadow:0 16px 32px -10px oklch(0.628 0.146 46 / .65); }
.btn--forest{ background:var(--forest); color:var(--on-dark); }
.btn--forest:hover{ background:var(--forest-deep); transform:translateY(-2px); box-shadow:0 14px 30px -12px oklch(0.42 0.07 152 / .6); }
.btn--ghost{ border:1.5px solid var(--line-strong); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--forest); color:var(--forest); transform:translateY(-2px); }
.btn--on-dark{ border:1.5px solid oklch(1 0 0 / .35); color:var(--on-dark); }
.btn--on-dark:hover{ border-color:var(--on-dark); background:oklch(1 0 0 / .08); transform:translateY(-2px); }
.btn--lg{ padding:18px 32px; font-size:16px; }
.btn--block{ width:100%; justify-content:center; }

.link-arrow{ display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:15px;
  color:var(--forest); transition:.3s var(--ease); width:fit-content; }
.link-arrow svg{ width:17px; height:17px; transition:transform .3s var(--ease); }
.link-arrow:hover{ color:var(--clay-deep); }
.link-arrow:hover svg{ transform:translateX(4px); }

/* ----------  PILL / TAG  ---------- */
.pill{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600;
  padding:7px 14px; border-radius:var(--r-pill); background:var(--paper); border:1px solid var(--line);
  color:var(--ink-2); box-shadow:var(--shadow-sm); }
.pill svg{ width:15px; height:15px; }
.pill--forest{ background:var(--forest-tint); border-color:transparent; color:var(--forest-deep); box-shadow:none; }
.pill--clay{ background:var(--clay-tint); border-color:transparent; color:var(--clay-deep); box-shadow:none; }

.stars{ color:var(--clay); letter-spacing:2px; font-size:15px; }

/* ----------  EXPERIENCE / ACTIVITY CARD (shared component)  ---------- */
.exp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.exp{ background:var(--paper); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; transition:transform .45s var(--ease), box-shadow .45s var(--ease);
  border:1px solid var(--line); }
.exp:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.exp__media{ position:relative; aspect-ratio:5/4; overflow:hidden; background:var(--sand-deep); }
.exp__media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.exp:hover .exp__media img{ transform:scale(1.06); }
.exp__badge{ position:absolute; top:14px; left:14px; z-index:2; }
.exp__sub{ position:absolute; top:14px; right:14px; z-index:2; font-size:11px; font-weight:600; white-space:nowrap;
  letter-spacing:.08em; text-transform:uppercase; color:var(--on-dark); background:oklch(0.30 0.05 153 / .72);
  backdrop-filter:blur(4px); padding:6px 11px; border-radius:var(--r-pill); }
.exp__body{ padding:24px 24px 26px; display:flex; flex-direction:column; flex:1; }
.exp__body h3{ margin-bottom:8px; }
.exp__body p{ color:var(--ink-2); font-size:15.5px; line-height:1.55; flex:1; }
.exp__foot{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
.exp__price{ display:flex; flex-direction:column; line-height:1.1; }
.exp__price small,.exp__price-label{ font-size:11.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); font-weight:600; }
.exp__price b,.exp__price-value{ font-family:var(--font-display); font-size:26px; font-weight:700; color:var(--ink); letter-spacing:-0.01em; }
.exp__price b.exp__price--req{ font-size:21px; color:var(--forest); }
.exp__cta{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14.5px; color:var(--forest);
  transition:.3s var(--ease); }
.exp__cta svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
.exp:hover .exp__cta{ color:var(--clay-deep); }
.exp:hover .exp__cta svg{ transform:translateX(3px); }

/* ----------  NAV  ---------- */
.nav{ position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .4s var(--ease), backdrop-filter .4s, box-shadow .4s, padding .4s; }
.nav__inner{ display:flex; align-items:center; gap:28px; padding-block:18px; }
.nav.is-stuck{ background:oklch(0.967 0.013 79 / .86); backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:0 1px 0 var(--line), 0 8px 30px -20px oklch(0.3 0.04 50 / .4); }
.nav.is-stuck .nav__inner{ padding-block:12px; }
.brand{ display:flex; align-items:center; gap:11px; font-family:var(--font-display); font-weight:800;
  font-size:25px; letter-spacing:-0.03em; line-height:1; color:var(--ink); }
/* The logo is a mask, so its colour is the background colour: ink in the
   header, the light ink on the dark footer. Since 2026-09-08 the traced SVGs
   of the new "outdoor shop" artwork (deploy/make-logo-assets.py); the
   proportions below follow them — compact 988:233, full 988:437, tiles
   675:162. */
.brand__logo{ display:block; height:48px; width:204px; flex:none; background:var(--ink); transition:height .4s var(--ease), width .4s var(--ease);
  -webkit-mask:url('../img/logo-compact.svg') left center/contain no-repeat; mask:url('../img/logo-compact.svg') left center/contain no-repeat; }
.nav.is-stuck .brand__logo{ height:42px; width:178px; }
@media(max-width:1120px){ .brand__logo{ height:40px; width:170px; } }
.footer .brand__logo{ background:var(--on-dark); height:56px; width:237px; }
.footer .brand__logo--full{ width:236px; height:104px;
  -webkit-mask:url('../img/logo-full.svg') left center/contain no-repeat; mask:url('../img/logo-full.svg') left center/contain no-repeat; }
.logo-full{ display:block; width:min(320px,100%); aspect-ratio:988/437; background:var(--ink);
  -webkit-mask:url('../img/logo-full.svg') left center/contain no-repeat; mask:url('../img/logo-full.svg') left center/contain no-repeat; }
.tilestrip{ width:min(380px,72%); aspect-ratio:675/162; margin:0 auto clamp(40px,6vw,56px); background:var(--forest);
  -webkit-mask:url('../img/logo-tiles.svg') center/contain no-repeat; mask:url('../img/logo-tiles.svg') center/contain no-repeat; }
.exp__tile{ position:absolute; bottom:14px; right:14px; z-index:2; width:42px; aspect-ratio:69/86; background:oklch(0.99 0.006 85 / .96);
  -webkit-mask:var(--tile) center/contain no-repeat; mask:var(--tile) center/contain no-repeat; filter:drop-shadow(0 3px 8px oklch(0.2 0.03 50 / .35)); }
.brand em{ font-style:normal; color:var(--clay); }
.nav__links{ display:flex; align-items:center; gap:2px; margin-left:auto; }
.nav__link{ font-weight:600; font-size:15px; padding:10px 15px; color:var(--ink-2); border-radius:var(--r-pill);
  transition:color .25s, background .25s; white-space:nowrap; }
.nav__link:hover{ color:var(--ink); }
.nav__link.is-active{ color:var(--forest); }
.nav__dropwrap{ position:relative; }
.nav__dropwrap>.nav__link{ display:inline-flex; align-items:center; gap:5px; }
.nav__dropwrap>.nav__link svg{ width:13px; height:13px; transition:transform .25s; }
.nav__dropwrap:hover>.nav__link svg, .nav__dropwrap:focus-within>.nav__link svg{ transform:rotate(180deg); }
.nav__drop{ position:absolute; top:100%; left:8px; min-width:200px; padding:8px; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--r-md); box-shadow:0 18px 40px oklch(0.25 0.02 52 / .14);
  display:flex; flex-direction:column; gap:2px; opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .25s, transform .25s, visibility .25s; }
.nav__dropwrap:hover .nav__drop, .nav__dropwrap:focus-within .nav__drop{ opacity:1; visibility:visible; transform:translateY(0); }
.nav__drop a{ font-weight:600; font-size:14.5px; padding:10px 14px; border-radius:var(--r-sm); color:var(--ink-2); transition:background .2s, color .2s; }
.nav__drop a:hover{ background:var(--cream); color:var(--ink); }
.nav__drop a.is-active{ color:var(--forest); }
/* A dropdown split into groups — "Ponuda programa" since 2026-09-14: the
   programmes at the centre and the programmes at external locations, side by
   side, each under its title. The title is a link to the group's overview. */
.nav__drop--groups{ flex-direction:row; align-items:stretch; gap:4px; padding:10px; }
.nav__group{ display:flex; flex-direction:column; gap:2px; min-width:210px; }
.nav__group+.nav__group{ border-left:1px solid var(--line); margin-left:6px; padding-left:10px; }
.nav__group a{ white-space:nowrap; }
.nav__drop a.nav__group-title{ font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); padding:8px 14px 6px; }
.nav__drop a.nav__group-title:hover{ background:none; color:var(--forest); }
.nav__right{ display:flex; align-items:center; gap:12px; }

.lang{ position:relative; }
.lang__btn{ display:flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600;
  color:var(--ink-2); padding:9px 12px; border:1px solid var(--line); border-radius:var(--r-pill); transition:.25s; }
.lang__btn:hover{ color:var(--ink); border-color:var(--line-strong); }
.lang__btn svg{ width:13px; height:13px; transition:transform .25s; }
.lang.is-open .lang__btn svg:last-child{ transform:rotate(180deg); }
.lang__menu{ position:absolute; top:calc(100% + 8px); right:0; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--r); padding:6px; min-width:150px; box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:.25s var(--ease); z-index:30; }
.lang.is-open .lang__menu{ opacity:1; visibility:visible; transform:translateY(0); }
.lang__opt{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  font-size:13.5px; font-weight:500; color:var(--ink-2); padding:9px 12px; border-radius:var(--r-sm); transition:.2s; }
.lang__opt:hover{ background:var(--cream-2); color:var(--ink); }
.lang__opt.is-active{ color:var(--forest); font-weight:600; }
.lang__opt small{ font-size:11px; color:var(--ink-3); }
/* In the drawer the dropdown has nowhere to drop: the design hides
   .nav .lang below 1000 px, so the switcher renders a second time inside the
   drawer as a plain row of pills. The toggle button goes away and the menu is
   simply always open. ".drawer .lang__opt" and not ".lang__opt": the drawer
   turns every link into 30 px display type, and one class does not beat
   ".drawer a". */
.lang--drawer{ margin-top:28px; }
.lang--drawer .lang__btn{ display:none; }
.lang--drawer .lang__menu{ position:static; opacity:1; visibility:visible; transform:none;
  display:flex; gap:8px; min-width:0; padding:0; border:0; background:none; box-shadow:none; }
.drawer .lang__opt{ width:auto; border:1px solid var(--line); border-radius:var(--r-pill);
  font-family:var(--font-body); font-size:14px; font-weight:600; padding:9px 14px; }
.drawer .lang__opt small{ display:none; }

.nav__burger{ display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:var(--r-sm);
  align-items:center; justify-content:center; flex-direction:column; gap:5px; background:var(--paper); }
.nav__burger span{ width:18px; height:2px; border-radius:2px; background:var(--ink); transition:.3s var(--ease); }
/* With the drawer open the bar gets the drawer's ground. The drawer scrolls
   (the prototype's did not) and its entries pass under the bar, which was
   transparent until the page had scrolled — so a scrolled entry showed
   through the logo. Opaque, the bar hides what slides under it, and the
   hairline marks the edge the way the stuck bar does. */
.nav.is-open{ background:var(--cream); box-shadow:0 1px 0 var(--line); }
.nav.is-open .nav__burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2){ opacity:0; }
.nav.is-open .nav__burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.drawer__group{ font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin:14px 0 4px; }
.drawer__sub{ padding-left:16px; }
/* The drawer scrolls. In the prototype it does not, and its content is
   taller than a phone screen from six menu entries on — the CTA at the bottom
   was already out of reach there, and the language switcher below it would be
   too. overscroll-behavior keeps the page underneath from scrolling along. */
.drawer{ position:fixed; inset:0; z-index:99; background:var(--cream); padding:100px var(--pad) 40px;
  display:flex; flex-direction:column; gap:4px; transform:translateY(-100%); transition:transform .5s var(--ease);
  visibility:hidden; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.drawer.is-open{ transform:translateY(0); visibility:visible; }
.drawer a{ font-family:var(--font-display); font-weight:700; font-size:30px; padding:14px 0;
  border-bottom:1px solid var(--line); color:var(--ink); transition:color .25s; }
.drawer a:hover{ color:var(--clay-deep); }
/* A group heading that is a link (the two groups of "Ponuda programa"):
   the look of .drawer__group, not of a 30 px menu entry. */
.drawer a.drawer__group{ font-family:var(--font-body); font-size:12px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); margin:14px 0 4px; padding:6px 0; border-bottom:0; }
.drawer a.drawer__group:hover{ color:var(--forest); }
/* The drawer restyles every link into 30 px display type with no horizontal
   padding, and ".drawer a" outweighs ".btn" by one element in the selector — so
   the CTA lost its own padding and its label sat flush against the pill. It is
   a button, not a menu entry: it takes its type and its padding back and
   centres its label over the full width of the drawer. */
.drawer .btn{
  margin-top:22px;
  font-family:var(--font-body); font-size:16px; font-weight:600; line-height:1.4;
  padding:16px 26px; justify-content:center; text-align:center; }

/* ----------  FOOTER  ---------- */
.footer{ background:var(--forest-deeper); color:var(--on-dark); padding-block:clamp(56px,7vw,88px) 30px;
  position:relative; overflow:hidden; }
.footer__grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:40px; position:relative; z-index:1; }
.footer .brand{ color:var(--on-dark); }
.footer__col h4{ font-size:12.5px; text-transform:uppercase; letter-spacing:.14em; font-weight:600;
  color:var(--on-dark-faint); margin-bottom:18px; }
.footer__col a{ display:block; color:var(--on-dark-dim); padding:5px 0; transition:.25s; font-size:15px; }
.footer__col a:hover{ color:var(--on-dark); transform:translateX(3px); }
.footer__col p{ color:var(--on-dark-dim); font-size:15px; }
.footer__social{ display:flex; gap:10px; }
.footer__social a{ width:40px; height:40px; border:1px solid oklch(1 0 0 / .2); border-radius:var(--r-pill);
  display:grid; place-items:center; transition:.25s; color:var(--on-dark-dim); }
.footer__social a:hover{ border-color:var(--clay); color:var(--on-dark); background:oklch(1 0 0 / .06); transform:translateY(-2px); }
.footer__social svg{ width:17px; height:17px; }
.footer__bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
  margin-top:56px; padding-top:24px; border-top:1px solid oklch(1 0 0 / .14); position:relative; z-index:1;
  font-size:13px; color:var(--on-dark-faint); }
.footer__big{ font-family:var(--font-display); font-weight:800; line-height:.8; font-size:clamp(80px,18vw,260px);
  color:oklch(1 0 0 / .04); pointer-events:none; user-select:none; position:absolute; bottom:-4%; left:50%;
  transform:translateX(-50%); white-space:nowrap; }

/* ----------  FORMS  ---------- */
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-size:13px; font-weight:600; letter-spacing:.01em; color:var(--ink-2); }
.field input,.field select,.field textarea{ font-family:var(--font-body); font-size:15.5px; color:var(--ink);
  background:var(--paper); border:1.5px solid var(--line); border-radius:var(--r-sm); padding:14px 16px; transition:.25s; width:100%; }
.field input::placeholder,.field textarea::placeholder{ color:var(--ink-3); }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--forest);
  box-shadow:0 0 0 4px oklch(0.42 0.07 152 / .12); }
.field select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23708' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:18px; padding-right:42px; }

/* ----------  REVEAL  ---------- */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal-delay]{ transition-delay:var(--d,0s); }

/* ----------  MARQUEE / LOGO STRIP  ---------- */
.logos{ display:flex; align-items:center; gap:clamp(30px,5vw,64px); flex-wrap:wrap; justify-content:center; }
.logos span{ font-family:var(--font-display); font-weight:700; font-size:clamp(18px,2vw,26px); color:var(--ink-3);
  letter-spacing:-0.01em; opacity:.8; transition:.3s; }
.logos span:hover{ color:var(--forest); opacity:1; }
.logos--marquee{ flex-wrap:nowrap; justify-content:flex-start; overflow:hidden; position:relative;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.logos__track{ display:flex; flex:none; animation:logoscroll 36s linear infinite; }
.logos__set{ display:flex; align-items:center; gap:clamp(30px,5vw,64px); flex:none; padding-right:clamp(30px,5vw,64px); }
.logos__set span{ white-space:nowrap; }
.logos--marquee:hover .logos__track{ animation-play-state:paused; }
@keyframes logoscroll{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .logos__track{ animation:none; } }

/* ----------  ACCORDION (FAQ)  ---------- */
.acc{ border-top:1px solid var(--line); }
.acc__item{ border-bottom:1px solid var(--line); }
.acc__q{ display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%; text-align:left;
  padding:24px 4px; font-family:var(--font-display); font-weight:600; font-size:clamp(18px,1.8vw,22px); color:var(--ink); }
.acc__q i{ width:30px; height:30px; flex:none; border-radius:var(--r-pill); border:1.5px solid var(--line-strong);
  display:grid; place-items:center; position:relative; transition:.3s var(--ease); }
.acc__q i::before,.acc__q i::after{ content:""; position:absolute; background:var(--ink); border-radius:2px; }
.acc__q i::before{ width:13px; height:2px; } .acc__q i::after{ width:2px; height:13px; transition:transform .3s var(--ease); }
.acc__item.open .acc__q i{ background:var(--forest); border-color:var(--forest); }
.acc__item.open .acc__q i::before,.acc__item.open .acc__q i::after{ background:var(--on-dark); }
.acc__item.open .acc__q i::after{ transform:rotate(90deg); }
/* Two shapes on purpose. .acc__a is the wrapper the old markup used and that
   site.js still builds; .acc__at is the core paragraph the pattern emits now,
   so the client can edit the answer. Pages inserted before that change keep
   working.

   visibility:hidden takes the collapsed answer out of the accessibility tree
   and the tab order. With max-height alone, five of six answers stayed
   readable to screen readers and their links stayed focusable while the
   button reported aria-expanded="false" — the ARIA state contradicted what
   was actually exposed. It still animates, because visibility is
   transitionable. */
.acc__a,
.acc__item > .acc__at{ max-height:0; overflow:hidden; visibility:hidden;
  transition:max-height .4s var(--ease), visibility 0s linear .4s; }
/* .open has to raise max-height too, not only visibility. It used to set
   visibility alone, so an item marked open in the content rendered with the
   icon and the ARIA state of an open item and a collapsed answer — and the
   first click, reading the class, closed what was never open. site.js replaces
   this with the measured height; the generous value here is what makes the
   state correct on its own, including with JavaScript off. */
.acc__item.open .acc__a,
.acc__item.open > .acc__at{ max-height:70rem; visibility:visible; transition:max-height .4s var(--ease), visibility 0s; }

/* The answer paragraph carries the padding itself now, because there is no
   wrapper around it until JavaScript adds one. */
.acc__item > .acc__at{ padding:0 4px 26px; color:var(--ink-2); font-size:16px; max-width:62ch; margin:0; }

/* The heading only carries the question; the button inside it is what the
   design styles. Without JavaScript the heading itself is the question. */
.acc__qt{ margin:0; font:inherit; }
.acc__qt .acc__q{ width:100%; }
.acc__a p{ padding:0 4px 26px; color:var(--ink-2); font-size:16px; max-width:62ch; }

/* ----------  PRICE TABLE  ---------- */
.ptable{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.pcard{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:30px 28px;
  display:flex; flex-direction:column; transition:.4s var(--ease); position:relative; }
.pcard:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.pcard--feature{ background:var(--forest); color:var(--on-dark); border-color:var(--forest); }
.pcard--feature .pcard__price b,.pcard--feature h3{ color:var(--on-dark); }
.pcard--feature .pcard__li{ color:var(--on-dark-dim); }
.pcard--feature .pcard__li svg{ color:var(--on-dark); }
.pcard__tag{ position:absolute; top:-12px; left:28px; }
.pcard h3{ margin-bottom:6px; }
.pcard__price{ display:flex; align-items:flex-end; gap:6px; margin:14px 0 4px; flex-wrap:nowrap; }
.pcard__price b,.pcard__price-value{ font-family:var(--font-display); font-weight:700; font-size:46px; line-height:1; letter-spacing:-0.02em; white-space:nowrap; }
.pcard__price span,.pcard__price-note{ font-size:14px; color:var(--ink-3); padding-bottom:6px; }
.pcard--feature .pcard__price span{ color:var(--on-dark-faint); }
.pcard__list{ display:flex; flex-direction:column; gap:13px; margin:22px 0 26px; }
.pcard__li{ display:flex; gap:11px; align-items:flex-start; font-size:15px; color:var(--ink-2); }
.pcard__li svg{ width:19px; height:19px; flex:none; color:var(--forest); margin-top:2px; }

/* ----------  STAT  ---------- */
.statrow{ display:flex; flex-wrap:wrap; gap:0; }
.stat{ flex:1; min-width:140px; padding:0 26px; border-left:1px solid var(--line); }
.stat:first-child{ padding-left:0; border-left:none; }
.stat b{ font-family:var(--font-display); font-weight:700; font-size:clamp(34px,4vw,54px); line-height:1;
  display:block; color:var(--forest); letter-spacing:-0.02em; }
.stat span{ font-size:14px; color:var(--ink-3); margin-top:6px; display:block; }

/* ----------  UTILITY  ---------- */
.flex{ display:flex; } .grid{ display:grid; }
.items-center{ align-items:center; } .items-end{ align-items:flex-end; }
.justify-between{ justify-content:space-between; } .justify-center{ justify-content:center; }
.gap-s{ gap:12px; } .gap-m{ gap:22px; } .gap-l{ gap:40px; }
.wrap-flex{ flex-wrap:wrap; }
.mt-s{ margin-top:14px; } .mt-m{ margin-top:24px; } .mt-l{ margin-top:42px; }
.center{ text-align:center; } .mx-auto{ margin-inline:auto; }
.maxw-xs{ max-width:440px; } .maxw-sm{ max-width:560px; } .maxw-md{ max-width:700px; } .maxw-lg{ max-width:860px; }

/* ----------  RESPONSIVE  ---------- */
@media (max-width:1000px){
  .nav__links{ display:none; }
  .nav__burger{ display:flex; }
  .nav .lang{ display:none; }
  .footer__grid{ grid-template-columns:1fr 1fr; gap:32px; }
  .exp-grid{ grid-template-columns:repeat(2,1fr); }
  .ptable{ grid-template-columns:1fr; max-width:440px; margin-inline:auto; }
}
@media (max-width:640px){
  /* Logo (167px) + CTA (184px) + burger (44px) plus gaps need 435px, but a
     phone offers about 320px of inner width. Because .nav is fixed the
     overflow produces no scrollbar — the burger simply sat off-screen and the
     mobile menu could not be opened at all. The drawer carries the same CTA,
     so hiding it here loses nothing. */
  .nav__cta{ display:none; }
  .footer__grid{ grid-template-columns:1fr; }
  .exp-grid{ grid-template-columns:1fr; }
  .statrow{ gap:24px 0; }
  .stat{ flex-basis:50%; border-left:none; padding-left:0; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
}

/* ----------  WORDPRESS BASICS (addition to the prototype)  ---------- */
.screen-reader-text{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0; }
.screen-reader-text:focus{ position:fixed !important; top:12px; left:12px; z-index:1000; width:auto; height:auto; margin:0;
  clip:auto !important; clip-path:none; white-space:normal; padding:14px 20px; border-radius:var(--r-sm);
  background:var(--paper); color:var(--ink); font-size:15px; font-weight:600; box-shadow:var(--shadow); }
.site-main{ padding-top:clamp(110px,12vw,140px); }
.entry-content > * + *{ margin-top:22px; }
.entry-content h2,.entry-content h3,.entry-content h4{ font-family:var(--font-display); letter-spacing:-0.015em; margin-top:38px; }
.entry-content ul{ list-style:disc; padding-left:22px; }
.entry-content ol{ list-style:decimal; padding-left:22px; }
.entry-content a{ color:var(--forest); text-decoration:underline; text-underline-offset:3px; }
.entry-content a:hover{ color:var(--clay-deep); }
.pagination{ display:flex; flex-wrap:wrap; gap:10px; margin-top:48px; }
.pagination .page-numbers{ display:inline-grid; place-items:center; min-width:44px; height:44px; padding:0 14px;
  border:1px solid var(--line); border-radius:var(--r-pill); font-weight:600; font-size:15px; color:var(--ink-2); transition:.25s var(--ease); }
.pagination .page-numbers:hover{ border-color:var(--forest); color:var(--forest); }
.pagination .page-numbers.current{ background:var(--forest); border-color:var(--forest); color:var(--on-dark); }