/* ==========================================================================
   JD Estate Media — Stylesheet
   Design system: rich black + warm cream + copper accent
   Fonts: Playfair Display (display serif) / Inter (UI sans)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;0,900;1,500;1,600&family=Inter:wght@300;400;500;600;700;800&display=swap');

:root{
  /* --- Color tokens --- */
  --color-black: #0a0a0a;
  --color-black-soft: #141210;
  --color-black-line: rgba(255,255,255,0.10);
  --color-cream: #f7f3ec;
  --color-cream-dim: #efe8db;
  --color-copper: #bf7e46;
  --color-copper-light: #dda677;
  --color-copper-dark: #9c6435;
  --color-white: #ffffff;
  --color-white-muted: rgba(255,255,255,0.68);
  --color-white-faint: rgba(255,255,255,0.42);
  --color-ink: #1b1815;
  --color-ink-muted: #6b6459;
  --color-ink-faint: #948c7e;
  --color-border-dark: rgba(255,255,255,0.12);
  --color-border-light: rgba(27,24,21,0.10);

  /* --- Type --- */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- Spacing scale (8pt rhythm) --- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 200ms;
  --dur-base: 300ms;
  --dur-slow: 700ms;
  --dur-reveal: 1200ms;
  --ease-reveal: cubic-bezier(0.22, 0.61, 0.28, 1);

  /* --- Layout --- */
  --container-max: 1180px;
  --nav-height: 100px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body{
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font-sans);
  background: var(--color-cream);
  color: var(--color-ink);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,p{ margin: 0; }
button{ font: inherit; color: inherit; background: none; border: none; padding: 0; }
svg{ display: block; }

::selection{ background: var(--color-copper); color: var(--color-white); }

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

@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;
  }
}

.container{
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-3);
}
@media (min-width: 768px){
  .container{ padding-inline: var(--space-5); }
}

section{ position: relative; scroll-margin-top: var(--nav-height); }

/* ==========================================================================
   Reveal-on-scroll utility
   ========================================================================== */
[data-reveal]{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-reveal) var(--ease-reveal), transform var(--dur-reveal) var(--ease-reveal);
  will-change: opacity, transform;
}
[data-reveal].is-visible{
  opacity: 1;
  transform: translateY(0);
}
[data-reveal="fade"]{ transform: translateY(10px); }
[data-reveal="left"]{ transform: translateX(-22px); }
[data-reveal="left"].is-visible{ transform: translateX(0); }
[data-reveal="right"]{ transform: translateX(22px); }
[data-reveal="right"].is-visible{ transform: translateX(0); }
[data-reveal="scale"]{ transform: scale(0.97); }
[data-reveal="scale"].is-visible{ transform: scale(1); }

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

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.9rem 1.9rem;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
  touch-action: manipulation;
}
.btn:active{ transform: scale(0.97); }

.btn-solid{
  background: var(--color-copper);
  color: var(--color-black);
  border: 1px solid var(--color-copper);
}
.btn-solid:hover{
  background: var(--color-copper-light);
  border-color: var(--color-copper-light);
  box-shadow: 0 10px 30px -10px rgba(191,126,70,0.55);
}

.btn-ghost{
  background: transparent;
  color: var(--color-white);
  border: 1px solid var(--color-border-dark);
}
.btn-ghost:hover{
  border-color: var(--color-white-muted);
  background: rgba(255,255,255,0.06);
}

/* ==========================================================================
   Section headers
   ========================================================================== */
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-copper);
}
.eyebrow::before{
  content: '';
  width: 28px;
  height: 1px;
  background: var(--color-copper);
}

.section-head{
  max-width: 640px;
  margin-bottom: var(--space-6);
}
.section-head.center{ margin-inline: auto; text-align: center; }

.section-kicker{
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-size: clamp(3rem, 7vw, 5.5rem);
  color: var(--color-ink);
}
section.dark .section-kicker{ color: var(--color-white); }

