@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* One type family and one heading hierarchy across the combined portfolio. */
html.site-typography {
  --font-heading: 'Manrope', sans-serif;
  --font-body: 'Manrope', sans-serif;
}

html.site-typography body,
html.site-typography body :is(div, h1, h2, h3, h4, h5, h6, p, span, a, button, label, li, small, strong, em, b, blockquote, figcaption, time, input, textarea, select) {
  font-family: 'Manrope', sans-serif !important;
}

html.site-typography body h1 {
  font-weight: 400 !important;
  letter-spacing: -.04em !important;
}

html.site-typography body h1.ty-hero:not(.avatar-hero__title):not(.about-hero__title),
html.site-typography body h1[data-r="ct-hero-title"] {
  font-size: clamp(44px, 5.2vw, 76px) !important;
  line-height: 1.07 !important;
  font-weight: 400 !important;
  letter-spacing: -.04em !important;
  text-transform: none !important;
  white-space: normal !important;
}

html.site-typography body h2 {
  font-size: clamp(30px, 3.4vw, 46px) !important;
  line-height: 1.08 !important;
  font-weight: 600 !important;
  letter-spacing: -.025em !important;
  text-transform: none !important;
}

html.site-typography body h3 {
  font-size: 24px !important;
  line-height: 1.28 !important;
  font-weight: 600 !important;
  letter-spacing: -.02em !important;
  text-transform: none !important;
}

html.site-typography body h4 {
  font-size: 20px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  letter-spacing: -.02em !important;
  text-transform: none !important;
}

html.site-typography body .cs-camptitle {
  font-size: 24px !important;
  line-height: 1.16 !important;
  font-weight: 600 !important;
  letter-spacing: -.025em !important;
}

html.site-typography body .cs-blocktitle {
  font-size: 20px !important;
  line-height: 1.24 !important;
  font-weight: 600 !important;
  letter-spacing: -.02em !important;
}

html.site-typography body .ty-ctitle {
  font-size: 18px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  letter-spacing: -.015em !important;
}

html.site-typography body .ty-label {
  font-weight: 600 !important;
  letter-spacing: .12em !important;
}

/* Marketing case heroes use dark photography; keep their copy and nav legible. */
html.marketing-case [data-r="cs-herotext"] h1,
html.marketing-case [data-r="cs-herotext"] h1 span,
html.marketing-case [data-r="wh-herotext"] h1,
html.marketing-case [data-r="wh-herotext"] h1 span {
  color: #f7f9ff !important;
}

html.marketing-case [data-r="cs-herotext"] [data-r="herocred"],
html.marketing-case [data-r="wh-herotext"] [data-r="herocred"] {
  color: #dce6f5 !important;
}

html.marketing-case :is(section[style*="background:#111111"], section[style*="background: rgb(17, 17, 17)"]) :is(h2.ty-stitle, h3.cs-blocktitle, h3.cs-camptitle) {
  color: #f7f9ff !important;
}

html.marketing-case :is(section[style*="background:#111111"], section[style*="background: rgb(17, 17, 17)"]) p.cs-body {
  color: #dce6f5 !important;
}

html.marketing-case header > div:first-child a,
html.marketing-case header > div:first-child a div,
html.marketing-case header > div:first-child button,
html.marketing-case header > div:first-child [data-r="cs-role"] {
  color: #f7f9ff !important;
}

html.marketing-case header > div:first-child svg path {
  fill: #f7f9ff !important;
}

html.marketing-case header > div:first-child [data-r="cs-sep-m"] {
  background: #aebfda !important;
}

@media (max-width: 767px) {
  html.site-typography body h1.ty-hero:not(.avatar-hero__title):not(.about-hero__title),
  html.site-typography body h1[data-r="ct-hero-title"] {
    font-size: clamp(38px, 9vw, 50px) !important;
    line-height: 1.1 !important;
  }

  html.site-typography body h2 {
    font-size: clamp(30px, 7vw, 36px) !important;
    line-height: 1.15 !important;
  }

  html.site-typography body .ty-ctitle {
    font-size: 21px !important;
    line-height: 1.28 !important;
  }

  html.site-typography body h3,
  html.site-typography body .cs-camptitle {
    font-size: 21px !important;
  }
}

