/* FTC Qatar — "Engineered Cold" design system.
   Tokens are switched by data-attributes on <html>: data-theme, data-accent, data-type, data-shape.
   Sections are .base (page ground) or .alt (contrast band); .dark forces the dark context. */

:root {
  --d-bg: #060A0F; --d-bg-2: #0B1118; --d-rule: #1E2833; --d-rule-2: #2A3744;
  --d-fg: #EAF2F7; --d-fg-2: #A9BAC6; --d-mist: #8FA3B3;
  --l-bg: #EEF3F6; --l-bg-2: #E2E9EE; --l-rule: #C9D4DC; --l-rule-2: #B6C3CD;
  --l-fg: #060A0F; --l-fg-2: #3A4A57; --l-mist: #56687A;
  --a-bright: #04AFF0; --a-deep: #00749F;
  --r: 6px; --r-lg: 10px;
  --gutter: clamp(16px, 4vw, 60px);
  --f-sans: 'Archivo', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
  --f-ar: 'IBM Plex Sans Arabic', 'Archivo', sans-serif;
}
[data-theme="steel"] { --d-bg: #182028; --d-bg-2: #1F2932; --d-rule: #2F3C48; --d-rule-2: #3B4A57; --d-fg: #EEF2F5; --d-fg-2: #B8C5CF; --d-mist: #9DACB8; --l-bg: #E7ECEF; --l-bg-2: #DAE1E6; }
[data-theme="paper"] { --l-bg: #F5F8FA; --l-bg-2: #E9EFF3; }
[data-accent="ice"] { --a-bright: #9FE3F5; --a-deep: #1F6F86; }
[data-accent="signal"] { --a-bright: #FF8A2A; --a-deep: #A84400; }
[data-accent="navy"] { --a-bright: #8DB8FF; --a-deep: #1D3F8F; }
[data-shape="sharp"] { --r: 0px; --r-lg: 0px; }
[data-shape="soft"] { --r: 12px; --r-lg: 20px; }

html:not([data-theme="paper"]) .base, html[data-theme="paper"] .alt, .dark {
  --bg: var(--d-bg); --bg-2: var(--d-bg-2); --rule: var(--d-rule); --rule-2: var(--d-rule-2);
  --fg: var(--d-fg); --fg-2: var(--d-fg-2); --mist: var(--d-mist);
  --acc: var(--a-bright); --btn: var(--a-bright); --btn-fg: #060A0F; --logo-w: block; --logo-c: none;
}
html:not([data-theme="paper"]) .alt, html[data-theme="paper"] .base {
  --bg: var(--l-bg); --bg-2: var(--l-bg-2); --rule: var(--l-rule); --rule-2: var(--l-rule-2);
  --fg: var(--l-fg); --fg-2: var(--l-fg-2); --mist: var(--l-mist);
  --acc: var(--a-deep); --btn: var(--a-deep); --btn-fg: #FFFFFF; --logo-w: none; --logo-c: block;
}
.base, .alt, .dark { background: var(--bg); color: var(--fg); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--f-sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
html[lang="ar"] body { font-family: var(--f-ar); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--acc); }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.wrap { max-width: 1320px; margin-inline: auto; padding-inline: var(--gutter); }
.sec { padding-block: clamp(72px, 10vw, 120px); }
.bt { border-top: 1px solid var(--rule); }
.bb { border-bottom: 1px solid var(--rule); }
.skip { position: absolute; top: 16px; inset-inline-start: 16px; z-index: 50; background: var(--btn); color: var(--btn-fg); padding: 12px 16px; clip-path: inset(50%); }
.skip:focus { clip-path: none; }
.logo-w { display: var(--logo-w); } .logo-c { display: var(--logo-c); }

/* Type */
.d { font-weight: 800; line-height: 0.92; margin: 0; font-stretch: 125%; text-transform: uppercase; letter-spacing: -0.02em; }
[data-type="standard"] .d { font-stretch: 100%; text-transform: none; letter-spacing: -0.035em; font-weight: 650; line-height: 0.98; }
[data-type="condensed"] .d { font-stretch: 72%; letter-spacing: -0.005em; line-height: 0.9; }
html[lang="ar"] .d { font-family: var(--f-ar); text-transform: none; letter-spacing: 0; font-weight: 700; line-height: 1.15; font-stretch: 100%; }
.m { font-family: var(--f-mono); text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; }
html[lang="ar"] .m { font-family: var(--f-mono), var(--f-ar); letter-spacing: 0.02em; font-size: 13px; }
.eyebrow { margin: 0 0 20px; color: var(--acc); font-size: 12px; }
.h2 { font-size: clamp(38px, 5vw, 72px); font-weight: 750; }
.lead { font-size: 18px; line-height: 1.55; color: var(--fg-2); max-width: 540px; }
.muted { color: var(--mist); }
.acc { color: var(--acc); }
bdi.n { unicode-bidi: isolate; direction: ltr; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 14px 22px; border-radius: var(--r); font-weight: 600; font-family: var(--f-mono); text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px; border: 1px solid transparent; cursor: pointer; }
html[lang="ar"] .btn { font-family: var(--f-ar); text-transform: none; letter-spacing: 0; font-size: 15px; }
.btn-p { background: var(--btn); color: var(--btn-fg); }
.btn-p:hover { color: var(--btn-fg); filter: brightness(1.08); }
.btn-o { border-color: var(--fg); color: var(--fg); background: none; }
.link { border-bottom: 1px solid currentColor; padding-bottom: 4px; }

/* Header */
.hdr { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--rule); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); }
.hdr .wrap { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.hdr .logo img { height: 38px; width: auto; }
.nav { display: flex; gap: 24px; flex: 1 1 auto; font-size: 14px; font-weight: 500; }
.nav a[aria-current="page"] { color: var(--acc); }
.hdr .tel { color: var(--mist); }
.lang { border: 1px solid var(--rule-2); border-radius: var(--r); padding: 8px 12px; min-height: 40px; display: inline-flex; align-items: center; }
.menu-btn { display: none; width: 44px; height: 44px; background: none; border: 1px solid var(--rule-2); border-radius: var(--r); color: var(--fg); align-items: center; justify-content: center; cursor: pointer; }
@media (max-width: 1080px) { .hdr .tel { display: none; } }
@media (max-width: 900px) {
  .nav { display: none; position: absolute; inset-inline: 0; top: 68px; flex-direction: column; gap: 0; padding: 8px var(--gutter) 20px; background: var(--bg); border-bottom: 1px solid var(--rule); }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 18px; }
  .nav.open { display: flex; }
  .menu-btn { display: inline-flex; }
  .hdr .wrap { gap: 10px; }
  .hdr .spacer { flex: 1; }
  .hdr .q { display: none; }
}

/* Hero */
.hero { position: relative; min-height: min(92vh, 880px); display: flex; align-items: flex-end; overflow: hidden; }
.hero .bgimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.6) contrast(1.1); opacity: 0.38; }
html[dir="rtl"] .hero .bgimg { transform: scaleX(-1); }
/* v2: the footage has the photo as its poster, so the still is hidden while the video is there (no ghost double image) */
.hero:has(video.bgimg) img.bgimg, .broch:has(video.bgimg) img.bgimg { display: none; }
.hero video.bgimg { opacity: .5; }
.hero .wrap { position: relative; width: 100%; padding-block: 120px 56px; }
.hero h1 { font-size: clamp(40px, 10.5vw, 150px); max-width: 12ch; }
.d { overflow-wrap: break-word; max-width: 100%; }
@media (max-width: 480px) { [data-type="expanded"] .d { font-stretch: 110%; } }
html[lang="ar"] .hero h1 { font-size: clamp(56px, 9vw, 140px); }
.hero-row { display: flex; flex-wrap: wrap; gap: 32px 40px; align-items: flex-end; justify-content: space-between; margin-top: 40px; }
.hero .lead { font-size: 20px; color: #C9D6DF; max-width: 580px; margin: 0; }
.btns { display: flex; gap: 12px; flex-wrap: wrap; }
.temps { margin-top: 64px; padding-top: 18px; border-top: 1px solid var(--rule-2); display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; color: var(--mist); }
.temps b { color: var(--fg); font-weight: 500; }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.stat { padding: 32px 24px; border-inline-end: 1px solid var(--rule); }
.stat:first-child { padding-inline-start: 0; } .stat:last-child { border-inline-end: 0; }
.stat .d { font-size: clamp(40px, 4vw, 56px); font-weight: 700; }
.stat .m { color: var(--mist); margin-top: 8px; display: block; }
@media (max-width: 640px) { .stat { padding-inline: 0 !important; border-inline-end: 0; border-bottom: 1px solid var(--rule); } }
.marks { display: flex; flex-wrap: wrap; gap: 12px 36px; padding-block: 26px; color: var(--mist); }

/* Split layouts */
.split { display: flex; flex-wrap: wrap; gap: 64px; align-items: flex-start; }
.split > * { flex: 1 1 400px; min-width: 0; }
.steps { list-style: none; margin: 32px 0 0; padding: 0; }
.steps li { border-top: 1px solid var(--rule); }
.steps li:last-child { border-bottom: 1px solid var(--rule); }
.step { display: flex; gap: 20px; padding: 22px 0; width: 100%; background: none; border: 0; color: inherit; text-align: start; font: inherit; cursor: default; }
.step .num { color: var(--acc); width: 28px; flex: none; }
.step .t { font-size: 20px; font-weight: 600; display: block; }
.step .s { font-size: 15px; color: var(--mist); margin-top: 6px; display: block; }
.fig { margin: 0; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--bg); padding: 24px; position: sticky; top: 100px; }
.fig svg { width: 100%; height: auto; display: block; }
.fig figcaption { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; color: var(--mist); }

/* Cards */
.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; align-items: flex-end; margin-bottom: 52px; }
.grid-cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.cell { background: var(--bg); padding: 36px; display: flex; flex-direction: column; gap: 16px; min-height: 280px; color: var(--fg); }
.cell .top { display: flex; justify-content: space-between; color: var(--acc); }
.cell .d { font-size: 30px; font-weight: 700; line-height: 1; }
.cell .s { font-size: 15px; line-height: 1.55; color: var(--fg-2); }
.cell .brands { color: var(--mist); margin-top: auto; font-size: 10px; }
.cell.inv { --bg: var(--d-bg); --fg: var(--d-fg); --fg-2: var(--d-fg-2); --acc: var(--a-bright); }
html[data-theme="paper"] .cell.inv { --bg: var(--d-bg); }
a.cell:hover { color: var(--fg); background: var(--bg-2); }
.cards3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.card { border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 32px; display: flex; flex-direction: column; gap: 14px; min-height: 260px; }
.card.hl { border-color: var(--acc); background: var(--bg-2); }
.card .d { font-size: 30px; font-weight: 700; }
.card .s { font-size: 15px; color: var(--fg-2); }
.card .go { margin-top: auto; color: var(--acc); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.chip { border: 1px solid var(--rule-2); border-radius: 99px; padding: 10px 16px; }
.projects { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 28px 20px; }
.proj { display: flex; flex-direction: column; gap: 12px; }
.proj img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r); }
.proj h3 { margin: 0; font-size: 22px; font-weight: 600; }
.proj p { margin: 0; font-size: 14px; color: var(--mist); }
.cols4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); border-top: 1px solid var(--rule-2); }
.cols4 > div { padding: 32px 28px 0 0; padding-inline: 0 28px; }
.cols4 .d { font-size: 26px; font-weight: 700; margin: 14px 0 12px; }
.cols4 p { margin: 0; font-size: 15px; color: var(--fg-2); }
.offices { list-style: none; margin: 0; padding: 0; }
.offices li { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-top: 1px solid var(--rule); }
.offices li:last-child { border-bottom: 1px solid var(--rule); }
.offices .m { color: var(--mist); text-align: end; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); border-top: 2px solid var(--fg); }
.timeline li { padding-block-start: 24px; padding-inline-end: 24px; }
.timeline .d { font-size: 36px; font-weight: 700; }
.timeline .now { color: var(--acc); }
.timeline p { margin: 10px 0 0; font-size: 14px; color: var(--fg-2); }
.brands-wall { display: flex; flex-wrap: wrap; gap: 18px 44px; font-size: 26px; font-weight: 700; color: var(--mist); }
html[lang="ar"] .brands-wall { font-family: var(--f-sans); }

