/* AIQ design foundation, shared by the homepage concepts.
   Brand: AIQ Brand Guidelines v1.0.
   Fonts: Yellix Light (Displaay) and Aeonik Fono Light/Regular (CoType), licensed by AIQ, served from
   shared/fonts/ (WOFF2/WOFF only). Hanken Grotesk and Azeret Mono remain as fallbacks while they load.
   Yellix comes in Light only, so every display weight renders as Light, as the brand asks. */
@font-face{font-family:"Yellix";src:url("../fonts/Yellix-Light.woff2") format("woff2"),url("../fonts/Yellix-Light.woff") format("woff");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Aeonik Fono";src:url("../fonts/aeonikfono-light.woff2") format("woff2"),url("../fonts/aeonikfono-light.woff") format("woff");font-weight:100 350;font-style:normal;font-display:swap}
@font-face{font-family:"Aeonik Fono";src:url("../fonts/aeonikfono-regular.woff2") format("woff2"),url("../fonts/aeonikfono-regular.woff") format("woff");font-weight:351 900;font-style:normal;font-display:swap}
:root{
  --ivory:#F9F9F4; --mint:#A6FFDB; --peach:#FFDDD4; --yellow:#FFF5B0;
  --coral:#FF5757; --graphite:#272D2D;
  --ink-2:#515655;
  --line:rgba(39,45,45,.12);
  --line-2:rgba(39,45,45,.22);
  --line-3:rgba(39,45,45,.4);
  --glass:rgba(249,249,244,.78);

  --display:"Yellix","Hanken Grotesk",Arial,sans-serif;
  --mono:"Aeonik Fono","Azeret Mono",ui-monospace,monospace;

  --m:max(16px,5vw);
  --nav-h:80px;
  --corner:var(--nx);
  /* graphic property (Brand Guidelines 2.6): coral connecting lines + the nexus corner wedge.
     Wedge = the official vector from AIQ_Graphic Property_RGB, normalised to a 1x1 box. */
  --link:rgba(255,87,87,.55);
  --nx:clamp(12px,1.15vw,24px);   /* AIQ screen applications and the website animation: about 22px at 1920 (p.71; notes p.42 vs applications) */
  --wedge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1C.5281 .1553 .1553 .5281 0 1Z'/%3E%3C/svg%3E");
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.32,.72,0,1);
  --z-canvas:0; --z-grid:1; --z-content:2; --z-nav:20; --z-menu:30;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;background:var(--ivory);color:var(--graphite);font-family:var(--mono);font-weight:300;font-size:1rem;line-height:1.6;letter-spacing:.03em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:1.5px solid var(--graphite);outline-offset:3px}
::selection{background:var(--mint);color:var(--graphite)}
[hidden]{display:none!important}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:99;background:var(--graphite);color:var(--ivory);padding:.7rem 1rem}
.skip:focus{left:8px}

/* ---------- type ---------- */
.label{font-family:var(--mono);font-size:.7rem;line-height:1;text-transform:uppercase;letter-spacing:.01em;font-weight:300}
.label-lg{font-size:.78rem}
.d{font-family:var(--display);font-weight:300;line-height:1.1;letter-spacing:.03em;margin:0;text-wrap:balance}
.d-hero{font-size:clamp(2.9rem,1.2rem + 6.4vw,6.4rem)}
.d-xl{font-size:clamp(2.4rem,1.2rem + 4.6vw,5rem)}
.d-l{font-size:clamp(2rem,1.2rem + 3vw,3.6rem)}
.d-m{font-size:clamp(1.4rem,1.1rem + 1vw,1.95rem)}
.d-s{font-size:1.2rem}
.lede{font-size:clamp(1rem,.95rem + .3vw,1.15rem);line-height:1.6;max-width:52ch;text-wrap:pretty}
.ink2{color:var(--ink-2)}
p{margin:0;text-wrap:pretty}
.tagline{font-family:var(--mono);font-weight:300;text-transform:uppercase;letter-spacing:.01em;line-height:1;color:var(--graphite)} /* coral is for lines and corners only */

