/* ============================================================
   showcase.css — additive module for three sections:
     1. Testimonials marquee (reuses .review card design)
     2. Live portfolio (iPhone + browser, tab to load client sites)
     3. Contact ("Let's build something bold" + live code editor)
   All built in the existing HUD/terminal brand language, teal tokens
   and Chakra Petch / IBM Plex Mono type. Loaded after sections.css.
   ============================================================ */

/* ============================================================
   0. HEADER CONTRAST over the flat sections (desktop)
   Toggled by wireHeaderContrast(); !important overrides the inline
   colours the 3D scene timeline sets on .emblem-mark during the journey.
   ============================================================ */
.pagehead.hdr-dark .emblem-wordmark,
.pagehead.hdr-dark .menu-link,
.pagehead.hdr-dark .menu-sep {
  color: var(--c-white) !important;
}
.pagehead.hdr-light .emblem-wordmark,
.pagehead.hdr-light .menu-link,
.pagehead.hdr-light .menu-sep {
  color: var(--c-brown) !important;
}
/* the CTA pill stays teal-on-white in both tones — just keep it legible */
.pagehead.hdr-dark .menu-cta__label,
.pagehead.hdr-light .menu-cta__label {
  color: var(--c-white) !important;
  background-color: var(--c-brown) !important;
  border-color: var(--c-brown) !important;
}
/* On mobile the scrolled header paints its own teal backdrop
   (.over-content::before in layout.css), so the hdr-light brown wordmark
   would vanish into it — keep the brand white there regardless of tone */
@media (max-width: 1023.98px) {
  .pagehead.over-content .emblem-wordmark {
    color: var(--c-white) !important;
  }
}

/* ============================================================
   1. TESTIMONIALS — auto-scrolling marquee (card design kept)
   ============================================================ */
.reviews__marquee {
  position: relative;
  margin-top: 0.5rem;
  overflow: hidden;
  /* fade the two edges so cards slide in/out cleanly */
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
}
.reviews__track {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  animation: testimonials-scroll 60s linear infinite;
  will-change: transform;
}
.reviews__marquee:hover .reviews__track {
  animation-play-state: paused;
}
@keyframes testimonials-scroll {
  from { transform: translate3d(0, 0, 0); }
  /* the track holds two copies of the list; -50% loops seamlessly */
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .reviews__track { animation: none; }
  .reviews__marquee { overflow-x: auto; }
}

/* card sizing inside the rail — keeps the existing .review look */
.reviews__track .review {
  flex: 0 0 clamp(280px, 78vw, 360px);
  gap: 1.1rem;
  padding: 1.9rem 1.6rem;
}
.review__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.review__stars {
  display: inline-flex;
  gap: 2px;
  margin-top: 0.35rem;
  color: var(--c-rose);
  font-size: 0.9rem;
  letter-spacing: 2px;
}
.review__verified {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  font-family: var(--font-text);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-burnt);
}
.review__verified svg {
  width: 13px;
  height: 13px;
  fill: var(--c-burnt);
}
.review__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(0, 104, 133, 0.18);
}
.review__platform {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c-brown);
}
.review__platform em {
  font-style: normal;
  color: var(--c-rose);
}
.review__meta {
  font-family: var(--font-text);
  font-size: 11px;
  opacity: 0.6;
  text-align: right;
}

/* ============================================================
   2. LIVE PORTFOLIO — iPhone + browser device stage
   ============================================================ */
.pf__stage-wrap {
  width: 100%;
  max-width: 1680px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}
@media (min-width: 1024px) {
  .pf__stage-wrap { padding-inline: 4rem; }
}