/* Form */
.rfq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rfq label { display: flex; flex-direction: column; gap: 8px; color: var(--mist); }
.rfq .full { grid-column: 1 / -1; }
.rfq input, .rfq select { font: 16px var(--f-sans); background: var(--bg-2); color: var(--fg); border: 1px solid var(--rule-2); border-radius: var(--r); padding: 14px; text-transform: none; letter-spacing: 0; min-height: 50px; }
html[lang="ar"] .rfq input, html[lang="ar"] .rfq select { font-family: var(--f-ar); }
.rfq .btn { min-height: 58px; }
.rfq .wa { text-align: center; color: var(--mist); }
@media (max-width: 560px) { .rfq { grid-template-columns: 1fr; } }

/* Footer */
.ftr .big { font-size: clamp(48px, 10vw, 168px); font-weight: 800; line-height: 0.85; color: var(--rule); }
.ftr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 32px; margin-top: 56px; font-size: 14px; line-height: 1.7; color: var(--fg-2); }
.ftr-grid .m { color: var(--acc); font-size: 10px; display: block; margin-bottom: 8px; }
.ftr-grid img { height: 44px; width: auto; margin-bottom: 16px; }
.ftr-bot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 56px; padding-block: 20px 40px; border-top: 1px solid var(--rule); color: var(--mist); font-size: 10px; }

