/* ===== Context Service case study (light theme) ===== */
:root {
  --cs-bg-top: #eaf1fb;
  --cs-bg-bottom: #f3e9f7;
  --cs-ink: #202a44;
  --cs-ink-soft: #5b6785;
  --cs-blue: #1b4f9c;
  --cs-blue-2: #2f7bd6;
  --cs-orange: #f0a54a;
  --cs-orange-soft: #f7dcae;
  --cs-cream: #ffffff;
  --cs-card: #ffffff;
  --cs-line: #e6e2f0;
  --cs-violet: #7b5bd6;
  --cs-radius: 22px;
  --cs-font-display: "Space Grotesk", system-ui, sans-serif;
  --cs-font-body: "Inter", system-ui, -apple-system, sans-serif;
  --cs-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body.cs {
  font-family: var(--cs-font-body);
  color: var(--cs-ink);
  background:
    radial-gradient(900px 500px at 85% -5%, #dfeafc 0%, transparent 55%),
    radial-gradient(700px 500px at 5% 8%, #eef1fd 0%, transparent 50%),
    linear-gradient(180deg, var(--cs-bg-top) 0%, #eef0fb 42%, var(--cs-bg-bottom) 100%);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}
.cs a { color: inherit; text-decoration: none; }

/* ===== Top bar ===== */
.cs-topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(234, 241, 251, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--cs-line);
}
.cs-topbar__inner {
  max-width: 1120px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(20px, 5vw, 44px);
}
.cs-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--cs-font-display); font-weight: 700; font-size: 16px; color: var(--cs-ink); letter-spacing: .2px; }
/* Hand-drawn S: a felt-tip stroke with a doubled-back ghost line and an
   open sketch ring that deliberately overshoots instead of closing. */
.cs-brand__mark { display: block; width: 36px; height: 36px; transform: rotate(-5deg); }
.cs-brand__mark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cs-brand__mark path { stroke-linecap: round; stroke-linejoin: round; }
.cs-brand__ink { stroke: url(#inkS); stroke-width: 3.4; }
.cs-brand__ink--ghost { stroke: var(--cs-blue-2); stroke-width: 1.3; opacity: .38; }
.cs-brand__ring { stroke: var(--cs-blue-2); stroke-width: 1.9; opacity: .5; }
/* Hovering re-inks the mark, ring first, then the letter over it */
.cs-brand:hover .cs-brand__ring,
.cs-brand:hover .cs-brand__ink { stroke-dasharray: 220; animation: cs-ink-draw .75s ease forwards; }
.cs-brand:hover .cs-brand__ink { animation-delay: .12s; }
@keyframes cs-ink-draw { from { stroke-dashoffset: 220; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .cs-brand:hover .cs-brand__ring,
  .cs-brand:hover .cs-brand__ink { animation: none; stroke-dasharray: none; }
}
.cs-brand:hover { opacity: .85; }
.cs-nav { display: flex; align-items: center; gap: clamp(12px, 2vw, 24px); }
.cs-nav a { font-family: var(--cs-font-body); font-weight: 500; font-size: 16px; color: var(--cs-ink); text-decoration: none; transition: color .2s ease; }
.cs-nav a:hover { color: var(--cs-blue); }
.cs-nav__cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--cs-ink); border: 0;
  padding: 0; font: inherit; font-weight: 500; font-size: 16px;
  cursor: pointer;
}
.cs-nav__cta:hover { color: var(--cs-blue); }

.cs-pill {
  font-family: var(--cs-font-display); font-weight: 600; font-size: 15px; color: var(--cs-blue);
  background: #fff; border: 1px solid #dbe6f6; border-radius: 999px;
  padding: 10px 22px; box-shadow: 0 8px 22px -14px rgba(31, 82, 155, .5);
}

/* ===== Layout ===== */
.cs main { max-width: 1120px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 44px); }

/* ===== Hero ===== */
.cs-hero { padding: 18px 0 10px; }
.cs-hero__eyebrow { font-family: var(--cs-font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .16em; font-size: 13px; color: var(--cs-blue); margin-bottom: 12px; }
.cs-hero__title { font-family: var(--cs-font-display); font-weight: 700; font-size: clamp(30px, 5vw, 46px); line-height: 1.08; letter-spacing: -0.01em; color: var(--cs-ink); }
.cs-hero__lede { margin-top: 16px; max-width: 440px; color: var(--cs-ink-soft); font-size: 15px; }
.cs-hero__media { margin-top: 8px; will-change: transform; }
.cs-hero__media img { width: 100%; height: auto; display: block; }

/* ===== 1-2-3 panel ===== */
.cs-panel-wrap { margin-top: clamp(48px, 7vw, 96px); }
.cs-panel {
  background: var(--cs-card); border: 1px solid var(--cs-line); border-radius: var(--cs-radius);
  padding: clamp(24px, 4vw, 40px); box-shadow: 0 40px 90px -60px rgba(40, 40, 90, .5);
}
.cs-panel__top { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(24px, 4vw, 48px); align-items: start; }
.cs-panel__title { font-family: var(--cs-font-display); font-weight: 700; font-size: clamp(20px, 2.6vw, 26px); line-height: 1.15; color: var(--cs-ink); }
.cs-panel__desc { margin-top: 14px; color: var(--cs-ink-soft); font-size: 14px; max-width: 320px; }

/* JTBD callout */
.cs-jtbd { display: flex; gap: 14px; margin-top: 30px; }
.cs-jtbd__avatar svg,
.cs-jtbd__avatar img { width: 46px; height: 46px; display: block; border-radius: 50%; object-fit: cover; }
.cs-jtbd__body {
  position: relative; background: var(--cs-orange-soft); border-radius: 14px;
  padding: 14px 16px; max-width: 300px;
}
.cs-jtbd__body::before {
  content: ""; position: absolute; left: -8px; top: 16px;
  border: 8px solid transparent; border-right-color: var(--cs-orange-soft); border-left: 0;
}
.cs-jtbd__label { font-family: var(--cs-font-display); font-weight: 700; font-size: 14px; color: #8a5a12; margin-bottom: 4px; }
.cs-jtbd__text { font-size: 12.5px; color: #6d5426; line-height: 1.5; }

/* Flow diagram (exact Figma geometry) */
.cs-flow { position: relative; }
.cs-flow__svg { width: 100%; height: auto; display: block; font-family: var(--cs-font-body); overflow: visible; }
.cs-flow__conn { pointer-events: none; }

.cs-step rect { fill: #fff; filter: drop-shadow(-8px 10px 30px rgba(3, 45, 96, .12)); transition: filter .2s; }
.cs-step text { fill: #032d60; font-size: 90px; letter-spacing: -0.9px; text-anchor: middle; dominant-baseline: middle; }
.cs-step text .b { font-weight: 700; }
.cs-step { cursor: pointer; outline: none; }
.cs-step:hover rect, .cs-step:focus-visible rect, .cs-step.is-active rect {
  filter: drop-shadow(-6px 10px 26px rgba(3, 45, 96, .28));
}

.cs-csnode rect { fill: #FBE0C4; filter: drop-shadow(-8px 10px 30px rgba(3, 45, 96, .12)); transition: filter .2s; }
.cs-csnode text { fill: #032d60; font-size: 71px; font-weight: 700; letter-spacing: -0.7px; text-anchor: middle; dominant-baseline: middle; }
.cs-csnode.is-active rect { filter: drop-shadow(0 12px 28px rgba(240, 165, 74, .5)); }

/* Tabs */
.cs-tabs { display: flex; gap: 0; margin-top: 34px; background: var(--cs-orange-soft); border-radius: 12px; padding: 6px; flex-wrap: wrap; }
.cs-tab {
  flex: 1 1 auto; min-width: 120px; border: 0; background: transparent; cursor: pointer;
  font-family: var(--cs-font-display); font-weight: 600; font-size: 14px; color: #7a5320;
  padding: 10px 14px; border-radius: 8px; transition: background .2s, color .2s, box-shadow .2s;
  display: flex; flex-direction: column; align-items: center; line-height: 1.2;
}
.cs-tab__sub { font-size: 10px; font-weight: 500; opacity: .8; }
.cs-tab:hover { color: #5c3c12; }
.cs-tab.is-active { background: transparent; color: #7a5320; font-weight: 700; box-shadow: none; }

/* Numbered steps */
.cs-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 30px; }
.cs-steps li { display: flex; flex-direction: column; gap: 12px; }
.cs-steps__n {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--cs-font-display); font-weight: 700; color: var(--cs-violet);
  background: #efe9fb; border: 1px solid #ded3f5;
}
.cs-steps p { color: var(--cs-ink-soft); font-size: 13.5px; min-height: 60px; }

/* ===== Key Capabilities ===== */
.cs-caps { padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 8vw, 96px); }
.cs-caps__title { font-family: var(--cs-font-display); font-weight: 700; font-size: clamp(22px, 3vw, 30px); color: var(--cs-violet); }
.cs-caps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 30px; }
.cs-cap {
  background: #fff; border: 1px solid var(--cs-line); border-radius: 16px; overflow: hidden; cursor: zoom-in;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; outline: none;
}
.cs-cap:hover, .cs-cap:focus-visible { transform: translateY(-6px); border-color: #d8ccf2; box-shadow: 0 26px 50px -30px rgba(70, 50, 130, .5); }
.cs-cap img { width: 100%; aspect-ratio: 1.62 / 1; height: auto; object-fit: contain; object-position: center; display: block; background: linear-gradient(160deg, #e3ecfb 0%, #eae9fa 55%, #efe9fb 100%); padding: 6px; border-radius: 14px; }
.cs-cap figcaption { padding: 16px 18px 20px; }
.cs-cap h3 { font-family: var(--cs-font-display); font-size: 17px; margin-bottom: 6px; color: var(--cs-ink); }
.cs-cap p { font-size: 13px; color: var(--cs-ink-soft); }

/* ===== Information Architecture ===== */
.cs-ia { padding: 0 0 clamp(56px, 8vw, 96px); }
.cs-ia__title { font-family: var(--cs-font-display); font-weight: 700; font-size: clamp(22px, 3vw, 30px); color: var(--cs-violet); }
.cs-ia__lede { margin-top: 12px; color: var(--cs-ink-soft); font-size: 15px; }
/* The map is built from markup rather than a flattened export, so every label
   stays crisp, selectable and searchable at any zoom */
.cs-ia__map {
  --ia-green: #bdeed0; --ia-green-line: #8bd6a8;
  --ia-grey: #e8e8ea; --ia-grey-line: #cdcdd6;
  --ia-blue: #c6e0fa; --ia-blue-line: #93c1ee;
  --ia-lav: #ddc9f7; --ia-lav-line: #b998e8;
  /* Shared by the grids and by the connectors that have to line up with them */
  --ia-gap-areas: 14px; --ia-gap-cols: 18px;
  margin-top: 32px; padding: clamp(18px, 3vw, 32px);
  border: 1px solid var(--cs-line); border-radius: 16px; background: #fff;
  box-shadow: 0 26px 50px -30px rgba(70, 50, 130, .5);
}

.ia-node {
  padding: 12px 14px; border-radius: 10px;
  background: #fff; border: 1px solid var(--cs-line);
  font-size: 12.5px; line-height: 1.5;
}
.ia-node__title, .ia-node__sub, .ia-node__label { display: block; }
.ia-node__title { font-family: var(--cs-font-display); font-weight: 700; }
.ia-node__label { font-weight: 600; margin-top: 8px; }
.ia-node ul { list-style: none; margin: 6px 0 0; padding: 0; }
.ia-node li { position: relative; padding-left: 13px; color: var(--cs-ink-soft); }
/* Dots are drawn rather than list markers so they align to the cap height */
.ia-node li::before {
  content: ""; position: absolute; left: 3px; top: .6em;
  width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .6;
}
.ia-node ul + .ia-node__title { margin-top: 12px; }
.ia-node--green { background: var(--ia-green); border-color: var(--ia-green-line); }
.ia-node--grey { background: var(--ia-grey); border-color: var(--ia-grey-line); }
.ia-node--blue { background: var(--ia-blue); border-color: var(--ia-blue-line); }
.ia-node--area { border-color: var(--ia-lav-line); text-align: center; font-family: var(--cs-font-display); font-weight: 700; }
.ia-node--active { background: var(--ia-lav); }
.ia-node--head { text-align: center; font-family: var(--cs-font-display); font-weight: 700; }

/* Entry point the whole map hangs from */
.ia-row { display: flex; align-items: center; justify-content: center; }
/* Same card shell as every other node so the map reads as one family. It only
   differs in being centred, matching the area row it feeds. */
.ia-node--entry { text-align: center; background: var(--ia-lav); border-color: var(--ia-lav-line); }
.ia-node--entry .ia-node__sub { color: var(--cs-ink-soft); }

/* Branching connector: one stem off the parent, then a drop with an arrowhead
   into every column. Offsets are computed as half a column, so the stem, the
   bar's ends and each drop stay on their targets' centres at any width. */
.ia-fork {
  --ia-fork-gap: var(--ia-gap-areas);
  --ia-fork-stem: 50%;
  --ia-fork-bar-start: calc((100% - var(--ia-fork-gap) * 2) / 6);
  position: relative; height: 36px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ia-fork-gap);
}
/* Hairlines are centred on their anchor, like the arrowheads, so a stem and the
   drop below it sit on exactly the same axis instead of a pixel apart */
.ia-fork::before {
  content: ""; position: absolute; left: var(--ia-fork-stem); top: 0; width: 1px; height: 18px;
  transform: translateX(-50%); background: var(--ia-grey-line);
}
.ia-fork__bar {
  grid-row: 1; grid-column: 1 / -1; align-self: start; height: 1px;
  margin: 18px calc((100% - var(--ia-fork-gap) * 2) / 6) 0 var(--ia-fork-bar-start);
  background: var(--ia-grey-line);
}
/* Context Definition sits in the first column of the areas row, so its branch
   leaves from there and runs right to reach the other two views. The stem takes
   the first column's centre rather than the card's, so it shares an axis with
   the drop beneath it; the two are ~1px apart and the card is wide enough that
   the difference is invisible against it. */
.ia-fork--from-first {
  --ia-fork-gap: var(--ia-gap-cols);
  --ia-fork-stem: calc((100% - var(--ia-fork-gap) * 2) / 6);
  --ia-fork-bar-start: var(--ia-fork-stem);
}
.ia-fork__drop { grid-row: 1; position: relative; }
.ia-fork__drop:nth-child(2) { grid-column: 1; }
.ia-fork__drop:nth-child(3) { grid-column: 2; }
.ia-fork__drop:nth-child(4) { grid-column: 3; }
.ia-fork__drop::before {
  content: ""; position: absolute; left: 50%; top: 18px; width: 1px; height: 18px;
  transform: translateX(-50%); background: var(--ia-grey-line);
}
.ia-fork__drop::after {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 6px solid var(--ia-grey-line);
}

.ia-areas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ia-gap-areas); }
.ia-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ia-gap-cols); align-items: start; }
.ia-chain { list-style: none; margin: 0; padding: 0; }
/* Consecutive cards in a chain are joined by the same connector treatment */
.ia-chain > li + li { margin-top: 28px; position: relative; }
.ia-chain > li + li::before {
  content: ""; position: absolute; left: 50%; top: -28px; width: 1px; height: 22px;
  transform: translateX(-50%); background: var(--ia-grey-line);
}
.ia-chain > li + li::after {
  content: ""; position: absolute; left: 50%; top: -6px; transform: translateX(-50%);
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 6px solid var(--ia-grey-line);
}
.cs-ia__notes { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; }
.cs-ia__notes li { color: var(--cs-ink-soft); font-size: 14px; line-height: 1.55; }
.cs-ia__notes b { color: var(--cs-ink); font-family: var(--cs-font-display); font-weight: 600; }

/* ===== How It Works ===== */
.cs-how { padding: 0 0 clamp(56px, 8vw, 96px); }
.cs-how__title { font-family: var(--cs-font-display); font-weight: 700; font-size: clamp(22px, 3vw, 30px); color: var(--cs-violet); }
.cs-how__lede { margin-top: 12px; max-width: none; color: var(--cs-ink-soft); font-size: 15px; }
.cs-how__video {
  position: relative; margin-top: 32px; aspect-ratio: 16 / 9;
  border: 1px solid var(--cs-line); border-radius: 16px; overflow: hidden;
  background: linear-gradient(160deg, #e3ecfb 0%, #eae9fa 55%, #efe9fb 100%);
  box-shadow: 0 26px 50px -30px rgba(70, 50, 130, .5);
}
.cs-how__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* ===== Salesforce Platform ===== */
.cs-platform { padding: 0 0 clamp(56px, 8vw, 96px); }
.cs-platform__label {
  font-family: var(--cs-font-display); font-weight: 700; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--cs-blue); margin-bottom: 14px;
}
.cs-platform__quote {
  font-family: var(--cs-font-display); font-weight: 700;
  font-size: clamp(20px, 3vw, 30px); line-height: 1.4; letter-spacing: -0.01em;
  color: var(--cs-ink); padding-left: 24px; border-left: 4px solid var(--cs-violet);
}
.cs-platform__quote a { text-decoration: underline; text-underline-offset: 4px; transition: color .2s ease; }
.cs-platform__quote a:hover { color: var(--cs-violet); }
/* Outcome figures. The 1px gap over a tinted background draws every divider,
   so cells stay separated however many wrap onto a row. */
.cs-outcome {
  list-style: none; margin: 28px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--cs-line);
  border: 1px solid var(--cs-line); border-radius: 16px; overflow: hidden;
}
.cs-outcome__cell { background: var(--cs-card); padding: clamp(18px, 2.4vw, 28px); }
/* Two lines are reserved whether or not a figure needs them, so a longer label
   wrapping does not push its caption out of line with the others */
.cs-outcome__figure {
  font-family: var(--cs-font-display); font-weight: 700;
  font-size: clamp(24px, 3vw, 34px); line-height: 1.1; letter-spacing: -0.02em;
  color: var(--cs-violet); margin-bottom: 12px; min-height: 2.2em;
}
.cs-outcome__note {
  font-family: var(--cs-font-mono); font-size: 12px; line-height: 1.7;
  color: var(--cs-ink-soft);
}

/* ===== Footer ===== */
.cs-footer { max-width: 1120px; margin: 0 auto; padding: 60px clamp(20px, 5vw, 44px) 80px; border-top: 1px solid var(--cs-line); }
.cs-footer__nav { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 40px; }
.cs-footer__next, .cs-footer__back { font-family: var(--cs-font-display); font-size: clamp(18px, 2.5vw, 26px); font-weight: 600; color: var(--cs-ink); }
.cs-footer__next:hover, .cs-footer__back:hover { color: var(--cs-blue); }
.cs-footer__links { display: flex; gap: 18px; margin-bottom: 20px; }
.cs-footer__links a, .cs-footer__links button { color: var(--cs-ink-soft); background: none; border: 0; font: inherit; cursor: pointer; padding: 0; }
.cs-footer__links a:hover, .cs-footer__links button:hover { color: var(--cs-ink); }
.cs-footer__credit { color: var(--cs-ink-soft); font-size: 13px; }
/* Credit left, back to top right; wraps to two rows on narrow screens */
.cs-footer__bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.cs-footer__top { display: inline-flex; align-items: center; gap: 8px; color: var(--cs-ink-soft); font-size: 13px; transition: color .2s; }
.cs-footer__top:hover { color: var(--cs-blue); }
.cs-footer__top-icon { width: 15px; height: 15px; flex-shrink: 0; transition: transform .2s; }
.cs-footer__top:hover .cs-footer__top-icon { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .cs-footer__top:hover .cs-footer__top-icon { transform: none; }
}

/* ===== Lightbox ===== */
.cs-lightbox {
  position: fixed; inset: 0; z-index: 100; display: none;
  align-items: center; justify-content: center; padding: 5vw;
  background: rgba(24, 22, 46, .72); backdrop-filter: blur(4px);
}
.cs-lightbox.is-open { display: flex; }
.cs-lightbox img { max-width: min(1000px, 92vw); max-height: 86vh; width: auto; height: auto; border-radius: 12px; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8); }
.cs-lightbox__close {
  position: absolute; top: 20px; right: 26px; width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: rgba(255, 255, 255, .16); color: #fff; font-size: 26px; line-height: 1; cursor: pointer;
  transition: background .2s;
}
.cs-lightbox__close:hover { background: rgba(255, 255, 255, .3); }

/* ===== Reveal ===== */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ===== Responsive ===== */
@media (max-width: 860px) {
  .cs-nav__cta span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cs-panel__top { grid-template-columns: 1fr; }
  .cs-caps__grid { grid-template-columns: 1fr; }
  .cs-ia__notes { grid-template-columns: 1fr; }
  /* The map stacks into a single readable column rather than scrolling sideways */
  .ia-areas, .ia-cols { grid-template-columns: 1fr; }
  /* Stacked cards need one straight arrow, not a three-way branch */
  .ia-fork { grid-template-columns: 1fr; --ia-fork-stem: 50%; }
  .ia-fork__bar { display: none; }
  .ia-fork__drop:nth-child(2) { grid-column: 1; }
  .ia-fork__drop:nth-child(3), .ia-fork__drop:nth-child(4) { display: none; }
  .ia-fork__drop::before { top: 0; height: 30px; }
  .ia-cols { gap: 28px; }
  .cs-outcome { grid-template-columns: 1fr 1fr; }
  .cs-steps { grid-template-columns: 1fr; }
  .cs-steps p { min-height: 0; }
}
@media (max-width: 560px) {
  .cs-topbar__inner { flex-direction: column; gap: 12px; align-items: flex-start; }
  .cs-outcome { grid-template-columns: 1fr; }
  .cs-tab { min-width: 45%; }
}