/* ==========================================================================
   RomPC — styles
   Self-contained: no Tailwind, no framework. The page used to depend on the
   Tailwind CDN compiling classes at runtime; if that request was slow or
   blocked, the layout collapsed. Everything the page needs is now here.

   Palette is lifted from the brand files themselves (the logo and banner sit
   on near-black with one teal), so the site and the ad read as one identity.

   Direction: every offset is a CSS logical property, so flipping <html dir>
   mirrors the layout. Never add left/right/margin-left/text-align:left here.

   Motion: transform/opacity only, and all of it is switched off under
   prefers-reduced-motion.
   ========================================================================== */

:root {
  --void: #07090C;          /* page background, the brand's own black */
  --deep: #0C1015;          /* alternating sections */
  --panel: rgba(18, 23, 30, .62);
  --panel-solid: #11161D;
  --line: rgba(232, 240, 245, .08);
  --line-strong: rgba(232, 240, 245, .16);

  --teal: #00ADB5;
  --teal-hi: #3FD3DA;
  --teal-glow: rgba(0, 173, 181, .45);

  --text: #EEF2F5;
  --dim: #A3AEBA;
  --faint: #6E7884;
  --err: #F08A93;

  --radius-lg: 24px;
  --radius: 16px;
  --radius-sm: 10px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --font-display: "Rubik", "Heebo", system-ui, sans-serif;
  --font-body: "Heebo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --header-h: 76px;
  --shadow-deep: 0 40px 100px -40px rgba(0, 0, 0, .9), 0 18px 40px -24px rgba(0, 0, 0, .7);
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  color-scheme: dark;
}
/* Ultrawide and 4K monitors: scale the whole type system up a notch so the
   page does not read as a narrow strip of small text in the middle. */
@media (min-width: 1920px) { html { font-size: 17px; } }
@media (min-width: 2560px) { html { font-size: 19px; } }

body {
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--void);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; }
p { text-wrap: pretty; }

::selection { background: rgba(0, 173, 181, .35); color: #fff; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb { background: #232A33; border-radius: 999px; border: 2px solid var(--void); }
::-webkit-scrollbar-thumb:hover { background: var(--teal); }

:focus-visible {
  outline: 2px solid var(--teal-hi);
  outline-offset: 3px;
  border-radius: 6px;
}

.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed;
  inset-block-start: 10px;
  inset-inline-start: 10px;
  z-index: 100;
  padding: .6rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--teal);
  color: var(--void);
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform .25s var(--ease);
}
.skip-link:focus { transform: none; }

.wrap {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: max(1.25rem, env(safe-area-inset-left), env(safe-area-inset-right));
}
@media (min-width: 768px) { .wrap { padding-inline: 2.5rem; } }
@media (min-width: 1680px) { .wrap { max-width: 1360px; } }

/* ======================================================= scroll progress */
#progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  z-index: 70;
  background: linear-gradient(90deg, var(--teal), var(--teal-hi));
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
  box-shadow: 0 0 12px var(--teal-glow);
  will-change: transform;
}
[dir="rtl"] #progress { transform-origin: right center; }

/* ================================================================ header */
#site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 60;
  border-block-end: 1px solid transparent;
  transition: background-color .4s var(--ease), border-color .4s var(--ease),
              backdrop-filter .4s var(--ease);
}
#site-header.scrolled,
#site-header.menu-open {
  background: rgba(9, 12, 16, .72);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-block-end-color: var(--line);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--header-h);
}
.brand img { height: 34px; width: auto; }
@media (min-width: 1024px) { .brand img { height: 38px; } }

.nav-links {
  display: none;
  align-items: center;
  gap: 2.25rem;
  font-size: .9375rem;
  color: var(--dim);
}
@media (min-width: 900px) { .nav-links { display: flex; } }

.nav-link {
  position: relative;
  padding-block: .35rem;
  transition: color .25s var(--ease);
}
.nav-link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -2px;
  height: 2px;
  border-radius: 2px;
  background: var(--teal);
  transform: scaleX(0);
  transition: transform .4s var(--ease);
}
.nav-link:hover { color: var(--text); }
.nav-link:hover::after,
.nav-link.active::after { transform: scaleX(1); }
.nav-link.active { color: var(--text); }