/* Mobile quick bar */
.qbar { display: none; }
@media (max-width: 760px) {
  .qbar { display: grid; grid-template-columns: repeat(3, 1fr); position: fixed; inset-inline: 0; bottom: 0; z-index: 30; background: var(--d-bg); border-top: 1px solid var(--d-rule); }
  .qbar a { text-align: center; padding: 16px 4px; color: var(--d-fg); border-inline-end: 1px solid var(--d-rule); min-height: 52px; }
  .qbar a:last-child { background: var(--a-bright); color: #060A0F; font-weight: 600; border: 0; }
  body { padding-bottom: 56px; }
  .fig { position: static; }
}

/* Solution page */
.crumb { display: flex; gap: 10px; flex-wrap: wrap; color: var(--mist); }
.crumb [aria-current] { color: var(--fg); }
.specs { margin: 0; border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 8px 24px; background: var(--bg-2); flex: 0 1 380px !important; }
.specs div { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.specs div:last-child { border-bottom: 0; }
.specs dt { color: var(--mist); } .specs dd { margin: 0; font-size: 13px; }
.tbl-box { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r-lg); }
table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 15px; }
th, td { padding: 20px 24px; border-bottom: 1px solid var(--rule); text-align: start; }
thead th { color: var(--mist); font-weight: 500; }
tbody tr:last-child > * { border-bottom: 0; }
tbody td { color: var(--fg-2); }
details { border-top: 1px solid var(--rule); padding: 22px 0; }
details:last-child { border-bottom: 1px solid var(--rule); }
summary { font-size: 18px; font-weight: 600; cursor: pointer; }
details p { margin: 14px 0 0; color: var(--fg-2); line-height: 1.6; }
.band { background: var(--a-bright); color: #060A0F; }
.band .btn-dark { background: #060A0F; color: #EAF2F7; }
.band .btn-line { border-color: #060A0F; color: #060A0F; }

/* Design options panel */
.dz-open { position: fixed; inset-inline-end: 16px; bottom: 16px; z-index: 40; }
@media (max-width: 760px) { .dz-open { bottom: 68px; min-height: 40px; padding: 8px 12px; font-size: 10px; } .dz { bottom: 68px; max-height: calc(100vh - 140px); overflow-y: auto; } }
.dz { position: fixed; inset-inline-end: 16px; bottom: 16px; z-index: 41; width: min(340px, calc(100vw - 32px)); background: var(--d-bg-2); color: var(--d-fg); border: 1px solid var(--d-rule-2); border-radius: 12px; padding: 20px; box-shadow: 0 24px 60px rgba(0,0,0,0.45); }
.dz[hidden] { display: none; }
.dz h2 { margin: 0; font-size: 16px; }
.dz .note { margin: 6px 0 14px; font-size: 13px; color: var(--d-mist); }
.dz fieldset { border: 0; margin: 0 0 14px; padding: 0; }
.dz legend { color: var(--d-mist); margin-bottom: 8px; padding: 0; }
.dz .opts { display: flex; flex-wrap: wrap; gap: 6px; }
.dz .opts label { cursor: pointer; }
.dz .opts input { position: absolute; opacity: 0; }
.dz .opts span { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 12px; border: 1px solid var(--d-rule-2); border-radius: 8px; font-size: 13px; }
.dz .opts input:checked + span { border-color: var(--d-fg); background: var(--d-bg); }
.dz .opts input:focus-visible + span { outline: 2px solid var(--a-bright); }
.dz .sw { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.dz .row { display: flex; gap: 8px; margin-top: 6px; }
.dz .row .btn { flex: 1; min-height: 44px; font-size: 11px; padding: 10px; }
.dz .x { position: absolute; inset-inline-end: 12px; top: 12px; width: 36px; height: 36px; background: none; border: 1px solid var(--d-rule-2); border-radius: 8px; color: var(--d-fg); cursor: pointer; }

/* v2 3D stages */
.stage { position: relative; aspect-ratio: 6 / 5; width: 100%; }
.stage canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border-radius: var(--r); touch-action: pan-y; }
.stage .poster { position: absolute; inset: 0; }
.stage.live .poster { display: none; }
.stage .hint { position: absolute; inset-inline-start: 12px; bottom: 12px; color: var(--mist); pointer-events: none; }
.part-card { position: absolute; inset-inline-end: 12px; top: 12px; max-width: 260px; background: var(--bg-2); border: 1px solid var(--acc); border-radius: var(--r); padding: 14px 16px; font-size: 14px; }
.part-card[hidden] { display: none; }
.part-card strong { display: block; margin-bottom: 4px; }
.v2 .step { cursor: pointer; }
.v2 .step[aria-current="step"] .t { color: var(--acc); }
.v2 .step[aria-current="step"] { box-shadow: inset 3px 0 0 var(--acc); padding-inline-start: 12px; }
html[dir="rtl"] .v2 .step[aria-current="step"] { box-shadow: inset -3px 0 0 var(--acc); }
.globe { position: relative; aspect-ratio: 1; width: 100%; max-width: 560px; }
.globe canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; touch-action: pan-y; }
.globe.live svg { visibility: hidden; }
.pin-card { position: absolute; pointer-events: none; background: var(--bg-2); border: 1px solid var(--acc); border-radius: var(--r); padding: 10px 12px; font-size: 13px; transform: translate(-50%, calc(-100% - 14px)); white-space: nowrap; }
.pin-card[hidden] { display: none; }

/* v2 fly-through film: static key frames by default, a pinned scrubbed canvas once film.js takes over */
.film { position: relative; background: #060A0F; color: #EAF2F7; --mist: #9FB0BD; }
.film-pin { padding-block: 96px; }
.film-canvas, .film-rail { display: none; }
.film-steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px 16px; }
.film-steps img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r); display: block; margin-bottom: 14px; }
.film-steps .num { color: var(--acc); display: block; margin-bottom: 6px; }
.film-steps .t { display: block; font-size: 20px; font-weight: 600; }
.film-steps .s { display: block; color: var(--mist); font-size: 15px; margin-top: 6px; }
.film-note { color: var(--mist); margin: 20px 0 0; }
.film.scrub { height: 520vh; }
.film.scrub .film-pin { position: sticky; top: 0; height: 100vh; height: 100svh; padding: 0; overflow: hidden; }
.film.scrub .film-canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.film.scrub .film-pin::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgb(6 10 15 / .7), rgb(6 10 15 / 0) 32%, rgb(6 10 15 / 0) 52%, rgb(6 10 15 / .82)); }
.film.scrub .film-ui { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-block: 104px 40px; }
.film.scrub .film-steps { display: block; position: relative; min-height: 9em; margin: 0; }
.film.scrub .film-steps li { position: absolute; inset-inline-start: 0; bottom: 0; max-width: 480px; opacity: 0; transform: translateY(14px); transition: opacity .15s, transform .15s; }
.film.scrub .film-steps li.on { opacity: 1; transform: none; transition: opacity .45s .12s, transform .45s .12s; }
.film.scrub .film-steps img { display: none; }
.film.scrub .film-steps .t { font-size: clamp(24px, 3vw, 36px); }
.film.scrub .film-rail { display: block; height: 2px; background: rgb(234 242 247 / .2); margin-top: 24px; }
.film-rail span { display: block; height: 100%; inline-size: 0; background: var(--acc); }
.film.scrub .film-note { margin: 12px 0 0; font-size: 11px; }
@media (max-width: 760px) { .film.scrub { height: 440vh; } .film.scrub .film-ui { padding-block: 92px 84px; } .film.scrub .film-note { max-width: 55%; } }

