/* SEOmise public website: INTERACTIVE WIDGETS, light design (behaviour and markup: public/js/widgets.js). Reads only the
   tokens in public/css/tokens.css. Every widget reads without JavaScript (.no-js) and under prefers-reduced-motion
   (end of file); only transform, opacity and translate animate.
   Widgets: .w-car (carousel) · .w-flip (flip box) · .w-expand (expanding panels) · .w-reveal (image-reveal list) ·
   .w-tabs (tabs with a sliding indicator) · .w-count (real-number counter) · .w-view (cursor bubble) ·
   [data-w-scene] (parallax) · .w-inline-pic (a picture inside a headline). */

/* ---------- Carousel ---------- */
.w-car { position: relative; }
.w-car-track { display: flex; gap: var(--w-gap, 24px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 6px var(--w-pad, 0px) 18px; scroll-padding-inline: var(--w-pad, 0px); }
.w-car-track::-webkit-scrollbar { display: none; }
.w-car-track:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 4px; border-radius: var(--r); }
.w-car.is-ready .w-car-track { cursor: grab; }
.w-car.is-dragging .w-car-track { cursor: grabbing; scroll-snap-type: none; }
.w-car.is-dragging a { pointer-events: none; }
.w-car-slide { flex: 0 0 var(--w-slide, 86%); scroll-snap-align: start; min-width: 0; }
.w-car-ui { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.w-car-dots { display: flex; gap: 8px; align-items: center; margin-right: auto; }
.w-car-dot { width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.w-car-dot::before { content: ""; width: 8px; height: 8px; border-radius: 99px; background: var(--line-2); transition: width var(--d-3) var(--ease), background var(--d-2); }
.w-car-dot[aria-current="true"]::before { width: 26px; background: var(--brand); }
.w-car-dot:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 0; border-radius: 99px; }
.w-round { width: 52px; height: 52px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); cursor: pointer;
  box-shadow: var(--sh-1); transition: background var(--d-1), border-color var(--d-1), transform var(--d-2) var(--ease), color var(--d-1); }
.w-round:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: #fff; transform: translateY(-1px); }
.w-round:disabled { opacity: .4; cursor: default; }
.w-round.is-small { width: 40px; height: 40px; }
.no-js .w-car-ui, .no-js [data-w-toggle] { display: none; }

/* ---------- Flip box ---------- */
.w-flip { position: relative; perspective: 1400px; }
.w-flip-in { display: grid; gap: 12px; }
.w-flip-face { border-radius: var(--r-lg); padding: clamp(24px, 2.6vw, 36px); min-width: 0; }
.w-flip-front { background: var(--card); border: 1px solid var(--line); }
.w-flip-back { background: var(--mint); color: var(--ink); }
.w-flip-btn { position: absolute; right: 18px; bottom: 18px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px 0 10px; border-radius: 99px;
  border: 1px solid var(--line-2); background: var(--card); color: var(--ink); font: 600 13.5px var(--sans); cursor: pointer; transition: background var(--d-1), color var(--d-1); }
