/* ============================================================
   Future Project — Critical CSS (first paint)
   Blocking: tokens, reset, type, layout, buttons, header, hero,
   page-hero, about above-the-fold. Remainder loads deferred.
   ============================================================ */

/* Self-hosted Cairo (variable) — latin + arabic + latin-ext */
@font-face{
  font-family:"Cairo";
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url("../fonts/cairo/cairo-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Cairo";
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url("../fonts/cairo/cairo-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Cairo";
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url("../fonts/cairo/cairo-arabic.woff2") format("woff2");
  unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* ============================================================
   Future Project — Design System
   Layout & interaction language modelled on nokia.com
   ------------------------------------------------------------
   BRAND COLOURS: change the four --fp-* values below and the
   whole site re-themes. Everything else derives from them.
   ============================================================ */

:root{
  /* --- Brand (futureproject.com.eg palette) ----------------- */
  --fp-primary:      #095091;   /* dark blue            */
  --fp-primary-700:  #073d6e;
  --fp-primary-900:  #212529;   /* charcoal dark        */
  --fp-accent:       #00AACE;   /* cyan teal            */
  --fp-accent-600:   #0090b0;

  /* --- Neutrals --------------------------------------------- */
  --ink:        #212529;
  --ink-70:     #555d66;
  --ink-50:     #777777;
  --line:       #e3e7ea;
  --line-soft:  #eef1f3;
  --surface:    #ffffff;
  --surface-2:  #f5f7f8;
  --surface-3:  #eaeef0;

  /* --- Type ------------------------------------------------- */
  --font: "Cairo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Cairo", var(--font);
  --font-nav: "Cairo", var(--font);
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* --- Metrics ---------------------------------------------- */
  --wrap: 1360px;
  --gutter: clamp(20px, 4vw, 56px);
  --header-wrap: 1180px;
  --nav-inset: 24px;
  --nav-h: 64px;
  --header-h: 64px;
  --appbar-h: 44px;
  --page-hero-appbar: 44px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;
  --section-title-gap: clamp(24px, 3vw, 32px);

  --ease: cubic-bezier(.22,.61,.36,1);
  /* Skilya / Case Condo: sticky uses 0.4s ease; Elementor surfaces use 0.3s */
  --header-morph: .4s ease;
  --header-fill: .3s ease;
  --mega-gap: 6px;
  --shadow-1: 0 1px 2px rgba(16,22,28,.06), 0 8px 24px rgba(16,22,28,.06);
  --shadow-2: 0 2px 6px rgba(16,22,28,.08), 0 22px 48px rgba(16,22,28,.13);
}

@property --appbar-h {
  syntax: "<length>";
  inherits: true;
  initial-value: 44px;
}
@property --mega-gap {
  syntax: "<length>";
  inherits: true;
  initial-value: 6px;
}

/* ============================================================
   Reset
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + var(--appbar-h) + 16px);
  transition: --appbar-h var(--header-morph), --mega-gap var(--header-morph);
}
body{
  margin:0; font-family:var(--font); font-weight:var(--fw-regular); color:var(--ink);
  background:var(--surface); line-height:1.65;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:var(--fw-bold)}
img,svg,video,iframe{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
ul{margin:0; padding:0; list-style:none}
h1,h2,h3,h4,p{margin:0}
:focus-visible{outline:2px solid var(--fp-accent); outline-offset:3px; border-radius:2px}

/* ============================================================
   Typography scale
   ============================================================ */
.t-display{font-size:clamp(2.5rem,6.2vw,4.75rem); line-height:1.06; letter-spacing:-.028em; font-weight:var(--fw-bold)}
.t-h1{font-size:clamp(2.1rem,4.6vw,3.5rem); line-height:1.1; letter-spacing:-.024em; font-weight:var(--fw-bold)}
.t-h2{font-size:clamp(1.75rem,3.2vw,2.75rem); line-height:1.16; letter-spacing:-.02em; font-weight:var(--fw-semibold)}
.t-h3{font-size:clamp(1.25rem,1.9vw,1.6rem); line-height:1.28; letter-spacing:-.012em; font-weight:var(--fw-semibold)}
.t-h4{font-size:1.0625rem; line-height:1.38; letter-spacing:-.008em; font-weight:var(--fw-semibold)}
.t-lead{font-size:clamp(1.0625rem,1.35vw,1.3125rem); line-height:1.65; font-weight:var(--fw-regular); color:var(--ink-70)}
.t-body{font-size:1rem; font-weight:var(--fw-regular); color:var(--ink-70)}
.t-small{font-size:.875rem; font-weight:var(--fw-regular); color:var(--ink-50)}

.kicker{
  display:inline-block; font-size:.75rem; font-weight:var(--fw-semibold);
  letter-spacing:.14em; text-transform:uppercase; color:var(--fp-accent);
}
.kicker--onvideo{color:#5ed4ec}

/* ============================================================
   Layout helpers
   ============================================================ */
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter)}
/* Keep every in-page section on the same content rail as product cards */
main > section > .wrap,
main > .section > .wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
  box-sizing:border-box;
}
.section{padding-block:clamp(64px,8vw,120px)}
.section--tight{padding-block:clamp(48px,5vw,80px)}
.section--grey{background:var(--surface-2)}
.section--ink{background:var(--fp-primary-900); color:#fff}
.section--ink .t-lead,.section--ink .t-body{color:rgba(255,255,255,.72)}
.section--ink .t-small{color:rgba(255,255,255,.55)}

.section-head{max-width:800px; margin-bottom:var(--section-title-gap)}
.section-head .kicker{margin-bottom:14px}
.section-head .t-lead{margin-top:18px}

.section-head--split{
  max-width:none; display:flex; gap:32px;
  align-items:flex-end; justify-content:space-between; flex-wrap:wrap;
}
.section-head--split > div{max-width:720px}

.grid{display:grid; gap:clamp(20px,2.2vw,32px)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
}

/* ============================================================
   Buttons  (Nokia-style pill CTAs)
   ============================================================ */
.btn{
  position:relative;
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 26px; border-radius:999px;
  font-size:.9375rem; font-weight:600; letter-spacing:-.005em;
  border:0 solid transparent; cursor:pointer;
  white-space:nowrap;
  outline:1px solid rgba(255,255,255,.45);
  outline-offset:0;
  box-shadow:inset 0 0 20px rgba(255,255,255,0);
  text-shadow:none;
  transition:all 1.25s cubic-bezier(.19,1,.22,1);
}
.btn svg{width:16px; height:16px; flex:none; transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn:hover,
.btn:focus-visible{
  border:1px solid rgba(255,255,255,.7);
  box-shadow:inset 0 0 20px rgba(255,255,255,.45), 0 0 22px rgba(255,255,255,.22);
  outline-color:rgba(255,255,255,0);
  outline-offset:14px;
}
@media (prefers-reduced-motion:reduce){
  .btn{transition:background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease}
  .btn:hover,
  .btn:focus-visible{outline-offset:4px}
}

.btn--primary{background:var(--fp-primary); color:#fff}
.btn--primary:hover{background:var(--fp-primary-700); color:#fff}
.btn--nav{
  gap:10px; padding:8px 10px 8px 18px; border-radius:4px;
  font-size:.875rem; font-weight:600; color:var(--ink);
  background:#fff; border:1px solid #d8dde2;
  outline-color:rgba(9,80,145,.28);
  box-shadow:none;
}
.btn--nav:hover{
  background:#f7f8f9; border:1px solid #c5ccd3; color:var(--ink);
  box-shadow:inset 0 0 16px rgba(9,80,145,.06), 0 0 18px rgba(9,80,145,.12);
  outline-color:rgba(9,80,145,0);
  outline-offset:10px;
}
.btn--nav:hover svg{transform:none}
.btn--nav__ico{
  width:28px; height:28px; display:grid; place-items:center;
  background:var(--fp-accent); color:#fff; border-radius:3px; flex:none;
}
.btn--nav__ico svg{width:12px; height:12px}
.btn--accent{background:var(--fp-accent); color:#fff}
.btn--accent:hover{background:var(--fp-accent-600); color:#fff}
.btn--ghost{
  border:1px solid var(--line); color:var(--ink); background:#fff;
  outline-color:rgba(9,80,145,.28);
}
.btn--ghost:hover{
  border:1px solid var(--ink); background:var(--ink); color:#fff;
  box-shadow:inset 0 0 20px rgba(255,255,255,.2), 0 0 20px rgba(9,80,145,.18);
  outline-color:rgba(9,80,145,0);
  outline-offset:14px;
}
.btn--onvideo{border:1px solid rgba(255,255,255,.55); color:#fff; background:transparent}
.btn--onvideo:hover{
  background:#fff; color:var(--fp-primary-900); border:1px solid #fff;
  box-shadow:inset 0 0 20px rgba(255,255,255,.5), 0 0 22px rgba(255,255,255,.28);
  outline-color:rgba(255,255,255,0);
  outline-offset:14px;
}
.btn--sm{padding:9px 18px; font-size:.875rem}

/* Text link with animated arrow — Nokia's "Explore →" */
.link-arrow{
  display:inline-flex; align-items:center; gap:9px;
  font-weight:600; font-size:.9375rem; color:var(--fp-primary);
  transition:gap .25s var(--ease), color .25s var(--ease);
}
.link-arrow svg{width:15px; height:15px; transition:transform .3s var(--ease)}
.link-arrow:hover{color:var(--fp-accent-600)}
.link-arrow:hover svg{transform:translateX(5px)}
.section--ink .link-arrow{color:#5ed4ec}

/* ============================================================
   HEADER — load: floating glass bar; scroll: full-width overlay
   ============================================================ */
html.is-scrolled{
  --appbar-h: 0px;
  --mega-gap: 0px;
  --header-h: 64px;
  --nav-h: 64px;
}

.site-header{
  position:fixed; inset:0 0 auto 0; z-index:900;
  background:transparent;
  border:none;
  overflow:visible;
}

/* Hours + hiring: sit on the same inset as the glass bar */
.appbar{
  height:44px;
  overflow:hidden;
  background:transparent;
  color:rgba(255,255,255,.88);
  font-size:.8125rem;
  font-weight:500;
  border:0;
  box-shadow:none;
  padding:14px 0 8px;
  opacity:1;
  pointer-events:auto;
  transition:opacity var(--header-fill), height var(--header-morph), padding var(--header-morph);
}
.appbar .wrap{
  display:flex;
  align-items:center;
  height:22px;
  width:100%;
  max-width:100%;
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.appbar__list{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:100%;
  margin:0;
  padding:0;
  list-style:none;
  white-space:nowrap;
}
.appbar__list li{display:inline-flex; align-items:center; gap:8px; min-width:0}
.appbar__icon{flex:none; width:14px; height:14px; color:var(--fp-accent)}
.appbar__icon svg{width:100%; height:100%; display:block}
.appbar__text{white-space:nowrap; color:rgba(255,255,255,.88)}
.appbar__hire{margin-inline-start:auto}
.appbar__hire a{
  display:inline-flex; align-items:center;
  background:transparent; color:var(--fp-accent);
  font-size:.8125rem; font-weight:600;
}
.appbar__hire a:hover{color:#fff}

html.is-scrolled .appbar{
  height:0;
  overflow:hidden;
  padding:0;
  opacity:0;
  pointer-events:none;
}

/* Light pages (no dark hero): keep hours + nav readable */
.has-light-header .appbar{
  background:#071f34;
  color:rgba(255,255,255,.88);
}
.has-light-header .appbar__text{color:rgba(255,255,255,.88)}
.has-light-header .appbar__hire a:hover{color:#fff}
.has-light-header .header-main{
  background:#095091;
  border-bottom:1px solid rgba(255,255,255,.12);
  box-shadow:0 8px 24px rgba(0,0,0,.16);
}
.has-light-header .header-main .wrap{
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-color:transparent;
  box-shadow:none;
}
.has-light-header .brand__logo{mix-blend-mode:normal}

.header-main{
  height:auto;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:0;
  background:transparent;
  backdrop-filter:blur(0);
  -webkit-backdrop-filter:blur(0);
  border-bottom:1px solid transparent;
  transition:height var(--header-morph), background var(--header-fill), box-shadow var(--header-fill),
             backdrop-filter var(--header-morph), -webkit-backdrop-filter var(--header-morph),
             border-color var(--header-fill);
}

/* Load: floating glass bar (medium radius, not a capsule) */
.header-main .wrap{
  display:flex;
  align-items:center;
  width:100%;
  max-width:100%;
  min-height:64px;
  height:64px;
  margin-inline:auto;
  padding:0 var(--gutter);
  position:relative;
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid rgba(255,255,255,.40);
  border-radius:0;
  box-shadow:0 8px 28px rgba(0,0,0,.18);
  transition:width var(--header-morph), max-width var(--header-morph), padding var(--header-morph),
             background var(--header-fill), border-radius var(--header-fill),
             border-color var(--header-fill), box-shadow var(--header-fill),
             backdrop-filter var(--header-morph), -webkit-backdrop-filter var(--header-morph);
}

/* Scroll: full-width FP blue frosted bar — not a floating card */
html.is-scrolled .header-main{
  height:64px;
  align-items:center;
  background:rgba(9,80,145,.58);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 1px 0 rgba(255,255,255,.08), 0 8px 24px rgba(0,0,0,.16);
  border-bottom:1px solid rgba(255,255,255,.12);
}
html.is-scrolled .header-main .wrap{
  width:100%;
  max-width:100%;
  min-height:64px;
  height:64px;
  padding:0 var(--gutter);
  background:transparent;
  backdrop-filter:blur(0) saturate(100%);
  -webkit-backdrop-filter:blur(0) saturate(100%);
  border:1px solid transparent;
  border-radius:0;
  box-shadow:0 0 0 rgba(0,0,0,0);
}

.brand{
  display:flex; align-items:center; flex:none;
  order:-1;
  position:relative; z-index:2;
  padding-right:24px;
  background:none;
  margin:0;
  box-shadow:none;
  align-self:center;
  overflow:hidden;
}
.brand__logo{
  height:40px;
  width:auto;
  display:block;
  transform-origin:left center;
  mix-blend-mode:screen;
  transition:height var(--header-fill);
  animation:
    brand-logo-in 1s var(--ease) both,
    brand-logo-breathe 3.2s ease-in-out 1.1s infinite;
}
@keyframes brand-logo-in{
  from{opacity:0; transform:scale(.92) translateY(8px)}
  to{opacity:1; transform:scale(1)}
}
@keyframes brand-logo-breathe{
  0%, 100%{transform:scale(1)}
  50%{transform:scale(1.07)}
}
html.is-scrolled .brand__logo{height:28px}
@media (prefers-reduced-motion:reduce){
  .brand__logo{animation:none; transform:none}
  .footer-logo img{animation:none; transform:none}
}

.header-main .wrap > nav{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}
.nav{
  display:flex; align-items:center; gap:4px;
  position:static; transform:none; flex:0 1 auto; justify-content:center; margin-left:0;
}
html.is-scrolled .nav{
  position:static; left:auto; top:auto; transform:none;
  flex:1 1 auto; justify-content:flex-end; margin-left:16px;
}
.nav__item{position:relative}
.nav__link{
  display:flex; align-items:center;
  padding:8px 14px; border-radius:0;
  font-family:var(--font-nav); font-size:.95rem; font-weight:500;
  color:#fff;
  transition:color .25s var(--ease), background .25s var(--ease), padding .35s var(--ease), font-size .35s var(--ease);
  letter-spacing:.01em;
  white-space:nowrap;
}
html.is-scrolled .nav__link{
  padding:8px 12px; font-size:.9rem; font-weight:500;
  color:#fff;
}
.nav__item[data-menu] .nav__link::after{content:none}
.nav__link:hover{color:#fff; background:transparent; border:0; box-shadow:none}
html.is-scrolled .nav__link:hover{color:#fff; background:rgba(255,255,255,.08); border:0; border-radius:8px; box-shadow:none}
.nav__item.is-active .nav__link{color:#fff; background:transparent}
.nav__link[aria-current="page"]{color:#fff}
.nav__link[aria-current="page"]::before{content:none}

.header-actions{display:flex; align-items:center; gap:0; flex:none; margin-inline-start:0}
html.is-scrolled .header-actions{margin-inline-start:0; gap:0}
.icon-btn{
  width:36px; height:36px; display:grid; place-items:center; border-radius:999px;
  color:#fff; transition:color .25s var(--ease);
}
.icon-btn svg{width:18px; height:18px}
.icon-btn:hover{color:#fff}

.btn--nav{
  gap:0; padding:8px 16px; border-radius:0;
  font-family:var(--font-nav); font-size:.95rem; font-weight:500;
  color:#fff;
  background:transparent; border:0;
}
html.is-scrolled .btn--nav{
  padding:8px 14px; font-size:.9rem; font-weight:500;
  color:#fff;
}
.btn--nav:hover{transform:none; color:#fff; background:transparent; border:0}
html.is-scrolled .btn--nav:hover{color:#fff; background:rgba(255,255,255,.08); border:0; border-radius:8px}
.btn--nav:hover svg{transform:none}
.btn--nav__ico{display:none}

/* ---- Mega menu: match header bar (load = floating wrap; scroll = full overlay) ---- */
.mega{
  position:fixed;
  left:50%;
  right:auto;
  width:calc(100% - (var(--nav-inset) * 2));
  max-width:var(--header-wrap);
  top:calc(var(--appbar-h) + 64px + var(--mega-gap));
  z-index:880;
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid rgba(255,255,255,.40);
  border-radius:var(--r-lg);
  box-shadow:0 8px 28px rgba(0,0,0,.18);
  opacity:0; visibility:hidden;
  transform:translateX(-50%) translateY(-8px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s ease,
             top var(--header-morph), width var(--header-morph), max-width var(--header-morph),
             background var(--header-fill), border-radius var(--header-fill),
             border-color var(--header-fill), box-shadow var(--header-fill),
             backdrop-filter var(--header-morph), -webkit-backdrop-filter var(--header-morph);
}
.mega.is-open{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}
html.is-scrolled .mega{
  left:50%; right:auto;
  width:100%;
  max-width:100%;
  background:rgba(9,80,145,.58);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid transparent;
  border-top-color:rgba(255,255,255,.12);
  border-radius:0;
  box-shadow:0 8px 24px rgba(0,0,0,.16);
  transform:translateX(-50%) translateY(-8px);
}
html.is-scrolled .mega.is-open{transform:translateX(-50%) translateY(0)}
.mega > .wrap{
  width:100%; max-width:none; padding-inline:22px 26px; margin-inline:auto;
  transition:padding var(--header-morph);
}
html.is-scrolled .mega > .wrap{max-width:none; padding-inline:var(--gutter)}
.mega__inner{
  display:grid; grid-template-columns:1.15fr 1fr 1fr .95fr;
  grid-template-areas:none;
  gap:clamp(24px,3vw,48px); padding:28px 0 32px;
}
html.is-scrolled .mega__inner{padding:28px 0 32px}
.mega__intro,.mega__col:nth-child(2),.mega__col:nth-child(3),.mega__promo{grid-area:auto}
.mega__intro .t-h3{margin-bottom:12px; color:#fff}
.mega__intro .t-body{font-size:.9375rem; margin-bottom:20px; color:rgba(255,255,255,.78)}
html.is-scrolled .mega__intro .t-h3{color:#fff}
html.is-scrolled .mega__intro .t-body{color:rgba(255,255,255,.78)}
.mega__col h4{
  font-size:.6875rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.55); margin-bottom:16px;
}
html.is-scrolled .mega__col h4{color:rgba(255,255,255,.55)}
.mega__col li + li{margin-top:2px}
.mega__col a{
  display:block; padding:8px 12px 8px 14px; margin-inline:-12px; border-radius:12px;
  font-size:.9375rem; font-weight:500; color:#fff;
  position:relative;
  transition:background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.mega__col a span{display:block; font-size:.8125rem; font-weight:400; color:rgba(255,255,255,.58); margin-top:2px}
.mega__col a:hover{background:rgba(255,255,255,.12); color:#fff}
.mega__col a.is-current,
.mega__col a[aria-current="page"]{
  background:rgba(255,255,255,.16);
  color:#fff;
  box-shadow:
    0 0 0 1px rgba(0,170,206,.45),
    0 8px 20px rgba(0,170,206,.12),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.mega__col a.is-current::before,
.mega__col a[aria-current="page"]::before{
  content:"";
  position:absolute;
  left:0;
  top:18%;
  bottom:18%;
  width:3px;
  border-radius:999px;
  background:var(--fp-accent,#00AACE);
  box-shadow:0 0 10px rgba(0,170,206,.55);
}
html.is-scrolled .mega__col a{color:#fff}
html.is-scrolled .mega__col a span{color:rgba(255,255,255,.58)}
html.is-scrolled .mega__col a:hover{background:rgba(255,255,255,.12); color:#fff}
html.is-scrolled .mega__col a.is-current,
html.is-scrolled .mega__col a[aria-current="page"]{
  background:rgba(255,255,255,.16);
  color:#fff;
}
.mega .link-arrow{color:#7ee3f4}
html.is-scrolled .mega .link-arrow{color:#7ee3f4}

.mega__promo{
  background:linear-gradient(150deg,var(--fp-primary),var(--fp-primary-900));
  color:#fff; border-radius:var(--r-lg); padding:26px; display:flex;
  flex-direction:column; justify-content:space-between; gap:18px; min-height:210px;
  position:relative; overflow:hidden; isolation:isolate;
}
.mega__promo--media{
  padding:0;
  min-height:240px;
  gap:0;
  background-color:var(--fp-primary-900);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}
.mega__promo--media .mega__promo-hit{
  position:absolute; inset:0; z-index:1;
  display:block; text-indent:-9999px; overflow:hidden;
}
.mega__promo--media::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg,rgba(4,28,46,.15),rgba(4,28,46,.45));
  pointer-events:none;
}
.mega__promo .t-h4{margin-bottom:8px}
.mega__promo p{font-size:.875rem; color:rgba(255,255,255,.75)}
.mega__promo .link-arrow{color:#5ed4ec}
@media (max-width:1100px){ .mega__inner{grid-template-columns:1fr 1fr} .mega__promo{grid-column:span 2} }

.scrim{
  position:fixed; inset:calc(var(--header-h) + var(--appbar-h)) 0 0 0; z-index:870;
  background:rgba(33,37,41,.40); backdrop-filter:blur(2px);
  opacity:0; visibility:hidden; transition:opacity .28s var(--ease), visibility .28s;
}
.scrim.is-open{opacity:1; visibility:visible}

/* ---- Mobile nav ---- */
.burger{display:none}
.mobile-nav{
  position:fixed; inset:calc(var(--header-h) + var(--appbar-h)) 0 0 0; z-index:890; background:#fff;
  padding:12px var(--gutter) 48px; overflow-y:auto;
  transform:translateX(100%); transition:transform .34s var(--ease);
}
.mobile-nav.is-open{transform:translateX(0)}
.mobile-nav details{border-bottom:1px solid var(--line-soft)}
.mobile-nav summary{
  list-style:none; cursor:pointer; padding:17px 4px;
  font-size:1.0625rem; font-weight:600; display:flex; align-items:center; justify-content:space-between;
}
.mobile-nav summary::-webkit-details-marker{display:none}
.mobile-nav summary::after{content:"+"; font-size:1.35rem; font-weight:400; color:var(--ink-50)}
.mobile-nav details[open] summary::after{content:"–"}
.mobile-nav details ul{padding:0 4px 16px}
.mobile-nav details a{display:block; padding:10px 0; font-size:.9375rem; color:var(--ink-70)}
.mobile-nav > a.mobile-link{display:block; padding:17px 4px; font-size:1.0625rem; font-weight:600; border-bottom:1px solid var(--line-soft)}
.mobile-nav .btn{margin-top:26px; width:100%; justify-content:center}

@media (max-width:720px){
  .appbar__text{font-size:.72rem}
}
@media (max-width:980px){
  :root{ --appbar-h: 40px; --page-hero-appbar: 40px; }
  .nav{display:none}
  .mega{display:none}
  .burger{display:grid}
  .appbar{padding:12px 0 6px; height:40px}
  .appbar .wrap,
  .header-main .wrap{width:100%; max-width:100%}
  .header-main .wrap{min-height:64px; height:64px; padding:0 16px; border-radius:0}
  html.is-scrolled .header-main{height:64px}
  html.is-scrolled .header-main .wrap{width:100%; max-width:100%; min-height:64px; height:64px; padding:0 16px; border-radius:0}
  .brand{padding-right:0}
  .brand__logo{height:34px}
  html.is-scrolled .brand__logo{height:24px}
  .header-actions .btn--nav{display:none}
}
@media (max-width:430px){
  .brand__logo{height:32px}
  html.is-scrolled .brand__logo{height:24px}
}
@media (min-width:981px){ .mobile-nav{display:none} }

/* ============================================================
   HERO — full-bleed background video (Nokia style)
   ============================================================ */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:flex-start;
  padding-top:calc(var(--header-h) + var(--appbar-h) + clamp(48px,8vw,120px)); padding-bottom:clamp(120px,14vw,160px);
  background:var(--fp-primary-900); overflow:hidden; isolation:isolate;
}
.hero__video{position:absolute; inset:0; z-index:0; overflow:hidden}
.hero__media{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  min-width:100%; min-height:100%; width:auto; height:auto;
  object-fit:cover; opacity:0; transition:opacity .6s var(--ease);
}
.hero__media.is-ready{opacity:1}
/* keep 16:9 iframe covering any viewport ratio */
.hero__video iframe{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:100vw; height:56.25vw;           /* 16:9 by width  */
  min-width:177.78vh; min-height:100vh;  /* 16:9 by height */
  border:0; pointer-events:none;
  opacity:0; transition:opacity .45s var(--ease);
}
.hero__video iframe.is-ready{opacity:1}
.hero__video::after{
  content:""; position:absolute; inset:0; z-index:1;
  pointer-events:none;
}
.hero__poster{
  /* Fallback shown before the video loads (and if it is blocked).
     See the note below to swap in a still frame. */
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(0,170,206,.30), transparent 58%),
    radial-gradient(90% 70% at 12% 88%, rgba(9,80,145,.85), transparent 62%),
    linear-gradient(150deg,#181c20 0%,#095091 48%,#212529 100%);
  background-size:cover; background-position:center;
}
/* Optional: add a still frame. Save it as assets/img/hero-poster.jpg and
   add class="hero__poster has-still" to the div in index.html.          */
.hero__poster.has-still{background-image:url("../img/hero-poster.jpg")}
.hero__overlay{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to top, rgba(33,37,41,.78) 0%, rgba(33,37,41,.38) 42%, rgba(33,37,41,.16) 72%, rgba(33,37,41,.28) 100%),
    linear-gradient(to right, rgba(33,37,41,.48) 0%, rgba(33,37,41,.10) 58%, transparent 100%);
}
.hero__inner{position:relative; z-index:2; max-width:min(60vw, 700px); color:#fff}
.hero .t-display{margin:0 0 8px; text-wrap:balance; font-size:clamp(1.6rem,3.4vw,2.4rem); font-weight:500}
.hero__subtitle{
  font-size:clamp(1.6rem,3.4vw,2.4rem); font-weight:500; color:#fff;
  margin:0 0 26px; letter-spacing:-.01em;
  overflow:hidden; white-space:nowrap;
  display:inline-block; width:0;
  animation:typewriter 4.5s steps(30,end) .6s forwards;
}
@keyframes typewriter{from{width:0}to{width:15em}}

/* --- copy stack: all four paragraphs share one grid cell so the CTA
       below never jumps as they crossfade --------------------------- */
.hero__copy{display:grid; max-width:min(55vw, 560px)}
.hero__para{
  grid-area:1 / 1; margin:0;
  font-size:clamp(1.0625rem,1.5vw,1.3125rem); line-height:1.6;
  color:rgba(255,255,255,.82);
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.hero__para.is-active{opacity:1; transform:none; pointer-events:auto}
.hero__para strong{color:#fff; font-weight:600}

.hero__cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px}

/* --- stat tabs — Nokia-style, pinned to hero bottom ---------------- */
.hero__meta{
  position:absolute; bottom:0; left:0; right:0; z-index:4;
  display:flex; padding:0 var(--gutter) 24px;
  gap:18px;
}
.hero__stat{
  position:relative; display:block; flex:1; text-align:center;
  padding:14px 18px 18px; cursor:pointer;
  color:rgba(255,255,255,.88);
  background:rgba(33,37,41,.55);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px;
  transition:background .35s var(--ease), color .35s var(--ease),
             border-color .35s var(--ease);
  -webkit-tap-highlight-color:transparent;
  overflow:hidden;
}
.hero__stat::after{display:none}
.hero__stat:hover{background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.20)}
.hero__stat.is-active{
  background:#fff; color:var(--ink);
  border-color:#fff;
}
.hero__stat:focus-visible{outline:2px solid var(--fp-accent); outline-offset:2px; border-radius:10px}

.hero__bar{
  position:absolute; bottom:4px; left:6px; right:6px; height:5px; z-index:1; overflow:hidden;
  border-radius:999px;
}
.hero__bar i{
  display:block; height:100%; width:100%;
  background:var(--fp-accent);
  border-radius:999px;
  transform:scaleX(0); transform-origin:left center;
}
.hero__stat b{
  display:block; font-family:var(--font-nav); font-size:clamp(.875rem,1.2vw,1rem); font-weight:500;
  letter-spacing:0; line-height:1.3;
}
.hero__stat-label{display:none}


@media (max-width:760px){
  .hero__meta{flex-wrap:wrap; gap:6px; padding:0 var(--gutter) 12px}
  .hero__stat{flex:1 1 calc(50% - 6px); padding:12px 10px 14px}
  .hero__stat b{font-size:.8125rem}
}

/* Large centered play/pause — Nokia style */
.hero__playpause{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:5;
  width:auto; height:auto; border-radius:0; display:grid; place-items:center;
  border:none; color:#fff; background:transparent;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
  cursor:pointer; opacity:.92;
}
.hero__playpause:hover{opacity:1; transform:translate(-50%,-50%) scale(1.05)}
.hero__playpause svg{width:110px; height:110px; filter:drop-shadow(0 2px 10px rgba(0,0,0,.30))}

/* Small mute button — bottom right above tabs */
.hero__mute{
  position:absolute; right:var(--gutter); bottom:clamp(100px,12vw,140px); z-index:5;
  width:44px; height:44px; border-radius:999px; display:grid; place-items:center;
  border:1.5px solid rgba(255,255,255,.4); color:#fff; background:rgba(33,37,41,.40);
  backdrop-filter:blur(6px); transition:background .25s var(--ease);
}
.hero__mute:hover{background:rgba(33,37,41,.7)}
.hero__mute svg{width:18px; height:18px}
@media (max-width:760px){ .hero__playpause svg{width:72px; height:72px} }

/* Inner-page hero — Skilya-style banner, FP colours */
.page-hero{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:calc(var(--header-h) + var(--page-hero-appbar) + 360px);
  height:calc(var(--header-h) + var(--page-hero-appbar) + 360px);
  flex-shrink:0;
  padding:calc(var(--header-h) + var(--appbar-h)) 24px 0;
  color:#fff;
  background:transparent;
}
.page-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(180deg, rgba(9,80,145,.34) 0%, rgba(0,0,0,.42) 55%, rgba(0,0,0,.55) 100%),
    url("../img/pages/header/inner-header-dc.webp?v=20260908webp1") center 42%/cover no-repeat;
}
.page-hero .wrap,
.page-hero__inner{
  position:relative;
  z-index:3;
  display:inline-block;
  width:min(40em, calc(100% - 48px));
  max-width:40em;
  margin:0 auto;
  padding:1.5em 0;
  padding-inline:0;
  text-align:center;
  font:500 1em/1.55 var(--font);
  color:rgba(255,255,255,.58);
  text-transform:uppercase;
  letter-spacing:.12em;
  border:0;
  background:none;
}
.page-hero h1,
.page-hero .t-h1{
  font-family:var(--font);
  font-size:35px;
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.03em;
  text-transform:uppercase;
  padding:.25em 0 .325em;
  display:block;
  margin:0 auto;
  color:#fff;
  text-shadow:0 0 80px rgba(255,255,255,.35);
  background-image:repeating-linear-gradient(-45deg,#fff 0 12px,#b7d4ea 12px 24px,#8ee8f5 24px 36px,#e8f6fb 36px 48px);
  background-size:220% 220%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  -webkit-animation:aitf 80s linear infinite;
  animation:aitf 80s linear infinite;
  -webkit-transform:translate3d(0,0,0);
  transform:translate3d(0,0,0);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
@keyframes aitf{
  0%{background-position:0% 50%}
  100%{background-position:100% 50%}
}
.page-hero .kicker{display:none}
.page-hero .crumbs{
  display:block;
  margin:0;
  font:inherit;
  font-size:1em;
  font-weight:400;
  letter-spacing:inherit;
  text-transform:uppercase;
  color:inherit;
}
.page-hero .crumbs a{color:inherit; text-decoration:none}
.page-hero .crumbs a:hover{color:#fff; -webkit-text-fill-color:#fff}
.page-hero .crumbs span{
  letter-spacing:0;
  margin-inline:.4em;
  opacity:.7;
}
.page-hero__lead{
  display:block;
  margin:0 auto;
  max-width:none;
  font:inherit;
  font-size:1em;
  line-height:1.5;
  letter-spacing:inherit;
  color:inherit;
  font-weight:400;
}
.page-hero__kicker{
  display:block;
  margin:0 0 10px;
  font:inherit;
  color:inherit;
  font-size:1em;
  font-weight:400;
  letter-spacing:inherit;
  text-transform:uppercase;
}
@media (max-width:760px){
  .page-hero .wrap,
  .page-hero__inner{letter-spacing:.12em; width:calc(100% - 40px)}
  .page-hero h1,
  .page-hero .t-h1{font-size:clamp(1.5rem,7vw,35px)}
}
@media (prefers-reduced-motion:reduce){
  .page-hero h1,
  .page-hero .t-h1{animation:none; -webkit-animation:none}
}
.page-hero--center{text-align:center}

.crumbs{font-size:.8125rem; color:rgba(255,255,255,.6); margin-bottom:6px}
.crumbs a:hover{color:#fff}
.crumbs span{margin-inline:7px; opacity:.5}

/* About page — Skilya-style layout, FP palette */
.about-who{
  display:grid;
  grid-template-columns:minmax(280px,.92fr) minmax(280px,1.08fr);
  gap:clamp(28px,4.5vw,72px);
  align-items:center;
}
.about-collage{
  position:relative;
  width:100%;
  max-width:520px;
  margin-inline:auto 0;
  padding:28px 48px 56px 28px;
  overflow:visible;
  --mx:0; --my:0; --sx:0px; --sy:0px;
}
.about-collage__fill{
  position:absolute; z-index:0; pointer-events:none;
  top:28px; left:52px; right:36px; bottom:88px;
  border-radius:20px;
  background:var(--fp-accent);
  transform-origin:center center;
  transform:rotate(-6deg) translate(calc(var(--mx)*-18px), calc(var(--my)*-14px));
  animation:collageFillIn .7s ease-out;
  transition:transform .35s var(--ease);
}
.about-collage:hover .about-collage__fill{
  transform:rotate(-11deg) translate(calc(var(--mx)*-22px), calc(var(--my)*-18px));
}
@keyframes collageFillIn{
  from{transform:rotate(0deg); opacity:0}
  to{transform:rotate(-6deg); opacity:1}
}
.about-collage__corner{
  position:absolute; z-index:3; pointer-events:none;
  top:14px; left:14px;
  width:18%; height:22%;
  border-top:4px solid var(--fp-accent);
  border-left:4px solid var(--fp-accent);
  border-radius:20px 0 0 0;
}
.about-collage__main{
  position:relative; z-index:1; display:block;
  width:88%; margin-left:auto;
  height:clamp(380px,42vw,500px);
  object-fit:cover; object-position:center 28%; border-radius:20px;
  filter:drop-shadow(0 6px 11px rgba(0,0,0,.23));
  transform:translate3d(calc(var(--mx)*22px), calc(var(--my)*16px), 0);
  transition:transform .18s linear;
}
.about-collage__sub{
  position:absolute; z-index:2;
  left:0; bottom:8px;
  width:58%; height:clamp(150px,18vw,210px);
  object-fit:cover; border-radius:20px;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.2));
  transform:translate3d(calc(var(--sx) + var(--mx)*-32px), calc(var(--my)*-18px), 0);
  transition:transform .18s linear;
}
.about-collage__badge{
  position:absolute; top:12%; right:-4%; z-index:4;
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; color:#151f35;
  font-family:var(--font-display);
  font-size:.95rem; font-weight:700; line-height:1;
  padding:14px 22px; border-radius:24px;
  filter:drop-shadow(0 7px 24px rgba(0,0,0,.1));
  transform:translate3d(0, var(--sy), 0);
  transition:transform .2s linear;
}
.about-collage__badge svg{color:var(--fp-accent); flex:none}
.about-who__copy{min-width:0}
.about-who__copy .kicker{color:var(--fp-accent); letter-spacing:.02em; text-transform:none; font-family:var(--font-display); font-size:1.05rem; font-weight:700}
.about-who__copy .t-h2{
  font-family:var(--font-display);
  font-size:clamp(1.85rem,3.4vw,2.9rem);
  font-weight:800; letter-spacing:-.03em; line-height:1.08;
  margin:8px 0 28px; color:#111;
}
.about-who__copy .t-h2 em{font-style:normal; color:var(--fp-accent)}
.about-tabs{position:relative}
.about-tabs__radio{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
}
.about-tabs__nav{
  --tab-slant:18px;
  display:flex; align-items:stretch;
  height:54px; margin:0 0 28px;
  overflow:visible;
}
.about-tabs__nav label{
  --tab-fill:#e6e6e6;
  --tab-line:#c8c8c8;
  position:relative; z-index:1;
  flex:1 1 0; display:flex; align-items:center; justify-content:center;
  margin:0 0 0 calc(var(--tab-slant) * -.72);
  padding:0 18px;
  color:#111; background:transparent; border:0; border-radius:0;
  font-family:var(--font-display);
  font-size:.95rem; font-weight:700; letter-spacing:.01em;
  cursor:pointer; user-select:none;
  isolation:isolate;
  -webkit-tap-highlight-color:transparent;
}
.about-tabs__nav label:first-of-type{margin-left:0; z-index:3}
.about-tabs__nav label:nth-of-type(2){--tab-fill:#eeeeee; z-index:2}
.about-tabs__nav label:last-of-type{z-index:1}
.about-tabs__nav label::before,
.about-tabs__nav label::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  clip-path:polygon(var(--tab-slant) 0, 100% 0, calc(100% - var(--tab-slant)) 100%, 0 100%);
}
.about-tabs__nav label:first-of-type::before,
.about-tabs__nav label:first-of-type::after{
  clip-path:polygon(0 0, 100% 0, calc(100% - var(--tab-slant)) 100%, 0 100%);
}
.about-tabs__nav label:last-of-type::before,
.about-tabs__nav label:last-of-type::after{
  clip-path:polygon(var(--tab-slant) 0, 100% 0, 100% 100%, 0 100%);
}
.about-tabs__nav label::before{background:var(--tab-line); z-index:-2}
.about-tabs__nav label::after{inset:1px; background:var(--tab-fill); z-index:-1}
.about-tabs__nav label span{position:relative; z-index:1}
.about-tabs.is-about label[for="who-about"],
.about-tabs.is-mission label[for="who-mission"],
.about-tabs.is-vision label[for="who-vision"],
.about-tabs:has(#who-about:checked) label[for="who-about"],
.about-tabs:has(#who-mission:checked) label[for="who-mission"],
.about-tabs:has(#who-vision:checked) label[for="who-vision"]{
  --tab-fill:var(--fp-accent); --tab-line:var(--fp-accent); color:#fff; z-index:5;
}
.about-tabs__stage{
  display:grid;
  align-items:start;
}
.about-tabs__panel{
  grid-area:1 / 1;
  display:none;
  color:#4a4a4a; font-family:var(--font); font-size:1rem; font-weight:400; line-height:1.7;
}
.about-tabs.is-about .about-tabs__panel[data-panel="about"],
.about-tabs.is-mission .about-tabs__panel[data-panel="mission"],
.about-tabs.is-vision .about-tabs__panel[data-panel="vision"],
.about-tabs:has(#who-about:checked) .about-tabs__panel[data-panel="about"],
.about-tabs:has(#who-mission:checked) .about-tabs__panel[data-panel="mission"],
.about-tabs:has(#who-vision:checked) .about-tabs__panel[data-panel="vision"]{
  display:block;
}
.about-tabs__panel p + p{margin-top:14px}
.about-tabs__panel strong{color:#111; font-weight:700}
.about-checks{
  display:grid; grid-template-columns:1fr 1fr; gap:18px 28px;
  margin-top:28px; padding:0;
}
.about-checks li{
  display:flex; align-items:flex-start; gap:12px;
  font-family:var(--font-display);
  font-size:.92rem; font-weight:700; color:#111; line-height:1.35;
}
.about-checks i{
  width:28px; height:28px; flex:none;
  display:grid; place-items:center;
  border-radius:50%; background:var(--fp-accent); color:#111;
}
.about-checks i svg{width:13px; height:13px; display:block}
.about-prose{max-width:920px}
.about-prose p + p{margin-top:16px}
.stripe-sep{
  position:relative;
  height:30px;
  overflow:hidden;
  background:#fff;
  pointer-events:none;
  width:100%;
}
.stripe-sep__track{
  display:flex;
  width:max-content;
  height:100%;
  margin-left:-100px;
  animation:stripeMarquee 28s linear infinite;
}
.stripe-sep__set{
  display:flex;
  height:100%;
  flex:none;
}
.stripe-sep__set i{
  position:relative;
  flex:none;
  width:28px;
  height:100%;
  margin:0 10px;
}
.stripe-sep__set i::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:450%;
  height:100%;
  background:#dbdbdb;
  clip-path:polygon(0 0, 22% 0, 100% 100%, 75% 100%);
}
@keyframes stripeMarquee{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
@media (prefers-reduced-motion:reduce){
  .stripe-sep{animation:none}
  .stripe-sep__track{animation:none}
}
.quality-section{
  position:relative;
  background:var(--surface-2);
  padding:clamp(64px,8vw,96px) 0 0;
  overflow:hidden;
}
.quality-wire{display:none}
main > section > .wrap.wrap--quality{
  max-width:var(--wrap);
  position:relative; z-index:1;
}
.quality-block{max-width:none}
.quality-block__sub{
  font-family:var(--font-display);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  line-height:1.4;
  color:var(--fp-accent);
  margin:0 0 14px;
}
.quality-block__title{
  font-family:var(--font-display);
  font-size:clamp(1.75rem,3.2vw,2.75rem);
  font-weight:700;
  letter-spacing:-.024em;
  line-height:1.14;
  color:var(--ink);
  margin:0 0 clamp(24px,3vw,36px);
  max-width:18em;
}
.quality-block__copy{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(20px,3vw,32px);
  margin:0 0 28px;
  color:var(--ink-70);
  font-family:var(--font);
  font-size:1rem;
  line-height:1.65;
}
.quality-block__col p{margin:0}
.quality-block__col p + p{margin-top:18px}
.quality-block__copy strong{color:var(--ink); font-weight:600}
@media (max-width:760px){
  .quality-block__copy{grid-template-columns:1fr}
}
.quality-statement{
  max-width:none;
  margin:8px 0 36px;
  text-align:left;
  color:var(--ink-70);
  font-family:var(--font);
  font-size:1rem;
  line-height:1.6;
}
.quality-statement p{margin:0 0 15px}
.quality-statement__body strong{color:var(--ink); font-weight:600}
.quality-photo{
  position:relative; overflow:hidden;
  width:100%;
  background:#eaeef0;
}
.quality-photo__track{
  width:calc(100% + 100px);
  margin-left:-50px;
  will-change:transform;
  transform:translate3d(var(--qx, 0px), 0, 0);
}
.quality-photo__track img{
  width:100%; height:auto; display:block;
  min-height:clamp(240px, 32vw, 420px);
  object-fit:cover; object-position:center 42%;
}
.about-join{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  min-height:280px; display:grid; place-items:center; text-align:center; color:#fff;
}
.about-join__inner{
  position:relative; z-index:1;
  padding:48px 28px;
  max-width:640px;
}
.about-join__inner .t-h2{color:#fff; margin:0 0 12px}
.about-join__inner p{margin:0 0 22px; color:rgba(255,255,255,.86)}
.about-join img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.04); transition:transform .7s var(--ease)}
.about-join:hover img{transform:scale(1.12)}
.about-join::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(9,80,145,.72), rgba(33,37,41,.78));
}
.about-join--event img{object-position:78% 42%}
.values-explore{
  background:var(--surface);
  padding-block:clamp(64px,8vw,96px);
  overflow:hidden;
}
.values-explore .wrap{max-width:var(--wrap)}
.values-explore__sub{
  text-align:center;
  font-family:var(--font-display);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  line-height:1.4;
  color:var(--fp-accent);
  margin:0 0 14px;
}
.values-explore__title{
  text-align:center;
  font-family:var(--font-display);
  font-size:clamp(1.75rem,3.2vw,2.75rem);
  font-weight:700;
  letter-spacing:-.024em;
  line-height:1.14;
  color:var(--ink);
  margin:0 0 clamp(28px,4vw,48px);
  position:relative; z-index:2;
}
.values-explore__title em{font-style:normal; color:var(--fp-accent)}
.values-explore__stage{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:0;
  --vshift:0px; --vx:0; --vy:0;
}
.values-explore__art{
  position:relative;
  z-index:0;
  flex:0 0 auto;
  width:489px;
  max-width:60%;
  padding:0 60px;
  box-sizing:content-box;
  overflow:hidden;
  pointer-events:none;
}
.values-explore__art img{
  width:489px;
  max-width:100%;
  height:auto;
  max-height:706px;
  object-fit:contain;
  object-position:center;
  display:block;
  opacity:.92;
  transform:translate3d(calc(var(--vx)*14px), calc(var(--vy)*10px), 0);
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
}
.values-explore__col{
  display:flex; flex-direction:column; justify-content:flex-start; gap:60px;
  flex:0 1 296px;
  width:296px;
  max-width:296px;
  padding:0; z-index:1; min-width:0;
}
.values-explore__col--end{
  margin-left:0;
}
.values-explore__col--end .values-card{margin-left:0; text-align:left}
.values-card{
  position:relative;
  display:flex;
  flex-direction:row-reverse;
  align-items:flex-start;
  gap:9px;
  max-width:none;
  width:100%;
  transition:transform .25s var(--ease);
}
.values-card__body{min-width:0; flex:1}
.values-card h3{
  font-family:var(--font-display);
  font-size:1.25rem;
  font-weight:700;
  color:var(--ink);
  margin:0 0 12px;
  white-space:normal;
  line-height:1.2;
}
.values-card__ico{
  flex:none;
  width:35px; height:35px;
  color:#494949;
  margin-top:0;
}
.values-card__ico svg{width:35px; height:35px; display:block}
.values-card p{
  margin:0;
  font-family:var(--font);
  font-size:1rem;
  font-weight:400;
  line-height:1.6;
  color:var(--ink-70);
}
.values-explore__pin{
  position:absolute; z-index:3;
  width:18px; height:18px; margin:-9px 0 0 -9px;
  border:2px solid var(--fp-accent); border-radius:50%;
  background:#fff;
  left:50%; top:28%;
  transition:top .22s cubic-bezier(.22,.61,.36,1), left .22s cubic-bezier(.22,.61,.36,1), background .15s;
  pointer-events:none;
}
.values-explore__pin::after{
  content:""; position:absolute; inset:3px; border-radius:50%; background:#111;
}
.values-explore.is-hot .values-explore__pin{background:var(--fp-accent)}
.values-explore.is-hot .values-explore__pin::after{background:#fff}
.values-card.is-on{transform:translateY(-2px)}
@media (max-width:980px){
  .values-explore__stage{
    display:flex; flex-direction:column; align-items:stretch;
  }
  .values-explore__art{
    width:100%; max-width:none; padding:12px 0 28px;
    order:-1; box-sizing:border-box;
  }
  .values-explore__art img{
    width:100%; height:auto; max-height:420px; object-fit:contain; margin:0 auto;
  }
  .values-explore__col, .values-explore__col--end{
    width:100%; max-width:none; flex:none; gap:36px;
  }
  .values-explore__pin{display:none}
  .values-card{max-width:none}
}
.about-values{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.about-value{
  position:relative; background:var(--surface-2); border-radius:14px; overflow:hidden;
}
.about-value img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block; transition:transform .55s var(--ease)}
.about-value::after{
  content:""; position:absolute; inset:0;
  background:color-mix(in srgb, var(--fp-primary) 72%, transparent);
  opacity:0; transition:opacity .35s var(--ease);
}
.about-value h3{
  position:absolute; left:16px; right:16px; bottom:16px; z-index:1; margin:0;
  color:#fff; font-size:1.05rem; opacity:0; transform:translateY(10px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.about-value:hover img{transform:scale(1.08)}
.about-value:hover::after{opacity:1}
.about-value:hover h3{opacity:1; transform:none}
@media (hover:none){
  .about-value::after{opacity:.55}
  .about-value h3{opacity:1; transform:none}
}
.about-services{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px 32px;
}
.about-services h3{
  font-family:var(--font-display);
  font-size:1.05rem; font-weight:700; color:#111; margin:0 0 8px;
}
.about-services p{margin:0; color:#5a5a5a; line-height:1.65}
@media (max-width:640px){
  .about-services{grid-template-columns:1fr}
}
.about-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center;
}
.about-stat b{
  display:block; font-family:var(--font-display);
  font-size:clamp(2rem,4vw,3rem); color:var(--fp-primary); line-height:1;
  font-variant-numeric:tabular-nums;
}
.about-stat span{display:block; margin-top:8px; color:var(--ink-70); font-size:.9rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase}
@media (max-width:980px){
  .about-who{grid-template-columns:1fr}
  .about-collage{max-width:480px; margin-inline:auto; padding:18px 24px 56px 20px}
  .about-collage__main{height:360px; width:90%}
  .about-collage__fill{display:none}
  .about-collage__badge{right:12px}
  .about-checks{grid-template-columns:1fr}
  .about-values,.about-stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .about-values{grid-template-columns:1fr}
  .about-collage__main{width:100%}
  .about-collage__sub{width:58%}
}