/* =========================================================
   EverythingRomaTech — shared design system
   Vanilla CSS, no build step. Loaded by every page.
   ========================================================= */

/* Metric-matched fallback for Inter: renders text at ~the same width as the
   webfont before it loads, so the swap doesn't reflow/resize elements sized
   to their text (e.g. the pill buttons) — fixes a measured CLS hit. */
@font-face{
  font-family: 'Inter Fallback';
  src: local('Arial');
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
  size-adjust: 107.12%;
}

:root{
  --bg: #F3F0EE;
  --bg-1: #FCFBFA;
  --surface: #FFFFFF;
  --surface-2: #FCFBFA;
  --mint: #2FE38F;
  --mint-soft: #2FE38F1A;
  --error: #C4432B;
  --star: #F5B729;
  --ink: #141413;
  --ink-dim: #55534E;
  --muted: #706D66;        /* 4.55:1 on --bg, 5.16 on white -- was #8C887F at 3.11, failing AA */
  --muted-on-dark: #B5AFA6; /* the same role inverted: 8.47:1 on --ink, where darkening would have made it worse */
  --line: #E4DFDA;
  --line-soft: #EDE9E5;

  --radius-sm: 12px;
  --radius-lg: 32px;
  --radius-xl: 48px;
  --radius-full: 999px;
  --nav-offset: 100px;
  --stage-shift: 0s;   /* set per page load in site.js to vary which object leads */

  --shadow-sm: 0 8px 24px -12px rgba(20,20,19,.08);
  --shadow-lg: 0 48px 96px -32px rgba(20,20,19,.10);

  --display: 'Space Grotesk', sans-serif;
  --body: 'Inter', 'Inter Fallback', sans-serif;
  --mono: 'IBM Plex Mono', monospace;

  --container: 1180px;
  --measure: 720px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
/* overflow-y:scroll keeps the scrollbar gutter constant so 100vw-based full-bleed
   sections (.flow-break) measure the same as the layout's own % calculations —
   without this, vw includes the scrollbar and % doesn't, and the bleed misses
   the true viewport edge by the scrollbar's width. */
html{ overflow-x: hidden; overflow-y: scroll; }

body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.6;
  position: relative;
}

.wrap{ max-width: var(--container); margin: 0 auto; padding: 0 32px; position: relative; z-index: 1; }

/* anchor-jump targets need offsetting so the sticky header doesn't cover them */
#servizi, #recensioni, #contatti, #main{ scroll-margin-top: var(--nav-offset); }
a{ color: inherit; text-decoration: none; }
h1, h2, h3{ font-family: var(--display); letter-spacing: -0.02em; text-wrap: balance; }
p{ text-wrap: pretty; }

.skip-link{
  position:absolute; top:-48px; left:16px; z-index:200;
  background:var(--ink); color:var(--bg); padding:12px 18px;
  border-radius:var(--radius-sm); font-weight:600; font-size:0.9rem;
  transition:top .2s ease;
}
.skip-link:focus{ top:16px; }

:focus-visible{ outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

.eyebrow{
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background: var(--mint); flex-shrink:0;
}

/* ---------- LOGO ---------- */
.logo{
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  display:flex; align-items:center; gap: 11px;
  white-space: nowrap;
}
.logo-mark{ flex-shrink: 0; }
.logo-mark svg{ display:block; }

.site-header .logo .brand-text, .site-footer .logo .brand-text{
  font-family: 'Archivo Black', var(--display), sans-serif;
  letter-spacing: -0.075em;
  color: var(--ink);
  display: inline-block;
  transform: skewX(-6deg);
  transform-origin: left;
}
.site-header .logo .brand-text{ font-size: 1.5rem; }
.site-footer .logo .brand-text{ font-size: 1.28rem; }

/* ---------- NAV / HEADER ---------- */
header.site-header{
  position: sticky; top:0; z-index: 50;
  padding: 16px 20px 0;
}
nav.site-nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 22px;
  max-width: var(--container); margin: 0 auto;
  gap: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
}
.nav-links{ display:flex; gap: 34px; font-size: 0.92rem; color: var(--ink-dim); }
.nav-links a{ transition: color .2s ease; position:relative; padding:4px 0; }
.nav-links a:hover{ color: var(--ink); }
.nav-links a[aria-current="page"]{ color: var(--ink); }
.nav-links a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px;
  height:2px; border-radius:2px;
  background: var(--mint);
}
.nav-cta{
  padding: 10px 20px;
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 0.88rem;
  transition: transform .2s ease, opacity .2s ease;
  flex-shrink: 0;
}
.nav-cta:hover{ transform: translateY(-2px); opacity: .92; }
.nav-mobile-hide{ display:flex; }
@media (max-width: 760px){ .nav-mobile-hide{ display:none; } }

.lang-switch{
  position: relative;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
}
.lang-switch-track{
  position: relative;
  width: 52px; height: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  box-sizing: border-box;
  transition: border-color .2s ease;
}
.lang-switch:hover .lang-switch-track{ border-color: var(--mint); }
.lang-switch-flag{
  position: absolute;
  top: 8.5px;
  z-index: 1;
  width: 16px; height: 11px;
  border-radius: 2px;
  overflow: hidden;
  opacity: 0.35;
  transition: opacity .2s ease;
}
.lang-switch-flag.it{ left: 6px; }
.lang-switch-flag.us{ left: 30px; }
.lang-switch-flag svg{ display: block; width: 100%; height: 100%; }
.lang-switch[aria-checked="false"] .lang-switch-flag.it{ opacity: 1; }
.lang-switch[aria-checked="true"] .lang-switch-flag.us{ opacity: 1; }
.lang-switch-knob{
  position: absolute;
  top: 3px; left: 3px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--mint);
  transition: transform .25s cubic-bezier(0.2,0.8,0.2,1);
  z-index: 0;
}
.lang-switch[aria-checked="true"] .lang-switch-knob{ transform: translateX(24px); }
.lang-switch-mobile{
  margin-top: 10px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}
