/* ============================================================
   appliedintelligencelabs.gr — page layout
   The ail-* layers (ail-tokens, ail-atoms, ail-molecules,
   ail-organisms) are copies from the brand drive and are never
   edited here. This file only PLACES their components on the
   page, using the approved board's measurements:
     01. Specification & Design/website/boards/E-Glass-Home.dc.html (1440)
     01. Specification & Design/website/boards/E-Mobile.dc.html (390)
   Colour, type, radius and the glass recipes come from the tokens.
   Never restyle a component in this file: compose and place.
   ============================================================ */

/* ---------- base: border-box, which the layers assume but do not set ----------
   The boards are drawn border-box, and the components only fit that way (the
   52px .ail-switch holds its thumb only if its 3px padding is inside the 52). */
*, *::before, *::after { box-sizing: border-box; }

/* ---------- page rhythm, mobile first (the board's section spacing) ---------- */
:root {
  --page-section-top: var(--section-y-mobile);
  --page-section-bottom: var(--section-y-mobile);
  --page-head-gap: var(--sp-7);
  --page-card-gap: var(--sp-5);
  --header-block: 84px;                 /* glass header: 16px margin + 68px pill */
}
@media (min-width: 900px) {
  :root {
    --page-section-top: 100px;          /* board: titled sections 100 / 80 */
    --page-section-bottom: 80px;
    --page-head-gap: var(--sp-8);
    --header-block: 92px;               /* 24px margin + 68px pill */
  }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

main { display: block; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* The glass backdrop (Night, two glows, the faint constellation) held still
   behind the whole page, as BUILD.md section 5 asks. */
.ail-backdrop.page-backdrop { position: fixed; inset: 0; z-index: -1; pointer-events: none; }

.skip-link {
  position: absolute; left: var(--sp-4); top: var(--sp-4); z-index: 100;
  padding: var(--sp-3) var(--sp-5); border-radius: var(--radius-pill);
  background: var(--color-primary); color: var(--color-primary-ink);
  font-weight: var(--font-weight-semibold); text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ---------- header: the component, plus the menu button below 1200px ----------
   Five links, the button and the logo need about 1180px, so the links move
   behind the menu button below 1200px rather than the 900px the organism
   assumes for its four-item paper header.

   It scrolls away with the page rather than staying pinned, and the glass pill
   is exactly as wide as the footer: the page container's width, centred
   (George, 2026-10-01). The organism makes it sticky and 40px from the edges. */
.ail-site-header.site-header { position: relative; top: auto; }
[data-theme="glass"] .site-header {
  width: min(100% - 2 * var(--page-x-mobile), var(--site-max));
  margin: 16px auto 0;
}
@media (min-width: 900px) {
  [data-theme="glass"] .site-header {
    width: min(100% - 2 * var(--page-x), var(--site-max));
    margin: 24px auto 0;
  }
}
.site-header__actions { display: flex; align-items: center; gap: var(--sp-5); }
.site-header .ail-nav { gap: 28px; }
.site-header__cta { display: none; }
.menu-toggle { display: inline-flex; }
.menu-toggle__close { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__close { display: block; }
@media (max-width: 899px) {
  .site-header .ail-site-header__brand img { height: 26px; }   /* the mobile board's small build */
}
@media (min-width: 640px) {
  .site-header__cta { display: inline-flex; }
}
@media (max-width: 1199px) {
  .site-header .ail-nav { display: none; }
}
@media (min-width: 1200px) {
  .menu-toggle { display: none; }
}

/* ---------- the mobile menu: an ail-sheet over an ail-scrim (BUILD.md section 6) ---------- */
.menu-scrim[hidden], .menu-sheet[hidden] { display: none; }
.menu-sheet {
  display: flex; flex-direction: column; gap: var(--sp-5);
  padding-bottom: calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
}
.menu-sheet__list { list-style: none; margin: 0; padding: 0; }
.menu-sheet__list a {
  display: flex; align-items: center; min-height: 48px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary); text-decoration: none;
  font-size: var(--text-md); font-weight: var(--font-weight-medium);
}
.menu-sheet__cta { width: 100%; }
html.menu-open { overflow: hidden; }
html.menu-open .site-header { z-index: 42; }   /* above the scrim, so "Close menu" stays reachable */

/* ---------- sections ---------- */
.page-section { padding-block: var(--page-section-top) var(--page-section-bottom); }
.page-section--even { padding-block: var(--page-section-bottom); }
.page-section--proof { padding-block: 0 var(--sp-6); }
@media (min-width: 900px) {
  .page-section--proof { padding-block: 20px 60px; }
  .page-section--statement,
  .page-section--contact { padding-block: 60px 80px; }
}
.section-body { display: flex; flex-direction: column; gap: var(--page-head-gap); }

.section-head { display: grid; gap: var(--sp-4); }
.section-head > * { margin: 0; }
@media (min-width: 900px) {
  .section-head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
  .section-head h2 { grid-column: span 6; }
  .section-head p { grid-column: 8 / span 5; }
  .section-head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
  .section-head--split p { max-width: 460px; }
}

/* ---------- hero: the raised glass card over the Constellation ----------
   From 1280px the map is full-bleed behind the header and the card, 1440 x 900 at
   1440 wide, and the two pills and the legend sit in the map's own box,
   positioned in percentages so they track the route as it scales (BUILD.md
   section 5). Below 1280px the 620px card would cover the lit route and the
   Today node (the route starts at 56% of the map's width), so the map drops
   under the card instead, cropped around the route, without the legend.

   Each crop is a window onto the 1440 x 900 map: x0/y0 its top-left corner and
   cw/ch its size, in map units. frame width = 1440/cw, left = -x0/cw,
   top = -y0/ch, all as percentages of the window. */
.hero { padding-block: var(--sp-5) var(--sp-6); }
.hero__card {
  display: flex; flex-direction: column; gap: var(--sp-6);
  padding: var(--card-pad-y) var(--card-pad-x); border-radius: var(--radius-panel);
}
.hero__card > * { margin: 0; }
.hero__actions { display: flex; flex-direction: column; gap: var(--sp-3); }
.hero__actions .ail-btn { width: 100%; }
@media (min-width: 600px) {
  .hero__actions { flex-direction: row; flex-wrap: wrap; }
  .hero__actions .ail-btn { width: auto; }
}
@media (min-width: 900px) {
  .hero__card { max-width: 620px; }
}

/* phones: the mobile board's 390 x 440 window; x0 715, y0 210, cw 600 */
.hero-map { position: relative; margin-top: var(--sp-6); aspect-ratio: 390 / 440; overflow: hidden; }
.hero-map__frame { position: absolute; left: -119.17%; top: -31.02%; width: 240%; aspect-ratio: 1440 / 900; }
/* tablets: 16:9; x0 640, y0 330, cw 700 */
@media (min-width: 600px) and (max-width: 899px) {
  .hero-map { aspect-ratio: 16 / 9; }
  .hero-map__frame { left: -91.43%; top: -83.81%; width: 205.71%; }
}
/* small desktops: 16:9, wider so the art is not over-zoomed; x0 340, y0 200, cw 1100 */
@media (min-width: 900px) and (max-width: 1279px) {
  .hero-map { aspect-ratio: 16 / 9; }
  .hero-map__frame { left: -30.91%; top: -32.32%; width: 130.91%; }
}
.hero-map__art { display: block; width: 100%; height: 100%; }
.hero-map__pill { position: absolute; white-space: nowrap; }
.hero-map__pill--today { left: 57.083%; top: 76.444%; }      /* board: left 822, top 688 of 1440 x 900 */
.hero-map__pill--outcome { left: 74.722%; top: 48.667%; }    /* board: left 1076, top 438 */
@media (max-width: 374px) {
  /* too narrow for the pill right of its node: it ends left of the node instead,
     clear of the route (which arrives from the lower left, x 1036 at that height) */
  .hero-map__pill--outcome { left: auto; right: 28.47%; }
}
.hero-map__legend { display: none; }

@media (min-width: 1280px) {
  /* the 110px above the card is the section's padding, not the card's margin, which
     would collapse through the section and push the whole page down */
  .hero { min-height: calc(62.5vw - var(--header-block)); padding-block: 110px var(--sp-6); }
  .hero__card { padding: var(--sp-8); }
  .hero-map {
    position: absolute; z-index: -1; top: 0; left: 0; width: 100%;
    margin: 0; aspect-ratio: 1440 / 900; overflow: visible;
  }
  .hero-map__frame { left: 0; top: 0; width: 100%; }
  .hero-map__legend {
    display: flex; flex-direction: column; gap: 10px;
    position: absolute; top: 79.556%; right: max(2.78%, var(--sp-6)); width: 250px;   /* board: left 1150, top 716, 250 wide */
    padding: var(--sp-4) 18px; border-radius: var(--radius-xl);
    font-size: 0.78125rem; color: var(--text-primary);
  }
  .hero-map__legend span { display: flex; align-items: center; gap: var(--sp-3); }
}
.legend-glyph { display: block; flex-shrink: 0; }

/* ---------- cards ---------- */
.card-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--page-card-gap); }
@media (min-width: 600px) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ail-card > *, .ail-service > *, .feature__copy > *, .process-card > * { margin: 0; }

/* The board's icons are lit like the service icons: the same two drop shadows
   the glass .ail-service__icon carries. */
.lit-icon {
  display: block; flex-shrink: 0;
  filter: drop-shadow(-0.6px -0.6px 0 rgba(255,255,255,.35)) drop-shadow(1.5px 2px 2.5px rgba(0,0,0,.45));
}

/* Card titles, at the board's sizes, from the type scale. */
.proof-card__title { font-size: var(--text-xl); line-height: var(--line-height-heading); letter-spacing: var(--tracking-logo); }
.work-card__title { font-size: var(--text-2xl); line-height: 1.15; letter-spacing: var(--tracking-tight); }
.tech-card__title { font-size: var(--text-xl); line-height: 1.15; letter-spacing: var(--tracking-tight); }
.sector-card__title { font-size: var(--text-2xl); line-height: 1.12; letter-spacing: var(--tracking-h4); }
.process-card__title { font-size: var(--text-3xl); line-height: 1.1; letter-spacing: var(--tracking-h4); }
.work-card__pill { align-self: flex-start; margin-top: var(--sp-1); }
.pill-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ---------- diagrams: lifted from the board as they are; they scale ----------
   The large ones (the hotel platform, the four How-we-work diagrams) need a
   tablet's width to stay legible, so phones show the cards without them, as
   the mobile board does. The technology stack needs a desktop's. */
.diagram-well { overflow: hidden; }
.diagram { display: block; width: 100%; height: auto; }
.diagram-well--large { display: none; }
@media (min-width: 600px) {
  .diagram-well--large { display: block; }
}

/* ---------- the statement: the big line beside a glass panel ---------- */
.statement { display: grid; gap: var(--sp-6); }
.statement > * { margin: 0; }
.statement__panel { padding: var(--card-pad-y) var(--card-pad-x); }
.statement__panel p { margin: 0; }
.statement__text {   /* the board's 17px Light at 1.65, from the type tokens */
  font-size: var(--text-md); line-height: var(--line-height-loose);
  font-weight: var(--font-weight-light); color: var(--text-body);
}
@media (min-width: 900px) {
  .statement { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
  .statement h2 { grid-column: span 7; }
  .statement__panel { grid-column: 8 / span 5; padding: 28px 30px; }
}

/* ---------- what we've built: the feature card ---------- */
.feature { display: grid; gap: var(--sp-7); padding: var(--card-pad-y) var(--card-pad-x); border-radius: var(--radius-panel); }
.feature__copy { display: flex; flex-direction: column; gap: var(--sp-4); }
@media (min-width: 900px) {
  .feature { padding: 40px; }
}
@media (min-width: 1200px) {
  .feature { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
  .feature__copy { grid-column: span 5; }
  .feature__diagram { grid-column: 6 / span 7; }
}

/* ---------- how we work ---------- */
.process-grid { display: grid; gap: var(--sp-6); }
@media (min-width: 1200px) {
  .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.process-card {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--card-pad-y) var(--card-pad-x); border-radius: var(--radius-panel);
}
.process-card .diagram-well { margin-top: var(--sp-3); }
@media (min-width: 600px) and (max-width: 1199px) {
  .process-card .diagram-well { max-width: 736px; }
}
@media (min-width: 900px) {
  .process-card { padding: var(--sp-7); }
}

/* ---------- our technology: the stack diagram in a glass panel ---------- */
.stack-panel { display: none; padding: var(--sp-7); border-radius: var(--radius-panel); }
@media (min-width: 900px) {
  .stack-panel { display: block; }
}

/* ---------- contact: the glass CTA panel, inside the page container ---------- */
.page-section--contact .ail-cta { margin: 0; }
@media (max-width: 599px) {
  /* The button spans the panel, as the hero's do, and its words wrap rather than run
     off the narrowest phones. nowrap: Chrome sizes a column flex container that wraps
     at its items' max-content width, which once pushed a long button off a 390px screen */
  .ail-cta__actions { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: var(--sp-3); }
  .ail-cta__actions .ail-btn { white-space: normal; overflow-wrap: anywhere; text-align: center; }
}

/* ---------- footer (glass): the component, inside the page container ---------- */
[data-theme] .site-footer { margin: 0; }   /* the glass footer's side margin is the container's job here */
.site-footer .ail-footer__legal p { margin: 0; }
.site-footer__place { display: flex; flex-wrap: wrap; gap: 28px; }
[data-theme="paper"] .site-footer__place { gap: 32px; }

/* ---------- touch targets never go below 44px (BUILD.md section 6) ---------- */
.site-header .ail-site-header__brand,
.ail-footer__brand { min-height: var(--tap-min); }
.site-header .ail-nav a { display: inline-flex; align-items: center; min-height: var(--tap-min); }
.ail-footer nav a { display: inline-flex; align-items: center; min-height: var(--tap-min); }
/* links inside a sentence or a table cell: a taller hit area, not a taller line */
.ail-footer__legal a,
.company-table a { position: relative; }
.ail-footer__legal a::after,
.company-table a::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: var(--tap-min); transform: translateY(-50%);
}

/* ---------- company details (paper) ---------- */
.company { padding-block: var(--sp-8) var(--sp-9); }
.company__inner { display: flex; flex-direction: column; gap: var(--sp-6); max-width: 720px; }
.company__inner > * { margin: 0; }
.company-table th { width: 42%; white-space: normal; vertical-align: top; }

/* ---------- privacy notice (paper): one readable column ---------- */
.legal { padding-block: var(--sp-8) var(--sp-9); }
.legal__inner { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 720px; }
.legal__inner > * { margin: 0; }
.legal__inner h2 {
  margin-top: var(--sp-5); font-size: var(--text-2xl);
  line-height: 1.15; letter-spacing: var(--tracking-tight);
}
.legal__inner p a { position: relative; }
.legal__inner p a::after {   /* a 44px hit area without a taller line */
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: var(--tap-min); transform: translateY(-50%);
}

/* ---------- motion: things appear as they scroll in ----------
   Ported from leaphospitality.gr, which rebuilt anthropic.com's: blocks fade up
   14px, once, in reading order; headings rise line by line out of a mask. The
   curve and the duration are the AIL tokens (--ease-out is the anthropic.com
   curve, cubic-bezier(.16,1,.3,1)); the staggers are leaphospitality.gr's.
   js/site.js sets --s (a block's slot in its section), --i (its place in a
   group) and --ln (a heading line's index). Everything here waits for the JS:
   html.no-js shows it all, and reduced motion turns it all off (below). */
:root {
  --enter: var(--dur-slow);
  --stagger-item: 60ms;      /* cards in a group */
  --stagger-section: 70ms;   /* heading, intro, panel in a section */
  --stagger-line: 90ms;      /* the lines of a heading */
  --hero-delay-lead: 120ms;
  --hero-delay-actions: 220ms;
  --hero-delay-map: 420ms;
}
.reveal {
  opacity: 0; transform: translateY(14px);
  transition: opacity var(--enter) var(--ease-out), transform var(--enter) var(--ease-out);
  /* the two staggers summed in one declaration, so they compose instead of fighting */
  transition-delay: calc(var(--s, 0) * var(--stagger-section) + var(--i, 0) * var(--stagger-item));
}
.reveal.is-in { opacity: 1; transform: none; }
html.no-js .reveal { opacity: 1; transform: none; }

/* Masked lines: nothing applies until site.js has measured them (data-split="done"),
   so a refusal or an error leaves the heading as ordinary text with the block reveal. */
[data-split="done"] { opacity: 1; transform: none; transition: none; }
[data-split="done"] .ln {
  display: block; overflow: hidden;
  padding-bottom: .16em; margin-bottom: -.16em;   /* descenders and Greek accents stay inside the mask */
}
[data-split="done"] .ln > i {
  display: block; font-style: inherit;
  transform: translateY(104%); opacity: 0;
  transition: transform var(--enter) var(--ease-out), opacity var(--enter) var(--ease-out);
  transition-delay: calc(var(--s, 0) * var(--stagger-section) + var(--ln, 0) * var(--stagger-line));
}
[data-split="done"].is-in .ln > i { transform: none; opacity: 1; }
[data-split="done"][data-split-instant] .ln > i { transition: none; transform: none; opacity: 1; }

/* The hero, on load: the headline (the LCP element) never moves; the lead, the
   buttons, then the route's pills and the legend arrive after it. */
.hero-in .hero .ail-lead,
.hero-in .hero__actions,
.hero-in .hero-map__pill,
.hero-in .hero-map__legend {
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--enter) var(--ease-out), transform var(--enter) var(--ease-out);
}
.hero-in .hero .ail-lead { transition-delay: var(--hero-delay-lead); }
.hero-in .hero__actions { transition-delay: var(--hero-delay-actions); }
.hero-in .hero-map__pill--today { transition-delay: var(--hero-delay-map); }
.hero-in .hero-map__pill--outcome { transition-delay: calc(var(--hero-delay-map) + var(--stagger-line)); }
.hero-in .hero-map__legend { transition-delay: calc(var(--hero-delay-map) + 2 * var(--stagger-line)); }
.hero-in.hero-go .hero .ail-lead,
.hero-in.hero-go .hero__actions,
.hero-in.hero-go .hero-map__pill,
.hero-in.hero-go .hero-map__legend { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-in { opacity: 1 !important; transform: none !important; transition: none !important; }
  [data-split="done"] .ln > i { transform: none !important; opacity: 1 !important; transition: none !important; }
  .hero-in .hero .ail-lead, .hero-in .hero__actions, .hero-in .hero-map__pill, .hero-in .hero-map__legend {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* ---------- page not found (glass) ---------- */
.notfound { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-6); padding-block: var(--sp-9) 120px; }
.notfound > * { margin: 0; }