/* ==========================================================================
   /custom-web-design-and-development/

   Transcribed from the live Elementor page so the rebuild keeps the shape the
   URL already ranks for: a video hero with centred copy, a tech-stack strip,
   a screenshot gallery, and bands that alternate dark and white down the page.

   Every value resolves to a token from tokens.css. No new hexes — the only
   literals below are alpha overlays built with color-mix() on an existing
   token, because a scrim has no token of its own.

   Namespace: .cwd-*  Page class: .cwd  (see page.tsx)

   Light bands are the reason this file exists rather than reusing
   service-page.css. /medspa-os/ set the precedent: only `main` goes light, and
   the Reviews marquee and Footer that PageShell appends after it stay dark, so
   the page ends by returning to the site.
   ========================================================================== */

.cwd main {
  background: var(--black);
  color: var(--warm-white);

  --cwd-shell: 1180px;
  --cwd-band: clamp(4.5rem, 9vw, 8rem);
  /* Card fill on the dark bands. color-mix keeps it tied to the tokens rather
     than freezing a fourth near-black hex into the palette. */
  --cwd-dark-card: color-mix(in srgb, var(--warm-white) 4%, var(--black));
  --cwd-dark-line: color-mix(in srgb, var(--warm-white) 10%, transparent);
}

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

/* --- Bands ---------------------------------------------------------------
   One band class, two surfaces. Anything that needs to flip colour reads the
   locals set here rather than hard-coding a token, so a band can be moved from
   light to dark by changing one attribute in the html. */
.cwd-band {
  padding-block: var(--cwd-band);
  position: relative;
}

.cwd-band--dark {
  background: var(--black);
  color: var(--warm-white);
  --cwd-fg: var(--warm-white);
  --cwd-fg-muted: var(--muted);
  --cwd-rule: var(--cwd-dark-line);
  --cwd-card: var(--cwd-dark-card);
  /* #6119AC is roughly 2:1 on near-black. On dark bands the accent has to be
     the lighter tint or the eyebrows fail contrast outright. */
  --cwd-accent: var(--purple-strong);
}

.cwd-band--light {
  background: var(--paper);
  color: var(--ink);
  --cwd-fg: var(--ink);
  --cwd-fg-muted: var(--ink-muted);
  --cwd-rule: var(--line);
  --cwd-card: var(--white);
  --cwd-accent: var(--purple);
}

/* --- Type ----------------------------------------------------------------
   The live page centres almost everything. Kept, because the centring is the
   most recognisable thing about the layout. */
.cwd-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-stretch: var(--wdth-display);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cwd-accent);
  margin: 0 0 var(--sp-3);
}

.cwd-h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: var(--wdth-display);
  font-size: var(--h1-hero);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0 0 var(--sp-3);
  color: var(--cwd-fg);
}

.cwd-h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: var(--wdth-display);
  font-size: var(--step-5);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0 0 var(--sp-3);
  color: var(--cwd-fg);
  text-wrap: balance;
}

.cwd-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: var(--wdth-display);
  font-size: var(--step-1);
  line-height: 1.2;
  margin: 0 0 var(--sp-2);
  color: var(--cwd-fg);
}

.cwd-p {
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--cwd-fg-muted);
  margin: 0 0 var(--sp-3);
  max-width: var(--measure);
}

.cwd-center {
  text-align: center;
}
.cwd-center .cwd-p {
  margin-inline: auto;
}

/* --- Hero ----------------------------------------------------------------
   Full-bleed looping video behind centred copy, exactly as live. The video is
   decorative: muted, inert, and hidden from assistive tech. */
/* Same as the bands below it: the hero is a dark surface but not a .cwd-band,
   so it has to declare the locals itself. Otherwise `color: var(--cwd-accent)`
   on the eyebrow is invalid at computed-value time and silently inherits from
   `main` instead of using the accent. */
.cwd-hero {
  --cwd-fg: var(--warm-white);
  --cwd-fg-muted: var(--muted);
  --cwd-rule: var(--cwd-dark-line);
  --cwd-card: var(--cwd-dark-card);
  --cwd-accent: var(--purple-strong);

  position: relative;
  min-height: clamp(600px, 88vh, 900px);
  display: grid;
  place-items: center;
  padding-block: calc(var(--nav-h) + var(--sp-6)) var(--sp-7);
  overflow: hidden;
  background: var(--black);
  isolation: isolate;
}

.cwd-hero__media,
.cwd-hero__media video,
.cwd-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cwd-hero__media {
  z-index: -2;
}

/* The scrim is what makes the headline legible over a moving image. Two stops
   rather than one flat wash so the top of the frame stays darker under the
   floating nav. */
