/* ============================================================
   COVE STUDIO · Web Design Agency, Stellenbosch
   LIGHT edition. Warm off-white, ink text, one restrained gold accent.
   Type: Zodiak (elegant serif display) + Switzer (clean sans body), Fontshare.
   Radius rule: buttons = pill, cards & media = 20px, inputs = 12px.
   ============================================================ */

:root {
  --bg: #f4f2ec;          /* warm off-white paper */
  --bg-2: #efece4;        /* slightly deeper warm panel */
  --surface: #ffffff;     /* cards */
  --surface-2: #faf8f3;   /* soft raised surface */
  --line: rgba(28, 25, 20, 0.14);
  --line-soft: rgba(28, 25, 20, 0.07);
  --text: #1c1a16;        /* warm ink */
  --text-2: #5f5a50;      /* secondary */
  --text-3: #928c80;      /* tertiary */
  --accent: #a8875a;      /* muted antique gold, used sparingly */
  --accent-bright: #8a6c3f; /* deeper gold for text on light (contrast) */
  --accent-deep: #6f5630;
  --accent-soft: rgba(168, 135, 90, 0.13);

  --font-display: "Sentient", "Canela", Georgia, "Times New Roman", serif;
  --font-body: "Switzer", -apple-system, "Helvetica Neue", Arial, sans-serif;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --r-card: 20px;
  --r-input: 12px;

  --section: clamp(6rem, 11vw, 10rem);
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --nav-h: 76px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* smooth anchor scrolling handled in JS to keep native scrolling untouched */

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--accent); color: #fff; }

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

a { color: inherit; }

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

.wrap {
  width: min(1240px, 100% - 2 * var(--gutter));
  margin-inline: auto;
}

/* ---------- Type ---------- */

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.06;
}

.h-xl {
  font-size: clamp(2.7rem, 5.6vw, 4.8rem);
  letter-spacing: -0.01em;
  line-height: 1.03;
}

.h-lg { font-size: clamp(2.1rem, 4.2vw, 3.4rem); }

.h-md { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }

.lead {
  font-size: clamp(1.1rem, 1.55vw, 1.28rem);
  color: var(--text-2);
  max-width: 36em;
  line-height: 1.6;
}

.muted { color: var(--text-2); }

.em-accent {
  font-style: italic;
  font-weight: 500;
  color: var(--accent-bright);
  padding-bottom: 0.06em; /* descender reserve for italics */
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: 1.5rem;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  border: 0;
  border-radius: 999px;
  padding: 0.95em 1.9em;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 180ms var(--ease-out), background 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.btn:active { transform: scale(0.97); }

.btn--solid {
  background: var(--text);
  color: var(--bg);
}

.btn--solid:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(28, 25, 20, 0.22);
}

.btn--solid:hover:active { transform: translateY(-1px) scale(0.97); }

.btn--ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
}

.btn--ghost:hover {
  border-color: var(--accent);
  color: var(--accent-bright);
  transform: translateY(-2px);
}

.btn--accent {
  background: var(--accent);
  color: #ffffff;
}

.btn--accent:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(168, 135, 90, 0.35);
}

.btn .arrow { transition: transform 200ms var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- Nav ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background 300ms ease, border-color 300ms ease, backdrop-filter 300ms ease;
  border-bottom: 1px solid transparent;
}

.nav.is-scrolled {
  background: rgba(244, 242, 236, 0.78);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--line-soft);
}

/* Homepage: nav floats over the dark hero image until scrolled, so go light */
.nav:not(.is-scrolled) .nav__logo b,
.nav:not(.is-scrolled) .nav__logo b span,
.nav:not(.is-scrolled) .nav__logo .mark,
.nav:not(.is-scrolled) .nav__links a:not(.btn) { color: #f6f2e8; }

.nav:not(.is-scrolled) .nav__logo small { color: rgba(246, 242, 232, 0.72); }

.nav:not(.is-scrolled) .nav__links a:not(.btn):hover { color: #ffffff; }

.nav:not(.is-scrolled) .btn--ghost {
  color: #f6f2e8;
  border-color: rgba(246, 242, 232, 0.45);
}

.nav:not(.is-scrolled) .btn--ghost:hover {
  border-color: #f6f2e8;
  color: #ffffff;
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
}

/* Brand mark: the arch logo set in a small dark tile, so the white-on-black
   render reads cleanly on both the light nav and the dark image heroes. */
.nav__logo .mark {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 11px;
  overflow: hidden;
  background: #12161f;
  box-shadow: inset 0 0 0 1px rgba(150, 160, 180, 0.22);
}

.nav__logo .mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: screen;
}

.nav__logo__text {
  display: flex;
  flex-direction: column;
  line-height: 1.02;
}

.nav__logo b {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.32rem;
  letter-spacing: 0.005em;
}

.nav__logo b span { color: var(--accent); }

.nav__logo small {
  font-family: var(--font-body);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 4px;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 2.2rem;
  list-style: none;
}

.nav__links a:not(.btn) {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  transition: color 160ms ease;
}

.nav__links a:not(.btn):hover { color: var(--text); }

.nav .btn { padding: 0.7em 1.5em; font-size: 0.88rem; }

/* ---------- Mobile navigation (hamburger + dropdown panel) ---------- */

.nav__toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin-right: -8px;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 10px;
}

.nav__toggle-bar {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform 260ms var(--ease-out), opacity 180ms ease, background 200ms ease;
}

/* Cream bars while floating over the dark hero (menu closed), with a soft
   shadow so they stay legible even over the brighter parts of the image */
