/* src/styles/brand-fonts.css */
/* Brand webfonts.

   Until now --sy4-display and --sy4-body named fonts that were never loaded:
   HW Atlantic and Aptos resolved only on machines with them installed locally
   (Aptos ships with Office), and every other visitor fell through to Georgia.
   Measuring text width confirmed it — "HW Atlantic" rendered identically to
   generic serif, so the stack was resolving to nothing.

   Lives in a style asset rather than the Selectors panel because the CSS
   importer only parses selector rules and drops @font-face entirely.

   HW Atlantic now ships as a single face: Medium, declared across the 400-500
   range so it serves the weight 400 the Figma display / H1 / H2 styles specify
   as well as the 500 the brand manual asks for. Every HW Atlantic heading
   therefore renders Medium — deliberate, not synthesis. The Regular face was
   deleted from media, so its @font-face went with it; the display rules still
   read font-weight: 400 and there is no lighter face left to resolve to.
   Titillium Web is the web stand-in for Aptos, matching it weight for weight.

   font-display: swap — text paints immediately in the fallback and reflows
   when the face arrives, rather than blocking on the download. */

@font-face {
  font-family: "HW Atlantic";
  src: url("/uploads/CeCVgqPOkZoXDOJ7YeWyl-HWAtlantic-Medium.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Titillium Web";
  src: url("/uploads/4vM8zzGIfMFzi9IxO5JUE-TitilliumWeb-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Titillium Web";
  src: url("/uploads/uy1nllmJb30MXS1gqQ13b-TitilliumWeb-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Titillium Web";
  src: url("/uploads/_-6Bh_S7LoEmA02cXAbNK-TitilliumWeb-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Titillium Web";
  src: url("/uploads/L6LBgM-HEprmbafoIooVF-TitilliumWeb-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Titillium Web";
  src: url("/uploads/mq07ELW9PfOQA6qZz9bhO-TitilliumWeb-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* src/styles/course-book-form.css */
/* Course detail — placeholder colour inside the dark contact card.

   The card's inputs sit on #192a31, so the browser's default placeholder grey
   is close to unreadable on them. This lives in a stylesheet file rather than
   as a class rule because the publisher prunes authored pseudo-element rules
   that no node carries directly, and ::placeholder is never "carried" by a
   node. */

.syd-bkf-field::placeholder,
.syd-bkf-textarea::placeholder {
  color: rgba(255, 255, 255, 0.72);
  opacity: 1;
}


/* src/styles/course-catalogue.css */
/* /kurzy — category accent driven by data, not by a class.

   The catalogue is generated from the Kurzy table by one loop, and a loop
   renders the same markup for every row: it cannot swap `syc-course--agile`
   for `syc-course--leadership` per card. The three accent variables therefore
   hang off the `data-category` the card already carries for the filter
   (kurzy-filter.js reads the same attribute).

   Values match the authored chips: agile, leadership, projects. A row with an
   empty or unknown key simply inherits the neutral defaults on .syc-course. */

[data-category="agile"] .syc-course {
  --syc-course-accent: var(--line-agility, #c2692f);
  --syc-course-tag-bg: hsl(23.67, 61%, 40%);
  --syc-course-pic-bg: #f7ece4;
}

[data-category="leadership"] .syc-course {
  --syc-course-accent: var(--line-leadership, #8585cd);
  --syc-course-tag-bg: hsl(240, 41.86%, 50%);
  --syc-course-pic-bg: #ecebf8;
}

[data-category="projects"] .syc-course {
  --syc-course-accent: var(--line-projects, #69b5a8);
  --syc-course-tag-bg: hsl(169.74, 33.93%, 32%);
  --syc-course-pic-bg: #e6f3f0;
}


/* src/styles/course-loops.css */
/* Course detail — let a loop's wrapper disappear from layout.

   The publisher wraps every loop's output in one element. Inside a grid that
   wrapper becomes a single grid item, so all the rows the loop produced end up
   stacked in one cell instead of flowing as siblings: the four "Co účastníci
   obdrží" cards landed in one column instead of four.

   `display: contents` removes the wrapper from layout while keeping its
   children. This lives in a stylesheet file because the same rule authored as
   a class was pruned from the published CSS. */

.syd-loop-pass {
  display: contents;
}

/* "Co účastníci obdrží" — the loop sits NEXT TO the grid, not inside it.

   Published markup of the block:

     .syd-give
       p.syd-give__k            eyebrow
       .syd-give__grid          data-slot="cards" — ALWAYS EMPTY
       .syd-loop-pass           the loop, a SIBLING of the grid
         .syd-give__card  × n

   So `.syd-give__grid` — the element that carries all the
   grid-template-columns rules, including the 2-up and 4-up breakpoints — never
   receives a single card. `display: contents` on the loop wrapper promotes the
   cards one level up, into `.syd-give`, which is a plain block: every card
   became a full-width bar. Retuning the column count on `.syd-give__grid` can
   never fix this, because that element has no children to lay out.

   Fix without touching the page tree: make `.syd-give` itself the track owner
   and drop the empty slot out of flow.

   2026-09-21: karty se mění na odrážky pod „Co si odnesete“ (zadání
   uživatele) — jeden sloupec, šipka jako u `.syd-goal`, žádná plocha karty.
   Typografie položek zůstává (tučný název + tišší popis), protože část kurzů
   má k názvu i větu navíc. Dvě původní pravidla pro `.syd-give__grid`
   zůstávají: prázdný slot se skrývá a plnou šířku dostane, kdyby smyčka
   někdy skončila uvnitř něj. */

.syd-give {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 10px;
}

.syd-give__k {
  grid-column: 1 / -1;
}

.syd-give__grid:empty {
  display: none;
}

.syd-give__grid:not(:empty) {
  grid-column: 1 / -1;
}

.syd-give__card {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  min-width: 0;
  padding: 0;
  border-radius: 0;
  background-color: transparent;
}

.syd-give__card::before {
  content: "→";
  grid-column: 1;
  grid-row: 1 / span 2;
  color: var(--sye-navy);
  font-family: var(--sye-body);
  font-size: 16px;
  line-height: 1.6;
}

.syd-give__t {
  grid-column: 2;
  margin: 0 !important;
}

.syd-give__p {
  grid-column: 2;
}

/* Většina kurzů má u položky jen název — prázdný odstavec by dělal mezeru. */
.syd-give__p:empty {
  display: none;
}

.syd-give__p:not(:empty) {
  margin-top: 4px !important;
}

/* "Co si odnesete" — the goals list runs in two columns.

   Same shape as the block above: `.syd-goals` carries the 2-up track (from
   768 px), but the loop wraps every goal in one `ul`, so the grid sees a
   single item and all goals stack inside the left half of the row. Hand the
   track to the `ul` itself and let it span the parent's full width. */

.syd-goals__loop {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 10px;
  column-gap: 80px;
}

@media (min-width: 768px) {
  .syd-goals__loop {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* Certifikace — seznam, který z řádků skládá src/scripts/course-cert-list.js.
   `.syd-col__p` má `margin: 0 !important`, odsazení řeší až položky.
   Selektor musí nést `.sye-page`, jinak vyhraje `.sye-page ul { list-style: none }`
   ze Stylů a odrážky nejsou vidět (0,1,1 vs. 0,1,0). */

.sye-page .syd-cert__list {
  margin: 0;
  padding-left: 22px;
  list-style: disc;
}

.syd-cert__list li {
  margin: 0 0 8px;
}

.syd-cert__list li:last-child {
  margin-bottom: 0;
}


/* src/styles/course-programme.css */
/* Course detail — Programme tab, one card per day.

   The CMS stores the programme as one flat repeater whose rows each name their
   day, because a repeater cannot nest. The design groups those rows into a
   card per day, so `course-programme.js` does the grouping at runtime and this
   stylesheet dresses the result.

   Without the script the rows still render, just ungrouped and readable — the
   `.syd-prog__item` rules below stand on their own.

   Every row has one shape: the title on its own line, the detail directly
   beneath it. Do not reintroduce a side-by-side variant for short details — a
   row whose layout depends on how long its text happens to be makes the card
   look broken, which is the bug this replaced.

   Two things keep the grid from going ragged, and both are about the number of
   cards, never about what is in them:

   1. Cards stretch. There is deliberately no `align-items: start` here, so two
      cards in the same row end up the same height — the pair of fixed-height
      620 × 344 cards the design shows. A short day card gets white space under
      its last row instead of stopping early next to a taller neighbour.
   2. The column count follows the day count, from `data-days` on the host,
      capped at three. Hard-wiring two columns dropped a three-day course's
      last card into a second row with a hole beside it. Two days still get the
      design's two columns, unchanged. */

.syd-prog {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

@media (min-width: 900px) {
  .syd-prog {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Three columns are too narrow below 1180px, so the odd card out takes the
     whole row rather than sitting beside an empty cell. */
  .syd-prog[data-days="3"] .syd-prog__card:last-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1180px) {
  .syd-prog[data-days="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .syd-prog[data-days="3"] .syd-prog__card:last-child {
    grid-column: auto;
  }
}

.syd-prog__card {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 26px 28px 8px;
}

.syd-prog__day {
  margin: 0 0 14px;
  color: #b48a79;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.syd-prog__item {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid rgba(14, 20, 50, 0.1);
}

.syd-prog__card .syd-prog__item:last-child {
  border-bottom: 0;
}

.syd-prog__t {
  margin: 0 0 4px;
  font-weight: 700;
  color: #0e1432;
}

.syd-prog__meta {
  margin: 0;
  color: #b48a79;
}


/* styles/editor-fixes.css */
/* Header logo size. Mirrors the logo inline styles so the editor
   canvas (which drops inline styles on images) matches the published site. */
header a img {
  height: 1.75rem !important;
  width: auto !important;
  display: block;
}

/* styles/site.css */
/* Symphera site styles — anchors, hover states, count-up stats */

/* Anchor targets clear the fixed header */
[id] { scroll-margin-top: 6.5rem; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Card + link hover states (data-attribute hooks authored in the page trees) */
[data-team-card] { transition: transform 0.25s ease, box-shadow 0.25s ease; }
[data-team-card]:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(6, 11, 32, 0.12); }
[data-download-card] { transition: transform 0.25s ease, box-shadow 0.25s ease; }
[data-download-card]:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(6, 11, 32, 0.10); }
[data-footer-link]:hover { color: rgb(180, 138, 121) !important; }
a:focus-visible, button:focus-visible { outline: 2px solid rgb(180, 138, 121); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  [data-team-card], [data-download-card] { transition: none; }
  [data-team-card]:hover, [data-download-card]:hover { transform: none; }
}

/* Count-up stats — pure CSS, scroll-driven. Browsers without
   animation-timeline support (and reduced-motion users) see the
   static formatted value instead. */
@property --statn { syntax: '<integer>'; inherits: false; initial-value: 0; }
@supports (animation-timeline: view()) {
  [data-stat] { --statn: 0; }
  [data-stat]::before {
    content: counter(statn);
    counter-reset: statn var(--statn);
    font-variant-numeric: tabular-nums;
  }
  [data-stat] [data-stat-static] { display: none; }
  [data-stat="7000"] { animation: statn-7000 1s ease-out both; animation-timeline: view(); animation-range: entry 30% cover 45%; }
  [data-stat="430"]  { animation: statn-430 1s ease-out both;  animation-timeline: view(); animation-range: entry 30% cover 45%; }
  [data-stat="30"]   { animation: statn-30 1s ease-out both;   animation-timeline: view(); animation-range: entry 30% cover 45%; }
  [data-stat="14"]   { animation: statn-14 1s ease-out both;   animation-timeline: view(); animation-range: entry 30% cover 45%; }
  @media (prefers-reduced-motion: reduce) {
    [data-stat] { animation: none; }
    [data-stat]::before { content: none; }
    [data-stat] [data-stat-static] { display: inline; }
  }
}
@keyframes statn-7000 { to { --statn: 7000; } }
@keyframes statn-430 { to { --statn: 430; } }
@keyframes statn-30 { to { --statn: 30; } }
@keyframes statn-14 { to { --statn: 14; } }


/* src/styles/home-v4.css */
/* Home v4 — Advisory / Education stacking cards.
   Pattern: scroll-driven-animations.style/demos/stacking-cards/css
   Each card is sticky at a slightly lower offset than the previous one, so the
   next card slides over the one before it. The card underneath scales down on a
   view() timeline. Pure CSS, no JS. */

/* position:sticky needs an ancestor that is not a scroll container.
   overflow-x:hidden makes one; overflow-x:clip clips without doing so. */
.sy4-page {
  overflow-x: clip !important;
}

.sy4-svc {
  position: sticky;
  transform-origin: 50% 0%;
  will-change: transform;
}

.sy4-svc--advisory {
  top: 32px;
  margin-bottom: 32px !important;
}

.sy4-svc--education {
  top: 64px;
}

@supports (animation-timeline: view()) {
  .sy4-svc--advisory {
    animation: sy4-stack-scale linear forwards;
    animation-timeline: view();
    animation-range: exit-crossing 200%;
  }
}

@keyframes sy4-stack-scale {
  to {
    transform: scale(0.9);
    filter: brightness(0.78);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sy4-svc {
    position: static;
    animation: none;
  }
}

/* ---------------------------------------------------------------------------
   Hero carousel — "timed cards opening".

   The active slide IS the hero background. The other three wait in the
   thumbnail row. On every step the leftmost thumbnail ITSELF grows out to the
   whole section — home-v4-hero.js reparents that very element into the hero
   and animates its box, so there is never a frame where the small photo
   vanishes and a second copy appears in its place.

   z-order inside the hero:
     0  base photo
     1  the growing card
     2  scrim        — above the growing card, so the headline's backdrop does
                       not pop when the grown card hands over to the base
     3  headline
     4  thumbnail row, arrows, counter — visible over the growing photo the
                       whole time, the way the reference does it
   ------------------------------------------------------------------------ */
.sy4-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Focal point, not centre. All four photos put their subjects' heads in the
   upper part of the frame, so a centred cover-crop decapitates them once the
   hero is wider than the photo — worst on Advisory, which is the only portrait
   source (928×1152) and loses the speaker's head entirely. 20% from the top
   keeps every face in frame; checked against all four sources at both the
   1.8:1 design ratio and the 3.2:1 ultrawide one.
   The card <img> gets the same value so the framing does not shift when the
   grown card hands over to the background. */
.sy4-stage__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: 50% 20%;
  background-repeat: no-repeat;
}

.sy4-dcard__img {
  object-position: 50% 20%;
}

/* no-JS fallback (editor canvas + preview run no scripts): show slide 1 */
.sy4-stage__base {
  background-image: url("/uploads/ir4BEYMwolQdPNGD1dDr7-sy-v4-slide-agile-race.jpg");
}

/* Homepage V2 (/home-v2) opens on the Transformation Summit photo instead of
   the Agile Race one, so it needs its own fallback AND its own first-paint
   blur. Both are keyed off the same marker the carousel script reads for its
   copy table, so a page carries one attribute and everything follows.
   Delete this block together with the page once a version has been chosen. */
.sy4-hero[data-hero-copy="v2"] .sy4-stage__base {
  background-image: url("/uploads/5DG87hmNcdw9GgqCNdxbY-sy-v4-hero-transformation-summit.jpg");
}

.sy4-hero[data-hero-copy="v2"] {
  background-image: url("data:image/jpeg;base64,/9j/2wBDABMNDhEODBMRDxEVFBMXHTAfHRoaHToqLCMwRT1JR0Q9Q0FMVm1dTFFoUkFDX4JgaHF1e3x7SlyGkIV3j214e3b/2wBDARQVFR0ZHTgfHzh2T0NPdnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnb/wAARCAAVACADASIAAhEBAxEB/8QAGgAAAQUBAAAAAAAAAAAAAAAAAAECAwQGBf/EACIQAAICAgAGAwAAAAAAAAAAAAECAAQDEQUSExQhQSIxMv/EABUBAQEAAAAAAAAAAAAAAAAAAAID/8QAGBEBAQEBAQAAAAAAAAAAAAAAAQACETH/2gAMAwEAAhEDEQA/ANWQijydSh3J7vkH4HuVbttsg2hlBMruWAb5QGuyC7q2kDspIJ9Rla4r52RiBqZwdZM/Mz71IcFrI1pyCZQOkV5GKw+/uPGVhk8QhI5kUdYlrLEkmLwsBuJspHjcIS+fIPt//9k=");
}

/* V2's opening slide offers three equal routes instead of one filled pill and
   two afterthoughts, so all three are .sy4-linkarrow. That class is hidden
   below 560px — which is right when it is the SECOND link beside a button, and
   wrong here, because it would leave the phone hero with no links at all. Give
   them back inside this hero only; the row is already a column at that width,
   so they stack.
   Scoped to the V2 marker so `/` keeps the behaviour it has always had. */
@media (max-width: 560px) {
  .sy4-hero[data-hero-copy="v2"] .sy4-hero__ctas .sy4-linkarrow {
    display: inline-flex;
    text-align: left;
    padding-left: 0;
  }
}

/* Only enough darkening on the left for the white headline to hold up over a
   bright photo — no colour cast, no full-frame wash. Sits directly in the
   hero, above the growing card. */
.sy4-stage__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(6, 11, 32, 0.82) 0%,
      rgba(6, 11, 32, 0.55) 34%,
      rgba(6, 11, 32, 0.14) 62%,
      rgba(6, 11, 32, 0.10) 100%),
    linear-gradient(180deg, rgba(6, 11, 32, 0.55) 0%, rgba(6, 11, 32, 0) 22%);
}

/* The Figma frame is 1440 wide, where an 800px hero is a 1.8:1 box and the
   ~1.5:1 photos crop gently. On a 2560px monitor an 800px hero is 3.2:1 and
   `cover` has to throw away more than half of every photo. Let the hero grow
   with the viewport instead. 42vw only exceeds 800px above ~1900px, so at and
   below the design width this is a no-op and the frame still matches Figma. */
/* Scoped to 901+ on purpose. Unscoped it also applied on phones, where an
   800px floor is well over a viewport of photo before the first service card,
   and its !important then blocked the mobile height set on .sy4-hero in the
   design system. Above 900 nothing changes: clamp() is what it always was. */
@media (min-width: 901px) {
  .sy4-hero {
    min-height: clamp(800px, 42vw, 1100px) !important;
  }
}

.sy4-hero__left {
  position: relative;
  z-index: 3;
}

/* the headline block flies up on every slide change */
@keyframes sy4-rise {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}

.sy4-hero__right {
  position: relative;
  z-index: 4;
  width: 512px;
  max-width: 100% !important;
}

.sy4-hero > * {
  min-width: 0;
}

.sy4-cardrow,
.sy4-navrow {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
}

/* Thumbnails are equal thirds of the row — the big one is the hero itself. */
.sy4-dcard {
  width: auto !important;
  flex: 1 1 0 !important;
  min-width: 0;
}

/* --js is added by the script once it is alive. Without it (editor canvas and
   preview run no scripts) the row stays a plain flex row instead of a stack.
   Sliding the queue needs the cards off the flex flow so their positions are
   driven by transform and therefore animate; flex `order` would jump. */
.sy4-cardrow--js {
  position: relative;
}

.sy4-cardrow--js .sy4-dcard {
  position: absolute !important;
  left: 0;
  top: 0;
  flex: none !important;
  will-change: transform;
}

/* the card being opened: reparented into the hero, under the scrim and under
   the rest of the queue. Its label and wash dissolve as it takes over the
   section — a thumbnail caption blown up to full width would fight the
   headline. */
/* No will-change here: left/top/width/height cannot be composited, so hinting
   them only costs an extra layer and makes the repaint jerkier. */
.sy4-cardrow--js .sy4-dcard.sy4-dcard--growing,
.sy4-dcard--growing {
  position: absolute !important;
  z-index: 1;
  overflow: hidden;
}

.sy4-dcard--growing .sy4-dcard__wash,
.sy4-dcard--growing .sy4-dcard__label {
  opacity: 0;
  transition: opacity 420ms ease;
}

/* Neutral darkening under the label. The per-slide coloured gradients from the
   Figma card component read as a colour cast once the same photo also fills
   the hero, so they are replaced with a plain one. */
.sy4-dcard__wash {
  background-image:
    linear-gradient(rgba(6, 11, 32, 0) 42%, rgba(6, 11, 32, 0.72) 100%) !important;
}

/* == Marquee =============================================================
   Figma "vertical scroll text" (685:4045 desktop / 868:1534 mobile): two rows
   of keywords, the top drifting left and the bottom right as the page scrolls.

   Both rows are intentionally WIDER than the viewport and start pulled left,
   so there is text off both edges at every scroll position and the row never
   reveals its own end. The script duplicates each row's text enough times to
   cover that width, then drives the offset from scroll position.

   Decorative by design — it is a keyword wash, not content, so the section is
   aria-hidden rather than read out as a sentence of centre dots. */
.sy4-marquee {
  position: relative;
  overflow: hidden;
  height: 194px;
  /* Figma's 64px leading on a 72px face puts the glyph tops ABOVE the line box,
     and the band clips its overflow — which sliced the top row against the
     hero. Opened the line box to 68 and given the row a real top cushion:
     28 + 68 + 14 + 68 = 178, inside the 194 the frame specifies. */
  padding-top: 28px;
  /* Same ground as the page, so the band reads as whitespace with type in it
     rather than as its own block. */
  background: var(--background, #f0ede6);
}

.sy4-marquee__row {
  display: block;
  width: max-content;
  white-space: nowrap;
  font-family: var(--sy4-display);
  font-weight: 400;
  font-size: 72px;
  line-height: 68px;
  color: rgba(136, 150, 166, 0.3);
  /* transform only — compositable, so the scroll handler never triggers
     layout. */
  will-change: transform;
}

.sy4-marquee__row + .sy4-marquee__row {
  margin-top: 14px;
}

/* -- Section notch ------------------------------------------------------
   Figma 685:4051 — the light band below intrudes upward into the dark hero as
   a rounded tab. Reuses the site's .sya-notch component (absolute, centred,
   colour from --sya-bg) and only overrides the geometry.

   Painted as a background-colour behind a mask rather than an inline <svg>:
   the path is Figma's own, so the curve is exact, but the colour still comes
   from the custom property and there is no exported asset to expire. */
.sya-notch--hero {
  /* bled 1px past the hero edge, same reason as the band notches below */
  bottom: -1px;
  width: 240px;
  height: 21px;
  margin-left: -120px;
  background-color: var(--sya-bg, var(--background, #f0ede6));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 20' preserveAspectRatio='none'%3E%3Cpath d='M15.7358 5.3581C19.4368 1.9144 24.3045 0 29.3598 0H208.568C213.212 0 217.711 1.61608 221.293 4.57097L240 20H0L15.7358 5.3581Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 20' preserveAspectRatio='none'%3E%3Cpath d='M15.7358 5.3581C19.4368 1.9144 24.3045 0 29.3598 0H208.568C213.212 0 217.711 1.61608 221.293 4.57097L240 20H0L15.7358 5.3581Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

/* Figma 832:8668 — the mobile tab is smaller, not the desktop one scaled. */
@media (max-width: 900px) {
  .sya-notch--hero {
    width: 140px;
    height: 17px;
    margin-left: -70px;
  }
}

/* -- Band notches -------------------------------------------------------
   The same tab as the hero, at both edges of the navy results + logo-wall
   block: the cream band above pushes DOWN into it, the cream band below
   pushes UP. One geometry class and two placements, and the top tab is the
   hero path mirrored — so all three notches on the page are literally the
   same Figma curve rather than three hand-drawn paths that drift apart.

   Both tabs are bled 1px PAST the section box and clipped back by the
   section's own overflow:hidden. The tab's flat edge sits exactly on the
   viewBox boundary, so its mask rasterises as a half-covered pixel row; left
   on the boundary that row reads as a faint navy line drawn across the cream
   tab. Pushing it outside the clip leaves only fully opaque cream on screen. */
.sya-notch--band {
  width: 240px;
  margin-left: -120px;
  background-color: var(--sya-bg, var(--background, #f0ede6));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 20' preserveAspectRatio='none'%3E%3Cpath d='M15.7358 5.3581C19.4368 1.9144 24.3045 0 29.3598 0H208.568C213.212 0 217.711 1.61608 221.293 4.57097L240 20H0L15.7358 5.3581Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 20' preserveAspectRatio='none'%3E%3Cpath d='M15.7358 5.3581C19.4368 1.9144 24.3045 0 29.3598 0H208.568C213.212 0 217.711 1.61608 221.293 4.57097L240 20H0L15.7358 5.3581Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

/* The path is the hero's, mirrored about y=35.4079, NOT the same path under
   transform: scaleY(-1). A flip resamples a box whose height is fractional and
   softens both edges; a mirrored path rasterises as crisply as the original. */
.sya-notch--band-top {
  top: -1px;
  height: 21px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 20' preserveAspectRatio='none'%3E%3Cpath d='M15.7358 14.6419C19.4368 18.0856 24.3045 20 29.3598 20H208.568C213.212 20 217.711 18.38392 221.293 15.42903L240 0H0L15.7358 14.6419Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 20' preserveAspectRatio='none'%3E%3Cpath d='M15.7358 14.6419C19.4368 18.0856 24.3045 20 29.3598 20H208.568C213.212 20 217.711 18.38392 221.293 15.42903L240 0H0L15.7358 14.6419Z' fill='%23000'/%3E%3C/svg%3E");
}

.sya-notch--band-bottom {
  bottom: -1px;
  height: 21px;
}

/* Matches the hero's mobile tab — smaller, not the desktop one scaled. The
   height carries the same 1px bleed, so it is set on the placements rather
   than on .sya-notch--band, which they would otherwise override. */
@media (max-width: 900px) {
  .sya-notch--band {
    width: 140px;
    margin-left: -70px;
  }

  .sya-notch--band-top {
    height: 17px;
  }

  .sya-notch--band-bottom {
    height: 17px;
  }
}

@media (max-width: 900px) {
  .sy4-marquee {
    height: 152px;
    padding-top: 24px;
  }

  .sy4-marquee__row {
    font-size: 40px;
    line-height: 48px;
  }

  .sy4-marquee__row + .sy4-marquee__row {
    margin-top: 8px;
  }
}

@media (max-width: 560px) {
  .sy4-marquee {
    height: 128px;
  }

  .sy4-marquee__row {
    font-size: 32px;
    line-height: 40px;
  }
}

/* == Our services ========================================================
   Figma "our services" (685:3765). Two full-bleed cards: Advisory with the
   accordion, Education with the photo row. Advisory carries the bottom border
   and bottom radius, Education the top radius — together they read as one
   panel split by a rule, which is how the Figma frame is built. */
.sy4-svcs {
  display: flex;
  flex-direction: column;
  background: var(--background, #f0ede6);
}

/* The content band is capped at Figma's 1200 and centred, NOT padded a fixed
   120px — with space-between and a fixed inset, the two 580px columns fly to
   the edges of a wide monitor and the pair stops reading as one card. This is
   the same rule the sections below the hero already follow (see the 1441+ note
   further down): keep the Figma width, centre the surplus. */
.sy4-svcs__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 123px max(120px, calc(50% - 600px));
}

.sy4-svcs__card--advisory {
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}

.sy4-svcs__card--education {
  padding-top: 100px;
  padding-bottom: 100px;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

/* Shrinkable, not fixed: two rigid 580px columns plus the gap need 1440px of
   viewport, so every width between the 900px stack and 1440 overflowed. They
   now share whatever the band gives them and cap at the Figma 580. */
.sy4-svcs__col {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1 1 0;
  max-width: 580px;
  min-width: 0;
}

.sy4-svcs__h2 {
  margin: 0;
  font-family: var(--sy4-display);
  font-weight: 400;
  font-size: 56px;
  line-height: 64px;
  color: #060b20;
}

.sy4-svcs__lead {
  margin: 0;
  font-family: var(--sy4-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 40px;
  color: #060b20;
}

.sy4-svcs__links {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

/* -- Accordion ----------------------------------------------------------
   Rows are closed in the markup and opened by home-v4-accordion.js, so with
   no JS (editor canvas, preview) every panel is readable rather than a stack
   of headings with unreachable content. */
.sy4-acc {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  max-width: 580px;
  min-width: 0;
}

.sy4-acc__row {
  border-bottom: 2px solid #3c5058;
}

.sy4-acc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 60px;
  padding: 16px 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  /* Title type and chevron both live on the BUTTON itself. The importer turns a
     <button> into a text module and flattens its children, so the
     <span class="sy4-acc__t"> and the empty <span class="sy4-acc__icon">
     originally written here were dropped on insert — the chevron never existed
     and the title fell back to inherited body type. A pseudo-element cannot be
     dropped, and text on the button cannot be unwrapped. */
  font-family: var(--sy4-body);
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  color: #060b20;
}

/* ::after is a flex item, so space-between parks it at the right edge with no
   node of its own. currentColor keeps it in step with the title. */
.sy4-acc__head::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  margin-right: 5px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 260ms ease;
}

.sy4-acc__row.is-open .sy4-acc__head::after {
  transform: rotate(225deg) translateY(-2px);
}

/* max-height is driven from scrollHeight by the script, so the row animates
   to its real content height instead of a guessed one. */
.sy4-acc__panel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 220ms ease;
}

.sy4-acc__row.is-open .sy4-acc__panel {
  opacity: 1;
}

.sy4-acc__sub {
  margin: 0 0 8px;
  font-family: var(--sy4-body);
  font-weight: 700;
  font-size: 15px;
  line-height: 22px;
  color: #060b20;
}

.sy4-acc__p {
  margin: 0 0 20px;
  font-family: var(--sy4-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  color: #3c5058;
}

.sy4-acc__panel > .sy4-btn {
  margin-bottom: 24px;
}

/* -- Education photo row ------------------------------------------------ */
.sy4-pics {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 16, not Figma's 18: four pics measure 531px, and three 18px gaps put the
     row at 585 inside a 580 column. */
  gap: 16px;
  flex: 1 1 0;
  max-width: 580px;
  min-width: 0;
}

.sy4-pics__pic {
  flex: none;
  width: 112px;
  height: 233px;
  border-radius: 12px;
  overflow: hidden;
  background: #060b20;
}

/* The centre photo is taller on purpose — the row reads as a fanned stack
   rather than a filmstrip. */
.sy4-pics__pic--tall {
  width: 194px;
  height: 309px;
}

.sy4-pics__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 900px) {
  .sy4-svcs__card,
  .sy4-svcs__card--education {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    padding: 40px 32px;
  }

  .sy4-svcs__col,
  .sy4-acc,
  .sy4-pics {
    flex: 1 1 auto;
    max-width: none;
  }

  .sy4-svcs__h2 {
    font-size: 40px;
    line-height: 48px;
  }

  .sy4-svcs__lead {
    font-size: 24px;
    line-height: 31px;
  }

  .sy4-svcs__links {
    gap: 20px;
  }

  /* Mobile shows three photos (Figma 868:1576); the fourth would shrink all
     of them below the width where the faces are readable. */
  .sy4-pics__pic--last {
    display: none;
  }

  .sy4-pics {
    gap: 8px;
  }

  .sy4-pics__pic {
    width: 87px;
    height: 130px;
  }

  .sy4-pics__pic--tall {
    width: 137px;
    height: 160px;
  }
}

@media (max-width: 560px) {
  .sy4-svcs__h2 {
    font-size: 32px;
    line-height: 40px;
  }

  .sy4-acc__head {
    font-size: 17px;
    line-height: 24px;
  }
}

/* == Client results ======================================================
   Figma "01 — Client Results Carousel" (685:3875 / 868:1579). Navy band,
   centred heading, then a track of wide testimonial cards.

   The track is a scroll-snap row rather than a transform carousel: it is then
   swipeable on touch and keyboard-scrollable for free, and it degrades to a
   plain scrollable row with no JS. The dots only mirror and drive it. */
.sy4-results {
  position: relative;
  overflow: hidden;
  background: var(--01-primary-navy-blue, #0e1432);
  padding: 108px 0 62px;
  /* A leftover Selectors-panel default (likely from a generic "results"
     component used elsewhere) sets margin-top/bottom: 40px on this class
     unconditionally. That breaks the notch design directly below (see
     .sya-notch--band above) and .sy4-logos further down: both are built
     assuming .sy4-results sits flush against its neighbours so the navy
     reads as one continuous band with light notches cut into it — the
     40px margin opened a visible cream gap between the results and logo
     sections instead. Zeroed here, which wins over the Selectors panel. */
  margin-top: 0;
  margin-bottom: 0;
}

.sy4-results__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto 56px;
  padding: 0 120px;
  text-align: center;
}

.sy4-results__kicker {
  margin: 0;
  max-width: 756px;
  font-family: var(--sy4-body);
  font-size: 24px;
  line-height: 32px;
  color: var(--background, #f0ede6);
}

.sy4-results__h2 {
  margin: 0;
  font-family: var(--sy4-display);
  font-weight: 400;
  font-size: 90px;
  /* Figma sets 64px leading on a 90px face. That clips descenders in a
     browser, so it is opened up to just over the cap height. */
  line-height: 96px;
  color: #fff;
  text-transform: uppercase;
}

.sy4-results__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 8px;
}

.sy4-results__track {
  display: flex;
  gap: 30px;
  /* Peek of the next card at both ends, as in the Figma track. */
  padding: 0 max(20px, calc(50% - 500px));
  width: max-content;
}

.sy4-tcard {
  display: flex;
  flex: none;
  width: min(1000px, 88vw);
  min-height: 400px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--03-tertiary-sand-accent, #d9c2a6);
  scroll-snap-align: center;
}

.sy4-tcard__media {
  flex: none;
  width: 440px;
  background: #060b20;
}

.sy4-tcard__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Figma 685:3888: real auto-layout, two blocks split by justify-content —
   "content" (headline+quote) pinned to the top, "name and company" pinned to
   the bottom, whatever the quote's length. Needs a definite height to split;
   .sy4-tcard sets one (400px desktop), so this just fills it via the default
   stretch from its flex-row parent. On mobile the card's height is auto, so
   this collapses back to plain stacked flow. */
.sy4-tcard__body {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  height: 100%;
  padding: 46px;
  min-width: 0;
}

.sy4-tcard__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
}

.sy4-tcard__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.sy4-tcard__co {
  margin: 0;
  font-family: var(--sy4-body);
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  text-transform: uppercase;
  color: #060b20;
}

.sy4-tcard__who {
  margin: 0;
  font-family: var(--sy4-body);
  font-size: 16px;
  line-height: 24px;
  color: #060b20;
}

.sy4-tcard__h3 {
  margin: 0;
  font-family: var(--sy4-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 40px;
  color: #060b20;
}

.sy4-tcard__q {
  margin: 0;
  font-family: var(--sy4-body);
  font-size: 15px;
  line-height: 24px;
  color: #060b20;
}

/* Two copies of every quote in the HTML (.sy4-tcard__q--full /
   .sy4-tcard__q--short, the second pre-truncated to 100 chars + "..."),
   toggled by this pure-CSS rule rather than JS truncating one copy at
   runtime — verified that a body-end script does not reliably execute in
   this editor's preview pipeline, so a CSS toggle is the only version that's
   actually guaranteed to show correctly here. Desktop (901px+) shows the
   full quote; tablet/mobile shows the short one. */
.sy4-tcard__q--short {
  display: none;
}
@media (max-width: 900px) {
  .sy4-tcard__q--full {
    display: none;
  }
  .sy4-tcard__q--short {
    display: block;
  }
}

/* Arrows then dots, in that order — the same nav row the hero uses. */
.sy4-results__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
}

.sy4-results__arrow {
  flex: none;
  padding: 0;
}

/* Separates the arrow pair from the dot group without needing a wrapper. */
.sy4-results__arrow--next {
  margin-right: 12px;
}

.sy4-results__dot {
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: background 240ms ease, border-color 240ms ease;
}

.sy4-results__dot.is-on {
  border-color: #fff;
  background: #fff;
}

/* Homepage's own dots must always read white against the navy band,
   regardless of any other page's scoped override that might otherwise
   leak in (e.g. Advisory's .syv-results scoping, if a copied instance
   still carries that ancestor class). Scoped to .sy4-page (homepage's own
   top-level wrapper, set unconditionally elsewhere in this file) with
   !important so it wins regardless of specificity/source order elsewhere. */
.sy4-page .sy4-results__dot {
  border-color: rgba(255, 255, 255, 0.6) !important;
  background: transparent !important;
}
.sy4-page .sy4-results__dot.is-on {
  border-color: #fff !important;
  background: #fff !important;
}

/* == Logo wall =========================================================== */
.sy4-logos {
  /* Anchors the bottom band notch; the wall's own strips are unaffected. */
  position: relative;
  overflow: hidden;
  background: var(--01-primary-navy-blue, #0e1432);
  padding: 65px 0 72px;
}

/* On Education/Advisory (.sye-page), this is the reusable "Logo strip"
   component placed on a light page background, not homepage's own navy
   band — so it needs to inherit whatever's behind it instead of forcing
   navy. Homepage's own .sy4-page instance is untouched, same scoping
   pattern already used for .sy4-cta on these pages further down. */
.sye-page .sy4-logos {
  background: transparent;
}

.sy4-logos__t {
  margin: 0 0 44px;
  font-family: var(--sy4-body);
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  text-transform: uppercase;
  text-align: center;
  color: var(--01-primary-copper, #b48a79);
}

/* Strips are centred and allowed to overrun the viewport, so the wall reads as
   a continuing field of logos rather than three tidy centred rows. */
/* Each strip drifts continuously, alternating direction line by line.
   .sy4-logos clips the overflow, so the rows read as an endless field of logos
   rather than three rows that start and stop. */
.sy4-logos__strip {
  display: flex;
  gap: 40px;
  width: max-content;
  margin: 0 0 26px;
  max-width: none;
  will-change: transform;
}

/* The animation is added by home-v4-logowall.js only AFTER it has duplicated
   the logo set. Animating a single set would slide the row off and leave the
   strip empty for most of the loop, so the class and the duplication have to
   arrive together — which also leaves the no-JS case as three static rows
   rather than a blank band. */
.sy4-logos__strip--anim {
  animation-name: sy4-logodrift;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  /* Halved twice from the original 46s: at anything faster the wall reads as a
     conveyor belt rather than a slow drift behind the content. */
  animation-duration: 184s;
}

.sy4-logos__strip--right {
  animation-direction: reverse;
}

/* Slightly different speeds per line: identical durations make the two
   left-moving rows look mechanically glued together. */
.sy4-logos__strip--anim:nth-of-type(2) { animation-duration: 216s; }
.sy4-logos__strip--anim:nth-of-type(3) { animation-duration: 160s; }

/* Exactly one duplicated set, so -50% lands on an identical frame. */
@keyframes sy4-logodrift {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .sy4-logos__strip--anim {
    animation: none;
  }
}

/* A white card per logo: the wall sits on navy and the real marks are mostly
   dark or brand-coloured, so they need a light ground — which is how they are
   presented on symphera.cz too. */
.sy4-logos__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 200px;
  height: 70px;
  padding: 10px 16px;
  border-radius: 8px;
  background: #fff;
}

/* contain, never cover: these are logos of wildly different aspect ratios
   (Deloitte is a wide wordmark, Škoda a circle) and cropping any of them is
   worse than leaving air around it. max-* rather than width/height so a small
   source is not upscaled into mush. */
.sy4-logos__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* == Frameworks ========================================================== */
.sy4-fw {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  padding: 100px max(120px, calc(50% - 600px));
  background: var(--background, #f0ede6);
}

.sy4-fw__collage {
  position: relative;
  flex: 0 0 568px;
  height: 533px;
}

.sy4-fw__spiral,
.sy4-fw__pv,
.sy4-fw__photo {
  position: absolute;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
}

.sy4-fw__spiral {
  left: 248px;
  top: 0;
  width: 320px;
  height: 257px;
  padding: 24px;
  background: var(--02-secondary-muted-teal, #3c5058);
}

.sy4-fw__photo--a {
  left: 47px;
  top: 50px;
  width: 184px;
  height: 207px;
}

.sy4-fw__photo--b {
  left: 319px;
  bottom: 0;
  width: 249px;
  height: 260px;
}

.sy4-fw__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sy4-fw__pv {
  left: 0;
  bottom: 100px;
  width: 300px;
  height: 160px;
  padding: 24px;
  background: var(--02-secondary-deep-teal, #192a31);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.sy4-fw__cardeyebrow {
  margin: 0 0 6px;
  font-family: var(--sy4-body);
  font-size: 12px;
  line-height: 16px;
  text-transform: uppercase;
  color: #fff;
}

.sy4-fw__cardeyebrow--copper {
  color: var(--01-primary-copper, #b48a79);
}

/* 10px, not Figma's 16 — with the real 4-metric list (Figma's own mobile
   card only shows 2), 16px pushed the last row (Growth) past the card's
   257px desktop height and it was clipped by overflow:hidden. Trimmed here
   plus the meter spacing below to fit all four rows without cutting any. */
.sy4-fw__cardtitle {
  margin: 0 0 10px;
  font-family: var(--sy4-body);
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  color: #fff;
}

.sy4-fw__cardp {
  margin: 0 0 12px;
  font-family: var(--sy4-body);
  font-size: 12px;
  line-height: 16px;
  color: #fff;
}

.sy4-fw__cardlink {
  font-family: var(--sy4-body);
  font-size: 14px;
  color: #fff;
  text-decoration: none;
}

.sy4-fw__meter {
  margin-bottom: 12px;
}

.sy4-fw__meterlabel {
  display: block;
  margin-bottom: 4px;
  font-family: var(--sy4-body);
  font-size: 11px;
  /* Unset, this inherited the page's 24px body line-height on an 11px
     label — more than double the space the glyphs need, and the single
     largest contributor to the Growth row being clipped on desktop. */
  line-height: 14px;
  color: rgba(255, 255, 255, 0.6);
}

.sy4-fw__track {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.3);
}

.sy4-fw__fill {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: var(--03-tertiary-projects, #69b5a8);
}

.sy4-fw__fill--81 { width: 81%; }
.sy4-fw__fill--66 { width: 66%; }
.sy4-fw__fill--88 { width: 88%; }
.sy4-fw__fill--55 { width: 55%; }

.sy4-fw__text {
  display: flex;
  flex-direction: column;
  gap: 28px;
  flex: 1 1 0;
  max-width: 500px;
  min-width: 0;
}

/* The collage cannot shrink — its children are absolutely positioned to a
   568x533 frame — so the frameworks row stacks while there is still room for
   it at full size, rather than being squeezed or scaled mid-range. */
@media (max-width: 1240px) {
  .sy4-fw {
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
  }

  .sy4-fw__text {
    flex: 1 1 auto;
    max-width: 640px;
  }

  /* Four photos need 531px of pics; below this the Education column is
     narrower than that, so the row drops to three as it does on mobile. */
  .sy4-pics__pic--last {
    display: none;
  }
}

.sy4-fw__eyebrow,
.sy4-events__eyebrow {
  margin: 0;
  font-family: var(--sy4-body);
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  text-transform: uppercase;
  color: var(--01-primary-copper, #b48a79);
}

.sy4-fw__h2 {
  margin: 0;
  font-family: var(--sy4-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 40px;
  color: #060b20;
}

.sy4-fw__p {
  margin: 0;
  font-family: var(--sy4-body);
  font-size: 18px;
  line-height: 24px;
  color: #060b20;
}

/* == Events ============================================================== */
.sy4-events {
  padding: 100px max(120px, calc(50% - 600px)) 120px;
  background: var(--background, #f0ede6);
}

.sy4-events__h2 {
  margin: 24px 0 40px;
  max-width: 850px;
  font-family: var(--sy4-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 40px;
  color: #060b20;
}

/* 692 / 490 in Figma — kept as a ratio so the pair scales together instead of
   the narrow card collapsing first. */
.sy4-events__grid {
  display: grid;
  grid-template-columns: 692fr 490fr;
  gap: 18px;
}

.sy4-ecard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 424px;
  padding: 36px 40px 40px;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  background: #060b20;
}

.sy4-ecard--summit {
  background-image: linear-gradient(90deg, #03382c, #060b20);
}

.sy4-ecard--race {
  background-image: linear-gradient(90deg, #6c4b3d, #060b20);
}

/* The photo is a texture under the gradient, not the subject — hence the low
   opacity and why the copy sits on the gradient rather than on the image. */
.sy4-ecard__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
  pointer-events: none;
}

.sy4-ecard__eyebrow,
.sy4-ecard__t,
.sy4-ecard__p,
.sy4-ecard__cta {
  position: relative;
}

.sy4-ecard__eyebrow {
  font-family: var(--sy4-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

.sy4-ecard__t {
  margin-top: auto;
  padding-top: 32px;
  font-family: var(--sy4-display);
  font-weight: 400;
  font-size: 40px;
  line-height: 48px;
  color: #fff;
}

.sy4-ecard__p {
  margin: 16px 0 28px;
  max-width: 500px;
  font-family: var(--sy4-body);
  font-size: 16px;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.8);
}

.sy4-ecard__cta {
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  border-radius: 999px;
  background: #fff;
  font-family: var(--sy4-body);
  font-size: 15px;
  color: #060b20;
}

@media (max-width: 900px) {
  .sy4-results {
    padding: 62px 0 40px;
  }

  .sy4-results__head {
    padding: 0 32px;
    margin-bottom: 32px;
    gap: 20px;
  }

  .sy4-results__kicker {
    font-size: 18px;
    line-height: 26px;
  }

  .sy4-results__h2 {
    font-size: 56px;
    line-height: 64px;
  }

  .sy4-results__track {
    gap: 16px;
    padding: 0 32px;
  }

  /* .sy4-results__track never changes flex-direction at mobile — it's
     always a row of cards — so its default align-items:stretch forces
     EVERY card to match whichever one is tallest, rather than each card
     sizing to its own content. That's what was actually causing the
     "background doesn't cover the text" bug: the card's own box stayed
     locked to a stretched height while overflow:visible let the text spill
     out past it. align-self:flex-start opts this card out of that stretch,
     so height:auto now genuinely means "as tall as my own content", the
     background covers it fully, and overflow can go back to hidden for
     properly rounded corners — nothing needs to spill past the box anymore.
     min-height:400px is the floor requested for tablet/mobile so short
     testimonials don't look tiny; taller ones (ALEF NULA's) simply grow
     past it. The 720px fixed viewport height from the previous attempt is
     no longer needed now the actual cause is fixed — back to auto. */
  .sy4-results__viewport {
    height: auto;
  }

  .sy4-tcard {
    flex-direction: column;
    align-self: flex-start;
    width: min(326px, 84vw);
    height: auto;
    min-height: 400px;
    overflow: hidden;
  }

  .sy4-tcard__media {
    width: 100%;
    height: 180px;
  }

  .sy4-tcard__body {
    height: auto;
    padding: 20px;
  }

  .sy4-tcard__h3 {
    font-size: 24px;
    line-height: 31px;
  }

  .sy4-logos {
    padding: 32px 0 40px;
  }

  .sy4-logos__t {
    margin-bottom: 26px;
    font-size: 16px;
    padding: 0 32px;
  }

  .sy4-logos__strip {
    gap: 32px;
    margin-bottom: 27px;
  }

  .sy4-logos__logo {
    width: 114px;
    height: 40px;
    padding: 6px 10px;
  }

  .sy4-fw {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
    padding: 40px 32px;
  }

  .sy4-fw__text {
    flex: 1 1 auto;
    max-width: none;
    gap: 20px;
  }

  /* Figma's mobile "about us pic" (832:8581) is a DIFFERENT, more compact
     composition than the desktop collage — not the same artwork scaled down,
     built around placeholder copy much shorter than the real content: a
     single short line where the live card has a real eyebrow+title pair,
     two metrics where the live card has four, three words where the
     ProVision4 card has a full sentence. A fixed-size box sized off Figma's
     own (shorter) copy clipped the spiral card's metrics and let the
     ProVision4 paragraph run past the bottom of the frame.

     Grid replaces the old absolute-positioned 568x533 layout entirely: two
     content-height rows keep Figma's photo-left/card-right composition and
     column proportions, but every card is free to grow to fit its real
     copy — nothing is clipped and nothing overflows the frame. */
  .sy4-fw__collage {
    display: grid;
    grid-template-columns: 58fr 42fr;
    align-items: end;
    gap: 12px;
    flex: none;
    position: static;
    width: 100%;
    max-width: 363px;
    height: auto;
    margin: 0 auto;
  }

  .sy4-fw__spiral,
  .sy4-fw__pv,
  .sy4-fw__photo {
    position: static;
    width: 100%;
    height: auto;
  }

  .sy4-fw__spiral {
    grid-column: 2;
    grid-row: 1;
    padding: 20px;
  }

  /* Card is ~86px of text width on mobile — 20px bold (desktop's size) wraps
     "Leadership" itself mid-word. Sized down until the word fits whole. */
  .sy4-fw__spiral .sy4-fw__cardtitle {
    font-size: 14px;
    line-height: 18px;
  }

  .sy4-fw__photo--a {
    grid-column: 1;
    grid-row: 1;
    aspect-ratio: 187 / 207;
  }

  .sy4-fw__photo--b {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    aspect-ratio: 137 / 143;
  }

  /* Figma's mobile card is 112px tall against real copy that needs roughly
     half again as much room — the Czech/English copy is a full sentence
     where Figma's placeholder ("best practice principles") is three words.
     Auto height (from the shared rule above) keeps Figma's width and no-CTA
     content instead of clipping real text to a pixel count Figma never had
     to honour. */
  .sy4-fw__pv {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    padding: 20px;
  }

  /* Figma's mobile card shows eyebrow, title and copy only — no CTA. */
  .sy4-fw__cardlink {
    display: none;
  }

  /* Mobile shows Vision only — Execution, Trust and Growth are dropped,
     not just compressed, to keep the card short on a phone. */
  .sy4-fw__spiral .sy4-fw__meter:nth-of-type(n+2) {
    display: none;
  }

  .sy4-events {
    padding: 40px 32px 56px;
  }

  .sy4-events__grid {
    grid-template-columns: 1fr;
  }

  .sy4-events__h2 {
    font-size: 24px;
    line-height: 32px;
  }

  .sy4-ecard {
    min-height: 320px;
    padding: 28px 24px 32px;
  }

  .sy4-ecard__t {
    font-size: 32px;
    line-height: 40px;
  }
}

/* == Hero first paint ====================================================
   A 408-byte blurred copy of slide 1, inlined as a data URI so it costs NO
   request and is painted the moment the stylesheet lands. The real photo is
   301kB — until it decodes, the hero used to be flat navy with the scrim on
   top, which is the "background is visible" everyone notices on a cold load.
   This puts the photo's own colours and composition there immediately, and the
   full image paints over it.

   Sits on .sy4-hero, BENEATH .sy4-stage__base (z-0), so it is only ever seen
   through a base that has not loaded or is mid-dissolve — the script owns the
   base's own background-image and this never fights it.

   Regenerate if slide 1's photo changes: sharp(src).resize(32).blur(1.4)
   .jpeg({quality: 42}) — keep it under ~1kB or it stops being free. */
.sy4-hero {
  background-image: url("data:image/jpeg;base64,/9j/2wBDABMNDhEODBMRDxEVFBMXHTAfHRoaHToqLCMwRT1JR0Q9Q0FMVm1dTFFoUkFDX4JgaHF1e3x7SlyGkIV3j214e3b/2wBDARQVFR0ZHTgfHzh2T0NPdnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnb/wAARCAAVACADASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAMEAgX/xAAiEAACAQMEAgMAAAAAAAAAAAABAgADBBEFEiFBMTITFCL/xAAWAQEBAQAAAAAAAAAAAAAAAAACAQD/xAAaEQEBAAMBAQAAAAAAAAAAAAABAAIRQTEy/9oADAMBAAIRAxEAPwBB0tPhUDh+5O2mKA369TzN/ec0FqYOREi73Fsn26kcUkJ2sFjRoKjod2RyIXFZa67aZ27epJa3ZFVVY5EXqTihXDocA9SI71PAMmdp2GpurDIAktjTV9QII4z4hCPsHyut7dDqrjHC8gTnasxe8K+AIQmPqm0xUv/Z") !important;
  background-size: cover;
  background-position: 50% 20%;
  background-repeat: no-repeat;
}

/* == CTA banner ==========================================================
   Figma "CTA footer" (778:4438 desktop, 832:8637 mobile): sand panel, display
   headline left, LET'S TALK + line of copy centre, round arrow right.

   Laid out as a grid rather than flex so the eyebrow and the paragraph can
   stack in the middle column WITHOUT a wrapper element around them — the
   banner is an <a> whose children came through the importer as flat siblings,
   and adding a wrapper would mean rebuilding the node. */
.sy4-cta__banner {
  display: grid;
  /* Proportional, not a fixed 577px headline column: with 577 + 64 + two 48px
     gaps reserved, the middle column got whatever was left — about 23px at a
     1000px viewport, which set "Bring us the challenge" one word per line. */
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) 64px;
  align-items: start;
  column-gap: 40px;
  min-height: 220px;
  padding: 56px;
  border-radius: 20px;
  background: var(--03-tertiary-sand-accent, #d9c2a6) !important;
  text-decoration: none;
}

/* flex: none !important beats a leftover design-system rule for this exact
   class name (an older "Newsletter Banner" component, same one the #a9c4d9
   outline below comes from) that sets flex-grow/shrink/basis + min-width.
   Those don't collide with the grid layout desktop uses, but once the
   mobile block below turns this into a flex item, its flex-basis:420px
   forces the headline to a fixed 420px tall unless overridden here. */
.sy4-cta__h {
  grid-column: 1;
  align-self: center;
  min-width: 0 !important;
  flex: none !important;
  font-family: var(--sy4-display);
  font-weight: 400;
  font-size: 48px;
  line-height: 54px;
  color: var(--01-primary-navy-blue, #0e1432) !important;
}

/* Figma "Lcollum" (1039:1584): a real flex column, so the eyebrow and
   paragraph sit exactly 4px apart regardless of anything else in the grid.
   The two-row grid this replaced forced row 1 to the button's full 64px
   height, which pushed the paragraph ~40px below the eyebrow instead of 4. */
.sy4-cta__lcol {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}

.sy4-cta__eyebrow {
  font-family: var(--sy4-body);
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  text-transform: uppercase;
  color: var(--01-primary-copper, #b48a79);
}

/* Same leftover-rule fix as .sy4-cta__h above (that design-system rule sets
   this class's flex-basis to 310px). */
.sy4-cta__p {
  max-width: 308px;
  min-width: 0 !important;
  flex: none !important;
  font-family: var(--sy4-body);
  font-size: 18px;
  line-height: 24px;
  color: #66666b !important;
}

.sy4-cta__btn {
  grid-column: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 32px;
  background: #fff !important;
  font-family: var(--sy4-body);
  font-size: 24px;
  color: #060b20 !important;
}

/* Stacked per Figma 832:8637, arrow parked bottom-right.
   Keyed to 1100, not 900: three columns plus the arrow stop fitting well before
   the phone layout, and stacking early beats squeezing the copy. */
@media (max-width: 1100px) {
  /* Figma 832:8638: a plain stacked flex column, not a grid — items-end so
     the arrow parks bottom-right after the copy, 10px between blocks. The
     eyebrow is not part of the mobile design at all. */
  .sy4-cta__banner {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    min-height: 0;
    padding: 32px;
  }

  .sy4-cta__h {
    align-self: stretch;
    font-size: 32px;
    line-height: 40px;
  }

  .sy4-cta__lcol {
    align-self: stretch;
  }

  .sy4-cta__eyebrow {
    display: none;
  }

  .sy4-cta__p {
    max-width: none;
  }

  .sy4-cta__btn {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 24px;
    font-size: 20px;
  }
}

/* == CTA banner alignment ================================================
   The CTA lives in the Layout template, so it was never touched by the Figma
   rebuild and kept the design system's own band: max-width 1440 with 80px
   padding is a 1280 band, against the 1200 the sections above it now use — 40px
   wider on each side. Its own breakpoints (40px at 1200, 24px at 900) drift
   further still from the sections' 120px and 32px.

   Overridden here rather than edited in the Selectors panel so the whole band
   is defined in one place, alongside the sections it has to line up with.
   !important because the rules being beaten are the design system's, including
   its media queries — the same reason .sy4-hero__right carries it. */
.sy4-cta {
  max-width: none !important;
  padding-left: 20px !important;
  padding-right: 20px !important;

  /* -- Straddle the footer edge ----------------------------------------
     In Figma the banner is a child of the Footer frame overhanging its top
     edge: 133px above it on the light ground, 87px down inside the navy
     (778:4438 sits at bottom 483 in a 570-tall footer, so its top is -133 and
     its bottom +87 relative to the footer top).

     The design system pairs translateY(-133px) with margin-bottom:-133px, and
     those cancel exactly — footer top lands at T+H-133 while the banner's
     visual bottom lands at T-133+H, the same pixel. Hence a banner that
     touches the navy instead of crossing it.

     Tuning that pair was tried twice and failed both times: it spans three
     wrappers (.sy4-cta -> .sy4-page -> <main>) and then nets against the
     footer's own margin-top: 133px, so a single number here is guesswork about
     everything in between.

     Moving the footer did not work. Three attempts — the design system's own
     translateY/-margin pair, then -353px, then -87px on this element — all
     failed to shift it visibly. The REASON is not established: candidates are
     the BFC on .sy4-page (`overflow-x: clip`), a height set somewhere on the
     wrapper chain, or something between <main> and <footer> that was never
     read. Worth pinning down before touching this again.

     So the footer's position is taken out of the equation rather than
     diagnosed — this works whichever of those it turns out to be. The navy edge is
     PAINTED here, positioned against the banner's own box, which means the
     overlap cannot drift no matter what the footer or the wrappers do. The
     block runs 87px above the banner's bottom edge and 240px below it, so it
     merges into the real footer (same colour, no seam) across any small gap
     the flow leaves behind. */
  transform: none !important;
  margin-bottom: 0 !important;

  /* Paint the sand over the navy: the footer is later in the DOM. */
  position: relative;
  z-index: 2;

  /* This band belongs to no section: .sy4-events supplies the beige above it
     and the footer the navy below, so without a background of its own the
     body's lighter tone showed through on both sides of the panel — full width,
     since the max-width above is removed. Painted first, then the ::after navy
     covers its lower 87px (a negative z-index child paints above its stacking
     context's background but below its content). */
  background: var(--background, #f0ede6);
}

/* The 1px #a9c4d9 outline is a leftover from the two-box Figma construction
   (an outlined teal "Newsletter Banner" wrapping a sand Frame). Collapsed into
   one sand panel here, it reads as an unintended pale hairline. */
/* The navy edge. Full-bleed via 100vw — safe because .sy4-page clips its
   horizontal overflow, so this cannot produce a scrollbar. z-index -1 keeps it
   behind the sand panel but in front of the page ground, inside the stacking
   context .sy4-cta already establishes. */
.sy4-cta::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  /* WAS bottom:-240px / height:327px. That overhang existed to bridge a gap
     below the banner back when the footer could not be moved. The footer now
     sits flush at the banner's bottom edge (.sy4-footer margin-top:0), so the
     240px stopped bridging anything and simply covered the footer's first
     275px — the SYMPHERA / COMPANY / LEGAL columns — in the same navy, which
     read as "the footer disappeared". It paints but is a pseudo-element, so
     elementsFromPoint never reported it and every hit-test said the columns
     were unobstructed.
     Now exactly the 87px strip the banner is meant to straddle. */
  bottom: 0;
  height: 87px;
  background: #060b20;
  z-index: -1;
  pointer-events: none;
}

.sy4-cta__banner {
  border: 0 !important;
  /* Above the painted navy. */
  position: relative;
  /* Fixed 1280px content band (matching .sye-cta__banner on Education and
     .sya-jobs-banner on About), independent of .sy4-cta's own full-bleed
     width — which must stay full-bleed so its cream background keeps
     matching the page around it edge-to-edge. */
  max-width: 1280px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (min-width: 2560px) {
  .sy4-cta__banner {
    max-width: 1920px !important;
  }
}

@media (max-width: 900px) {
  .sy4-cta {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* == CTA banner on the wide-column pages =================================
   The band above assumes the homepage's 1200 content band. Kurzy and
   Vzdelavani (.sye-page) run a WIDER column: .syk-cat / .sye-sect are
   `max-width: clamp(1440px, 92vw, 1800px)` with 80px padding, so their
   content band is min(100% - 160px, 1640px) — 1280 at 1440, 1640 at 2160.

   Asked for by the designer (Josefina, 2026-09-09): on 2160px monitors the
   contact banner should sit on the 1800 content column instead of staying at
   the narrow homepage band. Expressed as padding rather than max-width
   because the rule above sets `max-width: none !important` and the navy
   ::after edge is positioned against this element's own box.

   The padding below inverts that clamp exactly. Solving
   padding = (100vw - (clamp(1440px, 92vw, 1800px) - 160px)) / 2 gives
   50% - clamp(720px, 46vw, 900px) + 80px, floored at 80px so the band never
   exceeds 100% - 160px on narrow viewports. Measured against .syk-cat:
   80px at 1280 and 1440, 148px at 1700, 260px at 2160 — identical in each.

   A plain `max(80px, calc(50% - 820px))` was tried first and drifts: it
   ignores the 92vw middle term, so at 1700 it put the banner 68px wider on
   each side than the card grid above it. */
.sye-page .sy4-cta {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

@media (min-width: 768px) {
  .sye-page .sy4-cta {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* "TRANSFORMATION SUMMIT" in the narrow thumbnail. Two earlier attempts both
   failed: allowing the break split the word mid-letter, and forbidding it (the
   previous state of this rule) just let the word run past the card's
   overflow:hidden and get sliced instead. Neither addressed the cause, which
   is that the word does not FIT. .sy4-hero__right is a fixed 512px, so above
   560px the queue is ALWAYS three cards of ~160px — 128px of text once the
   16px insets are off, against ~134px for "TRANSFORMATION" at 16px. Sizing the
   label to 13px (~109px) puts it on its own line with room to spare; the
   break stays permitted as a backstop so no future copy can be sliced again.
   Below 561px the queue drops to two cards and the design system already
   sizes the label down. */
@media (min-width: 561px) {
  .sy4-dcard__label {
    font-size: 13px;
    line-height: 18px;
    letter-spacing: 0.2px;
    word-break: normal;
    overflow-wrap: anywhere;
    hyphens: none;
  }
}

/* 900, NOT 1439. The editor canvas draws the desktop frame at 1440, but the
   compiled stylesheet stacks the hero at `@media (max-width: 900px)` — above
   901px it is still a two-column row. Keying this rule to 1439 stretched the
   right column to 100% while the hero was still a row, so the headline was
   squeezed to one letter per line on every 901-1439px viewport: the editor's
   live preview and any 1280/1366 laptop. Read the threshold out of
   /_instatic/css/style-*.css before changing it — it is not 1440. */
@media (max-width: 900px) {
  .sy4-hero__right {
    width: 100% !important;
    align-self: stretch;
  }
}

/* Wide monitors: let the hero breathe.
   The Figma frame is 1440 wide and every section is built around a ~1250px
   centred band, which on a 2560px screen leaves the headline stranded in the
   middle and the thumbnail queue far from the right edge. Above 1440 the hero
   opens out to a 2240px band and drops 180px lower.
   `50% - 1120px` only exceeds the 80px floor above ~2400px, so below that the
   hero simply runs to an 80px margin.
   .sy4-header carries the IDENTICAL formula on purpose — the logo and the
   headline share a left edge in Figma, and widening only the hero visibly
   breaks that alignment.
   The sections below the hero keep their Figma widths (fixed 1240 / 1310 /
   1440); their card grids are sized for those. */
@media (min-width: 1441px) {
  /* 56, not 80: the header is now a floating bar with a 24px margin, so its
     50% is 24px short of the viewport's and the padding has to give those
     24px back. 56 + 24 lands on the same pixel 80 used to. See the note on
     .sy4-header in the design system. */
  .sy4-header {
    padding-left: max(56px, 50% - 1120px) !important;
    padding-right: max(56px, 50% - 1120px) !important;
  }

  .sy4-hero {
    padding-left: max(80px, 50% - 1120px) !important;
    padding-right: max(80px, 50% - 1120px) !important;
    padding-top: 260px !important;
    padding-bottom: 100px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sy4-dcard,
  .sy4-stage__img {
    transition: none !important;
    animation: none !important;
  }
}

.sy4-progress {
  min-width: 0;
}


/* src/styles/home-v5.css */
/* ===========================================================================
   Home v5 — visual language ported from titanintake.com, Symphera tokens.

   Namespaced .sy5- and nested under .sy5-page, so this file is inert on every
   other page even though the runtime scope is all-pages.

   Reference system (measured + screenshotted 2026-08-28):
     · CREAM PAGE, every section is an INSET ROUNDED PANEL floating on it,
       with a small equal gutter left/right/bottom
     · a floating pill header over the top panel
     · display light 300, leading 1.1, tracking -0.04em; body 300 18px
     · "// SECTION" markers in a mono face, uppercase
     · accent-coloured display headings on dark panels
     · pinned 100vh sections whose tall parent drives a 0→1 scroll progress
     · per-word reveal: blur(5px)+opacity .2 → sharp, .2s ease-out
     · hover family: filter/opacity/transform .2s ease-out
   Symphera substitutions: cream #FFFCE7 -> #f7f4ea, navy #14334B -> #0e1432,
   black -> #060b20, lime #F1FF91 -> lightened copper #e5b182,
   orange CTA #FF5500 -> Symphera Agility copper #c2692f.
   =========================================================================== */

@font-face {
  font-family: "Sy5 Display";
  src: url("/uploads/Uu1qILB-uZ5UnEcykyczY-sy-v4-cg-400-latin.woff2") format("woff2");
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
  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: "Sy5 Display";
  src: url("/uploads/mPYGa9rOjDM5xV_yrhoup-sy-v4-cg-400-latin-ext.woff2") format("woff2");
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- tokens + page reset ---------- */
.sy5-page {
  --cream: #f7f4ea;
  --ink: #0e1432;
  --deep: #060b20;
  --copper: #c2692f;
  --glow: #e5b182;
  --lead: #8585cd;
  --mgmt: #9970a7;
  --agile: #c2692f;
  --proj: #69b5a8;

  --fdisp: "Sy5 Display", "Cormorant Garamond", Georgia, serif;
  --fbody: "Aptos", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fmark: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;

  /* the inset-panel system */
  --gut: clamp(8px, .85vw, 16px);
  --r: clamp(18px, 1.9vw, 32px);

  --pad: clamp(20px, 4vw, 72px);
  --band: 1360px;
  --ease: cubic-bezier(.22, .61, .36, 1);

  overflow-x: clip;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--fbody);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: -.02em;
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--gut);
}
.sy5-page * { box-sizing: border-box; }
.sy5-page a { color: inherit; text-decoration: none; }
.sy5-page img { display: block; max-width: 100%; }
.sy5-page h1, .sy5-page h2, .sy5-page h3, .sy5-page h4, .sy5-page h5 {
  margin: 0; font-family: var(--fdisp); font-weight: 300;
}
.sy5-page p, .sy5-page ul, .sy5-page ol { margin: 0; }
.sy5-page ul, .sy5-page ol { list-style: none; padding: 0; }

/* every full-width block is a rounded panel floating on the cream page.
   overflow:clip (not hidden) — hidden would create a scroll container and
   kill the position:sticky pins inside the panels. */
.sy5-wheel, .sy5-tracks, .sy5-prac, .sy5-mq, .sy5-ft, .sy5-mission, .sy5-plat, .sy5-cta, .sy5-stats {
  margin-left: var(--gut);
  margin-right: var(--gut);
  margin-bottom: var(--gut);
  border-radius: var(--r);
  overflow: clip;
}

/* ---------- type scale ---------- */
.sy5-d1 { font-family: var(--fdisp); font-weight: 300; font-size: clamp(42px, 5.6vw, 84px); line-height: 1.06; letter-spacing: -.04em; }
.sy5-d2 { font-family: var(--fdisp); font-weight: 300; font-size: clamp(32px, 3.8vw, 56px); line-height: 1.08; letter-spacing: -.038em; }
.sy5-d3 { font-family: var(--fdisp); font-weight: 300; font-size: clamp(25px, 2.5vw, 36px); line-height: 1.12; letter-spacing: -.03em; }
.sy5-d4 { font-family: var(--fdisp); font-weight: 300; font-size: clamp(21px, 1.7vw, 25px); line-height: 1.18; letter-spacing: -.025em; }
.sy5-lead { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.5; opacity: .78; }

.sy5-mark {
  font-family: var(--fmark); font-size: 12px; font-weight: 400;
  letter-spacing: .04em; text-transform: uppercase;
}
.sy5-mark::before { content: "// "; opacity: .5; }

/* ---------- layout ---------- */
.sy5-band { width: 100%; max-width: var(--band); margin-left: auto; margin-right: auto; padding-left: var(--pad); padding-right: var(--pad); }
.sy5-sect { padding-top: clamp(64px, 8vw, 132px); padding-bottom: clamp(64px, 8vw, 132px); }

/* ---------- buttons / links ---------- */
.sy5-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 26px; border-radius: 500px;
  font-family: var(--fbody); font-size: 15px; font-weight: 400; letter-spacing: -.02em;
  border: 1px solid transparent; cursor: pointer;
  transition: filter .2s ease-out, opacity .2s ease-out, transform .2s ease-out, background-color .2s ease-out, color .2s ease-out;
}
.sy5-pill::after { content: "↗"; font-size: 13px; transition: transform .2s ease-out; }
.sy5-pill:hover { transform: translateY(-2px); }
.sy5-pill:hover::after { transform: translate(2px, -2px); }
.sy5-pill--solid { background: var(--copper); color: #fff; }
.sy5-pill--solid:hover { filter: brightness(1.12); }
.sy5-pill--glow { background: var(--glow); color: var(--deep); }
.sy5-pill--glow:hover { filter: brightness(1.06); }
.sy5-pill--ghost { border-color: rgba(255, 255, 255, .42); }
.sy5-pill--ghost:hover { background: rgba(255, 255, 255, .12); }

.sy5-lnk {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; padding-bottom: 3px;
  border-bottom: 1px solid rgba(255, 255, 255, .35);
  transition: border-color .2s ease-out, opacity .2s ease-out;
}
.sy5-lnk::after { content: "→"; transition: transform .2s ease-out; }
.sy5-lnk--ext::after { content: "↗"; }
.sy5-lnk:hover { border-bottom-color: currentColor; }
.sy5-lnk:hover::after { transform: translateX(4px); }
.sy5-lnk--dark { border-bottom-color: rgba(14, 20, 50, .3); }

/* ---------- reveal primitives ---------- */
.sy5-rv { opacity: 0; transform: translateY(26px); filter: blur(6px); }
.sy5-rv.is-in {
  opacity: 1; transform: none; filter: blur(0);
  transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease);
}
.sy5-rv[data-d="1"].is-in { transition-delay: .09s; }
.sy5-rv[data-d="2"].is-in { transition-delay: .18s; }
.sy5-rv[data-d="3"].is-in { transition-delay: .27s; }

/* ===========================================================================
   1 · Header + hero — taken wholesale from Home v4.

   The floating pill header and the "timed cards opening" hero carousel are
   v4's own .sy4-* classes, so the page reuses their design-system styles and
   their scripts (home-v4-menu.js, home-v4-hero.js — both all-pages scope) with
   nothing duplicated here. The only change is the one the reference asks for:
   the hero sits in an inset rounded container instead of running full bleed.

   .sy4-hero already carries position:relative and overflow:hidden — the
   growing card is absolutely positioned inside it and depends on both — so the
   radius simply rounds the clip that is already there.
   =========================================================================== */
.sy5-page > .sy4-hero {
  margin: var(--gut);
  border-radius: var(--r);
}

/* .sy4-header is position:fixed with `margin: 0 24px`. Pull it in so the pill
   floats inside the rounded card rather than over its corners. */
.sy5-page > .sy4-header {
  margin-left: calc(var(--gut) + 14px);
  margin-right: calc(var(--gut) + 14px);
}
@media (max-width: 900px) {
  .sy5-page > .sy4-header {
    margin-left: calc(var(--gut) + 6px);
    margin-right: calc(var(--gut) + 6px);
  }
}

/* ===========================================================================
   2 · Mission — pinned, per-word blur reveal (cream panel)
   =========================================================================== */
.sy5-mission { background: var(--cream); }
.sy5-mission__track { position: relative; height: 330vh; height: 330svh; }
.sy5-mission__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; }
.sy5-mission__kicker { color: rgba(14, 20, 50, .6); margin-bottom: clamp(24px, 3vw, 44px); }
.sy5-mission__say {
  font-family: var(--fdisp); font-weight: 300;
  font-size: clamp(30px, 4vw, 60px); line-height: 1.28; letter-spacing: -.045em;
  max-width: 22ch;
}
.sy5-wd {
  display: inline-block; white-space: pre;
  opacity: calc(.18 + .82 * var(--p, 1));
  filter: blur(calc((1 - var(--p, 1)) * 5px));
  transition: opacity .2s ease-out, filter .2s ease-out;
}
.sy5-mission__foot { margin-top: clamp(28px, 3.5vw, 48px); display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; }

/* ===========================================================================
   3 · Stats — navy panel inside the cream one
   =========================================================================== */
.sy5-stats { background: var(--cream); padding-top: 0; }
.sy5-stats__box {
  background: var(--ink); color: #fff; border-radius: var(--r); overflow: clip;
  padding: clamp(40px, 5vw, 78px) clamp(24px, 4vw, 64px);
}
.sy5-stats__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 22px; margin-bottom: clamp(36px, 5vw, 64px); }
.sy5-stats__kicker { color: var(--glow); margin-bottom: 14px; }
.sy5-stats__head h2 { max-width: 18ch; color: var(--glow); }
.sy5-stats__note { max-width: 38ch; }
.sy5-stats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255, 255, 255, .14); border-radius: 16px; overflow: clip; }
.sy5-stat { background: var(--ink); padding: clamp(24px, 3vw, 40px) clamp(16px, 2vw, 32px); }
.sy5-stat__n { font-family: var(--fdisp); font-size: clamp(48px, 5.6vw, 84px); line-height: 1; letter-spacing: -.045em; color: var(--glow); font-variant-numeric: tabular-nums; }
.sy5-stat__lbl { font-family: var(--fmark); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; opacity: .68; margin-top: 14px; }
.sy5-stat__txt { font-size: 15px; opacity: .7; margin-top: 10px; max-width: 26ch; }

/* ===========================================================================
   4 · Frameworks wheel — pinned dark panel
   =========================================================================== */
.sy5-wheel { background: var(--deep); color: #fff; }
.sy5-wheel__track { position: relative; height: 420vh; height: 420svh; }
.sy5-wheel__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; }
.sy5-wheel__grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(32px, 5vw, 80px); align-items: center; width: 100%; }
.sy5-wheel__kicker { color: var(--glow); margin-bottom: 22px; }
.sy5-wheel h2 { max-width: 16ch; margin-bottom: 30px; color: var(--glow); }
.sy5-wheel__panel { position: relative; min-height: 250px; }
.sy5-wheel__item {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  transform: translateY(18px); filter: blur(6px);
  transition: opacity .45s var(--ease), transform .45s var(--ease), filter .45s var(--ease);
}
.sy5-wheel__item.is-on { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.sy5-wheel__num { font-family: var(--fmark); font-size: 11px; letter-spacing: .06em; opacity: .55; text-transform: uppercase; }
.sy5-wheel__item h3 { margin: 12px 0 14px; }
.sy5-wheel__item p { max-width: 40ch; opacity: .76; margin-bottom: 22px; }

.sy5-disc { position: relative; aspect-ratio: 1; width: min(100%, 460px); margin-left: auto; margin-right: auto; }
.sy5-disc__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .16); }
.sy5-disc__ring--in { inset: 18%; border-style: dashed; border-color: rgba(255, 255, 255, .1); }
.sy5-disc__rot { position: absolute; inset: 0; transition: transform .8s var(--ease); }
.sy5-disc__node {
  position: absolute; top: 50%; left: 50%;
  width: 148px; height: 148px; margin: -74px 0 0 -74px;
  border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .16);
  cursor: pointer; padding: 8px;
  transform: rotate(var(--a)) translate(min(28vw, 160px)) rotate(calc(-1 * var(--a) - var(--spin, 0deg)));
  transition: background-color .5s var(--ease), border-color .5s var(--ease), color .5s var(--ease), transform .8s var(--ease);
}
.sy5-disc__node b { font-family: var(--fdisp); font-size: 20px; font-weight: 300; letter-spacing: -.02em; line-height: 1.1; display: block; }
.sy5-disc__node i { font-family: var(--fmark); font-style: normal; font-size: 9px; text-transform: uppercase; letter-spacing: .06em; opacity: .6; display: block; margin-top: 6px; }
.sy5-disc__node.is-on { background: var(--c); border-color: transparent; color: var(--deep); }
.sy5-disc__node.is-on i { opacity: .78; }
.sy5-node--lead  { --a: -90deg; --c: var(--lead); }
.sy5-node--mgmt  { --a: 0deg;   --c: var(--mgmt); }
.sy5-node--agile { --a: 90deg;  --c: var(--glow); }
.sy5-node--proj  { --a: 180deg; --c: var(--proj); }
.sy5-disc__core {
  position: absolute; inset: 32%; border-radius: 50%;
  display: grid; place-content: center; text-align: center;
  background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.1), rgba(255,255,255,.02));
  border: 1px solid rgba(255, 255, 255, .12);
  font-family: var(--fmark); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; opacity: .6;
}

/* ===========================================================================
   5 · Two tracks — pinned navy panel
   =========================================================================== */
.sy5-tracks { background: var(--ink); color: #fff; }
.sy5-tracks__track { position: relative; height: 300vh; height: 300svh; }
.sy5-tracks__pin { position: sticky; top: 0; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; }
.sy5-tracks__head { max-width: 62ch; margin-bottom: clamp(28px, 4vw, 48px); }
.sy5-tracks__kicker { color: var(--glow); margin-bottom: 18px; }
.sy5-tracks__head h2 { margin-bottom: 16px; color: var(--glow); }
.sy5-tracks__tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.sy5-tab {
  font-family: var(--fmark); font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  padding: 11px 20px; border-radius: 500px; border: 1px solid rgba(255, 255, 255, .24);
  cursor: pointer;
  transition: background-color .25s ease-out, color .25s ease-out, border-color .25s ease-out;
}
.sy5-tab.is-on { background: var(--glow); border-color: transparent; color: var(--deep); }
.sy5-pane { display: none; }
.sy5-pane.is-on { display: block; }
.sy5-pane__cards {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 18px; overflow: clip;
}
.sy5-pcard {
  background: var(--ink); padding: clamp(20px, 2.4vw, 32px);
  display: flex; flex-direction: column; gap: 12px; min-height: 244px;
  transition: background-color .3s ease-out;
}
.sy5-pcard:hover { background: #141a3e; }
.sy5-pcard__bar { height: 3px; width: 40px; border-radius: 2px; background: var(--c, var(--glow)); }
.sy5-pcard__lbl { font-family: var(--fmark); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; opacity: .55; }
.sy5-pcard p { font-size: 15px; opacity: .72; flex: 1; }
.sy5-pcard .sy5-lnk { font-size: 14px; align-self: flex-start; }
.sy5-c--lead  { --c: var(--lead); }
.sy5-c--mgmt  { --c: var(--mgmt); }
.sy5-c--agile { --c: var(--glow); }
.sy5-c--proj  { --c: var(--proj); }

/* ===========================================================================
   6 · Platform — cream panel, dark library card
   =========================================================================== */
.sy5-plat { background: var(--cream); }
.sy5-plat__grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.sy5-plat__kicker { color: rgba(14, 20, 50, .6); margin-bottom: 18px; }
.sy5-plat h2 { max-width: 14ch; margin-bottom: 22px; }
.sy5-plat p { max-width: 44ch; }
.sy5-plat__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0; }
.sy5-plat__chips li {
  font-family: var(--fmark); font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  padding: 10px 16px; border-radius: 500px; border: 1px solid rgba(14, 20, 50, .22);
}
.sy5-lib {
  background: var(--deep); color: #fff; border-radius: var(--r);
  padding: clamp(14px, 1.8vw, 26px);
}
.sy5-lib__row {
  display: grid; grid-template-columns: 4px 1fr auto; align-items: center; gap: 18px;
  padding: clamp(18px, 2.2vw, 30px) clamp(12px, 1.6vw, 22px);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  transition: background-color .25s ease-out, padding-left .25s ease-out;
}
.sy5-lib__row:last-child { border-bottom: 0; }
.sy5-lib__row:hover { background: rgba(255, 255, 255, .05); padding-left: clamp(18px, 2.2vw, 30px); }
.sy5-lib__bar { width: 4px; height: 34px; border-radius: 2px; background: var(--c); }
.sy5-lib__name { font-family: var(--fdisp); font-size: clamp(22px, 2.1vw, 30px); line-height: 1.1; letter-spacing: -.03em; }
.sy5-lib__meta { font-family: var(--fmark); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; opacity: .55; text-align: right; }

/* ===========================================================================
   7 · Practice + partners — dark panel
   =========================================================================== */
.sy5-prac { background: var(--deep); color: #fff; }
.sy5-prac__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.sy5-prac__kicker { color: var(--glow); margin-bottom: 18px; }
.sy5-prac h2 { max-width: 14ch; margin-bottom: 20px; color: var(--glow); }
.sy5-prac p { max-width: 42ch; }
.sy5-prac__photo { border-radius: var(--r); overflow: clip; aspect-ratio: 4 / 5; }
.sy5-prac__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.sy5-partners { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gut); margin-top: clamp(40px, 5vw, 72px); }
.sy5-pt {
  position: relative; border-radius: var(--r); overflow: clip; min-height: 300px;
  display: flex; align-items: flex-end; padding: clamp(22px, 2.4vw, 34px);
  transition: transform .5s var(--ease);
}
.sy5-pt:hover { transform: translateY(-6px); }
.sy5-pt__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.sy5-pt:hover .sy5-pt__img { transform: scale(1.05); }
.sy5-pt__scrim { position: absolute; inset: 0; background: linear-gradient(rgba(6,11,32,0) 25%, rgba(6,11,32,.9)); }
.sy5-pt__body { position: relative; }
.sy5-pt__kicker { color: var(--glow); margin-bottom: 10px; }
.sy5-pt__body h3::after { content: " ↗"; font-size: .6em; vertical-align: .3em; }

/* ===========================================================================
   8 · Marquee — black panel
   =========================================================================== */
.sy5-mq { background: #000; color: #fff; padding: 24px 0; }
.sy5-mq__row { display: flex; width: max-content; animation: sy5-slide 42s linear infinite; }
.sy5-mq:hover .sy5-mq__row { animation-play-state: paused; }
.sy5-mq__row > * {
  font-family: var(--fmark); font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  padding: 0 24px; white-space: nowrap; display: inline-flex; align-items: center; gap: 24px;
}
.sy5-mq__row > *::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--glow); }
@keyframes sy5-slide { to { transform: translateX(-50%); } }

/* ===========================================================================
   9 · Closing CTA — cream panel
   =========================================================================== */
.sy5-cta { background: var(--cream); text-align: center; }
.sy5-cta__kicker { color: rgba(14, 20, 50, .6); margin-bottom: 18px; }
.sy5-cta h2 { max-width: 18ch; margin: 0 auto 20px; }
.sy5-cta p { max-width: 46ch; margin: 0 auto 32px; }
.sy5-cta .sy5-pill { margin: 0 auto; }

/* ===========================================================================
   Footer — dark panel
   =========================================================================== */
.sy5-ft { background: var(--deep); color: #fff; padding: clamp(56px, 7vw, 96px) 0 34px; }
.sy5-ft__grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: clamp(24px, 3vw, 48px); }
.sy5-ft__brand img { height: 1.75rem; width: auto; margin-bottom: 20px; }
.sy5-ft__brand p { font-size: 15px; opacity: .7; max-width: 34ch; margin-bottom: 20px; }
.sy5-ft__brand a { display: block; font-size: 15px; opacity: .8; margin-bottom: 6px; }
.sy5-ft h5 { font-family: var(--fmark); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; opacity: .55; margin-bottom: 16px; }
.sy5-ft li { margin-bottom: 10px; }
.sy5-ft li a { font-size: 15px; opacity: .82; transition: opacity .2s ease-out; }
.sy5-ft li a:hover { opacity: 1; }
.sy5-ft__base {
  margin-top: clamp(44px, 5vw, 72px); padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  font-size: 12px; opacity: .6;
}

/* ===========================================================================
   Responsive
   =========================================================================== */
@media (max-width: 1100px) {
  .sy5-wheel__grid, .sy5-plat__grid, .sy5-prac__grid { grid-template-columns: 1fr; }
  .sy5-disc { width: min(100%, 400px); }
  .sy5-pane__cards { grid-template-columns: repeat(2, 1fr); }
  .sy5-ft__grid { grid-template-columns: repeat(3, 1fr); }
  .sy5-ft__brand { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .sy5-stats__grid { grid-template-columns: 1fr; }
  .sy5-partners { grid-template-columns: 1fr; }
  .sy5-mission__track { height: 260vh; height: 260svh; }
  .sy5-wheel__track { height: 360vh; height: 360svh; }
  .sy5-tracks__track { height: 260vh; height: 260svh; }
  .sy5-tracks__pin { min-height: 0; padding: 76px 0; }
  .sy5-wheel__pin { height: auto; min-height: 100vh; padding: 84px 0; }
  .sy5-disc__node { width: 116px; height: 116px; margin: -58px 0 0 -58px; transform: rotate(var(--a)) translate(126px) rotate(calc(-1 * var(--a) - var(--spin, 0deg))); }
  .sy5-disc__node b { font-size: 16px; }
  .sy5-lib__row { grid-template-columns: 4px 1fr; }
  .sy5-lib__meta { grid-column: 2; text-align: left; margin-top: 6px; }
}
@media (max-width: 620px) {
  .sy5-page { font-size: 17px; }
  .sy5-pane__cards { grid-template-columns: 1fr; }
  .sy5-pcard { min-height: 0; }
  .sy5-ft__grid { grid-template-columns: 1fr 1fr; }
  .sy5-disc { width: min(100%, 300px); }
  .sy5-disc__node { width: 94px; height: 94px; margin: -47px 0 0 -47px; transform: rotate(var(--a)) translate(102px) rotate(calc(-1 * var(--a) - var(--spin, 0deg))); }
  .sy5-disc__node b { font-size: 14px; }
  .sy5-disc__node i { display: none; }
}

/* ===========================================================================
   Reduced motion — every scroll-driven effect resolves to its end state
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .sy5-rv { opacity: 1; transform: none; filter: none; }
  .sy5-wd { opacity: 1; filter: none; }
  .sy5-mq__row { animation: none; }
  .sy5-mission__track, .sy5-wheel__track, .sy5-tracks__track { height: auto; }
  .sy5-mission__pin, .sy5-wheel__pin, .sy5-tracks__pin { position: static; height: auto; padding: 84px 0; }
  .sy5-wheel__panel { min-height: 0; }
  .sy5-wheel__item { position: static; opacity: 1; transform: none; filter: none; pointer-events: auto; margin-bottom: 28px; }
  .sy5-pane { display: block; }
  .sy5-disc { display: none; }
}


/* src/styles/contact.css */
/* ==========================================================================
   Symphera — Get in Touch page
   Figma: Get in Touch–DT 402:7913 (1440) / Get in Touch Mobile 778:4558 (390)
   Mobile-first. Every class is namespaced `syc-` so nothing leaks onto the
   other pages, which share this all-pages stylesheet scope.
   ========================================================================== */

.syc-page {
  --bg: #f0ede6;
  --navy: #0e1432;
  --deep: #060b20;
  --teal: #192a31;
  --muted-teal: #3c5058;
  --copper: #b48a79;
  --grey: #595c66;
  --light-grey: #d9dde1;
  --display: "HW Atlantic", Georgia, serif;
  --body: "Aptos", system-ui, -apple-system, sans-serif;
  --gut: 32px;

  background: var(--bg);
  color: var(--navy);
  font-family: var(--body);
  overflow-x: clip;
}
.syc-page *, .syc-page *::before, .syc-page *::after { box-sizing: border-box; }
.syc-page p, .syc-page h1, .syc-page h2, .syc-page h3, .syc-page ul { margin: 0; }
.syc-page ul { list-style: none; padding: 0; }
.syc-page a { color: inherit; text-decoration: none; }
.syc-page img { display: block; max-width: 100%; }

/* ---------- header ---------- */
.syc-header {
  height: 72px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; background: var(--bg);
}
.syc-header__logo {
  display: block; width: 140px; height: 28px;
  background-color: var(--navy);
  -webkit-mask: url(/uploads/cQasw7kOlwMjuB1-rw2fL-symphera-logo-white.svg) left center / contain no-repeat;
  mask: url(/uploads/cQasw7kOlwMjuB1-rw2fL-symphera-logo-white.svg) left center / contain no-repeat;
}
.syc-nav { display: none; }
.syc-header__cta {
  display: none; align-items: center; background: var(--copper); color: var(--deep);
  border-radius: 999px; padding: 12px 24px; font-size: 16px; line-height: 24px;
}
/* the button node cannot hold child elements, so the three bars are painted */
.syc-burger {
  width: 42px; height: 42px; padding: 0; border: 0; cursor: pointer;
  background-color: transparent;
  background-image: linear-gradient(var(--navy), var(--navy)),
                    linear-gradient(var(--navy), var(--navy)),
                    linear-gradient(var(--navy), var(--navy));
  background-repeat: no-repeat;
  background-size: 26px 2px, 26px 2px, 14px 2px;
  background-position: right 8px top 13px, right 8px center, right 8px bottom 13px;
}

/* ---------- book a call ---------- */
.syc-book { padding: 120px var(--gut) 56px; }
.syc-book__eyebrow {
  font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: 0.48px;
  text-transform: uppercase; color: var(--copper);
}
.syc-book__title {
  font-family: var(--display); font-weight: 400; font-size: 40px; line-height: 48px;
  color: var(--deep); margin-top: 28px;
}
.syc-book__sub { font-size: 14px; line-height: 20px; color: var(--muted-teal); margin-top: 24px; }

.syc-person { display: flex; align-items: center; gap: 16px; margin-top: 36px; }
.syc-person__photo {
  width: 72px; height: 72px; border-radius: 999px; object-fit: cover; flex: none;
}
.syc-person__photo--placeholder {
  background: #dcd6c7 url("/uploads/Bak8GxlTq_yGxoe2Vz0CQ-icon-team.svg") center / 34px no-repeat;
}
.syc-person__name { font-weight: 700; font-size: 20px; line-height: 28px; color: var(--deep); }
.syc-person__role { font-size: 16px; line-height: 24px; color: var(--muted-teal); }
.syc-person__mail { font-size: 16px; line-height: 24px; color: var(--copper); }

/* ---------- form card ---------- */
.syc-form {
  background: var(--teal); border-radius: 24px; padding: 32px;
  display: flex; flex-direction: column; gap: 16px; margin-top: 40px;
}
.syc-form__label {
  font-size: 10px; line-height: 1.2; letter-spacing: 0.5px; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.syc-field {
  height: 52px; width: 100%; padding: 0 24px; border-radius: 999px;
  border: 1.5px solid var(--muted-teal); background: transparent;
  color: var(--bg); font-family: var(--body); font-size: 15px;
}
.syc-field::placeholder { color: var(--bg); opacity: 1; }
.syc-field:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }
select.syc-field {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted-teal) 50%),
                    linear-gradient(135deg, var(--muted-teal) 50%, transparent 50%);
  background-position: right 26px center, right 20px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
select.syc-field option { color: var(--deep); }
.syc-form__note { font-size: 12px; line-height: 18px; color: var(--light-grey); }
.syc-form__note a { text-decoration: underline; }
.syc-submit {
  height: 56px; width: 100%; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--bg); color: var(--deep);
  font-family: var(--body); font-weight: 600; font-size: 16px;
}
.syc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- contact details ---------- */
.syc-details {
  position: relative; background: var(--navy); color: #fff;
  padding: 56px var(--gut) 64px;
}
.syc-details::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 166px; height: 21px; background: var(--bg);
  border-bottom-left-radius: 999px; border-bottom-right-radius: 999px;
}
.syc-details__title {
  font-family: var(--display); font-weight: 400; font-size: 32px; line-height: 40px;
}
.syc-people { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }
.syc-col { display: flex; flex-direction: column; gap: 12px; }
.syc-card {
  display: flex; align-items: center; gap: 16px;
  min-height: 180px; border-bottom: 1px solid #fff;
}
.syc-col > .syc-card:last-child { border-bottom: 0; }
.syc-card__photo {
  position: relative; width: 117px; height: 154px; border-radius: 10px;
  overflow: hidden; flex: none; background: #22284a;
}
.syc-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.syc-card__photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 19.8%, rgba(0,0,0,0.8) 100%);
}
.syc-card__photo--placeholder {
  background: #22284a url("/uploads/Bak8GxlTq_yGxoe2Vz0CQ-icon-team.svg") center / 44px no-repeat;
}
.syc-card__photo--placeholder::after { content: none; }
.syc-card__name { font-weight: 600; font-size: 24px; line-height: 32px; }
.syc-card__role { font-size: 16px; line-height: 24px; margin-top: 2px; }
.syc-card__lines { margin-top: 6px; font-weight: 300; font-size: 14px; line-height: 20px; }
.syc-more {
  display: inline-flex; align-items: center; justify-content: center;
  margin: 32px auto 0; padding: 12px 24px; border-radius: 999px;
  border: 2px solid var(--copper); color: var(--copper); font-size: 15px; background: none;
}
.syc-more-wrap { display: flex; }

/* ---------- address + company ---------- */
.syc-info {
  background: var(--navy); color: #fff; border-top: 2px solid rgba(255, 255, 255, 0.2);
  padding: 66px var(--gut);
  display: flex; flex-direction: column; gap: 60px;
}
.syc-info__label {
  font-weight: 700; font-size: 16px; line-height: 16px; letter-spacing: 0.64px;
  text-transform: uppercase; color: var(--copper); margin-bottom: 32px;
}
.syc-info__body { font-size: 18px; line-height: 28px; }
.syc-info__body a { text-decoration: underline; }
.syc-info__gap { height: 28px; }

/* ---------- footer ---------- */
.syc-footer {
  background: var(--deep); color: #fff;
  padding: 40px 24px 32px;
  display: flex; flex-direction: column; gap: 32px;
}
.syc-newsletter {
  background: var(--navy); border: 1px solid var(--teal); border-radius: 18px;
  padding: 28px 24px; display: flex; flex-direction: column; gap: 16px;
}
.syc-newsletter__title { font-weight: 700; font-size: 20px; line-height: 28px; }
.syc-newsletter__sub { font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, 0.7); }
.syc-newsletter__form { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.syc-newsletter__input {
  width: 100%; padding: 14px 18px; border: 0; border-radius: 999px;
  background: #fff; color: var(--deep); font-family: var(--body); font-size: 13px;
}
.syc-newsletter__input::placeholder { color: rgba(6, 11, 32, 0.5); }
.syc-newsletter__btn {
  width: 100%; padding: 14px 24px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--copper); color: var(--deep);
  font-family: var(--body); font-weight: 600; font-size: 14px;
}
.syc-divider { height: 1px; background: rgba(60, 80, 88, 0.4); }
.syc-fcol { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.syc-fcol--brand { gap: 12px; }
.syc-fbrand { font-weight: 700; font-size: 18px; letter-spacing: 1.5px; }
.syc-faddr { display: flex; gap: 10px; font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, 0.65); }
.syc-faddr img { width: 16px; height: 16px; flex: none; }
.syc-fcol__label { font-weight: 700; font-size: 13px; letter-spacing: 1px; color: var(--copper); }
.syc-fcol a { font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, 0.85); }
.syc-social { display: flex; align-items: center; gap: 10px; }
.syc-social img { width: 18px; height: 18px; }
.syc-fbottom {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 12px; color: rgba(255, 255, 255, 0.55); text-align: center;
}

/* ==========================================================================
   Tablet
   ========================================================================== */
@media (min-width: 768px) {
  .syc-page { --gut: 48px; }
  .syc-people { flex-direction: row; gap: 40px; }
  .syc-col { flex: 1 1 0; min-width: 0; }
  .syc-info { flex-direction: row; gap: 40px; }
  .syc-info > * { flex: 1 1 0; min-width: 0; }
  .syc-newsletter { flex-direction: row; align-items: center; justify-content: space-between; padding: 40px; }
  .syc-newsletter__form { flex-direction: row; width: auto; }
  .syc-newsletter__input { width: 260px; }
  .syc-newsletter__btn { width: auto; }
  .syc-fcol { align-items: flex-start; }
  .syc-fbottom { flex-direction: row; justify-content: space-between; }
}

/* ==========================================================================
   Desktop — matches the 1440 frame
   ========================================================================== */
@media (min-width: 1024px) {
  .syc-page { --gut: 80px; }

  .syc-header { height: 80px; padding: 0 46px; }
  .syc-header__logo { width: 204px; height: 40px; }
  .syc-burger { display: none; }
  .syc-nav { display: flex; align-items: center; gap: 36px; }
  .syc-nav a, .syc-nav button {
    display: flex; align-items: center; gap: 6px;
    font-family: var(--body); font-weight: 500; font-size: 16px; color: var(--deep);
    background: none; border: 0; padding: 0; cursor: pointer;
  }
  .syc-nav .syc-chev {
    width: 10px; height: 6px; flex: none;
    clip-path: polygon(0 0, 100% 0, 50% 100%); background: currentColor;
  }
  .syc-header__cta { display: inline-flex; }

  .syc-book {
    display: grid; grid-template-columns: minmax(0, 537px) minmax(0, 680px); gap: 63px;
    align-items: center; justify-content: center;
    padding: 180px var(--gut) 72px;
  }
  .syc-book__eyebrow { font-weight: 600; font-size: 20px; letter-spacing: 0.8px; color: var(--muted-teal); }
  .syc-book__title { font-size: 56px; line-height: 64px; color: var(--navy); margin-top: 57px; }
  .syc-book__sub { font-size: 18px; line-height: 28px; color: var(--grey); margin-top: 35px; }
  .syc-person { margin-top: 90px; gap: 16px; }
  .syc-person__name { color: var(--navy); }
  .syc-person__role { color: var(--grey); }
  .syc-person__mail { color: var(--muted-teal); }

  .syc-form { margin-top: 0; padding: 34px 40px 40px; display: grid; gap: 18px 20px;
              grid-template-columns: 1fr 1fr; align-content: start; }
  .syc-form .syc-field { font-size: 16px; }
  .syc-form__row-full { grid-column: 1 / -1; }
  .syc-form__phone { grid-column: 1 / -1; display: grid; grid-template-columns: 171px 1fr; gap: 16px; }
  .syc-form__label { display: none; }
  .syc-form__note { grid-column: 1 / -1; }
  .syc-submit { grid-column: 1 / -1; height: 64px; background: #fff; }

  .syc-details { padding: 113px var(--gut) 80px; }
  .syc-details::before { width: 279px; height: 35px; }
  .syc-details__title { font-size: 56px; line-height: 64px; }
  .syc-people { gap: 40px; margin-top: 43px; }
  .syc-card { min-height: 180px; gap: 20px; }
  .syc-card__photo { width: 142px; height: 142px; }
  .syc-card__photo::after { content: none; }
  .syc-card__info { display: flex; gap: 18px; flex: 1 1 0; min-width: 0; }
  .syc-card__ident { flex: 1 1 0; min-width: 0; }
  .syc-card__role { font-size: 18px; line-height: 28px; margin-top: 6px; }
  .syc-card__lines { width: 240px; flex: none; margin-top: 0; font-weight: 400; font-size: 18px; line-height: 28px; }
  .syc-more-wrap { display: none; }

  .syc-info { padding: 64px var(--gut); gap: 80px; }

  .syc-footer { padding: 0 var(--gut) 40px; gap: 0; }
  .syc-newsletter { margin: 64px 0; padding: 48px 56px; border-color: #3b5d50; border-radius: 20px; }
  .syc-newsletter__title { font-weight: 600; font-size: 24px; line-height: 32px; }
  .syc-newsletter__sub { font-size: 16px; line-height: 24px; width: 420px; }
  .syc-newsletter__input { width: 300px; padding: 12px 24px; font-size: 15px; }
  .syc-newsletter__btn { padding: 12px 24px; font-size: 15px; color: #fff; }
  .syc-fcols { display: flex; gap: 64px; padding: 56px 0; }
  .syc-fcols > * { flex: 1 1 0; min-width: 0; }
  .syc-fcol { gap: 16px; }
  .syc-fbrand { font-size: 20px; letter-spacing: 2px; }
  .syc-faddr { display: block; font-size: 16px; line-height: 24px; }
  .syc-faddr img { display: none; }
  .syc-fcol__label { font-size: 14px; }
  .syc-fcol a { font-size: 18px; line-height: 28px; }
  .syc-fcol--legal { position: relative; }
  .syc-social { position: absolute; top: 0; left: 267px; }
  .syc-social img { width: 20px; height: 20px; }
  .syc-social span { font-weight: 500; font-size: 15px; }
  .syc-fbottom { padding-top: 24px; font-size: 13px; }
}


/* src/styles/advisory.css */
/* Poradenství (Symphera Advisory) — Figma "Advisory-Mobile-V1a" (1494:353),
   categories closed/open: desktop 1375:2991, mobile 1587:3478.
   Built on the Education page system: the page wrapper is `.sye-page`, so all
   --sye-* tokens, .sye-hero, .sye-lect, .sye-trusted and .sy-btn apply as-is.
   Everything below is new and scoped to `.syv-*`.
   Mobile-first; 768 / 1024 breakpoints live here, not as per-node overrides. */

/* ---------- Shared ---------- */
.syv-sect { padding: 40px 32px; }
@media (min-width: 768px) {
  .syv-sect { margin: 0 auto; padding: 84px 80px; max-width: clamp(1440px, 92vw, 1800px); }
}
/* Mobile only: the hero photo grid intentionally overflows 80px past the
   dark panel's bottom edge (see .syv-hero__panel padding-bottom below), so
   this section — the very next one in flow — needs 80px extra top padding
   or the "Agile" heading sits underneath the overflowing photos. */
@media (max-width: 767px) {
  .syv-cats-sect { padding-top: 120px; }
}
/* Match Figma's Button/Secondary v2, Color=Beige, Size=S exactly (node
   1375:3004 on the "Course Card – hover" reference): outlined copper
   border/text, transparent fill at rest, filled copper + white text on
   hover — never a permanently-filled copper button. Also centers the
   label explicitly since something upstream was overriding both the fill
   and the text alignment for these specific buttons. */
.syv-card__btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
  background-color: transparent !important;
  border-color: var(--sy-btn-copper, #b48a79) !important;
  color: var(--sy-btn-copper, #b48a79) !important;
}
.syv-card__btn:hover {
  background-color: var(--sy-btn-copper, #b48a79) !important;
  color: #fff !important;
}
/* ---------- Trusted by Leaders: homepage's .sy4-results carousel, reused
   verbatim (same classes, same global home-v4-results.js binds to it
   automatically) but kept on Advisory's light page background instead of
   homepage's navy band. Scoped via the ancestor .syv-results section class
   so homepage's own .sy4-results is untouched. */
/* This section also carries .syv-sect, which insets every OTHER section on
   the page into the 1280px content column. Homepage's own .sy4-results is
   genuinely full-bleed (no page-level side padding at all — .sy4-results__head
   and .sy4-results__track manage their own centring internally), so this
   section needs the same: cancel .syv-sect's padding/max-width just here,
   scoped via the two-class combination so no other .syv-sect section is
   affected. */
.syv-sect.syv-results {
  padding: 0;
  max-width: none;
  margin: 0;
}
.syv-results .sy4-results {
  background: transparent;
  padding: 0 0 24px;
}
.syv-results .sy4-results__head {
  padding: 0;
  margin-bottom: 40px;
}
.syv-results .sy4-results__h2 {
  color: var(--sye-navy, #0e1432);
  text-transform: none;
  font-size: 40px;
}
@media (min-width: 768px) {
  .syv-results .sy4-results__h2 {
    font-size: 48px;
  }
}
.syv-results .sy4-results__dot {
  border-color: var(--sye-navy, #0e1432);
}
.syv-results .sy4-results__dot.is-on {
  background: var(--sye-navy, #0e1432);
  border-color: var(--sye-navy, #0e1432);
}
.syv-eyebrow {
  font-family: var(--sye-body); font-size: 14px; line-height: 16px; font-weight: 700;
  letter-spacing: 0.56px; text-transform: uppercase; color: var(--sye-copper);
}
.syv-h2 {
  font-family: var(--sye-display); font-weight: 400; font-size: 32px; line-height: 34px;
  color: var(--sye-dark);
}
@media (min-width: 768px) { .syv-h2 { font-size: 40px; line-height: 48px; } }
@media (min-width: 1024px) { .syv-h2 { font-size: 48px; line-height: 56px; } }
.syv-h2--light { color: #fff; }
@media (min-width: 1024px) {
  .syv-eyebrow { font-size: 20px; line-height: 16px; font-weight: 600; letter-spacing: 0.8px; }
}
.syv-lead { font-size: 18px; line-height: 24px; color: var(--sye-teal-muted); }
.syv-lead--light { color: #fff; }
@media (min-width: 1024px) { .syv-lead--light { font-size: 16px; line-height: 24px; } }
.syv-textcol { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.syv-textcol .sy-btn { margin-top: 16px; }

/* ---------- Categories accordion ---------- */
.syv-cats { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 1024px) { .syv-cats { gap: 20px; } }

.syv-cat { border-bottom: 1px solid var(--sye-copper); padding: 16px 0; }
@media (min-width: 1024px) { .syv-cat { border-bottom-width: 2px; padding: 0; } }
.syv-cat--agile { --syv-cat: #c2692f; }
.syv-cat--leadership { --syv-cat: #8585cd; }
.syv-cat--projects { --syv-cat: #69b5a8; }

.syv-cat__head {
  position: relative; display: flex; flex-direction: column; gap: 20px;
  cursor: pointer; padding-right: 36px;
}
@media (min-width: 1024px) {
  .syv-cat__head {
    display: grid; grid-template-columns: minmax(0, 572px) minmax(0, 421px);
    justify-content: space-between; align-items: start;
    min-height: 176px; padding: 30px 72px 28px 24px;
  }
}
.syv-cat__lead { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 1024px) { .syv-cat__lead { gap: 19px; } }
.syv-cat__t {
  font-family: var(--sye-display); font-weight: 400; font-size: 32px; line-height: 34px;
  color: var(--sye-dark);
}
@media (min-width: 1024px) { .syv-cat__t { font-size: 56px; line-height: 64px; } }
.syv-cat__tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 1024px) { .syv-cat__tags { gap: 10px; } }
.syv-tag {
  border: 2px solid var(--syv-cat); border-radius: 999px; padding: 6px 12px;
  font-family: var(--sye-body); font-weight: 600; font-size: 13px; line-height: 16px;
  color: var(--syv-cat); white-space: nowrap;
}
@media (min-width: 1024px) { .syv-tag { font-size: 14px; } }
.syv-cat__desc { font-size: 14px; line-height: 16px; color: var(--sye-teal-muted); }
@media (min-width: 1024px) {
  .syv-cat__desc { font-size: 18px; line-height: 24px; color: var(--sye-dark); padding-top: 16px; }
}

/* base.button takes no children, so the chevron is a background image. */
.syv-cat__toggle {
  position: absolute; top: 7px; right: 0; width: 20px; height: 20px; padding: 0;
  border: 0; border-radius: 999px; background-color: transparent; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4 7.5L10 13.5L16 7.5' stroke='%23060B20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 20px 20px;
  transition: transform 0.25s ease;
  font-size: 0; color: transparent; overflow: hidden;
}
@media (min-width: 1024px) {
  .syv-cat__toggle {
    top: auto; bottom: 14px; right: 5px; width: 48px; height: 48px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none'%3E%3Cpath d='M14 19L24 29L34 19' stroke='%230E1432' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 48px 48px;
  }
}
.syv-cat__toggle:focus-visible { outline: 2px solid var(--sye-copper); outline-offset: 2px; }
.syv-cat[data-open] .syv-cat__toggle { transform: rotate(180deg); }

/* Open in markup (readable with no JS: canvas, preview); the script closes
   all but the first. Animated through max-height set from scrollHeight. */
.syv-cat__panel { overflow: hidden; transition: max-height 0.32s ease; }
.syv-cat__list { display: flex; flex-direction: column; gap: 20px; padding-top: 20px; }
@media (min-width: 768px) {
  .syv-cat__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .syv-cat__list { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 20px 14px 20px; }
}

.syv-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 22px; border-radius: 16px; background: #fff; border: 1px solid transparent;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
@media (min-width: 1024px) {
  /* No per-card button any more, so the card sizes to its text instead of
     holding a 220px slot open for one. */
  .syv-card { min-height: 0; gap: 10px; padding: 24px 24px 28px; border-color: #e6e6e6; }
  .syv-card:hover {
    border-color: #e6e6e6; border-bottom: 3px solid var(--syv-cat);
    box-shadow: 0 8px 24px rgba(6, 11, 32, 0.08);
  }
}
.syv-card__t {
  font-family: var(--sye-display); font-weight: 400; font-size: 32px; line-height: 34px;
  color: var(--sye-dark);
}
@media (min-width: 1024px) { .syv-card__t { color: var(--sye-navy); font-size: 28px; line-height: 32px; } }
@media (min-width: 1400px) { .syv-card__t { font-size: 32px; line-height: 34px; } }
.syv-card__p { font-size: 14px; line-height: 16px; color: var(--sye-teal-muted); }
.syv-card__btn { margin-top: auto; }
@media (min-width: 1024px) { .syv-card__btn { margin-top: auto; padding-top: 0; } .syv-card__p { margin-bottom: 0; } }
/* Mobile shows the filled primary button, desktop the outlined one. */
@media (max-width: 1023px) {
  .syv-card .syv-card__btn { background-color: var(--sye-copper); color: var(--sye-dark); }
}

/* One quiet text CTA under each category's cards (replaces the per-card
   "Objednat" buttons). Scrolls to #kontakt (Oliver Čapčík). Inset to the
   same 14px the card grid uses at desktop. */
/* Padding, not margin: the accordion sizes the panel from scrollHeight,
   which does not count a last child's bottom margin. Scoped under .syv-cat
   to beat the page's paragraph and link resets. */
.syv-cat .syv-cat__cta { margin: 0; padding: 4px 0 28px; }
@media (min-width: 1024px) { .syv-cat .syv-cat__cta { padding: 4px 14px 36px; } }
.syv-cat .syv-cat__cta-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sye-body); font-size: 16px; line-height: 24px; font-weight: 600;
  color: var(--sye-dark); text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 5px; text-decoration-color: var(--sye-copper, #b48a79);
  transition: color 0.2s ease;
}
.syv-cat .syv-cat__cta-link:hover { color: var(--sye-copper, #b48a79); }
.syv-cat__cta-link:focus-visible { outline: 2px solid var(--sye-copper); outline-offset: 3px; border-radius: 2px; }

/* ---------- Dark block: approach + strip + working with ---------- */
.syv-dark {
  position: relative; margin: 0 10px; border-radius: 16px;
  background: var(--sye-navy); color: #fff;
}
@media (min-width: 768px) { .syv-dark { margin: 0 auto; width: calc(100% - 48px); } }
.syv-dark__part { padding: 65px 32px 64px; }
@media (min-width: 768px) {
  .syv-dark__part {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px;
    align-items: center; padding: 96px 80px; max-width: 1640px; margin: 0 auto;
  }
}
.syv-dark__part + .syv-dark__part { padding-top: 55px; }
@media (min-width: 768px) { .syv-dark__part + .syv-dark__part { padding-top: 96px; } }
@media (min-width: 1024px) {
  .syv-dark__part {
    grid-template-columns: minmax(0, 578px) minmax(0, 487px); justify-content: space-between;
    padding: 120px 104px;
  }
  .syv-dark__part + .syv-dark__part { padding-top: 110px; padding-bottom: 96px; }
}
/* Cream notches cut into the top and bottom edge (Figma divider). */
.syv-notch {
  position: absolute; left: 50%; z-index: 1; width: 240px; height: 20px; margin-left: -120px;
  color: #f0ede6; pointer-events: none;
}
.syv-notch--top { top: -1px; }
.syv-notch--bottom { bottom: -1px; transform: scaleY(-1); }

/* Figma draws the tab smaller on mobile, it is not the desktop one scaled:
   `divider` is 240 x 20 on the 1440 frames, `divider-mobile` is 140 x 16 on
   the 390 frames (e.g. 1499:5777 / 1499:5779 on Advisory-Mobile-V1a). Figma
   has no tablet frame, so 900px is the site's own notch breakpoint, the same
   one .sya-notch already uses in home-v4.css. Width and its centring offset
   are always written together so they cannot drift apart. */
@media (max-width: 900px) {
  .syv-notch { width: 140px; margin-left: -70px; height: 16px; }
}

/* Figma "about us pic" 1484:3280, 487 x 425. Positions are percentages of
   that box; card text scales with its card through container units. */
.syv-collage {
  position: relative; width: 100%; max-width: 487px; aspect-ratio: 487 / 425;
  margin: 48px auto 0;
}
@media (min-width: 768px) { .syv-collage { margin: 0 0 0 auto; } }
.syv-collage > * {
  position: absolute; border-radius: 16px; overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
}
.syv-collage__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.syv-collage__photo--a { left: 0; top: 51.3%; width: 48%; height: 48.7%; }
.syv-collage__photo--b { left: 61.7%; top: 9.6%; width: 30%; height: 38.8%; }
.syv-collage__photo--b .syv-collage__img { object-position: 87% center; }
.syv-fw {
  left: 7.4%; top: 0; width: 52.2%; height: 48.2%; padding: 4.93%;
  background: var(--sye-teal-muted); container-type: inline-size;
}
.syv-fw__k { font-size: max(9px, 4.72cqw); line-height: 1.33; color: #fff; text-transform: uppercase; }
.syv-fw__t { margin-top: 2cqw; font-size: max(13px, 7.87cqw); line-height: 1.4; font-weight: 700; color: #fff; }
.syv-fw__bars { display: flex; flex-direction: column; gap: 3.3cqw; margin-top: 8.66cqw; }
.syv-fw__bar { display: flex; flex-direction: column; gap: 1cqw; }
.syv-fw__label { font-size: max(8px, 4.33cqw); line-height: 1.2; color: rgba(255, 255, 255, 0.6); }
.syv-fw__track { width: 81.4%; height: max(5px, 3.15cqw); border-radius: 4px; background: rgba(255, 255, 255, 0.3); overflow: hidden; }
.syv-fw__fill { height: 100%; border-radius: 4px; background: #69b5a8; }
.syv-fw2 {
  left: 50.8%; top: 51.3%; width: 49.1%; height: 30.1%; padding: 4.93%;
  background: var(--sye-teal-deep); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  container-type: inline-size;
}
.syv-fw2__k { font-size: max(9px, 5.02cqw); line-height: 1.33; color: var(--sye-copper); text-transform: uppercase; }
.syv-fw2__t { margin-top: 3.35cqw; font-size: max(13px, 8.37cqw); line-height: 1.4; font-weight: 700; color: #fff; }
.syv-fw2__p { margin-top: 1.67cqw; max-width: 84%; font-size: max(9px, 5.02cqw); line-height: 1.25; color: #fff; }

.syv-strip {
  border-bottom: 1px solid var(--sye-teal-muted);
  padding: 20px 0; overflow: hidden;
}
.syv-strip__row {
  display: flex; gap: 32px; align-items: center; justify-content: center; width: max-content;
  margin-left: 50%; transform: translateX(-50%);
}
@media (min-width: 768px) { .syv-strip__row { gap: 40px; } }
.syv-strip__logo { display: block; height: 32px; width: auto; opacity: 0.45; flex: none; }
@media (min-width: 768px) { .syv-strip__logo { height: 56px; } }

.syv-timeline { list-style: none; margin: 48px 0 0; padding: 0; display: flex; flex-direction: column; }
@media (min-width: 768px) { .syv-timeline { margin-top: 0; } }
.syv-step { position: relative; padding: 0 0 40px 22px; }
.syv-step:last-child { padding-bottom: 0; }
/* The Figma line: 1.5px copper rule running up to a diamond at each point. */
.syv-step::before {
  content: ""; position: absolute; left: 0; top: 17px; bottom: -17px; width: 1.5px;
  background: var(--sye-copper);
}
.syv-step:last-child::before { bottom: auto; height: 5px; }
.syv-step::after {
  content: ""; position: absolute; left: -5.4px; top: 12px; width: 12.25px; height: 12.25px;
  background: var(--sye-copper); transform: rotate(45deg);
}
.syv-step__t { font-family: var(--sye-display); font-weight: 400; font-size: 26px; line-height: 34px; color: var(--sye-copper); }
.syv-step__p { margin-top: 2px; font-size: 14px; line-height: 16px; color: #efefef; }
@media (min-width: 768px) {
  .syv-step__t { font-size: 32px; line-height: 40px; }
  .syv-step__p { font-size: 16px; line-height: 22px; }
}

/* Cycling highlight, driven by advisory-timeline.js. The script sets
   data-cycle on the list and data-active on one step; without JS every step
   stays full size. Attributes, not classes: publish prunes script-only classes.
   Title AND text grow on the active step; inactive steps shrink and fade
   hard so the highlight reads clearly. */
.syv-step__t { overflow-wrap: normal; word-break: normal; hyphens: manual; }
/* Every step is laid out once at the highlighted size and never reflows:
   inactive steps only shrink visually (transform) around their diamond, so
   nothing wraps differently or moves mid-animation. --syv-pivot is the
   diamond's centre = the title's first-line centre. The copper rule sits on
   the list; the script sets --syv-line-bottom to end it at the last diamond. */
.syv-timeline[data-cycle] { --syv-pivot: 18px; position: relative; }
.syv-timeline[data-cycle] .syv-step {
  padding-bottom: 28px; transform-origin: 0 var(--syv-pivot);
  transform: scale(0.6); opacity: 1;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease;
}
.syv-timeline[data-cycle] .syv-step:last-child { padding-bottom: 0; }
.syv-timeline[data-cycle] .syv-step[data-active] { transform: none; opacity: 1; }
.syv-timeline[data-cycle] .syv-step::before { display: none; }
.syv-timeline[data-cycle] .syv-step::after { top: calc(var(--syv-pivot) - 6.125px); transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.syv-timeline[data-cycle] .syv-step[data-active]::after { transform: rotate(45deg) scale(1.3); }
.syv-timeline[data-cycle] .syv-step__t { font-size: 30px; line-height: 36px; }
.syv-timeline[data-cycle] .syv-step__p { font-size: 16px; line-height: 22px; color: #fff; }
.syv-timeline[data-cycle]::before {
  content: ""; position: absolute; left: 0; width: 1.5px; background: var(--sye-copper);
  top: var(--syv-pivot); bottom: var(--syv-line-bottom, 40px);
}
@media (min-width: 768px) {
  .syv-timeline[data-cycle] { --syv-pivot: 19px; }
  .syv-timeline[data-cycle] .syv-step { padding-bottom: 32px; }
  .syv-timeline[data-cycle] .syv-step__t { font-size: 32px; line-height: 38px; }
  .syv-timeline[data-cycle] .syv-step__p { font-size: 19px; line-height: 26px; }
}
/* 40px only where the column is wide enough; at 768-1023 it split
   "Sparingpartner" mid-word. */
@media (min-width: 1024px) {
  .syv-timeline[data-cycle] { --syv-pivot: 23px; }
  .syv-timeline[data-cycle] .syv-step__t { font-size: 40px; line-height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .syv-timeline[data-cycle] .syv-step, .syv-timeline[data-cycle] .syv-step::after { transition: none; }
}

/* ---------- Carousels: consultants + results, driven by advisory-carousel.js ---------- */
/* Tracks bleed to the viewport edge; clip the page so it never scrolls sideways. */
.sye-page:has(.syv-carousel) { overflow-x: clip; }
.syv-carousel__track { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.syv-carousel__track::-webkit-scrollbar { display: none; }
.syv-arrows { display: flex; flex: none; gap: 16px; }
.syv-arrow {
  width: 48px; height: 48px; padding: 0; border: 1.5px solid var(--sye-copper); border-radius: 999px;
  background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: 22px 22px;
  font-size: 0; color: transparent; cursor: pointer; transition: background-color 0.2s ease, opacity 0.2s ease;
}
@media (min-width: 768px) { .syv-arrow { width: 64px; height: 64px; background-size: 26px 26px; } }
.syv-arrow--prev { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B48A79' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 5l-7 7 7 7'/%3E%3C/svg%3E"); }
.syv-arrow--next { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B48A79' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 5l7 7-7 7'/%3E%3C/svg%3E"); }
.syv-arrow--prev:not([disabled]):hover { background-color: var(--sye-copper); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 5l-7 7 7 7'/%3E%3C/svg%3E"); }
.syv-arrow--next:not([disabled]):hover { background-color: var(--sye-copper); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 5l7 7-7 7'/%3E%3C/svg%3E"); }
.syv-arrow[disabled] { opacity: 0.35; cursor: default; }
.syv-arrow:focus-visible { outline: 2px solid var(--sye-copper); outline-offset: 3px; }

/* Consultants (Figma "Meet Our Team Section" 1481:2656) */
.syv-team { display: flex; flex-direction: column; gap: 32px; }
@media (min-width: 1024px) { .syv-team { flex-direction: row; align-items: stretch; gap: 90px; } }
.syv-team__lead { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
@media (min-width: 1024px) { .syv-team__lead { flex: 0 0 min(423px, 34%); } }
.syv-team__sub { font-size: 16px; line-height: 24px; color: #595c66; }
.syv-team__track { display: flex; flex: 1 1 auto; gap: 20px; min-width: 0; margin-right: calc(50% - 50vw); }
.syv-team__track > .syc-speaker { flex: 0 0 min(298px, 72vw); height: auto; aspect-ratio: 298 / 354; scroll-snap-align: start; }

/* ---------- Trusted by leaders (testimonial) ---------- */
/* Figma "01 — Client Results Carousel" 1486:3383: 1000 x 400 slides, the
   active one centred with its neighbours peeking in at both edges. */
.syv-results__inner { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 768px) { .syv-results__inner { gap: 40px; } }
.syv-results__head { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.syv-results__track {
  --syv-slide: min(1000px, calc(100vw - 48px));
  display: flex; gap: 16px; margin: 0 calc(50% - 50vw);
  padding: 0 calc((100vw - var(--syv-slide)) / 2); scroll-padding: 0 calc((100vw - var(--syv-slide)) / 2);
}
@media (min-width: 768px) { .syv-results__track { gap: 30px; } }
.syv-slide {
  flex: 0 0 var(--syv-slide); scroll-snap-align: center; display: flex; flex-direction: column;
  overflow: hidden; border-radius: 20px; background: #d9c2a6; color: var(--sye-dark);
}
@media (min-width: 768px) { .syv-slide { flex-direction: row; min-height: 400px; } }
.syv-slide__media { height: 200px; flex: none; }
@media (min-width: 768px) { .syv-slide__media { width: 44%; height: 100%; } }
.syv-slide__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.syv-slide__body { display: flex; flex-direction: column; gap: 16px; padding: 24px; }
@media (min-width: 768px) { .syv-slide__body { flex: 1 1 auto; min-width: 0; gap: 24px; padding: 58px 56px 44px; } }
.syv-slide__t { max-width: 460px; font-family: var(--sye-display); font-weight: 400; font-size: 28px; line-height: 32px; }
@media (min-width: 768px) { .syv-slide__t { font-size: 32px; line-height: 34px; } }
.syv-slide__p { max-width: 440px; font-size: 15px; line-height: 24px; }
.syv-slide__who { margin-top: auto; padding-top: 16px; }
.syv-slide__k { font-weight: 600; font-size: 18px; line-height: 28px; text-transform: uppercase; }
@media (min-width: 768px) { .syv-slide__k { font-size: 20px; } }
.syv-slide__n { font-size: 16px; line-height: 24px; }
.syv-slide__img--portrait { object-position: center top; }

/* ---------- Logo wall: 3 offset rows (Figma "logo wall") ---------- */
.syv-wall { display: flex; flex-direction: column; gap: 14px; margin: 0 calc(50% - 50vw); padding: 8px 0 24px; overflow: hidden; }
.syv-wall__row { display: flex; gap: 14px; width: max-content; margin-left: 50%; transform: translateX(-50%); }
@media (min-width: 768px) { .syv-wall, .syv-wall__row { gap: 38px; } }
@media (min-width: 1024px) {
  .syv-wall .sye-logoslot { width: 200px; height: 70px; box-shadow: 0 10px 24px rgba(6, 11, 32, 0.06); }
}

/* ---------- Hero (Figma Advisory-DT-V1a "Hero Section" 1481:2406) ---------- */
.sye-hero__panel.syv-hero__panel {
  background-color: #060b20; background-image: url("/uploads/DneSkygADqBdvsGETHt6r-sy-adv2-hero-bg.png");
  background-size: cover; background-position: center;
}
@media (min-width: 768px) {
  .sye-hero__panel.syv-hero__panel { box-sizing: border-box; min-height: 0; aspect-ratio: 1390 / 500; padding: 5.76% 5.755% 13%; }
  .syv-hero__panel .sye-hero__content { align-items: center; }
  .syv-hero__panel .sye-hero__lead { width: 59.4%; }
  .syv-hero__panel .sye-hero__aside { width: 25.9%; }
  .syv-hero__panel .sye-hero__kicker { font-size: clamp(14px, 1.39vw, 20px); line-height: 1; }
  .syv-hero__panel .sye-hero__h1 { font-size: clamp(30px, 3.89vw, 56px); line-height: 1.143; }
}
/* Tablet-only: the description + CTAs column overflows the fixed-aspect-ratio
   panel between 768-1023px, pushing into the photo strip below. Hide it and
   let the heading take the full row at this range only; desktop (1024+) and
   mobile (<768) are unaffected. */
@media (min-width: 768px) and (max-width: 1023px) {
  .syv-hero__panel .sye-hero__aside { display: none; }
  .syv-hero__panel .sye-hero__lead { width: 100%; }
}
/* Five photos, 354/227/153/227/358 wide, over a navy ground at 60-85 %. */
.sye-hero__strip.syv-hero__strip { column-gap: 1.28%; }
.syv-hero__tile { background-color: #060b20; }
.syv-hero__tile--1 { flex-basis: 25.47%; aspect-ratio: 354 / 270; }
.syv-hero__tile--2 { flex-basis: 16.33%; aspect-ratio: 227 / 226; }
.syv-hero__tile--3 { flex-basis: 11.01%; aspect-ratio: 153 / 150; }
.syv-hero__tile--4 { flex-basis: 16.33%; aspect-ratio: 227 / 226; }
.syv-hero__tile--5 { flex-basis: 25.76%; aspect-ratio: 358 / 268; }
.syv-hero__tile img { opacity: 0.7; }
.syv-hero__tile--2 img { opacity: 0.85; }
.syv-hero__tile--4 img { object-position: right center; }
.syv-hero__tile--5 img { opacity: 0.6; object-position: left bottom; }

/* Mobile only (<768px): Figma "hero-mobile" 1715:3021 groups the five photos
   into 3 columns — col 1 and col 3 each stack two photos, col 2 holds the
   single narrowest photo (tile 3) centred between them. Desktop/tablet keep
   the single-row flex strip untouched. */
@media (max-width: 767px) {
  .sye-hero:has(.syv-hero__panel) {
    padding-bottom: 0;
  }
  .sye-hero__panel.syv-hero__panel {
    padding-bottom: 172px;
  }
  .sye-hero__strip.syv-hero__strip {
    bottom: -80px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 10px;
    align-items: center;
  }
  .syv-hero__tile--1 { grid-column: 1; grid-row: 1; align-self: end; }
  .syv-hero__tile--2 { grid-column: 1; grid-row: 2; align-self: start; }
  .syv-hero__tile--3 { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .syv-hero__tile--4 { grid-column: 3; grid-row: 1; align-self: end; }
  .syv-hero__tile--5 { grid-column: 3; grid-row: 2; align-self: start; }
}

/* ---------- Book a call (Figma 1585:6766): reuses .sybook-* from the component ---------- */
.syv-book .sybook-eyebrow { margin-bottom: 24px; font-size: 16px; line-height: 16px; letter-spacing: 0.8px; }
@media (min-width: 1024px) { .syv-book .sybook-eyebrow { margin-bottom: 41px; font-size: 20px; } }
.syv-book .sybook-heading { max-width: 540px; margin-bottom: 11px; font-size: 36px; line-height: 1.14; letter-spacing: 0; }
@media (min-width: 1024px) { .syv-book .sybook-heading { font-size: 56px; line-height: 64px; } }
.syv-book .sybook-lede { max-width: 430px; font-size: 18px; line-height: 24px; color: #595c66; }
.syv-book .sybook-person { align-items: flex-start; column-gap: 26px; }
.syv-book__photo { display: block; flex: none; width: 104px; height: 98px; border-radius: 10px; object-fit: cover; }
@media (min-width: 768px) { .syv-book__photo { width: 142px; height: 134px; } }
.syv-book .sybook-person-name { font-size: 24px; line-height: 28px; font-weight: 600; color: #060b20; }
.syv-book .sybook-person-role { margin-top: 6px; font-size: 18px; line-height: 24px; color: #060b20; }
.syv-book .sybook-person-mail, .syv-book__tel { display: block; font-size: 18px; line-height: 24px; color: #060b20; text-decoration: none; }
.syv-book .sybook-person-mail { margin-top: 18px; }
.syv-book__tel { margin-top: 6px; }
@media (min-width: 1024px) { .syv-book .sybook-card { padding: 34px 40px; } }
.syv-book .sybook-form { row-gap: 18px; }
.syv-book .sybook-input {
  height: 52px; padding: 0 26px; border: 1.5px solid #3c5058; border-radius: 999px;
  background-color: transparent; color: #fff; font-size: 16px;
}
.syv-book .sybook-input:focus-visible { border-color: #fff; }
.syv-book .sybook-select { padding-right: 48px; }
@media (min-width: 768px) { .syv-book__phone { grid-template-columns: 171px minmax(0, 1fr); } }
.syv-book .sybook-fineprint { margin: 0 0 14px; font-size: 12px; line-height: 18px; color: #d9dde1; }
.syv-book .sybook-submit { height: 64px; border-radius: 999px; background-color: #fff; color: #060b20; font-size: 16px; }


/* src/styles/education.css */
/* Education hero — mirrors the Advisory hero fixes in advisory.css exactly
   (same tablet aside-hide, same mobile 3-column photo grid, same 80px
   overflow, same 48px gap, same next-section padding compensation). Written
   as plain .sye-hero__* selectors (no .syv- compound class), which only
   matches Education's markup — Advisory's own more specific
   .sye-hero__panel.syv-hero__panel / .sye-hero__strip.syv-hero__strip rules
   in advisory.css continue to win for Advisory regardless of load order. */

/* ---------- Tablet (768-1023px): aside overflows the fixed-ratio panel ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .sye-hero__aside { display: none; }
  .sye-hero__lead { width: 100%; }
}

/* ---------- Photo strip proportions, ALL sizes (matches Advisory's DT strip
   exactly — same 5 widths so the row stretches the same way at desktop and
   tablet). Only the mobile media query below overrides grid placement;
   these flex-basis/aspect-ratio values apply everywhere else, same as
   Advisory's own unconditional .syv-hero__tile--N rules. */
.sye-hero__tile { background-color: #060b20; }
.sye-hero__tile img { opacity: 0.7; }
.sye-hero__tile--1 { flex-basis: 25.47%; aspect-ratio: 354 / 270; }
.sye-hero__tile--2 { flex-basis: 16.33%; aspect-ratio: 227 / 226; }
.sye-hero__tile--3 { flex-basis: 11.01%; aspect-ratio: 153 / 150; }
.sye-hero__tile--4 { flex-basis: 16.33%; aspect-ratio: 227 / 226; }
.sye-hero__tile--5 { flex-basis: 25.76%; aspect-ratio: 358 / 268; }
.sye-hero__tile--2 img { opacity: 0.85; }
.sye-hero__tile--4 img { object-position: right center; }
.sye-hero__tile--5 img { object-position: left bottom; }

/* ---------- Mobile (<768px) ---------- */
@media (max-width: 767px) {
  .sye-hero { padding-bottom: 0; }
  .sye-hero__panel { padding-bottom: 172px; }
  .sye-hero__strip {
    bottom: -80px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 10px;
    align-items: center;
  }
  .sye-hero__tile--1 { grid-column: 1; grid-row: 1; align-self: end; }
  .sye-hero__tile--2 { grid-column: 1; grid-row: 2; align-self: start; }
  .sye-hero__tile--3 { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .sye-hero__tile--4 { grid-column: 3; grid-row: 1; align-self: end; }
  .sye-hero__tile--5 { grid-column: 3; grid-row: 2; align-self: start; }

  /* The Academy section is the next one in flow after the hero; the photo
     grid's 80px overflow doesn't push it down on its own (absolutely
     positioned elements don't affect flow height), so it needs the same
     80px extra top padding Advisory's .syv-cats-sect got. */
  .sye-acad { padding-top: 120px; }
}

/* ---------- Recommended Courses grid, wide screens ----------
   The actual constraint turned out to be .sye-coursewrap (the real CSS Grid
   item — .syc-course is only its child), which carries its OWN independent
   max-width:405px, same story as the card's: a general cap belonging to the
   component, reused with different column counts elsewhere, that has
   nothing to do with this specific 3-up grid. .sye-courses itself is
   correctly set up (repeat(3, minmax(0,1fr)) with a fixed 24px column-gap),
   so once the grid cell grows past 405px at wide viewports the capped
   wrapper just sits at the cell's start, leaving empty space that reads as
   a much wider gap than the real 24px one beside it. Removing both caps
   only inside .sye-courses lets each wrapper (and the card filling it)
   genuinely fill its 1fr cell. No media query needed: below the width
   where the grid's own max-width formula already keeps cells under 405px,
   this is a no-op. */
.sye-courses .sye-coursewrap,
.sye-courses .syc-course {
  max-width: none;
}

/* ---------- Recommended Courses cards, 768-1199px ----------
   Below 1200px three 1fr cells shrink to ~290px at 1080 and ~210px at 840:
   the 30px title runs to the card edge, under the absolutely positioned
   NOVÉ badge, and single words like "Management" overflow the card.
   The top row also collapses to the tag's height on the badge card (its
   40px icon is hidden), so that title sat higher than its neighbours.
   Fixes: a 40px floor on the top row everywhere (titles align, and start
   below the badge), then the card's contents step down under 1200px and
   again under 1024px. The grid stays three-up: the section always holds
   three cards, and a 2 + 1 wrap leaves an orphan card (stretched or not). */
.sye-courses .syc-course__top { min-height: 40px; }

@media (min-width: 768px) and (max-width: 1199px) {
  .sye-courses .syc-course { padding: 20px; }
  .sye-courses .syc-course__title { font-size: 24px; max-width: none; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .sye-courses { column-gap: 16px; row-gap: 16px; }
  .sye-courses .syc-course { padding: 16px; }
  .sye-courses .syc-course__title { font-size: 21px; }
}


/* src/styles/gdpr.css */
/* ==========================================================================
   Symphera — GDPR & cookies (legal / long-form document page)
   Content: symphera.cz/en/node/78, reproduced verbatim.
   Namespaced `syg-`. Rides on the `.syc-page` token block + reset from
   contact.css, so this file only adds the document layout. Prose selectors
   are scoped under `.syg-page` so they outrank that file's `.syc-page p`
   reset on specificity, not just on load order.
   ========================================================================== */

.syg-page {
  --syg-rule: rgba(60, 80, 88, 0.18);
  --syg-card: #ffffff;
}

/* ---------- hero ---------- */
.syg-page .syg-hero {
  position: relative;
  background: var(--deep);
  color: #fff;
  padding: 104px var(--gut) 56px;
}
.syg-page .syg-hero__eyebrow {
  font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--copper);
}
.syg-page .syg-hero__title {
  font-family: var(--display); font-weight: 400;
  font-size: 40px; line-height: 48px; margin-top: 16px;
}
.syg-page .syg-hero__sub {
  font-size: 16px; line-height: 24px; margin-top: 16px;
  max-width: 620px; color: rgba(255, 255, 255, 0.75);
}
.syg-page .syg-hero__meta {
  display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 28px;
  font-size: 13px; line-height: 20px; color: rgba(255, 255, 255, 0.55);
}
/* Bled 1px past the hero edge: left on the boundary, the notch's flat edge and
   the hero's edge share one half-covered pixel row, which reads as a faint
   dark line across the tab. */
.syg-page .syg-notch {
  display: block; position: absolute; left: 50%; bottom: -1px;
  margin-left: -120px; width: 240px; height: 21px;
  color: var(--bg); pointer-events: none; z-index: 3;
}

/* Figma draws the tab smaller on mobile, it is not the desktop one scaled:
   `divider` is 240 x 20 on the 1440 frames, `divider-mobile` is 140 x 16 on
   the 390 frames. 16 + the same 1px bleed past the hero edge = 17. Figma has
   no tablet frame, so 900px is the site's own notch breakpoint. Width and its
   centring offset are always written together so they cannot drift apart. */
@media (max-width: 900px) {
  .syg-page .syg-notch { width: 140px; margin-left: -70px; height: 17px; }
}

/* ---------- document shell ---------- */
.syg-page .syg-doc {
  background: var(--bg);
  padding: 48px var(--gut) 72px;
  display: flex; flex-direction: column; gap: 40px;
}

/* ---------- table of contents ---------- */
.syg-page .syg-toc {
  background: var(--syg-card);
  border: 1px solid var(--syg-rule);
  border-radius: 18px;
  padding: 24px;
}
.syg-page .syg-toc__label {
  font-weight: 700; font-size: 11px; line-height: 16px; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--copper);
}
.syg-page .syg-toc__list {
  display: flex; flex-direction: column; gap: 2px; margin-top: 16px;
}
.syg-page .syg-toc__link {
  display: block; padding: 8px 0 8px 14px;
  border-left: 2px solid var(--syg-rule);
  font-size: 15px; line-height: 22px; color: var(--muted-teal);
}
.syg-page .syg-toc__link:hover,
.syg-page .syg-toc__link:focus-visible {
  border-left-color: var(--copper);
  color: var(--deep);
}

/* ---------- prose ---------- */
.syg-page .syg-prose { max-width: 760px; }
.syg-page .syg-sect { scroll-margin-top: 96px; }
.syg-page .syg-sect + .syg-sect {
  margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--syg-rule);
}

.syg-page .syg-prose h2 {
  font-family: var(--display); font-weight: 400;
  font-size: 30px; line-height: 38px; color: var(--deep);
}
.syg-page .syg-prose h3 {
  font-weight: 700; font-size: 18px; line-height: 26px; color: var(--navy);
  margin-top: 32px;
}
.syg-page .syg-prose p {
  font-size: 16px; line-height: 27px; color: var(--muted-teal);
  margin-top: 16px;
}
.syg-page .syg-prose a {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: var(--copper);
  text-underline-offset: 3px;
}
.syg-page .syg-prose a:hover { color: var(--copper); }

/* contact.css resets `ul` only; `ol` still carries UA markers and padding */
.syg-page .syg-clauses,
.syg-page .syg-bullets { list-style: none; padding: 0; margin: 0; }

/* numbered clauses — copper numerals in the margin */
.syg-page .syg-clauses { counter-reset: syg-clause; margin-top: 24px; }
.syg-page .syg-clauses li {
  counter-increment: syg-clause;
  position: relative;
  padding-left: 44px;
  font-size: 16px; line-height: 27px; color: var(--muted-teal);
}
.syg-page .syg-clauses li + li { margin-top: 20px; }
.syg-page .syg-clauses li::before {
  content: counter(syg-clause);
  position: absolute; left: 0; top: 1px;
  width: 28px; height: 28px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--copper); color: var(--deep);
  font-weight: 700; font-size: 13px; line-height: 1;
}

/* bulleted lists */
.syg-page .syg-bullets { margin-top: 16px; }
.syg-page .syg-bullets li {
  position: relative; padding-left: 22px;
  font-size: 16px; line-height: 27px; color: var(--muted-teal);
}
.syg-page .syg-bullets li + li { margin-top: 8px; }
.syg-page .syg-bullets li::before {
  content: ""; position: absolute; left: 2px; top: 11px;
  width: 6px; height: 6px; border-radius: 999px; background: var(--copper);
}

/* pull-quote style consent block */
.syg-page .syg-consent {
  margin-top: 24px; padding: 24px 28px;
  background: var(--syg-card);
  border-left: 3px solid var(--copper);
  border-radius: 0 14px 14px 0;
}
.syg-page .syg-consent p { margin-top: 0; }
.syg-page .syg-consent p + p { margin-top: 16px; }

/* contact callout — selectors carry the `.syg-prose` step so they outrank the
   generic `.syg-page .syg-prose p / a` prose rules above */
.syg-page .syg-prose .syg-callout {
  margin-top: 32px; padding: 28px;
  background: var(--teal); color: #fff; border-radius: 18px;
}
.syg-page .syg-prose .syg-callout__t {
  font-weight: 700; font-size: 18px; line-height: 26px;
  color: #fff; margin-top: 0;
}
.syg-page .syg-prose .syg-callout__p {
  font-size: 15px; line-height: 24px; margin-top: 10px;
  color: rgba(255, 255, 255, 0.75);
}
.syg-page .syg-prose .syg-callout__links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.syg-page .syg-prose .syg-callout__mail {
  display: inline-flex; align-items: center;
  padding: 10px 20px; border-radius: 999px;
  border: 1.5px solid var(--copper); color: var(--copper);
  font-size: 14px; line-height: 20px;
  text-decoration: none;
}
.syg-page .syg-prose .syg-callout__mail:hover { background: var(--copper); color: var(--deep); }

/* browser settings link grid */
.syg-page .syg-browsers {
  display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 20px;
}
.syg-page .syg-prose .syg-browser {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 14px 18px; border-radius: 12px;
  background: var(--syg-card); border: 1px solid var(--syg-rule);
  font-size: 15px; line-height: 22px; color: var(--deep);
  text-decoration: none;
}
.syg-page .syg-prose .syg-browser:hover { border-color: var(--copper); }
.syg-page .syg-browser__n { font-weight: 600; }
.syg-page .syg-browser__u { color: var(--muted-teal); font-size: 13px; }

/* ==========================================================================
   Tablet
   ========================================================================== */
@media (min-width: 768px) {
  .syg-page .syg-hero { padding: 128px var(--gut) 72px; }
  .syg-page .syg-hero__title { font-size: 56px; line-height: 64px; }
  .syg-page .syg-hero__sub { font-size: 18px; line-height: 28px; }
  .syg-page .syg-doc { padding: 64px var(--gut) 96px; }
  .syg-page .syg-browsers { grid-template-columns: 1fr 1fr; }
  .syg-page .syg-prose h2 { font-size: 32px; line-height: 40px; }
}

/* ==========================================================================
   Desktop — sticky contents rail beside the document
   ========================================================================== */
@media (min-width: 1024px) {
  .syg-page .syg-doc {
    flex-direction: row-reverse;
    align-items: flex-start;
    justify-content: center;
    gap: 72px;
    padding: 72px var(--gut) 112px;
  }
  .syg-page .syg-prose { flex: 0 1 760px; min-width: 0; }
  .syg-page .syg-toc {
    flex: 0 0 268px;
    position: sticky; top: 104px;
    background: transparent; border: 0; padding: 0;
  }
}


/* src/styles/frameworks.css */
/* ==========================================================================
   Symphera — Frameworks overview + Leadership Spiral framework page
   Figma: Frameworks-DT 1492:5004 / Frameworks-Mobile 1500:379
          Framework Detail-DT 387:761 / LS Mobile 1595:445
   Mobile-first. Every class is namespaced `syf-`. Header and footer come
   from the Layout template; sections that sit under the fixed header on a
   dark ground carry .is-backdrop-dark for header-theme.js.
   ========================================================================== */

.syf-page {
  --bg: #f0ede6;
  --navy: #0e1432;
  --deep: #060b20;
  --teal: #192a31;
  --muted-teal: #3c5058;
  --copper: #b48a79;
  --grey: #595c66;
  --sand: #d9c2a6;
  --display: "HW Atlantic", Georgia, serif;
  --body: "Aptos", "Titillium Web", system-ui, -apple-system, sans-serif;
  --gut: 20px;

  background: var(--bg);
  color: var(--navy);
  font-family: var(--body);
  overflow-x: clip;
}
.syf-page *, .syf-page *::before, .syf-page *::after { box-sizing: border-box; }
.syf-page p, .syf-page h1, .syf-page h2, .syf-page h3 { margin: 0; }
.syf-page a { text-decoration: none; }
.syf-page img { display: block; max-width: 100%; }

.syf-wrap { width: 100%; max-width: 1280px; margin: 0 auto; }

/* ---------- type ---------- */
.syf-eyebrow {
  font-weight: 600; font-size: 16px; line-height: 16px; letter-spacing: 0.8px;
  text-transform: uppercase; color: var(--copper);
}
.syf-h1 {
  font-family: var(--display); font-weight: 400; font-size: 40px; line-height: 48px;
  color: var(--deep); margin-top: 16px;
}
.syf-h2 {
  font-family: var(--display); font-weight: 400; font-size: 32px; line-height: 40px;
  color: var(--deep); margin-top: 16px;
}
.syf-light { color: #fff; }
.syf-text { font-size: 18px; line-height: 24px; color: var(--navy); }
.syf-text + .syf-text { margin-top: 16px; }

/* ---------- buttons ---------- */
.syf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 32px; }
.syf-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 26px; border-radius: 999px; border: 2px solid var(--copper);
  background: var(--copper); color: #fff;
  font-family: var(--body); font-size: 16px; line-height: 24px; white-space: nowrap;
  transition: background-color .2s, color .2s;
}
.syf-btn:hover { background: #a07563; border-color: #a07563; }
.syf-btn--outline { background: transparent; color: var(--copper); }
.syf-btn--outline:hover { background: var(--copper); color: #fff; border-color: var(--copper); }
.syf-btn--sm { padding: 8px 20px; font-size: 14px; line-height: 20px; }
.syf-link { font-size: 16px; line-height: 24px; color: var(--deep); white-space: nowrap; }
.syf-link:hover { color: var(--copper); }
.syf-link--copper { color: var(--copper); }
.syf-link--copper:hover { color: #fff; }

/* cream tab cut into a navy band (Figma divider 240×20) */
.syf-notch {
  position: absolute; left: 50%; width: 240px; height: 20px;
  transform: translateX(-50%); pointer-events: none;
}
.syf-notch--top { top: -1px; transform: translateX(-50%) scaleY(-1); }
.syf-notch--bottom { bottom: -1px; }

/* Figma draws the tab smaller on mobile, it is not the desktop one scaled:
   `divider` is 240 x 20 on the 1440 frames, `divider-mobile` is 140 x 16 on
   the 390 frames (1502:5845 on Frameworks-Mobile). Figma has no tablet frame,
   so 900px is the site's own notch breakpoint, the same one .sya-notch uses.
   Centring is translateX(-50%) here, so only the width changes and the flip
   on --top is untouched.
   The two drawings are different silhouettes, not one scaled: divider-mobile
   has a narrower flat tip (94.6 of 140 against 179.2 of 240) and a longer
   corner sweep, so squashing the desktop path to 140 x 16 renders a blunter
   tab than Figma draws. Both paths therefore live in the notch svg and the
   breakpoint swaps which one is painted. The mobile path is authored in its
   own 140 x 16 space and scaled by 240/140 and 20/16 inside the svg, so that
   preserveAspectRatio="none" squashing the 240 x 20 viewBox back down to
   140 x 16 lands it at its true size. */
.syf-notch__mb { display: none; }
@media (max-width: 900px) {
  .syf-notch { width: 140px; height: 16px; }
  .syf-notch__dt { display: none; }
  .syf-notch__mb { display: inline; }
}

/* ==========================================================================
   Frameworks overview
   ========================================================================== */
.syf-hero { padding: 120px var(--gut) 72px; }
.syf-hero__inner { display: flex; flex-direction: column; gap: 28px; }
.syf-hero__side .syf-text { color: var(--deep); }

.syf-programs {
  position: relative; color: #fff;
  background: linear-gradient(172.47deg, var(--deep) 5.9%, var(--navy) 70.4%);
  padding: 72px var(--gut) 72px;
}
.syf-programs__head { text-align: center; max-width: 1120px; margin: 0 auto; }
.syf-programs__head .syf-eyebrow { font-size: 16px; line-height: 24px; }
.syf-programs__head .syf-h2 { color: #fff; margin-top: 8px; }
.syf-list { margin-top: 48px; }
.syf-row {
  display: flex; flex-direction: column; gap: 20px;
  padding: 32px 0; border-top: 1px solid rgba(255, 255, 255, 0.3);
}
.syf-row:first-child { border-top: 0; padding-top: 0; }
.syf-row:last-child { padding-bottom: 0; }
.syf-row__img {
  order: -1; width: 100%; aspect-ratio: 340 / 220; object-fit: cover; border-radius: 20px;
}
.syf-row__tag {
  font-weight: 600; font-size: 14px; line-height: 16px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--copper);
}
.syf-row__title {
  font-family: var(--display); font-weight: 400; font-size: 32px; line-height: 40px;
  color: #fff; margin-top: 8px;
}
.syf-row__desc { font-size: 16px; line-height: 24px; color: #fff; margin-top: 8px; max-width: 590px; }
.syf-row .syf-btn { margin-top: 24px; }

/* ==========================================================================
   Leadership Spiral
   ========================================================================== */
.syf-dark { position: relative; background: var(--navy); color: #fff; }

/* hero */
.syf-lshero {
  position: relative; color: #fff;
  background: linear-gradient(172.47deg, var(--deep) 5.9%, var(--navy) 70.4%);
  padding: 120px var(--gut) 64px;
}
.syf-lshero__inner { display: flex; flex-direction: column; gap: 40px; }
.syf-lshero .syf-eyebrow { font-size: 16px; }
.syf-lshero .syf-h1 { color: #fff; }
.syf-lshero .syf-text { color: rgba(255, 255, 255, 0.8); margin-top: 20px; }
.syf-lshero__wheel { width: 100%; max-width: 320px; height: auto; margin: 0 auto; }

/* 20+ years */
.syf-story { padding: 56px var(--gut); }
.syf-story__inner { display: flex; flex-direction: column; gap: 32px; }
.syf-video { position: relative; border-radius: 8px; overflow: hidden; }
.syf-video__img { width: 100%; aspect-ratio: 670 / 380; object-fit: cover; }
.syf-video__media { display: block; width: 100%; aspect-ratio: 670 / 380; object-fit: cover; background: #000; }
.syf-video__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  width: 72px; height: 48px; border-radius: 999px; background: #fff;
  color: var(--deep); font-size: 18px; line-height: 1;
}
.syf-story .syf-h2 { margin-bottom: 24px; }
.syf-sign { margin-top: 32px; }
.syf-sign__name { font-weight: 700; font-size: 18px; line-height: 24px; color: var(--deep); }
.syf-sign__role { font-size: 16px; line-height: 24px; color: var(--grey); margin-top: 4px; }

/* why we built it */
.syf-why { padding: 40px var(--gut) 72px; }
.syf-why__inner { display: flex; flex-direction: column; gap: 40px; }
.syf-why .syf-h2 { margin-bottom: 24px; }
.syf-web { position: relative; width: 100%; max-width: 559px; aspect-ratio: 559 / 293; }
.syf-web__lines { position: absolute; left: 1%; top: 3%; width: 75.3%; height: auto; }
.syf-pill {
  position: absolute; transform: translate(-50%, -50%);
  padding: 3px 10px; border-radius: 999px; background: #4a5568; color: #fff;
  font-size: 10px; line-height: 16px; text-transform: uppercase; white-space: nowrap;
}
.syf-web__note {
  position: absolute; left: 78%; top: 26%; width: 21%;
  font-weight: 600; font-size: 11px; line-height: 15px; color: var(--teal);
}

/* overview — three perspectives */
.syf-overview { padding: 72px var(--gut); }
.syf-overview__head { display: flex; flex-direction: column; gap: 24px; }
.syf-overview .syf-h2 { color: #fff; }
.syf-overview__side .syf-text { color: #fff; }
.syf-overview__side .syf-btn { margin-top: 24px; }
.syf-cards { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 48px; }
.syf-card {
  position: relative; display: flex; flex-direction: column; min-height: 380px;
  padding: 24px; border-radius: 16px; background: #fff; outline: none;
  overflow: hidden;
  transition: background-color .35s ease;
}
.syf-card__head { position: relative; z-index: 2; display: flex; align-items: center; gap: 16px; }
.syf-card__num {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 999px; background: var(--copper);
  font-family: var(--display); font-size: 32px; line-height: 1; color: #fff;
}
.syf-card__title { font-weight: 600; font-size: 22px; line-height: 28px; color: var(--grey); max-width: 237px; }
.syf-card__chev { flex: none; width: 36px; height: 36px; margin-left: auto; transform: rotate(-90deg); transition: transform .35s; }
.syf-card__img {
  position: absolute; left: 24px; top: 104px;
  width: calc(100% - 48px); height: calc(100% - 128px);
  object-fit: contain; z-index: 1;
  transition: opacity .35s ease;
}
/* The description is plain text on the card's own ground: the card fades to
   teal, the illustration fades out and the text slides in from the right over
   the empty ground. It must not carry a background of its own — a filled panel
   sliding across the illustration was rejected 2026-09-22. */
.syf-card__desc {
  position: absolute; left: 24px; top: 104px;
  width: calc(100% - 48px); height: calc(100% - 128px);
  display: block; overflow-y: auto; font-size: 20px; line-height: 28px; color: #fff;
  transform: translateX(110%);
  transition: transform .35s ease;
  z-index: 2;
}
.syf-card:hover, .syf-card:focus-within { background: var(--muted-teal); }
.syf-card:hover .syf-card__title, .syf-card:focus-within .syf-card__title { color: #fff; }
.syf-card:hover .syf-card__img, .syf-card:focus-within .syf-card__img { opacity: 0; }
.syf-card:hover .syf-card__chev, .syf-card:focus-within .syf-card__chev { transform: rotate(90deg); filter: invert(1); }
.syf-card:hover .syf-card__desc, .syf-card:focus-within .syf-card__desc { transform: translateX(0); }

/* what's included */
.syf-included { border-top: 1px solid var(--muted-teal); padding: 64px var(--gut); }
.syf-inc { display: grid; grid-template-columns: 1fr; gap: 36px; margin-top: 40px; }
.syf-inc__title {
  font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 32px;
  text-transform: uppercase; color: var(--copper);
}
.syf-inc__text { font-size: 16px; line-height: 24px; color: #efefef; margin-top: 12px; }

/* more than one way to grow */
.syf-ways { border-top: 1px solid var(--muted-teal); padding: 64px var(--gut) 88px; }
.syf-ways__inner { display: flex; flex-direction: column; gap: 40px; }
.syf-ways .syf-h2 { color: #fff; margin-bottom: 24px; }
.syf-ways .syf-text { color: #fff; }
.syf-contact { display: flex; align-items: center; gap: 20px; }
.syf-contact__photo { flex: none; width: 120px; height: 140px; border-radius: 10px; object-fit: cover; object-position: center top; background: #fff; }
.syf-contact__name { font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 30px; color: #fff; }
.syf-contact__role { font-size: 18px; line-height: 26px; color: #fff; margin-top: 4px; }
.syf-contact__line { display: block; font-size: 16px; line-height: 24px; color: rgba(255, 255, 255, 0.8); margin-top: 8px; }
.syf-contact__line + .syf-contact__line { margin-top: 0; }
.syf-contact__line:hover { color: var(--copper); }

/* lectors */
.syf-team { padding: 64px var(--gut); }
.syf-team__inner { display: flex; flex-direction: column; gap: 40px; }
.syf-team__title {
  font-family: var(--display); font-weight: 400; font-size: 36px; line-height: 44px;
  color: var(--navy); margin-top: 16px;
}
.syf-team__lead { font-size: 16px; line-height: 24px; color: var(--grey); margin-top: 24px; }
.syf-team__intro .syf-btn { margin-top: 32px; }
.syf-people {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin-right: calc(-1 * var(--gut)); padding-right: var(--gut); padding-bottom: 8px;
  scrollbar-width: none;
}
.syf-people::-webkit-scrollbar { display: none; }
/* cards are the shared Speaker Card (.syc-speaker, styled site-wide) */
.syf-people .syc-speaker { flex: none; width: 260px; max-width: none; aspect-ratio: 298 / 354; scroll-snap-align: start; }

/* FAQ — rows driven by home-v4-accordion.js (.sy4-acc) */
.syf-faq { padding: 8px var(--gut) 64px; }
.syf-faq__label {
  font-weight: 700; font-size: 16px; line-height: 16px; letter-spacing: 0.64px;
  text-transform: uppercase; color: var(--copper);
}
.syf-faq .syf-faq__box {
  display: block; width: 100%; max-width: none;
  margin-top: 28px; padding: 0; border: 0; border-radius: 0; background: transparent;
}
.syf-faq .sy4-acc__row {
  margin: 0 0 12px; padding: 0 20px; border: 1px solid #e6e6e6; border-radius: 4px;
  background: #fff; box-shadow: 0 1px 2px rgba(14, 20, 50, 0.06);
}
.syf-faq .sy4-acc__row:last-child { margin-bottom: 0; }
.syf-faq .sy4-acc__head {
  position: relative; display: block; width: 100%; min-height: 60px; margin: 0;
  padding: 16px 40px 16px 0; border: 0; background: transparent; background-image: none; cursor: pointer; text-align: left;
  font-family: var(--body); font-weight: 400; font-size: 17px; line-height: 24px; color: var(--navy);
}
.syf-faq .sy4-acc__head::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: auto; height: auto; border: 0; background: none;
  font-size: 26px; line-height: 1; color: var(--navy); transition: transform .25s;
}
.syf-faq .sy4-acc__row.is-open .sy4-acc__head::after { transform: translateY(-50%) rotate(45deg); }
.syf-faq .sy4-acc__panel { overflow: hidden; transition: max-height .32s ease; }
.syf-faq__a { padding: 0 40px 20px 0; font-size: 16px; line-height: 24px; color: var(--grey); }

/* closing CTA — card overlaps the navy footer */
.syf-cta { padding: 0 var(--gut); background: linear-gradient(180deg, var(--bg) 50%, var(--deep) 50%); }
.syf-cta__card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 24px;
  padding: 32px 28px; border-radius: 24px; background: var(--sand);
}
.syf-cta__title { font-family: var(--display); font-weight: 400; font-size: 32px; line-height: 38px; color: var(--deep); }
.syf-cta__text { font-size: 16px; line-height: 24px; color: var(--deep); margin-top: 16px; max-width: 860px; }
.syf-cta__go {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 999px; background: #fff;
  color: var(--deep); font-size: 26px; line-height: 1; transition: background-color .2s;
}
.syf-cta__go:hover { background: var(--deep); color: #fff; }

/* ==========================================================================
   Tablet
   ========================================================================== */
@media (min-width: 768px) {
  .syf-page { --gut: 48px; }
  .syf-h1 { font-size: 48px; line-height: 56px; }
  .syf-h2 { font-size: 36px; line-height: 44px; }
  .syf-eyebrow { font-size: 18px; }
  .syf-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; }
  .syf-row__img { order: 0; flex: none; width: 300px; }
  .syf-row__desc { font-size: 18px; }
  .syf-cards { grid-template-columns: repeat(2, 1fr); }
  .syf-inc { grid-template-columns: repeat(2, 1fr); }
  .syf-pill { font-size: 13px; padding: 4px 14px; line-height: 20px; }
  .syf-web__note { font-size: 14px; line-height: 20px; }
  .syf-cta__card { flex-direction: row; align-items: center; justify-content: space-between; padding: 44px; }
}

/* ==========================================================================
   Desktop — matches the 1440 frames
   ========================================================================== */
@media (min-width: 1024px) {
  .syf-page { --gut: 80px; }
  .syf-eyebrow { font-size: 20px; line-height: 16px; }
  .syf-h1 { font-size: 56px; line-height: 64px; margin-top: 24px; }
  .syf-h2 { font-size: 40px; line-height: 48px; }

  /* frameworks */
  .syf-hero { padding: 152px var(--gut) 110px; }
  .syf-hero__inner { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 60px; }
  .syf-hero__head { max-width: 692px; }
  .syf-hero__side { width: 450px; flex: none; }
  .syf-hero__side .syf-btn { padding: 14px 28px; }

  .syf-programs { padding: 84px var(--gut) 110px; }
  .syf-programs__head .syf-eyebrow { font-size: 20px; line-height: 28px; }
  .syf-list { margin-top: 64px; }
  .syf-row { gap: 60px; }
  .syf-row__img { width: 340px; height: 220px; }
  .syf-row__tag { font-size: 16px; }
  .syf-row__title { font-size: 40px; line-height: 48px; margin-top: 4px; }

  /* leadership spiral */
  .syf-lshero { padding: 110px var(--gut) 56px; }
  .syf-lshero__inner { flex-direction: row; align-items: center; gap: 0; }
  .syf-lshero__text { width: 520px; flex: none; }
  .syf-lshero__wheel { width: 395px; max-width: none; margin: 0 0 0 auto; margin-right: 106px; }
  .syf-lshero .syf-eyebrow { font-size: 20px; }
  .syf-lshero .syf-btn { padding: 12px 24px; font-size: 15px; }

  .syf-story { padding: 34px var(--gut); }
  .syf-story__inner { flex-direction: row; align-items: center; gap: 70px; }
  .syf-video { width: 670px; flex: none; }
  .syf-story__text { max-width: 540px; }

  .syf-why { padding: 40px var(--gut) 90px; }
  .syf-why__inner { flex-direction: row; align-items: center; justify-content: space-between; }
  .syf-why__text { max-width: 578px; }
  .syf-pill { font-size: 14px; }

  .syf-overview { padding: 100px var(--gut); }
  .syf-overview__head { flex-direction: row; justify-content: space-between; align-items: flex-start; }
  .syf-overview__title { max-width: 600px; }
  .syf-overview__side { max-width: 500px; }
  .syf-cards { grid-template-columns: repeat(3, 1fr); gap: 25px; margin-top: 64px; }
  .syf-card { min-height: 433px; }
  .syf-card__title { font-size: 24px; }

  .syf-included { padding: 80px var(--gut); }
  .syf-inc { grid-template-columns: repeat(4, 1fr); gap: 56px 40px; margin-top: 48px; }
  .syf-inc__title { font-size: 32px; line-height: 34px; }

  .syf-ways { padding: 80px var(--gut) 110px; }
  .syf-ways__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 60px; }
  .syf-ways__text { max-width: 640px; }
  .syf-contact { gap: 28px; }
  .syf-contact__photo { width: 172px; height: 200px; }
  .syf-contact__name { font-size: 32px; line-height: 34px; }
  .syf-contact__role { font-size: 24px; line-height: 32px; }

  .syf-team { padding: 92px 0 92px var(--gut); }
  .syf-team__inner { flex-direction: row; gap: 90px; align-items: center; }
  .syf-team__intro { width: 423px; flex: none; }
  .syf-team__title { font-size: 48px; line-height: 56px; }
  .syf-people { margin-right: 0; padding-right: var(--gut); min-width: 0; }
  .syf-people .syc-speaker { width: 298px; }

  .syf-faq { padding: 0 var(--gut) 100px; }
  .syf-faq .sy4-acc__row { padding: 0 24px; }
  .syf-faq .sy4-acc__head { font-size: 18px; }

  .syf-cta__card { padding: 54px; gap: 60px; }
  .syf-cta__body { display: flex; align-items: center; justify-content: space-between; gap: 60px; flex: 1; }
  .syf-cta__title { font-size: 48px; line-height: 54px; max-width: 520px; }
  .syf-cta__text { font-size: 18px; margin-top: 0; max-width: 420px; }
}

/* ==========================================================================
   Ultra-wide (2560px+) — lectors section only
   The lectors section reuses the shared .sye-sect/.sye-lect component
   (built for Education's .sye-page, which centers its own 1800px-cap
   box), but the surrounding Leadership Spiral sections align their text
   to .syf-wrap's centered 1280px column instead. Those two centering
   schemes diverge at very wide viewports, leaving the lectors intro
   noticeably further left than the sections above/below it. Realign just
   its left edge to match .syf-wrap's inset at 2560px+; the right side is
   intentionally left alone (can overflow further right).
   ========================================================================== */
@media (min-width: 2560px) {
  .syf-page .sye-lect {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 640px;
  }
}


/* src/styles/course-booking.css */
/* Rezervační formulář kurzu v sekci .syd-book (#rezervace) na /kurzy/* */
.sybk-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  width: 100%;
  color: #0e1432;
  font-family: Aptos, "Titillium Web", "Segoe UI", system-ui, sans-serif;
}
@media (min-width: 1024px) {
  .sybk-form { grid-template-columns: 1fr 1fr; }
  .sybk-form > .sybk-full { grid-column: 1 / -1; }
}
.sybk-form .sybk-label {
  margin: 4px 0 -4px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #b48a79;
}
.sybk-form .sybk-field,
.sybk-form .sybk-textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 13px 16px;
  border: 1px solid rgba(14, 20, 50, .18);
  border-radius: 12px;
  background: #fff;
  color: #0e1432;
  font: inherit;
  font-size: 15px;
  line-height: 1.4;
}
.sybk-form .sybk-textarea { min-height: 110px; resize: vertical; }
.sybk-form .sybk-field::placeholder,
.sybk-form .sybk-textarea::placeholder { color: rgba(14, 20, 50, .5); }
.sybk-form .sybk-field:focus,
.sybk-form .sybk-textarea:focus {
  outline: none;
  border-color: #b48a79;
  box-shadow: 0 0 0 3px rgba(180, 138, 121, .25);
}
.sybk-form .sybk-field--course { font-weight: 600; }
.sybk-form .sybk-field--flash { animation: sybk-flash 1.2s ease-out; }
@keyframes sybk-flash {
  from { box-shadow: 0 0 0 4px rgba(180, 138, 121, .55); }
  to { box-shadow: 0 0 0 0 rgba(180, 138, 121, 0); }
}
.sybk-form .sybk-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(14, 20, 50, .6);
}
.sybk-form .sybk-note a { color: inherit; text-decoration: underline; }
.sybk-form .sybk-submit {
  justify-self: start;
  padding: 12px 24px;
  border: 0;
  border-radius: 9999px;
  background: #b48a79;
  color: #fff;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}
.sybk-form .sybk-submit:hover { background: rgba(180, 138, 121, .9); }
.sybk-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


/* src/styles/course-signup.css */
/* ==========================================================================
   Symphera — přihláška na termín kurzu (modal)
   Otevírá se z tlačítka u termínu (.sye-term). Karta uvnitř dědí vzhled
   formuláře „Book a call" (.sybook-*), takže tady jsou jen věci navíc:
   overlay, hlavička s kurzem/termínem a drobné úpravy polí.
   Namespace `sysg-`. Chování: src/scripts/course-signup.js
   ========================================================================== */

.sysg {
  position: fixed;
  inset: 0;
  z-index: 1000; /* nad fixní hlavičkou (z-index 40), jinak zůstane nepřekrytá */
  /* Zavřeno je výchozí stav. Skript běží jen na živém webu (runInCanvas:false),
     takže kdyby se skrývalo jen atributem hidden, v editoru by modal trvale
     překrýval celou stránku. Otevírá ho třída .sysg--open. */
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  font-family: var(--sy4-body, 'Titillium Web', system-ui, sans-serif);
}
.sysg--open { display: flex; }
.sysg[hidden] { display: none; }

.sysg__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 11, 32, 0.72);
}

.sysg__dialog {
  position: relative;
  width: min(720px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  border-radius: 24px;
  animation: sysg-in 180ms ease-out;
}

@keyframes sysg-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sysg__dialog { animation: none; }
}

.sysg__card { position: relative; }

.sysg__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.sysg__close:hover { background: rgba(255, 255, 255, 0.12); }

.sysg__eyebrow { padding-right: 56px; margin-bottom: 12px; }

.sysg__title {
  margin: 0;
  color: #fff;
  font-family: var(--sy4-display, 'HW Atlantic', Georgia, serif);
  font-size: 32px;
  line-height: 1.16;
}

.sysg__meta {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 15px;
  line-height: 1.5;
}
.sysg__meta:empty { display: none; }

.sysg__form { margin-top: 28px; }

/* Kurz a termín cestují skrytě — vidět jsou v hlavičce. */
.sysg__carry {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.sysg__textarea {
  height: auto;
  min-height: 104px;
  padding: 16px 24px;
  border-radius: 24px;
  resize: vertical;
}

.sysg__note {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  line-height: 1.55;
}

.sysg__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  line-height: 1.5;
}
.sysg__check {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: #b48a79;
}

/* Stavové hlášky. Prvky s data-instatic-form-message doplňuje
   course-signup.js, přes editor je vložit nejde. */
.sysg__msg {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}
.sysg__msg--error { color: #ffb4a8; }
.sysg__msg--success {
  padding: 8px 0;
  color: #fff;
  font-size: 17px;
}

/* Po úspěšném odeslání zůstane v kartě jen poděkování. */
.sysg__form[data-instatic-form-state="success"] > *:not([data-instatic-form-message]) { display: none; }

/* Poděkování se vypisovalo dvakrát: jednou do .sysg__msg--success (skript) a
   podruhé jako ::after z globálního pravidla ve Stylech
   (`form[data-instatic-form-state="success"]::after { content: attr(...) }`).
   V modalu necháme jen hlášku ze skriptu — ta umí i chyby. Ostatních
   formulářů na webu se to netýká, ty žádný .sysg__msg nemají. */
.sysg__form[data-instatic-form-state="success"]::after { content: none; display: none; }

body.sysg-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   Oprava řádku termínu mezi 1080 a ~1220 px. `.sye-term__meta` tam má
   minimální šířky sloupců (130 + 150 + 70 px) + 48 px mezer = 398 px, ale
   sloupec je užší, takže obsah přeteče doprava přes cenu. Sloupce necháme
   smrštit a text zalomit. Nesouvisí s přejmenováním tlačítka — s původním
   „Rezervovat" se překrývalo stejně (změřeno na živém webu 2026-09-19).
   -------------------------------------------------------------------------- */
@media (min-width: 1080px) {
  .sye-term__meta {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, 0.7fr);
    column-gap: 16px;
  }
  .sye-term__meta .sye-term__metaitem {
    min-width: 0;
    white-space: normal;
    align-items: flex-start;
  }
}

@media (max-width: 560px) {
  .sysg { padding: 12px; }
  .sysg__title { font-size: 26px; }
  .sysg__close { top: 14px; right: 14px; width: 36px; height: 36px; }
}


/* src/styles/mobile-overflow.css */
/* Narrow-phone overflow fixes (found at 360px, 2026-09-22).

   The page wrappers (.sy4-page, .sye-page, .syc-page, .syf-page) carry
   overflow-x: clip, so nothing here ever produced a horizontal scrollbar —
   the overflowing part was silently cut off instead. */

/* Booking card (/services/advisory and its EN twin).
   A bare `1fr` track is minmax(auto, 1fr): it grows to the card's
   min-content width, which the longest <select> option ("Which consultation
   are you interested in?") pushes to ~359px inside a 320px column. */
@media (max-width: 900px) {
  .sybook-inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

.sybook-card {
  min-width: 0;
}

.sybook-card select,
.sybook-card input,
.sybook-card textarea {
  max-width: 100%;
}

/* Contact cards: photo + text side by side. The text column is a flex item
   with min-width:auto, so an unbreakable e-mail address kept it wider than
   the space left next to the photo. The photos are flex: 0 0 auto, so
   min-width:0 only lets the TEXT column shrink. */
.syd-book__person > div:last-child,
.syc-person__info,
.syf-contact__body,
.sybook-person-text {
  min-width: 0;
}

/* Last resort for screens narrower than the gap tweak below covers. */
.syd-person__c a,
.sycr-person__contact a,
.syf-contact__line,
.sybook-person-mail {
  overflow-wrap: anywhere;
}

/* At 360px the addresses miss by 1–4px. A tighter gap keeps them on one line
   instead of wrapping the final letter. */
@media (max-width: 400px) {
  /* Two classes: `.syd-book .syd-person` sets the 26px gap at 0-2-0. */
  .syd-book .syd-book__person {
    column-gap: 16px;
  }
  /* The address needs ~176px at 14px; next to the 142px photo only 162px
     is left. Same 142:134 ratio, 22px narrower. */
  .syd-book .syd-book__photo {
    width: 120px;
    height: 113px;
  }
  .syc-person {
    gap: 12px;
  }
  .syf-contact {
    gap: 12px;
  }
  /* The advisory booking card sets the address at 18px next to a 104px
     photo: ~40px short at 360, too much for a gap tweak. Stack instead. */
  .syv-book .sybook-person {
    flex-direction: column;
    row-gap: 16px;
  }
}

/* Course contact card: below 360px even the smaller photo leaves too
   little room, so stack it above the text. */
@media (max-width: 359px) {
  .syd-book .syd-book__person {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 16px;
  }
}

/* Same card on /contact (16px type) fits down to ~340px. */
@media (max-width: 340px) {
  .sybook-person {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 16px;
  }
}