/* Layout: a 1998 desktop. Teal wallpaper, every section is a beveled grey "window" with a navy title bar,
   blue underlined links, a scrolling ticker and 88x31 badges. One committed light look (no dark theme). */
:root {
  --desk: #008080;
  --desk-dot: #0a8c8c;
  --win: #c0c0c0;
  --win-light: #dfdfdf;
  --hi: #ffffff;
  --lo: #808080;
  --black: #000000;
  --paper: #ffffff;
  --title-a: #000080;
  --title-b: #1084d0;
  --link: #0000ee;
  --visited: #551a8b;
  --red: #cc0000;
  --yellow: #ffff00;
  --lime: #00ff00;
  --fg: #000000;
  --muted: #333333;
  --f-pixel: "VT323", "Courier New", Courier, monospace;
  --f-8bit: "Press Start 2P", "Courier New", monospace;
  --f-body: "Times New Roman", Times, Georgia, serif;
  --f-ui: Tahoma, Verdana, "Segoe UI", Arial, sans-serif;
  --wrap: 62rem;
  --gl: max(16px, env(safe-area-inset-left, 0px));
  --gr: max(16px, env(safe-area-inset-right, 0px));
  --bevel-out: inset -1px -1px var(--black), inset 1px 1px var(--hi), inset -2px -2px var(--lo), inset 2px 2px var(--win-light);
  --bevel-in: inset -1px -1px var(--hi), inset 1px 1px var(--black), inset -2px -2px var(--win-light), inset 2px 2px var(--lo);
  color-scheme: light;
}

* { box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
body {
  margin: 0; color: var(--fg); font-family: var(--f-body); font-size: 1.15rem; line-height: 1.5;
  background-color: var(--desk);
  background-image: radial-gradient(var(--desk-dot) 1px, transparent 1.5px);
  background-size: 6px 6px;
  padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 860px) { body { padding-bottom: 0; } }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--title-a); }
img { max-width: 100%; height: auto; }
a { color: var(--link); }
a:visited { color: var(--visited); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 1px dotted var(--black); outline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--yellow); color: var(--black); padding: 6px 10px; z-index: 50; }
.skip:focus { left: 16px; }

/* Each band gets the outer gutter; its .wrap is the window */
.topbar, .site-header, .hero, .section, .cta-band, .site-footer { padding-left: var(--gl); padding-right: var(--gr); }
.wrap { max-width: var(--wrap); margin: 0 auto; }

h1, h2, h3 { margin: 0; text-wrap: balance; }
h1 { font-family: var(--f-body); font-weight: 700; font-style: italic; font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1.05;
  color: var(--title-a); text-shadow: 2px 2px 0 var(--yellow), 4px 4px 0 var(--red); }
h1 em { color: var(--red); text-shadow: 2px 2px 0 var(--yellow), 4px 4px 0 var(--title-a); }
h2 { font-family: var(--f-pixel); font-weight: 400; font-size: clamp(2.1rem, 5vw, 2.9rem); line-height: 1; color: var(--title-a); letter-spacing: 0.01em; }
h3 { font-family: var(--f-ui); font-size: 1.1rem; font-weight: 700; }
p { margin: 0; }
.lede { font-size: 1.25rem; max-width: 42rem; }
.prose { display: grid; gap: 1rem; max-width: 42rem; }

/* Ticker */
.topbar { background: var(--black); padding-block: 0; overflow: hidden; border-bottom: 2px solid var(--lo); }
.ticker { overflow: hidden; white-space: nowrap; font-family: var(--f-pixel); font-size: 1.35rem; color: var(--lime); padding-block: 2px; }
.ticker span { display: inline-block; padding-left: 100%; animation: tick 38s linear infinite; }
@keyframes tick { to { transform: translateX(-100%); } }
.topbar-row { display: none; }

/* Status lights */
.status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-pixel); font-size: 1.25rem; }
.status::before { content: ""; width: 10px; height: 10px; background: var(--lo); box-shadow: var(--bevel-in); }
.status.is-open::before { background: var(--lime); animation: blink 1.2s steps(2) infinite; }
.status.is-closed::before { background: var(--red); }
@keyframes blink { 50% { opacity: .25; } }