/* --- tab bar --- */
.pf__tabs {
  display: flex;
  gap: 0.25rem;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 1.75rem;
  padding: 0.35rem;
  overflow-x: auto;
  scrollbar-width: none;
  border: 1px solid rgba(0, 104, 133, 0.18);
  background: var(--c-white);
}
.pf__tabs::-webkit-scrollbar { display: none; }
.pf-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-brown);
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.pf-tab svg { width: 13px; height: 13px; }
.pf-tab__ico {
  width: 15px;
  height: 15px;
  overflow: hidden;
  flex-shrink: 0;
}
.pf-tab__ico svg { width: 100%; height: 100%; }
.pf-tab__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0, 104, 133, 0.3);
}
.pf-tab:hover { opacity: 1; }
.pf-tab.is-active {
  opacity: 1;
  background: var(--c-brown);
  color: var(--c-white);
}
.pf-tab.is-active .pf-tab__dot {
  background: var(--c-rose);
  box-shadow: 0 0 8px var(--c-rose);
}

/* --- header row for the active project --- */
.pf__meta {
  min-height: 3.5rem;
  margin-bottom: 1.5rem;
}
.pf__meta-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.pf__meta-title h3 {
  font-size: 1.6rem;
  line-height: 1;
  text-transform: uppercase;
}
.pf__meta-lead {
  margin-top: 0.4rem;
  font-family: var(--font-text);
  font-size: 0.85rem;
  opacity: 0.7;
  max-width: 40rem;
}
.pf__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.6rem;
  font-family: var(--font-text);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--c-burnt);
  color: var(--c-burnt);
}
.pf__badge i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-rose);
  animation: blip 1.4s infinite;
}
.pf__meta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.5rem;
  font-family: var(--font-text);
  font-size: 0.8rem;
  color: var(--c-burnt);
}
.pf__meta-link svg { width: 12px; height: 12px; }

/* --- the two-device grid --- */
.pf__stage {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: stretch;
}
@media (min-width: 1024px) {
  .pf__stage {
    grid-template-columns: 360px 1fr;
    gap: 2.5rem;
  }
}

/* --- iPhone frame (real device PNG/WEBP overlay, same as the app) ---
   The screen content sits BEHIND the frame (z-0), inset to the frame's
   transparent screen cutout; the frame image (bezel + Dynamic Island +
   buttons) overlays on top (z-10). Insets match iphone-frame.webp. */
.pf-phone {
  position: relative;
  width: 100%;
  max-width: 340px;
  margin-inline: auto;
  aspect-ratio: 393 / 803;
  filter: drop-shadow(0 34px 60px rgba(0, 77, 99, 0.3));
}
.pf-phone__screen {
  position: absolute;
  top: 2%;
  left: 5%;
  right: 5%;
  bottom: 2%;
  border-radius: 8.5%;
  overflow: hidden;
  background: #000;
  z-index: 0;
}
.pf-phone__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 10;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* iOS status bar */
.ios-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.15rem 1.5rem 0.15rem;
  flex-shrink: 0;
}
.ios-bar__time {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.02em;
}
.ios-bar__icons { display: flex; align-items: center; gap: 5px; }

/* iPhone home screen — app grid + dock */
.ios-home {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(160deg, #1a0a2e 0%, #0d1a35 55%, #001520 100%);
}
.ios-apps {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-content: start;
  gap: 1rem 0.25rem;
  padding: 1.25rem 1rem 0;
}
.ios-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
}
.ios-app__icon {
  width: 54px;
  height: 54px;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
.ios-app__icon svg { width: 100%; height: 100%; }
.ios-app__name {
  max-width: 100%;
  font-family: var(--font-text);
  font-size: 9px;
  color: rgba(255, 255, 255, 0.78);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ios-dock {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 0.5rem;
  margin: 0 1rem 1.25rem;
  padding: 0.75rem;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.ios-dock__app {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.ios-dock__app:hover { transform: scale(1.08); }
.ios-dock__app:active { transform: scale(0.94); }
.ios-dock__app svg { width: 24px; height: 24px; }

/* ---- in-phone mini apps (dock: Stacks / Photos) -------------------- */
.ios-mini {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, #0d1a35 0%, #001520 70%, #00202b 100%);
  color: var(--c-white);
}
.ios-mini__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
}
.ios-mini__back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: var(--c-white);
  cursor: pointer;
}
.ios-mini__back svg { width: 16px; height: 16px; }
.ios-mini__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.ios-mini__body {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0.9rem 1.25rem;
  scrollbar-width: none;
}
.ios-mini__body::-webkit-scrollbar { display: none; }

/* Stacks app */
.ios-stack { display: flex; flex-direction: column; gap: 1rem; }
.ios-stack__label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--c-teal-soft);
}
.ios-stack__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ios-stack__chip {
  padding: 0.3rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}

