/* Pure Posh Aesthetics — mobile-first stylesheet, no framework */

/* Self-hosted so no visitor data is sent to Google's CDN (GDPR-safe). */
@font-face {
  font-family: "Prata";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/prata-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

:root {
  /* Warm charcoal rather than neutral black — sits better against beige */
  --ink: #26221d;
  --ink-soft: #5f5950;
  --ink-mute: #767065;

  /* Dark panels (footer, feature band) sit lighter than body text on purpose,
     so the step down from the warm page is softer. Kept separate from --ink
     so easing the panels never washes out the type. */
  --surface-dark: #4a4239;

  /* Warm caramel accent. --accent is the brand colour and fills the buttons;
     it's light, so button text is charcoal rather than white (6.9:1).
     --accent-deep is the darker sibling for small text on pale backgrounds. */
  --accent-soft: #ecd3b6;
  --accent: #d4a276;
  --accent-deep: #8f6136;
  --champagne: #e0b98f;

  --white: #ffffff;
  --bg: #fdfaf6;
  --bg-warm: #f6efe7;
  --line: #e6dbcd;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;

  --max-width: 74rem;
  --measure: 38rem;

  --display: "Prata", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-1: clamp(1.125rem, 1.06rem + 0.32vw, 1.3125rem);
  --step-2: clamp(1.5rem, 1.32rem + 0.9vw, 2rem);
  --step-3: clamp(1.875rem, 1.55rem + 1.6vw, 2.75rem);
  --step-4: clamp(2.5rem, 1.95rem + 2.75vw, 4rem);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--ink-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.18;
  margin: 0 0 var(--space-2);
  color: var(--ink);
  letter-spacing: -0.01em;
}

h1 { font-size: var(--step-4); line-height: 1.08; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 var(--space-2); }

a { color: var(--accent-deep); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }

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

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

section { padding-block: var(--space-5); }

/* Keep anchor targets clear of the sticky header when jumping to them */
[id] { scroll-margin-top: 6rem; }

.section-alt { background: var(--bg-warm); }

/* Small uppercase label above headings */
.eyebrow {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: var(--space-2);
}

.lede {
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: var(--measure);
}

.measure { max-width: var(--measure); }

/* Manual line breaks in headings — only honoured once there's room for them */
.br-desk { display: none; }

/* Thin accent rule used as a quiet divider */
.rule {
  width: 3rem;
  height: 1px;
  background: var(--accent);
  border: 0;
  margin: 0 0 var(--space-3);
}

/* Buttons — rectangular and letterspaced reads more couture than a pill */
.btn {
  display: inline-block;
  padding: 1.05rem 2.25rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn:hover, .btn:focus-visible { text-decoration: none; }

/* Charcoal on caramel (6.9:1) — white on this tone would be only 2.3:1 */
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
}
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

.btn-outline {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn-outline:hover, .btn-outline:focus-visible {
  background: var(--ink);
  color: var(--white);
}

.btn-light {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--white);
}
.btn-light:hover, .btn-light:focus-visible {
  background: var(--white);
  border-color: var(--white);
  color: var(--ink);
}

.btn-block { display: block; width: 100%; }

/* Text link with a small arrow */
.link-more {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 0.25rem;
  align-self: flex-start;
}
.link-more:hover, .link-more:focus-visible {
  color: var(--accent-deep);
  text-decoration: none;
}

/* Header / nav */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-2);
}

/* Shrink-to-fit so the sub-label can inherit the wordmark's exact width */
.logo {
  display: inline-block;
  color: var(--ink);
}
.logo:hover { text-decoration: none; }

.logo-name {
  display: block;
  font-family: var(--display);
  font-size: 1.55rem;
  line-height: 1.05;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Letters are spread edge to edge rather than letter-spaced by guesswork,
   so AESTHETICS always lines up with PURE POSH at any font size. */
.logo-sub {
  display: flex;
  justify-content: space-between;
  font-family: var(--sans);
  font-size: 0.55rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-top: 0.4rem;
}
.logo-sub i { font-style: normal; }

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.nav-toggle span,
.nav-toggle::before,
.nav-toggle::after {
  content: "";
  display: block;
  width: 1.5rem;
  height: 1px;
  background: var(--ink);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle span { margin: 7px 0; }
.nav-toggle[aria-expanded="true"]::before { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span { opacity: 0; }
.nav-toggle[aria-expanded="true"]::after { transform: translateY(-8px) rotate(-45deg); }

.main-nav {
  position: fixed;
  inset: 0 0 0 25%;
  background: var(--white);
  display: flex;
  flex-direction: column;
  padding: 6rem var(--space-4) var(--space-3);
  transform: translateX(100%);
  transition: transform 0.28s ease;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.09);
}
.main-nav.is-open { transform: translateX(0); }

.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Scoped to the list so it can't out-specify .btn-primary on the CTA */
.main-nav ul a {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}
.main-nav ul a:hover { color: var(--accent-deep); text-decoration: none; }

.main-nav .btn { margin-top: var(--space-4); }

.nav-current { color: var(--accent-deep) !important; }

/* Hero */
.hero { padding-block: var(--space-5); }

.hero-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

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

.hero-figure {
  aspect-ratio: 3 / 4;
  background: var(--bg-warm);
  overflow: hidden;
}
.hero-figure img { width: 100%; height: 100%; object-fit: cover; }

/* Page header for interior pages */
.page-head {
  padding-block: var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--line);
}

/* Feature band — dark, used for the "we come to you" message */
.band {
  background: var(--surface-dark);
  color: rgba(255, 255, 255, 0.82);
}
.band h2 { color: var(--white); }
.band .eyebrow { color: var(--champagne); }
.band .lede { color: rgba(255, 255, 255, 0.82); }
.band .rule { background: var(--champagne); }

.band-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
  display: grid;
  gap: 0;
  max-width: var(--measure);
}
.band-list li {
  padding: var(--space-2) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 0.95rem;
}
.band-list li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.22); }

