/* Design tokens — task 013 spec (colors, fonts, motif). No gradients, ever. */
:root {
  --ink: #14171c;          /* page background */
  --ink-alt: #1b1f26;      /* alt section background */
  --ivory: #f2ede4;        /* primary text */
  --ivory-muted: #a9a196;  /* secondary text */
  --terracotta: #c86e3c;   /* accent 1 (darkened from #c1613c — task 031: WCAG 4.5:1 on both dark backgrounds) */
  --teal: #3c9482;         /* accent 2 (lightened from #3c8f82 — task 031: WCAG 4.5:1 on both dark backgrounds) */
  --line: rgba(242, 237, 228, .14);
  --radius: 10px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font: 16px/1.6 "Space Grotesk", system-ui, sans-serif;
  color: var(--ivory);
  background: var(--ink);
}
.wrap { max-width: 980px; margin: 0 auto; padding: 0 20px; }
a { color: var(--teal); }
a:hover { color: var(--ivory); }

h1, h2, h3, .col-title { font-family: "Fraunces", Georgia, serif; font-weight: 600; }
h2 {
  font-size: 1.45rem; margin: 0 0 18px;
  display: flex; align-items: center; gap: 10px;
}
.h2-note {
  font-family: "Space Grotesk", sans-serif; font-weight: 400;
  font-size: .85rem; color: var(--ivory-muted);
}
.glyph { width: 18px; height: 18px; color: var(--terracotta); flex: none; }

/* --- signature rosette motif (8-facet radial, SVG polygons) --------------- */
.rosette {
  position: absolute; pointer-events: none;
  opacity: .3; /* hero spec */
}
.rosette-echo { opacity: .15; }
.rosette svg { display: block; width: 100%; height: 100%; }
.rosette-hero {
  top: -140px; right: -140px; width: 420px; height: 420px;
}
.rosette-footer {
  bottom: -120px; right: -80px; width: 300px; height: 300px;
}

/* --- hero ----------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--ink);
  border-bottom: 1px solid var(--line);
  padding: 72px 0 56px;
}
.hero .wrap { position: relative; }
.kicker {
  text-transform: uppercase; letter-spacing: .16em;
  font-size: .78rem; color: var(--terracotta); margin: 0 0 10px; font-weight: 500;
}
.hero h1 {
  font-size: clamp(1.7rem, 5vw, 2.7rem); line-height: 1.15;
  margin: 0 0 14px; max-width: 22ch;
}
.hero h1 em { font-style: italic; font-weight: 500; color: var(--teal); }
.blurb { max-width: 58ch; color: var(--ivory-muted); margin: 0 0 24px; }
.hero-links { display: flex; gap: 12px; flex-wrap: wrap; margin: 0; }

/* --- buttons (solid ivory / ivory outline — no gradients) ------------------ */
.btn {
  display: inline-block; padding: 11px 22px;
  background: var(--ivory); color: var(--ink);
  font: 500 .95rem "Space Grotesk", sans-serif;
  text-decoration: none; border: 1px solid var(--ivory);
  border-radius: 3px; cursor: pointer;
}
.btn:hover { background: #fff; color: var(--ink); }
.btn-outline, .btn.ghost {
  background: transparent; color: var(--ivory); border: 1px solid var(--ivory);
}
.btn-outline:hover, .btn.ghost:hover { background: var(--ivory); color: var(--ink); }

/* --- nav ------------------------------------------------------------------- */
.nav {
  display: flex; gap: 20px; flex-wrap: wrap;
  padding: 15px 20px; border-bottom: 1px solid var(--line);
}
.nav a { text-decoration: none; color: var(--ivory-muted); font-weight: 500; }
.nav a:hover { color: var(--terracotta); }

/* --- sections ---------------------------------------------------------------- */
.section { padding: 52px 0 12px; }
.section-alt { background: var(--ink-alt); }
.section-note { color: var(--ivory-muted); margin: -8px 0 18px; font-size: .95rem; }

/* --- FAQ (Q&A stack, hairline dividers — no cards, no gradients) ------------- */
.faq-list { max-width: 760px; }
.faq-item { padding: 18px 0 20px; border-bottom: 1px solid var(--line); }
.faq-item:last-child { border-bottom: none; }
.faq-item h3 { font-size: 1.05rem; font-weight: 600; margin: 0 0 8px; color: var(--ivory); }
.faq-item p { margin: 0; color: var(--ivory-muted); line-height: 1.65; }

/* --- seasonal promo strip (footer garnish, muted — no gradients) ------------- */
.promo-strip { color: var(--ivory-muted); font-size: .9rem; margin-top: 6px; }

/* --- about -------------------------------------------------------------------- */
.about { display: flex; gap: 28px; align-items: flex-start; }
.about-mark {
  position: relative; flex: none; width: 180px; height: 180px;
  border-radius: 6px; border: 1px solid var(--line);
  margin-top: 0; object-fit: cover;
}
.about-copy p { margin: 0 0 14px; max-width: 62ch; }
.about-copy p:first-child { font-size: 1.06rem; color: var(--ivory); }

/* --- services (two-column split) ---------------------------------------------- */
.services-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.col-title {
  font-size: 1.05rem; color: var(--terracotta);
  margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.services-col:last-child .col-title { color: var(--teal); }
.stack { display: flex; flex-direction: column; gap: 10px; }
.svc {
  background: var(--ink); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px;
}
.svc h4 { margin: 0 0 4px; font-family: "Fraunces", serif; font-size: 1rem; }
.svc p { margin: 0; color: var(--ivory-muted); font-size: .92rem; }
.svc.placeholder { border-style: dashed; }

/* --- grids + cards (shared by shop/reviews/opensource) -------------------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px; margin-bottom: 24px;
}
.card {
  background: var(--ink-alt); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px;
}
.section:not(.section-alt) .card, #shop .card, #opensource .card {
  background: var(--ink-alt);
}
#reviews .card, #contact .card { background: var(--ink); }
.card h3 { margin: 0 0 6px; font-size: 1.02rem; }
.card p { margin: 0 0 10px; color: var(--ivory-muted); font-size: .93rem; }
.card .meta { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; padding: 0; list-style: none; }
.card .meta li {
  font-size: .72rem; border: 1px solid var(--line);
  color: var(--ivory-muted); border-radius: 999px; padding: 2px 9px;
}
.card a { text-decoration: none; font-weight: 500; font-size: .92rem; }
.card.placeholder { border-style: dashed; opacity: .85; }
.rating { color: var(--terracotta); letter-spacing: 2px; font-size: .85rem; margin: 0 0 8px; }

/* --- testimonials (customer quotes) ---------------------------------------------- */
.testimonial { margin: 0; }
.testimonial .quote { font-style: italic; color: var(--ivory-muted); font-size: .95rem; margin: 0 0 12px; }
.testimonial footer { font-size: .88rem; color: var(--ivory); }
.testimonial footer .meta-date { color: var(--ivory-muted); font-size: .8rem; }
.testimonial .rating { margin: 8px 0 0; }

/* --- gallery (before/after pairs; images supplied later — task 027) -------------- */
/* Card background matches #reviews/#contact (alt section on ink) via #gallery rule. */
#gallery .gallery-card { background: var(--ink); }
.gallery-pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 12px;
}
.gallery-side { position: relative; margin: 0; }
.gallery-img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 6px; border: 1px solid var(--line); background: var(--ink-alt);
}
.gallery-chip {
  position: absolute; top: 8px; left: 8px;
  font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  color: var(--ink); border-radius: 999px; padding: 2px 9px;
  background: var(--terracotta);
}
.gallery-chip-after { background: var(--teal); }
.gallery-caption { font-size: .93rem; color: var(--ivory-muted); margin: 0 0 10px; }
.gallery-card .meta { margin-bottom: 0; }
.gallery-empty { margin: 0; }