@media (max-width: 760px){ .lang-switch.nav-mobile-hide{ display: none; } }

.menu-toggle{
  display:none;
  background:none; border:none; color:var(--ink);
  padding:11px; cursor:pointer; border-radius:8px;
}
@media (max-width: 760px){ .menu-toggle{ display:flex; } }

#mobile-menu{
  display:none;
  flex-direction:column;
  gap:2px;
  padding: 8px 20px 12px;
  max-width: var(--container); margin:10px auto 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
#mobile-menu.open{ display:flex; }
#mobile-menu a{
  padding:12px 4px;
  color:var(--ink-dim);
  border-top:1px solid var(--line);
  font-size:0.96rem;
}
#mobile-menu a:first-child{ border-top:none; }
#mobile-menu a[aria-current="page"]{ color: var(--ink); font-weight:600; }
#mobile-menu a.nav-cta{
  border-top: none;
  padding: 12px 20px;
  color: var(--bg);
  text-align: center;
  margin-top: 10px;
  display: inline-block;
}

/* ---------- BUTTONS ---------- */
.btn-primary{
  padding: 14px 26px;
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform .2s ease, box-shadow .2s ease;
  display:inline-block;
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn-ghost{
  padding: 14px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink-dim);
  transition: border-color .2s ease, color .2s ease;
  display:inline-block;
}
.btn-ghost:hover{ border-color: var(--mint); color: var(--ink); }
.btn-primary:disabled, .btn-primary[aria-busy="true"]{ opacity:0.6; cursor:default; transform:none; box-shadow:none; }

/* ---------- CONTACT FORM ---------- */
.contact-form{ text-align:left; max-width: 560px; margin: 0 auto; display:flex; flex-direction:column; gap:14px; }
.contact-form .form-row{ display:flex; flex-direction:column; gap:6px; }
/* name and contact share a row: two short fields stacked was most of what made
   the panel taller than the viewport */
.contact-form .form-pair{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width: 560px){ .contact-form .form-pair{ grid-template-columns:1fr; gap:14px; } }
.contact-form label{ font-family: var(--body); font-weight:600; font-size:0.76rem; letter-spacing:0.05em; text-transform:uppercase; color: var(--muted-on-dark); }
.contact-form input, .contact-form select, .contact-form textarea{
  width:100%; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); color: var(--ink); font-family: var(--body); font-size:0.95rem;
  transition: border-color .2s ease;
}
.contact-form input::placeholder, .contact-form textarea::placeholder{ color: var(--muted); }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{ border-color: var(--ink); }
/* the border change alone was the only focus cue here, because outline:none beat the
   global :focus-visible rule on specificity. Ring is mint, not --ink: this panel sits
   on --ink, so the global outline colour would have been invisible against it. */
.contact-form input:focus-visible, .contact-form select:focus-visible, .contact-form textarea:focus-visible{ outline: 2px solid var(--mint); outline-offset: 2px; }
.contact-form textarea{ resize: vertical; min-height: 76px; }
.contact-form .form-honeypot{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; overflow:hidden; }
.contact-form .form-actions{ margin-top: 4px; }
.contact-form .form-status{ font-family: var(--mono); font-size:0.86rem; margin-top:4px; min-height: 1.2em; }
.contact-form .form-status.ok{ color: var(--mint); }
.contact-form .form-status.err{ color: var(--error); }
.btn-text{
  display:inline-flex; align-items:center; gap:6px;
  padding: 5px 0;   /* sat exactly on the 24px AA target-size line; this clears it */
  color: var(--ink); font-weight:600; font-size:0.92rem;
}
.btn-text svg, .btn-text .arrow{ transition: transform .2s ease; }
.btn-text:hover .arrow{ transform: translateX(4px); }
.hero-ctas{ display:flex; gap: 16px; flex-wrap: wrap; align-items:center; }

/* ---------- HERO (marketing) ---------- */
.hero{
  padding: 100px 0 90px;
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 50px;
  align-items:center;
}
@media (max-width: 900px){ .hero{ grid-template-columns: 1fr; padding: 60px 0 60px; } }
.hero h1{
  font-size: clamp(2.6rem, 5.2vw, 4.4rem);
  font-weight: 700;
  line-height: 1.04;
  margin: 20px 0 24px;
}
h1 em{
  font-style: normal;
  color: var(--ink);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: var(--mint);
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.12em;
}
.hero p{
  font-size: 1.12rem;
  color: var(--ink-dim);
  max-width: 480px;
  margin-bottom: 34px;
}

/* --- signature: hero laptop mark --- */
.hero-mark{ display:flex; justify-content:center; }
.hero-stage{
  width:100%; max-width:430px; aspect-ratio: 1.62;
  perspective:1200px; position:relative;
  --ring: 156px;   /* carousel radius; tightened on narrow screens below */
}
/* A real turntable: the three objects sit on a circle 120deg apart and the
   whole ring rotates, so nothing is ever shown or hidden. The previous design
   turned each object out, cut it at edge-on and turned the next one in -- that
   cut was the jank, and no amount of easing fixes a hard swap. Here every
   object is on screen the whole time and the ring simply brings each to the
   front, which also puts all three services in view at once. */
.carousel{
  position:absolute; inset:0;
  transform-style:preserve-3d; -webkit-transform-style:preserve-3d;
  animation: carousel-spin 36s linear infinite;
  animation-delay: var(--stage-shift);
  will-change: transform;
}
/* Each item keeps a 240x240 frame so the objects' own coordinates are
   unchanged, then is pushed out onto the ring. */
