/* ==========================================================================
   Portfolia
   1. Tokens
   2. Reset & base
   3. Layout frame (rules + crosshairs)
   4. Primitives (pills, tags, buttons)
   5. Navbar
   6. Hero
   7. Ticker (projects)
   8. About / stats / stack / experience
   9. Services
   10. Process
   11. Testimonials
   12. FAQ
   13. Contact
   14. Marquee + footer
   15. Cursor, reveal, reduced motion
   16. Responsive
   ========================================================================== */

/* -------------------------------------------------------------- 1. Tokens */

:root {
  --accent: #1fc0cc;

  --bg: #ffffff;
  --panel: #f5f5f3;
  --ink: #0b0b0b;
  --muted: #75756f;
  --line: #e6e6e1;
  --shadow: 0 18px 40px -24px rgb(0 0 0 / 0.45);

  --display: "Anton", "Arial Narrow", Impact, sans-serif;
  --ui: "Oswald", "Arial Narrow", sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --frame: 1360px;
  --pad: clamp(20px, 4vw, 56px);
  --gap: clamp(24px, 4vw, 56px);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

[data-theme="dark"] {
  --bg: #0c0c0c;
  --panel: #161616;
  --ink: #f2f2ef;
  --muted: #8b8b85;
  --line: #242422;
  --shadow: 0 18px 40px -24px rgb(0 0 0 / 0.8);
}

/* --------------------------------------------------------- 2. Reset & base */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition:
    background 0.4s var(--ease),
    color 0.4s var(--ease);
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  padding: 0;
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: inherit;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

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

.skip {
  /* Off-screen via a huge negative offset is an LTR-only trick — under
     dir="rtl" the "forward" scroll direction flips, so that offset lands
     inside the document's scrollable area instead of outside it and blows
     scrollWidth out by ~10000px. Clip-based hiding has no such direction
     dependency, so it stays correctly invisible either way. */
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  z-index: 200;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--bg);
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip:focus {
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  inset-inline-start: 12px;
  top: 12px;
}

/* Display type ------------------------------------------------------------ */
.display {
  font-family: var(--display);
  font-weight: 400;
  line-height: 0.84;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}

.sec__title {
  font-family: "Big Shoulders", sans-serif;
  font-weight: 600;
  font-size: clamp(2.6rem, 7.5vw, 6rem);
  line-height: 0.86;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}

.eyebrow {
  font-family: var(--ui);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.lede {
  max-width: 46ch;
  color: var(--muted);
  font-size: 1.02rem;
}

/* ------------------------------------------------- 3. Layout frame */
.frame {
  position: relative;
  width: 100%;
  max-width: var(--frame);
  margin-inline: auto;
  border-inline: 1px solid var(--line);
}

.sec {
  position: relative;
  border-top: 1px solid var(--line);
}

.sec:first-of-type {
  border-top: 0;
}

/* The sparkle markers sitting on the frame corners. Also applies to the
   BusinessPortal topbar — it's a .frame too, just not nested in a .sec. */
.sec > .frame::before,
.sec > .frame::after,
.bp-topbar.frame::before,
.bp-topbar.frame::after {
  content: "";
  position: absolute;
  top: -7px;
  width: 13px;
  height: 13px;
  pointer-events: none;
  background-image: url("../image/star.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.sec > .frame::before,
.bp-topbar.frame::before {
  left: -7px;
}
.sec > .frame::after,
.bp-topbar.frame::after {
  right: -7px;
}

.sec--flush > .frame {
  padding: 0;
}

.pad {
  padding: clamp(56px, 9vw, 130px) var(--pad);
}
.pad-sm {
  padding: clamp(36px, 5vw, 64px) var(--pad);
}

/* Section head: title left, action right ---------------------------------- */
.sec__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* ------------------------------------------------------- 4. Primitives */
.pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 32px;
  border-radius: 999px;
  font-family: var(--ui);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
}

.pill:hover {
  transform: translateY(-2px);
}

.pill__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent);
  animation: ping 2.4s var(--ease) infinite;
}

@keyframes ping {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
  }
  70% {
    box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent) 0%, transparent);
  }
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent);
  }
}

.pill--dark {
  background: var(--ink);
  color: var(--bg);
  box-shadow: 0 10px 26px -14px
    color-mix(in srgb, var(--accent) 70%, transparent);
}
.pill--dark:hover {
  box-shadow: 0 16px 34px -14px
    color-mix(in srgb, var(--accent) 85%, transparent);
}

.pill--accent {
  background: var(--accent);
  color: #04201f;
  box-shadow: 0 12px 30px -12px
    color-mix(in srgb, var(--accent) 85%, transparent);
}
.pill--accent .pill__dot {
  background: #04201f;
}
.pill--accent:hover {
  box-shadow: 0 20px 40px -14px
    color-mix(in srgb, var(--accent) 95%, transparent);
}

.pill--ghost {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
}
.pill--ghost:hover {
  box-shadow: 0 10px 26px -14px color-mix(in srgb, var(--ink) 30%, transparent);
}

.pill--lg {
  padding: 16px 30px;
  font-size: 1rem;
}

.tag {
  display: inline-block;
  padding: 7px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  font-family: var(--ui);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  white-space: nowrap;
}

/* ---------------------------------------------------------- 5. Navbar */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: padding 0.3s var(--ease);
}

.nav__frame {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 16px clamp(14px, 3vw, 30px);
}

.nav.is-stuck .nav__frame {
  padding-block: 10px;
}

.nav__left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav__burger {
  display: none;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-direction: column;
}
.nav__burger span {
  width: 16px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.nav__burger.is-open span:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}
.nav__burger.is-open span:nth-child(2) {
  opacity: 0;
}
.nav__burger.is-open span:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}

.mobile-menu {
  display: none;
}

.subscribe-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  place-items: center;
}
.subscribe-modal.is-open {
  display: grid;
}
.subscribe-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.5);
  backdrop-filter: blur(4px);
}
.subscribe-modal__box {
  position: relative;
  z-index: 1;
  width: min(92vw, 420px);
  padding: clamp(28px, 4vw, 40px);
  border-radius: 20px;
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.4);
}
.subscribe-modal__close {
  position: absolute;
  top: 16px;
  inset-inline-end: 16px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--line);
  font-size: 1.2rem;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
}
.subscribe-modal__input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  font-family: var(--ui);
  font-size: 0.9rem;
  color: var(--ink);
}
.subscribe-modal__status {
  margin-top: 12px;
  font-size: 0.82rem;
  color: var(--muted);
  min-height: 1.2em;
}
.subscribe-modal__status.is-error {
  color: #e0483f;
}

