/* ==========================================================================
   SIMONE'S NAIL CARE. DEMONSTRATION SITE.

   Deliberately built on a different skeleton from the trade demo, not just a
   recolour of it: centred masthead rather than a left-logo bar, an image-led
   opening rather than a text block with an icon strip, a typographic price
   list rather than a grid of cards, one quote given room rather than three
   equal boxes, and underlined form fields rather than boxed ones. The point of
   the portfolio is range, so the structure has to differ, not only the palette.
   ========================================================================== */

:root {
  --paper: #fdfaf7;
  --paper-tint: #f6ece5;
  --paper-deep: #40202f;
  --ink: #40202f;
  --ink-soft: #6b525a;
  --ink-faint: #7d6169;
  --blush: #c4806a;
  --blush-deep: #a25f49;
  --rule: rgba(64, 32, 47, 0.14);

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-family: var(--sans);
  background-color: var(--paper);
  color: var(--ink-soft);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  background-color: var(--paper);
  line-height: 1.75;
  /* Jost at 300 reads as washed out on a cream ground, so 400 is the floor */
  font-weight: 400;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.hidden { display: none; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.08;
  letter-spacing: -0.005em;
}
h1 em, h2 em, .masthead-name em, .footer-name em {
  font-style: italic;
  color: var(--blush-deep);
}

.shell {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.shell-narrow { max-width: 720px; }
@media (min-width: 768px) { .shell { padding: 0 2.5rem; } }

.band { padding: 4.5rem 0; }
@media (min-width: 768px) { .band { padding: 7rem 0; } }
.band-tint { background-color: var(--paper-tint); }
.band-deep { background-color: var(--paper-deep); }

.kicker {
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--blush-deep);
  margin-bottom: 1.1rem;
}
.kicker.centred, h2.centred { text-align: center; }
.kicker.light { color: #d9a894; }
h2.light { color: var(--paper); }

/* --------------------------------------------------------------------------
   Masthead: centred and stacked
   -------------------------------------------------------------------------- */
.masthead {
  padding: 2rem 1.5rem 1.5rem;
  text-align: center;
  border-bottom: 1px solid var(--rule);
}
.masthead-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
.masthead-mark { width: 34px; height: 34px; border-radius: 50%; }
.masthead-name {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--ink);
  white-space: nowrap;
}
.masthead-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem 1.75rem;
  margin-top: 1.4rem;
  font-size: 0.75rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}
