/* Self-hosted fonts (SIL Open Font License) */
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/chakra-petch-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/chakra-petch-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2")}
/* Layout: repair-bench site in the Amass Computer brand: royal blue bands, shop orange buttons, logo yellow labels; content in a 1160px wrap. Light only. */
:root {
  --paper: #F4F7FD;
  --surface: #FFFFFF;
  --ink: #12244F;
  --muted: #4A5A7C;
  --line: #D3DCEE;
  --mask: #1C4FC4;
  --mask-2: #143A94;
  --on-mask: #FFFFFF;
  --on-mask-muted: #DCE6FF;
  --copper: #C4460B;
  --copper-ink: #FFFFFF;
  --copper-soft: #FDE7D8;
  --sun: #FFE45C;
  --wa: #1F8F4E;
  --focus: #F59E0B;
  --display: "Chakra Petch", "Bahnschrift", "Arial Narrow", sans-serif;
  --body: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --s-1: .8125rem; --s0: 1rem; --s1: 1.1875rem; --s2: 1.5rem; --s3: 2rem; --s4: clamp(2.1rem, 4.6vw, 3.4rem);
  --radius: 6px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 var(--s0)/1.6 var(--body);
}
img, svg { max-width: 100%; }
a { color: inherit; text-decoration-color: var(--copper); text-underline-offset: 3px; }
a:hover { color: var(--copper); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--display); line-height: 1.15; text-wrap: balance; margin: 0; letter-spacing: -.005em; }
h1 { font-size: var(--s4); font-weight: 700; }
h2 { font-size: var(--s3); font-weight: 600; }
h3 { font-size: var(--s1); font-weight: 600; }
p { margin: 0; max-width: 65ch; }
address { font-style: normal; }

.wrap {
  width: 100%; max-width: 1160px; margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.narrow > * { max-width: 820px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--copper); color: var(--copper-ink); padding: 8px 12px; z-index: 50; }
.skip:focus { left: 8px; }

.eyebrow {
  font: 500 var(--s-1)/1.3 var(--mono); text-transform: uppercase; letter-spacing: .09em; color: var(--copper);
}
.eyebrow-silk { color: var(--copper); }
.lead { font-size: var(--s1); color: var(--muted); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 10px 20px; border-radius: var(--radius);
  font: 600 var(--s0)/1.2 var(--body); text-decoration: none; border: 2px solid transparent;
  transition: transform .15s ease, background-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-copper { background: var(--copper); color: var(--copper-ink); }
.btn-copper:hover { color: var(--copper-ink); filter: brightness(1.06); }
.btn-silk { border-color: var(--on-mask); color: var(--on-mask); }
.btn-silk:hover { background: var(--on-mask); color: var(--mask); }
.btn-ghost { border-color: var(--ink); color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-wa { background: var(--wa); color: #fff; width: 100%; }
.btn-wa:hover { color: #fff; filter: brightness(1.08); }

/* Header */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--mask-2); }
.site-head {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: var(--mask-2); color: var(--on-mask); border-bottom: 1px solid rgba(238, 242, 234, .12);
}
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.brand:hover { color: inherit; }
.logo { color: var(--on-mask); flex: none; }
.brand-name { display: flex; flex-direction: column; font: 700 1.05rem/1.1 var(--display); letter-spacing: .01em; }
.brand-name small { font: 400 .72rem/1.3 var(--mono); color: var(--on-mask-muted); letter-spacing: .04em; margin-top: 3px; }
.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav a:not(.btn) {
  padding: 8px 12px; text-decoration: none; font-weight: 500; color: var(--on-mask-muted); border-radius: 4px;
}
.site-nav a:not(.btn):hover, .site-nav a[aria-current="page"] { color: var(--on-mask); }
.site-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--copper); border-radius: 0; }
.nav-call { margin-left: 8px; min-height: 40px; padding: 8px 14px; font-size: .95rem; }
.nav-toggle {
  display: none; align-items: center; gap: 8px; background: none; border: 1px solid rgba(238, 242, 234, .3);
  color: var(--on-mask); border-radius: var(--radius); padding: 8px 12px; font: 500 .95rem var(--body); cursor: pointer;
}
.bars, .bars::before, .bars::after { display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
.bars::before, .bars::after { content: ""; position: absolute; left: 0; }
.bars::before { top: -6px; } .bars::after { top: 6px; }
@media (max-width: 880px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0; background: var(--mask-2);
    padding: 8px max(16px, env(safe-area-inset-right, 0px)) 16px max(16px, env(safe-area-inset-left, 0px));
    border-bottom: 1px solid rgba(238, 242, 234, .12);
  }
  .site-nav.open { display: flex; }
  .site-nav a:not(.btn) { padding: 12px 4px; border-bottom: 1px solid rgba(238, 242, 234, .1); }
  .site-nav a[aria-current="page"] { box-shadow: none; color: var(--copper); }
  .nav-call { margin: 12px 0 0; }
  .no-js .site-nav { display: flex; position: static; }
}