.auth-form {
  max-width: 420px;
  display: grid;
  gap: 14px;
}
.auth-form__field {
  position: relative;
}
.auth-form__field svg {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.auth-form__field .auth-form__input {
  padding-left: 44px;
}
.auth-form__input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg);
  font-family: var(--ui);
  font-size: 0.9rem;
  color: var(--ink);
}
.auth-form__error {
  font-family: var(--ui);
  font-size: 0.85rem;
  color: #e0483f;
}
.auth-form__hint {
  font-family: var(--ui);
  font-size: 0.85rem;
  color: var(--muted);
}
.auth-form__hint a {
  color: var(--ink);
  text-decoration: underline;
}

.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.dashboard-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-family: var(--ui);
  font-size: 0.85rem;
}
.dashboard-table th,
.dashboard-table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.dashboard-table th {
  color: var(--muted);
  font-weight: 500;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dashboard-table td {
  color: var(--ink);
}

.bp-pager {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
}
.bp-pager__status {
  font-family: var(--ui);
  font-size: 0.85rem;
  color: var(--muted);
}

.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--ui);
  font-size: 0.78rem;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
}
.badge--green {
  background: rgba(31, 174, 92, 0.6);
}
.badge--yellow {
  background: rgba(214, 155, 20, 0.65);
}
.badge--red {
  background: rgba(224, 72, 63, 0.65);
}
.badge--gray {
  background: rgba(120, 120, 120, 0.6);
}

.nav__socials {
  display: flex;
  gap: 6px;
}

.nav__socials a {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-family: var(--ui);
  font-size: 0.78rem;
  color: var(--muted);
}

.nav__socials a svg {
  transition: transform 0.25s var(--ease);
}
.nav__socials a:hover svg {
  transform: scale(1.25);
}

.nav__center {
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 34px);
}

/* Letter-by-letter roll on hover */
.nav__link {
  position: relative;
  overflow: hidden;
  display: block;
  height: 1.4em;
  line-height: 1.4;
  font-family: var(--ui);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.nav__letters {
  display: flex;
}

.nav__letters span {
  display: inline-block;
  transition: transform 0.42s var(--ease);
  transition-delay: calc(var(--i) * 22ms);
}

.nav__letters--ghost {
  position: absolute;
  inset: 0;
  color: var(--accent);
}
.nav__letters--ghost span {
  transform: translateY(100%);
}

.nav__link:hover .nav__letters span,
.nav__link:focus-visible .nav__letters span {
  transform: translateY(-100%);
}

.nav__link:hover .nav__letters--ghost span,
.nav__link:focus-visible .nav__letters--ghost span {
  transform: translateY(0);
}

.nav__link.is-active {
  color: var(--accent);
}

.nav__link--services .nav__letters--ghost {
  color: #22c55e;
}
.nav__link--services.is-active {
  color: #22c55e;
}

.nav__link--projects .nav__letters--ghost {
  color: #ef4444;
}
.nav__link--projects.is-active {
  color: #ef4444;
}

.nav__mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
}

.nav__mark img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--panel);
}

.nav__ring {
  position: absolute;
  inset: 0;
  border: 1.5px dashed var(--accent);
  border-radius: 50%;
  animation: spin 9s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.nav__right {
  display: flex;
  justify-content: flex-end;
}

.toggle {
  width: 52px;
  height: 28px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
}

.toggle__knob {
  position: relative;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ink);
  transition: transform 0.35s var(--ease);
}

[data-theme="dark"] .toggle__knob {
  transform: translateX(24px);
}

.toggle__icon {
  grid-area: 1 / 1;
  color: var(--bg);
  opacity: 1;
  transition: opacity 0.3s var(--ease);
}

.toggle__icon--moon {
  opacity: 0;
}

[data-theme="dark"] .toggle__icon--sun {
  opacity: 0;
}
[data-theme="dark"] .toggle__icon--moon {
  opacity: 1;
}

/* GitHub/X/Email use near-black brand colors baked into the SVG's fill
   attribute — correct against the light-mode panel background, but they
   vanish against the dark-mode panel. Swap just these three to a light
   color in dark mode; the others (LinkedIn blue, Instagram gradient) read
   fine on both. */
[data-theme="dark"] .social-icon--github path,
[data-theme="dark"] .social-icon--x path,
[data-theme="dark"] .social-icon--email path {
  fill: #f2f2f2;
}

/* The nav mark icon (manager.png / repairing-service.png) is a solid
   black shape — keep its backdrop white in dark mode so it stays readable
   instead of blending into the dark panel color. */
[data-theme="dark"] .nav__mark img {
  background: #fff;
}

.nav__home {
  grid-column: 2;
  justify-self: center;
  font-family: var(--ui);
  font-size: 0.8rem;
  color: var(--muted);
}
.nav__home.is-active {
  color: var(--accent);
}

/* ------------------------------------------------------------- 6. Hero */
.hero__inner {
  display: grid;
  justify-items: center;
  gap: clamp(18px, 3vw, 30px);
  text-align: center;
  padding-block: clamp(36px, 5vw, 64px);
}
/* Home uses .hero__inner as its SECOND section — the eyebrow section above
   it already clears the fixed nav with its own tall padding. Pages that use
   .hero__inner as the very first section (404) need that clearance here
   instead, since there's nothing above it to provide it. */
.hero__inner--standalone {
  padding-top: clamp(130px, 18vh, 200px);
}

.hero__eyebrow-inner {
  position: relative;
  padding: clamp(120px, 16vh, 190px) var(--pad) clamp(36px, 5vw, 64px);
}

.hero__eyebrow {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  z-index: 1;
  padding: 7px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  font-family: var(--ui);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

.hero__title {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(8px, 1.6vw, 22px);
  font-size: calc(clamp(2.9rem, 10.5vw, 8.6rem) * var(--title-scale, 1));
}

.hero__title.is-fit {
  flex-wrap: nowrap;
  white-space: nowrap;
}

.hero__face-wrap {
  flex-shrink: 0;
}

.hero__face {
  width: clamp(56px, 11vw, 150px);
  height: clamp(56px, 11vw, 150px);
  border-radius: 50%;
  object-fit: cover;
  background: var(--panel);
  flex-shrink: 0;
}

.hero__text {
  max-width: 42ch;
  color: var(--muted);
}

.hero__cta-inner {
  display: flex;
  justify-content: center;
  padding: clamp(22px, 3vw, 40px) var(--pad);
}

.hero__cta-btn {
  position: relative;
  overflow: hidden;
  color: #fff;
  box-shadow:
    0 8px 20px -6px rgb(0 0 0 / 0.25),
    0 4px 14px -4px rgb(148 212 255 / 0.5);
  transition:
    box-shadow 0.35s var(--ease),
    color 0.35s var(--ease);
}

.hero__cta-btn span,
.hero__cta-btn .pill__dot {
  position: relative;
  z-index: 1;
}

.hero__cta-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border-radius: 50%;
  background: #cffaff;
  transform: scale(0);
  transition: transform 0.5s var(--ease);
  z-index: 0;
}

