/* Milwaukee Floor Sanding — Art Flooring & Construction LLC
   Palette derived from the job itself: raw sanded white oak (ground),
   walnut (ink), shellac amber (accent), steel wool grey (utility). */

:root {
  --raw:      #E3DED2;   /* freshly sanded oak, before finish */
  --raw-deep: #D2CBBB;   /* same board, in shadow */
  --walnut:   #241D18;   /* ink */
  --walnut-2: #3C3128;
  --amber:    #B4761A;   /* first coat of poly going down */
  --amber-lt: #D9A047;
  --steel:    #6E6A62;   /* screen + steel wool */
  --paper:    #F2EFE8;
  --line:     rgba(36,29,24,.16);

  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Source Sans 3", system-ui, -apple-system, sans-serif;

  --measure: 66ch;
  --gap: clamp(1.5rem, 4vw, 3.5rem);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--raw);
  color: var(--walnut);
  font-family: var(--body);
  font-size: clamp(1rem, .96rem + .2vw, 1.125rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: min(1120px, 92vw); margin-inline: auto; }

/* ---------------------------------------------------------- type scale */
h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin: 0 0 .4em;
}
h1 { font-size: clamp(2.8rem, 1.6rem + 6vw, 6.5rem); }
h2 { font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem); letter-spacing: 0; }

.eyebrow {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .82rem;
  color: var(--steel);
  margin: 0 0 1rem;
}

p { max-width: var(--measure); }
a { color: inherit; }

/* ------------------------------------------------- signature: grit strip
   The real sequence a floor goes through: 36 grit cuts it flat, 60 and 80
   take out the scratch, 100 leaves it ready for finish. Speckle density
   drops left to right because that is literally what the paper looks like. */
.grit {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 2px solid var(--walnut);
  border-bottom: 2px solid var(--walnut);
  margin: var(--gap) 0;
}
.grit div {
  position: relative;
  height: 84px;
  border-right: 1px solid var(--line);
  display: flex;
  align-items: flex-end;
  padding: .5rem .7rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .1em;
  color: var(--walnut-2);
}
.grit div:last-child { border-right: 0; }
.grit div::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(var(--walnut) 42%, transparent 43%);
  opacity: .5;
}
.g36::before  { background-size: 13px 13px; }
.g60::before  { background-size: 9px 9px; }
.g80::before  { background-size: 6px 6px; }
.g100::before { background-size: 3.5px 3.5px; opacity: .3; }