.nav-actions { display: flex; align-items: center; gap: .5rem; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  color: var(--dim);
  background: rgba(255, 255, 255, .03);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.icon-btn svg { width: 1.1rem; height: 1.1rem; }
.icon-btn:hover {
  color: var(--teal-hi);
  background: rgba(0, 173, 181, .08);
  box-shadow: inset 0 0 0 1px rgba(0, 173, 181, .6);
}
.menu-btn { display: grid; }
@media (min-width: 900px) { .menu-btn { display: none; } }
/* on a phone the header icons crowd the logo; the floating button and the
   menu already cover WhatsApp and phone there */
@media (max-width: 479px) { #header-wa, #header-tel { display: none !important; } }

.lang-btn {
  min-width: 2.75rem;
  height: 2.5rem;
  padding-inline: .8rem;
  border-radius: 12px;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--dim);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.lang-btn:hover {
  color: var(--void);
  background: var(--teal);
  box-shadow: inset 0 0 0 1px var(--teal);
}

.mobile-menu { padding-block: .25rem 1.25rem; }
.mobile-menu ul { display: grid; gap: .25rem; }
.mobile-menu a {
  display: block;
  padding: .85rem 1rem;
  border-radius: 12px;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--text);
  transition: background-color .2s var(--ease);
}
.mobile-menu a:hover { background: rgba(255, 255, 255, .05); }
.mobile-menu a.is-cta {
  margin-block-start: .5rem;
  background: var(--teal);
  color: var(--void);
  font-weight: 700;
  text-align: center;
}
@media (min-width: 900px) { .mobile-menu { display: none !important; } }

/* =============================================================== buttons */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 3.25rem;
  padding: .85rem 1.75rem;
  border-radius: 14px;
  overflow: hidden;
  isolation: isolate;
  background: var(--teal);
  color: #031416;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 14px 34px -16px var(--teal-glow);
  transition: box-shadow .35s var(--ease), color .3s var(--ease), background-color .3s var(--ease);
  will-change: transform;
}
.btn > * { position: relative; z-index: 2; }
.btn svg { width: 1.15rem; height: 1.15rem; flex-shrink: 0; }

/* light sweep across the button on hover */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, .35) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease);
}
.btn:hover::before { transform: translateX(120%); }
.btn:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 20px 46px -16px rgba(0, 173, 181, .8); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn-ghost {
  background: rgba(255, 255, 255, .04);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn-ghost::before { background: linear-gradient(110deg, transparent 20%, rgba(0, 173, 181, .22) 50%, transparent 80%); }
.btn-ghost:hover {
  color: var(--teal-hi);
  box-shadow: inset 0 0 0 1px rgba(0, 173, 181, .6), 0 18px 40px -22px var(--teal-glow);
}

.btn-lg { min-height: 3.6rem; font-size: 1.0625rem; }
.btn-block { width: 100%; }

.spinner { width: 1.1rem; height: 1.1rem; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ================================================================== hero */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: calc(var(--header-h) + 2.5rem) 4rem;
}
@media (min-width: 960px) {
  .hero {
    display: flex;
    align-items: center;
    min-height: min(100svh, 1000px);
    padding-block: calc(var(--header-h) + 2rem) 5rem;
  }
}

/* The circuit art from the banner. It sits on the side opposite the copy and
   fades into the black, so the text always lands on a clean background. */
.hero-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.hero-art img {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 70%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .55;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 45%), linear-gradient(to bottom, #000 60%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 45%), linear-gradient(to bottom, #000 60%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
/* the art is drawn facing right; in RTL the copy is on the right, so the art
   moves left and is mirrored to keep its fade pointing toward the text */
[dir="rtl"] .hero-art img { transform: scaleX(-1); }

.hero-art::after {
  content: "";
  position: absolute;
  inset-block-start: 10%;
  inset-inline-end: 12%;
  width: 46vmax;
  height: 46vmax;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 173, 181, .18), transparent 62%);
  filter: blur(20px);
}
@media (max-width: 959px) {
  .hero-art img {
    width: 100%;
    height: 70%;
    opacity: .28;
    -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
  }
  .hero-art::after { inset-inline-end: -20%; inset-block-start: 30%; }
}

.hero-grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 960px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: clamp(3rem, 6vw, 6.5rem);
  }
}

/* The headline is the page's one typographic gesture: big, heavy, quiet
   around it. No badge, no icon row; the hero carries a single idea. */