.w-flip-btn .ms { font-size: 18px; transition: transform var(--d-3) var(--ease); }
.w-flip-btn:hover { background: var(--ink); color: #fff; }
.w-flip.is-flipped .w-flip-btn .ms { transform: rotate(180deg); }
.no-js .w-flip-btn, .w-flip:not(.is-3d) .w-flip-btn { display: none; }
/* 3D: both faces in one cell (the taller one sets the height, so flipping never moves anything) */
.w-flip.is-3d .w-flip-in { gap: 0; transform-style: preserve-3d; transition: transform .7s var(--ease); }
.w-flip.is-3d .w-flip-face { grid-area: 1 / 1; -webkit-backface-visibility: hidden; backface-visibility: hidden; padding-bottom: 72px; }
.w-flip.is-3d .w-flip-back { transform: rotateY(180deg); }
.w-flip.is-3d.is-flipped .w-flip-in, .w-flip.is-3d:focus-within .w-flip-in { transform: rotateY(180deg); }
.w-flip.is-3d:focus-within:not(.is-flipped):has(.w-flip-btn:focus-visible) .w-flip-in { transform: none; }

/* ---------- Expanding panels ---------- */
.w-expand { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.w-ex { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--ex-tint, var(--mint)); min-width: 0; }
.w-ex-link { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: clamp(22px, 2.4vw, 32px); color: var(--ink); text-decoration: none; }
.w-ex-link:hover { color: var(--ink); }
.w-ex-link:focus-visible { outline: 2.5px solid var(--focus); outline-offset: -4px; border-radius: var(--r-lg); }
.w-ex-k { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; font-size: 15px; color: var(--ex-ink, var(--brand-ink)); }
.w-ex-k .ms { font-size: 22px; }
.w-ex-t { margin: 0; font: 720 clamp(24px, 2.2vw, 32px)/1.08 var(--display); letter-spacing: -.025em; }
.w-ex-body { display: grid; gap: 12px; align-content: start; }
.w-ex-body p { margin: 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.55; max-width: 42ch; }
.w-ex-pic { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: var(--sh-media); background: #fff; }
.w-ex-go { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; color: var(--brand-ink); }
.w-ex-go .ms { font-size: 19px; transition: transform var(--d-2) var(--ease); }
.w-ex:hover .w-ex-go .ms { transform: translateX(4px); }
@media (min-width: 900px) {
  .w-expand { display: flex; height: 520px; gap: 14px; }
  .w-ex { flex: 1 1 0; transition: flex-grow .6s var(--ease); }
  .w-ex.is-active { flex-grow: 4.2; }
  .no-js .w-expand:hover .w-ex.is-active { flex-grow: 1; }
  .no-js .w-expand .w-ex:hover { flex-grow: 4.2; }
  .w-ex-link { min-width: 0; }
  .w-ex-pic { width: min(460px, 34vw); max-width: none; }
  .w-ex-body { width: min(460px, 34vw); opacity: 0; transform: translateY(14px); transition: opacity var(--d-3) var(--ease), transform var(--d-4) var(--ease); }
  .w-ex.is-active .w-ex-body, .no-js .w-ex:hover .w-ex-body { opacity: 1; transform: none; transition-delay: .15s; }
  .w-ex:not(.is-active) .w-ex-k { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-size: 18px; }
  .no-js .w-ex:hover .w-ex-k { writing-mode: horizontal-tb; transform: none; }
  .w-ex-pic { margin-top: auto; }
}

/* ---------- Image-reveal list ---------- */
.w-reveal { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.w-rv-list { list-style: none; margin: 0; padding: 0; counter-reset: rv; border-top: 1px solid var(--line-2); }
.w-rv-row { counter-increment: rv; border-bottom: 1px solid var(--line-2); }
.w-rv-row > a { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) 28px; align-items: center; gap: 16px; padding: 22px 6px; color: var(--ink); text-decoration: none; }
.w-rv-row > a::before { content: counter(rv, decimal-leading-zero); font: 600 14px var(--sans); color: var(--ink-3); }
.w-rv-row b { display: block; font: 700 clamp(22px, 2.3vw, 34px)/1.1 var(--display); letter-spacing: -.025em; transition: transform var(--d-3) var(--ease), color var(--d-2); }
.w-rv-row small { display: block; margin-top: 4px; font-size: 15px; color: var(--ink-3); }
.w-rv-row .ms { color: var(--ink-3); transition: transform var(--d-3) var(--ease), color var(--d-2); }
.w-rv-row.is-on b, .w-rv-row > a:hover b { color: var(--brand-ink); transform: translateX(8px); }
.w-rv-row.is-on .ms, .w-rv-row > a:hover .ms { color: var(--brand-ink); transform: translateX(4px) rotate(-45deg); }
.w-rv-row > a:focus-visible { outline: 2.5px solid var(--focus); outline-offset: -2px; border-radius: 10px; }
.w-rv-frame { position: sticky; top: 110px; aspect-ratio: 4 / 3.3; border-radius: var(--r-xl); overflow: hidden; background: var(--aqua-2); transition: translate .8s var(--ease); }
.w-rv-frame::before { content: ""; position: absolute; inset: 0; background: var(--dots); background-size: 16px 16px; opacity: .6; }
.w-rv-pic { position: absolute; left: 9%; top: 10%; width: 88%; height: auto; border-radius: 14px; box-shadow: var(--sh-media); background: #fff; opacity: 0; transform: translateY(16px) scale(.98);
  transition: opacity var(--d-3) var(--ease), transform var(--d-4) var(--ease); }
.w-rv-pic.is-on { opacity: 1; transform: none; }
@media (max-width: 860px) {
  .w-reveal { grid-template-columns: minmax(0, 1fr); }
  .w-rv-frame { display: none; }
}

/* ---------- Tabs ---------- */
.w-tabs-list { position: relative; display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 6px; border-radius: 99px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh-1); max-width: 100%; }
.w-tabs-list [role="tab"] { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; border: 0; border-radius: 99px; background: none;
  color: var(--ink-2); font: 600 15px var(--sans); cursor: pointer; transition: color var(--d-2); white-space: nowrap; }
.w-tabs-list [role="tab"] .ms { font-size: 20px; }
.w-tabs-list [role="tab"][aria-selected="true"] { color: #fff; }
.w-tabs-list [role="tab"]:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 2px; }
.w-tabs-ind { position: absolute; z-index: 0; left: 0; top: 6px; height: 46px; width: 0; border-radius: 99px; background: var(--ink); transition: translate var(--d-3) var(--ease), width var(--d-3) var(--ease); }
.no-js .w-tabs-list { display: none; }
.w-tabs-panels { display: grid; gap: 28px; margin-top: 28px; }
.w-tabs.is-ready .w-tabs-panels { gap: 0; }
.w-tabs.is-ready .w-tab-panel { grid-area: 1 / 1; visibility: hidden; opacity: 0; transform: translateY(8px); transition: opacity var(--d-3) var(--ease), transform var(--d-3) var(--ease), visibility 0s var(--d-3); }
.w-tabs.is-ready .w-tab-panel.is-on { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.w-tab-panel:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 4px; border-radius: var(--r-lg); }
@media (max-width: 760px) {
  .w-tabs-list { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; border-radius: 18px; }
  .w-tabs-list [role="tab"] { padding: 0 14px; font-size: 14px; }
}

/* ---------- Counter ---------- */
.w-count { display: inline-block; font-variant-numeric: tabular-nums; min-width: calc(var(--digits, 2) * 1ch); text-align: right; }

/* ---------- "View" bubble ---------- */
[data-w-view] { position: relative; }
.w-view { position: absolute; left: 0; top: 0; z-index: 6; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; display: grid; place-items: center; pointer-events: none;
  background: var(--brand); color: #fff; font: 650 14px var(--sans); box-shadow: 0 14px 30px -12px rgba(11, 138, 91, .7); opacity: 0; scale: .4; transition: opacity var(--d-2), scale var(--d-3) var(--ease-spring); }
.w-view-on > .w-view { opacity: 1; scale: 1; }

/* ---------- A picture inside a headline ---------- */
.w-inline-pic { display: inline-block; width: 1.9em; height: .82em; margin: 0 .06em; vertical-align: -.04em; border-radius: 99px; overflow: hidden; background: var(--mint); box-shadow: inset 0 0 0 1px var(--line); }
.w-inline-pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .w-car-dot::before, .w-round, .w-flip-in, .w-ex, .w-ex-body, .w-rv-row b, .w-rv-row .ms, .w-rv-pic, .w-rv-frame, .w-tabs-ind, .w-tab-panel, .w-view { transition: none !important; }
  .w-rv-row.is-on b, .w-rv-row > a:hover b { transform: none; }
  .w-rv-pic { transform: none; }
  .w-tabs.is-ready .w-tab-panel { transform: none; }
  .w-ex-body { transform: none; }
}