/* ==========================================================================
   Mostafa Hammoud — portfolio landing page
   Navy layers, one amber accent, grey glass reserved for the AI agent.
   The one motion moment is the laptop that travels with scroll; behind it a
   dim field of drifting dots is atmosphere, never a focal point.
   ========================================================================== */

/* ---------------------------------- tokens -------------------------------- */
:root {
  /* color */
  --navy-900: #0a0f24;   /* page */
  --navy-800: #121a3a;   /* panels */
  --navy-700: #182352;   /* nested surfaces */
  --glass: rgba(198, 203, 214, 0.14);
  --glass-line: rgba(255, 255, 255, 0.16);
  --amber: #f2b441;
  --amber-hi: #f7c565;
  --on-amber: #191008;
  --ink: #f4f5f9;
  --muted: #9aa6c2;
  --line: rgba(255, 255, 255, 0.08);

  /* type */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* layout */
  --wrap: 1180px;
  --gutter: clamp(20px, 6vw, 72px);
  --header-h: 64px;
  --radius: 18px;

  /* laptop lane */
  --lane-top: clamp(88px, 15vh, 150px);
  --rig-w: clamp(96px, min(11vw, 17vh), 150px);   /* shrinks on short laptop screens */

  /* background field: scales the grid and glow; FIELD_STRENGTH in script.js
     does the same for the dots and lines */
  --field-strength: 1;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
/* with motion on, script.js does the smoothing; a native smooth scroll here
   would animate every frame it writes and race it */
html.motion { scroll-behavior: auto; }

html, body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--navy-900);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  text-wrap: balance;
}
p, figure, blockquote, dl, dd { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }

::selection { background: var(--amber); color: var(--on-amber); }

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

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section[id] { scroll-margin-top: calc(var(--header-h) + 12px); }

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: 100;
  padding: 10px 16px;
  background: var(--amber);
  color: var(--on-amber);
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
}
.skip-link:focus { top: 12px; }
/* same-page links hand focus to their target so Tab carries on from there;
   the whole section doesn't need a ring for that */
main:focus, section[id]:focus { outline: none; }

/* ---------------------------- background field ---------------------------- */
/* Fixed under everything: the laptop (5), content (10), and header (40).
   Without JS this is the grid and a still glow on the navy base. */
.bg-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* oversized so its slow drift never shows an edge */
.bg-field__glow {
  position: absolute;
  inset: -20%;
  opacity: var(--field-strength);
  background: radial-gradient(38% 42% at 30% 34%, rgba(24, 35, 82, 0.55), rgba(24, 35, 82, 0) 70%),
              radial-gradient(34% 40% at 76% 72%, rgba(34, 30, 92, 0.35), rgba(34, 30, 92, 0) 70%);
  animation: glow-drift 48s ease-in-out infinite alternate;
}
/* a faint warm hint up by the hero; script.js fades it as the hero leaves */
.bg-field__glow--amber {
  background: radial-gradient(26% 24% at 70% 26%, rgba(242, 180, 65, 0.05), rgba(242, 180, 65, 0) 70%);
  animation-duration: 60s;
  animation-direction: alternate-reverse;
}
@keyframes glow-drift {
  from { transform: translate3d(-3%, -2%, 0); }
  to   { transform: translate3d(3%, 2.5%, 0); }
}