.hero-title {
  max-width: 15ch;
  font-size: clamp(2.3rem, 4.6vw + .6rem, 4.1rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.025em;
  text-shadow: 0 0 42px rgba(0, 173, 181, .22);
}

.hero-sub {
  margin-block-start: 1.5rem;
  max-width: 27rem;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.7;
  color: var(--dim);
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-block-start: 2.25rem;
}
@media (max-width: 479px) {
  .hero-ctas .btn { flex: 1 1 100%; }
}

/* ---- hero entrance: one orchestrated sequence, pure CSS ---------------- */
.hero-copy > * {
  animation: rise .9s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 110ms + 120ms);
}
.reel { animation: reel-in 1.3s var(--ease-out) .35s both; }
@keyframes rise {
  from { opacity: 0; transform: translateY(22px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes reel-in {
  from { opacity: 0; transform: translateY(30px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* ================================================================== reel */
/* A glass "device" holding the ad. 1:1 at every size: the ad's captions and
   logo are burned into the frame, so the panel never crops it. */
.reel {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
}
@media (min-width: 1680px) { .reel { max-width: 620px; } }

.reel::before {
  /* the glow the panel sits in */
  content: "";
  position: absolute;
  inset: 8% 6% -4%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 173, 181, .42), transparent);
  filter: blur(48px);
  opacity: .8;
  transition: opacity .8s var(--ease);
}
.reel.is-playing::before { opacity: 1; }

.reel-frame {
  position: relative;
  aspect-ratio: 1 / 1;
  padding: 10px;
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .02) 40%, rgba(0, 173, 181, .10));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10), var(--shadow-deep);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.reel-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(var(--radius-lg) - 8px);
  background: #000;
  cursor: pointer;
}

.reel-play {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  display: grid;
  place-items: center;
  width: 4.75rem;
  height: 4.75rem;
  margin-block-start: -2.375rem;
  margin-inline-start: -2.375rem;
  border-radius: 50%;
  color: #fff;
  background: rgba(7, 9, 12, .45);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 20px 50px -10px rgba(0, 0, 0, .7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), background-color .25s var(--ease);
}
.reel-play svg { width: 1.9rem; height: 1.9rem; margin-inline-start: .2rem; }
[dir="rtl"] .reel-play svg { margin-inline-start: 0; margin-inline-end: .2rem; transform: none; }
/* Every hover effect on the player is limited to real mouse devices. On a
   phone a tap leaves a "sticky" :hover behind until the visitor taps
   somewhere else, which kept the play button stuck over the playing video. */
@media (hover: hover) and (pointer: fine) {
  .reel-play:hover { background: rgba(0, 173, 181, .85); color: #031416; }
}
/* Once playing, the big button gets out of the way. With a mouse, hovering
   the video brings it back so it can be paused; keyboard focus does too.
   On touch, the visitor pauses by tapping the video itself (main.js), and
   the button reappears because the video is then paused. */
.reel.is-playing .reel-play { opacity: 0; transform: scale(.85); pointer-events: none; }
.reel.is-playing .reel-play:focus-visible { opacity: 1; transform: none; pointer-events: auto; }
@media (hover: hover) and (pointer: fine) {
  .reel.is-playing .reel-frame:hover .reel-play { opacity: 1; transform: none; pointer-events: auto; }
}

.reel-sound {
  position: absolute;
  inset-block-end: 22px;
  inset-inline-end: 22px;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  color: #fff;
  background: rgba(7, 9, 12, .5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.reel-sound svg { width: 1.15rem; height: 1.15rem; }
@media (hover: hover) and (pointer: fine) {
  .reel-sound:hover { background: var(--teal); color: #031416; }
}
.reel-sound .ico-sound { display: none; }
.reel.has-sound .reel-sound .ico-sound { display: block; }
.reel.has-sound .reel-sound .ico-muted { display: none; }

/* =============================================================== marquee */
.marquee {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding-block: 1.15rem;
  background: rgba(255, 255, 255, .012);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: slide 42s linear infinite;
  will-change: transform;
}
/* In RTL the track is anchored to the right edge and extends left, so the
   loop has to travel +50% (toward the clone on the left). Reusing the LTR
   -50% keyframe with animation-direction:reverse slid the towns off-screen
   and left the strip blank. */
[dir="rtl"] .marquee-track { animation-name: slide-rtl; }
.marquee:hover .marquee-track,
.marquee.is-idle .marquee-track { animation-play-state: paused; }
@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes slide-rtl {
  from { transform: translateX(0); }
  to   { transform: translateX(50%); }
}
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
  padding-inline-end: 2.5rem;
  font-size: .95rem;
  color: var(--faint);
  white-space: nowrap;
}
.marquee-item::after {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--teal);
  opacity: .6;
}
@media (max-width: 640px) {
  .marquee { padding-block: .9rem; }
  .marquee-track { animation-duration: 28s; }
  .marquee-item { gap: 1.5rem; padding-inline-end: 1.5rem; font-size: .875rem; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-track { width: auto; flex-wrap: wrap; justify-content: center; row-gap: .5rem; }
  .marquee-item.is-clone { display: none; }
}

/* ============================================================== sections */
.section {
  position: relative;
  padding-block: clamp(4.5rem, 10vw, 8rem);
  /* clip, not hidden: the floating PCs bleed off the side, but the vertical
     axis must stay unclipped so card shadows are not cut off */
  overflow-x: clip;
}
.section > .wrap { position: relative; z-index: 1; }

/* ---- floating PCs ------------------------------------------------------
   A machine drifts beside each section, alternating sides down the page,
   and fades in while its section is on screen. Decorative only. main.js
   adds .lit (via IntersectionObserver) and the scroll drift. */
.section-pc {
  position: absolute;
  inset-block-start: 50%;
  z-index: 0;
  width: clamp(240px, 24vw, 400px);
  height: auto;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  filter: saturate(1.2) brightness(1.08) drop-shadow(0 30px 60px rgba(0, 0, 0, .6));
  transform: translate3d(0, -50%, 0);
  transition: opacity 1.4s var(--ease-out);
}
.section-pc-start { inset-inline-start: -9%; }
.section-pc-end   { inset-inline-end: -9%; }
.section-pc.lit   { opacity: .45; }
/* no JS: show them statically rather than never */
html:not(.js-on) .section-pc,
.reveal-failsafe .section-pc { opacity: .45; }

/* Wide monitors have empty gutters, so the machines can come in further. */
@media (min-width: 1680px) {
  .section-pc-start { inset-inline-start: -3%; }
  .section-pc-end   { inset-inline-end: -3%; }
}

/* On a phone/tablet there is no column to spare, so the machines move behind
   the text instead: smaller, bled further off the edge, dimmed and softly
   blurred so they read as texture rather than competing with the copy. */
@media (max-width: 1023px) {
  .section-pc {
    width: clamp(170px, 50vw, 290px);
    inset-block-start: 40%;
    filter: saturate(1.1) brightness(1.04) blur(1px);
  }
  .section-pc-start { inset-inline-start: -24%; }
  .section-pc-end   { inset-inline-end: -24%; }
  .section-pc.lit   { opacity: .18; }
}
@media (max-width: 380px) {
  .section-pc.lit { opacity: .13; }
}
.section-alt {
  background:
    radial-gradient(60rem 30rem at 85% 0%, rgba(0, 173, 181, .06), transparent 70%),
    var(--deep);
  border-block: 1px solid var(--line);
}

.sec-head { max-width: 40rem; }
.sec-head h2,
.about-story h2,
.contact-info h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 700;
}
.sec-head p {
  margin-block-start: .85rem;
  font-size: 1.125rem;
  color: var(--dim);
}
.lede {
  margin-block-start: 1rem;
  font-size: clamp(1.0625rem, 1.4vw, 1.2rem);
  color: var(--text);
}

/* ============================================================== services */
.svc-grid {
  display: grid;
  gap: 1.25rem;
  margin-block-start: 3rem;
}
@media (min-width: 700px) {
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the odd card out spans the row on tablets, image beside the text */
  .svc:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  .svc:last-child .svc-media { aspect-ratio: auto; height: 100%; min-height: 15rem; }
}
@media (min-width: 1024px) {
  .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  .svc:last-child { grid-column: auto; display: flex; }
  .svc:last-child .svc-media { aspect-ratio: 16 / 10; height: auto; min-height: 0; }
}

.svc {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
  box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -40px rgba(0, 0, 0, .9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform-style: preserve-3d;
  will-change: transform;
}
/* a light that follows the pointer across the glass */
.svc::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(0, 173, 181, .16), transparent 60%);
  opacity: 0;
  transition: opacity .45s var(--ease);
}
/* and a rim of light along the edge nearest the pointer */
.svc::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(63, 211, 218, .9), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.svc:hover::after,
.svc:hover::before { opacity: 1; }
.svc:hover { box-shadow: inset 0 0 0 1px rgba(0, 173, 181, .25), 0 40px 80px -36px rgba(0, 0, 0, .95), 0 20px 60px -30px rgba(0, 173, 181, .35); }

.svc-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.svc-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.85) brightness(.85);
  transform: scale(1.02);
  transition: transform 1.1s var(--ease), filter .6s var(--ease);
}
.svc-media::after {
  /* melts the photo into the glass body below it */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(12, 16, 21, .85));
}
.svc:hover .svc-media img {
  transform: scale(1.08);
  filter: saturate(1.05) brightness(1);
}

