/* Shared styles for Good Master service subpages — mirrors the homepage brand system. */
:root{
  --red:#e4222e; --red-dark:#c11420; --red-text:#ff5862;
  --bg:#121212; --bg-2:#171717; --surface:#1c1c1c; --surface-2:#222; --line:#2c2c2c;
  --txt:#f4f4f4; --muted:#9a9a9a; --header-bg:rgba(18,18,18,.82); --radius:14px; --maxw:1080px;
}
html[data-theme="light"]{
  --bg:#f3f2ef; --bg-2:#ffffff; --surface:#ffffff; --surface-2:#f7f6f3; --line:#e4e2dc;
  --txt:#16181d; --muted:#5b6068; --header-bg:rgba(243,242,239,.85); --red-text:#c20718;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Barlow',system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--txt);
  line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
h1,h2,h3{font-family:'Oswald',sans-serif; font-weight:700; line-height:1.08; letter-spacing:.5px; text-transform:uppercase}
a{color:inherit; text-decoration:none}
.kicker{display:inline-flex; align-items:center; gap:10px; color:var(--red-text); font-weight:700;
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase}
.kicker::before{content:""; width:28px; height:2px; background:var(--red); display:inline-block}
.btn{display:inline-flex; align-items:center; gap:10px; background:var(--red); color:#fff; font-weight:700;
  font-size:.92rem; letter-spacing:.04em; padding:14px 24px; border:0; border-radius:10px; cursor:pointer;
  text-transform:uppercase; transition:background .2s,transform .15s; font-family:'Barlow',sans-serif}
.btn:hover{background:var(--red-dark); transform:translateY(-2px)}
.btn svg{width:18px;height:18px}
.btn-ghost{background:transparent; color:var(--txt); border:1.5px solid var(--line)}
.btn-ghost:hover{background:var(--surface-2); border-color:var(--red)}

/* Skip link + keyboard focus (a11y: WCAG 2.4.1 / 2.4.7) */
.skip{position:absolute; left:-999px; top:0; z-index:300; background:var(--red); color:#fff;
  padding:10px 16px; border-radius:0 0 8px 0; font-weight:700; font-family:'Barlow',sans-serif}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--red-text); outline-offset:2px; border-radius:4px}

/* FAQ */
.faq{max-width:820px}
.faq details{border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
  padding:0 22px; margin-bottom:12px; overflow:hidden}
.faq summary{cursor:pointer; list-style:none; padding:18px 0; font-family:'Oswald',sans-serif;
  font-weight:600; font-size:1.05rem; letter-spacing:.3px; display:flex; justify-content:space-between;
  align-items:center; gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--red-text); font-size:1.5rem; line-height:1; flex:0 0 auto; transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted); margin:0 0 18px; max-width:none}

/* Header */
header{position:sticky; top:0; z-index:50; background:var(--header-bg); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; height:70px; gap:16px}
.brand{display:flex; align-items:center; gap:12px}
.brand img{height:40px; width:auto; filter:invert(1)}
html[data-theme="light"] .brand img{filter:none}
.brand .name b{font-family:'Oswald',sans-serif; font-size:1.1rem; letter-spacing:1px; display:block; line-height:1}
.brand .name span{font-size:.58rem; letter-spacing:.4em; color:var(--red-text); text-transform:uppercase; font-weight:600; margin-top:4px; display:block}
.nav-links{display:flex; align-items:center; gap:26px; margin-left:auto}
.nav-links a{font-weight:600; font-size:.9rem; color:var(--muted); transition:color .2s}
.nav-links a:hover{color:var(--txt)}

/* Hero */
.sub-hero{padding:64px 0 40px; border-bottom:1px solid var(--line)}
.sub-hero .kicker{margin-bottom:16px}
.sub-hero h1{font-size:clamp(2rem,4.6vw,3.2rem); margin-bottom:18px}
.sub-hero h1 em{color:var(--red); font-style:normal}
.sub-hero p.lead{font-size:1.12rem; color:var(--muted); max-width:60ch; margin-bottom:26px}
.sub-actions{display:flex; gap:16px; flex-wrap:wrap; align-items:center}

/* Content */
main section{padding:48px 0}
.content h2{font-size:clamp(1.5rem,3vw,2rem); margin-bottom:20px}
.content p{color:#d0d0d0; margin-bottom:14px; max-width:70ch}
html[data-theme="light"] .content p{color:#3a3d44}
.feat{list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:14px 28px; margin:8px 0 4px; max-width:760px}
.feat li{display:flex; gap:12px; align-items:flex-start; color:var(--txt)}
.feat li svg{width:20px;height:20px;color:var(--red);flex:0 0 20px;margin-top:2px}
.note{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px 26px; margin-top:24px; max-width:760px}
.note h3{font-size:1.1rem; margin-bottom:10px}
.note p{color:var(--muted); margin:0}

/* Cross-links */
.others{background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.others-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:24px}
.scard{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px;
  transition:transform .2s,border-color .2s; display:block}
.scard:hover{transform:translateY(-4px); border-color:var(--red)}
.scard h3{font-size:1.1rem; margin-bottom:8px}
.scard p{color:var(--muted); font-size:.92rem; margin:0}
.scard span{color:var(--red-text); font-size:.85rem; font-weight:700; display:inline-block; margin-top:12px}

/* CTA band */
.cta-band{text-align:center; padding:60px 0}
.cta-band h2{font-size:clamp(1.6rem,3.4vw,2.4rem); margin-bottom:10px}
.cta-band p{color:var(--muted); margin-bottom:24px}

/* Footer */
footer{border-top:1px solid var(--line); padding:30px 0}
.foot{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.foot img{height:28px; filter:invert(1); opacity:.9}
html[data-theme="light"] .foot img{filter:none}
.foot small{color:var(--muted); font-size:.82rem}
.foot a{color:var(--muted); text-decoration:underline}
.foot a:hover{color:var(--red-text)}

@media(max-width:760px){
  .nav-links{display:none}
  .feat{grid-template-columns:1fr}
  .others-grid{grid-template-columns:1fr}
  .btn{width:100%; justify-content:center}
  .sub-actions .btn{width:auto}
  .foot{flex-direction:column; text-align:center; gap:10px}
}