/* Photos app */
.ios-photos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}
.ios-shot {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  text-align: left;
}
button.ios-shot { cursor: pointer; }
.ios-shot img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top;
}
.ios-shot__name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.62rem;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.85);
}
.ios-shot__name i {
  font-style: normal;
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  color: var(--c-teal-soft);
}

/* ---- in-phone Messages app (iMessage-style contact chat) ----------- */
.ios-msgs {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #000;
  color: #fff;
}
.ios-msgs__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.75rem 0.55rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(28, 28, 30, 0.85);
}
.ios-msgs__back {
  position: absolute;
  left: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
}
.ios-msgs__back svg { width: 15px; height: 15px; }
.ios-msgs__contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}
.ios-msgs__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(180deg, #9a9fa8, #7d818a);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
}
.ios-msgs__peer {
  font-family: var(--font-text);
  font-size: 9px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.85);
}
.ios-msgs__thread {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  padding: 0.75rem 0.75rem 0.5rem;
  scrollbar-width: none;
}
.ios-msgs__thread::-webkit-scrollbar { display: none; }
.ios-msgs__stamp {
  margin: 0.25rem 0 0.5rem;
  text-align: center;
  font-family: var(--font-text);
  font-size: 9px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.4);
}
.ios-msg {
  max-width: 80%;
  width: fit-content;
  padding: 0.45rem 0.7rem;
  border-radius: 16px;
  font-family: var(--font-text);
  font-size: 0.76rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  animation: ios-msg-pop 0.25s ease both;
}
.ios-msg--in {
  align-self: flex-start;
  background: #26262b;
  color: #fff;
  border-bottom-left-radius: 5px;
}
.ios-msg--out {
  align-self: flex-end;
  background: linear-gradient(180deg, #3f8ef7, #0a7bff);
  color: #fff;
  border-bottom-right-radius: 5px;
}
@keyframes ios-msg-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.92); }
  to   { opacity: 1; transform: none; }
}
/* three-dot typing indicator */
.ios-msg--typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0.6rem 0.75rem;
}
.ios-msg--typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  animation: ios-typing 1.2s ease-in-out infinite;
}
.ios-msg--typing span:nth-child(2) { animation-delay: 0.15s; }
.ios-msg--typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ios-typing {
  0%, 60%, 100% { opacity: 0.35; transform: none; }
  30% { opacity: 1; transform: translateY(-2px); }
}
/* Sending… / Delivered / Not delivered under the last outgoing bubble */
.ios-msg__status {
  align-self: flex-end;
  margin: 1px 6px 0;
  font-family: var(--font-text);
  font-size: 9px;
  color: rgba(255, 255, 255, 0.45);
}
.ios-msg__status.is-error { color: #ff6b6b; }
/* compose bar */
.ios-msgs__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem 1rem;
  flex-shrink: 0;
}
.ios-msgs__input {
  flex: 1;
  min-width: 0;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-family: var(--font-text);
  font-size: 0.76rem;
  outline: none;
}
.ios-msgs__input::placeholder { color: rgba(255, 255, 255, 0.35); }
.ios-msgs__input:focus { border-color: rgba(255, 255, 255, 0.4); }
.ios-msgs__send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: #0a7bff;
  color: #fff;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.ios-msgs__send:hover:not(:disabled) { transform: scale(1.08); }
