/* Bonbonica — main stylesheet
   Palette drawn from the logo: magenta, bronze, silver.
   Type: Fraunces (display) + Inter (body). Self-hosted, no third-party requests. */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/fraunces-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Colour — magenta and bronze, taken from the logo */
  --paper:       #FDFBFA;
  --tint:        #FAEEF6;   /* pale magenta band */
  --tint-warm:   #FBF4E6;   /* pale bronze band */
  --pink:        #A61C6E;   /* the accent — links, buttons, eyebrows */
  --pink-deep:   #7A1450;   /* hover, dark band */
  --pink-pale:   #F0D3E4;   /* borders */
  --bronze:      #8A6A0B;   /* secondary accent, used sparingly */
  --ink:         #241C22;
  --muted:       #5C4F56;
  --rule:        #E6DDE2;

  --shell: 1180px;                          /* content width */
  --pad-x: clamp(1.25rem, 4vw, 2.5rem);     /* edge padding */
  --band-y: clamp(3.5rem, 6vw, 5.5rem);     /* vertical rhythm */
  --radius: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

/* ---------- Shell ----------
   Bands run full width; the content inside them is contained and centred. */

.container {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* ---------- Links and focus ---------- */

a { color: var(--pink); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { color: var(--pink-deep); }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 0.85rem 1.3rem;
  background: var(--ink); color: #fff;
  font-weight: 600; text-decoration: none;
}
.skip:focus { left: 0; }

/* ---------- Header ---------- */

.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 50;
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-block: 0.9rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--ink);
}
.brand-logo { width: 42px; height: 42px; flex: none; }
.brand-name {
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.brand-tagline {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.nav > ul {
  display: flex; flex-wrap: wrap;
  gap: 0.3rem 1.5rem;
  margin: 0; padding: 0; list-style: none;
}
.nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.93rem;
  font-weight: 500;
  padding-block: 0.25rem;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--pink); }

/* ---------- Mobile navigation ----------
   The toggle is hidden above the breakpoint; the nav is always visible there. */

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.9rem;
  background: #fff;
  border: 1.5px solid var(--pink);
  border-radius: 999px;
  color: var(--pink);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.nav-toggle-bars {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 17px;
  height: 12px;
}
.nav-toggle-bars span {
  display: block;
  height: 2px;
  width: 100%;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

/* Bars become an X while the menu is open. */
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 760px) {
  .nav-toggle { display: inline-flex; }

  .nav {
    display: none;
    order: 3;
    width: 100%;
    padding-top: 0.9rem;
    margin-top: 0.9rem;
    border-top: 1px solid var(--rule);
  }
  .nav.is-open { display: block; }

  .nav > ul {
    flex-direction: column;
    gap: 0;
  }
  .nav > ul > li + li { border-top: 1px solid var(--rule); }
  .nav a {
    display: block;
    padding: 0.8rem 0.1rem;
    font-size: 1.02rem;
    color: var(--ink);
    border-bottom: 0;
  }
  .nav a[aria-current="page"] { color: var(--pink); font-weight: 600; }
  .nav a:hover { border-bottom: 0; }
}

/* ---------- Nav groups ----------
   Desktop: opens on hover and on keyboard focus. Clicking the group name
   goes straight to its hub page, so nothing is left open behind it.
   Below the breakpoint each group becomes an indented list, expanded by tap. */

.has-sub { position: relative; }

.has-sub > a::after {
  content: "";
  display: inline-block;
  width: 0.34em;
  height: 0.34em;
  margin-left: 0.4em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
}

.sub {
  display: none;
  position: absolute;
  top: 100%;
  left: -1rem;
  z-index: 60;
  min-width: 15rem;
  margin: 0;
  padding: 0.4rem 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--pink-pale);
  border-radius: var(--radius);
  box-shadow: 0 14px 34px rgba(36, 28, 34, 0.14);
}