.svc-body { position: relative; z-index: 2; padding: 1.5rem 1.6rem 1.8rem; }
.svc h3 {
  font-size: 1.3rem;
  font-weight: 700;
  transition: color .3s var(--ease);
}
.svc:hover h3 { color: var(--teal-hi); }

.svc ul { display: grid; gap: .7rem; margin-block-start: 1.1rem; }
.svc li {
  position: relative;
  padding-inline-start: 1.25rem;
  font-size: .975rem;
  line-height: 1.55;
  color: var(--dim);
  transition: color .3s var(--ease);
}
.svc li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .62em;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--teal);
  transition: width .35s var(--ease), box-shadow .35s var(--ease);
}
.svc:hover li { color: var(--text); }
.svc:hover li::before { width: 12px; box-shadow: 0 0 10px var(--teal-glow); }

/* ================================================================= about */
.about-grid {
  display: grid;
  gap: 3rem;
  align-items: start;
}
@media (min-width: 960px) {
  .about-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 7vw, 7rem); }
}
.about-story p:not(.lede):not(.years) {
  margin-block-start: 1rem;
  max-width: 34rem;
  color: var(--dim);
  font-size: 1.0625rem;
}
.years {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  margin-block-start: 2.25rem;
  color: var(--dim);
}
.years b {
  font-family: var(--font-display);
  font-size: 3.25rem;
  font-weight: 800;
  line-height: 1;
  color: var(--teal-hi);
}