/* Services */
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: var(--space-4);
  background: var(--line);
  border: 1px solid var(--line);
}

.service-card {
  background: var(--white);
  padding: var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.service-card h3 {
  font-size: var(--step-1);
  margin-bottom: 0;
}
.service-card p {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin-bottom: 0;
  flex-grow: 1;
}
.service-card .price {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Price list */
.price-group { margin-bottom: var(--space-5); }
.price-group:last-child { margin-bottom: 0; }

.price-group h2 {
  font-size: var(--step-2);
  margin-bottom: var(--space-1);
}

/* Tier label within a group, e.g. Standard / Premium */
.price-subhead {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: var(--space-4) 0 0;
}
.price-subhead + .price-list { margin-top: var(--space-2); }

.price-list {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0;
  border-top: 1px solid var(--line);
  /* Capped so the eye can still connect a row to its price */
  max-width: 44rem;
}
.price-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
}
.price-name {
  color: var(--ink);
  font-weight: 600;
  font-size: 0.95rem;
}
.price-note {
  display: block;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--ink-mute);
  margin-top: 0.15rem;
}
.price-value {
  font-family: var(--display);
  font-size: var(--step-1);
  color: var(--ink);
  white-space: nowrap;
}

/* Reviews */
.reviews-slot {
  margin-top: var(--space-4);
  border: 1px solid var(--line);
  background: var(--white);
  padding: var(--space-5) var(--space-3);
  text-align: center;
}
.reviews-slot p { margin-inline: auto; max-width: 34rem; }
.reviews-slot p:last-child { margin-bottom: 0; }

/* Forms */
.contact-form {
  display: grid;
  gap: var(--space-3);
  max-width: var(--measure);
}
.contact-form label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.85rem 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  font: inherit;
  color: var(--ink);
  background: transparent;
}
.contact-form textarea {
  border: 1px solid var(--line);
  padding: 0.85rem;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent-deep);
}

.form-note {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--ink-mute);
  margin: 0;
}

/* Definition rows (contact details) */
.detail-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: var(--measure);
}
.detail-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
}
.detail-list .label {
  flex: 0 0 7rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-top: 0.15rem;
}

/* Placeholder markers — visible on purpose so nothing ships unfilled */
.todo {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-deep);
  background: #f6efe0;
  border: 1px solid #e6d5ae;
  padding: 0.1rem 0.4rem;
  white-space: nowrap;
}

/* Footer */
.site-footer {
  background: var(--surface-dark);
  color: rgba(255, 255, 255, 0.72);
  padding-block: var(--space-5) var(--space-3);
  font-size: 0.9rem;
}
.site-footer a { color: rgba(255, 255, 255, 0.85); }
.site-footer a:hover { color: var(--champagne); }

.footer-grid { display: grid; gap: var(--space-4); }

.footer-grid h4 {
  color: var(--white);
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.footer-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.6rem;
}

.footer-bottom {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.62);
}

/* Desktop */
@media (min-width: 60rem) {
  section { padding-block: var(--space-6); }

  .br-desk { display: inline; }

  .nav-toggle { display: none; }

  .main-nav {
    position: static;
    inset: auto;
    transform: none;
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
    box-shadow: none;
    padding: 0;
    background: transparent;
  }
  .main-nav ul {
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
  }
  .main-nav .btn { margin-top: 0; }

  .hero { padding-block: var(--space-6); }
  .hero-inner {
    flex-direction: row;
    align-items: center;
    gap: var(--space-6);
  }
  .hero-copy { flex: 1 1 55%; }
  .hero-figure { flex: 1 1 45%; }

  .services-grid { grid-template-columns: repeat(3, 1fr); }
  .service-card { padding: var(--space-4); }

  /* The grid draws its hairlines with a 1px gap over a tinted background, so
     an incomplete final row leaves that tint showing as empty blocks. Let the
     leftovers stretch to fill the row instead. Keyed to the count, so adding
     or removing a treatment stays tidy without touching this. */
  .services-grid > :last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
  .services-grid > :nth-last-child(2):nth-child(3n + 1) { grid-column: span 2; }

  .footer-grid { grid-template-columns: 2fr 1fr 1.4fr; gap: var(--space-5); }
}