:root {
  --sv-ink: #07111f;
  --sv-navy: #0d2138;
  --sv-cyan: #16b8d9;
  --sv-teal: #0f766e;
  --sv-gold: #e0a93f;
  --sv-gold-soft: #f4d58a;
  --sv-paper: #f7fbfc;
  --sv-cream: #fdf7ec;
  --sv-line: #e6ebf1;
  --sv-muted: #475569;
}

.sv-page, .sv-page * { box-sizing: border-box; }
.sv-page { margin: 0; background: #fff; color: #0f172a; font-family: Inter, ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.sv-page main { overflow: hidden; }
.sv-shell { width: min(1220px, calc(100% - 52px)); margin: 0 auto; }
.sv-section { padding: 86px 0; }
.sv-kicker { margin: 0; color: #9a6a04; font-size: 11px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.sv-title { margin: 14px 0 0; color: var(--sv-ink); font-size: clamp(34px, 4.3vw, 54px); font-weight: 900; line-height: 1.04; letter-spacing: -.045em; }
.sv-title { text-wrap: balance; }
.sv-copy { margin: 18px 0 0; max-width: 650px; color: var(--sv-muted); font-size: 17px; line-height: 1.65; }
.sv-actions { display: flex; gap: 13px; flex-wrap: wrap; margin-top: 30px; }
.sv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 24px; border-radius: 13px; font-size: 15px; font-weight: 850; text-decoration: none; transition: transform .18s, box-shadow .18s, background .18s, border-color .18s; }
.sv-btn:hover { transform: translateY(-2px); }
.sv-btn--gold { background: var(--sv-gold); color: var(--sv-ink); box-shadow: 0 14px 30px rgba(224,169,63,.3); }
.sv-btn--cyan { background: var(--sv-cyan); color: #fff; box-shadow: 0 14px 30px rgba(22,184,217,.28); }
.sv-btn--ghost { border: 1px solid #d8e0ea; background: #fff; color: var(--sv-ink); box-shadow: 0 6px 16px rgba(15,23,42,.05); }
.sv-btn--dark { border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: #fff; }

.sv-hero { position: relative; padding: 70px 0 82px; background: radial-gradient(55% 80% at 92% 8%, rgba(224,169,63,.16), transparent 64%), linear-gradient(180deg,#fff,var(--sv-paper)); }
.sv-hero__grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 54px; align-items: center; }
.sv-hero h1 { margin: 21px 0 0; color: var(--sv-ink); font-size: clamp(44px, 5.2vw, 68px); font-weight: 900; line-height: .99; letter-spacing: -.052em; }
.sv-hero__lead { margin: 24px 0 0; max-width: 600px; color: var(--sv-muted); font-size: 18.5px; line-height: 1.62; }
.sv-pill { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px; border: 1px solid rgba(224,169,63,.4); border-radius: 999px; background: rgba(224,169,63,.08); color: #9a6a04; font-size: 11px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.sv-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sv-gold); }
/* Services hero: two-path flowchart diagram */
.sv-paths { position: relative; min-height: 520px; display: flex; flex-direction: column; align-items: center; padding-top: 4px; }
.sv-paths__origin { position: relative; z-index: 2; width: min(300px, 88%); padding: 22px 24px; border-radius: 18px; border: 1px solid rgba(15,23,42,.1); background: #fff; box-shadow: 0 18px 40px rgba(7,17,31,.12); text-align: center; }
.sv-paths__origin-label { display: block; color: #9a6a04; font-size: 10.5px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.sv-paths__origin-text { margin: 10px 0 0; color: var(--sv-ink); font-size: 17px; font-weight: 800; letter-spacing: -.02em; line-height: 1.32; }
.sv-paths__stem { width: 2px; height: 40px; background: linear-gradient(180deg, rgba(15,23,42,.2), rgba(15,23,42,.32)); }
.sv-paths__connector { position: relative; width: min(500px, 96%); height: 2px; margin-bottom: 40px; background: rgba(15,23,42,.2); }
.sv-paths__connector::before, .sv-paths__connector::after { content: ""; position: absolute; top: 0; width: 2px; height: 40px; background: rgba(15,23,42,.2); }
.sv-paths__connector::before { left: 25%; }
.sv-paths__connector::after { left: 75%; }
.sv-paths__origin { opacity: 0; transform: translateY(-10px) scale(.94); }
.sv-paths.is-visible .sv-paths__origin { animation: sv-pop .5s cubic-bezier(.2,.8,.2,1) .05s forwards; }
.sv-paths__stem { transform: scaleY(0); transform-origin: top; }
.sv-paths.is-visible .sv-paths__stem { animation: sv-grow-v .3s ease-out .5s forwards; }
.sv-paths__connector { transform: scaleX(0); transform-origin: left; }
.sv-paths.is-visible .sv-paths__connector { animation: sv-grow-h .4s ease-out .8s forwards; }
.sv-paths__connector::before, .sv-paths__connector::after { transform: translateX(-50%) scaleY(0); transform-origin: top; }.sv-paths.is-visible .sv-paths__connector::before { animation: sv-grow-v-x .3s ease-out 1.2s forwards; }
.sv-paths.is-visible .sv-paths__connector::after { animation: sv-grow-v-x .3s ease-out 1.2s forwards; }
.sv-path { opacity: 0; transform: translateY(14px); }
.sv-paths.is-visible .sv-path { animation: sv-fade-up .45s ease-out forwards; }
.sv-paths.is-visible .sv-path--a { animation-delay: 1.5s; }
.sv-paths.is-visible .sv-path--b { animation-delay: 1.6s; }
@keyframes sv-pop { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes sv-grow-v { to { transform: scaleY(1); } }
@keyframes sv-grow-v-x { to { transform: translateX(-50%) scaleY(1); } }
@keyframes sv-grow-h { to { transform: scaleX(1); } }
@keyframes sv-fade-up { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .sv-paths__origin, .sv-paths__stem, .sv-paths__connector, .sv-paths__connector::before, .sv-paths__connector::after, .sv-path {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
}
.sv-paths__branches { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; width: min(500px, 96%); margin-top: 0; }
.sv-path { padding: 22px; border-radius: 18px; border: 1px solid var(--sv-line); background: #fff; box-shadow: 0 14px 32px rgba(15,23,42,.08); transition: transform .2s ease; }
.sv-path:hover { transform: translateY(-4px); }
.sv-path--b { background: var(--sv-ink); border-color: rgba(255,255,255,.12); }
.sv-path__tag { display: block; color: #9a6a04; font-size: 10px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.sv-path--b .sv-path__tag { color: var(--sv-gold-soft); }
.sv-path h3 { margin: 10px 0 0; color: var(--sv-ink); font-size: 20px; letter-spacing: -.03em; }
.sv-path--b h3 { color: #fff; }
.sv-path p { margin: 9px 0 0; color: #64748b; font-size: 13px; line-height: 1.5; }
.sv-path--b p { color: rgba(226,242,247,.72); }

/* Portfolio Design hero: case-study anatomy (illustrative — no client work needed yet) */
.sv-anatomy { position: relative; min-height: 520px; display: flex; align-items: center; justify-content: center; }
.sv-anatomy__glow { position: absolute; inset: -6% 6% -6% 14%; border-radius: 40px; background: radial-gradient(60% 60% at 30% 10%, rgba(22,184,217,.24), transparent 70%), radial-gradient(50% 50% at 90% 90%, rgba(224,169,63,.2), transparent 70%); filter: blur(6px); z-index: 0; animation: sv-glow-pulse 5s ease-in-out infinite; }
.sv-anatomy__doc { position: relative; z-index: 1; width: 92%; padding: 34px 32px; border-radius: 24px; background: #fff; border: 1px solid rgba(15,23,42,.08); box-shadow: 0 40px 90px rgba(7,17,31,.22); overflow: hidden; }
.sv-anatomy__doc::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, var(--sv-cyan), var(--sv-gold), var(--sv-cyan)); background-size: 200% 100%; animation: sv-bar-flow 4s linear infinite; }
.sv-anatomy__tag { display: inline-block; color: #9a6a04; font-size: 10.5px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.sv-anatomy__title { margin: 14px 0 0; color: var(--sv-ink); font-size: 23px; font-weight: 900; line-height: 1.16; letter-spacing: -.03em; }
.sv-anatomy__section { display: flex; gap: 16px; align-items: flex-start; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--sv-line); }
.sv-anatomy__num { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-size: 13px; font-weight: 900; animation: sv-num-pulse 2.6s ease-in-out infinite; }
.sv-anatomy__num--a { background: rgba(22,184,217,.13); color: var(--sv-teal); box-shadow: 0 0 0 rgba(22,184,217,.4); animation-name: sv-num-pulse-a; }
.sv-anatomy__num--b { background: rgba(224,169,63,.16); color: #9a6a04; animation-name: sv-num-pulse-b; }
.sv-anatomy__num--c { background: rgba(15,23,42,.08); color: var(--sv-ink); animation-name: sv-num-pulse-c; }
.sv-anatomy__section b { display: block; color: var(--sv-ink); font-size: 14.5px; font-weight: 850; letter-spacing: -.01em; }
.sv-anatomy__section p { margin: 6px 0 0; color: var(--sv-muted); font-size: 14px; line-height: 1.55; }
.sv-anatomy__doc, .sv-anatomy__tag, .sv-anatomy__title, .sv-anatomy__section { opacity: 0; }
.sv-anatomy__doc { transform: translateY(14px) scale(.98); }
.sv-anatomy__section { transform: translateX(-10px); }
.sv-anatomy.is-visible .sv-anatomy__doc { animation: sv-doc-in .5s cubic-bezier(.2,.8,.2,1) forwards; }
.sv-anatomy.is-visible .sv-anatomy__tag { animation: sv-fade-up .4s ease-out .3s forwards; }
.sv-anatomy.is-visible .sv-anatomy__title { animation: sv-fade-up .4s ease-out .4s forwards; }
.sv-anatomy.is-visible .sv-anatomy__section { animation: sv-slide-in .4s ease-out forwards; }
.sv-anatomy.is-visible .sv-anatomy__section:nth-of-type(1) { animation-delay: .55s; }
.sv-anatomy.is-visible .sv-anatomy__section:nth-of-type(2) { animation-delay: .68s; }
.sv-anatomy.is-visible .sv-anatomy__section:nth-of-type(3) { animation-delay: .81s; }
@keyframes sv-doc-in { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes sv-slide-in { to { opacity: 1; transform: translateX(0); } }
@keyframes sv-glow-pulse { 0%, 100% { opacity: .85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes sv-bar-flow { to { background-position: -200% 0; } }
@keyframes sv-num-pulse-a { 0%, 100% { box-shadow: 0 0 0 0 rgba(22,184,217,.35); } 50% { box-shadow: 0 0 0 7px rgba(22,184,217,0); } }
@keyframes sv-num-pulse-b { 0%, 100% { box-shadow: 0 0 0 0 rgba(224,169,63,.4); } 50% { box-shadow: 0 0 0 7px rgba(224,169,63,0); } }
@keyframes sv-num-pulse-c { 0%, 100% { box-shadow: 0 0 0 0 rgba(15,23,42,.25); } 50% { box-shadow: 0 0 0 7px rgba(15,23,42,0); } }
@media (prefers-reduced-motion: reduce) {
  .sv-anatomy__glow, .sv-anatomy__doc, .sv-anatomy__tag, .sv-anatomy__title, .sv-anatomy__section, .sv-anatomy__doc::before, .sv-anatomy__num {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
}




.sv-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; margin-top: 42px; }
.sv-card { display: flex; flex-direction: column; padding: 30px; border: 1px solid var(--sv-line); border-radius: 22px; background: #fff; color: inherit; text-decoration: none; box-shadow: 0 2px 3px rgba(15,23,42,.03); transition: transform .2s, box-shadow .2s, border-color .2s; }
.sv-card:hover { transform: translateY(-4px); border-color: rgba(22,184,217,.38); box-shadow: 0 22px 48px rgba(15,23,42,.1); }
.sv-card__tag { color: #9a6a04; font-size: 10.5px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.sv-card h2, .sv-card h3 { margin: 14px 0 0; color: var(--sv-ink); font-size: 27px; font-weight: 900; line-height: 1.08; letter-spacing: -.035em; }
.sv-card p { margin: 14px 0 0; color: var(--sv-muted); font-size: 15px; line-height: 1.62; }
.sv-card__link { margin-top: 24px; color: var(--sv-teal); font-size: 14px; font-weight: 850; }

.sv-dark { position: relative; background: radial-gradient(65% 90% at 100% 0%,rgba(22,184,217,.14),transparent 58%), linear-gradient(155deg,var(--sv-ink),var(--sv-navy)); color: #fff; }
.sv-dark .sv-kicker { color: var(--sv-gold-soft); }
.sv-dark .sv-title { color: #fff; }
.sv-dark .sv-copy { color: rgba(226,242,247,.72); }
.sv-capabilities { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 38px; }
.sv-capability { padding: 22px; border: 1px solid rgba(255,255,255,.1); border-radius: 17px; background: rgba(255,255,255,.05); }
.sv-capability strong { display: block; color: #fff; font-size: 15px; }
.sv-capability span { display: block; margin-top: 7px; color: rgba(226,242,247,.82); font-size: 13.5px; line-height: 1.55; }

.sv-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-top: 38px; }
.sv-step { padding: 24px; border: 1px solid var(--sv-line); border-radius: 18px; background: #fff; }
.sv-step b { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: rgba(22,184,217,.1); color: var(--sv-teal); }
.sv-step h3 { margin: 17px 0 0; color: var(--sv-ink); font-size: 17px; }
.sv-step p { margin: 8px 0 0; color: var(--sv-muted); font-size: 13.5px; line-height: 1.55; }

.sv-price-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; margin-top: 42px; }
.sv-price { position: relative; display: flex; flex-direction: column; padding: 32px; border: 1px solid var(--sv-line); border-radius: 24px; background: #fff; box-shadow: 0 16px 38px rgba(15,23,42,.07); }
.sv-price--featured { border-color: rgba(22,184,217,.44); box-shadow: 0 22px 52px rgba(22,184,217,.13); }
.sv-price__eyebrow { color: #9a6a04; font-size: 10.5px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.sv-price h3 { margin: 12px 0 0; color: var(--sv-ink); font-size: 28px; letter-spacing: -.035em; }
.sv-price__amount { margin: 18px 0 0; color: var(--sv-ink); font-size: 38px; font-weight: 900; letter-spacing: -.04em; }
.sv-price__amount small { display: inline-block; margin-left: 8px; font-size: 13px; font-weight: 700; color: #64748b; letter-spacing: 0; }
.sv-price > p { color: var(--sv-muted); font-size: 14.5px; line-height: 1.6; }
.sv-list { display: grid; gap: 10px; margin: 22px 0 0; padding: 20px 0 0; border-top: 1px solid var(--sv-line); list-style: none; }
.sv-list li { position: relative; padding-left: 25px; color: #334155; font-size: 14px; line-height: 1.45; }
.sv-list li::before { content: "✓"; position: absolute; left: 0; color: var(--sv-teal); font-weight: 900; }
.sv-price .sv-actions { margin-top: auto; padding-top: 26px; }
.sv-note { margin-top: 28px; padding: 18px 20px; border: 1px solid rgba(224,169,63,.3); border-radius: 15px; background: rgba(224,169,63,.08); color: #5f4a18; font-size: 13.5px; line-height: 1.55; }

.sv-cta { padding: 72px 0 96px; background: linear-gradient(180deg,#fff,var(--sv-paper)); }
.sv-cta__box { padding: 54px; border-radius: 28px; background: radial-gradient(55% 100% at 90% 0%,rgba(224,169,63,.18),transparent 60%), var(--sv-ink); text-align: center; }
.sv-cta__box h2 { margin: 12px auto 0; max-width: 760px; color: #fff; font-size: clamp(34px,4.2vw,52px); line-height: 1.04; letter-spacing: -.045em; }
.sv-cta__box p { margin: 18px auto 0; max-width: 640px; color: rgba(226,242,247,.72); font-size: 16.5px; line-height: 1.62; }
.sv-cta__box .sv-actions { justify-content: center; }

/* Content must remain visible even when scripts load slowly, are blocked,
   or a full-page capture renders sections before they enter the viewport. */
[data-sv-reveal] { opacity: 1; transform: none; }

@media (max-width: 980px) {
  .sv-hero__grid, .sv-grid { grid-template-columns: 1fr; }
  .sv-paths, .sv-evidence { width: min(620px,100%); margin-top: 30px; }
  .sv-capabilities, .sv-steps { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 640px) {
  .sv-shell { width: min(100% - 32px, 1220px); }
  .sv-section { padding: 68px 0; }
  .sv-hero { padding: 54px 0 68px; }
  .sv-hero__grid { gap: 34px; }
  .sv-hero h1 { font-size: 38px; }
  .sv-hero__lead { font-size: 16.5px; }
  .sv-paths__branches { grid-template-columns: 1fr; }
  .sv-evidence { min-height: 0; }
  .sv-anatomy { min-height: 0; padding: 30px 0; }
  .sv-anatomy__doc { width: 100%; padding: 26px 22px; }
  .sv-capabilities, .sv-steps, .sv-price-grid { grid-template-columns: 1fr; }
  .sv-card, .sv-price { padding: 24px; }
  .sv-price__amount small { display: block; margin: 5px 0 0; }
  .sv-cta__box { padding: 40px 24px; }
  .sv-cta { padding-top: 52px; }
  .sv-actions .sv-btn { width: 100%; }
}