/* =========================================================
   DIGIQAL — Home (Desktop Figma frame 624:9228)
   Tokens → Base → Header → Hero → Sections → Footer → Responsive
   ========================================================= */

/* ---------- Fonts (self-hosted, no external requests) ----------
   TT Norms Pro is one of the two typefaces the Figma file specifies, and the
   supplied cuts cover exactly the weights the design uses (300/400/500/700)
   with full Greek coverage. It therefore carries the whole page, including the
   text the frame assigns to CF Asty Std — only the 400 "Book" cut of that
   family was available, and the design never uses 400.
   The hero's "Bold Oblique" run is synthesised; an oblique IS a slanted roman,
   so that matches the intent. Swap --font below the day the Asty
   Light/Medium/Bold cuts turn up. */
@font-face {
  font-family: 'TT Norms Pro';
  src: url('fonts/norms/woff2/TT_Norms_Pro_Light.woff2') format('woff2'),
       url('fonts/norms/woff/TT_Norms_Pro_Light.woff')   format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TT Norms Pro';
  src: url('fonts/norms/woff2/TT_Norms_Pro_Regular.woff2') format('woff2'),
       url('fonts/norms/woff/TT_Norms_Pro_Regular.woff')   format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TT Norms Pro';
  src: url('fonts/norms/woff2/TT_Norms_Pro_Medium.woff2') format('woff2'),
       url('fonts/norms/woff/TT_Norms_Pro_Medium.woff')   format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TT Norms Pro';
  src: url('fonts/norms/woff2/TT_Norms_Pro_Bold.woff2') format('woff2'),
       url('fonts/norms/woff/TT_Norms_Pro_Bold.woff')   format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* colour */
  --bg:            #f4f4f6;
  --blue:          #165fff;
  --blue-deep:     #0b40b4;
  --navy:          #061350;
  --black:         #1c1c1c;
  --white:         #ffffff;
  --grey:          #9f9f9f;
  --faded:         rgba(159, 159, 159, .9);
  --ink-90:        rgba(28, 28, 28, .9);
  --light-90:      rgba(244, 244, 246, .9);
  --wash:          rgba(34, 49, 120, .1);
  --wash-soft:     rgba(34, 49, 120, .08);
  --legal:         rgba(34, 49, 120, .7);

  /* type */
  --font:          'TT Norms Pro', 'Segoe UI', system-ui, sans-serif;
  --font-display:  'TT Norms Pro', 'Segoe UI', system-ui, sans-serif;
  /* Figma sizes (40/30/25/22 · 22/16 · 16 · 14) are reached at 1200px and held
     all the way up, rather than only at the 1920 frame width — otherwise every
     heading shrank ~20% on a laptop while the body text did not, and the
     hierarchy collapsed (H4 and body both landed on 18px at 1440). */
  --fs-h1:         clamp(30px, 3.33vw, 40px);
  --fs-h2:         clamp(23px, 2.50vw, 30px);
  --fs-h3:         clamp(21px, 2.08vw, 25px);
  --fs-h4:         clamp(19px, 1.83vw, 22px);
  --fs-body-lg:    clamp(18px, 1.83vw, 22px);
  --fs-body:       clamp(15px, 1.33vw, 16px);
  --fs-btn:        clamp(15px, 1.33vw, 16px);
  --fs-xs:         14px;

  /* Line heights are Figma's resolved lineHeightPx / fontSize. The file leaves
     them INTRINSIC, so these are the type's own metrics — verified against the
     text nodes' bounding boxes, which divide into whole line counts exactly
     (e.g. service text 115px / 23.3 = 5.00 lines). They are much tighter than
     a typical web default; that tightness is the design. */
  --lh-h1:         1.045;   /* 41.8 / 40 */
  --lh-h2:         1.045;   /* 31.3 / 30 */
  --lh-h3:         1.0;     /* 25.0 / 25 */
  --lh-h4:         1.2;     /* 26.4 / 22 */
  --lh-body:       1.057;   /* 16.9 / 16  and 23.3 / 22 */
  --lh-btn:        1.2;     /* 19.2 / 16 */

  /* layout */
  --container:     1480px;
  --container-wide:1614px;
  --container-hero:1440px;   /* Hero frame 359:809 puts content at x=240 */
  --gutter:        24px;
  --section-y:     clamp(64px, 5.2vw, 100px);   /* every section frame pads 100 / 100 (624:9228) */

  /* shape */
  --r-card:        0px;
  --r-pill:        30px;

  /* elevation */
  --sh-card:       18px 18px 36px -4px rgba(34, 49, 120, .2);
  --sh-card-strong:18px 18px 36px -4px rgba(34, 49, 120, .25);
  --sh-post:       20px 20px 60px -10px rgba(18, 25, 59, .2),
                   18px 18px 36px -4px rgba(13, 18, 44, .25);
  --sh-btn:        0 4px 4px rgba(0, 0, 0, .25);
  --sh-inset:      inset 18px 18px 36px -4px rgba(34, 49, 120, .2);

  /* gradient panel (Figma "Gradient Style", stacked top → bottom) */
  --panel-gradient:
      linear-gradient(180deg, rgba(0, 0, 0, .07) 0%, rgba(255, 255, 255, .035) 55%, rgba(0, 0, 0, .02) 100%),
      linear-gradient(90deg, #1b6ec6 0%, #1c7be4 55%, #1b81fc 100%);
}

/* ---------- Theme acts ----------
   cosmoslac.com switches the whole page between a dark and a light "act" as
   markers pass the middle of the screen. Here the dark act is the brand navy:
   the tokens below are re-pointed and everything that uses them follows. The
   stage (script.js) toggles html.theme-dark; the transitions make it a fade. */
html.theme-dark {
  --bg:      #061350;
  --black:   #f4f4f6;
  --grey:    #b7bdd6;
  --faded:   rgba(244, 244, 246, .62);
  --ink-90:  rgba(244, 244, 246, .9);
  --legal:   rgba(244, 244, 246, .7);
}
html.scroll-stage body,
html.scroll-stage main > section,
html.scroll-stage .site-footer,
html.scroll-stage main :is(h1, h2, h3, h4, p, li, a:not(.btn):not(.header-cta), span, label, .eyebrow) {
  transition: background-color .6s ease, color .6s ease, border-color .6s ease;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--black);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  /* clip, not hidden: hidden would make <body> a scroll container and break
     the position:sticky slide deck; clip only cuts the overflow. */
  overflow-x: hidden;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
button, input, textarea { font: inherit; color: inherit; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--blue); color: #fff; padding: 10px 18px;
}
.skip-link:focus { left: 12px; top: 12px; }

:where(a, button, input, textarea):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.container       { width: min(100% - (var(--gutter) * 2), var(--container));      margin-inline: auto; }
.container--wide { width: min(100% - (var(--gutter) * 2), var(--container-wide)); }
.container--hero { width: min(100% - (var(--gutter) * 2), var(--container-hero)); }

.icon { width: 1em; height: 1em; fill: currentColor; flex: none; }
.icon--12 { font-size: 12px; }
.icon--14 { font-size: 14px; }
.icon--21 { font-size: 21px; }
.icon--22 { font-size: 22px; }
.icon--44 { font-size: 43.58px; }
.icon--nav { width: 38px; height: 42px; font-size: 0; }
.icon--search { width: 27px; height: 23px; font-size: 0; }
.icon--user   { width: 30px; height: 30px; font-size: 0; }

/* ---------- Shared type helpers ---------- */
.eyebrow {
  font-size: var(--fs-btn);
  font-weight: 500;
  letter-spacing: .05em;
  color: var(--black);
}
.eyebrow--blue { color: var(--blue); }
.eyebrow--lg   { font-size: var(--fs-h4); letter-spacing: 0; }

.lead {
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--black);
  max-width: 600px;
}