.nav:not(.is-scrolled):not(.is-open) .nav__toggle-bar { background: #f6f2e8; }
.nav:not(.is-scrolled):not(.is-open) .nav__toggle { filter: drop-shadow(0 1px 2px rgba(8, 12, 22, 0.6)); }

/* Open → morph the three bars into an X */
.nav.is-open .nav__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__toggle-bar:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 780px) {
  .nav__toggle { display: flex; }

  /* An open menu forces the bar solid + dark, whatever the scroll state */
  .nav.is-open {
    background: rgba(244, 242, 236, 0.97);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom-color: var(--line-soft);
  }
  .nav.is-open .nav__logo b { color: var(--text); }
  .nav.is-open .nav__logo b span { color: var(--accent); }
  .nav.is-open .nav__logo small { color: var(--text-3); }
  .nav.is-open .nav__toggle-bar { background: var(--text); }

  /* The links become a dropdown panel under the bar */
  .nav__links {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.25rem var(--gutter) 1.4rem;
    background: rgba(244, 242, 236, 0.98);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid var(--line-soft);
    box-shadow: 0 26px 44px rgba(28, 25, 20, 0.13);
    max-height: calc(100svh - var(--nav-h));
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out), visibility 240ms;
  }

  .nav.is-open .nav__links {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* Every link shows inside the panel (they were hidden inline on mobile) */
  .nav__links li.nav__hide-m { display: block; }

  .nav__links li { width: 100%; border-top: 1px solid var(--line-soft); }
  .nav__links li:first-child { border-top: 0; }

  .nav__links a:not(.btn) {
    display: block;
    padding: 1.05rem 0.25rem;
    font-size: 1.12rem;
    font-weight: 500;
  }

  /* Keep panel links dark even on the transparent hero nav */
  .nav:not(.is-scrolled) .nav__links a:not(.btn),
  .nav.is-open .nav__links a:not(.btn) { color: var(--text); }
  .nav:not(.is-scrolled) .nav__links a:not(.btn):hover,
  .nav.is-open .nav__links a:not(.btn):hover { color: var(--accent-bright); }

  /* The CTA fills the panel width as a solid button at the bottom */
  .nav__links li:last-child { border-top: 0; margin-top: 1rem; }
  .nav.is-open .nav__links .btn--ghost,
  .nav:not(.is-scrolled) .nav__links .btn--ghost {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0.95em 1.5em;
    font-size: 0.95rem;
    background: var(--text);
    color: var(--bg);
    border-color: var(--text);
  }
}

body.nav-open { overflow: hidden; }

/* ---------- Hero (layered parallax) ---------- */

/* ---------- Hero (seascape image + wordmark over it, parallax) ---------- */

.hero {
  position: relative;
  height: 100svh;
  min-height: 580px;
  overflow: hidden;
  background: #17202e;
}

.hero__layer {
  position: absolute;
  left: 0;
  right: 0;
  top: -12%;
  height: 124%;
  will-change: transform;
}

/* Full-bleed seascape image */
.hero__img-layer { z-index: 1; }

.hero__img-layer img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  animation: hero-zoom 22s ease-in-out infinite alternate;
}

@keyframes hero-zoom {
  from { transform: scale(1.04); }
  to { transform: scale(1.12); }
}

/* Scrim so the cream wordmark reads over the image */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(120% 80% at 50% 42%, rgba(10, 14, 24, 0.34) 0%, rgba(10, 14, 24, 0.12) 45%, transparent 75%),
    linear-gradient(180deg, rgba(10, 14, 24, 0.22) 0%, transparent 30%, transparent 55%, rgba(10, 14, 24, 0.5) 100%);
}

.hero__title-layer {
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0;
  color: #f6f2e8;
  padding-bottom: 6vh;
  user-select: none;
  text-align: center;
  text-shadow: 0 2px 40px rgba(8, 12, 22, 0.4);
}

.hero__title .line { display: block; line-height: 0.98; }
.hero__title .line--1 { font-size: clamp(3.8rem, 15vw, 15rem); }
.hero__title .line--2 { font-size: clamp(2.7rem, 10.6vw, 10.5rem); letter-spacing: 0.02em; }

.hero__title .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.32em);
  animation: char-rise 900ms var(--ease-out) forwards;
  animation-delay: calc(var(--i) * 70ms + 150ms);
}

@keyframes char-rise {
  to { opacity: 1; transform: translateY(0); }
}

