/* ==========================================================================
   BILUX TECH — design system
   Tokens · base · layout · components · sections · pages
   ========================================================================== */

/* ---------- Fonts (self-hosted, latin subset, variable) ---------- */
@font-face{
  font-family: "Space Grotesk";
  src: url("../assets/fonts/space-grotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face{
  font-family: "Manrope";
  src: url("../assets/fonts/manrope.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root{
  /* colour */
  --c-dark: #101114;
  --c-dark-2: #1A1B20;
  --c-light: #F5F5F2;
  --c-white: #FFFFFF;
  --c-ink: #17181B;
  --c-ink-soft: #55575E;        /* secondary text on light  (7.0:1) */
  --c-paper: #F7F7F5;
  --c-paper-soft: #A3A6AE;      /* secondary text on dark   (7.9:1) */
  --c-accent: #315CFF;
  --c-accent-deep: #2246D6;
  --c-line-light: #DCDCD6;
  --c-line-dark: #2A2C33;
  --c-error: #B3261E;
  --c-success: #1B7A47;

  /* type */
  --f-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-text: "Manrope", "Helvetica Neue", Arial, sans-serif;

  --fs-hero: clamp(3rem, 0.9rem + 9.4vw, 11rem);
  --fs-h1: clamp(2.6rem, 1rem + 6.2vw, 7.25rem);
  --fs-h2: clamp(2.1rem, 1.1rem + 3.9vw, 4.75rem);
  --fs-h3: clamp(1.45rem, 1.05rem + 1.5vw, 2.4rem);
  --fs-h4: clamp(1.15rem, 1rem + .45vw, 1.4rem);
  --fs-lead: clamp(1.125rem, 1rem + .55vw, 1.45rem);
  --fs-body: 1.0625rem;
  --fs-small: .9375rem;

  /* space & layout */
  --edge: clamp(20px, 5vw, 72px);
  --max: 1520px;
  --gap: clamp(16px, 2vw, 32px);
  --section: clamp(88px, 12vw, 200px);
  --header-h: 72px;

  /* motion */
  --ease: cubic-bezier(.2,.7,.1,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
}

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body{
  margin: 0;
  background: var(--c-light);
  color: var(--c-ink);
  font-family: var(--f-text);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{ margin: 0; padding: 0; }
ul,ol{ list-style: none; }
img,svg,canvas{ display: block; max-width: 100%; }
img{ height: auto; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input,select,textarea{ font: inherit; color: inherit; }

h1,h2,h3,h4{
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
p{ text-wrap: pretty; }
::selection{ background: var(--c-accent); color: var(--c-white); }

:focus-visible{ outline: 2px solid var(--c-accent); outline-offset: 3px; }
.on-dark :focus-visible{ outline-color: var(--c-paper); }

.skip-link{
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--c-accent); color: var(--c-white);
  padding: 12px 18px; font-weight: 600;
}
.skip-link:focus{ left: 16px; top: 16px; }

.visually-hidden{
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Layout ---------- */
.wrap{ width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--edge); }
.grid{ display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gap); }

.section{ padding-block: var(--section); }
.on-dark{ background: var(--c-dark); color: var(--c-paper); }
.on-white{ background: var(--c-white); }
.on-accent{ background: var(--c-accent); color: var(--c-white); }

.muted{ color: var(--c-ink-soft); }
.on-dark .muted{ color: var(--c-paper-soft); }

.lead{ font-size: var(--fs-lead); line-height: 1.45; max-width: 38ch; }
.prose p + p{ margin-top: 1.1em; }
.prose{ max-width: 62ch; }

.h2{ font-size: var(--fs-h2); }
.h3{ font-size: var(--fs-h3); }

/* ---------- Buttons & links ---------- */
.btn{
  --btn-bg: var(--c-accent); --btn-fg: var(--c-white);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 52px; padding: 0 26px;
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--f-display); font-weight: 600; font-size: 1rem; letter-spacing: -0.01em;
  border-radius: 999px; overflow: hidden; isolation: isolate;
  transition: color .35s var(--ease);
}
.btn::before{
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--btn-hover, var(--c-dark));
  transform: translateY(101%); transition: transform .45s var(--ease);
  border-radius: inherit;
}
.btn:hover::before{ transform: translateY(0); }
.btn:active{ transform: scale(.98); }
.btn--ghost{ --btn-bg: transparent; --btn-fg: currentColor; box-shadow: inset 0 0 0 1.5px currentColor; --btn-hover: var(--c-paper); }
.btn--ghost:hover{ color: var(--c-dark); }
.on-light .btn--ghost, .btn--ghost.is-light{ --btn-hover: var(--c-ink); }
.on-light .btn--ghost:hover, .btn--ghost.is-light:hover{ color: var(--c-paper); }
.btn--dark{ --btn-bg: var(--c-dark); --btn-fg: var(--c-white); --btn-hover: var(--c-white); }
.btn--dark:hover{ color: var(--c-dark); }
.btn--white{ --btn-bg: var(--c-white); --btn-fg: var(--c-ink); --btn-hover: var(--c-dark); }
.btn--white:hover{ color: var(--c-white); }
.btn--small{ min-height: 44px; padding: 0 20px; font-size: .9375rem; }

.text-link{
  display: inline-flex; align-items: center; gap: .45em;
  font-family: var(--f-display); font-weight: 600;
  background: linear-gradient(currentColor,currentColor) 0 100% / 100% 1.5px no-repeat;
  padding-bottom: 3px; transition: background-size .4s var(--ease);
}
.text-link:hover{ background-size: 0% 1.5px; background-position: 100% 100%; }
.icon-ext{ width: .8em; height: .8em; flex: none; }

/* ---------- Brand mark ---------- */
.brand{ display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-display); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.03em; min-height: 44px; }
.brand-mark{ width: 26px; height: 26px; flex: none; }
.brand-mark .l1{ fill: var(--c-accent); }
.brand-mark .l2{ fill: currentColor; }
.brand span{ font-weight: 400; }

/* ---------- Header ---------- */
.site-header{
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  color: var(--c-paper);
  transition: background-color .35s var(--ease), transform .45s var(--ease), border-color .35s;
  border-bottom: 1px solid transparent;
}
.site-header.is-solid{ background: var(--c-dark); border-bottom-color: var(--c-line-dark); }
.site-header.is-hidden{ transform: translateY(-100%); }
.header-inner{ height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.main-nav ul{ display: flex; gap: clamp(18px, 2.4vw, 40px); }
.main-nav a{
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--f-display); font-weight: 500; font-size: .98rem;
}
.main-nav a::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease);
}
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after{ transform: scaleX(1); transform-origin: left; }
.header-cta{ display: inline-flex; }

.menu-toggle{
  display: none; width: 48px; height: 48px; margin-right: -12px;
  align-items: center; justify-content: center; position: relative; z-index: 120;
}
.menu-toggle span{ position: absolute; width: 24px; height: 2px; background: currentColor; transition: transform .45s var(--ease), opacity .2s; }
.menu-toggle span:first-child{ transform: translateY(-4px); }
.menu-toggle span:last-child{ transform: translateY(4px); }
.menu-open .menu-toggle span:first-child{ transform: rotate(45deg); }
.menu-open .menu-toggle span:last-child{ transform: rotate(-45deg); }

