:root {
  --purple: #7c3aed;
  --purple-2: #a855f7;
  --purple-light: #e9d5ff;

  --ink: #17111d;
  --muted: #6f6477;

  --paper: #fbf9fd;

  --line: rgba(23, 17, 29, 0.12);
}


/* =========================================
   RESET
========================================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  font-family:
    Inter,
    Arial,
    Helvetica,
    sans-serif;

  color: var(--ink);

  background: var(--paper);
}

a {
  color: inherit;
}

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


/* =========================================
   HEADER
========================================= */

.site-header {
  position: sticky;

  top: 0;

  z-index: 100;

  height: 78px;

  padding:
    0
    clamp(18px, 4vw, 64px);

  display: flex;

  align-items: center;

  gap: 28px;

  background:
    rgba(251, 249, 253, 0.94);

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);

  border-bottom:
    1px solid
    rgba(23, 17, 29, 0.08);
}


.brand {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  text-decoration: none;

  min-width: max-content;
}


.brand-mark {
  width: 40px;
  height: 40px;

  display: grid;

  place-items: center;

  border-radius: 12px;

  background: var(--ink);

  color: white;

  font-weight: 1000;

  letter-spacing: -0.05em;
}


.brand-copy {
  display: flex;

  flex-direction: column;

  line-height: 0.95;
}


.brand-copy strong {
  font-size: 0.92rem;

  letter-spacing: 0.07em;
}


.brand-copy small {
  margin-top: 4px;

  font-size: 0.64rem;

  letter-spacing: 0.25em;
}


.nav {
  display: flex;

  align-items: center;

  gap: 24px;

  margin-left: auto;
}


.nav a {
  text-decoration: none;

  font-size: 0.86rem;

  font-weight: 750;

  color: #44394a;

  transition:
    color 0.2s ease;
}


.nav a:hover {
  color: var(--purple);
}


.header-cta {
  padding:
    12px 18px;

  border-radius: 999px;

  background: var(--purple);

  color: white;

  text-decoration: none;

  font-size: 0.85rem;

  font-weight: 850;
}


/* =========================================
   HERO
========================================= */

.hero {
  position: relative;

  width: 100%;

  height:
    calc(100vw * 0.5625);

  min-height: 680px;

  max-height: 840px;

  overflow: hidden;

  background: #dfc3f8;

  isolation: isolate;
}


/* MAIN MASCOT VIDEO */

.hero-video {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position: center center;

  z-index: 0;

  pointer-events: none;

  user-select: none;
}


/* SECOND VIDEO USED FOR SMOOTH MASCOT CROSSFADE */

.hero-video.motion-layer {
  opacity: 0;

  transition:
    opacity 260ms ease;

  will-change: opacity;
}


/* HERO LIGHT WASH */

.hero-wash {
  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  background:

    linear-gradient(
      90deg,

      rgba(
        239,
        224,
        255,
        0.98
      )
      0%,

      rgba(
        239,
        224,
        255,
        0.92
      )
      22%,

      rgba(
        239,
        224,
        255,
        0.58
      )
      42%,

      rgba(
        239,
        224,
        255,
        0.12
      )
      62%,

      rgba(
        239,
        224,
        255,
        0
      )
      78%
    ),

    linear-gradient(
      0deg,

      rgba(
        32,
        12,
        50,
        0.12
      ),

      transparent 30%
    );
}


/* HERO COPY */

.hero-copy {
  position: absolute;

  z-index: 5;

  top: 50%;

  left:
    clamp(
      24px,
      6vw,
      110px
    );

  transform:
    translateY(-50%);

  width:
    min(
      630px,
      46vw
    );
}


.eyebrow,
.section-kicker {
  margin:
    0 0 18px;

  font-size: 0.76rem;

  font-weight: 950;

  letter-spacing: 0.18em;

  color: var(--purple);

  text-transform: uppercase;
}


.hero h1 {
  margin: 0;

  max-width: 650px;

  font-size:
    clamp(
      4rem,
      7.3vw,
      8rem
    );

  line-height: 0.84;

  letter-spacing: -0.065em;

  text-transform: uppercase;
}


.hero h1 span {
  display: block;

  color: var(--purple);
}


.hero-sub {
  max-width: 540px;

  margin:
    28px 0
    32px;

  font-size:
    clamp(
      1rem,
      1.35vw,
      1.28rem
    );

  line-height: 1.55;

  color: #392b43;
}


.hero-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 12px;
}


/* =========================================
   BUTTONS
========================================= */