.values {
  display: grid;
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-deep);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
}
.values li {
  display: flex;
  gap: 1.1rem;
  padding: 1.6rem 1.6rem;
  transition: background-color .35s var(--ease);
}
.values li + li { border-block-start: 1px solid var(--line); }
.values li:hover { background: rgba(0, 173, 181, .04); }
.v-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 12px;
  color: var(--teal-hi);
  background: rgba(0, 173, 181, .1);
  box-shadow: inset 0 0 0 1px rgba(0, 173, 181, .28);
}
.v-icon svg { width: 1.3rem; height: 1.3rem; }
.values h3 { font-size: 1.125rem; }
.values p { margin-block-start: .3rem; color: var(--dim); font-size: .975rem; }

/* =============================================================== process */
.steps {
  position: relative;
  display: grid;
  gap: 2.25rem;
  margin-block-start: 3rem;
  counter-reset: step;
}
/* the line that joins the steps: vertical on a phone, horizontal on desktop */
.steps::before {
  content: "";
  position: absolute;
  inset-block: 1.5rem 1.5rem;
  inset-inline-start: 1.5rem;
  width: 1px;
  background: linear-gradient(180deg, var(--teal), rgba(0, 173, 181, .05));
}
@media (min-width: 860px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
  .steps::before {
    inset-block: 1.5rem auto;
    inset-inline: 1.5rem 1.5rem;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, var(--teal), rgba(0, 173, 181, .08));
  }
  [dir="rtl"] .steps::before { background: linear-gradient(270deg, var(--teal), rgba(0, 173, 181, .08)); }
}

.step {
  position: relative;
  padding-inline-start: 4.5rem;
}
@media (min-width: 860px) { .step { padding-inline-start: 0; padding-block-start: 4.75rem; } }

.step-num {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--teal-hi);
  background: var(--void);
  box-shadow: inset 0 0 0 1px rgba(0, 173, 181, .5), 0 0 0 6px var(--void), 0 0 30px -4px var(--teal-glow);
}
.step h3 { font-size: 1.25rem; padding-block-start: .6rem; }
@media (min-width: 860px) { .step h3 { padding-block-start: 0; } }
.step p { margin-block-start: .5rem; max-width: 22rem; color: var(--dim); }

/* =============================================================== contact */
.contact-grid {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 960px) {
  .contact-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(3rem, 6vw, 6rem); }
}
.contact-info .lede { color: var(--dim); }
.villages { color: var(--dim); font-size: .9375rem; line-height: 1.8; }

.info-list { display: grid; gap: 1.5rem; margin-block-start: 2.25rem; }
.info-list dt { font-size: .875rem; font-weight: 600; color: var(--faint); }
.info-list dd { margin-block-start: .3rem; color: var(--text); }
.direct { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.direct a:first-child {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: .01em;
  transition: color .2s var(--ease);
}
.direct a:first-child:hover { color: var(--teal-hi); }
.wa-link {
  display: inline-flex;
  align-items: center;
  padding: .4rem .9rem;
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 600;
  color: #7CF0A6;
  box-shadow: inset 0 0 0 1px rgba(37, 211, 102, .4);
  transition: background-color .2s var(--ease);
}
.wa-link:hover { background: rgba(37, 211, 102, .1); }

.form-card {
  position: relative;
  display: grid;
  gap: 1.4rem;
  padding: clamp(1.4rem, 4vw, 2.5rem);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-deep);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow: hidden;
}
/* a hairline that lights along the top edge once the card is on screen */
.form-card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--teal-hi), transparent);
  transform: scaleX(0);
  transition: transform 1.2s var(--ease) .3s;
}
.form-card.in::before,
.reveal-failsafe .form-card::before { transform: scaleX(1); }

.field-row { display: grid; gap: 1.4rem; }
@media (min-width: 600px) { .field-row { grid-template-columns: 1fr 1fr; } }

.field label {
  display: block;
  margin-block-end: .5rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--text);
  transition: color .25s var(--ease);
}
.field:focus-within label { color: var(--teal-hi); }