.ios-msgs__send:disabled { opacity: 0.35; cursor: default; }
.ios-msgs__send svg { width: 13px; height: 13px; }
@media (prefers-reduced-motion: reduce) {
  .ios-msg { animation: none; }
  .ios-msg--typing span { animation: none; }
}

/* screen holding a live client iframe */
.ios-site {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #fff;
}
.ios-site__view {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: #fff;
}
.ios-site__view iframe {
  position: absolute;
  inset: 0;
  width: calc(100% + 18px);
  height: 100%;
  border: 0;
}

/* Hide the embedded sites' scrollbars, two layers deep:
   1. scrollbar-width on the <iframe> propagates to the framed document's
      viewport scrollbar in modern browsers (devsteem-app approach);
   2. the frames are also one scrollbar-width wider than their clipping
      wrapper, so scrollbars from the sites' own inner scroll containers
      (which propagation can't reach) get cropped out of view. */
.ios-site__view iframe,
.pf-browser__view iframe {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ios-site__view iframe::-webkit-scrollbar,
.pf-browser__view iframe::-webkit-scrollbar {
  display: none;
}

/* --- browser frame --- */
.pf-browser {
  display: flex;
  flex-direction: column;
  min-height: 520px;
  border: 1px solid rgba(0, 61, 77, 0.14);
  border-radius: 14px;
  background: var(--c-white);
  box-shadow: 0 18px 44px rgba(0, 61, 77, 0.14);
  overflow: hidden;
}
@media (min-width: 1024px) {
  .pf-browser { min-height: 100%; }
}
.pf-browser__bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.9rem;
  flex-shrink: 0;
  background: #eef1f1;
  border-bottom: 1px solid rgba(0, 61, 77, 0.08);
}
.pf-browser__dots { display: flex; gap: 6px; flex-shrink: 0; }
.pf-browser__dots span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}
/* back / forward / reload — macOS Chrome toolbar controls */
.pf-browser__nav {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}
.pf-browser__nav span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 12px;
  color: rgba(0, 61, 77, 0.4);
}
.pf-browser__nav span:hover { background: rgba(0, 61, 77, 0.06); }
.pf-browser__url {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.8rem;
  background: var(--c-white);
  border: 1px solid rgba(0, 61, 77, 0.1);
  border-radius: 8px;
  font-family: var(--font-text);
  font-size: 11px;
  color: rgba(0, 61, 77, 0.62);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf-browser__url svg { width: 11px; height: 11px; opacity: 0.5; flex-shrink: 0; }
.pf-browser__view {
  position: relative;
  flex: 1;
  min-height: 320px;
  background: var(--c-white);
  overflow: hidden;
}
.pf-browser__view iframe {
  width: calc(100% + 18px);
  height: 100%;
  border: 0;
}

/* browser idle "tap a project" state */
.pf-idle {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 2rem;
  text-align: center;
}
.pf-idle__hint {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-text);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(0, 61, 77, 0.3);
}
.pf-idle__hint svg { width: 50px; height: 18px; }
.pf-idle__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--c-brown);
}
.pf-idle__sub {
  max-width: 20rem;
  font-family: var(--font-text);
  font-size: 0.8rem;
  line-height: 1.7;
  color: rgba(0, 61, 77, 0.5);
}
.pf-idle__dots { display: flex; gap: 0.5rem; }
.pf-idle__dots i { width: 7px; height: 7px; border-radius: 50%; }

/* loading placeholder inside a device */
.pf-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: var(--c-white);
}
.pf-loading__spin {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(0, 104, 133, 0.18);
  border-top-color: var(--c-burnt);
  animation: pf-spin 0.8s linear infinite;
}
.pf-loading__label {
  font-family: var(--font-text);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(0, 61, 77, 0.4);
}
@keyframes pf-spin { to { transform: rotate(360deg); } }