.button {
  min-height: 50px;

  padding:
    0 22px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border: 0;

  border-radius: 999px;

  text-decoration: none;

  font: inherit;

  font-weight: 850;

  cursor: pointer;
}


.button-dark {
  background: var(--ink);

  color: white;
}


.button-ghost {
  border:
    1px solid
    rgba(23, 17, 29, 0.18);

  background:
    rgba(255, 255, 255, 0.48);
}


.button-light {
  background: white;

  color: var(--ink);
}


/* =========================================
   HERO INTERACTION
========================================= */

.interaction-layer {
  position: absolute;

  inset: 0;

  z-index: 6;

  cursor: crosshair;
}


.service-callout {
  position: absolute;

  z-index: 7;

  min-width: 170px;

  padding:
    13px 17px;

  border:
    1px solid
    rgba(255, 255, 255, 0.8);

  border-radius: 16px;

  background:
    rgba(255, 255, 255, 0.78);

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);

  box-shadow:
    0 20px 50px
    rgba(54, 22, 78, 0.14);

  opacity: 0;

  transform:
    translateY(10px)
    scale(0.96);

  transition:
    opacity 0.18s ease,
    transform 0.22s ease,
    left 0.18s ease,
    top 0.18s ease;

  pointer-events: none;
}


.service-callout.show {
  opacity: 1;

  transform:
    translateY(0)
    scale(1);
}


.service-callout span {
  display: block;

  margin-bottom: 3px;

  font-size: 0.62rem;

  font-weight: 950;

  letter-spacing: 0.18em;

  color: var(--purple);
}


.service-callout strong {
  font-size: 1.08rem;
}


.hero-hint {
  position: absolute;

  z-index: 7;

  left: 50%;

  bottom: 20px;

  transform:
    translateX(-50%);

  font-size: 0.65rem;

  font-weight: 900;

  letter-spacing: 0.16em;

  opacity: 0.52;

  pointer-events: none;
}


.hero-hint span {
  font-size: 1rem;
}


/* =========================================
   GENERAL SECTIONS
========================================= */

.section {
  padding:

    clamp(
      70px,
      8vw,
      125px
    )

    clamp(
      22px,
      6vw,
      100px
    );
}


.intro-section {
  border-bottom:
    1px solid
    var(--line);
}


.intro-grid {
  display: grid;

  grid-template-columns:
    1.15fr
    0.85fr;

  gap:
    clamp(
      30px,
      7vw,
      120px
    );

  align-items: end;
}


.intro-grid h2,
.section-head h2,
.ugc-copy h2,
.launch-copy h2 {
  margin: 0;

  font-size:
    clamp(
      2.7rem,
      5.4vw,
      6rem
    );

  line-height: 0.95;

  letter-spacing: -0.055em;
}


.intro-grid p,
.section-head > p,
.ugc-copy p,
.launch-copy p {
  margin: 0;

  color: var(--muted);

  line-height: 1.7;

  font-size: 1.08rem;
}


.section-head {
  display: grid;

  grid-template-columns:
    1.2fr
    0.8fr;

  gap:
    clamp(
      30px,
      8vw,
      140px
    );

  align-items: end;

  margin-bottom: 48px;
}


/* =========================================
   SERVICES
========================================= */

.service-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      1fr
    );

  gap: 16px;
}


.service-card {
  min-height: 310px;

  padding: 28px;

  display: flex;

  flex-direction: column;

  border:
    1px solid
    var(--line);

  border-radius: 26px;

  background: white;
}


.service-card.featured {
  color: white;

  background: var(--purple);

  border-color: transparent;
}


.service-number {
  font-size: 0.72rem;

  font-weight: 900;

  opacity: 0.6;
}


.service-card h3 {
  margin:
    auto 0
    14px;

  font-size: 1.55rem;

  line-height: 1.05;
}


.service-card p {
  margin:
    0 0
    22px;

  color: var(--muted);

  line-height: 1.55;
}


.service-card.featured p {
  color:
    rgba(
      255,
      255,
      255,
      0.92
    );
}


.service-card.featured .service-number {
  opacity: 0.9;
}


.service-chip {
  align-self: flex-start;

  padding:
    8px 10px;

  border:
    1px solid
    currentColor;

  border-radius: 999px;

  font-size: 0.65rem;

  font-weight: 900;

  letter-spacing: 0.12em;
}


/* =========================================
   SELECTED WORK
========================================= */

.work-section {
  background: #18111e;

  color: white;
}