.field input,
.field textarea {
  width: 100%;
  padding: .95rem 1.05rem;
  border: 0;
  border-radius: 12px;
  background: rgba(7, 9, 12, .6);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--text);
  font: inherit;
  font-size: 1rem;           /* 16px keeps iOS from zooming on focus */
  transition: box-shadow .3s var(--ease), background-color .3s var(--ease);
}
.field textarea { line-height: 1.65; resize: vertical; min-height: 9rem; }
.field input::placeholder,
.field textarea::placeholder { color: #5E6873; }
.field input:hover,
.field textarea:hover { box-shadow: inset 0 0 0 1px rgba(232, 240, 245, .26); }
.field input:focus,
.field textarea:focus {
  outline: none;
  background: rgba(7, 9, 12, .85);
  box-shadow: inset 0 0 0 1px var(--teal), 0 0 0 4px rgba(0, 173, 181, .14), 0 10px 30px -12px var(--teal-glow);
}
.field input.invalid,
.field textarea.invalid { box-shadow: inset 0 0 0 1px var(--err); }

.field-foot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-block-start: .45rem;
}
#char-count { flex-shrink: 0; font-size: .75rem; color: var(--faint); }

.field-error {
  display: none;
  margin-block-start: .45rem;
  font-size: .85rem;
  color: var(--err);
}
.field-foot .field-error { margin-block-start: 0; }
.field-error.show { display: block; }

.form-status {
  padding: .9rem 1.1rem;
  border-radius: 12px;
  font-size: .95rem;
}
.form-status.status-success {
  background: rgba(0, 173, 181, .1);
  color: var(--teal-hi);
  box-shadow: inset 0 0 0 1px rgba(0, 173, 181, .35);
}
.form-status.status-error {
  background: rgba(240, 138, 147, .08);
  color: var(--err);
  box-shadow: inset 0 0 0 1px rgba(240, 138, 147, .3);
}
.privacy { text-align: center; font-size: .8125rem; color: var(--faint); }

/* ================================================================ footer */
.site-footer {
  position: relative;
  padding-block-start: 4rem;
  background: var(--void);
}
.foot-grid {
  display: grid;
  gap: 2.5rem;
  padding-block-end: 3rem;
}
@media (min-width: 760px) {
  .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
.foot-brand img { height: 32px; width: auto; opacity: .9; }
.foot-brand p { margin-block-start: 1rem; max-width: 20rem; color: var(--faint); font-size: .9375rem; }
.foot-links { display: grid; gap: .6rem; align-content: start; font-size: .9375rem; color: var(--dim); }
.foot-links a { transition: color .2s var(--ease); }
.foot-links a:hover { color: var(--teal-hi); }

.foot-legal {
  padding-block: 1.5rem;
  border-block-start: 1px solid var(--line);
  font-size: .8125rem;
  color: var(--faint);
}

/* The credit sits at the very bottom, on its own: small, quiet, but set with
   care, with a hairline that fades in from the centre above it. */
.foot-credit {
  position: relative;
  padding: 1.35rem 1.25rem calc(1.35rem + env(safe-area-inset-bottom));
  text-align: center;
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .02em;
  color: #59626D;
  background: #050608;
}
.foot-credit::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 25%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 173, 181, .35), transparent);
}
/* the floating WhatsApp button would otherwise sit on top of the credit */
@media (max-width: 640px) { .foot-credit { padding-block-end: calc(5.5rem + env(safe-area-inset-bottom)); } }

/* ===================================================== floating WhatsApp */
.wa-float {
  position: fixed;
  inset-block-end: max(1.25rem, env(safe-area-inset-bottom));
  inset-inline-end: 1.25rem;
  z-index: 55;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .8rem 1.15rem;
  border-radius: 999px;
  background: #25D366;
  color: #062b10;
  font-weight: 700;
  font-size: .9375rem;
  box-shadow: 0 14px 34px -8px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .15) inset;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.wa-float svg { width: 1.35rem; height: 1.35rem; }
.wa-float:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -8px rgba(0, 0, 0, .7), 0 0 30px -6px rgba(37, 211, 102, .6); }
@media (max-width: 640px) {
  .wa-float { inset-inline-end: 1rem; padding: .95rem; }
  .wa-float-label { display: none; }
}

/* ============================================================ selects */
/* The chevron is a pseudo-element on the wrapper, placed with a logical
   offset, so it sits on the correct side in both directions. */
.select { position: relative; }
.select select {
  width: 100%;
  padding-block: .95rem;
  padding-inline: 1.05rem 2.6rem;
  border: 0;
  border-radius: 12px;
  background: rgba(7, 9, 12, .6);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: box-shadow .3s var(--ease), background-color .3s var(--ease);
}
.select select:hover { box-shadow: inset 0 0 0 1px rgba(232, 240, 245, .26); }
.select select:focus {
  outline: none;
  background: rgba(7, 9, 12, .85);
  box-shadow: inset 0 0 0 1px var(--teal), 0 0 0 4px rgba(0, 173, 181, .14);
}
.select select option { background: var(--panel-solid); color: var(--text); }
/* A down-chevron must not mirror with the text direction, so it is drawn as
   an SVG rather than from logical borders (which flip in RTL and turned it
   into a sideways arrow). Only its position is logical. */
