@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;        /* header height — default */
    --h-sm: 58px;     /* header height — scrolled */
    --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); }
  a { color: inherit; text-decoration: none; }
  ul { list-style: none; }
  button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

  /* ============================ HEADER (overlaps hero) ============================ */
  .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);
  }
  /* Uniform frosted white glass that fades in on scroll: semi-transparent white + blur. */
  .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; }

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

  /* ---- Logo (left) ---- */
  .logo { display: flex; align-items: center; }
  .logo__img { height: 50px; width: auto; display: block;
               filter: brightness(0) invert(1);  /* white over the hero image */
               transition: height .4s var(--ease), filter .4s var(--ease); }
  .scrolled .logo__img { height: 44px; filter: brightness(1) invert(0); }  /* original #141414 on white frost */

  /* ---- Nav (menu) ---- */
  .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 { opacity: 1; }
  .scrolled .nav a { font-size: 13px; }
  /* EN main-menu in caps to match the Georgian Mtavruli styling */
  html[lang="en"] .nav > ul > li > a { text-transform: uppercase; letter-spacing: .05em; }
  /* 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; }

  /* ---- Consultation button ---- */
  .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; }
  /* light / scrolled header: filled light-blue button, blue arrow */
  .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; }

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

  /* ---- Mobile toggle ---- */
  .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,.92); 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); text-shadow: none; padding: 14px 0; width: 100%; border-bottom: 1px solid rgba(12,39,60,.08); font-size: 16px; }
    .nav { margin-left: auto; }
    .lang { margin-left: auto; }
    .btn { display: none; }
    .burger { display: block; }
    .nav__has::after { display: none; }
    .nav__caret { display: none; }
    .nav__drop { position: static; transform: none; opacity: 1; visibility: visible; min-width: 0;
      margin: 0; padding: 0 0 0 16px; background: transparent; border: none; box-shadow: none; gap: 0; }
    .nav__drop a { padding: 12px 0; border-bottom: 1px solid rgba(12,39,60,.06); font-size: 15px; opacity: .9; border-radius: 0; }
  }

  /* ============================ SECTIONS ============================ */
  .hero { position: relative; min-height: 100vh; width: 100%; overflow: hidden; color: #fff;
    touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
  .hero.is-grabbing { cursor: grabbing; }
  .hero__slides { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: #0c273c; }
  .hero__slide { position: absolute; inset: 0; background-size: cover; background-position: center;
    opacity: 0; transform: scale(1.09); transition: opacity 1.1s var(--ease); will-change: opacity, transform; }
  .hero__slide.is-active { opacity: 1; animation: heroKen 8s var(--ease) forwards; }
  @keyframes heroKen { from { transform: scale(1.09); } to { transform: scale(1); } }
  .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
      linear-gradient(180deg, rgba(8,22,36,.32) 0%, rgba(8,22,36,0) 20%, rgba(8,22,36,0) 44%, rgba(8,22,36,.9) 100%),
      linear-gradient(90deg, rgba(8,22,36,.5) 0%, rgba(8,22,36,.12) 42%, transparent 70%); }

  .hero__inner { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column;
    padding: calc(var(--h) + 34px) 0 0; }
  .hwrap { width: 100%; max-width: 1760px; margin: 0 auto; padding: 0 clamp(24px,3.4vw,56px); }

  .hero__lead { margin-top: auto; margin-bottom: clamp(126px, 17vh, 152px); }
  /* the 4 slide texts are stacked in one grid cell so the block sizes to the tallest and they cross-fade;
     bottom-aligned so shorter slides sit flush above the dots instead of leaving a gap under them */
  .hero__texts { display: grid; align-items: end; animation: heroUp 1s var(--ease) .3s both; }
  .hero__text { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(16px); pointer-events: none;
    transition: opacity .8s var(--ease), transform .8s var(--ease), visibility .8s; }
  .hero__text.is-active { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
  .hero__title { margin: 0; font-family: "TBC Contractica Caps", var(--font); font-weight: 700; line-height: 1.18; letter-spacing: 0;
    font-size: clamp(26px, 3.1vw, 44px); max-width: clamp(560px, 62vw, 980px); color: #fff; text-shadow: 0 2px 44px rgba(8,22,36,.32); }
  /* EN main heading in caps to match the Georgian Mtavruli styling */
  html[lang="en"] .hero__title { text-transform: uppercase; letter-spacing: .01em; }
  .hero__sub { margin: clamp(11px,1.3vw,15px) 0 0; max-width: 600px; color: #fff;
    font-family: "TBC Contractica Caps", var(--font); font-weight: 400; font-size: clamp(14px,1.25vw,18px); line-height: 1.56; letter-spacing: 0;
    text-shadow: 0 1px 24px rgba(8,22,36,.4); }

  .hero__dots { display: flex; gap: 10px; margin-top: clamp(20px,2.4vw,30px); }
  .hero__dot { width: 30px; height: 4px; padding: 0; border: 0; border-radius: 4px; cursor: pointer;
    background: rgba(255,255,255,.34); transition: background .3s var(--ease), width .3s var(--ease); }
  .hero__dot:hover { background: rgba(255,255,255,.6); }
  .hero__dot.is-active { background: #fff; width: 46px; }

  .hero .marquee { animation: heroFade 1s var(--ease) .6s both; }
  @keyframes heroUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
  @keyframes heroFade { from { opacity: 0; } to { opacity: 1; } }

  @media (max-width: 520px) { .hero__lead { margin-bottom: 116px; } }
  @media (prefers-reduced-motion: reduce) {
    .hero__slide, .hero__text, .hero__texts, .hero .marquee { animation: none !important; }
    .hero__text { transition: opacity .3s !important; }
  }
  /* ===== About (scroll-fill statement + business-in-numbers) ===== */
  .about { position: relative; width: 100%; overflow: hidden; z-index: 1;
    padding: clamp(72px,7.5vw,116px) 0; background: linear-gradient(180deg, #f1f6fa 0%, #e7f0f7 100%); }
  .about__wrap { position: relative; width: 100%; max-width: 1760px; margin: 0 auto; padding: 0 clamp(24px,3.4vw,56px); }
  .about__lead { display: grid; grid-template-columns: minmax(0,0.45fr) minmax(0,0.55fr); gap: clamp(28px,5vw,100px); align-items: start; }
  .about__kicker { margin: 0; font-family: "TBC Contractica Caps", var(--font); font-weight: 600;
    font-size: clamp(26px,3vw,40px); line-height: 1.12; letter-spacing: -.015em; color: var(--navy); }
  .about__body { min-width: 0; }
  .about__statement { margin: 0; font-family: "TBC Contractica Caps", var(--font); font-weight: 400;
    font-size: 20px; line-height: 1.5; letter-spacing: -.003em; }
  .about__statement .fw { color: rgba(12,39,60,.26); transition: color .35s var(--ease); }
  .about__statement .fw.on { color: rgba(12,39,60,1); }
  .about__cta { display: inline-flex; align-items: center; gap: 9px; margin-top: clamp(26px,2.6vw,40px);
    font-family: "TBC Contractica Caps", var(--font); font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
    color: var(--navy); transition: gap .25s var(--ease), opacity .25s var(--ease); }
  .about__cta::after { content: "→"; font-size: 1.05em; line-height: 1; }
  .about__cta:hover { gap: 15px; opacity: .66; }
  .about__stats { margin-top: clamp(52px,6vw,92px); padding-top: clamp(36px,4vw,58px);
    border-top: 1px solid rgba(12,39,60,.14);
    display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(28px,3vw,48px); }
  .astat__n { display: block; font-family: "TBC Contractica Caps", var(--font); font-weight: 500; font-size: clamp(25px,2.6vw,42px); line-height: 1; color: var(--navy); white-space: nowrap; }
  .astat__u { font-size: .5em; margin-left: .18em; letter-spacing: .01em; }
  .astat__l { display: block; margin-top: 10px; font-family: "TBC Contractica Caps", var(--font); font-weight: 400; font-size: clamp(13px,1vw,14px); line-height: 1.35; color: var(--navy); opacity: .72; }
  @media (max-width: 1000px) {
    .about__lead { grid-template-columns: 1fr; gap: clamp(16px,3.5vw,24px); }
    .about__kicker { font-size: clamp(24px,4.5vw,30px); }
    .about__stats { grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(30px,4.6vw,44px) clamp(24px,4vw,40px); }
  }
  @media (max-width: 480px) {
    .about__stats { grid-template-columns: 1fr; gap: 26px; }
    .about__statement { font-size: 18px; }
  }

  /* ===== Seam bridge (navy peak rising into white) + count-up stats ===== */
  .bridge { position: relative; z-index: 2; margin-top: -110px; background: var(--navy); color: #fff;
    padding: clamp(150px,16vw,210px) 0 clamp(70px,8vw,110px);
    clip-path: polygon(0 110px, calc(50% - 170px) 110px, 50% 0, calc(50% + 170px) 110px, 100% 110px, 100% 100%, 0 100%); }
  .bridge__wrap { max-width: 1800px; margin: 0 auto; padding: 0 40px; }
  .bridge__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: rgba(255,255,255,.7); margin-bottom: clamp(26px,3vw,40px); }
  .bridge__eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue-light); }
  .bstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.12); border-radius: 7px; overflow: hidden; }
  .bstat { background: var(--navy); padding: clamp(26px,3vw,42px) clamp(20px,2vw,34px); }
  .bstat__n { font-family: "TBC Contractica Caps", var(--font); font-weight: 500; font-size: clamp(40px,5.6vw,82px); line-height: .95; letter-spacing: -.01em; display: flex; align-items: baseline; }
  .bstat__n .u { font-size: .42em; color: var(--blue-light); margin-left: 6px; letter-spacing: 0; }
  .bstat__l { margin-top: 16px; font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.6); }
  .bstats.in .bstat { animation: statIn .7s var(--ease) both; }
  .bstats.in .bstat:nth-child(2) { animation-delay: .08s; }
  .bstats.in .bstat:nth-child(3) { animation-delay: .16s; }
  .bstats.in .bstat:nth-child(4) { animation-delay: .24s; }
  @keyframes statIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
  .reveal.is-in { animation: revIn .9s var(--ease) both; }
  @keyframes revIn { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
  @media (max-width: 820px) { .bstats { grid-template-columns: repeat(2,1fr); }
    .bridge { margin-top: -64px; clip-path: polygon(0 64px, calc(50% - 110px) 64px, 50% 0, calc(50% + 110px) 64px, 100% 64px, 100% 100%, 0 100%); } }

  /* ===== Projects — pinned horizontal scroll ===== */
  /* ===== Works (projects) — dynamic background reveal carousel ===== */
  .works { --wgut: clamp(24px,3.4vw,56px);   /* same content gutter as .hwrap / .about__wrap / .blog__inner */
    position: relative; overflow: hidden; background: var(--navy); color: #fff; padding: clamp(72px,9vw,120px) 0; }
  .works__bg { position: absolute; left: 0; bottom: 0; width: min(1080px,74%); height: 100%; z-index: 0; pointer-events: none; }
  .works__bgimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0;
    transition: opacity .7s var(--ease); filter: blur(24px) saturate(1.2) brightness(1.08);
    -webkit-mask-image: radial-gradient(86% 84% at 12% 90%, #000 0%, #000 16%, rgba(0,0,0,.5) 44%, transparent 70%);
            mask-image: radial-gradient(86% 84% at 12% 90%, #000 0%, #000 16%, rgba(0,0,0,.5) 44%, transparent 70%); }
  .works::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(54deg, rgba(8,22,36,.5) 0%, rgba(8,22,36,.14) 44%, rgba(8,22,36,0) 68%); }
  /* head keeps the 1760 content frame; the carousel bleeds to the window edge so cards scroll off-screen, not into a padding */
  .works__row { position: relative; z-index: 2; margin: 0; padding-left: calc(max(0px, (100vw - 1760px) / 2) + var(--wgut));
    display: grid; grid-template-columns: clamp(270px,24vw,400px) minmax(0,1fr); gap: clamp(28px,3vw,52px); align-items: center; }
  .works__head { padding-right: 20px; }
  .works__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: rgba(255,255,255,.7); }
  .works__eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue-light); }
  .works__title { margin-top: 16px; font-family: "TBC Contractica Caps", var(--font); font-weight: 700; font-size: clamp(28px,3.4vw,48px); line-height: 1.2; letter-spacing: 0; text-shadow: 0 2px 34px rgba(8,22,36,.55); }
  .works__sub { margin-top: 18px; max-width: 28ch; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.72); text-shadow: 0 1px 20px rgba(8,22,36,.5); }
  .works__all { margin-top: 30px; display: inline-flex; align-items: center; gap: 10px; font-family: "TBC Contractica Caps", var(--font); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
  .works__all svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
  .works__all:hover svg { transform: translateX(3px); }
  .works__carousel { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; cursor: grab; scroll-behavior: smooth; scroll-snap-type: x mandatory; scroll-padding-left: 0; user-select: none; }
  .works__carousel::-webkit-scrollbar { display: none; }
  .works__carousel.drag { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
  .works__track { display: flex; gap: 20px; width: max-content; padding: 6px 0; }
  .works .pcard { flex: none; margin-right: 0; width: clamp(240px,21.5vw,400px); scroll-snap-align: start; border: 1px solid rgba(255,255,255,.12); -webkit-user-drag: none; transition: border-color .35s var(--ease); }
  .works .pcard:hover { border-color: rgba(255,255,255,.4); }
  .works .pcard img { -webkit-user-drag: none; pointer-events: none; }
  .works__nav { margin-top: clamp(28px,4vw,44px); display: flex; gap: 12px; }
  .works__arrow { width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); color: #fff; display: grid; place-items: center;
    transition: background-color .25s var(--ease), border-color .25s var(--ease), transform .2s var(--ease); }
  .works__arrow:hover { background: rgba(255,255,255,.1); border-color: #fff; }
  .works__arrow:active { transform: scale(.93); }
  .works__arrow svg { width: 20px; height: 20px; }
  @media (max-width: 860px) {
    .works__row { grid-template-columns: 1fr; gap: 26px; }
    .works__head { padding: 0 var(--wgut) 0 0; }   /* row already supplies the left gutter */
    /* pull the carousel out of the row gutter, then re-create the offset on the track so card 1 lines up with the title */
    .works__carousel { margin-left: calc(-1 * var(--wgut)); scroll-padding-left: var(--wgut); }
    .works__track { padding-left: var(--wgut); }
    .works__bg { width: 100%; height: 56%; }
  }
  @property --sc { syntax: "<number>"; inherits: false; initial-value: 1; }
  .pcard { flex: none; width: 300px; aspect-ratio: 3 / 4; margin-right: 22px; position: relative;
           overflow: hidden; display: block; color: #fff; background: var(--navy); border-radius: 12px; }
  .pcard__img { position: absolute; top: -8%; left: -6%; width: 112%; height: 116%; object-fit: cover; will-change: transform;
    transform: translate3d(var(--px, 0px), 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 (matches projects archive) */
  .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 { position: absolute; top: 16px; left: 16px; z-index: 2; width: 52px; height: 52px; border-radius: 50%; overflow: hidden;
    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 */
  @media (max-width: 520px) { .pcard { width: 232px; } }

  /* ===== Reels — vertical video carousel ("real estate today") ===== */
  .reels { --wgut: clamp(24px,3.4vw,56px);
    position: relative; overflow: hidden; background: var(--navy); color: #fff; padding: clamp(72px,9vw,124px) 0; }
  .reels__bg { position: absolute; left: 0; right: 0; bottom: 0; height: 82%; z-index: 0; pointer-events: none; }
  /* masked so the photo dissolves into the navy — no hard horizontal seam where the image starts */
  .reels__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 72%; opacity: .22;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.18) 18%, rgba(0,0,0,.6) 42%, #000 72%, #000 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.18) 18%, rgba(0,0,0,.6) 42%, #000 72%, #000 100%); }
  .reels::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, var(--navy) 0%, rgba(12,39,60,.86) 22%, rgba(12,39,60,.58) 48%, rgba(12,39,60,.72) 78%, rgba(12,39,60,.9) 100%); }
  .reels__row { position: relative; z-index: 2; margin: 0; padding-left: calc(max(0px, (100vw - 1760px) / 2) + var(--wgut));
    display: grid; grid-template-columns: clamp(290px,26vw,440px) minmax(0,1fr); gap: clamp(28px,3vw,56px); align-items: center; }
  .reels__head { padding-right: 20px; }
  .reels__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: rgba(255,255,255,.7); }
  .reels__eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue-light); }
  .reels__title { margin-top: 16px; font-family: "TBC Contractica Caps", var(--font); font-weight: 700; font-size: clamp(34px,4.4vw,64px); line-height: 1.06; letter-spacing: 0; text-shadow: 0 2px 34px rgba(8,22,36,.55); }
  .reels__sub { margin-top: 20px; max-width: 30ch; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.72); }
  .reels__all { margin-top: 30px; display: inline-flex; align-items: center; gap: 10px; font-family: "TBC Contractica Caps", var(--font); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
  .reels__all svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
  .reels__all:hover svg { transform: translateX(3px); }
  .reels__nav { margin-top: clamp(28px,4vw,44px); display: flex; gap: 12px; }
  .reels__arrow { width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); color: #fff; display: grid; place-items: center; background: transparent; cursor: pointer; transition: background .25s var(--ease), border-color .25s var(--ease), transform .12s var(--ease); }
  .reels__arrow:hover { background: rgba(255,255,255,.1); border-color: #fff; }
  .reels__arrow:active { transform: scale(.93); }
  .reels__arrow svg { width: 20px; height: 20px; }
  .reels__carousel { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; cursor: grab; scroll-behavior: smooth; scroll-snap-type: x mandatory; user-select: none; }
  .reels__carousel::-webkit-scrollbar { display: none; }
  .reels__carousel.drag { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
  .reels__track { display: flex; gap: 22px; width: max-content; padding: 6px 0; }
  .rcard { flex: none; position: relative; width: clamp(230px,20vw,360px); aspect-ratio: 10 / 16; border-radius: 18px; overflow: hidden; background: #0a1f30;
    box-shadow: 0 20px 54px rgba(8,22,36,.5); scroll-snap-align: start; -webkit-user-drag: none; transition: box-shadow .35s var(--ease); }
  .rcard:hover { box-shadow: 0 26px 64px rgba(8,22,36,.62); }
  .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; pointer-events: 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%); transition: background .4s var(--ease); }
  .rcard:hover::after { background: linear-gradient(180deg, rgba(8,20,32,.2) 0%, rgba(8,20,32,.1) 26%, rgba(8,20,32,.62) 58%, rgba(8,20,32,.93) 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), opacity .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__foot { position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 2; }
  .rcard__cap { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-family: "TBC Contractica Caps", var(--font); font-weight: 500; font-size: clamp(13px,0.85vw,15px); line-height: 1.25; text-shadow: 0 2px 18px rgba(8,22,36,.6); }
  .rcard__desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    max-height: 0; opacity: 0; margin-top: 0; transform: translateY(4px);
    font-size: 11.5px; line-height: 1.45; color: rgba(255,255,255,.9); text-shadow: 0 1px 12px rgba(8,22,36,.72);
    transition: max-height .42s var(--ease), opacity .36s var(--ease), transform .42s var(--ease), margin-top .42s var(--ease); }
  .rcard:hover .rcard__desc { max-height: 8em; opacity: 1; margin-top: 9px; transform: none; }
  @media (max-width: 1024px) {
    .reels__row { grid-template-columns: 1fr; gap: 26px; }
    .reels__head { padding: 0 var(--wgut) 0 0; }
    .reels__carousel { margin-left: calc(-1 * var(--wgut)); scroll-padding-left: var(--wgut); }
    .reels__track { padding-left: var(--wgut); }
  }
  @media (max-width: 520px) { .rcard { width: 232px; } }

  /* Partner logos — full-width carousel, 100px-tall wrapper pinned to the bottom of the hero */
  .marquee {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    height: 100px; display: flex; align-items: center; overflow: hidden;
    border-top: 1px solid rgba(255,255,255,.14);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  }
  .marquee__track {
    display: flex; align-items: center; gap: clamp(44px,5vw,72px); width: max-content;
    padding: 0 clamp(24px,3.4vw,56px); animation: marquee 48s linear infinite;
  }
  .marquee__item {            /* white partner logos — small */
    height: auto; width: auto; max-height: 28px; max-width: 132px;
    object-fit: contain; flex: none; display: block; opacity: .9;
  }
  @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  /* ============================ SERVICES WHEEL (GREA 360°) ============================ */
  .services { position: relative; overflow: hidden;
    background: radial-gradient(120% 92% at 50% -8%, #f4f8fb 0%, #e9f1f7 52%, #d9e7f1 100%);
    padding: clamp(72px, 9vw, 112px) 40px; }
  .services__inner { max-width: 1180px; margin: 0 auto; }
  .services .head { text-align: center; }
  .services .eyebrow { font-family: "TBC Contractica Caps", var(--font); font-weight: 500;
    font-size: 12.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--blue);
    margin: 0 0 14px; display: inline-flex; align-items: center; gap: 12px; }
  .services .eyebrow::before, .services .eyebrow::after { content: ""; width: 28px; height: 1px; background: rgba(12,39,60,.2); }
  .services .title { font-family: "TBC Contractica Caps", var(--font); font-weight: 700; color: var(--navy);
    font-size: clamp(28px, 4.4vw, 46px); line-height: 1.08; margin: 0; }
  .services .subtitle { font-size: clamp(14px, 1.6vw, 17px); color: #4a5b6b; max-width: 680px; margin: 16px auto 0; line-height: 1.6; }
  .services .hint { font-size: 12.5px; color: #71849f; margin: 18px 0 0; display: inline-flex; align-items: center; gap: 8px; }
  .services .hint svg { width: 15px; height: 15px; stroke: #71849f; fill: none; stroke-width: 1.7; }

  /* investment-services deep-link bar (→ services.html investor view) */
  .svc-duo { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(14px,1.6vw,20px);
    max-width: 1120px; margin: clamp(34px,4.4vw,58px) auto 0; text-align: left; }
  @media (max-width: 780px) { .svc-duo { grid-template-columns: 1fr; } }
  .svc-invest { display: flex; align-items: center; gap: clamp(14px,1.8vw,22px); height: 100%;
    margin: 0; padding: clamp(16px,1.9vw,22px) clamp(18px,2.2vw,28px);
    border-radius: 18px; color: #fff; text-decoration: none; position: relative; overflow: hidden;
    background: radial-gradient(135% 160% at 100% 0%, rgba(43,108,176,.5), var(--navy) 58%);
    box-shadow: 0 30px 62px -34px rgba(8,22,36,.62);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
  .svc-invest:hover { transform: translateY(-3px); box-shadow: 0 42px 84px -34px rgba(8,22,36,.72); }
  .svc-invest__ico { flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
    background: rgba(255,255,255,.08); border: 1px solid rgba(171,206,225,.22); color: var(--blue-light); }
  .svc-invest__ico svg { width: 26px; height: 26px; }
  .svc-invest__tx { flex: 1 1 auto; min-width: 0; text-align: left; }
  .svc-invest__k { display: block; font-family: "TBC Contractica Caps", var(--font); font-weight: 500;
    font-size: clamp(16px,1.7vw,20px); line-height: 1.16; }
  .svc-invest__s { display: block; margin-top: 5px; font-size: 13px; line-height: 1.45; color: rgba(230,240,248,.72); }
  .svc-invest__go { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
    background: var(--blue-light); color: var(--navy); transition: transform .3s var(--ease); }
  .svc-invest__go svg { width: 20px; height: 20px; }
  .svc-invest:hover .svc-invest__go { transform: translateX(4px); }
  @media (max-width: 780px) {
    /* stacked cards: no leading icon, arrow sits in the top-right corner and points ↗ */
    .svc-invest { display: block; padding: clamp(16px,4.4vw,20px); padding-right: clamp(62px,16vw,74px); }
    .svc-invest__ico { display: none; }
    .svc-invest__go { position: absolute; top: clamp(14px,3.6vw,18px); right: clamp(14px,3.6vw,18px); width: 38px; height: 38px; }
    .svc-invest__go svg { width: 18px; height: 18px; transform: rotate(-45deg); }
    .svc-invest:hover .svc-invest__go { transform: none; }
  }
  @media (max-width: 560px) { .svc-invest__s { font-size: 12.5px; } }

  .services .diagram { margin-top: clamp(6px, 2vw, 16px); }
  .ring { width: min(100%, 1000px); margin: 0 auto; height: auto; display: block; overflow: visible; }
  .ring .item { cursor: pointer; outline: none; }
  .segment { transition: opacity .28s var(--ease), stroke .2s var(--ease); stroke: transparent; stroke-width: 1; }
  .connector { fill: none; stroke: rgba(12,39,60,.18); stroke-width: 1;
    transition: stroke .2s var(--ease), stroke-width .2s var(--ease), opacity .28s var(--ease); }
  .node { fill: #fff; stroke: rgba(12,39,60,.22); stroke-width: 1;
    transition: fill .2s var(--ease), stroke .2s var(--ease), opacity .28s var(--ease); }
  .arr { fill: rgba(12,39,60,.32); stroke: none;
    transition: fill .2s var(--ease), opacity .28s var(--ease); }
  .l-text { font-family: "TBC Contractica Caps", var(--font); font-weight: 500; font-size: 17px; fill: #38485f;
    transition: fill .2s var(--ease), opacity .28s var(--ease); }
  .l-icon { color: var(--blue); transition: color .2s var(--ease), opacity .28s var(--ease); }
  .l-icon :is(path,rect,circle,polygon,line,ellipse) { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

  .ring.dimmed .item:not(.active) .segment { opacity: .3; }
  .ring.dimmed .item:not(.active) .connector { opacity: .32; }
  .ring.dimmed .item:not(.active) .node { opacity: .4; }
  .ring.dimmed .item:not(.active) .arr { opacity: .34; }
  .ring.dimmed .item:not(.active) .l-text { opacity: .4; }
  .ring.dimmed .item:not(.active) .l-icon { opacity: .42; }
  .item.active .segment { stroke: #fff; stroke-width: 1.2; }
  .item.active .connector { stroke: var(--navy); stroke-width: 1.5; }
  .item.active .node { fill: var(--navy); stroke: var(--navy); }
  .item.active .arr { fill: var(--navy); }
  .item.active .l-text { fill: var(--navy); }
  .item.active .l-icon { color: var(--navy); }
  .item:focus-visible .l-text { text-decoration: underline; text-underline-offset: 3px; }

  .disc { fill: #fff; }
  .disc-ring { fill: none; stroke: rgba(12,39,60,.1); stroke-width: 1; }
  #logoGroup, #detailGroup { transition: opacity .26s var(--ease); }
  .logo-word { font-family: "TBC Contractica Caps", var(--font); font-weight: 700; font-size: 46px; fill: var(--navy); letter-spacing: .02em; }
  .center-tag { font-family: var(--font); font-weight: 500; font-size: 12.5px; fill: #6e7a84; letter-spacing: .03em; }
  .c-title { font-family: var(--font); font-weight: 600; fill: var(--navy); }
  .c-desc { font-family: var(--font); font-weight: 400; fill: #4a5b6b; }
  .c-icon { color: var(--blue); }
  .c-icon :is(path,rect,circle,polygon,line,ellipse) { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .c-index { font-family: "TBC Contractica Caps", var(--font); font-weight: 500; font-size: 12px; fill: #8a99ab; letter-spacing: .16em; }

  .ring .item { animation: svc-rise .55s cubic-bezier(.22,.61,.36,1) both; animation-delay: calc(var(--i,0)*52ms + .12s); }
  .ring .center { animation: svc-rise .6s cubic-bezier(.22,.61,.36,1) both .04s; }
  .ring.no-anim .item, .ring.no-anim .center { animation: none; }
  @keyframes svc-rise { from { opacity: 0; } to { opacity: 1; } }

  .seg-icon { display: none; color: var(--blue); transition: opacity .28s var(--ease); }
  .seg-icon :is(path,rect,circle,polygon,line,ellipse) { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .ring.dimmed .item:not(.active) .seg-icon { opacity: .26; }

  .swipe-hint { display: none; margin: 14px auto 0; width: max-content; max-width: 90%;
    align-items: center; gap: 9px; padding: 9px 16px; border-radius: 999px;
    background: rgba(255,255,255,.7); border: 1px solid rgba(12,39,60,.1); color: #4a5b6b; font-size: 13px;
    -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
  .swipe-hint svg { width: 18px; height: 18px; stroke: var(--blue); fill: none; stroke-width: 1.8; flex: 0 0 auto; }
  .swipe-hint.hide { opacity: 0; transform: translateY(-5px); pointer-events: none; }

  .services.is-mobile .diagram { touch-action: pan-y; }
  .services.is-mobile .ring { max-width: 460px; width: 100%; margin: 0 auto; -webkit-tap-highlight-color: transparent; }
  .services.is-mobile .connector, .services.is-mobile .node, .services.is-mobile .arr, .services.is-mobile .l-text, .services.is-mobile .l-icon, .services.is-mobile .hint { display: none; }
  .services.is-mobile .seg-icon { display: block; }
  .services.is-mobile .swipe-hint { display: flex; }
  @media (max-width: 760px) {
    .services { padding: 64px 20px; }
    .services .connector, .services .node, .services .arr, .services .l-text, .services .l-icon, .services .hint { display: none; }
    .seg-icon { display: block; }
    .ring { max-width: 460px; width: 100%; margin: 0 auto; }
    .swipe-hint { display: flex; }
  }
  @media (prefers-reduced-motion: reduce) { .ring .item, .ring .center { animation: none; } }

  /* ===== 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); }
  /* services mega — audience split + phase groupings */
  .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; }
  .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; }
    .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; }
    .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); }
  /* monochrome (white on the navy footer) + slightly smaller so all logos stay on one line */
  .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; }

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

  /* ===== Blog & news (before footer) ===== */
  .blog { background: linear-gradient(180deg,#ffffff,#f3f8fb); padding: clamp(72px,9vw,120px) 0; }
  .blog__inner { max-width: 1760px; margin: 0 auto; padding: 0 clamp(24px,3.4vw,56px); }
  .blog__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: clamp(28px,3.5vw,44px); }
  .blog__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: #6e7a84; }
  .blog__eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
  .blog__title { margin-top: 14px; font-family: "TBC Contractica Caps", var(--font); font-weight: 700; color: var(--navy); font-size: clamp(26px,3.2vw,44px); line-height: 1.12; }
  .blog__all { display: inline-flex; align-items: center; gap: 9px; font-family: "TBC Contractica Caps", var(--font); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); white-space: nowrap; }
  .blog__all svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
  .blog__all:hover svg { transform: translateX(3px); }
  .blog__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(28px,3vw,48px); align-items: stretch; }
  .feat { position: relative; display: block; border-radius: 22px; overflow: hidden; min-height: 480px; color: #fff; }
  .feat__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
  .feat:hover .feat__img { transform: scale(1.04); }
  .feat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,20,32,0) 36%, rgba(8,20,32,.5) 68%, rgba(8,20,32,.86) 100%); }
  .feat__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(24px,2.4vw,40px); }
  .feat__cat { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--navy); font-size: 12.5px; font-weight: 600; padding: 7px 15px 7px 12px; border-radius: 999px; }
  .feat__cat i { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
  .feat__title { margin-top: 16px; font-family: "TBC Contractica Caps", var(--font); font-weight: 500; font-size: clamp(18px,1.75vw,25px); line-height: 1.22; max-width: 34ch; text-shadow: 0 2px 24px rgba(8,22,36,.4); }
  .feat__meta { margin-top: 14px; display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(255,255,255,.82); }
  .feat__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.6); }
  .latest { display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
  .lpost { display: flex; gap: 18px; align-items: center; padding: 16px 0; border-bottom: 1px solid rgba(12,39,60,.09); }
  .lpost:first-child { padding-top: 0; }
  .lpost:last-child { border-bottom: none; padding-bottom: 0; }
  .lpost__img { flex: none; width: clamp(116px,11vw,150px); height: 92px; border-radius: 14px; object-fit: cover; background: var(--gray); }
  .lpost__b { min-width: 0; }
  .lpost__title { font-size: 15px; font-weight: 500; line-height: 1.36; color: var(--navy); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .2s var(--ease); }
  .lpost:hover .lpost__title { color: var(--blue); }
  .lpost__meta { margin-top: 7px; display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: #8a939b; }
  .lpost__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: #c4ccd2; }
  @media (max-width: 920px) { .blog__grid { grid-template-columns: 1fr; } .feat { min-height: 360px; } }

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

  /* ===== Intro: logo morph then slide up ===== */
  .intro { position: fixed; inset: 0; z-index: 99999; background: var(--navy); display: grid; place-items: center;
    transition: transform .68s cubic-bezier(.76,0,.24,1); will-change: transform; }
  .intro.is-up { transform: translateY(-100%); }
  .intro.is-done { display: none; }
  .intro__logo { width: 66px; height: auto; display: block; overflow: visible; }
  .intro .sym { fill: #fff; fill-opacity: 0; stroke: #fff; stroke-width: 5; stroke-linejoin: round; stroke-linecap: round;
    stroke-opacity: 1; stroke-dasharray: 1; stroke-dashoffset: 1;
    animation: symDraw .40s ease-out var(--draw) forwards, symFill .26s ease-out var(--fill) forwards, symStroke .28s ease-in-out 1.00s forwards; }
  .intro #symG { --draw: 0s;   --fill: .40s; }
  .intro #symR { --draw: .14s; --fill: .54s; }
  .intro #symE { --draw: .28s; --fill: .68s; }
  .intro #symA { --draw: .42s; --fill: .82s; }
  @keyframes symDraw   { to { stroke-dashoffset: 0; } }
  @keyframes symFill   { to { fill-opacity: 1; } }
  @keyframes symStroke { to { stroke-opacity: 0; } }
  body.intro-lock { overflow: hidden; }
  @media (prefers-reduced-motion: reduce) { .intro { display: none !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; } }

  /* ===== 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; } } @media(max-width:760px){ .hero__bg img{ top:0 !important; left:0 !important; height:100% !important; object-position:center center !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; } }
  
  /* 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; }
  }

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

/* Uploaded service icons on the wheel (tools/build_assets.py wheel_icon_css):
   polyline, stroke width kept at the design's weight for rescaled icons,
   filled icons filled, and the file's own color and vector-effect ignored. */
  .l-icon :is(path,rect,circle,polygon,polyline,line,ellipse) { fill: none; stroke: currentColor; stroke-width: calc(1.7px * var(--grea-ico-k, 1)); stroke-linecap: round; stroke-linejoin: round; vector-effect: none; }
  .c-icon :is(path,rect,circle,polygon,polyline,line,ellipse) { fill: none; stroke: currentColor; stroke-width: calc(1.7px * var(--grea-ico-k, 1)); stroke-linecap: round; stroke-linejoin: round; vector-effect: none; }
  .seg-icon :is(path,rect,circle,polygon,polyline,line,ellipse) { fill: none; stroke: currentColor; stroke-width: calc(1.8px * var(--grea-ico-k, 1)); stroke-linecap: round; stroke-linejoin: round; vector-effect: none; }
  :is(.l-icon, .c-icon, .seg-icon) .grea-ico-fill :is(path,rect,circle,polygon,polyline,line,ellipse) { fill: currentColor; stroke: none; }
  :is(.l-icon, .c-icon, .seg-icon) :is(g,path,rect,circle,polygon,polyline,line,ellipse) { color: inherit; }

/* Client review: the project card's logo belongs beside the name and status
   (tools/build_assets.py pcard_badge_in_bar). This page's prototype drew the
   badge in the card's corner, but the shared card part puts it inside
   .pcard__bar as /projects/ and the project page do, where an absolute badge
   positions against the bar and lands on the title. */
  .pcard__bar .pcard__badge { position: static; flex: none; }

/* Client review: the reels heading was the largest type on the homepage
   (tools/build_assets.py reels_title_scale). Sized from .works__title, the
   section heading it sits alongside, so the two cannot drift apart. */
  .reels__title { font-size: clamp(28px,3.4vw,48px); line-height: 1.2; }

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


/* The news column beside the featured article: three rows that share its
   height, each photograph filling its row - rather than three short rows
   spread out with the leftover space between them. Two-column layout only;
   stacked, the rows keep their natural height. */
@media (min-width: 921px) {
  .latest { justify-content: flex-start; }
  .lpost { flex: 1 1 0; min-height: 0; align-items: stretch; }
  .lpost__img { height: auto; align-self: stretch; width: clamp(140px, 40%, 250px); }
  .lpost__b { align-self: center; }
}