.hero__cta-btn:hover {
  color: #000;
  box-shadow:
    0 14px 30px -8px rgb(0 0 0 / 0.3),
    0 6px 20px -4px rgb(148 212 255 / 0.65);
}

.hero__cta-btn:hover::before {
  transform: scale(20);
}

/* -------------------------------------------------- 7. Ticker (projects) */
.ticker {
  overflow: hidden;
  border-top: 1px solid var(--line);
}

.projects-preview {
  display: none;
}

.ticker__track {
  display: flex;
  gap: 0;
  width: max-content;
  will-change: transform;
  direction: ltr;
}

.card {
  --card-pad: clamp(14px, 2vw, 24px);
  position: relative;
  flex: 0 0 auto;
  width: clamp(340px, 42vw, 560px);
  padding-block: clamp(28px, 4vw, 48px);
}

.ticker .card + .card {
  border-left: 1px solid var(--line);
}

.card__media {
  position: relative;
  overflow: hidden;
  height: 400px;
  padding: var(--card-pad);
  background: var(--bg);
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 32px;
  box-shadow:
    rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
    rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  transition: transform 0.8s var(--ease);
}

.card:hover .card__media img {
  transform: scale(1.05);
}

.card__media::after {
  content: "";
  position: absolute;
  inset: auto var(--card-pad) var(--card-pad);
  height: 40%;
  border-radius: 0 0 12px 12px;
  pointer-events: none;
}

.card__view,
.projects-card__view {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgb(255 255 255 / 0.35);
  color: #fff;
  font-family: var(--ui);
  font-size: 0.84rem;
  letter-spacing: 0.02em;
  opacity: 0;
  pointer-events: none;
}

.card__meta {
  position: absolute;
  inset: auto var(--card-pad) calc(var(--card-pad) + 10px)
    calc(var(--card-pad) + 10px);
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.card__name {
  font-family: var(--display);
  font-size: 1.6rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #fff;
}

.card__cat {
  font-family: var(--ui);
  font-size: 0.78rem;
  color: rgb(255 255 255 / 0.75);
}
.card__cat::before {
  content: "• ";
  color: var(--accent);
}

/* ------------------------------- 8. About / stats / stack / experience */
.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr);
}

.about__col {
  display: grid;
  min-width: 0;
}

.about__col--side {
  align-self: start;
  align-content: start;
}

.about__col--side > * {
  padding: clamp(24px, 3.4vw, 42px) clamp(18px, 2.4vw, 30px);
  border-bottom: 1px solid var(--line);
}
.about__col--side > *:last-child {
  border-bottom: 0;
}

.about__col--mid .sec__title {
  display: grid;
  place-items: center;
  width: 100%;
  font-size: clamp(1.9rem, 3.6vw, 3.2rem);
  max-width: 100%;
  padding-inline: clamp(18px, 2.4vw, 30px);
  border-bottom: 1px solid var(--line);
  box-sizing: border-box;
}

.about__col--mid {
  min-width: 0;
  border-inline: 1px solid var(--line);
  justify-items: center;
  align-content: start;
  padding: 0 var(--pad) clamp(30px, 4vw, 60px);
  text-align: center;
}

.stat__value {
  font-family: var(--display);
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1;
}

.stat__label {
  font-family: var(--ui);
  font-size: 0.84rem;
  color: var(--muted);
}

.about__figure {
  display: grid;
  gap: 14px;
  justify-items: center;
  min-width: 0;
  padding-top: clamp(40px, 5vw, 72px);
}

.about__portrait-wrap {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
}

.bubble {
  position: absolute;
  top: 1%;
  right: 1%;
  z-index: 2;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  font-family: var(--ui);
  font-size: 0.72rem;
  white-space: nowrap;
}

.about__portrait-video {
  display: none;
}

.about__portrait-wrap {
  position: relative;
  overflow: visible;
}

.about__portrait {
  position: relative;
  z-index: 0;
  width: min(92%, 560px);
  max-height: 700px;
  object-fit: contain;
  border-radius: 20px;
  transform: scale(2);
  transform-origin: center;
  padding-top: 20px;
}

/* Stack + experience panels */
.panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr);
}



.panel:first-child {
  grid-column: 1;
}
.panel:last-child {
  grid-column: 3;
}

.panels__mid {
  grid-column: 2;
  grid-row: 1;
  border-inline: 1px solid var(--line);
}

.panel__head {
  padding: 16px clamp(18px, 2.4vw, 30px);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  font-family: var(--ui);
  font-size: 0.95rem;
  font-weight: 500;
}

.panel__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px clamp(18px, 2.4vw, 30px);
  border-bottom: 1px solid var(--line);
}
.panel__row:last-child {
  border-bottom: 0;
}

.panel__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  overflow: hidden;
}
.panel__icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.panel__name {
  font-family: var(--ui);
  font-weight: 500;
  line-height: 1.25;
}
.panel__sub {
  font-size: 0.84rem;
  color: var(--muted);
}

.panel__row--exp {
  display: block;
}
.panel__sub--exp {
  display: block;
  margin-top: 4px;
}
.panel__sub--exp::before {
  content: "→ ";
  color: var(--accent);
}
.panel__years {
  display: block;
  margin-top: 4px;
  font-family: var(--ui);
  font-size: 0.82rem;
  color: var(--muted);
}
.panel__years::before {
  content: "→ ";
  color: var(--accent);
}

/* --------------------------------------------------------- 9. Services */
.service {
  position: relative;
  display: grid;
  grid-template-columns: 68px auto 1fr 34px;
  align-items: center;
  gap: clamp(12px, 2vw, 26px);
  width: 100%;
  padding: clamp(20px, 2.6vw, 30px) var(--pad);
  border-bottom: 1px solid var(--line);
  text-align: left;
  transition: background 0.4s var(--ease);
}