.select::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 1rem;
  width: .9rem;
  height: .9rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3AEBA' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: translateY(-50%);
  pointer-events: none;
}
/* opt-in checkbox (WhatsApp updates) */
.check {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--dim);
  cursor: pointer;
}
.check input {
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  margin-block-start: .15rem;
  accent-color: var(--teal);
  cursor: pointer;
}
.check:hover { color: var(--text); }
.privacy a { color: var(--dim); text-decoration: underline; text-underline-offset: 3px; }
.privacy a:hover { color: var(--teal-hi); }

/* ============================================================ reviews */
.rev-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
}
.rev-summary { display: flex; align-items: center; gap: 1rem; }
.rev-score {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
}
.rev-summary-meta { display: grid; gap: .25rem; font-size: .9rem; color: var(--dim); }

.stars { display: inline-flex; gap: 2px; color: #F5B83D; }
.stars svg { width: 1.05rem; height: 1.05rem; }
.stars .star-off { color: rgba(232, 240, 245, .18); }

.rev-grid {
  display: grid;
  gap: 1.25rem;
  margin-block-start: 2.5rem;
}
@media (min-width: 760px) { .rev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .rev-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.rev-card {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
  box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -40px rgba(0, 0, 0, .9);
  animation: rev-in .7s var(--ease-out) both;
  animation-delay: var(--d, 0ms);
}
@keyframes rev-in { from { opacity: 0; transform: translateY(14px); } }

.rev-author { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.rev-avatar {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(0, 173, 181, .18);
  color: var(--teal-hi);
  font-weight: 700;
}
.rev-name { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.rev-name:hover { color: var(--teal-hi); }
.rev-when { font-size: .8rem; color: var(--faint); }
.rev-text {
  color: var(--dim);
  font-size: .95rem;
  line-height: 1.7;
  white-space: pre-line;
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rev-link { margin-block-start: auto; font-size: .85rem; color: var(--teal-hi); }
.rev-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.rev-gate,
.rev-empty {
  margin-block-start: 2.5rem;
  padding: 1.5rem;
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--dim);
}
.rev-gate { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }

.rev-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-block-start: 2rem;
}
.rev-ctas { display: flex; flex-wrap: wrap; gap: .75rem; }
.rev-note { font-size: .8rem; color: var(--faint); }
/* Google's attribution rules: Roboto (or sans-serif), regular weight,
   gray #5E5E5E-class contrast, the words "Google Maps" unaltered. */
.gmaps-attr {
  font-family: Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: .8rem;
  color: #9AA0A6;
  white-space: nowrap;
}

/* ============================================================ footer legal */
.foot-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; }
.foot-legal-links { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.foot-legal-links a,
.foot-legal-links button { color: var(--faint); font-size: .8125rem; transition: color .2s var(--ease); }
.foot-legal-links a:hover,
.foot-legal-links button:hover { color: var(--teal-hi); }

/* ============================================================ consent */
.consent {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 80;
  padding: 1rem max(1rem, env(safe-area-inset-left)) calc(1rem + env(safe-area-inset-bottom));
  pointer-events: none;
}
.consent-card {
  pointer-events: auto;
  max-width: 44rem;
  margin-inline: auto;
  padding: 1.35rem 1.5rem;
  border-radius: var(--radius-lg);
  background: rgba(17, 22, 29, .96);
  box-shadow: inset 0 0 0 1px var(--line-strong), 0 30px 80px -20px rgba(0, 0, 0, .9);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  animation: consent-in .5s var(--ease-out) both;
}
@keyframes consent-in { from { opacity: 0; transform: translateY(24px); } }
.consent h2 { font-size: 1.1rem; }
.consent p { margin-block-start: .5rem; font-size: .9rem; color: var(--dim); }
.consent p a { color: var(--teal-hi); text-decoration: underline; text-underline-offset: 3px; }

.consent-prefs { display: grid; gap: .6rem; margin-block-start: 1rem; }
.consent-opt {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .75rem .9rem;
  border-radius: 12px;
  background: rgba(7, 9, 12, .5);
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer;
}
.consent-opt input { margin-block-start: .3rem; width: 1.05rem; height: 1.05rem; accent-color: var(--teal); flex-shrink: 0; }
.consent-opt input:disabled { cursor: not-allowed; }
.consent-opt-text { display: grid; gap: .1rem; }
.consent-opt-text small { color: var(--faint); font-size: .8rem; }

.consent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-block-start: 1.1rem; }
.consent-btn { min-height: 2.75rem; padding-block: .55rem; padding-inline: 1.2rem; font-size: .9375rem; }
.consent-link { color: var(--dim); font-size: .875rem; text-decoration: underline; text-underline-offset: 3px; padding: .5rem; }
.consent-link:hover { color: var(--teal-hi); }
@media (max-width: 520px) {
  .consent-actions .consent-btn { flex: 1 1 100%; }
}
/* the floating WhatsApp button would sit on the banner's buttons */
.consent-open .wa-float { opacity: 0; pointer-events: none; }

/* ============================================================ legal page */
.legal-page main { padding-block: calc(var(--header-h) + 2.5rem) 5rem; }
.legal-wrap { max-width: 50rem; }
.legal h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.legal .updated { margin-block-start: .6rem; color: var(--faint); font-size: .9rem; }
.legal .toc {
  margin-block: 2rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
}
.legal .toc ol { display: grid; gap: .4rem; list-style: decimal; padding-inline-start: 1.25rem; }
.legal .toc a { color: var(--dim); }
.legal .toc a:hover { color: var(--teal-hi); }
.legal h2 {
  margin-block: 3rem 1rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--line);
  font-size: 1.6rem;
}
.legal h3 { margin-block: 1.75rem .6rem; font-size: 1.15rem; color: var(--teal-hi); }
.legal p,
.legal li { color: var(--dim); }
.legal p + p { margin-block-start: .8rem; }
.legal ul { display: grid; gap: .5rem; margin-block: .6rem 1rem; list-style: disc; padding-inline-start: 1.4rem; }
.legal strong { color: var(--text); font-weight: 600; }
.legal a { color: var(--teal-hi); text-decoration: underline; text-underline-offset: 3px; }
.legal table { width: 100%; margin-block: 1rem; border-collapse: collapse; font-size: .9rem; }
.legal th,
.legal td { padding: .6rem .75rem; border-block-end: 1px solid var(--line); text-align: start; vertical-align: top; color: var(--dim); }
.legal th { color: var(--text); font-weight: 600; }
.legal .table-scroll { overflow-x: auto; }
.legal .note { margin-block-start: 3rem; font-size: .85rem; color: var(--faint); }
.legal-nav { display: flex; align-items: center; gap: .75rem; }
.legal-back { color: var(--dim); font-size: .9375rem; }
.legal-back:hover { color: var(--teal-hi); }

/* ============================================================== reveals */
/* Sections start invisible and main.js adds .in as they scroll into view.
   A failure in main.js would leave the page blank, so the hiding only applies
   once JS has proved it is running (html.js-on, set inline in index.html),
   and .reveal-failsafe un-hides everything if main.js never reports in. */
.reveal {
  transition: opacity 1s var(--ease-out) var(--d, 0ms),
              transform 1s var(--ease-out) var(--d, 0ms);
}
.js-on .reveal {
  opacity: 0;
  transform: translateY(28px);
}
/* Direction-aware: main.js adds .from-above while the element sits above
   the viewport, so it drops in from -28px on the way back up and leaves
   upward on the way down. Without it, everything would slide the same way
   regardless of scroll direction, against the motion of the page. */
.js-on .reveal.from-above { transform: translateY(-28px); }

.reveal.in,
.reveal-failsafe .reveal { opacity: 1; transform: none; }

/* Exits are immediate and quicker: the --d stagger only makes sense on the
   way in. On the way out it would leave items fading for half a second
   after they left the screen. */
.js-on .reveal:not(.in) {
  transition-duration: .5s;
  transition-delay: 0ms;
}
.js-on .reveal:not(.in) li { transition-delay: 0ms; }

/* list items inside a revealed block arrive just after it */
.js-on .reveal li { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease-out) var(--d, 0ms), transform .6s var(--ease-out) var(--d, 0ms), color .3s var(--ease), background-color .35s var(--ease); }
.js-on .reveal.from-above li { transform: translateY(-10px); }
.reveal.in li,
.reveal-failsafe .reveal li { opacity: 1; transform: none; }

/* Service cards are both reveal and tilt targets; tilt needs a fast transform
   transition, while the entrance keeps its slow fade. */
.reveal.svc {
  transition: opacity 1s var(--ease-out) var(--d, 0ms),
              transform .45s var(--ease),
              box-shadow .45s var(--ease);
}
.js-on .reveal.svc:not(.in) { transform: translateY(36px); }
.js-on .reveal.svc.from-above:not(.in) { transform: translateY(-36px); }

/* ======================================================== reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  .js-on .reveal, .js-on .reveal li, .js-on .reveal.from-above, .js-on .reveal.from-above li,
  .js-on .reveal.svc:not(.in), .js-on .reveal.svc.from-above:not(.in) { opacity: 1; transform: none; }
  .svc:hover .svc-media img { transform: scale(1.02); }
}