.muted { color: var(--faded); font-size: var(--fs-btn); font-weight: 500; letter-spacing: .05em; }
.t-blue { color: var(--blue); }
.t-oblique { font-style: italic; letter-spacing: .05em; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 17px;          /* Figma: 4px outer + 10px inner = 47px tall */
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--black);
  font-size: var(--fs-btn);
  font-weight: 500;
  letter-spacing: .05em;
  line-height: var(--lh-btn);
  cursor: pointer;
  box-shadow: var(--sh-btn);
  backdrop-filter: blur(6px);          /* Figma effect: GLASS over a ~0-opacity fill */
  transition: background-color .25s, color .25s, box-shadow .25s, transform .25s;
}
.btn__icon { display: inline-flex; transition: transform .25s; }
.btn:hover  { background: var(--blue); color: #fff; box-shadow: var(--sh-card-strong); }
.btn:hover .btn__icon { transform: translateX(4px); }

.btn--ghost-light { color: var(--light-90); }
.btn--ghost-light:hover { background: var(--light-90); color: var(--navy); }

.btn--ghost { box-shadow: var(--sh-btn); }
.btn--muted { opacity: .29; box-shadow: var(--sh-card-strong); }
.btn--muted:hover { opacity: 1; }

.btn--dark {
  background: var(--black);
  color: var(--bg);
  box-shadow: var(--sh-btn);
}
.btn--dark:hover { background: var(--navy); color: #fff; }

/* ---------- White card (Figma "box styles") ---------- */
.card {
  background: var(--white);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 100;
  padding-block: 28px;         /* the client wants the bar high up (Figma MENU had 64): 28 + 45 + 28 = 101 */
  transition: background-color .3s, padding .3s, box-shadow .3s, transform .35s;
}
/* Figma component "MENU-Hide while scrolling" (51:125): the bar slips away
   while the visitor scrolls down and returns the moment they scroll up. */
.site-header.is-hidden { transform: translateY(-120%); }
/* Scrolled state = Figma component "MENU-2" (189:689): no coloured bar at all.
   The logo turns dark, the nav turns #1C1C1C, and the links + icons sit in a
   white 1251×62 capsule, radius 50, shadow 0 4px 4px rgba(0,0,0,.25). The
   earlier navy bar was invented — every MENU component in the file has no fill. */
/* Scrolled state — the anemihotel.gr treatment: the bar itself frosts (blur
   20px over a 60% page-field tint), the text turns dark and the bar goes
   compact, like cosmoslac.com's sticky header. The Figma capsule is retired. */
.site-header.is-stuck {
  position: fixed;
  padding-block: 14px;
  background: rgba(244, 244, 246, .6);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
html.theme-dark .site-header.is-stuck { background: rgba(6, 19, 80, .6); }
html.theme-dark .site-header.is-stuck .nav__link,
html.theme-dark .site-header.is-stuck .nav__pill,
html.theme-dark .site-header.is-stuck .site-header__tools { color: var(--light-90); }
html.theme-dark .site-header.is-stuck .nav__pill { border-color: var(--white); }
html.theme-dark .site-header.is-stuck .site-header__logo-light { opacity: 1; }
html.theme-dark .site-header.is-stuck .site-header__logo-dark  { opacity: 0; }
html.theme-dark .site-header.is-stuck .header-cta { background: var(--white); color: var(--navy); }
.site-header.mega-open,
.site-header.drop-open {
  background: rgba(244, 244, 246, .6);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.site-header.is-stuck .nav__link,
.site-header.is-stuck .nav__pill,
.site-header.is-stuck .site-header__tools { color: var(--black); }
.site-header.is-stuck .nav__pill { border-color: var(--black); box-shadow: none; }
.site-header.is-stuck .nav__pill:hover { background: var(--black); color: var(--white); }
.site-header.is-stuck .site-header__logo-light { opacity: 0; }
.site-header.is-stuck .site-header__logo-dark  { opacity: 1; }

/* Light-page variant. Inner pages (e.g. the service frame 659:4383) put the
   same MENU instance on the #F4F4F6 field instead of over a dark hero, so it
   renders dark from the top — and with no capsule, which only appears once the
   header actually sticks. Verified against Figma's own render of 659:4383. */
.site-header--onlight .nav__link,
.site-header--onlight .nav__pill,
.site-header--onlight .site-header__tools { color: var(--black); }
.site-header--onlight .nav__pill { border-color: var(--black); box-shadow: none; }
.site-header--onlight .nav__pill:hover { background: var(--black); color: var(--white); }
.site-header--onlight .site-header__logo-light { opacity: 0; }
.site-header--onlight .site-header__logo-dark  { opacity: 1; }

/* MENU-2 proper (189:689) also shows the white capsule from the top, rather
   than fading it in on scroll — that is the portfolio inner page's header.
   Additive, so it composes with --onlight above. */
.site-header--capsule .site-header__bar::before { opacity: 1; }

.site-header__inner {
  display: grid;                       /* logo | menu centred on the page | tools */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  min-height: 45px;
}
.site-header__inner > .site-header__logo { grid-column: 1; justify-self: start; }
.site-header__inner .site-header__tools { grid-column: 3; justify-self: end; }
@media (min-width: 861px) {
  /* static, not relative: the services panel inside it must span the header */
  .site-header__inner .nav { grid-column: 2; justify-self: center; position: static; }
}
/* pages that still use the Figma capsule keep the flex row it wraps */
.site-header--capsule .site-header__inner { display: flex; justify-content: space-between; }
.site-header--capsule .site-header__bar { display: flex; }
.site-header__logo { position: relative; z-index: 2; display: inline-block; }
.site-header__logo img { width: 176px; }
/* both logos stacked; the state classes crossfade them instead of swapping */
.site-header__logo-light { display: block; transition: opacity .35s ease; }
.site-header__logo-dark  { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; }

/* nav + tools travel together so the scrolled capsule can wrap exactly them.
   The capsule is a pseudo-element, not padding: padding would re-flow the nav
   the moment the menu opened, sliding every link out from under the pointer. */
.site-header__bar {
  position: relative;
  display: contents;                   /* its two children sit in the grid above */
  align-items: center;
  gap: clamp(20px, 4.4vw, 84px);
}
.site-header__bar > * { position: relative; z-index: 1; }
.site-header__bar::before {
  content: "";
  position: absolute;
  /* The frame extends the capsule 62px past the nav, but below ~1740px there is
     not that much margin left — cap it at whatever the gutter actually allows
     so it never runs off the viewport. */
  inset: -11px calc(-1 * min(clamp(20px, 3.2vw, 62px), max(var(--gutter), (100vw - var(--container-wide)) / 2)));
  z-index: 0;
  border-radius: 50px;
  background: var(--white);
  box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
  opacity: 0;
  transition: opacity .3s;
}
/* the capsule only remains for pages that ask for it explicitly (--capsule) */

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3.1vw, 56px);
}
.nav__link,
.nav__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--light-90);
  font-size: var(--fs-btn);
  font-weight: 500;
  letter-spacing: .05em;
  white-space: nowrap;
  transition: color .25s, background-color .25s;
}
.nav__link { padding-block: 4px; border-bottom: 1px solid transparent; }

/* on load the items rise in one after the other (hbbody.com) */
@keyframes nav-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.js .nav__list > li { animation: nav-in .7s cubic-bezier(.16,.84,.28,1) both; }
.js .nav__list > li:nth-child(1) { animation-delay: .15s; }
.js .nav__list > li:nth-child(2) { animation-delay: .22s; }
.js .nav__list > li:nth-child(3) { animation-delay: .29s; }
.js .nav__list > li:nth-child(4) { animation-delay: .36s; }
.js .nav__list > li:nth-child(5) { animation-delay: .43s; }
.js .nav__list > li:nth-child(6) { animation-delay: .50s; }
.js .site-header__tools > * { animation: nav-in .7s cubic-bezier(.16,.84,.28,1) both .55s; }
@media (prefers-reduced-motion: reduce) {
  .js .nav__list > li, .js .site-header__tools > * { animation: none; }
}
.nav__link:hover { border-bottom-color: currentColor; }

.nav__pill {
  min-width: 160px;
  height: 40px;
  justify-content: center;
  border: 1px solid var(--white);
  border-radius: var(--r-pill);
  box-shadow: 0 8px 16px rgba(34, 49, 120, .25);
}
.nav__pill:hover { background: var(--white); color: var(--navy); }