/* Phone leads on small screens; the desktop browser preview only joins
   the stage from 1024px up (its own base rule sets display:flex) */
.pf-browser { display: none; }
@media (min-width: 1024px) {
  .pf-browser { display: flex; }
}

/* ============================================================
   3. CONTACT — form + live code editor
   ============================================================ */
.contact__inner {
  width: 100%;
  max-width: 1680px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}
@media (min-width: 1024px) {
  .contact__inner { padding-inline: 4rem; }
}
.contact__panel {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid rgba(0, 61, 77, 0.14);
  background: var(--c-white);
  overflow: hidden;
}
@media (min-width: 1024px) {
  .contact__panel { grid-template-columns: 1fr 1fr; }
}
.contact__form-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.5rem 1.75rem;
}
@media (min-width: 768px) {
  .contact__form-col { padding: 3.5rem 3rem; }
}
.contact__title {
  margin: 1.25rem 0 2rem;
  text-transform: uppercase;
}
.contact__code-col {
  display: none;
  padding: 3.5rem 3rem;
  border-left: 1px solid rgba(0, 104, 133, 0.1);
  align-items: center;
}
@media (min-width: 1024px) {
  .contact__code-col { display: flex; }
}

/* form fields */
.contact-form { display: flex; flex-direction: column; gap: 1.5rem; }
.contact-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 576px) {
  .contact-form__row { grid-template-columns: 1fr 1fr; }
}
.contact-field { display: flex; flex-direction: column; gap: 0.5rem; }
.contact-field label {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.03em;
}
.contact-field label span { color: var(--c-rose); }
.contact-field input,
.contact-field select,
.contact-field textarea {
  width: 100%;
  padding: 0.8rem 0.9rem;
  font-family: var(--font-text);
  font-size: 0.9rem;
  color: var(--c-brown);
  background: rgba(0, 104, 133, 0.04);
  border: 1px solid rgba(0, 61, 77, 0.18);
  outline: none;
  transition: border-color 0.2s ease, background-color 0.2s ease,
    box-shadow 0.2s ease;
}
.contact-field textarea { resize: vertical; min-height: 7rem; }
.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: var(--c-brown);
  opacity: 0.4;
}
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  background: var(--c-white);
  border-color: var(--c-rose);
  box-shadow: 0 0 0 3px rgba(0, 168, 204, 0.12);
}
.contact-field select { cursor: pointer; appearance: none; }
/* native select steps aside once the branded dropdown is built */
.contact-field select[data-dd] { display: none; }