/* --- contact --------------------------------------------------------------------- */
.contact-cols { display: grid; grid-template-columns: 1.2fr .8fr; gap: 28px; }
.contact-form {
  display: flex; flex-direction: column; gap: 14px;
  background: var(--ink); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px;
}
.contact-form label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: .85rem; color: var(--ivory-muted);
}
.contact-form input, .contact-form textarea, .contact-form select {
  background: var(--ink-alt); border: 1px solid var(--line);
  border-radius: 4px; color: var(--ivory);
  font: inherit; padding: 10px 12px;
}
.contact-form select { appearance: none; }
.contact-form input::placeholder, .contact-form textarea::placeholder {
  color: var(--ivory-muted); opacity: 1; /* task 031: placeholder was default grey ~3.6:1 on --ink-alt */
}
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus {
  outline: none; border-color: var(--teal);
}
.contact-form .field-optional { font-weight: normal; color: var(--ivory-muted); font-size: .8rem; }
.contact-form .choice-group {
  display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 12px; margin: 0;
}
.contact-form .choice-group legend { font-size: .85rem; color: var(--ivory-muted); padding: 0 4px; }
.contact-form .choice {
  flex-direction: row; align-items: baseline; gap: 8px;
  font-size: .92rem; color: var(--ivory); cursor: pointer;
}
.contact-form .choice input { accent-color: var(--teal); padding: 0; width: auto; }
.contact-form input[type="file"] { padding: 8px 0; color: var(--ivory-muted); }
.contact-form .privacy-note { margin: 0; font-size: .8rem; }
.contact-form .btn { align-self: flex-start; }
.form-status { font-size: .85rem; color: var(--teal); margin: 0; }

