/* 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;
}


/* 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");
}

/* 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 {
  bottom: 0;
  width: 240px;
  height: 20px;
  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 278.541 35.4079' preserveAspectRatio='none'%3E%3Cpath d='M33.5954 5.14096C37.2688 1.83148 42.0379 0 46.9823 0H225.473C229.864 0 234.134 1.44556 237.623 4.11355L278.541 35.4079H0L33.5954 5.14096Z' 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 278.541 35.4079' preserveAspectRatio='none'%3E%3Cpath d='M33.5954 5.14096C37.2688 1.83148 42.0379 0 46.9823 0H225.473C229.864 0 234.134 1.44556 237.623 4.11355L278.541 35.4079H0L33.5954 5.14096Z' 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: 16px;
    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 278.541 35.4079' preserveAspectRatio='none'%3E%3Cpath d='M33.5954 5.14096C37.2688 1.83148 42.0379 0 46.9823 0H225.473C229.864 0 234.134 1.44556 237.623 4.11355L278.541 35.4079H0L33.5954 5.14096Z' 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 278.541 35.4079' preserveAspectRatio='none'%3E%3Cpath d='M33.5954 5.14096C37.2688 1.83148 42.0379 0 46.9823 0H225.473C229.864 0 234.134 1.44556 237.623 4.11355L278.541 35.4079H0L33.5954 5.14096Z' 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 278.541 35.4079' preserveAspectRatio='none'%3E%3Cpath d='M33.5954 30.26694C37.2688 33.57642 42.0379 35.4079 46.9823 35.4079H225.473C229.864 35.4079 234.134 33.96234 237.623 31.29435L278.541 0H0L33.5954 30.26694Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 278.541 35.4079' preserveAspectRatio='none'%3E%3Cpath d='M33.5954 30.26694C37.2688 33.57642 42.0379 35.4079 46.9823 35.4079H225.473C229.864 35.4079 234.134 33.96234 237.623 31.29435L278.541 0H0L33.5954 30.26694Z' 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;
}

.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;
}

/* 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;
}

/* == 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;
}

.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;
  }

  /* Stacked on mobile per Figma 868:1581 — photo above, copy below. */
  .sy4-tcard {
    flex-direction: column;
    width: min(326px, 84vw);
    min-height: 0;
  }

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

  .sy4-tcard__body {
    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: max(120px, calc(50% - 600px)) !important;
  padding-right: max(120px, calc(50% - 600px)) !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;
}

@media (max-width: 900px) {
  .sy4-cta {
    padding-left: 32px !important;
    padding-right: 32px !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: max(80px, calc(50% - clamp(720px, 46vw, 900px) + 80px)) !important;
    padding-right: max(80px, calc(50% - clamp(720px, 46vw, 900px) + 80px)) !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/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);
}
.syg-page .syg-notch {
  display: block; position: absolute; left: 50%; bottom: 0;
  margin-left: -120px; width: 240px; height: 20px;
  color: var(--bg); pointer-events: none; z-index: 3;
}

/* ---------- 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;
  }
}