/* ---------- layout ---------- */
.wrap{padding-inline:var(--m)}
.g6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:0}
.sec{position:relative;padding-block:clamp(5.5rem,3rem + 9vw,11rem)}
/* The 6x6 grid is only a construction guide in AIQ's guidelines, never drawn, so the old even column
   overlay is switched off everywhere. Structure is shown by coral connecting lines and frames instead. */
.cols{display:none}
.hair{height:1px;background:var(--line-2);transform-origin:left}

/* ---------- nexus corners: AIQ's solid coral wedge, sitting in a frame's corner (1-2 per frame) ---------- */
.nx{position:absolute;width:var(--nx);height:var(--nx);background:var(--coral);-webkit-mask:var(--wedge) 0 0/100% 100% no-repeat;mask:var(--wedge) 0 0/100% 100% no-repeat;pointer-events:none;z-index:3}
.nx.tl{left:0;top:0}.nx.tr{right:0;top:0;transform:scaleX(-1)}.nx.bl{left:0;bottom:0;transform:scaleY(-1)}.nx.br{right:0;bottom:0;transform:scale(-1,-1)}

/* ---------- windows: coral lines split a composition into unequal frames that resize ----------
   .win is a row (or .win.col a column) of .pane frames; each pane's share is --g (flex-grow), which
   aiq.js animates from data-g ("1.7,1" = state per scroll step) or on focus (data-focus / data-gf).
   --draw (0-1) draws the dividing lines in. */
.win{display:flex;position:relative;min-width:0;min-height:0}
.win.col{flex-direction:column}
.win > .pane{position:relative;flex:var(--g,1) 1 0;min-width:0;min-height:0}
.win:not(.col) > .pane + .pane::after,.win.col > .pane + .pane::after{content:"";position:absolute;z-index:2;pointer-events:none;background:var(--link)}
.win:not(.col) > .pane + .pane::after{left:0;top:0;bottom:0;width:1px;transform-origin:top;transform:scaleY(var(--draw,1))}
.win.col > .pane + .pane::after{left:0;right:0;top:0;height:1px;transform-origin:left;transform:scaleX(var(--draw,1))}
/* fluid grid (aiq.js data-fluid): tracks reflow between states; .fl fillers draw the track lines */
.fluid{display:grid;position:relative;min-width:0}
.fluid > .fl{pointer-events:none;box-shadow:inset -1px -1px 0 var(--fline,rgba(255,255,255,.8))}
.fluid[data-lines="coral"]{--fline:var(--link)}
.fluid[data-lines="pale"]{--fline:rgba(255,255,255,.8)}
.fw{position:relative;min-width:0;min-height:0;overflow:hidden}
.fw > img,.fw > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* stamp: four wedges around an empty or image container bring it to focus (guidelines 2.7) */
.stamp{position:relative}
.stamp > .nx{opacity:0;transition:opacity .35s var(--ease)}
.stamp:hover > .nx,.stamp:focus-within > .nx,.stamp.on > .nx{opacity:1}

/* ---------- trace: a coral line drops into a section label with the scroll, a dot riding its tip ---------- */
.trace{position:absolute;top:0;width:1px;z-index:var(--z-content);pointer-events:none;--p:0}
.trace::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,87,87,0),var(--coral) 30%);transform-origin:top;transform:scaleY(var(--p))}
.trace i{position:absolute;left:-3px;top:calc(var(--p) * 100%);width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--coral);box-shadow:none;opacity:0;transition:opacity .35s var(--ease)}
.trace.run i{opacity:1}
.trace b{position:absolute;left:0;bottom:0;width:var(--nx);height:var(--nx);background:var(--coral);-webkit-mask:var(--wedge) 0 0/100% 100% no-repeat;mask:var(--wedge) 0 0/100% 100% no-repeat;transform:scaleY(-1);opacity:0}
.trace.done b{opacity:1}
@keyframes flicker{from{opacity:0;transform:var(--nx-t,scale(1)) scale(.6)}to{opacity:1;transform:var(--nx-t,scale(1)) scale(1)}}
.flick{animation:flicker .5s cubic-bezier(.22,1,.36,1) both}
.nx.tr{--nx-t:scaleX(-1)}.nx.bl{--nx-t:scaleY(-1)}.nx.br{--nx-t:scale(-1,-1)}