.service__preview {
  position: absolute;
  top: 50%;
  right: 160px;
  z-index: 2;
  width: 260px;
  height: 190px;
  object-fit: cover;
  background: none;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.service__preview--sm {
  width: 170px;
  height: 170px;
  object-fit: contain;
}

.service:hover {
  background: var(--panel);
}

.service .tag {
  justify-self: start;
  margin-left: clamp(0px, 4vw, 60px);
}
.service__plus {
  justify-self: end;
}

.service__num {
  font-family: var(--ui);
  font-size: 0.9rem;
  color: var(--muted);
}

.service__title {
  font-family: "Big Shoulders", sans-serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.service__plus {
  position: relative;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition:
    transform 0.45s var(--ease),
    background 0.3s var(--ease),
    border-color 0.3s var(--ease);
}
.service__plus::before,
.service__plus::after {
  content: "";
  position: absolute;
  inset: 50% 9px;
  border-top: 1.5px solid currentColor;
}
.service__plus::after {
  transform: rotate(90deg);
  transition: opacity 0.3s var(--ease);
}

.service[aria-expanded="true"] .service__plus {
  transform: rotate(135deg);
  background: var(--accent);
  border-color: var(--accent);
  color: #04201f;
}

.service__body {
  overflow: hidden;
  height: 0;
  border-bottom: 1px solid var(--line);
  transition: height 0.5s var(--ease);
}

.service__inner {
  display: grid;
  gap: 16px;
  padding: 6px var(--pad) clamp(26px, 3vw, 38px) calc(var(--pad) + 68px);
  max-width: 70ch;
}

.service__items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* --------------------------------------------------------- 10. Process */
.process {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.process__list {
  border-right: 1px solid var(--line);
}

.process__media {
  position: sticky;
  top: 120px;
  align-self: start;
  height: 100vh;
  overflow: hidden;
}

.process__video-slot {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 65%;
  height: 60%;
}
.process__video-slot.is-flipped {
  transform: scaleX(-1);
}

.process__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  opacity: 0;
  backface-visibility: hidden;
}
.process__video.is-active {
  opacity: 1;
}

.step {
  position: sticky;
  top: 120px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(28px, 4vw, 52px) clamp(20px, 2.6vw, 36px);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.step:last-child {
  border-bottom: 0;
}
.step:nth-child(1) { z-index: 1; }
.step:nth-child(2) { z-index: 2; background: #dbdbdb; }
.step:nth-child(3) { z-index: 3; }

.step__num {
  font-family: var(--ui);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  color: var(--accent);
}

.step__title {
  margin: 10px 0 12px;
  font-family: "Big Shoulders", sans-serif;
  font-weight: 600;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  text-transform: uppercase;
}

.step__body {
  color: var(--muted);
  font-size: 0.96rem;
}

/* --------------------------------------------------- 11. Testimonials */
.combo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.combo__media {
  position: sticky;
  top: 120px;
  align-self: start;
  height: 100vh;
  border-right: 1px solid var(--line);
  overflow: hidden;
}

.combo__video {
  position: absolute;
  top: 70px;
  left: 0;
  right: 0;
  margin-inline: auto;
  width: 55%;
  height: 60%;
  object-fit: cover;
  border-radius: 12px;
  opacity: 0;
  backface-visibility: hidden;
}
.combo__video.is-active {
  opacity: 1;
}

.combo__block {
  position: sticky;
  top: 120px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(36px, 5vw, 72px) var(--pad);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.combo__block:last-child {
  border-bottom: 0;
}
.combo__block:nth-child(1) { z-index: 1; }
.combo__block:nth-child(2) { z-index: 2; }
.combo__block:nth-child(3) { z-index: 3; }

.price-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  max-width: 360px;
}
@media (max-width: 720px) {
  .price-cards {
    grid-template-columns: 1fr;
  }
  /* The sticky-pinned card-stack (Pricing/FAQ/Contact) assumes each block's
     content fits inside one viewport — two full pricing cards stacked
     no longer does at phone widths, and since a pinned block doesn't
     scroll internally, the rest just becomes unreachable once the next
     block slides over it. Dropping the pin here trades the stacked-card
     effect for plain in-flow scrolling, which has no such ceiling. */
  .combo__block {
    position: relative;
    top: auto;
    min-height: 0;
  }
}

.price-card {
  padding: clamp(20px, 2.4vw, 28px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
}

.price-cards .price__value {
  font-size: clamp(1.9rem, 3.6vw, 2.5rem);
}
.price-cards .price__items {
  margin-top: 16px;
  gap: 10px;
}
.price-cards .price__items li {
  font-size: 0.86rem;
}
.price-cards .price__cta {
  margin-top: auto;
}
.price-cards .price__items {
  margin-bottom: 18px;
}

.price__suffix {
  font-family: var(--ui);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--muted);
}

.price-card__form {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.price-card__select {
  width: 100%;
  max-width: 100%;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg);
  font-family: var(--ui);
  font-size: 0.9rem;
  color: var(--ink);
}
.price-card__form .price__cta {
  margin-top: 0;
  width: 100%;
}

.price__label {
  font-family: var(--ui);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  color: var(--muted);
  margin-bottom: 8px;
}

.price__value {
  font-family: var(--display);
  font-size: clamp(2.6rem, 6vw, 4rem);
  font-weight: 600;
  line-height: 1;
}

.price__items {
  margin-top: 28px;
  display: grid;
  gap: 14px;
}

.price__items li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ui);
  font-size: 0.96rem;
}

.price__items li::before {
  content: "\2713";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #04201f;
  font-size: 0.68rem;
  font-weight: 700;
}

.price__cta {
  margin-top: 28px;
  width: 100%;
  justify-content: center;
}

/* -------------------------------------------------------------- 12. FAQ */
.faq__list {
  padding-block: clamp(12px, 2vw, 20px);
  margin-top: clamp(20px, 3vw, 32px);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding-block: clamp(18px, 2.2vw, 26px);
  border-bottom: 1px solid var(--line);
  font-family: var(--ui);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  font-weight: 500;
  text-align: left;
}

.faq__q:hover {
  color: var(--accent);
}

.faq__icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  position: relative;
  transition: transform 0.45s var(--ease);
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  inset: 50% 5px;
  border-top: 1.5px solid currentColor;
}
.faq__icon::after {
  transform: rotate(90deg);
}

.faq__q[aria-expanded="true"] .faq__icon {
  transform: rotate(135deg);
}
.faq__q[aria-expanded="true"] {
  color: var(--accent);
}

.faq__a {
  overflow: hidden;
  height: 0;
  border-bottom: 1px solid var(--line);
  transition: height 0.5s var(--ease);
}

.faq__a p {
  padding: 4px 0 clamp(22px, 2.6vw, 30px);
  max-width: 62ch;
  color: var(--muted);
}

/* ---------------------------------------------------------- 13. Contact */
.contact__row {
  padding-block: clamp(22px, 3vw, 34px);
  border-bottom: 1px solid var(--line);
}
.contact__row:first-of-type {
  margin-top: clamp(20px, 3vw, 32px);
}
.contact__row:last-child {
  border-bottom: 0;
}

.contact__label {
  font-family: var(--ui);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.contact__value {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--ui);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
}
.contact__value:hover {
  color: var(--accent);
}

.copy {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.copy__hint {
  font-family: var(--body);
  font-size: 0.76rem;
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.copy.is-copied .copy__hint {
  opacity: 1;
  color: var(--accent);
}

.socials-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* ------------------------------------------------- 14. Marquee + footer */
.marquee {
  overflow: hidden;
  padding-block: clamp(14px, 2vw, 26px);
  border-block: 1px solid var(--line);
}

.marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  width: max-content;
  will-change: transform;
  /* The infinite-loop math (translateX wrapping at exactly half the
     doubled track's width) assumes the track lays out LTR — under RTL,
     flex reverses the item order and anchors the track from the opposite
     edge, so the same translateX values slide the whole thing off-screen
     instead of looping. The scroll direction is a decorative motion
     choice, not reading content, so forcing LTR here doesn't affect how
     the (still-RTL) text inside each item renders. */
  direction: ltr;
}

.marquee__item {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  font-family: "Big Shoulders", sans-serif;
  font-weight: 600;
  font-size: clamp(2.6rem, 7vw, 5.4rem);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.marquee__badge {
  display: grid;
  place-items: center;
  height: clamp(44px, 6vw, 84px);
  padding-inline: clamp(18px, 2.4vw, 32px);
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--ui);
  font-size: clamp(0.9rem, 1.4vw, 1.3rem);
  white-space: nowrap;
}

.services-tags__track {
  display: flex;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  width: max-content;
  padding-block: clamp(18px, 2.4vw, 28px);
  will-change: transform;
  /* Same fix as .marquee__track — the translateX wrap-loop math assumes
     an LTR-laid-out track. */
  direction: ltr;
}

.services-tags__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ui);
  font-size: clamp(0.9rem, 1.3vw, 1.1rem);
  color: var(--muted);
  white-space: nowrap;
}
.services-tags__item i {
  font-style: normal;
  font-size: 1.1em;
}