.site-header__tools { position: relative; z-index: 2; display: flex; align-items: center; gap: clamp(18px, 1.8vw, 32px); color: var(--light-90); }
.icon-btn { display: grid; place-items: center; transition: opacity .25s; }
.icon-btn:hover { opacity: .7; }
/* the primary call to action — anemihotel.gr's solid "Book online" */
.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 4px 14px 4px 22px;
  border-radius: var(--r-pill);
  background: var(--black);
  color: var(--bg);
  font-size: var(--fs-btn);
  font-weight: 500;
  letter-spacing: .05em;
  white-space: nowrap;
  box-shadow: var(--sh-btn);
  transition: background-color .25s, color .25s, transform .25s;
}
.header-cta__icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--blue); color: #fff; transition: transform .25s; }
.header-cta:hover { background: var(--navy); }
.header-cta:hover .header-cta__icon { transform: translateX(3px); }
.site-header.is-stuck .header-cta,
.site-header--onlight .header-cta,
.site-header.mega-open .header-cta,
.site-header.drop-open .header-cta { background: var(--black); color: var(--bg); }

/* ---------- Services mega menu ----------
   Desktop: hbbody.com's category pane — a frosted panel under the bar that
   opens with a clip-path from the top, four columns with a small mark, the
   title in 26px with the count of services, the links rising in one after
   the other. Same glass as the scrolled bar. */
.mega {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  padding: 40px 0 48px;
  background: rgba(244, 244, 246, .92);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: 0 24px 48px rgba(6, 19, 80, .12);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .5s cubic-bezier(.16,.84,.28,1), visibility .5s;
}
.mega[hidden] { display: block; }        /* [hidden] is the no-JS state, not a paint switch */
.site-header.mega-open .mega { clip-path: inset(0); visibility: visible; }

.mega__grid {
  width: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
}
.mega-card {
  display: block;
  padding-left: 32px;
  border-left: 1px solid rgba(28, 28, 28, .12);
  color: var(--black);
}
.mega-card:first-child { padding-left: 0; border-left: 0; }
.mega-card__icon  { width: 56px; height: 56px; margin-bottom: 22px; border-radius: 50%; }
.mega-card__title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 18px;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: .01em;
}
.mega-card__count { font-size: 13px; font-weight: 500; letter-spacing: .08em; color: var(--grey); }
.mega-card__links { display: flex; flex-direction: column; gap: 12px; }
.mega-card__links li { opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s cubic-bezier(.16,.84,.28,1); }
.site-header.mega-open .mega-card__links li { opacity: 1; transform: none; transition-delay: calc(120ms + var(--i, 1) * 45ms); }
.mega-card__links a {
  display: inline-block;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
  transition: color .2s, transform .2s;
}
.mega-card__links a:hover,
.mega-card__links a:focus-visible { color: var(--blue); transform: translateX(4px); }
/* the open panel reads as part of the bar: dark text, dark logo */
.site-header.mega-open .nav__link,
.site-header.mega-open .nav__pill,
.site-header.mega-open .site-header__tools { color: var(--black); }
.site-header.mega-open .nav__pill { border-color: var(--black); box-shadow: none; }
.site-header.mega-open .site-header__logo-light { opacity: 0; }
.site-header.mega-open .site-header__logo-dark  { opacity: 1; }

/* the contact line of the full-screen menu (small screens only) */
.nav__foot { display: none; }

/* ---------- Πρόσθετα dropdown (hbbody.com's category pane, digiqal.gr's items) ---------- */
.nav__item--drop { position: relative; }
.drop {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  min-width: 268px;
  padding: 14px 0;
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 24px 48px rgba(6, 19, 80, .18);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -8px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.drop[hidden] { display: block; }
.site-header.drop-open .drop { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.drop::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }   /* hover bridge */
.drop__link {
  display: block;
  padding: 11px 28px;
  color: var(--black);
  font-size: var(--fs-btn);
  font-weight: 500;
  letter-spacing: .05em;
  white-space: nowrap;
  transition: background-color .2s, color .2s;
}
.drop__link:hover, .drop__link:focus-visible { background: var(--bg); color: var(--blue); }
.site-header.drop-open .nav__link,
.site-header.drop-open .nav__pill,
.site-header.drop-open .site-header__tools { color: var(--black); }
.site-header.drop-open .nav__pill { border-color: var(--black); box-shadow: none; }
.site-header.drop-open .site-header__logo-light { opacity: 0; }
.site-header.drop-open .site-header__logo-dark  { opacity: 1; }
@media (max-width: 860px) {
  .drop { display: none; }
  .header-cta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mega, .mega-card__links li { transition: none; }
}

.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 34px;
  padding: 6px 3px;
  background: none;
  border: 0;
  cursor: pointer;
}
.burger span { height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s, opacity .3s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: clamp(90px, 32.8vh, 354px);
  background: var(--navy) url("images/hero-bg.jpg") center / cover no-repeat;
  overflow: hidden;
}

/* Background video — poster is the Figma hero export, so the frame never renders empty */
.hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  pointer-events: none;
}

/* Scrim: the clip swings between ~54 and ~191 luminance, so the white hero copy
   needs a fixed floor of contrast. Navy-tinted to keep the brand cast. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,  rgba(6, 19, 80, .74) 0%, rgba(6, 19, 80, .46) 60%, rgba(6, 19, 80, .38) 100%),
    linear-gradient(180deg, rgba(6, 19, 80, .55) 0%, rgba(6, 19, 80, .18) 38%, rgba(4, 12, 54, .62) 100%);
}

/* Pause control — a 13s looping autoplay background needs a stop (WCAG 2.2.2).
   Revealed by script.js only when the video is actually running. */
.video-toggle {
  position: absolute;
  right: clamp(12px, 2vw, 24px);
  bottom: clamp(12px, 2vw, 24px);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(244, 244, 246, .5);
  border-radius: 50%;
  background: rgba(6, 19, 80, .35);
  color: var(--light-90);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: background-color .25s, border-color .25s, opacity .25s;
}
.video-toggle:hover { background: rgba(6, 19, 80, .7); border-color: var(--light-90); }
.video-toggle[hidden] { display: none; }
.video-toggle__icon,
.hero__toggle-icon { width: 14px; height: 14px; fill: currentColor; }
.video-toggle__icon--play,
.hero__toggle-icon--play { display: none; }
.video-toggle.is-paused .video-toggle__icon--pause,
.video-toggle.is-paused .hero__toggle-icon--pause { display: none; }
.video-toggle.is-paused .video-toggle__icon--play,
.video-toggle.is-paused .hero__toggle-icon--play  { display: block; }

/* The hero control sits further in from the edge than the framed one */
.hero__toggle { right: clamp(16px, 3vw, 48px); bottom: clamp(16px, 3vw, 40px); }
.phones__toggle { bottom: 0; }

.hero__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; max-width: var(--container-hero); }

/* Figma frame "Home Page-Desktop" 624:9228 — the kicker is the small H4 line,
   the headline under it is the big H1, with "πιο έξυπνα" in Bold Oblique. */
.hero__kicker {
  font-size: var(--fs-h4);
  font-weight: 500;
  line-height: var(--lh-h4);
  color: var(--bg);
  margin-bottom: 19px;
}

.hero__title {
  max-width: 591px;
  margin-bottom: 23px;
  color: var(--light-90);
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: var(--lh-h1);
}

.hero__cta { align-self: flex-start; margin-left: -8px; }

/* =========================================================
   INTRO / QUOTE   — Figma frame "Quote" 359:2420, a full 1920×1080 screen
   Measured off that frame (positions relative to its 1080px height):
     marks   y 89  · 200px/700 blue      title  y 275 · 70px/700, 836px wide
     eyebrow y 234 · 22px/500 blue       lead   y 809 · 22px/500 #9f9f9f, 514px
   ========================================================= */
.quote {
  display: flex;
  align-items: center;
  /* 624:9289 in the assembled frame: 200 above the copy, 100 below — the
     block is 651px tall there, not a full screen */
  padding-block: clamp(120px, 10.4vw, 200px) clamp(64px, 5.2vw, 100px);
}
.quote__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* The 200px glyphs carry ~40px of leading each side; line-height .62 trims the
   box to the ink so the gap below is the measured one, not font metrics. */
.quote__mark {
  font-family: var(--font-display);
  font-size: clamp(96px, 16.67vw, 200px);
  font-weight: 700;
  line-height: .62;
  letter-spacing: -.04em;
  color: var(--blue);
  margin-bottom: clamp(20px, 2.4vw, 46px);
  user-select: none;
}

.quote__eyebrow {
  font-size: var(--fs-btn);
  font-weight: 500;
  letter-spacing: .05em;
  line-height: var(--lh-btn);
  color: var(--blue);
  margin-bottom: clamp(12px, 1.25vw, 24px);
}