.work-section .section-kicker {
  color: #c69dff;
}


.work-section .section-head > p {
  color:
    rgba(
      255,
      255,
      255,
      0.58
    );
}


.work-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      1fr
    );

  gap: 18px;
}


.work-card {
  min-height: 420px;

  padding: 18px;

  display: flex;

  flex-direction: column;

  overflow: hidden;

  border-radius: 26px;

  text-decoration: none;

  transition:
    transform 0.22s ease;
}


.work-card:hover {
  transform:
    translateY(-5px);
}


.browser-bar {
  display: flex;

  gap: 5px;

  padding:
    3px 2px
    14px;
}


.browser-bar span {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    rgba(
      255,
      255,
      255,
      0.45
    );
}


.work-art {
  flex: 1;

  padding: 28px;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  border-radius: 20px;
}


.work-art small {
  font-size: 0.68rem;

  font-weight: 900;

  letter-spacing: 0.18em;

  opacity: 0.72;
}


.work-art strong {
  margin-top: 8px;

  font-size:
    clamp(
      2.5rem,
      5vw,
      5rem
    );

  line-height: 0.84;

  letter-spacing: -0.06em;
}


.work-meta {
  padding:
    16px 4px
    2px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  font-size: 0.84rem;

  font-weight: 750;
}


.work-meta b {
  font-size: 1.2rem;
}


.work-purple {
  background: #5d2db7;
}

.work-purple .work-art {
  background:
    linear-gradient(
      145deg,
      #8b5cf6,
      #4c1d95
    );
}


.work-dark {
  background: #29222e;
}

.work-dark .work-art {
  background:
    radial-gradient(
      circle at
      70% 20%,
      #55455f,
      #17111d 60%
    );
}


.work-cyan {
  background: #0c6875;
}

.work-cyan .work-art {
  color: #062e35;

  background:
    linear-gradient(
      145deg,
      #32d2e6,
      #0c6875
    );
}


.work-rose {
  background: #6f2748;
}

.work-rose .work-art {
  background:
    linear-gradient(
      145deg,
      #e77ca8,
      #67223f
    );
}


.work-gold {
  background: #765d25;
}

.work-gold .work-art {
  color: #291f0c;

  background:
    linear-gradient(
      145deg,
      #d1b15b,
      #574317
    );
}


.work-blue {
  background: #153a7a;
}

.work-blue .work-art {
  background:
    linear-gradient(
      145deg,
      #3b82f6,
      #172554
    );
}


/* =========================================
   UGC + AI CREATIVE
========================================= */

.ugc-section {
  display: grid;

  grid-template-columns:
    0.82fr
    1.18fr;

  gap:
    clamp(
      36px,
      7vw,
      100px
    );

  align-items: center;
}


.ugc-copy p {
  margin:
    24px 0;
}


.text-link {
  color: var(--purple);

  font-weight: 900;

  text-decoration: none;
}


/* PORTRAIT VIDEO — DO NOT FORCE LANDSCAPE */

.ugc-video-wrap {
  min-height: 620px;

  display: grid;

  place-items: center;

  overflow: hidden;

  border-radius: 30px;

  background: #d9c0f4;

  box-shadow:
    0 30px 80px
    rgba(75, 39, 95, 0.16);
}


.ugc-video-wrap video {
  width: 100%;

  height: 620px;

  object-fit: contain !important;

  object-position:
    center center !important;

  background: #d9c0f4;
}


/* =========================================
   PHOTO RESTORATION
========================================= */

.restoration-section {
  background: #f0e4fb;
}


.restore-grid {
  max-width: 1180px;

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap: 20px;
}


/*
Both images occupy the EXACT same canvas.
The slider only reveals the BEFORE image.
Nothing gets resized when dragged.
*/

.compare {
  --pos: 50%;

  position: relative;

  width: 100%;

  height: 460px;

  overflow: hidden;

  border-radius: 24px;

  background: #d8c8e7;

  box-shadow:
    0 14px 34px
    rgba(
      72,
      42,
      92,
      0.08
    );
}


/* AFTER IMAGE */

.compare > img {
  position: absolute;

  inset: 0;

  width: 100% !important;
  height: 100% !important;

  object-fit: contain !important;

  object-position:
    center center !important;

  background: #d8c8e7;
}


/* BEFORE CONTAINER */

.compare-before {
  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;

  height: 100% !important;

  overflow: hidden !important;

  clip-path:
    inset(
      0
      calc(
        100% -
        var(--pos)
      )
      0
      0
    );

  z-index: 2;

  pointer-events: none;
}