.services-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  align-items: center;
  gap: 32px;
}

.services-hero__title {
  text-align: right;
  font-size: clamp(3rem, 8vw, 7rem);
}

/* Projects hero reuses services-hero__grid/video/title as-is, just with the
   title placed first in the grid (left) instead of right-aligned. Column
   ratio is flipped (wide first, narrow second) so the video still lands in
   the narrow column and stays the same size as the Services hero video. */
.projects-hero {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  padding-top: clamp(120px, 12vw, 150px);
  padding-bottom: clamp(16px, 2vw, 28px);
}
.projects-hero .services-hero__title {
  text-align: left;
}

.services-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr) minmax(0, 0.7fr);
}

.services-row__num {
  min-height: 340px;
}

.services-row__body,
.services-row__icon {
  border-left: 0;
}

.projects-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.projects-card {
  padding: clamp(24px, 3vw, 40px);
  border-bottom: 1px solid var(--line);
}
.projects-card:nth-child(2n) {
  border-left: 0;
}
.projects-card:last-child {
  border-bottom: 0;
}

.projects-card__media {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  overflow: hidden;
  background: var(--panel);
}
.projects-card__media img,
.projects-card__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

/* Video projects get their own full-width row, outside the plain-photo
   grid below — a shared grid column would cap them at half the frame
   width plus the card's own padding eating further into that. */
.featured-projects {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 32px);
}
.featured-projects__item {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.featured-projects__media {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  background: var(--panel);
}
.featured-projects__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.featured-projects__item:hover .featured-projects__media video {
  transform: scale(1.04);
}
.featured-projects__item:hover .projects-card__arrow {
  background: var(--accent);
  color: #fff;
}
@media (max-width: 900px) {
  .featured-projects {
    grid-template-columns: 1fr;
  }
}
.projects-card:hover .projects-card__media img,
.projects-card:hover .projects-card__media video {
  transform: scale(1.04);
}

.projects-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
}

.projects-card__title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  font-family: "Big Shoulders", sans-serif;
  font-weight: 600;
  font-size: clamp(1.7rem, 2.6vw, 2.2rem);
  text-transform: uppercase;
}

.projects-card__cat {
  font-family: var(--ui);
  font-size: 0.82rem;
  font-weight: 400;
  text-transform: none;
  color: var(--muted);
}
.projects-card__cat::before {
  content: "\2022 ";
  color: var(--accent);
}

.projects-card__arrow {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--panel);
  color: var(--ink);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
.projects-card:hover .projects-card__arrow {
  background: var(--accent);
  color: #fff;
  transform: rotate(45deg);
}

.project-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding-top: clamp(120px, 12vw, 150px);
}

.project-hero__content {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
}

.project-hero__top {
  padding: 0 clamp(24px, 3vw, 40px) clamp(28px, 3.5vw, 40px);
  border-bottom: 1px solid var(--line);
}

.project-hero__back {
  margin-bottom: clamp(28px, 4vw, 48px);
}

.project-hero__title {
  text-align: left;
  font-size: clamp(3rem, 6vw, 6rem);
}
/* The clinic/car landing-page headlines run longer than a project title
   (a full sentence, not a two-word name) — the shared size overflows and
   wraps awkwardly, so these two get a smaller scale of their own. */
.landing-page .project-hero__title {
  font-size: clamp(2.2rem, 4vw, 3.8rem);
}

.project-hero__bottom {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 20px;
  padding: clamp(28px, 3.5vw, 44px) clamp(24px, 3vw, 40px);
  min-height: 280px;
}

.project-hero__demo {
  align-self: flex-start;
}

.project-hero__media {
  position: relative;
  padding: clamp(20px, 3vw, 32px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.project-hero__media img,
.project-hero__media video {
  border-radius: 20px;
  box-shadow:
    rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
    rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Screen-recording demos are a different (often portrait/tall) aspect
   ratio than the marketing photos — cover would crop most of the frame
   away, so size by width and show the whole thing instead of cropping. */
.project-hero__media video {
  height: auto;
  object-fit: contain;
  background: var(--panel);
}

.project-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.project-meta--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.project-meta__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(24px, 3vw, 36px);
}
.project-meta__item + .project-meta__item {
  border-left: 0;
}

.project-meta__icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--ink);
}

.project-meta__label {
  font-family: var(--ui);
  font-weight: 600;
  font-size: 0.92rem;
}

.project-meta__value {
  font-family: var(--ui);
  font-size: 0.85rem;
  color: var(--muted);
}

.project-modules__items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.footer {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.footer__col {
  padding: clamp(28px, 3.6vw, 48px) clamp(18px, 2.4vw, 30px);
  border-right: 1px solid var(--line);
}
.footer__col:last-child {
  border-right: 0;
}

.footer__mascot {
  width: min(100%, 340px);
  max-height: 280px;
  object-fit: contain;
  border-radius: 14px;
  background: var(--panel);
}

.footer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--ui);
  transition: padding-left 0.3s var(--ease);
}
.footer__link:last-child {
  border-bottom: 0;
}
.footer__link:hover {
  padding-left: 8px;
  color: var(--accent);
}
.footer__link i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.footer__note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px var(--pad);
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--muted);
}