/* Figma 624:9282 — Desktop/Headings 2: 30/500, +.05em, centered. */
.quote__title {
  max-width: 836px;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: .05em;
  line-height: var(--lh-h2);
  color: var(--black);
  text-wrap: balance;
}

/* Without JS (or with reduced motion) the two phrases simply stack. */
.quote__phrase { display: block; }

/* Typewriter: both phrases sit invisibly in the same grid cell so the block
   keeps the height of the taller one; the live layer types on top of them. */
#quote-typer.is-typing {
  display: grid;
  justify-items: center;
}
#quote-typer.is-typing .quote__phrase {
  grid-area: 1 / 1;
  opacity: 0;
}
.quote__typer-live {
  grid-area: 1 / 1;
  text-wrap: wrap; /* balance would reflow the lines on every keystroke */
}
.quote__caret {
  display: inline-block;
  width: 0.06em;
  height: 0.9em;
  margin-left: 0.08em;
  vertical-align: -0.08em;
  background: var(--blue);
  animation: dq-caret 1s steps(1) infinite;
}
@keyframes dq-caret { 50% { opacity: 0; } }

.quote__lead {
  max-width: 600px;
  margin-top: clamp(48px, 4.84vw, 93px);   /* frame 359:2420: 93px under the heading */
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--black);                      /* Main Body 2, #1C1C1C in the section frame */
}

/* =========================================================
   LATEST WORK
   ========================================================= */
.work { padding-block: var(--section-y); }
.work__inner { display: flex; flex-direction: column; align-items: center; gap: clamp(48px, 5vw, 97px); }
/* the head is the Porto Palace case intro (same lockup as portfolio-porto-palace.html) */
.work__head  { display: flex; flex-direction: column; align-items: center; gap: clamp(40px, 4.6vw, 66px); text-align: center; }
.work__brand { display: flex; flex-direction: column; align-items: center; gap: clamp(24px, 2.8vw, 40px); width: 239px; max-width: 100%; }
.work__mark     { width: clamp(84px, 7.8vw, 112px); height: auto; }
.work__wordmark { width: 100%; height: auto; }
.work__title { margin-top: -10px; max-width: 612px; font-size: var(--fs-h2); font-weight: 500; letter-spacing: .05em; line-height: var(--lh-h2); color: var(--black); }
.work__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px clamp(12px, 1.4vw, 20px);
  font-size: var(--fs-btn);
  font-weight: 500;
  letter-spacing: .05em;
  line-height: var(--lh-btn);
  color: var(--blue);
}
.work__tags li { display: flex; align-items: center; gap: clamp(12px, 1.4vw, 20px); }
.work__tags li:not(:last-child)::after { content: "|"; color: currentColor; }
.work__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: -10px; }
.work__desc { max-width: 820px; font-size: var(--fs-body); font-weight: 300; line-height: var(--lh-body); color: var(--black); }
@media (max-width: 860px) {
  .work__tags { gap: 6px 18px; }
  .work__tags li:not(:last-child)::after { content: "·"; }
}
/* Figma 359:2738 "Desktop-comp 3": the comp's still, with the frame's double shadow.
   The shadow lives on the frame so the shot can be re-sized by the stage engine
   (it lays the shot out at fullscreen size and scales it down into the frame). */
.work__frame {
  position: relative;
  width: min(100%, 1354px);
  box-shadow: 18px 18px 36px -4px rgba(12, 18, 44, .2), 20px 20px 60px -10px rgba(11, 17, 41, .25);
}
.work__shot { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 20px; background: var(--navy); }   /* height:auto beats the height attribute so the ratio wins */   /* 624:9296: radius 20; the clip is 16:9 */

/* --------- Video crop box ---------
   Figma stores each of these fills with a cropTransform — the node shows only a
   window onto a larger 1920×1080 clip. --cw/--ch are that window's size and
   --cx/--cy its offset, both as fractions of the source, copied verbatim from
   the file. The box's aspect-ratio equals the window's, so nothing distorts. */
.vcrop { position: relative; overflow: hidden; }
.vcrop > video {
  position: absolute;
  width:  calc(100% / var(--cw));
  height: calc(100% / var(--ch));
  left:   calc(-100% * var(--cx) / var(--cw));
  top:    calc(-100% * var(--cy) / var(--ch));
  object-fit: fill;
  background: var(--white);
}

/* node 624:9292 "Desktop-comp 2" */
.vcrop--work { --cw: .78944; --ch: .72084; --cx: .10421; --cy: .10134; aspect-ratio: 1354 / 696; }

/* nodes 624:9297 / 9299 / 9298 — same clip, one phone each.
   The still this replaced had an alpha channel, so the page showed through the
   handset's rounded corners; video has no alpha, so the clip's dark backdrop
   would show there instead. Clipping the box to the handset's own radius fixes
   it. Measured off the source: 30px on a 440px-wide crop = 6.82% of the width,
   expressed as an explicit h/v pair so the corner stays circular, not oval. */
.vcrop--phone   { --cw: .23125; --ch: .82593; --cy: .08704; aspect-ratio: 356 / 714;
                  border-radius: 6.82% / 3.4%; }
.vcrop--phone-1 { --cx: .10357; }
.vcrop--phone-2 { --cx: .38394; }
.vcrop--phone-3 { --cx: .66585; }

/* =========================================================
   PHONE SHOWCASE
   ========================================================= */
.phones { padding-block: var(--section-y); }
.phones__row {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(24px, 5.94vw, 114px);   /* 624:9571: 114 / 113 between the handsets */
  padding-bottom: 100px;             /* room for the lowest handset's offset */
}
/* Figma "Mob-comp 4 / 5 / 6": 392×712 stills, radius 30, the post shadow.
   The stagger is a position, not a transform, so a reveal can animate them. */
.phones__item {
  position: relative;
  width: min(26.5%, 392px);
  border-radius: 30px;
  background: var(--bg);
  box-shadow: var(--sh-post);
}
img.phones__item { aspect-ratio: 392 / 712; object-fit: cover; }   /* the case-study page keeps its .vcrop clips */
.phones__item--a { top: 50px; }
.phones__item--b { top: 100px; }
.phones__item--c { top: 0; }
/* design order left → centre → right = a(50) c(0) b(100) */
.phones__item--b { order: 3; }
.phones__item--c { order: 2; }

/* =========================================================
   SERVICES
   ========================================================= */
.services { padding-block: var(--section-y); }
.services__inner {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(28px, 2.6vw, 50px);
}
.services__aside {
  flex: 0 0 282px;
  display: flex;
  flex-direction: column;
  gap: clamp(60px, 7.8vw, 150px);
  padding-block: 50px;
}
.services__aside-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 29px; max-width: 214px; }
.services__aside-foot .muted { line-height: var(--lh-btn); }

.services__grid { display: flex; gap: 22px; }

.service-card {
  flex: 1 1 380px;
  max-width: 380px;
  min-height: 643px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(48px, 8.2vw, 158px);
  padding: 50px 20px;
  background: var(--white);
  box-shadow: var(--sh-card);
  transition: transform .3s, box-shadow .3s;
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--sh-card-strong); }
.service-card__title {
  max-width: 296px;
  padding-inline: 10px;
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: .05em;
  line-height: var(--lh-h3);
}
.service-card__body  { display: flex; flex-direction: column; gap: 41px; padding-inline: 10px; }
.service-card__block { display: flex; flex-direction: column; gap: 16px; }
.service-card__icon  { color: var(--black); }
.service-card__name  { font-size: var(--fs-h4); font-weight: 500; }
.service-card__text  { font-size: var(--fs-body-lg); font-weight: 300; line-height: var(--lh-body); }
.service-card__tags  { font-size: var(--fs-xs); font-weight: 300; text-align: center; }

/* Services as cosmoslac's sticky media + content (desktop stage only): the
   left column stays put with a live 01/03 counter while the three services
   scroll by as text blocks. */