/* 64px squares, faded out from the top middle so they read behind the hero */
.bg-field__grid {
  position: absolute;
  inset: -64px 0;
  opacity: var(--field-strength);
  background-image:
    linear-gradient(rgba(154, 166, 194, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(154, 166, 194, 0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(70% 55% at 50% 30%, #000 20%, transparent 75%);
  mask-image: radial-gradient(70% 55% at 50% 30%, #000 20%, transparent 75%);
}

#bgField {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ------------------------------- laptop --------------------------------- */
/* Static by default (no JS, or reduced motion): it scrolls away with the hero,
   sitting above the headline. With .motion it is fixed and JS moves it. */
.laptop-track {
  position: absolute;
  top: var(--lane-top);
  left: 0;
  width: 100%;
  z-index: 5;
  pointer-events: none;
}

.laptop-rig {
  position: absolute;
  top: 0;
  left: calc(max(0px, (100% - var(--wrap)) / 2) + var(--gutter));
  width: var(--rig-w);
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.35));
}
.laptop-rig svg { display: block; width: 100%; height: auto; }

.motion .laptop-track { position: fixed; }
.motion .laptop-rig { left: 0; will-change: transform; }

.screen { opacity: 0; transition: opacity 350ms ease; }
.screen.is-on { opacity: 1; }
/* with motion on, script.js sets each screen's opacity from scroll */
.motion .screen { transition: none; }

/* content sits above the laptop; sections stay transparent so it shows
   between panels and slides behind them */
main { position: relative; z-index: 10; }

/* --------------------------------- header --------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(10, 15, 36, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.15rem;
  text-decoration: none;
  white-space: nowrap;
}

.nav { display: flex; gap: clamp(0.25rem, 2vw, 1.5rem); }

.nav__link {
  display: block;
  padding: 8px 6px;
  font-size: 0.93rem;
  color: var(--muted);
  text-decoration: none;
  transition: color 160ms ease;
}
.nav__link:hover { color: var(--ink); }
.nav__link[aria-current="true"],
.nav__link.is-current {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--amber);
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}

/* Services and Contact: disclosure menus. They open on click or tap (and
   Enter/Space), so mouse, touch, and keyboard all work the same way. */
.nav__item--menu { position: relative; }
.nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  border: 0;
  background: none;
  font-family: inherit;
  line-height: inherit;   /* buttons don't inherit it, which set Contact 2px above Services */
  cursor: pointer;
}
.nav__trigger[aria-expanded="true"] { color: var(--ink); }
.nav__caret { width: 0.75em; height: 0.75em; transition: transform 160ms ease; }
.nav__trigger[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

/* near-opaque navy rather than see-through glass: the header already has a
   backdrop blur, and a nested one can't blur the page below it */
.nav__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 50;
  display: grid;
  gap: 2px;
  min-width: 11.5rem;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  background: rgba(16, 23, 52, 0.96);
  border: 1px solid var(--glass-line);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.nav__menu[hidden] { display: none; }
.nav__option {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0.8rem;
  border-radius: 10px;
  color: var(--ink);
  font-size: 0.93rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 160ms ease;
}
.nav__option:hover { background: rgba(255, 255, 255, 0.08); }
.nav__option svg { flex: none; width: 1.1rem; height: 1.1rem; color: var(--muted); }
.nav__option--wa svg { color: #25d366; }

/* ---------------------------------- hero ---------------------------------- */
/* top padding clears the laptop lane, so on load the laptop sits over the
   headline like its illustration, then leaves as you scroll */
.hero {
  padding-top: calc(var(--lane-top) - var(--header-h) + var(--rig-w) * 0.7 + clamp(24px, 3vw, 40px));
  padding-bottom: clamp(32px, 8vw, 112px);
}

.hero__title {
  max-width: 16ch;
  /* the vh term keeps the call to action above the fold on 1366x650-ish screens */
  font-size: clamp(2.25rem, min(6vw + 0.5rem, 9.5vh), 5rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.hero__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--amber);
}

.hero__lede {
  max-width: 54ch;
  margin-top: clamp(16px, 3vh, 28px);
  font-size: clamp(1.05rem, 1.2vw + 0.5rem, 1.2rem);
  color: var(--muted);
}

/* a matched pair: 1fr columns in a fit-content grid both take the wider
   box's width, and sharing a row gives them the same height */
.hero__actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  width: fit-content;
  gap: 1rem;
  margin-top: clamp(22px, 4vh, 40px);
}

/* Lebanon, in the laptop's line style: the stroke matches the laptop's
   rendered 2.5/150 at every size, and it casts the same shadow. Below
   1100px it's a small mark beside its line, under the actions. */
.hero__map {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: clamp(22px, 4vh, 36px);
}
.hero__map svg {
  flex: none;
  display: block;
  width: auto;
  height: 3.5rem;
  overflow: visible;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.35));
}
.hero__map-outline { stroke-width: calc(var(--rig-w) / 60); }
.hero__map-towns { display: none; }
.hero__map figcaption {
  font-size: 0.93rem;
  color: var(--muted);
  text-wrap: balance;
}

/* wide screens: the map fills the empty right side. The negative top
   margin reaches up past the hero padding to the laptop's lane, so the map
   centres in the whole band from the laptop down to the actions. */
@media (min-width: 1100px) {
  .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(32px, 4vw, 64px);
  }
  .hero__map {
    flex-direction: column;
    gap: 1rem;
    align-self: center;
    width: clamp(150px, min(15vw, 30vh), 210px);
    margin-top: calc(-1 * (var(--rig-w) * 0.7 + clamp(24px, 3vw, 40px)));
    text-align: center;
  }
  .hero__map svg { width: 100%; height: auto; }
  .hero__map-towns { display: inline; }
}

/* --------------------------------- button --------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.95rem 1.6rem;
  background: var(--amber);
  color: var(--on-amber);
  border: 0;
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease;
}
.btn:hover { background: var(--amber-hi); }
.btn:disabled { opacity: 0.6; cursor: progress; }

/* ------------------------------ glass + agent ----------------------------- */
.glass {
  background: var(--glass);
  border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(40, 48, 78, 0.92); }
}

/* same corners as the button beside it. A real button now, so it also has to
   undo what a button brings with it. */
.agent-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.8rem 1.15rem;
  border-radius: 10px;
  font-family: var(--sans);
  text-align: left;
  cursor: pointer;
}

/* filled, and the one amber thing that isn't the main button: the agent is
   live. No pulse — the page spends its motion on the travelling laptop. */
.agent-card__ring {
  flex: none;
  width: 10px;
  height: 10px;
  background: var(--amber);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(242, 180, 65, 0.55);
}

/* grey at rest; on hover it brightens with a soft glow of the same grey */
.agent-card__text {
  font-size: 0.93rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--muted);
  transition: color 200ms ease, text-shadow 200ms ease;
}
.agent-card:hover .agent-card__text {
  color: #d6dbe6;
  text-shadow: 0 0 14px rgba(214, 219, 230, 0.45);
}

/* -------------------------------- chat panel ------------------------------ */
/* The agent's window, opened from the card above. Glass, because glass is the
   agent's material everywhere else on the page. Fixed, because nothing here
   may change the height of the document: the laptop in script.js measures the
   page once and would land short if this pushed it.

   It is a direct child of body for the same reason the nav menu is opaque —
   a backdrop-filter nested inside another one blurs nothing. */
.chat {
  position: fixed;
  right: clamp(12px, 3vw, 28px);
  bottom: clamp(12px, 3vw, 28px);
  z-index: 60;                       /* over the nav menu at 50, under the skip link */
  display: flex;
  flex-direction: column;
  width: min(384px, calc(100vw - 24px));
  height: min(560px, calc(100vh - 120px));
  border-radius: var(--radius);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.chat[hidden] { display: none; }

.chat__head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.8rem 0.7rem 0.8rem 1.1rem;
  border-bottom: 1px solid var(--glass-line);
}