/* BEFORE IMAGE */

.compare-before img {
  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;

  height: 100% !important;

  max-width: none !important;

  object-fit: contain !important;

  object-position:
    center center !important;

  background: #d8c8e7;
}


/* DIVIDER */

.compare-line {
  position: absolute;

  top: 0;

  bottom: 0;

  left:
    var(--pos) !important;

  width: 2px;

  background: white;

  transform:
    translateX(-1px);

  z-index: 4;

  pointer-events: none;
}


.compare-line span {
  position: absolute;

  top: 50%;

  left: 50%;

  transform:
    translate(
      -50%,
      -50%
    );

  width: 46px;

  height: 46px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: white;

  color: var(--purple);

  font-weight: 1000;

  box-shadow:
    0 6px 22px
    rgba(
      0,
      0,
      0,
      0.18
    );
}


/* INVISIBLE SLIDER */

.compare input[type="range"] {
  position: absolute;

  inset: 0;

  z-index: 5;

  width: 100%;

  height: 100%;

  opacity: 0;

  cursor: ew-resize;
}


/* BEFORE / AFTER LABELS */

.compare-label {
  position: absolute;

  top: 14px;

  z-index: 6;

  padding:
    8px 10px;

  border-radius: 999px;

  background:
    rgba(
      20,
      13,
      27,
      0.72
    );

  color: white;

  font-size: 0.62rem;

  font-weight: 900;

  letter-spacing: 0.12em;
}


.compare-label.before {
  left: 14px;
}


.compare-label.after {
  right: 14px;
}


/* =========================================
   LAUNCH SECTION
========================================= */

.launch-section {
  display: grid;

  grid-template-columns:
    1fr
    0.8fr;

  gap:
    clamp(
      30px,
      8vw,
      120px
    );

  align-items: center;
}


.launch-copy p {
  margin-top: 24px;
}


.launch-card {
  min-height: 330px;

  padding: 34px;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  border-radius: 28px;

  color: white;

  background: var(--purple);
}


.launch-card > span {
  margin-bottom: auto;

  font-size: 0.7rem;

  font-weight: 950;

  letter-spacing: 0.16em;

  opacity: 0.92;
}


.launch-card strong {
  font-size: 2.2rem;

  line-height: 1;
}


.launch-card p {
  color:
    rgba(
      255,
      255,
      255,
      0.92
    );

  line-height: 1.55;
}


.launch-card a {
  color: white;

  font-weight: 900;

  text-decoration: none;
}


/* =========================================
   CONTACT
========================================= */

.contact-section {
  padding:

    clamp(
      70px,
      8vw,
      125px
    )

    clamp(
      22px,
      6vw,
      100px
    );

  display: grid;

  grid-template-columns:
    0.85fr
    1.15fr;

  gap:
    clamp(
      36px,
      8vw,
      130px
    );

  background: #18111e;

  color: white;
}


.section-kicker.light {
  color: #c69dff;
}


.contact-copy h2 {
  margin: 0;

  font-size:
    clamp(
      3.2rem,
      6vw,
      7rem
    );

  line-height: 0.86;

  letter-spacing: -0.06em;
}


.contact-copy > p {
  max-width: 560px;

  color:
    rgba(
      255,
      255,
      255,
      0.62
    );

  line-height: 1.65;

  font-size: 1.08rem;
}


.contact-details {
  margin-top: 34px;

  display: flex;

  flex-direction: column;

  gap: 8px;
}


.contact-details a {
  color: white;

  text-decoration: none;

  font-size: 1.2rem;

  font-weight: 850;
}


/* =========================================
   FORM
========================================= */

.project-form {
  display: grid;

  gap: 15px;
}


.project-form label {
  display: grid;

  gap: 7px;

  color:
    rgba(
      255,
      255,
      255,
      0.72
    );

  font-size: 0.78rem;

  font-weight: 850;
}


.project-form input,
.project-form select,
.project-form textarea {
  width: 100%;

  padding:
    15px 16px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.14
    );

  border-radius: 15px;

  outline: none;

  background:
    rgba(
      255,
      255,
      255,
      0.08
    );

  color: white;

  font: inherit;
}


.project-form select option {
  color: var(--ink);
}


.project-form input:focus,
.project-form select:focus,
.project-form textarea:focus {
  border-color: #b785ff;
}


.project-form small {
  color:
    rgba(
      255,
      255,
      255,
      0.62
    );
}


