/* MASSASOLO MS LLC — warm studio theme (company site only).
   MV2's legal pages keep style.css / black + gold. */

/* Fraunces is self-hosted rather than pulled from the Google Fonts CDN, so no
   visitor IP is handed to a third party. One variable file covers 400 and 600,
   which is why both faces below point at the same woff2.
   SIL OFL 1.1, license in fonts/OFL.txt. */
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('fonts/fraunces-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  --cream:#F4EEE1;
  --cream-2:#FBF7EE;
  --ink:#2A2620;
  --ink-2:#6A6151;
  --olive:#55692E;
  --olive-deep:#3C4A1F;
  /* Deepened from #B0532A, which measured 4.41:1 on cream and missed the
     WCAG AA 4.5:1 floor for body-size text. This is 4.97:1. */
  --rust:#A64B24;
  --rust-soft:#F0E1D3;
  --line:#E4DBC7;
  --gold:#C9A227;
  --maxw:820px;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--cream); color:var(--ink); font-family:var(--sans); line-height:1.7; font-size:16px; }
a{ color:var(--rust); text-decoration:none; }
a:hover{ text-decoration:underline; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 26px; }

/* Keyboard focus: an explicit ring, since several links drop their underline
   and the default UA outline is easy to lose against the cream ground. */
a:focus-visible, button:focus-visible{
  outline:3px solid var(--olive);
  outline-offset:3px;
  border-radius:3px;
}

/* Lets a keyboard or screen-reader user jump the nav. Hidden until focused. */
.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--olive-deep); color:#fff;
  padding:10px 18px; font-weight:700; font-size:14px; z-index:10;
}
.skip:focus{ left:8px; top:8px; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* Nav */
.nav{ border-bottom:1px solid var(--line); background:var(--cream); }
.nav .wrap{ display:flex; align-items:center; height:70px; }
.cobrand{ font-family:var(--serif); font-weight:600; font-size:19px; letter-spacing:0.3px; color:var(--olive-deep); }
.cobrand .ms{ color:var(--rust); }
.nav .spacer{ flex:1; }
.nav .links a{ color:var(--ink-2); font-size:14px; font-weight:600; margin-left:24px; }
.nav .links a:hover{ color:var(--olive-deep); text-decoration:none; }

/* Eyebrow */
.eyebrow{ color:var(--rust); font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:12px; margin:0 0 16px; }

/* Hero */
.hero{ padding:88px 0 52px; }
.hero h1{ font-family:var(--serif); font-weight:600; font-size:52px; line-height:1.08; letter-spacing:-1px; margin:0 0 20px; max-width:12ch; color:var(--ink); }
.hero h1 .mark-hl{ background:linear-gradient(transparent 62%, var(--rust-soft) 62%); padding:0 2px; }
.hero .tag{ font-size:19px; color:var(--ink-2); max-width:56ch; margin:0; }
@media (max-width:640px){ .hero{ padding:56px 0 36px; } .hero h1{ font-size:36px; } }

/* Sections */
section{ padding:44px 0; border-top:1px solid var(--line); }
h2{ font-family:var(--serif); font-weight:600; font-size:30px; letter-spacing:-0.4px; margin:0 0 8px; color:var(--olive-deep); }
.sub{ color:var(--ink-2); margin:0 0 22px; font-size:15.5px; }
p{ margin:0 0 14px; }

/* Service cards */
.cards{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:640px){ .cards{ grid-template-columns:1fr; } }
.card{ background:var(--cream-2); border:1px solid var(--line); border-radius:16px; padding:22px 24px; transition:border-color .15s, transform .15s; }
.card:hover{ border-color:var(--olive); transform:translateY(-2px); }
.card h3{ font-family:var(--serif); font-weight:600; font-size:19px; color:var(--olive-deep); margin:0 0 6px; }
.card p{ margin:0; font-size:14.5px; color:var(--ink-2); line-height:1.6; }

/* MV2 product card — keeps its own black + gold identity on the cream page */
.mv2{ display:flex; gap:18px; align-items:flex-start; background:#111011; border:1px solid #2b2a26; border-radius:18px; padding:24px; color:#F2F1EF; }
.mv2 .pmark{ width:48px; height:48px; flex:0 0 auto; }
.mv2 h3{ font-family:var(--sans); font-weight:800; font-size:18px; margin:2px 0 6px; color:#F2F1EF; letter-spacing:-0.2px; }
.mv2 p{ margin:0 0 12px; font-size:14.5px; color:#B7B4AC; line-height:1.6; }
.mv2 .badge{ display:inline-block; font-size:11px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--gold); background:rgba(201,162,39,.14); border:1px solid rgba(201,162,39,.4); border-radius:999px; padding:2px 9px; margin-left:8px; vertical-align:2px; }
.mv2 .plinks a{ color:var(--gold); font-size:13px; font-weight:700; margin-right:18px; }

/* Contact */
.contact p{ font-size:16.5px; }

/* Footer */
footer{ border-top:1px solid var(--line); padding:32px 0 52px; color:var(--ink-2); font-size:13px; }
footer .wrap{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; }
footer a{ color:var(--ink-2); font-weight:600; }
footer a:hover{ color:var(--olive-deep); }
footer .spacer{ flex:1; }