/* ============================================================
   CompassionateMA Coaching & Consulting
   Command Center — shared brand system
   Educating · Empowering · Elevating

   Every colour below is sampled directly from the logo file.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Karla:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* --- sampled from the logo --- */
  --crimson:  #B4184E;   /* "Compassionate" wordmark            */
  --crimson-2:#C0245A;   /* emblem ring, left of the sweep      */
  --ember:    #EA662A;   /* blazer / mid-gradient               */
  --orange:   #F69624;   /* "MA" wordmark                       */
  --gold:     #F6A22A;   /* the accent dots and the star        */
  --ink:      #301218;   /* deep plum from the figure           */
  --charcoal: #1C1C1C;   /* "COACHING & CONSULTING" subtitle    */

  /* --- derived surfaces --- */
  --ink-2:  #43202A;
  --ink-3:  #5C3038;
  --on-ink:   #E3D2D6;
  --on-ink-2: #B39AA1;
  --paper:  #FDF5EF;
  --white:  #FFFFFF;
  --muted:  #6E5760;
  --body-ink:#3A2229;
  --line:   rgba(48,18,24,.14);
  --line-2: rgba(48,18,24,.075);
  --good:   #1F7A5A;
  --warn:   #B4740B;
  --stop:   #B32020;

  --grad:      linear-gradient(100deg, #B4184E 0%, #C0245A 20%, #EA662A 62%, #F69624 100%);
  --grad-soft: linear-gradient(100deg, rgba(180,24,78,.10), rgba(246,150,36,.12));

  --display: 'Fraunces', 'Cambria', Georgia, serif;
  --body:    'Karla', 'Calibri', system-ui, -apple-system, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --r:   14px;
  --r-s: 9px;
  --shadow:   0 1px 2px rgba(48,18,24,.06), 0 12px 34px -18px rgba(48,18,24,.38);
  --shadow-l: 0 2px 4px rgba(48,18,24,.07), 0 30px 70px -34px rgba(48,18,24,.5);
  --wrap: 1180px;
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{ font-family:var(--display); font-weight:600; line-height:1.12; letter-spacing:-.015em; margin:0 0 .5em; }
h1{ font-size:clamp(2.5rem, 5.4vw, 4.1rem); }
h2{ font-size:clamp(1.9rem, 3.4vw, 2.7rem); }
h3{ font-size:1.32rem; letter-spacing:-.01em; }
h4{ font-size:1.06rem; }
p{ margin:0 0 1.05em; }
a{ color:var(--crimson); text-decoration-thickness:1px; text-underline-offset:3px; }
strong{ font-weight:700; }

:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; border-radius:4px; }

.wrap{ width:min(var(--wrap), calc(100% - 3rem)); margin-inline:auto; }
.lede{ font-size:1.2rem; color:var(--body-ink); }
.center{ text-align:center; }

/* ---------- Utility label ---------- */
.tag{
  font-family:var(--mono); font-size:.705rem; font-weight:600;
  letter-spacing:.17em; text-transform:uppercase; color:var(--crimson);
  display:inline-flex; align-items:center; gap:.55rem; margin:0 0 1rem;
}
.tag::before{ content:''; width:22px; height:2px; background:var(--grad); border-radius:2px; }
.tag.on-ink{ color:var(--gold); }

/* ---------- Logo ---------- */
.logo{ display:inline-flex; align-items:center; text-decoration:none; line-height:0; }
.logo img{ display:block; height:56px; width:auto; }
.logo.stacked img{ height:150px; }
.logo.mark img{ height:44px; }

/* On dark surfaces the subtitle line is near-black, so the lockup
   sits on a white plate. Deliberate, and it keeps the mark legible. */
.logo.on-dark{ background:var(--white); border-radius:12px; padding:.55rem .8rem; }
.logo.on-dark img{ height:46px; }

@media (max-width:560px){ .logo img{ height:42px; } .logo.stacked img{ height:112px; } }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--body); font-weight:700; font-size:.97rem;
  padding:.86rem 1.55rem; border-radius:999px; border:1px solid transparent;
  cursor:pointer; text-decoration:none; transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--grad); color:var(--white); box-shadow:0 10px 26px -12px rgba(180,24,78,.85); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--crimson); color:var(--crimson); }
.btn-ink{ background:var(--ink); color:var(--white); }
.btn-gold{ background:var(--gold); color:var(--ink); }
.btn-sm{ padding:.5rem 1rem; font-size:.85rem; }
.btn-block{ width:100%; }

/* ---------- Cards ---------- */
.card{ background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:1.7rem; box-shadow:var(--shadow); }
.grid{ display:grid; gap:1.15rem; }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }

/* ---------- Site header ---------- */
.site-head{
  position:sticky; top:0; z-index:60;
  background:rgba(253,245,239,.93); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-head .bar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 0; }
.site-nav{ display:flex; align-items:center; gap:1.6rem; }
.site-nav a{ color:var(--ink); text-decoration:none; font-size:.94rem; font-weight:600; }
.site-nav a:hover{ color:var(--crimson); }
@media (max-width:880px){ .site-nav .hide-sm{ display:none; } }

/* ---------- Footer ---------- */
.site-foot{ background:var(--ink); color:var(--on-ink); padding:3.4rem 0 2.2rem; margin-top:4rem; }
.site-foot h4{ color:var(--white); font-family:var(--body); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:.9rem; }
.site-foot a{ color:var(--on-ink); text-decoration:none; display:block; padding:.2rem 0; font-size:.93rem; }
.site-foot a:hover{ color:var(--gold); }
.site-foot .logo.on-dark{ display:inline-block; }
.foot-note{ border-top:1px solid rgba(255,255,255,.14); margin-top:2.4rem; padding-top:1.4rem; font-size:.82rem; color:var(--on-ink-2); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }

@media (max-width:820px){
  .g4{ grid-template-columns:repeat(2,1fr); }
  .g3{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  body{ font-size:16px; }
  .g2,.g4{ grid-template-columns:1fr; }
  .wrap{ width:calc(100% - 2rem); }
  .card{ padding:1.3rem; }
}

@media print{
  .site-head,.site-foot,.no-print{ display:none !important; }
  body{ background:#fff; }
}