/* Simons Byggtjänst i Motala AB — draft one-pager. Plain CSS, no dependencies. */
:root{
  --amber:#f5c518;
  --amber-deep:#7a5f00;
  --ink:#14110c;
  --paper:#faf7ef;
  --card:#ffffff;
  --muted:#5c5548;
  --line:#e4dcc9;
  --hdr-h:76px;
  color-scheme:light;
}
html[data-theme="dark"]{
  --ink:#f3ecdd;
  --paper:#151210;
  --card:#201c17;
  --muted:#b3a88f;
  --line:#373127;
  --amber-deep:#f5c518;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  -webkit-text-size-adjust:100%;
}
img{max-width:100%;height:auto;display:block}
.wrap{width:min(1120px,100% - 2.5rem);margin-inline:auto}
section[id]{scroll-margin-top:124px}

/* base link colors at zero specificity so class rules always win */
:where(html[data-theme="dark"]) :where(a){color:var(--amber)}
:where(html[data-theme="light"]) :where(a){color:var(--amber-deep)}
a{overflow-wrap:anywhere}

.skip-link{
  position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);
  padding:.6rem 1rem;z-index:100;border-radius:0 0 .5rem 0;
}
.skip-link:focus{left:0}

/* header */
.hdr{
  position:sticky;top:0;z-index:50;
  background:var(--paper);
  border-bottom:3px solid var(--amber);
}
.hdr__inner{
  width:min(1120px,100% - 1.5rem);margin-inline:auto;
  display:flex;align-items:center;gap:1rem;
  min-height:var(--hdr-h);flex-wrap:nowrap;
}
.hdr__brand{flex-shrink:1;min-width:0;text-decoration:none}
.hdr__logo-plate{
  display:inline-block;background:#fff;border:1px solid var(--line);
  border-radius:.5rem;padding:.4rem .7rem;max-width:100%;
}
.hdr__logo-plate img{width:170px;max-width:100%;height:auto}
.hdr__nav{display:flex;gap:1.1rem;margin-left:auto;min-width:0}
.hdr__nav a{
  text-decoration:none;font-weight:600;color:var(--ink);
  padding:.35rem .1rem;border-bottom:2px solid transparent;
}
.hdr__nav a:hover{border-bottom-color:var(--amber)}
.hdr-tel{
  font-weight:700;text-decoration:none;white-space:nowrap;
  background:var(--amber);color:#14110c;
  padding:.55rem .9rem;border-radius:.45rem;
}
.hdr-tel:hover{filter:brightness(.95)}
.theme-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:0 0 44px;
  border:1px solid var(--line);border-radius:.45rem;
  background:var(--card);color:var(--ink);cursor:pointer;font-size:1.1rem;
}

/* hero */
.hero{padding:3.5rem 0 0;position:relative;overflow:hidden}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:2.5rem;align-items:center;padding-bottom:3.5rem}
.kicker{
  font-size:.85rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber-deep);margin-bottom:.7rem;
}
h1{
  font-size:clamp(2.3rem,5.5vw,3.8rem);line-height:1.04;
  letter-spacing:-.02em;font-weight:800;margin-bottom:1.1rem;
}
.hero__lead{font-size:1.15rem;color:var(--muted);max-width:34rem;margin-bottom:1.6rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem}
.btn{
  display:inline-block;text-decoration:none;font-weight:700;
  padding:.85rem 1.4rem;border-radius:.5rem;
}
.btn--solid{background:var(--amber);color:#14110c}
.btn--solid:hover{filter:brightness(.95)}
.btn--ghost{border:2px solid var(--ink);color:var(--ink)}
.btn--ghost:hover{background:var(--card)}
.hero__facts{
  display:grid;gap:.8rem;min-width:0;
}
.fact{
  background:var(--card);border:1px solid var(--line);border-left:6px solid var(--amber);
  border-radius:.5rem;padding:.9rem 1.1rem;
  display:flex;align-items:baseline;gap:.7rem;
}
.fact__num{font-weight:800;font-size:1.25rem;letter-spacing:-.01em}
.fact__label{color:var(--muted);font-size:.95rem}
.hazard{
  height:14px;
  background:repeating-linear-gradient(-45deg,var(--amber) 0 18px,var(--ink) 18px 36px);
}

/* sections */
.sec{padding:3.5rem 0}
.sec--alt{background:var(--card)}
h2{font-size:clamp(1.7rem,3.5vw,2.4rem);letter-spacing:-.015em;font-weight:800;margin-bottom:.9rem}
.sec__intro{color:var(--muted);max-width:38rem;margin-bottom:2rem}

.cards{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem}
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:.6rem;
  padding:1.3rem 1.4rem;border-top:5px solid var(--amber);
}
.sec--alt .card{background:var(--paper)}
.card h3{font-size:1.15rem;margin-bottom:.4rem}
.card p{color:var(--muted);font-size:.98rem}

.rot-box{
  margin-top:1.6rem;background:var(--amber);color:#14110c;
  border-radius:.6rem;padding:1.3rem 1.5rem;
}
.rot-box h3{margin-bottom:.3rem}
.rot-box a{color:#14110c;font-weight:700}

/* om oss */
.om-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:2.5rem;align-items:start}
.om-copy p{margin-bottom:1rem}
.nap{display:grid;gap:.55rem}
.nap__row{
  display:grid;grid-template-columns:minmax(90px,110px) minmax(0,1fr);gap:.7rem;
  background:var(--paper);border:1px solid var(--line);border-radius:.5rem;padding:.75rem 1rem;
}
.nap__row dt{font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.nap__row dd{font-weight:600}

/* kontakt */
.contact-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem}
.contact-card{
  display:flex;flex-direction:column;gap:.25rem;
  background:var(--card);border:1px solid var(--line);border-radius:.6rem;
  padding:1.2rem 1.3rem;text-decoration:none;
}
.contact-card__label{
  font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted);
}
.contact-card__value{font-weight:700;font-size:1.05rem;color:var(--ink)}

/* footer */
.ftr{border-top:3px solid var(--amber);padding:1.4rem 0;background:var(--paper)}
.ftr__inner{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;align-items:center;justify-content:space-between}
.ftr p{color:var(--muted);font-size:.92rem}
.ftr-tel{font-weight:700;text-decoration:none}

@media (max-width:880px){
  .hero__grid{grid-template-columns:minmax(0,1fr)}
  .cards{grid-template-columns:minmax(0,1fr)}
  .om-grid{grid-template-columns:minmax(0,1fr)}
  .contact-cards{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  .hdr__inner{flex-wrap:wrap;row-gap:.4rem;padding:.45rem 0}
  .hdr__nav{order:3;width:100%;justify-content:center;margin-left:0;gap:1.2rem}
  .hdr-tel{margin-left:auto}
  section[id]{scroll-margin-top:192px}
  .hazard{height:10px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}