.stage-item{
  position:absolute; top:50%; left:50%; width:240px; height:240px; margin:-120px 0 0 -120px;
  transform-style:preserve-3d; -webkit-transform-style:preserve-3d;
}
.stage-item[data-beat="1"]{ transform: rotateY(0deg) translateZ(var(--ring)); }
.stage-item[data-beat="2"]{ transform: rotateY(120deg) translateZ(var(--ring)); }
.stage-item[data-beat="3"]{ transform: rotateY(240deg) translateZ(var(--ring)); }
/* One continuous, slow revolution -- 36s for 360deg, so each object sweeps
   through the front every 12s at a steady 10deg/s. Nothing stops, so there is
   no start/stop curve to get wrong; linear is exactly right here and the loop
   closes because -360deg is -0deg. */
@keyframes carousel-spin{
  from{ transform: rotateY(0deg); }
  to{ transform: rotateY(-360deg); }
}
/* one shadow, parked under the front slot (which never moves) and scaled to
   whichever object is standing there */
.stage-shadow{
  position:absolute; width:150px; height:20px; left:50%; top:88%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(20,20,19,0.22), transparent 72%);
  filter: blur(4px);
  animation: stage-shadow 36s linear infinite;
  animation-delay: var(--stage-shift);
}
@keyframes stage-shadow{
  0%{ transform: translateX(-50%) scaleX(1); }
  33.3%{ transform: translateX(-50%) scaleX(0.42); }
  66.6%{ transform: translateX(-50%) scaleX(0.62); }
  100%{ transform: translateX(-50%) scaleX(1); }
}
.laptop-rig{
  width:100%; height:100%; position:relative;
  transform-style:preserve-3d; -webkit-transform-style:preserve-3d;
  /* 155deg, not 0: the lid's content face carries its own rotateY(180deg),
     and the screen only renders across rotateY 100-260deg (measured by
     sweeping the render). 155 sits in that window as a three-quarter view. */
  transform: rotateX(-16deg) rotateY(155deg);
}
.laptop{
  position:absolute; top:50%; left:50%;
  width:168px; height:1px;
  margin-top: 38px;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
}
/* base: keyboard deck. Flat state occupies y:[0,108], hinge at its own top edge (shared hinge line at y=0). Folds down+forward into a horizontal floor. */
.laptop-base{
  position:absolute; top:0; left:-84px;
  width:168px; height:108px;
  transform-origin: top center;
  transform: rotateX(-90deg) rotateY(180deg);
  background: linear-gradient(200deg, #DBDDE0 0%, #B4B7BC 100%);
  border: 1px solid #9A9DA3;
  border-bottom: 6px solid #888B91;
  border-radius: 4px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* The deck is a single plane, so without this pair the underside of the
   laptop showed the keyboard and trackpad again, mirrored -- visible now that
   the ring carries the laptop right around. Same fix the lid already uses:
   two complementary backface-hidden faces, one with the keys, one plain.

   Which of the two carries the keyboard is NOT guessable -- the deck's net
   rotation is -106deg (the rig's -16 plus the base's -90), so it is tipped
   past vertical and its geometric front face points away from the camera at
   the pose you actually look at. Probed by filling the two faces with flat
   test colours and stepping the ring: the rotateY(180deg) face is the one
   visible head-on, so the keys live there. */
.laptop-underside{
  position:absolute; top:0; left:-84px;
  width:168px; height:108px;
  transform-origin: top center;
  transform: rotateX(-90deg);
  background: linear-gradient(160deg, #C7CACE 0%, #A7AAAF 100%);
  border: 1px solid #93969C;
  border-radius: 4px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* four rubber feet, so the underside reads as a base and not a blank slab */
.laptop-underside::before{
  content:""; position:absolute; inset:9px 12px;
  border-radius:3px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.22),
    -54px -32px 0 0 rgba(20,20,19,0.30), 54px -32px 0 0 rgba(20,20,19,0.30),
    -54px 32px 0 0 rgba(20,20,19,0.30), 54px 32px 0 0 rgba(20,20,19,0.30);
  width:7px; height:7px; margin:auto;
}
.laptop-base::before{
  content:""; position:absolute; left:50%; top:12px; width:132px; height:40px;
  margin-left:-66px; border-radius:2px;
  background-color: rgba(20,20,19,0.05);
  background-image:
    repeating-linear-gradient(90deg, rgba(20,20,19,0.18) 0 2px, transparent 2px 12px),
    repeating-linear-gradient(0deg, rgba(20,20,19,0.18) 0 2px, transparent 2px 9px);
}
.laptop-base::after{
  content:""; position:absolute; left:50%; top:62px; width:50px; height:26px;
  margin-left:-25px; border-radius:2px;
  background: rgba(20,20,19,0.08);
  box-shadow: inset 0 1px 2px rgba(20,20,19,0.12);
}
/* lid: hinges open/close on X (breathing animation), spins with the rig on Y.
   Two backface-hidden faces at a mutual 180deg offset -- whichever one
   geometrically faces the camera shows on its own, no angle-guessing needed.
   This element's own background sits behind both faces: the rig's spin and
   the hinge are independently-animated rotations compounding on the same
   3D chain, and under that combination the browser occasionally culls both
   faces for a couple of frames at once (confirmed by sampling
   elementFromPoint through a real running cycle). Without a fill here, that
   gap shows whatever is behind the lid; with it, a plain color instead. */
.laptop-lid{
  position:absolute; top:-118px; left:-84px;
  width:168px; height:118px;
  transform-origin: bottom center;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform: rotateX(4deg);
  will-change: transform;
  background: #B9BCC1;
  border-radius: 6px 6px 2px 2px;
}
.laptop-lid-back, .laptop-lid-front{
  position:absolute; inset:0;
  border-radius: 6px 6px 2px 2px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.laptop-lid-back{
  background: linear-gradient(155deg, #F1F2F4 0%, #D2D4D8 100%);
  border: 1px solid #9A9DA3;
  border-top: 5px solid #9A9DA3;
}
.laptop-lid-front{
  transform: rotateY(180deg);
  background: #17181a;
}
/* screen content: a CSS-only "code rain" -- columns of glyphs scrolling down
   on a seamless loop. Each column's string is written TWICE in the markup, so
   translating it by exactly -50%..0 of its own height moves it by one full
   period: the loop point lands on identical glyphs and never snaps. */
.laptop-screen{
  position:absolute; inset:5px 5px 6px 5px;
  border-radius: 2px;
  overflow: hidden;
  background-color: #050f09;
  box-shadow: 0 0 20px 3px rgba(47,227,143,0.30), inset 0 0 0 1px rgba(255,255,255,0.05);
}
/* static glass pass over the rain: scanlines, a diagonal sheen, and a
   top/bottom fade in the screen's own colour. All three are motionless, so
   they cost nothing per frame and they hide the columns' hard edges. */
.laptop-screen::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,0.30) 0 1px, transparent 1px 3px),
    linear-gradient(115deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.02) 34%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, #050f09 0%, rgba(5,15,9,0) 16%, rgba(5,15,9,0) 80%, #050f09 100%);
}
/* height:auto -- in vertical-rl the block's height is its INLINE size, so the
   column shrink-wraps to the glyph run and the -50% translate is exact
   regardless of font metrics. will-change gives each column its own compositor
   layer: the glyphs rasterise once and are then only transformed, instead of
   the whole 3D-projected screen repainting every frame (that repaint, at 6px
   with a blurred text-shadow, was the flicker). */
.rain-col{
  --rain-streak: linear-gradient(180deg,
    rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 10%, rgba(0,0,0,0.55) 34%,
    rgba(0,0,0,0.9) 62%, #000 74%, rgba(0,0,0,0.2) 78%, rgba(0,0,0,0) 88%);
  position:absolute; top:0; height:auto;
  writing-mode: vertical-rl;
  white-space: nowrap;
  font-family: var(--mono), monospace;
  font-size: 6px;
  line-height: 1.5;
  color: #6EE7AE;
  text-shadow: 0 0 4px rgba(110,231,174,0.5);
  /* streak mask: ONE tile per loop period (mask-size 50% == the -50% travel),
     so the bright head and its fading tail fall along with the glyphs and wrap
     at exactly the same instant the text does -- streaks, still no snap. */
  -webkit-mask-image: var(--rain-streak);
  mask-image: var(--rain-streak);
  -webkit-mask-size: 100% 50%;
  mask-size: 100% 50%;
  will-change: transform;
  animation: laptop-code-rain 12s linear infinite;
}
.rain-col:nth-child(1){ left:1%;  animation-duration:11.5s; animation-delay:-0.4s;  opacity:0.75; }
.rain-col:nth-child(2){ left:11%; animation-duration:9.2s;  animation-delay:-6.1s;  opacity:1;    color:#C8FFE4; }
.rain-col:nth-child(3){ left:21%; animation-duration:13.4s; animation-delay:-3.2s;  opacity:0.6;  }
.rain-col:nth-child(4){ left:31%; animation-duration:10.1s; animation-delay:-8.4s;  opacity:0.9;  }
.rain-col:nth-child(5){ left:41%; animation-duration:12.6s; animation-delay:-1.9s;  opacity:0.7;  }
.rain-col:nth-child(6){ left:51%; animation-duration:9.8s;  animation-delay:-5.7s;  opacity:1;    color:#C8FFE4; }
.rain-col:nth-child(7){ left:61%; animation-duration:11.1s; animation-delay:-2.6s;  opacity:0.65; }
.rain-col:nth-child(8){ left:71%; animation-duration:13.9s; animation-delay:-9.3s;  opacity:0.85; }
.rain-col:nth-child(9){ left:81%; animation-duration:10.6s; animation-delay:-4.5s;  opacity:0.7;  }
.rain-col:nth-child(10){ left:91%; animation-duration:12.1s; animation-delay:-7.8s; opacity:0.55; }
@keyframes laptop-code-rain{
  from{ transform: translateY(-50%); }
  to{ transform: translateY(0); }
}
/* --- beat 2: phone. Thickness is a stack of full-silhouette layers 1px
   apart, NOT four edge strips. Strips are rectangles and cannot follow a
   border-radius, so they left visible notches at the rounded corners; every
   layer here is the same rounded rect, so the silhouette is correct at any
   angle and the corners are clean. --- */
.phone-rig{
  position:absolute; inset:0;
  transform-style:preserve-3d; -webkit-transform-style:preserve-3d;
  transform: rotateX(-12deg);
}
.phone-box{
  position:absolute; top:16px; left:50%; width:84px; height:170px; margin-left:-42px;
  transform-style:preserve-3d; -webkit-transform-style:preserve-3d;
}
.ph-layer, .ph-front{
  position:absolute; inset:0; border-radius:14px;
}
.ph-layer{ background: linear-gradient(120deg, #3a3d42, #202226); }
.ph-layer:first-child{ background: linear-gradient(200deg, #2b2d31, #161719); }
.ph-layer:nth-child(1){ transform: translateZ(-3.5px); }
.ph-layer:nth-child(2){ transform: translateZ(-2.5px); }
.ph-layer:nth-child(3){ transform: translateZ(-1.5px); }
.ph-layer:nth-child(4){ transform: translateZ(-0.5px); }
.ph-layer:nth-child(5){ transform: translateZ(0.5px); }
.ph-layer:nth-child(6){ transform: translateZ(1.5px); }
.ph-layer:nth-child(7){ transform: translateZ(2.5px); }
.ph-layer:nth-child(8){ transform: translateZ(3.5px); }
.ph-front{
  transform: translateZ(4.5px);
  background:#17181a; box-shadow: inset 0 0 0 1px #313338;
}
.phone-screen{
  position:absolute; inset:5px; border-radius:10px; overflow:hidden;
  background:#FAFAF8; padding:9px 8px; display:flex; flex-direction:column; gap:9px;
}
.rev-item{ display:flex; flex-direction:column; gap:5px; }
.rev-item.dim{ opacity:0.42; }
.rev-head{ display:flex; align-items:center; gap:5px; }
.rev-avatar{ width:13px; height:13px; border-radius:50%; background:#D8D4CE; flex:none; }
.rev-bar{ display:block; height:4px; border-radius:2px; background:#E4DFDA; }
.rev-bar.w-name{ width:26px; }
.rev-bar.w-short{ width:58%; }
.rev-stars{ display:flex; gap:1.5px; color:var(--star); }
.rev-stars svg{ width:9px; height:9px; }
.rev-chip{
  margin-top:auto; height:14px; border-radius:7px; background:var(--mint);
  animation: rev-pop 2.8s ease-in-out infinite;
}
@keyframes rev-pop{
  0%, 20%{ opacity:0; transform: scale(0.6); }
  36%, 85%{ opacity:1; transform: scale(1); }
  100%{ opacity:0; transform: scale(1); }
}

/* --- beat 3: the Google-review NFC plate ERT sells. Square adhesive acrylic
   (3M-backed, sticks to a counter -- no stand), blue header with the wave
   divider, then tap-or-scan in two columns. Same layered extrusion as the
   phone so the rounded silhouette stays correct through the turn.
   The Google logo is deliberately NOT reproduced -- the header carries a
   plain wordmark lockup instead. --- */
.tag-rig{
  position:absolute; inset:0;
  transform-style:preserve-3d; -webkit-transform-style:preserve-3d;
  transform: rotateX(-11deg);
}
.gstand{
  position:absolute; top:56px; left:50%; width:130px; height:130px; margin-left:-65px;
  transform-style:preserve-3d; -webkit-transform-style:preserve-3d;
}
.gs-layer, .gs-front{ position:absolute; inset:0; border-radius:11px; }
.gs-layer{ background: linear-gradient(120deg, #EAF3EE, #C9DAD3); }
.gs-layer:first-child{ background: linear-gradient(200deg, #FDFEFD, #E4EBE7); }
.gs-layer:nth-child(1){ transform: translateZ(-3px); }
.gs-layer:nth-child(2){ transform: translateZ(-2px); }
.gs-layer:nth-child(3){ transform: translateZ(-1px); }
.gs-layer:nth-child(4){ transform: translateZ(0px); }
.gs-layer:nth-child(5){ transform: translateZ(1px); }
.gs-layer:nth-child(6){ transform: translateZ(2px); }
.gs-front{
  transform: translateZ(3.5px);
  background:#FFFFFF; overflow:hidden;
  box-shadow: inset 0 0 0 1px rgba(20,20,19,0.10);
}
.gs-bg{ position:absolute; inset:0; width:100%; height:100%; }
/* wordmark lockup, not the Google logo -- the mark itself is deliberately not
   reproduced. Two lines, so "Google" carries the weight on its own. */
.gs-head{
  position:absolute; top:22px; left:8px; right:8px;
  display:flex; flex-direction:column; align-items:center; gap:1px; color:#fff;
}
.gs-eyebrow{
  font-family: var(--body); font-weight:500; font-size:7px; opacity:0.92;
}
.gs-wordmark{
  font-family: var(--display); font-weight:700; font-size:20px;
  letter-spacing:-0.035em; line-height:1.05;
}
.gs-body{
  position:absolute; left:6px; right:6px; top:72px;
  display:flex; align-items:center; justify-content:center; gap:5px;
}
.gs-col{ display:flex; flex-direction:column; align-items:center; gap:4px; flex:1; color:var(--ink); }
.gs-tapicon{ width:34px; height:23px; }
/* a real QR -- it encodes https://everythingromatech.com. At hero size the
   modules are about a pixel across, so it takes a zoom to scan, which is
   rather the point of an easter egg. */
.gs-qr{ width:36px; height:36px; color: var(--ink); }
.gs-cap{
  font-family: var(--body); font-weight:700; font-size:4.6px; letter-spacing:0.04em;
  text-transform:uppercase; color:#2E6BD8; text-align:center; line-height:1.1;
}
.gs-or{
  font-family: var(--body); font-weight:700; font-size:5px; color:var(--muted);
  border-left:1px solid #D8DDE4; border-right:1px solid #D8DDE4; padding:0 4px;
  align-self:stretch; display:flex; align-items:center;
}
.nfc-ripple{
  position:absolute; top:62px; left:50%; width:118px; height:118px; margin-left:-59px;
  border-radius:16px; border:1.5px solid var(--mint); opacity:0;
  animation: nfc-ripple 2.4s ease-out infinite;
}
.nfc-ripple.r2{ animation-delay: 0.8s; }
.nfc-ripple.r3{ animation-delay: 1.6s; }
@keyframes nfc-ripple{
  0%{ transform: scale(1); opacity:0; }
  15%{ opacity:0.32; }
  100%{ transform: scale(1.5); opacity:0; }
}

/* Idled while scrolled out of view by the IntersectionObserver in site.js. */
.hero-mark.is-paused *, .strip.is-paused *{ animation-play-state: paused; }

/* ---------- SOCIAL STRIP (news ticker) ---------- */
.strip{
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 26px 0; overflow: hidden;
}
/* two identical sets side by side; translating by exactly -50% moves the
   track by one whole set, so the wrap lands on identical content and the
   loop is invisible. Same trick as the code rain's doubled glyph strings. */
.strip-track{
  display:flex; width:max-content;
  animation: strip-ticker 20s linear infinite;
  will-change: transform;
}
.strip-set{
  display:flex; align-items:center; gap:30px; padding-right:30px;
  font-family: var(--mono); font-size: 0.82rem; color: var(--muted);
  letter-spacing: 0.04em; white-space:nowrap;
}
.strip-sep{ width:5px; height:5px; border-radius:50%; background:var(--mint); opacity:0.55; flex:none; }
@keyframes strip-ticker{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
/* each label still brightens as its object swings to the front -- the ticker
   carries it past while it is lit. Beats 2 and 3 are -24s and -12s because
   the ring turns negative, so +120deg arrives second. */
.strip-set span[data-beat]{ animation: strip-beat 36s linear infinite; }
.strip-set span[data-beat="1"]{ animation-delay: calc(var(--stage-shift) - 0s); }
.strip-set span[data-beat="2"]{ animation-delay: calc(var(--stage-shift) - 24s); }
.strip-set span[data-beat="3"]{ animation-delay: calc(var(--stage-shift) - 12s); }
@keyframes strip-beat{
  0%{ color: var(--ink); }
  14%, 86%{ color: var(--muted); }
  100%{ color: var(--ink); }
}

/* ---------- SECTIONS ---------- */
.section{ padding: 110px 0; }
.section-head{ max-width: 620px; margin-bottom: 56px; }
.section-head h2{ font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin-top: 14px; font-weight: 600; }
.section-head p{ color: var(--ink-dim); margin-top: 14px; font-size: 1.02rem; }

/* ---------- SERVICE GRID (individually-carded, not a hairline-seam grid) ---------- */
.service-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 980px){ .service-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .service-grid{ grid-template-columns: 1fr; } }
.service-grid.cols-2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 600px){ .service-grid.cols-2{ grid-template-columns: 1fr; } }
.service-grid.cols-3{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px){ .service-grid.cols-3{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .service-grid.cols-3{ grid-template-columns: 1fr; } }
.service-grid.bento{ grid-template-columns: 1.4fr 1fr; grid-auto-rows: minmax(0, 1fr); }
.service-grid.bento .service-card.featured{ grid-row: 1 / span 2; }
@media (max-width: 900px){
  .service-grid.bento{ grid-template-columns: 1fr; }
  .service-grid.bento .service-card.featured{ grid-row: auto; }
}
.service-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 34px 26px;
  position: relative;
  overflow: hidden;
  --mx: 50%; --my: 0%;
  transition: background .25s ease, box-shadow .25s ease;
}
button.service-card{ border:0; margin:0; width:100%; text-align:left; font-family:inherit; color:inherit; cursor:pointer; border:1px solid var(--line); }
.service-card::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(220px circle at var(--mx) var(--my), rgba(20,20,19,0.04), transparent 70%);
  opacity:0; transition:opacity .35s ease;
  pointer-events:none;
}
.service-card:hover{ background: var(--surface-2); box-shadow: var(--shadow-sm); }
.service-card:hover::before{ opacity:1; }
.service-card.featured{
  background: linear-gradient(155deg, var(--surface-2), var(--surface));
  display: flex;
  flex-direction: column;
}
.service-card.featured::after{
  content:""; position:absolute; right:-90px; bottom:-90px;
  width:280px; height:280px; border-radius:50%;
  background: var(--ink); opacity:0.04; pointer-events:none;
}
.service-card.featured p{ max-width: 40ch; }
.service-card.featured .service-more{ margin-top: auto; padding-top: 24px; }
.service-tag{ font-family: var(--mono); font-size: 0.7rem; color: var(--ink-dim); letter-spacing: 0.1em; position:relative; }
.service-icon{
  width: 44px; height: 44px; border-radius: var(--radius-full);
  background: var(--bg-1);
  border: 1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  margin: 18px 0 20px; position:relative;
}
.service-card.featured .service-icon{ width: 56px; height: 56px; }
.service-card.featured .service-icon svg{ width: 28px; height: 28px; }
.service-icon svg{ width: 20px; height: 20px; stroke: var(--ink); }
.service-photo{
  width: 44px; height: 44px; border-radius: var(--radius-full);
  border: 1px solid var(--line);
  margin: 18px 0 20px; position:relative;
}
.service-card.featured .service-photo{ width: 56px; height: 56px; }
.service-photo img{ width:100%; height:100%; border-radius:var(--radius-full); object-fit:cover; display:block; filter: saturate(0.92) contrast(1.03); }
.service-photo::after{
  content:""; position:absolute; right:-2px; bottom:-2px; width:22%; height:22%; min-width:8px; min-height:8px;
  border-radius:50%; background: var(--mint); border: 2px solid var(--surface);
}
.service-card h3{ font-size: 1.12rem; font-weight: 600; margin-bottom: 10px; position:relative; }
.service-card.featured h3{ font-size: 1.4rem; }
.service-card p{ color: var(--ink-dim); font-size: 0.92rem; position:relative; }

/* ---------- NFC SPOTLIGHT ---------- */
.spotlight{
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 70px 60px;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 900px){ .spotlight{ grid-template-columns: 1fr; padding: 44px 28px; } }
.spotlight h2{ font-size: clamp(1.8rem, 3vw, 2.3rem); margin: 16px 0 18px; font-weight: 600; }
.spotlight > div:first-child p{ color: var(--ink-dim); margin-bottom: 26px; }

.flow{ display:flex; flex-direction:column; gap: 0; }
.flow-step{ display:flex; gap: 20px; padding: 20px 0; border-top: 1px solid var(--line); }
.flow-step:first-child{ border-top: none; }
.flow-num{ font-family: var(--mono); font-size: 0.85rem; color: var(--ink-dim); padding-top: 2px; flex-shrink: 0; width: 28px; }
.flow-step h3{ font-size: 1rem; font-weight: 600; margin-bottom: 6px; }
.flow-step p{ color: var(--ink-dim); font-size: 0.9rem; }

/* ---------- FULL-BLEED FLOW BREAK ---------- */
/* true viewport-width bleed, breaks out of .wrap regardless of its own padding/max-width */
.flow-break{
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  margin-top: 60px; margin-bottom: 60px;
  height: 420px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(20,20,19,.1), inset 0 -1px 0 rgba(20,20,19,.1);
}
.flow-break img{ width:100%; height:100%; object-fit:cover; display:block; filter: saturate(1.1) contrast(1.25) brightness(0.78); }
@media (max-width: 700px){ .flow-break{ height: 260px; margin-top: 40px; margin-bottom: 40px; } }

/* ---------- FLOW-BREAK CTA (full-bleed photo, CTA content overlaid) ---------- */
.flow-break-cta{
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  margin-top: 60px; margin-bottom: 60px;
  height: 560px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.flow-break-cta img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; filter: saturate(1.1) contrast(1.25) brightness(0.78); }
.flow-break-cta::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(20,20,19,.35) 0%, rgba(20,20,19,.58) 100%);
}
.flow-break-cta-content{ position:relative; z-index:1; max-width:640px; padding:0 24px; }
.flow-break-cta h2{ color: var(--bg); font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 600; margin-bottom: 30px; }
.flow-break-cta .btn-primary{ background: var(--mint); color: var(--ink); }
@media (max-width: 700px){ .flow-break-cta{ height: 440px; margin-top: 40px; margin-bottom: 40px; } }

/* ---------- CTA BANNER ---------- */
.cta-banner{
  border-radius: var(--radius-xl);
  background: var(--ink);
  color: var(--bg);
  padding: 80px 50px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-banner::before{
  content:""; position:absolute; right:-70px; bottom:-90px;
  width:360px; height:340px;
  background: var(--bg);
  opacity:0.05;
  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
  pointer-events:none;
}
.cta-banner > *{ position: relative; z-index: 1; }
.cta-banner h2{ color: var(--bg); font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 600; margin: 16px 0 30px; max-width: 640px; margin-left:auto; margin-right:auto; }
.cta-banner .eyebrow{ color: var(--mint); }
/* .cta-banner.compact is a section-closing CTA on eight other pages, where the
   h2 IS the message -- leave it alone. Only the disclosed contact panel needs
   to be small, so those overrides are scoped to it by id. */
.cta-banner.compact{ padding: 56px 40px; }
/* the disclosed form panel: it sits directly under the three contact choices,
   so it gets the grid's own 20px gap rather than butting against the cards,
   and a heading sized for a form card instead of a section closer. */
#contact-form-wrap{
  margin-top: 20px;
  padding: 38px 32px;
  scroll-margin-top: calc(var(--nav-offset) + 16px);
}
#contact-form-wrap h2{ font-size: clamp(1.2rem, 2.2vw, 1.5rem); margin: 0 0 18px; }
.cta-banner .btn-primary{ background: var(--mint); color: var(--ink); }
.cta-banner .btn-ghost{ border-color: rgba(245,243,239,0.3); color: var(--bg); }
.cta-banner .btn-ghost:hover{ border-color: var(--mint); color: var(--mint); }

/* ---------- CONTENT / DOC PAGES ---------- */
.page-hero{
  padding: 64px 0 20px;
  display:grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 48px;
  align-items:start;
}
@media (max-width: 860px){ .page-hero{ grid-template-columns: 1fr; } }
.page-hero h1{
  font-size: clamp(2.1rem, 4.4vw, 3.1rem);
  font-weight: 700; line-height: 1.08; margin: 16px 0 18px;
}
.page-hero .lead{ font-size: 1.06rem; color: var(--ink-dim); max-width: 52ch; }
.updated{ font-family: var(--mono); font-size: 0.78rem; color: var(--muted); margin-top:10px; display:block; }

.side-card{
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  align-self:start;
}
.side-card-photo{
  width: 88px; height: 88px; border-radius: var(--radius-full);
  border: 1px solid var(--line); position:relative;
  margin: 0 auto 18px;
}
.side-card-photo img{ width:100%; height:100%; border-radius:var(--radius-full); object-fit:cover; display:block; filter: saturate(0.92) contrast(1.03); }
.side-card-photo::after{
  content:""; position:absolute; right:-2px; bottom:-2px; width:22%; height:22%; min-width:9px; min-height:9px;
  border-radius:50%; background: var(--mint); border: 2px solid var(--bg-1);
}
.side-card-icon{
  width: 88px; height: 88px; border-radius: var(--radius-full);
  background: var(--bg-1); border: 1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  margin: 0 auto 18px;
}
.side-card-icon svg{ width: 36px; height: 36px; stroke: var(--ink); }
.side-card .side-label{ font-family:var(--body); font-weight:600; font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.side-card ul{ list-style:none; display:flex; flex-direction:column; gap:12px; }
.side-card li{ display:flex; gap:10px; font-size:0.92rem; color:var(--ink-dim); }
.side-card li::before{ content:"→"; color:var(--ink-dim); flex-shrink:0; }

.docpage{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap: 56px;
  padding: 20px 0 100px;
  align-items:start;
}
@media (max-width: 860px){ .docpage{ grid-template-columns: 1fr; } }
.doc-sidebar{
  position: sticky; top: var(--nav-offset);
  display:flex; flex-direction:column; gap:18px;
}
@media (max-width: 860px){ .doc-sidebar{ position:static; border-bottom:1px solid var(--line); padding-bottom:20px; } }
.doc-sidebar .side-label{ font-family:var(--body); font-weight:600; font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); }
.toc{ list-style:none; display:flex; flex-direction:column; gap:2px; border-left: 1px solid var(--line); }
.toc a{
  display:block; padding:7px 0 7px 16px; font-size:0.86rem; color:var(--muted);
  border-left: 2px solid transparent; margin-left:-1px; transition:color .2s ease, border-color .2s ease;
}
.toc a:hover{ color:var(--ink-dim); }
.toc a.active{ color: var(--ink); border-left-color: var(--mint); }

.doc-content{ max-width: var(--measure); }
.doc-content h1{ font-size: clamp(2rem,4vw,2.6rem); margin-bottom:8px; }
.doc-content h2{ font-family: var(--display); font-size: 1.3rem; margin: 44px 0 14px; color: var(--ink); scroll-margin-top: var(--nav-offset); }
.doc-content p, .doc-content li{ color: var(--ink-dim); font-size: 0.98rem; margin-bottom: 12px; }
.doc-content ul{ padding-left: 20px; margin-bottom: 16px; }
.doc-content ol{ padding-left: 20px; margin-bottom: 16px; }
.doc-content strong{ color: var(--ink); }
.doc-content table{ width:100%; border-collapse:collapse; margin:16px 0 24px; font-size:0.88rem; }
.doc-content th{ color:var(--ink); text-align:left; font-family:var(--body); font-weight:600; font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; padding:10px 12px; border-bottom:1px solid var(--line); }
.doc-content td{ padding:12px; border-bottom:1px solid var(--line); color:var(--ink-dim); }

.faq-group{ margin-bottom: 40px; }
.faq-group h2{ font-family: var(--display); font-size: 1.3rem; margin-bottom: 14px; color: var(--ink); }
.faq-list{ display:flex; flex-direction:column; gap:10px; }
.faq-item{
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-lg);
  overflow:hidden;
}
.faq-item summary{
  cursor:pointer; list-style:none; padding:16px 20px; font-weight:600; font-size:0.98rem;
  color: var(--ink); display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; flex-shrink:0; color: var(--ink); font-family: var(--display); font-size:1.2rem;
  transition: transform .2s ease;
}
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-item .faq-answer{ padding: 0 20px 18px; color: var(--ink-dim); font-size:0.95rem; line-height:1.6; }

.note{
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 16px 20px; font-family: var(--body); font-size: 0.88rem;
  color: var(--ink-dim); margin: 20px 0;
}

.check-list{ list-style:none; padding-left:0 !important; display:flex; flex-direction:column; gap:14px; margin: 22px 0 28px; }
.check-list li{
  display:flex; gap:14px; align-items:flex-start;
  padding: 16px 18px; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-lg);
}
.check-list li::before{
  content:""; flex-shrink:0; margin-top:3px; width:18px; height:18px; border-radius:6px;
  background: rgba(47,227,143,0.14);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232FE38F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:11px;
}

.step-list{ display:flex; flex-direction:column; gap:0; margin: 22px 0 28px; counter-reset: step; }
.step-list li{
  list-style:none; display:flex; gap:20px; padding: 20px 2px; border-top: 1px solid var(--line);
}
.step-list li:first-child{ border-top:none; }
.step-list li::before{
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--mono); font-size:0.85rem; color: var(--ink-dim); flex-shrink:0; width:28px; padding-top:2px;
}

.back-link{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:56px; color: var(--ink-dim); font-size: 0.9rem;
}
.back-link:hover{ color: var(--ink); }

/* ---------- 404 ---------- */
.error-hero{
  min-height: calc(100dvh - 90px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding: 60px 24px;
}
.error-code{
  font-family: var(--display); font-weight: 700; font-size: clamp(4rem,16vw,7rem);
  line-height: 1; color: var(--ink);
}
.error-hero h1{ font-size: clamp(1.4rem,3.5vw,1.9rem); margin: 18px 0 12px; }
.error-hero p{ color: var(--ink-dim); max-width: 40ch; margin-bottom: 34px; }
.error-links{ display:flex; gap:22px; flex-wrap:wrap; justify-content:center; margin-top:30px; font-size:0.88rem; }
.error-links a{ color: var(--ink-dim); }
.error-links a:hover{ color: var(--ink); }

/* ---------- FOOTER ---------- */
footer.site-footer{
  background: var(--ink); color: var(--bg);
  padding: 56px 0 40px; position:relative; z-index:1;
}
footer.site-footer .logo .brand-text{ color: var(--bg); }
.footer-grid{ display:grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 32px; margin-bottom: 50px; }
@media (max-width: 760px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
.footer-grid h3{ font-family: var(--body); font-weight:600; font-size: 0.72rem; color: rgba(245,243,239,0.55); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 16px; }
.footer-grid ul{ list-style:none; display:flex; flex-direction:column; gap: 10px; }
/* inline-block + vertical padding takes these from 18px to ~30px tall, clearing the
   24x24 minimum in WCAG 2.2 SC 2.5.8 without relying on the spacing exception */
.footer-grid a{ display:inline-block; padding: 6px 0; color: rgba(245,243,239,0.75); font-size: 0.92rem; transition: color .2s ease; }
.footer-grid a:hover{ color: var(--mint); }
.footer-bottom{
  display:flex; justify-content: space-between; align-items:center; flex-wrap: wrap; gap: 14px;
  padding-top: 26px; border-top: 1px solid rgba(245,243,239,0.15);
  font-size: 0.82rem; color: rgba(245,243,239,0.5);
}

/* ---------- reveal-on-scroll ---------- */
.reveal{ opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .ripple, .phone{ animation: none; opacity: 0.3; }
  .review-card{ animation: none; opacity: 1; transform: translate(-50%, -78px) scale(1); }
  /* stop the ring, but keep each item's place on it -- transform:none would
     collapse all three into the centre on top of each other */
  .carousel{ animation: none; }
  .stage-shadow{ animation: none; transform: translateX(-50%); }
  .strip-track{ animation: none; }
  .nfc-ripple, .rev-chip{ animation: none; opacity: 1; transform: none; }
  .strip-set span[data-beat]{ animation: none; }
  .rain-col{ animation: none; transform: translateY(-30%); }
  .reveal{ opacity: 1; transform: none; transition: none; }
}