/* =========================================================
   NAILS BY ELLIE KATE  —  Shared Design System
   Palette + type pulled directly from Ellie's brand images
   (terracotta/clay, cream panels, espresso headlines, gold)
   =========================================================
   FONTS: Cormorant Garamond (display serif) + EB Garamond (body).
   Both are free Google Fonts. They render the same high-contrast,
   editorial serif look seen in the apprentice graphics.
========================================================= */

:root {
  /* Brand palette */
  --clay:        #d9b9a0;   /* warm terracotta background */
  --clay-deep:   #cda88c;   /* deeper clay band           */
  --cream:       #f3ead8;   /* soft cream panel           */
  --cream-soft:  #faf4e8;   /* lightest cream             */
  --espresso:    #3a2417;   /* headline / dark brown      */
  --espresso-2:  #5a3d2b;   /* softer brown for body text */
  --gold:        #c9a24b;   /* polish-cap gold accent     */
  --gold-soft:   #e3c98a;
  --white:       #ffffff;
  --line:        #e3d4bf;

  /* Type */
  --display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --body:    'EB Garamond', Georgia, 'Times New Roman', serif;

  /* Spacing rhythm */
  --maxw: 1180px;
  --gap:  clamp(1.25rem, 3vw, 2.5rem);
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: 1.18rem;
  line-height: 1.7;
  color: var(--espresso-2);
  background: var(--cream-soft);
}
img { max-width: 100%; display: block; }
a { color: var(--espresso); text-decoration: none; }
a:hover { color: var(--gold); }

/* ---------- Type scale ---------- */
h1,h2,h3,h4 { font-family: var(--display); color: var(--espresso); font-weight: 600; line-height: 1.05; margin: 0 0 .4em; }
h1 { font-size: clamp(2.8rem, 7vw, 5.6rem); letter-spacing: .01em; }
h2 { font-size: clamp(2rem, 4.5vw, 3.4rem); }
h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); }
.eyebrow {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: .95rem;
  color: var(--gold);
  font-weight: 600;
  margin: 0 0 .6rem;
}
.lead { font-size: 1.32rem; color: var(--espresso-2); }
.center { text-align: center; }

/* ---------- Layout ---------- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); }
.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section--clay  { background: var(--clay); }
.section--cream { background: var(--cream); }
.section--deep  { background: var(--clay-deep); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .95rem;
  padding: .95rem 2.2rem;
  border-radius: 2px;
  transition: all .25s ease;
  cursor: pointer;
  border: 1.5px solid var(--espresso);
}
.btn--solid { background: var(--espresso); color: var(--cream-soft); }
.btn--solid:hover { background: var(--gold); border-color: var(--gold); color: var(--espresso); }
.btn--ghost { background: transparent; color: var(--espresso); }
.btn--ghost:hover { background: var(--espresso); color: var(--cream-soft); }
.btn--gold  { background: var(--gold); border-color: var(--gold); color: var(--espresso); }
.btn--gold:hover { background: var(--espresso); border-color: var(--espresso); color: var(--cream-soft); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(243,234,216,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; padding-block: .8rem; }
.nav__logo { display: flex; align-items: center; gap: .6rem; }
.nav__logo img { height: 46px; width: auto; }
.nav__links { display: flex; gap: 1.8rem; list-style: none; margin: 0; padding: 0; align-items: center; }
.nav__links a {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .85rem;
  font-weight: 600;
}
.nav__toggle { display: none; background: none; border: 0; font-size: 1.8rem; color: var(--espresso); cursor: pointer; }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--clay); overflow: hidden; }
.hero__inner { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: var(--gap); min-height: 72vh; }
.hero__copy { padding-block: clamp(2.5rem,6vw,4.5rem); }
.hero__copy h1 { color: var(--espresso); }
.hero__media { align-self: stretch; min-height: 60vh; background: var(--clay-deep) center/cover no-repeat; border-radius: 2px; }
.hero__loc { display: inline-flex; align-items: center; gap: .4rem; font-style: italic; color: var(--espresso-2); margin-top: 1.4rem; }
@media (max-width: 860px){
  .hero__inner { grid-template-columns: 1fr; min-height: auto; }
  .hero__media { min-height: 48vh; order: -1; }
}

/* ---------- Feature grid ---------- */
.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2,1fr); }
.grid-3 { grid-template-columns: repeat(3,1fr); }
@media (max-width: 820px){ .grid-2,.grid-3 { grid-template-columns: 1fr; } }