.has-sub:hover > .sub,
.has-sub:focus-within > .sub { display: block; }

.sub li + li { border-top: 1px solid var(--rule); }
.sub a {
  display: block;
  padding: 0.6rem 1.1rem;
  font-size: 0.92rem;
  color: var(--ink);
  border-bottom: 0;
}
.sub a:hover { background: var(--tint); color: var(--pink); border-bottom: 0; }
.sub a[aria-current="page"] { color: var(--pink); font-weight: 600; }

@media (max-width: 760px) {
  .has-sub > a::after { float: right; margin-top: 0.55em; }

  .sub {
    display: none;
    position: static;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  /* hover and focus mean nothing on touch — the tap handler sets is-open */
  .has-sub:hover > .sub,
  .has-sub:focus-within > .sub { display: none; }
  .has-sub.is-open > .sub { display: block; }

  .sub li:first-child { border-top: 1px solid var(--rule); }
  .sub a {
    padding: 0.7rem 0.1rem 0.7rem 1.25rem;
    font-size: 0.95rem;
    color: var(--muted);
  }
  .sub a:hover { background: transparent; }
}

/* ---------- Eyebrow ---------- */

.eyebrow {
  margin: 0 0 0.9rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--pink);
}

/* ---------- Hero — two columns, text left, portrait right ---------- */

.hero {
  background: linear-gradient(180deg, var(--tint) 0%, var(--paper) 100%);
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  border-bottom: 1px solid var(--rule);
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .hero-inner { grid-template-columns: 1.05fr 0.95fr; }
}

.hero-h1 {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.95rem, 2.8vw, 2.9rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.022em;
  margin: 0 0 1.1rem;
  text-wrap: balance;
}

.lede {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 1.75rem;
  max-width: 46ch;
}

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

.btn {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  border: 1.5px solid var(--pink);
  border-radius: 999px;
  font-size: 0.97rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--pink);
  background: #fff;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.btn:hover { background: var(--tint); color: var(--pink-deep); transform: translateY(-1px); }

.btn--primary { background: var(--pink); border-color: var(--pink); color: #fff; }
.btn--primary:hover { background: var(--pink-deep); border-color: var(--pink-deep); color: #fff; }

/* Hero image frame */
.hero-media { position: relative; }
.hero-media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 14px 40px rgba(122, 20, 80, 0.14);
}

/* ---------- Bands ---------- */

.section { padding-block: var(--band-y); }

.section h2 {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.5rem, 2.1vw, 2.15rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.018em;
  margin: 0 0 1rem;
  max-width: 24ch;
  text-wrap: balance;
}

.section-lede {
  font-size: 1.08rem;
  color: var(--muted);
  max-width: 62ch;
  margin: 0 0 2.25rem;
}

/* ---------- Service cards ---------- */

.services { background: var(--paper); }

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 620px) { .card-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }

.card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--pink-pale);
  border-left: 4px solid var(--pink);
  border-radius: var(--radius);
  padding: 1.3rem 1.4rem;
  text-decoration: none;
  color: var(--ink);
  box-shadow: 0 2px 10px rgba(36, 28, 34, 0.05);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(122, 20, 80, 0.13);
  color: var(--ink);
}
.card--bronze { border-left-color: var(--bronze); }

.card h3 {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.18rem;
  font-weight: 600;
  margin: 0 0 0.45rem;
  letter-spacing: -0.01em;
}
.card p {
  margin: 0 0 0.9rem;
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--muted);
  flex: 1;
}
.card-cta { font-size: 0.9rem; font-weight: 600; color: var(--pink); }
.card--bronze .card-cta { color: var(--bronze); }

/* ---------- Interior page hero and breadcrumbs ---------- */

.hero--text .hero-h1 { max-width: 20ch; }
.hero--text .lede { max-width: 60ch; }