/* ------------------------------------------------------------------ Motion
   Reveals only exist under html.mo (set by the boot script when reduced motion is off; removed again if
   motion.js never runs). Hover states apply everywhere but only animate under .mo. */
:root { --ease: cubic-bezier(.2, .7, .2, 1); }
.mo .rv { transition: opacity .8s var(--ease) var(--dl, 0s), transform .9s var(--ease) var(--dl, 0s), clip-path 1.1s var(--ease) var(--dl, 0s),
  background-color .35s, border-color .35s, color .35s, box-shadow .35s; }
.mo .rv:not(.in) { opacity: 0; transform: translate3d(0, 28px, 0); }
.mo .rv.done { transition: opacity .3s, transform .4s var(--ease), background-color .35s, border-color .35s, color .35s, box-shadow .4s; }
.mo .fig.rv:not(.in), .mo .globe.rv:not(.in) { transform: translate3d(0, 40px, 0) scale(.98); }

/* headline words rise out of a mask */
.mo h1.words { opacity: 1; transform: none; }
.mo h1.words .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.mo h1.words .w > span { display: inline-block; transform: translateY(108%); transition: transform 1.1s var(--ease) var(--dl, 0s); }
.mo h1.words.in .w > span { transform: none; }

/* eyebrows draw a short accent line as they arrive */
.mo .eyebrow.rv::before { content: ""; display: inline-block; vertical-align: middle; width: 0; height: 1px; background: currentColor;
  margin-inline-end: 0; transition: width .7s var(--ease) calc(var(--dl, 0s) + .25s), margin .7s var(--ease) calc(var(--dl, 0s) + .25s); }
.mo .eyebrow.rv.in::before { width: 28px; margin-inline-end: 12px; }

/* project photos wipe open, then zoom gently on hover */
.ph { overflow: hidden; border-radius: var(--r); }
.ph img { border-radius: 0 !important; transition: transform 1.2s var(--ease), filter .6s; filter: saturate(.8); }
.mo .proj.rv:not(.in) .ph { clip-path: inset(0 0 100% 0); }
.mo .proj.rv .ph { clip-path: inset(0 0 0 0); transition: clip-path 1.1s var(--ease) var(--dl, 0s); }
.proj:hover .ph img { transform: scale(1.05); filter: saturate(1); }
.proj h3 { transition: color .3s; } .proj:hover h3 { color: var(--acc); }

/* hero photo settles in */
.mo .hero .bgimg { animation: settle 2.4s var(--ease) both; }
@keyframes settle { from { scale: 1.08; opacity: 0; } }

/* header: solid on scroll, steps aside going down, page progress line */
.hdr { transition: transform .45s var(--ease), box-shadow .3s, background-color .3s; }
.hdr.scrolled { box-shadow: 0 10px 30px rgb(0 0 0 / .18); }
.hdr.away { transform: translateY(-100%); }
.hdr::after { content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 2px; background: var(--acc);
  transform: scaleX(var(--sp, 0)); transform-origin: left; }
html[dir="rtl"] .hdr::after { transform-origin: right; }

/* nav links underline from the reading edge */
.nav a { background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px; transition: background-size .35s var(--ease), color .2s; padding-bottom: 2px; }
html[dir="rtl"] .nav a { background-position: 100% 100%; }
.nav a:hover { background-size: 100% 1px; }
@media (max-width: 900px) { .nav a { background: none; } }
.lang, .menu-btn { transition: border-color .25s, color .25s; } .lang:hover, .menu-btn:hover { border-color: var(--fg); }

/* buttons */
.btn { transition: transform .3s var(--ease), box-shadow .3s, background-color .3s, color .3s, border-color .3s, filter .3s; }
.btn-p:hover { transform: translateY(-2px); box-shadow: 0 10px 24px color-mix(in srgb, var(--btn) 35%, transparent); }
.btn-o:hover { background: var(--fg); color: var(--bg); }
.band .btn:hover { transform: translateY(-2px); }

/* solution cells: an accent rule grows across the top, the arrow line slides */
.cell { position: relative; }
.cell::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 2px; background: var(--acc); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
html[dir="rtl"] .cell::before { transform-origin: right; }
.cell:hover::before { transform: scaleX(1); }
.cell .d { transition: transform .45s var(--ease); }
a.cell:hover .d { transform: translateX(6px); }
html[dir="rtl"] a.cell:hover .d { transform: translateX(-6px); }

/* cards lift */
.card { transition: transform .4s var(--ease), border-color .3s, box-shadow .4s, background-color .3s; }
.card:hover { transform: translateY(-4px); border-color: var(--acc); box-shadow: 0 18px 40px rgb(0 0 0 / .14); }
.card .go { transition: letter-spacing .3s var(--ease); } .card:hover .go { letter-spacing: .2em; }
.chip { transition: border-color .25s, color .25s, background-color .25s; } .chip:hover { border-color: var(--acc); color: var(--acc); }