/* the same live dot as the card that opened this */
.chat__ring {
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--amber);
  border-radius: 50%;
  box-shadow: 0 0 9px rgba(242, 180, 65, 0.55);
}

.chat__title { font-size: 0.95rem; font-weight: 600; }

.chat__close {
  flex: none;
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease;
}
.chat__close:hover { color: var(--ink); background: rgba(255, 255, 255, 0.08); }
.chat__close svg { width: 18px; height: 18px; }

.chat__log {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;      /* scrolling the log doesn't drag the page */
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1rem;
  scrollbar-width: thin;             /* the default one is loud against glass */
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

/* what the visitor reads before they write. Nothing is sent until they do. */
.chat__intro { color: var(--muted); font-size: 0.9rem; line-height: 1.55; }
.chat__intro-lead { margin-bottom: 0.45rem; color: var(--ink); font-weight: 600; }
.chat__intro-note { margin-top: 0.45rem; font-size: 0.82rem; }

.chat__msg {
  max-width: 85%;
  padding: 0.6rem 0.8rem;
  border-radius: 14px;
  font-size: 0.92rem;
  line-height: 1.5;
  white-space: pre-wrap;             /* the reply's own line breaks, kept */
  overflow-wrap: anywhere;
}
.chat__msg--you {
  margin-left: auto;
  background: var(--navy-700);
  border-bottom-right-radius: 5px;
}
.chat__msg--agent {
  margin-right: auto;
  background: rgba(255, 255, 255, 0.07);
  border-bottom-left-radius: 5px;
}

/* when the agent can't answer. Muted rather than red: this is a detour to
   WhatsApp, not a failure the visitor has to deal with. */
.chat__msg--note {
  max-width: 100%;
  padding: 0.3rem 0.1rem;
  color: var(--muted);
  font-size: 0.88rem;
}
.chat__msg--note a,
.chat__msg--agent a { color: var(--amber); text-underline-offset: 3px; }

.chat__typing {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0.5rem 0.2rem;
}
.chat__typing[hidden] { display: none; }
.chat__dot {
  width: 6px;
  height: 6px;
  background: var(--muted);
  border-radius: 50%;
  animation: chat-dot 1.1s ease-in-out infinite;
}
.chat__dot:nth-child(2) { animation-delay: 0.16s; }
.chat__dot:nth-child(3) { animation-delay: 0.32s; }
.chat__typing-text { margin-left: 0.35rem; color: var(--muted); font-size: 0.82rem; }

@keyframes chat-dot {
  0%, 60%, 100% { opacity: 0.28; }
  30% { opacity: 1; }
}

.chat__form {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.7rem;
  border-top: 1px solid var(--glass-line);
}

/* one line to start, grows with what's typed, then scrolls */
.chat__field {
  flex: 1 1 auto;
  max-height: 6.5rem;
  padding: 0.62rem 0.75rem;
  background: rgba(10, 15, 36, 0.55);
  border: 1px solid var(--glass-line);
  border-radius: 10px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.92rem;
  line-height: 1.45;
  resize: none;
}
.chat__field::placeholder { color: var(--muted); }

.chat__send {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--amber);
  color: var(--on-amber);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 160ms ease;
}
.chat__send:hover { background: var(--amber-hi); }
.chat__send:disabled { opacity: 0.55; cursor: progress; }
.chat__send svg { width: 18px; height: 18px; }

/* phones: the panel takes the screen, and the compose row clears the home bar */
@media (max-width: 640px) {
  .chat {
    inset: 0 0 auto;
    width: auto;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    border-width: 0;
  }
  .chat__form { padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px)); }
}

/* -------------------------------- sections -------------------------------- */
/* the only rule that sets vertical rhythm between sections */
.section { padding-block: clamp(64px, 9vw, 120px); }

.section-head { max-width: 52ch; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.012em;
}
.section-head p {
  margin-top: 0.9rem;
  font-size: 1.05rem;
  color: var(--muted);
}

/* ---------------------------- before and after ---------------------------- */
/* Two columns, even on phones: side by side is the point. The "with" column
   is the highlight, a light glass tint inside a thin amber outline (a touch
   stronger than the system pills' line, which the tint would grey out). */