/* Header = window title bar + toolbar */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--win); box-shadow: var(--bevel-out); padding-block: 0; }
.site-header > .wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-block: 6px; }
.brand { display: flex; align-items: center; gap: 8px; color: var(--black); text-decoration: none; margin-right: auto; }
.brand:visited { color: var(--black); }
.brand img { width: 44px; height: 44px; background: var(--paper); padding: 2px; box-shadow: var(--bevel-in); }
.brand-name { font-family: var(--f-8bit); font-size: 0.78rem; line-height: 1.5; color: var(--title-a); }
.brand-name small { display: block; font-size: 0.62rem; color: var(--red); }
.nav { display: none; gap: 4px; }
.nav a, .ghost-btn, .copy-btn, .menu-btn, .areas a, .areas span {
  font-family: var(--f-ui); font-size: 0.9rem; color: var(--black); background: var(--win); text-decoration: none;
  padding: 5px 10px; box-shadow: var(--bevel-out); border: 0; border-radius: 0; cursor: pointer; display: inline-block; }
.nav a:visited, .ghost-btn:visited, .areas a:visited { color: var(--black); }
.nav a:active, .ghost-btn:active, .copy-btn:active, .menu-btn:active, .areas a:active { box-shadow: var(--bevel-in); }
.nav a[aria-current="page"] { box-shadow: var(--bevel-in); background: var(--win-light); font-weight: 700; }
.nav a:hover, .areas a:hover { text-decoration: underline; }
.mobile-nav { background: var(--win); border-top: 1px solid var(--lo); }
.mobile-nav .wrap { display: grid; padding-block: 4px 10px; }
.mobile-nav a { font-family: var(--f-ui); color: var(--black); padding: 8px 6px; text-decoration: none; border-bottom: 1px dotted var(--lo); }
.mobile-nav a:hover { background: var(--title-a); color: var(--hi); }
.header-call { display: none; }
@media (min-width: 1020px) { .nav { display: flex; flex-wrap: wrap; } .menu-btn { display: none; } .mobile-nav { display: none !important; } }
@media (min-width: 860px) { .header-call { display: inline-flex; } }

/* The big call button: yellow, beveled, chunky */
.call-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--yellow); color: var(--black);
  font-family: var(--f-ui); font-weight: 700; font-size: 1rem; text-decoration: none; padding: 8px 14px; box-shadow: var(--bevel-out); white-space: nowrap; }
.call-btn:visited { color: var(--black); }
.call-btn:hover { text-decoration: underline; }
.call-btn:active { box-shadow: var(--bevel-in); }
.call-btn svg { width: 18px; height: 18px; flex: none; }

/* Windows */
.hero, .section, .cta-band { padding-block: 14px; background: transparent; }
.hero > .wrap, .section > .wrap, .cta-band > .wrap {
  background: var(--win); box-shadow: var(--bevel-out), 4px 4px 0 rgba(0,0,0,.35); padding: 0 18px 22px; display: grid; gap: 20px; }
.hero { padding-top: 18px; }
.hero::before, .section > .wrap::before, .cta-band > .wrap::before {
  display: block; margin: 3px -15px 0; padding: 3px 8px; color: var(--hi); font-family: var(--f-ui); font-weight: 700; font-size: 0.85rem;
  background: linear-gradient(90deg, var(--title-a), var(--title-b)); }