/* lists and rows */
.cols4 > div { position: relative; }
.cols4 > div::before { content: ""; position: absolute; inset-inline-start: 0; top: -1px; height: 2px; width: 0; background: var(--acc); transition: width .5s var(--ease); }
.cols4 > div:hover::before { width: calc(100% - 28px); }
.offices li { transition: padding .35s var(--ease), color .25s; }
.offices li:hover { padding-inline: 10px 0; color: var(--acc); }
.timeline li { position: relative; }
.timeline li::before { content: ""; position: absolute; inset-inline-start: 0; top: -2px; height: 2px; width: 0; background: var(--acc); transition: width .5s var(--ease); }
.timeline li:hover::before { width: calc(100% - 24px); }
.timeline .d { transition: color .3s; } .timeline li:hover .d { color: var(--acc); }
.brands-wall span { transition: color .3s; } .brands-wall span:hover { color: var(--fg); }
.step .t, .step .num { transition: color .25s, transform .35s var(--ease); }
.step:hover .t { color: var(--acc); }
.step:hover .num { transform: translateX(4px); } html[dir="rtl"] .step:hover .num { transform: translateX(-4px); }
tbody tr { transition: background-color .25s; } tbody tr:hover { background: var(--bg-2); }
summary { transition: color .25s; } summary:hover { color: var(--acc); }
.mo details[open] p { animation: rise .45s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.rfq input, .rfq select { transition: border-color .25s, box-shadow .25s; }
.rfq input:hover, .rfq select:hover { border-color: var(--mist); }
.rfq input:focus, .rfq select:focus { border-color: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 22%, transparent); outline: none; }
.ftr-grid a { transition: color .25s; }

/* sections ease between themes when the Design options change */
.base, .alt, .dark, .cell, .hdr { transition-property: background-color, color, border-color, transform, box-shadow; transition-duration: .45s; }

/* landmarks marquee */
.marks.marquee { flex-wrap: nowrap; overflow: hidden; align-items: center; }
.marks .mq-label { flex: none; position: relative; z-index: 1; padding-inline-end: 24px; background: var(--bg); }
.marks .mq { display: flex; flex: none; animation: mq 60s linear infinite; }
.marks .mq-run { display: flex; gap: 36px; padding-inline-end: 36px; flex: none; }
.marks .mq-run span { white-space: nowrap; transition: color .25s; } .marks .mq-run span:hover { color: var(--fg); }
.marks.marquee:hover .mq { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(-50%); } }
html[dir="rtl"] .marks .mq { animation-name: mq-rtl; }
@keyframes mq-rtl { to { transform: translateX(50%); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Catalogue pages: page hero, product line cards, product plates, project pages, about, contact */
.phero h1.d { font-size: clamp(44px, 7vw, 112px); line-height: .9; max-width: 16ch; }
.lgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 20px; }
.lcard { display: flex; flex-direction: column; border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; color: var(--fg); background: var(--bg); transition: border-color .3s, transform .45s var(--ease), box-shadow .45s; }
.lcard:hover { color: var(--fg); border-color: var(--acc); transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgba(0,0,0,.45); }
.lc-b { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; }
.lc-b .top { display: flex; justify-content: space-between; color: var(--acc); font-size: 10px; }
.lc-b h3 { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.15; transition: color .3s; }
.lcard:hover h3 { color: var(--acc); }
.lc-b p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--fg-2); }
/* Product photos are catalogue cut-outs on white, so they sit on a fixed light plate in every theme */
.plate { background: #F2F5F7; aspect-ratio: 4/3; display: grid; place-items: center; overflow: hidden; }
.plate img { width: 100%; height: 100%; object-fit: contain; padding: 8%; mix-blend-mode: multiply; transition: transform .6s var(--ease); }
.plate.none span { color: #9AA8B2; font-size: 22px; letter-spacing: .3em; }
.lcard:hover .plate img, .prod:hover .plate img { transform: scale(1.06); }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; }
.prod { background: var(--bg); display: flex; flex-direction: column; }
.prod .pb { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.prod h3 { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.2; }
.prod p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--fg-2); }
.prod .go { margin-top: auto; padding-top: 8px; color: var(--acc); font-size: 11px; opacity: .7; transition: opacity .3s; }
.prod:hover .go { opacity: 1; }
a.proj { color: var(--fg); }
a.proj:hover { color: var(--fg); }
.proj .ph { overflow: hidden; border-radius: var(--r); }
.proj .ph img { aspect-ratio: 4/3; object-fit: cover; transition: transform .8s var(--ease); }
.pfilter .chip { background: none; color: var(--fg); font: inherit; cursor: pointer; }
.pfilter .chip.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.pf[hidden] { display: none; }
.gal { display: grid; gap: 12px; }
.gal .ph { overflow: hidden; border-radius: var(--r-lg); }
.gal img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal.n1 img { aspect-ratio: 21/9; }
.gal.n3 { grid-template-columns: 2fr 1fr; grid-auto-rows: minmax(0, 1fr); }
.gal.n3 .ph:first-child { grid-row: span 2; }
.gal.n3 .ph:first-child img { aspect-ratio: auto; min-height: 100%; }
.gal.n3 .ph:not(:first-child) img { aspect-ratio: 16/10; }
.gal.n3 .ph:nth-child(n+4) { display: none; }
@media (max-width: 760px) { .gal.n3 { grid-template-columns: 1fr; } .gal.n3 .ph:first-child { grid-row: auto; } .gal.n1 img { aspect-ratio: 4/3; } }
.scope { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-2); }
.scope li { display: flex; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--rule); font-size: 17px; line-height: 1.45; transition: padding .35s var(--ease), color .3s; }
.scope li .m { padding-top: 4px; font-size: 11px; }
.scope li:hover { padding-inline-start: 8px; }
.next { display: flex; flex-direction: column; gap: 10px; color: var(--fg); }
.next .d { font-size: clamp(32px, 5vw, 72px); font-weight: 750; transition: color .3s; }
.next:hover .d { color: var(--acc); }
.vals .d { font-size: 24px; }
.svc-t p { font-size: 18px; line-height: 1.65; color: var(--fg-2); margin: 0 0 18px; max-width: 64ch; }
.svc-t .btn { margin-top: 12px; }
.cblocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.cblocks > div { display: flex; flex-direction: column; gap: 10px; padding: 36px 28px 36px 0; padding-inline: 0 28px; }
.cblocks .d { font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; color: var(--fg); }
.cblocks a.d:hover { color: var(--acc); }
.rfq textarea { font: 16px var(--f-sans); background: var(--bg-2); color: var(--fg); border: 1px solid var(--rule-2); border-radius: var(--r); padding: 14px; text-transform: none; letter-spacing: 0; resize: vertical; }
html[lang="ar"] .rfq textarea { font-family: var(--f-ar); }
.rfq textarea:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 25%, transparent); }
.co { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.co li { background: var(--bg-2); padding: 28px; display: flex; flex-direction: column; gap: 12px; transition: background-color .3s; }
.co li:hover { background: var(--bg); }
.co li > div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.co p { margin: 0; font-size: 14px; color: var(--fg-2); }
.co a { color: var(--acc); font-size: 11px; margin-top: auto; }
h2.d a { color: inherit; } h2.d a:hover { color: var(--acc); }

/* Scope of work (original site's icon grid) */
.scope-grid { display: grid; gap: 40px; }
.sc-g { display: grid; grid-template-columns: minmax(200px, 1fr) 3fr; gap: 24px; padding-top: 28px; border-top: 1px solid var(--rule-2); }
.sc-h { display: flex; flex-direction: column; gap: 10px; color: var(--fg); font-size: 22px; font-weight: 700; line-height: 1.15; }
.sc-h:hover { color: var(--acc); }
.sc-h .m { font-size: 11px; }
.sc-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sc-t { background: var(--bg); color: var(--fg); border: 1px solid var(--rule); border-radius: var(--r); padding: 26px 20px 22px; display: flex; flex-direction: column; gap: 18px; min-height: 160px; transition: background-color .3s; }
.sc-t span { font-size: 15px; font-weight: 600; line-height: 1.3; }
.sc-t .ico { width: 52px; height: 52px; color: var(--acc); transition: transform .5s var(--ease); }
.sc-t:hover { background: var(--bg-2); color: var(--fg); border-color: var(--acc); }
.sc-t:hover .ico { transform: translateY(-4px) scale(1.06); }
@media (max-width: 900px) { .sc-g { grid-template-columns: 1fr; } .sc-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Timeline with all ten milestones: five per row */
.timeline.tl10 { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 40px; }
@media (max-width: 1000px) { .timeline.tl10 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); } }