.card {
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 2.2rem 2rem;
}
.card .num { font-family: var(--display); color: var(--gold); font-size: 2.6rem; line-height: 1; display:block; margin-bottom:.5rem; }

/* split content + image */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: center; }
.split--flip .split__media { order: 2; }
.split__media { background: var(--clay-deep) center/cover no-repeat; border-radius: 2px; min-height: 420px; }
@media (max-width: 820px){ .split { grid-template-columns: 1fr; } .split--flip .split__media{ order:-1;} }

/* ---------- Included list ---------- */
.included { background: var(--cream); border-radius: 2px; padding: clamp(2rem,4vw,3.2rem); }
.included ul { list-style: none; margin: 0; padding: 0; }
.included li { position: relative; padding-left: 2.2rem; margin-bottom: 1.1rem; font-size: 1.22rem; }
.included li::before { content:"✦"; position:absolute; left:0; top:.1em; color: var(--gold); font-size: 1.1rem; }

/* ---------- Instagram / gallery slider ---------- */
.slider { position: relative; }
.slider__track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 1fr);
  gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 1rem; scrollbar-width: thin;
}
.slider__track::-webkit-scrollbar { height: 6px; }
.slider__track::-webkit-scrollbar-thumb { background: var(--gold-soft); border-radius: 4px; }
.slide { scroll-snap-align: start; aspect-ratio: 1/1; background: var(--clay-deep) center/cover no-repeat; border-radius: 2px; overflow:hidden; }
.slide img { width:100%; height:100%; object-fit: cover; }
.ig-note { font-size: .95rem; font-style: italic; color: var(--espresso-2); margin-top: 1rem; }

/* ---------- Testimonials ---------- */
.quote { font-family: var(--display); font-size: clamp(1.5rem,3vw,2.2rem); font-style: italic; color: var(--espresso); line-height: 1.4; }
.quote__by { font-family: var(--body); font-style: normal; font-size: 1rem; letter-spacing:.12em; text-transform: uppercase; color: var(--gold); margin-top: 1rem; display:block; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 1.1rem; max-width: 640px; }
.form label { font-family: var(--display); letter-spacing:.06em; font-size:1rem; color: var(--espresso); display:block; margin-bottom:.3rem; }
.form input, .form select, .form textarea {
  width:100%; padding:.85rem 1rem; font-family: var(--body); font-size:1.05rem;
  border:1px solid var(--line); border-radius:2px; background: var(--white); color: var(--espresso-2);
}
.form .row { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
@media (max-width:600px){ .form .row { grid-template-columns:1fr; } }

/* ---------- FAQ ---------- */
.faq details { border-bottom:1px solid var(--line); padding: 1.2rem 0; }
.faq summary { font-family: var(--display); font-size:1.35rem; color: var(--espresso); cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.faq summary::after { content:"+"; color: var(--gold); font-size:1.6rem; }
.faq details[open] summary::after { content:"–"; }
.faq p { margin:.8rem 0 0; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--espresso); color: var(--cream-soft); text-align:center; }
.cta-band h2 { color: var(--cream-soft); }
.cta-band .lead { color: var(--gold-soft); }

/* ---------- Footer ---------- */
.site-footer { background: var(--espresso); color: var(--cream-soft); padding-block: 3rem; }
.site-footer a { color: var(--gold-soft); }
.site-footer .cols { display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--gap); }
.site-footer h4 { color: var(--cream-soft); font-size:1.2rem; }
.site-footer img { height: 52px; width: auto; }
.fine { border-top:1px solid rgba(255,255,255,.15); margin-top:2.2rem; padding-top:1.4rem; font-size:.9rem; opacity:.8; }
@media (max-width: 760px){ .site-footer .cols { grid-template-columns:1fr; } }

/* ---------- Mobile nav ---------- */
@media (max-width: 880px){
  .nav__toggle { display:block; }
  .nav__links {
    position:absolute; top:100%; left:0; right:0;
    background: var(--cream); flex-direction:column; gap:0;
    border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; transition:max-height .3s ease;
  }
  .nav__links.open { max-height: 480px; }
  .nav__links li { width:100%; text-align:center; border-top:1px solid var(--line); }
  .nav__links a { display:block; padding:1rem; }
}

/* ---------- Utility ---------- */
.mt0{margin-top:0}.mb0{margin-bottom:0}
.measure{ max-width: 60ch; }
.measure-center{ max-width:60ch; margin-inline:auto; }