/* Hallmark · v2.0.0 · theme: custom · shape: workbench split · hero: text and live alert form left, tall repair photo right · nav: edge-aligned wordmark and seven links · footer: dark mast with sections · signature: the alert form is the hero */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R4 V4 · weakest: S, a split hero is common; made specific by putting the real next step (the alert form) in it instead of a button */

.masthead { border-bottom: 1px solid var(--c-rule); background: var(--c-paper); position: relative; z-index: 5; }
.masthead__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 4.5rem; }
.masthead__nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0 var(--s-1); margin: 0; padding: 0; }
.masthead__nav li { margin: 0; }
.masthead__nav a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-3); color: var(--c-ink); text-decoration: none; font-weight: 700; font-size: var(--t-sm); border-bottom: 3px solid transparent; }
.masthead__nav a:hover { color: var(--c-blue); border-bottom-color: var(--c-blue-line); }
.masthead__nav a[aria-current="page"] { color: var(--c-blue); border-bottom-color: var(--c-blue); }

.hero { padding-block: var(--s-5) var(--s-7); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); grid-template-areas: "text photo" "signup photo"; gap: 0 var(--s-7); align-items: start; }
.hero__text { grid-area: text; align-self: end; }
.hero__signup { grid-area: signup; }
.hero__photo { grid-area: photo; align-self: center; }
.hero h1 { font-size: var(--t-4xl); font-stretch: 85%; max-width: 12ch; }
.hero__signup { margin-top: var(--s-4); padding: var(--s-4) var(--s-5) var(--s-5); border: 2px solid var(--c-blue); border-radius: var(--r-md); background: var(--c-paper); display: grid; gap: var(--s-4); max-width: 30rem; }
.hero__photo img { width: 100%; height: auto; max-height: min(78dvh, 46rem); object-fit: cover; border-radius: var(--r-md); }

.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-2) var(--s-5); }
.skills { display: grid; gap: var(--s-5); grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--s-4); }
.skill img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--r-sm); }
.skill h3 { margin-top: var(--s-4); margin-bottom: var(--s-2); }
.skill figcaption { margin-bottom: 0; }

.ways { list-style: none; padding: 0; margin: var(--s-5) 0 0; display: grid; gap: var(--s-5); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.way { display: grid; gap: var(--s-3); margin: 0; align-content: start; }
.way__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-sm); }
.way h3 { margin-bottom: var(--s-2); }
.way p { margin-bottom: 0; }

.about { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-7); align-items: start; }
.about__photo img { border-radius: var(--r-sm); }

.page-intro { padding-block: var(--s-7) var(--s-6); background: var(--c-blue-soft); }
.page-intro__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-7); align-items: start; }
.next-panel { background: var(--c-blue-deep); color: var(--c-on-blue); border-radius: var(--r-md); padding: var(--s-6); display: grid; gap: var(--s-3); }
.next-panel p { margin: 0; }
.steps { list-style: none; padding: 0; margin: var(--s-5) 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); counter-reset: step; }
.steps li { margin: 0; padding-top: var(--s-4); border-top: 3px solid var(--c-blue); counter-increment: step; }
.steps h3::before { content: counter(step) ". "; color: var(--c-blue); }
.skills--wide { margin-top: var(--s-7); }
.narrow { max-width: 46rem; }

.local-nav ul { list-style: none; padding: 0; margin: var(--s-4) 0 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.local-nav li { margin: 0; }
.local-nav a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-4); border: 1.5px solid var(--c-blue); border-radius: var(--r-pill); text-decoration: none; font-weight: 700; background: var(--c-paper); }
.local-nav a:hover { background: var(--c-blue); color: var(--c-on-blue); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-7); align-items: start; }
.split img { border-radius: var(--r-sm); }
.roles, .support-ways { list-style: none; padding: 0; margin: var(--s-4) 0; display: grid; gap: var(--s-3); }
.support-ways { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }
.roles li, .support-ways li { margin: 0; border-top: 1px solid var(--c-rule); padding-top: var(--s-3); }
.roles h3, .support-ways h3 { font-size: var(--t-lg); margin-bottom: var(--s-1); }
.roles p, .support-ways p { margin: 0; }
.v__photo, .p__photo { margin-top: var(--s-5); max-width: 28rem; }

@media (max-width: 64rem) {
  .skills, .ways, .steps { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .support-ways { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 52rem) {
  .js .menu-toggle { display: inline-flex; align-items: center; }
  .js .masthead__nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--c-paper); border-bottom: 1px solid var(--c-rule); box-shadow: 0 12px 24px var(--c-shadow); }
  .js .masthead__nav.is-open { display: block; }
  .masthead__nav ul { flex-direction: column; padding: var(--s-2) var(--gutter) var(--s-4); }
  .js .masthead__nav a { width: 100%; border-bottom: 1px solid var(--c-rule); }
  .masthead__inner { flex-wrap: wrap; }
  .hero { padding-top: var(--s-5); }
  .hero__grid, .about, .page-intro__grid, .split { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .hero__grid { grid-template-areas: "text" "photo" "signup"; gap: var(--s-4); }
  .hero__photo img { max-height: none; aspect-ratio: 4 / 3; object-position: 50% 72%; }
  .hero__signup { margin-top: 0; }
  .hero__signup { padding: var(--s-4); }
}
@media (max-width: 40rem) {
  .skills, .ways, .steps, .support-ways { grid-template-columns: minmax(0, 1fr); }
  .way { grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); align-items: start; }
  .way__img { aspect-ratio: 1 / 1; }
  .skill-noimage { aspect-ratio: auto; min-height: 9rem; }
  .next-panel { padding: var(--s-4); }
}