/* Shared Product / Marketing transition on the home and Work pages. */
.work-switch { position: relative; isolation: isolate; }
.work-switch__thumb {
  position: absolute;
  z-index: 0;
  top: 5px;
  bottom: 5px;
  left: 0;
  width: var(--work-thumb-width, 124px);
  border-radius: 999px;
  background: #17345c;
  box-shadow: var(--site-shadow-sm);
  transform: translateX(var(--work-thumb-left, 5px));
  pointer-events: none;
}
.work-switch.is-ready .work-switch__thumb {
  transition: transform .82s cubic-bezier(.45, 0, .25, 1), width .82s cubic-bezier(.45, 0, .25, 1);
}
.work-switch button,
.work-switch button[aria-selected="true"] {
  position: relative;
  z-index: 1;
  background: transparent;
  box-shadow: none;
  transition: color .4s ease .18s;
}
.work-switch button[aria-selected="true"] { color: #fff; }
.work-panels { position: relative; }
.work-panels.is-switching { overflow: hidden; }
.work-panels.is-switching [data-work-panel] { pointer-events: none; }
.work-panels.is-switching [data-work-panel].is-leaving {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
}
.work-panels.is-switching [data-work-panel].is-entering {
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .work-switch.is-ready .work-switch__thumb,
  .work-switch button { transition: none; }
}

/* Legacy eToro/William Hill page rules must follow the same section hierarchy. */
html.site-typography.marketing-case body h2.ty-stitle {
  font-size:clamp(30px,3.4vw,46px) !important;
  line-height:1.08 !important;
}
@media (max-width:767px) {
  html.site-typography.marketing-case body h2.ty-stitle {
    font-size:clamp(30px,7vw,36px) !important;
    line-height:1.15 !important;
  }
}
html.site-typography :is(a,button,input,select,textarea):focus-visible {
  outline:3px solid #17345c;
  outline-offset:4px;
  box-shadow:0 0 0 7px #fff;
}

/* Translucent navy action backgrounds; foregrounds stay fully opaque. */
html.site-typography body :is(
  .product-case__intro a,
  [data-r$="-farrow"],
  [data-r$="-farrow-m"],
  [data-r="camp-arrow-prev"],
  [data-r="camp-arrow-next"],
  [data-r="camp-gallery-btn"],
  a[style*="background:#17345" i],
  button[style*="background:#17345" i],
  a[style*="background: #17345" i],
  button[style*="background: #17345" i],
  a[style*="background: rgb(23, 52, 92)"],
  button[style*="background: rgb(23, 52, 92)"]
) {
  background-color:rgba(23,52,92,.5) !important;
}

html.site-typography body .selected-work-cta a {
  background-color:#17345c !important;
}

/* Gallery navigation is a plain arrow in the logo navy at every breakpoint. */
html.site-typography body button[aria-label]:is(.arrow-hover,.etoro-arrow,.wh-arrow,[data-r$="-farrow"],[data-r$="-farrow-m"],[data-r="camp-arrow-prev"],[data-r="camp-arrow-next"]){
 background:transparent!important;border:0!important;border-radius:0!important;
 color:#17345C!important;opacity:1!important;box-shadow:none!important;
 padding:0!important;appearance:none;
}

/* ============================================================
   Type scale normalization (2026-10-14)
   Body 16 · secondary 14 · lead 18 · labels 12 · card title 18 · H3 24 · H2 46 · H1 75
   ============================================================ */

/* Body copy: 15px -> 16px */
html.site-typography body p[style*="font-size:15px"],
html.site-typography body p.cs-body,
html.site-typography body p.ty-body:not([style*="font-size:17px"]) {
  font-size: 16px !important;
  line-height: 1.6 !important;
}

/* Secondary copy: 12.5px / 13px -> 14px */
html.site-typography body p[style*="font-size:13px"],
html.site-typography body p[style*="font-size:12.5px"] {
  font-size: 14px !important;
  line-height: 1.55 !important;
}

/* Lead / intro paragraphs: 17px -> 18px, capped at a readable line length */
html.site-typography body p.ty-body[style*="font-size:17px"],
html.site-typography body .case-prototype__copy p,
html.site-typography body .case-heading p {
  font-size: 18px !important;
  line-height: 1.6 !important;
  max-width: 640px !important;
}

/* Card descriptions: one size everywhere (home 16 / More projects 15 / Work 13 -> 15) */
html.site-typography body .ty-cdesc,
html.site-typography body .home-work-rail [data-r="card-desc"] {
  font-size: 15px !important;
  line-height: 1.5 !important;
}

/* Uppercase labels: 11px -> 12px and AA contrast */
html.site-typography body .ty-label {
  font-size: 12px !important;
  line-height: 16px !important;
}
html.site-typography body .ty-label[style*="#65758B"],
html.site-typography body .ty-label[style*="#65758b"] {
  color: #56657A !important;
}

@media (max-width: 767px) {
  html.site-typography body p[style*="font-size:13px"],
  html.site-typography body p[style*="font-size:12.5px"] { font-size: 14px !important; }
  html.site-typography body p.ty-body[style*="font-size:17px"],
  html.site-typography body .case-prototype__copy p,
  html.site-typography body .case-heading p { font-size: 17px !important; }
}

/* Line breaks: balanced headings and no single-word last lines (orphans) */
html.site-typography body :is(h1, h2, h3, h4, .ty-ctitle, .cs-camptitle, .cs-blocktitle) { text-wrap: balance; }
html.site-typography body :is(p, li, dd, .ty-cdesc) { text-wrap: pretty; }

/* Card descriptions wrap naturally; reserve two lines so titles stay aligned across a row */
@media (max-width: 1279px) {
  html.site-typography body .ty-cdesc,
  html.site-typography body .home-work-rail [data-r="card-desc"] { min-height: 3em; }
}

/* Hero titles: a little more letter-spacing and line-height (was -.04/-.045em, 1.07) */
html.site-typography body .avatar-hero .avatar-hero__title,
html.site-typography body .about-hero .about-hero__title,
html.site-typography body h1.ty-hero.ty-hero.ty-hero,
html.site-typography body h1[data-r="ct-hero-title"][data-r],
html.site-typography body section.project-banner .project-banner__title {
  letter-spacing: -.02em !important;
  line-height: 1.15 !important;
}

/* Soft elevation shared across the portfolio. Focus rings remain unchanged. */
:root {
  --site-shadow-sm: 0 2px 8px rgba(23, 52, 92, .04);
  --site-shadow-md: 0 5px 18px rgba(23, 52, 92, .055);
  --site-shadow-lg: 0 8px 26px rgba(23, 52, 92, .075);
  --site-shadow-modal: 0 12px 36px rgba(8, 17, 31, .14);
}

/* Portfolio canvas: almost white with a cool undertone. */
:root { --site-bg: #FAFBFD; }