.services__count { display: none; }
.service-card__num { display: none; }
@media (min-width: 1101px) {
  /* full container width: the aside takes the left third, the services the rest,
     the hairlines running to the container's right edge */
  html.scroll-stage .services__inner { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(0, 2fr); justify-content: stretch; align-items: start; gap: clamp(60px, 6vw, 120px); }
  html.scroll-stage .services__aside { position: relative; flex: none; padding-block: 0; gap: 40px; }   /* pinned by script.js, not sticky */
  html.scroll-stage .services__count { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-display); font-size: 72px; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--black); }
  html.scroll-stage .services__count-sep { font-size: 28px; font-weight: 300; color: var(--faded); }
  html.scroll-stage .services__count + .services__aside-foot { margin-top: 0; }
  html.scroll-stage .services__grid { flex-direction: column; gap: 0; }
  html.scroll-stage .service-card {
    position: relative;
    flex: none;
    max-width: none;
    min-height: 0;
    justify-content: flex-start;
    gap: 28px;
    padding: 56px 0 56px 88px;
    background: none;
    box-shadow: none;
    border-top: 1px solid rgba(28, 28, 28, .14);
  }
  html.scroll-stage .service-card:last-child { border-bottom: 1px solid rgba(28, 28, 28, .14); }
  html.scroll-stage .service-card:hover { transform: none; box-shadow: none; }
  html.scroll-stage .service-card__num { display: block; position: absolute; left: 0; top: 60px; font-size: var(--fs-btn); font-weight: 500; letter-spacing: .1em; color: var(--blue); }
  html.scroll-stage .service-card__title { max-width: 680px; padding-inline: 0; font-size: var(--fs-h2); }
  html.scroll-stage .service-card__body { max-width: 680px; padding-inline: 0; gap: 24px; }
  html.scroll-stage .service-card__tags { text-align: left; color: var(--faded); }
}

/* =========================================================
   PORTFOLIO
   ========================================================= */
.portfolio { padding-block: var(--section-y); }
.portfolio__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(40px, 14.5vw, 280px);
}
.portfolio__aside { flex: 0 0 507px; display: flex; flex-direction: column; align-items: flex-start; gap: 35px; }
.portfolio__title {
  max-width: 481px;
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: .05em;
  line-height: var(--lh-h2);
}
.portfolio__brand { color: var(--blue); font-size: var(--fs-btn); font-weight: 500; }
.portfolio__desc  { max-width: 481px; line-height: var(--lh-btn); }

.portfolio__stack {
  flex: 0 1 732px;
  height: 894px;
  display: flex;
  flex-direction: column;
  gap: 19px;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}
.portfolio__stack::-webkit-scrollbar { display: none; }
.portfolio__stack img { width: 100%; scroll-snap-align: start; flex: none; }

/* =========================================================
   PLUGINS
   ========================================================= */
.plugins { padding-block: var(--section-y); background: #ededf0; }   /* frame 359:1595: its own, slightly darker field */
.plugins__inner { display: flex; flex-direction: column; align-items: center; gap: 54px; }
.plugins__head  { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.plugins__head .lead { text-align: center; }

/* The rail: every product, one tile up and the next one down, rotating steadily like the client marquee. The track holds two
   identical sets and slides by exactly one of them, so the loop is seamless;
   hovering pauses it so a tile can be clicked. */
.plugins__rail {
  width: 100%;
  overflow: hidden;
  padding-block: 10px 150px;           /* room for the lowest tiles + shadows */
}
.plugins__track {
  display: flex;
  width: max-content;
  animation: plugins-rotate 95s linear infinite;
}
.plugins__rail:hover .plugins__track,
.plugins__rail:focus-within .plugins__track { animation-play-state: paused; }
.plugins__set {
  display: flex;
  align-items: flex-start;
  gap: clamp(10px, 1.5vw, 29px);
  padding-right: clamp(10px, 1.5vw, 29px);   /* the gap between the two sets = the tile gap */
}
@keyframes plugins-rotate { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .plugins__track { animation: none; }
  .plugins__rail { overflow-x: auto; }
}
.plugin-tile {
  position: relative;               /* the arc offsets are positions, so a reveal owns the transform */
  flex: 0 0 295px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding-bottom: 22px;
  background: var(--white);
  color: var(--black);
  box-shadow: 12px 12px 32px -8px rgba(34, 49, 120, .14);   /* lighter than the card recipe: the rail is dense */
  transition: transform .3s, box-shadow .3s;
}
.plugin-tile:hover { transform: translateY(-8px); box-shadow: 12px 12px 32px -8px rgba(34, 49, 120, .22); }
/* every box art in the same square, whatever its file's ratio; the shop's
   mockups carry their own white square and a baked shadow, so the white is
   multiplied away — no second card showing through */
.plugin-tile img { width: 94%; aspect-ratio: 1; object-fit: contain; margin-inline: auto; mix-blend-mode: multiply; }
.plugin-tile--up   { top: 0; }      /* one up, one down, all along the rail */
.plugin-tile--down { top: 110px; }



.plugin-tile__name {
  padding: 24px 26px 0;
  font-family: var(--font-display);
  font-size: 17px;
  display: -webkit-box;               /* exactly two lines, every tile the same height */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: calc(24px + 2 * 1.2em);
  font-weight: 400;          /* Figma: TT Norms Pro Regular 22 */
  line-height: var(--lh-h4);
}
.plugin-tile__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 26px 0;
}
.plugin-tile__price { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 500; }

.plugins__foot { display: flex; flex-direction: column; align-items: center; gap: 7px; max-width: 405px; text-align: center; }

/* =========================================================
   CLIENTS + NEWSLETTER
   ========================================================= */
.clients { padding-block: var(--section-y); }
.clients__inner { display: flex; flex-direction: column; align-items: center; gap: clamp(64px, 11.1vw, 213px); }   /* 742:1309: 213 / 213 */

/* the logo rail (742:1314): 220px cells 21px apart, marks 75 tall, the fourth
   322×121; drawn as in the frame — no grayscale, no edge fade. Marquee motion
   is the one liberty. */
.marquee { width: 100%; overflow: hidden; }
.marquee__track { display: flex; align-items: center; gap: 21px; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { flex: none; width: 220px; padding: 10px; display: grid; place-items: center; }
.marquee__item img { height: 75px; width: auto; object-fit: contain; }   /* fixed 75 as in the frame: no shift while a lazy mark loads */
.marquee__item--wide { width: auto; }
.marquee__item--wide img { max-height: 121px; width: 322px; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee { overflow-x: auto; }
}

/* the newsletter panel (624:9916): copy left, pill form right, on the gradient */
.newsletter {
  width: min(100%, var(--container-wide));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(32px, 4vw, 80px);
  padding: 30px 60px;
  background: var(--panel-gradient);
  box-shadow: var(--sh-card);
  color: var(--bg);
}
.newsletter__copy    { display: flex; flex-direction: column; max-width: 505px; }
.newsletter__kicker  { font-size: var(--fs-btn); font-weight: 500; letter-spacing: .05em; }
.newsletter__title   { font-size: var(--fs-h1); font-weight: 700; line-height: var(--lh-h1); margin-block: 2px 4px; }
.newsletter__sub     { max-width: 419px; font-size: var(--fs-h4); font-weight: 500; }

.newsletter__form {
  flex: 0 1 500px;
  display: flex;
  align-items: center;
  gap: clamp(20px, 10vw, 204px);
  padding: 4px 5px 4px 17px;
  background: var(--white);
  border-radius: var(--r-pill);
  box-shadow: inset 0 4px 4px rgba(0, 0, 0, .25);
}
.newsletter__input {
  flex: 1 1 auto;
  min-width: 0;
  padding-block: 10px;
  border: 0;
  background: none;
  color: var(--black);
  font-size: var(--fs-btn);
  font-weight: 500;
  letter-spacing: .05em;
}
.newsletter__input::placeholder { color: var(--black); opacity: 1; }
.newsletter__input:focus { outline: none; }
.newsletter__form:focus-within { outline: 2px solid var(--white); outline-offset: 2px; }

/* =========================================================
   QODE MAG
   ========================================================= */
.mag { padding-block: var(--section-y); display: flex; flex-direction: column; gap: clamp(80px, 10.4vw, 200px); }   /* 624:9914: 200 to the newsletter panel */
.mag__inner { display: flex; justify-content: center; align-items: flex-end; gap: clamp(40px, 16.5vw, 317px); }
.mag__aside { flex: 0 0 252px; display: flex; flex-direction: column; gap: clamp(70px, 12.6vw, 241px); padding-block: 100px; }
.mag__aside-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 19px; max-width: 231px; }

.mag__rail {
  flex: 0 1 944px;
  display: flex;
  gap: 10px;
  padding: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.mag__rail::-webkit-scrollbar { display: none; }

/* Card (742:1104): 553×769, NO fill — just the box shadow on the page field —
   image 521² at the top, the copy column (476 wide) pinned to the bottom */
.post {
  flex: none;
  width: 553px;
  max-width: 88vw;
  min-height: 769px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 6px 16px 10px;
  background: transparent;
  box-shadow: var(--sh-card);
  overflow: hidden;                 /* the image's parallax drift stays inside the card */
  scroll-snap-align: start;
  transition: transform .3s;
}
.post:hover { transform: translateY(-6px); }
.post__img  { width: 100%; aspect-ratio: 1; object-fit: cover; }
.post__body { width: min(100%, 476px); display: flex; flex-direction: column; gap: 20px; }   /* each text sits in a 10px box: 20 between */
.post__cat  { color: var(--blue); font-size: var(--fs-btn); font-weight: 500; letter-spacing: .05em; }
.post__title{ font-size: var(--fs-h2); font-weight: 500; letter-spacing: .05em; line-height: var(--lh-h2); max-width: 468px; }
.post__more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-h4);
  font-weight: 500;
}
.post__more .icon { transition: transform .25s; }
.post__more:hover .icon { transform: translate(3px, -3px); }