.hero__fade {
  position: absolute;
  inset: 0;
  z-index: 30;
  background: linear-gradient(180deg, transparent 50%, var(--bg) 100%);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

.hero__bar {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0 var(--gutter) clamp(1.6rem, 4vh, 3rem);
  opacity: 0;
  animation: bar-in 900ms var(--ease-out) 900ms forwards;
}

@keyframes bar-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero__tag {
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(246, 242, 232, 0.72);
}

.hero__tag b { color: #f6f2e8; font-weight: 700; }

/* Hero CTA reads as a light chip over the darker image */
.hero__bar .btn--solid {
  background: #f6f2e8;
  color: #1c1a16;
}

.hero__bar .btn--solid:hover { box-shadow: 0 16px 34px rgba(8, 12, 22, 0.4); }

/* Portal image, now framed in the intro section */
.intro-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  text-align: left;
}

.intro-media .intro-copy { max-width: 34rem; }
.intro-media .h-xl { margin-inline: 0; max-width: 12em; }
.intro-media .lead { margin: 1.5rem 0 2.2rem; }

.intro-media__frame {
  position: relative;
  border-radius: calc(var(--r-card) + 6px);
  overflow: hidden;
  aspect-ratio: 5 / 6;
  box-shadow: 0 40px 90px rgba(28, 25, 20, 0.2);
  background: var(--bg-2);
}

.intro-media__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.intro-media__caption {
  position: absolute;
  left: 1.1rem;
  bottom: 1.1rem;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(20, 22, 30, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 0.5em 1em;
  border-radius: 999px;
}

@media (max-width: 900px) {
  .intro-media { grid-template-columns: 1fr; gap: clamp(2rem, 6vw, 3rem); }
  .intro-media__frame { aspect-ratio: 16 / 12; max-height: 60vh; }
}

/* ---------- Section scaffolding ---------- */

.section { padding-block: var(--section); position: relative; }

.section--tight { padding-block: calc(var(--section) * 0.6); }

.section__head { max-width: 40em; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }

.section__head p { margin-top: 1.1rem; }

/* Scroll reveal */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}

[data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Intro statement ---------- */

.intro { text-align: center; padding-block: clamp(2.8rem, 6vw, 4.6rem); }

.intro__h {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.12;
  font-size: clamp(1.85rem, 3.4vw, 2.85rem);
  margin-inline: auto;
  max-width: 20em;
}

.intro .lead {
  margin: 1.1rem auto 1.7rem;
  font-size: clamp(1rem, 1.3vw, 1.14rem);
  max-width: 40em;
}

/* ---------- Interior page hero (dark image band, home-page photo) ---------- */

.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #17202e;
  display: flex;
  align-items: flex-end;
  min-height: 52vh;
  padding: calc(var(--nav-h) + clamp(3rem, 7vw, 5.5rem)) 0 clamp(2.6rem, 6vw, 4.5rem);
}

.page-hero__bg { position: absolute; inset: 0; z-index: -1; }

.page-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  animation: hero-zoom 26s ease-in-out infinite alternate;
}

.page-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 100% at 28% 18%, rgba(10, 14, 24, 0.28) 0%, rgba(10, 14, 24, 0.55) 60%, rgba(10, 14, 24, 0.82) 100%),
    linear-gradient(180deg, rgba(10, 14, 24, 0.5) 0%, transparent 40%, rgba(10, 14, 24, 0.74) 100%);
}

.page-hero__inner { position: relative; z-index: 1; }

.page-hero .eyebrow { color: #e7c789; }

.page-hero h1 {
  color: #f6f2e8;
  max-width: 15em;
  text-shadow: 0 2px 34px rgba(8, 12, 22, 0.42);
}

.page-hero .em-accent { color: #e7c789; }

.page-hero .lead { color: rgba(246, 242, 232, 0.86); margin-top: 1.3rem; }

/* ---------- Services (hover stagger slideshow) ---------- */

.services__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(2rem, 6vw, 5rem);
}

.services__titles {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  flex: 1 1 auto;
}

.svc {
  position: relative;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.08;
  padding: 0;
}

.svc .letter {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.svc .letter span {
  display: inline-block;
  transition: transform 550ms var(--ease-out);
  transition-delay: var(--d, 0s);
}

.svc .dim { opacity: 0.22; }
.svc .solid {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(110%);
  color: var(--text);
}

.svc.is-active .dim { transform: translateY(-110%); }
.svc.is-active .solid { transform: translateY(0); }

.svc__desc {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 500ms var(--ease-in-out), opacity 400ms ease 100ms;
}

.svc.is-active + .svc__desc {
  max-height: 8em;
  opacity: 1;
}

.svc__desc p {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.55;
  color: var(--text-2);
  max-width: 30em;
  padding: 0.8rem 0 0.3rem;
}

.svc__desc a {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--accent-bright);
  text-decoration: none;
}

.svc__desc a:hover { text-decoration: underline; }

.services__frames {
  display: grid;
  overflow: hidden;
  flex: 0 0 auto;
  border-radius: var(--r-card);
}

.services__frames .frame {
  grid-area: 1 / 1;
  width: min(360px, 38vw);
  aspect-ratio: 3 / 4;
  clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);
  transition: clip-path 900ms var(--ease-in-out);
}

.services__frames .frame.is-active {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.services__frames .frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 860px) {
  .services__row { flex-direction: column; align-items: flex-start; }
  .services__frames .frame { width: min(420px, 100%); aspect-ratio: 4 / 3; }
}

/* ---------- Work portals ---------- */

.portals {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2rem);
}

.portal { grid-column: span 6; }
.portal--wide { grid-column: span 12; }

@media (max-width: 860px) {
  .portal, .portal--wide { grid-column: span 12; }
}

.portal__screen {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  aspect-ratio: 4 / 3;
  transition: transform 400ms var(--ease-out), box-shadow 400ms var(--ease-out), border-color 300ms ease;
  cursor: pointer;
}

.portal--wide .portal__screen { aspect-ratio: 16 / 9; }

@media (hover: hover) and (pointer: fine) {
  .portal:hover .portal__screen {
    transform: translateY(-8px) scale(1.025);
    box-shadow: 0 34px 70px rgba(28, 25, 20, 0.2);
    border-color: rgba(168, 135, 90, 0.5);
  }
  .portal:hover .portal__cta { color: var(--accent-bright); }
  .portal:hover .portal__cta .arrow { transform: translate(3px, -3px); }
}

.portal__screen iframe {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  transform-origin: 0 0;
  pointer-events: none;
  background: #fff;
}

.portal__open {
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 0;
  background: transparent;
  cursor: pointer;
}

/* A static poster replaces the live embed for the marked portal on phones,
   so that heavy site isn't loaded into memory there. The image is only
   referenced inside the phone media query, so desktop never downloads it. */
.portal__poster { display: none; }

/* Status tags and the alternate call to action only exist on phones, where
   one portal opens as its own site instead of running live in the page. */