.crumbs {
  margin: 0 0 1.25rem;
  font-size: 0.86rem;
  color: var(--muted);
}
.crumbs a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--pink-pale); }
.crumbs a:hover { color: var(--pink); border-bottom-color: var(--pink); }
.crumbs span[aria-hidden] { margin: 0 0.4rem; color: var(--rule); }

/* ---------- Price line inside a card ---------- */

.card .price {
  margin: 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  flex: none;
}

/* ---------- Report figure ---------- */

.report-figure {
  margin: 0 0 2rem;
  max-width: 560px;
}
.report-figure img {
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 0 4px 18px rgba(36, 28, 34, 0.10);
}
.report-figure figcaption {
  margin-top: 0.7rem;
  font-size: 0.87rem;
  color: var(--muted);
  line-height: 1.45;
}

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

.faq { background: var(--tint-warm); border-block: 1px solid var(--rule); }

.faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 1.75rem;
}
@media (min-width: 900px) {
  .faq-grid { grid-template-columns: 1fr 1fr; gap: 0 3rem; }
}

.faq-item {
  padding: 1.35rem 0;
  border-top: 1px solid var(--rule);
}
.faq-item h3 {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0 0 0.5rem;
}
.faq-item p {
  margin: 0;
  font-size: 0.99rem;
  line-height: 1.62;
  color: var(--muted);
  max-width: 60ch;
}

/* ---------- Article prose ---------- */

.byline {
  margin: 1.25rem 0 0;
  font-size: 0.88rem;
  color: var(--muted);
}

.prose { max-width: 68ch; }
.prose p {
  margin: 0 0 1.05rem;
  font-size: 1.05rem;
  line-height: 1.72;
}
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: 600; }

.prose h3 {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.2rem, 1.7vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.25;
  margin: 2.1rem 0 0.7rem;
}
.prose h3:first-child { margin-top: 0; }

.about-copy .prose { max-width: none; }

/* ---------- Blog listing ---------- */

.post-list { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 1.5rem; }

.post {
  padding: 1.4rem 0;
  border-top: 1px solid var(--rule);
}
.post:first-child { border-top: 0; padding-top: 0.4rem; }
.post h3 {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.25;
  margin: 0 0 0.45rem;
}
.post h3 a { color: var(--ink); text-decoration: none; }
.post h3 a:hover { color: var(--pink); text-decoration: underline; }
.post p { margin: 0; color: var(--muted); font-size: 1rem; max-width: 68ch; }

/* ---------- Case study stats ---------- */

.subhead {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  margin: 2.5rem 0 0.9rem;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 1rem;
  margin: 0 0 1.75rem;
}

.stat {
  background: #fff;
  border: 1px solid var(--pink-pale);
  border-radius: var(--radius);
  padding: 1.3rem 1.4rem;
  box-shadow: 0 2px 10px rgba(36, 28, 34, 0.05);
}
.stat-num {
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--pink);
}
.stat-label {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.87rem;
  color: var(--muted);
  line-height: 1.4;
}

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

.form-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 900px) { .form-layout { grid-template-columns: 1fr 1fr; } }

.form-copy p { color: var(--muted); }

.lead-form {
  background: #fff;
  border: 1px solid var(--pink-pale);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: 0 3px 14px rgba(122, 20, 80, 0.07);
}

.field { margin-bottom: 1.05rem; }
.field label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}
.field .hint { font-weight: 400; color: var(--muted); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--paper);
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 1px;
  border-color: var(--pink);
}
.field textarea { resize: vertical; }

.field--check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 1.3rem;
}
.field--check input { width: auto; margin-top: 0.25rem; flex: none; }
.field--check label { font-weight: 400; font-size: 0.88rem; color: var(--muted); margin: 0; }

.lead-form .btn { width: 100%; text-align: center; border: 0; cursor: pointer; }

.form-note {
  margin: 0.9rem 0 0;
  font-size: 0.9rem;
  color: var(--muted);
  min-height: 1.2em;
}