/* ---------- buttons (squared, button-in-button) ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:.6rem;min-height:48px;padding:0 1.5rem;border-radius:999px;border:1px solid var(--coral);background:var(--ivory);color:var(--graphite);font-family:var(--mono);font-weight:300;font-size:.72rem;text-transform:uppercase;letter-spacing:.01em;cursor:pointer;box-shadow:none;transition:background .3s var(--ease)}
.btn .ic{display:inline-grid;place-items:center;width:auto;height:auto;background:none}
.btn .ic svg{width:14px;height:14px;transition:transform .6s var(--ease-soft)}
.btn:active{transform:scale(.98)}
.btn:hover .ic svg,.btn:focus-visible .ic svg{transform:translate(2px,-2px)}
.btn-p{background:var(--ivory);color:var(--graphite)}
.btn:hover,.btn:focus-visible{text-decoration:underline;text-decoration-color:var(--coral);text-underline-offset:4px}
.btn-p .ic{background:none}
.btn-p:hover .ic{background:none}
.btn-s{background:var(--ivory);color:var(--graphite)}
.btn-s .ic{background:none}
.btn-s:hover{background:var(--ivory)}
.btn-s:hover .ic{background:none;color:inherit}
.link-arrow{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.01em;background:linear-gradient(var(--coral),var(--coral)) left 78%/100% 1px no-repeat;padding-bottom:.35rem;transition:background-size .6s var(--ease)}
.link-arrow:hover,.link-arrow:focus-visible{background-size:100% 1px}
.link-arrow svg{width:12px;height:12px;transition:transform .5s var(--ease-soft)}
.link-arrow:hover svg{transform:translate(2px,-2px)}

/* ---------- logo (official AIQ brand mark, exported from the AI files) ---------- */
.wordmark{display:inline-flex;align-items:center;min-height:44px}
.wordmark .logo{display:block;width:44px;height:auto}
.foot .wordmark .logo{width:64px}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:var(--z-nav);height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:0 var(--m);transition:transform .7s var(--ease),background .4s var(--ease)}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--link);transform-origin:left}
.nav.solid{background:var(--ivory)}
.nav.hide{transform:translateY(-101%)}
.nav-links{display:none;gap:clamp(1.25rem,2vw,2.25rem)}
.nav-links a{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.01em;padding:.4rem 0;background:linear-gradient(var(--coral),var(--coral)) left bottom/0 1px no-repeat;transition:background-size .5s var(--ease)}
.nav-links a:hover,.nav-links a.on{background-size:100% 1px}
.nav-cta{display:none}
.menu-btn{display:inline-flex;align-items:center;gap:.75rem;min-height:44px;min-width:44px;background:none;border:0;cursor:pointer;padding:0;font-family:var(--mono);font-size:.72rem;letter-spacing:.01em;text-transform:uppercase}
.burger{position:relative;width:22px;height:10px}
.burger i{position:absolute;left:0;right:0;height:1px;background:var(--graphite);transition:transform .6s var(--ease-soft),top .6s var(--ease-soft)}
.burger i:nth-child(1){top:0}.burger i:nth-child(2){top:9px}
.menu-open .burger i:nth-child(1){top:4.5px;transform:rotate(45deg)}
.menu-open .burger i:nth-child(2){top:4.5px;transform:rotate(-45deg)}
@media (min-width:1080px){.nav-links{display:flex}.nav-cta{display:inline-flex}.nav .menu-btn.hide-lg{display:none}}
.progress{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--coral);transform:scaleX(0);transform-origin:left;z-index:1}