/* Hero: solder mask with copper traces */
.hero, .page-hero, .site-foot {
  background-color: var(--mask); color: var(--on-mask);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='.10' stroke-width='2'%3E%3Cpath d='M0 40h70l20 20h60l20-20h70M0 150h40l30 30h90M120 0v40M200 60v60l-30 30v90M30 240v-50l40-40'/%3E%3C/g%3E%3Cg fill='%23FFE45C' fill-opacity='.22'%3E%3Ccircle cx='70' cy='40' r='4'/%3E%3Ccircle cx='170' cy='40' r='4'/%3E%3Ccircle cx='160' cy='180' r='4'/%3E%3Ccircle cx='200' cy='120' r='4'/%3E%3Ccircle cx='70' cy='150' r='4'/%3E%3C/g%3E%3C/svg%3E");
}
.hero { padding-block: clamp(40px, 7vw, 88px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.hero-copy { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.hero .lead, .page-hero .lead { color: var(--on-mask-muted); }
.hero h1 { max-width: 16ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.facts { list-style: none; padding: 18px 0 0; margin: 4px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; border-top: 1px solid rgba(238, 242, 234, .18); }
.facts li { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.facts strong { font: 700 var(--s2)/1.1 var(--display); color: var(--on-mask); }
.facts span { font-size: var(--s-1); color: var(--on-mask-muted); }

.page-hero { padding-block: clamp(36px, 6vw, 72px); }
.page-hero .wrap { display: flex; flex-direction: column; gap: 16px; }
.crumbs { display: flex; gap: 8px; font: 400 var(--s-1) var(--mono); color: var(--on-mask-muted); }
.crumbs a { color: var(--on-mask-muted); }

/* Job ticket form */
.ticket {
  position: relative; background: var(--surface); color: var(--ink);
  border-radius: var(--radius); padding: 26px 24px 22px 30px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55); min-width: 0;
}
.ticket::before {
  content: ""; position: absolute; left: 10px; top: 14px; bottom: 14px; width: 6px;
  background: radial-gradient(circle, var(--line) 2.5px, transparent 3px) 0 0 / 6px 14px repeat-y;
}
.ticket-top { display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px; border-bottom: 1px dashed var(--line); }
.ticket-kicker { font: 500 var(--s-1) var(--mono); text-transform: uppercase; letter-spacing: .09em; color: var(--copper); }
.ticket-title { font-size: var(--s2); }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font: 500 var(--s-1) var(--mono); letter-spacing: .03em; color: var(--muted); }
.field input, .field select, .field textarea {
  font: 400 var(--s0) var(--body); color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; width: 100%;
}
.field textarea { resize: vertical; min-height: 84px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--copper); outline: 2px solid var(--copper-soft); }
.field [aria-invalid="true"] { border-color: #C2412D; }
.form-msg { font-size: var(--s-1); color: #C2412D; min-height: 0; }
.form-msg:empty { display: none; }
.ticket-note { font-size: var(--s-1); color: var(--muted); }

/* Sections */
.section { padding-block: clamp(48px, 7vw, 88px); }
.section-alt { background: var(--surface); border-block: 1px solid var(--line); }
.section-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: clamp(24px, 4vw, 40px); }
.more { margin-top: 28px; }
.link-arrow { font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--copper); padding-bottom: 2px; }
.link-arrow::after { content: " \2192"; }

/* Repair levels: copper trace joining four pads, depth meter grows with level */
.levels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; position: relative; }
.levels::before { content: ""; position: absolute; left: 24px; right: 24px; top: 23px; height: 2px; background: var(--copper); opacity: .55; }
.level { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pad {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; position: relative; z-index: 1;
  background: var(--copper); color: var(--copper-ink); font: 600 .95rem var(--mono); box-shadow: 0 0 0 6px var(--paper);
}
.section-alt .pad { box-shadow: 0 0 0 6px var(--surface); }
.level p { color: var(--muted); }
.depth { display: block; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; margin-top: auto; }
.depth i { display: block; height: 100%; width: calc(var(--d) * 25%); background: var(--mask); }

/* Faults */
.faults { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
.faults li { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; padding: 20px 0; border-top: 1px solid var(--line); }
.faults .code { grid-row: span 2; font: 500 .8rem/1 var(--mono); color: var(--copper); border: 1px solid var(--copper); border-radius: 3px; padding: 6px 0; text-align: center; height: max-content; letter-spacing: .05em; }
.faults p { color: var(--muted); font-size: .95rem; }

/* Steps: a real sequence */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; counter-reset: step; }
.steps li { counter-increment: step; display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 3px solid var(--mask); min-width: 0; }
.steps li::before { content: "Step " counter(step); font: 500 var(--s-1) var(--mono); color: var(--copper); text-transform: uppercase; letter-spacing: .08em; }
.steps p { color: var(--muted); }

/* Brands */
.brands-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px; align-items: center; }
.brands-row > div { display: flex; flex-direction: column; gap: 12px; }
.brands { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.brands li {
  font: 700 var(--s2)/1 var(--display); text-align: center; padding: 22px 8px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--paper); letter-spacing: .02em;
}
.section-alt .brands li { background: var(--paper); }

/* Reviews */
.reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.review { margin: 0; display: flex; flex-direction: column; gap: 14px; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.section-alt .review { background: var(--paper); }
.stars { color: var(--copper); letter-spacing: 3px; font-size: 1.05rem; }
.review blockquote { margin: 0; }
.review blockquote p { font-size: .98rem; }
.review figcaption { margin-top: auto; display: flex; flex-direction: column; font-size: .95rem; }
.review figcaption span { font: 400 var(--s-1) var(--mono); color: var(--muted); }

/* FAQ */
.faq { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font: 500 1.5rem var(--mono); color: var(--copper); }
.faq details[open] summary::after { content: "\2212"; }
.faq summary h3 { display: inline; font-size: var(--s1); }
.faq details p { padding: 0 0 22px; color: var(--muted); }

/* Two column + lists */
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.two-col > div { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.two-col h2 + p, .two-col p + p { margin-top: 0; }
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.checklist li { padding: 12px 0 12px 30px; border-bottom: 1px solid var(--line); position: relative; }
.checklist li::before { content: ""; position: absolute; left: 4px; top: 19px; width: 10px; height: 10px; border-radius: 50%; background: var(--copper); }

/* Visit */
.visit-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.visit-grid > div { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.contact-list { margin: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.contact-list > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.contact-list dt { font: 500 var(--s-1)/1.7 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.contact-list dd { margin: 0; overflow-wrap: anywhere; }

/* Footer */
.site-foot { padding-block: 56px 28px; margin-top: 0; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr .8fr .8fr; gap: 32px; }
.foot-grid > div { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.foot-grid p, .foot-grid address { color: var(--on-mask-muted); font-size: .95rem; }
.foot-h { font: 500 var(--s-1) var(--mono); text-transform: uppercase; letter-spacing: .09em; color: var(--copper); }
.foot-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.foot-links a, .site-foot address a { color: var(--on-mask-muted); text-decoration: none; }
.foot-links a:hover, .site-foot address a:hover { color: var(--on-mask); text-decoration: underline; }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(238, 242, 234, .15); font-size: var(--s-1); color: var(--on-mask-muted); }
.foot-base p { max-width: none; }
.social { display: flex; flex-wrap: wrap; gap: 16px; }
.social a { color: var(--on-mask-muted); }

/* WhatsApp float */
.wa-float {
  position: fixed; z-index: 30;
  right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 999px;
  background: var(--wa); color: #fff; text-decoration: none; font-weight: 600; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .45);
}
.wa-float:hover { color: #fff; filter: brightness(1.08); }

/* Responsive */
@media (max-width: 980px) {
  .hero-grid, .two-col, .visit-grid, .brands-row { grid-template-columns: minmax(0, 1fr); }
  .levels, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .levels::before { display: none; }
  .faults, .reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .levels, .steps, .faults, .reviews, .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .facts { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .facts li { flex-direction: row; align-items: baseline; gap: 10px; }
  .brands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-list > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .wa-float span { display: none; }
  .wa-float { padding: 14px; }
  .brand-name { font-size: .95rem; }
  .ticket { padding: 22px 18px 20px 26px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
  .btn:hover { transform: none; }
}

/* Photos: shopfront and team */
.brands { display: flex; flex-wrap: wrap; }
.brands li { flex: 1 1 110px; }
.shopfront { margin: 8px 0 0; display: flex; flex-direction: column; gap: 8px; width: 100%; }
.shopfront img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); }
.shopfront figcaption { font: 400 var(--s-1) var(--mono); color: var(--muted); }
.team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.person { margin: 0; display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 20px; align-items: start; }
.person img { width: 160px; height: 160px; object-fit: cover; border-radius: 50%; border: 3px solid var(--copper); max-width: 100%; }
.person figcaption { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.person .role { font: 500 var(--s-1) var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--copper); }
.person p:not(.role) { color: var(--muted); }
.site-foot .pay { font-size: var(--s-1); }
@media (max-width: 980px) { .team { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .person { grid-template-columns: minmax(0, 1fr); }
  .person img { width: 120px; height: 120px; }
}

/* Background media: old site's slideshow and videos under a solder-mask shade */
.has-media { position: relative; isolation: isolate; overflow: hidden; }
.has-media > .wrap { position: relative; z-index: 1; }
.bg-media { position: absolute; inset: 0; z-index: 0; background: var(--mask-2); }
.bg-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.bg-shade { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(16, 48, 140, .84) 0%, rgba(16, 48, 140, .62) 55%, rgba(16, 48, 140, .36) 100%); }
.hero.has-media, .page-hero.has-media { background-image: none; }
.slides > span:not(.bg-shade) {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; animation: slide 15s linear infinite;
}
.slides > span:nth-child(1) { opacity: 1; animation-delay: 0s; }
.slides > span:nth-child(2) { animation-delay: -10s; }
.slides > span:nth-child(3) { animation-delay: -5s; }
@keyframes slide {
  0% { opacity: 1; transform: scale(1.06); }
  30% { opacity: 1; }
  33.33% { opacity: 0; transform: scale(1); }
  96.67% { opacity: 0; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1.06); }
}
.has-media.paused .slides > span { animation-play-state: paused; }
.video-band { color: var(--on-mask); padding-block: clamp(64px, 10vw, 120px); }
.video-band-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.video-band h2 { font-size: var(--s4); max-width: 18ch; }
.video-band .lead { color: var(--on-mask-muted); }
.media-toggle {
  position: absolute; z-index: 2;
  left: max(16px, env(safe-area-inset-left, 0px)); bottom: 12px;
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 4px;
  background: rgba(16, 40, 110, .72); color: var(--on-mask); border: 1px solid rgba(238, 242, 234, .35);
  font: 500 .75rem var(--mono); letter-spacing: .04em; cursor: pointer;
}
.media-toggle:hover { background: rgba(16, 40, 110, .92); }
.hero .media-toggle { bottom: 12px; }
@media (prefers-reduced-motion: reduce) {
  .slides > span:not(.bg-shade) { animation: none; }
  .slides > span:nth-child(n+2):not(.bg-shade) { opacity: 0; }
}
.faults .code { grid-row: 1; grid-column: 1; align-self: start; }
.faults h3 { grid-column: 2; align-self: center; }
.faults p { grid-column: 2; }
.faults li { align-content: start; }
.faults strong { display: block; grid-column: 2; align-self: center; font: 600 var(--s1)/1.2 var(--display); color: var(--ink); }
.foot-grid .foot-h { font: 500 var(--s-1) var(--mono); color: var(--copper); text-transform: uppercase; letter-spacing: .09em; }
/* Home hero: let the repair pictures show through, keep text side dark */
.hero .bg-shade { background: linear-gradient(100deg, rgba(16, 48, 140, .80) 0%, rgba(16, 48, 140, .50) 50%, rgba(16, 48, 140, .14) 100%); }
.hero h1, .hero .lead, .hero .facts { text-shadow: 0 1px 12px rgba(0, 0, 0, .45); }

/* Bright brand theme: white header, yellow labels on blue */
body::before { background: var(--surface); }
.site-head { background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--line); box-shadow: 0 2px 12px -8px rgba(18, 36, 79, .35); }
.site-head .logo { color: var(--mask-2); }
.site-head .brand-name small { color: var(--muted); }
.site-nav a:not(.btn) { color: var(--muted); }
.site-nav a:not(.btn):hover, .site-nav a[aria-current="page"] { color: var(--mask); }
.site-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--copper); }
.nav-toggle { color: var(--ink); border-color: var(--line); }
@media (max-width: 880px) {
  .site-nav { background: var(--surface); border-bottom: 1px solid var(--line); }
  .site-nav a:not(.btn) { border-bottom-color: var(--line); }
  .site-nav a[aria-current="page"] { color: var(--copper); box-shadow: none; }
}
.hero .eyebrow, .page-hero .eyebrow, .video-band .eyebrow, .eyebrow-silk, .foot-grid .foot-h { color: var(--sun); }
.crumbs, .crumbs a { color: var(--on-mask-muted); }
.site-foot { background-color: var(--mask-2); }
.logo { color: var(--on-mask); }
.btn-silk:hover { color: var(--mask-2); }
.pad { box-shadow: 0 0 0 6px var(--paper); }
.levels::before { opacity: .8; }
.stars { color: #E8A400; }
.faq-q { font: 600 var(--s1)/1.3 var(--display); color: var(--ink); }
.step-t { display: block; font: 600 var(--s1)/1.2 var(--display); color: var(--ink); }
@media (max-width: 420px) {
  .brand-name { font-size: .92rem; }
  .brand-name small { font-size: .62rem; white-space: nowrap; letter-spacing: .02em; }
}
/* Directions video with sound */
.locvideo { margin: 8px 0 0; width: 100%; display: flex; flex-direction: column; gap: 8px; }
.locvideo video { display: block; width: 100%; height: auto; aspect-ratio: 720 / 402; background: var(--mask-2); border-radius: var(--radius); border: 1px solid var(--line); }
.locvideo figcaption { font: 400 var(--s-1) var(--mono); color: var(--muted); }

/* Fault cards: picture on top of each problem */
.faults .fault-img { grid-column: 1 / -1; grid-row: 1; display: block; width: 100%; height: auto; aspect-ratio: 5 / 3; object-fit: cover; border: 1px solid var(--line); border-radius: var(--radius); background: #E6EEFC; margin-bottom: 12px; }
.faults .fault-img ~ .code { grid-row: 2; }
.faults .fault-img ~ strong { grid-row: 2; }
.faults .fault-img ~ p { grid-row: 3; }