.mobile-menu{
  position: fixed; inset: 0; z-index: 110;
  background: var(--c-dark); color: var(--c-paper);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--header-h) + 32px) var(--edge) 32px;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .6s var(--ease-in-out), visibility 0s linear .6s;
}
.menu-open .mobile-menu{ clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .6s var(--ease-in-out), visibility 0s; }
.mobile-menu ul{ display: grid; gap: 4px; }
.mobile-menu li{ overflow: hidden; }
.mobile-menu a.m-link{
  display: block; padding-block: 6px;
  font-family: var(--f-display); font-weight: 600; font-size: clamp(2.4rem, 11vw, 4rem); letter-spacing: -0.04em; line-height: 1.05;
  transform: translateY(105%); transition: transform .6s var(--ease);
}
.menu-open .mobile-menu a.m-link{ transform: none; }
.menu-open .mobile-menu li:nth-child(2) a{ transition-delay: .05s; }
.menu-open .mobile-menu li:nth-child(3) a{ transition-delay: .1s; }
.menu-open .mobile-menu li:nth-child(4) a{ transition-delay: .15s; }
.menu-open .mobile-menu li:nth-child(5) a{ transition-delay: .2s; }
.mobile-menu a[aria-current="page"]{ color: var(--c-accent); }
.mobile-menu-foot{ display: grid; gap: 8px; color: var(--c-paper-soft); font-size: var(--fs-small); }
.mobile-menu-foot a{ color: var(--c-paper); font-weight: 600; }
.menu-open{ overflow: hidden; }

@media (max-width: 900px){
  .main-nav, .header-cta{ display: none; }
  .menu-toggle{ display: inline-flex; }
}

/* ---------- Light field (hero canvas) ---------- */
.lightfield{ position: absolute; inset: 0; width: 100%; height: 100%; }
.lightfield-wrap{ position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.lightfield-wrap::after{
  /* fade the field into the page so the type sits on calm ground */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, var(--c-dark) 4%, rgba(16,17,20,.55) 38%, rgba(16,17,20,0) 70%);
}

/* ---------- Hero (home) ---------- */
.hero{
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; align-items: flex-end;
  padding-top: calc(var(--header-h) + 48px); padding-bottom: clamp(40px, 6vw, 88px);
}
.hero-content{ position: relative; z-index: 1; width: 100%; }
.hero-place{ font-family: var(--f-display); font-weight: 500; color: var(--c-paper-soft); margin-bottom: clamp(20px, 3vw, 40px); display: flex; align-items: center; gap: 10px; }
.hero-place::before{ content: ""; width: 8px; height: 8px; background: var(--c-accent); }
.hero-title{
  font-size: var(--fs-hero); font-weight: 600; letter-spacing: -0.055em; line-height: .9;
  margin-left: -0.05em;
}
.hero-title .line{ display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hero-title .line > span{ display: inline-block; }
.hero-bottom{ margin-top: clamp(32px, 5vw, 72px); row-gap: 28px; align-items: end; }
.hero-lede{ grid-column: 1 / span 6; font-size: var(--fs-lead); line-height: 1.45; color: var(--c-paper); max-width: 40ch; }
.hero-actions{ grid-column: 8 / -1; display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
@media (max-width: 900px){
  .hero-lede, .hero-actions{ grid-column: 1 / -1; justify-content: flex-start; }
}

/* load sequence */
.js .hero-title .line > span{ transform: translateY(105%); }
.js .hero-place, .js .hero-lede, .js .hero-actions{ opacity: 0; transform: translateY(14px); }
.is-loaded .hero-title .line > span{ transform: none; transition: transform 1.1s var(--ease); }
.is-loaded .hero-title .line:nth-child(2) > span{ transition-delay: .09s; }
.is-loaded .hero-place, .is-loaded .hero-lede, .is-loaded .hero-actions{ opacity: 1; transform: none; transition: opacity .8s var(--ease) .45s, transform .8s var(--ease) .45s; }
.is-loaded .hero-actions{ transition-delay: .55s; }

/* ---------- Generic scroll reveal ---------- */
.js .reveal{ opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.is-in{ opacity: 1; transform: none; }
.js .reveal-media{ clip-path: inset(12% 0 0 0); transition: clip-path 1.2s var(--ease); }
.js .reveal-media img{ transform: scale(1.06); transition: transform 1.4s var(--ease); }
.js .reveal-media.is-in{ clip-path: inset(0 0 0 0); }
.js .reveal-media.is-in img{ transform: none; }

/* ---------- Section heads ---------- */
.section-head{ display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gap); row-gap: 24px; align-items: end; margin-bottom: clamp(48px, 7vw, 112px); }
.section-head h2{ grid-column: 1 / span 8; font-size: var(--fs-h2); }
.section-head p{ grid-column: 9 / -1; color: var(--c-ink-soft); max-width: 36ch; }
.on-dark .section-head p{ color: var(--c-paper-soft); }
@media (max-width: 900px){ .section-head h2, .section-head p{ grid-column: 1 / -1; } }

/* ---------- Manifesto ---------- */
.manifesto-title{ grid-column: 1 / span 9; font-size: var(--fs-h2); }
.manifesto-body{ grid-column: 7 / -1; margin-top: clamp(40px, 6vw, 96px); }
.manifesto-body .lead{ max-width: 34ch; color: var(--c-ink); margin-bottom: 1.2em; }
@media (max-width: 900px){ .manifesto-title, .manifesto-body{ grid-column: 1 / -1; } }

/* ---------- Service index (interactive rows) ---------- */
.service-index{ border-top: 1px solid var(--c-line-light); }
.service-row{ border-bottom: 1px solid var(--c-line-light); position: relative; }
.service-row a{
  position: relative; display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gap); row-gap: 12px;
  align-items: center; padding: clamp(28px, 3.6vw, 52px) 0; isolation: isolate;
  transition: color .45s var(--ease), padding .45s var(--ease);
}
.service-row a::before{
  content: ""; position: absolute; inset: 0 calc(var(--edge) * -1); z-index: -1;
  background: var(--c-dark); transform: scaleY(0); transform-origin: bottom;
  transition: transform .55s var(--ease);
}
.service-name{ grid-column: 1 / span 6; font-family: var(--f-display); font-weight: 600; font-size: var(--fs-h3); letter-spacing: -0.035em; line-height: 1.05; }
.service-desc{ grid-column: 7 / span 4; color: var(--c-ink-soft); transition: color .45s var(--ease); max-width: 38ch; }
.service-glyph{ grid-column: 11 / -1; justify-self: end; width: clamp(64px, 6vw, 92px); height: auto; }
.service-glyph rect{ fill: var(--c-line-light); transition: fill .35s var(--ease); }
.service-glyph rect.on{ fill: var(--c-ink); }
@media (hover: hover){
  .service-row a:hover{ color: var(--c-paper); }
  .service-row a:hover::before{ transform: scaleY(1); }
  .service-row a:hover .service-desc{ color: var(--c-paper-soft); }
  .service-row a:hover .service-glyph rect{ fill: var(--c-line-dark); }
  .service-row a:hover .service-glyph rect.on{ fill: var(--c-accent); }
}
.service-row a:focus-visible{ outline-offset: -2px; }
@media (max-width: 900px){
  .service-name{ grid-column: 1 / span 9; }
  .service-glyph{ grid-column: 10 / -1; grid-row: 1; }
  .service-desc{ grid-column: 1 / -1; }
}

/* ---------- Projects ---------- */
.projects-list{ display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gap); row-gap: clamp(72px, 10vw, 160px); }
.project{ grid-column: 1 / -1; }
.project--wide{ grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gap); row-gap: 28px; align-items: end; }
.project--wide .project-media{ grid-column: 1 / span 8; }
.project--wide .project-info{ grid-column: 9 / -1; }
.project--left{ grid-column: 1 / span 6; }
.project--right{ grid-column: 7 / -1; margin-top: clamp(0px, 14vw, 240px); }
.project--offset{ grid-column: 3 / span 8; }
@media (max-width: 900px){
  .project--wide .project-media, .project--wide .project-info, .project--left, .project--right, .project--offset{ grid-column: 1 / -1; margin-top: 0; }
}