.cwd-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--black) 82%, transparent), color-mix(in srgb, var(--black) 58%, transparent) 45%, color-mix(in srgb, var(--black) 88%, transparent)),
    color-mix(in srgb, var(--black) 25%, transparent);
}

/* The photo hero (/roseville-web-design/) needs a heavier scrim than the video
   one. The Roseville backdrop is bright daylight where the screen-recording
   loop it replaced was already dark, so the video scrim would leave white type
   sitting on an open sky. Dark enough for the headline to clear WCAG AA against
   the lightest part of the frame, light enough that the place is still
   recognisable. */
.cwd-hero--photo::after {
  background:
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--black) 88%, transparent),
      color-mix(in srgb, var(--black) 72%, transparent) 45%,
      color-mix(in srgb, var(--black) 92%, transparent)
    ),
    color-mix(in srgb, var(--black) 30%, transparent);
}

.cwd-hero__inner {
  position: relative;
  text-align: center;
  max-width: 60rem;
}

.cwd-hero__kicker {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: var(--wdth-display);
  font-size: var(--step-0);
  color: var(--warm-white);
  margin: 0 0 var(--sp-2);
}

.cwd-hero__lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--warm-white);
  max-width: 46rem;
  margin: 0 auto var(--sp-5);
}

/* --- Buttons -------------------------------------------------------------
   The live page's primary action is an outlined button, not a filled one. Kept
   on the dark bands; light bands get the solid purple, which is what the rest
   of the site uses and what reads as the Arcrel button on paper. */
.cwd-btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: var(--wdth-display);
  font-size: var(--step-0);
  letter-spacing: 0.01em;
  padding: 1rem 2.25rem;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.cwd-btn--ghost {
  color: var(--white);
  border: 1px solid var(--white);
  background: transparent;
}
.cwd-btn--ghost:hover {
  background: var(--white);
  color: var(--black);
}

.cwd-btn--solid {
  color: var(--white);
  background: var(--purple);
  border: 1px solid var(--purple);
}
.cwd-btn--solid:hover {
  background: var(--purple-glow);
  border-color: var(--purple-glow);
}

.cwd-cta-row {
  margin-top: var(--sp-5);
  text-align: center;
}

/* --- Tech stack strip ----------------------------------------------------
   Static grid rather than the live page's marquee: the logos are the proof, and
   a loop that never stops is motion for its own sake on a page that already
   opens with video. */
.cwd-stack {
  padding-block: var(--sp-6);
  border-block: 1px solid var(--cwd-dark-line);
  background: var(--black);
}

.cwd-stack__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.75rem, 4vw, 3.5rem);
}

.cwd-stack__grid img {
  height: clamp(26px, 3.2vw, 38px);
  width: auto;
  opacity: 0.75;
  filter: grayscale(1);
  transition: opacity var(--dur) var(--ease-out), filter var(--dur) var(--ease-out);
}

.cwd-stack__grid img:hover {
  opacity: 1;
  filter: none;
}

/* --- Gallery -------------------------------------------------------------
   Six tiles: three YouTube facades on top, three website screenshots beneath. */
.cwd-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

.cwd-gallery__tile {
  position: relative;
  margin: 0;
  border: 1px solid var(--cwd-rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--cwd-card);
  aspect-ratio: 16 / 9;
}

.cwd-gallery__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The facade button is the whole tile — see live.js, which swaps it for the
   iframe on click. */
.cwd-gallery__tile .arcrel-lv-vid__btn {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}

.cwd-gallery__tile .arcrel-lv-vid__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--black) 62%, transparent);
  border: 1px solid color-mix(in srgb, var(--white) 55%, transparent);
  color: var(--white);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.cwd-gallery__tile .arcrel-lv-vid__btn:hover .arcrel-lv-vid__play {
  background: var(--purple);
  transform: scale(1.06);
}

.cwd-gallery__tile .arcrel-lv-vid__iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* --- Numbered grid (How do we build / Four Pillars) ---------------------- */
.cwd-numbered {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: var(--sp-6);
  list-style: none;
  padding: 0;
}

.cwd-numbered__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  align-items: start;
}

.cwd-numbered__n {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: var(--wdth-display);
  font-size: var(--step-2);
  line-height: 1;
  color: var(--cwd-accent);
  font-variant-numeric: tabular-nums;
}

.cwd-numbered__item .cwd-p {
  margin-bottom: 0;
  font-size: var(--step--1);
}

.cwd-pillars__close {
  margin-top: var(--sp-6);
}

/* --- Process cards ------------------------------------------------------- */
.cwd-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  list-style: none;
  padding: 0;
}

.cwd-card {
  background: var(--cwd-card);
  border: 1px solid var(--cwd-rule);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.cwd-card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.cwd-card__n {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--purple);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step--1);
}