.portal__tag,
.portal__cta-mob { display: none; }

.portals-note { display: none; }

@media (max-width: 780px) {
  .portal--mobile-native .portal__screen iframe { display: none; }
  .portal--mobile-native .portal__poster {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: url('../assets/poster-cove-interior.jpg');
    background-size: cover;
    background-position: top center;
  }

  .portal__meta { align-items: flex-start; }

  .portal__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    margin-top: 0.5rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-3);
  }

  .portal__tag--live { color: var(--accent-bright); }

  .portal__tag--live::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px var(--accent-soft);
  }

  .portal__cta-desk { display: none; }
  .portal__cta-mob { display: inline; }

  .portals-note {
    display: block;
    margin-top: 1.6rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line-soft);
    color: var(--text-3);
    font-size: 0.88rem;
    line-height: 1.6;
  }
}

.portal__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0.3rem 0;
}

.portal__meta h3 { font-size: 1.25rem; letter-spacing: -0.01em; }

.portal__meta p { color: var(--text-3); font-size: 0.92rem; }

.portal__cta {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-2);
  white-space: nowrap;
  transition: color 200ms ease;
}

.portal__cta .arrow { display: inline-block; transition: transform 250ms var(--ease-out); }

/* ---------- Site viewer overlay ---------- */

.viewer {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  display: none;
  flex-direction: column;
  transform-origin: 0 0;
  will-change: transform;
}

.viewer.is-mounted { display: flex; }

.viewer.is-animating {
  transition: transform 620ms var(--ease-in-out), border-radius 620ms var(--ease-in-out);
}

.viewer__bar {
  height: 56px;
  flex: 0 0 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 clamp(0.8rem, 2vw, 1.6rem);
  background: rgba(244, 242, 236, 0.95);
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transition: opacity 300ms ease 250ms;
}

.viewer.is-open .viewer__bar { opacity: 1; }

.viewer__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  border-radius: 999px;
  padding: 0.5em 1.1em;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), border-color 160ms ease;
}

.viewer__back:hover { border-color: var(--accent); }
.viewer__back:active { transform: scale(0.97); }

.viewer__label {
  font-size: 0.88rem;
  color: var(--text-2);
  text-align: right;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.viewer__label b { color: var(--text); font-weight: 700; }

.viewer__esc {
  display: inline-block;
  margin-left: 0.9em;
  padding: 0.15em 0.55em;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 0.72rem;
  color: var(--text-3);
}

.viewer__frame {
  flex: 1 1 auto;
  border: 0;
  width: 100%;
  background: #fff;
}

@media (max-width: 640px) {
  .viewer__esc { display: none; }
}

/* ---------- Before / After ---------- */

.ba__frame {
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 40px 90px rgba(28, 25, 20, 0.16);
}

.ba__chrome {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem 1.1rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-soft);
}

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

.ba__dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line);
}

.ba__url {
  flex: 1;
  max-width: 340px;
  margin-inline: auto;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 0.28em 1em;
  font-size: 0.78rem;
  color: var(--text-3);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ba__stage {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  touch-action: pan-y;
  container-type: inline-size; /* the mock pages scale their type with cqw */
}

.ba__pane {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.ba__pane--after {
  clip-path: inset(0 0 0 50%);
  will-change: clip-path;
}

.ba__tag {
  position: absolute;
  top: 14px;
  z-index: 5;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.35em 0.9em;
  border-radius: 999px;
  pointer-events: none;
}

.ba__tag--before { left: 14px; background: rgba(8, 9, 13, 0.55); color: #fff; }
.ba__tag--after { right: 14px; background: var(--accent); color: #fff; }

.ba__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 6;
  width: 44px;
  margin-left: -22px;
  border: 0;
  background: transparent;
  cursor: ew-resize;
  will-change: left;
}

.ba__handle::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: var(--accent);
}

.ba__grip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  box-shadow: 0 10px 26px rgba(168, 135, 90, 0.5);
  transition: transform 200ms var(--ease-out);
}

.ba__handle:hover .ba__grip,
.ba__handle:focus-visible .ba__grip { transform: translate(-50%, -50%) scale(1.1); }

.ba__handle:active .ba__grip { transform: translate(-50%, -50%) scale(0.96); }

/* -- the two mock pages inside the slider (demonstration artwork) -- */

.mock { position: absolute; inset: 0; display: flex; flex-direction: column; }

.mock--old {
  background: #e9e6df;
  color: #222;
  font-family: "Times New Roman", Times, serif;
}

.mock--old .mo-head {
  background: linear-gradient(180deg, #27418f, #10225c);
  color: #fff;
  padding: 3.2% 4%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.mock--old .mo-head b { font-size: clamp(0.9rem, 1.9cqw, 1.5rem); }

.mock--old .mo-nav {
  display: flex;
  gap: 4%;
  background: #d7d2c6;
  border-bottom: 2px outset #f5f2ea;
  padding: 1.6% 4%;
  font-size: clamp(0.55rem, 1.3cqw, 0.95rem);
}

.mock--old .mo-nav span { color: #1436a8; text-decoration: underline; white-space: nowrap; }

.mock--old .mo-body { padding: 4%; flex: 1; }

.mock--old .mo-body h4 {
  font-size: clamp(0.85rem, 2.2cqw, 1.6rem);
  color: #10225c;
  margin-bottom: 2%;
}

.mock--old .mo-body mark {
  background: #fff23e;
  font-weight: 700;
  font-size: clamp(0.6rem, 1.5cqw, 1.05rem);
}

.mock--old .mo-body p {
  font-size: clamp(0.58rem, 1.4cqw, 1rem);
  line-height: 1.45;
  margin-top: 2%;
  max-width: 52em;
}

.mock--old .mo-btn {
  display: inline-block;
  margin-top: 3%;
  padding: 1.2% 3%;
  background: linear-gradient(180deg, #fdfdfd, #c9c9c9);
  border: 2px outset #efefef;
  font-size: clamp(0.55rem, 1.3cqw, 0.95rem);
  font-weight: 700;
  color: #10225c;
}

.mock--old .mo-strip {
  background: #c8102e;
  color: #fff;
  text-align: center;
  padding: 1.2%;
  font-size: clamp(0.55rem, 1.3cqw, 0.9rem);
  font-weight: 700;
}

/* The "after": dark, luxurious rebuild with real photography and a brass accent
   (client-site artwork, so it carries its own palette, not the Cove Studio cobalt) */
.mock--new {
  background: #0e0f12;
  color: #f2f0ea;
  font-family: var(--font-body);
}

.mock--new .mn-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 2.1% 4.5%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mock--new .mn-head b {
  font-family: var(--font-display);
  font-size: clamp(0.7rem, 1.7cqw, 1.2rem);
  letter-spacing: 0.04em;
}

.mock--new .mn-head b i {
  font-style: normal;
  color: #c8a35f;
}

.mock--new .mn-head__nav {
  display: flex;
  align-items: center;
  gap: clamp(0.55rem, 2cqw, 1.7rem);
}

.mock--new .mn-head__nav > span:not(.mn-cta) {
  font-size: clamp(0.42rem, 1cqw, 0.76rem);
  font-weight: 500;
  color: rgba(242, 240, 234, 0.7);
}

.mock--new .mn-cta {
  font-size: clamp(0.44rem, 1cqw, 0.76rem);
  font-weight: 700;
  background: #c8a35f;
  color: #14110a;
  border-radius: 999px;
  padding: 0.6em 1.4em;
  white-space: nowrap;
}

.mock--new .mn-photo {
  position: relative;
  flex: 1;
  overflow: hidden;
}

.mock--new .mn-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.88) contrast(1.04);
}

.mock--new .mn-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 15, 18, 0.1) 30%, rgba(14, 15, 18, 0.88) 100%);
}