.project-media{ position: relative; display: block; padding: 0 9% 9% 0; }
.project-frame{ position: relative; overflow: hidden; background: var(--c-dark-2); aspect-ratio: 16 / 10; }
.project-frame img{ width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 1.2s var(--ease); }
.project-phone{
  position: absolute; right: 0; bottom: 0; width: 26%;
  aspect-ratio: 390 / 800; overflow: hidden;
  border: 5px solid var(--c-dark-2); border-radius: 18px; background: var(--c-dark-2);
  transition: transform .8s var(--ease);
}
.on-light .project-phone{ border-color: var(--c-ink); }
.project-phone img{ width: 100%; height: 100%; object-fit: cover; object-position: top; }
@media (hover: hover){
  .project-media:hover .project-frame img{ transform: scale(1.035); }
  .project-media:hover .project-phone{ transform: translateY(-14px); }
}
.project-info{ padding-top: 24px; }
.project-info h3{ font-size: var(--fs-h3); }
.project-cat{ margin-top: 10px; color: var(--c-paper-soft); font-size: var(--fs-small); }
.on-light .project-cat{ color: var(--c-ink-soft); }
.project-desc{ margin-top: 16px; max-width: 44ch; }
.project-info .text-link{ margin-top: 20px; }
.projects-more{ margin-top: clamp(64px, 8vw, 120px); display: flex; justify-content: flex-start; }

/* ---------- Method ---------- */
.method{ position: relative; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--gap); padding-top: 40px; }
.method::before, .method::after{ content: ""; position: absolute; left: 0; top: 0; height: 2px; }
.method::before{ right: 0; background: var(--c-line-light); }
.method::after{ width: calc(var(--p, 0) * 100%); background: var(--c-accent); transition: width .2s linear; }
.on-dark .method::before{ background: var(--c-line-dark); }
.method-step{ position: relative; }
.method-step::before{
  content: ""; position: absolute; top: -45px; left: 0; width: 12px; height: 12px;
  background: var(--c-light); border: 2px solid var(--c-line-light); transition: background .4s, border-color .4s;
}
.on-dark .method-step::before{ background: var(--c-dark); border-color: var(--c-line-dark); }
.method-step.is-active::before{ background: var(--c-accent); border-color: var(--c-accent); }
.method-num{ font-family: var(--f-display); font-weight: 500; font-size: var(--fs-small); color: var(--c-accent); }
.method-step h3{ font-size: var(--fs-h3); margin-top: 14px; }
.method-step p{ margin-top: 16px; color: var(--c-ink-soft); max-width: 30ch; }
.on-dark .method-step p{ color: var(--c-paper-soft); }
@media (max-width: 900px){
  .method{ grid-template-columns: 1fr; padding-top: 0; padding-left: 36px; row-gap: 48px; }
  .method::before{ left: 5px; right: auto; width: 2px; top: 0; bottom: 0; height: auto; }
  .method::after{ left: 5px; width: 2px; height: calc(var(--p, 0) * 100%); transition: height .2s linear; }
  .method-step::before{ top: 4px; left: -36px; }
}

/* ---------- Why ---------- */
.why{ align-items: start; }
.why-head{ grid-column: 1 / span 5; position: sticky; top: calc(var(--header-h) + 40px); }
.why-head h2{ font-size: var(--fs-h2); }
.why-head p{ margin-top: 24px; color: var(--c-paper-soft); max-width: 34ch; }
.why-list{ grid-column: 7 / -1; border-top: 1px solid var(--c-line-dark); }
.why-item{ padding: clamp(24px, 3vw, 40px) 0; border-bottom: 1px solid var(--c-line-dark); display: grid; gap: 12px; }
.why-item h3{ font-size: var(--fs-h4); letter-spacing: -0.02em; line-height: 1.2; }
.why-item p{ color: var(--c-paper-soft); max-width: 50ch; }
@media (max-width: 900px){
  .why-head{ position: static; grid-column: 1 / -1; margin-bottom: 40px; }
  .why-list{ grid-column: 1 / -1; }
}

/* ---------- Contact ---------- */
.contact{ align-items: start; row-gap: 56px; }
.contact-intro{ grid-column: 1 / span 5; }
.contact-intro h2{ font-size: var(--fs-h2); }
.contact-intro .lead{ margin-top: 28px; }
.contact-direct{ margin-top: 40px; display: grid; gap: 6px; }
.contact-direct span{ opacity: .8; font-size: var(--fs-small); }
.contact-mail{ font-family: var(--f-display); font-weight: 600; font-size: clamp(1.3rem, 1rem + 1.2vw, 2rem); letter-spacing: -0.02em; word-break: break-word; width: fit-content; }
.contact-form-wrap{ grid-column: 7 / -1; }
@media (max-width: 900px){ .contact-intro, .contact-form-wrap{ grid-column: 1 / -1; } }