/* =========================================================
   FAQ
   ========================================================= */
.faq { padding-block: var(--section-y); }
.faq__inner { display: flex; justify-content: center; align-items: flex-end; gap: clamp(32px, 4vw, 77px); }
.faq__aside { flex: 0 0 234px; display: flex; flex-direction: column; gap: clamp(70px, 10.5vw, 201px); padding-block: 100px; }
.faq__aside-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 19px; max-width: 211px; }
.faq__aside-foot .muted { color: var(--grey); }   /* 742:1153: #9F9F9F, not the faded tint */

.faq__grid {
  flex: 0 1 1187px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 337px));
  gap: 27px;
  justify-content: center;
  align-items: start;                  /* an open card grows alone, not its whole row */
}
.faq-card {
  position: relative;
  min-height: 200px;
  display: block;
  padding: 43px 41px 41px;
  background: rgba(255, 255, 255, .46);   /* 414:3199: the file's "white" fill is 46% white on the field */
  box-shadow: var(--sh-card);
  transition: transform .3s, box-shadow .3s;
}
.faq-card:hover { transform: translateY(-6px); box-shadow: var(--sh-card-strong); }
/* the question is a button filling the card's 255×116 content box; the icon
   keeps its Figma spot (Union at 266.5/140.5 in the 337×200 card) */
.faq-card__q {
  position: relative;
  display: block;
  width: 100%;
  min-height: 116px;
  padding: 0 40px 0 0;
  background: none;
  border: 0;
  text-align: left;
  font: inherit;
  font-size: var(--fs-h4);
  font-weight: 500;
  line-height: var(--lh-h4);
  color: inherit;
  cursor: pointer;
}
.faq-card__q:focus-visible { outline: 2px solid var(--blue); outline-offset: 6px; }
.faq-card__icon { position: absolute; right: 8px; bottom: -3px; color: var(--black); transition: transform .3s; }
.faq-card:hover .faq-card__icon { transform: translate(3px, -3px); }
.faq-card.is-open .faq-card__icon,
.faq-card.is-open:hover .faq-card__icon { transform: rotate(90deg); }
/* the answer folds open under the question (0fr -> 1fr); without JS it is simply shown */
.faq-card__a { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .45s cubic-bezier(.16,.84,.28,1); }
.js .faq-card__a { grid-template-rows: 0fr; }
.js .faq-card.is-open .faq-card__a { grid-template-rows: 1fr; }
.faq-card__a > p { overflow: hidden; min-height: 0; padding-top: 0; font-size: var(--fs-body); font-weight: 300; line-height: var(--lh-body); color: var(--grey); transition: padding-top .45s cubic-bezier(.16,.84,.28,1); }
.faq-card.is-open .faq-card__a > p,
html:not(.js) .faq-card__a > p { padding-top: 22px; }

/* =========================================================
   STATEMENT — one big line before the closing act
   ========================================================= */
.statement { padding-block: clamp(96px, 12vw, 220px) clamp(40px, 4vw, 64px); }   /* the quiz follows closely */
.statement__inner { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.statement__title { max-width: 14ch; font-family: var(--font-display); font-size: clamp(40px, 5.2vw, 84px); font-weight: 700; line-height: 1.02; letter-spacing: -.01em; text-wrap: balance; }
.statement__sub { max-width: 520px; font-size: var(--fs-h4); font-weight: 500; color: var(--faded); }

/* =========================================================
   START A PROJECT (quiz)
   ========================================================= */
.quiz { padding-block: 0 var(--section-y); }   /* the statement's bottom padding is the gap */
.quiz__inner { display: flex; flex-direction: column; align-items: center; gap: 60px; }

.quiz__form { width: min(100%, 1408px); display: flex; flex-direction: column; gap: 23px; }
.quiz__step {
  text-align: right;
  color: var(--faded);
  font-size: var(--fs-h1);
  font-weight: 700;
}

.quiz__board {
  display: grid;
  grid-template-columns: minmax(0, 502px) minmax(0, 429px) minmax(0, 429px);
  gap: 26px 24px;
}
.quiz__panel {
  position: relative;
  grid-row: span 3;
  min-height: 502px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(64px, 13.9vw, 200px) 77px 85px;
  background: var(--white);
  box-shadow: var(--sh-card);
  overflow: hidden;
}
.quiz__panel-num {
  position: absolute;
  top: 15%;
  left: 58.7%;
  font-family: var(--font-display);
  font-size: clamp(220px, 21.8vw, 350px);
  font-weight: 700;
  line-height: 1;
  color: var(--wash);
  pointer-events: none;
  user-select: none;
}
.quiz__panel-title { position: relative; max-width: 338px; font-size: var(--fs-h1); font-weight: 700; line-height: var(--lh-h1); color: var(--ink-90); }
.quiz__panel-sub   { position: relative; max-width: 318px; margin-top: 10px; font-size: var(--fs-btn); font-weight: 500; letter-spacing: .05em; color: var(--grey); }

.quiz__options { display: contents; }

.opt {
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 40px 56px;
  background: var(--white);
  box-shadow: var(--sh-card);
  cursor: pointer;
  transition: transform .3s, box-shadow .3s;
}
.opt:hover { transform: translateY(-4px); box-shadow: var(--sh-card-strong); }
.opt__label { font-size: var(--fs-h4); font-weight: 500; line-height: var(--lh-h4); text-align: center; }
.opt input  { position: absolute; opacity: 0; pointer-events: none; }
.opt__dot {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .46);
  box-shadow: var(--sh-inset);
}
.opt__dot::after {
  content: "";
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--blue);
  transform: scale(0);
  transition: transform .2s;
}
.opt input:checked + .opt__dot::after { transform: scale(1); }
.opt input:focus-visible + .opt__dot { outline: 2px solid var(--blue); outline-offset: 3px; }

.quiz__send { align-self: flex-end; }

.quiz__nav { display: flex; justify-content: center; gap: 20px; padding-top: 53px; }
.quiz__arrow {
  padding: 10px;
  background: none;
  border: 0;
  color: var(--faded);
  cursor: pointer;
  transition: color .25s, transform .25s;
}
.quiz__arrow:hover { color: var(--black); transform: translateX(4px); }
.quiz__arrow--prev:hover { transform: translateX(-4px); }

/* =========================================================
   CONTACT
   ========================================================= */