/* ---------- Client quotes ---------- */

.quotes { background: var(--tint-warm); border-block: 1px solid var(--rule); }

.quote-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.15rem;
  margin-top: 2rem;
}
@media (min-width: 780px) { .quote-grid { grid-template-columns: 1fr 1fr; } }

.quote {
  display: flex;
  flex-direction: column;
  margin: 0;
  background: #fff;
  border: 1px solid var(--pink-pale);
  border-radius: var(--radius);
  padding: 1.5rem 1.6rem 1.3rem;
  box-shadow: 0 3px 14px rgba(122, 20, 80, 0.07);
}

.quote blockquote { margin: 0; flex: 1; }
.quote blockquote p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
}
.quote blockquote p::before { content: "\201C"; }
.quote blockquote p::after  { content: "\201D"; }

.quote figcaption {
  margin-top: 1.15rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
}
.quote figcaption span {
  display: block;
  font-weight: 400;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.15rem;
}

/* ---------- Products ---------- */

.products { background: var(--tint); border-block: 1px solid var(--rule); }

.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.15rem;
}
@media (min-width: 780px) { .product-grid { grid-template-columns: 1fr 1fr; } }

.product {
  background: #fff;
  border: 1px solid var(--pink-pale);
  border-radius: var(--radius);
  padding: 1.5rem 1.6rem;
  box-shadow: 0 3px 14px rgba(122, 20, 80, 0.07);
}
.product h3 {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0 0 0.6rem;
}
.product p { margin: 0 0 0.75rem; color: var(--muted); font-size: 1rem; }
.product p:last-child { margin-bottom: 0; }

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

.about { background: var(--paper); }

.about-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
}
@media (min-width: 900px) { .about-inner { grid-template-columns: 1.2fr 0.8fr; } }

.about-media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 12px 34px rgba(36, 28, 34, 0.13);
}

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