.section > .wrap::before { content: "Gibbon Locksmith - Netscape Navigator"; }
.cta-band > .wrap::before { content: "IMPORTANT MESSAGE"; background: linear-gradient(90deg, #800000, #d01010); }
.hero::before { content: none; }
.hero > .wrap { position: relative; padding-top: 36px; }
.hero > .wrap::before { content: "http://gibbonlocksmithredfern.com/"; position: absolute; left: 3px; right: 3px; top: 3px; padding: 3px 8px;
  color: var(--hi); font: 700 0.85rem var(--f-ui); background: linear-gradient(90deg, var(--title-a), var(--title-b)); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hero > .wrap::after, .section > .wrap::after { content: "_ \25A1 \00D7"; position: absolute; right: 8px; top: 5px; color: var(--hi); font: 700 0.75rem var(--f-ui);
  letter-spacing: 6px; background: transparent; }
.section > .wrap { position: relative; }
.section > .wrap::after { top: 6px; color: var(--hi); }
@media (min-width: 900px) { .hero > .wrap { grid-template-columns: 1.5fr 1fr; align-items: start; } }
.page-hero > .wrap { grid-template-columns: 1fr !important; }
.hero-copy { display: grid; gap: 16px; min-width: 0; background: var(--paper); box-shadow: var(--bevel-in); padding: 18px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.crumbs { font-family: var(--f-pixel); font-size: 1.2rem; }

/* Eyebrow = blinking-ish "NEW!" label */
.eyebrow { font-family: var(--f-pixel); font-size: 1.3rem; color: var(--red); text-transform: uppercase; letter-spacing: 0.04em; }
.eyebrow::before { content: "\2605 "; color: var(--title-a); }

/* Contact dialog in hero */
.plate { background: var(--win); box-shadow: var(--bevel-out); padding: 30px 14px 14px; display: grid; gap: 12px; position: relative; min-width: 0; }
.plate::before { content: "Contact.exe"; position: absolute; inset: 3px 3px auto; padding: 3px 8px; color: var(--hi); font: 700 0.85rem var(--f-ui);
  background: linear-gradient(90deg, var(--title-a), var(--title-b)); }
.plate dl { margin: 0; display: grid; gap: 10px; background: var(--paper); box-shadow: var(--bevel-in); padding: 12px; }
.plate dt { font-family: var(--f-ui); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.plate dd { margin: 0; font-family: var(--f-pixel); font-size: 1.4rem; line-height: 1.1; }
.plate .big { font-family: var(--f-8bit); font-size: 1rem; color: var(--red); line-height: 1.5; user-select: all; }

/* Section content */
.section-head { display: grid; gap: 8px; }
.section-head p { max-width: 46rem; }
.section-alt > .wrap { background: var(--win); }

.services { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .services { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .services { grid-template-columns: repeat(3, 1fr); } }
.service { background: var(--paper); box-shadow: var(--bevel-in); padding: 14px; display: grid; gap: 6px; align-content: start; text-decoration: none; color: var(--fg); min-width: 0; }
.service:visited { color: var(--fg); }
.service h3 { color: var(--link); text-decoration: underline; font-family: var(--f-body); font-size: 1.3rem; }
.service:visited h3 { color: var(--visited); }
.service:hover { background: #ffffcc; }
.service .ico { width: 36px; height: 36px; color: var(--title-a); }
.service p { font-size: 1.05rem; color: var(--muted); }
.service .more { font-family: var(--f-pixel); font-size: 1.2rem; color: var(--red); }

.facts { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .facts { grid-template-columns: 1fr 1fr; } }
.fact { display: grid; gap: 4px; background: var(--paper); box-shadow: var(--bevel-in); padding: 14px; align-content: start; }
.fact h3::before { content: "\25BA "; color: var(--red); }
.fact p { color: var(--muted); }

.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; counter-reset: step; }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps li { counter-increment: step; display: grid; gap: 6px; align-content: start; background: var(--paper); box-shadow: var(--bevel-in); padding: 14px; }
.steps li::before { content: "STEP " counter(step); font-family: var(--f-8bit); font-size: 0.7rem; color: var(--hi); background: var(--title-a); padding: 4px 6px; justify-self: start; }
.steps strong { font-family: var(--f-ui); }
.steps span { color: var(--muted); font-size: 1.02rem; }

.areas { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }

.two-col { display: grid; gap: 18px; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1.4fr 1fr; align-items: start; } }
.two-col > * { min-width: 0; }
.two-col .prose { background: var(--paper); box-shadow: var(--bevel-in); padding: 16px; max-width: none; }
.aside { background: #ffffcc; box-shadow: var(--bevel-in); padding: 16px; display: grid; gap: 12px; }
.aside h3 { font-family: var(--f-pixel); font-weight: 400; font-size: 1.8rem; color: var(--red); }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.checklist li { padding-left: 24px; position: relative; }
.checklist li::before { content: "\2714"; position: absolute; left: 0; color: #008000; font-weight: 700; }

.faq { display: grid; gap: 6px; background: var(--paper); box-shadow: var(--bevel-in); padding: 10px; }
.faq details { border-bottom: 1px dotted var(--lo); }
.faq details:last-child { border-bottom: 0; }
.faq summary { cursor: pointer; padding: 8px 4px; font-family: var(--f-ui); font-weight: 700; font-size: 1rem; color: var(--link); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "[+] "; font-family: var(--f-pixel); font-size: 1.2rem; color: var(--black); }
.faq details[open] summary::before { content: "[-] "; }
.faq details p { padding: 0 4px 12px 32px; }

.suburbs { display: grid; gap: 12px; }
@media (min-width: 900px) { .suburbs { grid-template-columns: 1fr 1fr; } }
.suburb { background: var(--paper); box-shadow: var(--bevel-in); padding: 14px; display: grid; gap: 4px; scroll-margin-top: 90px; }
.suburb h3 { font-family: var(--f-body); font-size: 1.35rem; color: var(--title-a); }
.suburb:target { background: #ffffcc; }

/* CTA */
.cta-band > .wrap { display: grid; gap: 14px; justify-items: start; background: var(--yellow); }
@media (min-width: 760px) { .cta-band > .wrap { grid-template-columns: 1fr auto; align-items: center; } .cta-band > .wrap::before { grid-column: 1 / -1; } }
.cta-band h2 { color: var(--red); font-size: clamp(2.2rem, 5vw, 3.2rem); animation: blink 1.6s steps(2) infinite; }
.cta-band p { font-family: var(--f-ui); font-weight: 700; }
.cta-band .call-btn { font-size: 1.15rem; background: var(--win); padding: 12px 18px; }

/* Contact */
.contact-grid { display: grid; gap: 14px; }
@media (min-width: 820px) { .contact-grid { grid-template-columns: repeat(3, 1fr); } }
.contact-card { background: var(--paper); box-shadow: var(--bevel-in); padding: 14px; display: grid; gap: 8px; align-content: start; }
.contact-card .label { font-family: var(--f-8bit); font-size: 0.65rem; color: var(--red); }
.contact-card .value { font-family: var(--f-pixel); font-size: 1.7rem; line-height: 1.1; user-select: all; }
.copy-btn { justify-self: start; }
.hours { width: 100%; border-collapse: collapse; font-family: var(--f-pixel); font-size: 1.2rem; font-variant-numeric: tabular-nums; border: 2px outset var(--win); }
.hours td { padding: 2px 6px; border: 1px inset var(--win); }
.hours td:last-child { text-align: right; }
.hours tr.today td { background: var(--title-a); color: var(--hi); }

/* Footer */
.site-footer { padding-block: 14px 24px; }
.site-footer > .wrap { background: var(--win); box-shadow: var(--bevel-out), 4px 4px 0 rgba(0,0,0,.35); padding: 18px; display: grid; gap: 18px; font-size: 1.05rem; }
@media (min-width: 820px) { .site-footer > .wrap { grid-template-columns: 1.3fr 1fr 1fr; } }
.site-footer h3 { font-family: var(--f-pixel); font-weight: 400; font-size: 1.6rem; color: var(--title-a); margin-bottom: 6px; }
.site-footer ul { list-style: square; margin: 0; padding-left: 20px; display: grid; gap: 2px; }
.site-footer address { font-style: normal; }
.badges { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; border-top: 2px groove var(--hi); padding-top: 14px; }
.badge { width: 88px; height: 31px; display: grid; place-content: center; text-align: center; font: 700 9px/1.1 var(--f-ui); color: var(--hi); border: 1px solid var(--black); box-shadow: inset 1px 1px rgba(255,255,255,.5); }
.badge b { display: block; font-size: 10px; }
.b1 { background: linear-gradient(var(--title-b), var(--title-a)); }
.b2 { background: linear-gradient(#20a020, #005000); }
.b3 { background: linear-gradient(#ff6060, #800000); }
.b4 { background: linear-gradient(#ffd040, #a06000); color: var(--black); }
.legal { grid-column: 1 / -1; text-align: center; font-family: var(--f-pixel); font-size: 1.15rem; }

/* Mobile taskbar */
.callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: var(--win); box-shadow: inset 0 1px var(--hi), inset 0 2px var(--win-light);
  border-top: 1px solid var(--win-light);
  padding: 6px max(10px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px));
  display: flex; gap: 8px; align-items: center; }
.callbar .call-btn { flex: 1; font-size: 1.05rem; }
.callbar .status { box-shadow: var(--bevel-in); padding: 4px 8px; font-size: 1.1rem; }
@media (min-width: 860px) { .callbar { display: none; } }

/* Header call button: only where it fits beside the toolbar */
.call-btn.header-call { display: none; }
@media (min-width: 1440px) { .call-btn.header-call { display: inline-flex; } }
.callbar .status { white-space: nowrap; font-size: 1rem; }