.section-title{
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
  font-size: clamp(2.1rem, 4.2vw, 3.4rem);
  margin-top: var(--space-2);
  color: var(--color-ink);
}
section.dark .section-title{ color: var(--color-white); }

.section-title.contact-title{
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-size: clamp(3rem, 7vw, 5.5rem);
}

.section-title em{
  font-style: italic;
  color: var(--color-copper);
}

.section-lede{
  margin-top: var(--space-3);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-ink-muted);
  max-width: 52ch;
}
.section-head.center .section-lede{ margin-inline: auto; }
section.dark .section-lede{ color: var(--color-white-muted); }

/* ==========================================================================
   Navigation
   ========================================================================== */
.nav{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              backdrop-filter var(--dur-base) var(--ease-out),
              height var(--dur-base) var(--ease-out);
}
.nav.is-scrolled{
  height: 84px;
  background: rgba(10,10,10,0.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--color-border-dark);
}
.nav .container{
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand{
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
}
.brand-mark{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.4vw, 2.4rem);
  line-height: 1;
  color: var(--color-white);
}
.brand-divider{
  width: 1px;
  height: 34px;
  background: var(--color-copper);
}
.brand-word{
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-white-muted);
}

/* ==========================================================================
   Hero
   ========================================================================== */
/* Taller than the viewport so there's extra scroll runway for the pinned
   layer below to play its zoom/parallax out over — the section itself
   doesn't need any of the visual treatment, just the extra height. */
.hero{
  position: relative;
  height: 165dvh;
}

/* Pinned to the viewport for the hero's whole scroll range (unpins the
   moment .hero itself runs out), so the dolly-zoom + parallax in script.js
   has room to play out fully before the section hands off to Pricing with
   a clean hard cut. */
.hero-pin{
  position: sticky;
  top: 0;
  height: 100dvh;
  display: flex;
  align-items: center;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(191,126,70,0.16), transparent 60%),
    linear-gradient(180deg, #0d0c0b 0%, #0a0a0a 55%, #060605 100%);
  color: var(--color-white);
  overflow: hidden;
}

/* assets/hero.jpg. Sized taller/wider than its box (bleed) so the parallax
   drift + zoom below never reveal an edge. JS drives transform every scroll
   frame: scale = camera pushing into the room, translateY = the photo
   lagging behind the page's own scroll speed (the actual "parallax" depth
   cue) — transform-only, GPU-friendly, no CSS transition fighting the JS. */
.hero-photo{
  position: absolute;
  left: 0;
  right: 0;
  top: -14%;
  height: 128%;
  background-image: url('assets/hero.jpg');
  background-size: cover;
  background-position: center 45%;
  opacity: 0.92;
  transform: translateY(0) scale(1);
  transform-origin: 50% 42%;
  will-change: transform;
}

/* Legibility scrim over the photo — dark enough at the text zone (left/top)
   to hold contrast, lighter mid-right so the room and sunset stay visible. */
.hero-scrim{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, rgba(8,7,6,0.86) 0%, rgba(8,7,6,0.58) 32%, rgba(8,7,6,0.22) 58%, rgba(8,7,6,0.4) 100%),
    linear-gradient(180deg, rgba(6,6,5,0.55) 0%, rgba(6,6,5,0.05) 22%, rgba(6,6,5,0.15) 68%, rgba(6,6,5,0.88) 100%);
}

.hero-grain{
  position: absolute;
  inset: 0;
  opacity: 0.35;
  pointer-events: none;
  mix-blend-mode: overlay;
}

.hero .container{
  position: relative;
  z-index: 2;
  padding-top: calc(var(--nav-height) + var(--space-6));
  padding-bottom: var(--space-7);
}

.hero-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-copper-light);
}
.hero-eyebrow::before{
  content:'';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-copper);
  box-shadow: 0 0 0 4px rgba(191,126,70,0.25);
}