.mock--new .mn-photo__copy {
  position: absolute;
  z-index: 2;
  left: 4.5%;
  right: 4.5%;
  bottom: 6.5%;
}

.mock--new .mn-eyebrow {
  display: block;
  font-size: clamp(0.4rem, 0.92cqw, 0.72rem);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #d9bd8a;
  margin-bottom: 2.4%;
}

.mock--new .mn-photo__copy h4 {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 3.4cqw, 2.7rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.03;
}

.mock--new .mn-photo__copy p {
  margin-top: 1.6%;
  font-size: clamp(0.55rem, 1.25cqw, 0.92rem);
  color: rgba(242, 240, 234, 0.8);
  max-width: 34em;
}

.mock--new .mn-actions {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 2.4cqw, 2rem);
  margin-top: 3.4%;
  flex-wrap: wrap;
}

.mock--new .mn-btn {
  font-size: clamp(0.5rem, 1.15cqw, 0.86rem);
  font-weight: 700;
  background: #c8a35f;
  color: #14110a;
  border-radius: 999px;
  padding: 0.78em 1.7em;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(200, 163, 95, 0.28);
}

.mock--new .mn-rating {
  font-size: clamp(0.46rem, 1.05cqw, 0.8rem);
  font-weight: 500;
  color: rgba(242, 240, 234, 0.82);
  white-space: nowrap;
}