.footer__legal-links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.footer__legal-links a:hover {
  color: var(--ink);
}

/* Long-form legal pages (Privacy/Terms/Refund) — each numbered section is
   its own bordered frame cell, two per row, matching the same grid pattern
   used for project-meta and services-row elsewhere on the site. */
.legal__updated {
  font-family: var(--ui);
  font-size: 0.8rem;
  color: var(--muted);
}

.legal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.legal-grid__item {
  padding: clamp(24px, 3vw, 36px);
  border-bottom: 1px solid var(--line);
}
.legal-grid__item:nth-child(2n) {
  border-left: 0;
}
.legal-grid__item:last-child {
  border-bottom: 0;
}

.legal-grid__num {
  font-family: var(--ui);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 10px;
}
.legal-grid__title {
  font-family: var(--ui);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
  margin-bottom: 10px;
}
.legal-grid__body {
  font-family: var(--ui);
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--muted);
}
.legal-grid__body p {
  margin-bottom: 10px;
}
.legal-grid__body ul {
  list-style: disc;
  padding-left: 20px;
  margin-top: 8px;
}
.legal-grid__body li {
  margin-bottom: 6px;
}
.legal-grid__body strong,
.legal-grid__body a {
  color: var(--ink);
}

/* --------------------------- BusinessPortal (standalone admin shell) --- */
.bp-body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
}
/* .bp-topbar also carries the .frame class in markup, which supplies the
   width/max-width/centering/side-borders — this just adds the topbar-only
   bits on top of that. */
.bp-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--pad);
  border-bottom: 1px solid var(--line);
}
.bp-topbar__left {
  display: flex;
  align-items: center;
  gap: 32px;
}
.bp-topbar__brand {
  font-family: "Big Shoulders", sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  text-transform: uppercase;
}
.bp-topbar__admin-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: var(--ui);
  font-size: 0.85rem;
}
.bp-topbar__admin-nav a {
  color: var(--muted);
}
.bp-topbar__admin-nav a.is-active {
  color: var(--ink);
  font-weight: 600;
}
.bp-topbar__nav {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--ui);
  font-size: 0.85rem;
  color: var(--muted);
}
.bp-topbar__nav a {
  color: var(--ink);
}
.bp-topbar__menu {
  position: relative;
}
.bp-topbar__menu-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.bp-topbar__menu-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 140px;
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
  z-index: 20;
}
.bp-topbar__menu-dropdown.is-open {
  display: block;
}
.bp-topbar__menu-dropdown form {
  margin: 0;
}
.bp-topbar__menu-item {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 6px;
  background: none;
  text-align: left;
  font-family: var(--ui);
  font-size: 0.85rem;
  color: var(--ink);
  cursor: pointer;
}
.bp-topbar__menu-item:hover {
  background: var(--bg);
}
.bp-charts-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 32px;
}
.bp-topbar__menu-nav {
  display: none;
}
.bp-topbar__menu-nav a.is-active {
  font-weight: 600;
}
.bp-topbar__menu-divider {
  height: 1px;
  margin: 6px 4px;
  background: var(--line);
}
.bp-main {
  padding: clamp(32px, 6vw, 64px) clamp(20px, 4vw, 48px);
  max-width: 960px;
  margin-inline: auto;
}
.bp-main--narrow {
  max-width: 440px;
}
.bp-title {
  font-family: "Big Shoulders", sans-serif;
  font-weight: 600;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  text-transform: uppercase;
  margin-bottom: 28px;
}
.bp-card {
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: 16px;
  margin-bottom: 24px;
}
.bp-card__label {
  font-family: var(--ui);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.confirm-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  place-items: center;
}
.confirm-modal.is-open {
  display: grid;
}
.confirm-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.5);
  backdrop-filter: blur(4px);
}
.confirm-modal__box {
  position: relative;
  z-index: 1;
  width: min(90vw, 380px);
  padding: clamp(24px, 4vw, 32px);
  border-radius: 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.4);
}
.confirm-modal__message {
  font-family: var(--ui);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 22px;
}
.confirm-modal__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* Split-screen auth pages (login/register/forgot password) — no topbar,
   just video on one side and the form on the other. Same frame border +
   corner-star treatment as every .sec > .frame elsewhere, just applied to
   one full-viewport box instead of a stack of sections. */