.form{ display: grid; gap: 22px; }
.form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 600px){ .form-row{ grid-template-columns: 1fr; } }
.field{ display: grid; gap: 8px; }
.field label, .field legend{ font-family: var(--f-display); font-weight: 500; font-size: var(--fs-small); }
.field .opt{ opacity: .75; font-weight: 400; }
.field input, .field select, .field textarea{
  width: 100%; min-height: 54px; padding: 14px 16px;
  background: var(--c-white); color: var(--c-ink);
  border: 1.5px solid transparent; border-radius: 4px;
  transition: border-color .2s, box-shadow .2s;
}
.field textarea{ min-height: 150px; resize: vertical; }
.field select{ appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2317181B' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline: none; border-color: var(--c-dark); box-shadow: 0 0 0 3px rgba(255,255,255,.55); }
.field[data-invalid] input, .field[data-invalid] textarea{ border-color: var(--c-error); }
.field-error{ font-size: .875rem; font-weight: 600; min-height: 0; color: var(--c-white); }
.field-error:empty{ display: none; }
.field-error::before{ content: "! "; }
.consent{ display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-small); line-height: 1.5; }
.consent input{ width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--c-dark); }
.form-foot{ display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.form-status{ font-weight: 600; }
.form-status[data-state="success"]{ padding: 14px 18px; background: var(--c-white); color: var(--c-success); border-radius: 4px; }
.form-status[data-state="error"]{ padding: 14px 18px; background: var(--c-white); color: var(--c-error); border-radius: 4px; }
.hp{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn[aria-busy="true"]{ opacity: .7; pointer-events: none; }

/* forms on light pages */
.on-light .field input, .on-light .field select, .on-light .field textarea{ border-color: var(--c-line-light); }
.on-light .field input:focus, .on-light .field select:focus, .on-light .field textarea:focus{ border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(49,92,255,.18); }
.on-light .field-error{ color: var(--c-error); }

/* ---------- Footer ---------- */
.site-footer{ background: var(--c-dark); color: var(--c-paper); padding-block: clamp(64px, 8vw, 120px) 32px; }
.footer-top{ row-gap: 48px; }
.footer-claim{ grid-column: 1 / span 6; font-family: var(--f-display); font-weight: 600; font-size: var(--fs-h3); letter-spacing: -0.035em; line-height: 1.05; max-width: 16ch; }
.footer-col{ grid-column: span 2; display: grid; align-content: start; gap: 4px; }
.footer-col h2{ font-family: var(--f-text); font-size: var(--fs-small); font-weight: 600; letter-spacing: 0; color: var(--c-paper-soft); margin-bottom: 10px; line-height: 1.4; }
.footer-col a{ display: inline-flex; min-height: 36px; align-items: center; width: fit-content; }
.footer-col a:hover{ color: var(--c-accent); }
.footer-col p{ color: var(--c-paper-soft); }
.footer-bottom{ margin-top: clamp(64px, 8vw, 120px); padding-top: 24px; border-top: 1px solid var(--c-line-dark); display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; color: var(--c-paper-soft); font-size: var(--fs-small); }
@media (max-width: 900px){
  .footer-claim{ grid-column: 1 / -1; }
  .footer-col{ grid-column: span 6; }
}
@media (max-width: 480px){ .footer-col{ grid-column: 1 / -1; } }

/* ---------- Inner page hero ---------- */
.page-hero{ position: relative; padding-top: calc(var(--header-h) + clamp(72px, 12vw, 180px)); padding-bottom: clamp(56px, 8vw, 120px); }
.page-hero .wrap{ position: relative; z-index: 1; }
.page-hero .lightfield-wrap::after{ background: linear-gradient(to right, var(--c-dark) 30%, rgba(16,17,20,.6) 65%, rgba(16,17,20,.2)); }
.breadcrumb ol{ display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--fs-small); color: var(--c-paper-soft); margin-bottom: clamp(28px, 4vw, 48px); }
.breadcrumb li + li::before{ content: "/"; margin-right: 8px; opacity: .6; }
.breadcrumb a:hover{ color: var(--c-paper); }
.page-hero h1{ font-size: var(--fs-h1); letter-spacing: -0.05em; line-height: .95; max-width: 14ch; }
.page-hero .lead{ margin-top: clamp(24px, 3vw, 40px); color: var(--c-paper); max-width: 44ch; }
.page-hero .hero-actions{ justify-content: flex-start; margin-top: 36px; }

/* ---------- Service page blocks ---------- */
.split{ row-gap: 32px; align-items: start; }
.split > h2{ grid-column: 1 / span 5; font-size: var(--fs-h2); }
.split > .prose{ grid-column: 7 / -1; font-size: var(--fs-lead); line-height: 1.5; }
@media (max-width: 900px){ .split > h2, .split > .prose{ grid-column: 1 / -1; } }

.benefits{ display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gap); row-gap: clamp(40px, 5vw, 72px); }
.benefit{ grid-column: span 6; padding-top: 24px; border-top: 2px solid var(--c-ink); max-width: 46ch; }
.benefit:nth-child(even){ margin-top: clamp(0px, 6vw, 96px); }
.benefit h3{ font-size: var(--fs-h4); letter-spacing: -0.02em; line-height: 1.2; }
.benefit p{ margin-top: 12px; color: var(--c-ink-soft); }
@media (max-width: 760px){ .benefit{ grid-column: 1 / -1; } .benefit:nth-child(even){ margin-top: 0; } }

.capabilities{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: var(--gap); border-top: 1px solid var(--c-line-dark); }
.capability{ display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--c-line-dark); }
.capability h3{ font-size: 1.125rem; letter-spacing: -0.015em; line-height: 1.3; }
.capability p{ color: var(--c-paper-soft); font-size: var(--fs-small); }
@media (max-width: 900px){ .capabilities{ grid-template-columns: 1fr; } }
@media (max-width: 480px){ .capability{ grid-template-columns: 1fr; gap: 6px; } }

.faq{ border-top: 1px solid var(--c-line-light); max-width: 980px; }
.faq details{ border-bottom: 1px solid var(--c-line-light); }
.faq summary{
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 26px 0; font-family: var(--f-display); font-weight: 600; font-size: var(--fs-h4); letter-spacing: -0.02em; line-height: 1.25;
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary .pm{ position: relative; width: 18px; height: 18px; flex: none; }
.faq summary .pm::before, .faq summary .pm::after{ content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: currentColor; transition: transform .35s var(--ease); }
.faq summary .pm::after{ transform: rotate(90deg); }
.faq details[open] summary .pm::after{ transform: rotate(0); }
.faq summary:hover{ color: var(--c-accent); }
.faq .faq-a{ padding: 0 0 28px; max-width: 64ch; color: var(--c-ink-soft); }

.cta-band{ padding-block: clamp(80px, 10vw, 160px); }
.cta-band .wrap{ display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gap); row-gap: 32px; align-items: end; }
.cta-band h2{ grid-column: 1 / span 8; font-size: var(--fs-h2); }
.cta-band .cta-actions{ grid-column: 9 / -1; display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
@media (max-width: 900px){ .cta-band h2, .cta-band .cta-actions{ grid-column: 1 / -1; justify-content: flex-start; } }

/* services overview */
.overview{ display: grid; gap: 0; border-top: 1px solid var(--c-line-light); }
.overview-item{ display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gap); row-gap: 20px; padding: clamp(40px, 5vw, 72px) 0; border-bottom: 1px solid var(--c-line-light); align-items: start; }
.overview-item h2{ grid-column: 1 / span 5; font-size: var(--fs-h3); }
.overview-item .ov-body{ grid-column: 7 / -1; display: grid; gap: 20px; }
.overview-item .ov-body p{ max-width: 52ch; }
.ov-tags{ display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--c-ink-soft); font-size: var(--fs-small); }
.ov-tags li::before{ content: ""; display: inline-block; width: 6px; height: 6px; background: var(--c-accent); margin-right: 8px; vertical-align: middle; }
@media (max-width: 900px){ .overview-item h2, .overview-item .ov-body{ grid-column: 1 / -1; } }