/* ---------- full-screen menu ---------- */
.menu{position:fixed;inset:0;z-index:var(--z-menu);display:grid;grid-template-rows:var(--nav-h) 1fr auto;visibility:hidden;pointer-events:none}
.menu-bg{position:absolute;inset:0;background:var(--ivory);opacity:0;transition:opacity .6s var(--ease)}
.menu-open .menu{visibility:visible;pointer-events:auto}
.menu-open .menu-bg{opacity:1}
.menu-top{position:relative;display:flex;align-items:center;justify-content:space-between;padding:0 var(--m);border-bottom:1px solid var(--link)}
.menu-list{position:relative;list-style:none;margin:0;padding:2rem var(--m);align-self:center;display:grid;gap:.25rem}
.menu-list li{overflow:hidden}
.menu-list a{display:flex;align-items:baseline;gap:1rem;font-family:var(--display);font-weight:300;font-size:clamp(2.2rem,1rem + 6vw,5rem);line-height:1.1;letter-spacing:.03em;transform:translateY(105%);transition:transform .9s var(--ease)}
.menu-open .menu-list a{transform:none}
.menu-list li:nth-child(2) a{transition-delay:.05s}.menu-list li:nth-child(3) a{transition-delay:.1s}.menu-list li:nth-child(4) a{transition-delay:.15s}.menu-list li:nth-child(5) a{transition-delay:.2s}.menu-list li:nth-child(6) a{transition-delay:.25s}.menu-list li:nth-child(7) a{transition-delay:.3s}
.menu-foot{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:1.25rem var(--m) 1.75rem;border-top:1px solid var(--link)}

/* ---------- field canvas ---------- */
.field{position:absolute;inset:0;overflow:hidden;z-index:var(--z-canvas)}
.field .fb{position:absolute;inset:0;background:radial-gradient(55% 60% at 16% 10%,var(--mint),transparent 70%),radial-gradient(50% 55% at 6% 100%,var(--peach),transparent 72%),radial-gradient(55% 50% at 96% 100%,var(--yellow),transparent 70%),var(--ivory)}
.field canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.4s var(--ease)}
.field canvas.on{opacity:1}

/* ---------- reveal states (only applied when motion is on) ---------- */
.motion [data-reveal]{opacity:0;transform:translateY(18px);filter:blur(8px)}
/* Revealed by a class with CSS transitions, which run on real time: the end state is reached even when
   the page drops frames or the tab is throttled. (A frame-driven tween could stall at opacity 0.) */
.motion [data-reveal].is-in{opacity:1;transform:none;filter:none}
.motion [data-reveal].is-in:not(.rv-done){transition:opacity .95s var(--ease),transform .95s var(--ease),filter .95s var(--ease);transition-delay:var(--rv-d,0s)}
.split-line{display:block}
/* SplitText clips each line in a mask; give the mask room below the baseline so descenders (g, y, p, q)
   are not cut on tight display leading. The negative margin keeps the line spacing unchanged.
   SplitText names the mask by suffixing every word of linesClass, so "split-line" becomes "split-mask-line-mask". */
.split-mask-line-mask{padding-bottom:.24em;margin-bottom:-.24em}

/* ---------- depth ---------- */
.depth{box-shadow:none}
.glass{background:var(--ivory)}

/* ---------- photography ---------- */
.ph{position:relative;overflow:hidden;margin:0;background:var(--ivory);isolation:isolate}
.ph img{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover;will-change:transform}
/* photos stay clean, sharp rectangles: no tint overlay (spec E2) */
.ph .nx{z-index:2}
.ph figcaption{position:absolute;left:.9rem;bottom:.8rem;z-index:2;padding:.35rem .55rem;background:var(--ivory)}

