/* Maison Mo — shared site stylesheet
   Tokens and components per 00_Brand_Reference/Brand_Reference.md (locked 2026-09-13)
   and 02_Visual_Identity/Working/MaisonMo_Website_Homepage_Structure_v1.html */

:root {
  --forest:#2F4B3A; --cream:#F6F2EA; --charcoal:#2C2C2C;
  --stone:#D8D4CC; --copper:#B76E3A; --paper:#EFE8DC;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:Inter, sans-serif; color:var(--charcoal); background:var(--cream); line-height:1.55; }
h1,h2,h3 { font-family:"Cormorant Garamond", serif; font-weight:600; color:var(--forest); text-wrap:balance; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
.wrap { max-width:1120px; margin:0 auto; padding:0 32px; }

/* NAV */
nav { position:sticky; top:0; z-index:10; background:var(--cream); border-bottom:1px solid var(--stone); }
nav .wrap { display:flex; align-items:center; justify-content:space-between; padding-top:16px; padding-bottom:16px; gap:24px; }
.logo img { height:80px; width:auto; }
.navlinks { display:flex; gap:32px; font-size:14px; font-weight:500; }
.navlinks a:hover { color:var(--copper); }
.nav-cta { background:var(--forest); color:var(--cream); padding:10px 22px; font-size:13px; font-weight:600; border-radius:2px; white-space:nowrap; }
.nav-cta:hover { background:var(--copper); }
.nav-toggle {
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:32px; height:32px; background:none; border:none; padding:0; cursor:pointer; flex-shrink:0;
}
.nav-toggle span { display:block; width:100%; height:2px; background:var(--forest); border-radius:1px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* HERO */
.hero { position:relative; min-height:600px; max-height:680px; display:flex; align-items:flex-end; background-size:cover; background-position:center; }
.hero:before {
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(44,44,44,.10) 0%, rgba(44,44,44,.35) 55%, rgba(44,44,44,.68) 100%);
}
.hero-content { position:relative; z-index:2; color:var(--cream); padding:48px 0 64px; width:100%; }
.hero-kicker { font-size:13px; text-transform:uppercase; letter-spacing:.14em; color:var(--copper); font-weight:600; margin-bottom:18px; }
.hero h1 { font-size:56px; color:var(--cream); line-height:1.08; margin-bottom:18px; max-width:640px; }
.hero p { font-family:"Cormorant Garamond", serif; font-style:italic; font-size:21px; color:#EADFC9; margin-bottom:28px; max-width:520px; }
.btn-row { display:flex; gap:16px; flex-wrap:wrap; }
.btn-primary { background:var(--copper); color:var(--cream); padding:14px 28px; font-size:14px; font-weight:600; display:inline-block; }
.btn-primary:hover { background:#a15f31; }
.btn-secondary { border:1px solid var(--cream); color:var(--cream); padding:14px 28px; font-size:14px; font-weight:600; display:inline-block; }
.btn-secondary:hover { background:rgba(246,242,234,.12); }

/* SECTION generic */
.section { padding:80px 0; }
.section.forest { background:var(--forest); color:var(--cream); }
.section.forest h2 { color:var(--cream); }
.section.paper { background:var(--paper); }
.eyebrow { font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--copper); font-weight:600; margin-bottom:14px; }
.section h2 { font-size:36px; margin-bottom:18px; }
.section .lead-copy { max-width:640px; font-size:16.5px; color:#4a4842; }
.section.forest .lead-copy { color:rgba(246,242,234,.88); }

/* INTRO / two-up image+text */
.intro-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.intro-grid img { aspect-ratio:4/3; object-fit:cover; width:100%; }
.card-link { font-size:13px; font-weight:600; color:var(--copper); border-bottom:1px solid var(--copper); padding-bottom:2px; }

/* BENEFIT GRID — three-up, text only (subpage "key benefits" sections) */
.benefit-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:44px; }
.benefit-grid h3 { font-size:21px; margin-bottom:10px; }
.benefit-grid p { font-size:14.5px; color:#4a4842; }
.section.forest .benefit-grid p { color:rgba(246,242,234,.85); }

/* INCLUDES LIST — subpage "what's included" bullet list */
.includes-list { margin-top:30px; display:flex; flex-direction:column; gap:16px; max-width:760px; }
.includes-list li { list-style:none; padding-left:26px; position:relative; font-size:15.5px; color:#4a4842; }
.includes-list li:before { content:"—"; position:absolute; left:0; color:var(--copper); font-weight:700; }
.includes-list .ex-label { font-weight:600; color:var(--forest); font-family:Inter,sans-serif; }
.includes-note { margin-top:20px; font-size:13.5px; font-style:italic; color:#6a6558; }

/* STATIC QUOTE STACK — subpage testimonials (no carousel) */
.quote-stack { margin-top:36px; display:flex; flex-direction:column; gap:28px; }

/* CARD GRID */
.card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px; }
.card { background:var(--cream); border:1px solid var(--stone); }
.card-img { aspect-ratio:16/10; object-fit:cover; width:100%; }
.card-body { padding:24px; }
.card-body h3 { font-size:22px; margin-bottom:10px; }
.card-body p { font-size:14px; color:#4a4842; margin-bottom:16px; }

/* INCLUDED TABLE */
.included-table { width:100%; border-collapse:collapse; margin-top:36px; background:var(--cream); }
.included-table th, .included-table td { border:1px solid var(--stone); padding:14px 16px; font-size:14px; text-align:center; }
.included-table th { background:var(--forest); color:var(--cream); font-family:Inter,sans-serif; font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:.04em; }
.included-table td:first-child, .included-table th:first-child { text-align:left; font-family:"Cormorant Garamond",serif; font-size:17px; color:var(--forest); font-weight:600; }
.included-table .tick { color:var(--copper); font-weight:700; }
.included-table .dash { color:#9a978d; font-size:12px; }
.included-table .bespoke-row td { text-align:left; font-style:italic; color:#4a4842; background:var(--paper); }

/* TESTIMONIAL band */
.quote-carousel { margin-top:40px; position:relative; min-height:130px; }
.quote-slide { border-left:2px solid var(--copper); padding-left:22px; display:none; }
.quote-slide.active { display:block; }
.quote-slide p.qtext { font-family:"Cormorant Garamond", serif; font-style:italic; font-size:26px; line-height:1.35; color:var(--cream); margin-bottom:14px; max-width:760px; }
.quote-slide .attr { font-size:13px; color:rgba(246,242,234,.6); }
.dots { display:flex; gap:8px; margin-top:28px; }
.dot { width:7px; height:7px; border-radius:50%; background:rgba(246,242,234,.35); border:none; padding:0; cursor:pointer; }
.dot.active { background:var(--copper); }

/* DIFFERENCE / split */
.diff-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.diff-grid img { aspect-ratio:4/3; object-fit:cover; width:100%; }
.diff-list { margin-top:20px; display:flex; flex-direction:column; gap:10px; }
.diff-list li { list-style:none; padding-left:22px; position:relative; font-size:15px; color:#4a4842; }
.diff-list li:before { content:"—"; position:absolute; left:0; color:var(--copper); font-weight:700; }

/* CTA band */
.cta-band { background:var(--charcoal); color:var(--cream); text-align:center; padding:72px 0; }
.cta-band h2 { color:var(--cream); font-size:34px; margin-bottom:14px; }
.cta-band p { color:rgba(246,242,234,.75); margin-bottom:28px; }

/* ENQUIRY FORM (in the CTA band) */
.enquiry-form { max-width:560px; margin:0 auto; text-align:left; }
.form-row { display:flex; gap:16px; margin-bottom:16px; }
.form-row input, .enquiry-form textarea {
  width:100%; background:rgba(246,242,234,.08); border:1px solid rgba(246,242,234,.28);
  color:var(--cream); padding:13px 16px; font-family:Inter,sans-serif; font-size:14px; border-radius:2px;
}
.form-row input::placeholder, .enquiry-form textarea::placeholder { color:rgba(246,242,234,.5); }
.form-row input:focus, .enquiry-form textarea:focus { outline:none; border-color:var(--copper); }
.enquiry-form textarea { margin-bottom:18px; resize:vertical; min-height:96px; display:block; }
.enquiry-form .hidden-field { display:none; }
.enquiry-form .form-submit-row { text-align:center; }
.enquiry-form button.btn-primary { border:none; cursor:pointer; font-family:Inter,sans-serif; }
.enquiry-form button.btn-primary:disabled { opacity:.6; cursor:default; }
.form-status { margin-top:14px; font-size:13.5px; min-height:18px; text-align:center; }
.form-status.success { color:#9FCBAA; }
.form-status.error { color:#E0A98A; }
@media (max-width:560px) { .form-row { flex-direction:column; } }

/* FOOTER */
footer { background:var(--forest); color:var(--cream); padding:56px 0 28px; }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding-bottom:36px; border-bottom:1px solid rgba(246,242,234,.15); }
.footer-grid h4 { font-family:Inter,sans-serif; font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--copper); margin-bottom:16px; font-weight:600; }
.footer-grid p, .footer-grid a { display:block; font-size:14px; color:rgba(246,242,234,.8); margin-bottom:10px; }
.footer-grid a:hover { color:var(--cream); }
.footer-bottom { display:flex; justify-content:space-between; padding-top:22px; font-size:12.5px; color:rgba(246,242,234,.55); flex-wrap:wrap; gap:8px; }

@media (max-width: 820px) {
  .intro-grid, .diff-grid { grid-template-columns:1fr; }
  .card-grid, .benefit-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; row-gap:28px; }
  .navlinks {
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; background:var(--cream); padding:6px 32px 26px; gap:18px;
    border-bottom:1px solid var(--stone); box-shadow:0 10px 18px rgba(44,44,44,.08);
  }
  .navlinks.open { display:flex; }
  .navlinks a { font-size:15.5px; padding:4px 0; }
  .nav-toggle { display:flex; }
  .hero h1 { font-size:36px; }
  .section { padding:56px 0; }
  .included-table { font-size:12.5px; }
  .included-table th, .included-table td { padding:10px 8px; }
}