/* about */
.about-values{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--gap); }
.about-values > div{ border-top: 2px solid var(--c-ink); padding-top: 24px; }
.about-values h3{ font-size: var(--fs-h4); letter-spacing: -0.02em; line-height: 1.2; }
.about-values p{ margin-top: 12px; color: var(--c-ink-soft); }
@media (max-width: 900px){ .about-values{ grid-template-columns: 1fr; row-gap: 40px; } }

/* 404 */
.notfound{ min-height: 80svh; display: flex; align-items: center; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js .reveal, .js .hero-place, .js .hero-lede, .js .hero-actions{ opacity: 1; transform: none; }
  .js .hero-title .line > span{ transform: none; }
  .js .reveal-media{ clip-path: none; }
  .js .reveal-media img{ transform: none; }
}

/* checkbox must not inherit text-field sizing */
.field .consent input[type="checkbox"]{ width: 20px; height: 20px; min-height: 0; padding: 0; border: 0; flex: none; }
.field label.consent{ font-family: var(--f-text); font-weight: 500; }
@media (max-width: 760px){
  .hero .lightfield-wrap::after{ background: linear-gradient(to top, var(--c-dark) 30%, rgba(16,17,20,.7) 55%, rgba(16,17,20,.1) 85%); }
}
.menu-open .site-header{ z-index: 130; background: var(--c-dark); transform: none; }

/* ==========================================================================
   LABORATORIO DI LUCE
   La pagina è al buio; la luce (cursore o pilota automatico) rivela.
   Ogni servizio ha il proprio colore di luce (--beam).
   ========================================================================== */
:root{
  --beam-web: #315CFF;
  --beam-mkt: #9A7BFF;
  --beam-con: #3CCBF4;
  --beam-sw:  #F2C14E;
  --beam: var(--c-accent);
}