/* get-ready checklist (task 036) — revealed post-submit, lead magnet block */
.get-ready { margin-top: 28px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.03); }
.get-ready h3 { margin: 0 0 6px; font-size: 1.05rem; }
.get-ready-lede { color: var(--ivory-muted); font-size: .95rem; margin: 0 0 12px; }
.get-ready-list { margin: 0; padding-left: 22px; display: grid; gap: 10px; }
.get-ready-list strong { display: inline; }
.get-ready-list span { color: var(--ivory-muted); font-size: .93rem; }
.contact-side p { color: var(--ivory-muted); }
.contact-side #contact-phone a, .contact-side #contact-email a { color: var(--ivory); text-decoration: none; }
.contact-side #contact-phone a:hover, .contact-side #contact-email a:hover { color: var(--terracotta); }
.phone-note { font-size: .8rem; color: var(--ivory-muted); margin-left: 8px; }
.contact-address { font-size: .92rem; line-height: 1.5; }
.socials { list-style: none; display: flex; gap: 10px; flex-wrap: wrap; padding: 0; margin: 14px 0; }
.socials a, .socials span {
  display: inline-block; padding: 8px 16px; border: 1px solid var(--line);
  border-radius: 3px; text-decoration: none; font-size: .9rem; background: var(--ink-alt);
}
.socials span { color: var(--ivory-muted); border-style: dashed; }
.social-slot {
  display: flex; gap: 10px; align-items: flex-start;
  color: var(--ivory-muted); font-size: .85rem;
  border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 12px 14px; margin-top: 8px;
}

/* --- blog ------------------------------------------------------------------------ */
.hero-slim { padding: 52px 0 40px; }
.blog-card { display: flex; flex-direction: column; }
.blog-date {
  color: var(--terracotta); font-size: .8rem; letter-spacing: .08em;
  text-transform: uppercase; margin: 0 0 8px;
}
.blog-card h3 { margin: 0 0 8px; font-size: 1.15rem; }
.blog-card a { text-decoration: none; font-weight: 500; margin-top: auto; }
.post-view { max-width: 68ch; }
.post-view p { margin: 0 0 16px; line-height: 1.75; }
.post-view .blog-date { margin-bottom: 18px; }
.back-link { display: inline-block; margin-top: 12px; color: var(--ivory-muted); }
.back-link:hover { color: var(--terracotta); }

/* --- footer ------------------------------------------------------------------------ */
footer {
  position: relative; overflow: hidden;
  border-top: 1px solid var(--line);
  color: var(--ivory-muted); padding: 26px 0 44px; font-size: .85rem;
}
footer .wrap { position: relative; }
.web3-badge { margin: 6px 0 0; font-size: .85rem; color: var(--teal); }
.web3-badge[hidden] { display: none; }

/* --- responsive ---------------------------------------------------------------------- */
@media (max-width: 760px) {
  .services-cols, .contact-cols { grid-template-columns: 1fr; }
  .gallery-pair { grid-template-columns: 1fr; }
  .about { flex-direction: column; }
  .about-mark { width: 88px; height: 88px; }
  .rosette-hero { width: 300px; height: 300px; top: -100px; right: -100px; }
  .estimator { grid-template-columns: 1fr; } /* task 034: stack widget on mobile */
}
@media (min-width: 640px) {
  .section { padding: 64px 0 16px; }
}

/* --- estimator (task 034: deterministic quote widget, no backend) ------------- */
.estimator {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
  align-items: start;
}
.estimator-form {
  display: flex; flex-direction: column; gap: 14px;
  background: var(--ink); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px;
}
/* reuse the proven contact-form field styling for estimator inputs */
.estimator-form label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: .85rem; color: var(--ivory-muted);
}
.estimator-form input, .estimator-form select {
  background: var(--ink-alt); border: 1px solid var(--line);
  border-radius: 4px; color: var(--ivory);
  font: inherit; padding: 10px 12px;
}
.estimator-form input::placeholder { color: var(--ivory-muted); opacity: 1; }
.estimator-form input:focus, .estimator-form select:focus {
  outline: none; border-color: var(--teal);
}
.estimator-form .choice-group {
  display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 12px; margin: 0;
}
.estimator-form .choice-group legend { font-size: .85rem; color: var(--ivory-muted); padding: 0 4px; }
.estimator-form .choice {
  flex-direction: row; align-items: baseline; gap: 8px;
  font-size: .92rem; color: var(--ivory); cursor: pointer;
}
.estimator-form .choice input { accent-color: var(--teal); padding: 0; width: auto; }
.estimator-form .btn { align-self: flex-start; }
.est-sidenote { margin: 0; font-size: .8rem; }
.estimator-out {
  background: var(--ink-alt); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px;
}
.est-range { font-size: 1.5rem; color: var(--ivory); margin: 0 0 12px; }
.est-range strong { font-weight: 600; color: var(--teal); }
.est-range-note { display: block; font-size: .82rem; font-weight: 400; color: var(--ivory-muted); margin-top: 4px; }
.est-lines { margin: 0 0 14px; }
.est-lines dt { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ivory-muted); margin-top: 10px; }
.est-lines dd { margin: 2px 0 0; color: var(--ivory); font-size: .98rem; }
.est-disclaimer { font-size: .85rem; color: var(--ivory-muted); margin: 0; border-top: 1px solid var(--line); padding-top: 12px; }
.est-disclaimer strong { color: var(--terracotta); }
.est-disclaimer a { color: var(--teal); }
section[hidden] { display: none; }

.wip { margin: 1.5rem 0 0; text-align: center; }
.wip img { max-width: min(100%, 320px); height: auto; border-radius: 12px; }
.wip figcaption { margin-top: .5rem; font-size: .9rem; opacity: .8; }