.paynow { margin: var(--s-5) 0; padding: var(--s-5); border: 2px solid var(--c-blue); border-radius: var(--r-md); background: var(--c-paper); max-width: 34rem; }
.paynow h3 { margin-bottom: var(--s-2); }
.paynow p:last-child { margin-bottom: 0; }

/* Air-con pair (13 Jun 2026): 16fr/9fr gives a 4:3 and a 3:4 photo the same height, so neither is cropped */
.aircon-pair { display: grid; grid-template-columns: minmax(0, 16fr) minmax(0, 9fr); gap: var(--s-5); margin-top: var(--s-6); align-items: start; }
.aircon-pair figure { margin: 0; }
.aircon-pair img { width: 100%; height: auto; border-radius: var(--r-sm); }
@media (max-width: 40rem) {
  .aircon-pair { grid-template-columns: minmax(0, 1fr); }
  .aircon-pair__tall { max-width: 22rem; }
}

/* Legal pages (live site) */
.legal h2 { margin-top: var(--s-7); font-size: var(--t-xl); }
.legal table { width: 100%; border-collapse: collapse; margin: var(--s-4) 0 var(--s-5); font-size: var(--t-sm); }
.legal th, .legal td { text-align: left; vertical-align: top; padding: var(--s-3); border-bottom: 1px solid var(--c-rule); }
.legal th { background: var(--c-blue-soft); }
@media (max-width: 40rem) {
  .legal table, .legal thead, .legal tbody, .legal tr, .legal th, .legal td { display: block; }
  .legal thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .legal td:first-child { font-weight: 700; border-bottom: 0; padding-bottom: 0; }
}

/* ===== Premium pass, 3 Nov 2026: typography (#6) and logo motif (#7) =====
   Motif: circuit traces with round nodes and a partial gear, drawn from the
   logo. Decorative CSS backgrounds only, kept clear of body text.
   Generated with a small script (traces + 12-tooth gear) and inlined. */
:root {
  --motif-on-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 300' fill='none' stroke='rgb%28255 255 255 / 0.11%29' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M420 46H316l-34 34H196'/%3E%3Ccircle cx='188' cy='80' r='8'/%3E%3Cpath d='M420 112H330l-42 42H232'/%3E%3Ccircle cx='224' cy='154' r='8'/%3E%3Cpath d='M420 176H362l-24 24H292'/%3E%3Ccircle cx='284' cy='200' r='8'/%3E%3Cpath d='M260 20v26'/%3E%3Ccircle cx='260' cy='12' r='8'/%3E%3Ccircle cx='316' cy='46' r='3.5' fill='rgb%28255 255 255 / 0.11%29' stroke='none'/%3E%3Ccircle cx='330' cy='112' r='3.5' fill='rgb%28255 255 255 / 0.11%29' stroke='none'/%3E%3Ccircle cx='362' cy='176' r='3.5' fill='rgb%28255 255 255 / 0.11%29' stroke='none'/%3E%3Cpath d='M540.0 340.0L539.1 353.1L556.4 359.1L550.4 381.7L532.4 378.3L526.6 390.0L519.3 400.9L531.3 414.7L514.7 431.3L500.9 419.3L490.0 426.6L478.3 432.4L481.7 450.4L459.1 456.4L453.1 439.1L440.0 440.0L426.9 439.1L420.9 456.4L398.3 450.4L401.7 432.4L390.0 426.6L379.1 419.3L365.3 431.3L348.7 414.7L360.7 400.9L353.4 390.0L347.6 378.3L329.6 381.7L323.6 359.1L340.9 353.1L340.0 340.0L340.9 326.9L323.6 320.9L329.6 298.3L347.6 301.7L353.4 290.0L360.7 279.1L348.7 265.3L365.3 248.7L379.1 260.7L390.0 253.4L401.7 247.6L398.3 229.6L420.9 223.6L426.9 240.9L440.0 240.0L453.1 240.9L459.1 223.6L481.7 229.6L478.3 247.6L490.0 253.4L500.9 260.7L514.7 248.7L531.3 265.3L519.3 279.1L526.6 290.0L532.4 301.7L550.4 298.3L556.4 320.9L539.1 326.9ZM496 340a56 56 0 1 0 -112 0a56 56 0 1 0 112 0Z' stroke-width='2.5'/%3E%3C/svg%3E");
  --motif-on-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 300' fill='none' stroke='rgb%281 36 141 / 0.15%29' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M420 46H316l-34 34H196'/%3E%3Ccircle cx='188' cy='80' r='8'/%3E%3Cpath d='M420 112H330l-42 42H232'/%3E%3Ccircle cx='224' cy='154' r='8'/%3E%3Cpath d='M420 176H362l-24 24H292'/%3E%3Ccircle cx='284' cy='200' r='8'/%3E%3Cpath d='M260 20v26'/%3E%3Ccircle cx='260' cy='12' r='8'/%3E%3Ccircle cx='316' cy='46' r='3.5' fill='rgb%281 36 141 / 0.15%29' stroke='none'/%3E%3Ccircle cx='330' cy='112' r='3.5' fill='rgb%281 36 141 / 0.15%29' stroke='none'/%3E%3Ccircle cx='362' cy='176' r='3.5' fill='rgb%281 36 141 / 0.15%29' stroke='none'/%3E%3C/svg%3E");
}