/* ---------- Stage: a dark room lit by a torch ---------- */
.stage{ position: relative; isolation: isolate; overflow: hidden; --x: 70%; --y: 40%; --r: 0px; }
.stage::before{
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(circle calc(var(--r) * .55) at var(--x) var(--y), rgba(247,247,245,.10), transparent 70%),
    radial-gradient(circle calc(var(--r) * 1.6) at var(--x) var(--y), color-mix(in srgb, var(--beam) 30%, transparent), color-mix(in srgb, var(--beam) 8%, transparent) 45%, transparent 72%);
}
.stage::after{
  /* vignette: keeps the corners of the room dark */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, transparent 40%, rgba(8,8,10,.55) 100%);
}
.dust{ position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.lightfield-wrap{ display: none; }

/* ---------- Hero title revealed by the torch ---------- */
.hero-title{ color: #6E717A; }                     /* 3.7:1 on dark: readable without the light */
.hero-title .line > span{ position: relative; white-space: nowrap; --lx: -999px; --ly: -999px; }
.hero-title .line > span::after{
  content: attr(data-text); position: absolute; inset: 0;
  color: var(--c-paper);
  text-shadow: 0 0 .35em color-mix(in srgb, var(--beam) 70%, transparent), 0 0 1.2em color-mix(in srgb, var(--beam) 35%, transparent);
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--lx) var(--ly), #000 0%, rgba(0,0,0,.85) 35%, transparent 100%);
          mask-image: radial-gradient(circle var(--r) at var(--lx) var(--ly), #000 0%, rgba(0,0,0,.85) 35%, transparent 100%);
  pointer-events: none;
}
.torch-hint{ margin-top: 18px; font-size: var(--fs-small); color: var(--c-paper-soft); display: none; }
@media (hover: hover) and (pointer: fine){ .torch-hint{ display: block; } }

.hero.stage{ --r: 0px; }

/* ---------- Prism: one light, four services ---------- */
.prism-wrap{ display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); column-gap: 0; align-items: stretch; }
.prism-svg{ width: 100%; aspect-ratio: 2 / 3; height: auto; overflow: visible; }
.prism-svg .beam-in{ stroke: var(--c-ink); stroke-width: 3; stroke-dasharray: 420; stroke-dashoffset: 420; }
.prism-svg .prism{ fill: rgba(23,24,27,.04); stroke: var(--c-ink); stroke-width: 2; }
.prism-svg .prism-glow{ fill: url(#prismFill); opacity: 0; }
.prism-svg .ray{ fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 520; stroke-dashoffset: 520; }
.prism-svg .ray-glow{ fill: none; stroke-width: 14; opacity: 0; filter: blur(6px); }
.prism-svg .ray-fan{ opacity: 0; }
.prism-wrap.is-in .beam-in{ stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--ease-in-out); }
.prism-wrap.is-in .prism-glow{ opacity: 1; transition: opacity .6s ease .8s; }
.prism-wrap.is-in .ray{ stroke-dashoffset: 0; transition: stroke-dashoffset 1s var(--ease) calc(.95s + var(--i) * .12s); }
.prism-wrap.is-in .ray-glow{ opacity: .35; transition: opacity .8s ease calc(1.3s + var(--i) * .12s), stroke-width .3s; }
.prism-wrap.is-in .ray-fan{ opacity: .14; transition: opacity 1s ease calc(1.1s + var(--i) * .12s); }
.prism-svg .is-hot.ray{ stroke-width: 5; }
.prism-svg .is-hot.ray-glow{ opacity: .8; stroke-width: 22; }
.prism-svg .is-hot.ray-fan{ opacity: .32; }

.prism-list{ display: grid; grid-template-rows: repeat(4, 1fr); border-top: 0; }
.prism-list .service-row{ border-bottom: 1px solid var(--c-line-light); display: flex; }
.prism-list .service-row:first-child{ border-top: 1px solid var(--c-line-light); }
.prism-list .service-row a{ flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 20px 0 20px clamp(32px, 4vw, 64px); }
.prism-list .service-row a::after{
  /* the ray continues into the row */
  content: ""; position: absolute; left: 0; top: 50%; width: clamp(20px, 3vw, 48px); height: 3px; margin-top: -1.5px;
  background: var(--beam); border-radius: 2px; transition: width .45s var(--ease);
}
.prism-list .service-row a:hover::after{ width: clamp(28px, 3.6vw, 56px); }
.prism-list .service-row a::before{ inset: 0 calc(var(--edge) * -1) 0 0; background: var(--c-dark); }
.prism-list .service-name, .prism-list .service-desc{ grid-column: auto; }
.prism-list .service-desc{ max-width: 46ch; }
.prism-list .service-glyph{ display: none; }
.prism-mini{ display: none; }

@media (max-width: 1100px){
  .prism-wrap{ grid-template-columns: 1fr; }
  .prism-svg{ display: none; }
  .prism-mini{ display: block; width: 100%; max-width: 560px; height: auto; margin-bottom: 40px; }
  .prism-mini .ray{ stroke-dasharray: none; stroke-dashoffset: 0; }
  .prism-list{ grid-template-rows: none; }
  .prism-list .service-row a{ padding: 28px 0 28px 44px; }
}

/* per-service light colour */
[data-beam="web"]{ --beam: var(--beam-web); }
[data-beam="mkt"]{ --beam: var(--beam-mkt); }
[data-beam="con"]{ --beam: var(--beam-con); }
[data-beam="sw"]{  --beam: var(--beam-sw); }

/* ---------- Projects switch on when they enter the room ---------- */
.js .reveal-media .project-frame img, .js .reveal-media .project-phone img{ filter: brightness(.22) saturate(.4); transition: filter 1.4s var(--ease) .35s, transform 1.4s var(--ease); }
.js .reveal-media.is-in .project-frame img, .js .reveal-media.is-in .project-phone img{ filter: none; }
.project-frame{ box-shadow: 0 0 0 1px var(--c-line-dark); }
.reveal-media.is-in .project-frame{ box-shadow: 0 0 0 1px var(--c-line-dark), 0 30px 120px -40px color-mix(in srgb, var(--c-accent) 55%, transparent); transition: box-shadow 1.6s ease .5s; }

/* ---------- Method: the progress line is a beam ---------- */
.method::after{ box-shadow: 0 0 12px 1px color-mix(in srgb, var(--c-accent) 70%, transparent); }

/* ---------- Inner page hero: torch in the service colour ---------- */
.page-hero.stage::after{ background: linear-gradient(to right, rgba(16,17,20,.55), transparent 60%), radial-gradient(ellipse at 50% 40%, transparent 40%, rgba(8,8,10,.55) 100%); }
.page-hero h1{ position: relative; }

/* ---------- Easter egg: lights off ---------- */
.lights-switch{
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font-family: var(--f-display); font-weight: 500; color: var(--c-paper-soft);
}
.lights-switch .sw{ width: 36px; height: 20px; border-radius: 999px; background: var(--c-line-dark); position: relative; transition: background .3s; }
.lights-switch .sw::after{ content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--c-paper); transition: transform .35s var(--ease); }
.lights-switch[aria-pressed="true"] .sw{ background: var(--c-accent); }
.lights-switch[aria-pressed="true"] .sw::after{ transform: translateX(16px); }
.lights-switch:hover{ color: var(--c-paper); }
.blackout{
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background: rgba(4,4,6,.965);
  -webkit-mask-image: radial-gradient(circle 190px at var(--bx, 50%) var(--by, 50%), transparent 0%, rgba(0,0,0,.6) 55%, #000 100%);
          mask-image: radial-gradient(circle 190px at var(--bx, 50%) var(--by, 50%), transparent 0%, rgba(0,0,0,.6) 55%, #000 100%);
  opacity: 0; transition: opacity .6s var(--ease);
}
.lights-off .blackout{ opacity: 1; }
.lights-off .site-header{ z-index: 95; }

@media (prefers-reduced-motion: reduce){
  .prism-svg .beam-in, .prism-svg .ray{ stroke-dashoffset: 0; }
  .prism-svg .prism-glow{ opacity: 1; }
  .prism-svg .ray-fan{ opacity: .14; }
  .js .reveal-media .project-frame img, .js .reveal-media .project-phone img{ filter: none; }
}
.prism-wrap > div{ display: flex; flex-direction: column; }
.prism-list{ flex: 1; }
.prism-list .service-row a{ align-items: flex-start; text-align: left; }

/* ==========================================================================
   v4 — Ottimizzazione (logo, hero, manifesto, prisma, portfolio)
   ========================================================================== */

/* ---------- Logo ---------- */
.brand{ gap: 0; }
.brand-logo{ height: 34px; width: auto; }
@media (max-width: 600px){ .brand-logo{ height: 28px; } }
.footer-logo{ height: 40px; width: auto; margin-bottom: 28px; }

/* ---------- Hero composition ---------- */
.hero{ align-items: center; padding-top: calc(var(--header-h) + clamp(40px, 8vh, 96px)); padding-bottom: clamp(56px, 10vh, 120px); }
.hero-place{ margin-bottom: clamp(18px, 2.4vw, 32px); }
.hero-body{ margin-top: clamp(24px, 3vw, 44px); max-width: 620px; }
.hero-body .hero-lede{ max-width: 44ch; }
.hero-body .hero-actions{ margin-top: clamp(24px, 2.6vw, 36px); justify-content: flex-start; display: flex; flex-wrap: wrap; gap: 12px; }
.torch-hint{ position: absolute; right: var(--edge); bottom: clamp(24px, 4vh, 44px); margin: 0; z-index: 1; display: none; align-items: center; gap: 10px; }
.torch-hint::before{ content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 12px 3px color-mix(in srgb, var(--c-accent) 60%, transparent); }
@media (hover: hover) and (pointer: fine){ .torch-hint{ display: inline-flex; } }
@media (max-height: 640px) and (min-width: 901px){ .hero{ align-items: flex-end; } }

/* ---------- Hero title: brighter at rest, letters lit by the torch ---------- */
.hero-title{ color: #8B8E97; }            /* 5.8:1 on #101114 */
.hero-title .line > span::after{
  inset: -.5em; padding: .5em;           /* room for the glow: no clipped box edges */
  text-shadow: 0 0 .22em color-mix(in srgb, var(--beam) 75%, transparent);
  -webkit-mask-image: radial-gradient(circle var(--tr, 200px) at calc(var(--lx) + .5em) calc(var(--ly) + .5em), #000 0%, rgba(0,0,0,.92) 22%, rgba(0,0,0,.55) 48%, rgba(0,0,0,.18) 72%, transparent 100%);
          mask-image: radial-gradient(circle var(--tr, 200px) at calc(var(--lx) + .5em) calc(var(--ly) + .5em), #000 0%, rgba(0,0,0,.92) 22%, rgba(0,0,0,.55) 48%, rgba(0,0,0,.18) 72%, transparent 100%);
}

/* ---------- Torch: soft radial light with depth, no visible edges ---------- */
.stage::before{
  background:
    radial-gradient(circle calc(var(--r) * .42) at var(--x) var(--y), rgba(247,247,245,.13) 0%, rgba(247,247,245,.06) 35%, rgba(247,247,245,.015) 70%, rgba(247,247,245,0) 100%),
    radial-gradient(circle calc(var(--r) * 1.1) at var(--x) var(--y),
      color-mix(in srgb, var(--beam) 34%, transparent) 0%,
      color-mix(in srgb, var(--beam) 22%, transparent) 22%,
      color-mix(in srgb, var(--beam) 11%, transparent) 45%,
      color-mix(in srgb, var(--beam) 4%, transparent) 70%,
      transparent 100%),
    radial-gradient(circle calc(var(--r) * 2.6) at calc(var(--x) * .85 + 8%) calc(var(--y) * .9 + 4%),
      color-mix(in srgb, var(--beam) 7%, transparent) 0%,
      color-mix(in srgb, var(--beam) 3%, transparent) 50%,
      transparent 100%);
}
.hero.stage::after{ background: radial-gradient(ellipse 120% 90% at 50% 45%, transparent 45%, rgba(8,8,10,.6) 100%); }

/* ---------- Manifesto: editorial, compact ---------- */
.manifesto{ padding-block: clamp(80px, 10vw, 160px); }
.manifesto .grid{ align-items: end; row-gap: 32px; }
.manifesto-title{ grid-column: 1 / span 7; }
.manifesto-body{ grid-column: 9 / -1; margin-top: 0; padding-top: 24px; border-top: 2px solid var(--c-ink); }
.manifesto-body .lead{ max-width: none; margin-bottom: 1em; }
.manifesto-body p.muted{ max-width: 48ch; }
@media (max-width: 1100px){ .manifesto-title{ grid-column: 1 / span 8; } .manifesto-body{ grid-column: 8 / -1; } }
@media (max-width: 900px){ .manifesto-title, .manifesto-body{ grid-column: 1 / -1; } }

/* ---------- Prism v2: glass prism, soft beams ---------- */
.prism-svg .beam-in, .prism-svg .ray, .prism-svg .ray-glow, .prism-svg .ray-fan, .prism-svg .prism, .prism-svg .prism-glow{ stroke-dasharray: none; stroke-dashoffset: 0; }
.prism-svg .p-beam, .prism-svg .p-ray, .prism-svg .p-core{ transform-box: fill-box; transform-origin: 0% 50%; }
.prism-svg .p-beam{ transform: scaleX(0); }
.prism-svg .p-core{ opacity: 0; }
.prism-svg .p-ray{ transform: scaleX(0); opacity: .9; transition: opacity .35s var(--ease), filter .35s var(--ease); }
.prism-svg .p-ray-glow{ opacity: 0; }
.prism-svg .p-glass{ opacity: .0; }
.prism-wrap.is-in .p-beam{ transform: scaleX(1); transition: transform .9s var(--ease-in-out); }
.prism-wrap.is-in .p-core{ opacity: 1; transition: opacity .5s ease .75s; }
.prism-wrap.is-in .p-glass{ opacity: 1; transition: opacity .9s ease .2s; }
.prism-wrap.is-in .p-ray{ transform: scaleX(1); transition: transform 1.1s var(--ease) calc(.9s + var(--i) * .12s), opacity .35s var(--ease); }
.prism-wrap.is-in .p-ray-glow{ opacity: .45; transition: opacity 1s ease calc(1.3s + var(--i) * .12s); }
.prism-svg .p-ray.is-dim{ opacity: .35; }
.prism-svg .p-ray.is-hot{ opacity: 1; filter: brightness(1.15); }
.prism-svg .p-ray-glow.is-hot{ opacity: .9; }

/* rows: tinted light instead of a black block */
.prism-list .service-row a::before{ background: color-mix(in srgb, var(--beam) 8%, transparent); transform: scaleX(0); transform-origin: left; inset: 0 calc(var(--edge) * -1) 0 0; }
@media (hover: hover){
  .prism-list .service-row a:hover{ color: var(--c-ink); }
  .prism-list .service-row a:hover .service-desc{ color: var(--c-ink-soft); }
  .prism-list .service-row a:hover::before{ transform: scaleX(1); }
}
.prism-list .service-row a:focus-visible::before{ transform: scaleX(1); }
.prism-list .service-row a::after{
  width: clamp(28px, 4vw, 64px); height: 4px; margin-top: -2px; border-radius: 0 4px 4px 0;
  background: linear-gradient(90deg, var(--beam), color-mix(in srgb, var(--beam) 15%, transparent));
  box-shadow: 0 0 14px 1px color-mix(in srgb, var(--beam) 45%, transparent);
}
.prism-list .service-row a:hover::after, .prism-list .service-row a:focus-visible::after{ width: clamp(40px, 5.6vw, 96px); }
.prism-list .service-name{ display: inline-flex; align-items: center; gap: .5em; transition: transform .45s var(--ease); }
.prism-list .service-name::after{ content: ""; width: .5em; height: .5em; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg) translate(-4px, 4px); opacity: 0; transition: opacity .35s, transform .45s var(--ease); }
.prism-list .service-row a:hover .service-name::after, .prism-list .service-row a:focus-visible .service-name::after{ opacity: 1; transform: rotate(45deg) translate(0, 0); }
.prism-list .service-row a{ padding-left: clamp(48px, 6vw, 112px); }
@media (max-width: 1100px){ .prism-list .service-row a{ padding-left: 64px; } }

/* ---------- Portfolio: bigger real images, light sweep on hover ---------- */
.project--wide .project-media{ grid-column: 1 / span 9; }
.project--wide .project-info{ grid-column: 10 / -1; }
.project--offset{ grid-column: 2 / span 10; }
@media (max-width: 1100px){ .project--wide .project-media{ grid-column: 1 / span 8; } .project--wide .project-info{ grid-column: 9 / -1; } }
@media (max-width: 900px){ .project--wide .project-media, .project--wide .project-info, .project--offset{ grid-column: 1 / -1; } }
.project-frame{ border-radius: 6px; }
.project-phone{ border-radius: 20px; }
.project-frame::after{
  content: ""; position: absolute; inset: -20% -60%; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.16) 50%, transparent 60%);
  transform: translateX(-70%); opacity: 0;
}
@media (hover: hover){
  .project-media:hover .project-frame::after{ opacity: 1; transform: translateX(70%); transition: transform 1.1s var(--ease), opacity .2s; }
}
.project-media:focus-visible{ outline-offset: 6px; }
.project-info h3{ transition: color .3s; }
.project:has(.project-media:hover) .project-info h3{ color: var(--c-paper); }
.project-cat{ color: var(--c-paper-soft); }
.projects-list{ row-gap: clamp(88px, 11vw, 180px); }

@media (prefers-reduced-motion: reduce){
  .prism-svg .p-beam, .prism-svg .p-ray{ transform: none; }
  .prism-svg .p-core, .prism-svg .p-glass{ opacity: 1; }
  .prism-svg .p-ray-glow{ opacity: .45; }
}
.footer-claim p{ font: inherit; }
@media (max-width: 700px){
  .hero{ min-height: 86svh; align-items: flex-end; padding-top: calc(var(--header-h) + 72px); padding-bottom: 64px; }
}

/* ==========================================================================
   v6 — nuovo titolo, carosello progetti, mobile
   ========================================================================== */

/* Headline is longer now: scale so the longest line fits, lines may wrap on small screens */
.hero-title{ font-size: clamp(2.7rem, 0.6rem + 6.6vw, 7.6rem); }
.hero-title .line > span{ white-space: normal; }

/* ---------- Projects carousel (home) ---------- */
.pj-carousel{ margin-top: clamp(-40px, -3vw, -16px); }
.pj-bar{ display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.pj-label{ font-family: var(--f-display); font-weight: 600; font-size: var(--fs-h4); letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 12px; }
.pj-label::before{ content: ""; width: 28px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--beam-web), var(--beam-mkt), var(--beam-con), var(--beam-sw)); }
.pj-nav{ display: flex; gap: 10px; }
.pj-btn{ width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--c-line-dark); color: var(--c-paper); transition: background .3s, box-shadow .3s, opacity .3s, transform .2s; }
.pj-btn svg{ width: 22px; height: 22px; }
.pj-btn:hover:not(:disabled){ background: var(--c-accent); box-shadow: inset 0 0 0 1.5px var(--c-accent); }
.pj-btn:active:not(:disabled){ transform: scale(.94); }
.pj-btn:disabled{ opacity: .35; cursor: default; }

.pj-track{
  --pad: max(var(--edge), calc((100vw - var(--max)) / 2 + var(--edge)));
  display: flex; gap: clamp(20px, 2.6vw, 44px);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 12px var(--pad) 40px; scroll-padding-inline: var(--pad);
  scrollbar-width: none;
}
.pj-track::-webkit-scrollbar{ display: none; }
.pj-track:focus-visible{ outline: 2px solid var(--c-paper); outline-offset: -2px; }
.pj-card{ flex: 0 0 clamp(300px, 64vw, 1000px); scroll-snap-align: start; }
.pj-media{ position: relative; display: block; padding: 0 7% 7% 0; }
.pj-media .project-frame{ aspect-ratio: 16 / 9; box-shadow: 0 0 0 1px var(--c-line-dark), 0 40px 100px -40px rgba(0,0,0,.8); transition: transform .7s var(--ease), box-shadow .7s var(--ease); }
.pj-media .project-phone{ width: 21%; }
.pj-media.is-in .project-frame{ box-shadow: 0 0 0 1px var(--c-line-dark), 0 40px 120px -36px color-mix(in srgb, var(--c-accent) 60%, transparent); }
@media (hover: hover){
  .pj-media:hover .project-frame{ transform: translateY(-8px); }
  .pj-media:hover .project-frame img{ transform: scale(1.03); }
  .pj-media:hover .project-phone{ transform: translateY(-18px); }
  .pj-media:hover .project-frame::after{ opacity: 1; transform: translateX(70%); transition: transform 1.1s var(--ease), opacity .2s; }
}
.pj-info{ padding-top: 22px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); column-gap: var(--gap); row-gap: 8px; align-items: start; max-width: 92%; }
.pj-info h3{ font-size: var(--fs-h3); grid-column: 1; }
.pj-info .project-cat{ grid-column: 1; margin: 0; }
.pj-info .project-desc{ grid-column: 2; grid-row: 1 / span 3; margin: 0; color: var(--c-paper-soft); }
.pj-info .text-link{ grid-column: 1; margin-top: 10px; width: fit-content; }
.pj-progress{ height: 2px; background: var(--c-line-dark); border-radius: 2px; overflow: hidden; }
.pj-progress span{ display: block; height: 100%; width: calc(var(--pj, 0) * 100%); min-width: 8%; background: linear-gradient(90deg, var(--beam-web), var(--beam-mkt), var(--beam-con), var(--beam-sw)); transition: width .2s linear; }
.projects-more{ margin-top: clamp(40px, 5vw, 72px); }