.contact { padding-block: var(--section-y) 0; }
.contact__inner { display: flex; flex-direction: column; align-items: center; gap: clamp(64px, 7.1vw, 137px); }
.contact__head  { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.contact__head .lead { text-align: center; }

/* Scattered collage — proportional to the 1132 × 447 Figma group */
.contact__board {
  position: relative;
  width: min(100%, 1132px);
  aspect-ratio: 1132 / 447;
}
.cbox {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  background: var(--white);
  box-shadow: var(--sh-card);
  cursor: text;
  transition: transform .3s, box-shadow .3s;
}
.cbox:hover, .cbox:focus-within { transform: translateY(-5px); box-shadow: var(--sh-card-strong); }
.cbox__label { font-size: var(--fs-btn); font-weight: 500; letter-spacing: .05em; }
.cbox__input {
  width: 100%;
  padding: 4px 0;
  border: 0;
  border-bottom: 1px solid rgba(28, 28, 28, .15);
  background: none;
  font-size: var(--fs-body);
}
.cbox__input:focus { outline: none; border-bottom-color: var(--blue); }
.cbox__input--area { resize: none; }

.cbox--email,
.cbox--name,
.cbox--phone   { width: 21.3%; aspect-ratio: 1; padding: clamp(18px, 3.5vw, 50px); }
.cbox--message { width: 33%;   aspect-ratio: 1; padding: clamp(20px, 4.1vw, 59px) clamp(18px, 3.6vw, 51px); }

.cbox--email   { left: 0;     top: 30.9%; }
.cbox--name    { left: 23.2%; top: 1.3%;  }
.cbox--phone   { left: 41%;   top: 43.2%; }
.cbox--message { left: 66.9%; top: 0;     }

.contact__send { position: absolute; right: 0; bottom: -10%; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  padding-block: clamp(72px, 10vw, 112px) 29px;
  /* always the light field: the quiz's dark act cannot end before the page does
     (its bottom never reaches mid-screen), so the footer paints its own tokens */
  --bg:     #f4f4f6;
  --black:  #1c1c1c;
  --grey:   #9f9f9f;
  --faded:  rgba(159, 159, 159, .9);
  --ink-90: rgba(28, 28, 28, .9);
  --legal:  rgba(34, 49, 120, .7);
  background: var(--bg);
  color: var(--black);
}
.site-footer__inner { display: flex; flex-direction: column; align-items: center; gap: 18px; }

.footer-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 39px;
  padding: 49px 80px 34px 77px;
  background: var(--panel-gradient);
  box-shadow: var(--sh-card);
  color: var(--bg);
}
.footer-panel__top { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.footer-panel__logo { width: 176px; }
.footer-panel__claim { font-size: var(--fs-h1); font-weight: 700; text-align: right; }

.footer-panel__bottom { display: flex; align-items: center; justify-content: space-between; gap: clamp(32px, 9.9vw, 190px); }
.footer-info { flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between; gap: clamp(24px, 4vw, 185px); font-size: var(--fs-h4); font-weight: 500; line-height: var(--lh-h4); }
.footer-info li { text-wrap: balance; }
.footer-info a:hover { text-decoration: underline; }
.footer-social { display: flex; align-items: center; gap: 37px; }
.footer-social img { width: 109px; max-width: none; margin: -32px; transition: transform .25s; }
.footer-social a:hover img { transform: translateY(-3px); }

.footer-bottom {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 40px;
  padding-top: 8px;
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 30px; }
.footer-credit { color: var(--legal); font-size: var(--fs-btn); font-weight: 500; letter-spacing: .05em; }
.footer-legal a { color: var(--legal); font-size: var(--fs-body); font-weight: 300; transition: color .25s; }
.footer-legal a:hover { color: var(--blue); }

/* =========================================================
   REVEAL (progressive enhancement)
   ========================================================= */
.js .reveal { opacity: 0; translate: 0 24px; transition: opacity .7s ease, translate .7s ease; }
.js .reveal.is-in { opacity: 1; translate: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; translate: none; transition: none; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* --- ≤1400px : rails and side layouts tighten --- */
@media (max-width: 1400px) {
  .portfolio__stack { height: 700px; }
  .mag__rail  { flex-basis: auto; width: 100%; }
  .faq__grid  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .quiz__board { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); }
  .quiz__panel { padding: 48px 44px 56px; }
  .opt { padding: 32px 34px; }
}

/* --- ≤1100px : multi-column → stacked / 2-col --- */
@media (max-width: 1100px) {
  :root { --gutter: 20px; }

  .services__inner,
  .portfolio__inner,
  .mag__inner,
  .faq__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 48px;
  }
  .services__aside,
  .mag__aside,
  .faq__aside { flex: none; padding-block: 0; gap: 24px; }
  .services__aside,
  .mag__aside,
  .faq__aside { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .services__aside-foot,
  .mag__aside-foot,
  .faq__aside-foot { flex-direction: row; align-items: center; gap: 20px; max-width: none; }

  .services__grid { flex-wrap: wrap; justify-content: center; }
  .service-card { flex: 1 1 320px; min-height: 0; gap: 40px; }

  .portfolio__aside { flex: none; }
  .portfolio__stack { flex: none; height: auto; overflow: visible; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

  .plugins__rail { padding-bottom: 40px; }
  .plugin-tile { flex-basis: 240px; }
  .plugin-tile--down { top: 0; }

  .newsletter { flex-direction: column; align-items: stretch; padding: 32px 32px; }
  .newsletter__form { gap: 16px; }

  .mag__rail { padding-inline: 0; }

  .faq__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .quiz__board { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
  .quiz__panel { grid-column: 1 / -1; grid-row: auto; min-height: 0; padding: 40px 36px 48px; }
  .quiz__panel-num { font-size: 220px; top: 0; right: -20px; }
  .quiz__nav { padding-inline: 0; }

  .footer-panel { padding: 40px 32px 28px; }
  .footer-panel__bottom { flex-direction: column; align-items: flex-start; gap: 28px; }
  .footer-info { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* --- ≤860px : mobile nav --- */
@media (max-width: 860px) {
  .site-header { padding-block: 20px; }
  .burger { display: flex; }
  .site-header__tools { gap: 18px; }

  /* cosmoslac.com's full-screen menu: the navy field, the main items in big
     capitals rising one after the other, the services with their categories
     underneath, a contact line at the bottom */
  .nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 36px;
    padding: 110px 28px 32px;
    overflow: auto;
    background: var(--navy);
    color: var(--light-90);
    visibility: hidden;
    opacity: 0;
    transition: opacity .35s ease, visibility .35s;
  }
  .nav.is-open { opacity: 1; visibility: visible; }
  .nav.is-open ~ .site-header__tools { color: var(--light-90); }
  .site-header__bar { gap: 0; }
  .site-header__bar::before { display: none; }
  .js .nav__list > li { animation: none; opacity: 0; transform: translateY(24px); transition: opacity .5s ease, transform .5s cubic-bezier(.16,.84,.28,1); }
  .nav.is-open .nav__list > li { opacity: 1; transform: none; }
  .nav.is-open .nav__list > li:nth-child(1) { transition-delay: .10s; }
  .nav.is-open .nav__list > li:nth-child(2) { transition-delay: .16s; }
  .nav.is-open .nav__list > li:nth-child(3) { transition-delay: .22s; }
  .nav.is-open .nav__list > li:nth-child(4) { transition-delay: .28s; }
  .nav.is-open .nav__list > li:nth-child(5) { transition-delay: .34s; }
  .nav.is-open .nav__list > li:nth-child(6) { transition-delay: .40s; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 4px; }
  .nav__link { display: flex; padding-block: 10px; font-size: 28px; font-weight: 500; letter-spacing: .04em; border-bottom: 0; }
  .nav__link:hover { border-bottom: 0; color: #fff; }
  .nav__item--drop .nav__pill { margin-top: 6px; }
  /* the services panel becomes a plain block of the menu */
  .nav .mega {
    position: static;
    padding: 8px 0 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    clip-path: none;
    visibility: visible;
    opacity: 1;
    transition: none;
  }
  .nav .mega__grid { width: 100%; grid-template-columns: 1fr; gap: 28px; }
  .nav .mega-card { padding-left: 0; border-left: 0; color: var(--light-90); }
  .nav .mega-card__icon { display: none; }
  .nav .mega-card__title { font-size: 20px; margin-bottom: 12px; }
  .nav .mega-card__count { color: rgba(244, 244, 246, .5); }
  .nav .mega-card__links li { opacity: 1; transform: none; }
  .nav .mega-card__links a { font-size: 16px; color: rgba(244, 244, 246, .82); }
  .nav .mega-card__links a:hover { color: #fff; }
  .nav__foot { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: auto; padding-top: 24px; border-top: 1px solid rgba(244, 244, 246, .18); font-size: 14px; letter-spacing: .05em; color: rgba(244, 244, 246, .7); }
  .nav__pill { margin-top: 12px; width: 100%; }

  .hero { padding-bottom: clamp(72px, 20vh, 200px); }

  .phones__row { flex-wrap: wrap; gap: 20px; padding-bottom: 0; }
  .phones__item { width: min(45%, 240px); top: 0 !important; }
  .phones__item--b, .phones__item--c { order: 0; }

  .services__aside,
  .mag__aside,
  .faq__aside { flex-direction: column; align-items: flex-start; }
  .services__aside-foot,
  .mag__aside-foot,
  .faq__aside-foot { flex-direction: column; align-items: flex-start; }

  .contact__board { aspect-ratio: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .cbox { position: static; aspect-ratio: 1; padding: 18px !important; width: auto !important; }
  .cbox--message { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
  .contact__send { position: static; grid-column: 1 / -1; justify-self: end; }

  .footer-panel__top { flex-direction: column; align-items: flex-start; gap: 20px; }
  .footer-panel__claim { text-align: left; }
}

/* --- ≤620px : single column --- */
@media (max-width: 620px) {
  :root { --gutter: 16px; --section-y: 56px; }

  .hero__title { font-size: 28px; }

  .service-card { max-width: none; padding: 36px 20px; }
  .services__grid { gap: 16px; }

  .portfolio__stack { grid-template-columns: 1fr; }

  .plugin-tile { flex-basis: 200px; }

  .newsletter__form { flex-direction: column; align-items: stretch; padding: 12px; border-radius: 20px; }
  .newsletter__input { text-align: center; }
  .newsletter__form .btn { justify-content: center; }

  .post { width: 88vw; }
  .post__body { padding-inline: 18px; }

  .faq__grid { grid-template-columns: 1fr; }
  .faq-card { padding: 28px 24px 52px; }

  .quiz__board { grid-template-columns: 1fr; }
  .quiz__panel { padding: 32px 24px 36px; }
  .quiz__panel-num { font-size: 180px; }
  .opt { min-height: 0; padding: 24px 22px; }
  .opt__dot { width: 38px; height: 38px; }
  .opt__dot::after { width: 20px; height: 20px; }

  .contact__board { grid-template-columns: 1fr; }
  .cbox--message { aspect-ratio: 3 / 2; }

  .footer-panel { padding: 28px 20px 24px; }
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; }
  .footer-legal { justify-content: center; gap: 14px 20px; }
}

/* =====================================================
   SCROLL STAGE — the home page as one smooth scrolling page
   (Figma frames 359:809 … 359:1771). script.js drives the
   choreography with GSAP ScrollTrigger, the way the
   portopalace.gr theme does: pinned hero + pinned zoom
   scrubbed by the scroll, everything else revealed once as
   it enters. This block only supplies the static scaffolding.
   Desktop only, JS only, reduced-motion excluded.
   ===================================================== */

/* Quote typewriter (stage variant) — the title is split into word/char spans
   so each character can fade in sequentially. Words stay inline-block so the
   line breaks fall between words, never mid-word. */
.q-word { display: inline-block; }

/* Portfolio project stepping — the changing part of the headline animates
   independently of the fixed brand line above it. */
.portfolio__title-text { display: inline-block; }

/* ---------- cosmoslac.com's reveal language (values copied from its theme) ----------
   script.js gives each section .anim-elem and its parts one of these classes;
   an IntersectionObserver adds .in-view 150px before the section's bottom
   edge reaches the viewport and removes it again when the section drops
   below, so the reveal replays on the way back. Nothing runs before
   body.done (fonts + images settled). Only under the scroll stage. */
@media (min-width: 1101px) {
  html.scroll-stage .anim--from-bottom { opacity: 0; transform: translateY(150px); transition: opacity 900ms ease, transform 900ms ease; transition-delay: calc(var(--i, 0) * 80ms); }
  html.scroll-stage .anim--to-top      { opacity: 0; transform: translateY(50px);  transition: opacity 1200ms ease, transform 1200ms ease; transition-delay: calc(400ms + var(--i, 0) * 80ms); }
  html.scroll-stage .anim-reveal-elem  { transform: scale(1.3); clip-path: inset(0 0 100% 0); transform-origin: center; transition: transform 1500ms ease, clip-path 1500ms ease; transition-delay: calc(var(--i, 0) * 80ms); }
  html.scroll-stage .reveal-scale      { transform: scale(2); clip-path: inset(100%); transition: transform 1200ms ease, clip-path 1200ms ease; transition-delay: calc(var(--i, 0) * 80ms); }
  html.scroll-stage .split .word       { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 .02em; margin: 0 -.02em; }
  html.scroll-stage .split .whitespace { display: inline-block; white-space: pre; }
  html.scroll-stage .split .char       { display: inline-block; transform: translateY(105%); transition: transform 900ms ease, opacity 900ms ease; transition-delay: calc(60ms * (var(--word-index, 0) + 1) + var(--i, 0) * 80ms); }
  html.scroll-stage .t-oblique .char   { font-style: italic; }

  /* until the page is done the parked states apply instantly — no fade-out at load */
  html.scroll-stage body:not(.done) .anim--from-bottom,
  html.scroll-stage body:not(.done) .anim--to-top,
  html.scroll-stage body:not(.done) .anim-reveal-elem,
  html.scroll-stage body:not(.done) .reveal-scale,
  html.scroll-stage body:not(.done) .split .char { transition: none; }

  html.scroll-stage body.done .in-view .anim--from-bottom,
  html.scroll-stage body.done .in-view .anim--to-top      { opacity: 1; transform: none; }
  html.scroll-stage body.done .in-view .anim-reveal-elem  { transform: none; clip-path: inset(0); }
  html.scroll-stage body.done .in-view .reveal-scale      { transform: scale(1.01); clip-path: inset(0); }
  /* revealed cards keep their hover lift */
  html.scroll-stage body.done .in-view .service-card.anim--from-bottom:hover,
  html.scroll-stage body.done .in-view .faq-card.anim--from-bottom:hover,
  html.scroll-stage body.done .in-view .post.anim--from-bottom:hover        { transform: translateY(-6px); }
  html.scroll-stage body.done .in-view .plugin-tile.anim--from-bottom:hover { transform: translateY(-8px); }
  html.scroll-stage body.done .in-view .cbox.anim--from-bottom:hover,
  html.scroll-stage body.done .in-view .cbox.anim--from-bottom:focus-within { transform: translateY(-5px); }
  html.scroll-stage body.done .in-view .opt.anim--from-bottom:hover         { transform: translateY(-4px); }
  html.scroll-stage body.done .in-view .split .char,
  html.scroll-stage body.done .hero .split .char          { transform: none; }   /* the hero plays on load */

  /* the portfolio row slides sideways under a pin (cosmoslac featured-horizontal) */
  html.scroll-stage .portfolio__stack { flex-direction: row; height: auto; overflow: hidden; gap: 19px; }
  html.scroll-stage .portfolio__stack img { width: 100%; flex: none; }
}

@media (min-width: 1101px) {
  /* the hero stays pinned (no spacer) while the quote scrolls up over it */
  html.scroll-stage main > .hero { z-index: 0; }
  html.scroll-stage main > .quote,
  html.scroll-stage main > .work { position: relative; z-index: 1; background: var(--bg); }   /* together taller than a screen: the pinned hero never shows past the quote */

  /* the phones follow once the zoomed desktop has fully scrolled away */
  html.scroll-stage main > .phones { position: relative; z-index: 5; }
  /* the mockup starts well inside the screen so the zoom has somewhere to go
     (at the Figma 1354px it was already ~85% of a 1600px viewport and the
     scrubbed zoom read as stuck); it ends fullscreen, then stays zoomed */
  html.scroll-stage .work__frame { overflow: visible; width: min(100%, 62vw); }

  /* one screen per project: the engine drives the stack, not native scroll */
  html.scroll-stage .portfolio { min-height: 100vh; display: flex; align-items: center; }
  html.scroll-stage .portfolio__stack { overflow: hidden; scroll-snap-type: none; }

  /* the GSAP reveals replace the one-shot reveal — they must not fight */
  html.js.scroll-stage .reveal { opacity: 1; translate: none; transition: none; }

  /* glass blur re-renders on every frame an element moves; on the flat page
     field it is invisible anyway */
  html.scroll-stage .btn,
  html.scroll-stage .video-toggle { backdrop-filter: none; }
}