.bp-split {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  border: 1px solid var(--line);
  /* Unlike .frame elsewhere, .bp-split runs edge-to-edge with no side
     margin for its corner stars' -7px offset to sit in, so it overflows
     the viewport horizontally without this. */
  overflow: hidden;
}
.bp-split::before,
.bp-split::after {
  content: "";
  position: absolute;
  top: -7px;
  width: 13px;
  height: 13px;
  z-index: 2;
  pointer-events: none;
  background-image: url("../image/star.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.bp-split::before {
  left: -7px;
}
.bp-split::after {
  right: -7px;
}
.bp-split__form {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(32px, 6vw, 64px);
  border-right: 1px solid var(--line);
  background: var(--panel);
}
.bp-split__brand {
  font-family: "Big Shoulders", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.bp-split__form-body {
  margin-block: auto;
  padding-block: 40px;
}
.bp-split__footer {
  font-family: var(--ui);
  font-size: 0.78rem;
  color: var(--muted);
}
.bp-split__media {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: clamp(32px, 6vw, 64px);
  background: #fff;
}
.bp-split__media video {
  position: relative;
  z-index: 1;
  width: min(100%, 420px);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 24px;
  transform: scaleX(-1);
}
.bp-split__media .bubble {
  z-index: 2;
}
.bp-split__back {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10;
  background: var(--panel);
}

@media (max-width: 900px) {
  .bp-split {
    grid-template-columns: 1fr;
  }
  .bp-split__form {
    border-right: 0;
    border-top: 1px solid var(--line);
  }
  .bp-split__media {
    display: none;
  }
}

/* ----------------------------------- 15. Reveal, reduced motion */
.js .reveal {
  opacity: 0;
}
.js .reveal.is-in {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .reveal {
    opacity: 1;
  }
}

/* ------------------------------------------------------- 16. Responsive */
@media (max-width: 1024px) {
  .about__portrait {
    transform: scale(1.15);
  }

  .about {
    grid-template-columns: 1fr;
  }
  .about__col--mid {
    border-inline: 0;
    border-block: 1px solid var(--line);
  }
  .about__col--side {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .about__col--side > * {
    border-right: 1px solid var(--line);
  }
  .about__col--side > *:nth-child(2n) {
    border-right: 0;
  }

  .combo {
    grid-template-columns: 1fr;
  }
  .combo__media {
    display: none;
  }
  .combo__block {
    top: 0;
    min-height: 90vh;
  }

  .process {
    grid-template-columns: 1fr;
  }
  .process__list {
    border-right: 0;
  }
  .process__media {
    display: none;
  }
  .step {
    top: 0;
    min-height: 90vh;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .step:last-child {
    border-bottom: 0;
  }

  .footer {
    grid-template-columns: 1fr 1fr;
  }
  .footer__col:nth-child(2n) {
    border-right: 0;
  }
  .footer__col {
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 720px) {
  .sec__title {
    font-size: clamp(3rem, 13vw, 4rem);
  }

  /* Services page: hero stacks (character card above title), and each
     service row stacks number/title, then description+tags, then icon —
     matching the reference's mobile order instead of the 3-column desktop
     grid. Side borders become bottom dividers between the stacked parts. */
  .services-hero__grid {
    grid-template-columns: 1fr;
    padding-top: 130px;
  }
  .services-hero__video {
    display: none;
  }
  .services-hero__title {
    text-align: center;
    font-size: clamp(3.5rem, 17vw, 5.5rem);
  }
  .projects-hero .services-hero__title {
    text-align: center;
  }
  .projects-grid {
    grid-template-columns: 1fr;
  }
  .projects-card {
    border-left: 1px solid var(--line);
  }
  .project-hero {
    grid-template-columns: 1fr;
  }
  .project-hero__content {
    border-right: 0;
  }
  .project-hero__media {
    min-height: 260px;
  }
  .project-meta {
    grid-template-columns: 1fr;
  }
  .project-meta__item {
    border-bottom: 1px solid var(--line);
  }
  .project-meta__item:last-child {
    border-bottom: 0;
  }
  .project-meta__item + .project-meta__item {
    border-left: 1px solid var(--line);
    border-top: 0;
  }
  .legal-grid {
    grid-template-columns: 1fr;
  }
  .legal-grid__item:nth-child(2n) {
    border-left: 1px solid var(--line);
  }
  .services-row {
    grid-template-columns: 1fr;
  }
  .services-row__num,
  .services-row__body,
  .services-row__icon {
    border-inline: 0;
  }
  .services-row__num {
    border-bottom: 1px solid var(--line);
    min-height: auto;
  }
  .services-row__body {
    border-bottom: 1px solid var(--line);
  }

  /* On touch devices, tapping a service to expand it fires a synthetic
     mouseenter before the click, triggering the hover-preview image meant
     for desktop cursors — not wanted here, so it's just hidden outright. */
  .service__preview {
    display: none;
  }

  /* Match the frame border lines to the nav content's own inset (nav__frame
     uses the same 12px padding-inline below) so the vertical divider lines
     running down each section line up with the nav's edges instead of
     sitting flush against the screen edge. Scoped to the direct child only
     (.sec > .frame) — nested .frame-classed cells (project-meta items,
     services-row cells, project cards) must NOT get this too, or they end
     up with a redundant second inset inside the already-inset section. */
  .sec > .frame {
    width: calc(100% - 24px);
    margin-inline: 12px;
  }

  .ticker {
    display: none;
  }
  .projects-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding-bottom: 40px;
  }
  .projects-preview .card {
    width: 100%;
    border-block: 1px solid var(--line);
  }
  .projects-preview .card:first-child {
    border-bottom: 0;
  }
  .projects-preview .card__media {
    height: 320px;
    margin-inline: 16px;
  }
  .projects-preview__cta {
    justify-content: center;
    padding-block: 16px;
  }
  .projects-preview .card__name {
    font-size: 1.15rem;
  }
  .projects-preview .card__cat {
    font-size: 0.7rem;
  }
  .projects-preview .card__media img {
    border-radius: 18px;
  }
  .projects-head-cta {
    display: none;
  }

  .about__portrait-wrap {
    overflow: hidden;
    min-height: 288px;
  }
  .about__portrait {
    transform: scale(1.6);
  }

  /* Title+portrait first, then the six stats as one 2-column x 3-row grid
     (each side column is the three stats it already holds), matching the
     reference's mobile stacking order instead of the desktop three-column
     side/mid/side layout collapsed into a single column. */
  .about {
    grid-template-columns: 1fr 1fr;
  }
  .about__col--mid {
    grid-column: 1 / -1;
    order: -1;
    border-block: 0;
  }
  .about__col--side {
    display: block;
  }
  .about__col--side:first-child {
    border-right: 1px solid var(--line);
  }

  .about__figure {
    position: sticky;
    top: 130px;
  }

  /* Stack becomes a 2-column icon grid; experience stays a plain list.
     Using .panels__mid + .panel rather than .panel:first-child — the
     empty .panels__mid div is the actual DOM-first child of .panels, so
     :first-child never matches either .panel here (a pre-existing issue
     also present in the desktop/tablet rules, left alone since grid
     auto-placement happens to land those correctly anyway). */
  .panels__mid + .panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .panels__mid + .panel .panel__head {
    grid-column: 1 / -1;
  }
  .panels__mid + .panel .panel__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .panels__mid + .panel .panel__row:nth-child(2n+1) {
    border-right: 0;
  }
  .panels__mid + .panel .panel__row:last-child {
    border-bottom: 0;
  }

  .mobile-menu {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: fixed;
    inset: 0;
    z-index: 99;
    padding: 130px 16px 24px;
    background: var(--bg);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-12px);
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
    overflow-y: auto;
  }
  .mobile-menu.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .mobile-menu__socials {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .mobile-menu__social {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 14px;
    background: var(--panel);
    font-family: var(--ui);
    font-weight: 500;
  }

  .mobile-menu__cta {
    margin-top: auto;
    justify-content: center;
    width: 100%;
  }

  .hero__face-wrap {
    display: flex;
    justify-content: center;
    flex-basis: 100%;
  }
  .hero__face {
    width: 150px;
    height: 150px;
  }

  .nav {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    padding-inline: 12px;
  }
  .nav__socials,
  .nav__left .pill {
    display: none;
  }
  .nav__burger {
    display: flex;
  }
  .nav__center {
    justify-content: center;
    gap: 12px;
    min-width: 0;
  }
  .nav__home {
    display: block;
    margin-top: 6px;
  }
  .nav__mark {
    width: 36px;
    height: 36px;
  }
  .nav__mark img {
    width: 28px;
    height: 28px;
  }
  .toggle {
    width: 44px;
    height: 26px;
  }
  [data-theme="dark"] .toggle__knob {
    transform: translateX(18px);
  }

  .panels {
    grid-template-columns: 1fr;
  }
  .panel:first-child,
  .panel:last-child {
    grid-column: 1;
  }
  .panels__mid {
    display: none;
  }
  .panel {
    border-bottom: 1px solid var(--line);
  }
  .panel:last-child {
    border-bottom: 0;
  }

  .service {
    grid-template-columns: 44px 1fr 40px;
  }
  .service .tag {
    display: none;
  }
  .service__inner {
    padding-left: calc(var(--pad) + 44px);
  }

  /* Mascot and contact stay full-width rows; the page-links and socials
     columns sit side by side between them, matching the reference. */
  .footer {
    grid-template-columns: 1fr 1fr;
  }
  .footer__col {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .footer__col:nth-child(1),
  .footer__col:nth-child(4) {
    grid-column: 1 / -1;
  }
  .footer__col:nth-child(2) {
    border-right: 1px solid var(--line);
  }

  /* BusinessPortal topbar: the inline admin nav (Overview/Subscribers/...)
     doesn't fit next to the brand at this width, so it folds into the same
     dropdown as Log out instead of wrapping/overflowing. */
  .bp-topbar.frame {
    width: calc(100% - 24px);
    margin-inline: 12px;
  }
  .bp-topbar__brand {
    max-width: 46vw;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .bp-topbar__admin-nav {
    display: none;
  }
  .bp-topbar__menu-nav {
    display: block;
  }
  .bp-charts-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Dashboard tables: a raw table can't survive this width, so each row
     becomes its own bordered "frame" card with the column header shown as
     a label above each value instead of beside it. */
  .table-scroll {
    overflow-x: visible;
  }
  .dashboard-table {
    min-width: 0;
  }
  .dashboard-table thead {
    display: none;
  }
  .dashboard-table,
  .dashboard-table tbody,
  .dashboard-table tr,
  .dashboard-table td {
    display: block;
    width: 100%;
  }
  .dashboard-table tr {
    margin-bottom: 14px;
    border: 1px solid var(--line);
    padding: 4px 14px;
  }
  .dashboard-table tr:last-child {
    margin-bottom: 0;
  }
  .dashboard-table td {
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
  }
  .dashboard-table td:last-child {
    border-bottom: 0;
  }
  .dashboard-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 6px;
    font-family: var(--ui);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
  }
  .dashboard-table td[data-label=""]::before {
    content: none;
    margin-bottom: 0;
  }
  .dashboard-table td .auth-form__input {
    width: 100%;
  }
}

/* ============================================================ landing pages
   Standalone bilingual (AR/EN) pages — clinic.php, website.php. Kept
   separate from the main nav so a visitor arriving from an ad lands on one
   focused page, not the full site chrome. */
/* Every element, not just the ones known to carry text today — anything
   added later (new component, new class) inherits Tajawal automatically
   instead of silently falling back to the Latin condensed UI font. */
[dir="rtl"] body,
[dir="rtl"] body * {
  font-family: "Tajawal", "Inter", sans-serif;
}
/* Letter-spacing + all-caps are Latin-only conventions — on connected
   Arabic script they add gaps that break letters apart, so drop both. */
[dir="rtl"] .eyebrow,
[dir="rtl"] .feature-list__label {
  letter-spacing: normal;
  text-transform: none;
}
/* line-height:0.84-0.86 is tuned for the Latin display faces' tall,
   diacritic-free glyphs — on Tajawal it crops/overlaps marks like the
   shadda (the gemination mark that sits above a letter), so give Arabic
   display text normal line spacing and drop the Latin-tightening
   letter-spacing/uppercase too. */
[dir="rtl"] .display,
[dir="rtl"] .sec__title {
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
}
/* Grid auto-placement already mirrors column order under RTL, but a
   couple of rules use a physical side rather than a logical one and end
   up on the outer edge instead of between the columns — override those. */
[dir="rtl"] .project-hero__content {
  border-right: 0;
  border-left: 1px solid var(--line);
}
[dir="rtl"] .project-hero__title {
  text-align: right;
}

/* .pill--accent's dark text (#04201f) was tuned for the site's usual
   bright teal/green accents — clinic.php's red and website.php's blue-ish
   teal are darker/more saturated, so dark-on-dark reads poorly. White text
   is legible against either without touching the shared component. */
.landing-page .pill--accent,
.landing-page .pill--accent .pill__dot {
  color: #fff;
}

.feature-list {
  display: flex;
  flex-direction: column;
}
.feature-list__row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 10px 28px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.feature-list__row:last-child {
  border-bottom: 1px solid var(--line);
}
.feature-list__label {
  font-family: var(--ui);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
}
.feature-list__text {
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--muted);
  max-width: 660px;
}
@media (max-width: 640px) {
  .feature-list__row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}
.feature-list__note {
  margin-top: 24px;
  padding: 14px 18px;
  border-inline-start: 3px solid var(--accent);
  background: var(--panel);
  border-radius: 0 10px 10px 0;
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--ink);
}
[dir="rtl"] .feature-list__note {
  border-radius: 10px 0 0 10px;
}

.landing-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px clamp(16px, 4vw, 40px);
}
@media (max-width: 720px) {
  .landing-page .project-hero__title {
    font-size: clamp(2.1rem, 9vw, 4rem);
  }
}
.landing-topbar__brand {
  font-family: var(--ui);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}

.lang-switch {
  position: relative;
  display: inline-flex;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  flex-shrink: 0;
}
.lang-switch::before {
  content: '';
  position: absolute;
  inset-block: 3px;
  inset-inline-start: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: var(--ink);
  transition: inset-inline-start 0.3s var(--ease);
}
.lang-switch:has(a:last-child.is-active)::before {
  inset-inline-start: 50%;
}
.lang-switch a {
  position: relative;
  z-index: 1;
  min-width: 46px;
  text-align: center;
  padding: 7px 16px;
  border-radius: 999px;
  font-family: var(--ui);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  transition: color 0.25s var(--ease);
}
.lang-switch a.is-active {
  color: var(--bg);
}

.sticky-contact {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  flex-direction: row;
  gap: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
.sticky-contact.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.sticky-contact__btn {
  position: relative;
  width: 76px;
  height: 54px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--accent);
  border: 2px solid var(--accent);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-radius 0.25s var(--ease);
}
.sticky-contact__btn:hover {
  transform: scale(1.08) translateY(-4px);
  border-radius: 20px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}
.sticky-contact__btn::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--bg);
  font-family: var(--ui);
  font-size: 0.75rem;
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease);
}
[dir="rtl"] .sticky-contact__btn::after {
  font-family: "Tajawal", "Inter", sans-serif;
}
.sticky-contact__btn:hover::after {
  opacity: 1;
}
@media (max-width: 720px) {
  .sticky-contact {
    bottom: 14px;
    gap: 10px;
  }
  .sticky-contact__btn {
    width: 64px;
    height: 46px;
  }
  .sticky-contact__btn::after {
    display: none;
  }
}