/* MOTIF service pages — shared styles.
   Retro palette (Tanim, 27 Aug 2026): maroon/red-orange/gold/cream/dark
   brown, replacing the earlier royal-blue system site-wide. Weight stays
   400 everywhere — house rule (no bold, no italic) confirmed to still
   apply even with the new Apple-style type scale; hierarchy comes from
   size, line-height and letter-spacing, not font-weight. 14px radius
   unchanged. */

:root{
  --brand:#981D26;       /* maroon — primary, was royal blue #013594 */
  --brand-deep:#4C2215;  /* dark brown — deep anchor, was #001B4D */
  --ink:#4C2215;         /* dark brown — body text, was #122B57 */
  --muted:color-mix(in srgb, var(--ink) 60%, var(--bg) 40%);
  --line:color-mix(in srgb, var(--ink) 15%, var(--bg) 85%);
  --bg:#F2EAC5;          /* cream — page background, was #F6F8FC */
  --red:#E03C30;         /* red-orange — accent/CTA, was crimson #BD212C */
  --gold:#E5A632;        /* gold — highlight, was #FEBE10 */
  --radius:14px;
  --font-apple:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",
    "Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-apple);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  background:var(--bg); color:var(--ink);
  font-size:17px; font-weight:400; line-height:1.5; letter-spacing:-.01em;
}
h1,h2,h3,strong,b{ font-weight:400; }
em,i{ font-style:normal; }
a{ color:var(--brand); }

.topbar{
  position:sticky; top:0; z-index:40;
  background:rgba(242,234,197,.92);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  max-width:760px; margin:0 auto; padding:13px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
}
.brand{
  color:var(--brand-deep); text-decoration:none; font-size:15px;
  letter-spacing:.14em; white-space:nowrap;
}
.brand span{ font-size:10px; letter-spacing:.04em; opacity:.72; margin-left:4px; }
.topbar nav{ display:flex; gap:20px; align-items:center; }
.topbar nav a{
  color:var(--ink); text-decoration:none; font-size:14px; white-space:nowrap;
}
.topbar nav a:hover{ opacity:.75; }
.topbar nav a.chip{
  background:var(--red); color:#fff; padding:6px 13px;
  border-radius:var(--radius);
  font-size:16px; font-weight:400; letter-spacing:-.01em;
}

main{ max-width:760px; margin:0 auto; padding:40px 24px 84px; }

.crumbs{ font-size:13px; color:var(--muted); margin:0 0 26px; }
.crumbs a{ color:var(--muted); }

h1{
  font-size:clamp(26px,4vw,40px); font-weight:400; line-height:1.1;
  letter-spacing:-.025em; color:var(--brand); margin:0 0 14px;
}
.intro{ font-size:clamp(16px,2.2vw,19px); max-width:640px; margin:0 0 8px; }

section{ padding:30px 0 0; }
h2{
  font-size:clamp(20px,2.8vw,32px); font-weight:400; line-height:1.15;
  letter-spacing:-.02em; color:var(--ink); margin:0 0 8px;
}
h3{
  font-size:24px; font-weight:400; line-height:1.25; letter-spacing:-.01em;
  color:var(--ink); margin:0 0 6px;
}
section p{ margin:0; max-width:640px; }

.faq{ margin-top:8px; }
.qa{ border-top:1px solid var(--line); padding:16px 0; }
.qa:first-child{ border-top:0; }
.q{ margin:0 0 6px; font-size:17px; }
.a{ margin:0; max-width:640px; color:var(--ink); }

.cta{
  margin-top:44px; padding:26px;
  background:var(--bg); border:1px solid var(--line);
  border-radius:var(--radius);
}
.cta p{ margin:0 0 14px; max-width:560px; }
.wa-btn{
  display:inline-block; padding:14px 24px;
  background:var(--red); color:#fff; border-radius:var(--radius);
  font-size:16px; font-weight:400; letter-spacing:-.01em; text-decoration:none;
}
.reassure{ margin-top:10px; color:var(--muted); font-size:14px; line-height:1.4; }

/* Same dashed chip as the home page's .below .todo — flags a price that is
   a default starting point, not yet a number Tanim has confirmed. */
.todo{
  display:inline-block; margin-top:12px; padding:8px 14px;
  border-radius:var(--radius);
  background:var(--bg); border:1px dashed color-mix(in srgb, var(--ink) 35%, var(--bg) 65%);
  color:var(--muted); font-size:13px;
}

.site-footer{
  background:var(--brand-deep); color:color-mix(in srgb, var(--bg) 70%, white 30%);
  padding:34px 24px; font-size:13px; line-height:1.8;
}
.site-footer .inner{ max-width:760px; margin:0 auto; }
.site-footer a{ color:var(--gold); }

@media (max-width:560px){
  .topbar nav{ gap:12px; }
  .topbar nav a{ font-size:12px; }
  .topbar nav a.chip{ padding:5px 10px; }
  .brand{ font-size:13px; }
  main{ padding:28px 18px 64px; }
}