@font-face { font-family: "FiraGO"; src: url("../fonts/firago-georgian.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

  /* TBC Contractica CAPS — header font */
  @font-face { font-family: "TBC Contractica Caps"; src: url("../fonts/TBCContracticaCAPS-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; ascent-override: 98%; descent-override: 22%; }
  @font-face { font-family: "TBC Contractica Caps"; src: url("../fonts/TBCContracticaCAPS-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; ascent-override: 98%; descent-override: 22%; }
  @font-face { font-family: "TBC Contractica Caps"; src: url("../fonts/TBCContracticaCAPS-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; ascent-override: 98%; descent-override: 22%; }
  @font-face { font-family: "TBC Contractica Caps"; src: url("../fonts/TBCContracticaCAPS-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; ascent-override: 98%; descent-override: 22%; }

  :root {
    --black: #141414;
    --white: #ffffff;
    --gray: #e6e7e8;
    --blue-light: #abcee1;
    --blue: #4083c2;
    --navy: #0c273c;
    --h: 78px;
    --h-sm: 58px;
    --ease: cubic-bezier(.4,0,.2,1);
    --font: "Noto Sans Georgian", system-ui, -apple-system, sans-serif;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body { overflow-x: hidden;overflow-x:clip; max-width: 100%; }
  body { font-family: var(--font); color: var(--navy); background: #fff; }
  a { color: inherit; text-decoration: none; }
  ul { list-style: none; }
  button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

  /* ============================ HEADER ============================ */
  .site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    height: var(--h); color: #fff;
    font-family: "TBC Contractica Caps", var(--font);
    transition: height .4s var(--ease);
  }
  .site-header::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: rgba(255,255,255,.7);
    backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid rgba(12,39,60,.07);
    opacity: 0; transition: opacity .4s var(--ease);
  }
  .site-header.scrolled { height: var(--h-sm); color: var(--navy); }
  .site-header.scrolled::after { opacity: 1; }
  /* light pages: solid look but full-size, shrinks on scroll like the hero header */
  .site-header--solid { color: var(--navy); }
  .site-header--solid:not(.scrolled) { border-bottom: 1px solid #00000010; }
  .site-header--solid .logo__img { filter: brightness(1) invert(0); }

  .bar { height: 100%; width: 100%; padding: 0 40px; display: flex; align-items: center; gap: 40px; }

  .logo { display: flex; align-items: center; }
  .logo__img { height: 50px; width: auto; display: block; filter: brightness(0) invert(1);
               transition: height .4s var(--ease), filter .4s var(--ease); }
  .scrolled .logo__img { height: 44px; filter: brightness(1) invert(0); }

  .nav { margin-right: auto; margin-left: clamp(28px,4vw,68px); }
  .nav ul { display: flex; align-items: center; gap: clamp(24px,2vw,32px); }
  .nav a { font-size: 14px; font-weight: 500; letter-spacing: .01em; opacity: .9;
           transition: opacity .25s var(--ease), font-size .4s var(--ease); }
  .nav a:hover, .nav a[aria-current="page"] { opacity: 1; }
  .scrolled .nav a { font-size: 13px; }

  .btn { display: inline-flex; align-items: center; gap: 8px;
         padding: 11px 22px; border: 1px solid currentColor; border-radius: 10px;
         font-size: 14px; font-weight: 500; letter-spacing: .01em; white-space: nowrap; opacity: .95;
         transition: padding .4s var(--ease), font-size .4s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease); }
  .btn__arrow { width: 13px; height: 13px; flex: none; transition: color .25s var(--ease); }
  .btn:hover { background: rgba(255,255,255,.14); }
  .scrolled .btn { padding: 8px 16px; font-size: 12.5px; }
  .scrolled .btn, .site-header--solid .btn { background: var(--blue-light); border-color: var(--blue-light); color: var(--navy); }
  .scrolled .btn .btn__arrow, .site-header--solid .btn .btn__arrow { color: var(--blue); }
  .scrolled .btn:hover, .site-header--solid .btn:hover { background: #9bc6dd; border-color: #9bc6dd; }

  .lang { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 500; transition: font-size .4s var(--ease); }
  .lang button { opacity: .45; letter-spacing: .04em; transition: opacity .25s var(--ease); }
  .lang button[aria-pressed="true"] { opacity: 1; }
  .lang span.sep { opacity: .35; }
  .scrolled .lang { font-size: 12px; }

  .burger { display: none; width: 38px; height: 38px; }
  .burger span { display: block; width: 20px; height: 1.5px; margin: 5px auto; background: currentColor; transition: .3s var(--ease); }
  body.open .burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  body.open .burger span:nth-child(2) { opacity: 0; }
  body.open .burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  @media (max-width: 860px) {
    .bar { gap: 16px; padding: 0 22px; }
    .nav { position: fixed; inset: var(--h) 0 auto 0; margin: 0;
           background: rgba(255,255,255,.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
           transform: translateY(-12px); opacity: 0; visibility: hidden; transition: .3s var(--ease); }
    body.open .nav { transform: translateY(0); opacity: 1; visibility: visible; }
    .nav ul { flex-direction: column; gap: 0; padding: 8px 22px 18px; }
    .nav a { color: var(--navy); padding: 14px 0; width: 100%; border-bottom: 1px solid rgba(12,39,60,.08); font-size: 16px; }
    .lang { margin-left: auto; }
    .btn { display: none; }
    .burger { display: block; }
  }

  /* ============================ PROJECT CARD ============================ */
  @property --sc { syntax: "<number>"; inherits: false; initial-value: 1; }
  .pcard { position: relative; overflow: hidden; display: block; color: #fff; background: var(--navy); aspect-ratio: 4 / 3; border-radius: 12px; }
  .pcard__img { position: absolute; top: -8%; left: 0; width: 100%; height: 116%; object-fit: cover; will-change: transform;
    transform: translate3d(0, var(--py, 0px), 0) scale(var(--sc, 1)); transition: --sc .6s var(--ease); }
  .pcard:hover .pcard__img { --sc: 1.07; }
  /* frosted, transparent overlay rising from the bottom */
  .pcard::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 66%; z-index: 1; pointer-events: none;
    background-color: rgba(8,20,32,.4);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    -webkit-mask-image: linear-gradient(to top, #000 0%, #000 40%, transparent 96%);
            mask-image: linear-gradient(to top, #000 0%, #000 40%, transparent 96%);
    transition: background-color .5s var(--ease), -webkit-backdrop-filter .5s var(--ease), backdrop-filter .5s var(--ease); }
  .pcard:hover::after { background-color: rgba(8,20,32,.74); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
  .pcard__bar { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 2;
    display: flex; align-items: center; gap: 13px; transition: transform .5s var(--ease); }
  .pcard:hover .pcard__bar { transform: translateY(-38px); }
  .pcard__desc { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 2;
    font-size: 12.5px; line-height: 1.4; font-weight: 500; color: rgba(255,255,255,.82);
    opacity: 0; transform: translateY(8px); pointer-events: none;
    transition: opacity .45s var(--ease), transform .5s var(--ease); }
  .pcard:hover .pcard__desc { opacity: 1; transform: translateY(0); }
  .pcard__badge { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex: none;
    border: 1px solid rgba(255,255,255,.45); background: var(--navy); }
  .pcard__badge img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .pcard__badge--mark img { object-fit: contain; padding: 11px; }
  .pcard__meta { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
  .pcard__name { font-family: "TBC Contractica Caps", var(--font); font-weight: 500; font-size: 18px; line-height: 1.12; }
  .pcard__status { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: rgba(255,255,255,.85); }
  .pcard__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--blue-light); }
  .pcard__status--active::before { background: #3dbe78; }   /* green — ongoing */
  .pcard__status--done::before   { background: var(--blue-light); }  /* light blue — finished */

  /* ============================ ARCHIVE PAGE ============================ */
  .archive { min-height: 100vh; padding: calc(var(--h-sm) + 56px) 0 96px; }
  .archive__head { max-width: 1800px; margin: 0 auto 40px; padding: 0 40px; }
  .archive__label { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: #6e7a84; }
  .archive__label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--navy); flex: none; }
  .archive__title { margin-top: 14px; font-family: "TBC Contractica Caps", var(--font);
                    font-weight: 500; font-size: clamp(30px, 4vw, 54px); line-height: 1.08; color: var(--navy); }
  .pgroup { max-width: 1800px; margin: 0 auto; padding: 0 40px; }
  .pgroup + .pgroup { margin-top: 56px; }
  .pgroup__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; }
  .pgroup__title { font-family: "TBC Contractica Caps", var(--font); font-weight: 500; font-size: clamp(20px, 2.4vw, 30px); color: var(--navy); }
  .pgroup__count { font-size: 14px; color: #6e7a84; }
  .pgrid { max-width: 1800px; margin: 0 auto; padding: 0 40px; display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); }
  @media (max-width: 980px) { .pgrid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 600px) { .pgrid { grid-template-columns: 1fr; } }
  .pfilter { max-width: 1800px; margin: 0 auto 26px; padding: 0 40px; display: flex; gap: 8px; }
  .pfilter button { font-size: 13px; font-weight: 500; padding: 8px 18px; border: 1px solid var(--gray); border-radius: 5px; color: var(--navy); transition: .25s var(--ease); }
  .pfilter button:hover { border-color: #b9c4cd; }
  .pfilter button[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
  .pcard.is-hidden { display: none; }

  /* nav dropdown (media) */
  .nav__has { position: relative; }
  .nav__has > a { display: inline-flex; align-items: center; gap: 5px; }
  .nav__caret { width: 11px; height: 11px; transition: transform .25s var(--ease); }
  .nav__has:hover .nav__caret, .nav__has:focus-within .nav__caret { transform: rotate(180deg); }
  .nav__has::after { content: ""; position: absolute; left: -10px; right: -10px; top: 100%; height: 22px; }
  .nav__drop { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
    min-width: 232px; margin-top: 16px; padding: 8px; list-style: none;
    background: #fff; border-radius: 14px; border: 1px solid rgba(12,39,60,.08); box-shadow: 0 26px 64px rgba(8,22,36,.2);
    display: flex; flex-direction: column; gap: 2px; opacity: 0; visibility: hidden; z-index: 60;
    transition: opacity .25s var(--ease), transform .25s var(--ease); }
  .nav__has:hover .nav__drop, .nav__has:focus-within .nav__drop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
  .nav__drop a { display: block; padding: 11px 14px; border-radius: 9px; font-size: 14px; font-weight: 500; color: var(--navy); opacity: .82; white-space: nowrap; transition: background .2s var(--ease), opacity .2s var(--ease); }
  .nav__drop a:hover { background: rgba(12,39,60,.06); opacity: 1; }

  /* reels archive grid */
  .rgrid { max-width: 1800px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 26px; }
  .rcard { position: relative; width: auto; aspect-ratio: 10 / 16; border-radius: 18px; overflow: hidden; background: #0a1f30;
    box-shadow: 0 20px 54px rgba(8,22,36,.4); -webkit-user-drag: none; transition: box-shadow .35s var(--ease), transform .45s var(--ease); }
  .rcard:hover { box-shadow: 0 26px 64px rgba(8,22,36,.55); transform: translateY(-4px); }
  .rcard::before { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
    border: 1px solid rgba(255,255,255,.3); box-shadow: inset 0 1px 1px rgba(255,255,255,.38), inset 0 0 22px rgba(255,255,255,.06); transition: border-color .35s var(--ease); }
  .rcard:hover::before { border-color: rgba(255,255,255,.58); }
  .rcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; --sc: 1; scale: var(--sc); transition: scale .6s var(--ease); -webkit-user-drag: none; }
  .rcard:hover .rcard__img { --sc: 1.06; }
  .rcard::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(8,20,32,.12) 0%, rgba(8,20,32,0) 32%, rgba(8,20,32,.58) 100%); }
  .rcard__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2;
    width: 70px; height: 70px; pointer-events: none; transition: transform .3s var(--ease); }
  .rcard:hover .rcard__play { transform: translate(-50%,-50%) scale(1.08); }
  .rcard__play svg { width: 100%; height: 100%; display: block; }
  .rcard__play svg path { transition: fill-opacity .3s var(--ease); }
  .rcard:hover .rcard__play svg path { fill-opacity: .9; }
  .rcard__cap { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 2;
    font-family: "TBC Contractica Caps", var(--font); font-weight: 500; font-size: 18px; line-height: 1.16; color: #fff; text-shadow: 0 2px 18px rgba(8,22,36,.6); }
  @media (max-width: 600px) { .rgrid { grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 0 18px; } .rcard__cap { font-size: 15px; left: 12px; right: 12px; bottom: 12px; } .rcard__play { width: 56px; height: 56px; } }
  /* ===== Mega menu ===== */
  .nav__mega { position: static; }
  .nav__mega > a { display: inline-flex; align-items: center; gap: 5px; }
  .nav__mega.is-open .nav__caret { transform: rotate(180deg); }
  .nav__panel { position: fixed; left: 0; right: 0; top: var(--h); z-index: 55;
    background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid rgba(12,39,60,.08); box-shadow: 0 30px 60px rgba(8,22,36,.13);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s var(--ease); }
  .scrolled .nav__panel { top: var(--h-sm); }
  .nav__mega.is-open .nav__panel { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav__panel a { opacity: 1; }
  .mega { max-width: 1760px; margin: 0 auto; padding: 32px clamp(24px,3.4vw,56px) 38px; color: var(--navy); }
  .mega--proj { display: flex; flex-direction: column; gap: 22px; }
  .mega__cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
  .pmc { position: relative; display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 5; background: #0a1f30; color: #fff; }
  .pmc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
  .pmc:hover img { transform: scale(1.06); }
  .pmc::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,20,32,.1) 0%, rgba(8,20,32,0) 38%, rgba(8,20,32,.82) 100%); }
  .pmc__logo { position: absolute; top: 12px; left: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 4px 14px rgba(8,22,36,.25); }
  .pmc__logo img { position: static; width: 100%; height: 100%; object-fit: cover; }
  .pmc__b { position: absolute; left: 14px; right: 14px; bottom: 13px; z-index: 2; }
  .pmc__name { display: block; font-family: "TBC Contractica Caps", var(--font); font-weight: 500; font-size: 15px; line-height: 1.15; }
  .pmc__loc { display: block; margin-top: 5px; font-family: "FiraGO", var(--font); font-size: 10.5px; letter-spacing: .01em; color: rgba(255,255,255,.82); }
  .mega__foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid rgba(12,39,60,.1); padding-top: 20px; }
  .mega__note { font-size: 13px; color: #5b6770; }
  .mega__note b { color: var(--navy); font-weight: 700; }
  .mega__all { display: inline-flex; align-items: center; gap: 9px; padding: 11px 20px; border-radius: 10px; background: var(--navy); color: #fff; font-family: "TBC Contractica Caps", var(--font); font-size: 13px; transition: background .25s var(--ease); }
  .mega__all:hover { background: #0f3654; }
  .mega__all svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
  .mega__all:hover svg { transform: translateX(3px); }
  .mega--media { display: grid; grid-template-columns: 25% minmax(0,1fr); gap: 40px; align-items: start; }
  .mcat { display: flex; flex-direction: column; gap: 4px; }
  .mcat__h { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #9aa4ac; margin-bottom: 8px; padding: 0 16px; }
  .mcat a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 12px; transition: background .2s var(--ease); }
  .mcat a:hover { background: rgba(12,39,60,.06); }
  .mcat a span { font-family: "TBC Contractica Caps", var(--font); font-size: 16px; color: var(--navy); }
  .mcat__arr { width: 14px; height: 14px; flex: none; color: var(--blue); transition: transform .25s var(--ease); }
  .mcat a:hover .mcat__arr { transform: translate(2px,-2px); }
  .mnews { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .ncardh { display: flex; gap: 14px; align-items: center; padding: 8px; border-radius: 12px; transition: background .2s var(--ease); }
  .ncardh:hover { background: rgba(12,39,60,.05); }
  .ncardh__img { flex: none; width: 104px; height: 70px; border-radius: 10px; object-fit: cover; }
  .ncardh__t { min-width: 0; }
  .ncardh__date { display: block; font-size: 12px; color: #8a939b; }
  .ncardh__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 5px; font-size: 14px; line-height: 1.34; color: var(--navy); font-weight: 500; }
  /* header frosted while a mega is open */
  .site-header.header--mega { color: var(--navy); }
  .site-header.header--mega::after { opacity: 1; }
  .site-header.header--mega .logo__img { filter: brightness(1) invert(0); }
  @media (max-width: 860px) {
    .nav { max-height: calc(100dvh - var(--h)); overflow-y: auto; }
    .nav__panel { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
      background: transparent; border: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .mega { padding: 6px 0 14px; max-width: none; }
    .mega--proj { gap: 14px; }
    .mega__cards { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .mega__foot { flex-direction: column; align-items: flex-start; gap: 14px; }
    .mega--media { grid-template-columns: 1fr; gap: 16px; }
    .mnews { grid-template-columns: 1fr; }
    .mcat__h, .mcat a, .ncardh { padding-left: 0; padding-right: 0; }
    .nav__mega .nav__caret { display: none; }
  }
  /* ============================ SITE FOOTER (navy · geometric · unique) ============================ */
  .site-footer {
    position: relative; overflow: hidden; isolation: isolate;
    font-family: var(--font); color: #b9cad8;
    background:
      radial-gradient(135% 90% at 50% -22%, rgba(64,131,194,.22), transparent 56%),
      radial-gradient(70% 60% at 88% 6%, rgba(171,206,225,.10), transparent 60%),
      linear-gradient(180deg, #0c273c 0%, #0a2031 56%, #07151f 100%);
  }
  /* ---- 1. Partner strip (first line — small logos) ---- */
    .sf-partners { position: relative; padding: clamp(20px,2.4vw,30px) 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .sf-partners__row { max-width: 1760px; margin: 0 auto; padding: 0 clamp(24px,3.4vw,56px);
    display: flex; align-items: center; gap: clamp(24px,3vw,48px); }
  .sf-partners__label { flex: none; width: min-content;
    font-family: "TBC Contractica Caps", var(--font); font-size: 13px; font-weight: 500;
    line-height: 1.4; letter-spacing: .02em; color: rgba(255,255,255,.5); }
  .sf-plogos { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; flex-wrap: nowrap;
    justify-content: flex-end; gap: clamp(18px,2.2vw,34px); }
  .sf-plogo { height: 36px; width: auto; object-fit: contain; display: block;
    filter: brightness(0) invert(1); opacity: .72; transition: opacity .3s var(--ease); }
  .sf-plogo:hover { opacity: 1; }
  .sf-plogo--keystone-investments { height: 32px; } .sf-plogo--cepi { height: 40px; }
  @media (max-width: 980px) { .sf-plogos { flex-wrap: wrap; gap: 22px 30px; }
    .sf-plogo { height: 32px; } .sf-plogo--keystone-investments { height: 28px; } .sf-plogo--cepi { height: 36px; } }
  @media (max-width: 720px) {
    .sf-partners__row { flex-direction: column; align-items: flex-start; gap: 15px; }
    .sf-partners__label { width: auto; }
    .sf-plogos { justify-content: flex-start; gap: 20px 28px; }
    .sf-plogo { height: 30px; }
    .sf-plogo--keystone-investments { height: 27px; } .sf-plogo--cepi { height: 33px; }
  }

  /* ---- 2. Main grid ---- */
  .sf-main { position: relative; max-width: 1760px; margin: 0 auto;
    padding: clamp(48px,5vw,76px) clamp(24px,3.4vw,56px) clamp(20px,2.5vw,32px);
    display: grid; grid-template-columns: 1.7fr .9fr .9fr 1.25fr; gap: clamp(28px,4vw,56px); }

  .sf-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; max-width: 360px; }
  .sf-brand__logo { height: 58px; width: auto; align-self: flex-start; filter: brightness(0) invert(1); }
  .sf-brand__text { font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.58); }
  .sf-cta { align-self: flex-start; display: inline-flex; align-items: center; gap: 9px;
    padding: 11px 20px; border-radius: 11px; background: var(--blue-light); color: var(--navy);
    font-size: 13.5px; font-weight: 600; letter-spacing: .01em;
    transition: background .25s var(--ease), transform .25s var(--ease); }
  .sf-cta svg { width: 13px; height: 13px; }
  .sf-cta:hover { background: #c3deee; }
  .sf-social { display: flex; gap: 10px; }
  .sf-social a { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.14); border-radius: 11px;
    display: grid; place-items: center; color: rgba(255,255,255,.72);
    transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); }
  .sf-social a:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
  .sf-social svg { width: 17px; height: 17px; }

  .sf-col__h { font-family: "TBC Contractica Caps", var(--font); font-weight: 500;
    font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #fff; margin: 0 0 18px; }
  .sf-links { display: flex; flex-direction: column; gap: 12px; }
  .sf-links a { font-size: 14px; color: rgba(255,255,255,.6); width: fit-content;
    transition: color .25s var(--ease), transform .25s var(--ease); }
  .sf-links a:hover { color: #fff; transform: translateX(3px); }

  .sf-contact { display: flex; flex-direction: column; gap: 15px; }
  /* the flex gap stacks on the heading margin — trim it so the first row lines up with the link columns */
  .sf-contact .sf-col__h { margin-bottom: 3px; }
  .sf-contact__row { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.62); }
  .sf-contact__row svg { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--blue-light); }
  .sf-contact__row a { transition: color .25s var(--ease); }
  .sf-contact__row a:hover { color: #fff; }

  /* ---- 3. Giant signature isotype symbol ---- */
  .sf-symbol { position: relative; z-index: 0; display: flex; justify-content: center;
    margin-top: clamp(-26px,-2.6vw,-14px); margin-bottom: clamp(-48px,-4.4vw,-30px);
    pointer-events: none; user-select: none; }
  .sf-symbol svg { width: min(700px, 92vw); height: auto; display: block;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%); }
  .sf-symbol path { fill: rgba(171,206,225,.05); stroke: rgba(171,206,225,.12); stroke-width: 1.4; }

  /* ---- 4. Bottom bar ---- */
  .sf-bottom { position: relative; z-index: 1; border-top: 1px solid rgba(255,255,255,.08);
    max-width: 1760px; margin: 0 auto; padding: 22px clamp(24px,3.4vw,56px);
    display: flex; align-items: center; justify-content: space-between; gap: 14px 28px; flex-wrap: wrap;
    font-size: 12.5px; color: rgba(255,255,255,.45); }
  .sf-bottom__legal { display: flex; gap: 22px; flex-wrap: wrap; }
  .sf-bottom__legal a { transition: color .25s var(--ease); }
  .sf-bottom__legal a:hover { color: #fff; }
  .sf-top { display: inline-flex; align-items: center; gap: 10px; color: rgba(255,255,255,.6);
    transition: color .25s var(--ease); }
  .sf-top:hover { color: #fff; }
  .sf-top__btn { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%;
    display: grid; place-items: center; color: inherit;
    transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); }
  .sf-top:hover .sf-top__btn { background: var(--blue); border-color: var(--blue); color: #fff; }
  .sf-top__btn svg { width: 16px; height: 16px; }

  /* ---- responsive ---- */
  @media (max-width: 980px) {
    .sf-main { grid-template-columns: 1fr 1fr; gap: 36px 28px; }
    .sf-brand { grid-column: 1 / -1; max-width: 520px; }
  }
  @media (max-width: 560px) {
    .sf-main { grid-template-columns: 1fr; }
    .sf-bottom { flex-direction: column; align-items: flex-start; gap: 18px; }
    .sf-symbol { margin-bottom: clamp(-30px,-7vw,-18px); }
  }
  @media (prefers-reduced-motion: reduce) { .sf-marquee__track { animation: none; } }

  /* video duration badge */
  .rcard__dur, .vcard__dur { position: absolute; top: 12px; right: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px 4px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: #fff; letter-spacing: .02em;
    background: rgba(8,20,32,.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.2); pointer-events: none; }
  .rcard__dur::before, .vcard__dur::before { content: ""; width: 0; height: 0; border-left: 6px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }

  /* ===== Reels popup — custom player ===== */
  .reelpop { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; gap: clamp(6px,1.6vw,26px);
    opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s var(--ease); }
  .reelpop.open { opacity: 1; visibility: visible; }
  .reelpop__bg { position: absolute; inset: 0; background: rgba(6,17,26,.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .reelpop__stage { position: relative; z-index: 1; height: min(86vh,780px); aspect-ratio: 9 / 16; max-width: 94vw;
    background: #06111a; border-radius: 18px; overflow: hidden; box-shadow: 0 40px 120px rgba(0,0,0,.6);
    transform: scale(.95); transition: transform .35s var(--ease); }
  .reelpop.open .reelpop__stage { transform: none; }
  .reelpop__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; background: #06111a; }
  .reelpop__cap { position: absolute; top: 0; left: 0; right: 0; z-index: 2; padding: 18px 18px 42px; color: #fff; pointer-events: none;
    font-family: "TBC Contractica Caps", var(--font); font-weight: 500; font-size: 17px; line-height: 1.2; text-shadow: 0 1px 12px rgba(0,0,0,.4);
    background: linear-gradient(180deg, rgba(6,17,26,.72), transparent); }
  .reelpop__big { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2;
    width: 80px; height: 80px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
    background: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.55); color: #fff; opacity: 0; visibility: hidden;
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s var(--ease); }
  .reelpop.is-paused .reelpop__big { opacity: 1; visibility: visible; }
  .reelpop__big:hover { transform: translate(-50%,-50%) scale(1.07); }
  .reelpop__big svg { width: 30px; height: 30px; margin-left: 4px; }
  .reelpop__ctrl { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 10px;
    padding: 16px 14px 16px; background: linear-gradient(0deg, rgba(6,17,26,.8), transparent); }
  .reelpop__pp, .reelpop__mute { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); color: #fff; cursor: pointer; transition: background .2s var(--ease); }
  .reelpop__pp:hover, .reelpop__mute:hover { background: rgba(255,255,255,.3); }
  .reelpop__pp svg, .reelpop__mute svg { width: 15px; height: 15px; }
  .reelpop__pp .ico-play, .reelpop__pp .ico-pause, .reelpop__mute .ico-off { display: none; }
  .reelpop:not(.is-paused) .reelpop__pp .ico-pause { display: block; }
  .reelpop.is-paused .reelpop__pp .ico-play { display: block; }
  .reelpop__mute .ico-on { display: block; }
  .reelpop.is-muted .reelpop__mute .ico-on { display: none; }
  .reelpop.is-muted .reelpop__mute .ico-off { display: block; }
  .reelpop__t, .reelpop__d { flex: none; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.92); font-variant-numeric: tabular-nums; min-width: 32px; }
  .reelpop__d { text-align: right; }
  .reelpop__bar { flex: 1; height: 5px; border-radius: 999px; background: rgba(255,255,255,.22); cursor: pointer; position: relative; }
  .reelpop__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; background: var(--blue-light); }
  .reelpop__close { position: absolute; top: 22px; right: 22px; z-index: 5; width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); color: #fff; cursor: pointer; display: grid; place-items: center;
    transition: background .2s var(--ease), transform .25s var(--ease); }
  .reelpop__close:hover { background: rgba(255,255,255,.26); transform: rotate(90deg); }
  .reelpop__close svg { width: 20px; height: 20px; }
  .reelpop__nav { position: relative; z-index: 1; flex: none; width: 52px; height: 52px; border-radius: 50%;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); color: #fff; cursor: pointer; display: grid; place-items: center;
    transition: background .2s var(--ease); }
  .reelpop__nav:hover { background: rgba(255,255,255,.24); }
  .reelpop__nav svg { width: 22px; height: 22px; }
  body.reelpop-lock { overflow: hidden; }
  @media (max-width: 600px) {
    .reelpop__nav { position: absolute; top: auto; bottom: 18px; width: 42px; height: 42px; }
    .reelpop__nav--prev { left: 14px; } .reelpop__nav--next { right: 14px; }
    .reelpop__stage { height: 84vh; }
  }

  /* ===== eyebrow normalization → match home .about__label ===== */
  .ab-eyebrow, .archive__label, .blog__eyebrow, .eyebrow, .faq__label, .media__label,
  .sv2-eyebrow, .works__eyebrow, .reels__eyebrow, .hero__kicker {
    font-family: "TBC Contractica Caps", var(--font) !important;
    font-size: 13px !important; font-weight: 500 !important;
    letter-spacing: .1em !important; text-transform: uppercase !important; gap: 0 !important;
  }
  /* light-section eyebrows → navy, like About */
  .ab-eyebrow, .archive__label, .blog__eyebrow, .eyebrow, .faq__label, .media__label, .sv2-eyebrow {
    color: var(--navy) !important; opacity: .55 !important;
  }
  /* dark-section eyebrows → light equivalent */
  .works__eyebrow, .reels__eyebrow, .hero__kicker, .eyebrow--light {
    color: rgba(255,255,255,.65) !important; opacity: 1 !important;
  }
  /* strip all dot/line decorations */
  .ab-eyebrow::before, .ab-eyebrow::after, .archive__label::before, .archive__label::after,
  .blog__eyebrow::before, .blog__eyebrow::after, .eyebrow::before, .eyebrow::after,
  .faq__label::before, .faq__label::after, .media__label::before, .media__label::after,
  .sv2-eyebrow::before, .sv2-eyebrow::after, .works__eyebrow::before, .works__eyebrow::after,
  .reels__eyebrow::before, .reels__eyebrow::after, .hero__kicker::before, .hero__kicker::after {
    display: none !important; content: none !important;
  }
  .sv2-dot { display: none !important; }
  
  /* ===== mobile menu redesign ===== */
  @media (max-width: 860px){
    .site-header .bar{ gap:14px; padding:0 20px; }
    .burger{ display:block; position:relative; z-index:60; }
    .bar .lang{ margin-left:auto; }
    body.open .site-header{ background:#fff !important; color:var(--navy) !important; height:var(--h) !important; }
    body.open .site-header::after{ opacity:1 !important; }
    body.open .logo__img{ filter:none !important; }
    body.open .burger span{ background:var(--navy) !important; }
    body.open .lang{ color:var(--navy) !important; }
    body.open{ overflow:hidden !important; }

    .nav{
      position:fixed !important; inset:var(--h) 0 0 0 !important; margin:0 !important;
      display:block !important; background:#fff !important;
      transform:translateY(-8px); opacity:0; visibility:hidden;
      transition:opacity .26s var(--ease), transform .26s var(--ease), visibility .26s var(--ease);
      overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
    }
    .scrolled .nav{ inset:var(--h) 0 0 0 !important; }
    body.open .nav{ transform:none; opacity:1; visibility:visible; }

    .nav > ul{ flex-direction:column; align-items:stretch !important; gap:0 !important; padding:6px 0 0 !important; }
    .nav > ul > li{ border-bottom:1px solid rgba(12,39,60,.09); width:100%; }
    .nav a{
      color:var(--navy) !important; text-shadow:none !important; opacity:1 !important;
      padding:19px 24px !important; width:100%; font-size:17px !important; font-weight:500;
      border:0 !important; display:flex !important; align-items:center; justify-content:space-between; gap:12px;
      text-align:left; -webkit-tap-highlight-color:transparent;
    }
    .nav__has::after{ display:none !important; }

    .nav__mega > a{ cursor:pointer; }
    .nav__mega > a .nav__caret{ display:inline-block !important; width:16px; height:16px; opacity:.4; transition:transform .3s var(--ease); flex:none; }
    .nav__mega.is-open > a .nav__caret{ transform:rotate(180deg); opacity:.7; }
    .nav__mega.is-open > a{ color:var(--blue) !important; }
    .nav__panel{
      position:static !important; opacity:1 !important; visibility:visible !important; transform:none !important;
      top:auto !important; left:auto !important; right:auto !important; width:auto !important; min-width:0 !important;
      background:transparent !important; box-shadow:none !important; border:0 !important; padding:0 !important;
      display:grid !important; grid-template-rows:0fr; transition:grid-template-rows .34s var(--ease);
    }
    .nav__mega.is-open > .nav__panel{ grid-template-rows:1fr; background:#f6f9fc !important; }
    .nav__panel > div{ min-height:0; overflow:hidden; }

    /* padding must be 0: .mega is the overflow box, so any padding survives the 0fr collapse
       and leaves a visible gap under Services / Projects / Media before they expand */
    .mega{ display:block !important; width:auto !important; max-width:none !important; padding:0 !important; margin:0 !important; }
    .mega__cards{ display:block !important; grid-template-columns:none !important; gap:0 !important; }
    .nav__panel .pmc{ display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:flex-start !important; gap:13px !important; height:auto !important; min-height:0 !important; aspect-ratio:auto !important; border-radius:0 !important; background:none !important; box-shadow:none !important; overflow:visible !important; padding:11px 24px !important; border-bottom:1px solid rgba(12,39,60,.06) !important; }
    .nav__panel .pmc > img{ display:block !important; position:static !important; inset:auto !important; width:46px !important; height:46px !important; object-fit:cover !important; border-radius:8px !important; flex:none !important; }
    .pmc::before, .pmc::after{ display:none !important; content:none !important; }
    .pmc__logo{ display:none !important; }
    .pmc__b{ position:static !important; inset:auto !important; padding:0 !important; display:flex; flex-direction:column; gap:2px; }
    .pmc__name{ position:static !important; color:var(--navy) !important; font-size:15px !important; font-weight:500 !important; text-shadow:none !important; }
    .pmc__loc{ color:#7688a0 !important; font-size:12px !important; text-shadow:none !important; }
    .mega__foot{ display:flex !important; padding:15px 24px !important; border-top:1px solid rgba(12,39,60,.07) !important; margin:0 !important; }
    .mega__note{ display:none !important; }
    .mega__foot .mega__all{ color:var(--blue) !important; background:none !important; box-shadow:none !important; border:0 !important; align-items:center !important; font-weight:600 !important; padding:0 !important; justify-content:flex-start !important; font-size:14px !important; }
    .mega--media{ display:block !important; grid-template-columns:none !important; }
    .mcat{ padding:2px 0 !important; }
    .mcat__h{ display:none !important; }
    .mcat a{ padding:13px 24px 13px 40px !important; font-size:15px !important; border-bottom:1px solid rgba(12,39,60,.06) !important; }
    .mcat__arr{ display:none !important; }
    .mnews{ display:none !important; }

    .nav__mfoot{ padding:24px 24px calc(28px + env(safe-area-inset-bottom)); }
    .nav__mfoot .nav__mcta{ display:flex !important; align-items:center; justify-content:center; gap:10px; width:100%;
      padding:17px 20px !important; border-radius:12px; background:var(--navy) !important;
      font-family:"TBC Contractica Caps",var(--font); font-size:13px !important; font-weight:500; letter-spacing:.05em; text-transform:uppercase; }
    .nav__mfoot .nav__mcta, .nav__mfoot .nav__mcta span{ color:#fff !important; }
    .nav__mfoot .nav__mcta svg{ width:15px; height:15px; flex:none; }
    .nav__mfoot .nav__mtel{ display:flex !important; align-items:center; justify-content:center !important; gap:9px;
      margin-top:8px; color:var(--navy) !important; font-size:15px !important; opacity:.72; }
    .nav__mfoot .nav__mtel svg{ width:18px; height:18px; flex:none; color:#25D366; }
  }
  @media (min-width:861px){ .nav__mfoot{ display:none !important; } }
  
  /* mobile responsiveness fixes (audit) */
  @media(max-width:600px){ .reelpop__nav{ bottom:74px !important; } }
  
  /* ===== unified scroll-reveal + motion polish ===== */
  :root{ --grease: cubic-bezier(.22,1,.36,1); }
  .grev{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--grease), transform .8s var(--grease); will-change:opacity,transform; }
  .grev.gin{ opacity:1; transform:none; }
  .rv{ transition:opacity .8s var(--grease), transform .8s var(--grease) !important; }
  .reveal.is-in{ animation-duration:.8s !important; animation-timing-function:var(--grease) !important; }
  @media (prefers-reduced-motion: reduce){ .grev,.rv{ opacity:1 !important; transform:none !important; transition:none !important; } .reveal,.reveal.is-in{ animation:none !important; opacity:1 !important; } }
  
  /* ============================ CONSULTATION MODAL ============================ */
  .cd-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
    padding: 24px; opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s var(--ease); }
  .cd-modal.open { opacity: 1; visibility: visible; }
  .cd-modal__overlay { position: absolute; inset: 0; background: rgba(7,21,31,.5);
    backdrop-filter: blur(10px) saturate(120%); -webkit-backdrop-filter: blur(10px) saturate(120%); }
  .cd-card { position: relative; z-index: 1; width: min(860px, 100%);
    height: min(500px, calc(100vh - 48px));   /* definite height → media aspect-ratio resolves to a true square */
    background: #fff; border-radius: 12px; padding: 5px; box-shadow: 0 40px 100px -28px rgba(8,22,36,.6);
    display: flex; overflow: hidden; transform: translateY(18px) scale(.98);
    transition: transform .4s var(--ease); }
  .cd-modal.open .cd-card { transform: none; }

  /* left media — 50/50 with the form */
  .cd-media { position: relative; flex: 1 1 0; min-width: 0; align-self: stretch;
    border-radius: 8px; overflow: hidden; }
  .cd-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .cd-media::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(7,21,31,.5) 0%, rgba(7,21,31,.12) 38%, rgba(7,21,31,.72) 100%); }
  .cd-media__inner { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column;
    justify-content: space-between; padding: clamp(18px,2.2vw,26px); color: #fff; }
  .cd-media__title { font-family: "TBC Contractica Caps", var(--font); font-weight: 500;
    font-size: clamp(20px,2.6vw,27px); line-height: 1.08; max-width: 8em; }
  .cd-media__contacts { display: flex; flex-direction: column; gap: 11px; }
  .cd-mc { display: flex; align-items: flex-start; gap: 10px; color: rgba(255,255,255,.88);
    font-size: 13px; line-height: 1.4; transition: color .2s var(--ease); }
  .cd-mc svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--blue-light); }
  a.cd-mc:hover { color: #fff; }

  /* right form */
  .cd-form { flex: 1; min-width: 0; padding: clamp(22px,2.4vw,30px) clamp(20px,2.4vw,30px);
    display: flex; flex-direction: column; justify-content: center; overflow-y: auto; }
  .cd-form__head { margin-bottom: clamp(16px,2vw,22px); }
  .cd-form__title { font-family: "TBC Contractica Caps", var(--font); font-weight: 500; color: var(--navy);
    font-size: clamp(20px,2.3vw,25px); line-height: 1.1; margin: 0; }
  .cd-field { margin-bottom: 12px; }
  .cd-field label { display: block; font-size: 12px; font-weight: 600; color: var(--navy); margin-bottom: 7px; }
  .cd-input { width: 100%; height: 48px; padding: 0 14px; font-size: 14px; color: var(--navy); font-family: var(--font);
    border: 1px solid #dbe2e8; border-radius: 10px; background: #fff;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
  .cd-input::placeholder { color: #9aa6b1; }
  .cd-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(64,131,194,.14); }
  .cd-phone { display: flex; gap: 8px; }
  .cd-cc { display: flex; align-items: center; gap: 7px; height: 48px; padding: 0 12px; flex: none;
    border: 1px solid #dbe2e8; border-radius: 10px; background: #f6f9fb; font-size: 14px; color: var(--navy); }
  .cd-cc img { width: 20px; height: 20px; border-radius: 50%; display: block; }
  .cd-phone .cd-input { flex: 1; }
  .cd-submit { margin-top: 7px; width: 100%; height: 52px; display: inline-flex; align-items: center;
    justify-content: center; gap: 10px; background: var(--navy); color: #fff; border-radius: 11px;
    font-family: "TBC Contractica Caps", var(--font); font-size: 13px; font-weight: 500; letter-spacing: .05em;
    text-transform: uppercase; transition: background .25s var(--ease), transform .2s var(--ease); }
  .cd-submit:hover { background: #143957; transform: translateY(-2px); }
  .cd-submit svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
  .cd-submit:hover svg { transform: translateX(4px); }
  .cd-note { margin-top: 12px; font-size: 11.5px; color: #8190a0; text-align: center; line-height: 1.45; }

  .cd-close { position: absolute; top: 14px; right: 14px; z-index: 3; width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center; background: rgba(255,255,255,.92); color: var(--navy);
    border: 1px solid rgba(12,39,60,.08); box-shadow: 0 6px 18px rgba(8,22,36,.14);
    transition: background .2s var(--ease), transform .3s var(--ease); }
  .cd-close:hover { background: #fff; transform: rotate(90deg); }
  .cd-close svg { width: 18px; height: 18px; }

  .cd-success { display: none; flex: 1; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: 12px; padding: 24px; }
  .cd-form.done > form, .cd-form.done > .cd-form__head { display: none; }
  .cd-form.done .cd-success { display: flex; }
  .cd-success__ico { width: 62px; height: 62px; border-radius: 50%; background: rgba(64,131,194,.12);
    color: var(--blue); display: grid; place-items: center; }
  .cd-success__ico svg { width: 30px; height: 30px; }
  .cd-success h3 { font-family: "TBC Contractica Caps", var(--font); font-weight: 500; color: var(--navy); font-size: 23px; }
  .cd-success p { font-size: 14px; color: #5a6b7b; line-height: 1.55; max-width: 300px; }

  .cd-open { overflow: hidden !important; }

  @media (max-width: 680px) {
    .cd-modal { padding: 16px; }
    .cd-card { flex-direction: column; height: auto; max-height: calc(100vh - 32px); overflow-y: auto; }
    .cd-media { flex: none; align-self: stretch; aspect-ratio: auto; width: auto; min-height: 184px; height: 184px; }
    .cd-form { overflow-y: visible; }
    .cd-media__title { font-size: 22px; }
  }
  @media (prefers-reduced-motion: reduce) { .cd-card { transition: none; } }
  
  .mega--svc { display: grid; grid-template-columns: 300px minmax(0,1fr); gap: clamp(28px,3vw,44px); align-items: start; }
  .svcm__lbl { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #9aa4ac; margin: 0 0 10px; padding: 0 4px; }
  .svcaud { display: flex; flex-direction: column; gap: 8px; }
  .svcaud a { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 12px; border: 1px solid rgba(12,39,60,.1); transition: background .2s var(--ease), border-color .2s var(--ease); }
  .svcaud a:hover { background: rgba(12,39,60,.04); border-color: rgba(12,39,60,.22); }
  .svcaud__ico { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(43,108,176,.1); color: var(--blue); }
  .svcaud__ico svg { width: 19px; height: 19px; }
  .svcaud__tx { min-width: 0; }
  .svcaud__k { display: block; font-family: "TBC Contractica Caps", var(--font); font-size: 15px; color: var(--navy); }
  .svcphs { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 4px 22px; }
  .svccol { display: flex; flex-direction: column; }
  .svccol__h { font-family: "TBC Contractica Caps", var(--font); font-size: 13px; font-weight: 600; color: var(--navy); margin: 0 0 6px; padding: 0 8px; }
  .svclink { position: relative; display: flex; align-items: baseline; gap: 8px; padding: 11px 18px 11px 12px; border-radius: 10px; transition: background .2s var(--ease); }
  .svclink:hover { background: rgba(12,39,60,.06); }
  /* same arrow as the mega footer links — slides in on hover, space is always reserved so nothing reflows */
  .svclink::after { content: ""; position: absolute; right: 4px; top: 50%; width: 12px; height: 12px;
    background: var(--blue); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 0; transform: translate(-5px,-50%);
    transition: opacity .25s var(--ease), transform .3s var(--ease); }
  .svclink:hover::after, .svclink:focus-visible::after { opacity: 1; transform: translate(0,-50%); }
  @media (prefers-reduced-motion: reduce) { .svclink::after { transition: opacity .15s linear; transform: translate(0,-50%); } }
  .svclink__n { flex: none; font-size: 11px; color: var(--blue); font-family: "TBC Contractica Caps", var(--font); }
  .svclink__t { font-size: 13px; color: #38485f; line-height: 1.3; }
  @media (max-width: 860px) {
    .mega--svc { grid-template-columns: 1fr; gap: 16px; }
    .svcphs { grid-template-columns: 1fr 1fr; border-left: 0; padding-left: 0; gap: 2px 14px; }
    .svcm__lbl { display: none; }
  }

  /* services mega — audience switches the right-hand list (hover on desktop) */
  .svcaud a { position: relative; }
  .svcaud a.is-on { background: rgba(12,39,60,.05); border-color: rgba(12,39,60,.28); }
  .svcaud a.is-on .svcaud__ico { background: var(--blue); color: #fff; }
  .svcphs { display: block; }
  .svcpanel { display: none; }
  .svcpanel.is-on { display: block; }
  .svcpanel__h { font-family: "TBC Contractica Caps", var(--font); font-size: 14px; font-weight: 600;
    color: var(--navy); margin: 0 0 16px; padding: 0 8px; }
  /* tools/build_assets.py svcgrid_columns: three columns, rows from the services. */
  .svcgrid { display: block; columns: 3; column-gap: 22px; }
  .svcgrid .svclink { break-inside: avoid; margin-bottom: 4px; }
  @media (max-width: 860px) {
    /* audience switch = two underlined tabs (active: blue rule, inactive: hairline) */
    .svcaudwrap { padding: 0 !important; }
    .svcaud { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0 !important;
      border-bottom: 1px solid rgba(12,39,60,.10); }
    .svcaud a { display: flex !important; align-items: center; justify-content: center !important;
      gap: 0 !important; padding: 15px 8px !important; margin-bottom: -1px;
      border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important;
      background: none !important; color: #6e7a84 !important; }
    .svcaud a .svcaud__ico { display: none !important; }
    .svcaud__tx { flex: 0 1 auto !important; text-align: center; }
    .svcaud__k { font-family: "TBC Contractica Caps", var(--font) !important; font-size: 13.5px !important;
      letter-spacing: .02em; color: inherit !important; }
    .svcaud a.is-on { background: none !important; border-bottom-color: var(--blue) !important; color: var(--navy) !important; }
    .svcaud a.is-on .svcaud__ico { background: none !important; }
    .svcaud a.is-on::after { content: none !important; display: none !important; }

    /* the service list = plain one-column menu rows, same rhythm as the Media links */
    .svcphs { margin-top: 0 !important; }
    .svcpanel__h { display: none !important; }
    .svcgrid { display: block !important; columns: auto !important; grid-template-columns: none !important; grid-template-rows: none !important; gap: 0 !important; }
    .svcgrid .svclink { margin-bottom: 0 !important; }
    .nav__panel .svclink { display: flex !important; align-items: center !important; gap: 12px !important;
      justify-content: flex-start !important; padding: 13px 24px !important; border-radius: 0 !important;
      border-bottom: 1px solid rgba(12,39,60,.06) !important; }
    .nav__panel .svclink::after { content: none !important; display: none !important; }
    .svclink__n { flex: none; width: 18px; font-size: 12px !important; color: #9aa4ac !important; }
    .svclink__t { font-size: 15px !important; line-height: 1.3 !important; color: var(--navy) !important; }
  }

  /* consultation modal — mobile/iOS fixes (mobile-only; desktop untouched) */
  @media (max-width: 680px) {
    /* iOS treats 100vh as the LARGE viewport, so the card could exceed the visible
       area inside the fixed overlay and clip its own top — close button unreachable */
    .cd-card { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
    /* Safari zooms the page when a focused input is under 16px */
    .cd-input, .cd-form select, .cd-form textarea { font-size: 16px; }
    /* flex children default to min-width:auto, so the +995 chip could force overflow */
    .cd-phone .cd-input { min-width: 0; }
    .cd-cc { flex: none; }
    /* 38px close button is under the 44px touch target */
    .cd-close { width: 44px; height: 44px; }
  }

/* ===== GREA type & spacing scale — one 3-level system for all inner pages =====
   L1 page titles · L2 section titles · L3 card/item titles (+ lead, eyebrow, card tokens).
   Anchored on the client-approved news.html values. Injected last in <head> so it
   wins the cascade at equal specificity — home (index.html) keeps its display scale. */
:root{
  --t-h1: clamp(28px,3.4vw,46px);
  --t-h2: clamp(22px,2.6vw,32px);
  --t-h3: clamp(18px,2vw,24px);
  --t-lead: clamp(15px,1.35vw,17.5px);
  --t-eyebrow: 13px;
  --t-card: 17px;
  --hero-top: calc(var(--h) + clamp(34px,4.2vw,52px));
  --sec-pad: clamp(56px,6.5vw,96px);
}
/* L1 — page titles + full-width display bands */
.ab-hero__title, .archive__title, .art__title, .hero__title, .faq__title, .media__title,
.ftitle, .sv3-title, .sv2-title, .svp-title, .banner__h, .inquire__h, .next__big
{ font-family:"TBC Contractica Caps",var(--font); font-weight:700; font-size:var(--t-h1); line-height:1.12; }
/* L2 — section titles */
.ab-h2, .sec-title, .blog__title, .more__title, .pgroup__title, .msec__title, .news__title,
.sec__h, .pnum__title, .about__h, .specs__h, .sv3-side__h, .sv2-invest__h, .sv2-band__h,
.svp-sec > h2, .svp-next__h
{ font-family:"TBC Contractica Caps",var(--font); font-weight:700; font-size:var(--t-h2); line-height:1.16; }
/* L3 — card / item / accordion titles (size only; each keeps its family & weight) */
.ab-mvv__h, .ab-band__l, .ab-glink__t, .vac__title, .vac-loc__t, .feat__title, .latest__h,
.faqq__text, .fcard__title, .fhead h2, .legal h2, .ctacard__h, .role__t, .amen__i,
.sv3-nm, .sv2-name, .svp-faq__i h3, .svp-next__t, .success h3
{ font-size:var(--t-h3); }
/* flat 20px: service-page FAQ questions + career vacancy titles */
.svp-faq__i h3, .vac__title{ font-size:20px; }
/* dense-grid card titles */
.pcard__name, .mcard__title, .ncard__title, .ab-mem__n, .svp-agent__n { font-size:var(--t-card); }
/* leads / intro statements */
.ab-hero__lead, .ab-intro__body p:first-child, .hero__sub, .sec-sub, .vac__lead, .faq__intro,
.svp-lead, .sv2-lead, .sv3-side__p, .intro__sub, .about__body .first
{ font-size:var(--t-lead); line-height:1.6; }
.art__lead{ font-size:var(--t-lead) !important; line-height:1.62 !important; }
/* eyebrows — align every page to the existing 13px caps standard */
.ab-eyebrow, .ab-label, .ab-stats__pl, .archive__label, .eyebrow, .faq__label, .media__label,
.feyebrow, .elabel, .pnum__eyebrow, .svp-n
{ font-family:"TBC Contractica Caps",var(--font); font-size:var(--t-eyebrow); font-weight:500; letter-spacing:.1em; text-transform:uppercase; }
/* services CTA band — match the shared prefooter CTA (.cta2__h) */
.sv2-cta__h{ font-size:clamp(20px,2.6vw,27px); }
@media (max-width:700px){ :root{ --hero-top: calc(var(--h) + 22px); } }
/* page spacing — one hero offset, capped section gaps */
.archive{padding-top:var(--hero-top);}

/* Shared chrome rules this page's prototype never carried (build_assets.py carry_chrome_rules) */
.cd-lead{display: none;}.cd-form--lead > #cdFormEl{display: none;}.cd-form--lead .cd-lead{display: block;}.cd-row{display: grid; grid-template-columns: 1fr 1fr; gap: 10px;}.cd-select{appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 38px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c273c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat; background-position: right 13px center; background-size: 16px;}
@media (max-width: 480px){.cd-row{grid-template-columns: 1fr; gap: 0;}}

/* Client review: no green - the brand is navy, blue and light blue
   (tools/build_assets.py brand_status_colors). Each rule below answers one
   the design drew in #3dbe78; errors keep their red. */
  .pcard__status--active::before { background: #4083c2; }

/* Client review: a two-line menu button, a little wider
   (tools/build_assets.py burger_two_lines). The design's middle bar is
   gone rather than hidden on open, and the button lays the pair out so
   the X folds from the gap it actually has. */
  @media (max-width: 860px) {
    .burger { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; }
    .burger span { width: 26px; height: 2px; margin: 0; border-radius: 1px; }
    .burger span:nth-child(2) { display: none; }
    body.open .burger span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
    body.open .burger span:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }
  }

  /* Client review: the country code and the number are one field, not two
     boxes (tools/build_assets.py phone_single_field). .cd-phone carries the
     border, the radius and the focus ring; .cd-cc keeps a single
     border-right as the divider inside them. Both halves keep the inner
     radius on their outer side, so a background the UA paints on one of
     them - autofill - follows the control instead of squaring off the
     corners it reaches. */
  .cd-phone { gap: 0; height: 48px; background: #fff;
    border: 1px solid #dbe2e8; border-radius: 10px;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
  .cd-phone:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(64,131,194,.14); }
  .cd-phone .cd-ccode-wrap { display: flex; }
  .cd-phone .cd-cc, .cd-phone .cd-input { height: auto; background: transparent;
    border: 0; border-radius: 0; box-shadow: none; }
  .cd-phone .cd-cc { border-right: 1px solid #dbe2e8;
    border-radius: 9px 0 0 9px;
    padding-left: 14px; }
  .cd-phone .cd-cc:hover { background: rgba(12,39,60,.035); }
  .cd-phone .cd-input { border-radius: 0 9px 9px 0;
    padding-left: 12px; }
  .cd-phone:has(.cd-input[aria-invalid="true"]) { border-color: #cf4b46; }
  .cd-phone:has(.cd-input[aria-invalid="true"]):focus-within { box-shadow: 0 0 0 3px rgba(207,75,70,.14); }

  /* Client review: the modal needs the country dropdown the pages have
     (tools/build_assets.py modal_picker_css). The design's own picker rules,
     carried across under the modal's class names so the two cannot drift;
     the overrides below are what a fixed overlay needs and nothing else. */
  .cd-cc__car { width:12px;height:12px;color:#6e7a84;transition:transform .25s var(--ease); }
  .cd-cc[aria-expanded="true"] .cd-cc__car { transform:rotate(180deg); }
  .cd-ccmenu { position:absolute;top:calc(100% + 8px);left:0;z-index:50;width:330px;max-width:78vw;background:#fff;border:1px solid rgba(12,39,60,.12);border-radius:14px;box-shadow:0 26px 64px rgba(8,22,36,.2);padding:10px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s var(--ease),transform .2s var(--ease); }
  .cd-ccmenu.open { opacity:1;visibility:visible;transform:none; }
  .cd-ccsearch { position:relative;margin-bottom:8px; }
  .cd-ccsearch svg { position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:#6e7a84; }
  .cd-ccsearch input { width:100%;height:42px;padding:0 12px 0 36px;font-size:14px;border:1px solid rgba(12,39,60,.12);border-radius:9px;background:#fff; }
  .cd-ccsearch input:focus { outline:none;border-color:var(--blue); }
  .cd-cclist { max-height:262px;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:1px;scrollbar-width:thin; }
  .cd-cclist::-webkit-scrollbar { width:8px; }
  .cd-cclist::-webkit-scrollbar-thumb { background:var(--gray);border-radius:8px;border:2px solid #fff; }
  .cd-ccopt { display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px;border-radius:9px;text-align:left;font-size:14px;color:var(--navy);transition:background .15s var(--ease); }
  .cd-ccopt:hover,.cd-ccopt.active,.cd-ccopt[aria-selected="true"] { background:#eef4f9; }
  .cd-ccopt img { width:24px;height:24px;border-radius:50%;flex:none;box-shadow:0 0 0 1px rgba(12,39,60,.08); }
  .cd-ccopt__name { flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
  .cd-ccopt__dial { color:#6e7a84;font-variant-numeric:tabular-nums;font-size:13.5px; }
  .cd-ccopt__check { width:16px;height:16px;color:var(--blue);opacity:0;flex:none; }
  .cd-ccopt[aria-selected="true"] .cd-ccopt__check { opacity:1; }
  .cd-ccempty { padding:18px;text-align:center;font-size:13.5px;color:#6e7a84; }
  .cd-ccmenu { position: fixed; top: 0; left: 0; }
  .cd-cclist { max-height: var(--cd-cclist-max, 262px); }

  /* Client review: "scroll in dropdown ... and not whole page scroll".
     The list contains its own overscroll; the menu around it did not, so a
     wheel over its padding or its search box chained to the document and
     dragged the open menu off the viewport (tools/build_assets.py
     picker_menu_contains_scroll). */
  .cd-ccmenu { overflow: hidden; overscroll-behavior: contain; }

/* Client review: the mega panel's height eases when it changes, instead of
   snapping (tools/build_assets.py mega_panel_morph). The module pins a px
   height on .nav__panel for the length of a switch and clears it again; these
   rules are what make that read as one sheet growing or shrinking rather than
   two sheets of different heights crossing over each other.

   The timing is the panel's own fade, read off the rule above rather than typed
   here, so the height moves with the rest of the site's motion. */
  /* transform is named here although height is what we came for: this rule
     REPLACES the panel's own transition shorthand, so anything the design fades
     has to be repeated or it snaps the moment .is-open goes. Without it a close
     that lands inside a morph dropped the sheet's 8px in a single frame at full
     opacity - the most visible frame of the whole close. */
  .nav__panel.grea-morph { overflow: hidden;
    transition: height .28s var(--ease), opacity .28s var(--ease), visibility .28s var(--ease),
      transform .28s var(--ease); }
  /* The incoming sheet is the outgoing one continued: it takes over the frost
     at the height the other had reached, with no fade or 8px drop of its own -
     only its contents cross-fade. Once .is-open goes the rule above applies
     again, so closing still fades exactly as the design drew it. */
  .nav__mega.is-open > .nav__panel.grea-morph { transition: height .28s var(--ease); transform: none; }
  /* The audience switch is the SAME sheet, and it may still be running the
     entrance - the investor card is only a pointer-flick below the trigger. So
     it gets a class of its own that ADDS height to the design's list instead of
     replacing it: a property dropping out of transition-property has its
     running transition cancelled and jumps to its end value, which snapped a
     sheet still at a fifth of its opacity to fully open in one frame. It is
     placed after the rule above so it wins the tie if an item morph left its
     class on this same panel. */
  .nav__mega.is-open > .nav__panel.grea-morph--h,
  .nav__panel.grea-morph--h { overflow: hidden;
    transition: height .28s var(--ease), opacity .28s var(--ease),
      transform .28s var(--ease), visibility .28s var(--ease); }
  /* The contents cross-fade with a beat between them rather than dissolving
     through each other: the old list is gone by 45% and the new one starts at
     35%, because two sets of Georgian text at half opacity in the same place
     read as neither. Both are fractions of the design's own duration. */
  .nav__panel.grea-morph--in > .mega {
    animation: grea-mega-in calc(.28s * .65) var(--ease) calc(.28s * .35) both; }
  /* The outgoing sheet gives up its background at once - two frosted panels
     stacked for a quarter second read as a flash - but keeps its content for
     the cross-fade, clipped to the same animating height. It also stops taking
     the pointer: it is transparent but still hit-testable until visibility
     lands, and the later mega in the DOM sits above the one that replaced it.
     transform stays none for its whole life, so a close catching it mid-fade
     leaves it where it stands rather than sliding a frostless sheet. */
  .nav__panel.grea-morph--out { transform: none; background: transparent; box-shadow: none;
    border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
    pointer-events: none;
    transition: height .28s var(--ease), opacity calc(.28s * .45) var(--ease), visibility .28s var(--ease); }
  /* The services audience switch. The outgoing list leaves the flow, so the
     height the panel eases to is the incoming list's, and fades where it stood
     rather than leaving a hole above the incoming one. */
  .svcphs.grea-morph { position: relative; }
  .svcpanel.grea-morph--out { display: block; position: absolute; top: 0; left: 0; right: 0;
    pointer-events: none; animation: grea-mega-out calc(.28s * .45) var(--ease) both; }
  .svcpanel.grea-morph--in {
    animation: grea-mega-in calc(.28s * .65) var(--ease) calc(.28s * .35) both; }
  @keyframes grea-mega-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes grea-mega-out { from { opacity: 1; } to { opacity: 0; } }
  /* The module never starts a morph under reduce; this is for the preference
     being turned on while one is in flight. */
  @media (prefers-reduced-motion: reduce) {
    .nav__panel.grea-morph, .nav__panel.grea-morph--h,
    .nav__mega.is-open > .nav__panel.grea-morph,
    .nav__mega.is-open > .nav__panel.grea-morph--h { transition: none; }
    .nav__panel.grea-morph--in > .mega,
    .svcpanel.grea-morph--out, .svcpanel.grea-morph--in { animation: none; }
  }


/* The studio credit, in the Back to top button's place: the button's height,
   so the footer's bottom bar keeps the design's. */
.sf-credit { min-height: 38px; }