/* ------------------------------------------------------------- masthead */
header.top {
  border-bottom: 2px solid var(--walnut);
  background: var(--raw);
  position: sticky; top: 0; z-index: 20;
}
.top .wrap {
  display: flex; align-items: center; gap: 1.5rem;
  justify-content: space-between;
  padding: .85rem 0;
  flex-wrap: wrap;
}
.mark {
  font-family: var(--display); font-weight: 700;
  text-transform: uppercase; letter-spacing: -.005em;
  font-size: 1.35rem; text-decoration: none; line-height: 1;
}
.mark span { color: var(--amber); }
nav ul { display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
nav a {
  font-family: var(--display); text-transform: uppercase;
  letter-spacing: .09em; font-size: .95rem; font-weight: 600;
  text-decoration: none; padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
nav a:hover, nav a[aria-current="page"] { border-bottom-color: var(--amber); }

.tel {
  font-family: var(--display); font-weight: 700;
  font-size: 1.3rem; letter-spacing: .02em;
  text-decoration: none; white-space: nowrap;
}
.tel:hover { color: var(--amber); }

/* ----------------------------------------------------------------- hero */
.hero { padding: clamp(3rem, 7vw, 6rem) 0 0; }
.hero h1 { max-width: 15ch; }
.hero h1 em { font-style: normal; color: var(--amber); }
.lede { font-size: clamp(1.1rem, 1rem + .5vw, 1.45rem); max-width: 52ch; }

.cta-row { display: flex; gap: 1rem; flex-wrap: wrap; margin: 2rem 0 0; }
.btn {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; font-size: 1.05rem;
  padding: .8rem 1.7rem; text-decoration: none;
  border: 2px solid var(--walnut); background: var(--walnut); color: var(--raw);
  transition: background .15s, color .15s;
}
.btn:hover { background: var(--amber); border-color: var(--amber); color: var(--walnut); }
.btn.ghost { background: transparent; color: var(--walnut); }
.btn.ghost:hover { background: var(--walnut); color: var(--raw); }

/* -------------------------------------------------------------- section */
section { padding: clamp(3rem, 6vw, 5.5rem) 0; }
section.dark { background: var(--walnut); color: var(--raw); }
section.dark .eyebrow { color: var(--amber-lt); }
section.dark h2 { color: var(--raw); }
section.dark .grit { border-color: var(--raw); }
section.dark .grit div { color: var(--raw); border-right-color: rgba(227,222,210,.2); }
section.dark .grit div::before { background-image: radial-gradient(var(--raw) 42%, transparent 43%); }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start; }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
@media (max-width: 800px) { .two, .three { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- pricing */
.price-block {
  border: 2px solid var(--walnut);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--paper);
}
.price-figure {
  font-family: var(--display); font-weight: 700; line-height: .9;
  font-size: clamp(3.5rem, 2rem + 8vw, 7rem);
  letter-spacing: -.02em;
}
.price-figure sup { font-size: .38em; vertical-align: super; font-weight: 600; }
.price-unit {
  font-family: var(--display); text-transform: uppercase;
  letter-spacing: .14em; font-size: .95rem; color: var(--steel);
}

table.factors { width: 100%; border-collapse: collapse; margin-top: 1.5rem; }
table.factors th, table.factors td {
  text-align: left; padding: .7rem .5rem; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.factors th {
  font-family: var(--display); text-transform: uppercase;
  letter-spacing: .1em; font-size: .85rem; color: var(--steel); font-weight: 600;
  white-space: nowrap;
}

/* ------------------------------------------------------------- gallery */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.gallery figure { margin: 0; }
.gallery img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  display: block; border: 2px solid var(--walnut); background: var(--raw-deep);
}
.gallery figcaption {
  font-family: var(--display); text-transform: uppercase;
  letter-spacing: .1em; font-size: .8rem; color: var(--steel); padding-top: .5rem;
}

/* ---------------------------------------------------------------- areas */
.areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0; border: 2px solid var(--walnut); }
.areas a {
  padding: 1.4rem 1.2rem; text-decoration: none;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: block; transition: background .15s;
}
.areas a:hover { background: var(--paper); }
.areas a strong { font-family: var(--display); font-size: 1.35rem; text-transform: uppercase; display: block; }
.areas a span { font-size: .92rem; color: var(--steel); }

/* ----------------------------------------------------------------- form */
form.quote { display: grid; gap: 1rem; max-width: 34rem; }
form.quote label {
  font-family: var(--display); text-transform: uppercase;
  letter-spacing: .1em; font-size: .85rem; font-weight: 600;
  display: grid; gap: .35rem;
}
form.quote input, form.quote select, form.quote textarea {
  font-family: var(--body); font-size: 1rem;
  padding: .7rem .8rem; border: 2px solid var(--walnut);
  background: var(--paper); color: var(--walnut); width: 100%;
  text-transform: none; letter-spacing: normal; font-weight: 400;
}
form.quote textarea { min-height: 7rem; resize: vertical; }
form.quote input:focus-visible, form.quote select:focus-visible,
form.quote textarea:focus-visible, a:focus-visible, button:focus-visible {
  outline: 3px solid var(--amber); outline-offset: 2px;
}
form.quote button {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; font-size: 1.05rem; cursor: pointer;
  padding: .85rem 1.7rem; border: 2px solid var(--walnut);
  background: var(--walnut); color: var(--raw); justify-self: start;
}
form.quote button:hover { background: var(--amber); border-color: var(--amber); color: var(--walnut); }
.form-note { font-size: .9rem; color: var(--steel); max-width: 34rem; }

/* --------------------------------------------------------------- footer */
footer {
  border-top: 2px solid var(--walnut);
  padding: 2.5rem 0; font-size: .95rem;
}
footer .wrap { display: flex; gap: var(--gap); justify-content: space-between; flex-wrap: wrap; }
footer a { text-decoration: none; }
footer a:hover { color: var(--amber); }
.legal { color: var(--steel); font-size: .85rem; }

ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { padding: .35rem 0; border-bottom: 1px solid var(--line); }
ul.checks { padding-left: 1.1rem; }
ul.checks li { padding: .25rem 0; }