.masthead-nav a {
  color: var(--ink-soft);
  padding: 0.55rem 0;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.masthead-nav a:hover { color: var(--ink); border-bottom-color: var(--blush); }
.masthead-nav a.is-cta { color: var(--blush-deep); }

@media (min-width: 768px) {
  .masthead { padding: 2.75rem 2.5rem 2rem; }
  .masthead-mark { width: 42px; height: 42px; }
  .masthead-name { font-size: 2rem; }
  .masthead-nav { gap: 0.4rem 2.5rem; margin-top: 1.75rem; }
}

/* --------------------------------------------------------------------------
   Opening: the work leads, the words follow
   -------------------------------------------------------------------------- */
.opening {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
}
@media (min-width: 900px) {
  .opening {
    grid-template-columns: 1.02fr 0.98fr;
    gap: 4.5rem;
    padding: 5rem 2.5rem 6rem;
  }
}

.opening-figure img {
  width: 100%;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 26px 60px rgba(64, 32, 47, 0.2);
}

.opening-words h1 {
  font-size: clamp(2.6rem, 8vw, 4.25rem);
  margin-bottom: 1.4rem;
}
.lede {
  font-size: 1.0625rem;
  line-height: 1.85;
  max-width: 28rem;
  margin-bottom: 2rem;
}
.aside {
  margin-top: 1.4rem;
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   Buttons: squared and quiet, not the pill used on the trade demo
   -------------------------------------------------------------------------- */
.button {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 1.15rem 2.4rem;
  min-height: 44px;
  background-color: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.button:hover { background-color: var(--blush-deep); border-color: var(--blush-deep); }
.button-wide { width: 100%; }
.button-quiet {
  background-color: transparent;
  color: var(--ink);
}
.button-quiet:hover { background-color: var(--ink); color: var(--paper); }

/* --------------------------------------------------------------------------
   Split section
   -------------------------------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 860px) {
  .split { grid-template-columns: 0.85fr 1.15fr; gap: 4.5rem; }
}
.split-lead h2 { font-size: clamp(1.9rem, 5vw, 2.9rem); }
.split-body p { font-size: 1rem; line-height: 1.9; }
.split-body p + p { margin-top: 1.3rem; }
.split-body .note {
  margin-top: 2rem;
  padding-left: 1.4rem;
  border-left: 2px solid var(--blush);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Tariff: a price list, set typographically
   -------------------------------------------------------------------------- */
.tariff { margin-top: 3rem; }
.tariff-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--rule);
}
.tariff-row:first-child { border-top: 1px solid var(--rule); }
.tariff dt {
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.tariff dt span {
  display: block;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink-faint);
  margin-top: 0.25rem;
}
.tariff dd {
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--blush-deep);
  white-space: nowrap;
}
.tariff-foot {
  margin-top: 2.25rem;
  font-size: 0.875rem;
  line-height: 1.8;
  color: var(--ink-faint);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Quotes
   -------------------------------------------------------------------------- */
.quote { text-align: center; }
.quote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.5rem, 4.5vw, 2.35rem);
  line-height: 1.4;
  color: var(--ink);
}
.quote cite {
  display: block;
  margin-top: 1.5rem;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.quote-minor {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--rule);
}
@media (min-width: 700px) { .quote-minor { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.quote-minor p { font-size: 0.9375rem; line-height: 1.8; color: var(--ink-soft); }
.quote-minor cite {
  display: block;
  margin-top: 0.75rem;
  font-style: normal;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   Booking
   -------------------------------------------------------------------------- */
.booking-intro {
  text-align: center;
  max-width: 34rem;
  margin: 1.5rem auto 0;
  font-size: 0.9375rem;
  line-height: 1.85;
  color: #c9aeb6;
}
.booking-panel {
  position: relative;
  margin-top: 3rem;
  background-color: var(--paper);
  padding: 2rem 1.5rem;
}
@media (min-width: 768px) { .booking-panel { padding: 3rem; } }

.field { margin-bottom: 1.5rem; }
.field-pair { display: grid; grid-template-columns: 1fr; gap: 0 1.75rem; }
@media (min-width: 600px) { .field-pair { grid-template-columns: 1fr 1fr; } }

.field label {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.6rem;
}
/* Underlined rather than boxed, so the form reads as stationery */
.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  color: var(--ink);
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  padding: 0.6rem 0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease;
}
.field textarea { resize: vertical; line-height: 1.7; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-bottom-color: var(--blush); }
.field input::placeholder, .field textarea::placeholder { color: #cbbdc1; }
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--blush) 50%),
                    linear-gradient(135deg, var(--blush) 50%, transparent 50%);
  background-position: calc(100% - 11px) 1.15em, calc(100% - 6px) 1.15em;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2rem;
}
.field-foot {
  margin-top: 1.1rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--ink-faint);
}

.form-error {
  margin-bottom: 1.25rem;
  padding: 0.85rem 1rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #8f3030;
  background-color: rgba(180, 60, 60, 0.07);
  border-left: 2px solid #b43c3c;
}
.form-error.hidden { display: none; }

.booking-done {
  position: absolute;
  inset: 0;
  background-color: var(--paper);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}
.booking-done.hidden { display: none; }
.booking-done-mark {
  font-size: 1.75rem;
  color: var(--blush-deep);
  margin-bottom: 0.75rem;
}
.booking-done h3 { font-size: 1.75rem; margin-bottom: 0.6rem; }
.booking-done p { font-size: 0.9375rem; max-width: 22rem; margin-bottom: 1.75rem; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer {
  padding: 3.5rem 0 2.5rem;
  text-align: center;
  border-top: 1px solid var(--rule);
}
.footer-name { font-family: var(--serif); font-size: 1.5rem; color: var(--ink); margin-bottom: 1rem; }
.footer-lines { font-size: 0.875rem; color: var(--ink-soft); }
.footer-lines + .footer-lines { margin-top: 0.4rem; }
.footer-lines a { border-bottom: 1px solid var(--rule); }
.footer-lines a:hover { border-bottom-color: var(--blush); color: var(--ink); }
.footer-fine {
  margin-top: 2rem;
  font-size: 0.75rem;
  color: var(--ink-faint);
}
.footer-fine a { text-decoration: underline; text-underline-offset: 2px; }

/* --------------------------------------------------------------------------
   Mobile and motion
   -------------------------------------------------------------------------- */
h1, h2, h3, p, li, dt, dd { overflow-wrap: break-word; }
.button, .masthead-nav a { -webkit-tap-highlight-color: rgba(196, 128, 106, 0.2); }

@media (max-width: 599.98px) {
  .tariff-row { flex-direction: column; gap: 0.35rem; }
  .tariff dd { align-self: flex-start; }
}

@media (hover: none) {
  .button:hover { background-color: var(--ink); border-color: var(--ink); }
}

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