/* ---------- footer ---------- */
.foot{position:relative;padding:clamp(4rem,3rem + 4vw,6rem) var(--m) 2rem;border-top:1px solid var(--link)}
.foot-grid{display:grid;gap:2.5rem}
@media (min-width:900px){.foot-grid{grid-template-columns:2fr 1.2fr 1fr .9fr 1.1fr}}
.foot h3{margin:0 0 1rem}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.foot ul a{display:inline-flex;align-items:center;min-height:44px;font-size:.9rem;background:linear-gradient(var(--graphite),var(--graphite)) left bottom/0 1px no-repeat;transition:background-size .5s var(--ease)}
.foot ul a:hover{background-size:100% 1px}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;margin-top:clamp(3rem,2rem + 3vw,5rem);padding-top:1.25rem;border-top:1px solid var(--link)}

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

/* ---------- 19 Oct (Danil): Services and Partners carry a short submenu in the header (AI Lab; Industry Partners and
   Strategic Collaborations). It opens on hover or keyboard focus, as an ivory panel under the nav line ---------- */
.nsub{position:relative;display:flex;align-items:center}
/* hidden by opacity, not visibility, so the keyboard can still tab into it: focusing a sub-link opens the panel */
.nsub-m{position:absolute;top:calc((100% + var(--nav-h)) / 2);left:-1.25rem;z-index:2;display:grid;min-width:max-content;padding:.5rem 1.25rem .7rem;background:var(--ivory);border:0;border-left:1px solid var(--link);opacity:0;pointer-events:none;transform:translateY(-4px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.nsub:hover .nsub-m,.nsub:focus-within .nsub-m{opacity:1;pointer-events:auto;transform:none}
/* a bridge over the gap between the link and the panel, so the pointer can travel down */
.nsub-m::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:calc(var(--nav-h) / 2)}
.nsub-m a{display:inline-flex;align-items:center;min-height:44px;padding:0}
.nsub-m a + a{border-top:1px solid var(--line)}
.nsub > a::after{content:"";display:inline-block;width:5px;height:5px;margin:0 0 .2em .5rem;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);vertical-align:middle}
/* the menu holds eight items and three sub-pages: a smaller display size so they fit one screen */
.menu-list{overflow-y:auto;max-height:100%}
.menu-list a{font-size:max(1.5rem,min(clamp(1.9rem,1rem + 3vw,3.1rem),calc((100svh - var(--nav-h) - 12rem) / 12)))}
.menu-list li:nth-child(8) a{transition-delay:.35s}
.menu-list a{display:block}
/* 31 Oct: eight items; sub-pages sit under their parent, small and indented, with the same left rule as the header submenu */
.menu-sub{display:grid;margin:.2rem 0 .6rem .15em;padding-left:1.1rem;border-left:1px solid var(--link)}
.menu-list .menu-sub a{display:flex;align-items:center;justify-self:start;min-height:44px;font-family:var(--mono);font-size:.72rem;letter-spacing:.01em;line-height:1;text-transform:uppercase;color:var(--ink-2);transform:none;opacity:0;transition:opacity .6s var(--ease)}
/* the sub-links fade in after their parent has slid up (beats the li:nth-child stagger) */
.menu-list li .menu-sub a{transition-delay:.45s}
.menu-open .menu-list .menu-sub a{opacity:1}
/* short phones (iPhone SE): a little less air so all eight items fit without scrolling */
@media (max-height:720px){.menu-list{padding:.75rem var(--m)}.menu-list a{font-size:max(1.5rem,calc((100svh - var(--nav-h) - 12rem) / 13))}.menu-sub{margin:.1rem 0 .3rem .15em}}
/* 21 Oct: header links never wrap ("Our Services", "About Us") */
.nav-links a{white-space:nowrap}