.mock--new .mn-rating i { color: #e7c789; font-style: normal; letter-spacing: 0.04em; }
.mock--new .mn-rating b { color: #fff; font-weight: 700; }

.mock--new .mn-chips {
  display: flex;
  gap: 2%;
  padding: 2.2% 4.5%;
  flex-wrap: wrap;
}

.mock--new .mn-chips span {
  font-size: clamp(0.48rem, 1.05cqw, 0.78rem);
  font-weight: 500;
  border: 1px solid rgba(200, 163, 95, 0.45);
  color: #e8dcc2;
  border-radius: 999px;
  padding: 0.5em 1.2em;
  white-space: nowrap;
}

.ba__note {
  margin-top: 1.2rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-3);
}

/* ---------- SEO & Marketing intro (Google-ranking visual) ---------- */

.seo-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.seo-intro__copy .lead { margin-bottom: 1.4rem; }
.seo-intro__copy .lead:last-of-type { margin-bottom: 2.2rem; }

@media (max-width: 900px) {
  .seo-intro { grid-template-columns: 1fr; }
}

/* Search-results illustration, styled like a Google results page */
.serp {
  background: #ffffff;
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  box-shadow: 0 40px 90px rgba(28, 25, 20, 0.14);
  padding: clamp(1.6rem, 3.2vw, 2.6rem);
  font-family: var(--font-body);
}

.serp__logo {
  text-align: center;
  font-size: clamp(2.1rem, 4.4vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 1.4rem;
}

.serp__bar {
  display: flex;
  align-items: stretch;
  border: 1px solid #dfe1e5;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(32, 33, 36, 0.08);
  margin-bottom: 1.8rem;
}

.serp__q {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0.85em 1.1em;
  color: #9aa0a6;
  font-size: 1rem;
}

.serp__btn {
  background: #ea4335;
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  border: 0;
  padding: 0 1.6em;
  cursor: default;
}

.serp__result { padding: 0.55rem 0 0.95rem; }

.serp__result h5 {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 500;
  margin-bottom: 0.6rem;
}

.serp__result--you h5 { color: #1a0dab; }
.serp__result--them h5 { color: #ea4335; }

.serp__line { height: 9px; border-radius: 4px; background: #dadce0; margin-bottom: 8px; max-width: 62%; }
.serp__line.short { max-width: 44%; }

/* ---------- SEO pillars: text-parallax-content cards ---------- */

.tpc { padding: 0 clamp(0.75rem, 2vw, 1.2rem); }

.tpc__scroller { position: relative; height: 150vh; }

.tpc__media {
  position: sticky;
  top: 12px;
  height: calc(100vh - 24px);
  border-radius: calc(var(--r-card) + 4px);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  will-change: transform;
}

.tpc__shade {
  position: absolute;
  inset: 0;
  background: rgba(16, 14, 11, 0.66);
  will-change: opacity;
}

.tpc__copy {
  position: absolute;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  pointer-events: none;
  will-change: transform, opacity;
  padding: 0 var(--gutter);
}

.tpc__sub {
  font-family: var(--font-body);
  font-size: clamp(0.75rem, 1.4vw, 0.95rem);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  margin-bottom: 1rem;
}

.tpc__heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 6.5vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
}

.tpc__content {
  max-width: 1024px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding: clamp(3rem, 6vw, 5rem) var(--gutter) clamp(4rem, 9vw, 7rem);
}

.tpc__content h3 { max-width: 10em; }
.tpc__content p { color: var(--text-2); font-size: 1.1rem; line-height: 1.65; }
.tpc__content p + p { margin-top: 1rem; }

@media (max-width: 860px) {
  .tpc__content { grid-template-columns: 1fr; gap: 1.2rem; }
  .tpc__scroller { height: 130vh; }
}

/* ---------- Phone previews (work page) ---------- */

.phones {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: start;
}

@media (max-width: 860px) {
  .phones { grid-template-columns: 1fr; max-width: 340px; margin-inline: auto; }
}

/* The iPhone previews just re-show the sites already in the portfolio, so on a
   phone (where the visitor is already on mobile) they're redundant -> hide them.
   Desktop is untouched. */
@media (max-width: 780px) {
  .section--phones { display: none; }
}

.phone { text-align: center; }

.phone__body {
  position: relative;
  border-radius: clamp(34px, 4.5vw, 52px);
  border: 1px solid var(--line);
  background: #0b0d12;
  padding: clamp(9px, 1.1vw, 13px);
  box-shadow: 0 30px 70px rgba(28, 25, 20, 0.28);
  transition: transform 400ms var(--ease-out), box-shadow 400ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .phone:hover .phone__body {
    transform: translateY(-8px);
    box-shadow: 0 44px 90px rgba(28, 25, 20, 0.34);
  }
}

.phone__screen {
  position: relative;
  border-radius: clamp(26px, 3.6vw, 40px);
  overflow: hidden;
  aspect-ratio: 390 / 800;
  background: #ffffff;
}

/* Interactive: the visitor can actually scroll/swipe the live mobile site */
.phone__screen iframe {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  transform-origin: 0 0;
  background: #fff;
  pointer-events: auto;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.phone__hint {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.4em 0.95em;
  border-radius: 999px;
  background: rgba(8, 9, 13, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  pointer-events: none;
  transition: opacity 300ms ease;
}

.phone__hint::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 8px #4ade80;
}

.phone:hover .phone__hint { opacity: 0; }

.phone__island {
  position: absolute;
  z-index: 3;
  top: clamp(16px, 2vw, 24px);
  left: 50%;
  transform: translateX(-50%);
  width: 26%;
  height: clamp(9px, 1.1vw, 13px);
  border-radius: 999px;
  background: #060709;
}

.phone figcaption {
  margin-top: 1rem;
  font-size: 0.92rem;
  color: var(--text-2);
}

/* ---------- Quote builder (pricing) ---------- */

.quote {
  max-width: 780px;
  margin-inline: auto;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  padding: clamp(1.8rem, 4vw, 3rem);
}

.quote__step { margin-bottom: 2rem; }

.quote__label {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.9rem;
}

.quote__label small {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-3);
  margin-left: 0.6em;
}

.chips { display: flex; flex-wrap: wrap; gap: 0.7rem; }

.chip {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-2);
  border-radius: 999px;
  padding: 0.6em 1.4em;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.chip:hover { border-color: var(--accent); color: var(--text); }
.chip:active { transform: scale(0.97); }

/* Selected brief options pick up the deep navy of the home-page hero photo */
.chip[aria-pressed="true"] {
  background: #17202e;
  border-color: #17202e;
  color: #f4f2ec;
}

.quote textarea,
.quote input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-input);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  padding: 0.9rem 1.1rem;
}

.quote textarea { min-height: 120px; resize: vertical; }

.quote textarea::placeholder,
.quote input::placeholder { color: var(--text-3); }

.quote textarea:focus-visible,
.quote input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.quote__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.quote__fields .quote__field--full { grid-column: 1 / -1; }

.quote__field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 0.45rem;
}

@media (max-width: 620px) {
  .quote__fields { grid-template-columns: 1fr; }
}

.quote__hint {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--text-3);
}