/* Typography */
body { line-height: 1.6; }
h1, h2 { font-weight: 800; letter-spacing: -0.015em; word-spacing: 0.04em; }
h2 { font-stretch: 90%; }
h3 { letter-spacing: -0.01em; }
.hero h1 { font-weight: 800; line-height: 0.98; letter-spacing: -0.025em; word-spacing: 0.06em; }
.page-intro h1 { font-size: var(--t-4xl); font-stretch: 85%; line-height: 1; letter-spacing: -0.025em; word-spacing: 0.06em; }
.site-footer h2 { letter-spacing: 0; word-spacing: 0; font-stretch: 100%; }
.masthead__nav a { letter-spacing: 0.01em; }
.lede { color: #3d4a63; }
figcaption { display: flex; align-items: center; gap: var(--s-2); letter-spacing: 0.01em; }
figcaption::before { content: ""; flex: none; width: 1.25rem; height: 2px; background: var(--c-blue); }
.listing__date { font-family: var(--f-display); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.005em; }
.listing__title { font-size: var(--t-xl); letter-spacing: -0.01em; }
.team strong { font-family: var(--f-display); font-size: var(--t-lg); letter-spacing: -0.01em; }

/* Steps: large numerals on a circuit trace (a node where the line starts) */
.steps li { position: relative; border-top-width: 2px; padding-top: var(--s-5); }
.steps li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border: 2px solid var(--c-blue); border-radius: 50%; background: var(--c-paper); }
.steps h3::before { content: counter(step, decimal-leading-zero); display: block; margin-bottom: var(--s-3); font-size: var(--t-3xl); font-weight: 800; font-stretch: 80%; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--c-blue); }

/* Section headings end in a short trace with a node, like the logo's circuit */
.section h2::after {
  content: ""; display: block; width: 3.5rem; height: 12px; margin-top: var(--s-3);
  background:
    linear-gradient(var(--c-blue), var(--c-blue)) left center / calc(100% - 11px) 2px no-repeat,
    radial-gradient(circle at calc(100% - 6px) 50%, transparent 0 3px, var(--c-blue) 3.5px 5.5px, transparent 6px);
}
.legal h2::after { content: none; }

/* Motif in the dark panels and the light-blue page bands */
.next-panel { background-image: var(--motif-on-dark); background-repeat: no-repeat; background-position: right -48px bottom -36px; background-size: 380px auto; }
.site-footer { background-image: var(--motif-on-dark); background-repeat: no-repeat; background-position: right -24px bottom -12px; background-size: min(540px, 85vw) auto; }
.page-intro { background-image: var(--motif-on-light); background-repeat: no-repeat; background-position: right -24px top 28px; background-size: 460px auto; }
@media (max-width: 40rem) {
  .page-intro { background-image: none; }
  .site-footer { background-size: 320px auto; background-position: right -80px bottom -20px; }
}

/* ===== Premium pass, 3 Nov 2026: brand blue and logo system (#3), photos (#2) =====
   Workbench now uses the logo's blue (#01248D); concepts 02-05 keep the shared tokens. */
:root {
  --c-blue: #01248d;
  --c-blue-deep: #001a66;
  --c-blue-mid: #2346b8;
  --c-blue-soft: #e8edfa;
  --c-blue-line: #c2cdef;
  --c-focus: #001a66;
  --c-shadow: rgb(1 26 102 / 0.14);
}
/* Vector logos: wide lockup in the header, reversed stacked logo on the dark footer (no white box) */
.wordmark--horizontal img { height: 3rem; width: auto; }
.on-dark .wordmark--reversed img, .wordmark--reversed img { height: 5.25rem; width: auto; background: none; padding: 0; border-radius: 0; }
@media (max-width: 40rem) { .wordmark--horizontal img { height: 2.6rem; } }

/* Photos: a soft tint holds the space, then the image fades in (site.js adds .img-fade only on the live site) */
.skill img, .way__img, .about__photo img, .split img, .aircon-pair img, .hero__photo img, .v__photo img, .p__photo img { background: var(--c-blue-soft); }
.img-fade img[loading="lazy"] { opacity: 0; transition: opacity 450ms var(--ease); }
.img-fade img[loading="lazy"].is-loaded { opacity: 1; }