.hp-field {
  position: absolute !important;

  left: -9999px !important;

  width: 1px !important;

  height: 1px !important;

  opacity: 0 !important;

  pointer-events: none !important;
}


.form-status {
  min-height: 1.4em;

  margin:
    2px 0 0;

  color:
    rgba(
      255,
      255,
      255,
      0.72
    );

  font-size: 0.82rem;

  line-height: 1.4;
}


.form-status.success {
  color: #b7f7c4;
}


.form-status.error {
  color: #ffb4b4;
}


.project-form button[disabled] {
  opacity: 0.65;

  cursor: wait;
}


/* =========================================
   FOOTER
========================================= */

footer {
  padding:
    28px
    clamp(
      22px,
      6vw,
      100px
    );

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 24px;

  background: #0f0b13;

  color:
    rgba(
      255,
      255,
      255,
      0.58
    );
}


.footer-brand {
  color: white;
}


/* =========================================
   SERVICE LINKS ON HOMEPAGE CARDS
========================================= */

.service-card h3 a {
  text-decoration: none;
}


.service-card h3 a:hover {
  text-decoration: underline;

  text-underline-offset: 4px;
}


/* =========================================
   SERVICE PAGES
========================================= */

.page-hero {
  display: grid;

  grid-template-columns:
    1.25fr
    0.75fr;

  gap:
    clamp(
      30px,
      6vw,
      100px
    );

  align-items: end;

  border-bottom:
    1px solid
    var(--line);

  background:
    linear-gradient(
      180deg,
      #f3eafd 0%,
      var(--paper) 100%
    );
}


.page-hero h1 {
  margin: 0;

  font-size:
    clamp(
      2.5rem,
      5vw,
      5.2rem
    );

  line-height: 0.98;

  letter-spacing: -0.05em;
}


.page-intro {
  max-width: 680px;

  margin:
    26px 0 30px;

  color: var(--muted);

  font-size: 1.12rem;

  line-height: 1.7;
}


.page-hero-area {
  margin-bottom: 0;

  font-size: 0.86rem;
}


.crumbs {
  margin-bottom: 22px;

  color: var(--muted);

  font-size: 0.82rem;

  font-weight: 750;
}


.crumbs a {
  color: var(--purple);

  text-decoration: none;
}


.included-grid .service-card {
  min-height: 230px;
}


.fit-section {
  background: white;

  border-top:
    1px solid
    var(--line);

  border-bottom:
    1px solid
    var(--line);
}


.fit-section .section-head {
  align-items: start;

  margin-bottom: 0;
}


.fit-list {
  margin: 0;

  padding: 0;

  list-style: none;

  display: grid;

  gap: 14px;
}


.fit-list li {
  position: relative;

  padding-left: 34px;

  color: #3d3344;

  font-size: 1.05rem;

  line-height: 1.55;
}


.fit-list li::before {
  content: "✓";

  position: absolute;

  left: 0;

  top: 1px;

  width: 22px;

  height: 22px;

  display: grid;

  place-items: center;

  border-radius: 999px;

  background: var(--purple);

  color: white;

  font-size: 0.72rem;

  font-weight: 900;
}


.faq-section h2 {
  margin:
    0 0 32px;

  font-size:
    clamp(
      2.2rem,
      4vw,
      4rem
    );

  letter-spacing: -0.05em;
}


.faq-list {
  display: grid;

  gap: 12px;

  max-width: 900px;
}


.faq-list details {
  padding:
    20px 24px;

  border:
    1px solid
    var(--line);

  border-radius: 20px;

  background: white;
}


.faq-list summary {
  cursor: pointer;

  list-style: none;
}


.faq-list summary::-webkit-details-marker {
  display: none;
}


.faq-list summary h3 {
  display: inline;

  margin: 0;

  font-size: 1.15rem;
}


.faq-list summary::after {
  content: "+";

  float: right;

  color: var(--purple);

  font-size: 1.4rem;

  font-weight: 900;

  line-height: 1;
}


.faq-list details[open] summary::after {
  content: "–";
}


.faq-list details p {
  margin:
    14px 0 0;

  color: var(--muted);

  line-height: 1.65;
}


.cta-band {
  align-items: center;
}


.cta-actions {
  display: grid;

  gap: 10px;

  justify-items: start;
}


.related-links {
  display: flex;

  flex-wrap: wrap;

  gap: 10px;
}


.related-links a {
  padding:
    12px 18px;

  border:
    1px solid
    var(--line);

  border-radius: 999px;

  background: white;

  color: var(--ink);

  font-weight: 800;

  text-decoration: none;
}