/* Partner logos: colour logos on white tiles; a marquee with motion, a wrapped wall without */
.logos { overflow: hidden; padding-inline: var(--gutter); }
.logo-run { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; max-width: 1320px; }
.logo-run li { flex: 0 0 auto; width: 168px; height: 104px; background: #fff; border-radius: var(--r); display: grid; place-items: center; padding: 14px 20px; }
.logo-run img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .72; transition: filter .35s, opacity .35s; }
.logo-run li:hover img { filter: none; opacity: 1; }
.mo .logos.run { display: flex; gap: 12px; padding-inline: 0; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mo .logos.run .logo-run { flex-wrap: nowrap; max-width: none; margin: 0; animation: lg 60s linear infinite; }
html[dir="rtl"].mo .logos.run .logo-run { animation-name: lg-rtl; }
@keyframes lg { to { transform: translateX(calc(-100% - 12px)); } }
@keyframes lg-rtl { to { transform: translateX(calc(100% + 12px)); } }
.mo .logos.run:hover .logo-run { animation-play-state: paused; }

/* Brochure band over FTC's own counter footage */
.broch { position: relative; overflow: hidden; color: #EAF2F7; }
.broch .bgimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.broch::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,10,15,.88), rgba(6,10,15,.55)); }
html[dir="rtl"] .broch::after { background: linear-gradient(270deg, rgba(6,10,15,.88), rgba(6,10,15,.55)); }
.broch .wrap { position: relative; z-index: 1; padding-block: clamp(80px, 11vw, 140px); display: flex; flex-wrap: wrap; align-items: center; gap: 20px 48px; }
.broch h2 { font-size: clamp(36px, 5vw, 72px); margin: 0; flex: 1 1 100%; max-width: 14ch; }
.broch .lead { margin: 0; color: #C9D6DF; flex: 1 1 360px; }

/* Interactive history (home + About). Without JS: a plain list of every milestone. */
.hx { --hx-t: 7s; }
.hx-rail, .hx-ctl { display: none; }
.hx-p { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px 56px; align-items: center; padding-block: 28px; border-top: 1px solid var(--rule); }
.hx-big { white-space: nowrap; font-size: clamp(72px, 10.5vw, 156px); font-weight: 800; line-height: .82; color: transparent; -webkit-text-stroke: 1.5px var(--acc); letter-spacing: -.02em; }
.hx-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--mist); font-size: 11px; margin-bottom: 18px; }
.hx-txt h3 { margin: 0 0 16px; font-size: clamp(28px, 3.4vw, 46px); font-weight: 750; line-height: 1.05; }
.hx-txt p { margin: 0; font-size: 18px; line-height: 1.65; color: var(--fg-2); max-width: 58ch; }
@media (max-width: 760px) { .hx-p { grid-template-columns: 1fr; } }

.hx.js .hx-rail { display: flex; position: relative; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; padding: 8px 8px 10px; margin: -8px -8px 32px; }
.hx.js .hx-rail::-webkit-scrollbar { display: none; }
.hx-track { position: relative; display: flex; flex: 1 0 auto; min-width: 100%; }
.hx-line { position: absolute; inset-inline: 12px; top: 11px; height: 2px; background: var(--rule-2); }
.hx-fill { position: absolute; inset-block: 0; inset-inline-start: 0; width: 0; background: var(--acc); transition: width .7s var(--ease); }
.hx-tab { position: relative; flex: 1 0 96px; scroll-snap-align: center; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 0 12px 0 0; padding-inline: 0 12px; background: none; border: 0; color: var(--mist); cursor: pointer; font: inherit; text-align: start; }
.hx-dot { width: 24px; height: 24px; border-radius: 50%; background: var(--bg); border: 2px solid var(--rule-2); position: relative; z-index: 1; transition: border-color .3s, background-color .3s, transform .4s var(--ease); }
.hx-y { font-family: var(--f-mono); font-size: 18px; font-weight: 600; transition: color .3s; }
.hx-gap { font-size: 10px; color: var(--mist); opacity: .7; }
.hx-tab:hover .hx-y, .hx-tab:focus-visible .hx-y { color: var(--fg); }
.hx-tab:hover .hx-dot { border-color: var(--acc); }
.hx-tab.past .hx-dot { border-color: var(--acc); background: var(--acc); transform: scale(.55); }
.hx-tab[aria-selected="true"] .hx-dot { border-color: var(--acc); background: var(--bg); transform: scale(1.1); box-shadow: 0 0 0 6px color-mix(in srgb, var(--acc) 18%, transparent); }
.hx-tab[aria-selected="true"] .hx-dot::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--acc); }
.hx-tab[aria-selected="true"] .hx-y { color: var(--acc); }
.hx-tab:focus-visible { outline: none; } .hx-tab:focus-visible .hx-dot { outline: 2px solid var(--acc); outline-offset: 3px; }
/* the autoplay timer under the active year */
.hx-tab::after { content: ""; position: absolute; inset-inline-start: 0; bottom: -6px; height: 2px; width: 0; background: var(--acc); }
.hx.playing .hx-tab[aria-selected="true"]::after { animation: hxt var(--hx-t) linear forwards; }
@keyframes hxt { to { width: calc(100% - 12px); } }

