/* ---------------------------------------------------------------------------
   3DHeirloom.ca — site styles
   Extracted from the original inline <style> block so that:
     - the browser can cache it instead of re-downloading it on every page
     - the Content-Security-Policy can eventually drop 'unsafe-inline'
     - there is one place to change a colour
   Fonts are self-hosted (see assets/fonts) rather than pulled from Google,
   which removes a third-party request from a site that sells privacy.
--------------------------------------------------------------------------- */

:root {
  --cream: #FFFBF3;
  --stone: #F2E9DC;
  --ink:   #2A2A2A;
  --sage:  #9CAF9B;
  --clay:  #C97C5D;
  --clay-dark: #B4684B;
  --line:  #EAE2D6;
  --danger: #9B3B2E;
  --ok:     #4A7C59;

  --font-display: Fraunces, Georgia, "Times New Roman", serif;
  --font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.02em; line-height: 1.1; }

a { color: inherit; }

img { max-width: 100%; display: block; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--cream);
  padding: 10px 16px; z-index: 100; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* --- Environment banner -------------------------------------------------- */
.env-banner {
  background: var(--danger); color: #fff; text-align: center;
  font-size: 13px; font-weight: 600; letter-spacing: .04em; padding: 8px 16px;
}

.topbar {
  background: var(--stone); text-align: center; font-size: 12px;
  letter-spacing: .04em; padding: 10px 16px; border-bottom: 1px solid var(--line);
}

/* --- Header -------------------------------------------------------------- */
header.site { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; gap: 16px; }
.logo { font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: -.03em; text-decoration: none; }
.logo small {
  display: block; font-family: var(--font-body); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; opacity: .6; margin-top: 2px; font-weight: 500;
}

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 22px; border-radius: 999px; text-decoration: none;
  font-weight: 600; font-size: 14px; border: 1px solid transparent;
  cursor: pointer; font-family: inherit; transition: background-color .2s, transform .2s, box-shadow .2s;
}
.btn-primary { background: var(--clay); color: #fff; }
.btn-primary:hover { background: var(--clay-dark); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(201,124,93,.3); }
.btn-ghost { border-color: var(--line); background: #fff; color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-danger { background: var(--danger); color: #fff; }
.btn[aria-disabled="true"], .btn:disabled { opacity: .45; pointer-events: none; }

/* Visible keyboard focus. Never remove this without replacing it. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--clay); outline-offset: 2px;
}

/* --- Hero ---------------------------------------------------------------- */
.hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; padding: 40px 0 64px; align-items: center; }
.eyebrow { text-transform: uppercase; letter-spacing: .18em; font-size: 11px; opacity: .6; margin-bottom: 14px; font-weight: 600; }
.hero h1 { font-size: 58px; margin: 0 0 16px; }
.hero h1 em { font-style: italic; font-weight: 600; color: var(--sage); }
.lede { font-size: 18px; opacity: .85; margin: 0; }

.pills { display: flex; gap: 8px; flex-wrap: wrap; margin: 20px 0; list-style: none; padding: 0; }
.pill { font-size: 12px; border: 1px solid var(--line); padding: 6px 12px; border-radius: 999px; background: #fff; font-weight: 500; }

.card { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.04); }
.card-flat { box-shadow: none; }

.before-after { display: grid; grid-template-columns: 1fr 36px 1fr; gap: 8px; align-items: center; }
.ba-img { border-radius: 16px; overflow: hidden; background: var(--stone); aspect-ratio: 3/4; }
.ba-img img { width: 100%; height: 100%; object-fit: cover; }
.ba-arrow { text-align: center; font-weight: 700; opacity: .4; }
.ba-caption { display: flex; justify-content: space-between; margin-top: 12px; font-size: 12px; opacity: .6; font-weight: 500; gap: 8px; }

.trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 28px 0; }
.trust > div { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px; font-size: 13px; line-height: 1.5; }

.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.grid2 { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; }

.band { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 48px 0; }

.swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); display: inline-block; margin-right: 6px; vertical-align: middle; }

.sample { padding: 0; overflow: hidden; }
.sample .thumb { height: 160px; display: grid; place-items: center; font-size: 12px; opacity: .6; }
.sample .label { padding: 12px; font-size: 12px; font-weight: 600; }

.sample .thumb img { width: 110px; height: auto; }
.sample .label span { display: block; font-weight: 400; opacity: .6; }