/* sticky mobile CTA: hidden on desktop */
.m-cta{ display: none; }

/* ==========================================================================
   MOBILE ONLY (≤ 700px) — desktop layout untouched
   ========================================================================== */
@media (max-width: 700px){
  /* hero */
  .hero-title{ font-size: clamp(2.7rem, 12.5vw, 3.6rem); line-height: .95; letter-spacing: -0.05em; color: #9A9DA6; }
  .hero-place{ font-size: .9375rem; }
  .hero-body .hero-lede{ font-size: 1.125rem; }
  .hero-body .hero-actions{ flex-direction: column; align-items: stretch; }
  .hero-body .hero-actions .btn{ width: 100%; min-height: 56px; }
  .hero.stage::after{ background: linear-gradient(to bottom, rgba(16,17,20,0) 40%, rgba(16,17,20,.65) 100%), radial-gradient(ellipse 140% 80% at 50% 35%, transparent 45%, rgba(8,8,10,.6) 100%); }

  /* manifesto: big first line, tight */
  .manifesto{ padding-block: 72px; }
  .manifesto-title{ font-size: 2.35rem; }

  /* services: coloured cards fed by the prism */
  .prism-mini{ margin: 8px 0 28px; }
  .prism-mini .m-ray{ transform-box: fill-box; transform-origin: 0% 50%; transform: scaleX(0); }
  .prism-wrap.is-in .prism-mini .m-ray{ transform: scaleX(1); transition: transform .9s var(--ease) calc(.2s + var(--i) * .12s); }
  .prism-list{ gap: 12px; }
  .prism-list .service-row, .prism-list .service-row:first-child{ border: 0; }
  .prism-list .service-row a{
    padding: 22px 20px 22px 24px; border-radius: 14px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--beam) 13%, #fff), #fff 70%);
    box-shadow: inset 4px 0 0 var(--beam), 0 10px 30px -18px color-mix(in srgb, var(--beam) 70%, transparent);
  }
  .prism-list .service-row a::after, .prism-list .service-row a::before{ display: none; }
  .prism-list .service-name{ font-size: 1.45rem; }
  .prism-list .service-name::after{ opacity: 1; transform: rotate(45deg); width: .38em; height: .38em; }

  /* projects: swipe cards */
  .pj-card{ flex-basis: 84vw; }
  .pj-media{ padding: 0 6% 10% 0; }
  .pj-media .project-phone{ width: 27%; border-width: 4px; border-radius: 14px; }
  .pj-info{ grid-template-columns: 1fr; max-width: none; }
  .pj-info .project-desc{ grid-column: 1; grid-row: auto; font-size: .9375rem; }
  .pj-btn{ width: 44px; height: 44px; }
  .pj-label{ font-size: 1.1rem; }

  /* why: cards */
  .why-item{ padding: 22px 0; }
  .why-item h3{ display: flex; align-items: center; gap: 10px; }
  .why-item h3::before{ content: ""; width: 8px; height: 8px; flex: none; background: var(--c-accent); box-shadow: 0 0 10px 2px color-mix(in srgb, var(--c-accent) 55%, transparent); }

  /* sticky CTA after the hero */
  .m-cta{
    display: flex; align-items: center; justify-content: center; gap: 10px;
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 80;
    min-height: 54px; border-radius: 999px;
    background: var(--c-accent); color: var(--c-white);
    font-family: var(--f-display); font-weight: 600;
    box-shadow: 0 12px 32px -10px rgba(49,92,255,.7), 0 0 0 1px rgba(255,255,255,.12) inset;
    transform: translateY(140%); transition: transform .5s var(--ease);
  }
  .m-cta::before{ content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 3px rgba(255,255,255,.7); }
  .m-cta.is-visible{ transform: none; }
  .site-footer{ padding-bottom: 96px; }
}
@media (prefers-reduced-motion: reduce){
  .prism-mini .m-ray{ transform: none !important; }
}
.pj-track, .pj-card{ position: relative; }
.pj-media.is-in .project-frame{ box-shadow: 0 0 0 1px var(--c-line-dark), 0 30px 90px -55px color-mix(in srgb, var(--c-accent) 70%, transparent); }