.quote__actions {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

/* Form submission states */
.quote__status {
  margin-top: 1.2rem;
  font-size: 0.95rem;
  min-height: 1.2em;
}

.quote__status[data-state="error"] { color: #ff8a8a; }
.quote__status[data-state="sending"] { color: var(--text-2); }

.quote__sent {
  text-align: center;
  padding: 1rem 0;
}

.quote__sent h3 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  margin-bottom: 0.8rem;
}

.quote__sent p { color: var(--text-2); max-width: 34em; margin-inline: auto; }

.quote__sent .tick {
  width: 56px;
  height: 56px;
  margin: 0 auto 1.4rem;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  display: grid;
  place-items: center;
  color: var(--accent-bright);
  font-size: 1.5rem;
}

.btn[disabled] { opacity: 0.55; cursor: default; pointer-events: none; }

/* ---------- Start a project (contact) layout ---------- */

.start {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.start__aside { position: sticky; top: calc(var(--nav-h) + 2rem); }

.start__aside h1 { max-width: 11em; }

.start__aside .lead { margin-top: 1.4rem; }

.start__steps {
  list-style: none;
  margin: 2.6rem 0 0;
  display: grid;
  gap: 1.4rem;
}

.start__steps li { display: flex; gap: 1rem; align-items: flex-start; }

.start__num {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--accent-bright);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
}

.start__step-txt { color: var(--text-2); font-size: 0.98rem; line-height: 1.5; }

.start__step-txt b {
  display: block;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 0.1rem;
}

.start__meta {
  margin-top: 2.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-soft);
}

.start__mail {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
  transition: color 180ms ease;
}

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

.start__loc { margin-top: 0.8rem; color: var(--text-3); font-size: 0.9rem; }

.quote__intro {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: 1.8rem;
}

.quote__rule { border: 0; border-top: 1px solid var(--line-soft); margin: 0.2rem 0 1.7rem; }

.quote__reassure { font-size: 0.9rem; color: var(--text-3); }

@media (max-width: 900px) {
  .start { grid-template-columns: 1fr; gap: clamp(2rem, 7vw, 3rem); }
  .start__aside { position: static; }
  .quote { margin-inline: 0; }
}

/* ---------- About ---------- */

.about {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.about__photo {
  border-radius: var(--r-card);
  overflow: hidden;
  position: relative;
}

.about__photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: saturate(0.92);
}

.about__photo figcaption {
  padding: 0.9rem 0.2rem 0;
  font-size: 0.9rem;
  color: var(--text-3);
}

.about__text p { color: var(--text-2); margin-top: 1.2rem; max-width: 36em; }

.about__text p b { color: var(--text); font-weight: 700; }

@media (max-width: 860px) {
  .about { grid-template-columns: 1fr; }
  .about__photo { max-width: 420px; }
}

/* ---------- Contact ---------- */

.contact { text-align: center; }

.contact .h-xl { margin-inline: auto; max-width: 10em; }

.contact .lead { margin: 1.4rem auto 2.6rem; }

.contact__mail {
  display: inline-block;
  margin-top: 2rem;
  font-size: 1.05rem;
  color: var(--text-2);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: color 180ms ease, border-color 180ms ease;
}

.contact__mail:hover { color: var(--accent-bright); border-color: var(--accent); }

/* ---------- Footer ---------- */

.footer {
  border-top: 1px solid var(--line-soft);
  padding: 3.5rem 0 2.5rem;
}

.footer__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  align-items: flex-start;
}

.footer__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
}

.footer__brand span { color: var(--accent-bright); }

.footer__about {
  max-width: 34em;
  color: var(--text-3);
  font-size: 0.92rem;
  margin-top: 0.8rem;
}

.footer__links {
  display: flex;
  gap: 2rem;
  list-style: none;
}

.footer__links a {
  color: var(--text-2);
  text-decoration: none;
  font-size: 0.92rem;
}

.footer__links a:hover { color: var(--text); }

.footer__legal {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  color: var(--text-3);
  font-size: 0.85rem;
}

/* ---------- Pricing page ---------- */

/* Pricing hero: same seascape image as the home page, as a dark backdrop */
.phero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #17202e;
  padding: calc(var(--nav-h) + clamp(4rem, 9vw, 7rem)) 0 clamp(8rem, 13vw, 11rem);
  text-align: center;
}

.phero__bg { position: absolute; inset: 0; z-index: -1; }

.phero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  animation: hero-zoom 24s ease-in-out infinite alternate;
}

.phero__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 28%, rgba(10, 14, 24, 0.34) 0%, rgba(10, 14, 24, 0.56) 55%, rgba(10, 14, 24, 0.8) 100%),
    linear-gradient(180deg, rgba(10, 14, 24, 0.55) 0%, transparent 32%, rgba(10, 14, 24, 0.62) 100%);
}

.phero__inner { position: relative; z-index: 1; }

.phero__pill {
  display: inline-block;
  background: rgba(246, 242, 232, 0.1);
  border: 1px solid rgba(246, 242, 232, 0.3);
  color: #f0e7d4;
  border-radius: 999px;
  padding: 0.45em 1.3em;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 1.8rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.phero h1 {
  color: #f6f2e8;
  margin-inline: auto;
  max-width: 14em;
  text-shadow: 0 2px 34px rgba(8, 12, 22, 0.42);
}

.phero h1 .em-accent { color: #e7c789; }

.phero .lead { color: rgba(246, 242, 232, 0.84); margin: 1.5rem auto 0; }

.psheet {
  background: var(--surface);
  border-radius: 32px 32px 0 0;
  margin-top: -4rem;
  position: relative;
  z-index: 2;
  padding-top: clamp(4rem, 7vw, 6rem);
  box-shadow: 0 -30px 60px rgba(28, 25, 20, 0.05);
}

.tiers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2rem);
  align-items: stretch;
  max-width: 760px;
  margin-inline: auto;
}

@media (max-width: 900px) {
  .tiers { grid-template-columns: 1fr; max-width: 460px; }
}