.hero-title{
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.04;
  font-size: clamp(2.6rem, 6.4vw, 5.2rem);
  max-width: 16ch;
}
.hero-title em{
  font-style: italic;
  font-weight: 600;
  color: var(--color-copper-light);
}

.hero-sub{
  margin-top: var(--space-4);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.75;
  color: var(--color-white-muted);
  max-width: 46ch;
}

.hero-actions{
  margin-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.hero-stats{
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: var(--space-5);
  max-width: 560px;
  border-top: 1px solid var(--color-border-dark);
  padding-top: var(--space-4);
}
.hero-stat-num{
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700;
  color: var(--color-copper-light);
  line-height: 1;
}
.hero-stat-label{
  margin-top: 0.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-white-faint);
}

.scroll-cue{
  position: absolute;
  left: 50%;
  bottom: var(--space-4);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-white-faint);
  z-index: 2;
}
.scroll-cue span{
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.scroll-cue svg{
  width: 14px; height: 22px;
  animation: cue-bounce 2.2s ease-in-out infinite;
}
@keyframes cue-bounce{
  0%, 100%{ transform: translateY(0); opacity: 0.5; }
  50%{ transform: translateY(6px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce){
  .scroll-cue svg{ animation: none; }
}
@media (max-width: 640px){
  .scroll-cue{ display: none; }
}

/* ==========================================================================
   Pricing section
   ========================================================================== */
.pricing{
  background: var(--color-cream);
  padding-block: var(--space-8);
}

.gst-note{
  margin-top: var(--space-2);
  font-size: 0.8rem;
  color: var(--color-ink-faint);
  font-style: italic;
}

/* Cursor-following glow on the black boxes (package cards, service cards,
   turnaround block). Position is driven by JS every frame via --gx/--gy,
   eased toward the cursor for the "cushioned" lag (see script.js);
   this file only handles the look and the show/hide fade. */
.card .glow,
.service-card .glow,
.turnaround .glow{
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 450ms var(--ease-out);
  background: radial-gradient(460px circle at var(--gx, 50%) var(--gy, 50%), rgba(191,126,70,0.16) 0%, rgba(191,126,70,0.07) 45%, transparent 75%);
  pointer-events: none;
}
.card .glow.is-active,
.service-card .glow.is-active,
.turnaround .glow.is-active{
  opacity: 1;
}

.package-grid{
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 860px){
  .package-grid{ grid-template-columns: repeat(3, 1fr); align-items: stretch; }
}

.card{
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-black);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-dark);
  padding: var(--space-5) var(--space-4);
  transition: transform var(--dur-slow) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-slow) var(--ease-out);
}
.card:hover{
  transform: translateY(-10px);
  border-color: rgba(191,126,70,0.55);
  box-shadow: 0 30px 60px -25px rgba(0,0,0,0.45);
}

.card.featured{
  border-color: var(--color-copper);
  background: linear-gradient(165deg, #171310 0%, #0a0a0a 60%);
  box-shadow: 0 20px 50px -20px rgba(191,126,70,0.35);
}
@media (min-width: 860px){
  .card.featured{ z-index: 1; }
}

.card-badge{
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-copper);
  color: var(--color-black);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  white-space: nowrap;
}

.card-name{
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
}

.card-desc{
  margin-top: 0.6rem;
  font-size: 0.9rem;
  color: var(--color-white-muted);
  line-height: 1.65;
}

.card-features{
  margin-top: var(--space-4);
  margin-bottom: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.card-features li{
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--color-white-muted);
  line-height: 1.5;
}
.card-features svg{
  flex: none;
  width: 16px; height: 16px;
  margin-top: 0.2rem;
  color: var(--color-copper);
}

.card-footer{
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-dark);
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.card-price{
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--color-white);
  font-variant-numeric: tabular-nums;
}
.card-price-suffix{
  font-size: 0.78rem;
  color: var(--color-white-faint);
}

