/* myReproTeam — Website System
   Principles: calm, precise, editorial, no decoration
*/

:root{
  --charcoal:#262626;
  --mid:#707070;
  --light:#E6E6E6;
  --off:#F8F8F8;
  --accent:#566E84;

  --max:1200px;

  /* 8pt system */
  --s1:8px;  --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px;

  --rule:1px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--off);
  color:var(--charcoal);
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{
  color:inherit;
  text-decoration:underline;
  text-decoration-color:var(--accent);
  text-underline-offset:4px;
}
a:hover{ text-decoration-thickness:2px; }
a:focus-visible, button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

.wrapper{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--s6);
}

@media (max-width: 900px){
  .wrapper{ padding:0 var(--s4); }
}
@media (max-width: 560px){
  body{ font-size:16px; }
  .wrapper{ padding:0 var(--s3); }
}

.skip{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.skip:focus{
  position:static;
  width:auto; height:auto;
  padding:var(--s2);
  display:inline-block;
  background:var(--light);
}

header{
  border-bottom: var(--rule) solid var(--light);
  background:var(--off);
}
.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s4);
  padding:var(--s2) var(--s2);
}

.brand{
  font-family:"Gruppo", sans-serif;
  font-size:28px;
  letter-spacing:0.02em;
  text-decoration:none;
}
nav ul{
  display:flex;
  gap:var(--s3);
  list-style:none;
  padding:0; margin:0;
  flex-wrap:wrap;
}
nav a{
  text-decoration:none;
  color:var(--charcoal);
  border-bottom: var(--rule) solid transparent;
  padding-bottom:2px;
}
nav a:hover{ border-bottom-color:var(--accent); }
nav a[aria-current="page"]{
  border-bottom-color:var(--accent);
}

main{ padding: var(--s6) 0; }
.section{
  padding: var(--s6) 0;
  border-top: var(--rule) solid var(--light);
}
.section:first-child{
  /* border-top:none; */
  padding-top: var(--s5);
}

.h1{
  font-family:"Gruppo", sans-serif;
  font-size:50px;
  line-height:1.2;
  margin:0 0 var(--s3);
}
@media (max-width: 560px){
  .h1{ font-size:44px; }
}

.h2{
  font-family:"Gruppo", sans-serif;
  font-size:32px;
  line-height:1.25;
  margin:0 0 var(--s2);
}
.h3{
  font-family:"Gruppo", sans-serif;
  font-size:24px;
  line-height:1.3;
  margin:0 0 var(--s2);
}

.lede{
  margin:0;
  max-width: 72ch;
  color:var(--charcoal);
}
.muted{ color:var(--mid); }

.rule-accent{
  width:72px;
  height:var(--rule);
  background:var(--accent);
  margin: var(--s3) 0 var(--s4);
}

.narrow{
  max-width:72ch;
}

.grid-2{
  display:grid;
  grid-template-columns: 1.25fr 1fr;
  gap: var(--s6);
  align-items:start;
}
@media (max-width: 900px){
  .grid-2{ grid-template-columns:1fr; gap:var(--s4); }
}

.services{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4) var(--s6);
}
@media (max-width: 900px){
  .services{ grid-template-columns:1fr; }
}

.service{
  padding-top: var(--s2);
}
.service {
  border-top: var(--rule) solid var(--light);
  margin-top: var(--s2);
  padding-top: var(--s3);
}

.bullets{
  margin: var(--s2) 0 0;
  padding-left: 1.1em;
}
.bullets li{ margin: var(--s1) 0; }

.cta{
  display:inline-block;
  margin-top: var(--s3);
  padding: var(--s2) var(--s3);
  border: var(--rule) solid var(--accent);
  text-decoration:none;
}
.cta:hover{
  border-width:2px;
}

.note{
  background:var(--light);
  padding: var(--s4);
  border-left: 2px solid var(--accent);
}

footer{
  border-top: var(--rule) solid var(--light);
  padding: var(--s4) 0;
  color:var(--mid);
  font-size:14px;
}

/* Motion: subtle only, opt-out supported */
@media (prefers-reduced-motion: no-preference){
  .fade-in{
    animation: fade 180ms ease-out both;
  }
  @keyframes fade{
    from{ opacity:0; transform: translateY(4px); }
    to{ opacity:1; transform:none; }
  }
}