/* --- Chibi illustrations / styles ---------------------------------------- */
.section-h { font-size: 32px; margin: 0; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 4px; padding: 24px 16px 16px; background: var(--stone); }
.trio img { width: 100%; height: auto; }
.trio img.mid { transform: translateY(-14px) scale(1.12); }
.grid2-even { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.style-show h3 { margin: 16px 0 4px; font-size: 24px; }
.style-art { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: var(--stone); border-radius: 16px; padding: 16px; aspect-ratio: 3/2; align-items: end; }
.style-art img { width: 100%; height: auto; max-height: 100%; }
.style-show .before-after { aspect-ratio: 3/2; }
.style-show .ba-img { aspect-ratio: auto; height: 100%; }
.style-show .before-after { grid-template-rows: 1fr; }

/* Style picker on the quote form: radio cards. */
fieldset.style-pick { border: 0; padding: 0; margin: 0 0 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
fieldset.style-pick legend { font-weight: 600; font-size: 14px; margin-bottom: 8px; padding: 0; }
.style-opt { position: relative; cursor: pointer; }
.style-opt input { position: absolute; opacity: 0; }
.style-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; border: 2px solid var(--line); border-radius: 18px; padding: 14px; height: 100%; background: #fff; }
.style-card img { width: 96px; height: 120px; }
.style-opt input:checked + .style-card { border-color: var(--clay); background: #FFF6F0; }
.style-opt input:focus-visible + .style-card { outline: 3px solid var(--clay); outline-offset: 2px; }

/* --- Order tracker ---------------------------------------------------------
   The bar slides from 0 to --fill on load. Dots sit on a rail; the fill is
   drawn under them so completed dots look "reached". On narrow screens the
   whole thing turns vertical, because 7 labels can't fit across a phone. */
.eta { margin: 10px 0 0; font-size: 16px; }
.tracker { position: relative; margin-top: 26px; padding: 28px 22px 18px; }
.track-rail { position: absolute; left: calc(22px + 100% / 14 - 44px / 14); right: calc(22px + 100% / 14 - 44px / 14); top: 42px; height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.track-fill { height: 100%; width: var(--fill); background: linear-gradient(90deg, var(--sage), var(--clay)); border-radius: 99px; animation: track-slide 1.6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes track-slide { from { width: 0; } to { width: var(--fill); } }
.track-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); position: relative; }
.step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; font-size: 12px; }
.step .dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 3px solid var(--line); font-weight: 700; color: #fff; }
.step.done .dot { background: var(--sage); border-color: var(--sage); }
.step.now .dot { background: var(--clay); border-color: var(--clay); box-shadow: 0 0 0 6px rgba(201,124,93,.2); animation: track-pulse 2s ease-in-out infinite; }
@keyframes track-pulse { 50% { box-shadow: 0 0 0 11px rgba(201,124,93,.08); } }
.step-label { font-weight: 600; line-height: 1.25; }
.step.todo .step-label { opacity: .5; }
.step-time { opacity: .55; font-size: 11px; }

@media (max-width: 700px) {
  .track-rail { display: none; }
  .track-steps { grid-template-columns: 1fr; gap: 0; }
  .step { flex-direction: row; text-align: left; gap: 12px; padding: 8px 0; position: relative; }
  .step:not(:last-child)::after { content: ""; position: absolute; left: 16px; top: 42px; bottom: -8px; width: 3px; background: var(--line); }
  .step.done:not(:last-child)::after { background: var(--sage); }
  .step-time { margin-left: auto; }
}

/* --- FAQ ------------------------------------------------------------------ */
.faq details { border-bottom: 1px solid var(--line); padding: 14px 0; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 16px; }
.faq details p { font-size: 14px; margin: 8px 0 0; opacity: .85; }
.faq h2 { margin-bottom: 8px; }

.muted { opacity: .65; }
.small { font-size: 12px; }
.center { text-align: center; }

footer.site { border-top: 1px solid var(--line); padding: 24px 0; text-align: center; font-size: 11px; letter-spacing: .06em; opacity: .6; }

/* --- Forms --------------------------------------------------------------- */
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.field .hint { font-size: 12px; opacity: .65; margin: 4px 0 8px; }
.input, select.input, textarea.input {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
  font-family: inherit; font-size: 15px; background: #fff; color: var(--ink);
}
input[type="file"].input { padding: 10px; }

/* Honeypot: hidden from humans, visible to naive bots. Uses absolute
   positioning rather than display:none because some bots skip hidden fields. */
.hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }

/* --- Flash messages ------------------------------------------------------ */
.flash { padding: 12px 16px; border-radius: 12px; margin-bottom: 16px; font-size: 14px; border: 1px solid; }
.flash-error   { background: #FDF0EE; border-color: #E8C4BC; color: var(--danger); }
.flash-success { background: #EFF5F0; border-color: #C3D9C8; color: var(--ok); }

/* --- Admin --------------------------------------------------------------- */
.admin-shell { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.admin-nav { background: var(--stone); border-right: 1px solid var(--line); padding: 24px 18px; }
.admin-nav a { display: block; padding: 8px 10px; border-radius: 8px; text-decoration: none; font-size: 14px; font-weight: 500; }
.admin-nav a:hover, .admin-nav a.active { background: #fff; }
.admin-main { padding: 28px 32px; }

.statrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 26px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.stat .n { font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1; }
.stat .k { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; opacity: .6; margin-top: 6px; }
.stat.warn .n { color: var(--danger); }

table.data { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; font-size: 14px; }
table.data th, table.data td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
table.data th { background: var(--stone); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
table.data tr:last-child td { border-bottom: none; }

.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.badge-pending { background: #FDF3E3; color: #8A6314; }
.badge-deleted { background: #F0EDEA; color: #6B635C; }
.badge-approved{ background: #EFF5F0; color: var(--ok); }

.notice {
  border-left: 4px solid var(--clay); background: #FFF6F0;
  padding: 14px 16px; border-radius: 0 12px 12px 0; font-size: 14px; margin: 18px 0;
}

.login-shell { max-width: 380px; margin: 12vh auto; padding: 0 24px; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 32px; }
  .hero h1 { font-size: 38px; }
  .grid3, .grid2, .trust, .grid2-even { grid-template-columns: 1fr; }
  .grid4 { grid-template-columns: 1fr 1fr; }
  .before-after { grid-template-columns: 1fr; }
  .ba-arrow { transform: rotate(90deg); }
  .statrow { grid-template-columns: repeat(2, 1fr); }
  .admin-shell { grid-template-columns: 1fr; }
  .admin-nav { border-right: none; border-bottom: 1px solid var(--line); }
  .admin-main { padding: 20px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* --- Tier cards (quote form) ---------------------------------------------- */
fieldset.tier-pick { border: 0; padding: 0; margin: 0 0 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
fieldset.tier-pick legend { font-weight: 600; font-size: 14px; margin-bottom: 8px; padding: 0; }
.tier-card { position: relative; padding-top: 22px; }
.tier-price { font-family: var(--font-display); font-size: 28px; font-weight: 700; line-height: 1; }
.tier-flag { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--clay); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 99px; white-space: nowrap; }

/* --- Tier columns (home page) --------------------------------------------- */
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 340px)); justify-content: center; gap: 22px; align-items: stretch; }
.tier { position: relative; display: flex; flex-direction: column; gap: 6px; text-align: center; }
.tier.popular { border: 2px solid var(--clay); transform: translateY(-8px); box-shadow: 0 16px 40px rgba(201,124,93,.18); }
.tier img { width: 92px; height: auto; margin: 4px auto 0; }
.tier ul { list-style: none; padding: 0; margin: 8px 0 14px; font-size: 13px; text-align: left; }
.tier li { padding: 5px 0; border-bottom: 1px solid var(--line); }
.tier li::before { content: "✓ "; color: var(--sage); font-weight: 700; }
.tier .btn { margin-top: auto; }

@media (max-width: 900px) {
  fieldset.tier-pick, .tiers { grid-template-columns: 1fr; }
  .tier.popular { transform: none; }
}

/* --- Admin profit check ---------------------------------------------------- */
.profit-table td.num, .profit-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.profit-table tr.total td { font-weight: 700; border-top: 2px solid var(--ink); }
.profit-good { color: var(--ok); }
.profit-bad  { color: var(--danger); }

/* --- Research-driven additions (Oct 29) ------------------------------------ */
/* Price in the hero: answers "how much?" before anyone has to scroll. */
.hero-price { margin: 14px 0 0; font-size: 15px; }
.hero-price strong { font-family: var(--font-display); font-size: 22px; }

/* Coming-soon tier: visible as a price anchor, clearly not orderable. */
.tier.soon { opacity: .72; border-style: dashed; }
.tier.soon img { filter: grayscale(.4); }
.tier-flag-soon { background: var(--ink); }
.tier.soon .btn[aria-disabled="true"] { pointer-events: none; opacity: 1; font-size: 12px; }

/* Photo tips on the quote form: good vs not-so-good, as tiny "phone photos". */
.photo-tips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0 6px; }
.photo-tip { text-align: center; font-size: 11px; line-height: 1.3; }
.photo-tip .shot { aspect-ratio: 3/4; border-radius: 10px; background: #DCE6EE; overflow: hidden; display: grid; place-items: center; border: 2px solid transparent; }
.photo-tip.good .shot { border-color: var(--ok); }
.photo-tip .shot img { width: 78%; height: auto; }
.photo-tip.crop .shot img { width: 150%; transform: translate(28%, 22%); }
.photo-tip.dark .shot { background: #2c3440; }
.photo-tip.dark .shot img { filter: brightness(.35); }
.photo-tip.blur .shot img { filter: blur(3px); }
.photo-tip b { display: block; margin-top: 4px; }
.photo-tip.good b { color: var(--ok); }
.photo-tip:not(.good) b { color: var(--danger); }

/* Phones: keep the main action in thumb reach (bottom of the screen). */
.sticky-cta { display: none; }
@media (max-width: 700px) {
  .sticky-cta {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    flex-direction: column; align-items: center; gap: 4px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 251, 243, .96); border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px rgba(0,0,0,.06);
  }
  .sticky-cta .btn { width: 100%; }
  .sticky-cta .small { opacity: .7; }
  body:has(.sticky-cta) footer.site { padding-bottom: 110px; }
  .photo-tips { grid-template-columns: repeat(2, 1fr); }
}