.cwd-card .cwd-h3 {
  margin: 0;
}
.cwd-card .cwd-p {
  margin-bottom: 0;
  font-size: var(--step--1);
  max-width: none;
}

/* --- Split (copy beside media) ------------------------------------------- */
.cwd-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.cwd-split--reverse .cwd-split__media {
  order: -1;
}

.cwd-split__copy .cwd-p {
  max-width: 34rem;
}

.cwd-split__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
  border: 1px solid var(--cwd-rule);
}

.cwd-split__stack {
  display: grid;
  gap: var(--sp-2);
}

/* --- Performance band (video backdrop) ----------------------------------- */
.cwd-perf {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}

.cwd-perf__media,
.cwd-perf__media video,
.cwd-perf__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cwd-perf__media {
  z-index: -2;
}

.cwd-perf::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--black) 74%, transparent);
}

/* --- Maintenance grid ---------------------------------------------------- */
.cwd-maint {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  list-style: none;
  padding: 0;
}

.cwd-maint__item {
  background: var(--cwd-card);
  border: 1px solid var(--cwd-rule);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 2.6vw, 2rem);
}

.cwd-maint__item .cwd-p {
  margin-bottom: 0;
  font-size: var(--step--1);
  max-width: none;
}

/* --- Proof (case studies) ------------------------------------------------ */
.cwd-proof__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  list-style: none;
  padding: 0;
}

.cwd-proof__link {
  display: block;
  text-decoration: none;
  border: 1px solid var(--cwd-rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--cwd-card);
  height: 100%;
  transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

.cwd-proof__link:hover {
  border-color: var(--purple);
  transform: translateY(-3px);
}

.cwd-proof__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.cwd-proof__body {
  display: block;
  padding: var(--sp-3);
}

.cwd-proof__vertical {
  display: block;
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cwd-fg-muted);
  margin-bottom: var(--sp-1);
}

.cwd-proof__jump {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: var(--wdth-display);
  font-size: var(--step-2);
  color: var(--cwd-accent);
  margin-bottom: var(--sp-1);
}

.cwd-proof__title {
  display: block;
  font-size: var(--step--1);
  line-height: 1.45;
  color: var(--cwd-fg);
}

.cwd-proof__more {
  margin-top: var(--sp-4);
  text-align: center;
}
.cwd-proof__more a {
  color: var(--cwd-accent);
}

/* --- FAQ ----------------------------------------------------------------- */
.cwd-faq__list {
  margin-top: var(--sp-5);
  border-top: 1px solid var(--cwd-rule);
}

.cwd-faq__item {
  border-bottom: 1px solid var(--cwd-rule);
}

.cwd-faq__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: var(--wdth-display);
  font-size: var(--step-1);
  color: var(--cwd-fg);
  list-style: none;
}

.cwd-faq__q::-webkit-details-marker {
  display: none;
}

.cwd-faq__mark {
  flex: none;
  color: var(--cwd-accent);
  transition: transform var(--dur) var(--ease-out);
}

.cwd-faq__item[open] .cwd-faq__mark {
  transform: rotate(45deg);
}

.cwd-faq__a {
  padding: 0 0 var(--sp-4);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--cwd-fg-muted);
  max-width: var(--measure);
}

/* --- Final CTA ----------------------------------------------------------- */
.cwd-final {
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* The purple bloom behind the closing card, as on the live page. Radial rather
   than a filled panel — purple is an accent, never a fill. */
.cwd-final::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 40%;
  width: min(1100px, 120vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--purple-glow) 42%, transparent), transparent 62%);
  pointer-events: none;
}

.cwd-final__inner {
  position: relative;
}

.cwd-final__logo {
  width: 76px;
  height: 76px;
  margin: 0 auto var(--sp-4);
  display: block;
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
  .cwd-gallery,
  .cwd-maint,
  .cwd-proof__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .cwd-numbered,
  .cwd-cards {
    grid-template-columns: 1fr;
  }
  .cwd-split {
    grid-template-columns: 1fr;
  }
  /* Media back under the copy on small screens regardless of desktop order,
     so every split reads copy-first. */
  .cwd-split--reverse .cwd-split__media {
    order: 0;
  }
}

@media (max-width: 620px) {
  .cwd-gallery,
  .cwd-maint,
  .cwd-proof__grid {
    grid-template-columns: 1fr;
  }
  .cwd-hero {
    min-height: 0;
  }
  .cwd-btn {
    display: block;
    text-align: center;
  }
}

/* A looping backdrop is decoration. Hold the poster frame instead. */
@media (prefers-reduced-motion: reduce) {
  .cwd-hero__media video,
  .cwd-perf__media video {
    display: none;
  }
}