.hx.js .hx-stage { display: grid; touch-action: pan-y; }
.hx.js .hx-p { grid-area: 1 / 1; border: 0; padding: 0; opacity: 0; visibility: hidden; transform: translateY(18px); transition: opacity .55s var(--ease), transform .7s var(--ease), visibility 0s .7s; }
.hx.js .hx-p.cur { opacity: 1; visibility: visible; transform: none; transition: opacity .55s var(--ease) .1s, transform .7s var(--ease) .1s, visibility 0s; }
.hx.js .hx-p .hx-big { transform: translateX(-24px); transition: transform 1s var(--ease); }
html[dir="rtl"] .hx.js .hx-p .hx-big { transform: translateX(24px); }
.hx.js .hx-p.cur .hx-big, html[dir="rtl"] .hx.js .hx-p.cur .hx-big { transform: none; }
@media (max-width: 760px) { .hx-big { font-size: 21vw; } }
.hx.js .hx-ctl { display: flex; gap: 10px; margin-top: 40px; }
.hx-b { min-width: 48px; min-height: 48px; padding: 0 16px; border: 1px solid var(--rule-2); border-radius: var(--r); background: none; color: var(--fg); font: inherit; font-size: 18px; cursor: pointer; transition: border-color .25s, color .25s; }
.hx-b.m { font-size: 11px; }
.hx-b:hover { border-color: var(--acc); color: var(--acc); }
html[dir="rtl"] .hx-b[data-hx] { } html[dir="rtl"] .hx-b[data-hx="prev"], html[dir="rtl"] .hx-b[data-hx="next"] { transform: scaleX(-1); }
@media (prefers-reduced-motion: reduce) { .hx.js .hx-p, .hx.js .hx-p .hx-big, .hx-fill { transition: none; transform: none; } }

/* Home services: icon cards that open the full write-up */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 16px; }
.svc-c { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; text-align: start; padding: 28px 26px; min-height: 300px; background: var(--bg); color: var(--fg); border: 1px solid var(--rule); border-radius: var(--r-lg); font: inherit; cursor: pointer; transition: border-color .3s, transform .45s var(--ease), box-shadow .45s, background-color .3s; }
.svc-c .ico { width: 56px; height: 56px; color: var(--acc); margin-bottom: 8px; transition: transform .5s var(--ease); }
.svc-c .d { font-size: 26px; font-weight: 700; line-height: 1.1; }
.svc-c .s { font-size: 15px; line-height: 1.55; color: var(--fg-2); }
.svc-c .go { margin-top: auto; color: var(--acc); font-size: 11px; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .4s var(--ease); }
.svc-c:hover, .svc-c:focus-visible { border-color: var(--acc); transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgba(0,0,0,.45); outline: none; }
.svc-c:hover .ico { transform: scale(1.08) rotate(-4deg); }
.svc-c:hover .go, .svc-c:focus-visible .go { opacity: 1; transform: none; }
@media (hover: none) { .svc-c .go { opacity: 1; transform: none; } }
.svc-d { width: min(680px, calc(100% - 32px)); max-height: calc(100vh - 64px); padding: 36px; border: 1px solid var(--rule-2); border-radius: var(--r-lg); background: var(--bg); color: var(--fg); }
.svc-d::backdrop { background: rgba(6,10,15,.6); backdrop-filter: blur(4px); }
.svc-d[open] { animation: dlg .45s var(--ease); }
@keyframes dlg { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.svc-dh { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.svc-dh .ico { width: 44px; height: 44px; color: var(--acc); flex: none; }
.svc-dh h3 { margin: 0; font-size: 30px; flex: 1; }
.svc-dh .x { width: 44px; height: 44px; border: 1px solid var(--rule-2); border-radius: var(--r); background: none; color: var(--fg); font-size: 22px; cursor: pointer; }
.svc-d .lead { color: var(--fg); margin: 0 0 16px; max-width: none; }
.svc-d p { font-size: 16px; line-height: 1.65; color: var(--fg-2); }
.svc-d .link { display: inline-block; margin-top: 8px; }
.svc-ico .ico { width: 64px; height: 64px; color: var(--acc); margin-bottom: 20px; }
.svc-t .svc-s { color: var(--fg); font-size: 21px; }

/* Virtual office (OfficeVerse) panel, above the footer line on every page */
.vo { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px 32px; align-items: center; margin-top: 56px; padding: 28px 32px; border: 1px solid var(--rule); border-radius: var(--r-lg); background: linear-gradient(120deg, color-mix(in srgb, var(--acc) 10%, transparent), transparent 60%); }
.vo-i { width: 64px; height: 64px; display: grid; place-items: center; border-radius: var(--r); background: color-mix(in srgb, var(--acc) 14%, transparent); color: var(--acc); }
.vo-i svg { width: 40px; height: 40px; }
.vo-t { margin: 0 0 6px; font-size: clamp(22px, 2.4vw, 30px); color: var(--fg); }
.vo-s { margin: 0; font-size: 14px; line-height: 1.55; color: var(--fg-2); }
.vo-f label { display: block; color: var(--acc); font-size: 10px; margin-bottom: 8px; }
.vo-row { display: flex; gap: 8px; }
.vo-row input { flex: 1; min-width: 0; min-height: 50px; padding: 0 14px; font: 600 16px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; background: var(--bg-2); color: var(--fg); border: 1px solid var(--rule-2); border-radius: var(--r); }
.vo-row input::placeholder { letter-spacing: .04em; text-transform: none; color: var(--mist); font-weight: 400; }
.vo-row input:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 25%, transparent); }
.vo-row .btn { flex: none; }
.vo-n { margin: 10px 0 0; font-size: 10px; color: var(--mist); }
.vo-n a { color: var(--acc); }
@media (max-width: 900px) { .vo { grid-template-columns: auto minmax(0, 1fr); } .vo-f { grid-column: 1 / -1; } }
@media (max-width: 480px) { .vo { padding: 22px; } .vo-row { flex-direction: column; } }

/* Isometric duotone icons: faces take the accent at three strengths, on a lit tile; one part moves on hover */
.ico-t { position: relative; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 18px; flex: none;
  background: radial-gradient(120% 90% at 30% 15%, color-mix(in srgb, var(--acc) 22%, transparent), transparent 62%), color-mix(in srgb, var(--fg) 4%, var(--bg));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 26%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent), 0 10px 24px -14px color-mix(in srgb, var(--acc) 60%, transparent);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.ico-t .ico { width: 64px; height: 64px; overflow: visible; color: var(--acc); }
