@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root { color-scheme:light; --paper:#f5f0e6; --ink:#262724; --muted:#67675e; --orange:#ed602c; --line:#d5d0c5; font-family:'DM Sans',system-ui,sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
body { margin:0; }
button { font:inherit; }
a { color:inherit; text-underline-offset:4px; }
.shell { max-width:1200px; margin:auto; padding:20px 28px 0; }
.topbar { min-height:48px; padding-bottom:14px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); font:500 21px 'Space Grotesk',system-ui,sans-serif; letter-spacing:-.6px; white-space:nowrap; }
.brand img { flex-shrink:0; }
.brand b { color:#a43613; }
.top-note { color:var(--muted); font-size:.8rem; line-height:1.5; }
.dot { display:inline-block; width:6px; height:6px; background:var(--orange); border-radius:50%; margin:0 8px; vertical-align:middle; }
.hero { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr); align-items:center; gap:70px; padding:48px 0 56px; }
.story { min-width:0; }
.eyebrow { display:flex; align-items:center; gap:10px; margin-bottom:22px; color:#a43613; font-size:.8rem; letter-spacing:.08em; font-weight:700; line-height:1.5; }
.line { width:8px; height:8px; border-radius:50%; background:var(--orange); flex-shrink:0; }
h1 { margin:0 0 22px; font:600 clamp(2.5rem,4.8vw,4.6rem)/1.04 'Space Grotesk',system-ui,sans-serif; letter-spacing:-.06em; overflow-wrap:anywhere; }
.lead { color:var(--muted); font-size:1.05rem; line-height:1.75; max-width:460px; margin:0 0 30px; }
.prop-card { position:relative; max-width:460px; padding:24px; background:var(--orange); border:1px solid #db5120; border-radius:10px; box-shadow:5px 6px 0 #ded7ca; }
.prop-heading,.prop-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:.75rem; font-weight:700; letter-spacing:.07em; line-height:1.5; }
.tiny-star { font-size:24px; }
.prop-name { margin:16px 0; font:600 1.65rem/1.15 'Space Grotesk',system-ui,sans-serif; letter-spacing:-.035em; overflow-wrap:anywhere; }
.prop-rule { height:1px; background:#7f321c66; }
.prop-sub { font-size:.75rem; letter-spacing:.06em; margin-top:16px; }
.prop-number { font:500 clamp(1.4rem,2.7vw,2rem)/1.3 'Space Grotesk',system-ui,sans-serif; margin:12px 0 22px; overflow-wrap:anywhere; }
.prop-footer { padding-top:14px; border-top:1px solid #7f321c66; font-size:.75rem; }
.caption { color:var(--muted); max-width:440px; font-size:.875rem; line-height:1.65; margin:24px 0 0; }
.phone-wrap { display:flex; flex-direction:column; align-items:center; min-width:0; }
.phone { position:relative; width:min(100%,370px); border:1px solid #4b4d43; border-radius:24px; background:var(--ink); color:var(--paper); box-shadow:9px 11px 0 #ded8cb; overflow:hidden; }
.phone-top,.phone-status,.phone-bottom { display:none; }
.phone-screen { padding:26px; min-height:560px; display:flex; flex-direction:column; }
.call-status { display:flex; align-items:center; justify-content:center; gap:8px; color:#c5c6b9; font-size:.75rem; letter-spacing:.08em; line-height:1.5; }
.pulse { width:7px; height:7px; background:#9a9d8c; border-radius:50%; flex-shrink:0; }
.pulse.live { background:#a9d4aa; box-shadow:0 0 0 4px #a9d4aa1a; }
.phone-title { text-align:center; font:500 1.65rem/1.15 'Space Grotesk',system-ui,sans-serif; letter-spacing:-.035em; margin-top:22px; overflow-wrap:anywhere; }
.phone-location { text-align:center; color:#c5c6b9; font-size:.75rem; letter-spacing:.06em; margin-top:10px; }
.conversation { background:#36382f; padding:18px; margin:24px 0; border:1px solid #55574a; border-radius:8px; max-height:310px; overflow-y:auto; }
.message-label { color:#f8a480; font-size:.75rem; letter-spacing:.07em; font-weight:700; }
.conversation p { color:var(--paper); font-size:.95rem; line-height:1.7; margin:10px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.keypad { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:auto 0 18px; }
.keypad button { min-height:74px; width:100%; padding:10px 5px; border:1px solid #66695a; border-radius:8px; background:#393b33; color:var(--paper); cursor:pointer; }
.keypad button:hover:not(:disabled) { border-color:var(--orange); background:#4b3d2f; }
.keypad button:disabled { opacity:.38; cursor:default; }
.keypad button[data-key="0"] { grid-column:1; }
.keypad button[data-key="9"] { grid-column:3; }
.keypad button[data-option] { grid-column:auto; }
.keypad strong { display:block; font:500 1.6rem/1.2 'Space Grotesk',system-ui,sans-serif; }
.keypad small { display:block; color:#d6d6c8; font-size:.75rem; line-height:1.35; margin-top:5px; overflow-wrap:anywhere; }
.call-button { width:100%; min-height:48px; padding:12px; border:1px solid var(--orange); border-radius:7px; background:var(--orange); color:#241d17; cursor:pointer; font-size:.9rem; font-weight:700; letter-spacing:.04em; }
.call-button:hover { background:#ff743e; }
.call-button:disabled { opacity:.45; cursor:default; }
.call-icon { font-size:1.2rem; margin-right:9px; vertical-align:-1px; }
.phone-caption { color:#a43613; font-size:.9rem; margin:25px 0 0; font-weight:600; }
.scribble { margin-right:6px; }
.footer-strip { border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; padding:24px 0 30px; color:var(--muted); font-size:.75rem; line-height:1.5; letter-spacing:.05em; font-weight:600; }
.footer-index { color:#a43613; margin-right:8px; }
:where(button,a):focus-visible { outline:3px solid #b83b12; outline-offset:4px; }
.phone button:focus-visible { outline-color:#ffad83; }
@media(max-width:800px) {
  .hero { grid-template-columns:1fr; gap:38px; padding-top:34px; }
  .story { max-width:600px; }
  .lead { max-width:540px; }
  .phone-wrap { padding-bottom:8px; }
  .top-note { max-width:160px; text-align:right; }
  h1 { font-size:3rem; }
}
@media(max-width:480px) {
  .shell { padding:16px 18px 0; }
  .brand { font-size:18px; gap:6px; }
  .brand img { width:27px; height:27px; }
  .top-note { font-size:.75rem; max-width:110px; }
  .hero { padding-top:30px; }
  h1 { font-size:2.65rem; }
  .eyebrow { font-size:.75rem; }
  .prop-card { padding:20px; }
  .phone-screen { padding:22px; }
  .footer-strip { flex-direction:column; gap:10px; }
}