/* ---- branded dropdown (replaces the native service select) -------- */
.dd { position: relative; }
.dd__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.8rem 0.9rem;
  font-family: var(--font-text);
  font-size: 0.9rem;
  text-align: left;
  color: var(--c-brown);
  background: rgba(0, 104, 133, 0.04);
  border: 1px solid rgba(0, 61, 77, 0.18);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease,
    box-shadow 0.2s ease;
}
.dd__trigger:focus-visible,
.dd.is-open .dd__trigger {
  outline: none;
  background: var(--c-white);
  border-color: var(--c-rose);
  box-shadow: 0 0 0 3px rgba(0, 168, 204, 0.12);
}
.dd__value--placeholder { opacity: 0.4; }
.dd__chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.6;
  transition: transform 0.2s ease;
}
.dd.is-open .dd__chevron { transform: rotate(180deg); }
.dd__list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  max-height: 280px;
  overflow-y: auto;
  background: var(--c-white);
  border: 1px solid rgba(0, 61, 77, 0.18);
  box-shadow: 0 18px 40px rgba(0, 61, 77, 0.18);
}
.dd__option {
  padding: 0.65rem 0.75rem;
  font-family: var(--font-text);
  font-size: 0.85rem;
  color: var(--c-brown);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.dd__option::before {
  content: "> ";
  opacity: 0;
  transition: opacity 0.15s ease;
}
.dd__option:hover::before,
.dd__option[aria-selected="true"]::before { opacity: 0.7; }
.dd__option:hover {
  background: rgba(0, 168, 204, 0.1);
}
.dd__option[aria-selected="true"] {
  color: var(--c-burnt);
  background: rgba(0, 168, 204, 0.14);
}
.contact-form__submit {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 0.7rem 1.5rem;
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c-white);
  background: var(--c-brown);
  border: 1px solid var(--c-brown);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.contact-form__submit::before { content: "> "; opacity: 0.6; }
.contact-form__submit:hover:not(:disabled) {
  background: var(--c-burnt);
  border-color: var(--c-burnt);
}
.contact-form__submit:disabled { opacity: 0.6; cursor: wait; }

/* success state */
.contact-done {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.contact-done__card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.1rem 1.25rem;
  background: rgba(0, 168, 204, 0.08);
  border: 1px solid rgba(0, 104, 133, 0.25);
}
.contact-done__tick {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border: 2px solid var(--c-burnt);
  color: var(--c-burnt);
  font-size: 1rem;
}
.contact-done__card strong {
  font-family: var(--font-display);
  color: var(--c-brown);
}
.contact-done__card p { font-size: 0.8rem; opacity: 0.7; }
.contact-done__again {
  align-self: flex-start;
  font-family: var(--font-text);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-burnt);
  cursor: pointer;
}