.ico polygon, .ico polyline { stroke: var(--acc); stroke-width: .9; }
.ico .t { fill: color-mix(in srgb, var(--acc) 34%, var(--bg)); }
.ico .l { fill: color-mix(in srgb, var(--acc) 18%, var(--bg)); }
.ico .r { fill: color-mix(in srgb, var(--acc) 9%, var(--bg)); }
.ico .dk.t { fill: color-mix(in srgb, var(--fg) 22%, var(--bg)); } .ico .dk.l { fill: color-mix(in srgb, var(--fg) 12%, var(--bg)); } .ico .dk.r { fill: color-mix(in srgb, var(--fg) 6%, var(--bg)); }
.ico .dk { stroke: color-mix(in srgb, var(--acc) 55%, var(--fg)); }
.ico .acc.t { fill: color-mix(in srgb, var(--acc) 85%, #fff); } .ico .acc.l { fill: var(--acc); } .ico .acc.r { fill: color-mix(in srgb, var(--acc) 70%, #000); }
.ico .a1 { fill: color-mix(in srgb, var(--acc) 14%, transparent); }
.ico .a2 { fill: color-mix(in srgb, var(--acc) 55%, var(--bg)); }
.ico .a3 { fill: var(--acc); stroke: color-mix(in srgb, var(--acc) 60%, #fff); }
.ico polyline { fill: none; } .ico .k { stroke-opacity: .55; } .ico .k2 { stroke-width: 1.3; } .ico .k3 { stroke-width: 1.6; stroke-dasharray: 2 2.5; }
.ico .sh { fill: color-mix(in srgb, var(--acc) 30%, transparent); filter: blur(2px); transition: transform .5s var(--ease), opacity .5s; transform-origin: 32px 60px; }
.ico .mv { transform-box: fill-box; transform-origin: center; transition: transform .7s var(--ease); }
a:hover .ico-t, button:hover .ico-t, a:focus-visible .ico-t, button:focus-visible .ico-t { transform: translateY(-5px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 55%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent), 0 18px 30px -14px color-mix(in srgb, var(--acc) 75%, transparent); }
a:hover .ico .sh, button:hover .ico .sh { transform: scale(.8); opacity: .6; }
a:hover .ico .spin, button:hover .ico .spin, a:hover .ico .spin2, a:hover .ico .spin3, button:hover .ico .spin4 { animation: icospin 1.6s linear infinite; }
a:hover .ico .flo, button:hover .ico .flo { transform: translateY(-3px); }
a:hover .ico .lift { transform: translateY(-5px); }
a:hover .ico .up { transform: translateY(-4px); }
a:hover .ico .air { animation: icoair .9s linear infinite; }
a:hover .ico .fl { animation: icofl .8s ease-in-out infinite alternate; }
a:hover .ico .tw { animation: icotw 1s ease-in-out infinite alternate; }
@keyframes icospin { to { transform: rotate(360deg); } }
@keyframes icoair { to { stroke-dashoffset: -9; } } .ico .air polyline { stroke-dasharray: 2 2.5; }
@keyframes icofl { to { transform: scaleY(1.12) translateY(-1px); } }
@keyframes icotw { to { transform: scale(1.2); opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .ico .mv, .ico-t { animation: none !important; transition: none; } }
/* sizes per context */
.sc-t .ico-t { width: 76px; height: 76px; } .sc-t .ico-t .ico { width: 58px; height: 58px; }
.svc-c .ico-t { margin-bottom: 8px; }
.svc-dh .ico-t { width: 60px; height: 60px; border-radius: 14px; } .svc-dh .ico-t .ico { width: 46px; height: 46px; }
.svc-ico .ico-t { width: 96px; height: 96px; margin-bottom: 20px; } .svc-ico .ico-t .ico { width: 74px; height: 74px; }
.svc-c .d { font-size: clamp(19px, 1.7vw, 23px); overflow-wrap: normal; hyphens: none; }

/* Build phases: a card under the model explains the active phase */
.pcards { margin-top: 20px; }
.pcard { border-top: 1px solid var(--rule); padding-top: 18px; margin-top: 18px; }
.pcards.js { display: grid; }
.pcards.js .pcard { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .45s var(--ease), transform .55s var(--ease), visibility 0s .55s; }
.pcards.js .pcard.cur { opacity: 1; visibility: visible; transform: none; transition: opacity .45s var(--ease) .08s, transform .55s var(--ease) .08s, visibility 0s; }
.pcard h3 { margin: 8px 0 14px; font-size: 22px; font-weight: 700; }
.pc-g { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px; }
.pc-g .m.muted { font-size: 10px; margin: 0 0 8px; }
.pcard ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.pcard li { position: relative; padding-inline-start: 18px; font-size: 14px; line-height: 1.5; color: var(--fg-2); }
.pcard li::before { content: ""; position: absolute; inset-inline-start: 0; top: .55em; width: 8px; height: 2px; background: var(--acc); }
.pc-get { border-inline-start: 1px solid var(--rule); padding-inline-start: 20px; }
.pc-get p:not(.m) { margin: 0; font-size: 15px; line-height: 1.5; color: var(--fg); font-weight: 600; }
.pull { margin-top: 16px; display: flex; flex-direction: column; gap: 2px; }
.pull-n { font-size: 52px; font-weight: 800; color: var(--acc); line-height: 1; font-variant-numeric: tabular-nums; }
.pull .m { font-size: 10px; } .pull b { color: var(--fg); }
.bnote { font-size: 10px; margin: 14px 0 0; }
@media (max-width: 560px) { .pc-g { grid-template-columns: 1fr; } .pc-get { border: 0; padding: 0; } }
.stage-phase { position: absolute; top: 14px; inset-inline-start: 14px; z-index: 2; padding: 7px 11px; border-radius: var(--r); font-size: 10px; color: var(--acc); background: color-mix(in srgb, var(--bg) 82%, transparent); border: 1px solid var(--rule); pointer-events: none; }
.stage-phase:empty { display: none; }
.steps .step .s { display: block; }

/* v2 sound toggle in the header */
.snd { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 12px; border: 1px solid var(--rule-2); border-radius: var(--r); background: none; color: var(--fg); font-size: 10px; cursor: pointer; transition: border-color .25s, color .25s; }
.snd:hover { border-color: var(--acc); color: var(--acc); }
.snd .w1, .snd .w2 { opacity: .25; transition: opacity .3s; }
.snd[aria-pressed="true"] { color: var(--acc); border-color: var(--acc); }
.snd[aria-pressed="true"] .w1 { opacity: 1; animation: sndw 1.4s ease-in-out infinite; }
.snd[aria-pressed="true"] .w2 { opacity: 1; animation: sndw 1.4s ease-in-out .2s infinite; }
@keyframes sndw { 50% { opacity: .35; } }
@media (max-width: 760px) { .snd .snd-l { display: none; } .snd { padding: 8px 10px; } }
.snd .snd-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.snd { padding: 8px 11px; }
.hdr .nav a, .hdr .btn.q, .hdr .tel, .hdr .lang { white-space: nowrap; }
@media (max-width: 1360px) { .hdr .tel { display: none; } }