.related-links a:hover {
  border-color: var(--purple);

  color: var(--purple);
}


/* =========================================
   SITE FOOTER (all pages)
========================================= */

.site-footer {
  display: block;
}


.footer-top {
  display: grid;

  grid-template-columns:
    1.4fr
    1fr
    1fr;

  gap: 40px;

  padding:
    30px 0;
}


.footer-about p {
  max-width: 460px;

  line-height: 1.6;

  font-size: 0.9rem;
}


.footer-links {
  display: grid;

  align-content: start;

  gap: 9px;
}


.footer-links strong {
  color: white;

  font-size: 0.78rem;

  letter-spacing: 0.14em;

  text-transform: uppercase;
}


.footer-links a {
  color:
    rgba(
      255,
      255,
      255,
      0.72
    );

  text-decoration: none;

  font-size: 0.92rem;
}


.footer-links a:hover {
  color: white;
}


.social-links {
  display: flex;

  gap: 10px;

  margin-top: 6px;
}


.footer-links .social-links a {
  width: 40px;

  height: 40px;

  display: grid;

  place-items: center;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.16
    );

  border-radius: 12px;

  color: white;
}


.footer-links .social-links a:hover {
  border-color: #c69dff;

  color: #c69dff;
}


.footer-legal {
  margin: 0;

  padding-top: 18px;

  border-top:
    1px solid
    rgba(
      255,
      255,
      255,
      0.1
    );

  font-size: 0.82rem;
}


@media (
  max-width: 1000px
) {

  .page-hero {
    grid-template-columns:
      1fr;
  }

  .footer-top {
    grid-template-columns:
      1fr
      1fr;
  }

  .footer-about {
    grid-column: 1 / -1;
  }
}


@media (
  max-width: 700px
) {

  .footer-top {
    grid-template-columns:
      1fr;
  }

  .site-footer .brand-copy {
    display: flex;
  }
}


/* =========================================
   TABLET
========================================= */

@media (
  max-width: 1000px
) {

  .nav {
    display: none;
  }


  .hero {
    height: 720px;

    min-height: 720px;
  }


  .hero-copy {
    width:
      min(
        600px,
        62vw
      );
  }


  .service-grid {
    grid-template-columns:
      repeat(
        2,
        1fr
      );
  }


  .intro-grid,
  .section-head,
  .ugc-section,
  .launch-section,
  .contact-section {
    grid-template-columns:
      1fr;
  }


  .section-head {
    gap: 20px;
  }


  .ugc-video-wrap {
    min-height: 580px;
  }


  .ugc-video-wrap video {
    height: 580px;
  }

}


/* =========================================
   MOBILE
========================================= */

@media (
  max-width: 700px
) {

  .site-header {
    height: 68px;
  }


  .brand-copy {
    display: none;
  }


  .header-cta {
    margin-left: auto;
  }


  .hero {
    height: 760px;

    min-height: 760px;
  }


  .hero-video {
    object-position:
      62% center;
  }


  .hero-wash {
    background:

      linear-gradient(
        180deg,

        rgba(
          239,
          224,
          255,
          0.98
        )
        0%,

        rgba(
          239,
          224,
          255,
          0.88
        )
        38%,

        rgba(
          239,
          224,
          255,
          0.15
        )
        74%,

        rgba(
          239,
          224,
          255,
          0
        )
        100%
      );
  }


  .hero-copy {
    top: 42px;

    left: 20px;

    transform: none;

    width:
      calc(
        100% -
        40px
      );
  }


  .hero h1 {
    font-size:
      clamp(
        3.5rem,
        16vw,
        5.4rem
      );
  }


  .service-grid,
  .work-grid,
  .restore-grid {
    grid-template-columns:
      1fr;
  }


  .service-card {
    min-height: 260px;
  }


  .work-card {
    min-height: 350px;
  }


  /* PORTRAIT UGC */

  .ugc-video-wrap {
    min-height: 520px;
  }


  .ugc-video-wrap video {
    height: 520px;
  }


  /* RESTORATION */

  .compare {
    height: 430px;
  }


  footer {
    flex-direction: column;

    align-items: flex-start;
  }

}


/* =========================================
   REDUCED MOTION
========================================= */

@media (
  prefers-reduced-motion:
  reduce
) {

  *,
  *::before,
  *::after {
    animation-duration:
      0.001ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.001ms !important;

    scroll-behavior:
      auto !important;
  }

}