.compare {
  --with-line: rgba(242, 180, 65, 0.65);
  width: 100%;
  max-width: 60rem;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
.compare th,
.compare td {
  padding: 1.1rem 1.4rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.compare th {
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--muted);
}
.compare td { font-size: 1.02rem; line-height: 1.5; }
.compare td:first-child { color: var(--muted); }
.compare :is(th, td):first-child { padding-left: 0; }   /* lines up with the heading */

.compare :is(th, td):last-child {
  background: var(--glass);
  border-inline: 1px solid var(--with-line);
  color: var(--ink);
}
.compare thead th:last-child {
  border-top: 1px solid var(--with-line);
  border-radius: 14px 14px 0 0;
}
.compare tbody tr:last-child td { border-bottom: 0; }
.compare tbody tr:last-child td:last-child {
  border-bottom: 1px solid var(--with-line);
  border-radius: 0 0 14px 14px;
}

@media (max-width: 600px) {
  .compare th, .compare td { padding: 0.9rem 0.8rem; }
  .compare td { font-size: 0.95rem; }
}

/* -------------------------------- services -------------------------------- */
/* Scenes: text on one side, a device on the other that travels in with
   scroll and lands. Each scene has an opaque navy ground, so the page laptop
   slides behind it and only one device is ever moving on screen. */
.scene {
  position: relative;
  background: var(--navy-900);
}

.scene__stage {
  display: grid;
  align-items: center;
  padding-block: clamp(40px, 7vw, 88px);
}

/* a soft pool of light behind where the device lands */
.scene--agent .scene__stage {
  background: radial-gradient(46% 62% at 72% 50%, rgba(24, 35, 82, 0.95), rgba(24, 35, 82, 0) 72%);
}

.scene__grid {
  display: grid;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.scene__title {
  max-width: 16ch;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
}
.scene__title em { font-style: normal; color: var(--amber); }
.scene__copy > p {
  max-width: 46ch;
  margin-top: 1.1rem;
  font-size: 1.05rem;
  color: var(--muted);
}
.scene__copy > .scene__note {
  margin-top: 1.5rem;
  font-size: 0.86rem;
}

/* the device's resting place: a glass panel it lands on */
.scene__slot {
  position: relative;
  display: flex;
  justify-content: center;
}
.scene__plinth {
  position: absolute;
  inset: 12% 6%;
  border-radius: 32px;
}
.scene__device { position: relative; z-index: 1; }
.motion .scene__device { will-change: transform; }

/* ------------------------------ phone mockup ------------------------------ */
/* Built in HTML so the chat stays real text. Everything inside is sized in
   em off --pw, so one variable scales the whole phone. */
.phone {
  --pw: min(74vw, 300px);
  width: var(--pw);
  margin: 0;
  padding: calc(var(--pw) * 0.034);
  background: #0b0c10;
  border-radius: calc(var(--pw) * 0.15);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 30px 60px -12px rgba(0, 0, 0, 0.6),
    0 12px 24px rgba(0, 0, 0, 0.3);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: calc(var(--pw) / 22);
  line-height: 1.3;
  color: #111b21;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.phone__screen {
  display: flex;
  flex-direction: column;
  aspect-ratio: 9 / 19;
  overflow: hidden;
  background: #efeae2;
  border-radius: calc(var(--pw) * 0.12);
}

.phone__status {
  flex: none;
  display: grid;
  place-items: center;
  height: 2.1em;
  background: #0b0c10;
}
.phone__island {
  width: 5.5em;
  height: 1.3em;
  border-radius: 1em;
  background: #000;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

/* chat header */
.wa-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.6em 0.75em 0.6em 0.45em;
  background: #f6f5f4;
  border-bottom: 1px solid rgba(11, 20, 26, 0.06);
}
.wa-head__back { flex: none; width: 1.45em; height: 1.45em; color: #008069; }
.wa-head__avatar {
  flex: none;
  width: 2.7em;
  height: 2.7em;
  border-radius: 50%;
  overflow: hidden;
  background: #d6dade;
}
.wa-head__avatar svg { display: block; width: 100%; height: 100%; fill: #9aa3a9; }
.wa-head__who { flex: 1; min-width: 0; }
.wa-head__name { font-size: 1.08em; font-weight: 700; line-height: 1.15; }
.wa-head__status { margin-top: 0.1em; font-size: 0.8em; color: #667781; }
.wa-head__icon { flex: none; width: 1.35em; height: 1.35em; color: #008069; fill: currentColor; }

/* conversation: sits at the top like the reference; if it ever overflows,
   the oldest messages clip under the header, the way a real chat scrolls */
.wa-chat {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.5em;
  padding: 0.7em 0.6em 0.5em;
  overflow: hidden;
}
.wa-chat::after { content: ""; flex: 1 0 0; }

.wa-day {
  flex: none;
  align-self: center;
  padding: 0.25em 0.8em;
  border-radius: 0.6em;
  background: #d9eef9;
  color: #4a5a64;
  font-size: 0.78em;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}

.wa-msgs {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.msg {
  display: flex;
  flex-direction: column;
  max-width: 74%;
  padding: 0.4em 0.6em 0.3em;
  border-radius: 0.55em;
  font-size: 0.93em;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
  overflow-wrap: anywhere;
}
.msg--in { align-self: flex-start; background: #fff; }
.msg--out { align-self: flex-end; background: #d9fdd3; }

.msg__meta {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  margin-top: 0.2em;
  font-size: 0.74em;
  color: #667781;
  white-space: nowrap;
}
.msg__ticks { width: 1.35em; height: 0.95em; color: #53bdeb; }

/* message bar */
.wa-compose {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.45em 0.55em 0.9em;
}
.wa-compose__field {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.55em 0.8em;
  background: #fff;
  border-radius: 1.6em;
  color: #8696a0;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}
.wa-compose__field svg { flex: none; width: 1.15em; height: 1.15em; }
.wa-compose__hint { flex: 1; font-size: 0.95em; }
.wa-compose__mic {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.6em;
  height: 2.6em;
  border-radius: 50%;
  background: #008069;
  color: #fff;
}
.wa-compose__mic svg { width: 1.25em; height: 1.25em; }

/* ------------------------------ scene layout ------------------------------ */
@media (min-width: 900px) {
  .scene__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  /* the phone rests right of centre on its panel, not dead-centre */
  .scene--agent .scene__slot { justify-content: flex-end; padding-right: 10%; }
  .scene--agent .scene__plinth { inset: 10% 2% 10% 24%; }

  /* sized so the whole phone fits the pinned stage, even at 1366x633 */
  .phone { --pw: clamp(220px, min(24vw, (100vh - var(--header-h) - 96px) * 0.47), 320px); }
}

/* Pinned: each scene holds the stage for 90vh of scroll while its device
   travels in and lands. Only with motion on, and only where the stage fits;
   html/body use overflow-x: clip, so sticky still works here. */
@media (min-width: 900px) and (min-height: 560px) {
  .motion .scene { height: 190vh; }
  .motion .scene__stage {
    position: sticky;
    top: var(--header-h);
    height: calc(100vh - var(--header-h));
    padding-block: 0;
  }
}

/* ------------------------ scene 2: point of sale ------------------------- */
/* A slightly deeper navy than Scene 1, blended back to the page navy at both
   edges, so the two scenes read as separate moments without a hard seam. */
.scene--systems {
  background: linear-gradient(var(--navy-900) 0%, #0d1431 22%, #0d1431 78%, var(--navy-900) 100%);
}
/* the glow starts behind the docked desktop and follows it as it grows */
.scene--systems .scene__stage {
  background: radial-gradient(52% 64% at var(--glow-x, 28%) 50%, rgba(24, 35, 82, 0.95), rgba(24, 35, 82, 0) 72%);
}

/* wide device on a tall, narrow panel: Scene 1's cross shape, turned */
.scene--systems .scene__plinth { inset: -10% 12%; }

/* desktop mockup: same graphite and shadow as the phone */
.monitor {
  width: min(94%, 560px);
  margin: 0;
}
/* no will-change here: it would freeze the raster at the docked size and
   blur the dashboard once it has grown */
.motion .monitor { will-change: auto; }

.monitor__frame {
  padding: 1.3% 1.3% 2.6%;
  background: #0b0c10;
  border-radius: 14px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 30px 60px -12px rgba(0, 0, 0, 0.6),
    0 12px 24px rgba(0, 0, 0, 0.3);
}
.monitor__screen {
  display: block;
  width: 100%;
  height: auto;
  /* trims only the cut-off tops of the next row of cards at the bottom */
  aspect-ratio: 1365 / 602;
  object-fit: cover;
  object-position: left top;
  border-radius: 5px;
  background: #fff;
}

.monitor__stand { display: flex; flex-direction: column; align-items: center; }
.monitor__neck {
  width: 14%;
  aspect-ratio: 5 / 3;
  background: linear-gradient(90deg, #121833, #232c50 50%, #121833);
  clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%);
}
.monitor__foot {
  width: 34%;
  aspect-ratio: 18 / 1;
  border-radius: 999px 999px 4px 4px;
  background: linear-gradient(#27305a, #131a36);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.45);
}

@media (min-width: 900px) {
  /* mirrored: desktop on the left, a little off centre; copy on the right */
  .scene--systems .scene__slot { grid-column: 1; grid-row: 1; justify-content: flex-start; }
  .scene--systems .scene__copy { grid-column: 2; grid-row: 1; }
  .scene--systems .scene__plinth { inset: -14% 10% -14% 24%; }
}

/* the longest pin on the page: 170vh for arrive, dock, grow, and hold */
@media (min-width: 900px) and (min-height: 560px) {
  .motion .scene--systems { height: 270vh; }
}

/* ------------------------ scene 3: website deck -------------------------- */
/* Back to the page navy (Scene 2 already fades into it), with the glow
   centred where the three monitors converge. */
.scene--sites .scene__stage {
  background: radial-gradient(50% 58% at 50% 54%, rgba(24, 35, 82, 0.9), rgba(24, 35, 82, 0) 72%);
}

.sites {
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  align-items: center;
  gap: clamp(16px, 3vh, 32px);
  text-align: center;
}
.sites__title { max-width: 26ch; }

.sites__foot { display: grid; justify-items: center; gap: 0.8rem; }
.deck__caption {
  max-width: 46ch;
  min-height: 3.2em;   /* two lines, so the controls don't jump as captions change */
  color: var(--muted);
}

/* the deck: three monitors stacked in one grid cell. The outer card takes
   the scroll-driven spawn transform; the inner pose takes the deck slot. */
.deck {
  --dw: min(78vw, 420px);
  display: grid;
  width: var(--dw);
  margin-top: 4%;
  -webkit-user-select: none;
  user-select: none;
  touch-action: pan-y;   /* horizontal drags flip the deck, vertical ones scroll the page */
}
.deck__card { grid-area: 1 / 1; position: relative; }
.deck__card[data-slot="front"] { z-index: 3; }
.deck__card[data-slot="next"] { z-index: 2; }
.deck__card[data-slot="last"] { z-index: 1; }

.deck__pose {
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.7s ease;
}
.deck__card[data-slot="front"] .deck__pose {
  transform: translate3d(calc(var(--drag, 0) * 1px), 0, 0) rotate(calc(var(--drag, 0) * 0.02deg));
  cursor: grab;
}
.deck__card[data-slot="next"] .deck__pose {
  transform: translate3d(18%, -10%, 0) scale(0.85) rotate(3.5deg);
  filter: brightness(0.72);
}
.deck__card[data-slot="last"] .deck__pose {
  transform: translate3d(-18%, -10%, 0) scale(0.85) rotate(-3.5deg);
  filter: brightness(0.6);
}
.deck.is-dragging .deck__pose { transition: none; }
.deck.is-dragging .deck__card[data-slot="front"] .deck__pose { cursor: grabbing; }

.deck .monitor { width: 100%; }

/* controls in a glass capsule; hidden until the script can drive them */
.deck__controls {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem;
  border-radius: 999px;
}
.deck__controls[hidden] { display: none; }
.deck__btn {
  display: inline-grid;
  place-items: center;
  height: 2.5rem;
  padding: 0 1rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: 500 0.9rem var(--sans);
  cursor: pointer;
  transition: background-color 160ms ease;
}
.deck__btn:hover { background: rgba(255, 255, 255, 0.1); }
.deck__btn--icon { width: 2.5rem; padding: 0; }
.deck__btn svg { width: 1.15rem; height: 1.15rem; }
.deck__btn[hidden] { display: none; }

@media (min-width: 900px) {
  /* sized so heading, deck, caption, and controls share a 1366x633 stage */
  .deck { --dw: clamp(260px, min(46vw, (100vh - var(--header-h) - 300px) * 1.2), 620px); }
}
@media (min-width: 900px) and (min-height: 560px) {
  .motion .scene--sites { height: 220vh; }
  .motion .scene--sites .sites { align-self: stretch; padding-block: clamp(12px, 2.5vh, 28px); }
}
@media (prefers-reduced-motion: reduce) {
  .deck__pose { transition: none; }
}

/* ----------------------- example site mockups ------------------------ */
/* Each screen is a 64em x 40em page, like a 1280x800 site at 20px per em,
   scaled off the deck width so it shrinks and grows with the monitor. */
.site {
  display: flex;
  flex-direction: column;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 5px;
  background: var(--site-bg);
  color: var(--site-ink);
  font-family: var(--sans);
  font-size: calc(var(--dw) * 0.974 / 64);
  line-height: 1.3;
  text-align: left;
}
.site b { font-weight: 600; }
.site em { font-style: normal; }

.s-nav {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2em;
  height: 3.6em;
  padding: 0 2.4em;
  border-bottom: 1px solid var(--site-line);
}
.s-logo {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 1.05em;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.s-links { display: flex; gap: 1.6em; font-size: 0.8em; opacity: 0.7; }
.s-btn {
  display: inline-block;
  padding: 0.75em 1.4em;
  border-radius: 0.6em;
  background: var(--site-accent);
  color: #fff;
  font-size: 0.8em;
  font-weight: 600;
  white-space: nowrap;
}

/* shop: light, orange, product-led */
.site--shop { --site-bg: #fff; --site-ink: #16181d; --site-accent: #ef5a2a; --site-line: #eceef2; }
.shop-search {
  margin-left: auto;
  width: 13em;
  padding: 0.55em 1em;
  border-radius: 999px;
  background: #f2f3f6;
  color: #8a8f99;
  font-size: 0.75em;
}
.shop-cart { position: relative; font-size: 0.8em; font-weight: 600; }
.shop-cart b {
  position: absolute;
  top: -0.8em;
  right: -1.3em;
  display: grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: var(--site-accent);
  color: #fff;
  font-size: 0.75em;
}
.shop-hero {
  flex: none;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 2em;
  height: 20em;
  padding: 0 2.4em;
  background: linear-gradient(120deg, #fff4ef, #fff 60%);
}
.shop-tag {
  display: inline-block;
  padding: 0.3em 0.8em;
  border-radius: 999px;
  background: #ffe3d8;
  color: var(--site-accent);
  font-size: 0.7em;
  font-weight: 700;
}
.shop-hero__title {
  margin: 0.4em 0 0.3em;
  font-size: 2.7em;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.shop-hero__sub { max-width: 24em; margin-bottom: 1.4em; font-size: 0.85em; color: #5b606b; }
.shop-hero__art { position: relative; height: 15em; }
.shop-phone {
  position: absolute;
  left: 24%;
  top: 4%;
  width: 6.6em;
  height: 13.6em;
  border-radius: 1.4em;
  background: linear-gradient(160deg, #ff8a5c, #ef5a2a 55%, #c73f15);
  box-shadow: inset 0 0 0 0.35em #1b1d22, 0 1.2em 2.4em rgba(239, 90, 42, 0.35);
  transform: rotate(-8deg);
}
.shop-puck {
  position: absolute;
  right: 12%;
  bottom: 6%;
  width: 7em;
  height: 7em;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 38%, #e9ebef 39% 62%, #d7dae0 63%);
  box-shadow: 0 0.8em 1.6em rgba(0, 0, 0, 0.12);
}
.shop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2em; padding: 1.4em 2.4em; }
.shop-item { display: grid; gap: 0.35em; font-size: 0.8em; }
.shop-item em { color: var(--site-accent); font-weight: 700; }
.shop-item__img { position: relative; display: block; height: 7.5em; border-radius: 0.8em; background: #f3f4f7; }
.shop-item__img::before { content: ""; position: absolute; }
.shop-item__img--case::before { inset: 16% 38%; border: 0.35em solid #d2d5db; border-radius: 0.9em; }
.shop-item__img--plug::before { inset: 30% 40%; border-radius: 0.5em; background: #1b1d22; }
.shop-item__img--buds::before {
  inset: 0;
  background:
    radial-gradient(circle at 40% 50%, #1b1d22 0 10%, transparent 11%),
    radial-gradient(circle at 60% 50%, #1b1d22 0 10%, transparent 11%);
}
.shop-item__img--cable::before { left: 18%; right: 18%; top: 47%; height: 0.4em; border-radius: 1em; background: var(--site-accent); }

/* clinic: mint and teal, built around the booking card */
.site--clinic { --site-bg: #f1faf7; --site-ink: #10302b; --site-accent: #0e9f8e; --site-line: #dcefe9; }
.clinic-mark { width: 1.1em; height: 1.1em; border-radius: 0.35em 0.35em 0.6em 0.6em; background: var(--site-accent); }
.clinic-nav-btn { margin-left: auto; padding: 0.6em 1.1em; }
.clinic-hero {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 2.4em;
  padding: 1.4em 2.4em 1.8em;
}
.clinic-hero__title { font-size: 2.5em; font-weight: 800; line-height: 1.05; letter-spacing: -0.025em; text-wrap: balance; }
.clinic-hero__sub { max-width: 26em; margin: 0.8em 0 1.4em; font-size: 0.85em; color: #4b6b65; }
.clinic-services { display: grid; gap: 0.6em; }
.clinic-services span {
  display: flex;
  justify-content: space-between;
  padding: 0.8em 1em;
  border-radius: 0.7em;
  background: #fff;
  font-size: 0.8em;
  box-shadow: 0 0.1em 0.3em rgba(16, 48, 43, 0.08);
}
.clinic-book { padding: 1.6em; border-radius: 1.2em; background: #fff; box-shadow: 0 1.2em 2.8em rgba(16, 48, 43, 0.14); }
.clinic-book__month { margin-bottom: 0.9em; font-size: 0.9em; font-weight: 700; }
.clinic-days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6em; margin-bottom: 1em; }
.clinic-days span {
  display: grid;
  justify-items: center;
  gap: 0.2em;
  padding: 0.6em 0;
  border-radius: 0.7em;
  background: #f1faf7;
  color: #4b6b65;
  font-size: 0.7em;
}
.clinic-days b { font-size: 1.5em; color: var(--site-ink); }
.clinic-days .is-on { background: var(--site-accent); color: #d9f5f0; }
.clinic-days .is-on b { color: #fff; }
.clinic-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5em; margin-bottom: 1.2em; }
.clinic-slots span {
  padding: 0.55em 0;
  border: 1px solid #cfe7e1;
  border-radius: 0.55em;
  font-size: 0.72em;
  font-weight: 600;
  text-align: center;
}
.clinic-slots .is-taken { background: #f5f7f7; color: #a3b8b3; text-decoration: line-through; }
.clinic-slots .is-on { border-color: var(--site-accent); background: #e3f6f2; color: var(--site-accent); }
.clinic-book__cta { display: block; text-align: center; }

/* restaurant: dark, serif, split between a plate and the menu */
.site--menu {
  --site-bg: #141a16;
  --site-ink: #efe6d6;
  --site-accent: #c7364f;
  --site-line: rgba(239, 230, 214, 0.14);
  display: grid;
  grid-template-columns: 1fr 1.15fr;
}
.menu-photo {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2.4em;
  background: linear-gradient(160deg, #2b3a2e, #1a211c);
}
.menu-plate {
  position: absolute;
  left: 50%;
  top: 38%;
  width: 15em;
  height: 15em;
  margin: -7.5em 0 0 -7.5em;
  border-radius: 50%;
  background: radial-gradient(circle, #f4efe6 0 58%, #e3dccf 59% 66%, #f4efe6 67%);
  box-shadow: 0 1.6em 3em rgba(0, 0, 0, 0.45);
}
.menu-plate i { position: absolute; border-radius: 50%; }
.menu-plate i:nth-child(1) { inset: 30% 34% 34% 26%; background: radial-gradient(circle at 40% 40%, #ecc98a, #c89445); }
.menu-plate i:nth-child(2) { top: 28%; right: 22%; width: 3.2em; height: 3.2em; background: radial-gradient(circle at 35% 35%, #86b86f, #3f7d3a); }
.menu-plate i:nth-child(3) { bottom: 22%; left: 38%; width: 2.2em; height: 2.2em; background: radial-gradient(circle at 35% 35%, #df6a6a, #a3233b); }
.menu-name { position: relative; font-family: var(--serif); font-size: 2.5em; font-weight: 600; line-height: 1; }
.menu-tagline { position: relative; margin-top: 0.4em; font-size: 0.8em; opacity: 0.7; }
.menu-list { display: flex; flex-direction: column; padding: 2.4em 2.6em; }
.menu-tabs { display: flex; gap: 0.6em; margin-bottom: 1.6em; }
.menu-tabs span { padding: 0.45em 1.1em; border: 1px solid var(--site-line); border-radius: 999px; font-size: 0.75em; }
.menu-tabs .is-on { border-color: transparent; background: var(--site-accent); color: #fff; }
.menu-heading { margin-bottom: 0.5em; font-family: var(--serif); font-size: 1.7em; font-weight: 600; }
.menu-row { display: flex; align-items: baseline; gap: 0.6em; padding: 0.7em 0; font-size: 0.9em; }
.menu-row i { flex: 1; border-bottom: 1px dotted rgba(239, 230, 214, 0.35); }
.menu-row b { color: #f0c9a0; }
.menu-cta { align-self: flex-start; margin-top: auto; }

/* website, point of sale and app, wired to one line */
.system { margin-top: 1.8rem; }
.system__nodes {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}
.system__nodes::before {
  content: "";
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  top: 50%;
  height: 1px;
  background: var(--amber);
  opacity: 0.7;
}
.system__nodes li {
  position: relative;
  padding: 0.5rem 0.9rem;
  background: var(--navy-900);
  border: 1px solid rgba(242, 180, 65, 0.45);
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 500;
  white-space: nowrap;
}

/* -------------------------------- pricing --------------------------------- */
/* Quote-based: what the price depends on, never a price list. Laid out like
   Contact on wide screens; on phones the call to action ends the section. */
.pricing { display: grid; gap: clamp(28px, 4vw, 48px); align-items: start; }
.pricing .section-head { margin-bottom: 0; }
.pricing__cta { justify-self: start; }

.quote-card {
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border-radius: var(--radius);
}
.quote-card h3 { font-size: clamp(1.3rem, 2vw, 1.5rem); line-height: 1.2; }
.quote-card__list { margin-top: 1.1rem; }
.quote-card__list li {
  padding-block: 1rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
}
.quote-card__list li:last-child { padding-bottom: 0; }
.quote-card__list b { display: block; font-weight: 600; color: var(--ink); }

@media (min-width: 900px) {
  /* 1fr second row: the tall card's extra height goes under the button,
     so the button stays right below the paragraph */
  .pricing {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: clamp(40px, 6vw, 96px);
  }
  .pricing .section-head { grid-column: 1; grid-row: 1; }
  .pricing__cta { grid-column: 1; grid-row: 2; }
  .quote-card { grid-column: 2; grid-row: 1 / span 2; }
}

/* ---------------------------------- faq ----------------------------------- */
/* Native <details>: keyboard-ready and works without the script. One glass
   panel with hairlines between questions; opening is instant. */
.faq__list { max-width: 50rem; border-radius: var(--radius); }
.faq__item + .faq__item { border-top: 1px solid var(--line); }

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.4rem;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:focus-visible { outline-offset: -3px; }

.faq__caret {
  flex: none;
  width: 0.9rem;
  height: 0.9rem;
  color: var(--muted);
  transition: transform 160ms ease, color 160ms ease;
}
.faq__item summary:hover .faq__caret { color: var(--ink); }
.faq__item[open] .faq__caret { transform: rotate(180deg); }

.faq__item p {
  max-width: 60ch;
  padding: 0 1.4rem 1.25rem;
  color: var(--muted);
}

/* -------------------------------- contact --------------------------------- */
.contact { display: grid; gap: clamp(32px, 5vw, 72px); align-items: start; }
.contact__intro .section-head { margin-bottom: 1.8rem; }

.form {
  display: grid;
  gap: 1.1rem;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  background: var(--navy-800);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* honeypot: hidden from people, still visible to the bots it catches */
.form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field { display: grid; gap: 0.4rem; }
.field label { font-size: 0.9rem; font-weight: 500; }
.field__opt { font-weight: 400; color: var(--muted); }

.field input, .field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--navy-900);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  transition: border-color 160ms ease;
}
.field input:hover, .field textarea:hover { border-color: rgba(255, 255, 255, 0.28); }
.field input:focus, .field textarea:focus { border-color: var(--amber); }
.field textarea { min-height: 6.5rem; line-height: 1.5; resize: vertical; }

.form__submit { width: 100%; margin-top: 0.3rem; }

.form__status:empty { display: none; }
.form__status { font-size: 0.93rem; font-weight: 500; }
.form__status[data-state="error"] { color: var(--amber); }

.form__note { font-size: 0.85rem; color: var(--muted); }

/* the WhatsApp icon button under the form, where "WhatsApp" in the menu lands */
.contact__wa { display: flex; align-items: center; gap: 1rem; }
.contact__wa p { font-size: 0.93rem; color: var(--muted); }
.whatsapp-btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  color: #25d366;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.whatsapp-btn svg { width: 1.7rem; height: 1.7rem; }
.whatsapp-btn:hover { background: rgba(37, 211, 102, 0.14); border-color: rgba(37, 211, 102, 0.5); }

/* empty slot the laptop settles into; only reserved when the laptop moves */
.laptop-dock {
  display: none;
  width: var(--rig-w);
  height: calc(var(--rig-w) * 0.7);
}
.motion .laptop-dock { display: block; }

/* --------------------------------- footer --------------------------------- */
.site-footer {
  position: relative;
  z-index: 10;
  border-top: 1px solid var(--line);
  padding-block: 28px calc(28px + env(safe-area-inset-bottom, 0px));
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  font-size: 0.86rem;
  color: var(--muted);
}

/* ----------------------------- reduced motion ----------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bg-field__glow { animation: none; }
  .screen, .btn, .nav__link, .field input, .field textarea, .nav__caret, .nav__option, .whatsapp-btn,
  .agent-card__text, .faq__caret, .chat__close, .chat__send { transition: none; }

  /* the dots hold still and the word carries the meaning instead */
  .chat__dot { animation: none; opacity: 0.65; }
}

/* ------------------------------- responsive ------------------------------- */
/* too narrow for the pair side by side: stack them, full width, still
   matched in height */
@media (max-width: 799px) {
  .hero__actions { grid-auto-flow: row; grid-auto-rows: 1fr; width: auto; }
}

@media (max-width: 719px) {
  .laptop-rig { opacity: 0.85; }
  .brand { font-size: 1.02rem; }
  .nav__link { font-size: 0.88rem; }
  .contact__intro .btn, .pricing__cta { width: 100%; }
}

/* phones: the surname goes so all four nav links fit on one row */
@media (max-width: 419px) {
  .brand__last { display: none; }
  .nav__link { padding-inline: 4px; }
}

@media (max-width: 400px) {
  .system__nodes { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .system__nodes::before {
    left: 1.2rem;
    right: auto;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 1px;
    height: auto;
  }
}

/* room for it: the brand holds the left edge and the nav sits on the page's
   centre line (equal outer columns), instead of being pushed to the right.
   Below this width the row stays brand-left, nav-right so all four fit. */
@media (min-width: 720px) {
  .site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; }
}

@media (min-width: 900px) {
  .contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 1.5rem; }
  .contact__intro { grid-column: 1; grid-row: 1; }
  .form { grid-column: 2; grid-row: 1 / span 2; }
  .laptop-dock { grid-column: 1; grid-row: 2; }
  .contact__wa { grid-column: 2; grid-row: 3; }
}