/* Playfair Display's $ renders with a double bar; use the sans face
   (single bar) for the symbol only, keep the serif numerals. */
.price-symbol{
  font-family: var(--font-sans);
  font-weight: 600;
}

/* Single services */
.services-heading{
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
  text-align: center;
}
.services-heading h3{
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
  font-size: clamp(2.1rem, 4.2vw, 3.4rem);
  color: var(--color-ink);
}

.service-grid{
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}
@media (min-width: 620px){
  .service-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px){
  .service-grid{ grid-template-columns: repeat(4, 1fr); align-items: stretch; }
}

.service-card{
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-black);
  color: var(--color-white);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  transition: transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.service-card:hover{
  transform: translateY(-8px);
  border-color: rgba(191,126,70,0.55);
  box-shadow: 0 24px 48px -22px rgba(0,0,0,0.45);
}
.service-name{
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-white);
}

.service-card ul{ margin-top: var(--space-2); display: flex; flex-direction: column; gap: 0.45rem; }
.service-card ul li{
  font-size: 0.85rem;
  color: var(--color-white-muted);
  display: flex; gap: 0.5rem; align-items: flex-start;
}
.service-card ul li svg{ width: 14px; height: 14px; margin-top: 0.2rem; flex: none; color: var(--color-copper); }

.service-text{
  margin-top: var(--space-2);
  font-size: 0.85rem;
  color: var(--color-white-muted);
  line-height: 1.6;
}

.service-card ul,
.service-card .service-text{
  flex: 1;
}

.service-price{
  margin-top: auto;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-dark);
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-white);
}

/* Turnaround */
.turnaround{
  position: relative;
  margin-top: var(--space-5);
  padding: var(--space-6) var(--space-4);
  background: var(--color-black);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-lg);
  text-align: center;
  color: var(--color-white);
  transition: transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.turnaround:hover{
  transform: translateY(-8px);
  border-color: rgba(191,126,70,0.55);
  box-shadow: 0 24px 48px -22px rgba(0,0,0,0.45);
}
.turnaround-title{
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
  font-size: clamp(2.1rem, 4.2vw, 3.4rem);
  color: var(--color-white);
  margin-bottom: var(--space-5);
}
.turnaround-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  max-width: 640px;
  margin: 0 auto;
}
.turnaround-num{
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 700;
  color: var(--color-copper-light);
}
.turnaround-label{
  margin-top: 0.3rem;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-white-faint);
}
.turnaround-note{
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-dark);
  font-size: 0.88rem;
  color: var(--color-white-muted);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact{
  background: var(--color-black);
  color: var(--color-white);
  padding-block: var(--space-8);
}

.contact-grid{
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 680px){
  .contact-grid{ grid-template-columns: 1fr 1fr; }
}

.contact-tile{
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.contact-tile:hover{
  border-color: var(--color-copper);
  background: rgba(191,126,70,0.06);
  transform: translateY(-4px);
}
.contact-icon{
  flex: none;
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(191,126,70,0.14);
  color: var(--color-copper-light);
}
.contact-icon svg{ width: 22px; height: 22px; }
.contact-label{
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-white-faint);
}
.contact-value{
  margin-top: 0.15rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  word-break: break-word;
}
.contact-hint{
  margin-top: var(--space-4);
  font-size: 0.8rem;
  color: var(--color-white-faint);
  font-style: italic;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  background: var(--color-black);
  border-top: 1px solid var(--color-border-dark);
  padding-block: var(--space-4);
}
.footer-inner{
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
  text-align: center;
  color: var(--color-white-faint);
  font-size: 0.78rem;
}
@media (min-width: 680px){
  .footer-inner{ flex-direction: row; justify-content: space-between; text-align: left; }
}
.footer-mark{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-white-muted);
}
.footer-mark span{ color: var(--color-copper); }