/* live code editor */
.code-editor {
  width: 100%;
  overflow: hidden;
  background: #f7fafb;
  border: 1px solid rgba(0, 104, 133, 0.12);
  box-shadow: 0 4px 28px rgba(0, 77, 99, 0.07);
  font-family: var(--font-text);
  font-size: 13px;
}
.code-editor__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.9rem;
  background: #eef3f4;
  border-bottom: 1px solid rgba(0, 104, 133, 0.08);
}
.code-editor__dots { display: flex; gap: 6px; }
.code-editor__dots span { width: 11px; height: 11px; border-radius: 50%; }
.code-editor__name {
  margin-left: 0.4rem;
  font-size: 11px;
  color: rgba(0, 77, 99, 0.4);
}
.code-editor__body { padding: 1rem 0; }
.code-line {
  display: flex;
  align-items: baseline;
  padding: 0.1rem 1rem;
}
.code-line__no {
  flex-shrink: 0;
  width: 20px;
  margin-right: 1.5rem;
  text-align: right;
  font-size: 12px;
  color: rgba(0, 77, 99, 0.22);
  user-select: none;
}
.code-line__code { white-space: pre-wrap; word-break: break-word; }
.tok-dim { color: rgba(0, 61, 77, 0.38); }
.tok-fn { color: var(--c-burnt); }
.tok-str { color: var(--c-rose); }
.tok-val { color: #004d63; }
.tok-name { color: #006885; }
.tok-company { color: #00897b; }
.tok-service { color: #7c6bb0; }
.tok-email { color: #00a8cc; }
.tok-message { color: #007a9e; }
.tok-date { color: rgba(0, 77, 99, 0.4); }

/* ---- Contact on the dark field ------------------------------------
   When #contact carries .slab--dark it continues the scene's dark
   backdrop down to the footer. The form + editor go dark so the white
   header and copy read cleanly over the whole section. ---------------- */

/* Fade the section's bottom edge into the pinned scene so the flat dark
   field merges smoothly into the CTA band's live gradient below it, instead
   of meeting it at a hard line. (The scene is pinned behind this section, so
   the transparent tail reveals the same gradient the CTA band shows.) */
.contact.slab--dark {
  background-color: transparent;
  background-image: linear-gradient(
    to bottom,
    var(--c-brown) 0%,
    var(--c-brown) 78%,
    var(--c-brown-fade) 100%
  );
}
.contact.slab--dark .contact__panel {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.14);
}
.contact.slab--dark .contact__code-col {
  border-left-color: rgba(255, 255, 255, 0.1);
}
.contact.slab--dark .contact__title { color: var(--c-white); }
.contact.slab--dark .contact-field label { color: var(--c-white); }
.contact.slab--dark .contact-field label span { color: var(--c-rose); }
.contact.slab--dark .contact-field input,
.contact.slab--dark .contact-field select,
.contact.slab--dark .contact-field textarea {
  color: var(--c-white);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.18);
}
.contact.slab--dark .contact-field input::placeholder,
.contact.slab--dark .contact-field textarea::placeholder {
  color: rgba(255, 255, 255, 0.45);
}
.contact.slab--dark .contact-field input:focus,
.contact.slab--dark .contact-field select:focus,
.contact.slab--dark .contact-field textarea:focus {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--c-rose);
  box-shadow: 0 0 0 3px rgba(0, 168, 204, 0.18);
}
/* native dropdown list stays readable on its own white surface */
.contact.slab--dark .contact-field select option { color: #002b36; }
/* branded dropdown on the dark field */
.contact.slab--dark .dd__trigger {
  color: var(--c-white);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.18);
}
.contact.slab--dark .dd__trigger:focus-visible,
.contact.slab--dark .dd.is-open .dd__trigger {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--c-rose);
  box-shadow: 0 0 0 3px rgba(0, 168, 204, 0.18);
}
.contact.slab--dark .dd__value--placeholder { opacity: 1; color: rgba(255, 255, 255, 0.45); }
.contact.slab--dark .dd__list {
  background: #04222b;
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
}
.contact.slab--dark .dd__option { color: rgba(255, 255, 255, 0.85); }
.contact.slab--dark .dd__option:hover {
  background: rgba(0, 168, 204, 0.14);
  color: var(--c-white);
}
.contact.slab--dark .dd__option[aria-selected="true"] {
  color: var(--c-rose);
  background: rgba(0, 168, 204, 0.18);
}
.contact.slab--dark .contact-form__submit {
  background: var(--c-rose);
  border-color: var(--c-rose);
  color: #002b36;
}
.contact.slab--dark .contact-form__submit:hover:not(:disabled) {
  background: var(--c-teal-soft);
  border-color: var(--c-teal-soft);
}
.contact.slab--dark .contact-done__card {
  background: rgba(0, 168, 204, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}
.contact.slab--dark .contact-done__tick { border-color: var(--c-rose); color: var(--c-rose); }
.contact.slab--dark .contact-done__card strong { color: var(--c-white); }
.contact.slab--dark .contact-done__card p { color: rgba(255, 255, 255, 0.7); }
.contact.slab--dark .contact-done__again { color: var(--c-rose); }

/* dark code editor */
.contact.slab--dark .code-editor {
  background: #05232c;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 34px rgba(0, 0, 0, 0.4);
}
.contact.slab--dark .code-editor__bar {
  background: #08303b;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.contact.slab--dark .code-editor__name { color: rgba(255, 255, 255, 0.4); }
.contact.slab--dark .code-line__no { color: rgba(255, 255, 255, 0.25); }
.contact.slab--dark .tok-dim { color: rgba(255, 255, 255, 0.42); }
.contact.slab--dark .tok-val { color: #7fdfff; }
.contact.slab--dark .tok-date { color: rgba(255, 255, 255, 0.4); }
.contact.slab--dark .tok-fn { color: #34c7e8; }
.contact.slab--dark .tok-str { color: #6fe3ff; }
.contact.slab--dark .tok-name { color: #4dd0e1; }
.contact.slab--dark .tok-company { color: #4db6ac; }
.contact.slab--dark .tok-service { color: #b7a8e8; }
.contact.slab--dark .tok-email { color: #00d4ff; }
.contact.slab--dark .tok-message { color: #5bc8e0; }