.contact { background: var(--pink-deep); color: #fff; }
.contact .eyebrow { color: #F5B9DC; }
.contact h2 { color: #fff; }
.contact p { color: #F3DEEA; }
.contact a { color: #fff; text-decoration-color: #DE8ABB; }
.contact a:hover { color: #F5B9DC; }
.contact :focus-visible { outline-color: #F5B9DC; }

.contact-lines {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 1.5rem 2rem;
  margin: 2.25rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.contact-lines dt {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: #F5B9DC; margin-bottom: 0.35rem;
}
.contact-lines dd { margin: 0; color: #fff; font-size: 0.98rem; }

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

.site-footer {
  background: var(--ink);
  color: #BDB2B9;
  padding-block: 2.5rem;
  font-size: 0.9rem;
}
.footer-inner {
  display: flex; flex-wrap: wrap;
  gap: 1rem 2.5rem;
  align-items: baseline; justify-content: space-between;
}
.copyright { margin: 0; }
.footer-area {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.85rem;
  color: #8E8189;
}
.footer-nav, .footer-social { display: flex; flex-wrap: wrap; gap: 0.4rem 1.35rem; }
.site-footer a { color: #BDB2B9; text-decoration: none; border-bottom: 1px solid transparent; }
.site-footer a:hover { color: #fff; border-bottom-color: #DE8ABB; }
.site-footer :focus-visible { outline-color: #DE8ABB; }

/* ================================================================
   Web design page — the page is the portfolio, so it is styled
   differently from the rest of the site. Everything here is scoped
   to .page-webdesign and affects no other page.
   ================================================================ */

.page-webdesign .wd-hero {
  background: linear-gradient(160deg, #1B1016 0%, #2C1622 55%, #3A1729 100%);
  border-bottom: 0;
  padding-block: clamp(3rem, 6vw, 5.5rem);
  overflow: hidden;
}
.page-webdesign .wd-hero .eyebrow { color: #F2A8CE; }
.page-webdesign .wd-hero .hero-h1 { color: #FFF; }
.page-webdesign .wd-hero .lede { color: #E2D4DC; }
.page-webdesign .wd-hero .crumbs { color: #B69EAA; }
.page-webdesign .wd-hero .crumbs a { color: #B69EAA; border-bottom-color: rgba(255,255,255,0.25); }
.page-webdesign .wd-hero .crumbs a:hover { color: #F2A8CE; border-bottom-color: #F2A8CE; }
.page-webdesign .wd-hero .btn {
  background: transparent;
  color: #FFF;
  border-color: rgba(255,255,255,0.5);
}
.page-webdesign .wd-hero .btn:hover { background: rgba(255,255,255,0.1); color: #FFF; }
.page-webdesign .wd-hero .btn--primary {
  background: var(--pink);
  border-color: var(--pink);
}
.page-webdesign .wd-hero .btn--primary:hover { background: #C42583; border-color: #C42583; }
.page-webdesign .wd-hero :focus-visible { outline-color: #F2A8CE; }

/* The code window — real markup, shown as evidence rather than decoration */

.code-window {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #14090F;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}

.code-bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 0.9rem;
  background: rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.code-bar .dot {
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
}
.code-bar .dot:first-child { background: #E0567E; }
.code-bar .dot:nth-child(2) { background: #D9A441; }
.code-bar .dot:nth-child(3) { background: #4FB477; }
.code-file {
  margin-left: 0.6rem;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.45);
}

.code-body {
  margin: 0;
  padding: 1.1rem 1.2rem 1.3rem;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(0.72rem, 0.9vw, 0.85rem);
  line-height: 1.85;
  color: #D8CBD3;
  tab-size: 2;
}
.code-body code { white-space: pre; }

/* every line is in the DOM from the start, so nothing shifts —
   they only fade in, one after another */
.code-body .cl {
  display: block;
  min-height: 1.85em;
  opacity: 0;
  transform: translateY(4px);
  animation: cl-in 0.32s ease forwards;
}
.code-body .cl:nth-child(1)  { animation-delay: 0.10s; }
.code-body .cl:nth-child(2)  { animation-delay: 0.19s; }
.code-body .cl:nth-child(3)  { animation-delay: 0.28s; }
.code-body .cl:nth-child(4)  { animation-delay: 0.37s; }
.code-body .cl:nth-child(5)  { animation-delay: 0.46s; }
.code-body .cl:nth-child(6)  { animation-delay: 0.55s; }
.code-body .cl:nth-child(7)  { animation-delay: 0.60s; }
.code-body .cl:nth-child(8)  { animation-delay: 0.69s; }
.code-body .cl:nth-child(9)  { animation-delay: 0.78s; }
.code-body .cl:nth-child(10) { animation-delay: 0.87s; }
.code-body .cl:nth-child(11) { animation-delay: 0.96s; }

@keyframes cl-in {
  to { opacity: 1; transform: translateY(0); }
}

/* syntax colors, pulled from the site palette rather than a code theme */
.code-body .p { color: #7E93A8; }
.code-body .t { color: #F2A8CE; }
.code-body .a { color: #D9A441; }
.code-body .s { color: #8FD3A8; }
.code-body .k { color: #D9A441; }
.code-body .c { color: #6E6068; font-style: italic; }

.code-caption {
  margin-top: 0.85rem;
  font-size: 0.83rem;
  line-height: 1.5;
  color: #A99AA3;
}

/* the whole hero block grows into place, once */
.page-webdesign .wd-hero .hero-text,
.page-webdesign .wd-hero .hero-media {
  animation: wd-rise 0.45s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}
.page-webdesign .wd-hero .hero-media { animation-delay: 0.08s; }

@keyframes wd-rise {
  from { opacity: 0; transform: scale(0.965) translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .page-webdesign .wd-hero .hero-text,
  .page-webdesign .wd-hero .hero-media,
  .code-body .cl {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}