.tier {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  padding: 2.2rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  transition: transform 300ms var(--ease-out), border-color 300ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .tier:hover { transform: translateY(-6px); border-color: var(--line); }
}

.tier--hot { border-color: rgba(168, 135, 90, 0.6); position: relative; }

.tier--hot .tier__flag {
  position: absolute;
  top: -0.8rem;
  left: 2rem;
  background: var(--accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.3em 1em;
}

.tier h3 { font-size: 1.35rem; }

.tier__tag {
  font-size: 0.95rem;
  color: var(--text-3);
}

.tier ul { list-style: none; display: grid; gap: 0.55rem; }

.tier li {
  color: var(--text-2);
  font-size: 0.97rem;
  padding-left: 1.4em;
  position: relative;
}

.tier li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 0.55em;
  height: 0.3em;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

.tier .btn { margin-top: auto; justify-content: center; }

.fears {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2rem) clamp(2rem, 4vw, 3.5rem);
}

@media (max-width: 780px) { .fears { grid-template-columns: 1fr; } }

.fear h4 { font-family: var(--font-display); font-size: 1.15rem; margin-bottom: 0.35rem; }

.fear p { color: var(--text-2); font-size: 0.98rem; }

.promises {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  justify-content: center;
  text-align: center;
}

.promise { flex: 1 1 240px; max-width: 320px; }

.promise h4 { font-family: var(--font-display); font-size: 1.2rem; margin-bottom: 0.4rem; }

.promise p { color: var(--text-2); font-size: 0.95rem; }

/* "How pricing works" numbered steps */
.how {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

@media (max-width: 760px) { .how { grid-template-columns: 1fr; gap: 1.6rem; } }

.pillar { padding: 1.5rem 0; border-top: 1px solid var(--line-soft); }
.pillar:first-child { border-top: 0; padding-top: 0; }
.pillar:last-child { padding-bottom: 0; }

.pillar h4 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.45rem;
}

.pillar p { color: var(--text-2); max-width: 36em; }

/* ---------- Additional services ---------- */

.addons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.1rem, 2.5vw, 1.6rem);
}

@media (max-width: 700px) { .addons { grid-template-columns: 1fr; } }

.addon {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  padding: clamp(1.5rem, 3vw, 2rem);
  transition: transform 300ms var(--ease-out), border-color 300ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .addon:hover { transform: translateY(-4px); border-color: rgba(168, 135, 90, 0.5); }
}

.addon h4 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; margin-bottom: 0.35rem; }

.addon__tag { font-size: 0.9rem; font-weight: 600; color: var(--accent-bright); margin-bottom: 0.75rem; }

.addon p { color: var(--text-2); font-size: 0.97rem; }

/* ---------- FAQ ---------- */

.faq { max-width: 860px; margin-inline: auto; }

.faq__item { border-top: 1px solid var(--line-soft); padding: clamp(1.3rem, 3vw, 1.7rem) 0; }

.faq__item:first-child { border-top: 0; padding-top: 0; }

.faq__item h4 {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  font-weight: 600;
  margin-bottom: 0.55rem;
}

.faq__item p { color: var(--text-2); max-width: 64ch; }

/* ---------- Legal page ---------- */

.legal { max-width: 940px; margin-inline: auto; }

.legal__head { max-width: 40em; margin-bottom: clamp(2rem, 5vw, 3.5rem); }

.legal__head .lead { margin-top: 1.2rem; }

.legal__updated {
  margin-top: 1.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-3);
}

.legal__body { display: grid; gap: clamp(1.8rem, 3.5vw, 2.6rem); }

.legal__block { border-top: 1px solid var(--line-soft); padding-top: clamp(1.6rem, 3vw, 2.2rem); }

.legal__block h2 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  font-weight: 600;
  margin-bottom: 1rem;
}

.legal__block p { color: var(--text-2); max-width: 62ch; }
.legal__block p + p { margin-top: 1rem; }

.legal__block a { color: var(--accent-bright); text-decoration: none; border-bottom: 1px solid var(--line); }
.legal__block a:hover { border-color: var(--accent); }

.legal__block ul { list-style: none; display: grid; gap: 1rem; max-width: 66ch; }

.legal__block li { color: var(--text-2); padding-left: 1.5em; position: relative; }

.legal__block li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--accent);
}

.legal__block li b { color: var(--text); font-weight: 600; }

/* Bracketed placeholders the owner still needs to fill in */
.legal__todo {
  font-style: italic;
  color: var(--accent-bright);
  background: var(--accent-soft);
  border-radius: 5px;
  padding: 0 0.35em;
}

/* Closing "have this reviewed" callout */
.legal__note {
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  padding: clamp(1.4rem, 3vw, 2rem);
}

.legal__note h2 { margin-bottom: 0.7rem; }
.legal__note p { color: var(--text-2); max-width: none; }

/* ---------- Redesign example eyebrow ---------- */

.ba__eyebrow { display: block; margin-bottom: 1.25rem; }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero__title .char { opacity: 1; transform: none; animation: none; }
  .hero__bar { opacity: 1; animation: none; }
  .hero__layer { will-change: auto; }
  .hero__img-layer img { animation: none; transform: none; }

  .svc .letter span,
  .services__frames .frame,
  .viewer.is-animating,
  .portal__screen,
  .btn,
  .tier { transition: none; }

  /* Text-parallax SEO cards: pin stays (pure CSS), text static + readable */
  .tpc__copy { position: static; height: auto; padding-top: 22vh; opacity: 1 !important; transform: none !important; }
  .tpc__shade { opacity: 0.55 !important; }
  .tpc__scroller { height: auto; min-height: 100vh; }
  .tpc__media { position: relative; top: 0; transform: none !important; }
}